/* FastBreak's "Live" look for the fastbreak.news pages. Colors mirror app/constants/tokens.ts; the lockup ratios mirror app/components/splash/brandSizing.ts (line-height 0.9, tracking -0.04em, bolt slot 1.25x the type). */ :root { color-scheme: dark; --ground: #0b0e11; --surface: #12161b; --line: #1f262e; --ink: #eaf1f4; --read: #c8d0d6; --dim: #77828c; --faint: #525c65; --accent: #39e5a8; --on-accent: #04120c; /* The app's iOS display face, then its Android face (app/constants/tokens.ts fonts.display — a local system font, no download or swap); Roboto Condensed is the web-font fallback. */ --display: "HelveticaNeue-CondensedBold", "sans-serif-condensed", "Roboto Condensed", "Arial Narrow", sans-serif; --mono: "Space Mono", ui-monospace, Menlo, monospace; --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--ground); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); font: 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; } .page { width: 100%; max-width: 420px; } /* FAST ⚡ BREAK */ .brand { margin: 0; font: inherit; } .lockup { display: flex; align-items: center; justify-content: center; margin: 0 0 28px; font-family: var(--display); font-weight: 800; font-size: 44px; line-height: 0.9; letter-spacing: -0.04em; text-transform: uppercase; color: var(--ink); } .lockup .bolt { width: 1.154em; /* 1.25em tall, in the glyph's 120:130 box */ height: 1.25em; fill: var(--accent); filter: drop-shadow(0 0 0.3em rgba(57, 229, 168, 0.55)); } .tagline { margin: -8px 0 28px; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); } /* The story card */ .story { margin-bottom: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; } .story-image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--line); } .story-body { padding: 16px 18px 18px; } .story-league { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); } .story-league .dot { width: 6px; height: 6px; border-radius: 3px; background: var(--accent); } .story-headline { margin: 0; font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; word-break: break-word; } .story-time { display: block; margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px; color: var(--dim); } .story-time:empty { display: none; } /* Buttons */ .actions { display: grid; gap: 10px; } .btn { display: block; padding: 14px 16px; border: 1px solid transparent; border-radius: 12px; text-align: center; text-decoration: none; font-weight: 600; font-size: 16px; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-secondary { border: 1px solid var(--line); color: var(--read); } .btn-secondary:hover { border-color: var(--faint); } /* share.js sets data-platform on . With no JavaScript, both store buttons show and the app button stays hidden. Must stay AFTER .btn above: equal specificity, so this display:none is the one that wins over .btn's display:block for an element carrying both classes. */ .only-mobile { display: none; } [data-platform="ios"] .only-mobile, [data-platform="android"] .only-mobile { display: block; } [data-platform="ios"] #store-android, [data-platform="android"] #store-ios { display: none; } /* "Taking you to the App Store". Idle, it is visually hidden but stays in the accessibility tree, so its aria-live text is announced when share.js fills it in. While a redirect is pending (iOS and Android in-app browsers), it is pinned to the bottom of the screen: on a short phone with a photo and a long headline, anything below the buttons is under the fold. */ .redirect { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } [data-redirecting] .redirect { position: fixed; left: 0; right: 0; bottom: 0; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; padding: 0 0 max(12px, env(safe-area-inset-bottom)); background: var(--ground); border-top: 1px solid var(--line); } [data-redirecting] body { padding-bottom: 64px; } .redirect-bar { height: 2px; overflow: hidden; border-radius: 1px; background: var(--line); } .redirect-bar span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; } [data-redirecting] .redirect-bar span { animation: redirect-fill var(--redirect-ms, 1500ms) linear forwards; } @keyframes redirect-fill { to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { [data-redirecting] .redirect-bar span { animation: none; transform: scaleX(1); } } .redirect-label { margin: 8px 16px 0; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--dim); } .legal { margin-top: 28px; text-align: center; font-size: 12px; color: var(--dim); } .legal a { color: var(--dim); } /* Short phones (an iPhone SE's Safari viewport is ~553px): keep the buttons above the fold. */ @media (max-height: 700px) { .lockup { font-size: 36px; margin-bottom: 20px; } .story-image { aspect-ratio: 2 / 1; } .story-headline { font-size: 22px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } }