/* * Shared light/dark theme for the public Ferdinand Collective portal pages. * * Dark is the default (no attribute). A visible toggle (injected by theme.js) * sets [data-theme="light"] on , which remaps the shared design-system * tokens plus the handful of hardcoded Tailwind utility and custom classes the * pages actually use. Media-backed bands (hero video/photo) deliberately stay * dark in both themes — a cinematic dark hero over a light body is intentional, * not a bug. * * Contrast: body ink on the light surface clears WCAG AA (>=4.5:1); the clay/red * brand accent is darkened to the deep crimson for text usage in light mode so * small labels/links stay legible, while the orange is retained for filled * buttons (white-on-orange, large/bold, >=3:1). */ :root { /* Semantic theme tokens (dark defaults). Light values live in the override block below; existing brand vars (--fc-black, --house-off-white, etc.) are declared per page and re-pointed there too. */ --bg: #000000; --surface: #111111; --ink: #EDE9E6; --muted: rgba(237, 233, 230, 0.62); } /* The nav is position:fixed, so it is out of flow and every scroll anchor parks its target underneath the bar — the booking panel scrolled to after picking a session, and every #hash landing in the nav. Offsetting the scrollport's top padding corrects all callers at once, rather than adding scroll-margin to one element and leaving the sibling call sites broken. --nav-height/--banner-height are declared on :root by each page; the fallbacks cover pages that omit them. */ html { scroll-padding-top: calc(var(--nav-height, 80px) + var(--banner-height, 0px) + 1rem); } /* html[...] not [data-theme] alone: each page declares its dark tokens in an inline :root that loads after this file, and :root ties a bare attribute selector on specificity. The element-qualified selector outranks :root so the light tokens win regardless of source order. */ html[data-theme="light"] { --bg: #F4F1ED; --surface: #FFFFFF; --ink: #17130F; --muted: #574E45; /* Re-point the brand vars the pages already consume so every var-driven surface, border and control flips without touching its own CSS. */ --fc-black: #F4F1ED; --house-off-white: #17130F; --surface-raised: #FFFFFF; --border-subtle: rgba(23, 19, 15, 0.14); } /* ── Page + section backgrounds ─────────────────────────────────────────── */ [data-theme="light"] body, [data-theme="light"] .grit-bg, [data-theme="light"] .bg-black { background-color: var(--bg) !important; } /* Some pages hardcode `body{color:#fff}` instead of a token, so inherited text (e.g. a heading with no colour class) would stay white on the light surface. Flip the inherited colour; dark bands re-assert light inheritance below. */ [data-theme="light"] body { color: var(--ink); } [data-theme="light"] .bg-neutral-950 { background-color: #ECE7E1 !important; } [data-theme="light"] .bg-neutral-900 { background-color: #E6E0D8 !important; } [data-theme="light"] .bg-neutral-800 { background-color: #DBD3C9 !important; } /* Fixed nav uses a translucent bg-black/90 — flip it to a translucent light. */ [data-theme="light"] nav.header-fixed, [data-theme="light"] nav.fixed { background-color: rgba(244, 241, 237, 0.9) !important; } /* ── Text ───────────────────────────────────────────────────────────────── */ [data-theme="light"] .text-white { color: var(--ink) !important; } [data-theme="light"] .text-neutral-200, [data-theme="light"] .text-neutral-300 { color: #3B342D !important; } [data-theme="light"] .text-neutral-400, [data-theme="light"] .text-neutral-500 { color: #574E45 !important; } [data-theme="light"] .primary-nav.text-neutral-300, [data-theme="light"] [data-tenant-nav] a { color: #3B342D !important; } /* Brand accent: darken to deep crimson for text/label usage so 11px bold labels and links clear AA on the light surface. */ [data-theme="light"] .text-rise-orange, [data-theme="light"] .section-tag { color: var(--deep-crimson, #991B1B) !important; } /* Filled buttons keep white text in both themes. */ [data-theme="light"] .btn-primary { color: #FFFFFF !important; } [data-theme="light"] .btn-outline { color: var(--ink); } /* Cinematic dark bands — the hero, image breakers, and the near-black arbitrary backgrounds the pages use for feature bands (#050505 / #0a0a0a) — deliberately keep their dark background in light mode. Everything nested inside them must therefore keep its light-on-dark treatment, otherwise the global light overrides above would paint dark text/surfaces onto a dark band. The four roots are grouped with :is() so each rule reads once. */ [data-theme="light"] :is(.hero-section, .breaker-img, .bg-\[\#050505\], .bg-\[\#0a0a0a\]) { color: #EDE9E6; } [data-theme="light"] :is(.hero-section, .breaker-img, .bg-\[\#050505\], .bg-\[\#0a0a0a\]) .text-white { color: #FFFFFF !important; } [data-theme="light"] :is(.hero-section, .breaker-img, .bg-\[\#050505\], .bg-\[\#0a0a0a\]) .field-label { color: rgba(237, 233, 230, 0.72) !important; } [data-theme="light"] :is(.hero-section, .breaker-img, .bg-\[\#050505\], .bg-\[\#0a0a0a\]) .field-help { color: rgba(237, 233, 230, 0.58) !important; } [data-theme="light"] :is(.hero-section, .breaker-img, .bg-\[\#050505\], .bg-\[\#0a0a0a\]) :is(.text-neutral-200, .text-neutral-300, .text-neutral-400, .text-neutral-500) { color: rgba(237, 233, 230, 0.85) !important; } [data-theme="light"] :is(.hero-section, .breaker-img, .bg-\[\#050505\], .bg-\[\#0a0a0a\]) .surface-card { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(237, 233, 230, 0.12) !important; } [data-theme="light"] :is(.hero-section, .breaker-img, .bg-\[\#050505\], .bg-\[\#0a0a0a\]) :is(.section-tag, .text-rise-orange) { color: var(--rise-orange, #FF3A20) !important; } [data-theme="light"] :is(.hero-section, .breaker-img, .bg-\[\#050505\], .bg-\[\#0a0a0a\]) .btn-outline { color: #EDE9E6 !important; border-color: rgba(237, 233, 230, 0.3) !important; } /* ── Borders ────────────────────────────────────────────────────────────── */ [data-theme="light"] .border-white\/5 { border-color: rgba(23, 19, 15, 0.08) !important; } [data-theme="light"] .border-white\/10 { border-color: rgba(23, 19, 15, 0.12) !important; } /* ── Shared custom surfaces (hardcoded rgba in per-page