/* ========================================================== Intone Theme Tokens — theme-tokens.css v1.0 Loaded AFTER intone-design-system.css and intone-header.css via WordPress dep chain, so [data-theme="dark"] wins the cascade over any :root vars defined in earlier sheets. Token naming: --t-* theme-sensitive semantic tokens (these flip) --ds-* primitive colour palette (never change, in design-system.css) --ihn-* header token overrides in dark (override header.css :root) ========================================================== */ /* ── Smooth theme transition ─────────────────────────────── */ /* The `is-theme-switching` class is added by theme-toggle.js only during an explicit click, then removed after 300ms. This means transitions fire on toggle but NOT on initial page load — zero flash, zero layout shift. */ html.is-theme-switching, html.is-theme-switching * { transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease, fill 280ms ease, stroke 280ms ease !important; } /* ══════════════════════════════════════════════════════════ LIGHT MODE — default (existing site appearance) ══════════════════════════════════════════════════════════ */ :root { color-scheme: light; /* ── Page surfaces ────────────────────────────────────── */ --t-bg: #ffffff; --t-surface: #f4f6f9; /* alt / light-band sections */ --t-surface-raised: #f8f8f8; /* card backgrounds */ --t-surface-deep: #ffffff; /* nested cards / accordions */ /* ── Typography ───────────────────────────────────────── */ --t-text: #09101d; --t-text-muted: rgba(9, 16, 29, 0.50); --t-text-faint: rgba(9, 16, 29, 0.35); /* captions, footer copy */ /* ── Borders & dividers ───────────────────────────────── */ --t-border: rgba(9, 16, 29, 0.08); --t-border-strong: rgba(9, 16, 29, 0.14); /* ── Skeleton bones ───────────────────────────────────── */ --t-bone-from: rgba(0, 0, 0, 0.04); --t-bone-mid: rgba(0, 0, 0, 0.10); --t-card-border: rgba(255, 163, 0, 0.25); /* gold skeleton card */ /* ── Elevation ────────────────────────────────────────── */ --t-shadow: 0 4px 24px rgba(9, 16, 29, 0.08); } /* ══════════════════════════════════════════════════════════ DARK MODE Set on by either: 1. Anti-FODT inline script (reads prefers-color-scheme) 2. theme-toggle.js on click (persists to localStorage) ══════════════════════════════════════════════════════════ */ [data-theme="dark"] { color-scheme: dark; /* ── Page surfaces ────────────────────────────────────── */ --t-bg: #0a0a0b; --t-surface: #111113; --t-surface-raised: #141416; --t-surface-deep: #1a1a1c; /* ── Typography ───────────────────────────────────────── */ --t-text: #f4f6f9; --t-text-muted: rgba(255, 255, 255, 0.50); --t-text-faint: rgba(255, 255, 255, 0.25); /* ── Borders ──────────────────────────────────────────── */ --t-border: rgba(255, 255, 255, 0.08); --t-border-strong: rgba(255, 255, 255, 0.14); /* ── Skeleton bones ───────────────────────────────────── */ --t-bone-from: rgba(255, 255, 255, 0.04); --t-bone-mid: rgba(255, 255, 255, 0.10); --t-card-border: rgba(246, 180, 63, 0.25); /* ── Elevation ────────────────────────────────────────── */ --t-shadow: 0 4px 24px rgba(0, 0, 0, 0.40); } /* ══════════════════════════════════════════════════════════ DARK MODE — HEADER (SCROLLED STATE ONLY) The transparent initial-view header is controlled per-page by the ihn--dark / ihn--light class from the Header Style meta box. Theme tokens only apply once the header gains a background (is-scrolled), so the page's declared style is never overridden on first paint. ══════════════════════════════════════════════════════════ */ [data-theme="dark"] #intone-header.is-scrolled { --ihn-bg: #0a0a0b; --ihn-border: rgba(255, 255, 255, 0.10); --ihn-text: #f4f6f9; --ihn-muted: rgba(255, 255, 255, 0.45); --ihn-pill-bg: rgba(255, 255, 255, 0.06); --ihn-pill-color: #f4f6f9; --ihn-pill-hover-bg: rgba(255, 255, 255, 0.10); --ihn-pill-hover-color: #ffffff; --ihn-drop-shadow: 0 8px 40px rgba(0, 0, 0, 0.60), 0 2px 8px rgba(0, 0, 0, 0.40); } /* ══════════════════════════════════════════════════════════ DARK MODE — HEADER STRUCTURAL OVERRIDES Hardcoded colours inside intone-header.css that can't be reached via custom-property override alone. ══════════════════════════════════════════════════════════ */ /* Dropdown panels */ [data-theme="dark"] .ihn-dropdown { background: #1a1a1c; border-color: rgba(255, 255, 255, 0.10); } /* Standard drop links */ [data-theme="dark"] .drop-link { color: #f4f6f9; } [data-theme="dark"] .drop-link:hover { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .drop-link svg { color: rgba(255, 255, 255, 0.40); } [data-theme="dark"] .drop-card:hover { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .drop-card-name { color: #f4f6f9; } /* Mega menu */ [data-theme="dark"] .mega-link:hover { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .mega-link:hover .mega-link-icon { background: rgba(246, 180, 63, 0.12); } [data-theme="dark"] .mega-link-text strong { color: #f4f6f9; } [data-theme="dark"] .mega-stat { background: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .mega-stat-num { color: #f4f6f9; } [data-theme="dark"] .mega-col:first-child, [data-theme="dark"] .mega-col--impl { border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .mega-stat-row { border-color: rgba(255, 255, 255, 0.08); } /* Mobile navigation drawer */ [data-theme="dark"] .ihn-mobile-nav { background: #0a0a0b; border-top: 1px solid rgba(255, 255, 255, 0.08); } [data-theme="dark"] .ihn-mobile-sub { background: #111113; border-top-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] #intone-header .ihn-mobile-sub a { color: rgba(255, 255, 255, 0.80); border-bottom-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] #intone-header .ihn-mobile-sub a:hover { color: #ffffff; padding-left: 36px; } [data-theme="dark"] #intone-header .ihn-mobile-trigger:hover, [data-theme="dark"] #intone-header .ihn-mobile-link:hover { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] #intone-header .ihn-mobile-trigger[aria-expanded="true"] { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .ihn-mobile-sub-section { color: rgba(255, 255, 255, 0.35); } /* Mobile CTA — invert to light button on dark bg */ [data-theme="dark"] .ihn-mobile-footer { border-top-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .ihn-mobile-cta { background: #f4f6f9; color: #09101d; } [data-theme="dark"] .ihn-mobile-cta:hover { background: #dde1e7; color: #09101d; } /* Hamburger bars — light only when the mobile nav drawer is open (the X icon sits against the dark drawer background so it must be light). The scrolled-state colour is already handled automatically: .ihn-bar { background: var(--ihn-text) } + [data-theme="dark"] #intone-header.is-scrolled { --ihn-text: #f4f6f9 } Keeping this rule broad (any dark-mode + open nav) means light-page headers won't get invisible light bars while unscrolled. */ [data-theme="dark"] #intone-header .ihn-hamburger[aria-expanded="true"] .ihn-bar { background: #f4f6f9; } /* ── Theme toggle ─── Icon visibility is driven by the button's data-pref attribute (see intone-header.css), NOT by the resolved data-theme — so the icon always reflects the user's choice (Light / Dark / System), not the current colour. Only the hover background adapts to dark mode here. */ [data-theme="dark"] #intone-header .ihn-theme-toggle:hover { background: rgba(255, 255, 255, 0.08); } /* ── Nav pills — DARK MODE inversion (SCROLLED header only) ─── When the user toggles dark mode, the SOLID (scrolled) header inverts: dark resting pill + white text; white pill + dark text on hover / open. Gated to .is-scrolled ON PURPOSE — the transparent top-of-page view is governed by the page's Header Style metabox (#intone-header.ihn--dark:not(.is-scrolled) / default, in intone-header.css), NOT by the theme toggle, so toggling never recolours the over-hero header. Specificity ([data-theme] + .is-scrolled → 1,3,0) beats the default light pill (1,1,0). */ [data-theme="dark"] #intone-header.is-scrolled .ihn-trigger, [data-theme="dark"] #intone-header.is-scrolled .ihn-link, [data-theme="dark"] #intone-header.is-scrolled .ihn-trigger--pill { background: #141414 !important; color: #ffffff !important; } [data-theme="dark"] #intone-header.is-scrolled .ihn-trigger:hover, [data-theme="dark"] #intone-header.is-scrolled .ihn-link:hover, [data-theme="dark"] #intone-header.is-scrolled .ihn-trigger--pill:hover, [data-theme="dark"] #intone-header.is-scrolled .ihn-trigger[aria-expanded="true"], [data-theme="dark"] #intone-header.is-scrolled .ihn-trigger--pill[aria-expanded="true"] { background: #ffffff !important; color: #141414 !important; } [data-theme="dark"] #intone-header.is-scrolled .ihn-trigger:hover .ihn-chevron path, [data-theme="dark"] #intone-header.is-scrolled .ihn-trigger[aria-expanded="true"] .ihn-chevron path { stroke: #141414; }