/* theme-system.css — Phase 4 theme runtime hooks. * * Spec: docs/theme-manifest.md * * Loaded after premium-tokens.css + per-theme overrides. Declares: * 1. Default values for the per-theme photo CSS variables (so the * site renders before the manifest fetch completes). * 2. Layout-mode override classes (body.layout-). * 3. Hooks for icon swaps (img[data-icon]). * 4. Mute-toggle styling (synced from html[data-nx-mute]). * * The runtime (theme-runtime.js) writes the actual per-theme values * to .style on theme switch. This file only defines the * fallbacks + structural rules. */ /* ── Defaults for per-theme photo slots ─────────────────────────── */ :root { --theme-photo-hero: url('/static/fieldcam/gateway-nw.jpg'); --theme-photo-section-realism: none; --theme-photo-section-staff: none; --theme-photo-section-rules: none; --theme-photo-fieldcam-frame: none; } /* When a theme provides section-* photos, the corresponding section * picks up a subtle background. Stays opt-in: themes without those * photos render flat as before. */ body[data-page="aegis"] .aegis-section[data-bg="realism"]::before, body[data-page="aegis"] .aegis-section[data-bg="staff"]::before, body[data-page="aegis"] .aegis-section[data-bg="rules"]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-size: cover; background-position: center; opacity: 0.18; mix-blend-mode: luminosity; } body[data-page="aegis"] .aegis-section[data-bg="realism"] { position: relative; } body[data-page="aegis"] .aegis-section[data-bg="realism"]::before { background-image: var(--theme-photo-section-realism); } body[data-page="aegis"] .aegis-section[data-bg="staff"]::before { background-image: var(--theme-photo-section-staff); } body[data-page="aegis"] .aegis-section[data-bg="rules"]::before { background-image: var(--theme-photo-section-rules); } /* Hero photo — let the manifest override the existing * .aegis-hero__photo background-image declaration in aegis-home.css. */ body[data-page="aegis"] .aegis-hero__photo { background-image: var(--theme-photo-hero) !important; } /* ── Icon swaps ────────────────────────────────────────────────── */ img[data-icon] { width: 100%; height: 100%; object-fit: contain; display: block; } img[data-icon]:not([src]) { display: none; } /* When a feature card has both an inline SVG glyph AND a per-theme * sticker img, the runtime sets the img and we hide the SVG fallback. * This is the "themed sticker overrides default glyph" pattern. */ .aegis-feature__glyph img[data-icon] + svg, .aegis-feature__glyph svg + img[data-icon] { display: block; } .aegis-feature__glyph img[data-icon][src] ~ svg { display: none; } /* ── Layout modes ───────────────────────────────────────────────── */ /* Default mode is `dossier` and matches the current aegis-home.css * layout exactly. The other modes are progressive overrides. */ /* INSTRUMENT-PANEL (Polar / Steampunk). Tighter line-height, denser * panel rivets, side-by-side stat columns. */ body.layout-instrument-panel[data-page="aegis"] .aegis-features { gap: clamp(0.6rem, 1vw, 1rem); } body.layout-instrument-panel[data-page="aegis"] .aegis-feature { border-width: 1px 1px 1px 3px; border-left-color: color-mix(in srgb, var(--accent), var(--panel-edge) 35%); } body.layout-instrument-panel[data-page="aegis"] .aegis-stats { gap: 0.6rem; } body.layout-instrument-panel[data-page="aegis"] .aegis-stat { border-radius: 2px; } body.layout-instrument-panel[data-page="aegis"] .aegis-feature__body { font-family: var(--font-mono); font-size: clamp(0.86rem, 0.95vw, 1rem); line-height: 1.5; letter-spacing: 0.01em; } /* JOURNAL (Vellum / Naturalist). Narrower column, drop-cap on first * paragraph, more whitespace. */ body.layout-journal[data-page="aegis"] .aegis-page { max-width: 1280px; } body.layout-journal[data-page="aegis"] .aegis-section__lede::first-letter { font-family: var(--font-display); font-size: 3.4em; float: left; line-height: 0.85; margin: 0.05em 0.18em 0 0; color: var(--accent); } body.layout-journal[data-page="aegis"] .aegis-section { padding: clamp(4.5rem, 8vh, 7rem) 0; } /* GLASS-DECK (Bioluminescent / Volcanic). Centred column, glowing * panel margins. */ body.layout-glass-deck[data-page="aegis"] .aegis-feature { box-shadow: var(--shadow-panel), inset 0 0 0 1px color-mix(in srgb, var(--accent), transparent 75%), 0 0 24px color-mix(in srgb, var(--accent), transparent 88%); } body.layout-glass-deck[data-page="aegis"] .aegis-stat { background: color-mix(in srgb, var(--panel), #000 8%); box-shadow: inset 0 0 32px color-mix(in srgb, var(--accent), transparent 90%), var(--shadow-panel); } /* SOLAR-CARD (Solarpunk / Greenhouse). Rounded panels, brighter * shadows, warmer borders. */ body.layout-solar-card[data-page="aegis"] .aegis-feature, body.layout-solar-card[data-page="aegis"] .aegis-stat, body.layout-solar-card[data-page="aegis"] .aegis-tier, body.layout-solar-card[data-page="aegis"] .aegis-rule, body.layout-solar-card[data-page="aegis"] .aegis-steps { border-radius: 18px; box-shadow: 0 12px 28px color-mix(in srgb, var(--accent), transparent 80%), 0 1px 0 color-mix(in srgb, var(--accent), transparent 70%) inset; } /* DUST-STRATUM (Martian). Wider gutters, dust-storm grain overlay. */ body.layout-dust-stratum[data-page="aegis"] .aegis-page { padding-left: clamp(1.4rem, 4vw, 4rem); padding-right: clamp(1.4rem, 4vw, 4rem); } body.layout-dust-stratum[data-page="aegis"] .aegis-section::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--accent-2), transparent 88%), transparent 40%); mix-blend-mode: soft-light; opacity: 0.5; } /* OBSIDIAN-CODEX (Codex). Tight columns, gold rules between sections. */ body.layout-obsidian-codex[data-page="aegis"] .aegis-section { border-bottom: 1px solid color-mix(in srgb, var(--accent), transparent 70%); } /* ── Mute toggle (synced from html[data-nx-mute]) ──────────────── */ [data-nx-mute-toggle] { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; color: var(--ink-soft); border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; transition: color 160ms ease, border-color 160ms ease, background 160ms ease; } [data-nx-mute-toggle]:hover { color: var(--ink); border-color: var(--accent); } html[data-nx-mute="1"] [data-nx-mute-toggle] { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2), transparent 50%); } [data-nx-mute-toggle] .nx-mute-on, [data-nx-mute-toggle] .nx-mute-off { display: none; } html[data-nx-mute="0"] [data-nx-mute-toggle] .nx-mute-on { display: inline; } html[data-nx-mute="1"] [data-nx-mute-toggle] .nx-mute-off { display: inline; } /* ── Global brightness floor (Operator 2026-04-28, v3 — fix v2 regression) * v2 set `--ink: color-mix(... var(--ink), white 6%);` which is a * self-referential :root declaration — CSS treats that as invalid * and falls back to the property's initial value (`currentcolor` * → ends up black). That zeroed every theme's body text on dark * backgrounds. v3 leaves --ink alone (each theme already authors a * concrete colour) and only boosts the *derived* alpha tokens, which * is the only thing that needed lifting in the first place. */ :root { --ink-soft: color-mix(in srgb, var(--ink), transparent 2%); --ink-dim: color-mix(in srgb, var(--ink), transparent 10%); --ink-faint: color-mix(in srgb, var(--ink), transparent 22%); --panel-edge: color-mix(in srgb, var(--accent, var(--ink)), transparent 32%); } /* Vellum (paper-light theme) is the inverse: --ink is dark on a light * --bg. Pin its derived tokens to dark-on-light ratios so the * global rule doesn't make them too transparent over the cream bg. */ html[data-theme="vellum-atlas"]:root, [data-theme="vellum-atlas"] { --ink-soft: rgba(47, 38, 24, 0.92); --ink-dim: rgba(47, 38, 24, 0.78); --ink-faint: rgba(47, 38, 24, 0.62); --panel-edge: rgba(92, 74, 48, 0.55); }