/* ============================================================ Spaqi — "Technoit" light theme Light & bright IT-agency look: white surfaces, vivid azure accent (#025add), Poppins headings + Open Sans body, soft shadows, rounded cards, blue particle hero. Loaded AFTER style.css so it re-skins the dark base to light. ============================================================ */ :root { --blue: #025add; --blue-2: #2d8fff; --blue-dark: #0146b0; --yellow: #ffc107; --accent-color: #025add; --accent-color-2: #2d8fff; --accent-color-3: #2d8fff; --accent-gradient: linear-gradient(135deg, #025add 0%, #2d8fff 100%); --text-color: #5a6472; --muted-text-color: #7a8699; --heading-color: #1f2733; --border-color: #e8edf5; --page-bg: #f6f8fc; --surface: #ffffff; --soft-shadow: 0 1px 20px rgba(82, 90, 101, 0.08); } /* ---------- AI background image (fixed, tinted to match the blue theme) ---------- */ #bg-image { position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: linear-gradient(135deg, rgba(2, 90, 221, 0.14), rgba(45, 143, 255, 0.05) 55%, rgba(246, 248, 252, 0.55)), url('images/background_ai.jpg'); background-size: cover, cover; background-position: center, center right; background-repeat: no-repeat, no-repeat; } /* ---------- Site-wide particle background (gray, visible on light) ---------- */ #particles-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; } #particles-bg canvas { display: block; } /* ---------- Base / typography ---------- */ /* Page bg lives on and is transparent so the fixed #particles-bg layer (z-index:-1) shows through behind content. */ html { background: radial-gradient(circle at 88% 6%, rgba(2, 90, 221, 0.06), transparent 36rem), radial-gradient(circle at 6% 96%, rgba(45, 143, 255, 0.06), transparent 34rem), var(--page-bg); } body { font-family: 'Open Sans', system-ui, sans-serif; color: var(--text-color); background: transparent; } body::before { display: none; } body::after { display: none; } h1, h2, h3, h4, .brand, .expertise-card h3, .software-card-body h3, .track-card h3, .ai-card h3 { font-family: 'Poppins', system-ui, sans-serif; color: var(--heading-color); } /* ---------- Header ---------- */ .site-header, header { background: rgba(255, 255, 255, 0.42); border-bottom: 1px solid var(--border-color); box-shadow: 0 1px 20px rgba(82, 90, 101, 0.06); } .header-aurora { display: none; } /* Logo is white-on-transparent — keep it on a blue chip so it stays visible */ header > a[aria-label*="Spaqi"] { background: linear-gradient(135deg, #025add, #2d8fff); border: 0; box-shadow: 0 16px 40px rgba(2, 90, 221, 0.28); } .header-logo { filter: none; } /* Legal pages: bare white logo needs a blue chip to stay visible on the light header */ #header-logo { background: linear-gradient(135deg, #025add, #2d8fff); padding: 1rem 1.4rem; border-radius: 22px; box-shadow: 0 16px 40px rgba(2, 90, 221, 0.28); max-width: 240px; } header nav { background: #ffffff; border: 1px solid var(--border-color); box-shadow: var(--soft-shadow); } header nav ul li a { color: var(--heading-color); } header nav ul li a:hover { color: var(--blue); background: rgba(2, 90, 221, 0.08); } /* ---------- Eyebrows / badges ---------- */ .eyebrow, .bootcamp-badge { color: var(--blue); background: rgba(2, 90, 221, 0.08); border: 1px solid rgba(2, 90, 221, 0.18); box-shadow: none; } /* ---------- Headings: solid dark (undo gradient text) ---------- */ .company-intro h2, #hero h2, .academy-hero h2 { background: none; color: var(--heading-color); -webkit-text-fill-color: var(--heading-color); } .company-intro p, #hero p, .academy-hero p, .section-subtitle { color: var(--text-color); } /* ---------- Sections ---------- */ section { background: #ffffff; border: 1px solid var(--border-color); box-shadow: var(--soft-shadow); } section::before { display: none; } #hero { background: transparent; border: 0; box-shadow: none; } /* ---------- Hero visual: blue particle panel ---------- */ .hero-orbit { background: linear-gradient(135deg, #025add 0%, #2d8fff 100%); border: 0; box-shadow: 0 30px 60px rgba(2, 90, 221, 0.3); } .hero-orbit::before { border-color: rgba(255, 255, 255, 0.35); box-shadow: none; } .hero-orbit::after { border-color: rgba(255, 255, 255, 0.45); } #hexagon-canvas canvas { filter: drop-shadow(0 18px 30px rgba(2, 90, 221, 0.25)); } .floating-chip { color: var(--heading-color); background: #ffffff; border: 1px solid var(--border-color); box-shadow: 0 12px 30px rgba(31, 39, 51, 0.12); } .hero-service-labels .floating-chip { background: #ffffff; border-color: var(--border-color); } .hero-service-labels .floating-chip:hover { border-color: var(--blue); box-shadow: 0 14px 38px rgba(2, 90, 221, 0.16); } .hero-service-labels .floating-chip span { color: var(--blue); opacity: 1; } @keyframes serviceLabelDrift { 0%, 100% { transform: translateX(0); border-color: var(--border-color); } 50% { transform: translateX(5px); border-color: rgba(2, 90, 221, 0.3); } } /* ---------- Cards ---------- */ .expertise-card, .software-card, .track-card, .ai-card, .faq-item { background: #ffffff; border: 1px solid var(--border-color); box-shadow: var(--soft-shadow); } .expertise-card::before, .software-card::before, .track-card::before, .ai-card::before, .faq-item::before { background: linear-gradient(135deg, rgba(2, 90, 221, 0.06), transparent 42%, rgba(45, 143, 255, 0.06)); } .expertise-card:hover, .software-card:hover, .track-card:hover, .ai-card:hover, .faq-item:hover, .expertise-card.is-tilting, .software-card.is-tilting, .track-card.is-tilting, .ai-card.is-tilting, .faq-item.is-tilting { border-color: rgba(2, 90, 221, 0.3); box-shadow: 0 24px 50px rgba(2, 90, 221, 0.16); } .expertise-card p, .software-card-body p, .ai-card p, .process-step p, .faq-item p, .faq-item summary, .track-card .curriculum li { color: var(--text-color); } .faq-item summary { color: var(--heading-color); } /* ---------- Icon chips ---------- */ .expertise-icon, .track-icon, .ai-card-icon { background: linear-gradient(135deg, rgba(2, 90, 221, 0.14), rgba(45, 143, 255, 0.14)); border: 1px solid rgba(2, 90, 221, 0.16); box-shadow: none; color: var(--blue); } .expertise-icon img, .expertise-icon svg, .track-icon svg, .ai-card-icon svg { filter: drop-shadow(0 6px 12px rgba(2, 90, 221, 0.25)); } .process-step .step-number { background: var(--accent-gradient); color: #fff; border: 0; box-shadow: 0 10px 24px rgba(2, 90, 221, 0.28); } /* ---------- Tags / pills ---------- */ .expertise-tags li, .track-card .track-date, .checkbox-label { color: var(--blue); background: rgba(2, 90, 221, 0.08); border-color: rgba(2, 90, 221, 0.16); } .expertise-card:hover .expertise-tags li { color: var(--blue); background: rgba(2, 90, 221, 0.14); border-color: rgba(2, 90, 221, 0.28); } .checkbox-label { color: var(--heading-color); } .checkbox-label:hover { border-color: var(--blue); background: rgba(2, 90, 221, 0.05); } /* ---------- Software cards ---------- */ .software-card-img { background: #eef3fb; } .software-card-img::after { background: none; } .software-card-body ul li { color: var(--text-color); } .software-cta { color: var(--blue); } .software-card:hover .software-cta { color: var(--blue-dark); } .software-card-body ul li::before, .track-card .curriculum li::before, #why-choose-us li::before, .academy-benefits li::before { background: var(--accent-gradient); color: var(--blue); box-shadow: 0 0 12px rgba(2, 90, 221, 0.3); } #why-choose-us li::before, .academy-benefits li::before { color: var(--blue); } /* ---------- Why-us / panels ---------- */ #why-choose-us li { color: var(--heading-color); } #why-choose-us ul, .academy-benefits ul, .faq-list, #contact form, #academy-enroll form { background: #ffffff; border: 1px solid var(--border-color); box-shadow: var(--soft-shadow); } /* ---------- CTAs / buttons ---------- */ .cta-button, #contact button, #academy-enroll button { color: #ffffff; box-shadow: 0 12px 28px rgba(2, 90, 221, 0.3); } .cta-button:hover, #contact button:hover, #academy-enroll button:hover { box-shadow: 0 18px 40px rgba(2, 90, 221, 0.42); } .cta-button.cta-secondary { background: #ffffff; color: var(--heading-color); border: 1.5px solid var(--border-color); box-shadow: none; } .cta-button.cta-secondary:hover { background: rgba(2, 90, 221, 0.06); border-color: var(--blue); } /* ---------- Forms ---------- */ #contact input, #contact textarea, #academy-enroll input, #academy-enroll textarea, #academy-enroll select { background: #ffffff; border: 1px solid var(--border-color); color: var(--heading-color); } #contact label, #academy-enroll label { color: var(--heading-color); } #contact input:focus, #contact textarea:focus, #academy-enroll input:focus, #academy-enroll textarea:focus, #academy-enroll select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(2, 90, 221, 0.14); } #contact h3 { color: var(--heading-color); } /* ---------- Footer ---------- */ footer { background: #ffffff; border-top: 1px solid var(--border-color); color: var(--text-color); } footer a { color: var(--blue); } footer a:hover { color: var(--blue-dark); } /* ---------- Enhancement layer (sticky nav, stats, chips, etc.) ---------- */ .scroll-progress { box-shadow: 0 0 16px rgba(2, 90, 221, 0.5); } .floating-nav { background: rgba(255, 255, 255, 0.92); border: 1px solid var(--border-color); box-shadow: 0 14px 40px rgba(31, 39, 51, 0.12); } .floating-nav-brand { color: var(--heading-color); } .floating-nav nav ul li a { color: var(--heading-color); } .floating-nav nav ul li a:hover { color: var(--blue); background: rgba(2, 90, 221, 0.08); } .floating-nav-cta { color: #fff; box-shadow: 0 12px 30px rgba(2, 90, 221, 0.3); } .floating-nav-cta:hover { box-shadow: 0 16px 38px rgba(2, 90, 221, 0.42); } .stats-band { background: #ffffff; border: 1px solid var(--border-color); box-shadow: var(--soft-shadow); } .stats-band .stat-num { background: none; color: var(--blue); -webkit-text-fill-color: var(--blue); } .stats-band .stat-label { color: var(--text-color); } .stats-band .stat:not(:last-child)::after { background: linear-gradient(to bottom, transparent, var(--border-color), transparent); } .trust-chip { color: var(--heading-color); background: rgba(2, 90, 221, 0.05); border: 1px solid rgba(2, 90, 221, 0.14); } .trust-chip::before { color: var(--blue); } .trust-chip:hover { border-color: var(--blue); background: rgba(2, 90, 221, 0.1); } .back-to-top { background: #ffffff; color: var(--heading-color); border: 1px solid var(--border-color); box-shadow: var(--soft-shadow); } .back-to-top:hover { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(2, 90, 221, 0.14); } /* ---------- Cookie banner ---------- */ .cookie-consent-banner { background: #ffffff; color: var(--heading-color); border: 1px solid var(--border-color); box-shadow: 0 14px 40px rgba(31, 39, 51, 0.16); } .cookie-consent-banner a { color: var(--blue); } /* ---------- Contact deep-rule overrides (high specificity / animations) ---------- */ #contact #verification-label { color: var(--blue); } #contact form::before { background: linear-gradient(120deg, rgba(2, 90, 221, 0.05), transparent 40%, rgba(45, 143, 255, 0.05)); opacity: 0.5; } #contact input, #contact textarea { background: #ffffff; color: var(--heading-color); box-shadow: none; } #contact input:hover, #contact textarea:hover { border-color: rgba(2, 90, 221, 0.3); } @keyframes contactButtonPulse { 0%, 100% { box-shadow: 0 14px 34px rgba(2, 90, 221, 0.22); } 50% { box-shadow: 0 18px 46px rgba(2, 90, 221, 0.34); } } /* ---------- Hero: dark-blue particle band (Technoit-style) ---------- */ #hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #07182e 0%, #0a2a52 55%, #0e3d72 100%); border-radius: 24px; box-shadow: 0 30px 80px rgba(7, 24, 46, 0.3); padding: 4rem 2.5rem 4.5rem; } #particles-hero { position: absolute; inset: 0; z-index: 0; } #particles-hero canvas { display: block; } #hero > .hero-copy, #hero > .hero-visual { position: relative; z-index: 1; } #hero h2 { color: #ffffff; -webkit-text-fill-color: #ffffff; background: none; } #hero p { color: rgba(232, 240, 255, 0.82); } #hero .eyebrow { color: #cfe0ff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); } #hero .cta-button.cta-secondary { background: rgba(255, 255, 255, 0.1); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.28); } #hero .cta-button.cta-secondary:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.5); } #hero .hero-service-labels .floating-chip { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); color: #eaf2ff; } #hero .hero-service-labels .floating-chip span { color: #9fd0ff; } /* ============ Extra life: color accents on the top sections ============ */ /* Vivid blue stats band — breaks up the white */ .stats-band { position: relative; overflow: hidden; background: linear-gradient(135deg, #025add 0%, #2d8fff 100%); border: 0; box-shadow: 0 24px 60px rgba(2, 90, 221, 0.28); } #particles-stats { position: absolute; inset: 0; z-index: 0; } #particles-stats canvas { display: block; } .stats-band .stat { position: relative; z-index: 1; } .stats-band .stat-num { background: none; color: #ffffff; -webkit-text-fill-color: #ffffff; } .stats-band .stat-label { color: rgba(255, 255, 255, 0.82); } .stats-band .stat:not(:last-child)::after { background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.32), transparent); } /* Soft blue glow in section corners */ main > section:not(#hero) { isolation: isolate; background: radial-gradient(circle at 100% 0%, rgba(2, 90, 221, 0.06), transparent 42%), radial-gradient(circle at 0% 100%, rgba(45, 143, 255, 0.05), transparent 42%), #ffffff; } /* Section heading: eyebrow + gradient underline accent */ main > section:not(#hero) > h2 { margin-bottom: 0.75rem; } main > section:not(#hero) > h2::after { content: ''; display: block; width: 60px; height: 4px; margin: 0.9rem auto 0; border-radius: 999px; background: var(--accent-gradient); } main > section:not(#hero) .section-subtitle { margin: 0.6rem auto 2.5rem; } main > section:not(#hero) > .eyebrow { margin-bottom: 0.9rem; } /* Gradient accent bar that sweeps in on card hover */ .expertise-card, .software-card { position: relative; } .expertise-card::after, .software-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-gradient); transform: scaleX(0); transform-origin: left center; transition: transform 0.35s ease; z-index: 4; } .expertise-card:hover::after, .software-card:hover::after { transform: scaleX(1); } /* ---------- Verified store badges ---------- */ .verified-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; max-width: 760px; margin: 0 auto 2.5rem; } .verified-badge { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1.05rem; border-radius: 12px; background: #ffffff; border: 1px solid var(--border-color); box-shadow: var(--soft-shadow); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .verified-badge:hover { transform: translateY(-2px); border-color: rgba(2, 90, 221, 0.3); box-shadow: 0 14px 30px rgba(2, 90, 221, 0.12); } .verified-badge .store-ic { width: 24px; height: 24px; flex-shrink: 0; } .verified-badge .vb-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; } .verified-badge .vb-store { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.85rem; color: var(--heading-color); } .verified-badge .vb-status { display: inline-flex; align-items: center; gap: 3px; font-size: 0.72rem; font-weight: 600; color: #0e9f6e; } .verified-badge .vb-check { width: 13px; height: 13px; flex-shrink: 0; } @media (max-width: 480px) { .verified-badge { flex: 1 1 100%; justify-content: center; } } /* ---------- Modern floating nav ---------- */ .floating-nav { gap: 0.5rem; padding: 0.5rem 0.6rem 0.5rem 0.7rem; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(2, 90, 221, 0.1); box-shadow: 0 14px 40px rgba(31, 39, 51, 0.14); } .floating-nav-brand, .floating-nav nav ul li a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0 0.95rem; border-radius: 11px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.92rem; letter-spacing: 0; color: var(--heading-color); text-decoration: none; transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .floating-nav-brand { color: var(--blue); } .floating-nav-brand svg { width: 16px; height: 16px; } .floating-nav-brand:hover, .floating-nav nav ul li a:hover { color: var(--blue); background: rgba(2, 90, 221, 0.09); transform: translateY(-1px); } .floating-nav-cta { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.62rem 1.4rem; border-radius: 11px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.92rem; color: #ffffff; background: linear-gradient(135deg, #025add, #2d8fff); box-shadow: 0 8px 22px rgba(2, 90, 221, 0.3); transition: transform 0.2s ease, box-shadow 0.2s ease; } .floating-nav-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(2, 90, 221, 0.42); } /* ---------- Firefox flicker fix ---------- transform-style: preserve-3d + overflow: hidden makes Gecko repaint the whole perspective grid on hover (all cards flicker). Flatten the 3D context — the hover tilt still works as a flat-plane rotation — and stabilize compositing. Chrome/Edge are unaffected. */ .expertise-card, .software-card, .track-card, .ai-card, .faq-item { transform-style: flat; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .expertise-card > *, .software-card > *, .track-card > *, .ai-card > *, .faq-item > * { transform: none; } /* ---------- Legal pages: back-home button + title-only underline ---------- */ .back-home { display: flex; align-items: center; gap: 0.45rem; width: fit-content; margin: 2rem auto 0.25rem; padding: 0.58rem 1.2rem; border-radius: 11px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--blue); background: rgba(2, 90, 221, 0.06); border: 1px solid rgba(2, 90, 221, 0.18); text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .back-home:hover { background: rgba(2, 90, 221, 0.12); border-color: var(--blue); transform: translateX(-3px); } /* Gradient underline only under the main title, not every section heading */ body.legal main section h2::after { display: none !important; } body.legal main section h1 { text-align: center; } body.legal main section h1::after { content: ''; display: block; width: 64px; height: 4px; margin: 1rem auto 0; border-radius: 999px; background: var(--accent-gradient); }