/** * /hall-of-fame/{season}/gw{n} - one week, public. * * Standalone rather than an add-on to hall-of-fame.css: this page is landed on cold from a * link in a message, often on mobile data, and the archive stylesheet is ~700 lines of podium, * chart and board that none of it uses. * * The token block below is copied from .hof in hall-of-fame.css on purpose. The two pages are * meant to look like the same trophy cabinet, so if a colour changes there it should change * here - but the alternative was shipping the whole archive stylesheet to make one card match. * * Everything the page says lives on the card. The body gradient behind it (main.css) runs from * #CBDE85 down, and every ink here is built for a dark panel: on that lime the eyebrow measured * 1.1:1 and the heading 1.4:1, so the whole header was invisible. Nothing floats on the * gradient any more, and nothing new should - put it on a surface or give it its own panel. */ .hofw { --hofw-ink: var(--grey100); /* #F8F8F7 */ --hofw-ink-2: var(--grey300); /* #CBCAC2 */ --hofw-ink-3: var(--grey400); /* #B1B0A9 - 4.8:1 on --hofw-panel */ --hofw-hero: #2F2B25; /* the card itself */ --hofw-panel: #443F37; /* blocks inset on the card */ --hofw-panel-2: #38342D; --hofw-gold: var(--yellow500); /* Right result, wrong score. green300, the same step the archive chart uses for a record bar - 7.2:1 on --hofw-panel, and not the gold that already means "exact" here. */ --hofw-correct: #CCDF86; max-width: 560px; margin: 0 auto; padding: 40px 16px 64px; font-family: "Montserrat", sans-serif; color: var(--hofw-ink); } /* Kills the browser's default margins without winning against the rules below. Written plain, `.hofw p` is specificity (0,1,1) and beats every (0,1,0) class in this file, so every margin set on a paragraph here was silently dropped - the stamp sat on the claim, the score on the name, and the boldest-call line on the last row it was meant to stand clear of. :where() contributes no specificity, so this lands at (0,1,0) and loses to anything later. */ .hofw :where(h1, h2, p) { margin: 0; } /* main.css reserves a 48px top margin on every page for the fixed title bar. This page has no title bar - it is landed on cold from a shared link - so that would be a gap above the card with nothing in it. */ .hofw_body { margin-top: 0; } .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; } /* ------------------------------------------------------------------ card --- */ /* Every card is the dark surface, not just records: that is what makes the header inside it readable (ink 13.2:1, ink-2 8.6:1, ink-3 6.5:1, gold 9.4:1). A record is told apart by the gold rule and the ribbon, which say so in words, rather than by being the only dark one. Capped below the 560px the page allows so it stays a comfortable portrait crop - this is the thing people screenshot. */ .hofw_card { position: relative; /* the date sits in the corner of it */ max-width: 520px; margin: 0 auto; background: var(--hofw-hero); border: 1px solid rgba(249, 208, 6, 0.18); border-radius: 20px; /* Tight at the top: the medal is the first thing and should sit near the edge rather than float in a band of its own. The bottom carries the footer's breathing room instead. */ padding: 18px 20px 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); } /* Centred straight above the heading, close enough to belong to it: the top of the card then reads down in one line - the season, the week, who won it, what they scored. */ .hofw_season { margin-bottom: 2px; font-size: 12px; font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; color: var(--hofw-ink-2); } /* Dates the achievement, not the visit. Out of the flow in the card's corner, so it stamps the whole card rather than joining the heading stack - and so the head below stays centred on the card rather than on what is left of it. */ .hofw_date { position: absolute; top: 14px; right: 18px; font-size: 11px; letter-spacing: 0.3px; color: var(--hofw-ink-3); white-space: nowrap; } .hofw_card.is_record { border-top: 4px solid var(--hofw-gold); } /* A shared week is a stack: the summary of it, then one full card per winner, each with its own share button between it and the next. The button row already carries the gap above it, so only the space under it needs adding. */ .hofw_share_row + .hofw_card { margin-top: 26px; } /* The summary is the week, not a winner - no medal-to-footer stack to make room for, and no button under it, so it does not need the deep bottom padding the real cards do. */ .hofw_summary { padding-bottom: 18px; } /* ------------------------------------------------------------------ head --- */ /** * main.css styles bare
and