/* ============================================================================ MARGINOX — brand theme (2026 rebrand) · assets/theme.css ---------------------------------------------------------------------------- HOW THIS WORKS (and how to revert) Every Marginox page already styles itself with CSS variables (--bg, --card, --t2, --grn ...). This file does NOT touch markup or logic: it simply re-points those existing variable names at the new brand palette, for both light and dark. Delete the to this file and the app returns to the old navy theme exactly as it was. Theme is chosen by or "dark". Default is LIGHT. The choice is stored in localStorage['mx_theme']. ONE accent (Ember/Signal orange). Red is reserved for genuine danger only (destructive actions, failures, admin/owner surfaces). ============================================================================ */ /* ---------- self-hosted brand font (CC0) ---------- */ @font-face{font-family:'Aileron';src:url('/assets/brand/fonts/Aileron-Regular.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Aileron';src:url('/assets/brand/fonts/Aileron-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'Aileron';src:url('/assets/brand/fonts/Aileron-SemiBold.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Aileron';src:url('/assets/brand/fonts/Aileron-SemiBold.woff2') format('woff2');font-weight:800;font-display:swap} :root{ /* raw brand colours — never referenced directly by components */ --mx-porcelain:#F7F4EE; --mx-white:#FFFFFF; --mx-graphite:#20262A; --mx-ember:#E65A0A; --mx-warm-stone:#C8BDB0; --mx-ink:#0D1114; --mx-charcoal:#1A2024; --mx-soft-white:#F2F0EA; --mx-signal:#FF6810; --mx-slate:#39434A; /* danger is deliberately NOT the accent: it must never read as "normal" */ --mx-danger:#C4331D; --mx-danger-dark:#FF5A45; } /* ========================================================================== LIGHT (default) ========================================================================== */ :root, html[data-theme="light"]{ color-scheme:light; /* surfaces */ --bg:var(--mx-porcelain); --bg2:#F2EEE6; --bg-2:#F2EEE6; --card:var(--mx-white); --card2:#FBF9F5; --head:var(--mx-white); --sel:#F0EBE2; --glass:rgba(255,255,255,.86); --glass-2:rgba(255,255,255,.92); --glass-3:rgba(255,255,255,.96); --input:var(--mx-white); --well:rgba(32,38,42,.03); --cellbg:rgba(32,38,42,.04); /* text — 4 steps, high contrast on porcelain */ --t:var(--mx-graphite); --t1:var(--mx-graphite); --t2:#5C666D; --t3:#7C858C; --t4:#9AA2A8; --mut:#7C858C; /* lines */ --line:rgba(32,38,42,.12); --line2:rgba(32,38,42,.20); --bdr:rgba(32,38,42,.12); --bdr-hi:rgba(32,38,42,.22); --bdr-f:var(--mx-ember); --steel:rgba(32,38,42,.16); /* Drawer backdrop. On porcelain a 73%-black wash reads as the screen flashing off, so light gets a soft graphite veil instead of a blackout. */ --scrim:rgba(32,38,42,.34); /* The phone's status bar strip is painted from this. It must equal the HEADER, which uses --bg2, not the page background: on an iPhone the strip sits directly above the header, and any difference reads as a seam across the top of the app. */ --chrome:#F2EEE6; /* THE accent (was sky-blue) */ --grn:var(--mx-ember); --grnd:#B8480A; --grn2:rgba(230,90,10,.10); --sky:var(--mx-ember); --sky-bright:#F26B1D; --acc:var(--mx-ember); --b300:var(--mx-ember); --b400:#CF5109; --b500:#B8480A; --gold:var(--mx-ember); --amber:#B26A00; --purple:#6E5BAA; /* data semantics: profit uses the accent, loss/danger uses red */ --green:var(--mx-ember); --green2:#F26B1D; --positive:var(--mx-ember); --lv:var(--mx-ember); --lvd:#B8480A; --lvbg:rgba(230,90,10,.10); --red:var(--mx-danger); /* The ONE real green in the kit (added 2026-07-29 at Alan's request). The ROI a play pays is the single number the whole card exists to deliver, and it had been reading ember on a green wash, because every "positive" token above points at the accent. Scoped to that badge; the accent stays the accent everywhere else. */ --profit:#177C4A; --profit-bg:rgba(23,124,74,.10); --profit-line:rgba(23,124,74,.30); --grad:linear-gradient(135deg,#F26B1D 0%,var(--mx-ember) 60%,#CF5109 100%); --grad-edge:linear-gradient(90deg,transparent,rgba(230,90,10,.55) 50%,transparent); --blur:blur(18px) saturate(1.25); --shadow-md:0 1px 2px rgba(32,38,42,.06),0 10px 30px rgba(32,38,42,.10); --inset-hi:inset 0 1px 0 rgba(255,255,255,.9); } /* ========================================================================== DARK ========================================================================== */ html[data-theme="dark"]{ color-scheme:dark; --bg:var(--mx-ink); --bg2:#11161A; --bg-2:#11161A; --card:var(--mx-charcoal);--card2:#151B1F; --head:#141A1E; --sel:#222B31; --glass:rgba(26,32,36,.78); --glass-2:rgba(26,32,36,.86); --glass-3:rgba(26,32,36,.93); --input:#151B1F; --well:rgba(242,240,234,.03); --cellbg:rgba(242,240,234,.05); --t:var(--mx-soft-white); --t1:var(--mx-soft-white); --t2:#A7B0B7; --t3:#7E888F; --t4:#5E686F; --mut:#7E888F; --line:rgba(242,240,234,.11); --line2:rgba(242,240,234,.19); --bdr:rgba(242,240,234,.11); --bdr-hi:rgba(242,240,234,.22); --bdr-f:var(--mx-signal); --steel:var(--mx-slate); --scrim:rgba(5,8,10,.62); --chrome:#11161A; --grn:var(--mx-signal); --grnd:#C24F0C; --grn2:rgba(255,104,16,.14); --sky:var(--mx-signal); --sky-bright:#FF8342; --acc:var(--mx-signal); --b300:var(--mx-signal); --b400:#E85E0E; --b500:#C24F0C; --gold:var(--mx-signal); --amber:#E0A030; --purple:#A78BFA; --green:var(--mx-signal); --green2:#FF8342; --positive:var(--mx-signal); --lv:var(--mx-signal); --lvd:#C24F0C; --lvbg:rgba(255,104,16,.14); --red:var(--mx-danger-dark); --profit:#3FD68A; --profit-bg:rgba(63,214,138,.13); --profit-line:rgba(63,214,138,.30); --grad:linear-gradient(135deg,#FF8342 0%,var(--mx-signal) 60%,#E85E0E 100%); --grad-edge:linear-gradient(90deg,transparent,rgba(255,104,16,.6) 50%,transparent); --blur:blur(20px) saturate(1.3); --shadow-md:0 1px 2px rgba(0,0,0,.5),0 12px 34px rgba(0,0,0,.5); --inset-hi:inset 0 1px 0 rgba(242,240,234,.08); } /* ========================================================================== Cross-cutting brand rules ========================================================================== */ html,body{background:var(--bg);color:var(--t1); transition:background-color .22s ease,color .22s ease} body{font-family:'Aileron',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif} /* the old display face (Sofia Sans Extra Condensed) was very narrow; Aileron at the same slot reads far better and keeps ONE family across the app */ :root,html[data-theme="dark"]{ --disp:'Aileron',-apple-system,'Segoe UI',Roboto,sans-serif; } /* On a light canvas the app's dark-mode assumptions need a nudge */ html[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(32,38,42,.22)} html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:var(--mx-slate)} ::selection{background:color-mix(in srgb,var(--grn) 26%,transparent);color:var(--t1)} /* focus visibility (accessibility — was inconsistent before) */ :focus-visible{outline:2px solid var(--grn);outline-offset:2px;border-radius:6px} /* ---------- brand lockup in the top bar ---------- */ .mx-logo{height:30px;width:auto;display:block} @media(max-width:640px){.mx-logo{height:26px}} /* ---------- theme toggle button ---------- */ .mx-theme-btn{width:34px;height:34px;min-width:34px;border-radius:50%;display:inline-grid;place-items:center; cursor:pointer;background:transparent;border:1px solid var(--line2);color:var(--t2); transition:color .18s,border-color .18s,background .18s;padding:0} .mx-theme-btn:hover{color:var(--grn);border-color:var(--grn)} .mx-theme-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9} /* ---------- plan chip (always visible) ---------- */ .mx-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--disp);font-size:11px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--grn);background:var(--grn2); border:1px solid color-mix(in srgb,var(--grn) 34%,transparent);padding:5px 10px;border-radius:999px;white-space:nowrap} .mx-chip svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2} .mx-sharp-mark{display:inline-block;flex:none;background:currentColor; -webkit-mask:url('/assets/brand/tier-icons/recommended/sharp-needlepoint.png') center/contain no-repeat; mask:url('/assets/brand/tier-icons/recommended/sharp-needlepoint.png') center/contain no-repeat} .mx-chip .mx-sharp-mark{width:18px;height:18px;margin:-3px -2px -3px -4px} .mx-sharp-mark[hidden]{display:none !important} .mx-plan-badge{margin-left:auto;font-size:10px;color:var(--grn);display:inline-flex;align-items:center;gap:5px} .mx-plan-badge .mx-sharp-mark{width:17px;height:17px;margin:-3px 0} /* ========================================================================== DANGER SURFACES — admin / owner console These are privileged views. They must never look like normal product UI. ========================================================================== */ :root{ --mx-danger-bg:rgba(196,51,29,.07); --mx-danger-line:rgba(196,51,29,.34); } html[data-theme="dark"]{ --mx-danger-bg:rgba(255,90,69,.10); --mx-danger-line:rgba(255,90,69,.36); } /* section in the settings drawer */ .sect.admin-launch, .mx-danger{ border:1px solid var(--mx-danger-line) !important; background:var(--mx-danger-bg) !important; border-radius:12px;padding:12px !important; } .sect.admin-launch h4, .mx-danger h4{color:var(--red) !important} .sect.admin-launch h4::before, .mx-danger h4::before{ content:'';display:inline-block;width:13px;height:13px;margin-right:7px;vertical-align:-2px; background:currentColor; -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } .sect.admin-launch button, .mx-danger button{ background:var(--red) !important;color:#fff !important;border:0 !important;font-weight:700} .sect.admin-launch .admin-hint{color:var(--red) !important;opacity:.85} /* the console itself */ .admin-panel{border:1px solid var(--mx-danger-line) !important; box-shadow:0 0 0 1px var(--mx-danger-line),0 30px 80px rgba(0,0,0,.45) !important} .admin-head{background:var(--mx-danger-bg) !important;border-bottom:1px solid var(--mx-danger-line) !important} .admin-head h2{color:var(--red) !important} .admin-role-chip{background:var(--red) !important;color:#fff !important;border-color:var(--red) !important} /* admin preview switcher lives in Settings → Plan and is equally privileged */ .previewbox{border:1px dashed var(--mx-danger-line) !important;background:var(--mx-danger-bg) !important;border-radius:12px} .pvlabel{color:var(--red) !important} /* Admin-only pages get a persistent stripe so you always know where you are */ .mx-danger-rail{position:fixed;inset:0 auto 0 0;width:3px;background:var(--red);z-index:999;pointer-events:none} /* ========================================================================== LIGHT-MODE REPAIRS Some components hardcode dark translucent panels (rgba(8,16,32,…)) instead of using a token, so they stay dark-on-light. These rules give those components a proper light surface. Dark mode is untouched. ========================================================================== */ /* --- brand lockup: the old wordmark was a blue gradient clipped to text --- NOT scoped to light. It used to be, which meant the pre-rebrand blue gradient on the auth-family pages still won in DARK mode and the login screen showed a blue "Marginox". The gradient is now gone from those pages too, but this stays unconditional so a stray copy can never repaint the wordmark off-brand. */ .brand span{ background:none !important;-webkit-text-fill-color:var(--t1) !important; color:var(--t1) !important;animation:none !important} /* --- auth / verify / forgot / reset / checkout / success --- */ html[data-theme="light"] .card{ background:var(--card) !important;border-color:var(--line) !important; backdrop-filter:none !important;-webkit-backdrop-filter:none !important; box-shadow:var(--shadow-md) !important} html[data-theme="light"] .tabs{background:#EFEAE1 !important;border:1px solid var(--line)} html[data-theme="light"] .tab{color:var(--t3)} html[data-theme="light"] .tab.active{ background:var(--card) !important;color:var(--t1) !important; box-shadow:0 1px 3px rgba(32,38,42,.14) !important} html[data-theme="light"] .field input, html[data-theme="light"] .field textarea, html[data-theme="light"] input[type=text], html[data-theme="light"] input[type=email], html[data-theme="light"] input[type=password], html[data-theme="light"] input[type=number], html[data-theme="light"] input[type=search], html[data-theme="light"] select, html[data-theme="light"] textarea{ background:var(--card) !important;color:var(--t1) !important;border-color:var(--line) !important} html[data-theme="light"] ::placeholder{color:var(--t4) !important;opacity:1} html[data-theme="light"] .agree input[type=checkbox]{ background:var(--card) !important;border-color:var(--line2) !important} html[data-theme="light"] .agree input[type=checkbox]:checked{ background:var(--grn) !important;border-color:var(--grn) !important} html[data-theme="light"] .btn{color:#fff !important} /* --- desk: panels that assumed a dark canvas --- */ html[data-theme="light"] .top{background:var(--card) !important;border-bottom:1px solid var(--line) !important} html[data-theme="light"] #rail, html[data-theme="light"] #nav, html[data-theme="light"] #drawer, html[data-theme="light"] .sheet{background:var(--card) !important;border-color:var(--line) !important} html[data-theme="light"] .navitem, html[data-theme="light"] .rail-item{color:var(--t2)} html[data-theme="light"] .navitem.on, html[data-theme="light"] .rail-item.on{background:var(--grn2) !important;color:var(--grn) !important} html[data-theme="light"] .wm{color:var(--t1) !important} /* The live PNG is white/orange for the dark rail. Collapse it to graphite on the porcelain theme so the white broadcast arcs never disappear. */ html[data-theme="light"] .live-nav-mark{filter:brightness(0) saturate(100%);opacity:.76} /* --- promo tool (index.html) glass stack --- */ html[data-theme="light"] .glass, html[data-theme="light"] .glass-2, html[data-theme="light"] .glass-3{ background:var(--card) !important; backdrop-filter:none !important;-webkit-backdrop-filter:none !important; border-color:var(--line) !important} /* --- desk cards & tables: these hardcode #111318 / #0c1a30 etc. --- */ html[data-theme="light"] .pc, html[data-theme="light"] .og, html[data-theme="light"] .lcard, html[data-theme="light"] .dfr, html[data-theme="light"] .og-t tbody tr:nth-child(odd) td{ background:var(--card) !important;border-color:var(--line) !important} html[data-theme="light"] .og-t thead th, html[data-theme="light"] .admin-table th, html[data-theme="light"] .schip{background:var(--bg2) !important;color:var(--t2) !important} html[data-theme="light"] .og-t tbody tr:hover td{background:var(--sel) !important} /* small round tiles that hold book / league art */ html[data-theme="light"] .pch .sport, html[data-theme="light"] .em, html[data-theme="light"] .og-t thead th.bk img, html[data-theme="light"] .oc.obz img, html[data-theme="light"] .bkrow img{background:var(--bg2) !important} html[data-theme="light"] .shbtn, html[data-theme="light"] .navitem .ct, html[data-theme="light"] .cal-card .dur{background:var(--bg2) !important;color:var(--t2) !important} html[data-theme="light"] .peekbtn{background:var(--grn2) !important;color:var(--grn) !important; border-color:color-mix(in srgb,var(--grn) 40%,transparent) !important} html[data-theme="light"] .cell .chip.evx{background:var(--grn2) !important;color:var(--grn) !important; border-color:color-mix(in srgb,var(--grn) 34%,transparent) !important} html[data-theme="light"] .wxpop{background:var(--card) !important;border-color:var(--line) !important; color:var(--t1) !important;box-shadow:var(--shadow-md) !important} html[data-theme="light"] .admin-launch button:hover{background:var(--red) !important;filter:brightness(1.08)} /* --- locked-module overlay (Promo Converter / Middles / Low Holds gate) --- It hardcoded a navy radial, so in light mode the graphite text sat on a dark blob and was unreadable. Give light its own porcelain veil; button text is white on the accent in both themes. */ html[data-theme="light"] .lockover{ background:radial-gradient(120% 90% at 50% 42%,rgba(247,244,238,.6) 0%,rgba(247,244,238,.93) 58%,rgba(247,244,238,.99) 100%) !important} html[data-theme="light"] .lockover .lk-ic{filter:none !important} .lockover .lk-s{font-size:13.5px !important} .lockbtnbig{color:#fff !important;box-shadow:0 6px 20px rgba(230,90,10,.32) !important} /* the feed sits on the page canvas, not on a dark slab */ html[data-theme="light"] main, html[data-theme="light"] #feed{background:var(--bg) !important} /* --- upsell / locked banner --------------------------------------------- Was red-on-black. In this system RED MEANS ADMIN/DANGER, so an upsell must not borrow it: a locked play is an opportunity, not an error. Accent orange in both modes. */ .lockbanner{ background:var(--grn2) !important; border:1px solid color-mix(in srgb,var(--grn) 42%,transparent) !important; box-shadow:none !important} .lockbanner:hover{border-color:var(--grn) !important} .lockbanner .lb-hot{color:var(--grn) !important} .lockbanner .lb-ic{filter:none !important} html[data-theme="light"] .lockbanner .lb-t{color:var(--t2) !important} html[data-theme="light"] .lockbanner .lb-t b{color:var(--t1) !important} /* its CTA is the one loud button on the board */ .lockbanner .lb-actions button, .lockbanner .lb-actions a{background:var(--grn) !important;color:#fff !important; border-color:var(--grn) !important;box-shadow:none !important} /* The brand lockup is a WIDE horizontal image (~3.7:1). Old rules sized the square bull logo (width:40px;height:40px;object-fit:contain) which letterboxes it into a thumbnail — so width must be released explicitly. */ .mx-logo, .brand .mx-logo, .brand img.mx-logo{ width:auto !important;max-width:100% !important;height:44px !important; object-fit:contain !important;display:block} /* centred lockups (auth family) — larger than the app top bar for presence */ .brand{gap:0 !important} .card .brand{justify-content:center !important;margin-bottom:26px} .card .brand .mx-logo, .card .brand img.mx-logo{height:46px !important} @media(max-width:640px){ .mx-logo,.brand .mx-logo,.brand img.mx-logo{height:37px !important} .card .brand .mx-logo,.card .brand img.mx-logo{height:40px !important} } /* Player names on arb/EV cards were accent-coloured, which made a name read as a link/highlight. Names are just names: bold, in the normal text colour. */ .mu .plyr b{color:var(--t1) !important;font-weight:700} /* ========================================================================== Sport icons: stroke currentColor; graphite in light so they never wash out ========================================================================== */ html[data-theme="light"] .em, html[data-theme="light"] .pch .sport{color:var(--mx-graphite) !important} /* ========================================================================== Promo tool (index.html): panels that hardcoded the navy glass ========================================================================== */ html[data-theme="light"] .bk-combo, html[data-theme="light"] .inp-g input, html[data-theme="light"] .inp-g select, html[data-theme="light"] .scan-status, html[data-theme="light"] .instr, html[data-theme="light"] .pm-play, html[data-theme="light"] .pm-card, html[data-theme="light"] .pm-stake input, html[data-theme="light"] .sc2-pill, html[data-theme="light"] .promo-tile{ background:var(--card) !important;border-color:var(--line) !important;color:var(--t1) !important} html[data-theme="light"] .promo-tile.on{border-color:var(--grn) !important;background:var(--grn2) !important} html[data-theme="light"] .stbl-wrap{background:var(--card) !important;border-color:var(--line) !important} html[data-theme="light"] .stbl th.grp, html[data-theme="light"] .stbl th.col{background:var(--bg2) !important;color:var(--t2) !important} /* ---- book-picker modal (tile grid) ---- */ html[data-theme="light"] .bk-picker{background:rgba(32,38,42,.42) !important} html[data-theme="light"] .bk-picker-card, html[data-theme="light"] .bkp-hdr{background:var(--card) !important;border-color:var(--line) !important} html[data-theme="light"] .bkp-title{color:var(--t1) !important} html[data-theme="light"] .bkp-sub{color:var(--t3) !important} html[data-theme="light"] .bkp-list{background:var(--bg) !important;border-color:var(--line) !important} html[data-theme="light"] .bkp-grp{background:none !important;color:var(--t3) !important;border:0 !important} html[data-theme="light"] .bkp-row{background:var(--card) !important;border-color:var(--line) !important;color:var(--t2) !important;box-shadow:var(--shadow-md)} html[data-theme="light"] .bkp-row:hover{color:var(--t1) !important;border-color:var(--grn) !important} html[data-theme="light"] .bkp-row.selected{color:var(--t1) !important;background:var(--grn2) !important;border-color:var(--grn) !important;box-shadow:none !important} html[data-theme="light"] .bkp-row-check{background:var(--card2) !important;border-color:var(--line2) !important} /* ...but that !important also hit the SELECTED state, so the tick (and the radio dot, both white) sat on a near-white pill and were invisible. Give the chosen one its ember fill back so "selected" is actually legible. */ html[data-theme="light"] .bkp-row.selected .bkp-row-check{ background:var(--grn) !important;border-color:var(--grn) !important} html[data-theme="light"] .bkp-row.selected .bkp-row-check svg{color:#fff !important} html[data-theme="light"] .bkp-search{background:var(--card) !important;border-color:var(--line) !important;color:var(--t1) !important} html[data-theme="light"] .bkp-region{background:var(--card) !important;border-color:var(--line) !important;color:var(--t2) !important} html[data-theme="light"] .bkp-region.active{color:var(--grn) !important;background:var(--grn2) !important;border-color:var(--grn) !important;box-shadow:none !important} html[data-theme="light"] .bkp-banner{background:var(--grn2) !important;color:var(--grn) !important;border-color:transparent !important} /* plan chip is display:inline-flex, which beat [hidden] and left an empty pill */ .mx-chip[hidden]{display:none !important} /* the live board freeze-pane makes phone scrolling miserable: static on mobile */ @media(max-width:860px){.pin{position:static !important}.pin:after{display:none !important}} /* ========================================================================== Brand lockup V2 (approved 2026-07-27): icon PNG + typed wordmark. Dark mode swaps to the reversed icon (theme.js) so its graphite wedge becomes white; the typed wordmark follows the theme. ========================================================================== */ .mx-lockup{display:inline-flex;align-items:center;gap:14px;text-decoration:none;line-height:1} .mx-lockup .mx-mk{height:40px;width:auto;display:block} .mx-lockup .mx-wm{font-family:'Aileron',-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:600; font-size:17.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--t1)} @media(max-width:640px){ .mx-lockup{gap:11px} .mx-lockup .mx-mk{height:34px} .mx-lockup .mx-wm{font-size:15px;letter-spacing:.16em} } /* auth-family cards centre it, a touch larger */ .card .brand .mx-lockup{justify-content:center} .card .brand .mx-lockup .mx-mk{height:48px} .card .brand .mx-lockup .mx-wm{font-size:20px} /* ---- promo tool: second wave of hardcoded dark panels (found via live DOM probe) ---- */ html[data-theme="light"] .sc2-fld, html[data-theme="light"] .props-toggle, html[data-theme="light"] .mode-path, html[data-theme="light"] .pm-opt-tile{ background:var(--card) !important;border-color:var(--line) !important;color:var(--t1) !important} html[data-theme="light"] .filter-sheet, html[data-theme="light"] .mode-sheet-overlay{background:rgba(32,38,42,.42) !important} html[data-theme="light"] .filter-sheet-panel, html[data-theme="light"] .filter-sheet-foot, html[data-theme="light"] .mode-sheet{ background:var(--card) !important;border-color:var(--line) !important;color:var(--t1) !important} /* line shopper zebra: upstream added an even-row dark too — give light BOTH rows proper surfaces (subtle zebra, readable text everywhere) */ html[data-theme="light"] .og-t tbody tr:nth-child(odd) td{background:var(--card) !important} html[data-theme="light"] .og-t tbody tr:nth-child(even) td{background:var(--card2) !important} html[data-theme="light"] .og-t tbody tr:hover td{background:var(--sel) !important} html[data-theme="light"] .og-t tbody td, html[data-theme="light"] .og-t tbody td .l1, html[data-theme="light"] .og-t tbody td .t1{color:var(--t1)} /* ── Sport-icon pucks ─────────────────────────────────────────────────────── .em and .pch .sport were hardcoded to a navy disc (#0c1a30) with white glyphs, so on the porcelain canvas they read as stray dark dots. Route both through the surface tokens; the glyph takes the normal text colour. The game-tile variant (.gt .lgico .em) opts out above: it is transparent and inherits the league tint instead. */ .em,.pch .sport{background:var(--well) !important;color:var(--t1) !important} html[data-theme="dark"] .em, html[data-theme="dark"] .pch .sport{background:var(--input) !important;color:var(--t1) !important} /* ...but the game-tile glyph stays a bare tinted icon (no puck) — this has to win here because the rule above is !important. */ .gt .lgico .em{background:transparent !important;color:inherit !important} /* ── Promo converter: legacy blue accent → brand ember ────────────────────── The converter shipped with a sky-blue accent gradient (--grad and friends) used on buttons, pills and rules. It reads as a second brand colour next to the ember, which is exactly the "off colour" complaint. Remap the tokens in one place rather than chasing every call site. */ :root,html[data-theme="light"],html[data-theme="dark"]{ --grad:linear-gradient(135deg,#FF9A55 0%,#FF7D2E 30%,#FF6810 65%,#E85E0E 100%); --grad-soft:linear-gradient(135deg,rgba(255,154,85,.14),rgba(255,125,46,.14),rgba(255,104,16,.14)); --grad-edge:linear-gradient(90deg,transparent 0%,rgba(255,154,85,.4) 25%,rgba(255,104,16,.6) 50%,rgba(255,125,46,.4) 75%,transparent 100%); } /* the two call sites that inlined the blue instead of using the token */ .btn-grad{background:var(--grad) !important} .hb-tile::before{background:var(--grad) !important} /* pale-blue info pills ("22 of 164 lines", "14 books", QUALIFIER, Rescan) */ html[data-theme="light"] .pill.sky,html[data-theme="light"] .chip.sky{ background:rgba(255,104,16,.10) !important;color:var(--mx-ember) !important; border-color:rgba(255,104,16,.28) !important}