/* ========================================================================== OTN theme: LIGHT mode (DESIGN.md 2.2), ported from the mockups' assets/css/theme-light.css. The owner's decision (2026-10-20): "light/dark mode, default is to follow system light or dark, toggle at the bottom of the website". Dark is the "OTN On Air" design (tokens.css). Light: white pages, navy text, SU Orange actions, Dark Orange links, a navy focus ring; black kept only behind video and stills; the LIVE bar, the cookie notice and the inside of every player stay dark ("dark parts", tokens.css). Loads right after tokens.css. This file holds TOKENS ONLY: every component reads its colours from the role tokens, so switching these values switches the whole site, with no component rules here. Which mode shows: light: the visitor chose it, or (no saved choice) the device is set to light. Set by theme.js before the page is drawn. dark, whatever the device says. no attribute (no JavaScript) the device setting decides, through the media query below. So the light values are written twice, once for each way in. THE TWO BLOCKS MUST STAY IDENTICAL: change one, copy it to the other. Every text pair used on a light page, with its WCAG 2.x contrast: #000E54 on #FFFFFF 17.63:1 body text, headings, kickers, nav, footer, table cells, labels, field text, error messages, ghost buttons, the light/dark switch #D74100 on #FFFFFF 4.52:1 SU's link colour on light backgrounds; always underlined #F76900 on #FFFFFF 3.01:1 LARGE text only: the "24.2" numerals #FFFFFF on #000E54 17.63:1 hover fills, the schedule's header row, the alumni name super bar #000E54 on #F76900 5.86:1 primary buttons, fact chips, super roles, initials, skip link, chip hover #000E54 on #FF8E00 7.66:1 primary button hover #000E54 on #FF431B 5.10:1 primary pressed, LIVE badge In the dark parts (unchanged): #FFFFFF on #203299 10.62:1 (LIVE bar, cookie notice), #FFFFFF on #000E54 17.63:1 (play label, live strap). Non-text: navy focus ring 17.63:1; Medium Gray field borders 4.53:1; Medium Orange error borders 3.46:1; SU Orange bars, icons and the "On now" frame 3.01:1; Light Gray hairlines and edges 2.12:1, decorative only. ========================================================================== */ /* -------------------------------------------------------------------------- 1. The device is set to light, and the visitor hasn't chosen dark (also what shows when JavaScript is off) -------------------------------------------------------------------------- */ @media (prefers-color-scheme: light) { :root:not([data-otn-theme="dark"]) { color-scheme: light; /* Surfaces: white. #203299 bands, cards, tiles and chips become white with an edge (--otn-edge); --otn-screen (black behind pictures) and the oranges keep their values */ --otn-bg: var(--su-white); --otn-raised: var(--su-white); /* Text */ --otn-text: var(--su-primary-blue); /* 17.63:1 */ --otn-link: var(--su-dark-orange); /* 4.52:1, always underlined */ --otn-link-hover: var(--su-primary-blue); /* 17.63:1, still underlined */ --otn-link-on-raised: var(--su-dark-orange); /* links on cards, callouts, bands */ --otn-kicker: var(--su-primary-blue); /* Light Orange is 2.30:1 on white */ --otn-error-text: var(--su-primary-blue); /* "Error: ..." messages, with a Medium Orange bar */ /* Lines and focus */ --otn-rule: var(--su-light-gray); /* hairlines, decorative (2.12:1) */ --otn-rule-on-raised: var(--su-light-gray); --otn-field-border: var(--su-medium-gray); /* 4.53:1; navy on hover and focus */ --otn-focus: var(--su-primary-blue); /* 17.63:1; same 3px width and offsets */ /* Fills, edges and alerts */ --otn-fill: var(--su-primary-blue); /* hover fills, table header, name super: white text 17.63:1 */ --otn-fill-on-raised: var(--su-primary-blue); --otn-edge: var(--su-light-gray); --otn-edge-w: 1px; --otn-alert-w: 4px; --otn-chip-edge: var(--su-primary-blue); --otn-scroll-thumb: var(--su-primary-blue); /* 8.33:1 on its track */ --otn-scroll-track: var(--su-light-gray); /* Borders and shadows (re-declared so they pick up the values above) */ --otn-border-hair: 1px solid var(--otn-rule); --otn-border-field: 2px solid var(--otn-field-border); --otn-shadow-menu: 0 12px 32px rgb(0 0 0 / 0.25); --otn-shadow-panel: none; /* billboard panel: an edge instead */ /* Page-level: the logo pictures for light mode (navy letters), the divider, the skip link's halo */ --otn-show-on-dark: none; --otn-show-on-light: inline-block; --otn-brand-divider: rgb(0 14 84 / 0.35); --otn-skip-halo: var(--su-white); } } /* -------------------------------------------------------------------------- 2. The page is set to light by theme.js (the visitor's choice, or the device's setting when nothing is saved). IDENTICAL to block 1. -------------------------------------------------------------------------- */ :root[data-otn-theme="light"] { color-scheme: light; /* Surfaces */ --otn-bg: var(--su-white); --otn-raised: var(--su-white); /* Text */ --otn-text: var(--su-primary-blue); --otn-link: var(--su-dark-orange); --otn-link-hover: var(--su-primary-blue); --otn-link-on-raised: var(--su-dark-orange); --otn-kicker: var(--su-primary-blue); --otn-error-text: var(--su-primary-blue); /* Lines and focus */ --otn-rule: var(--su-light-gray); --otn-rule-on-raised: var(--su-light-gray); --otn-field-border: var(--su-medium-gray); --otn-focus: var(--su-primary-blue); /* Fills, edges and alerts */ --otn-fill: var(--su-primary-blue); --otn-fill-on-raised: var(--su-primary-blue); --otn-edge: var(--su-light-gray); --otn-edge-w: 1px; --otn-alert-w: 4px; --otn-chip-edge: var(--su-primary-blue); --otn-scroll-thumb: var(--su-primary-blue); --otn-scroll-track: var(--su-light-gray); /* Borders and shadows */ --otn-border-hair: 1px solid var(--otn-rule); --otn-border-field: 2px solid var(--otn-field-border); --otn-shadow-menu: 0 12px 32px rgb(0 0 0 / 0.25); --otn-shadow-panel: none; /* Page-level */ --otn-show-on-dark: none; --otn-show-on-light: inline-block; --otn-brand-divider: rgb(0 14 84 / 0.35); --otn-skip-halo: var(--su-white); }