/* WinCricket — whitelabel 5's brand layer, wincricket.com (Fable spec docs/design/wincricket-brand-wynlive-2026-09-16.md). Owner 2026-09-16 (evening): WinCricket is its own tenant and wynlive.com keeps "On Air". The WinCricket Brand Guidelines (18 pp) + Colour Palette (4 pp) in docs/design/wincricket-brand-reference/ are the source: Black #06070E, Purple #37095B, Gold #F7D22A, White #FFFBFC, Orange #FF6700, with the palette PDF's tints/shades for everything derived. "Confidence expressed through design, led by the signature yellow against purple": white paper with purple chrome and gold actions by day, black page with purple surfaces and gold actions by night. The previous "On Air" signal-red set is gone. Standing rules kept: Betfair back/lay pastels stay blue/pink; money stays semantic (green positive, the palette's red negative), never the brand colour; every primary button is gold with black ink on both themes. Contrast: audited by scripts/wincricket-contrast.mjs, which reads the two blocks below and checks every pair the shared base actually paints (body/labels 4.5:1, hero numerals and non-text 3:1). Three values deviate from the spec's draft list because the audit failed them; each is a shade from the palette PDF and each is noted inline. */ :root{ --brand:#F7D22A;--brand-hot:#F8D846;--brand-ink:#06070E;--wordmark:#37095B;--wordmark-alt:#F7D22A; --wc-cat-badge-gap:4px;--wc-tag-bm:#EDE4F7;--wc-tag-bm-ink:#37095B;--wc-tag-f:#DDF5E7;--wc-tag-f-ink:#1B6E3C; --bg:#FFFBFC;--sunken:#F6F1F9;--surface:#FFFFFF;--surface-2:#FFFBFC;--surface-3:#F3ECF8;--elevated:#FFFFFF;--control:#EEE6F4; --text:#06070E;--dim:#4E3C5B;--faint:#6F6479;--border:#D9CBE3;--line:#EBE3F0; --back:#A6D8FF;--back-ink:#14315C;--lay:#FAC0CE;--lay-ink:#7A1533;--positive:#1B6E3C; /* AUDIT: --live paints text (.live-label at 8px/850, .form-error, .market-paused, .market-state.paused), and the brand orange #FF6700 is 2.9:1 on white. The palette's orange -37.5% #9F4000 clears 4.5:1 on every light surface the base puts a LIVE label on, including the #F3ECF8 score tint where -25% still fell to 4.25:1. The vivid #FF6700 keeps the dark theme, where it is 6.8:1. --focus follows it so the ring matches the signal. */ --live:#9F4000; /* AUDIT: the palette carries no green, so positive money keeps the shared base's own light-theme green #1B6E3C (6.1:1 on white). The draft's #16A34A is 3.3:1 — a fail for a figure that is read, not decoration. */ --money-pos:#1B6E3C;--money-neg:#BD002F; --nav-pill:#EFE3F7;--nav-pill-dark:#2A0746;--nav-ink-dark:#F7D22A; --spotlight:#F6F1F9;--score-tint:#F3ECF8; --board:#37095B;--board-alt:#2A0746;--night-gold:#F7D22A;--chrome-dark:#37095B; --ticker-bg:#37095B;--ticker-ink:#FFFBFC;--ticker-accent:#F7D22A;--ticker-rule:#F7D22A; --ticker-list-bg:#FFFBFC;--ticker-list-ink:#4E3C5B;--ticker-list-rule:#EBE3F0; --focus:#9F4000;--feature-odd:#FFFBFCE8;--feature-more:#F3ECF8EE;--saved-ink:#37095B; --wallet-card:#37095B;--wallet-card-ink:#FFFBFC;--price-hover:#FEF6C9;--auth-tag:#FFFBFC88; --auth-story-grad:linear-gradient(180deg,#37095BDD 10%,#37095B66 40%,#37095B 100%); --auth-story-grad-wide:linear-gradient(90deg,#37095BE8,#37095B40 80%); --accent-ink:#37095B;--accent-ink-soft:#6F6479;--accent-hot:#F8D846;--warm-border:#D9CBE3; --warm-tint:#FEF6C9;--warm-tint-ink:#06070E;--art-accent:#F7D22A;--art-ink:#FFFBFC;--dark-grad-a:#2A0746;--dark-grad-b:#37095B; --paper-ink:#FFFBFC;--paper-glass:#F3ECF8D9;--preview-dim:#9A8FA6 } :root[data-theme="dark"]{ --brand:#F7D22A;--brand-hot:#F8D846;--brand-ink:#06070E;--wordmark:#FFFBFC;--wordmark-alt:#F7D22A; --wc-tag-bm:#2E1D49;--wc-tag-bm-ink:#E6D6FF;--wc-tag-f:#183B2E;--wc-tag-f-ink:#9CF0C3; --bg:#06070E;--sunken:#040409;--surface:#150323;--surface-2:#1C052E;--surface-3:#23063A;--elevated:#2A0746;--control:#320851; --text:#FFFBFC;--dim:#D9C9E6;--faint:#A99BB5;--border:#4E3C5B;--line:#2A0746; --back:#1D506B;--back-ink:#D5EEFF;--lay:#643F4F;--lay-ink:#FFE0E9;--positive:#4ADE80;--live:#FF6700; --money-pos:#4ADE80;--money-neg:#FF7C9D;--money-pos-dark:#4ADE80;--money-neg-dark:#FF7C9D;--nav-pill:#2A0746; --nav-pill-dark:#2A0746;--nav-ink-dark:#F7D22A;--spotlight:#23063A;--score-tint:#2A0746;--board:#06070E; --board-alt:#150323;--night-gold:#F7D22A;--chrome-dark:#06070E;--ticker-bg:#06070E;--ticker-ink:#FFFBFC; --ticker-accent:#F7D22A;--ticker-rule:#F7D22A;--ticker-list-bg-dark:#150323;--ticker-list-ink-dark:#FFFBFC; --ticker-list-rule-dark:#4E3C5B;--focus:#FF6700;--feature-odd:#1C052EE8;--feature-more:#23063AEE; --saved-ink:#F8D846;--wallet-card:#23063A;--wallet-card-ink:#FFFBFC;--price-hover:#320851;--auth-tag:#15032388; --auth-story-grad:linear-gradient(180deg,#06070EDD 10%,#06070E66 40%,#06070E 100%); --auth-story-grad-wide:linear-gradient(90deg,#06070EE8,#06070E40 80%); --accent-ink:#F8D846;--accent-ink-soft:#A99BB5;--accent-hot:#F8D846;--warm-border:#4E3C5B; --warm-tint:#2A0746;--warm-tint-ink:#FFFBFC;--art-accent:#F7D22A;--art-ink:#FFFBFC;--dark-grad-a:#23063A;--dark-grad-b:#06070E; --paper-ink:#FFFBFC;--paper-glass:#150323D9;--preview-dim:#A99BB5 } /* AUDIT (light only): .board-title is the purple strip, and refinements.css paints its sub-label and inline links with --accent-ink-soft — a light-surface ink that is 2.8:1 on #37095B. No single token can clear 4.5:1 on both white paper and the purple board, so the strip's secondary text takes the palette's purple +87.5% tint (11.0:1). The dark theme already overrides this with a more specific selector, so it is untouched. */ .board-title>div>span,.board-title .text-link,.board-title .count{color:#E8D1FA} /* AUDIT: --accent-ink is the brand purple by day and the brand gold by night, but the base paints four accents with it that sit on purple chrome in BOTH themes — the wallet card, the casino strip inside the board title and the auth story panel. Purple on purple is 1.0:1, so those take the gold outright (10.5:1 on #37095B, 12.9:1 on the night card); everywhere else --accent-ink keeps its per-theme value. */ .wallet-card-top>.icon,.wallet-balance>span,.mobile-casino-insert .board-title .icon, .auth-story-copy>.eyebrow{color:#F7D22A} /* AUDIT: two inherited inks that land on gold. .skip (the keyboard user's first stop) sets a --brand background and no colour, so it inherited --text — white on gold, 1.4:1, on the dark theme. And --warm-tint-ink has two jobs: it is the ink on the dark purple --warm-tint chips AND the ink on the gold --brand / --accent-hot fills, which cannot be the same colour once the page is dark. The gold fills take --brand-ink, which is black on both themes; the purple chips keep the token. */ .skip,.account-nav a.active, [data-theme="dark"] .sport-chip.active .count,[data-theme="dark"] .button.dark{color:var(--brand-ink)} /* AUTH ART v2 (design pass 2026-10-13, board pick B-1 "Six to Stack"): text-free codex-img art (extra/assets/auth-wincricket-v2-*.webp) under taglines BUILT here, so the type stays crisp at every size. The pseudo-element text carries an empty alt (the img alt already reads the tagline). The art never renders under 2x: >=761 the 1254 px square sits top-right at most 627 px tall and fades into a night field (auth.css would frame it in --surface-2, or the join variant's #051C22 teal); <=760 the 1254x627 band fills the panel width. Lines: picture ::before / ::after; the sign-off "Designed to Win With." is the aside's ::before, desktop only. */ .auth-shell .access-campaign .access-picture::before,.auth-shell .access-campaign .access-picture::after{position:absolute;z-index:2;left:var(--wc-a-x);white-space:nowrap;pointer-events:none;font:900 var(--wc-a-fs)/1.04 var(--display);letter-spacing:-.012em} .auth-shell .access-campaign .access-picture::before{content:"From the Boundary";content:"From the Boundary" / "";top:var(--wc-a-y);color:#FFFBFC;text-shadow:0 2px 12px rgba(7,1,12,.6)} .auth-shell .access-campaign .access-picture::after{content:"to the Bank.";content:"to the Bank." / "";top:calc(var(--wc-a-y) + var(--wc-a-fs) * 1.04);color:transparent;background:linear-gradient(180deg,#FBE895 8%,#F7D22A 55%,#D2AD08 92%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 8px rgba(7,1,12,.6))} @media(max-width:760px){ .auth-shell .access-campaign{--wc-a-x:4.4cqw;--wc-a-y:36%;--wc-a-fs:6.4cqw;background:#0E0217} .auth-shell .access-campaign .access-picture{position:relative;container-type:inline-size} .auth-shell .access-campaign .access-image{aspect-ratio:2/1;object-fit:cover;object-position:center;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.4) 0,rgba(0,0,0,.55) 40%,#000 70%);mask-image:linear-gradient(90deg,rgba(0,0,0,.4) 0,rgba(0,0,0,.55) 40%,#000 70%)} } @media(min-width:761px){ .auth-shell .access-campaign{--wc-a-x:26px;--wc-a-y:28px;--wc-a-fs:30px;--wc-a-sub:15px} .auth-shell .access-campaign,.auth-shell .is-register .access-campaign{position:relative;overflow:hidden;padding:0;background:radial-gradient(75% 55% at 0 0,#2A0746,transparent 72%),linear-gradient(180deg,#150323 0,#1C052E 46%,#0E0217 100%)} .auth-shell .access-campaign .access-picture{position:absolute;inset:0;width:100%;height:100%} .auth-shell .access-campaign .access-image{position:absolute;top:0;right:0;left:auto;width:auto;height:min(100%,627px);max-width:none;aspect-ratio:1/1;object-fit:cover;border-radius:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.1) 8%,rgba(0,0,0,.36) 20%,rgba(0,0,0,.74) 34%,#000 48%),linear-gradient(180deg,#000 78%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.1) 8%,rgba(0,0,0,.36) 20%,rgba(0,0,0,.74) 34%,#000 48%),linear-gradient(180deg,#000 78%,transparent);mask-composite:intersect} .auth-shell .access-campaign::before{content:"Designed to Win With.";content:"Designed to Win With." / "";position:absolute;z-index:2;left:var(--wc-a-x);bottom:calc(var(--wc-a-x) * .8);padding-top:14px;background:linear-gradient(#F7D22A,#F7D22A) 0 0/44px 3px no-repeat;font:600 var(--wc-a-sub)/1.2 var(--display);color:#E8D1FA;letter-spacing:.01em;white-space:nowrap;pointer-events:none} } @media(min-width:981px){.auth-shell .access-campaign{--wc-a-x:40px;--wc-a-y:36px;--wc-a-fs:clamp(36px,3.7vw,50px);--wc-a-sub:16px}} @media(min-width:1400px){.auth-shell .access-campaign{--wc-a-x:56px;--wc-a-y:56px;--wc-a-fs:62px;--wc-a-sub:18px}} /* ── Type ───────────────────────────────────────────────────────────────────────────────────────────────────── §3: the brand is Source Sans (Black 900 for the signature, communication titles and headlines; Semibold 600 for titles; body regular). Rather than fork the shared base, brand.css redeclares the base's families onto the self-hosted Source Sans 3 variable files shipped in extra/fonts/ (the build copies extra/ into the site root, so ./fonts/… resolves next to this stylesheet). Two details the draft spec could not know, both found in the browser: 1. The families the base actually PAINTS are not `Wyn Sans` / `Wyn Display`. styles.css declares those, but compact.css — which loads after it — redefines --font to 'Wyn Manrope' and --display to 'Wyn Barlow' (Barlow Condensed) and drops `Wyn Rupee` from --font altogether. 2. Redeclaring an existing family does not reliably REPLACE it: a second @font-face with the same name is added to the family as another candidate, and Chromium kept fetching the base's own file alongside ours. So the brand ships Source Sans 3 under its own name and the two tokens name it first. Nothing else in the base references a family directly — --font and --display are the only two places — so this is the whole switch, and the Manrope and Barlow faces simply go unused. `Wyn Rupee` is back in front of --font because ₹ is U+20B9 and the latin Source Sans 3 subset does not carry it. One family serves both tokens: the brand has one typeface, and the weight rules below are what separate display from body. */ @font-face{font-family:'WinCricket Sans';src:url('./fonts/source-sans-3-normal-latin.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap} @font-face{font-family:'WinCricket Sans';src:url('./fonts/source-sans-3-italic-latin.woff2') format('woff2');font-weight:200 900;font-style:italic;font-display:swap} /* IBM Plex Sans (owner 2026-10-16 "also lets use same font as betby"; Betby's demo measured Plex Sans, 600 almost everywhere, 700 for titles): self-hosted under ./fonts/ibm-plex-sans/ (fontsource 5.2.8, OFL; SOURCE.md), latin + latin-ext (₹ U+20B9 is in latin-ext), 400-700, swap; the 400 and 600 latin files are preloaded by the build. It leads both tokens; Source Sans 3 stays as the fallback. Plex's figures are tabular by default. The lockup stays the brand image. */ @font-face{font-family:'IBM Plex Sans';src:url('./fonts/ibm-plex-sans/ibm-plex-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;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:'IBM Plex Sans';src:url('./fonts/ibm-plex-sans/ibm-plex-sans-latin-ext-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;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:'IBM Plex Sans';src:url('./fonts/ibm-plex-sans/ibm-plex-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;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:'IBM Plex Sans';src:url('./fonts/ibm-plex-sans/ibm-plex-sans-latin-ext-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;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:'IBM Plex Sans';src:url('./fonts/ibm-plex-sans/ibm-plex-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;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:'IBM Plex Sans';src:url('./fonts/ibm-plex-sans/ibm-plex-sans-latin-ext-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;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:'IBM Plex Sans';src:url('./fonts/ibm-plex-sans/ibm-plex-sans-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;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:'IBM Plex Sans';src:url('./fonts/ibm-plex-sans/ibm-plex-sans-latin-ext-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;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} :root{--font:'IBM Plex Sans',Wyn Rupee,'WinCricket Sans',sans-serif;--display:'IBM Plex Sans',Wyn Rupee,'WinCricket Sans',sans-serif} /* Source Sans 3's advances do not survive Chromium's default integer glyph positioning: at the 8-14 px this UI lives at, "UPDATES" renders as "UPDAT ES" and "MOTORS" as "MOT ORS" — a whole pixel of slack dropped after T, O and W, at every weight and with tracking at 0. geometricPrecision keeps the advances in floating point and the words set correctly; verified side by side against the old face, which quantised evenly by luck. Form controls are listed explicitly because Chromium's UA stylesheet resets text-rendering to auto on them, and this UI puts most of its labels — the market tabs, the sport chips, the filters — inside buttons. */ :root,button,input,select,textarea,optgroup{text-rendering:geometricPrecision} /* Black (900) — headlines, board and section titles, the news-ticker label, the auth headlines, the brand signature in the footer, and the hero numerals. Source Sans Black is drawn tight, so display tracking is 0; the selectors below restate the base's own so the negative tracking it sets is neutralised at equal weight. */ h1,h2, .page-heading h1,.route-sports .page-heading h1,.route-live .page-heading h1, .section-title h2,.related-games .section-title h2,.aside-games .section-title h2,.casino-catalogue .section-title h2, .market-section-title h2,.session-heading h2,.featured-heading h2,.inline-slip-heading h2,.race-market-heading h2, .board-title h1,.board-title h2,.event-casino .board-title h2,.mobile-casino-insert .board-title h2, .access-heading h1,.access-art-copy h2,.game-detail-info h1,.table-preview-title h2, .tenant-news-label,.footer-brand,.access-mini-mark,.avatar,.provider-monogram, .game-art-word,.detail-art-word,.wallet-watermark, .wallet-balance,.summary-balance,.ticket-price,.payment-review-amount,.scoreboard-teams strong, .activity-stat strong,.quote-total>strong,.amount-input>input{font-weight:900;letter-spacing:0} /* Semibold (600) — titles: the card, panel, slip and score-section headings, and the scoreboard's team names. */ h3, .slip-prompt h3,.table-finder h3,.sports-crosslink h3,.bet-placeholder h3,.ticket-main h3, .search-empty h3,.slip-selection h3,.receipt-ticket h3,.inline-slip-selection h3, .score-table-section h3,.score-timeline h3,.score-commentary>h3, .scoreboard-teams h1,.scoreboard-teams h2{font-weight:600;letter-spacing:0} /* WinCricket lockup: the slashed italic WIN in gold beside "cricket" in Source Sans Black — purple on the light theme, white on dark. One variant per theme; the SVGs are traced from the guideline renders, so they stay crisp at every DPR. --flag-xh / --flag-base are measured off the lockup: the x-height of "cricket" is 0.643 of the artwork height and its baseline sits at 0.956, so the India flag matches the lowercase and sits on the baseline. Masthead heights are unchanged (22 / 21 auth / 19 ≤760 / 17 ≤370 px); the padding around them already clears the guideline's safezone, which is one logo height on every side. */ .brand img.brand-lockup{width:auto!important;height:22px!important;max-width:none} .brand{--lockup-h:22px;--flag-xh:.643;--flag-base:.956}.auth-masthead .brand{--lockup-h:21px} @media(max-width:760px){.brand{--lockup-h:19px}.auth-masthead .brand{--lockup-h:19px}}@media(max-width:370px){.brand{--lockup-h:17px}} .brand .lockup-dark{display:none} [data-theme="dark"] .brand .lockup-light{display:none} [data-theme="dark"] .brand .lockup-dark{display:inline-block} .auth-masthead .brand img.brand-lockup{height:21px!important} @media(max-width:760px){.brand img.brand-lockup{height:19px!important}.auth-masthead .brand img.brand-lockup{height:19px!important}} @media(max-width:370px){.brand img.brand-lockup{height:17px!important}} /* ---- WinCricket NIGHT palette (Fable, 2026-09-27): purple-black surfaces, gold accent, the brand's own Back/Lay ---- */ :root[data-theme="dark"]{color-scheme:dark;--board-title-bg:#37095B;--board-title-ink:#FFFBFC;--board-title-border:#F7D22A;--bg:#06070E;--sunken:#0D0818;--surface:#120A1F;--surface-2:#1B1030;--surface-3:#241540;--elevated:#1B1030;--control:#2A1A48; --text:#F6F2FA;--dim:#D9CFE6;--faint:#B9AECB;--border:#3A2A55;--line:rgba(247,210,42,.14);--board:#37095B;--board-alt:#2A0746;--chrome-dark:#0D0818; --back:#123A5C;--back-ink:#BFE3FF;--lay:#4A1226;--lay-ink:#FFC1D2;--positive:#6EE7A0;--negative:#FF7A8A;--money-pos:#6EE7A0;--money-neg:#FF7A8A;--live:#FFB380;--focus:#F7D22A; --nav-pill:#2A0746;--spotlight:#1B1030;--score-tint:#1B1030;--ticker-bg:#0D0818;--ticker-ink:#F6F2FA;--ticker-list-bg:#120A1F;--ticker-list-ink:#D9CFE6;--ticker-list-rule:#2A1A48; --warm-border:#3A2A55;--warm-tint:#2A1A48;--warm-tint-ink:#F6F2FA;--price-hover:#2A1A48;--lv2-art-grad:linear-gradient(135deg,#120A1F,#2A0746)} [data-theme="dark"] body{background:radial-gradient(120% 60% at 50% -10%,#2A0746 0%,#120A1F 45%,#06070E 100%) fixed} [data-theme="dark"] .masthead{background:linear-gradient(180deg,#1B1030 0%,#120A1F 100%);border-bottom:1px solid var(--line)} [data-theme="dark"] .lv2-hero-card{border-color:rgba(247,210,42,.28)} [data-theme="dark"] :is(.section-tabs,.sports-tools,.board-search,.casino-browse-controls){background:var(--surface)} [data-theme="dark"] .board-title .icon{color:#F7D22A} [data-theme="dark"] .event-card .event-top,[data-theme="dark"] .match-board .event-top{background:var(--surface-2);border-color:var(--line)} /* ---- Odds pills (Fable's ruling, docs/operations/wincricket-odds-pills-2026-09-29.md). The shared base reads these tokens (lobby-v2.css .lv2-odd, refinements.css .odds) and falls back to its previous look, so no other brand changes. Night: the lobby rails' prices are glass brand pills (gold-white price, lilac label, pressed = solid gold); BACK|LAY pairs keep the exchange convention, blue and pink tuned for the night; depth cells the same hues at .55/.35; a closed cell is the ink glass. The LAY stops sit one step darker than the ruling's #E0508F/#B23A6E: those measure 3.7-4.3:1 under a white price, the ruling also asks >= 4.5:1, and #CC4485/#A93568 measure 4.8-6.2:1 where the digits sit (BACK as ruled, 4.7-6.8). Movement: a rise flashes the rim + price #37D67A, a drop #FF5C5C, 800 ms (the existing flashPrices path, no re-render); a BACK|LAY cell keeps its colour and flashes only its rim. */ :root[data-theme="dark"]{ --wc-odd-bg:linear-gradient(180deg,#2A1640,#1B0E2B);--wc-odd-rim:rgba(232,181,49,.35);--wc-odd-rim-hover:rgba(232,181,49,.6);--wc-odd-hi:rgba(255,255,255,.06); --wc-odd-price:#FFE9A8;--wc-odd-weight:700;--wc-odd-label:#B9A6D6;--wc-odd-label-size:11px;--wc-odd-label-weight:600;--wc-odd-label-alpha:1; --wc-odd-sel:#E8B531;--wc-odd-sel-ink:#1A1026; --wc-back:linear-gradient(180deg,#2F7BE0,#1E5AA8);--wc-back-ink:#FFFFFF;--wc-back-rim:#1B4F93;--wc-back-hover:linear-gradient(180deg,#3A86EA,#2464B4);--wc-back-hover-rim:#8CC0FF; --wc-lay:linear-gradient(180deg,#CC4485,#A93568);--wc-lay-ink:#FFFFFF;--wc-lay-rim:#8E2B58;--wc-lay-hover:linear-gradient(180deg,#D64E8F,#B43D72);--wc-lay-hover-rim:#FFB1D2; --wc-back-2:rgba(47,123,224,.55);--wc-back-3:rgba(47,123,224,.35);--wc-lay-2:rgba(204,68,133,.55);--wc-lay-3:rgba(204,68,133,.35); --wc-off-bg:linear-gradient(180deg,#2A1640,#1B0E2B);--wc-off-ink:#7A6A93;--wc-off-opacity:1;--wc-off-filter:none; --wc-up:#37D67A;--wc-down:#FF5C5C;--wc-flash-ms:.8s;--wc-pill-flash-up:lv2PillUp;--wc-pill-flash-down:lv2PillDown;--wc-cell-flash-up:lv2RimUp;--wc-cell-flash-down:lv2RimDown} /* Day (not in the ruling, which is written for the night; left to Fable): the same glass pill on paper, purple price, and the money greens/reds for movement (the night's #37D67A is 1.9:1 on white). BACK|LAY keep the day's Betfair pastels. */ :root{ --wc-cat-label-width:76px;--wc-cat-label-max:76px;--wc-cat-label-white-space:normal;--wc-cat-label-tail-display:inline-block;--wc-cat-label-tail-space:nowrap;--wc-cat-label-overflow:visible;--wc-cat-label-text-overflow:clip;--wc-cat-label-line-height:12px;--wc-cat-label-min-height:26px;--wc-catnav-bg:color-mix(in srgb,var(--surface) 96%,transparent); --wc-odd-bg:linear-gradient(180deg,#FFFFFF,#F3ECF8);--wc-odd-rim:rgba(55,9,91,.3);--wc-odd-rim-hover:rgba(55,9,91,.45);--wc-odd-hi:rgba(255,255,255,.9); --wc-odd-price:#37095B;--wc-odd-weight:700;--wc-odd-label:#4E3C5B;--wc-odd-label-size:11px;--wc-odd-label-weight:600;--wc-odd-label-alpha:1; --wc-odd-sel:#F7D22A;--wc-odd-sel-ink:#06070E; --wc-up:#1B6E3C;--wc-down:#BD002F;--wc-flash-ms:.8s;--wc-pill-flash-up:lv2PillUp;--wc-pill-flash-down:lv2PillDown;--wc-cell-flash-up:lv2RimUp;--wc-cell-flash-down:lv2RimDown} /* The matched-size line under a price inherits the page's --faint, which read 6:1 on the old dark cells but 2.5:1 on the new blue/pink (4.4:1 even at .88 white); it takes plain white. By day the same line was 3.8-3.9:1 on the pastels: it takes the pastel's ink. */ [data-theme="dark"] :is(.odds.back,.odds.lay)>small{color:#FFFFFF;opacity:1} :root:not([data-theme="dark"]) .odds.back>small{color:var(--back-ink);opacity:.9}:root:not([data-theme="dark"]) .odds.lay>small{color:var(--lay-ink);opacity:.9} /* the ladder's suspended block takes the same ink glass as a closed cell (night) */ [data-theme="dark"] .market-halt.suspended{background:linear-gradient(180deg,#2A1640,#1B0E2B);border-color:rgba(232,181,49,.22);color:#B9A6D6} /* ---- Fields (owner 2026-09-29, "Issue on login screen": Chrome's autofill painted the inputs mustard/blue). The autofill fix itself is in the shared auth.css (every brand); here the brand's field: the icon well, the input and the Show button share one 12 px wrapper with one border, focus is a 2 px ring in --focus (gold at night; the audited #9F4000 by day, gold on paper is 1.4:1), and an error is red text under the field with a red ring, never a browser tooltip (the form is novalidate). */ .access-input,.field-input,.account-field .field-input{border-radius:12px;border-color:var(--border)} .access-input:focus-within,.field-input:focus{border-color:var(--focus);box-shadow:0 0 0 1px var(--focus);outline:0} .field-input:-webkit-autofill:focus{box-shadow:0 0 0 1000px var(--surface-2) inset,0 0 0 1px var(--focus)!important} .access-preview[data-state="error"]::first-letter{text-transform:uppercase} /* WebKit draws a native grey menulist that ignores the field's fill (Chromium styles it): the selects take the field look and a drawn chevron in both engines. The shared dark rule sets the fields' fill with the background shorthand, which resets repeat/size, so these longhands carry an id-level specificity (the :is() list names #competition-filter). */ :root :is(select.field-input,.board-search select,select#competition-filter,select#provider-filter){-webkit-appearance:none;appearance:none;padding-right:34px;background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234E3C5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} :root[data-theme="dark"] :is(select.field-input,.board-search select,select#competition-filter,select#provider-filter){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23D9CFE6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} /* ---- Day theme contrast (audit 2026-09-29): Lobby v2 paints its eyebrows, the active category label, the kick-off time and the My bets pill in the brand gold, 1.4:1 on paper. By day they take the brand purple (--accent-ink, 13:1); the hero copy sits on the dark art in both themes and keeps the gold. The LIVE badge takes the audited day --live. */ :root:not([data-theme="dark"]) :is(.lv2-eyebrow,.lv2-cat.active>b,.lv2-when,.header-bets.active){color:var(--accent-ink)} :root:not([data-theme="dark"]) .lv2-hero-card .lv2-hero-copy .lv2-eyebrow{color:var(--brand)} :root:not([data-theme="dark"]) .lv2-live-badge{color:var(--live)} /* ---- Touch targets (audit 2026-09-29: >= 44 px). Phone masthead: the theme toggle and Log in become 44 px boxes (the group has the room; nothing visible changes but the spacing); every other small control gets an invisible 44 px hit area centred on itself (none of these carries a ::after of its own; each is checked in the browser to still own its centre). */ @media(max-width:760px){ .masthead .header-actions{gap:4px} .masthead :is(.theme-control,.login-link){min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center} } :is(.masthead .join-button,.masthead .brand,.masthead .product-nav a,.masthead .theme-control,.masthead .search-trigger,.masthead .login-link,.auth-masthead .brand,.auth-masthead .theme-control,.stream-bar button,footer.footer a,.stake-presets .amount-chip,.backlay-toggle button,.inline-slip-heading .icon-button,.stream-pip-bar button,.auth-back,.label-row .text-link,.access-password,.auth-footer a,.lv2-sec-link,.icon-button.save,.event-stream-link,.match-market-link,.wc-league-more,.tenant-news-pause,[data-action="slots-mode"],.breadcrumb a,.odds){position:relative} :is(.masthead .join-button,.masthead .brand,.masthead .product-nav a,.masthead .theme-control,.masthead .search-trigger,.masthead .login-link,.auth-masthead .brand,.auth-masthead .theme-control,.stream-bar button,footer.footer a,.stake-presets .amount-chip,.backlay-toggle button,.inline-slip-heading .icon-button,.stream-pip-bar button,.auth-back,.label-row .text-link,.access-password,.auth-footer a,.lv2-sec-link,.icon-button.save,.event-stream-link,.match-market-link,.wc-league-more,.tenant-news-pause,[data-action="slots-mode"],.breadcrumb a)::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)} .odds::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,44px);transform:translateY(-50%)} .auth-shell .access-input>input{align-self:stretch} .faq-section details{padding:6px 0}.faq-section details[open]{padding-bottom:19px}.faq-section summary{padding:13px 0;min-height:44px;align-items:center} /* ---- Type floor (design pass 2026-10-13; owner: "alot of UI/UX on desktop ... is small in size"). Desktop >= 1024 px: labels, eyebrows, badges, counts and price-cell depth >= 12 px; body, meta, links, buttons, tabs >= 13 px; list-row titles >= 14 px; amounts, prices and money headings >= 15 px. Each selector is its base source rule (traced per element with CDP) prefixed by `html`: one point more specific than the source, so it wins whatever the load order (sports-explorer, tenant-news and sportsbook-position load after this file), while larger variants with a more specific selector keep their size. The base files are not edited. Phone (<= 760 px): every run is raised to 12 px (lane wincricket-mobile-polish 2026-10-14; was 11 px). Before/after tables: STATE C5 and docs/operations/wincricket-team-colour-pills-2026-10-14/gates/gates-type.txt. */ @media(min-width:1024px){ html .tenant-news-label,html .search-trigger kbd,html .header-wallet-label,html .age-mark,html .footer .age-mark,html .rail nav>a,html .nav-count, html .lv2-cat>b>small,html .lv2-cat-tail>small,html .lv2-eyebrow,html .lv2-sec-head h2>small,html .lv2-live-badge,html .lv2-card .lv2-card-pill,html .lv2-comp>b, html .wc-board-heading h2>span,html .wc-time-tabs>button>span,html .wc-odds-key,html .wc-readonly,html .wc-price small,html .wc-agenda-sport,html .wc-live-badge,html .wc-depth-head, html .live-label,html .event-top .live-label,html .market-tag,html .outcome-label>span:last-child,html .outcome-prices .odds small,html .odds.with-depth small,html .session-row .odds>small, html .compact-scoreboard .scoreboard-top,html .compact-scoreboard .compact-teams .versus,html .compact-scoreboard .scoreboard-bottom,html .market-kind-filters>button>span, html .market-state,html .exchange-head,html .session-heading h2>span,html .session-heading>span, html .eyebrow,html .account-balance-label,html .account-stat-strip>div>span,html .account-metric>span,html .tx-day,html .tx-meta .account-status, html .mybets-tile-label,html .mybets-seg-count,html .mybets-day-head,html .bet-side,html .bet-price small,html .bet-risk small{font-size:12px} html .tenant-news,html .tenant-news-list>div,html .search-trigger,html .product-nav>a,html .join-button,html .breadcrumb,html .footer>div:first-child>span:last-child,html .footer>div:last-child, html .lv2-cat>b,html .lv2-sec-link,html .lv2-live-top,html .lv2-live-teams .score,html .lv2-odd small, html .lv2-card>.lv2-card-cta,html .lv2-seg>button,html .lv2-when,html .lv2-comp,html .game-caption h3,html .game-caption span,html .game-card .game-paysheet, html .wc-league>header small,html .wc-league .outcome-label,html .wc-quote-meta,html .wc-quote-teams>i,html .wc-quote-market, html .wc-quote-prices>div>span,html .wc-league .event-start,html .wc-waiting,html .wc-agenda-event>time,html .wc-agenda-foot, html .wc-back-link,html .wc-detail-heading>span,html .wc-detail-heading p,html .wc-feed-notice,html .wc-depth>header>span, html .match-v,html .match-market-link,html .match-meta,html .stream-bar>button,html .stream-bar>[data-stream-status],html .stream-bar>[data-stream-retry], html .section-tabs>button,html .market-kind-filters>button:not(.icon-button),html .market-foot,html .event-layout .real-market .market-foot,html .session-name small, html .sp-book,html .event-casino .text-link,html .slip-prompt p,html .slip-prompt>span, html .button.small,html .account-panel .button,html .account-nav a,html .account-summary>.muted-text,html .account-summary>.text-link,html .account-quick-links small, html .account-panel-heading .text-link,html .tx-main>small,html .tx-meta,html .tx-row>.text-link,html .account-payment-form>p,html .account-field>span,html .account-hint, html .account-check,html .account-payment-aside>p,html .account-payment-aside>.text-link,html .pago-secure,html .pago-how span,html .pago-balances span, html .mybets-updated,html .mybets-refresh,html .mybets-tile-sub,html .mybets-seg>button,html .mybets-count,html .mybets-chip,html .mybets-event-name,html .mybets-event-meta, html .bet-selection small,html .bet-time,html .bet-action,html .mybets-foot-count{font-size:13px} html .wc-league>header strong,html .wc-league .match-name strong,html .wc-quote-teams strong,html .wc-agenda-event>strong, html .exchange-runner>span,html .session-name>strong,html .account-quick-links strong,html .tx-main>strong,html .pago-how b{font-size:14px} html .header-wallet>strong,html .outcome-prices .odds strong,html .price-depth .odds>strong,html .session-row .odds>strong,html .tx-side>strong, html .account-amounts .amount-chip,html .account-aside-heading h3,html .pago-new-account>h3,html .bet-stake,html .bet-risk b,html .bet-outcome{font-size:15px} html .age-mark{width:30px;height:30px}html .footer .age-mark{width:28px;height:28px} html .account-pnl-select,html .mybets-select{font-size:13px} /* game titles at 13 px no longer fit one line in the 4/5-up grids ("Casino Marina Baccarat A..D" lost the letter that tells them apart): wrap to two lines instead of the base ellipsis */ html .game-caption h3{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.3;text-wrap:balance} /* these sources carry !important */ html .wc-explorer .wc-league-more{font-size:12px!important} html :is(.wc-explorer .wc-load-more,.wc-search>input,.wc-search-row>select){font-size:13px!important} } @media(max-width:760px){ html .tenant-news-label,html .login-link,html .join-button,html .header-wallet-label,html .header-wallet>strong,html .mobile-nav>a,html .nav-count, html .footer>div:first-child>span:last-child,html .footer>div:last-child,html .footer .age-mark, html .lv2-cat>b,html .lv2-cat>b>small,html .lv2-cat-tail>small,html .lv2-eyebrow,html .lv2-sec-head h2>small,html .lv2-live-top,html .lv2-live-badge, html .lv2-card .lv2-card-pill,html .lv2-when,html .lv2-comp>b, html .wc-time-tabs>button>span,html .wc-odds-key,html .wc-league>header small,html .wc-league .outcome-label,html .wc-quote-meta,html .wc-readonly, html .wc-quote-teams>i,html .wc-quote-market,html .wc-quote-prices>div>span,html .wc-price small,html .wc-league .event-start,html .wc-live-badge,html .wc-depth .wc-price small, html .event-top .live-label,html .live-label,html .match-v,html .match-market-link,html .match-meta,html .match-meta .market-tag,html .outcome-prices .odds small, html .breadcrumb,html .compact-scoreboard .scoreboard-top,html .compact-scoreboard .scoreboard-bottom,html .stream-bar>button,html .stream-bar>[data-stream-status], html .stream-bar>[data-stream-retry],html .market-kind-filters>button>span,html .market-state,html .market-halt .market-state,html .exchange-head,html .odds.with-depth small, html .market-foot,html .event-layout .real-market .market-foot,html .session-heading h2>span,html .session-heading>span,html .session-name small,html .session-row .odds>small, html .account-title .eyebrow,html .eyebrow,html .account-balance-label,html .account-stat-strip>div>span,html .account-metric>span,html .account-quick-links small, html .tx-day,html .tx-main>small,html .tx-meta,html .tx-meta .account-status,html .tx-row>.text-link,html .mybets-tile-label,html .bet-price small, html .session-name>strong,html .market-kind-filters>button:not(.icon-button){font-size:12px} html .footer .age-mark{width:26px;height:26px}html .wc-explorer .wc-league-more{font-size:12px!important} /* the event's market filter chips fitted a 390-412 phone at 9 px; at 11 px slimmer sides keep the help button on screen at 412 */ html .market-kind-filters>button:not(.icon-button){padding-left:5px;padding-right:5px}html .market-kind-filters{gap:3px} html :is(.wc-search>input,.wc-search-row>select){font-size:12px!important} /* lane wincricket-mobile-polish (owner 2026-10-14: "Some text wayy too small to read"): the runs the 11 px pass left out, the slip included, traced per element by tools/mobile-gate.mjs at 360 / 375 / 412 */ html .mobile-nav>a>span,html .lv2-cat-tail,html .lv2-cat-tail>small,html .wc-live-n,html .lv2-sec-link,html .lv2-seg>button,html .lv2-live-top>span, html .lv2-lc-six>i,html .match-v,html .match-meta>span,html .event-top .event-start,html .wc-tag,html .wc-clear,html .wc-foot-col>h4,html .wc-age, html .wc-quote-meta>span,html .footer>div>a,html .footer>div>span,html .breadcrumb>*,html .scoreboard-top>span>b,html .scoreboard-top .live-label, html .scoreboard-bottom>span,html .event-tabs>button,html .stream-bar>button>strong,html .stream-bar>span,html .stream-pip-bar>button>strong,html .fx-ou, html .fx-st,html .amount-chip,html .inline-slip-heading .badge,html .inline-slip-market>span,html .inline-slip-selection p,html .inline-slip-price>span, html .fx-chg>span,html .fx-chg>span>s,html .fx-chg>span>b,html .inline-betslip .fx-chg .fx-accept,html .fx-win>span,html .inline-slip-actions label, html .inline-slip-note,html .multi-add{font-size:12px} } /* the same floors on #/login and #/register (sources: refinements.css base rules, auth.css <= 760). The fitted one-screen layouts (<= 760 wide and <= 650 tall; landscape <= 980 x <= 600) keep their sizes: larger type pushes the form off the screen. */ @media(min-width:1024px){ html .access-heading .eyebrow,html .auth-footer>span,html .auth-footer .age-mark{font-size:12px} html .access-heading p,html .access-field label,html .auth-shell .is-register .registration-details label,html .access-password, html .access-field .label-row .text-link,html .access-field .field-help,html .access-consent>span,html .access-switch,html .auth-back, html .access-form-foot,html .auth-footer,html .auth-masthead .theme-control>span{font-size:13px} html .auth-footer .age-mark{width:26px;height:26px}html .auth-footer{padding-top:21px;padding-bottom:21px} } @media(max-width:760px) and (min-height:651px){ html .auth-shell .auth-back,html .auth-shell .access-field .label-row .text-link,html .access-password,html .auth-shell .access-switch, html .auth-shell .is-register .access-consent>span,html .auth-shell .auth-footer,html .auth-shell .auth-footer .age-mark{font-size:12px} html .auth-shell .auth-footer .age-mark{width:24px;height:24px} } /* mobile polish: the register form's help line (auth.css sets 11 px) reaches the 12-px floor */ html .auth-shell .is-register .field-help{font-size:12px}