/* ==========================================================================
ROCMeta — "The Forge"
--------------------------------------------------------------------------
Illuminated craft, War Room heat: near-black opaque plates, a molten ember
accent, engraved edges instead of glass, and rank expressed as temperature.
HOW THIS FILE IS REACHED
roc_head() in app/view.php links exactly one public stylesheet. A page opts
in with 'css' => 'forge' and rolls back by deleting that array key. Nothing
else switches. Pages that have not opted in still get styles.css and Cinzel,
so this file may be incomplete without breaking anything that is still on
the old sheet.
RULES THIS FILE KEEPS
1. Surfaces are OPAQUE. Elevation is a lightness step plus a 1px light top
edge and a 1px dark bottom edge. No backdrop-filter, no tinted glass —
that is what let 12 unrelated component types share one look before.
2. Warmth encodes HOW GOOD (the heat ramp). Pigment encodes WHAT KIND (troop
type). They never compete because they never mean the same thing.
3. Every colour pair below was measured with tools/../c.py. Ratios are noted
inline. Nothing that carries meaning sits under 4.5:1 as text.
4. Motion seats, never floats. One easing, three durations. Hover effects are
behind @media (hover:hover) so they cannot stick after a tap on Android.
5. Minimum 44x44 for anything you can tap.
CONTRACT WITH assets/js/app.js
app.js builds markup inside innerHTML template strings, so its class names
appear in no PHP file and cannot be found by grepping the templates. It also
toggles the `hidden` attribute on components that carry their own display
rule — hence the defensive [hidden] block at the end of this file, which is
load-bearing, not boilerplate. Eight CSS rules key off ARIA state rather than
a class ([aria-pressed], [aria-current]); those selectors are the interface.
========================================================================== */
/* ==========================================================================
1. TOKENS
========================================================================== */
:root {
/* -- ground & plates -------------------------------------------------- */
--void: #0e0f13; /* page ground — brand Obsidian, sampled from lockup-dark.png */
--plate: #141418; /* default raised surface */
--plate-2: #1e1e24; /* nested / active surface */
--plate-3: #2a2a31; /* highest — NOTE: --text-3 fails AA here, use --text-2 */
/* engraved edge: light on top, dark underneath. This 2px carries all the
material information — the inverse of a blur. */
--edge-hi: rgba(255, 255, 255, .06);
--edge-lo: rgba(0, 0, 0, .55);
--hair: #24242b; /* 1px divider */
--hair-soft: #1c1c22;
/* -- text (warm neutrals; ratios vs --void / --plate) ------------------ */
--text: #f2efe9; /* 17.24 / 16.01 */
--text-2: #b6aea3; /* 9.02 / 8.37 */
--text-3: #8f8a82; /* 5.77 / 5.36 — do not use on --plate-3 (4.16) */
--text-3-up: #97918a; /* 6.34 / 5.89 — the --plate-3 substitute (4.57) */
/* -- ember accent ----------------------------------------------------- */
--ember-1: #ffc24d; /* 12.32 / 11.44 — the readable one, use for text */
--ember-2: #ffa629; /* 10.12 / 9.40 */
--ember-3: #ff4d2e; /* 5.98 / 5.56 — gradient end + large marks only */
--ember-ink: #1a0d02; /* 11.86 on --ember-1 — text ON an ember fill */
--ember-dim: rgba(255, 77, 46, .13);
--ember-line:#56291a;
--molten: linear-gradient(168deg, var(--ember-1), var(--ember-3));
/* -- heat ramp = rank ------------------------------------------------- */
--heat-hot: linear-gradient(180deg, var(--ember-1), var(--ember-3));
--heat-mid: #c2683a; /* 5.03 / 4.67 */
--heat-cold: #5a5d66; /* 3.01 — RAIL ONLY. Never text. */
--heat-cold-text: #8b8f9a; /* 6.12 / 5.68 — the labelled substitute */
/* -- troop pigment = category (never rank) ---------------------------- */
--cav: #e07a5f; /* 6.71 / 6.23 */
--arc: #9dbb72; /* 9.22 / 8.56 */
--foo: #7fa8d0; /* 7.93 / 7.36 */
--mix: #b08ac9; /* 6.90 / 6.41 */
/* -- status ----------------------------------------------------------- */
--ok: #6cc48f;
--warn: #e0a33a;
--bad: #e8705f;
/* -- type ------------------------------------------------------------- */
--f-display: Fraunces, Georgia, "Times New Roman", serif;
--f-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
/* 8 steps. 16px body floor; 12px label floor. The old sheet had 54 distinct
font-size values and 57 declarations below 0.8rem, down to 9.3px. */
--fs-2xs: .75rem; /* 12 — uppercase labels only */
--fs-xs: .8125rem; /* 13 */
--fs-sm: .875rem; /* 14 */
--fs-md: 1rem; /* 16 — body floor, and the iOS no-zoom input floor */
--fs-lg: 1.0625rem; /* 17 — long-form prose */
--fs-xl: 1.375rem; /* 22 */
--fs-2xl: 1.75rem; /* 28 */
--fs-3xl: clamp(2rem, 4.6vw, 3.1rem);
/* -- space ------------------------------------------------------------ */
--s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
--s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
/* -- radii: near-square containers; pills for status chips ONLY -------- */
--r-xs: 3px; --r-sm: 5px; --r-md: 7px; --r-lg: 10px; --r-pill: 999px;
/* -- elevation -------------------------------------------------------- */
--lift-1: inset 0 1px 0 var(--edge-hi), inset 0 -1px 0 var(--edge-lo);
--lift-2: inset 0 1px 0 var(--edge-hi), inset 0 -1px 0 var(--edge-lo),
0 2px 10px rgba(0, 0, 0, .45);
--lift-3: inset 0 1px 0 var(--edge-hi), 0 18px 44px rgba(0, 0, 0, .62);
/* -- motion ----------------------------------------------------------- */
--ease: cubic-bezier(.2, .7, .3, 1);
--t-1: 120ms; --t-2: 180ms; --t-3: 280ms;
/* -- layers ----------------------------------------------------------- */
--z-dock: 30; --z-scrim: 40; --z-sheet: 50; --z-subscribe: 55;
--z-dialog: 60; --z-toast: 70; --z-skip: 100;
--container: 1180px;
--tap: 44px;
color-scheme: dark;
}
/* ==========================================================================
1b. LEGACY TOKEN BRIDGE — load-bearing, not tidiness
--------------------------------------------------------------------------
The templates carry 698 inline style="" attributes, and some of them
reference the OLD sheet's custom properties directly:
--line glossary.php, methodology.php (table borders)
--soft glossary.php, hero.php, methodology.php
--muted combos.php, hero.php, meta.php
--panel glossary.php
--accent-2 methodology.php
--gold-2 index.php
An inline style beats any rule in this file, so if these names resolve to
nothing, those borders disappear and that text turns default-coloured — on
pages that otherwise look finished. Aliasing the whole old palette onto
Forge values costs ~25 lines and makes forge.css safe to ship against markup
that has not been touched yet.
These are deliberately temporary. Each one dies as its page's inline styles
are removed; the file should end the rollout with this block deleted.
========================================================================== */
:root {
--accent: var(--ember-2);
--accent-2: var(--ember-1);
--accent-deep: var(--heat-mid);
--gold: var(--ember-1);
--gold-2: var(--ember-2);
--gold-deep: var(--heat-mid);
--ice: var(--ember-1);
--ink: var(--ember-ink);
--bg: var(--void);
--bg-2: var(--plate);
--panel: var(--plate);
--panel-2: var(--plate-2);
--line: var(--hair);
--line-strong: var(--plate-3);
/* --soft was #5f7f9c: measured 4.02:1, an AA failure that coloured entire
article bodies. Re-pointed rather than reproduced — and at --text-2
(8.37:1) not --text-3, because hero.php sets it inline on every paragraph
of the write-up and the rationale, and long prose at the tertiary tone
reads washed out. */
--soft: var(--text-2);
--muted: var(--text-2);
--silver: var(--text-2);
--blue: var(--foo);
--green: var(--ok);
--red: var(--bad);
--purple: var(--mix);
--radius: var(--r-md);
--radius-lg: var(--r-lg);
--glow: rgba(255, 110, 50, .22);
--shadow: var(--lift-3);
--shadow-soft: var(--lift-2);
--font-body: var(--f-body);
--font-display: var(--f-display);
}
/* ==========================================================================
2. RESET & BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--void);
color: var(--text);
font: 400 var(--fs-md)/1.6 var(--f-body);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* A 128px grain tile at 3.5%. This does more to kill the "flat CSS gradient"
look than any other single rule, and costs ~0.4 KB inline. */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: .035;
background-image: url("data:image/svg+xml;utf8,");
}
body > * { position: relative; z-index: 1; }
/* THE reset the old sheet was missing. Without it, form controls fall back to
the UA's 13.33px system font, which is why .pill and .btn.small computed to
37px tall and 18 of 19 controls missed the 44px floor. */
button, input, select, textarea { font: inherit; color: inherit; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--ember-1); text-decoration-color: var(--ember-line); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
hr { border: 0; border-top: 1px solid var(--hair); margin: var(--s-6) 0; }
::selection { background: var(--ember-2); color: var(--ember-ink); }
/* One visible focus ring, everywhere. The old sheet had ten `outline:none`
sites and a single :focus-visible rule buried at line 1414. */
:focus-visible {
outline: 2px solid var(--ember-1);
outline-offset: 2px;
border-radius: var(--r-xs);
}
/* Anchors the templates rely on. */
#finder, #rankings, #toplists, #faq, #top, #ranked-list { scroll-margin-top: var(--s-6); }
/* ==========================================================================
3. TYPOGRAPHY
========================================================================== */
h1, h2, h3, h4 {
font-family: var(--f-display);
font-weight: 600;
line-height: 1.15;
letter-spacing: -.005em;
color: var(--text);
margin: 0 0 var(--s-3);
font-variation-settings: "SOFT" 0, "WONK" 1;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); margin-top: var(--s-6); }
h3 { font-size: var(--fs-xl); margin-top: var(--s-5); }
h4 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--s-4); }
/* Long-form prose. The old sheet set article bodies in --soft (#5f7f9c,
measured 4.02:1) which is why the guides read washed out. */
main p, main li { color: var(--text-2); font-size: var(--fs-lg); }
main p strong, main li strong { color: var(--text); font-weight: 600; }
main ul, main ol { margin: 0 0 var(--s-4); padding-left: 1.25em; }
main li { margin-bottom: var(--s-2); }
main li::marker { color: var(--ember-3); }
/* Every figure, everywhere, in tabular mono. A column of numbers that lines up
is the cheapest "this is authoritative" signal available, and the site is
almost entirely numbers. */
.num, .score, .rank, .stat b, .stat-value {
font-family: var(--f-mono);
font-variant-numeric: tabular-nums;
letter-spacing: -.02em;
}
.eyebrow, .mini-eyebrow {
font: 700 var(--fs-2xs)/1 var(--f-body);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ember-2);
margin: 0 0 var(--s-2);
display: block;
}
/* On a phone the 22px lede ran six lines and dominated the screen above the
tool. It steps up only when there is room for it. */
.hero-lede { font-size: var(--fs-md); line-height: 1.55; color: var(--text-2); max-width: 62ch; }
@media (min-width: 720px) { .hero-lede { font-size: var(--fs-xl); line-height: 1.5; } }
/* Same problem on the page eyebrow — it wrapped to two cramped lines. */
@media (max-width: 480px) { .lander .eyebrow { letter-spacing: .1em; line-height: 1.5; } }
/* ==========================================================================
4. LAYOUT
========================================================================== */
.section {
max-width: var(--container);
margin-inline: auto;
padding: var(--s-6) var(--s-4);
}
@media (min-width: 720px) { .section { padding-inline: var(--s-5); } }
main { display: block; }
/* Skip link — visible the moment it is focused. */
.skip-link {
position: absolute; left: var(--s-3); top: var(--s-3);
z-index: var(--z-skip);
transform: translateY(-200%);
background: var(--ember-1); color: var(--ember-ink);
font-weight: 700; font-size: var(--fs-sm);
padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
min-height: var(--tap); display: inline-flex; align-items: center;
}
.skip-link:focus { transform: translateY(0); }
/* ==========================================================================
5. COMPONENTS
========================================================================== */
/* -- engraved plate ---------------------------------------------------- */
.plate, .rank-cta {
background: var(--plate);
border-radius: var(--r-md);
box-shadow: var(--lift-1);
padding: var(--s-5);
}
/* -- buttons ----------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
min-height: var(--tap);
padding: var(--s-3) var(--s-5);
border: 1px solid var(--hair);
border-radius: var(--r-sm);
background: var(--plate-2);
color: var(--text);
font: 600 var(--fs-sm)/1 var(--f-body);
text-decoration: none;
cursor: pointer;
transition: background var(--t-1) var(--ease), border-color var(--t-1) var(--ease),
transform var(--t-1) var(--ease);
}
/* Things seat; they do not lift. Works identically on touch and mouse. */
.btn:active { transform: translateY(1px) scale(.995); }
.btn.primary {
background: var(--molten);
color: var(--ember-ink);
border-color: transparent;
font-weight: 700;
/* The signature 45-degree notch. Used on exactly three components:
.btn.primary, the tier chip, and the rank plate. Nowhere else. */
clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
box-shadow: 0 6px 20px rgba(255, 77, 46, .22);
}
.btn.ghost { background: transparent; color: var(--text-2); }
.btn.small { padding: var(--s-2) var(--s-4); font-size: var(--fs-xs); }
/* Hover is a progressive enhancement, never the only affordance. */
@media (hover: hover) and (pointer: fine) {
.btn:hover { background: var(--plate-3); border-color: var(--hair); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost:hover { color: var(--text); background: var(--plate); }
}
/* -- chips ------------------------------------------------------------- */
.chip, .pill {
display: inline-flex; align-items: center; gap: var(--s-2);
min-height: 34px; padding: var(--s-2) var(--s-3);
border: 1px solid var(--hair); border-radius: var(--r-sm);
background: var(--plate);
font: 600 var(--fs-xs)/1 var(--f-body);
color: var(--text-2);
cursor: pointer;
}
/* State lives on the ARIA attribute, not a class — app.js drives these. */
.pill[aria-pressed="true"] {
background: var(--molten); border-color: transparent;
color: var(--ember-ink); font-weight: 700;
}
.tier-chip {
font: 700 var(--fs-2xs)/1 var(--f-body);
letter-spacing: .09em; text-transform: uppercase;
padding: 5px 7px; border-radius: var(--r-xs);
clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}
.tier-chip.is-current { background: var(--molten); color: var(--ember-ink); }
.tier-chip.is-mid { background: var(--heat-mid); color: var(--ember-ink); }
.tier-chip.is-start { background: var(--plate-3); color: var(--heat-cold-text); }
/* -- heat rail: the ordinal device ------------------------------------- */
.rail { display: block; width: 3px; border-radius: 1px; background: var(--heat-cold); }
.rail.is-current { background: var(--heat-hot); }
.rail.is-mid { background: var(--heat-mid); }
/* -- troop pigment ------------------------------------------------------ */
.t-cavalry { color: var(--cav); }
.t-archer { color: var(--arc); }
.t-footmen { color: var(--foo); }
.t-mixed { color: var(--mix); }
/* -- breadcrumbs -------------------------------------------------------- */
.breadcrumbs {
font-size: var(--fs-sm); color: var(--text-3);
margin-bottom: var(--s-3);
}
.breadcrumbs a { color: var(--text-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ember-1); text-decoration: underline; }
/* -- call to action block ---------------------------------------------- */
.rank-cta { text-align: center; }
.rank-cta h2 { margin-top: 0; }
.rank-cta p { color: var(--text-2); }
/* -- icons -------------------------------------------------------------- */
.ic { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -.15em; }
/* ==========================================================================
6. SHELL — header, nav, footer
========================================================================== */
.site-header {
/* NOTE: no overflow:hidden. The old sheet clipped the open mobile menu on
/404 and /subscribe, leaving those pages with unreachable navigation. */
border-bottom: 1px solid var(--hair);
background:
radial-gradient(120% 70% at 50% -20%, rgba(255, 110, 50, .10), transparent 62%),
var(--void);
}
.nav {
max-width: var(--container);
margin-inline: auto;
padding: var(--s-3) var(--s-4);
display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--text); margin-right: auto;
min-height: var(--tap); } /* was 38px tall on every page */
/* THE WORDMARK, in the owner's own face.
Anton is a single-weight condensed display face, so 700 would be synthesised
into a smeared fake bold — 400 is the only real weight it has. It also sets
noticeably larger on the body than Fraunces at the same size, hence the step
down to --fs-md, and it carries almost no sidebearing, hence the added
tracking. Line-height 1 because Anton's own metrics already leave room. */
.brand strong {
display: block;
font: 400 var(--fs-md)/1 'Anton', var(--f-display);
letter-spacing: .012em;
}
.brand small {
display: block; margin-top: 2px;
font-size: var(--fs-2xs); color: #7d7f8b;
/* The brand guide sets UI labels in uppercase with wide tracking. Tracking is
.14em rather than the guide's .4em: at this size, under a compact wordmark,
.4em runs the strapline past the logo and wraps it on a 360px screen. The
uppercase treatment is what carries the look; the exact tracking is a fit
decision. Barlow Condensed is not loaded on purpose -- one more webfont
request for a single line of 20 characters is not a trade worth making. */
text-transform: uppercase;
letter-spacing: .14em;
white-space: nowrap;
}
/* Three tones, matching the lockup: the mark's own gold, bone, then steel.
The gold is the brand hex rather than --ember-1, so the four letters sit
beside the mark in exactly the colour the mark uses. */
.bm-hi { color: #d9a441; }
/* Sampled from the brand lockup: ROC is Gold #d9a441, Meta is #9a9caa. Using
--text made "Meta" near-white and lost the two-tone wordmark entirely. */
.bm-mid { color: #9a9caa; }
.bm-dim { color: #7d7f8b; }
/* THE SPLIT SHIELD, in the header.
The mark carries its own colours in the markup (see roc_brand_mark) because
the brand guide forbids recolouring it — so nothing here sets fill. What is
set here is size, and it is fluid: the glyph tracks the header's own scale
between a 320px phone and a wide desktop instead of sitting at one hard
pixel value. The svg has a viewBox, so scaling it costs nothing. */
.brand-mark {
flex: 0 0 auto; display: grid; place-items: center;
width: clamp(30px, 2.4vw + 24px, 38px);
height: clamp(30px, 2.4vw + 24px, 38px);
background: var(--plate); border-radius: var(--r-sm); box-shadow: var(--lift-1);
}
/* ~82% fill. The mark's own artwork already carries margin inside its 72-unit
box, so filling the plate more tightly than this reads as cramped. */
.bm-glyph { width: 82%; height: 82%; display: block; }
@media (hover: hover) and (pointer: fine) {
.brand-mark { transition: box-shadow var(--t-2) var(--ease); }
.brand:hover .brand-mark { box-shadow: var(--lift-2); }
}
@media (prefers-reduced-motion: reduce) { .brand-mark { transition: none; } }
.nav-toggle {
min-height: var(--tap); min-width: var(--tap);
padding: 0 var(--s-4);
background: var(--plate); color: var(--text);
border: 1px solid var(--hair); border-radius: var(--r-sm);
font: 600 var(--fs-sm)/1 var(--f-body); cursor: pointer;
}
.nav-toggle:active { transform: translateY(1px); }
.nav-links { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.nav-links > a {
display: inline-flex; align-items: center;
min-height: var(--tap); padding: 0 var(--s-3);
color: var(--text-2); text-decoration: none;
font: 600 var(--fs-sm)/1 var(--f-body);
border-radius: var(--r-sm);
border-bottom: 2px solid transparent;
}
.nav-links > a[aria-current="page"] { color: var(--text); border-bottom-color: var(--ember-3); }
@media (hover: hover) and (pointer: fine) { .nav-links > a:hover { color: var(--text); background: var(--plate); } }
.nav-search { display: flex; align-items: center; gap: var(--s-2);
background: var(--plate); border: 1px solid var(--hair); border-radius: var(--r-sm);
padding: 0 var(--s-3); min-height: var(--tap); }
.nav-search-icon { color: var(--text-3); font-size: var(--fs-sm); }
.nav-search input {
border: 0; background: transparent; color: var(--text);
/* 16px floor: anything smaller makes iOS Safari zoom the whole page on focus. */
font-size: var(--fs-md);
min-height: var(--tap); min-width: 11ch; outline: none;
}
.nav-search input::placeholder { color: var(--text-3); }
@media (max-width: 860px) {
.nav-toggle { order: 2; }
.nav-links {
order: 3; flex-basis: 100%;
flex-direction: column; align-items: stretch;
gap: 0; display: none;
border-top: 1px solid var(--hair); margin-top: var(--s-3); padding-top: var(--s-2);
}
.nav-links.open { display: flex; }
.nav-links > a { min-height: 48px; padding: 0 var(--s-2); }
.nav-search { margin-top: var(--s-2); }
.nav-search input { width: 100%; }
}
@media (min-width: 861px) { .nav-toggle { display: none; } }
/* -- page hero ---------------------------------------------------------- */
.rank-page-hero { padding-top: var(--s-5); padding-bottom: var(--s-5); }
.rank-page-hero h1 { margin: var(--s-2) 0 var(--s-3); }
/* -- footer -------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--hair); background: var(--plate); margin-top: var(--s-8); }
.footer-inner {
max-width: var(--container); margin-inline: auto; padding: var(--s-6) var(--s-4);
display: grid; gap: var(--s-5);
grid-template-columns: 1fr;
}
@media (min-width: 720px) { .footer-inner { grid-template-columns: 1.4fr 1fr 1fr auto; } }
.footer-inner strong { display: block; font: 600 var(--fs-lg)/1.2 var(--f-display); margin-bottom: var(--s-3); }
.footer-inner p { color: var(--text-3); font-size: var(--fs-sm); }
.footer-note { font-size: var(--fs-xs); }
.footer-links { display: flex; flex-direction: column; }
.footer-links a {
color: var(--text-2); text-decoration: none;
font-size: var(--fs-sm);
min-height: var(--tap); display: flex; align-items: center;
}
.footer-links a:hover { color: var(--ember-1); text-decoration: underline; }
.footer-actions { display: flex; flex-direction: column; gap: var(--s-2); align-items: stretch; }
/* ==========================================================================
7. SUBSCRIBE PROMPT
Opened by app.js / the footer script via the `hidden` attribute plus .open.
========================================================================== */
.sub-pop {
position: fixed; inset: 0; z-index: var(--z-subscribe);
display: grid; place-items: center;
background: rgba(6, 6, 8, .72);
padding: var(--s-4);
opacity: 0; transition: opacity var(--t-2) var(--ease);
}
.sub-pop.open { opacity: 1; }
.sub-pop-card {
position: relative;
width: min(420px, 100%);
background: var(--plate); border-radius: var(--r-lg);
box-shadow: var(--lift-3);
padding: var(--s-5);
}
.sub-pop-card h3 { margin: var(--s-1) 0 var(--s-2); font-size: var(--fs-xl); }
.sub-pop-card p { color: var(--text-2); font-size: var(--fs-sm); }
.sub-close {
position: absolute; top: var(--s-2); right: var(--s-2);
width: var(--tap); height: var(--tap);
display: grid; place-items: center;
background: transparent; border: 0; color: var(--text-2);
font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: var(--r-sm);
}
.sub-close:hover { color: var(--text); background: var(--plate-2); }
.sub-pop-card input[type="email"] {
width: 100%; min-height: var(--tap);
padding: 0 var(--s-3);
background: var(--void); color: var(--text);
border: 1px solid var(--hair); border-radius: var(--r-sm);
font-size: var(--fs-md); /* 16px floor — stops the iOS zoom */
}
.sub-pop-card input[type="email"]::placeholder { color: var(--text-3); }
.sub-consent {
display: flex; align-items: flex-start; gap: var(--s-2);
margin: var(--s-3) 0; font-size: var(--fs-xs); color: var(--text-2);
min-height: var(--tap);
}
.sub-consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ember-3); flex: 0 0 auto; }
.sub-pop-card .btn.primary { width: 100%; }
.sub-msg { margin: var(--s-3) 0 0; font-size: var(--fs-xs); min-height: 1.2em; }
.sub-msg.ok { color: var(--ok); }
.sub-msg.bad { color: var(--bad); }
/* Honeypot — must stay in the DOM and out of sight and out of the tab order. */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 680px) {
/* A slim bottom sheet, never a full-screen interstitial (Google demotes those). */
.sub-pop { place-items: end stretch; padding: 0; background: rgba(6, 6, 8, .55); }
.sub-pop-card {
width: 100%; border-radius: var(--r-lg) var(--r-lg) 0 0;
padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
}
}
/* ==========================================================================
8. TOAST
========================================================================== */
.toast {
position: fixed; left: 50%; bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
transform: translateX(-50%);
z-index: var(--z-toast);
background: var(--plate-2); color: var(--text);
border-radius: var(--r-sm); box-shadow: var(--lift-2);
padding: var(--s-3) var(--s-5); font-size: var(--fs-sm);
}
/* ==========================================================================
8b. ADS
Shared by 10 of the 16 page types. The reserved height is what stops the
unit collapsing the layout when it fills — CLS is scored on the worst shift,
and an ad arriving late is the classic one.
========================================================================== */
.ad-slot {
display: block;
margin: var(--s-6) auto;
padding: var(--s-3);
max-width: var(--container);
background: var(--plate);
border-radius: var(--r-md);
box-shadow: var(--lift-1);
min-height: 140px; /* reservation, not decoration */
text-align: center;
}
.ad-label {
display: block;
font: 700 var(--fs-2xs)/1 var(--f-body);
letter-spacing: .16em; text-transform: uppercase;
color: var(--text-3);
margin-bottom: var(--s-2);
}
.adsbygoogle { display: block; }
/* An unfilled unit should take no space at all rather than leave a hole. */
.ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }
/* ==========================================================================
8c. CONTENT PAGES — guides, glossary, methodology, about, 404
========================================================================== */
/* -- guides index -------------------------------------------------------- */
.guide-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .guide-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.guide-card {
display: flex; flex-direction: column;
background: var(--plate); border-radius: var(--r-md);
box-shadow: var(--lift-1);
padding: var(--s-5);
text-decoration: none; color: var(--text);
border-left: 3px solid transparent;
transition: border-color var(--t-2) var(--ease), background var(--t-2) var(--ease);
}
.guide-card h2 { font-size: var(--fs-lg); margin: 0 0 var(--s-2); }
.guide-card p { color: var(--text-2); font-size: var(--fs-sm); margin: 0 0 var(--s-4); }
.guide-card-foot {
margin-top: auto;
font: 600 var(--fs-2xs)/1 var(--f-body);
letter-spacing: .1em; text-transform: uppercase;
color: var(--ember-1);
}
@media (hover: hover) and (pointer: fine) {
.guide-card:hover { border-left-color: var(--ember-3); background: var(--plate-2); }
}
.guide-card:active { transform: translateY(1px); }
/* -- a single guide ------------------------------------------------------ */
.guide-article { max-width: var(--container); margin-inline: auto; }
.guide-body h2 { border-bottom: 1px solid var(--hair); padding-bottom: var(--s-2); }
.guide-body a { color: var(--ember-1); }
/* -- tables (methodology's eleven-check scorecard) ------------------------
The glossary used to share these rules; it is a
now, so .gloss-table
and .gloss-row td have been dropped rather than left behind as dead
selectors that look like they still style something.
methodology.php carries inline border/padding declarations that beat these
rules; what is set here is everything it does NOT specify. */
.data-table {
width: 100%; border-collapse: collapse;
font-size: var(--fs-sm);
background: var(--plate);
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--lift-1);
}
.data-table th {
font: 700 var(--fs-2xs)/1.3 var(--f-body);
letter-spacing: .12em; text-transform: uppercase;
color: var(--text-3); background: var(--plate-2);
}
.data-table td { color: var(--text-2); vertical-align: top; }
.data-table td:nth-child(2) {
font-family: var(--f-mono); font-variant-numeric: tabular-nums; color: var(--ember-1);
}
.rank-block { margin-bottom: var(--s-6); }
/* -- glossary ------------------------------------------------------------
175 terms. This was a
with a hard 220px term column, which on a
390px phone left about 130px for the definition — every definition wrapped
to six or eight lines and the page measured 37,000px. It is a definition
list, so it is a
now: two columns when there is room, stacked when
there is not, and never a horizontal scroller. */
.gl-primer {
background: var(--plate); border: 1px solid var(--hair); border-radius: var(--r-lg);
padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-5);
border-left: 3px solid var(--ember-3);
}
.gl-primer h2 { margin-top: 0; }
.gl-primer p:last-child { margin-bottom: 0; }
/* The filter and the jump-list ride along with the reader. Without this you
have to scroll several screens back up to change a search. */
.gl-tools {
position: sticky; top: 0; z-index: 5;
margin: 0 0 var(--s-5); padding: var(--s-3) 0 var(--s-2);
background: linear-gradient(var(--bg) 78%, transparent);
backdrop-filter: blur(6px);
}
.gl-search { display: block; }
.gl-search input {
width: 100%;
/* 16px is the iOS floor — anything smaller and Safari zooms the page on
focus, which on this page means landing mid-glossary at 1.4x. */
font: 500 16px/1.2 var(--f-body);
padding: .7rem .9rem; min-height: var(--tap);
color: var(--text); background: var(--plate-2);
border: 1px solid var(--hair); border-radius: var(--r-md);
}
.gl-search input::placeholder { color: var(--text-3); }
.gl-search input:focus-visible { outline: 2px solid var(--ember-3); outline-offset: 1px; }
.gl-count { margin: var(--s-2) 0 0; font: 500 var(--fs-xs)/1 var(--f-mono); color: var(--ember-2); min-height: 1em; }
/* One row that scrolls sideways, never a block that grows downward — this bar
is sticky, so every line it wraps to is a line stolen from the reader. */
.gl-nav {
display: flex; flex-wrap: nowrap; gap: .35rem; margin-top: var(--s-2);
overflow-x: auto; scrollbar-width: none;
scroll-snap-type: x proximity;
/* A fade at the trailing edge, not a negative-margin bleed. The bleed
assumed the nav's padding matched the section's; it did not, so the first
chip was cut in half. This says "there is more" without touching layout. */
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
}
.gl-nav::-webkit-scrollbar { display: none; }
.gl-nav a { flex: 0 0 auto; scroll-snap-align: start; }
.gl-nav a {
display: inline-flex; align-items: center; min-height: var(--tap);
padding: 0 .7rem; border-radius: 999px;
font: 600 var(--fs-2xs)/1 var(--f-body);
color: var(--text-2); background: var(--plate-2);
border: 1px solid var(--hair); text-decoration: none;
transition: color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.gl-nav a:hover { color: var(--text); border-color: var(--ember-3); }
}
/* The sticky bar would otherwise land ON the heading it just jumped to. */
.gl-sec { scroll-margin-top: 8.5rem; }
.gl-sec > h2 { margin-bottom: var(--s-1); }
.gl-intro { margin: 0 0 var(--s-3); color: var(--text-3); font-size: var(--fs-sm); }
.gloss { margin: 0 0 var(--s-6); }
.gloss-row {
padding: var(--s-2) 0;
border-top: 1px solid var(--hair);
}
/* No content-visibility here, deliberately. It is the right call on the combo
rows, which carry three portraits each. These rows are text: skipping their
layout saves almost nothing, while contain-intrinsic-size has to guess a
height for all 175 — and any guess is wrong at some viewport, which makes
the scrollbar jump as you scroll and the document height report false. */
.gloss-row > dt {
font: 700 var(--fs-sm)/1.3 var(--f-body); color: var(--text);
display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem;
}
.gl-kind {
font: 500 var(--fs-2xs)/1 var(--f-mono);
letter-spacing: .04em; color: var(--ember-2);
padding: .2rem .45rem; border-radius: var(--r-sm);
background: color-mix(in oklab, var(--ember-3) 12%, transparent);
white-space: nowrap;
}
.gloss-row > dd {
margin: .3rem 0 0; color: var(--text-2);
font-size: var(--fs-sm); line-height: 1.55;
}
/* Two columns only once the definition can hold a readable measure. Below
this the term sits above its definition, which is how the phone reads it. */
@media (min-width: 720px) {
.gloss-row {
display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
gap: 0 var(--s-4); align-items: start;
}
.gloss-row > dt { display: block; }
.gl-kind { display: inline-block; margin-top: .25rem; }
.gloss-row > dd { margin: 0; }
}
.gl-empty { color: var(--text-3); font-style: italic; padding: var(--s-5) 0; }
/* Tables are the one thing that must be allowed to scroll sideways rather
than force the page to. */
.data-table { display: table; }
@media (max-width: 620px) {
.rank-block, .guide-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* -- stat bar (about, hero, index, meta) --------------------------------- */
/* minmax(120px,...) forced three cards to 360px+ inside a 358px column on a
390px phone, so the third was clipped off the right edge. minmax(0,...) with
an explicit 3-up lets them shrink instead. */
/* 2-up on a phone. minmax(120px,...) forced three cards past the 358px content
column and clipped the third; three columns then left a fourth card stranded
alone on a second row. Two even rows is the only tidy answer at this width. */
.top-stat-bar {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-2); margin: var(--s-4) 0;
}
@media (min-width: 620px) { .top-stat-bar { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s-3); } }
.top-stat-bar strong { font-size: var(--fs-xl); }
@media (min-width: 620px) { .top-stat-bar strong { font-size: var(--fs-2xl); } }
.top-stat-bar > div {
background: var(--plate); border-radius: var(--r-sm);
box-shadow: var(--lift-1); padding: var(--s-3) var(--s-4);
}
.top-stat-bar strong {
display: block;
font: 700 var(--fs-2xl)/1 var(--f-mono);
font-variant-numeric: tabular-nums; letter-spacing: -.03em;
color: var(--ember-1);
}
.top-stat-bar span {
display: block; margin-top: var(--s-1);
font: 700 var(--fs-2xs)/1.2 var(--f-body);
letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
}
/* -- hero pair cards (hero, meta, 404) ----------------------------------- */
.hero-pairs { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.hero-pair {
display: flex; align-items: center; gap: var(--s-3);
background: var(--plate); border-radius: var(--r-sm);
box-shadow: var(--lift-1); padding: var(--s-2);
text-decoration: none; color: var(--text);
min-height: var(--tap);
}
/* CROP GEOMETRY - the rule these all follow.
The sources are SQUARE. object-fit:cover crops along whichever axis
overflows, so a box TALLER than wide (e.g. 44x50) makes cover scale by
height, the vertical overflow is 0px, and object-position's Y value does
nothing at all - only the sides get trimmed and the gold nameplate stays
fully visible. Every one of these boxes used to be taller than wide, which
is why hero-pair and wishlist cards still printed the hero's name twice.
A box WIDER than tall (h/w ~0.78) makes cover scale by width, so the
vertical overflow is real and object-position:50% 18% trims the plate. */
.hero-pair img {
width: 50px; height: 39px; flex: 0 0 auto;
object-fit: cover; object-position: 50% 18%;
border-radius: 26% 26% var(--r-xs) var(--r-xs);
border: 1px solid var(--hair);
}
.hero-pair h4 { margin: 0; font: 600 var(--fs-sm)/1.2 var(--f-body); }
.hero-pair small { color: var(--text-3); font-size: var(--fs-2xs); }
@media (hover: hover) and (pointer: fine) { .hero-pair:hover { background: var(--plate-2); } }
/* -- "how these scores work" --------------------------------------------- */
/* Its own line, not inline in the prose.
This was inline-flex with min-height:var(--tap). A 44px-tall inline box
sitting inside a paragraph makes the line box it lands in 44px tall, so the
note's last line was shoved down by a stray gap and the text broke mid-phrase
above it ("Where it / gives ground:"). The tap target was right; putting it
in the middle of a sentence was not. As a block it keeps the full 44px and
leaves the paragraph to set its own leading. */
.why-method {
display: flex; width: fit-content; align-items: center;
min-height: var(--tap);
margin-top: var(--s-1);
font: 600 var(--fs-xs)/1.2 var(--f-body);
color: var(--ember-1); text-decoration: none;
}
.why-method span, .why-method { border-bottom: 0; }
.why-method::after { content: ""; }
/* Inside a ranked row the summary IS the reason, clamped to one line. It sits
in the text column rather than on a row of its own. */
.cli-main .combo-why { margin-top: 3px; }
.cli-main .combo-why > summary {
cursor: pointer; list-style: none;
font: 400 var(--fs-xs)/1.4 var(--f-body); color: var(--text-3);
display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cli-main .combo-why > summary::-webkit-details-marker { display: none; }
.cli-main .combo-why[open] > summary { white-space: normal; color: var(--text-2); margin-bottom: var(--s-2); }
.cli-main .combo-why p { color: var(--text-2); font-size: var(--fs-sm); margin: 0; }
/* A note that is a single sentence has nothing to disclose, so it renders as
plain text rather than a disclosure that opens onto an empty box. Same size
and colour as a closed summary, but it wraps instead of being clipped —
there would be no way to reveal the rest of it. */
.cli-main .combo-why-flat {
display: block; margin-top: 3px;
font: 400 var(--fs-xs)/1.4 var(--f-body); color: var(--text-3);
}
/* Standalone (podium) disclosure keeps its own label and tap target. */
.podium-why { margin-top: var(--s-2); }
.combo-why > summary::marker { color: var(--ember-3); }
/* -- 404 ------------------------------------------------------------------ */
.nf-wrap { max-width: 760px; }
.nf-code {
font: 700 clamp(4rem, 18vw, 8rem)/.9 var(--f-mono);
letter-spacing: -.05em; margin: 0;
background: var(--molten); -webkit-background-clip: text; background-clip: text;
color: transparent;
}
.nf-lede { margin-bottom: var(--s-5); }
.nf-path {
font-family: var(--f-mono); font-size: .9em;
background: var(--plate-2); color: var(--ember-1);
padding: 2px 6px; border-radius: var(--r-xs);
}
.nf-guess { margin: var(--s-5) 0; }
.nf-search {
display: flex; gap: var(--s-2); align-items: center;
background: var(--plate); border: 1px solid var(--hair);
border-radius: var(--r-sm); padding: var(--s-2); margin: var(--s-5) 0;
}
.nf-search input {
flex: 1; border: 0; background: transparent; color: var(--text);
font-size: var(--fs-md); min-height: var(--tap); outline: none; padding: 0 var(--s-2);
}
.nf-links { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.nf-link {
display: inline-flex; align-items: center; min-height: var(--tap);
padding: 0 var(--s-4);
background: var(--plate); border: 1px solid var(--hair); border-radius: var(--r-sm);
color: var(--text-2); text-decoration: none; font: 600 var(--fs-sm)/1 var(--f-body);
}
@media (hover: hover) and (pointer: fine) { .nf-link:hover { color: var(--text); background: var(--plate-2); } }
/* ==========================================================================
8d. THE RANKED LIST
roc_combo_li() in app/view.php emits this markup on FIVE page types —
/cavalry-combos and siblings, hero pages, /meta and /search. One component,
five surfaces: it is the highest-leverage thing in the sheet.
The rank numeral is the most important glyph on the row, so it is mono with
tabular figures. In the old sheet it was set in Cinzel, which has no tabular
figures — "7" and "188" were different widths and a column never aligned.
========================================================================== */
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-list > li {
/* rank | faces | text | controls, with "why" spanning underneath. */
display: grid;
grid-template-columns: auto auto minmax(0, 1fr) auto;
grid-template-areas: "rk faces main side" "why why why why";
align-items: center;
gap: var(--s-2) var(--s-3);
padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
background: var(--plate);
border-bottom: 1px solid var(--hair-soft);
position: relative;
/* A cavalry page carries 221 of these. content-visibility lets the browser
skip layout and paint for the ones off screen while they stay in the DOM
and the accessibility tree — so crawlers and Ctrl-F still see everything,
but the browser stops doing 221 rows of work up front. contain-intrinsic-
size keeps the scrollbar honest by reserving each row's height. */
content-visibility: auto;
contain-intrinsic-size: auto 128px;
}
.rank-list > li:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
.rank-list > li:last-child { border-radius: 0 0 var(--r-md) var(--r-md); border-bottom: 0; }
/* The heat rail. Ranks 1-3 run hot, the rest cool — the ordinal cue you can
read peripherally, without stopping to parse a number. */
.rank-list > li::before {
content: ""; position: absolute; left: 0; top: var(--s-3); bottom: var(--s-3);
width: 3px; border-radius: 0 2px 2px 0; background: var(--heat-cold);
}
.rank-list > li:nth-child(-n+3)::before { background: var(--heat-hot); }
.rank-list > li:nth-child(n+4):nth-child(-n+12)::before { background: var(--heat-mid); }
.rk {
flex: 0 0 auto; min-width: 2.6ch; text-align: right;
font: 700 var(--fs-lg)/1.35 var(--f-mono);
font-variant-numeric: tabular-nums; letter-spacing: -.03em;
color: var(--text-3);
}
.rank-list > li:nth-child(-n+3) .rk { color: var(--ember-1); }
.rank-list > li > .rk { grid-area: rk; }
.rank-list > li > .faces { grid-area: faces; }
.rank-list > li > .cli-main { grid-area: main; min-width: 0; }
.rank-list > li > .cli-side { grid-area: side; display: flex; align-items: center; gap: var(--s-2); }
.rank-list > li > .combo-why { grid-area: why; }
.cli-side .tier-chip { font-style: normal; white-space: nowrap; }
@media (max-width: 560px) { .cli-side .tier-chip { display: none; } }
/* -- score badge ----------------------------------------------------------
The figure the note already states, pulled out where it can be scanned.
Tabular numerals so a column of them lines up, and the same three heat
bands as the tier rail so the colour means one consistent thing. */
.score {
display: inline-flex; align-items: baseline; gap: 1px;
padding: 5px 7px; border-radius: var(--r-sm);
background: var(--plate-2); border: 1px solid var(--hair);
font-family: var(--f-mono); font-variant-numeric: tabular-nums;
line-height: 1; white-space: nowrap;
}
.score b { font: 700 var(--fs-sm)/1 var(--f-mono); }
.score small { font-size: 9px; color: var(--text-3); }
.score.s-hi b { color: var(--ember-1); }
.score.s-hi { border-color: color-mix(in oklab, var(--ember-1) 40%, transparent); }
.score.s-mid b { color: var(--ember-2); }
.score.s-lo b { color: var(--text-2); }
.combo-names { display: block; font: 600 var(--fs-md)/1.35 var(--f-body); color: var(--text); }
.combo-names a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
@media (hover: hover) and (pointer: fine) { .combo-names a:hover { color: var(--ember-1); border-bottom-color: var(--ember-line); } }
/* Portrait thumbs inside a row. object-position crops the baked-in gold
nameplate off the bottom of every portrait, so the row does not print the
hero's name twice. */
.faces { display: flex; gap: var(--s-1); margin-top: var(--s-2); }
.face { position: relative; display: block; line-height: 0; }
.faces img {
width: 40px; height: 31px; object-fit: cover; object-position: 50% 18%;
border-radius: 24% 24% var(--r-xs) var(--r-xs);
border: 1px solid var(--hair); background: var(--void);
}
/* Front / Middle / Back, on the portrait rather than on a line of its own.
This replaced a whole text row that re-listed all three hero names to
deliver three letters. Overlaid, it costs zero vertical space — which
matters when the page carries 221 of these. */
.slot {
position: absolute; left: 2px; bottom: 2px;
font: 700 9px/1 var(--f-mono); font-style: normal; letter-spacing: .03em;
color: var(--text); background: rgba(10, 10, 12, .78);
padding: 2px 3px; border-radius: var(--r-xs);
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.share-btn {
flex: 0 0 auto; min-height: var(--tap); min-width: var(--tap);
display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
padding: 0 var(--s-3);
background: transparent; color: var(--text-3);
border: 1px solid var(--hair); border-radius: var(--r-sm);
font: 600 var(--fs-xs)/1 var(--f-body); cursor: pointer;
}
.share-btn.copied { color: var(--ok); border-color: var(--ok); }
@media (hover: hover) and (pointer: fine) { .share-btn:hover { color: var(--text); background: var(--plate-2); } }
/* On a phone the row was ~200px tall: the names wrapped to three lines because
the faces and share button took ~120px of a 358px column, and the position
line wrapped under them. Shrinking the faces and clamping the position line
to one line roughly halves the row height, which matters on a page that
carries 221 of them. */
@media (max-width: 560px) {
/* Faces move UNDER the text on a phone. Three 40px portraits, the rank and
the share button together took ~190px of a 358px row, so the names wrapped
to two lines and the reason line was clipped to about thirty characters.
Dropping the faces to their own row gives the text the full width: the
names fit on one line and the reason is actually readable. */
.rank-list > li {
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "rk main side" "rk faces faces";
align-items: start;
padding: var(--s-3) var(--s-2) var(--s-3) var(--s-3);
gap: var(--s-2);
}
.faces img { width: 34px; height: 27px; }
.slot { font-size: 8px; padding: 1px 3px; }
.combo-names { font-size: var(--fs-sm); }
}
/* Tier separator — the one place the heat ramp is spelled out in words. */
.tier-break {
display: block !important;
background: var(--void) !important;
border: 0 !important;
padding: var(--s-6) 0 var(--s-2) !important;
}
.tier-break::before { display: none; }
.tier-break h3 {
margin: 0; font-size: var(--fs-lg);
display: flex; align-items: center; gap: var(--s-3);
}
.tier-break h3::before {
content: ""; width: 3px; height: 1.1em; border-radius: 1px;
background: var(--heat-mid); flex: 0 0 auto;
}
.tier-break p { margin: var(--s-2) 0 0; color: var(--text-3); font-size: var(--fs-sm); }
/* -- filter bar ---------------------------------------------------------- */
.combo-filter-bar {
display: flex; align-items: center; gap: var(--s-3);
margin: var(--s-4) 0 var(--s-3);
}
.combo-filter-bar input {
flex: 1; min-height: var(--tap); padding: 0 var(--s-4);
background: var(--plate); color: var(--text);
border: 1px solid var(--hair); border-radius: var(--r-sm);
font-size: var(--fs-md); /* 16px floor — stops iOS zooming on focus */
}
.combo-filter-bar input::placeholder { color: var(--text-3); }
.filter-count {
font: 500 var(--fs-xs)/1 var(--f-mono); color: var(--text-3);
white-space: nowrap;
}
/* -- podium (top 3 on a category page) ----------------------------------- */
.podium { display: grid; gap: var(--s-4); grid-template-columns: 1fr; margin: var(--s-4) 0 var(--s-6); }
/* auto-fit, not a hard flip at 760px. The old rule took the podium portraits
from 219px to 57px across a single pixel of viewport width — the worst image
jump on the site. auto-fit keeps every card above a usable width instead. */
@media (min-width: 640px) { .podium { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } }
/* Each card sizes to its OWN content.
A grid's default align-items is stretch, so all three cards were forced to
the height of the tallest. Opening one card's "Why this lineup works" grew
that card and the grid stretched the other two to match — which read exactly
like all three had opened, with two of them showing nothing. They had not
opened; they had been inflated. */
.podium { align-items: start; }
/* The rank badge and the score share a line above the portraits. */
.medal-row {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-2); margin-bottom: var(--s-3);
}
.medal-row .medal { margin-bottom: 0; }
.podium > article {
background: var(--plate); border-radius: var(--r-md);
box-shadow: var(--lift-2); padding: var(--s-4);
position: relative; overflow: hidden;
}
.podium > article::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--heat-hot);
}
.podium > article:nth-child(2)::before { background: var(--heat-mid); }
.podium > article:nth-child(3)::before { background: var(--heat-cold); }
.medal {
display: inline-block; margin-bottom: var(--s-3);
font: 700 var(--fs-2xs)/1 var(--f-body);
letter-spacing: .1em; text-transform: uppercase;
padding: 6px 9px; border-radius: var(--r-xs);
background: var(--molten); color: var(--ember-ink);
clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}
.podium > article:nth-child(2) .medal { background: var(--heat-mid); }
.podium > article:nth-child(3) .medal { background: var(--plate-3); color: var(--heat-cold-text); }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.trio a {
display: block; position: relative; overflow: hidden; aspect-ratio: 1;
border-radius: 34% 34% var(--r-sm) var(--r-sm);
border: 1px solid var(--hair); background: var(--void);
}
.trio img {
position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 126%; max-width: none; height: auto; display: block;
}
.podium h3 { font-size: var(--fs-md); margin: var(--s-3) 0 var(--s-2); text-align: center; }
.podium-why { margin-top: var(--s-2); }
.podium-why > summary {
cursor: pointer; min-height: var(--tap); display: flex; align-items: center;
font: 600 var(--fs-xs)/1 var(--f-body); color: var(--text-2);
}
.podium-why > summary::marker { color: var(--ember-3); }
.podium-why p { font-size: var(--fs-sm); color: var(--text-2); }
/* -- sibling-category nav ------------------------------------------------ */
.rank-cat-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0; }
.rank-cat-nav a {
display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-4);
background: var(--plate); border: 1px solid var(--hair); border-radius: var(--r-sm);
color: var(--text-2); text-decoration: none; font: 600 var(--fs-sm)/1 var(--f-body);
}
.rank-cat-nav a[aria-current="page"] { background: var(--molten); border-color: transparent; color: var(--ember-ink); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .rank-cat-nav a:hover { color: var(--text); background: var(--plate-2); } }
/* -- page-level action row ----------------------------------------------- */
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0; }
/* -- load more -----------------------------------------------------------
Emitted by combos.php's inline script AND by app.js, so it appears in no
template grep. */
.load-more-wrap { display: flex; justify-content: center; margin: var(--s-5) 0; }
.load-more-wrap button { min-width: 220px; }
/* ==========================================================================
8e. TROOP TYPE — pigment, never rank
These bare class names (.cavalry, .archer, .footmen, .mixed) are applied as
modifiers by heroes.php and hero.php. Lightness is separated as well as hue,
so the four survive colour-blindness without relying on hue alone.
========================================================================== */
.type-dot {
width: 9px; height: 9px; border-radius: 50%;
display: inline-block; flex: 0 0 auto;
background: var(--text-3);
}
.type-dot.cavalry { background: var(--cav); }
.type-dot.archer { background: var(--arc); }
.type-dot.footmen { background: var(--foo); }
.type-dot.mixed { background: var(--mix); }
/* ==========================================================================
8f. HERO DIRECTORY (/heroes, /search)
========================================================================== */
.hx-toolbar {
display: flex; flex-wrap: wrap; gap: var(--s-3);
margin: var(--s-4) 0 var(--s-3);
}
.hx-search {
flex: 1 1 260px; display: flex; align-items: center; gap: var(--s-2);
background: var(--plate); border: 1px solid var(--hair); border-radius: var(--r-sm);
padding: 0 var(--s-3); min-height: var(--tap);
}
.hx-search-ic { color: var(--text-3); }
.hx-search input {
flex: 1; border: 0; background: transparent; color: var(--text);
font-size: var(--fs-md); /* 16px floor: below this iOS zooms the page */
min-height: var(--tap); outline: none;
}
.hx-search input::placeholder { color: var(--text-3); }
.hx-sort select {
min-height: var(--tap); padding: 0 var(--s-3);
background: var(--plate); color: var(--text);
border: 1px solid var(--hair); border-radius: var(--r-sm);
font-size: var(--fs-md); /* same floor — a