/* ══ OIA BRAND — the ONE token file for every public Oakley Icon Alliance surface ══ Lane OIAB2 (Oct 20 2026). Source of truth: Oakley's OIA Brand Trademark Guidelines (docs/oia-brand/OIA_BRAND_RULES.md, rules R1–R38 with page cites) and Carlos: "fonts and colors and any sort of specialty accents". Loaded LAST in by every OIA public page and embed, the watch app, the tech popup, the event hub's OIA skin (api/public/event-page.js injects it for oia-* slugs and marks ), and the gated oakley/* and oia/* pages. Every selector here is prefixed `html:root` so it outranks each page's own :root tokens (0,1,1 over 0,1,0) whatever the load order — the pages' type roles (--wide/--chy/--text/--num/--sans, --font-display/--font- body/--font-stats) and colour roles (--gold/--gold-hi/--gold-ink/--gun) are re-pointed here, never edited one rule at a time. TYPE (R3, the deck's own faces: Avenir Next Heavy/Bold/Regular, Avenir Medium) --oia-display Avenir Next on Apple devices, Nunito Sans everywhere else — 800 (Heavy) UPPERCASE for display and section titles, 700 (Bold) for subheads and the letter-spaced label tier. --oia-body the same family, 400/500. Numerals: the same face with tabular figures. Orbitron is retired on OIA public surfaces — a house-law exception for OIA (platform-css.md says Orbitron for numerals); the PROTECTED broadcast game card keeps its own. COLOUR (R10–R13): gold #B79E31 · Cool Gray 11 #54565A · black · white. Tints are opacity of these, never a new hex. Day theme: gold stays a FILL/RULE colour; gold TEXT becomes Cool Gray (--gold-ink) so it reads on bone. ACCENTS (p2–17): the thin gold rule leading a title, gold edge bars, tracked uppercase labels, clean geometric lines. No glows, gradients, shadows or 3D on any OIA element (R17, R36). LOGO (R6, R14, R16): ≥ 80 px tall (= 72 px wide for the 800×872 raster) or the words "Oakley Icon Alliance"; clear space ¼ H; never ghosted, grayscaled, faded or shadowed; on a light theme it sits on a black tile. Gate: scripts/audit-oia-brand.js (--selftest proves it can go red). ═══════════════════════════════════════════════════════════════════════════ */ html:root{ /* the palette */ --oia-gold:#B79E31; --oia-gray:#54565A; --oia-black:#000000; --oia-white:#FFFFFF; /* the faces */ --oia-display:"Avenir Next","Avenir","Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --oia-body:"Avenir Next","Avenir","Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif; /* every surface's type roles, re-pointed */ --wide:var(--oia-display); /* was Syncopate — display caps */ --chy:var(--oia-display); /* was Oswald — tracked labels */ --text:var(--oia-body); /* was Manrope — sub-text */ --num:var(--oia-display); /* was Orbitron — numerals */ --sans:var(--oia-body); /* was Montserrat — the watch app */ --font-display:var(--oia-display); /* the event hub (chargers template) */ --font-body:var(--oia-body); --font-stats:var(--oia-display); /* every surface's colour roles, re-pointed */ --gold:var(--oia-gold); --gold-hi:var(--oia-gold); /* the #E2C766 tint is retired */ --gold-ink:var(--oia-gold); /* gold as TEXT (night) */ --gun:var(--oia-gray); --oia-gold-badge:var(--oia-gold); } /* The event hub's broadcast skin (chargers-invitational/css/broadcast.css) names its own faces as --bx-* under html[data-ev-skin="broadcast"] (0,1,1) and is appended AFTER this file, so the --wide/--chy re-points above never reached it: the hub, watch and info pages kept Syncopate/Oswald/Manrope (Oct 21, Carlos: "the before and after look exactly the same"). html:root[data-oia-brand] is (0,2,1) and wins whatever the order. */ html:root[data-oia-brand]{ --bx-wide:var(--oia-display); --bx-chy:var(--oia-display); --bx-text:var(--oia-body); --bx-gun:var(--oia-gray); } /* The hub's watch page draws the score and play-by-play with game.css, whose rules name their faces directly (Saira/Rajdhani/Oswald/Orbitron) rather than through a token. Same family for every role, so one rule re-points them all; each rule's own weight and size stand. */ html:root[data-oia-brand] .team-logo-fallback-v2, html:root[data-oia-brand] .team-name-v2, html:root[data-oia-brand] .team-score-v2, html:root[data-oia-brand] .vs-text, html:root[data-oia-brand] .live-text, html:root[data-oia-brand] .clock-v2, html:root[data-oia-brand] .quarter-v2, html:root[data-oia-brand] .down-distance-v2, html:root[data-oia-brand] .ph-q-header, html:root[data-oia-brand] .ph-clock, html:root[data-oia-brand] .ph-who, html:root[data-oia-brand] .ph-what, html:root[data-oia-brand] .ph-detail, html:root[data-oia-brand] .ph-yards, html:root[data-oia-brand] .ph-score-headline, html:root[data-oia-brand] .ph-running-num, html:root[data-oia-brand] .ph-running-sep, html:root[data-oia-brand] .bc-ticker-brand, html:root[data-oia-brand] .bc-ticker-strip, html:root[data-oia-brand] .timeout-flag, html:root[data-oia-brand] .fp-text{font-family:var(--oia-display)} /* Day: gold keeps fills and rules; gold text goes Cool Gray so it reads on bone. */ html:root[data-oia-theme="day"]{ --gold:var(--oia-gold); --gold-hi:var(--oia-gold); --gold-ink:var(--oia-gray); } /* The tech dialog declares its faces on the element; same values, re-pointed. */ html:root .tp,html:root .sci{--wide:var(--oia-display);--chy:var(--oia-display);--text:var(--oia-body)} /* ── TYPE VOICE ───────────────────────────────────────────────────────────── */ html:root body{font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased} html:root .wide{font-weight:800;letter-spacing:.02em} html:root .chy{font-weight:700;letter-spacing:.16em} /* Orbitron was proportional, so the watch app boxed each live digit; tabular figures make the cell honest again */ html:root .dgo{width:auto;min-width:.62em} /* The slate rows were set for condensed Oswald; the brand face is wide, so the team name and the where-line give back their tracking (not their size) and the name never clips its cell (scripts/test-oia-embeds-in-host.js measures scrollWidth on every name cell at 320 / 820 / 1180). */ html:root .tm2 b{font-weight:700;font-size:14px;letter-spacing:.03em} html:root .tm2 small{letter-spacing:.08em} html:root .row .where,html:root .where{letter-spacing:.06em} html:root .row .when small{letter-spacing:.08em} html:root .row .v{letter-spacing:.12em} /* The alliance map's stop labels were set for condensed caps; at 768 the wide face made three of them collide (in-host gate: "map labels … colliding"). */ html:root .al-stop text{font-size:16px;letter-spacing:0} html:root .al-stop text.sub{font-size:12px;letter-spacing:.05em} html:root .al-nm{letter-spacing:.04em} html:root .al-nm small{letter-spacing:.1em} /* no glow on the current stop (R17) — the gold fill alone says "here" */ html:root .al-stop.east rect{filter:none} /* ── SPECIALTY ACCENTS ────────────────────────────────────────────────────── */ /* the thin gold rule that leads a section title (deck pp. 2–15: "— TITLE") */ html:root .oia-rule-title{position:relative;padding-left:56px} html:root .oia-rule-title::before{content:"";position:absolute;left:0;top:.55em;width:40px;height:2px;background:var(--oia-gold)} /* gold top/bottom edge bars (every deck page carries one) */ html:root .oia-edge-top{border-top:6px solid var(--oia-gold)} html:root .oia-edge-bottom{border-bottom:6px solid var(--oia-gold)} /* the tracked uppercase label tier */ html:root .oia-label{font:700 11px/1 var(--oia-display);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)} /* ── THE MARK ─────────────────────────────────────────────────────────────── */ /* Never ghosted, faded, shadowed or recoloured — wherever it is painted. */ html:root img[src*="icon-alliance-logo"], html:root img[src*="oakley-icon-alliance"], html:root img[src*="/leagues/7052671a-9a19-4eae-ae7f-090d9ebd1ef4/logo.png"]{ opacity:1;filter:none;mix-blend-mode:normal;box-shadow:none;animation:none;object-fit:contain} /* Below 80 px tall the mark is illegible (R14): these slots carry the words instead. */ html:root .back img[src*="icon-alliance-logo"], /* watch app top bar */ html:root .rhead .back img[src*="icon-alliance-logo"], html:root .tp-k img[src*="icon-alliance-logo"], /* tech dialog kicker */ html:root .lockup img.badge, /* oakley/* nav */ html:root .bx-lockup img.bx-badge, /* event hub nav */ html:root .wtb-logo{display:none} html:root .back .l1{display:inline} html:root .lockup::before,html:root .bx-lockup::before{content:"Oakley Icon Alliance";font:800 12px/1 var(--oia-display);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);margin-right:12px} /* The slots that can hold a real mark hold it at 80 px with ¼ H of clear space. */ html:root .mast .mark,html:root .mast .mark img{width:74px;height:80px;flex:0 0 74px} html:root .mast{gap:20px} html:root .fmeta img.badge,html:root .bx-fmeta img.bx-badge{width:74px;height:80px;margin:0 20px} html:root .fmeta,html:root .bx-fmeta{gap:20px} html:root .vs,html:root .bx-vs{width:clamp(80px,7vw,92px);opacity:1;filter:none} html:root .tc-pic.tc-road{background:var(--oia-black)} html:root .tc-pic.tc-road img{width:74px;height:80px;padding:20px;box-sizing:content-box} html:root .alliance .pbadge,html:root .partner .pbadge{width:74px;height:80px;margin:20px} html:root .pp-photo.logo img[src*="oakley-icon-alliance"]{background:var(--oia-black);padding:20px} /* A TBD bracket seat never wears the OIA mark as a placeholder (R16). */ html:root .oia-bracket .pbx-vcrest-tbd{display:none} /* On a light theme the reverse mark sits on a black tile (p10's reverse example is a black field). */ html:root[data-oia-theme="day"] img[src*="icon-alliance-logo"], html:root[data-theme="light"] img[src*="/leagues/7052671a-9a19-4eae-ae7f-090d9ebd1ef4/logo.png"]{ background:var(--oia-black);padding:20px;box-sizing:content-box;border-radius:0} html:root[data-oia-theme="day"] .mast .mark{width:auto;height:auto;flex:0 0 auto} /* ── NO GLOW, NO GRADIENT, NO SHADOW on OIA elements ─────────────────────── */ html:root .fintag,html:root .livetag,html:root .btn,html:root .seg,html:root .chip{box-shadow:none;text-shadow:none}