/* THE HIDDEN ATTRIBUTE HAS TO WIN, EVERYWHERE, AND THIS IS THE ONE SHEET EVERY PAGE LOADS. The browser's own `[hidden] { display: none }` lives in the UA stylesheet, so ANY author `display:` outranks it at any specificity. This corner has now been bitten four times: tools.css, realm/hall.css, `.cmp-list` in the wrestling generator (1,023 generated copies), and Oathsworn — whose `.os-council { display: flex }` left an 82%-opaque overlay across the whole game for its entire shipped life, swallowing every tap meant for the buttons underneath, while the element truthfully reported itself hidden. The first three were each fixed per-element, which only ever protects the element somebody already noticed. Put HERE rather than in fun.css because fun.css reaches only the 83 pages inside /site/fun/. The wings that carry the fan corner's identity from outside that directory — /site/wrestling/ (1,023 pages) and /site/last-kingdom/ (5) — load NO other shared sheet, and the wrestling sector is precisely where this class already bit once. All 1,426 site pages load this file; the React game client does not, so the blast radius stops at the companion site. !important because the point is to beat every layout rule in every sheet loaded after this one, the ones not yet written included. Checked rather than assumed: every element on the site that ships `hidden` is one meant to be invisible, nothing reveals an element by writing inline style.display while leaving `hidden` set, and `hidden=until-found` is unused. */ [hidden] { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ IRON REALMS — companion site theme. Standalone (no build step); the fonts are the same self-hosted faces the game ships, loaded from /fonts. ─────────────────────────────────────────────────────────────────────────── THE PALETTE, AND THE JOB EACH COLOUR DOES ─────────────────────────────────────────────────────────────────────────── Read this before changing a value. Every colour on ~260 pages resolves through the tokens below, so a token is not a preference — it is a role, and the role is what the next person needs to inherit. WHAT WAS WRONG WITH THE OLD SHEET, stated plainly so it is not rebuilt: 1. ONE ACCENT DID EVERY JOB. A single gold marked headings, links, buttons, table headers, hairlines, active nav and bold body text. When everything is the accent, nothing is emphasised — there was no way for a page to say "this bit matters more than that bit". 2. NO TONAL DIFFERENCE BETWEEN SECTIONS. Guides, newsroom, database, tools and the fan hub were the same three colours, so moving between them felt like never having moved. 3. FLAT SURFACES. Near-black ground, hairline border, nothing else. No elevation, no material, nothing that rewards looking closely. 4. PURE-GREY NEUTRALS. A neutral with no hue reads as inherited from a framework. A neutral with a deliberate bias reads as chosen. ── 1. THE NEUTRAL RAMP ───────────────────────────────────────────────────── Not black-to-white. Every step is generated at OKLCH hue 265° (blue-violet) with the chroma tapering off toward the light end so pale text never picks up a cast. The bias is small — 1.4–2.6% chroma — and that is the point: it is felt as "cold forged iron" rather than seen as "blue". --ink-900 #090c12 the floor. Footer, code wells, the deepest inset. --ink-800 #0f131a THE PAGE GROUND. Everything else sits on this. --ink-700 #141822 the alternating band, one step up from the ground. --surface-1 #171b24 a card at rest (its darker end). --surface-2 #1f242d a card at rest (its lighter end) / raised panels. --surface-3 #282d39 hover, inset wells, table zebra. --surface-4 #323845 chips, table headers, the topmost material. --text-strong #f0f2f6 headings and anything that must be read first. --text #dadee6 running text. 13.8:1 on ground --text-dim #8b92a1 captions, meta, secondary. 6.0:1 on ground --text-faint #7c8392 the disclaimer and source notes. 4.9:1 on ground --edge #6e7686 the border of an INTERACTIVE control. 4.1:1 on the ground, 3.4:1 on the lightest surface — the 3:1 floor WCAG 1.4.11 sets for a non-text UI boundary. --hair / --hair-strong decorative dividers between things that already have their own background. Deliberately neutral: the old sheet drew every hairline in translucent gold, which is most of why the page read as monochrome. ── 2. PRIMARY ACCENT: GOLD ───────────────────────────────────────────────── Kept, because it is the brand — but its job is now NARROW. Gold means: the wordmark, the primary call to action, a number worth reading, and the brand's own flourishes. It is no longer the colour of headings, links, borders or bold text. --gold-100 #fcf0cf --gold-300 #f5dc98 --gold-500 #dfbf66 (the brand) --gold-600 #c7a74d --gold-700 #a58938 --gold-900 #564614 --gold-ink #17130a text ON a gold button. 10.9:1 on --gold-500 ── 3. SECONDARY ACCENT: FROST ────────────────────────────────────────────── Gold's opposite temperature, and the site's INTERACTIVE colour. Frost means exactly one thing wherever it appears: you can act on this. Links in running text, secondary buttons, the focus ring. It never decorates. --frost-300 #aae4ff hover --frost-400 #85cef9 link 10.8:1 ground --frost-600 #4a9dc5 pressed / underline at rest ── 4. SEMANTIC COLOURS — AND THEY ARE NOT THE ACCENT ─────────────────────── The old sheet had no semantic layer at all: a warning callout was gold with a slightly browner bar. Four colours, none of which is gold or frost, so a state can never be mistaken for an emphasis. --ok #67d89c confirmed, live, safe 10.5:1 on ground --warn #f6b45c caution, stage notice 10.3:1 on ground --danger #f98078 destructive, broken, locked 7.4:1 on ground --info #90cdf1 neutral aside 10.8:1 on ground ── 5. SECTION IDENTITY: THE TEMPER COLOURS ───────────────────────────────── Six areas of the site, six tones, ONE family — because the family is real and not a hand-wave. Steel run through a fire changes colour as it heats (straw, bronze, violet, blue) and copper changes colour as it ages (verdigris). Those are the six tones below, and they are siblings by construction: every one is generated at exactly the same OKLCH lightness (0.815) and near-identical chroma (0.10–0.115). Only the hue differs. That is what stops six colours reading as six decisions. --brass #dfbf66 CORE — home, about, FAQ, world, press, legal --copper #fbae86 NEWSROOM — news, updates, roadmap (heat, freshly struck) --verdigris #80d8ae GUIDES & ARTICLES — the aged, standing archive --cyan #6ad6dc FREE TOOLS — a bright instrument in a workshop --periwinkle #aebdff GAME DATABASE — cold and exact --heather #e9aae3 FAN HUB — quizzes and diversions, and they know it A section tone gets FIVE jobs and no more: the eyebrow above a heading, the rule under a page title, a card's top edge, a callout's spine, and a faint wash at the top of the page. It is never the body text, never a link, never a button. Gold and frost appear on every page regardless, and that is the thread that keeps the whole thing one site. HOW A PAGE KNOWS WHICH SECTION IT IS IN, without touching 260 files: every page already carries a , and its path says where the page lives. `html:has(link[rel=canonical][href*="/guides/"])` reads it. A browser without :has() simply gets the default brass, which is the site as it looked before — degradation costs nothing. ── 6. THE SCHEME IS DECLARED, AND IT IS DARK ─────────────────────────────── The sheet was dark-only and did not declare color-scheme at all, so a visitor whose system is set to light got dark pages with white scrollbars and white form fields — the browser drawing its own widgets for a theme the page was not using. `color-scheme: dark` above fixes that. Dark is unconditional on purpose: it is the brand, not a preference. A full light palette was built and then removed rather than left wired to the operating system — see the note at the foot of this file for where it lives and how to restore it behind a real toggle. ═══════════════════════════════════════════════════════════════════════════ */ /* font-weight is declared as a RANGE because both files are variable-weight (see fonts/cinzel/README.md). Without it the browser assumes a single 400 master and SYNTHESISES bold by smearing the outline sideways — which is exactly what every 700-weight heading and button on this site was getting. */ @font-face { font-family: "Cinzel"; src: url("/fonts/cinzel/cinzel-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; } @font-face { font-family: "Cinzel Decorative"; src: url("/fonts/cinzel/cinzel-decorative-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; } :root { /* DARK IS THE DEFAULT AND AN OS PREFERENCE DOES NOT OVERRIDE IT. This read `dark light`, which told the browser either theme was acceptable and handed the choice to the visitor's system — so a laptop set to light mode was served a pale Iron Realms. The dark ground is this game's brand, not a preference. It still declares a scheme (rather than nothing at all, which was the original bug) so the browser paints its own scrollbars and form fields dark to match. */ color-scheme: dark; /* ── Neutral ramp (OKLCH hue 265°, chroma tapering to the light end) ───── */ --ink-900: #090c12; --ink-800: #0f131a; --ink-700: #141822; --surface-1: #171b24; --surface-2: #1f242d; --surface-3: #282d39; --surface-4: #323845; --text-strong: #f0f2f6; --text: #dadee6; --text-dim: #8b92a1; /* 4.9:1 on the ground and 4.5:1 on the lightest card surface. The obvious value here is one step further down the ramp, and it measures 4.08:1 — which is what the standing disclaimer and the database's source notes were actually being set in. "Faint" is a role, not a licence to fail. */ --text-faint: #7c8392; --edge: #6e7686; --edge-soft: #545b6a; --hair: rgba(174, 186, 214, 0.13); --hair-strong: rgba(174, 186, 214, 0.26); /* ── Primary accent: gold. Brand, primary action, numbers. ─────────────── */ --gold-100: #fcf0cf; --gold-300: #f5dc98; --gold-500: #dfbf66; --gold-600: #c7a74d; --gold-700: #a58938; --gold-900: #564614; --gold-ink: #17130a; /* ── Secondary accent: frost. Interactive, and only interactive. ───────── */ --frost-300: #aae4ff; --frost-400: #85cef9; --frost-600: #4a9dc5; /* ── Semantics. None of these is gold or frost. ────────────────────────── */ --ok: #67d89c; --warn: #f6b45c; --danger: #f98078; --info: #90cdf1; /* The matching fills. Written out rather than mixed at runtime so a browser without color-mix() still gets a tinted callout instead of a bare one. */ --ok-wash: rgba(103, 216, 156, 0.10); --warn-wash: rgba(246, 180, 92, 0.10); --danger-wash: rgba(249, 128, 120, 0.10); --info-wash: rgba(144, 205, 241, 0.10); /* ── Section tones. Same OKLCH lightness and chroma; hue is the variable. */ --brass: #dfbf66; --copper: #fbae86; --verdigris: #80d8ae; --cyan: #6ad6dc; --periwinkle: #aebdff; --heather: #e9aae3; --tone: var(--brass); /* whichever of the six this page belongs to */ --tone-wash: rgba(223, 191, 102, 0.075); --tone-edge: rgba(223, 191, 102, 0.36); /* ── Legacy names, kept because ~260 pages and five section stylesheets already consume them. Retargeting these is how a colour change reaches every page without editing one of them. ──────────────────────────── */ --gold: var(--gold-500); --gold-bright: var(--gold-300); --gold-dim: var(--gold-700); --ink: var(--ink-800); --panel: var(--surface-1); --panel-2: var(--surface-2); --muted: var(--text-dim); --line: var(--hair); --ember: var(--copper); --display: "Cinzel", "Iowan Old Style", Palatino, Georgia, serif; --fancy: "Cinzel Decorative", "Cinzel", serif; --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --maxw: 1080px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--text); font-family: var(--body); line-height: 1.65; background: radial-gradient(1200px 600px at 50% -10%, #1c2534 0%, rgba(20,25,37,0) 60%), linear-gradient(180deg, #0b0f16, #0c1017 60%); min-height: 100vh; } /* A link is frost, and frost is only ever a link. It carries a resting underline at low contrast rather than none at all: an underline that only appears on hover is invisible to anyone not using a mouse, and colour alone is not an acceptable way to mark a link inside a paragraph. */ a { color: var(--frost-400); text-decoration: none; } a:hover { text-decoration: underline; } /* height:auto is load-bearing: our carry width/height attributes, and on iOS WebKit (Safari AND Chrome) a width constraint without an explicit height:auto makes the literal height attribute win over the intrinsic aspect-ratio — the image renders stretched. Never drop the height:auto. */ img { max-width: 100%; height: auto; } /* Top bar */ .nav { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(10px); background: linear-gradient(180deg, rgba(12,16,23,0.92), rgba(12,16,23,0.72)); border-bottom: 1px solid var(--line); } .nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 20px; } .brand { font-family: var(--fancy); font-size: 20px; color: var(--gold); letter-spacing: 0.5px; white-space: nowrap; } .brand span { color: var(--gold-bright); } .nav-links { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; } .nav-links a { color: var(--text); font-size: 14px; } .nav-links a:hover { color: var(--gold-bright); text-decoration: none; } .nav-cta { font-family: var(--display); font-weight: 700; font-size: 14px; background: linear-gradient(180deg, var(--gold-bright), var(--gold-dim)); color: #241a06 !important; padding: 8px 16px; border-radius: 10px; border: 1px solid #7a5a22; box-shadow: inset 0 1px 0 rgba(255,248,220,0.6), 0 3px 8px rgba(0,0,0,0.4); } .nav-cta:hover { filter: brightness(1.06); text-decoration: none; } /* Nav dropdowns — Community / Explore. Plain
/, deliberately not a JavaScript menu: every link inside is a real, always-present anchor, so a crawler or a browser with JS off reaches exactly the same pages a mouse does. It also means there is only ONE nav to keep in sync rather than a desktop version and a separate mobile one — the same markup collapses into a plain expanding section under the phone breakpoint below instead of needing its own component. */ /* A generic `details { border; background; box-shadow; margin; }` styles the FAQ accordion elsewhere on the site, and a bare-tag selector still beats a class for anything it does not explicitly name — every property here is a RESET of one of those, not a fresh design, or this would inherit an accordion card's chrome around two words in the nav bar. Same story for `details summary::before` and its "▸ "/"▾ " text markers: reset to nothing so this dropdown gets exactly one caret, the one drawn below. */ .nav-drop { position: relative; border: none; border-radius: 0; margin: 0; background: none; box-shadow: none; overflow: visible; } /* `details[open]` (tag+attribute) outweighs a plain class, so the open state needs its own reset too or the accordion's shadow reappears the moment this is expanded. */ .nav-drop[open] { box-shadow: none; } .nav-drop > summary { list-style: none; cursor: pointer; color: var(--text); font-size: 14px; font-family: inherit; font-weight: 400; padding: 4px 2px; display: inline-flex; align-items: center; gap: 4px; -webkit-appearance: none; appearance: none; background: none; border: none; outline-offset: 2px; } .nav-drop > summary::-webkit-details-marker { display: none; } .nav-drop > summary::before { content: none; } .nav-drop > summary::marker { content: ""; } /* `details[open] summary::before` (tag+attribute+tag) outweighs the reset two lines up (class+tag) the moment this is expanded — the open-state leading "▾ " reappeared in exactly that state and nowhere else, which is the tell. Matched here with the same attribute-selector shape so this wins instead. */ .nav-drop[open] > summary::before { content: none; } .nav-drop > summary::after { content: ""; width: 0; height: 0; margin-top: 2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .6; } .nav-drop > summary:hover, .nav-drop[open] > summary { color: var(--gold-bright); } .nav-drop-menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 190px; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--panel, #161b24); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,.45); z-index: 40; } .nav-drop-menu a { padding: 7px 10px; border-radius: 8px; font-size: 14px; color: var(--text); } .nav-drop-menu a:hover { background: rgba(227,193,104,.08); color: var(--gold-bright); text-decoration: none; } /* Layout */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 32px 20px 64px; } .crumbs { color: var(--muted); font-size: 13px; margin: 0 0 20px; } .crumbs a { color: var(--muted); } /* Text utilities — used by the legal, roadmap and news pages, and never * written until now. `--muted` existed as a colour VARIABLE, so `.muted` * looked defined at a glance and silently did nothing: every "muted small" * caption on those pages rendered at full body weight, which is the opposite * of what it was marked up to say. */ .lede { font-size: 18.5px; line-height: 1.62; color: var(--text); margin: 0 0 20px; } .muted { color: var(--muted); } .small { font-size: 13.5px; line-height: 1.6; } .muted a { color: var(--muted); text-decoration: underline; } /* Available to a screen reader, absent from the page. For headings a document * needs for its outline but a sighted reader does not need repeated back. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Hero */ .hero { text-align: center; padding: 64px 20px 40px; max-width: 860px; margin: 0 auto; } .hero h1 { font-family: var(--fancy); font-size: clamp(34px, 7vw, 62px); color: var(--gold); margin: 0 0 8px; line-height: 1.05; } .hero .kicker { font-family: var(--display); color: var(--gold-bright); letter-spacing: 3px; text-transform: uppercase; font-size: 13px; } .hero p.lead { font-size: 18px; color: var(--text); max-width: 640px; margin: 18px auto 28px; } .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .btn { font-family: var(--display); font-weight: 700; font-size: 16px; padding: 13px 26px; border-radius: 12px; cursor: pointer; display: inline-block; border: 1px solid var(--line); color: var(--text); background: linear-gradient(180deg, #232a38, #141922); } .btn:hover { border-color: var(--gold); text-decoration: none; } .btn.primary { background: linear-gradient(180deg, var(--gold-bright), var(--gold-dim)); color: #241a06; border-color: #7a5a22; box-shadow: inset 0 1px 0 rgba(255,248,220,0.6), 0 4px 12px rgba(0,0,0,0.45); } .btn.primary:hover { filter: brightness(1.06); } /* Section headings. NOT gold — see the palette note at the top of this file. A heading earns its place through size, weight and space, and the section tone is carried by the eyebrow above it and the rule beneath it. When every heading was gold there was no way to make one of them matter more. */ h2 { font-family: var(--display); color: var(--text-strong); font-size: var(--fs-2xl); font-weight: 600; margin: var(--s7) 0 var(--s2); } h3 { font-family: var(--display); color: var(--text-strong); font-size: var(--fs-xl); font-weight: 600; margin: var(--s6) 0 var(--s2); } h4 { font-family: var(--display); color: var(--text-strong); font-size: var(--fs-lg); font-weight: 600; margin: var(--s5) 0 var(--s2); } .section-sub { color: var(--text-dim); margin: 0 0 var(--s4); max-width: var(--measure); } /* Cards grid */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 22px 0; } .card { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: 14px; padding: 20px; transition: border-color 0.2s, transform 0.2s; } .card:hover { border-color: var(--gold); transform: translateY(-2px); } .card h3 { margin: 0 0 6px; } .card p { color: var(--muted); font-size: 14px; margin: 0; } .card .ico { font-size: 26px; } a.card, a.card:hover { text-decoration: none; color: inherit; display: block; } /* Prose */ .prose { max-width: 760px; } .prose p, .prose li { font-size: 16px; } .prose ul, .prose ol { padding-left: 22px; } .prose li { margin: 6px 0; } /* Bold inside running text is EMPHASIS, not decoration. Gold here meant every paragraph had three or four gold words in it, which is most of why the old pages read as one undifferentiated colour. */ .prose strong { color: var(--text-strong); font-weight: 650; } .callout { border-left: 3px solid var(--tone); background: var(--tone-wash); padding: var(--s3) var(--s4); border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: var(--s5) 0; color: var(--text); } /* The semantic variants take a SEMANTIC colour, not a warmer shade of the accent. A caution that is merely a browner gold is not a caution. */ .callout.warn { border-left-color: var(--warn); background: var(--warn-wash); } .callout.danger { border-left-color: var(--danger); background: var(--danger-wash); } .callout.good, .callout.ok { border-left-color: var(--ok); background: var(--ok-wash); } .callout.info { border-left-color: var(--info); background: var(--info-wash); } /* Table */ table { width: 100%; border-collapse: collapse; margin: var(--s5) 0; font-size: var(--fs-sm); } th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--hair); } /* The header row is a SURFACE, not a colour of text. That is what makes a long table scannable — the eye reads the band, not eleven gold words. */ th { color: var(--text-strong); font-family: var(--display); font-weight: 600; background: var(--surface-3); border-bottom: 2px solid var(--tone); font-size: var(--fs-sm); letter-spacing: .02em; } tbody tr:nth-child(even) { background: rgba(174,186,214,0.022); } tbody tr:hover { background: var(--tone-wash); } /* FAQ */ details { border: 1px solid var(--hair); border-radius: var(--r-md); margin: var(--s2) 0; background: linear-gradient(180deg, var(--surface-2), var(--surface-1)); box-shadow: var(--lift), var(--e1); overflow: hidden; transition: border-color .2s, box-shadow .2s; } details:hover { border-color: var(--hair-strong); } details[open] { box-shadow: var(--lift), var(--e2); } details summary { cursor: pointer; padding: 14px 18px; font-family: var(--display); font-weight: 600; color: var(--text-strong); font-size: var(--fs-base); list-style: none; } details summary::-webkit-details-marker { display: none; } /* The disclosure caret is the one place the section tone belongs on a summary row: it marks the affordance without recolouring the question itself. */ details summary::before { content: "▸ "; color: var(--tone); } details[open] summary::before { content: "▾ "; } details .answer { padding: 0 18px 16px; color: var(--text); max-width: var(--measure); } /* Footer. The body gradient already runs the page down toward --ink-900, so the footer needs no background of its own — one that disagreed with the canvas would draw a visible seam under the disclaimer, which sits outside the