/* ============================================================ AETHEREAL STORIES — THEME SYSTEM (theme.css) ------------------------------------------------------------ Loaded LAST by header.php on every page (after style.css / archive-shared.css / $pageStyles). Owns the palette for both themes and everything parchment mode needs. THEMES (default) → Candlelight (dark, gold on black) html[data-theme="parchment"] → Daylight (aged parchment & ink) Dark mode is the site default. Parchment is opt-in via the .theme-toggle buttons (header + footer); the choice persists in localStorage ('ae-theme') and is applied before first paint by the inline script in header.php's . STRUCTURE 1. Dark palette (:root) 2. Parchment palette override 3. Parchment structural rules (backgrounds, canvas, frames) 4. Header & footer stay dark (leather binding around the page) 5. Prose & heading ink re-pins 6. Inline-style override layer (catches style="" attributes site-wide by signature — no per-page edits needed) 7. Theme toggle buttons 8. Crossfade helper ============================================================ */ /* ============================================================ 1. DARK PALETTE — site-wide source of truth ============================================================ */ :root { --gold: #F1E5AC; --gold-bright: #FFD700; --gold-bright-hover: #FFC700; --gold-strong: rgba(241, 229, 172, 0.85); --gold-dim: rgba(241, 229, 172, 0.7); --gold-faint: rgba(241, 229, 172, 0.5); --gold-ghost: rgba(241, 229, 172, 0.28); --gold-tint-line: rgba(241, 229, 172, 0.12); --gold-tint: rgba(241, 229, 172, 0.05); --gold-glow: rgba(255, 215, 0, 0.4); --gold-glow-lg: rgba(255, 215, 0, 0.5); --gold-bright-tint: rgba(255, 215, 0, 0.12); --black-panel: rgba(0, 0, 0, 0.7); --panel-deep: rgba(0, 0, 0, 0.9); --panel-faint: rgba(0, 0, 0, 0.5); --panel-solid: #000000; --page-shadow: rgba(0, 0, 0, 0.8); --page-bg: #000000; --ink-on-accent: #000000; --text-body: #F1E5AC; --text-heading: #F1E5AC; --text-soft: rgba(241, 229, 172, 0.7); --status-ok: #7aaf5a; --status-ok-bg: rgba(122, 175, 90, 0.1); --wl: #a8c8e8; --wl-hover: #cde4f8; --wl-line: rgba(168, 200, 232, 0.3); --wl-line-hover: rgba(168, 200, 232, 0.7); --stub: #c8a84a; --stub-line: rgba(200, 168, 74, 0.4); --warn-border: rgba(180, 50, 50, 0.6); --warn-border-faint: rgba(180, 50, 50, 0.3); --warn-border-open: rgba(220, 80, 80, 0.55); --warn-line: rgba(180, 50, 50, 0.18); --warn-bg: rgba(120, 20, 20, 0.15); --warn-bg-hover: rgba(180, 50, 50, 0.08); --warn-bg2: rgba(20, 0, 0, 0.25); --warn-bg2-open: rgba(20, 0, 0, 0.35); --warn-bg-t1: rgba(0, 0, 0, 0.2); --warn-bg-t1-open: rgba(0, 0, 0, 0.3); --warn-text: rgba(220, 100, 100, 0.9); --warn-text-hover: rgba(240, 180, 180, 1); --warn-soft: rgba(220, 140, 140, 0.8); --warn-softer: rgba(220, 140, 140, 0.55); --frame-hi: rgba(255, 250, 230, 1); --frame-mid: rgba(255, 243, 205, 0.9); --frame-mid2: rgba(255, 247, 215, 0.7); --frame-0: rgba(255, 243, 205, 0); /* Chronicle category colours */ --cat-writing: #FFD700; --cat-world: #c8a96e; --cat-archive: #a0c8a0; --cat-announce: #F1E5AC; } /* ============================================================ 2. PARCHMENT PALETTE — aged paper & iron-gall ink ------------------------------------------------------------ The background is warm cream (century-old paper), body text is near-black brown (oxidised ink), and the gold identity shifts to a deep ochre-bronze that passes contrast on cream. ============================================================ */ html[data-theme="parchment"] { --gold: #7a5c14; /* bronze — borders, small caps, links */ --gold-bright: #6d4f0e; /* accent bronze (was #FFD700) */ --gold-bright-hover: #52390a; /* hover darkens on light ground */ --gold-strong: rgba(46, 38, 22, 0.92); --gold-dim: rgba(74, 65, 48, 0.85); --gold-faint: rgba(92, 79, 54, 0.65); --gold-ghost: rgba(122, 92, 20, 0.35); --gold-tint-line: rgba(122, 92, 20, 0.18); --gold-tint: rgba(122, 92, 20, 0.07); --gold-glow: rgba(122, 92, 20, 0.22); /* glows become soft bronze shading */ --gold-glow-lg: rgba(122, 92, 20, 0.32); --gold-bright-tint: rgba(122, 92, 20, 0.1); --black-panel: rgba(250, 244, 226, 0.88); /* translucent panels → aged card stock */ --panel-deep: rgba(250, 244, 226, 0.96); --panel-faint: rgba(246, 239, 222, 0.72); --panel-solid: #faf4e2; --page-shadow: rgba(90, 70, 35, 0.3); --page-bg: #f3ecda; --ink-on-accent: #f7f0dc; /* cream text on bronze buttons */ --text-body: #231d12; /* iron-gall ink */ --text-heading: #2b2113; --text-soft: rgba(74, 65, 48, 0.9); --status-ok: #4a6e33; --status-ok-bg: rgba(74, 110, 51, 0.12); --wl: #2c5a8c; /* wiki links: dark ink-blue */ --wl-hover: #1d3f66; --wl-line: rgba(44, 90, 140, 0.35); --wl-line-hover: rgba(44, 90, 140, 0.7); --stub: #7a5a10; --stub-line: rgba(122, 90, 16, 0.45); --warn-border: rgba(150, 40, 40, 0.5); --warn-border-faint: rgba(150, 40, 40, 0.3); --warn-border-open: rgba(150, 40, 40, 0.65); --warn-line: rgba(150, 40, 40, 0.2); --warn-bg: rgba(160, 40, 40, 0.07); --warn-bg-hover: rgba(150, 40, 40, 0.08); --warn-bg2: rgba(160, 40, 40, 0.06); --warn-bg2-open: rgba(160, 40, 40, 0.1); --warn-bg-t1: rgba(122, 92, 20, 0.05); --warn-bg-t1-open: rgba(122, 92, 20, 0.09); --warn-text: #8a2a2a; --warn-text-hover: #6d1f1f; --warn-soft: rgba(130, 45, 45, 0.85); --warn-softer: rgba(130, 45, 45, 0.6); --frame-hi: rgba(139, 105, 22, 0.85); /* the travelling comet, now in bronze */ --frame-mid: rgba(122, 92, 20, 0.55); --frame-mid2: rgba(122, 92, 20, 0.45); --frame-0: rgba(122, 92, 20, 0); /* Chronicle category colours — deepened for cream */ --cat-writing: #6d4f0e; --cat-world: #7a5f2e; --cat-archive: #4a6e33; --cat-announce: #7a5c14; } /* ============================================================ 3. PARCHMENT STRUCTURAL RULES ============================================================ */ /* The night sky goes out: hide the starfield canvas and the dark parallax background image. The page becomes paper. */ html[data-theme="parchment"] #aethereal-bg, html[data-theme="parchment"] .parallax-bg { display: none !important; } /* Aged-paper ground — one even cream. */ html[data-theme="parchment"] body { /* Flat, not a gradient: decorative ✦ dividers mask their line with a solid box of the page colour, and any gradient behind them shows a seam. One even cream keeps every mask invisible. */ background: var(--page-bg) !important; } /* ============================================================ 4. HEADER & FOOTER STAY DARK ------------------------------------------------------------ The Header bar artwork is dark; rather than fight it, the header and footer keep their candlelit gold-on-black identity in both themes — the parchment page reads as bound in dark leather. Re-pinning the palette variables on these containers cascades to everything inside them (including the toggles). ============================================================ */ html[data-theme="parchment"] header, html[data-theme="parchment"] .main-footer { /* The Header bar artwork is partially transparent, so on a cream body it disappears — paint the leather explicitly. */ background-color: #0d0c09 !important; } /* Candlelight islands: header, footer, and anything carrying class="ae-dark-zone" (e.g. the Chronicle's featured dispatch hero, an artwork plate that should stay cinematic in both themes). Add the class to any element to keep its dark treatment on parchment. */ html[data-theme="parchment"] header, html[data-theme="parchment"] .main-footer, html[data-theme="parchment"] .ae-dark-zone { --gold: #F1E5AC; --gold-bright: #FFD700; --gold-bright-hover: #FFC700; --gold-strong: rgba(241, 229, 172, 0.85); --gold-dim: rgba(241, 229, 172, 0.7); --gold-faint: rgba(241, 229, 172, 0.5); --gold-ghost: rgba(241, 229, 172, 0.28); --gold-tint-line: rgba(241, 229, 172, 0.12); --gold-glow: rgba(255, 215, 0, 0.4); --text-body: #F1E5AC; --text-heading: #F1E5AC; --text-soft: rgba(241, 229, 172, 0.7); --gold-strong: rgba(241, 229, 172, 0.85); --panel-deep: rgba(0, 0, 0, 0.9); --page-bg: #000000; --ink-on-accent: #000000; --cat-writing: #FFD700; --cat-world: #c8a96e; --cat-archive: #a0c8a0; --cat-announce: #F1E5AC; } /* ============================================================ 5. PROSE & HEADING INK ------------------------------------------------------------ In dark mode, cream (#F1E5AC) serves as both accent AND body text. On parchment those roles split: reading text becomes ink, while bronze is reserved for borders, small caps, and interactive elements. These re-pins do the splitting. ============================================================ */ /* Body / reading prose → ink */ html[data-theme="parchment"] .body-text, html[data-theme="parchment"] .section-intro p, html[data-theme="parchment"] .archive-description, html[data-theme="parchment"] .era-description, html[data-theme="parchment"] .volume-blurb, html[data-theme="parchment"] .meta-value, html[data-theme="parchment"] .track-name, html[data-theme="parchment"] .archive-cta p, html[data-theme="parchment"] .chapter-modal-body, html[data-theme="parchment"] .dispatch-excerpt, html[data-theme="parchment"] .social-proof-quote, html[data-theme="parchment"] .email-capture p, html[data-theme="parchment"] .archive-tagline, html[data-theme="parchment"] .series-tagline, html[data-theme="parchment"] .volume-tagline, html[data-theme="parchment"] .book-tagline, html[data-theme="parchment"] .infobox td, html[data-theme="parchment"] .pull-quote, html[data-theme="parchment"] .quotes-list li p, html[data-theme="parchment"] .location-entry p, html[data-theme="parchment"] .ability-entry p, html[data-theme="parchment"] .relationship-entry p, html[data-theme="parchment"] .appearances-table td, html[data-theme="parchment"] .trivia-list li, html[data-theme="parchment"] .soundtrack-block p, html[data-theme="parchment"] .spoiler-content, html[data-theme="parchment"] .loc-tagline, html[data-theme="parchment"] .char-epithet, html[data-theme="parchment"] .placeholder-notice { color: var(--text-body); } /* Archive pages set body colour directly */ html[data-theme="parchment"] body { color: var(--text-body); } /* Major headings → ink (printed chapter heads on paper) */ html[data-theme="parchment"] .section-intro h1, html[data-theme="parchment"] .archive-display-heading, html[data-theme="parchment"] .series-title, html[data-theme="parchment"] .volume-title, html[data-theme="parchment"] .loc-name, html[data-theme="parchment"] .char-name, html[data-theme="parchment"] .dispatch-title, html[data-theme="parchment"] .era-title, html[data-theme="parchment"] .archive-cta h2, html[data-theme="parchment"] .archive-cta h3, html[data-theme="parchment"] .eras-section > h2, html[data-theme="parchment"] .subhead, html[data-theme="parchment"] .book-subheading, html[data-theme="parchment"] .breadcrumb-bar .current { color: var(--text-heading); } /* Volume title is a link — keep an accent hover on ink */ html[data-theme="parchment"] .volume-title:hover { color: var(--gold-bright); } /* ============================================================ 5b. PANEL ENFORCEMENT (cache-proof) ------------------------------------------------------------ The converted stylesheets flip these panels via variables, but if a stale cached copy of style.css / archive-shared.css is still being served, its hard-coded blacks would win. These class-level rules force the flip regardless of which stylesheet version the browser is holding. Harmless duplication when the converted files ARE loaded. ============================================================ */ /* Archive panels */ html[data-theme="parchment"] .article, html[data-theme="parchment"] .infobox, html[data-theme="parchment"] .breadcrumb-bar, html[data-theme="parchment"] .hero-prose, html[data-theme="parchment"] .char-hero > div:last-of-type, html[data-theme="parchment"] .loc-hero > div:last-of-type { background-color: var(--panel-solid) !important; border-color: var(--gold) !important; box-shadow: 0px 0px 30px var(--gold-ghost) !important; } html[data-theme="parchment"] .portrait-frame, html[data-theme="parchment"] .loc-image-frame { background: var(--panel-solid) !important; border-color: var(--gold) !important; } html[data-theme="parchment"] .infobox-header { color: var(--gold-bright) !important; border-bottom-color: var(--gold) !important; } html[data-theme="parchment"] .infobox td { border-bottom-color: var(--gold-tint-line) !important; } html[data-theme="parchment"] .infobox td:first-child, html[data-theme="parchment"] .loc-eyebrow, html[data-theme="parchment"] .char-eyebrow, html[data-theme="parchment"] .loc-caption, html[data-theme="parchment"] .portrait-caption, html[data-theme="parchment"] .breadcrumb-bar, html[data-theme="parchment"] .breadcrumb-bar a { color: var(--text-soft) !important; } html[data-theme="parchment"] .breadcrumb-bar a:hover { color: var(--gold-bright) !important; } html[data-theme="parchment"] .loc-name, html[data-theme="parchment"] .char-name { color: var(--text-heading) !important; } html[data-theme="parchment"] .section-title { color: var(--gold-bright) !important; border-bottom-color: var(--gold-ghost) !important; } html[data-theme="parchment"] a.wl { color: var(--wl) !important; border-bottom-color: var(--wl-line) !important; } html[data-theme="parchment"] a.wl:hover { color: var(--wl-hover) !important; border-bottom-color: var(--wl-line-hover) !important; } html[data-theme="parchment"] a.stub { color: var(--stub) !important; border-bottom-color: var(--stub-line) !important; } html[data-theme="parchment"] .appearances-table th { color: var(--text-soft) !important; border-bottom-color: var(--gold) !important; background-color: var(--gold-tint) !important; } html[data-theme="parchment"] .appearances-table td { border-bottom-color: var(--gold-tint-line) !important; } html[data-theme="parchment"] .status-active { color: var(--status-ok) !important; } /* Small semantic markers — relation labels, life-status flags, stage directions, series labels */ html[data-theme="parchment"] .family-list .relation, html[data-theme="parchment"] .quote-stage, html[data-theme="parchment"] .series-label, html[data-theme="parchment"] .unknown { color: var(--text-soft) !important; } html[data-theme="parchment"] .deceased { color: var(--warn-text) !important; } /* Entry blocks (Key Periods, abilities, relationships) */ html[data-theme="parchment"] .location-entry h4, html[data-theme="parchment"] .ability-entry h4 { color: var(--gold-bright) !important; } html[data-theme="parchment"] .relationship-entry h4 { color: var(--gold) !important; } html[data-theme="parchment"] .location-entry, html[data-theme="parchment"] .ability-entry, html[data-theme="parchment"] .relationship-entry { border-left-color: var(--gold-ghost) !important; } /* Pull quotes and quote lists */ html[data-theme="parchment"] .pull-quote, html[data-theme="parchment"] .quotes-list li { border-left-color: var(--gold-faint) !important; background-color: var(--gold-tint) !important; } html[data-theme="parchment"] .pull-quote cite, html[data-theme="parchment"] .quotes-list li cite { color: var(--text-soft) !important; } /* Rules and list markers */ html[data-theme="parchment"] .gold-rule { border-top-color: var(--gold) !important; } html[data-theme="parchment"] .thin-rule { border-top-color: var(--gold-tint-line) !important; } html[data-theme="parchment"] .trivia-list li::before { color: var(--gold-faint) !important; } /* Soundtrack blocks */ html[data-theme="parchment"] .soundtrack-block { background-color: var(--gold-tint) !important; border-color: var(--gold-ghost) !important; } html[data-theme="parchment"] .soundtrack-block h4, html[data-theme="parchment"] .soundtrack-icon { color: var(--text-soft) !important; } html[data-theme="parchment"] .track-title { color: var(--gold-bright) !important; } html[data-theme="parchment"] .loc-image-placeholder { color: var(--gold-faint) !important; } /* Spoiler boxes (tier treatments) */ html[data-theme="parchment"] .spoiler-toggle.tier-1 { border-color: var(--gold-tint-line) !important; background-color: var(--warn-bg-t1) !important; } html[data-theme="parchment"] .spoiler-toggle.tier-1[open] { border-color: var(--gold-faint) !important; background-color: var(--warn-bg-t1-open) !important; } html[data-theme="parchment"] .spoiler-toggle.tier-2 { border-color: var(--warn-border-faint) !important; background-color: var(--warn-bg2) !important; } html[data-theme="parchment"] .spoiler-toggle.tier-2[open] { border-color: var(--warn-border-open) !important; background-color: var(--warn-bg2-open) !important; } html[data-theme="parchment"] .spoiler-toggle.tier-1 .spoiler-warning { color: var(--gold-faint) !important; } html[data-theme="parchment"] .spoiler-toggle.tier-2 .spoiler-warning { color: var(--warn-softer) !important; } /* Entry blocks (Key Periods, abilities, relationships) and quote furniture — the remaining archive-shared classes, enforced */ html[data-theme="parchment"] .location-entry h4, html[data-theme="parchment"] .ability-entry h4 { color: var(--gold-bright) !important; } html[data-theme="parchment"] .relationship-entry h4, html[data-theme="parchment"] .book-subheading, html[data-theme="parchment"] .subhead, html[data-theme="parchment"] .track-title { color: var(--text-heading) !important; } html[data-theme="parchment"] .location-entry, html[data-theme="parchment"] .ability-entry, html[data-theme="parchment"] .relationship-entry { border-left-color: var(--gold-ghost) !important; } html[data-theme="parchment"] .pull-quote, html[data-theme="parchment"] .quotes-list li { border-left-color: var(--gold-faint) !important; background-color: var(--gold-tint) !important; } html[data-theme="parchment"] .pull-quote cite, html[data-theme="parchment"] .quotes-list li cite { color: var(--text-soft) !important; } html[data-theme="parchment"] .soundtrack-block { background-color: var(--gold-tint) !important; border-color: var(--gold-ghost) !important; } html[data-theme="parchment"] .soundtrack-block h4, html[data-theme="parchment"] .soundtrack-icon { color: var(--text-soft) !important; } html[data-theme="parchment"] .gold-rule { border-top-color: var(--gold) !important; } html[data-theme="parchment"] .thin-rule { border-top-color: var(--gold-tint-line) !important; } /* Category icons are pale-gold artwork drawn for a dark ground — darken them toward bronze on cream. Tune or remove to taste. */ html[data-theme="parchment"] .archive-category-icon { filter: brightness(0.5) sepia(0.4) saturate(1.5); opacity: 1; } /* Buttons (class-based) — filled go bronze with cream text, outline variants go bronze-on-transparent */ html[data-theme="parchment"] .cta-btn, html[data-theme="parchment"] .volume-btn, html[data-theme="parchment"] .email-submit { background-color: var(--gold-bright) !important; border-color: var(--gold-bright) !important; color: var(--ink-on-accent) !important; box-shadow: 0px 0px 20px var(--gold-glow) !important; } html[data-theme="parchment"] .cta-btn.outline-gold, html[data-theme="parchment"] .volume-btn.outline, html[data-theme="parchment"] .back-link, html[data-theme="parchment"] .chapter-modal-close { background-color: transparent !important; border-color: var(--gold) !important; color: var(--gold) !important; box-shadow: none !important; } html[data-theme="parchment"] .cta-btn.outline-gold:hover, html[data-theme="parchment"] .volume-btn.outline:hover, html[data-theme="parchment"] .back-link:hover { color: var(--gold-bright) !important; border-color: var(--gold-bright) !important; } /* Ornamental divider stars: drop the solid mask entirely and let the 1px line pass behind the glyph — seam-proof on any ground. */ html[data-theme="parchment"] .divider-ornament .line::after, html[data-theme="parchment"] .divider-ornament .line span { background-color: transparent !important; } /* Blog star spans mask with inline background-color: var(--page-bg) — with the flat ground that now matches exactly, but make them transparent too for good measure. */ html[data-theme="parchment"] [style*="background-color: var(--page-bg)"] { background-color: transparent !important; } /* Inline DIVIDER LINES — pages other than the converted blog carry the ornament line inline with a literal cream gradient, invisible on parchment. The signature below can only ever match a divider line, so it recolours precisely without touching anything else. */ html[data-theme="parchment"] [style*="linear-gradient(to right, transparent, #F1E5AC, transparent)"], html[data-theme="parchment"] [style*="linear-gradient(to right, transparent, var(--gold), transparent)"] { background: linear-gradient(to right, transparent, var(--gold), transparent) !important; } /* Their centred ✦ spans mask the line with a solid box (inline background-color: #000, centred via translate(-50%, -50%)) — make the mask transparent so the line passes cleanly behind the glyph. */ html[data-theme="parchment"] [style*="translate(-50%, -50%)"] { background-color: transparent !important; } /* Class-based ornament lines, enforced for stale-sheet safety */ html[data-theme="parchment"] .divider-ornament .line { background: linear-gradient(to right, transparent, var(--gold), transparent) !important; } /* ── ANIMATED GOLD FRAME — bronze recolour (cache-proof) ── The comet/shimmer gradients are declared in style.css and archive-shared.css; restate them here in bronze so the frames are correct even if a stale copy of either sheet is served. The masks and keyframes from the original sheets still apply — only the gradient colours are overridden. */ html[data-theme="parchment"] [style*="border: 2px solid #F1E5AC"]::before, html[data-theme="parchment"] [style*="border: 2px solid #FFD700"]::before, html[data-theme="parchment"] .archive-card::before, html[data-theme="parchment"] .archive-grid > a::before, html[data-theme="parchment"] .overview-panel::before, html[data-theme="parchment"] .volume-card::before, html[data-theme="parchment"] .volume-btn::before, html[data-theme="parchment"] .char-thumb::before, html[data-theme="parchment"] .soundtrack-panel::before, html[data-theme="parchment"] .archive-cta-inner::before, html[data-theme="parchment"] .cta-btn::before, html[data-theme="parchment"] .character-card::before, html[data-theme="parchment"] .category-card::before, html[data-theme="parchment"] .featured-grid > a::before, html[data-theme="parchment"] .character-grid > a::before, html[data-theme="parchment"] .portrait-frame::before, html[data-theme="parchment"] .infobox::before, html[data-theme="parchment"] .article::before, html[data-theme="parchment"] .loc-image-frame::before, html[data-theme="parchment"] .breadcrumb-bar::before, html[data-theme="parchment"] .hero-prose::before, html[data-theme="parchment"] .char-hero > div:last-of-type::before, html[data-theme="parchment"] .loc-hero > div:last-of-type::before { background: conic-gradient( from var(--ae-angle, 0deg), var(--frame-0) 0deg, var(--frame-0) 60deg, var(--frame-mid) 90deg, var(--frame-hi) 100deg, var(--frame-mid) 110deg, var(--frame-0) 140deg, var(--frame-0) 360deg ) !important; } html[data-theme="parchment"] [style*="border: 2px solid #F1E5AC"]::after, html[data-theme="parchment"] [style*="border: 2px solid #FFD700"]::after, html[data-theme="parchment"] .archive-card::after, html[data-theme="parchment"] .archive-grid > a::after, html[data-theme="parchment"] .overview-panel::after, html[data-theme="parchment"] .volume-card::after, html[data-theme="parchment"] .volume-btn::after, html[data-theme="parchment"] .char-thumb::after, html[data-theme="parchment"] .soundtrack-panel::after, html[data-theme="parchment"] .archive-cta-inner::after, html[data-theme="parchment"] .cta-btn::after, html[data-theme="parchment"] .character-card::after, html[data-theme="parchment"] .category-card::after, html[data-theme="parchment"] .featured-grid > a::after, html[data-theme="parchment"] .character-grid > a::after, html[data-theme="parchment"] .portrait-frame::after, html[data-theme="parchment"] .infobox::after, html[data-theme="parchment"] .article::after, html[data-theme="parchment"] .loc-image-frame::after, html[data-theme="parchment"] .breadcrumb-bar::after, html[data-theme="parchment"] .hero-prose::after, html[data-theme="parchment"] .char-hero > div:last-of-type::after, html[data-theme="parchment"] .loc-hero > div:last-of-type::after { background: linear-gradient( 115deg, var(--frame-0) 0%, var(--frame-mid2) 18%, var(--frame-0) 34%, var(--frame-0) 50%, var(--frame-mid2) 66%, var(--frame-0) 82%, var(--frame-0) 100% ) !important; background-size: 300% 300% !important; } /* Icon filter, broadened: catch icon imagery inside archive cards however the page marks it up */ html[data-theme="parchment"] .archive-card img, html[data-theme="parchment"] .archive-grid > a img { filter: brightness(0.5) sepia(0.4) saturate(1.5); opacity: 1; } /* ── INLINE SVG ICONS ── The category icons (and any other inline vector art) carry their colours as SVG presentation attributes (stroke="#F1E5AC" etc.), which are invisible to both img selectors and style="" signatures — but ANY css rule overrides a presentation attribute. Recolour by attribute value, site-wide. Because these use variables, icons inside .ae-dark-zone / header / footer keep their cream automatically via the re-pinned palette. */ html[data-theme="parchment"] svg [stroke="#F1E5AC"] { stroke: var(--gold); } html[data-theme="parchment"] svg [fill="#F1E5AC"] { fill: var(--gold); } html[data-theme="parchment"] svg [stroke="#FFD700"] { stroke: var(--gold-bright); } html[data-theme="parchment"] svg [fill="#FFD700"] { fill: var(--gold-bright); } /* The Three Libraries icon's pale book (#FAF4E0) vanishes on cream — deepen it to a readable parchment-tan; its #D4B45A outline and the dark #1a2028 book already survive on paper untouched. */ html[data-theme="parchment"] svg [fill="#FAF4E0"] { fill: #e2d09a; } /* Hover states — the resting panels are enforced above, but a stale stylesheet's hover rules would still flash dark-mode yellow */ html[data-theme="parchment"] .archive-card:hover, html[data-theme="parchment"] .category-card:hover, html[data-theme="parchment"] .character-card:hover, html[data-theme="parchment"] .book-card:hover, html[data-theme="parchment"] .era-card:hover, html[data-theme="parchment"] .emporium-book-card:hover, html[data-theme="parchment"] .archive-category-card:hover { border-color: var(--gold-bright) !important; box-shadow: 0px 0px 25px var(--gold-glow) !important; } html[data-theme="parchment"] .archive-category-card:hover { background-color: var(--panel-deep) !important; } /* Ornament divider mask — must match the flat page colour exactly */ html[data-theme="parchment"] .divider-ornament .line::after, html[data-theme="parchment"] .divider-ornament .line span { background-color: var(--page-bg) !important; color: var(--gold) !important; } /* Line-art category icons are pale gold drawn for black backgrounds — pull them down to bronze on cream without touching the image files. brightness first (darken), then sepia + saturate (warm the grey back toward bronze). Selector covers the class and any bare img/svg inside the category cards. */ html[data-theme="parchment"] .archive-category-icon, html[data-theme="parchment"] .archive-category-card img, html[data-theme="parchment"] .archive-category-card svg { filter: brightness(0.38) sepia(0.9) saturate(2.6) hue-rotate(-8deg); opacity: 1 !important; } html[data-theme="parchment"] .spoiler-toggle summary { color: var(--warn-text) !important; } html[data-theme="parchment"] .spoiler-toggle.tier-1 summary { color: var(--gold) !important; } /* Main-site panels */ html[data-theme="parchment"] .section-intro, html[data-theme="parchment"] .archive-card, html[data-theme="parchment"] .category-card, html[data-theme="parchment"] .character-card, html[data-theme="parchment"] .book-card, html[data-theme="parchment"] .era-card, html[data-theme="parchment"] .collapsible-section, html[data-theme="parchment"] .overview-panel, html[data-theme="parchment"] .volume-card, html[data-theme="parchment"] .soundtrack-panel, html[data-theme="parchment"] .archive-cta-inner, html[data-theme="parchment"] .email-capture, html[data-theme="parchment"] .chapter-modal-inner, html[data-theme="parchment"] .social-proof, html[data-theme="parchment"] .emporium-book-card, html[data-theme="parchment"] .archive-category-card { background-color: var(--black-panel) !important; border-color: var(--gold) !important; } html[data-theme="parchment"] .eras-section, html[data-theme="parchment"] .archive-hero, html[data-theme="parchment"] .chronicle-section { background-color: var(--panel-faint) !important; } html[data-theme="parchment"] .archive-title, html[data-theme="parchment"] .category-title, html[data-theme="parchment"] .character-name, html[data-theme="parchment"] .book-title, html[data-theme="parchment"] .emporium-book-title, html[data-theme="parchment"] .cinzel-menu-content-safe, html[data-theme="parchment"] .volumes-heading, html[data-theme="parchment"] .section-header { color: var(--gold) !important; } /* ============================================================ 6. INLINE-STYLE OVERRIDE LAYER ------------------------------------------------------------ Pages across the site carry hard-coded colours in style="" attributes. Rather than editing every page, these attribute- signature selectors (the same technique as the animated gold frame) re-colour them in parchment mode. A stylesheet rule with !important beats a non-important inline style, so this works site-wide with zero markup changes. Each signature is matched in spaced and unspaced form, and background shorthand ("background:") is caught alongside "background-color:". ============================================================ */ /* Cream text (headings and prose alike) → ink */ html[data-theme="parchment"] [style*="color: #F1E5AC"], html[data-theme="parchment"] [style*="color:#F1E5AC"], html[data-theme="parchment"] [style*="color: #f1e5ac"], html[data-theme="parchment"] [style*="color:#f1e5ac"] { color: var(--text-body) !important; } /* Soft cream rgba text → soft ink. NOTE: "background-color: rgba(241, 229, 172, …)" also contains this substring, so purely-tinted containers inherit soft ink as their text colour — harmless, since their children carry their own explicit colours. */ html[data-theme="parchment"] [style*="color: rgba(241, 229, 172,"], html[data-theme="parchment"] [style*="color: rgba(241,229,172,"], html[data-theme="parchment"] [style*="color:rgba(241,229,172,"] { color: var(--text-soft) !important; } /* Bright-gold accent text → accent bronze */ html[data-theme="parchment"] [style*="color: #FFD700"], html[data-theme="parchment"] [style*="color:#FFD700"], html[data-theme="parchment"] [style*="color: #ffd700"], html[data-theme="parchment"] [style*="color:#ffd700"] { color: var(--gold-bright) !important; } /* Black text on gold buttons → cream on bronze */ html[data-theme="parchment"] [style*="color: #000"], html[data-theme="parchment"] [style*="color:#000"] { color: var(--ink-on-accent) !important; } /* Translucent black panels → aged card stock. Declared AFTER the color:#000 rule so solid-black panels (whose style contains "background-color: #000…", which also matches "color: #000") win the tie and get ink body text. */ html[data-theme="parchment"] [style*="background-color: rgba(0, 0, 0,"], html[data-theme="parchment"] [style*="background-color: rgba(0,0,0,"], html[data-theme="parchment"] [style*="background-color:rgba(0,0,0,"], html[data-theme="parchment"] [style*="background: rgba(0, 0, 0,"], html[data-theme="parchment"] [style*="background: rgba(0,0,0,"], html[data-theme="parchment"] [style*="background:rgba(0,0,0,"] { background-color: var(--black-panel) !important; color: var(--text-body) !important; } html[data-theme="parchment"] [style*="background-color: #000"], html[data-theme="parchment"] [style*="background-color:#000"], html[data-theme="parchment"] [style*="background: #000"], html[data-theme="parchment"] [style*="background:#000"], html[data-theme="parchment"] [style*="background-color: black"], html[data-theme="parchment"] [style*="background: black"] { background-color: var(--panel-solid) !important; color: var(--text-body) !important; } /* BROWSER-NORMALISED rgb() FORMS — when JavaScript writes a hex colour (el.style.color = '#F1E5AC'), the browser re-serialises the style attribute as rgb(241, 229, 172), which matches neither the hex nor the rgba() signatures above. Cover the rgb() spellings of every brand colour so JS-touched elements can't evade the layer. */ html[data-theme="parchment"] [style*="color: rgb(241, 229, 172)"] { color: var(--text-body) !important; } html[data-theme="parchment"] [style*="color: rgb(255, 215, 0)"] { color: var(--gold-bright) !important; } html[data-theme="parchment"] [style*="color: rgb(0, 0, 0)"] { color: var(--ink-on-accent) !important; } html[data-theme="parchment"] [style*="background-color: rgb(0, 0, 0)"] { background-color: var(--panel-solid) !important; color: var(--text-body) !important; } html[data-theme="parchment"] [style*="background-color: rgb(241, 229, 172)"] { background-color: var(--gold-tint) !important; } html[data-theme="parchment"] [style*="background-color: rgb(255, 215, 0)"] { background-color: var(--gold-bright) !important; color: var(--ink-on-accent) !important; } html[data-theme="parchment"] [style*="solid rgb(241, 229, 172)"], html[data-theme="parchment"] [style*="solid rgb(255, 215, 0)"] { border-color: var(--gold) !important; } /* Cream-tinted backgrounds → bronze-tinted paper */ html[data-theme="parchment"] [style*="background-color: rgba(241, 229, 172,"], html[data-theme="parchment"] [style*="background-color: rgba(241,229,172,"], html[data-theme="parchment"] [style*="background-color:rgba(241,229,172,"] { background-color: var(--gold-tint) !important; } /* Gold fills (CTA buttons, badges) → bronze fills */ html[data-theme="parchment"] [style*="background-color: #FFD700"], html[data-theme="parchment"] [style*="background-color:#FFD700"], html[data-theme="parchment"] [style*="background: #FFD700"] { background-color: var(--gold-bright) !important; color: var(--ink-on-accent) !important; } /* Gold borders → bronze borders (all inline weights/shades) */ html[data-theme="parchment"] [style*="solid #F1E5AC"], html[data-theme="parchment"] [style*="solid#F1E5AC"], html[data-theme="parchment"] [style*="solid #f1e5ac"], html[data-theme="parchment"] [style*="solid #FFD700"], html[data-theme="parchment"] [style*="solid rgba(241, 229, 172,"], html[data-theme="parchment"] [style*="solid rgba(241,229,172,"], html[data-theme="parchment"] [style*="solid rgba(255, 215, 0,"] { border-color: var(--gold) !important; } /* Text layered over imagery keeps its cream + dark halo. Key on DARK shadows specifically: a black text-shadow means a halo over artwork (hero banners), where ink would vanish. Declared last to outrank the ink rules above. */ html[data-theme="parchment"] [style*="text-shadow"][style*="rgba(0,0,0"], html[data-theme="parchment"] [style*="text-shadow"][style*="rgba(0, 0, 0"] { color: #F1E5AC !important; } /* GOLD-GLOW text-shadows are decorative accents on ordinary panels, not over-artwork halos — strip the glow and let the normal colour rules recolour the text to bronze/ink. (Converted pages use var(--gold-glow) shadows, which adapt on their own.) */ html[data-theme="parchment"] [style*="text-shadow"][style*="rgba(255, 215, 0"], html[data-theme="parchment"] [style*="text-shadow"][style*="rgba(255,215,0"], html[data-theme="parchment"] [style*="text-shadow"][style*="rgba(241, 229, 172"], html[data-theme="parchment"] [style*="text-shadow"][style*="rgba(241,229,172"] { text-shadow: none !important; } /* Artwork sits INTO the page rather than punching through it: a faint sepia wash and bronze hairline settle dark engravings onto paper. Headers, footers, logos and icons are exempt. */ html[data-theme="parchment"] .character-portrait, html[data-theme="parchment"] .book-cover, html[data-theme="parchment"] .emporium-book-cover, html[data-theme="parchment"] .volume-cover, html[data-theme="parchment"] .era-image, html[data-theme="parchment"] .portrait-frame img, html[data-theme="parchment"] .loc-image-frame img { filter: sepia(0.12) contrast(0.97); } /* ============================================================ 7. THEME TOGGLE BUTTONS ------------------------------------------------------------ Any element with class="theme-toggle" becomes a switch; the script in footer.php wires every one of them, so more can be added anywhere with no code changes. Header and footer sit in the re-pinned dark zone, so these render gold-on-dark in both themes. ============================================================ */ .theme-toggle { font-family: 'Cinzel', serif; background: transparent; border: 1px solid var(--gold); color: var(--gold); letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; line-height: 1; } .theme-toggle:hover { color: var(--gold-bright); border-color: var(--gold-bright); text-shadow: 0px 0px 8px var(--gold-glow); } /* Header variant — compact, sized like the nav links */ .cinzel-menu .theme-toggle { font-size: clamp(11px, 0.8vw, 16px); padding: 0.35vw 0.8vw; } @media (max-width: 2200px) { .cinzel-menu .theme-toggle { font-size: clamp(12px, 2.2vw, 16px); padding: 6px 12px; } } /* Footer variant — labelled, centred above the copyright line */ .footer-theme-row { text-align: center; margin-bottom: 2vw; } .footer-theme-row .theme-toggle { font-size: clamp(11px, 0.75vw, 14px); padding: 10px 24px; } @media (max-width: 1000px) { .footer-theme-row { margin-bottom: 30px; } } /* ============================================================ 8. CROSSFADE ------------------------------------------------------------ The toggle script adds .theme-anim to for ~400ms while switching, giving a candle-snuff crossfade. It is NOT present on page load, so navigation never flashes a transition. ============================================================ */ html.theme-anim, html.theme-anim body, html.theme-anim *:not(#aethereal-bg) { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important; }