/* Control arm gets nothing; the section is hidden and the hero is untouched. Base-hidden so a no-JS visitor falls through to the existing hero rather than seeing both. */ .fscreen{display:none} :root[data-first-screen="ticker"] .fscreen{display:flex} /* On the ticker arm the hero's own headline block stands down so the page has one h1. The doors and cards under it stay exactly as they are, which is the "keep the graphics, move them later" part. */ :root[data-first-screen="ticker"] .hero-illustrated .hi-head{display:none} :root[data-first-screen="ticker"] .hero{padding-top:0} /* The hero live card grew its own prediction-market layer on 2026-07-22 (ticker tape, odds chart, pot). On this arm the first screen already IS the market, so the card's copy of it is suppressed and the card goes back to being the live room. One market per screen. */ :root[data-first-screen="ticker"] .hero-illustrated .hi-lf-ticker, :root[data-first-screen="ticker"] .hero-illustrated .hi-lf-mkt-head, :root[data-first-screen="ticker"] .hero-illustrated .hi-lf-mkt-chart, :root[data-first-screen="ticker"] .hero-illustrated .hi-lf-mkt-rows{display:none} /* Same floor the hero documents at its own padding-top: the .ui-topbar is FIXED at 52px and this section starts at y=0 underneath it, so anything below ~54px slides the headline behind the nav. */ /* min-height is the FULL viewport, not 100svh minus the bar: the section starts at y=0 underneath the fixed topbar, so subtracting the bar height ended the hero 52px above the fold and let the next section peek in. padding-top already keeps content clear of the bar. */ /* 2026-07-23: the old clamp(58px,7vh,80px) only cleared the 52px bar by ~7px on a short or zoomed viewport, so the slogan sat right on the nav hairline. Floor is now 84px (32px of daylight) and the vh term is bigger, so the copy has air under the bar at every height. */ /* Top padding clears the fixed topbar and the live strip; it was sized for a taller stack than the page now has, which pushed the whole first screen down. Trimmed so the hero sits higher without landing under the bar. */ /* ── First screen layout tokens ── 2026-08-19 (structural pass) ── Three values drive the whole screen. Before this, spacing lived on the individual blocks (a 20px margin on the Open card, a 7px one on the globe) and was re-declared in three max-height arms that disagreed with the base and with each other, and the globe was three widths at once (a 430px box, a 300px canvas, a 300px caption) held together by a -10px pull. Those arms are gone; these clamps replace them, so the screen scales by height instead of stepping at three breakpoints. */ .fscreen{ --fs-rhythm:clamp(16px,3vh,28px); /* between blocks in the copy column */ --fs-globe:clamp(240px,35vh,340px); /* the globe, one size, no arms */ } .fscreen{justify-content:center;align-items:center;min-height:100svh;padding:clamp(64px,7.5vh,92px) clamp(18px,5vw,72px) clamp(20px,3vh,36px)} /* The section starts under a 32px in-flow strip (ui.css gives the body that padding whenever .has-beta-strip is set), so a flat 100svh made it 32px taller than the space it actually occupies and it centred its contents against a box whose bottom was below the fold. */ /* Desktop only: the mobile arm below deliberately drops min-height to 0 so the stacked column is content-height, and `body.has-beta-strip .fscreen` would otherwise out-specify it and pin a 100svh floor back on phones. */ @media(min-width:941px){body.has-beta-strip .fscreen{min-height:calc(100svh - 32px)}} /* 2026-08-22 per the founder: the board (the two real webcam tiles) and the CTAs are what should pull the eye toward the stranger match, so the right column takes a larger share and the wrap grows 80px. */ /* 2026-09-03, the founder's desktop sketch: one centred column (the board with its doors under it) with the chats panel beside it from 1360px and the leaderboard rail docked on the left edge. The headline column is gone from this screen, so the grid no longer splits the width with it. */ .fscreen-wrap{width:100%;max-width:1280px;display:grid;grid-template-columns:minmax(0,676px);justify-content:center;gap:clamp(32px,4.2vw,64px);align-items:center} /* 2026-08-24, per the founder: the composition moves "a tad left" so the leaderboard rail (#lbRail, the dock of faces docked on the left edge since 2026-09-01) has room to sit beside the example board instead of on top of it. Transform rather than a margin: the wrap is a centred flex item, so a margin-right would shrink it AND move it by half the value, while a translate moves it by exactly what it says. Desktop only; the rail is display:none under 1101px and so is this. The flag is set SYNCHRONOUSLY by the small script under the first screen, not by the renderer that lands with the board data. Waiting for the fetch would slide the headline 40px sideways a few hundred milliseconds after load, which is a jolt on the one thing above the fold. It also means the shift survives a failed board fetch: 40px of a centred composition is not detectable without a ruler, and taking it back would be that same jolt in the case where something has already gone wrong. */ /* 2026-08-25, the founder, on the rail sitting under the example board: "move this left and like 5% smaller to afford the space appropriately." The rail grew (54 -> 68px tiles) and came back onto the page (peek 12 -> -8px), so it now wants ~36px more than the old shift gave it. Two moves, because one alone would not pay for it: the composition slides further left, and it scales to .95 about its own centre, which hands back another ~2.5% of the wrap width on the right side, roughly 32px at the 1280px cap. Scale rather than a narrower max-width: a cap change reflows the headline and the board into different line breaks, while a scale is the same composition, 5% smaller, exactly as asked. Desktop only, same as the rail. */ @media(min-width:1101px){ /* 2026-08-31, founder off a screenshot ("move these 3 over a bit right bc it feels left sided a bit"): the shift softened -88..-56px -> -48..-28px. The old value parked the headline at the screen edge on ~1600px windows; the rail still clears the board because the .95 scale is untouched and the rail only needs ~76px at the right edge. If the rail ever overlaps the chat panel again, widen THIS clamp before touching the scale. */ /* 2026-09-01, founder: "bring the leaderboard over to the left side". The rail is on the LEFT edge now, so the same shift runs the other way: the composition slides right to clear the ~76px the collapsed rail needs beside the copy column. Magnitude unchanged. */ html.lbr-ready .fscreen-wrap{transform:translateX(clamp(40px,3.6vw,76px))} /* The copy column also steps in from the left edge so the h1, the CTA pair and the globe sit toward the page centre rather than hugging the edge. Padding, not margin: the grid track keeps its width so the board and chat columns do not move. */ .fscreen-copy{padding-left:clamp(10px,2vw,44px)} } /* The copy column is a flex column with ONE gap, so its three blocks (the CTA cluster, the Open card, the globe) are evenly spaced by the container instead of each carrying its own margin. The hidden copy arm and the two inline