/* ============================================================ theme-light.css — LIGHT-FIRST variant layer for rf-happyrobot Loads AFTER styles.css. Activated by . Cream/paper becomes the default canvas; near-black is reserved for a few dramatic emphasis bands (case cards, the conviction statement, and the footer). All light tints verified WCAG AA (ink 16.9 / muted 5.3 / brick 5.2 / calm 5.2 — all >= 4.5). ============================================================ */ /* --- flip the default (root) context from DARK to LIGHT --- */ body[data-theme="light"]{ background: var(--paper); color: var(--ink); --bg: var(--paper); --fg: var(--ink); --muted: #6b6154; --line: rgba(20,17,13,.12); --line-soft: rgba(20,17,13,.07); --card: #fffdf8; --accent: var(--brick); --calm-c: var(--calm); } /* --- dark EMPHASIS bands re-establish the full dark context --- */ [data-theme="light"] .section--ink, [data-theme="light"] .section--ink2, [data-theme="light"] .footer, [data-theme="light"] .mobile-menu{ color: var(--cream); --fg: var(--cream); --muted: #a49e91; --line: rgba(244,239,228,.14); --line-soft: rgba(244,239,228,.08); --card: #14110d; --accent: var(--brick-on-dark); --calm-c: var(--calm-on-dark); } /* --- header: light chrome, cream glass when scrolled --- */ [data-theme="light"] .header{ color: var(--ink); } /* on the light header the logo's inner graph (hardcoded cream) would vanish on paper — recolor to ink */ [data-theme="light"] .header .brand__mark path { stroke: var(--ink); } [data-theme="light"] .header .brand__mark circle[fill="#f4efe4"] { fill: var(--ink); } [data-theme="light"] .header[data-scrolled="true"]{ background: rgba(249,246,239,.82); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-bottom-color: var(--line-soft); } /* --- hero: light ground + warm light vignette; graph drawn dark-on-cream by main.js --- */ [data-theme="light"] .hero{ background: var(--paper); color: var(--ink); --fg: var(--ink); --muted:#6b6154; --accent: var(--brick); } [data-theme="light"] .hero::after{ background: radial-gradient(80% 50% at 50% 120%, rgba(178,58,46,.10), transparent 70%), linear-gradient(180deg, rgba(249,246,239,.35) 0%, transparent 26%, rgba(246,241,231,.9) 100%); } [data-theme="light"] .hero__canvas{ opacity:.92; } [data-theme="light"] .hero__tag b{ color: var(--ink); } /* --- page-hero (interior pages) light variant, for future rollout --- */ [data-theme="light"] .page-hero{ background: var(--paper); color: var(--ink); --fg:var(--ink); --muted:#6b6154; --accent:var(--brick); border-bottom: 1px solid var(--line); } [data-theme="light"] .page-hero::after{ background: radial-gradient(70% 60% at 85% 0%, rgba(178,58,46,.08), transparent 60%); } /* ============================================================ DARK theme (toggle) — invert the light-first rhythm to dark-dominant. The design is fully token-driven, so we just swap each section's context tokens and content re-themes automatically. Hero, page-hero, footer and the .bleed photo bands are dark in both themes. ============================================================ */ body[data-theme="dark"]{ background: var(--ink); color: var(--cream); --bg:var(--ink); --fg:var(--cream); --muted:#a49e91; --line:rgba(244,239,228,.14); --line-soft:rgba(244,239,228,.08); --card:#14110d; --accent:var(--brick-on-dark); --calm-c:var(--calm-on-dark); } /* cream sections become the dark ground */ [data-theme="dark"] .section--cream{ background: var(--ink); color: var(--cream); --fg:var(--cream); --muted:#a49e91; --line:rgba(244,239,228,.14); --line-soft:rgba(244,239,228,.08); --card:#14110d; --accent:var(--brick-on-dark); --calm-c:var(--calm-on-dark); } /* ink emphasis bands flip to warm light bands */ [data-theme="dark"] .section--ink, [data-theme="dark"] .section--ink2{ background: var(--cream); color: var(--ink); --fg:var(--ink); --muted:#6b6154; --line:rgba(20,17,13,.14); --line-soft:rgba(20,17,13,.08); --card:#fffdf8; --accent:var(--brick); --calm-c:var(--calm); } /* header: dark glass when scrolled */ [data-theme="dark"] .header{ color: var(--cream); } [data-theme="dark"] .header[data-scrolled="true"]{ background: rgba(14,13,12,.72); border-bottom-color: var(--line-soft); } /* cta-band stays cream (a light pop) and footer stays dark — both intentional in both themes */