/* ============================================================================ NIRVANA REGALIA -- theme packs (W0, "The Living Grimoire" arc) docs/nirvana_web_experience_overhaul_plan.md CONTRACT: a theme overrides TOKENS ONLY. No selectors, no component rules, no layout. If a pack needs a new component rule to look right, the component is under-tokenized -- fix it in nirvana.css, not here. Load order: nirvana.css THEN themes.css. Stamped as by header.php (account pref for logged-in players, cookie for anonymous), written before first paint so there is no flash of the wrong regalia. Celestial Engraved is the :root default in nirvana.css and needs no block here -- it is the free baseline. The four below are entitlement-gated (owner decision 2026-07-19: monetized from day one, Crystal or Glory, both prices posted; never free-then-charged). NOT themed on purpose: --ok / --warn / --danger / --crystal green means good in every regalia radius (0) the engraved look is the brand light mode decided NEVER (2026-07-19) Every pack keeps --gold-rgb / --gold-bright-rgb in lockstep with --gold / --gold-bright, or the ~281 alpha-variant rules (glows, hairlines, scrollbars, focus rings) will disagree with the solid ones. ========================================================================= */ :root{ color-scheme:dark } /* --- Bloodmoon Liturgy ------------------------------------------------- Ember red on charred black. Ritual, and a little dangerous. */ [data-theme="bloodmoon"]{ --void:#0b0406; --void2:#12060a; --void3:#180a0e; --indigo:#2a0f14; --indigo2:#3a1a1e; --violet:#2e0d13; --violet2:#3b151b; --gold-deep:#7a2318; --gold:#c4503c; --gold-bright:#e2604a; --gold-hi:#ffb59e; --gold-rgb:196,80,60; --gold-bright-rgb:226,96,74; --void-rgb:11,4,6; --void3-rgb:24,10,14; --indigo-rgb:42,15,20; --violet-rgb:46,13,19; --parchment:#d8a495; --text:#f5e6e6; --muted:#c8a5a5; --muted2:#8f6f70; --panel:rgba(30,10,14,.72); --panel2:rgba(58,20,26,.55); --on-gold:#1a0604; } /* --- Frostveil --------------------------------------------------------- Glacial blue and silver. The quietest pack -- reads well for long sessions in the cockpit. */ [data-theme="frostveil"]{ --void:#030910; --void2:#05101c; --void3:#071624; --indigo:#0d2438; --indigo2:#17364f; --violet:#10283f; --violet2:#1a3550; --gold-deep:#2b5c7e; --gold:#4f93bf; --gold-bright:#5ba8d6; --gold-hi:#dff2ff; --gold-rgb:79,147,191; --gold-bright-rgb:91,168,214; --void-rgb:3,9,16; --void3-rgb:7,22,36; --indigo-rgb:13,36,56; --violet-rgb:16,40,63; --parchment:#a9c9dd; --text:#e8f2fa; --muted:#9fb8cc; --muted2:#6b8399; --panel:rgba(8,22,36,.72); --panel2:rgba(20,48,74,.55); --on-gold:#041018; } /* --- Verdant Yggdrasil ------------------------------------------------- Living green with gold undertone. The world-tree pack. */ [data-theme="verdant"]{ --void:#04100a; --void2:#061a0f; --void3:#082114; --indigo:#0e2e1c; --indigo2:#164227; --violet:#0c2b1a; --violet2:#143d25; --gold-deep:#2b6b40; --gold:#4f9d66; --gold-bright:#5fb877; --gold-hi:#dcffe3; --gold-rgb:79,157,102; --gold-bright-rgb:95,184,119; --void-rgb:4,16,10; --void3-rgb:8,33,20; --indigo-rgb:14,46,28; --violet-rgb:12,43,26; --parchment:#a7cdb0; --text:#e9f7ec; --muted:#a3c3ab; --muted2:#6d8b76; --panel:rgba(8,26,16,.72); --panel2:rgba(20,58,36,.55); --on-gold:#04140a; } /* --- Void Absolute ----------------------------------------------------- True black for OLED phones. Keeps the gold accent but drops the ambient glow so the panel reads as pure black between elements. */ [data-theme="voidabs"]{ --void:#000000; --void2:#000000; --void3:#050505; --indigo:#0a0a0a; --indigo2:#101010; --violet:#0a0a0a; --violet2:#0f0f0f; --gold-deep:#6b4d1c; --gold:#a8822f; --gold-bright:#c79a3c; --gold-hi:#ffe9a8; --gold-rgb:168,130,47; --gold-bright-rgb:199,154,60; --void-rgb:0,0,0; --void3-rgb:5,5,5; --indigo-rgb:10,10,10; --violet-rgb:10,10,10; --parchment:#b8ab8a; --text:#ededed; --muted:#9a9a9a; --muted2:#6a6a6a; --panel:rgba(10,10,10,.80); --panel2:rgba(18,18,18,.60); --on-gold:#0d0700; } /* The site's ambient layers are decorative-only, so muting them for AMOLED is a token-free tweak that touches nothing structural. */ [data-theme="voidabs"] #nv-nebula, [data-theme="voidabs"] .nv-veil-grain{ opacity:.35 } /* --- Motion preference (ui_motion=calm) -------------------------------- Player-chosen calm mode. Distinct from prefers-reduced-motion, which is an OS signal and is honored separately + unconditionally in nirvana.css. Calm keeps entrances (they aid orientation) and kills ambient loops. */ [data-motion="calm"] #nv-nebula{ display:none } [data-motion="calm"] *{ animation-iteration-count:1!important } /* ui_motion=off -- same kill switch prefers-reduced-motion applies, but chosen explicitly rather than inherited from the OS. */ [data-motion="off"] #nv-nebula{ display:none } [data-motion="off"] *{ animation:none!important; transition:none!important } /* --- Density preference (ui_density=compact) --------------------------- Opt-in tightening for players who want more above the fold. Card padding only -- type scale and hit targets stay put so nothing becomes harder to tap or read. */ [data-density="compact"] .nv-cp-card{ padding:12px 14px } [data-density="compact"] .nv-cp-grid{ gap:10px } /* --- The picker itself (cockpit Preferences card) ---------------------- Lives here rather than nirvana.css because it only exists to serve the theme engine; if the engine is ever removed this file goes with it. */ .nv-cp-regalia{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:8px; margin:8px 0 4px } .nv-cp-reg{ display:flex; align-items:center; gap:11px; padding:11px 13px; cursor:pointer; border:1px solid var(--line); background:rgba(255,255,255,.015); transition:border-color var(--t-fast), background var(--t-fast) } .nv-cp-reg:hover{ border-color:var(--line2) } .nv-cp-reg.on{ border-color:var(--gold); background:rgba(var(--gold-bright-rgb),.10) } /* Live feedback on click; .on is the server-rendered state for browsers without :has(). Both resolve to the same look, so they can't disagree. */ .nv-cp-reg:has(input:checked){ border-color:var(--gold); background:rgba(var(--gold-bright-rgb),.10) } .nv-cp-reg.locked{ cursor:not-allowed; opacity:.55 } .nv-cp-reg input{ position:absolute; opacity:0; width:0; height:0 } .nv-cp-reg input:focus-visible ~ .nv-cp-reg-dia{ outline:2px solid var(--gold-hi); outline-offset:3px } .nv-cp-reg-dia{ width:12px; height:12px; flex:none; transform:rotate(45deg); box-shadow:0 0 9px currentColor } .nv-cp-reg-body{ display:flex; flex-direction:column; gap:2px; min-width:0 } .nv-cp-reg-name{ font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.6px; color:var(--text) } .nv-cp-reg-blurb{ font-size:11.5px; color:var(--muted2); line-height:1.35 } .nv-cp-reg-tag{ margin-left:auto; align-self:flex-start; white-space:nowrap; font-family:var(--disp); font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted2) } .nv-cp-reg.on .nv-cp-reg-tag{ color:var(--gold-bright) }