/* ============================================================ LIGHT.CSS — white-background theme experiment ------------------------------------------------------------ Layered OVER tokens.css / global.css / the page stylesheets. Link it last in so it wins the cascade. Nothing else in the codebase is modified. Removing the one line from each page restores the dark theme exactly. See docs/THEME.md for the recorded dark palette. ============================================================ */ :root { --color-bg: #FFFFFF; --color-surface: #F2F5FA; --color-text-primary: #0B1B33; /* deep navy, not black — 17.2:1 */ --color-text-secondary: #51637E; /* 6.1:1 */ /* Brand gold (#B8960C) scores 2.8:1 on white and fails WCAG AA, so text-bearing gold is darkened. Decorative gold is kept below. */ --color-accent-gold: #7A6208; /* 5.9:1 */ --color-highlight-teal: #176E7D; /* 5.9:1 */ --color-surface-alpha: rgba(11, 27, 51, 0.05); /* Kept dark on purpose — used by the footer image overlay. */ --color-overlay: rgba(0, 11, 31, 0.85); /* Local additions for this theme */ --band-bg: #000B1F; /* full-bleed band behind artwork */ --gold-decorative: #B8960C; /* rules and diamonds, non-text */ --line-light: rgba(11, 27, 51, 0.14); } /* ── Nav ── Was transparent white-on-dark; now needs a light surface and dark text, and a visible edge once it picks up a background on scroll. */ .site-nav { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .site-nav.scrolled { background: rgba(255, 255, 255, 0.95); border-bottom: 1px solid var(--line-light); } .nav-overlay { background: rgba(255, 255, 255, 0.97); } /* ── Full-bleed bands behind the client artwork ── Every supplied graphic has dark navy baked in, so on a white page it would float as a stray rectangle. A dark band running the full width of the viewport turns that into deliberate rhythm instead. Painted with a huge box-shadow spread and unclipped vertically, rather than the usual 100vw + negative-margin trick: these figures sit inside a centred .container, so 50% of the parent is not 50% of the viewport and the band lands off-centre. box-shadow costs no layout at all. */ .page-banner, .feature-visual { padding-block: var(--space-xl); background: var(--band-bg); box-shadow: 0 0 0 100vmax var(--band-bg); clip-path: inset(0 -100vmax); } .page-banner img, .feature-visual img { margin-inline: auto; border: none; box-shadow: none; } .page-banner img { max-width: var(--max-width); } .feature-visual img { max-width: 1000px; } .feature-visual--square img { max-width: 720px; } @media (max-width: 768px) { .page-banner, .feature-visual { padding-block: var(--space-lg); padding-inline: var(--space-md); } } /* ── Section washes ── These were subtle navy gradients on a dark page. On white they read as grey slivers either side of the dark bands, so they are cleared: the page alternates plain white and full dark bands, nothing in between. */ .section-blindspot, .section-method, .section-wake { background: none; } /* ── Nav logo ── The mark is drawn for dark backgrounds — pale dolphin, gold wordmark — and washes out on white. A small dark chip gives it back its intended ground without needing a re-cut asset. */ .nav-brand img { background: var(--band-bg); border-radius: var(--border-radius); padding: 4px; } /* ── Dividers and diamonds keep the true brand gold ── */ .fh-divider::before, .fh-divider::after { background: var(--gold-decorative); opacity: 0.55; } .fh-divider .diamond, .diamond-list li::before, .nothing-list li::before { background: var(--gold-decorative); } /* ── Buttons ── */ .btn { border-color: var(--color-highlight-teal); color: var(--color-highlight-teal); } .btn:hover { background: var(--color-highlight-teal); color: #FFFFFF; } /* ── Cards, panels, forms ── All of these hardcode rgba(184,150,12,…) borders, which vanish against white. Swap in a neutral hairline. */ .card, .fh-form, .then-now-card, .process-step, .device-frame, /* the older, not-yet-redesigned pages */ .about-approach-step, .about-compare, .about-compare-cell--fh, .contact-form, .contact-info-list, .engage-form, .engage-info-list, .engage-faq-item, .engage-faq-body, .engage-measure-close, .faq-item, .faq-body, .faq-measure-close { border-color: var(--line-light); } .card, .fh-form, .then-now-card, .process-step, .about-approach-step, .contact-form, .engage-form, .engage-faq-item, .faq-item { background: var(--color-surface); } .form-field input { background: #FFFFFF; border-color: var(--line-light); color: var(--color-text-primary); } .form-field input:hover { border-color: var(--color-highlight-teal); } /* The phone mockup stays dark — it is a product screen, and the artwork inside it is dark regardless of the page theme. */ .device-frame { background: #05101f; border-color: var(--line-light); } /* ── Report tables ── */ .report-table th, .report-table td { border-bottom-color: var(--line-light); } .report-table thead th { border-bottom-color: rgba(11, 27, 51, 0.28); } .report-table tbody tr:hover { background: var(--color-surface-alpha); } @media (max-width: 768px) { .report-table tbody tr { background: var(--color-surface); border-color: var(--line-light); } .report-table tbody th { border-bottom-color: var(--line-light); } } /* ── Hero video ── */ .hero-video video { border-color: var(--line-light); } /* ── Footer stays dark ── It is a dark photographic banner with an overlay. A dark footer under a light page is a normal pattern, and it gives the page a base. */ .footer-banner { color: #FFFFFF; } .footer-banner h4 { color: var(--gold-decorative); } .footer-banner p, .footer-product p, .footer-copyright { color: #A8C0E8; } .footer-nav { border-top-color: rgba(184, 150, 12, 0.25); } .footer-nav a { color: #FFFFFF; } .footer-nav a:hover { color: var(--gold-decorative); }