/* Hallmark · design-system: design-123bet.md * axes: light / geometric-sans / cool (Volt Purple 302° on teal-black ~215°) * source of truth: 123bet Brand Guidelines v1.0 §03, "Reverse: on white" * * DAY PALETTE — the light presentation of the night skin. * * Registered by the parent as `highstakes-palette-day` but never enqueued by it. * A dark child opts into theme switching with highstakes_enable_theme_switching(), * which enqueues this last (priority 25, after blocks-night.css at 20). * * This is a palette, not a chrome layer. chrome-night.css and blocks-night.css * carry the 123Bet *skin* — elevated rounded boxes, the floating pill, the * detached mega-menu card, the cyan newsletter signal — and every one of those * rules resolves its colour through a token. So the light theme is this file and * nothing else: re-point the tokens and the same components repaint. Nothing here * changes a layout, a radius or a font. * * WHAT MOVES the canvas (paper, cards, ink, rules), the violet accent and the * cyan second signal (both step down in lightness to hold contrast * on paper), the CTA, the status and category signals, elevation. * WHAT DOESN'T the bands — accent-2, band-2, on-band, on-band-muted, * accent-on-band. The navbar pill, the state hero, the image scrims * and the footer stay night in both modes: they are the brand's * furniture, not its canvas, and keeping them fixed is what makes * this read as one identity in two lights rather than two sites. * It also means every `--hs-on-band` rule needs no day counterpart. * * Selector is :root[data-theme="light"] (0,2,0) against WordPress's own * :root (0,1,0) for the theme.json presets, so it wins on specificity and does * not depend on landing after global styles. */ :root[data-theme="light"] { /* Colour — canvas. Straight from the guidelines' reverse palette: paper is * #eef2f2 and cards are pure white, the same figure/ground relationship the * night palette gets from surface sitting above base. * * surface-2 is the one deliberate departure. The guidelines put it at #f5f8f8, * *lighter* than the paper, because there it is a raised tint. Here the token's * job is --hs-recess — a strip set into a white card — so it has to be darker * than the card or the recess reads as a lift. Same hue family, one step down * from the paper instead of one step up. */ --wp--preset--color--base: oklch(95.8% 0.004 197); /* #eef2f2 */ --wp--preset--color--surface: oklch(100% 0 0); /* #ffffff */ --wp--preset--color--surface-2: oklch(93.5% 0.007 200); /* Colour — ink. contrast is Deep Ink exactly; the two dimmer steps follow the * guidelines' text-dim / text-faint, with muted held a little above its #68797e * spec — at that value it lands 4.03:1 on the paper, and it carries card meta * at 12–13px where AA is not optional. */ --wp--preset--color--contrast: oklch(19.6% 0.025 214); /* #06181c */ --wp--preset--color--ink-2: oklch(42.8% 0.027 218); /* #3f5359 */ --wp--preset--color--muted: oklch(50% 0.024 217); --wp--preset--color--line: oklch(88.4% 0.007 197); /* Colour — accent. The night palette brightens the violet so it can carry * link text on a dark canvas; on paper the same job needs the opposite, so * both steps move down. accent-strong is still the link/label step and lands * near 7:1 on white; accent is the fill. accent-ink is unchanged — a fill * this dark carries light text in either mode. */ --wp--preset--color--accent: oklch(53% 0.24 302); --wp--preset--color--accent-strong: oklch(46% 0.23 302); /* accent-on-band is *not* overridden — see the band scope below. */ /* Cyan's remit is unchanged (link hover and the newsletter module) but the * guidelines are explicit that Electric Cyan is a graphic fill on white and * never text — 2.0:1. So the token steps down to the reverse-palette accent * the guidelines specify for exactly this job, #0e7d8a. That flips the label * that sits on it — see the newsletter override at the foot of this file. * * Two points darker than that literal value, though. #0e7d8a is 4.31:1 on the * paper; the guidelines quote it against *white*, and never pair it with their * own #eef2f2. This token is the link hover colour, so it has to clear 4.5 on * the page as well as on a card. L 52 does, at 4.68, and is indistinguishable * from the spec side by side. * * The gradient is unaffected and keeps full-strength Electric Cyan: it is built * in chrome-night.css from --hs-grad-from / --hs-grad-to rather than from the * accents, precisely so these contrast-driven day steps cannot reach it. */ --wp--preset--color--accent-cyan: oklch(52% 0.092 208); /* Call to action — deeper than the accent at night so it can carry white * text; by day the accent is already deep enough, so the CTA sits with it and * hover darkens rather than brightens. */ --wp--custom--cta: oklch(53% 0.24 302); --wp--custom--cta-hover: oklch(45% 0.23 302); /* Status signals. At night these are light steps carrying near-black labels; * by day they have to work as *text* on a white card as well as fills, so * every one lands mid-scale and --hs-badge-ink flips to light with them. */ --wp--preset--color--status-legal: oklch(52% 0.14 152); /* Pending is the tightest of the four and sits a step below the rest. It also * paints the star rating at 14px, and the worst case for that is a rating on * the operator table's featured row, whose 12% accent tint lifts the * background toward the stars. L 51 clears 4.5 there and still reads amber; * much darker and it turns to bronze. */ --wp--preset--color--status-pending: oklch(51% 0.13 75); --wp--preset--color--status-partial: oklch(52% 0.14 240); --wp--preset--color--status-illegal: oklch(53% 0.19 25); /* Category signals. The brand violet stays excluded here for the same reason * it is at night — it has to remain the accent. * * Deliberately a step darker (L 45–48%) than the plugin's own light-paper set * in blocks.css (L 52–60%). The binding case is the category *chip*, which * paints an 18% tint of the signal behind label text in the same colour: the * tint lifts the background toward the text and eats roughly 1.2 of the * contrast ratio. At blocks.css's lightnesses those chips land 2.6–4.0 against * a white card; every value below clears 4.5 both as a chip and as plain text * on paper. Chroma is held up so the eight hues stay tellable apart at these * darker steps. (The same chips are under-contrast on the parent theme today — * pre-existing, and out of scope here.) */ --hs-cat-sports-betting: oklch(45% 0.17 252); /* blue */ --hs-cat-casino: oklch(45% 0.19 345); /* rose */ --hs-cat-poker: oklch(46% 0.19 25); /* coral */ --hs-cat-slots: oklch(48% 0.12 70); /* amber */ --hs-cat-online: oklch(46% 0.11 200); /* cyan */ --hs-cat-land-based: oklch(46% 0.13 145); /* green */ --hs-cat-horse-racing: oklch(46% 0.10 175); /* teal */ --hs-cat-sweepstakes: oklch(48% 0.13 118); /* lime */ /* Neon Lime as a *line*. The fill (--hs-lime) and the ink on it are unchanged * — a lime chip is the same object in both modes — but the banner theme also * paints an eyebrow, a top rule and, in ghost form, a button label, and the * brand value is 1.5:1 on white. This is the same hue walked down to L 50, * which clears AA on the card (5.70) and on the paper (5.05) and still reads * as lime rather than as a generic green. */ --hs-lime-signal: oklch(50% 0.16 125); /* Mode levers — the values chrome-night.css declares because the value * itself, not the palette behind it, is what makes the treatment dark. */ --hs-recess: var(--wp--preset--color--surface-2); --hs-field-bg: var(--wp--preset--color--surface-2); --hs-badge-ink: var(--wp--preset--color--accent-ink); --hs-logo-plate: transparent; /* the card is already a light plate */ --hs-shade: black; /* hovers mix down, not up */ /* Elevation. The night shadow is near-opaque black tinted to the canvas hue; * on paper the same geometry needs a fraction of the alpha or the boxes read * as cut out rather than lifted. */ --hs-shadow: oklch(45% 0.030 216 / 0.16); } /* ---------------------------------------------------------------- Band scope */ /* Inside the containers that stay night, the accent has to stay the *night* * accent. The two steps above are tuned to hold contrast on paper, which makes * them far too dark for the pill, the footer statement, the state hero's eyebrow * or a chip on a photo scrim — all of which read them through --hs-accent-strong. * * Re-pointing the token on the band itself fixes every one of those rules at once * and needs no edit to the night chrome: a custom property redeclared on an * ancestor is what its descendants resolve. --accent-on-band already exists for * precisely this job and palette-day.css leaves it at its night value, so this is * the token doing what it was named for rather than a new exception. * * Everything listed here is a surface palette-day.css deliberately does not * lighten — see WHAT DOESN'T at the top of this file. The navbar is pointedly * absent: it is the one band that *does* lighten, immediately below. */ :root[data-theme="light"] .hs-footer, :root[data-theme="light"] .hs-hero, :root[data-theme="light"] .hs-post-hero, :root[data-theme="light"] .hs-ocard, :root[data-theme="light"] .hs-mag-tile, :root[data-theme="light"] .hs-banner--promo:not(.hs-banner--card) { --hs-accent: var(--wp--preset--color--accent-on-band); --hs-accent-strong: var(--wp--preset--color--accent-on-band); /* The category signals belong here for the same reason and were the one set * this rule missed. A category chip on a tile or an overlay card is the day * palette's darkened hue (L 45–48, tuned to carry text on white) printed on a * plate that is --hs-band at 82 % — night in both modes, because it sits on a * photograph. That lands at roughly 1.5–2.5:1 and reads as a chip someone * forgot to switch on. The aliases are declared beside the night values in * blocks-night.css, so this hands each hue back its own dark-canvas step * rather than a single neutral. */ --hs-cat-sports-betting: var(--hs-cat-sports-betting-on-band); --hs-cat-casino: var(--hs-cat-casino-on-band); --hs-cat-poker: var(--hs-cat-poker-on-band); --hs-cat-slots: var(--hs-cat-slots-on-band); --hs-cat-online: var(--hs-cat-online-on-band); --hs-cat-land-based: var(--hs-cat-land-based-on-band); --hs-cat-horse-racing: var(--hs-cat-horse-racing-on-band); --hs-cat-sweepstakes: var(--hs-cat-sweepstakes-on-band); } /* The image-backed promo banner needs more than the violet, because it is the one * band a *themed* component sits on: a banner can be purple, teal or lime, and * all three paint an eyebrow, a top rule and — in ghost form — a button label * directly onto the scrim. The scrim is --hs-band at 95 % on the side the content * sits, so it stays night in light mode along with every other band above. * * The two day steps that would land on it are exactly the two tuned for paper: * cyan drops to #007784 (≈3.0 on the scrim) and the lime line to #4f7100 (worse). * Both are re-pointed here to values that are night-fixed by construction — * --hs-grad-to is the gradient's literal Electric Cyan, and --hs-lime never * moves — so the theme still reads on the image instead of being flattened to a * neutral. This also fixes the eyebrow on an unthemed promo, which has been * taking the paper-tuned violet on a night scrim since the day palette landed. */ :root[data-theme="light"] .hs-banner--promo:not(.hs-banner--card) { --hs-cyan: var(--hs-grad-to); --hs-lime-signal: var(--hs-lime); } /* ------------------------------------------------------------- Light navbar */ /* The navbar is the one band that lightens by day. It has to: in light mode the * mega-menu's dropdown panels are already white, so a night pill opened into a * paper panel — the chrome disagreeing with the surface it produces. * * Nothing here restyles the pill. Every rule in chrome-night.css that paints it * already reads --hs-band for the fill and --hs-on-band for everything on top, * so re-pointing those three tokens on the navbar repaints the fill, the labels * (they inherit currentColor from .hs-navbar--pill), the wordmark, the search * wash and field, the mode toggle and the mobile bar in one move — including the * hover states, via --hs-accent-on-band. * * The fill is the surface rather than the paper so the pill still reads as a * plate sitting *on* the page, the same figure/ground the night pill gets from * the deep band against the night canvas. chrome-night's own * `color-mix(--hs-band 86%, transparent)` and backdrop blur then carry over * unchanged, which is what keeps the frosted character the design was drawn * with: content scrolling under the pill still diffuses through it. * * For a flat pill instead of a frosted one, set --hs-band to the surface and add * `backdrop-filter: none` — see the note in the commit for the variants. */ :root[data-theme="light"] .hs-navbar--pill { --hs-band: var(--wp--preset--color--surface); --hs-on-band: var(--wp--preset--color--contrast); --hs-on-band-muted: var(--wp--preset--color--muted); --hs-accent-on-band: var(--wp--preset--color--accent-strong); /* The presets themselves, not just the --hs-* aliases above. The header block * carries textColor:"on-band", so WordPress paints it with its own * .has-on-band-color utility, and that reads the preset variable directly * rather than the alias — leaving the pill's inherited colour near-white while * everything keyed off --hs-on-band had already gone dark. Re-pointing the * preset here catches the utility class too. * * Note this only works because the utility resolves the var() on the element * itself. The --hs-* aliases above still have to be redeclared separately: they * are declared once on :root, so their computed value is substituted there and * inherited already-resolved — re-pointing a preset lower down cannot reach * back into them. */ --wp--preset--color--on-band: var(--wp--preset--color--contrast); --wp--preset--color--on-band-muted: var(--wp--preset--color--muted); --wp--preset--color--accent-on-band: var(--wp--preset--color--accent-strong); } /* The signup dialog paints its submit button with --hs-signal, the *line* step, * because cyan needs no separate fill at night — the two are one colour there. * By day the line step is the darkened teal, so the label on it flips from the * deep band to the light ink. * * The newsletter *card* is deliberately not in this rule any more. It used to be, * because it shared the dialog's arrangement; it now goes through the banner * themes, whose teal button is painted with --hs-signal-fill — full-strength * Electric Cyan in both modes. That plate stays light, so its label stays dark, * and flipping it here would have put near-white on #00c8d8 at 2.0:1. Cyan's * fill/line split is described at --hs-cyan-fill in chrome-night.css. */ :root[data-theme="light"] .hs-newsletter { --hs-signal-ink: var(--wp--preset--color--accent-ink); }