/* ════════════════════════════════════════════════════════════════ .EWA — Theme tokens. SITE-WIDE: two themes only — Deep Forest (light) and Midnight Gold (dark). Driven by data-theme="light|dark" on . DASHBOARD-SCOPED: six themes — selectable via .dashboard-themed[data-dash-theme="…"]. These redeclare the same CSS variables inside the dashboard container so they cascade only to dashboard descendants. ════════════════════════════════════════════════════════════════ */ /* ─── Site-wide default: Deep Forest (cream + racing green) ───── */ :root, [data-theme="light"] { --bg: #F5F1E8; --bg-deep: #EFEADC; --surface: #FFFFFF; --surface-alt: #EDE7D6; --surface-elev: #FBF7EC; --border: #D9D2BE; --border-light: #E5DFCB; --border-strong: #B8AE93; --accent: #1F3A2D; --accent-hover: #2A4D3C; --accent-soft: rgba(31, 58, 45, 0.08); --accent-glow: rgba(31, 58, 45, 0.15); --accent-line: rgba(31, 58, 45, 0.22); --text-primary: #0F1A15; --text-secondary: #4A5950; --text-muted: #7C8378; --text-inverse: #F5F1E8; --error: #B14A3C; --success: #2D5F47; --shadow-sm: 0 1px 2px rgba(31, 58, 45, 0.06); --shadow-md: 0 8px 24px rgba(31, 58, 45, 0.10); --shadow-lg: 0 20px 60px rgba(31, 58, 45, 0.15); --shadow-glow: 0 0 80px rgba(31, 58, 45, 0.06); --grid-line: rgba(31, 58, 45, 0.06); --grid-dot: rgba(31, 58, 45, 0.16); --noise-opacity: 0.04; color-scheme: light; } /* ─── Site-wide dark: Midnight Gold ───────────────────────────── */ [data-theme="dark"] { --bg: #0A1420; --bg-deep: #060D17; --surface: #101D2E; --surface-alt: #162639; --surface-elev: #1B2D44; --border: #1F2F44; --border-light: #182539; --border-strong: #2A3E58; --accent: #DCB95C; --accent-hover: #E8C76C; --accent-soft: rgba(220, 185, 92, 0.14); --accent-glow: rgba(220, 185, 92, 0.22); --accent-line: rgba(220, 185, 92, 0.30); --text-primary: #F1ECDD; --text-secondary: #A39B82; --text-muted: #6F6754; --text-inverse: #0A1420; --error: #E87461; --success: #7FB59A; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 8px 24px rgba(0,0,0,0.35); --shadow-lg: 0 20px 60px rgba(0,0,0,0.55); --shadow-glow: 0 0 80px rgba(220, 185, 92, 0.08); --grid-line: rgba(220, 185, 92, 0.06); --grid-dot: rgba(220, 185, 92, 0.18); --noise-opacity: 0.025; color-scheme: dark; } /* ─── Typography tokens (shared) ──────────────────────────────── */ :root { --font-body: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); } /* ════════════════════════════════════════════════════════════════ DASHBOARD-SCOPED THEMES These selectors redeclare the same CSS variables *inside* the .dashboard-themed wrapper, so they only cascade to dashboard descendants — not to the nav, hero, footer or any other section of the page. The .dashboard-panel class wraps the cards in a unifying container surface that visually groups them as a single workspace, distinct from page chrome. ════════════════════════════════════════════════════════════════ */ /* The unifying container surface — sits 1 step darker than the panel theme's --bg, so the white .surface-cards inside it really pop and the panel reads as a distinct "workspace" against the page chrome. */ .dashboard-panel { background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: clamp(0.85rem, 1.8vw, 1.25rem); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 1px 0 var(--border) inset, 0 12px 32px -16px rgba(0, 0, 0, 0.18), 0 30px 80px -40px rgba(0, 0, 0, 0.22); position: relative; overflow: hidden; transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out); } /* Soft accent halo so the panel feels lit, not flat */ .dashboard-panel::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 50% 0%, var(--accent-soft) 0%, transparent 70%); pointer-events: none; z-index: 0; } .dashboard-panel > * { position: relative; z-index: 1; } /* Dashboard-scoped theme variables. Each block redeclares the variables inside .dashboard-themed, so all child elements (.surface-card, KPIs, etc.) automatically pick up the dashboard's chosen palette while page chrome stays on the site-wide theme. */ .dashboard-themed[data-dash-theme="deep-forest"] { --bg: #F5F1E8; --bg-deep: #EFEADC; --surface: #FFFFFF; --surface-alt: #EDE7D6; --surface-elev: #FBF7EC; --border: #D9D2BE; --border-light: #E5DFCB; --border-strong: #B8AE93; --accent: #1F3A2D; --accent-hover: #2A4D3C; --accent-soft: rgba(31, 58, 45, 0.08); --accent-glow: rgba(31, 58, 45, 0.15); --accent-line: rgba(31, 58, 45, 0.22); --text-primary: #0F1A15; --text-secondary: #4A5950; --text-muted: #7C8378; --text-inverse: #F5F1E8; } .dashboard-themed[data-dash-theme="midnight-gold"] { --bg: #0A1420; --bg-deep: #060D17; --surface: #101D2E; --surface-alt: #162639; --surface-elev: #1B2D44; --border: #1F2F44; --border-light: #182539; --border-strong: #2A3E58; --accent: #DCB95C; --accent-hover: #E8C76C; --accent-soft: rgba(220, 185, 92, 0.14); --accent-glow: rgba(220, 185, 92, 0.22); --accent-line: rgba(220, 185, 92, 0.30); --text-primary: #F1ECDD; --text-secondary: #A39B82; --text-muted: #6F6754; --text-inverse: #0A1420; } .dashboard-themed[data-dash-theme="arctic-blue"] { --bg: #ECF2F7; --bg-deep: #DDE7EF; --surface: #FFFFFF; --surface-alt: #E0EAF3; --surface-elev: #F4F8FB; --border: #C3D0DD; --border-light: #D6E0EA; --border-strong: #A0B3C6; --accent: #1E3A5F; --accent-hover: #2C5282; --accent-soft: rgba(30, 58, 95, 0.08); --accent-glow: rgba(30, 58, 95, 0.16); --accent-line: rgba(30, 58, 95, 0.22); --text-primary: #0F1F33; --text-secondary: #3D5A7B; --text-muted: #7C92AB; --text-inverse: #ECF2F7; } .dashboard-themed[data-dash-theme="ember"] { --bg: #F8EFE5; --bg-deep: #F0E2CE; --surface: #FFFAF3; --surface-alt: #F0E0CB; --surface-elev: #FCF4E8; --border: #DDC9AE; --border-light: #E8D8C1; --border-strong: #B79C7A; --accent: #B7501E; --accent-hover: #C95F2A; --accent-soft: rgba(183, 80, 30, 0.08); --accent-glow: rgba(183, 80, 30, 0.16); --accent-line: rgba(183, 80, 30, 0.22); --text-primary: #2D1B0E; --text-secondary: #5C4434; --text-muted: #8D7E70; --text-inverse: #F8EFE5; } .dashboard-themed[data-dash-theme="lavender-dusk"] { --bg: #F2EEF6; --bg-deep: #E8E0F0; --surface: #FFFFFF; --surface-alt: #E6DEF1; --surface-elev: #F7F2FB; --border: #CFC2DD; --border-light: #DCD0E9; --border-strong: #A491C2; --accent: #553C9A; --accent-hover: #6B4FB5; --accent-soft: rgba(85, 60, 154, 0.08); --accent-glow: rgba(85, 60, 154, 0.16); --accent-line: rgba(85, 60, 154, 0.22); --text-primary: #1F1238; --text-secondary: #5C4A78; --text-muted: #8B7DA1; --text-inverse: #F2EEF6; } .dashboard-themed[data-dash-theme="warm-sand"] { --bg: #EFE5D2; --bg-deep: #E3D4B8; --surface: #FAF6EC; --surface-alt: #E0D0AC; --surface-elev: #F5EBD3; --border: #CFBE9A; --border-light: #DCCBA8; --border-strong: #A6916A; --accent: #8B5A2B; --accent-hover: #A66C36; --accent-soft: rgba(139, 90, 43, 0.08); --accent-glow: rgba(139, 90, 43, 0.16); --accent-line: rgba(139, 90, 43, 0.24); --text-primary: #2A1F11; --text-secondary: #5C4A2E; --text-muted: #8C7A5C; --text-inverse: #EFE5D2; } /* ════════════════════════════════════════════════════════════════ DASHBOARD THEME PICKER — popover that sits inside the dashboard header. Six swatches; selecting one updates data-dash-theme on the .dashboard-themed container. ════════════════════════════════════════════════════════════════ */ .dash-picker-wrap { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; } .dash-picker-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); } .dash-picker-trigger { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--surface); border: 1px solid var(--border-light); border-radius: 999px; padding: 0.4rem 0.8rem 0.4rem 0.5rem; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; color: var(--text-primary); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } .dash-picker-trigger:hover { border-color: var(--accent); box-shadow: 0 2px 8px var(--accent-soft); } .dash-picker-trigger .dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border-strong); background: linear-gradient(180deg, var(--dot-bg, #fff) 0 50%, var(--dot-accent, #000) 50% 100%); flex-shrink: 0; } .dash-picker-trigger .chev { width: 12px; height: 12px; opacity: 0.6; transition: transform 0.25s var(--ease-out); } .dash-picker-wrap.open .dash-picker-trigger .chev { transform: rotate(180deg); } .dash-picker-pop { position: absolute; top: calc(100% + 8px); right: 0; display: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 0.75rem; z-index: 50; min-width: 240px; animation: themePopIn 0.22s var(--ease-out); } .dash-picker-wrap.open .dash-picker-pop { display: block; } @keyframes themePopIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .dash-picker-pop-title { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.5rem 0.1rem; } .dash-picker-options { display: flex; flex-direction: column; gap: 0.2rem; } .dash-picker-option { display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.5rem 0.6rem; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-body); font-size: 0.875rem; color: var(--text-primary); text-align: left; transition: background 0.15s, border-color 0.15s; } .dash-picker-option:hover { background: var(--accent-soft); } .dash-picker-option.active { background: var(--accent-soft); border-color: var(--accent-line); } .dash-picker-option .swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border-strong); background: linear-gradient(180deg, var(--swatch-bg, #fff) 0 50%, var(--swatch-accent, #000) 50% 100%); flex-shrink: 0; } .dash-picker-option[data-theme-choice="deep-forest"] .swatch { --swatch-bg: #F5F1E8; --swatch-accent: #1F3A2D; } .dash-picker-option[data-theme-choice="midnight-gold"] .swatch { --swatch-bg: #0A1420; --swatch-accent: #DCB95C; } .dash-picker-option[data-theme-choice="arctic-blue"] .swatch { --swatch-bg: #ECF2F7; --swatch-accent: #1E3A5F; } .dash-picker-option[data-theme-choice="ember"] .swatch { --swatch-bg: #F8EFE5; --swatch-accent: #B7501E; } .dash-picker-option[data-theme-choice="lavender-dusk"] .swatch { --swatch-bg: #F2EEF6; --swatch-accent: #553C9A; } .dash-picker-option[data-theme-choice="warm-sand"] .swatch { --swatch-bg: #EFE5D2; --swatch-accent: #8B5A2B; } /* ─── Mobile: keep the dropdown inside the viewport. Default anchoring is right: 0 to align with the trigger on desktop, but on phones the trigger sits near the left and a 240px+ wide dropdown spills off the left edge. Flip to left: 0, clamp width, and trim the title typography so it fits at ~360px without clipping. ─── */ @media (max-width: 600px) { .dash-picker-pop { left: 0; right: auto; min-width: 0; width: max-content; max-width: calc(100vw - 2rem); } .dash-picker-pop-title { font-size: 0.6rem; letter-spacing: 0.12em; } .dash-picker-options { gap: 0.15rem; } .dash-picker-option { padding: 0.45rem 0.55rem; font-size: 0.82rem; } } /* ════════════════════════════════════════════════════════════════ BACK-LAYER AMBIENCE (shared across all pages) A living contour map: each elevation line ripples in opacity, staggered by level via --i (set per in each page's contour builder). Plus a second, slow-drifting accent orb (.bg-orb2). Both are frozen by each page's prefers-reduced-motion rule. ════════════════════════════════════════════════════════════════ */ .bg-contours .contour-path { animation: contourRipple 10s var(--ease-in-out) infinite; animation-delay: calc(var(--i, 0) * -0.16s); } @keyframes contourRipple { 0%, 100% { stroke-opacity: calc(var(--contour-base, 0.22) * var(--lvl-op, 1) * 0.68); } 50% { stroke-opacity: calc(var(--contour-base, 0.22) * var(--lvl-op, 1) * 1.28); } } .bg-orb2 { position: absolute; bottom: -18%; left: 58%; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 65%); filter: blur(70px); opacity: 0.3; pointer-events: none; animation: orbDrift 30s var(--ease-in-out) infinite alternate; } [data-theme="light"] .bg-orb2 { opacity: 0.22; } @keyframes orbDrift { 0% { transform: translate(0, 0) scale(1); opacity: 0.22; } 100% { transform: translate(-100px, -70px) scale(1.14); opacity: 0.42; } }