/* ═══════════════════════════════════════════════════════════════════════════ FAN ZONE IDENTITY — loaded on every page under /site/fun/, AFTER site.css and fun.css, and on the fan sections that sit BESIDE that directory rather than inside it (/site/last-kingdom/: character profiles and a chronicle, outside /site/fun/ because a profile page is not a Quiz, a Game or a WebApplication and may not claim to be one in its structured data). Those pages load site.css and then this file, with no fun.css between them, and that is safe by construction rather than by luck: everything below is either a re-declaration of site.css's identity TOKENS or a rule keyed to a .fun-* class. A page using none of those classes gets the ground and the accent and nothing else, which is exactly what "this is the fan zone and not the game" is supposed to mean. What must NOT happen is this sheet growing a rule that only makes sense once fun.css has been applied — the fan sections outside /site/fun/ would inherit half of it and nothing would say so. WHY THIS FILE EXISTS. Owner directive: "separate the website in two more fully — the fan zone should have a different style and design that fits it." The fan corner is a publication about other people's fictional worlds, carrying its own disclaimers and its own legal posture; dressing it in the game's exact chrome worked against both halves of that separation. This sheet gives the corner its own ground and its own accent so it reads as a sibling publication rather than as more of the game. HOW IT DOES IT: BY OVERRIDING TOKENS, NOT BY RESTATING RULES. Every colour on these pages already resolves through the custom properties site.css declares (see its palette header). So the reskin is a re-declaration of the identity tokens — the neutral ramp, the glass, the gold family — and the several hundred rules that consume them follow for free. The alias tokens (--gold, --gold-bright, --gold-dim, --ink-0, --ink-1, --panel…) are var() references to the steps below and are deliberately NOT restated here; the handful of literal rules in this file are the ones site.css paints in raw rgba() with no token to retarget (the body/nav gradients) plus the corner's own flourishes. THE TWO MOVES, AND THE ARITHMETIC THAT MAKES THEM SAFE: 1. THE GROUND turns from forged iron (OKLCH hue ~265°) to deep violet (~305°), chroma raised ×1.9 so the violet is felt rather than merely measurable. Every step keeps its original WCAG relative luminance (solved numerically, not eyeballed), which is what lets the --text-* ramp remain UNTOUCHED: those four tokens carry ratios that were tuned once, site-wide, and a ground swap that moved their denominators would have quietly re-decided them. Verified on the new ground: --text #dadee6 on --surface-2 #292032 = 11.56:1 (was 11.55:1) --text-faint #7c8392 on --surface-1 #201829 = 4.51:1 (was 4.53:1) 2. THE ACCENT turns from gold to coral/ember at matched lightness per step — same luminance-matching, hue ~32°, chroma kept — so every place gold carried text keeps the contrast it was designed with. Computed, on the NEW --surface-2 #292032 (a resting card's lighter end, the worst ground an accent sits on here): --gold-300 → #ffd4c5 11.49:1 (gold was 11.55:1; duty ≥ 4.5:1) --gold-500 → #ffae9b 8.75:1 (gold was 8.74:1) --gold-600 → #ee9380 6.77:1 (gold was 6.72:1) --gold-700 → #c77767 4.65:1 (gold was 4.62:1 — the tight one: .fun-recap summary sets 13.5px text in it) --gold-ink → #1c110f 10.37:1 on the new --gold-500 (was 10.39:1) The .nav-cta's hardcoded #241a06 text measures 12.63:1 on the new --gold-300 it now sits on. WHAT IS DELIBERATELY LEFT ALONE: the frost interactive family, the four semantic colours, and the heather section tone — heather was chosen as this corner's identity within the game's palette and sits naturally on a violet ground; the separation this file buys comes from the ground and the brand accent, not from repainting every role at once. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── The ground, re-forged in violet. Same luminance per step (see above), hue 305°, chroma ×1.9. ─────────────────────────────────────────────── */ --ink-900: #0f0916; --ink-800: #17101e; --ink-700: #1d1428; --surface-1: #201829; --surface-2: #292032; --surface-3: #332940; --surface-4: #3f334c; /* A glass surface has to be a tint of THIS ground now, or every backdrop-filtered panel keeps a ghost of the game's indigo in it. */ --glass: rgba(41, 32, 50, 0.62); /* ── The accent: coral/ember, lightness matched to the gold step it replaces (ratios in the header). --gold/--gold-bright/--gold-dim are aliases of these three in site.css and follow on their own. ─────────── */ --gold-100: #ffede5; --gold-300: #ffd4c5; --gold-500: #ffae9b; --gold-600: #ee9380; --gold-700: #c77767; --gold-900: #6a3b31; --gold-ink: #1c110f; } /* The page ground itself. site.css paints body in literal rgba stops that no token reaches, so this is the one place the reskin must restate a rule rather than retarget it. Same shape as the original — a high glow, a warm wash off to one side, then the ramp — with every stop luminance-matched from its indigo counterpart, and the warm wash already speaking the new accent's language (it was copper; it is ember now). */ body { background: radial-gradient(1400px 700px at 50% -12%, #2f1e42 0%, rgba(38, 26, 55, 0) 55%), radial-gradient(900px 500px at 90% 20%, rgba(160, 70, 50, 0.10), transparent 60%), linear-gradient(180deg, var(--ink-800), var(--ink-900) 70%); } /* The sticky nav's translucency is also literal rgba of the OLD ground — left as shipped it would hang a bar of the game's indigo over every violet page, which is precisely the "same chrome" this file exists to end. */ .nav { background: linear-gradient(180deg, rgba(19, 13, 27, 0.92), rgba(19, 13, 27, 0.72)); } .nav.is-scrolled { background: linear-gradient(180deg, rgba(15, 9, 22, 0.97), rgba(15, 9, 22, 0.92)); } /* ── The masthead says which publication this is ───────────────────────────── A pure-CSS chip after the wordmark, so all 60-odd fan pages announce themselves without touching one line of markup (the nav is chrome, rendered from site-chrome.mjs, and per-corner markup in it would fork the one thing the chrome sweep exists to keep identical). Small caps in the corner's own accent; washes are literal rgba of --gold-500 because rgba() cannot take a hex token apart. Chip text is --gold-300 on the nav's darkest glass — comfortably past the 11:1 computed in the header. */ .brand::after { content: "FAN WING"; display: inline-block; margin-left: 10px; padding: 2px 9px; vertical-align: 3px; font-family: var(--body); font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; line-height: 1.5; color: var(--gold-300); background: rgba(255, 174, 155, 0.10); border: 1px solid rgba(255, 174, 155, 0.38); border-radius: 999px; } /* The nav underline, drawn in the corner's accent rather than the section tone, and as a gradient rather than a flat bar — the same ember-to-coral ramp the tiles' hover edge uses, so the two read as one voice. Selector shapes copied from site.css so this wins on order, not on weight. */ .nav-links a:not(.nav-cta)::after, .nav-links a::after { background: linear-gradient(90deg, var(--gold-600), var(--gold-300)); } /* ── Tiles are allowed to be playful here ──────────────────────────────────── A touch more lift than the game site's 2px and an ember edge lit along the top on hover. This corner is quizzes and arcade games; a livelier hover is honest about that, and confining it to this sheet is what keeps the game's own chrome reserved. */ .fun-tile { transition: border-color 0.2s, transform 0.2s var(--ease, ease), box-shadow 0.2s; } .fun-tile:hover { transform: translateY(-3px); border-color: var(--gold-600); box-shadow: 0 12px 26px rgba(10, 5, 16, 0.5), inset 0 2px 0 var(--gold-500); } /* Re-asserted from fun.css: this rule now follows the livelier hover above in the cascade, or the announced-but-unbuilt tiles would start levitating — the one signal they exist to not give. */ .fun-tile-soon:hover { transform: none; box-shadow: none; border-color: var(--hair); }