/* ============================================================= VISIONWAVE — Light theme Loaded site-wide from includes/header.php; activated by the .theme-light class on . Remove both to fall back to the dark scheme. Why this is more than a token swap: 1. Contrast. Measured on the page background — #1D9BF0 as text 2.84:1 fails, even as large text #18D6B3 as text 1.76:1 effectively invisible white on a #1D9BF0 fill 3.00:1 fails Those two are exactly what the dark theme leans on for emphasis, which is why a direct swap reads washed out. Bright tints are kept for fills and decoration; anything carrying meaning uses the deeper tones. 2. Depth. The dark theme separates surfaces with glow. On white, glow does nothing — depth has to come from elevation, crisp borders, and a real tonal step between the page and its sections. 3. Rhythm. An all-white page reads flat no matter how good the colours are, so the closing section inverts to deep navy. That contrast is what makes the light areas feel deliberate rather than empty. ============================================================= */ .theme-light { /* Brand indigo — 6.73:1 as text on the page, 7.44:1 under white on a fill */ --c-primary: #3843CA; --c-secondary: #3843CA; --c-accent: #0A7A66; /* 4.99:1 — teal only where it has to read as text */ --c-hover: #2A32A0; /* Indigo fails on the dark band (2.55:1), so inverted areas use this tint. */ --c-primary-soft: #8E97EE; /* 7.05:1 on the navy */ /* The logo's bright tints — fills, chips, glows, decoration only */ --c-primary-bright: #1D9BF0; --c-accent-bright: #18D6B3; /* Surfaces. A blue-tinted page against pure-white sections gives a real tonal step; #F7F9FC on #FFFFFF was too close to register as structure. */ --bg: #EFF4FB; --bg-section: #FFFFFF; --card: #FFFFFF; --card-2: #F6F9FE; --ink: #0A1020; /* the deep navy used for inverted sections */ /* Text — near-black headings, with indigo carrying every emphasis */ --text: #0A0A0A; /* 17.9:1 */ /* Body copy is near-black too, not a grey: hierarchy here comes from size and weight, so the paragraphs get maximum readability instead. Note this token is also used on the dark chrome and CTA band, where it would be invisible — those areas set their own colours explicitly further down. */ --text-muted: #08090A; /* 18.0:1 on the page, 19.9:1 on a card */ /* Worst case for this token is the tinted page background, not white: #6B7688 gave 4.59:1 on white but only 4.16:1 on #EFF4FB, so small labels using it failed. #5D6878 clears 4.5:1 on both. */ --text-dim: #5D6878; /* Lines — visible enough to actually define an edge */ --line: #DCE5F2; --line-strong: #C3D2E8; /* A gradient that ran to teal made headings fade out mid-word on white. Everything is the one indigo now — solid, so nothing washes out. */ --grad: linear-gradient(135deg, #3843CA 0%, #2A32A0 100%); --grad-soft: linear-gradient(135deg, rgba(56,67,202,.12), rgba(56,67,202,.06)); --grad-text: linear-gradient(120deg, #3843CA, #3843CA); /* Glass */ --glass-bg: rgba(255,255,255,.78); --glass-brd: rgba(10,16,32,.10); /* Glow becomes coloured elevation */ --glow-primary: 0 8px 24px rgba(18,104,190,.28); --glow-accent: 0 8px 24px rgba(10,122,102,.24); /* Shadows carry the depth the glow used to */ --shadow-sm: 0 1px 2px rgba(10,16,32,.06), 0 4px 14px rgba(10,16,32,.06); --shadow-md: 0 2px 4px rgba(10,16,32,.06), 0 14px 34px rgba(10,16,32,.10); --shadow-lg: 0 4px 8px rgba(10,16,32,.07), 0 30px 70px rgba(10,16,32,.14); color-scheme: light; } /* ---- Buttons ---- Filled with the deep gradient: richer than a flat blue, and white clears 4.5:1 against both stops. */ .theme-light .btn--primary { color: #FFFFFF; background: var(--grad); background-size: 140% 140%; box-shadow: 0 2px 4px rgba(18,104,190,.20), 0 10px 24px rgba(91,33,214,.26); } .theme-light .btn--primary:hover { background-position: 100% 0; box-shadow: 0 4px 8px rgba(18,104,190,.24), 0 16px 34px rgba(91,33,214,.34); } .theme-light .btn--primary svg { color: #FFFFFF; } .theme-light .btn--ghost { color: var(--c-secondary); border: 1.5px solid var(--c-secondary); background: #FFFFFF; backdrop-filter: none; } .theme-light .btn--ghost:hover { color: #FFFFFF; background: var(--c-secondary); border-color: var(--c-secondary); box-shadow: 0 12px 28px rgba(91,33,214,.30); } /* The ripple is a white wash — invisible here, and it dulls the fill. */ .theme-light .btn::after { display: none; } /* ---- Anything that put dark text on the gradient ---- */ .theme-light .brand__mark, .theme-light .plan__badge, .theme-light .post-card__cat, .theme-light .socials a:hover, .theme-light .share__btn:hover, .theme-light .hbar b, .theme-light .article-body ol > li::before, .theme-light .plan-item::before { color: #FFFFFF; } /* ---- Dark chrome (header + footer) -------------------------------------- The logo is a bright cyan-to-purple gradient. Putting a brand-coloured bar behind it would put those same hues on both sides of the mark and flatten it, so the chrome is a deliberately NEUTRAL deep navy: dark enough for the gradient to glow, neutral enough not to compete with it. Header and footer share the colour, so the page opens and closes on the same surface with the light content between them. */ /* --chrome-rgb exists so the translucent navbar can be built from the same value as the solid footer. Chosen shade: Midnight. */ .theme-light { --chrome: #0B1020; --chrome-rgb: 11, 16, 32; } /* The bar fades its background in on scroll by default. With dark chrome that would leave light links sitting on the light hero at the top of the page — invisible until you scrolled. Here it is opaque from the first paint. */ .theme-light .nav::before { background: rgba(var(--chrome-rgb), .94); border-bottom-color: rgba(255,255,255,.10); opacity: 1; } .theme-light .nav__links a { color: #D5DCEA; font-weight: 500; } /* 13.8:1 */ .theme-light .nav__links a:hover { color: #FFFFFF; } .theme-light .nav__links a.active { color: var(--c-primary-soft); font-weight: 600; } /* 7.0:1 */ .theme-light .nav__links a::after { background: var(--c-primary-soft); } .theme-light .brand { color: #FFFFFF; } /* The logo keeps its glow here — on navy it reads as intended, not as a halo. */ .theme-light .brand__logo { filter: drop-shadow(0 0 10px rgba(0,229,255,.28)); } /* Has to satisfy two things at once: a readable white label, and a visible edge against the bar it sits on. The page indigo (#3843CA) gave 2.55:1 at the edge and looked stuck to the bar; going too bright (#606BF0) fixed the edge but dropped the label to 4.32:1. This lands both — label 5.00:1, edge 3.79:1. */ .theme-light .nav .btn--primary { background: #5560E6; box-shadow: 0 6px 20px rgba(85,96,230,.45); } .theme-light .nav .btn--primary:hover { background: #606BF0; } .theme-light .nav__toggle { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.20); } .theme-light .nav__toggle span { background: #FFFFFF; } @media (max-width: 960px) { .theme-light .nav__links { background: rgba(var(--chrome-rgb), .98); border-left-color: rgba(255,255,255,.12); } } /* ---- Hero orb ---- The core was a dark sphere with a cyan inner glow — built to sit on near black. On a pale page it read as a muddy grey ball, and its label (teal on dark) was unreadable. It becomes a light, indigo-tinted sphere instead. */ .theme-light .orb__core { background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, #EDF1FE 42%, #DDE3FA 100%); border: 1px solid #C7CFF4; box-shadow: 0 24px 60px rgba(56,67,202,.20), inset 0 0 40px rgba(56,67,202,.06); } .theme-light .orb__label { color: var(--c-primary); } .theme-light .orb__ring { border-color: rgba(56,67,202,.14); } .theme-light .orb__ring--1 { border-top-color: var(--c-primary); } .theme-light .orb__ring--2 { border-right-color: var(--c-primary); } .theme-light .orb__ring--3 { border-bottom-color: var(--c-accent-bright); } .theme-light .orb__chip { background: #FFFFFF; border-color: var(--line-strong); box-shadow: var(--shadow-sm); } .theme-light .orb__chip--a, .theme-light .orb__chip--c { color: var(--c-primary); } .theme-light .orb__chip--b { color: var(--c-accent); } /* ---- Platforms strip ---- Logos were greyscaled and dimmed to 75% for the dark theme, which on white left barely-there marks on barely-there pills. */ .theme-light .platform-item { color: var(--text); background: #FFFFFF; border-color: var(--line-strong); box-shadow: var(--shadow-sm); } .theme-light .platform-item img { filter: grayscale(1) brightness(.35); opacity: .85; } .theme-light .platform-item:hover { color: var(--c-primary); border-color: var(--c-primary); box-shadow: 0 8px 20px rgba(56,67,202,.18); } .theme-light .platform-item:hover img { filter: none; opacity: 1; } .theme-light .marquee__item { color: var(--text-muted); } .theme-light .marquee__item:hover { color: var(--c-primary); } /* ---- Testimonials ---- */ .theme-light .testi__stars { color: var(--c-primary); } .theme-light .testi__ava { background: var(--c-primary); color: #FFFFFF; } /* The trailing fade has to match the surface behind the slider, not the page. */ .theme-light .testi-slider::after { background: linear-gradient(90deg, transparent, var(--bg-section)); } /* Arrows were white circles on a white card — invisible. */ .theme-light .testi-nav { background: #FFFFFF; border: 1px solid var(--line-strong); color: var(--c-primary); box-shadow: var(--shadow-md); } .theme-light .testi-nav:hover:not(:disabled) { background: var(--c-primary); color: #FFFFFF; border-color: var(--c-primary); box-shadow: 0 10px 24px rgba(56,67,202,.32); } .theme-light .testi-nav:disabled { opacity: .35; } .theme-light .slider-dots button { background: var(--line-strong); } .theme-light .slider-dots button.is-active, .theme-light .slider-dots .active { background: var(--c-primary); } /* ---- Portfolio cards ---- These carry photographs, so the tile itself stays dark — but everything on top of it has to be legible against an unpredictable image, which means near white, not a mid-tone accent. */ .theme-light .folio-overlay .tag, .theme-light .folio-tag { color: #FFFFFF; background: rgba(56,67,202,.88); border-color: transparent; backdrop-filter: blur(8px); } .theme-light .tag--metric { color: #FFFFFF; background: var(--c-primary); border-color: transparent; } .theme-light .folio-overlay h3 { color: #FFFFFF; } /* The category sat at --text-dim, which is a light grey here and vanished into the photo. Photos vary, so it needs a fixed near-white plus a shadow. */ .theme-light .folio-cat { color: #E4E9F7; text-shadow: 0 1px 3px rgba(0,0,0,.5); } .theme-light .folio-overlay .lead, .theme-light .folio-overlay p { color: #E4E9F7; } /* A stronger scrim so light photographs (the white studio shot) still hold text. */ .theme-light .folio-overlay { background: linear-gradient(to top, rgba(10,16,32,.92) 0%, rgba(10,16,32,.72) 45%, transparent 100%); } .theme-light .platforms-heading { color: var(--text-muted); } /* ---- Ambient decoration ---- */ .theme-light .noise { opacity: .012; } .theme-light .blob { opacity: .30; filter: blur(80px); } .theme-light .bg-grid { opacity: .55; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); } .theme-light #hero-canvas { opacity: .30; } /* ---- Cards ---- Real border + elevation instead of the dark theme's glowing hairline, plus a brand-coloured edge that appears on hover so the grid feels alive. */ .theme-light .card, .theme-light .glass { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease); } .theme-light .card::before { display: none; } .theme-light .card:hover { border-color: #B7CBEA; box-shadow: var(--shadow-md); } .theme-light .glass { background: rgba(255,255,255,.78); } .theme-light .section--tint { background: var(--bg-section); } /* ---- Icon chips: brand gradient, white glyph — not a pale wash ---- */ .theme-light .service__icon, .theme-light .stat-card__icon { background: var(--grad); border: 0; color: #FFFFFF; box-shadow: 0 6px 16px rgba(91,33,214,.22); } .theme-light .service__icon svg, .theme-light .stat-card__icon svg { color: #FFFFFF; } /* ---- Accent chrome ---- */ .theme-light .eyebrow { color: var(--c-secondary); background: rgba(91,33,214,.08); border-color: rgba(91,33,214,.24); backdrop-filter: none; } .theme-light .eyebrow::before { background: var(--c-accent-bright); box-shadow: none; } .theme-light .service__arrow, .theme-light .toc a.is-active { color: var(--c-primary); } .theme-light .tag, .theme-light .chip { color: var(--c-secondary); background: rgba(91,33,214,.08); border-color: rgba(91,33,214,.20); } .theme-light .platform-item { background: #FFFFFF; border-color: var(--line); } /* Floating buttons were nearly invisible as pale outlines. */ .theme-light .fab a, .theme-light .fab button { background: #FFFFFF; border-color: var(--line-strong); color: var(--c-primary); box-shadow: var(--shadow-md); } .theme-light .fab a:hover, .theme-light .fab button:hover { background: var(--grad); border-color: transparent; color: #FFFFFF; } /* ---- Inverted closing section ---- One deep band stops the page reading as an undifferentiated sheet of white, and gives the final call to action somewhere to land. */ /* The band is the brand indigo rather than a neutral navy: it is the one place the page goes full-colour, and it ties the closing CTA to the logo. The gradient resolves INTO the chrome colour at the bottom so the band and the footer read as one continuous dark region — ending it on flat indigo put a hard seam right where #0B1020 starts. White clears 7.4:1 on the lightest stop, so the whole band is safe. */ .theme-light #contact { background: linear-gradient(170deg, #3843CA 0%, #2E37A8 55%, #171C4D 88%, var(--chrome) 100%); } /* The CTA sits inside a .glass panel. Left at the light-theme white it became a near-white sheet on the navy, with white text on top — the block that read as unreadable. On the dark band it has to be a dark translucent panel. */ .theme-light #contact .glass, .theme-light #contact .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); box-shadow: none; } .theme-light #contact .bg-grid { background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); opacity: 1; } .theme-light #contact h1, .theme-light #contact h2, .theme-light #contact .section-title { color: #FFFFFF; } .theme-light #contact .lead, .theme-light #contact p, .theme-light #contact .section-sub { color: #D3D7F6; } .theme-light #contact .contact-strip { color: #D3D7F6; } .theme-light #contact .contact-strip svg { color: var(--c-accent-bright); } .theme-light #contact .contact-strip > a:hover { color: #FFFFFF; } .theme-light #contact .eyebrow { color: #FFFFFF; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.30); } /* Highlighted words go teal — indigo on indigo would disappear. Lifted from #18D6B3 (4.00:1, large-text only) to clear 4.5:1 outright. */ .theme-light #contact .gradient-text { color: #5CE8D2; } /* Solid white button on the colour band reads far stronger than indigo on indigo. */ .theme-light #contact .btn--primary { background: #FFFFFF; color: #2A32A0; box-shadow: 0 10px 28px rgba(10,16,32,.28); } .theme-light #contact .btn--primary:hover { background: #F0F2FF; color: #232A85; } .theme-light #contact .btn--primary svg { color: #2A32A0; } .theme-light #contact .btn--ghost { color: #FFFFFF; border-color: rgba(255,255,255,.55); background: transparent; } .theme-light #contact .btn--ghost:hover { background: #FFFFFF; color: #2A32A0; border-color: #FFFFFF; } .theme-light #contact .blob { opacity: .22; } /* ---- Headings + links ---- */ .theme-light h1, .theme-light h2, .theme-light h3, .theme-light h4, .theme-light .section-title { color: var(--text); } .theme-light .article-body h2, .theme-light .article-body h3, .theme-light .article-body h4, .theme-light .article-body strong, .theme-light .toc__title, .theme-light .toc__label { color: var(--text); } .theme-light a:not(.btn):hover { color: var(--c-primary); } /* Numerals and highlighted words are solid indigo — a gradient across them was what made the figures look faded at large sizes. */ .theme-light .stat__num, .theme-light .gradient-text, .theme-light .plan__price { background: none; -webkit-text-fill-color: currentColor; color: var(--c-primary); } /* ---- Image scrims that assumed a dark page ---- */ .theme-light .post-card__media::after { background: linear-gradient(to top, rgba(10,16,32,.62), transparent); } .theme-light .folio-overlay { background: linear-gradient(to top, rgba(10,16,32,.86), transparent); } /* ---- Audit report -------------------------------------------------------- Status colours are tuned for a dark card; on white the dark-theme values give 1.3–2.8:1. These keep the same green/amber/red reading at 5:1+. */ .theme-light { --status-pass: #067A5C; /* 5.32:1 on a white card */ --status-warn: #9A5B08; /* 5.42:1 */ --status-fail: #C92A2A; /* 5.46:1 */ } .theme-light .check--pass .check__dot { background: var(--status-pass); } .theme-light .check--warn .check__dot { background: var(--status-warn); } .theme-light .check--fail .check__dot { background: var(--status-fail); } .theme-light .check--fail .ev__list li { border-left-color: var(--status-fail); } .theme-light .check--warn .ev__list li { border-left-color: var(--status-warn); } .theme-light .plan-item--crit::before { background: var(--status-fail); } .theme-light .plan-item--crit .plan-item__tag { color: var(--status-fail); border-color: rgba(201,42,42,.35); } .theme-light .kb-table .no { color: var(--status-fail); } .theme-light .kb-table .yes { color: var(--status-pass); } .theme-light #history-note .up { color: var(--status-pass); } .theme-light #history-note .down { color: var(--status-fail); } /* Report values and check labels are literal white in the dark stylesheet. */ .theme-light .fact__v, .theme-light .check__top b, .theme-light .report__group-head h3, .theme-light .ev__list code { color: var(--text); } .theme-light .fact__k { color: var(--text-muted); } .theme-light .ev__list li { background: rgba(10,16,32,.03); } .theme-light .serp { border: 1px solid var(--line); } /* ---- Hardcoded white text on light surfaces ---------------------------- The dark stylesheet writes `color: #fff` literally in a number of places rather than going through a token, so those cannot follow the theme. Each of these renders on a white card here, i.e. white-on-white (1.06:1). */ .theme-light .est__step-title, .theme-light .est__service-name, .theme-light .legal-doc h3, .theme-light .legal-doc strong, .theme-light .article-body th, .theme-light .field input, .theme-light .field textarea { color: var(--text); } .theme-light .est__scale-opt:hover { color: var(--c-primary); border-color: var(--c-primary); } .theme-light .est__scale-opt.sel { background: var(--c-primary); color: #FFFFFF; } .theme-light .est__service.sel { border-color: var(--c-primary); background: rgba(56,67,202,.06); } .theme-light .toc a:hover { color: var(--c-primary); background: rgba(56,67,202,.06); } /* ---- Forms ---- */ .theme-light input, .theme-light textarea, .theme-light select { background: #FFFFFF; border-color: var(--line-strong); color: var(--text); } .theme-light input::placeholder, .theme-light textarea::placeholder { color: var(--text-dim); } .theme-light input:focus, .theme-light textarea:focus, .theme-light select:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(18,104,190,.16); } /* ---- Loader, scrollbar, selection ---- */ .theme-light #loader { background: var(--bg); } /* The track sat at --line (#DCE5F2) on a #EFF4FB page — near-invisible, so only the filled portion showed and the bar looked permanently half-drawn. */ .theme-light .loader-bar { background: #C3D2E8; } .theme-light .loader-pct { color: var(--text-dim); } .theme-light ::-webkit-scrollbar-track { background: #E3EAF5; } .theme-light ::-webkit-scrollbar-thumb { background: linear-gradient(var(--c-secondary), var(--c-primary)); } .theme-light ::selection { background: rgba(91,33,214,.18); color: var(--text); } /* ---- Footer ---- Light, to match the header — the page now opens and closes on the same surface, with the indigo CTA band as the single dark moment between them. */ /* Matches the header exactly — same surface top and bottom. Small text sits well above AA here: at .82–.88rem, a "technically passing" 4.5 still reads as switched off. */ .theme-light .footer { background: var(--chrome); border-top: 0; color: #C3CCDD; } .theme-light .footer h4 { color: #93A0B5; font-weight: 700; } /* 7.2:1 */ .theme-light .footer strong, .theme-light .footer .brand { color: #FFFFFF; } .theme-light .footer p, .theme-light .footer .lead { color: #C3CCDD; } /* 11.7:1 */ .theme-light .footer__address { color: #97A3B8; } /* 7.4:1 */ .theme-light .serving-row__label { color: #97A3B8; } .theme-light .footer a { color: #D5DCEA; transition: color .25s var(--ease); } /* 13.8:1 */ .theme-light .footer a:hover { color: var(--c-primary-soft); } .theme-light .footer .eyebrow { color: #FFFFFF; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); } .theme-light .footer-bottom { border-top-color: rgba(255,255,255,.12); color: #97A3B8; } .theme-light .footer .blob { opacity: .22; } .theme-light .socials a { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.07); color: #FFFFFF; box-shadow: none; } .theme-light .socials a:hover { background: #5560E6; border-color: #5560E6; color: #FFFFFF; } .theme-light .footer a.serving-pill { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.20); color: #D5DCEA; } .theme-light .footer a.serving-pill:hover { background: #5560E6; border-color: #5560E6; color: #FFFFFF; } .theme-light .news-form input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.20); color: #FFFFFF; } .theme-light .news-form input::placeholder { color: #8B98AD; } .theme-light .news-form input:focus { border-color: var(--c-primary-soft); box-shadow: 0 0 0 3px rgba(142,151,238,.20); } .theme-light .news-form button { background: #5560E6; color: #FFFFFF; } .theme-light .news-form button:hover { background: #606BF0; }