/* ══════════════════════════════════════════════════════════════════ THEME TOKENS — light + dark ══════════════════════════════════════════════════════════════════ Shared by every public page. The theme is selected by data-theme on , set before first paint by the inline script in each (see theme.js — the inline copy must stay in sync with it). Two token families matter most here: --t-ink* text, which INVERTS between themes --t-surface* backgrounds, which INVERT between themes --t-on-dark* the deliberately dark chips, heroes and primary buttons. These do NOT simply invert: in light mode they are near-black with white text, and in dark mode they flip to near-white with dark text so they stay the strongest thing on the page. #1D1D1F is used in the source both as body text and as those dark surfaces, so it maps to --t-ink or --t-on-dark-bg depending on role. ══════════════════════════════════════════════════════════════════ */ :root, :root[data-theme="light"] { /* Surfaces */ --t-surface: #F5F5F7; /* page canvas */ --t-surface-raised: #FFFFFF; /* cards, nav pill, modals */ --t-surface-sunken: #F5F5F7; /* inset fills inside a card */ --t-surface-hover: #EFEFF4; /* subtle hover */ /* Text */ --t-ink: #1D1D1F; /* headings, primary text */ --t-ink-2: #6E6E73; /* body copy */ --t-ink-3: #86868B; /* secondary / labels */ --t-ink-4: #AEAEB2; /* faint / eyebrow / placeholder */ /* Lines */ --t-line: rgba(0, 0, 0, 0.06); --t-line-solid: #E5E5EA; --t-line-soft: rgba(229, 231, 235, 0.6); --t-line-strong: rgba(0, 0, 0, 0.18); /* Hover washes. A black wash is invisible on a dark canvas and a white one glares, so each theme gets its own direction. */ --t-hover-wash: rgba(0, 0, 0, 0.04); --t-hover-wash-strong: rgba(0, 0, 0, 0.09); /* Frosted panels and full-screen scrims */ --t-glass: rgba(255, 255, 255, 0.60); --t-scrim: rgba(255, 255, 255, 0.70); /* Ripple sits on the primary button, which inverts between themes */ --t-ripple: rgba(255, 255, 255, 0.30); /* Top-edge sheen on raised controls. Near-opaque white is a light-mode effect; on dark it draws a bright line across the top of the element. */ --t-inner-highlight: rgba(255, 255, 255, 0.95); /* Deliberately-dark elements (primary buttons, hero banners) */ --t-on-dark-bg: #1D1D1F; --t-on-dark-bg-hover: #2C2C2E; --t-on-dark-ink: #FFFFFF; --t-on-dark-ink-soft: rgba(255, 255, 255, 0.55); --t-on-dark-line: rgba(255, 255, 255, 0.08); /* Banners and hero panels. Unlike buttons these stay dark in BOTH themes — a hero that inverted to near-white would fight the page and strand the white text sitting on it. */ --t-banner-bg: #1D1D1F; --t-banner-ink: #FFFFFF; --t-banner-ink-soft: rgba(255, 255, 255, 0.55); --t-banner-line: rgba(255, 255, 255, 0.08); /* Brand + status. Hues hold across themes; lightness is tuned per theme so contrast stays legible on the opposite canvas. */ --t-accent: #EA580C; --t-accent-soft: rgba(234, 88, 12, 0.10); --t-success: #34C759; --t-success-soft: rgba(52, 199, 89, 0.10); --t-danger: #FF3B30; --t-danger-soft: rgba(255, 59, 48, 0.06); /* Chrome */ --t-scrollbar-track: #F5F5F7; --t-scrollbar-thumb: #D2D2D7; --t-nav-pill-bg: rgba(255, 255, 255, 0.55); --t-nav-pill-border: rgba(255, 255, 255, 0.55); --t-nav-pill-shadow: inset 0 1px rgba(255,255,255,0.9), inset 0 -1px rgba(0,0,0,0.03), 0 10px 34px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04); --t-shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 12px 32px -12px rgba(0,0,0,0.10); --t-shadow-lift: 0 2px 4px rgba(0,0,0,0.08), 0 14px 32px -12px rgba(0,0,0,0.18); color-scheme: light; } :root[data-theme="dark"] { --t-surface: #000000; --t-surface-raised: #1C1C1E; --t-surface-sunken: #2C2C2E; --t-surface-hover: #3A3A3C; --t-ink: #F5F5F7; --t-ink-2: #C7C7CC; --t-ink-3: #AEAEB2; --t-ink-4: #98989D; /* lifted: #6E6E73 failed AA on --t-surface-sunken */ --t-line: rgba(255, 255, 255, 0.10); --t-line-solid: #38383A; --t-line-soft: rgba(255, 255, 255, 0.08); --t-line-strong: rgba(255, 255, 255, 0.22); --t-hover-wash: rgba(255, 255, 255, 0.07); --t-hover-wash-strong: rgba(255, 255, 255, 0.13); --t-glass: rgba(28, 28, 30, 0.72); --t-scrim: rgba(0, 0, 0, 0.72); --t-ripple: rgba(0, 0, 0, 0.18); --t-inner-highlight: rgba(255, 255, 255, 0.07); /* Inverted: the strongest element on a dark page is a light one */ --t-on-dark-bg: #F5F5F7; --t-on-dark-bg-hover: #FFFFFF; --t-on-dark-ink: #1D1D1F; --t-on-dark-ink-soft: rgba(29, 29, 31, 0.55); --t-on-dark-line: rgba(0, 0, 0, 0.08); /* Stay dark, lifted just enough to separate from the #000 canvas */ --t-banner-bg: #2C2C2E; --t-banner-ink: #FFFFFF; --t-banner-ink-soft: rgba(255, 255, 255, 0.62); --t-banner-line: rgba(255, 255, 255, 0.10); /* Lifted so they clear the dark canvas — the light-mode values are too low-contrast against #000 to meet AA. */ --t-accent: #FF7A33; --t-accent-soft: rgba(255, 122, 51, 0.16); --t-success: #30D158; --t-success-soft: rgba(48, 209, 88, 0.16); --t-danger: #FF453A; --t-danger-soft: rgba(255, 69, 58, 0.14); --t-scrollbar-track: #000000; --t-scrollbar-thumb: #48484A; --t-nav-pill-bg: rgba(28, 28, 30, 0.62); --t-nav-pill-border: rgba(255, 255, 255, 0.10); --t-nav-pill-shadow: inset 0 1px rgba(255,255,255,0.06), inset 0 -1px rgba(0,0,0,0.30), 0 10px 34px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.40); --t-shadow-card: 0 1px 2px rgba(0,0,0,0.5), 0 12px 32px -12px rgba(0,0,0,0.7); --t-shadow-lift: 0 2px 4px rgba(0,0,0,0.5), 0 14px 32px -12px rgba(0,0,0,0.8); color-scheme: dark; } /* ══════════════════════════════════════════════════════════════════ THEME TRANSITION ══════════════════════════════════════════════════════════════════ Where the View Transitions API exists, theme.js grows a circular clip from the toggle button and the new theme is revealed through it. The two snapshots must not cross-fade or the wipe edge turns into a muddy blend, so their default animations are disabled and the new one is simply stacked on top. ══════════════════════════════════════════════════════════════════ */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-old(root) { z-index: 1; } ::view-transition-new(root) { z-index: 2; } /* The reveal edge reads as a hard line without a little light on it. */ [data-theme="dark"]::view-transition-new(root) { filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.10)); } [data-theme="light"]::view-transition-new(root) { filter: drop-shadow(0 0 22px rgba(0, 0, 0, 0.14)); } /* Nothing should re-animate its own colours underneath the wipe — that fights the reveal and smears the edge. */ .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; } /* ── Fallback crossfade ─────────────────────────────────────────── For browsers without View Transitions. Applied only while switching, so page loads are not animated and hover states are not smeared. theme.js adds/removes .theme-anim. */ .theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after { transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease, fill 0.28s ease, box-shadow 0.28s ease !important; transition-delay: 0s !important; } @media (prefers-reduced-motion: reduce) { .theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after { transition-duration: 0.01ms !important; } } /* ══════════════════════════════════════════════════════════════════ TAILWIND UTILITY BRIDGE ══════════════════════════════════════════════════════════════════ The markup uses ~236 Tailwind colour utilities (bg-white, text-gray-500, …). Those compile to fixed hex and ignore custom properties, so rather than editing every call site we remap the handful that are actually used. !important is required because the Tailwind CDN injects its utilities after this file. ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .bg-white { background-color: var(--t-surface-raised) !important; } [data-theme="dark"] .bg-gray-50 { background-color: var(--t-surface-sunken) !important; } [data-theme="dark"] .bg-gray-100 { background-color: var(--t-surface-sunken) !important; } [data-theme="dark"] .bg-black { background-color: var(--t-on-dark-bg) !important; } [data-theme="dark"] .text-black { color: var(--t-ink) !important; } [data-theme="dark"] .text-white { color: var(--t-on-dark-ink) !important; } [data-theme="dark"] .text-gray-800 { color: var(--t-ink) !important; } [data-theme="dark"] .text-gray-700 { color: var(--t-ink-2) !important; } [data-theme="dark"] .text-gray-600 { color: var(--t-ink-2) !important; } [data-theme="dark"] .text-gray-500 { color: var(--t-ink-3) !important; } [data-theme="dark"] .text-gray-400 { color: var(--t-ink-4) !important; } [data-theme="dark"] .text-gray-300 { color: var(--t-ink-4) !important; } [data-theme="dark"] .border-gray-100 { border-color: var(--t-line) !important; } [data-theme="dark"] .border-gray-200 { border-color: var(--t-line-solid) !important; } [data-theme="dark"] .border-gray-200\/60 { border-color: var(--t-line-soft) !important; } [data-theme="dark"] .border-black { border-color: var(--t-on-dark-bg) !important; } [data-theme="dark"] .text-orange-600, [data-theme="dark"] .text-orange-500 { color: var(--t-accent) !important; } [data-theme="dark"] .bg-orange-500 { background-color: var(--t-accent) !important; } /* Hover variants that would otherwise re-introduce light-mode colours */ [data-theme="dark"] .hover\:text-black:hover { color: var(--t-ink) !important; } [data-theme="dark"] .hover\:text-gray-800:hover { color: var(--t-ink) !important; } [data-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--t-surface-sunken) !important; } /* Opacity variants (bg-gray-50/60) are separate utilities from their base, so they need their own rules — otherwise they wash light grey over dark cards. */ [data-theme="dark"] .hover\:bg-gray-50\/60:hover { background-color: var(--t-surface-sunken) !important; } [data-theme="dark"] .bg-gray-50\/60 { background-color: var(--t-surface-sunken) !important; } [data-theme="dark"] .bg-white\/60, [data-theme="dark"] .bg-white\/70, [data-theme="dark"] .bg-white\/80 { background-color: var(--t-surface-raised) !important; } /* Tailwind ARBITRARY colour values — text-[#1d1d1f] and friends. These are generated per-value by the CDN and are not covered by the named-utility rules above, so they need remapping explicitly or headings stay near-black on a near-black canvas. */ [data-theme="dark"] .text-\[\#1d1d1f\], [data-theme="dark"] .text-\[\#1D1D1F\] { color: var(--t-ink) !important; } [data-theme="dark"] .bg-\[\#2c2c2e\], [data-theme="dark"] .bg-\[\#2C2C2E\] { background-color: var(--t-surface-sunken) !important; } [data-theme="dark"] .bg-\[\#FAFAFA\] { background-color: var(--t-surface-sunken) !important; } /* This one is a full-width page section, so it must match the canvas — the sunken token would lift it to #2C2C2E and band the page. */ [data-theme="dark"] .bg-\[\#F5F5F7\] { background-color: var(--t-surface) !important; } [data-theme="dark"] .hover\:bg-\[\#2c2c2e\]:hover { background-color: var(--t-surface-hover) !important; } /* The nav brand mark ships as black-on-transparent artwork, so it vanishes on a dark canvas. Inverting is exact here because the mark is pure black. */ [data-theme="dark"] .nav-logo img, [data-theme="dark"] #nav-content img[src*="brand-mark"], [data-theme="dark"] .nav-logo-mark img { filter: invert(1); } /* Ambient hero glows are tuned for a light canvas; at full strength on black they read as a muddy brown wash. */ [data-theme="dark"] .lg-blob { opacity: 0.28 !important; } /* Safety net: anything inside a banner inherits light ink in both themes, so a stray hardcoded colour cannot strand text on the dark panel. */ .doc-hero, .sc-hero, .announcement-banner { color: var(--t-banner-ink); } [data-theme="dark"] .doc-hero .doc-eyebrow, [data-theme="dark"] .sc-hero .sc-hero-sub { color: var(--t-banner-ink-soft) !important; } /* The Tailwind config defines a brand.* palette (brand.ink, brand.paper …). Those compile to fixed hex like any other utility, so they need bridging too — otherwise product cards and headings keep light-mode colours. */ [data-theme="dark"] .text-brand-ink { color: var(--t-ink) !important; } [data-theme="dark"] .text-brand-inkSoft { color: var(--t-ink-2) !important; } [data-theme="dark"] .text-brand-inkFaint { color: var(--t-ink-4) !important; } [data-theme="dark"] .text-brand-paper { color: var(--t-on-dark-ink) !important; } [data-theme="dark"] .text-brand-accent { color: var(--t-accent) !important; } [data-theme="dark"] .bg-brand-paper { background-color: var(--t-surface-raised) !important; } [data-theme="dark"] .bg-brand-paper2 { background-color: var(--t-surface-sunken) !important; } [data-theme="dark"] .bg-brand-bg { background-color: var(--t-surface) !important; } [data-theme="dark"] .bg-brand-ink { background-color: var(--t-on-dark-bg) !important; } [data-theme="dark"] .bg-brand-line { background-color: var(--t-line-solid) !important; } [data-theme="dark"] .border-brand-line { border-color: var(--t-line-solid) !important; } /* Inner top highlights are a light-mode sheen. At 0.9 alpha on a dark card they render as a bright white line across the top edge. */ [data-theme="dark"] .tk-body::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.07) !important; } /* ══════════════════════════════════════════════════════════════════ THEME TOGGLE (nav control) ══════════════════════════════════════════════════════════════════ */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border: none; border-radius: 9999px; background: transparent; color: var(--t-ink-3); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s ease, color 0.2s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1); } .theme-toggle:hover { background: rgba(127, 127, 127, 0.12); color: var(--t-ink); } .theme-toggle:active { transform: scale(0.92); } .theme-toggle:focus-visible { outline: 2px solid var(--t-ink); outline-offset: 2px; } .theme-toggle svg { width: 17px; height: 17px; display: block; } /* Both glyphs are stacked and swapped by rotating one out as the other rotates in, so the control itself animates rather than hard-cutting. */ .theme-toggle { position: relative; } .theme-toggle .ti-sun, .theme-toggle .ti-moon { position: absolute; top: 50%; left: 50%; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease; } .theme-toggle .ti-sun { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; } .theme-toggle .ti-moon { transform: translate(-50%, -50%) rotate(-90deg) scale(0.4); opacity: 0; } [data-theme="dark"] .theme-toggle .ti-sun { transform: translate(-50%, -50%) rotate(90deg) scale(0.4); opacity: 0; } [data-theme="dark"] .theme-toggle .ti-moon { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; } .theme-toggle:hover .ti-sun, .theme-toggle:hover .ti-moon { transform: translate(-50%, -50%) rotate(0deg) scale(1.08); } [data-theme="dark"] .theme-toggle:hover .ti-sun { transform: translate(-50%, -50%) rotate(90deg) scale(0.4); } .theme-toggle:hover .ti-moon { transform: translate(-50%, -50%) rotate(-90deg) scale(0.4); } [data-theme="dark"] .theme-toggle:hover .ti-moon { transform: translate(-50%, -50%) rotate(0deg) scale(1.08); } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } .theme-toggle .ti-sun, .theme-toggle .ti-moon { transition-duration: 0.01ms !important; } }