/* Archive TV: design tokens and base styles. The TV's browser has no CSS custom properties (var(--x)), so tokens work like this: - The TOKENS table below is the single source of truth for colors, fonts, type sizes, radii, shadows, motion and spacing. - Every CSS line that uses a token value names it in a trailing comment: color: #f2b544; /* @accent *\/ (one token-using declaration per line; several tokens on one line are listed in order). - node tools/check-tokens.js checks every annotated value matches the table, and that no color/size/radius/shadow/duration/spacing/font is used without a token. - node tools/check-tokens.js --fix rewrites annotated values from the table. To restyle, edit a value here, then run --fix. Colors should read well both normally and inverted: the TV's High Contrast setting inverts page colors. TOKENS name value use -- color -- bg #0e1014 page background bg-scrim rgba(14, 16, 20, 0.85) row ‹ › buttons over thumbnails (bg at 85%) surface-1 #181b22 episode rows surface-2 #1d2129 thumbnail and poster placeholders, search field surface-3 #232730 buttons on pages scrim-tile rgba(0, 0, 0, 0.85) bottom of big first-row thumbnails, under the title (a gradient from clear) surface-3-scrim rgba(0, 0, 0, 0.6) buttons over video, fill and edge (black 60%: the most readable with High Contrast on and off, tested on the TV with /g) surface-1-focus #2a303b focused episode row focus-bg #fff focused button: solid fill (every button, on pages and over video) on-focus #000 text and icons on a focused button on-accent #000 text and icons on primary buttons (accent fill) line #3a3f4a progress bar track, search field border text #eef0f3 body text text-2 #c9ced8 secondary text: row titles, tile titles, descriptions text-3 #8a92a2 muted text: years, counts, episode numbers, status, brand tagline text-bright #fff focused tile title, player text, row ‹ › glyphs focus-ring #fff ring around a focused tile, episode row, search field or season tab accent #6bffef progress, "See all ›" and More tiles, primary buttons (fill; shows as deep red under High Contrast) video-bg #000 player background scrim-clear rgba(0, 0, 0, 0) top of the player controls gradient scrim rgba(0, 0, 0, 0.85) bottom of the player controls gradient caption-bg rgba(0, 0, 0, 0.75) subtitle background -- font -- font "League Spartan", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif all text (League Spartan is a web font in fonts/, 400 600 700; the rest are fallbacks) -- type -- root 20px root font size (1rem) at 1920 wide and up root-md 16px root font size up to 1400 wide root-sm 13px root font size up to 1000 wide size-xs 0.85rem tile year, brand tagline size-sm 1rem tile titles, small buttons, details, player times size-md 1.1rem buttons, episode rows, status text size-lg 1.2rem player controls, empty states size-xl 1.35rem row titles, search field, "See all" tile, player message buttons size-2xl 1.6rem player title and messages, subtitles size-3xl 1.8rem page titles size-4xl 2rem not used now (was the text brand; the brand is img/logo.svg) size-5xl 2.2rem show title size-glyph 2.6rem row ‹ › glyphs -- radius -- radius-sm 0.2rem progress bars radius-md 0.4rem row ‹ › buttons radius-lg 0.5rem buttons, tiles, fields, episode rows radius-xl 0.6rem show poster radius-round 50% round player controls (IconButton circles) radius-pill 999px pill buttons: over video (Exit, Show page, messages, Up next) and "See all ›" -- border width -- border-width 0.15rem buttons, search field, episode rows (transparent until focused on buttons) border-width-thumb 0.2rem ring around a focused thumbnail border-width-overlay 0.2rem buttons over video: the glass edge that shows as a ring on focus -- opacity -- opacity-disabled 0.4 a button that can't be used now (player Prev/Next at the first/last episode) -- shadow -- shadow-focus 0 0.4rem 1.6rem rgba(0,0,0,0.6) focused tile shadow-text 0 0.1rem 0.4rem #000 player message over video -- motion (CSS) -- motion-fast 0.12s focus scale motion-slow 0.3s player controls fade -- spacing -- gutter 3rem left/right screen-edge margin: top bar, rows, grids, search, page messages, show page, player space-0-2 0.2rem player: above the episode line space-0-3 0.3rem small button padding (top/bottom); above progress bars on tiles and in the player space-0-4 0.4rem icon to label in buttons; above page titles and the search bar; under the show title and season tabs space-0-45 0.45rem above tile titles; between episode rows space-0-5 0.5rem player: above the times space-0-6 0.6rem button padding (top/bottom); under the top bar and row titles; above row tiles and grids; search field; status messages; between season tabs space-0-7 0.7rem large button and episode row padding (top/bottom) space-0-8 0.8rem between buttons; xl button padding (top/bottom); under page titles; under show details space-0-9 0.9rem player: under the episode line space-1 1rem between tiles; small button, search field and episode row padding (sides); page messages; above the show page; above the player buttons space-1-2 1.2rem before "See all"; before My shows; under the show description; above player message buttons space-1-4 1.4rem button padding (sides); under the show page actions space-1-6 1.6rem above the top bar; between grid lines space-1-8 1.8rem xl button padding (sides) space-2 2rem under grids; under row tiles (room for a focused tile's second title line); player: above the top controls, under the bottom controls space-2-5 2.5rem show poster to text space-3 3rem under the show page; player: under the top controls' fade, above the bottom panel icon-overhang -0.1em icons in buttons, above and below: a 1em icon is taller than the label line ENDTOKENS Spacing tokens record the values in use when they were added (2026-09-30), one per value; they are not a designed scale yet. 3rem at the left/right screen edge is @gutter; elsewhere it is @space-3. Not linted, but keep to these: - Focus: buttons fill solid (@focus-bg, @on-focus); tiles, episode rows, the search field and season tabs get a @focus-ring border instead. Plus scale(1.05) on buttons or scale(1.08) on tiles. - Motion in JavaScript: row scroll 220 ms (ATV.config.ROW_SCROLL_MS), controls hide after 4 s (ATV.config.OSD_HIDE_MS). - Focus follows the pointer (platform/focus.js focuses whatever .focusable is hovered), so style :focus only; hover then looks the same. The search field is the exception (focusing it opens the TV keyboard): style :hover too. */ /* League Spartan (SIL Open Font License, fonts/OFL-league-spartan.txt), the weights the app uses. Latin covers most titles; Latin Extended (macrons like "Shōgun", Eastern European accents) downloads only when a title needs it. Other scripts fall back to the TV's own font. The TV loads woff2 (tested with fonts.html). */ @font-face { font-family: "League Spartan"; font-weight: 400; src: url(../fonts/league-spartan-400.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: "League Spartan"; font-weight: 600; src: url(../fonts/league-spartan-600.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: "League Spartan"; font-weight: 700; src: url(../fonts/league-spartan-700.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: "League Spartan"; font-weight: 400; src: url(../fonts/league-spartan-400-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "League Spartan"; font-weight: 600; src: url(../fonts/league-spartan-600-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "League Spartan"; font-weight: 700; src: url(../fonts/league-spartan-700-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } html { font-size: 20px; } /* @root */ @media (max-width: 1400px) { html { font-size: 16px; } } /* @root-md */ @media (max-width: 1000px) { html { font-size: 13px; } } /* @root-sm */ * { box-sizing: border-box; } body { margin: 0; background: #0e1014; /* @bg */ color: #eef0f3; /* @text */ font-family: "League Spartan", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* @font */ overflow-x: hidden; } a { color: inherit; text-decoration: none; } button, input { font: inherit; color: inherit; } .focusable { outline: none; }