/* * theme.css — Stage IX light/dark mode * Dark is default. Light activated via [data-theme="light"] on . */ /* ─── DARK DEFAULTS (these match what each page's :root already sets) ─── */ :root { --black: #0a0a0a; --grey-1: #111111; --grey-2: #1a1a1a; --grey-3: #262626; --grey-4: #333333; --grey-5: #555555; --grey-6: #888888; --grey-7: #aaaaaa; --white: #f0ede8; --brand: #8b7f72; --brand-l: #a39589; /* surface aliases used in theme overrides */ --surface-bg: #0a0a0a; --surface-1: #111111; --surface-2: #1a1a1a; --surface-3: #262626; --surface-active: #2a2218; --text-primary: #f0ede8; --text-dim: #888888; --border-col: #262626; } /* ─── LIGHT OVERRIDES ─── */ html[data-theme="light"] { --black: #f5f2ee; /* body bg */ --grey-1: #ebe6df; /* darkest surface */ --grey-2: #e0d9d0; --grey-3: #c8bfb5; /* borders */ --grey-4: #a09890; --grey-5: #555555; /* mid text */ --grey-6: #666666; --grey-7: #444444; --white: #1a1a1a; /* primary text */ --brand: #6b5f52; /* darker for legibility */ --brand-l: #8b7f72; --surface-bg: #f5f2ee; --surface-1: #ebe6df; --surface-2: #e0d9d0; --surface-3: #c8bfb5; --surface-active: #d6cfc5; --text-primary: #1a1a1a; --text-dim: #555555; --border-col: #c8bfb5; color-scheme: light; } /* ─── LIGHT MODE: BODY / GLOBAL ─── */ html[data-theme="light"] body { background: var(--black); color: var(--white); } /* ─── GLOBAL CONTENT LINK STYLE ─── */ /* Prevents browser-default blue on any unstyled across all pages */ a:not([class]) { color: var(--brand-l); text-decoration: none; border-bottom: 1px solid var(--grey-3); padding-bottom: 1px; transition: color 0.2s, border-color 0.2s; } a:not([class]):hover { color: var(--white); border-color: var(--brand); } a:not([class]):visited { color: var(--brand); } /* Sticky header on subpages (not index which has its own fixed header) */ body.subpage header { position: sticky; top: 0; z-index: 100; background: rgba(10, 10, 10, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Nav — sticky below header on subpages */ body.subpage .site-nav { position: sticky; top: var(--nav-top, 48px); z-index: 99; background: rgba(10, 10, 10, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--grey-3, #262626); transition: opacity 0.35s ease, transform 0.35s ease; } /* Nav overlay — triggered by scroll past nav bottom */ body.subpage .site-nav.nav-overlay { position: fixed; left: 0; right: 0; top: var(--nav-top, 48px); background: rgba(10, 10, 10, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--grey-3, #262626); transition: opacity 0.35s ease, transform 0.35s ease; } body.subpage .site-nav.nav-overlay.nav-hidden { opacity: 0; transform: translateY(-8px); pointer-events: none; } body.subpage .site-nav.nav-overlay.nav-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Nav toggle — three-dot button, appears in header on scroll */ .nav-toggle { background: none; border: none; color: var(--grey-5, #555); font-size: 11px; letter-spacing: 3px; cursor: pointer; padding: 4px 6px; flex-shrink: 0; display: inline-flex; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease, color 0.2s; } .nav-toggle.show { opacity: 1; pointer-events: auto; } .nav-toggle:hover { color: var(--brand-l, #a39589); } /* Light mode: nav overlay + toggle */ html[data-theme="light"] body.subpage .site-nav.nav-overlay { background: rgba(245, 242, 238, 0.97) !important; } html[data-theme="light"] .nav-toggle { color: var(--grey-5) !important; } /* Header */ html[data-theme="light"] header { background: rgba(245, 242, 238, 0.93) !important; border-bottom-color: var(--grey-3) !important; } html[data-theme="light"] body.subpage header { background: rgba(245, 242, 238, 0.93) !important; } html[data-theme="light"] body.subpage .site-nav { background: rgba(245, 242, 238, 0.95) !important; } /* Nav links */ html[data-theme="light"] .site-nav a { color: var(--grey-5); } html[data-theme="light"] .site-nav a:hover, html[data-theme="light"] .site-nav a.active { color: var(--brand); } html[data-theme="light"] .site-nav a + a::before { color: var(--grey-3); } /* Cards / boxes */ html[data-theme="light"] .context-box { background: var(--grey-1) !important; } /* Code / pre */ html[data-theme="light"] pre, html[data-theme="light"] code { background: var(--grey-1) !important; color: var(--white) !important; } /* Footer */ html[data-theme="light"] footer { border-top-color: var(--grey-3) !important; } /* ─── LIGHT MODE: INLINE SVG OVERRIDES ─── */ /* Decorative dark-bg SVGs — invert with a filter so they read on light bg */ html[data-theme="light"] svg.decorative { filter: invert(1) hue-rotate(180deg); } /* Value-flow SVG targeted overrides */ html[data-theme="light"] #value-flow-svg .vf-node rect.vf-rect-a, html[data-theme="light"] #value-flow-svg .vf-node rect.vf-rect-b { fill: #ebe6df !important; stroke: #c8bfb5 !important; } html[data-theme="light"] #value-flow-svg .vf-node text { fill: #1a1008 !important; } html[data-theme="light"] #value-flow-svg .vf-node text:nth-child(2) { fill: #2a2010 !important; } /* Edge lines */ html[data-theme="light"] #value-flow-svg line { stroke: #6b5f52 !important; } html[data-theme="light"] #value-flow-svg polygon { fill: #6b5f52 !important; } html[data-theme="light"] #value-flow-svg path { stroke: #c8bfb5 !important; } /* Dark inline backgrounds used in hard-coded SVG fills */ html[data-theme="light"] [fill="#1a1a1a"] { fill: #ebe6df !important; } html[data-theme="light"] [fill="#0a0a0a"] { fill: #f5f2ee !important; } html[data-theme="light"] [fill="#111"] { fill: #ebe6df !important; } html[data-theme="light"] [fill="#111111"] { fill: #ebe6df !important; } html[data-theme="light"] [fill="#2e2822"] { fill: #c8bfb5 !important; } html[data-theme="light"] [fill="#1e1b18"] { fill: #e0d9d0 !important; } html[data-theme="light"] [fill="#3a3028"] { fill: #c8bfb5 !important; } html[data-theme="light"] #value-flow-svg .vf-node rect:first-child { fill: #e8e3dc; stroke: #c0b8ae; } html[data-theme="light"] [fill="#262626"] { fill: #ebe6df !important; } html[data-theme="light"] [fill="#4a4a4a"] { fill: #555555 !important; } html[data-theme="light"] [fill="#2a2a2a"] { fill: #c8bfb5 !important; } html[data-theme="light"] [fill="#333333"] { fill: #888888 !important; } html[data-theme="light"] [fill="#0f0f0f"] { fill: #f5f2ee !important; } html[data-theme="light"] [fill="#2e2a26"] { fill: #c8bfb5 !important; } html[data-theme="light"] [fill="#3a332c"] { fill: #c8bfb5 !important; } html[data-theme="light"] [fill="#444444"] { fill: #888888 !important; } html[data-theme="light"] [fill="#555555"] { fill: #555555 !important; } html[data-theme="light"] [fill="#888888"] { fill: #666666 !important; } html[data-theme="light"] [fill="#888"] { fill: #666666 !important; } html[data-theme="light"] [fill="#aaaaaa"] { fill: #555555 !important; } html[data-theme="light"] [fill="#161616"] { fill: #e0d9d0 !important; } html[data-theme="light"] [fill="#222222"] { fill: #c8bfb5 !important; } html[data-theme="light"] [stroke="#2e2822"] { stroke: #c8bfb5 !important; } html[data-theme="light"] [stroke="#3a3028"] { stroke: #c8bfb5 !important; } html[data-theme="light"] [stroke="#2a2a2a"] { stroke: #c8bfb5 !important; } html[data-theme="light"] [stroke="#262626"] { stroke: #c8bfb5 !important; } html[data-theme="light"] [stroke="#333333"] { stroke: #a09890 !important; } html[data-theme="light"] [stroke="#333"] { stroke: #a09890 !important; } html[data-theme="light"] [stroke="#555555"] { stroke: #888888 !important; } html[data-theme="light"] [stroke="#444444"] { stroke: #a09890 !important; } html[data-theme="light"] [stroke="#444"] { stroke: #a09890 !important; } html[data-theme="light"] [stroke="#2e2e2e"] { stroke: #c8bfb5 !important; } html[data-theme="light"] [stroke="#222222"] { stroke: #c8bfb5 !important; } html[data-theme="light"] [stroke="#1a1a1a"] { stroke: #c8bfb5 !important; } html[data-theme="light"] [stroke="#1e1e1e"] { stroke: #c8bfb5 !important; } html[data-theme="light"] [stroke="#3a342e"] { stroke: #c8bfb5 !important; } html[data-theme="light"] [stroke="#353028"] { stroke: #c8bfb5 !important; } /* ─── THEME TOGGLE BUTTON ─── */ .theme-toggle { background: none; border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; padding: 0; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; color: var(--grey-6, #888888); opacity: 0.55; transition: opacity 0.2s, color 0.2s; line-height: 0; font-size: 0; /* ensure it sits inline with nav items */ align-self: center; } .theme-toggle:hover { opacity: 1; color: var(--brand, #8b7f72); } .theme-toggle svg { display: block; width: 18px; height: 18px; } html[data-theme="light"] .theme-toggle { color: var(--grey-5, #555555); } /* ─── THEME TRANSITION (only during switch, not on every hover) ─── */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease !important; } /* ─── PHASE TIMELINE ACTIVE/HOVER ─── */ html[data-theme="light"] .phase-seg.active rect, html[data-theme="light"] .phase-seg:hover rect { fill: #d6cfc5 !important; stroke: var(--brand) !important; } html[data-theme="light"] .phase-seg.active text, html[data-theme="light"] .phase-seg:hover text { fill: var(--brand) !important; } /* ─── CIRCUIT NODE ACTIVE ─── */ html[data-theme="light"] .circuit-node.active rect { fill: #d6cfc5 !important; stroke: var(--brand) !important; } /* ─── MISSING LIGHT MODE COLOUR FIXES ─── */ /* Brand-coloured SVG text — too light on light bg */ html[data-theme="light"] [fill="#8b7f72"] { fill: #4a3f35; } html[data-theme="light"] [fill="#a39589"] { fill: #5a4f45; } /* Near-white text (e.g. ACT node in patterns) — invisible on light bg */ html[data-theme="light"] [fill="#f0ede8"] { fill: #1a1a1a; } html[data-theme="light"] [fill="#ffffff"] { fill: #1a1a1a; } /* Value flow node label text — handled by .vf-node text rules above */ /* ─── AUDIT FIXES 2026-02-26 ─── */ /* ── Diagram panels — light mode adaptation ── */ html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap { background: #eae5de !important; border-color: #c8bfb5 !important; } /* Text labels inside diagram panels */ html[data-theme="light"] .diagram-panel div, html[data-theme="light"] .diagram-wrap .diagram-label { color: #3a3020; } /* SVG fill remapping inside diagram panels — dark fills → light equivalents */ /* Near-black fills (node/rect backgrounds) → light warm tones */ :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [fill="#1a1a1a"] { fill: #ddd8d0 !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [fill="#111111"] { fill: #e2ddd6 !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [fill="#0a0a0a"] { fill: #e6e1da !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [fill="#161616"] { fill: #dedad2 !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [fill="#2a2a2a"] { fill: #d4cfc8 !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [fill="#262626"] { fill: #d6d1ca !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [fill="#222222"] { fill: #d8d3cc !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [fill="#1e1b18"] { fill: #dad5ce !important; } /* Mid-dark fills (used for subtle contrast) → slightly darker light tones */ :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [fill="#333333"] { fill: #c8c3bc !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [fill="#333"] { fill: #c8c3bc !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [fill="#444444"] { fill: #b8b3ac !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [fill="#555555"] { fill: #706860 !important; } /* Muted accent fills → dark equivalents for legibility on light */ :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [fill="#888888"] { fill: #6b6058 !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [fill="#888"] { fill: #6b6058 !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [fill="#8b7f72"] { fill: #5a4f40 !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [fill="#a39589"] { fill: #6b5f50 !important; } /* Light fills (text, highlights) → dark text colours */ :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [fill="#f0ede8"] { fill: #2a2010 !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [fill="#b3a799"] { fill: #4a3f30 !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [fill="#c3b7a9"] { fill: #3a3020 !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [fill="#d4c8ba"] { fill: #2a2010 !important; } /* Stroke remapping */ :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [stroke="#2a2a2a"] { stroke: #b0a89e !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [stroke="#262626"] { stroke: #b8b0a6 !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [stroke="#333333"] { stroke: #a8a098 !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [stroke="#8b7f72"] { stroke: #5a4f40 !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [stroke="#4a4a4a"] { stroke: #8a8078 !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [stroke="#8b7f72"] { stroke: #8b7f72 !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) [stroke="#555555"] { stroke: #555555 !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) text[fill="#333333"] { fill: #333333 !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) text[fill="#444444"] { fill: #444444 !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) text[fill="#555555"] { fill: #555555 !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) text[fill="#888888"] { fill: #888888 !important; } :is(html[data-theme="light"] .diagram-panel, html[data-theme="light"] .diagram-wrap) text[fill="#888"] { fill: #888888 !important; } /* ── Missing dark-fill SVG rect overrides (methodology pillar diagrams) ── */ /* fill="#120f0d" — constraint channel rect (methodology) */ html[data-theme="light"] [fill="#120f0d"] { fill: #ebe6df !important; } /* fill="#161410" — destination node rect (methodology pillar 03) */ html[data-theme="light"] [fill="#161410"] { fill: #ebe6df !important; } /* fill="#161412" / similar dark variants */ html[data-theme="light"] [fill="#161412"] { fill: #ebe6df !important; } /* fill="#130e0c" */ html[data-theme="light"] [fill="#130e0c"] { fill: #ebe6df !important; } /* fill="#0f0d0b" */ html[data-theme="light"] [fill="#0f0d0b"] { fill: #ebe6df !important; } /* ── Near-white/light-beige fills — invisible on light bg ── */ /* These are the "pattern visible" late-cycle dots in methodology diagrams. They're warm beige in dark mode (good contrast on #0a0a0a). On light #f5f2ee bg they vanish. Map to darker equivalents. */ html[data-theme="light"] [fill="#b3a799"] { fill: #6b5f52 !important; } html[data-theme="light"] [fill="#c3b7a9"] { fill: #5a4f45 !important; } html[data-theme="light"] [fill="#d4c8ba"] { fill: #4a3f35 !important; } html[data-theme="light"] [fill="#b0a49a"] { fill: #6b5f52 !important; } html[data-theme="light"] [fill="#c0b4aa"] { fill: #5a4f45 !important; } html[data-theme="light"] [fill="#bfb3a8"] { fill: #5a4f45 !important; } /* Additional near-white beige fills */ html[data-theme="light"] [fill="#9a8e82"] { fill: #4a3f35 !important; } html[data-theme="light"] [fill="#7a6e62"] { fill: #4a3f35 !important; } html[data-theme="light"] [fill="#6a5e52"] { fill: #4a3f35 !important; } html[data-theme="light"] [fill="#5a4e44"] { fill: #4a3f35 !important; } html[data-theme="light"] [fill="#4a3e35"] { fill: #4a3f35 !important; } /* ── SVG text fills that are too faint on light bg ── */ /* "#333333" text — already handled (→ #888888) but too faint. Override SVG text specifically to be darker */ html[data-theme="light"] text[fill="#333333"] { fill: #555555 !important; } html[data-theme="light"] text[fill="#444444"] { fill: #3a3a3a !important; } html[data-theme="light"] text[fill="#555555"] { fill: #333333 !important; } html[data-theme="light"] text[fill="#666666"] { fill: #444444 !important; } html[data-theme="light"] text[fill="#888888"] { fill: #555555 !important; } /* ── Stroke overrides for SVG lines too faint on light bg ── */ html[data-theme="light"] [stroke="#8b7f72"] { stroke: #6b5f52 !important; } html[data-theme="light"] [stroke="#4a3e35"] { stroke: #4a3f35 !important; } html[data-theme="light"] [stroke="#3a342e"] { stroke: #a09890 !important; } html[data-theme="light"] [stroke="#353028"] { stroke: #a09890 !important; } /* ── Inline style captions using hardcoded dark-mode colours ── */ /* methodology.html inline divs: color:#3a3a3a, color:#5a4e44 — these are near-black and fine on light bg, no override needed. But ethical-terms.html has inline color:#8b7f72 / #a39589 — too light. */ /* Target inline-styled elements by their parent context */ html[data-theme="light"] [style*="color: #8b7f72"] { color: #4a3f35 !important; } html[data-theme="light"] [style*="color: #a39589"] { color: #4a3f35 !important; } html[data-theme="light"] [style*="color:#8b7f72"] { color: #4a3f35 !important; } html[data-theme="light"] [style*="color:#a39589"] { color: #4a3f35 !important; } /* ── Pattern cards: fill="white" in login/splash SVG logos ── */ /* These appear in header logo SVGs — keep as-is since header bg is light */ /* ── patterns.html Wait-Watch-Act: box fills that become invisible ── */ /* fill="#111111" → already covered → #ebe6df. The ACT box uses fill="#111111" stroke="#8b7f72" — text inside fill="#f0ede8" already overridden to #1a1a1a. Confirm no additional box rects missing. */ /* ── Ensure animation circles in diagrams remain visible ── */ /* "noise" label (fill="#333333") in methodology SVG now handled by text override above */ /* "pattern visible" label (fill="#8b7f72") in methodology SVG handled above */