/* ============================================================ Andrew Parton — shared theme Palette 204 (cool-blue) re-skin of the Doubleslash tokens, plus the site's utility classes and cross-document View Transitions. Linked from every page after the DS tokens. ============================================================ */ /* ---- Theme tokens ---------------------------------------- Four selectable colour modes, cycled by the header button (apw-theme-toggle.js sets data-theme on ; the choice is saved in localStorage). :root is the default "Light" palette, identical to the original site. The three dark modes override only the flipping tokens below. Showcase panels that are meant to stay dark in every mode (hero, .apw-lamp band, portrait, demo cards, footer) keep their literal dark colours. Flipping tokens: surfaces, text, borders, header + mobile-nav backgrounds, and the accent (brightened on dark so it clears WCAG AA over the darker surfaces). Everything else is derived. */ :root { /* Surfaces */ --canvas: #f7f5fb; /* page background */ --surface: #ffffff; /* raised cards */ --surface-tint: #e8edf7; /* banded-chapter tint */ --header-bg: rgba(247,245,251,.82); /* sticky header (over inline) */ --mnav-bg: rgba(247,245,251,.98); /* mobile slide-down panel */ /* Text */ --ink: #303f5c; /* headings / strong foreground */ --body-ink: #1c2230; /* body copy */ --muted: rgba(28,34,48,.55); /* roles, dates */ --muted-soft: rgba(28,34,48,.5); /* captions */ /* Accent */ --accent: #4568bc; /* links, labels, focus, hairlines */ --accent-solid: #4568bc; /* filled controls (light text on top) */ --accent-ink: #3a5296; /* text on the pale accent wash */ --accent-light: #799ae1; /* cornflower — light accent */ --on-light-accent: #101827; /* dark text on a light accent pill (all modes) */ --accent-weak: rgba(69,104,188,.09); /* tag / accordion wash */ --accent-weak-2: rgba(69,104,188,.16);/* hover / open wash */ /* Borders */ --border: rgba(48,63,92,.14); --border-strong: rgba(48,63,92,.28); /* Legacy aliases (still referenced in places) */ --electric: var(--accent); --magenta: var(--accent-solid); --orchid: var(--accent-light); --burgundy: #2a3550; --footer: #0e1420; /* footer stays dark in every mode */ --white: #ffffff; --soft: #b8d1e7; --grad-mark: linear-gradient(135deg, #303f5c, #4568bc); --grad-mark-tri: linear-gradient(135deg, #303f5c, #4568bc 60%, #799ae1); } /* ---- A · Deep Navy — extends the existing dark surface ----- */ :root[data-theme="navy"] { --canvas: #0b1018; --surface: #131c2e; --surface-tint: #0f1727; --header-bg: rgba(11,16,24,.82); --mnav-bg: rgba(11,16,24,.98); --ink: #e8edf7; --body-ink: #c5cede; --muted: rgba(205,216,236,.62); --muted-soft: rgba(205,216,236,.48); --accent: #9db8ee; --accent-solid: #4568bc; --accent-ink: #cdddf8; --accent-light: #9db8ee; --accent-weak: rgba(120,150,220,.14); --accent-weak-2: rgba(120,150,220,.22); --border: rgba(160,180,220,.16); --border-strong: rgba(160,180,220,.32); } body { margin: 0; background: var(--canvas); color: var(--body-ink); font-family: "Libre Franklin", system-ui, sans-serif; } html { scroll-behavior: smooth; } /* Lenis takes over scrolling when active — native smooth-scroll fights it (causes sluggish, catch-up scrolling), so disable it. Lenis adds .lenis. */ html.lenis { scroll-behavior: auto; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } ::selection { background: var(--accent-solid); color: #fff; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; } /* ---- Lava-lamp WebGL background (reusable) ---------------- Calming, slow-drifting "//" marks rendered via WebGL (apw-lamp.js), meant for CTA-style dark panels. Apply .apw-lamp to the panel and give it a