/* ---------- Billboard Mode ---------- The era of squares, the furniture around it, the year picker, the hint panel, and nothing else. LOADED AFTER qbmode.css, which is the cascade and is deliberate: this screen IS a GeoGauntlet board — .gg-wrap, .gg-bar, .gg-main, .gg-form, .gg-input, .gg-sugg, .gg-go — and what follows either adds furniture no other mode has (five years of chart weeks, one row a year) or overrides one rule of it. THE FURNITURE IS THE HOMEPAGE TILE AND THE SQUARES ARE NOT. A visitor presses a slab — .mode-card in theme.css:754, a solid fill on a hard drop lip of the same hue at two thirds the lightness, 18px corners, the display face for the name, the mono pill for the action — to get here, so every piece of chrome around the board is made of that: the era head is the Billboard tile with the era on it, the five year labels are five small indigo tabs, each found song is a chip on a lip in its own colour, Guess is the gold slab, and Take a hint and Give up are the tile's flat pill. The 261 squares take none of it, because a square is data and a slab is chrome: a player should RECOGNISE the controls and READ the board, and a lip under a twelve-pixel square would make it a button. The one rule on a square that is not the shipped grid is an opacity transition, for the solo. WHAT LIFTS AND WHAT DOES NOT. A lip on the homepage is a promise that the thing lifts under the cursor and sinks under the finger. Only the things a hand actually goes to keep it — Guess, and the found chips, which solo their weeks. The head and the year tabs stand on a lip because they are the same material as the tiles, and they do not lift, because a lift on a thing that does nothing when pressed is a lie about what it is. NOTHING HERE HARD-CODES A COLOUR, with THREE deliberate exceptions: the squares are painted from an inline hsl() computed per song in billboard.js, and the found chip's lip is the same hsl() at 0.62 of the lightness (bbLip), because thirty-six distinct colours cannot be written down as tokens; the end card's Play again is `#000` on the lime, because --on-accent is white on both pages and the accent is not (the paragraph on .bb-nav says why); and the bar's shadow is an rgba() black, because a shadow is a darkening and not a colour. Everything else is a token out of theme.css, so light mode is free, and the only html[data-theme] selectors in this file are the two on that end-card label — the desktop button and its phone link form. The empty square is a token for exactly that reason — it is the one square colour the theme owns. THE MOULDED TOP EDGE IS NOT HERE. theme.css:1022 gives every tile a one- pixel white inset, in both themes — a bare .mode-card rule, not a html[data-theme] one. It is a white literal, and this sheet carries none; there is no token for "a white wash that does not flip", so the slabs here are cast rather than moulded. It is the one property of the tile this sheet does not restate, and it is missing on purpose rather than by oversight. NO CLASS HERE MAY BE A PREFIX OF ANOTHER — the rule nflmode.css records, and it is enforced by tests/test_a11y.py with a \b word-boundary match that a hyphen does not stop. `bb-pick` and `bb-py`/`bb-pm`/`bb-pw` are named apart for that reason rather than bb-pick-year and friends; the chip's glyph is .bb-band and not .bb-band-glyph, and the solo is a bare .solo like .on and .miss rather than a bb-wk-solo. */ .bb-wrap{max-width:900px} /* ROOM FOR THE BAR. It is fixed, so it is out of flow and would otherwise sit on top of the last year and the song chips. */ .bb-wrap{padding-bottom:132px} @media(max-width:700px){ .bb-wrap{padding-bottom:150px} } /* ---- the bar: the tag and the way out ------------------------------------ */ /* THE BRAND TAG TAKES THE MODE'S COLOUR, the way .ent-hall .gg-bar .tag does in theme.css:1407. It is the first indigo on the screen and it says which tile you came through before the head says it again. Scoped to .bb-wrap — the board — so the picker keeps the kit's plain tag. */ .bb-wrap .gg-bar .tag{background:var(--m-billboard);color:var(--on-accent)} /* THE BACK LINK IS A BUTTON, because everything pressable is, and an with no href is not in the tab order. base.css's generic button rule hands it a face, a border and a hover in a literal blue; every one of those is taken back here, at 0-3-0 so the (0,1,1) button:hover cannot win it back under the cursor. What is left is .gg-back as it has always looked. */ .bb-wrap .gg-back{background:none;border:0;padding:0;font-family:inherit; font-size:13px;font-weight:700;color:var(--gold);transition:none} .bb-wrap .gg-back:hover,.bb-wrap .gg-back:active{background:none;transform:none; text-decoration:underline} /* ---- the picker ---------------------------------------------------------- */ .bb-picks{display:grid;gap:9px;margin-top:12px; grid-template-columns:repeat(auto-fill,minmax(168px,1fr))} .bb-pick{display:flex;flex-direction:column;gap:2px;text-align:left; padding:11px 13px;border-radius:var(--radius);cursor:pointer; background:var(--sheet);border:1px solid var(--border);color:var(--text)} .bb-pick:hover{background:var(--sheet-2);border-color:var(--gold)} /* THE YEAR IS THE NAME OF THE BOARD, so it is set like one — the same weight and face .qb-pn gives a quarterback. Tabular figures because a grid of fifty-six four-digit numbers with proportional ones does not line up. */ .bb-py{font:900 20px/1.1 var(--display);letter-spacing:-.02em; font-variant-numeric:tabular-nums} .bb-pm{font-size:12.5px;color:var(--text-soft)} .bb-pm b{color:var(--gold)} .bb-pw{font:700 10px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase; color:var(--text-soft);opacity:.75} /* ---- the head: one tile -------------------------------------------------- */ /* THE HEAD IS .mode-card.billboard, restated. Same fill, same lip at 7px, same 18px corners, same 26/24/24 padding, same display face at 24px for the name — every property theme.css:754 gives the tile, because this is the one element on the screen that IS tile-sized and the one place the language can be used whole rather than scaled. Everything on it is --on-accent, which is the tile's own rule. IT DOES NOT LIFT. No :hover, no :active, no transition. The tile on the homepage lifts because pressing it goes somewhere; this one is the name of where you already are. */ .bb-head{display:flex;justify-content:space-between;align-items:flex-start; flex-wrap:wrap;gap:11px 14px;margin-top:6px; background:var(--m-billboard);box-shadow:0 7px 0 var(--m-billboard-sh); border:0;border-radius:18px;padding:26px 24px 24px; color:var(--on-accent);font-family:var(--font)} /* THE NAME BLOCK GIVES WAY BEFORE THE SCORE DOES. .bb-head wraps, and a flex item's wrap size is its max-content: at 375px the era line is 215px of text, the score 95px, the gap 12px, and the row 295px — so the score fell under the name and the head grew 25px for it. Measured on the page, not predicted. A shrinkable basis lets the era line wrap inside its own block and keeps the score on the right, which is where the tile keeps its number at every width. No effect above 700px, where the row is never short. */ .bb-who{flex:1 1 160px;min-width:0} /* .mode-name's own four properties. 24px and not the 40px clamp the head used to carry, because the tile's name is 24px and the head is being asked to be the tile; on a 900px slab the era reads as a label on a banner, which is what it is — the number on the right is the thing that moves. */ .bb-name{font:900 24px/1.05 var(--display);letter-spacing:-.015em;margin:0; color:var(--on-accent);font-variant-numeric:tabular-nums} /* .mode-desc, by token: 13px, 1.5, weight 500, and the 88% the tile paints its description at — done with opacity on --on-accent rather than the white literal theme.css uses, which is the only way to say "88% of the label colour" without writing a colour down. */ .bb-line{font-size:13px;line-height:1.5;font-weight:500;margin-top:4px; color:var(--on-accent);opacity:.88} .bb-score{text-align:right} /* THE SCORE IS WHITE HERE, NOT GOLD, and that is measured rather than taste. On the page --gold is the accent; on the indigo tile it is 5.57:1 in dark mode and 1.36:1 in light, where the accent is an olive on an indigo of nearly the same lightness. --on-accent is 8.12:1 on both. The tile's own rule is that everything on it is --on-accent, and the score is not an exception. */ .bb-pts{font:900 30px/1 var(--display);color:var(--on-accent); font-variant-numeric:tabular-nums} /* .mode-no's 65%, the way the tile sets its small mono caption. */ .bb-of{font:700 9.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase; color:var(--on-accent);opacity:.65} /* THE BAR IS CUT INTO THE TILE. It is the score made visible, so it is the same ratio and not a second idea of progress: width is weeks found ÷ weeks in the era, which is score ÷ 1000. Its track is the tile's own lip colour — the shade the slab stands on, used as the groove the bar runs in — and the fill is --on-accent, for the reason the score is: --gold on this fill is invisible in light mode. flex-basis 100% puts the bar and the count on their own rows under the name and the score; that is the whole reason bbRender emits them INSIDE .bb-head rather than after it. */ .bb-prog{flex:1 1 100%;height:6px;border-radius:999px;overflow:hidden; margin:4px 0 0;background:var(--m-billboard-sh)} .bb-prog span{display:block;height:100%;background:var(--on-accent); transition:width .45s ease} .bb-count{flex:1 1 100%;font-size:13px;line-height:1.5;font-weight:500; color:var(--on-accent);opacity:.88;margin-top:-4px} .bb-count b{color:var(--on-accent)} /* ---- the ask ------------------------------------------------------------- */ .bb-ask{margin:14px 0 4px} /* ---- the board ----------------------------------------------------------- */ /* ONE ROW PER YEAR, not a grid of months. A single year of 52 squares was readable as twelve month blocks; an era is five years and 261 squares, and sixty month blocks is a wall rather than a board. FIVE ROWS OF FIFTY-TWO IS QB MODE'S SEASON SPLIT, and it is the shape that makes a five-year block legible: the year label is the handle a player reaches for ("the summer of '87"), the row length says how long the year was, and the whole board still lands in about 150px so a round is played without scrolling. FIVE SMALL TILES DOWN THE LEFT. The year label is the tile again: same fill, same lip, the same relationship at a smaller size — 4px of lip under a 39px tab is the 7px under a 250px card, scaled the way a chip's 4px lip is scaled in footmode.css. 10px corners and not 18, which is the tile's PILL radius — at 52px wide an 18px corner is a lozenge, and the pill is the tile's own rule for what a small thing in this language is shaped like. THE ROW CENTRES ON THE TAB. A tab is 39px tall and a square is about 12px, so the squares sit on the tab's midline rather than on its top edge; the board is five strips beside five tabs, and the strips line up column for column, because .bb-wks is untouched. */ .bb-grid{margin-top:22px;display:flex;flex-direction:column;gap:10px} .bb-yr{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center} .bb-yl{background:var(--m-billboard);box-shadow:0 4px 0 var(--m-billboard-sh); border-radius:10px;padding:6px 0 5px;text-align:center; color:var(--on-accent);font:900 13px/1.1 var(--display);letter-spacing:-.015em; font-variant-numeric:tabular-nums} /* The year's chart total, as the tile sets its mono caption: small, tracked, at .mode-no's 65%. It is context for the row, not a second label, which is why it is the quiet line. */ .bb-yl span{display:block;margin-top:2px;font:700 9px/1.3 var(--mono); letter-spacing:.14em;opacity:.65} /* THE SQUARES. FIFTY-THREE FIXED COLUMNS, and `auto-fill` is what this replaced — for a reason worth writing down, because auto-fill is the obvious choice and it is wrong here. A year row is 52 or 53 squares and it has to be ONE LINE. auto-fill fits as many ≥13px columns as the width allows and wraps the rest, and 900px of wrap holds about 48 — so every row spilled three or four squares onto a second line, each year wrapped at a different point, and the five rows stopped lining up into the columns that make a five-year block readable at all. A fixed count cannot wrap. FIFTY-THREE AND NOT FIFTY-TWO, because the long years exist: a 53-week year in a 52-column grid is the same wrap by another name. The ten 52-week years leave one empty cell at the end of the row, which is the honest shape — the year WAS a week shorter. */ .bb-wks{display:grid;gap:3px;grid-template-columns:repeat(53,1fr); max-width:100%} /* A WEEK STARTS IN ITS SONG'S COLOUR — painted inline from bbColour(w.s) — so the border here is what separates two runs that happen to land near each other on the wheel. The bare rule is the fallback for a week with no song, which no shipped board has. THE TRANSITION IS THE ONE THING ON A SQUARE THAT IS NOT THE GRID, and it is not a colour, a size or a shape: it is the fade the solo below rides on. */ .bb-wk{display:block;aspect-ratio:1;border-radius:2px; background:var(--sheet-2);border:1px solid var(--border);transition:opacity .15s} /* AND IT INKS IN WHEN THE SONG IS NAMED. This is the mode's progress bar: the colours are the work left and the ink is the work done, so a board being solved goes dark rather than lighting up. `--text` AND NOT `#000`, and the difference is the whole reason this rule exists in the stylesheet rather than as an inline style on the square. The token is #0D1A1E on the light sheet — black, as asked — and #fff on the dark one, where a literal black square would be invisible against a page that is already rgb(20,18,31). "Ink" is the idea; which end of the scale it sits at belongs to the theme. NO BORDER, so a run of inked squares reads as one solid bar rather than as a row of separate tiles — which is what makes "I have got this whole stretch" legible from across the board. */ .bb-wk.on{background:var(--text);border-color:transparent} /* THE SOLO. Press a found chip and every square that is not that song's drops to 35% — the inked runs of the other named songs and the coloured runs of the unnamed ones alike — so the one run you pressed is the only thing on the board at full strength. That is how a chip whose colour inked out the moment it was named still points at its weeks. bbSolo() in billboard.js puts .solo on the grid and on that song's squares, and nothing else. 35% AND NOT LOWER, because an unnamed square must stay a colour and not a grey. At .35 over the dark page a 58%-lightness square lands near 30% and still carries its hue; over the light page it lands as a pastel of the same hue. Either way two adjacent runs are still two colours, so the board can still be counted while the solo is on. Below about .25 the dark page swallows the hue and the runs read as one band, which is the one thing this mode's colours exist to prevent. THE INKED SQUARE HAS NOWHERE TO GO BUT GREY, and that is fine: it is already solved, and the dim says "not this one" about it exactly as it should. */ .bb-grid.solo .bb-wk{opacity:.35} .bb-grid.solo .bb-wk.solo{opacity:1} /* ---- the hint ------------------------------------------------------------ */ /* SET APART FROM THE BOARD AND FROM THE CHIPS, because it is neither: it is a thing that was paid for. A slab in --panel on the GOLD lip — the one lip on the screen that is not its own face's shade, because the panel is not a button. It is a receipt, a thing that was paid for with the leaderboard, and it stands on the currency it was paid in. The accent left border the panel used to carry is gone; the lip is the accent now. WHAT THE SLAB COSTS ON A DESKTOP, measured rather than hoped, and then paid for out of the panel rather than out of the round. At 1280×900 on the 2011–2015 round with five songs named and the hint just taken, the first cut of this slab — 18px above, 14px of padding, the list capped at 132px — was 182px tall and put .bb-found at 762.8–832.8 against a bar top of 773: all five found chips, the solo controls, under the bar until a 128px scroll, in the state a player is in the moment they have paid for the hint. Before the deck the same chips ended at 759. That is a scroll mid-round, which this mode's layout exists to avoid, so the panel gives the pixels back: 14px above, 12px of padding, the list capped at 72px — two rows of artists and the top of a third, which is what says "there is more" without a scrollbar being the first thing seen. Measured again on the same round: the panel is 118px, 554.8 to 672.8, the chips sit at 694.8–764.8, and the bar begins at 773 — 8px clear. The board itself ends at 540.8 either way. A reload draws the taken hint as its label alone and the chips are higher still. */ .bb-hint{margin:14px 0 4px;padding:12px 16px;border-radius:14px; background:var(--panel);box-shadow:0 5px 0 var(--gold-sh)} .bb-hl{font:700 10px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase; color:var(--text-soft);margin-bottom:7px} /* THE PRICE, SAID BESIDE THE THING IT BOUGHT. Not red — nothing has gone wrong — but not the same weight as the label either, so a reader takes it as a note rather than as half the heading. */ .bb-hu{opacity:.72;letter-spacing:.06em} /* CAPPED AND SCROLLED, and the cap is what a five-year board cost this panel. On a single year the hint was nineteen artists and sat under the board without moving it. On 1986-1990 it is NINETY, 488px of chips that pushed the page to 1327 and made a round scroll — which is the one thing this mode's layout is built to avoid. The panel scrolls inside itself instead, so the board above it never moves. THIS IS A CONTAINMENT, NOT A FIX. Ninety artists is most of the answer however it is presented; see the note in app/services/billboard.py hint_rows on what the hint is for. If the era board stays, the hint wants rethinking rather than a scrollbar. */ .bb-hr{display:flex;flex-wrap:wrap;gap:6px;max-height:72px;overflow-y:auto} .bb-hchip{display:inline-flex;align-items:center;gap:6px;min-height:26px; padding:3px 10px;border-radius:999px;background:var(--sheet-2); border:1px solid var(--border);font-size:12.5px;color:var(--text)} .bb-hchip b{color:var(--gold);font-variant-numeric:tabular-nums} /* ---- what has been named ------------------------------------------------- */ /* THE QUIET PILL IS THE BASE, and two things wear it: the miss under the board and the missed songs on the end card. A miss is struck through rather than red: it is a song that was not number one in the block, which is not an error — it is the game. The same treatment GeoGauntlet gives a country that was not in the round. It is not a control: it owns no weeks to solo, so it has no lip and no lift, and it is a . */ .bb-found{display:flex;flex-wrap:wrap;gap:10px 8px;margin-top:22px} .bb-chip{display:inline-flex;align-items:center;gap:6px;min-height:26px; padding:3px 9px;border-radius:999px;background:var(--sheet); border:1px solid var(--border);font-size:12.5px;color:var(--text)} /* The swatch on an end-card miss is the song's colour, for the reason bbOver gives: a missed song never inked in, so the chip and its run match. */ .bb-chip i{width:10px;height:10px;border-radius:2px;flex:none} .bb-chip b{color:var(--gold);font-variant-numeric:tabular-nums} .bb-chip.miss{color:var(--text-soft);text-decoration:line-through;opacity:.7} /* EACH FOUND SONG IS A SLAB ON A LIP IN ITS OWN COLOUR. The face is --panel and the lip is bbLip() — the song's hue and saturation at 0.62 of its lightness, the exact relationship every .mode-card has with its -sh — which is the treatment footmode.css:428 ships for a scorer. `:not(.miss)`, so the miss never receives a lip it would have to give back. THE FACE IS NOT THE SONG'S COLOUR, AND THAT WAS MEASURED, NOT PREFERRED. bbColour() sits at 50–66% lightness so it carries its hue on both pages; a title on top of that has nowhere to go. White fails 4.5:1 on 47 of the 53 faces in 2011–2015 (1.39:1 at the worst), and the darkest ink the theme has fails on 8 of them — and it flips to near-white in light mode anyway, so it would fail on all 53 there. The tile puts white on an indigo at about 30% lightness; the songs are twice as light and the tile's rule does not survive the move. So the colour goes UNDER the chip, where the tile keeps its own darker shade, and the chip's identity is its lip. IT IS A BUTTON, because pressing it does something (the solo), and the a11y suite requires anything the JS binds a click to be a real