/* The Ultimate Fantasy Series Ranking: site styles Editorial/encyclopedic redesign (2026-08-11, DEC-0226). Light and dark themes are both first-class: every colour is a custom property, set once here for light (the default) and overridden under `@media (prefers-color-scheme: dark)`. No page ever hardcodes a colour outside this file, which is what keeps 1,500+ generated pages visually consistent with a single edit here. THEME SELECTION (DEC-0230, 2026-08-12): the theme follows ONLY the visitor's own system/browser preference, automatically, with no manual toggle and nothing written to storage. Earlier (DEC-0226) this was done with a `[data-theme]` HTML attribute, set by a small inline script in every page's (to avoid a flash of the wrong theme before a toggle button's saved choice could apply) and flippable by that button. The manual override was removed: with no override to restore, there is nothing left for a script to compute or apply before paint; `@media (prefers-color-scheme: dark)` directly on these variables makes the CSS engine itself pick the right theme before first paint, with no JS, no attribute and no flash possible by construction. The old anti-flash init script and js/main.js's toggle handler were both removed, not kept as dead code; see DECISIONS.md for DEC-0230. Per-universe visual theming is deliberately OUT of scope here. This file defines one uniform base layout/theme pair for the whole site, not per-universe skins. */ :root { /* Light theme (default): warm paper background, ink-dark text, a single deep terracotta/oxblood accent. All pairings below were checked against WCAG AA (>=4.5:1 for text, including small badge text) against the specific background each is used on. */ --bg: #faf8f4; --bg-panel: #ffffff; --bg-panel-2: #f1eee6; --ink: #22201c; --ink-muted: #6f6a5e; --line: #e3ddd0; --accent: #8a3324; --accent-soft: #b6664f; --good: #2f6b41; --warn: #8f551a; /* Typography: a serif for headings/titles (editorial, print-like), a clean system sans for body copy and UI, monospace for ids/versions/builds. All are safe, widely-installed system stacks, with no external font requests, no added latency, or dependency. */ --serif: Georgia, "Iowan Old Style", "Noto Serif", "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", sans-serif; --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --radius: 5px; color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root { --bg: #171613; --bg-panel: #1f1e1a; --bg-panel-2: #292722; --ink: #ece7dc; --ink-muted: #a39d8c; --line: #3a372e; --accent: #e08f5b; --accent-soft: #c96a44; --good: #6fbd85; --warn: #d9a53f; color-scheme: dark; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.7; transition: background-color .15s ease, color .15s ease; /* Native form controls (checkboxes, radios, range sliders -- rankings.html/universes.html's filter panels are the main place these show up) otherwise render in the browser's own default blue, clashing with the site's warm orange/rust palette -- flagged visually by Carlos on his phone, 2026-08-27. accent-color is the one-line, no-fallback-needed way to retint them; it's on (not a narrower selector) so it inherits everywhere without needing to be repeated per page/component, same "one edit here" discipline as the rest of this file's theming. */ accent-color: var(--accent); } .wrap { max-width: 1040px; margin: 0 auto; padding: 0 1.5rem; } /* Header */ header.site { border-bottom: 1px solid var(--line); background: var(--bg-panel); padding: 1.75rem 0 0; } header.site h1, header.site .site-title { font-family: var(--serif); font-weight: 700; font-size: 1.75rem; margin: 0 0 .25rem; letter-spacing: -.01em; } header.site h1 a, header.site .site-title a { color: var(--ink); text-decoration: none; } header.site .tagline { color: var(--ink-muted); margin: 0 0 1.1rem; font-size: .95rem; font-style: italic; } /* Header masthead art ("Option A", Carlos's pick from a 5-favicon/ 3-header concept gallery, 2026-08-17): a faint fantasy skyline behind the title. Built entirely from the vars above (--accent/--accent-soft/ --ink at low opacity), so the existing `prefers-color-scheme: dark` override block re-skins it automatically -- no new colors introduced. .site-hero-content sits after .site-hero-art in source order, so the title/tagline paint over the art with no z-index needed. Nothing here animates; if that ever changes, a `prefers-reduced-motion: reduce` guard belongs here first (matching this file's standing accessibility discipline elsewhere). */ .site-hero { position: relative; overflow: hidden; } .site-hero-art { /* Carlos, after seeing DEC-0450's more-prominent art (bigger opacity, taller max-height, a new gradient panel behind it): "a imagem de antes era melhor... reverte a imagem para a anterior" -- reverted back to DEC-0449's original, subtler proportions/opacity. Only the art changed back; the title/tagline sizing and centering fix from DEC-0450 stays as-is, he confirmed the letters are right now. */ position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; max-height: 96px; opacity: .55; pointer-events: none; } .site-hero-content { position: relative; text-align: center; } /* `header.site .site-hero-content h1`/`.tagline` -- needs to out-specify the plain `header.site h1`/`header.site .tagline` rules above (both already carry `header.site`), or those rules win the cascade by specificity regardless of source order and every size/color change here silently does nothing. Learned the hard way: a first pass using bare `.site-hero-content h1` compiled fine but never actually changed the rendered size. */ header.site .site-hero-content h1, header.site .site-hero-content .site-title { font-size: 2.15rem; } header.site .site-hero-content .tagline { font-size: 1.05rem; color: var(--accent); } @media (max-width: 600px) { /* The art's viewBox stretches to fill .site-hero's box (preserveAspectRatio="none", by design, so it always reaches both edges); on a narrow phone the box is relatively taller than on desktop, so cap the art shorter rather than let it stretch into a tall, distorted band behind the title. Text switches to left-aligned here (matching the reference mobile mockup) and shrinks just enough to keep the title on one line at a 375px viewport, rather than centering a two-line wrap that eats too much vertical space. */ .site-hero-content { text-align: left; } .site-hero-art { max-height: 64px; opacity: .4; } header.site .site-hero-content h1, header.site .site-hero-content .site-title { font-size: .98rem; white-space: nowrap; letter-spacing: -.02em; } header.site .site-hero-content .tagline { font-size: .85rem; } } /* Same condensed hero as the max-width breakpoint above, keyed off viewport HEIGHT instead (Carlos, 2026-08-28, second-visit UX audit finding #6): a phone turned sideways (e.g. 812x375) never matches `max-width: 600px` -- it's plenty wide -- but is just as short on vertical room, and the full-size hero measured ~184px there, near half of a 375px-tall screen before any real content appeared. The two conditions can both match at once on some devices; the rules are identical in effect, so that's harmless. Threshold picked at 500px so ordinary short laptop/tablet windows aren't affected, only genuinely landscape-phone-scale heights. */ @media (max-height: 500px) { .site-hero-content { text-align: left; } .site-hero-art { max-height: 64px; opacity: .4; } header.site .site-hero-content h1, header.site .site-hero-content .site-title { font-size: .98rem; white-space: nowrap; letter-spacing: -.02em; } header.site .site-hero-content .tagline { font-size: .85rem; } } nav.site { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--line); } nav.site ul { list-style: none; display: flex; flex-wrap: wrap; gap: .1rem; margin: 0; padding: 0; flex: 1 1 auto; } nav.site a { display: block; padding: .65rem .75rem; color: var(--ink-muted); text-decoration: none; border-bottom: 2px solid transparent; font-size: .85rem; letter-spacing: .01em; } nav.site a:hover { color: var(--ink); } nav.site a.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } /* Grouped nav dropdowns (DEC-0227): native
/ disclosure widgets, with no JS required to open/close; js/main.js only closes other groups and handles outside clicks as a nicety. */ nav.site details.nav-group { position: relative; } nav.site details.nav-group > summary { list-style: none; cursor: pointer; padding: .65rem .75rem; color: var(--ink-muted); font-size: .85rem; letter-spacing: .01em; border-bottom: 2px solid transparent; user-select: none; white-space: nowrap; } nav.site details.nav-group > summary::-webkit-details-marker { display: none; } nav.site details.nav-group > summary::after { content: " \25BE"; font-size: .72em; color: var(--ink-muted); } nav.site details.nav-group > summary:hover { color: var(--ink); } nav.site details.nav-group[open] > summary { color: var(--ink); } nav.site details.nav-group > summary.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } nav.site .nav-drop { position: absolute; top: 100%; left: 0; z-index: 30; min-width: 14em; margin: 0; padding: .35rem 0; list-style: none; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0, 0, 0, .10); display: block; } nav.site .nav-drop li { display: block; } nav.site .nav-drop a { display: block; padding: .5rem 1rem; border-bottom: none; font-size: .88rem; } nav.site .nav-drop a:hover { background: var(--bg-panel-2); } nav.site .nav-drop a.active { color: var(--accent); font-weight: 600; } .nav-secondary-tag { color: var(--ink-muted); font-size: .78em; font-weight: 400; } /* Groups the global search box as its own flex child of nav.site (P1 UX pass, 2026-08-12; theme toggle removed by DEC-0230), alongside the