/* ========================================================================== tokens.css — BritBox Apollo design tokens, PHONE -------------------------------------------------------------------------- Source of truth: the Figma variable collection resolved on the two frames this prototype is based on — 5.2b Home Page — Series (Full Rails) 31431:766431 390 x 2383 7.22 Show Page — Episodes 31431:766441 390 x 1890 file VTwXbZhC5eXcRZcW0J4fwF. Values are transcribed verbatim from `get_variable_defs` on those nodes; nothing here is invented. Naming mirrors the Figma variable paths 1:1 so a token traces back to the design file: `color/on-surface` -> `--color-on-surface`. NOTE — the phone collection is NOT the desktop one. Four values differ from demos/home-series-rails/css/theme.britbox.css and the difference is real, not drift: on-surface #e3ddce (desktop: #F8F4EB) surface #002c49 (desktop: #042C39) surface-container #334655 (desktop: #00182B) surface-variant #667480 (desktop: #4A5455) The type ladder is also a step shorter: the phone tops out at body/xl 18px where the desktop reaches 20px. Both are taken from their own frames. ACCENT. BritBox's primary is #a6e2f5 — a pale cyan. The brief's adaptation note says the accent is yellow; that is Streamit's (#ffcc00), which is what the desktop concept ships as its other brand build. The *behaviour* the note asks for is what matters and is honoured throughout: the accent is rationed to progress, active state and one primary action per view, and it carries dark text (--color-on-primary), never white. See source.md. ========================================================================== */ :root { /* ---- Colour ---------------------------------------------------------- */ --color-background: #00182b; /* color/background */ --color-background-0: rgba(0, 24, 43, 0); --color-surface: #002c49; /* color/surface */ --color-surface-container: #334655; /* color/surface-container */ --color-surface-variant: #667480; /* color/surface-variant */ --color-on-surface: #e3ddce; /* color/on-surface */ --color-on-surface-variant: #aaa8a1; /* color/on-surface-variant */ --color-outline: #aaa8a1; /* color/outline */ --color-primary: #a6e2f5; /* color/primary */ --color-primary-muted: #28cffb; /* color/primary-muted */ --color-primary-30: rgba(27, 180, 231, 0.3); /* color/primary@30 */ --color-on-primary: #00182b; /* color/on-primary */ --color-overlay: rgba(6, 9, 45, 0.7); /* color/overlay */ --color-overlay-variant: rgba(0, 0, 0, 0.3); /* color/overlay-variant */ --color-white-80: rgba(255, 255, 255, 0.8); --color-white-50: rgba(255, 255, 255, 0.5); --color-white-20: rgba(255, 255, 255, 0.2); --color-white-5: rgba(255, 255, 255, 0.05); /* Not in the collection. The hairline between list rows is drawn on the Figma canvas as a 1px line of on-surface at low alpha; measured off the Cast & Crew frame (31431:766490) at 1:1 and written down here rather than repeated as a literal in six component rules. */ --color-hairline: rgba(227, 221, 206, 0.12); /* ---- Typography ------------------------------------------------------ */ --type-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --type-body-xl-size: 18px; /* type/body/xl/size */ --type-body-l-size: 16px; /* type/body/l/size */ --type-body-m-size: 14px; /* type/body/m/size */ --type-body-s-size: 12px; /* type/body/s/size */ --type-body-xs-size: 10px; /* type/body/xs/size */ --type-body-2xs-size: 8px; /* type/body/2xs/size — grid-card labels only */ --type-weight-regular: 400; --type-weight-semi-bold: 600; --type-line-height: 1.5; /* ---- Spacing --------------------------------------------------------- */ --space-2xs: 2px; --space-xs: 4px; --space-s: 8px; --space-m: 12px; --space-l: 16px; --space-xl: 20px; --space-2xl: 24px; --space-3xl: 32px; /* not in the collection; 2 x space/l, used for the gaps between a screen's major sections */ /* ---- Radius ---------------------------------------------------------- */ --radius-2xs: 2px; --radius-xs: 4px; --radius-s: 8px; --radius-l: 20px; --radius-full: 9999px; /* ---- Component sizes ------------------------------------------------- */ --icon-xs: 20px; /* component/icon/xs */ --icon-s: 24px; /* component/icon/s */ --icon-m: 32px; /* component/icon/m */ --icon-l: 48px; /* component/icon/l */ --avatar-xs: 32px; /* component/avatar/xs */ --card-2x3-width: 144px; /* component/card/2:3 default/width */ --card-2x3-height: 216px; /* component/card/2:3 default/height */ --card-16x9-height: 144px; /* component/card/16:9 default/height */ /* ---- Frame geometry -------------------------------------------------- */ --frame-width: 390px; /* the artboard both frames are drawn at */ --frame-height: 844px; /* the device that artboard is cut from */ --frame-gutter: 16px; /* space/l — 358px of content inside 390 */ --statusbar-height: 47px; --home-indicator: 32px; --hero-height: 520px; /* component/hero/ios-3:4-height */ /* ---- The stage -------------------------------------------------------- Not product colour. The screen is shown inside a flat simulation of the handset rather than filling the browser, and this is the ground that device sits on. */ --stage-ground: #070d14; /* The tab bar's selected state is an iOS system blue, specified on the component itself (31431:766439 → #0091ff). Deliberately NOT the brand accent: the platform owns the tab bar, and taking it for the brand would spend the accent budget on the one control that is on screen always. */ --tab-selected: #0091ff; /* ---- Motion ----------------------------------------------------------- Carried over from the desktop concept's tokens.css so the two prototypes move alike. Only the values this build actually uses are repeated here. */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-grow: cubic-bezier(0.22, 0.8, 0.28, 1); --ease-morph-in: cubic-bezier(0.34, 0.02, 0.16, 1); --dur-fast: 0.18s; --dur-base: 0.28s; --dur-sheet: 0.38s; --dur-arrive: 0.52s; /* a card landing in the thread */ /* A tab change is a horizontal movement, so it is animated as one: the indicator travels, the strip scrolls the selection into the middle, and the panel slides in from the side the new tab sits on. Long enough to read as travel, short enough that nobody waits for it. */ /* Arrival. Slow and shallow: 16px over 0.62s on a long ease-out is a settle; the same distance over 0.25s is a twitch. */ --dur-rise: 0.52s; --ease-rise: cubic-bezier(0.16, 0.84, 0.28, 1); --stagger-rise: 0.06s; /* between blocks */ --stagger-item: 0.04s; /* between the items INSIDE a block — the ripple */ /* A screen change is the largest movement in the prototype, so it is the slowest. Half a second reads as a considered move; the 0.28 it shared with everything else read as a cut. */ --dur-screen: 0.42s; --ease-screen: cubic-bezier(0.22, 0.72, 0.2, 1); /* Artwork resolves rather than appearing. Long, because an image snapping in is the one thing that makes a soft arrival look cheap. */ --dur-media: 0.5s; --dur-tab: 0.34s; --ease-tab: cubic-bezier(0.32, 0.72, 0.24, 1); /* The beat between one card arriving and the next. Long enough that two arrivals never read as one event; see js/companion.js, which drives the schedule on setInterval rather than rAF so a backgrounded tab does not come back frozen mid-episode. */ --stagger: 0.09s; /* ---- Companion -------------------------------------------------------- The accent is rationed: progress, active state, and one primary action per view. These three slots are the whole of it, named so a component sheet never reaches for --color-primary directly and quietly widens the budget. */ --accent-progress: var(--color-primary); --accent-active: var(--color-primary); --accent-action: var(--color-primary); /* Every lens gets the SAME accent. The lens is identified by its icon and its name, never by a colour of its own — six hues would undo the rationing the whole palette depends on. */ --lens-tint: rgba(166, 226, 245, 0.10); /* ---- The companion's ground ------------------------------------------- A DOCUMENTED DEVIATION, and the only one in this file. The title screen is the design file and uses `color/surface` (#002c49) exactly as drawn. The companion is not in the design file: it is twenty cards deep on one scroll, and twenty cards of #002c49 on #00182b is a screen with no colour in it but blue — which is what it looked like. This is the same surface rotated off the blue primary towards a neutral slate, at the same lightness. It reads as the same family beside the title page and stops the thread being monochrome. The accent, the text and every other token are untouched. */ --companion-surface: #16262f; --companion-raised: #1d313b; /* ---- Shadow ----------------------------------------------------------- One scale, three steps. The cards were carrying 0.3 alpha at 24px blur, which on a ground this dark is a black halo rather than a shadow — it made the edges look cut out. Lower alpha, wider blur, and a second very short shadow to keep the contact edge. */ --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.14), 0 6px 20px rgba(0, 0, 0, 0.16); --shadow-raise: 0 2px 4px rgba(0, 0, 0, 0.14), 0 12px 32px rgba(0, 0, 0, 0.20); --shadow-sheet: 0 -2px 8px rgba(0, 0, 0, 0.14), 0 -16px 48px rgba(0, 0, 0, 0.28); --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.055); /* ---- Hero masks ------------------------------------------------------- Transcribed stop for stop from the frames' own alpha masks: hero-mask-3x4.svg 390 x 520 home hero and the brand block hero-mask-2x3.svg 390 x 585 the detail hero They are kept here rather than in app.css because both are DATA taken from the file, not styling decisions. */ --mask-3x4: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 5%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 0) 100%); --mask-2x3: linear-gradient(to bottom, rgba(0, 0, 0, 1) 30.29%, rgba(0, 0, 0, 0.4377) 50%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0) 100%); /* ---- Image slots ------------------------------------------------------ The placeholder every image slot falls back to. A missing file leaves a quiet tonal panel rather than a dead box, and the real artwork layers OVER it — see .media in app.css. */ --ph: linear-gradient(145deg, #0d2b41 0%, #123a52 46%, #0a2136 100%); }