/* Z1B: local variable fonts; ranges and metrics recorded in fonts/MANIFEST.json and QA Z1B. Width calibration uses the two rendered Home headline lines, not guessed percentages. */ @font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/inter-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:'Playfair Display'; font-style:normal; font-weight:600 800; font-display:swap; src:url('fonts/playfair-display-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:'Playfair Display Fallback'; src:local('Georgia'); font-style:normal; font-weight:400 500; size-adjust:88.788681%; ascent-override:121.862381%; descent-override:28.269369%; line-gap-override:0.000000%; unicode-range:U+0000-002F, U+0031-10FFFF; } @font-face { font-family:'Playfair Display Fallback'; src:local('Georgia Bold'); font-style:normal; font-weight:600 900; size-adjust:88.788681%; ascent-override:121.862381%; descent-override:28.269369%; line-gap-override:0.000000%; unicode-range:U+0000-002F, U+0031-10FFFF; } @font-face { font-family:'Inter Fallback'; src:local('Arial'); font-style:normal; font-weight:400 500; size-adjust:106.960118%; ascent-override:90.571141%; descent-override:22.551484%; line-gap-override:0.000000%; } @font-face { font-family:'Inter Fallback'; src:local('Arial Bold'); font-style:normal; font-weight:600 900; size-adjust:106.960118%; ascent-override:90.571141%; descent-override:22.551484%; line-gap-override:0.000000%; } /* HOWIE KNOWS — HOME 2.0 shell. * * Mobile-first and one-handed: every primary action sits in the lower half of a 390px screen, * nothing needs a second hand, and the tap floor is 44px throughout. * * THE PALETTE IS A SWITCH. All colour resolves through semantic tokens, so DARK / LIGHT / * HYBRID is one attribute on . Default is HYBRID — the house is lit, the stage is dark — * which is the direction I recommended; changing it is `data-palette="DARK"`, nothing else. */ /* ---------- tokens: the three directions ---------- */ :root, [data-palette="HYBRID"] { --bg:#f7f5f1; --bg-2:#eeebe4; --surf-1:#fff; --surf-2:#f3f0ea; --surf-3:#e9e4da; --line:#e5e1d9; --line-2:#d2ccc0; --line-3:#bdb3a0; --line-4:#9c8a63; --text:#14120f; --text-2:#3a352d; --text-3:#5b544a; --text-4:#6d665b; --text-5:#7a7368; --accent:#f5a623; --accent-hot:#8f5705; --on-accent:#1a1206; --ok-bg:#e8f2e4; --ok-fg:#2f5c28; --ok-line:#bcd7b4; --warn-bg:#f7ebe2; --warn-fg:#8a4a22; --warn-line:#e0c4ad; --info-bg:#e9ecf7; --info-fg:#303c6b; --info-line:#c0c7e0; --bad:#a8301a; --good:#3d7a38; --badge-fg:#fff; --scrim:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.72) 100%); --tap:44px; } /* ---------- NI-2026-08-21-110 JOB D: TYPE SYSTEM ---------- Three roles, never blurred: --font-ui body/nav/card/label copy — the consumer reading face, everywhere by default. --font-display Anton — scoped to high-emotion identity moments (marquee, event/performer name, team plates, section kickers) and never the default page face. --font-mono IBM Plex Mono — scoped to dates, schedule columns, evidence/provenance and short technical labels only (applied per-element below, never inherited from body). The --type-* tokens are the shared scale from TYPOGRAPHY_UI_SCALE_BENCHMARK_2026-08-21.md — clamp() so desktop visibly scales up rather than stretching the mobile composition. */ :root{ --font-ui:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif; --font-display:'Anton',Impact,'Arial Narrow',sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace; --type-hero:clamp(44px,7.6vw,80px); --type-page:clamp(34px,5vw,54px); --type-section:clamp(25px,3vw,34px); --type-feature:clamp(20px,2vw,26px); --type-card:clamp(17px,1.5vw,20px); --type-body-lead:clamp(17px,1.25vw,19px); --type-body:16px; --type-utility:14px; --type-meta:12px; } [data-palette="DARK"] { --bg:#101113; --bg-2:#0a0b0c; --surf-1:#191b1e; --surf-2:#1e2124; --surf-3:#282b2f; --line:#26292d; --line-2:#343840; --line-3:#4a4638; --line-4:#6f5c31; --text:#f2f0ec; --text-2:#d3d0ca; --text-3:#b0aca4; --text-4:#918d85; --text-5:#75716a; --accent:#f5a623; --accent-hot:#ffc95c; --on-accent:#14100a; --ok-bg:#16241a; --ok-fg:#93cb96; --ok-line:#33513a; --warn-bg:#251d17; --warn-fg:#dba585; --warn-line:#57422f; --info-bg:#1a1f2b; --info-fg:#a4b2d0; --info-line:#343e57; --bad:#d6482a; --good:#57a05c; --scrim:linear-gradient(180deg,rgba(8,9,10,0) 38%,rgba(8,9,10,.85) 100%); } [data-palette="LIGHT"] { /* inherits the :root light values; kept named so the switch is explicit */ } /* THE STAGE. Re-declares the same names with dark values, so any component inside renders dark with no component-level change. Hybrid only: in DARK the page already is this, and in LIGHT the whole point is that it is not. */ [data-palette="HYBRID"] .cine, [data-palette="HYBRID"] .cine * { --_stage:1 } [data-palette="HYBRID"] .cine { --bg:#101113; --bg-2:#0a0b0c; --surf-1:#191b1e; --surf-2:#1e2124; --surf-3:#282b2f; --line:#2b2f34; --line-2:#3a3f47; --line-3:#4a4638; --line-4:#6f5c31; --text:#f2f0ec; --text-2:#d3d0ca; --text-3:#b0aca4; --text-4:#918d85; --text-5:#75716a; --accent-hot:#ffc95c; --on-accent:#14100a; --ok-bg:#16241a; --ok-fg:#93cb96; --ok-line:#33513a; --warn-bg:#251d17; --warn-fg:#dba585; --warn-line:#57422f; --info-bg:#1a1f2b; --info-fg:#a4b2d0; --info-line:#343e57; --scrim:linear-gradient(180deg,rgba(8,9,10,0) 38%,rgba(8,9,10,.85) 100%); background:var(--bg); color:var(--text); border-radius:16px; box-shadow:0 10px 30px rgba(20,16,10,.16); } [data-palette="HYBRID"] .cine-full{border-radius:0} /* ---------- base ---------- */ *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0;overflow-x:hidden;max-width:100%} body{background:var(--bg);color:var(--text); font-family:var(--font-ui); font-size:var(--type-body);line-height:1.6;-webkit-font-smoothing:antialiased;padding-bottom:96px} .wrap{max-width:430px;margin:0 auto;position:relative} @media(min-width:900px){ .wrap{max-width:1080px} } h1,h2,h3{margin:0} a{color:inherit} button{font:inherit;cursor:pointer} .display{font-family:var(--font-display);font-weight:400; letter-spacing:.4px;line-height:.94;text-transform:uppercase} .label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-4)} /* NI-2026-08-26-237 JOB D correction: promoting a section label from
to a real

/

(for screen-reader heading structure) must not also change its rendered weight -- h1,h2,h3 above resets margin but the browser's own UA stylesheet still applies font-weight:bold to any heading tag, and .label never declared a weight of its own, so it always rendered at whatever the surrounding context's normal weight was (400) until now. Locking it explicitly, scoped to the tags this round's fix actually introduced, keeps every non-heading .label use (the "City"/"Explore" eyebrow divs, the "The move" label) exactly as they always rendered. */ h2.label,h3.label{font-weight:400} /* NI-2026-08-21-110 JOB D: the ONE place IBM Plex Mono is still a class consumers can reach for — short metadata/provenance text, e.g. an evidence timestamp or a raw fact string. Real body/UI copy never uses this class. */ .mono-s{font-size:var(--type-meta);color:var(--text-4);font-family:var(--font-mono)} .sect{padding:20px 16px 8px} .pad{padding:0 16px} .note{font-size:13px;line-height:1.55;color:var(--text-4);margin:0} /* ---------- masthead ---------- */ /* NI-2026-08-22-163 JOB A: the above-the-fold block (brand, location, headline, the ask box that now leads) wrapped in `.cine` — the same proven dark-stage class the billboard/event-hero already use — so Home opens on a calm, premium dark canvas instead of the light "house" the prior round deliberately kept lit (shell.css:129-137's own comment). Bottom padding only: every child inside already carries its own top/side spacing, this just keeps the stage from ending flush against the ask box's own edge. */ .home-stage{padding-bottom:16px;margin-bottom:2px} .home-kicker{margin-bottom:6px} /* Both .mast and .loc are used exactly once, on Home, so tightening them here is a scoped pacing fix — not a change to a shared component used elsewhere in the product. */ .mast{padding:9px 16px 4px;text-align:center;border-bottom:1px solid var(--line)} .bulbs{display:flex;justify-content:center;gap:7px;margin-bottom:7px} .bulb{width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.35} .bulb.on{opacity:1;box-shadow:0 0 6px var(--accent)} .brand{font-family:'Anton',Impact,sans-serif;font-size:17px;letter-spacing:3px;color:var(--text)} .brand i{font-style:normal;color:var(--accent-hot)} /* ---------- where and when ---------- */ .loc{display:flex;align-items:center;gap:9px;margin:8px 16px;background:var(--surf-2); border:1px solid var(--line-3);border-radius:12px;padding:8px 13px;font-size:13px;min-height:var(--tap)} .loc b{color:var(--accent-hot)} .loc .when{color:var(--text-4)} .loc button{margin-left:auto;background:none;border:0;color:var(--accent-hot);font-size:12px; min-height:var(--tap);padding:0 4px} /* ---------- ask ---------- */ .ask{display:flex;align-items:center;gap:9px;background:var(--surf-2);border:1px solid var(--line-2); border-radius:12px;padding:10px 12px;margin:0 16px;min-height:52px} .ask input{flex:1;min-width:0;background:none;border:0;color:var(--text);font:inherit;font-size:14px;outline:none} .ask input::placeholder{color:var(--text-5)} /* the tap floor is 44px and it applies to the submit arrow too — it was 38 */ .ask .go{background:var(--accent);color:var(--on-accent);border:0;border-radius:9px; width:var(--tap);height:var(--tap);font-size:16px;flex:0 0 auto} /* ---------- marquee ---------- */ /* ---------- THE BILLBOARD — Batch 1, Stage Kit + Home Marquee ---------- Recovered, not redesigned. Surface recipe from css-v1.txt:26-35 / css-extra.txt:180 (a dark gradient under a top amber glow, inset glow, deep drop shadow — the actual comedy-era billboard, not a dark-mode token swap). Bulb layout from body.html:33-54: 22 top + 22 bottom + 14 per side = 72, matched exactly rather than approximated. Motion from css-extra.txt:220-227 (bchase). HYBRID stays locked — this does not touch the palette tokens or `.cine`; it IS the black ground `.cine` was approximating, applied to the one surface the founder named: the marquee. The house (masthead, headline, everything below) stays lit, per doctrine. */ .billboard{position:relative;margin:0 16px 14px;padding:16px 15px 10px;border-radius:14px; background: radial-gradient(ellipse 72% 58% at 50% 0%, rgba(245,166,35,.16), transparent 70%), linear-gradient(180deg,#171208,#0a0806); box-shadow:inset 0 0 60px rgba(245,166,35,.10), 0 14px 40px rgba(0,0,0,.55); overflow:hidden} .billboard .mq{margin:0;padding:6px 0 0;position:relative;z-index:1} /* the secondary-events rail matches the hero card's 13px inset instead of .rail-s's default 16px, so the row lines up with the poster above it rather than sitting slightly wider */ .billboard-rail{padding:0 13px 2px !important;margin-top:2px} /* FOUNDER VISUAL-PASS ITEM 2: "read like small utility/admin cards." The 16/10 landscape ratio from the pacing round fixed the HEIGHT problem but, at 14px plain type with no rule, no kicker and no accent, a tile carried no more identity than a settings row. This keeps every dimension the pacing fix earned (compact, landscape, no portrait regression) and puts the marquee's own vocabulary back on it: a kicker line, a bigger condensed title, an amber top rule like a ticket stub, and a touch of lift — a mini-poster, not a list row. Still one line taller than before (4/3 vs 16/10 — about 22px) because a flat video-thumbnail ratio read as utility on its own; that's spent on identity, not spent back on height (see the regression guard below, re-measured, not assumed, after this change). */ .billboard-rail .tile{width:180px;box-shadow:0 5px 16px rgba(0,0,0,.4)} .billboard-rail .tile .bb-tile{aspect-ratio:4/3} .billboard-rail .tile .tile-b{padding:8px 10px 9px;border-top:2px solid var(--accent)} /* TYPOGRAPHY_UI_SCALE_BENCHMARK_2026-08-21.md names this exact rail (9.5/15.5/10.5px) as the worked example of the anti-pattern: 9.5px meaningful copy and a card title under the 17px floor. Kicker/venue move into the MICRO LABEL floor (11-12px, short text only); the title matches every other tile's 17px STANDARD CARD TITLE floor rather than a bespoke smaller size. */ .billboard-rail .tile .w{display:block;font-size:11px;letter-spacing:1px;margin-bottom:1px} .billboard-rail .tile .n{font-size:17px;line-height:1.12;margin:0 0 3px;letter-spacing:.2px} .billboard-rail .tile .v{font-size:12px} /* Same duplicate-title bug the hero fix already covered (FD-057), one layer down: the fallback bill already carries the act/matchup name in its own large type, so the tile body below it doesn't need to repeat it in 15px text right underneath — scoped to the marquee rail only, Worth The Trip's tiles are untouched. */ .billboard-rail .tile-img .bb-tile.bb-none + .tile-b .n{display:none} /* the fallback bill's own category line already carries the kicker's job when there's no photo, so the redundant "TONIGHT"/date kicker only shows on real-photo tiles */ .billboard-rail .tile-img .bb-tile.bb-none + .tile-b .w{display:none} /* NI-2026-08-24-218 JOB C -- majority-case desktop dead space: today's build (build-home-data.js) caps each horizon at 3 events, so the hero (slot 0) leaves at most 2 secondary tiles -- the 1004px-wide stage measured with real data has 2 fixed-180px tiles using 371px (63% empty), left-aligned by `.rail-s`'s default flex-start with nothing to its right. `data-n` (views.js) is a count-aware hook scoped to `.billboard-rail` only -- Worth The Trip's and event-page's own bare `.rail-s`/`.tile` carry no such attribute and are untouched. Centering plus a modest, count-scaled width increase turns the accidental left-hugging gap into a deliberate compact lineup without inventing filler content. Mobile (390, below this breakpoint) keeps the existing horizontal-scroll behavior -- there is no dead-space problem on a narrow viewport, only a wide one. */ @media (min-width:768px){ .billboard-rail[data-n]{justify-content:center} .billboard-rail[data-n="1"] .tile{width:min(320px,90%)} .billboard-rail[data-n="2"] .tile{width:min(230px,45%)} .billboard-rail[data-n="3"] .tile{width:min(200px,30%)} } /* NI-2026-08-21-110 JOB A — "Worth the Trip cards that look like blank beige boxes." The billboard rail already got the marquee's own warm stage recipe for its no-image fallback (below); every OTHER rail tile without a portrait — Worth the Trip chief among them — still fell through to the plain, flat `.bb-none` panel (var(--surf-2), a neutral grey/beige box) because the fix was scoped narrowly to `.billboard-rail` at the time ("out of scope for this pass," per that comment). Same recipe, now the actual TILE default rather than a billboard- only special case — a rail tile without a cleared portrait is one of the two states this product designs for, not a placeholder. */ .bb-tile.bb-none{ background: radial-gradient(ellipse 70% 70% at 50% 0%, rgba(245,166,35,.15), transparent 65%), linear-gradient(180deg,#171208,#0a0806); border-color:rgba(245,166,35,.14)} .bb-tile.bb-none .bb-rule{background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5} /* NI-2026-08-25-236 JOB H — same always-dark-background fix as .bb-mono on the line below: this tile's background became always-dark (NI-110 JOB A, above), so the theme-tracking --accent-hot token resolved to the LIGHT-surface value (#8f5705, ~3.5:1) in the default HYBRID palette instead of the dark-stage value. Fixed light color, matching --accent-hot's own DARK-palette/.cine value, not a new color. */ .bb-tile.bb-none .bb-sub{color:#ffc95c;font-size:10.5px} .bb-tile.bb-none .bb-mono{color:#f2f0ec;text-shadow:0 0 16px rgba(245,166,35,.2)} /* the tile fallback gets the same warm-stage treatment as the hero fallback (item 3), scaled down — same reasoning, same recipe, kept out of the shared .bb-none rule so Worth The Trip's tile fallbacks (a different surface, out of scope for this pass) are untouched */ .billboard-rail .bb-tile.bb-none{ background: radial-gradient(ellipse 70% 70% at 50% 0%, rgba(245,166,35,.15), transparent 65%), linear-gradient(180deg,#171208,#0a0806); border-color:rgba(245,166,35,.14)} .billboard-rail .bb-tile.bb-none .bb-rule{background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5} /* NI-2026-08-25-236 JOB H — same always-dark-background fix as the base .bb-tile.bb-none .bb-sub. */ .billboard-rail .bb-tile.bb-none .bb-sub{color:#ffc95c} .billboard-bulbs{position:absolute;display:flex;justify-content:space-between; pointer-events:none;z-index:2} .billboard-bulbs.top{top:8px;left:16px;right:16px} .billboard-bulbs.bottom{bottom:8px;left:16px;right:16px} .billboard-bulbs.side{flex-direction:column;top:32px;bottom:32px} .billboard-bulbs.left{left:4px} .billboard-bulbs.right{right:4px} /* FOUNDER VISUAL-PASS ITEM 4 (superseded in part by NI-2026-08-23-171 JOB B below): the chase was correct in structure (4-group stagger, full perimeter) but read as a dim flicker — a .3 resting opacity is nearly off, and a 17%-of-cycle "on" window (15-32%) meant most of the perimeter was dark most of the time. Brighter rest state, a longer and stronger "on" peak, and a touch more speed (1.3s -> 1.1s) so the sweep is legible as motion rather than a random twinkle — still four groups, still not simultaneous, so it can't read as strobing. NI-2026-08-23-171 JOB B — "no moving Hollywood lights before intent... once the plan is grounded, the billboard becomes the wow moment." That founder-visual-pass chase was always running, on every load, whether the user had asked Howie anything or just clicked in from Explore — exactly the defect this job names. The bulbs' RESTING state (no `.grounded` ancestor: a direct page load, a browse-in click) is now a calm, static amber glow with no motion at all. The animated chase — now bigger and brighter than the founder-visual-pass version, the actual "wow" upgrade — fires only under `.billboard.grounded`, the marker views.js applies exactly once per render when that render is the direct, immediate result of a submitted ask (H.groundedFromAsk(), intent.js). A "More" click, a direct city/team page visit, or reloading the same page never re-earns it. */ .billboard-bulbs span{width:6px;height:6px;border-radius:50%;flex:0 0 auto; background:#ffcf7a;box-shadow:0 0 8px 2px rgba(245,166,35,.55);opacity:.7} .billboard.grounded .billboard-bulbs span{ width:7px;height:7px;box-shadow:0 0 15px 4px rgba(245,166,35,.9); animation:billboard-chase-wow 1s linear infinite,billboard-ground-in .6s ease-out} .billboard.grounded .billboard-bulbs span:nth-child(4n+1){animation-delay:0s,0s} .billboard.grounded .billboard-bulbs span:nth-child(4n+2){animation-delay:.25s,.05s} .billboard.grounded .billboard-bulbs span:nth-child(4n+3){animation-delay:.5s,.1s} .billboard.grounded .billboard-bulbs span:nth-child(4n+4){animation-delay:.75s,.15s} /* The "resolving" beat: Howie searching for the answer reads as the perimeter sweeping in and catching light for the first time, not a separate spinner competing for attention — then it settles straight into the same loop it ends on, so there is exactly one motion, not a cut between a "loading" animation and a "done" animation. */ @keyframes billboard-ground-in{ 0%{opacity:0;box-shadow:0 0 0 0 rgba(245,166,35,0);transform:scale(.4)} 60%{opacity:1;transform:scale(1.15)} 100%{opacity:1;transform:scale(1)} } @keyframes billboard-chase-wow{ 0%,100%{opacity:.5;box-shadow:0 0 8px 3px rgba(245,166,35,.5)} 18%,40%{opacity:1;box-shadow:0 0 22px 7px rgba(255,207,122,1)} 70%{opacity:.5;box-shadow:0 0 8px 3px rgba(245,166,35,.5)} } /* Grounded marquee/hero headline gets the same one-shot "resolving into focus" beat as the bulbs — the closest honest reading of "flipping-letter... while Howie resolves intent" this pass could ship without splitting headline text into per-character spans (a much larger, riskier change for a decorative flourish; left as a documented simplification, not silently downgraded). */ .billboard.grounded .mq-h,.billboard.grounded .bill-kick{ animation:billboard-text-ground .5s ease-out both} @keyframes billboard-text-ground{ 0%{opacity:0;transform:translateY(-5px);filter:blur(3px)} 60%{opacity:1;filter:blur(0)} 100%{opacity:1;transform:translateY(0)} } @media (prefers-reduced-motion: reduce){ .billboard-bulbs span{animation:none;opacity:.85} .billboard.grounded .billboard-bulbs span{animation:none;opacity:.95} .billboard.grounded .mq-h,.billboard.grounded .bill-kick{animation:none;opacity:1;transform:none;filter:none} } @media (min-width:768px){ /* FOUNDER VISUAL-PASS ITEM 1: at 1280px the padding alone wasn't the problem — the hero image's own aspect-ratio was uncapped (see .ev-hero .bb-hero below), so a 16/9 box at the ~980px content width this padding leaves scaled to 550px+ tall, a poster wall no amount of trimming here could fix. Tightened both: less padding, and (below) a hard cap on the hero itself so widening the viewport widens the stage without inflating its height. */ .billboard{padding:20px 22px 8px} .billboard-bulbs.top,.billboard-bulbs.bottom{left:20px;right:20px} } /* THE LEAD CARD IS THE POSTER: Blueberry's own `hero` tier (already proven on event pages — full-width image or the designed no-image bill, with its own scrim and fallback typography) simply gets a vertical layout here instead of the horizontal thumbnail row, and the title steps up so it reads as the dominant element rather than one more list row. No new image system, no new fallback — the same one, sized up. */ .ev-hero.ev-img{flex-direction:column;gap:0} .ev-hero .bb-hero{width:100%;aspect-ratio:16/9;max-height:none;border-radius:10px} .ev-hero .ev-b{padding:9px 1px 2px} /* FOUNDER VISUAL-PASS ITEM 1, the actual cap: at mobile widths 16/9 is already compact (~220px at 390px wide) so this is inert there; at desktop it's what stops a wide real photo from growing past a "premium widened mobile" hero into a full poster wall. object-fit:cover (base .bb img rule) means capping height here crops rather than squeezes, so the image never distorts. */ @media (min-width:768px){ .ev-hero .bb-hero{max-height:300px} } .ev.ev-hero .n{font-size:clamp(27px,4.4vw,42px);line-height:1.02} /* NI-2026-08-21-110 JOB A/D — the "What's worth doing" headline was a fixed 32px inline style with no desktop step, so it never grew past a stretched mobile size on a wide screen. This is the PAGE TITLE level of the type scale, mobile and desktop both. */ .home-headline{font-size:var(--type-page);padding-top:4px} /* NI-2026-08-21-110 JOB D — the shared PAGE TITLE level: every non-home screen's own h1 (Explore, City, Event, Set List, Saved, Me, Entity) used a fixed 26-30px inline style with no desktop step, one of the concrete "stretched mobile app" acceptance-test failures named in the typography benchmark. One class, one scale, real desktop growth. */ .page-title{font-size:var(--type-page);margin-top:4px;line-height:.98} .section-title{font-family:var(--font-ui);font-weight:700;font-size:var(--type-section); text-transform:none;letter-spacing:0;line-height:1.2} /* When the hero has no image, the designed fallback bill already carries the act name in its own large type (bb-mono / bb-team). Repeating it in the body below read as a duplicated title on first render. A real photo carries no text of its own, so the body title is kept in that case — this only suppresses the redundant copy, never the only copy. */ .ev-hero .bb-hero.bb-none + .ev-b .n{display:none} /* REVIEW-2026-08-16-NI012 finding 1 -- the hero FIXTURE plate: two .tm colour/logo plates (the event billboard's own component, reused wholesale) side by side inside the hero's existing 16/9 box. The photo scrim is for legibility over photographs and would muddy the real team colours here, so this state opts out of it. The duplicate title line below is hidden exactly the way the bb-match bill's already is -- the plate itself carries the matchup text and is NOT aria-hidden, so it is the card's accessible name. */ .bb-fixture{display:flex;align-items:stretch;gap:0;overflow:hidden} .bb-fixture::after{display:none} .bb-fixture .tm{border-radius:0} .bb-fixture .tm:first-child{border-radius:10px 0 0 10px} .bb-fixture .tm:last-child{border-radius:0 10px 10px 0} .bb-fixture .bill-vs-wrap{margin:0 -17px;position:relative;z-index:2} /* NI-2026-08-16-013 JOB D -- REAL BUG FOUND VERIFYING THE HOME HERO LIVE, NOT JUST CHECKING THAT LOGOS LOADED: `.bb img` (line ~633, the generic full-bleed portrait rule every other Blueberry image on the site correctly wants: position:absolute;inset:0;width:100%) has higher specificity (0,1,1) than `.tm-logo` alone (0,1,0), so inside `.bb-fixture` -- which reuses the `.bb`/`.bb-hero` wrapper classes on purpose, to inherit the hero box's sizing -- it silently overrode the 44px centered-logo design with "absolutely positioned, 100% of an unpositioned .tm's containing block", which resolved both team logos to the EXACT SAME on-page coordinates (confirmed live: both images' getBoundingClientRect() were pixel-identical), one fully obscuring the other. `src`/`alt`/`.complete` all reported correctly for both images, which is exactly why "does the logo load" checks (this round's own logo-registry gate, the prior round's Fable review) never caught it -- the defect is POSITION, not existence. Never present on the event page's own `.bill-teams .tm-logo`, which sits outside any `.bb`-classed ancestor and was never affected. Fixed here with enough specificity to beat `.bb img` back to the correct, already-designed 44/64px centered-logo treatment, not a new design decision. NI-2026-08-24-218 JOB A -- the position/overlap fix above never addressed a second, separate `.bb img` property: `opacity:0` (shell.css ~line 1004), toggled to 1 only via `.bb.bb-in img` when H.Blueberry's own scan adds `.bb-in` to a `[data-bb]` node it created the for (blueberry.js). The `.bb.bb-hero.bb-fixture` wrapper (views.js) carries no `data-bb` attribute -- its two `.tm-logo` crests are plain eager-loaded markup, never scanned by Blueberry -- so `.bb-in` never gets added and the crests stayed permanently transparent despite `src`/`alt`/ `.complete` all reporting correctly loaded (same "position/opacity, not existence" defect class as the comment above). `.bb-fixture .tm-logo` already outranks `.bb img` on specificity (0,2,0) vs (0,1,1), so a plain `opacity:1` here is enough; `.bb img`, `.bb.bb-in img`, and Blueberry's own portrait fade are untouched -- this rule stays scoped to `.bb-fixture` only. */ .bb-fixture .tm-logo{position:static;inset:auto;width:44px;height:44px;object-fit:contain; margin:0 auto 2px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));opacity:1} @media (min-width:768px){ .bb-fixture .tm-logo{width:64px;height:64px} } .ev-hero .bb-fixture + .ev-b .n{display:none} .mq{margin:0 16px 18px;padding:12px 0 4px} .mq-h{display:flex;align-items:baseline;padding:0 13px 8px} .mq-h .c{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-4)} .mq-h .more{margin-left:auto;font-size:12.5px;color:var(--accent-hot);min-height:var(--tap); display:flex;align-items:center;background:none;border:0} .ev{display:block;width:calc(100% - 26px);margin:0 13px 10px;text-align:left; background:var(--surf-1);border:1px solid var(--line);border-radius:12px;padding:12px 13px; color:inherit;min-height:var(--tap)} .ev .w{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent-hot)} .ev .n{font-family:var(--font-display);font-size:clamp(20px,3vw,26px);letter-spacing:.4px; text-transform:uppercase;margin:3px 0 2px;color:var(--text)} .ev .v{font-size:13px;color:var(--text-4)} .ev .cta{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:14px;color:var(--accent-hot)} /* ---------- rails ---------- */ .rail{margin:0 0 18px} .rail-h{display:flex;align-items:baseline;padding:0 16px 9px} .rail-h h2{font-family:var(--font-display);font-size:var(--type-section);text-transform:uppercase;letter-spacing:.4px} .rail-s{display:flex;gap:11px;overflow-x:auto;padding:0 16px 4px;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none} .rail-s::-webkit-scrollbar{display:none} .tile{flex:0 0 auto;width:208px;scroll-snap-align:start;background:var(--surf-1); border:1px solid var(--line);border-radius:12px;padding:12px;text-align:left;color:inherit;min-height:var(--tap)} .tile .w{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent-hot)} .tile .n{font-family:var(--font-display);font-size:17px;text-transform:uppercase;margin:4px 0 3px} .tile .v{font-size:12px;color:var(--text-4)} /* NI-2026-08-16-012 JOB F.3 -- Worth the Trip's reason signal, quieter than the venue line (a supporting fact, not the headline) but still readable -- present only when a card actually carries e.reason (tripReason() in build-home-data.js), so this never renders an empty line for cards with no supportable signal. */ .tile .reason{font-size:11px;color:var(--accent-hot);margin-top:2px;font-weight:600} /* NI-2026-08-26-245 JOB 2 -- the national occasion radar reuses the existing full `.ev` card (event/city pages already ship it), not `.tile`, so it needs its own `.reason` rule -- `.ev` never carried a reason field before this round. `.radar-lbl` reuses the exact micro-label type recipe `.asked-k` already established (9.5px/uppercase/letter-spaced/--text-4) rather than inventing a second one. */ .ev .reason{font-size:11px;color:var(--accent-hot);margin-top:2px;font-weight:600} .radar-lbl{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-4);font-weight:600} /* Single column (the existing `.ev` block-stacking, unchanged) at mobile so one radar item's WHY NOW / WHY THIS / CTA genuinely fits the first useful viewport after the heading, per the director synthesis's own 390 acceptance line. A 2-column grid at desktop -- the same min-width:900px breakpoint and 1fr/1fr column pattern `.grid2` already establishes elsewhere in this file, reused rather than a third layout system invented -- so 1440 uses width for comparing a small curated set, never one more equal-weight rectangle wall. */ @media(min-width:900px){ .trip-radar-list{display:grid;grid-template-columns:1fr 1fr;gap:0 14px} .trip-radar-list .ev{width:auto;margin:0 0 14px} } /* ---------- chips ---------- */ .chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px} .chip{background:var(--surf-2);border:1px solid var(--line-2);color:var(--text-2); border-radius:999px;padding:0 14px;font-size:12.5px;min-height:var(--tap); white-space:nowrap;transition:background .12s ease,border-color .12s ease,color .12s ease} /* BATCH 3, ITEM 2 (2026-08-14): selected used to be one shade of the same neutral surface — legible if you compared two chips side by side, easy to miss at a glance while scrolling a 19-category row. Selected now takes the same accent fill the primary Book button and the active category already use elsewhere in the product, so "this is the one that's on" reads without having to compare it to its neighbours. */ .chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600} .chip:active{transform:scale(.97)} /* NINETEEN CATEGORIES WRAPPED TO FIVE ROWS pushed the requested results 400px down the page, which is the FD-042 failure wearing a different hat: the user asked for Italian and got a wall of furniture first. One scrolling row keeps every category reachable and costs 44px. The scroller is the element that overflows, never the body — qa-devices asserts that. */ .chips.row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-left:16px} .chips.row::-webkit-scrollbar{display:none} .chips.row .chip{flex:0 0 auto;scroll-snap-align:start} /* TRAVELER ROUND, OBJECTIVE 4D (2026-08-14): a curated lead of 7 plus a "More" reveal reads as a chosen shortlist; a dashed, muted style keeps the expand control from competing with the real categories around it as one of the choices. The revealed row (#catrow-more) is the same .chips.row component, just a second one — no new pattern, and it gets its own scroll room rather than crowding the lead row's snap points. */ .chip-more{background:none;border:1px dashed var(--line-3);color:var(--text-4)} .chip-more-n{color:var(--text-5);margin-left:2px} #catrow-more{margin-top:8px} /* CAUGHT ON SCREENSHOT, NOT ASSUMED WORKING (rule 0b): the `hidden` attribute's implicit display:none loses to `.chips{display:flex}` — a class selector in the author stylesheet beats the attribute-driven user-agent default regardless of which comes first, so the "more" row was rendering wide open the whole time, defeating the entire point of the reveal. A same-specificity-class-of-problem to the tap-target bug from the prior round: both were caught only by looking at what actually painted. */ .chips[hidden]{display:none} /* ---------- cards ---------- */ /* ---------- HOWIE ASKS ---------- The conversational module. It reads as Howie speaking, not as a form: a spoken question in sentence case, answers as tappable chips, and nothing else competing for attention. */ .nbq{margin:16px;padding:14px 14px 12px;border-radius:14px;background:var(--surf-2); border:1px solid var(--line-3)} .nbq-h{display:flex;align-items:center;gap:8px;margin-bottom:7px} .nbq-badge{font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--on-accent); background:var(--accent);border-radius:999px;padding:3px 9px;font-weight:600} .nbq-q{margin:0 0 11px;font-size:var(--type-body-lead);line-height:1.45;color:var(--text)} .nbq-chips{display:flex;flex-wrap:wrap;gap:8px} .nbq-c{background:var(--surf-1);border:1px solid var(--line-2);color:var(--text-2); border-radius:999px;padding:0 14px;min-height:var(--tap);font-size:12.5px;white-space:nowrap; transition:border-color .14s ease,color .14s ease} .nbq-c:active{transform:scale(.97)} @media (hover:hover){.nbq-c:hover{border-color:var(--line-4);color:var(--text)}} .nbq-out:not(:empty){margin-top:12px} .nbq-picks{display:flex;flex-direction:column;gap:7px} .nbq-p{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;position:relative;width:100%;text-align:left;min-height:var(--tap); background:var(--surf-1);border:1px solid var(--line-2);border-radius:11px;padding:9px 37px 9px 12px; color:var(--text)} .nbq-pn{font-family:'Anton',Impact,sans-serif;font-size:14px;text-transform:uppercase; letter-spacing:.3px;flex:1 0 auto;min-width:0;max-width:100%;overflow-wrap:normal;word-break:normal} .nbq-pm{font-size:11px;color:var(--text-4);margin-left:auto;max-width:100%;white-space:normal} .nbq-p svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--accent-hot)} .nbq-none{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-4)} /* ---------- THE SPORTS BILLBOARD — Batch 2: Sports Event Gold Standard ---------- BATCH 2 ITEM 1: the prior treatment was correct in structure (two club plates, no logos, driven entirely by e.matchup) and explicitly named "the floor, not the final result" — a light var(--bg-2) strip with two small colour chips read as a caption, not a marquee. This reuses Batch 1's actual dark-stage recipe wholesale (`.billboard`'s own background, glow and shadow, `billboardBulbs()`'s own 72-bulb perimeter helper, same chase animation) — REUSE, not reinvention, exactly as instructed. `.bill.billboard` overrides only what has to differ for a full-bleed event-page hero instead of a home-page card: no side margin, no corner radius, so it reads as the top of the page rather than a floating panel — matching how the comedy/music hero (H.Blueberry's `.bb-hero`) is already full-bleed on this same page. Still driven entirely by e.matchup; any league with a registry entry gets this free. */ .bill.billboard{margin:0;border-radius:0;padding:20px 16px 22px} /* NI-2026-09-18 (FD-126 follow-up): founder-supplied team hero image. Same full-bleed billboard ground as the other heroes on this page, capped so a tall/portrait-shaped source image never pushes the real page content (schedule, actions) far below the fold -- the exact class of defect the college-card height fix caught this same morning. */ .team-hero-override-img{max-width:720px;margin:0 auto;max-height:56vh;overflow:hidden;border-radius:14px; box-shadow:0 18px 44px rgba(0,0,0,.4)} .team-hero-override-img img{width:100%;height:100%;max-height:56vh;object-fit:cover;object-position:50% 20%;display:block} /* FD-123: pair the portrait billboard with the decision on desktop. The full mobile portrait and stack stay untouched; desktop keeps the complete artwork. */ @media (min-width:900px){ #app .q38-entity-heading:has(> .team-hero-override){ display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-rows:1fr auto auto auto 1fr;column-gap:48px;row-gap:16px; padding-top:28px!important;padding-bottom:28px; } .q38-entity-heading > .team-hero-override{grid-column:1;grid-row:1 / 6;min-width:0} .q38-entity-heading:has(> .team-hero-override) > .page-title{grid-column:2;grid-row:2;margin:0;overflow-wrap:anywhere} .q38-entity-heading:has(> .team-hero-override) > .q38-run-dates{grid-column:2;grid-row:3;margin:0} .q38-entity-heading:has(> .team-hero-override) > .q38-entity-primary{grid-column:2;grid-row:4;justify-self:start;margin:0} .q38-entity-heading .team-hero-override-img img{object-fit:contain} } /* NI-2026-08-25-236 JOB H — .bill.billboard's own gradient ground (shared with .billboard, 146-below) is always dark by construction regardless of the page's light/dark palette, and this hero sits outside .cine's scope on the event page. var(--accent-hot) therefore resolved to the theme-tracked LIGHT-surface value (#8f5705) here, measured 3.53:1 against the real rendered dark backdrop -- below the 4.5:1 AA small-text floor. Fixed light colour, matching --accent-hot's own DARK-palette/.cine value (same colour, not a new one) -- the same always-dark-background fix already established elsewhere on this page (.bb-none .bb-mono etc). Kept distinct from the separate .bb-match .bb-team fallback contrast defect, fixed alongside it in the same pass, below. */ .bill-kick{font-size:10.5px;letter-spacing:1.9px;text-transform:uppercase;color:#ffc95c; text-align:center;position:relative;z-index:1} /* NI-2026-08-22-163 JOB C -- margin:auto added. Below max-width (mobile, most of tablet) this is a no-op: width:100% already consumes the full row, nothing to center. Past 560px available width (desktop) it previously had no rule centering it at all, so the fixture hero's own two- team plate has been rendering flush-LEFT against a 1080px-wide dark stage this whole time -- found while giving the team-hero plate (below) the same base-class width instead of its own narrower inline override, and confirmed live (Playwright, 1440x900): teamsLeft=206px, teamsRight=494px pre-fix, i.e. genuinely off-center, not merely visually close. Centering here fixes both callers identically from one shared rule, matching how they already share every other .bill-teams/.tm property. */ .bill-teams{display:flex;align-items:stretch;gap:0;width:100%;max-width:560px;margin:0 auto;position:relative;z-index:1} .tm{flex:1 1 0;min-width:0;padding:16px 12px;text-align:center; background:linear-gradient(165deg,var(--tc1,#26292d) 0%,var(--tc2,#15171a) 195%); display:flex;flex-direction:column;justify-content:center;gap:3px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)} .tm-h{border-radius:12px 4px 4px 12px} .tm-a{border-radius:4px 12px 12px 4px} .tm-city{font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;color:rgba(255,255,255,.68)} .tm-name{font-family:'Anton',Impact,sans-serif;font-size:clamp(21px,6.4vw,34px);line-height:1; text-transform:uppercase;color:#fff;letter-spacing:.4px;overflow-wrap:anywhere; text-shadow:0 2px 6px rgba(0,0,0,.45)} /* NI-2026-08-15-010 JOB A — the logo sits ABOVE the existing city/name text, never replacing it, so a broken or slow-loading image degrades to exactly the colour-plate look this already was — the fallback is the unmodified pre-existing design, not a new empty state to build. NI-2026-08-27-252 JOB A — founder sports visual-identity closeout: this single shared rule drives both the team-hub solo plate (entity-page.js's teamHero()) and the exact-matchup two- team plate (views.js's plate()), so doubling it here strengthens real team/matchup identity on both surfaces from one change, per the instruction's own "reuse, don't invent a parallel language" discipline. Baseline was 44px/64px (measured live pre-change: `before-*-390.png`/ `before-*-1440.png` in qa/screenshots/); real rendered .bill-teams height only grows by the same delta as the logo (124px->~168px at 390, 173px->~237px at 1440 — see verify-sports-identity-visual-weight.js), which live measurement against both real routes confirmed still leaves matchup/team name, date/time/venue and the primary next step above the 390 fold, so no reduced/fallback multiplier was needed. `.bb-fixture .tm-logo` (the separate, denser home-marquee fixture variant, shell.css ~line 382) is deliberately untouched — it is a city/browse card, outside this round's team-hub/exact-matchup scope. */ .tm-logo{width:88px;height:88px;object-fit:contain;margin:0 auto 2px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))} @media (min-width:768px){ .tm-logo{width:128px;height:128px} } /* THE FIGHT-POSTER VS: a stacked badge between the two plates instead of a stray word — the central, high-contrast mark the founder asked for, on the same amber the bulbs already use so it reads as part of the same lit system, not a third colour. */ .bill-vs-wrap{flex:0 0 auto;display:flex;align-items:center;z-index:1} /* NI-2026-08-25-236 JOB H — same always-dark-background fix as .bill-kick above: this badge's own background (#0a0806) is a fixed dark value, not theme-tracked, so var(--accent-hot) was the same bug, measured 3.36:1. */ .bill-vs{width:34px;height:34px;border-radius:50%;background:#0a0806; border:2px solid var(--accent);box-shadow:0 0 14px 2px rgba(245,166,35,.5); display:flex;align-items:center;justify-content:center; font-family:'Anton',Impact,sans-serif;font-size:11px;letter-spacing:1px; text-transform:uppercase;color:#ffc95c} /* TRAVELER ROUND, OBJECTIVE 4A: same class as .bb-hero.bb-none's title fix above — this sits on .billboard's own always-dark gradient, not a themed surface, so it needs a colour tied to THAT background rather than the page's current light/dark palette. */ .bill-venue{font-size:12px;letter-spacing:.4px;color:rgba(255,255,255,.7);text-align:center; position:relative;z-index:1;margin-top:2px} @media (min-width:768px){ .bill.billboard{padding:30px 26px 30px} .tm{padding:26px 18px} .bill-vs{width:44px;height:44px;font-size:13px} } /* THE MOVE — restored personality, gated to real data (see views.js: only renders above a genuinely top-tier pick). A small amber kicker, not a badge on the card itself, so it reads as Howie's own voice introducing the pick rather than another data-sourced credential like RECOMMENDED BY. */ .move-tag{font-family:'Anton',Impact,sans-serif;font-size:12px;letter-spacing:1px; text-transform:uppercase;color:var(--accent-hot);padding:0 16px 6px} /* EAT AT THE GAME — the reserved stadium-food slot (RECOVERY_PLAN Batch 2). A visibly held position with an honest "Coming" chip, not a fake menu: bordered like a real module so the page grammar reads pregame → eat at the game → postgame, dashed so nobody mistakes it for filled content. */ .eatgame{margin:14px 16px 0;padding:12px 14px;border:1px dashed var(--line-3);border-radius:12px} .eatgame .label{display:flex;align-items:center;gap:8px} .eatgame-chip{font-size:9px;letter-spacing:1.2px;padding:2px 7px;border-radius:999px; background:var(--warn-bg);color:var(--warn-fg);border:1px solid var(--warn-line)} .eatgame .note{margin-top:6px} /* NI-009 AMENDMENT (Citi Field in-venue food layer) — a filled module (real registry content) drops the dashed "reserved slot" border for a solid one, same radius/spacing as the placeholder so the page grammar doesn't jump when a venue gets real content. */ .eatgame[data-state="ready"]{border-style:solid} .eatgame-list{margin:8px 0 0;padding-left:18px} .eatgame-list li{margin:4px 0;line-height:1.4} /* ---------- quick actions ---------- Save, Share, Plan — under the billboard, above any recommendation, because the founder's order is hero, then actions, then content. */ .qa{display:flex;gap:9px;padding:12px 16px 2px} .qa-b{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:var(--tap); background:var(--surf-1);border:1px solid var(--line-2);border-radius:11px;color:var(--text-2); font-size:12.5px;transition:border-color .14s ease,color .14s ease} .qa-b:active{transform:scale(.98)} .qa-b.on{color:var(--accent-hot);border-color:var(--line-4)} /* ---------- global header ---------- Sticky and compact on mobile; the bottom nav stays. On desktop it widens into a real top navigation rather than a phone bar stretched across a monitor. */ .ghead{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px; padding:0 12px;min-height:52px;background:var(--surf-1); border-bottom:1px solid var(--line);backdrop-filter:saturate(1.2) blur(8px)} .gh-back,.gh-act{background:none;border:0;color:var(--text-2);display:flex;align-items:center; justify-content:center;min-width:var(--tap);min-height:var(--tap);border-radius:10px} .gh-back:active,.gh-act:active{background:var(--surf-3)} .gh-brand{background:none;border:0;font-family:'Anton',Impact,sans-serif;font-size:14px; letter-spacing:1.1px;color:var(--text);text-transform:uppercase;padding:0;white-space:nowrap} .gh-brand i{font-style:normal;color:var(--accent-hot)} /* NI-2026-08-22-163 JOB F — .gh-ctx is a real