/* Six skins — each override block is a complete lifestyle, not a recolor. * Colors, type pairing, radius scale, density, motion, grain, border style, * and layout offsets all shift together. Applied via [data-theme="..."] on * ; theme.js persists the choice in localStorage['dl-theme']. */ /* ============ 1. MONOLITH — tech-futurist, eerie black + electric blue ============ */ [data-theme="monolith"] { --surface-void: #07080A; --surface-0: #141619; --surface-1: #1A1D21; --surface-2: #2C2E3A; --surface-3: #383B47; --surface-inset: #0E1013; --ink-high: #F5F6F7; --ink-mid: rgba(245, 246, 247, 0.72); --ink-low: rgba(245, 246, 247, 0.5); --ink-whisper: rgba(245, 246, 247, 0.3); --line-soft: rgba(179, 180, 189, 0.08); --line-mid: rgba(179, 180, 189, 0.18); --line-strong: rgba(179, 180, 189, 0.32); --color-primary: #0A21C0; --color-accent: #5271FF; --color-secondary: #050A44; --ff-theme-display: "Space Grotesk", "Figtree", ui-sans-serif, sans-serif; --ff-theme-body: "Space Grotesk", "Figtree", ui-sans-serif, sans-serif; --ff-theme-mono: "JetBrains Mono", ui-monospace, monospace; --wght-display: 620; --wght-display-hero: 680; --wght-body: 420; --wght-body-strong: 640; --theme-display-tracking: -0.03em; --theme-body-tracking: -0.005em; --theme-display-case: none; --theme-radius-card: 6px; --theme-radius-btn: 6px; --theme-radius-pill: 9999px; --theme-radius-input: 6px; --theme-radius-inset: 4px; --theme-density: 1; --theme-motion-scale: 0.85; --theme-grain: 0; --theme-border-width: 1px; --theme-surface-alpha: 1; --theme-card-blur: 0px; --theme-bento-gap: var(--sp-3); --theme-offset-y: 0px; color-scheme: dark; } /* ============ 2. AURORA NOIR — cyber-noir, rich black + cyan glow ============ */ [data-theme="aurora-noir"] { --surface-void: #050607; --surface-0: #0B0C10; --surface-1: #14171D; --surface-2: #1F2833; --surface-3: #2A343F; --surface-inset: #06070A; --ink-high: #FFFFFF; --ink-mid: #C5C6C7; --ink-low: rgba(197, 198, 199, 0.65); --ink-whisper: rgba(197, 198, 199, 0.38); --line-soft: rgba(102, 252, 241, 0.08); --line-mid: rgba(197, 198, 199, 0.18); --line-strong: rgba(102, 252, 241, 0.4); --color-primary: #66FCF1; --color-accent: #45A29E; --color-secondary: #1F2833; --ff-theme-display: "Archivo", "Figtree", ui-sans-serif, sans-serif; --ff-theme-body: "Figtree", ui-sans-serif, sans-serif; --ff-theme-mono: "JetBrains Mono", ui-monospace, monospace; --wght-display: 880; --wght-display-hero: 900; --wght-body: 400; --wght-body-strong: 620; --theme-display-tracking: -0.04em; --theme-body-tracking: 0em; --theme-display-case: uppercase; --theme-radius-card: 12px; --theme-radius-btn: 9999px; --theme-radius-pill: 9999px; --theme-radius-input: 8px; --theme-radius-inset: 6px; --theme-density: 1.1; --theme-motion-scale: 1.15; --theme-grain: 0.03; --theme-border-width: 1px; --theme-surface-alpha: 0.92; --theme-card-blur: 0px; --theme-bento-gap: var(--sp-5); --theme-offset-y: 0px; --shadow-glow: 0 0 0 1px rgba(102, 252, 241, 0.4), 0 0 28px -4px rgba(102, 252, 241, 0.45); color-scheme: dark; } /* ============ 3. HALCYON — sci-fi HUD, teal + copper ============ */ [data-theme="halcyon"] { --surface-void: #171B1A; --surface-0: #2C3531; --surface-1: #343E3A; --surface-2: #3F4A46; --surface-3: #4A5652; --surface-inset: #1E2623; --ink-high: #D1E8E2; --ink-mid: rgba(209, 232, 226, 0.78); --ink-low: rgba(209, 232, 226, 0.52); --ink-whisper: rgba(209, 232, 226, 0.32); --line-soft: rgba(217, 176, 140, 0.1); --line-mid: rgba(217, 176, 140, 0.22); --line-strong: rgba(255, 203, 154, 0.4); --color-primary: #116466; --color-accent: #D9B08C; --color-secondary: #FFCB9A; --ff-theme-display: "Fraunces", "Figtree", serif; --ff-theme-body: "Figtree", ui-sans-serif, sans-serif; --ff-theme-mono: "JetBrains Mono", ui-monospace, monospace; --wght-display: 420; --wght-display-hero: 380; --wght-body: 420; --wght-body-strong: 640; --frau-soft: 20; --frau-wonk: 0; --frau-opsz: 144; --theme-display-tracking: 0.12em; --theme-body-tracking: 0.01em; --theme-display-case: uppercase; --theme-radius-card: 4px; --theme-radius-btn: 2px; --theme-radius-pill: 2px; --theme-radius-input: 2px; --theme-radius-inset: 2px; --theme-density: 1; --theme-motion-scale: 0.95; --theme-grain: 0.04; --theme-border-width: 1px; --theme-surface-alpha: 0.88; --theme-card-blur: 0px; --theme-bento-gap: var(--sp-3); --theme-offset-y: 0px; color-scheme: dark; } /* ============ 4. BIOMORPH — organic blob, rose + slate ============ */ [data-theme="biomorph"] { --surface-void: #1A2530; --surface-0: #2F4454; --surface-1: #3A5266; --surface-2: #456076; --surface-3: #516F87; --surface-inset: #1E2F3C; --ink-high: #F5E6EC; --ink-mid: rgba(245, 230, 236, 0.78); --ink-low: rgba(245, 230, 236, 0.54); --ink-whisper: rgba(245, 230, 236, 0.34); --line-soft: rgba(218, 123, 147, 0.1); --line-mid: rgba(218, 123, 147, 0.22); --line-strong: rgba(218, 123, 147, 0.46); --color-primary: #DA7B93; --color-accent: #376E6F; --color-secondary: #1C3334; --ff-theme-display: "Fraunces", Georgia, serif; --ff-theme-body: "Figtree", ui-sans-serif, sans-serif; --ff-theme-mono: "JetBrains Mono", ui-monospace, monospace; --wght-display: 380; --wght-display-hero: 420; --wght-body: 420; --wght-body-strong: 640; --frau-soft: 100; --frau-wonk: 1; --frau-opsz: 144; --theme-display-tracking: -0.03em; --theme-body-tracking: 0em; --theme-display-case: none; --theme-radius-card: 32px; --theme-radius-btn: 9999px; --theme-radius-pill: 9999px; --theme-radius-input: 24px; --theme-radius-inset: 18px; --theme-density: 1.15; --theme-motion-scale: 1.45; --theme-grain: 0.08; --theme-border-width: 1px; --theme-surface-alpha: 0.85; --theme-card-blur: 10px; --theme-bento-gap: var(--sp-5); --theme-offset-y: 12px; color-scheme: dark; } /* ============ 5. ATELIER — editorial luxury, cream + ink + ox-blood ============ */ [data-theme="atelier"] { --surface-void: #E8E1D2; --surface-0: #F5F1E8; --surface-1: #FFFFFF; --surface-2: #FAF6ED; --surface-3: #F0E9D8; --surface-inset: #EDE6D8; --ink-high: #1A1814; --ink-mid: rgba(26, 24, 20, 0.74); --ink-low: rgba(26, 24, 20, 0.52); --ink-whisper: rgba(26, 24, 20, 0.3); --line-soft: rgba(26, 24, 20, 0.06); --line-mid: rgba(26, 24, 20, 0.14); --line-strong: rgba(26, 24, 20, 0.28); --color-primary: #7C2D12; --color-accent: #B07D30; --color-secondary: #452505; --ff-theme-display: "Fraunces", Georgia, serif; --ff-theme-body: "Figtree", ui-sans-serif, sans-serif; --ff-theme-mono: "JetBrains Mono", ui-monospace, monospace; --wght-display: 400; --wght-display-hero: 420; --wght-body: 400; --wght-body-strong: 640; --frau-soft: 0; --frau-wonk: 1; --frau-opsz: 144; --theme-display-tracking: -0.035em; --theme-body-tracking: 0.002em; --theme-display-case: none; --theme-radius-card: 3px; --theme-radius-btn: 3px; --theme-radius-pill: 3px; --theme-radius-input: 2px; --theme-radius-inset: 2px; --theme-density: 1.25; --theme-motion-scale: 1.3; --theme-grain: 0.02; --theme-border-width: 1px; --theme-surface-alpha: 1; --theme-card-blur: 0px; --theme-bento-gap: var(--sp-6); --theme-offset-y: 0px; --shadow-sm: 0 1px 2px rgba(26, 24, 20, 0.06); --shadow-md: 0 12px 28px -16px rgba(26, 24, 20, 0.18); --shadow-lift: 0 30px 70px -28px rgba(26, 24, 20, 0.28); --shadow-dialog: 0 50px 140px -40px rgba(26, 24, 20, 0.36); --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.7); color-scheme: light; } /* ============ 6. FIREFLY — neon bright, French rose + valentino + plum ============ */ [data-theme="firefly"] { --surface-void: #1A0628; --surface-0: #38124A; --surface-1: #4D1A63; --surface-2: #63227E; --surface-3: #7A2B98; --surface-inset: #220A31; --ink-high: #FFFFFF; --ink-mid: rgba(255, 255, 255, 0.82); --ink-low: rgba(255, 255, 255, 0.58); --ink-whisper: rgba(255, 255, 255, 0.36); --line-soft: rgba(255, 255, 255, 0.08); --line-mid: rgba(236, 65, 134, 0.32); --line-strong: rgba(238, 84, 74, 0.5); --color-primary: #EC4186; --color-accent: #EE544A; --color-secondary: #FFB547; --ff-theme-display: "Archivo", "Figtree", sans-serif; --ff-theme-body: "Figtree", ui-sans-serif, sans-serif; --ff-theme-mono: "JetBrains Mono", ui-monospace, monospace; --wght-display: 880; --wght-display-hero: 900; --wght-body: 460; --wght-body-strong: 700; --theme-display-tracking: -0.04em; --theme-body-tracking: -0.005em; --theme-display-case: none; --theme-radius-card: 24px; --theme-radius-btn: 9999px; --theme-radius-pill: 9999px; --theme-radius-input: 18px; --theme-radius-inset: 14px; --theme-density: 1.05; --theme-motion-scale: 0.75; --theme-grain: 0.02; --theme-border-width: 2px; --theme-surface-alpha: 0.95; --theme-card-blur: 6px; --theme-bento-gap: var(--sp-4); --theme-offset-y: 0px; color-scheme: dark; } /* ============ Per-theme layout + decoration scoped rules ============ */ /* Aurora Noir — neon borders on emphasis cards, glow on primary buttons */ [data-theme="aurora-noir"] .card--emphasis, [data-theme="aurora-noir"] .card--glow { box-shadow: 0 0 0 1px var(--color-primary), 0 0 40px -8px color-mix(in oklab, var(--color-primary) 55%, transparent); } [data-theme="aurora-noir"] .btn--primary, [data-theme="aurora-noir"] .btn--aurora { color: #0B0C10; text-shadow: 0 0 12px rgba(102, 252, 241, 0.35); } /* Halcyon — bracket corners on emphasis cards, scan-line inset */ [data-theme="halcyon"] .card--emphasis { position: relative; border: 1px solid var(--line-strong); box-shadow: none; background: var(--surface-1); } [data-theme="halcyon"] .card--emphasis::before, [data-theme="halcyon"] .card--emphasis::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--color-accent); pointer-events: none; } [data-theme="halcyon"] .card--emphasis::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; } [data-theme="halcyon"] .card--emphasis::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; } /* Biomorph — asymmetric cell offsets + blob-shaped emphasis. Radius kept * less extreme than a true blob so content near corners stays readable. */ [data-theme="biomorph"] .bento > .cell:nth-child(3n+1) { transform: translateY(calc(var(--theme-offset-y) * -1)); } [data-theme="biomorph"] .bento > .cell:nth-child(3n+2) { transform: translateY(var(--theme-offset-y)); } [data-theme="biomorph"] .card--emphasis { border-radius: 44% 56% 48% 52% / 54% 46% 54% 46%; padding: calc(var(--sp-8) * var(--theme-density)); transition: border-radius var(--dur-slow) var(--ease-out-soft); } [data-theme="biomorph"] .card--emphasis:hover { border-radius: 52% 48% 56% 44% / 46% 54% 46% 54%; } /* Let biomorph-offset cells breathe — ambient clips up to 12px of vertical * transform otherwise. Keep the gradient glow contained via isolate. */ [data-theme="biomorph"] .ambient { overflow: visible; } [data-theme="biomorph"] .ambient::before { contain: paint; } /* Atelier — magazine-style wide-type hero, no card shadows by default */ [data-theme="atelier"] .card { box-shadow: none; border-color: var(--line-mid); } [data-theme="atelier"] .card--emphasis { background: var(--surface-1); border: 1px solid var(--ink-high); box-shadow: 8px 8px 0 var(--surface-3); } [data-theme="atelier"] h1, [data-theme="atelier"] h2 { font-style: italic; } /* Firefly — full-bleed color blocks, heavy 2px borders on primary surfaces */ [data-theme="firefly"] .card--emphasis { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #1A0628; border: 2px solid #FFFFFF; } [data-theme="firefly"] .card--emphasis .eyebrow, [data-theme="firefly"] .card--emphasis h2, [data-theme="firefly"] .card--emphasis h3, [data-theme="firefly"] .card--emphasis p { color: #1A0628; } /* Monolith — crisp right-rail accent band on emphasis cards */ [data-theme="monolith"] .card--emphasis { background: var(--surface-1); border-left: 3px solid var(--color-primary); box-shadow: none; } /* ============ Per-skin iconography — stroke weight + line caps ============ */ svg { stroke-linecap: round; stroke-linejoin: round; } [data-theme="monolith"] svg { stroke-width: 1.75; } [data-theme="aurora-noir"] svg { stroke-width: 2; } [data-theme="halcyon"] svg { stroke-width: 1.3; stroke-linecap: square; stroke-linejoin: miter; } [data-theme="biomorph"] svg { stroke-width: 2.4; } [data-theme="atelier"] svg { stroke-width: 1.1; } [data-theme="firefly"] svg { stroke-width: 2.5; } /* Per-skin 3D tilt intensity on card hover (surfaces.css reads --theme-tilt) */ [data-theme="monolith"] { --theme-tilt: 0.8deg; } [data-theme="aurora-noir"] { --theme-tilt: 1.2deg; } [data-theme="halcyon"] { --theme-tilt: 0.5deg; } [data-theme="biomorph"] { --theme-tilt: 2.5deg; } [data-theme="atelier"] { --theme-tilt: 0deg; } [data-theme="firefly"] { --theme-tilt: 2deg; } /* ============ Per-skin navigation — each skin rewrites the menu ============ */ /* Aurora Noir — uppercase bold labels, ghost border on current */ [data-theme="aurora-noir"] .site-nav__link > span { font-family: var(--ff-theme-display); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 800; font-size: var(--fs-2xs); } [data-theme="aurora-noir"] .site-nav__link[aria-current="page"] { background: transparent; box-shadow: inset 0 0 0 1px var(--color-primary); } /* Halcyon — labels only, mono uppercase, square outlined buttons */ [data-theme="halcyon"] .site-nav__link > i { display: none; } [data-theme="halcyon"] .site-nav__link > span { font-family: var(--ff-theme-mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: var(--fs-2xs); font-weight: 500; } [data-theme="halcyon"] .site-nav__link { border: 1px solid transparent; border-radius: 2px; padding: 0.55rem 0.95rem; } [data-theme="halcyon"] .site-nav__link:hover { border-color: var(--line-mid); background: transparent; color: var(--color-accent); } [data-theme="halcyon"] .site-nav__link[aria-current="page"] { border-color: var(--color-accent); background: transparent; } /* Biomorph — icon-only nav (abstract glyph feel) */ [data-theme="biomorph"] .site-nav__link > span { display: none; } [data-theme="biomorph"] .site-nav__link { width: 40px; height: 40px; padding: 0; border-radius: 50%; justify-content: center; } [data-theme="biomorph"] .site-nav__link > i { width: 18px; height: 18px; } [data-theme="biomorph"] .site-nav__link[aria-current="page"] { background: color-mix(in oklab, var(--color-primary) 18%, var(--surface-2)); box-shadow: none; } /* Atelier — serif italic labels, no icons, editorial spacing */ [data-theme="atelier"] .site-nav__link > i { display: none; } [data-theme="atelier"] .site-nav__link > span { font-family: var(--ff-theme-display); font-style: italic; font-size: var(--fs-md); font-variation-settings: "opsz" 24, "wght" 420, "WONK" 1; letter-spacing: 0; } [data-theme="atelier"] .site-nav__link { padding: 0.4rem 0.8rem; border-radius: 0; border-bottom: 1px solid transparent; } [data-theme="atelier"] .site-nav__link:hover { background: transparent; border-bottom-color: var(--color-primary); } [data-theme="atelier"] .site-nav__link[aria-current="page"] { background: transparent; border-bottom-color: var(--color-primary); box-shadow: none; } /* Firefly — rounded bold pills with heavy borders */ [data-theme="firefly"] .site-nav__link { font-weight: 620; border-radius: var(--theme-radius-pill); padding: 0.6rem 1rem; border: 2px solid transparent; } [data-theme="firefly"] .site-nav__link:hover { border-color: var(--line-mid); background: var(--surface-2); } [data-theme="firefly"] .site-nav__link[aria-current="page"] { background: color-mix(in oklab, var(--color-primary) 18%, var(--surface-2)); border-color: color-mix(in oklab, var(--color-primary) 38%, transparent); box-shadow: none; } /* Mobile fallback — themes that hide icons at desktop must re-show them * because the chrome.css mobile rule already hides labels <820px. */ @media (max-width: 820px) { [data-theme="halcyon"] .site-nav__link > i, [data-theme="atelier"] .site-nav__link > i { display: inline-flex; } [data-theme="halcyon"] .site-nav__link, [data-theme="atelier"] .site-nav__link { padding: 0.55rem; width: auto; border-radius: var(--theme-radius-btn); } }