/* * Design tokens — single source of truth for all blocks and templates. * Edit ONLY via team agreement (see CLAUDE.md §4 and §12 Decisions log). * * Direction: "Glitchwave" — toxic arcade maximalism. A dead CRT screen * (abyssal teal-black) that everything ignites against: five neons in * permanent rotation, 2px strokes carried by BLOOM rather than thickness, * scanlines over the entire page, HUD corner notches instead of tilt, and * arcade keys that physically press. * * THE GUIDING QUESTION IS "does this glow, hum, and feel slightly * overclocked?" If a surface feels static or safe, it is wrong. But the * chaos is SYSTEMATIC — every value below is a token, every repeated element * rotates through the same five neons in the same order, and nothing is * hand-picked per element. That is what keeps it maintainable. * * DE-FINGERPRINTING, WHICH IS WHY THIS SKIN EXISTS (CLAUDE.md §1): this is * the FOURTH Thai site we run in the same market. It must share nothing * visible with `thailand-theme` ("Thong Kham" — sand paper, white cards, gold * foil, Kanit + Noto Sans Thai), `thailand-theme2` ("Bangkok Night" — * night-blue glass, one cyan action colour, Bai Jamjuree + IBM Plex Sans * Thai) or `thailand-theme3` ("Saeng Si" — cosmic purple-black, five accents, * 4px frames, HARD OFFSET shadows, Mitr + Prompt + Chakra Petch). * * Site #3 is the one to watch, because it is also dark and also rotates five * accents. What separates us from it, deliberately and on every surface: * - the page is TEAL-black, not purple-black, and the anchor neon is a * toxic green that #3 does not contain at all; * - DEPTH IS BLOOM. #3 stacks hard zero-blur offset shadows in clashing * colours; here a diagonal offset shadow is an ANTI-PATTERN and every * shadow in the theme is a soft neon glow or an arcade underside; * - frames are 2px, not 4px — weight comes from the glow around a stroke, * never from the stroke; * - nothing tilts. #3's signature off-kilter move is `rotate(-1deg)` on * every repeated element; ours is a clip-path CORNER NOTCH, and rotation * is banned; * - buttons are chunky 6px arcade keys that travel downward on press, not * 999px pills; * - the whole page carries CRT scanlines and static noise, and headlines * are RGB-split rather than poster-shadowed. * * --------------------------------------------------------------------------- * FIVE RULES THAT ARE MEASURED, NOT TASTE. Read before changing a colour. * --------------------------------------------------------------------------- * * 1. EVERY ACCENT TAKES INK, EXCEPT VIOLET. Measured against --sn-bg * #051014 as ink: * slime #39FF14 14.20:1 coral #FF3B6B 5.58:1 * azure #1E9BFF 6.59:1 amber #FFB000 10.51:1 * violet #9D4EDD 4.19:1 ← ink FAILS. Mint-white on it reads 4.49:1. * So --sn-acc-4 is the one slot whose ink is mint-white, the rotation * table ships --sn-acc-ink alongside --sn-acc so no caller has to know * that, and A VIOLET FILL NEVER CARRIES SMALL TEXT — 4.49 clears AA for * large text (≥18.66px bold / 24px) and is a rounding error short of it * for body sizes. Every label on a violet fill in this theme is ≥18px 700. * * 2. TWO ACCENTS CANNOT BE A GLYPH AT FULL STRENGTH, and the scanlines are * why. Measured as a FOREGROUND on page / tile / inset, first clean and * then as the browser actually paints it under the 6% fixed overlay: * slime 14.20 11.76 12.78 -> 12.57 10.58 12.62 * coral 5.58 4.62 5.02 -> 5.02 4.22 4.57 tile FAILS * azure 6.59 5.46 5.93 -> 5.92 4.98 5.94 * violet 4.19 3.47 3.77 -> 3.80 3.20 3.47 FAILS EVERYWHERE * amber 10.51 8.70 9.46 -> 9.30 7.83 9.34 * So the FOREGROUND use of those two is lifted and nothing else is: * --sn-acc-2-fg #FF5C82 and --sn-acc-4-fg #BE8CF5, which put every slot * above 4.5 on every surface with the overlay on. Fills, strokes, blooms, * rings and grid lines keep the TRUE neon — those are the big surfaces, * so the page still reads as five screaming colours. Use --sn-acc-fg for * any accent-coloured GLYPH and none of this has to be remembered. * * 3. --sn-text-muted must clear 4.5:1 against the LIGHTEST surface it lands * on, which is --sn-surface #0E2620 — the tile, not the page and not the * inset, because the inset RECEDES on this skin (see the surfaces block). * #8FB3AC reads 7.00 there clean and 6.32 under the overlay. * * 4. BODY TEXT STAYS AT FULL MINT-WHITE. #F2FFFC on #051014 is 18.78:1, and * unlike every previous dark skin in this repo the body colour is NOT * dimmed a notch for reading comfort. The headroom is spent on the * scanlines instead — see the two-layer note under --sn-pat-scanlines. * * 5. NEON IS DECORATIVE. An accent may carry a HUD label, a numeral, a * ticker or a heading — never a run of body copy, and never a small glyph * that is the only thing distinguishing two states. Glow is not contrast: * every colour pair below has to pass with the bloom switched off. * * --------------------------------------------------------------------------- * THAI TYPOGRAPHY — three rules, and they OVERRIDE the design brief. * --------------------------------------------------------------------------- * Glitchwave asks for UPPERCASE headlines and buttons, `tracking-[0.25em]` * mono HUD labels and `leading-none`. All three are Latin-only moves and all * three break Thai. They are not adopted, and a rule that reintroduces any of * them on Thai-bearing text is breaking Thai, not styling it: * 1. --sn-lh-body 1.9 / --sn-lh-heading 1.34. Thai stacks vowel and tone * marks ABOVE and BELOW the baseline; at `leading-none` a two-line Thai * headline collides with itself. * 2. NO text-transform: uppercase anywhere. Thai has no letter case, so it * does nothing to Thai and shouts at any Latin mixed into the same run. * 3. NO letter-spacing on any string an editor can type. Thai glyphs join * and stack; positive tracking detaches a tone mark from its consonant * and negative tracking crashes them together. * * THE ONE SCOPED EXCEPTION, and it is what makes the HUD chrome possible: * --sn-hud-track below is allowed on ::before / ::after rules whose `content` * is a LITERAL Latin/digit string written into the stylesheet — the marquee * tickers, the `>` prompts, the index numerals, the status readouts. No Thai * glyph can ever enter those strings, so rule 3's reason does not apply to * them. It must never be set on an element that renders post content, an ACF * field, a menu item or a block heading. Grep for --sn-hud-track: every hit * should sit in a rule that also declares `content:`. * * The loudness the brief wants is otherwise carried by SIZE, WEIGHT, COLOUR, * BLOOM and the RGB-split stacks — see --sn-ts-* below. */ /* ---------- Fonts (self-hosted, thai + latin subsets) ---------- */ /* * Two files per face — the Thai block (U+0E01–0E5B) and Latin. Thai pages mix * Latin constantly (brand names, "LINE", numerals), so both are always needed. * * THREE ROLES, matching the brief's heading / body / HUD split. The brief * names Space Grotesk, Chivo and Space Mono; the first two draw no Thai at * all, so the two text roles are cast with Thai faces chosen for the same * register rather than substituted blindly: * * display Fahkwang 500/600 — squared, angular, loopless Thai grotesk * (Cadson Demak). Flat terminals and tight * counters: the closest Thai has to Space * Grotesk's mechanical, slightly quirky * register, and nothing like the rounded * geometric faces the maximalist default * reaches for (anti-pattern 12). * body Sarabun 400/700 — the sturdy Thai workhorse grotesk. Chosen * because it stays legible UNDER THE * SCANLINES: open apertures and even stroke * weight survive an 18%-black bar every * fourth pixel row in a way a fine-stroked * face does not. * accent Space Mono 400/700 — the brief's HUD face, kept verbatim. LATIN * AND DIGITS ONLY, on purpose: it is used * for figures, rank marks, tickers and the * 404 code, and any Thai that lands in it * falls through to Fahkwang. That fallback * is the reason --sn-hud-track is scoped to * generated content — a tracked Thai run in * the fallback face would be a rule-3 * violation. * * None of the three is shared with our other Thai sites (Kanit + Noto Sans * Thai on #1, Bai Jamjuree + IBM Plex Sans Thai on #2, Mitr + Prompt + * Chakra Petch on #3) or with the `thai-asset` branch (Anuphan). Type is a * de-fingerprinting layer on top of the class hashing, same as the palette. * * 700 IS THE CEILING, and on Fahkwang it is 600 — that family stops there. * Asking for a weight a file does not carry gets a synthesised fake-bold that * smears Thai tone marks into their consonants. Fahkwang 600 is already * heavier on screen than most Latin 700s. * Ten files, 102KB total. */ @font-face { font-family: 'Fahkwang'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/fahkwang-500-thai.woff2') format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: 'Fahkwang'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/fahkwang-500-latin.woff2') format('woff2'); 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: 'Fahkwang'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/fahkwang-600-thai.woff2') format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: 'Fahkwang'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/fahkwang-600-latin.woff2') format('woff2'); 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: 'Sarabun'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/sarabun-400-thai.woff2') format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: 'Sarabun'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/sarabun-400-latin.woff2') format('woff2'); 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: 'Sarabun'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/sarabun-700-thai.woff2') format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: 'Sarabun'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/sarabun-700-latin.woff2') format('woff2'); 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; } /* Latin only — see the role note above. */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/space-mono-400-latin.woff2') format('woff2'); 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: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/space-mono-700-latin.woff2') format('woff2'); 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; } /* ---------- Tokens ---------- */ :root { /* ===== Surfaces ===== The dead screen, then two lifts out of it. Both lifts are OPAQUE on purpose: the brief reaches for translucent HUD panels over the page pattern, but the comparison table's sticky label column paints --sn-surface and would let the scrolling rows show straight through it. Panels carry their OWN pattern layer instead (see --sn-pat-* and .xca590eed), which gives the same screen-over-screen depth with none of the bleed-through bugs. THE INSET RECEDES, IT DOES NOT RISE, and that inverts what every previous skin in this repo did. --sn-surface-2 is DARKER than the tile it sits in, not lighter: an inset here is a terminal window let into a HUD panel, so it goes toward the void. That is not only a metaphor — it is what makes rule 2 a two-colour problem instead of a four-colour one. A raised inset (#143A31 was the first attempt) pushed coral, azure AND violet below 4.5 as glyphs and would have forced a pastel lift on three of the five neons. Going down instead of up costs nothing and keeps the palette hot. */ --sn-bg: #051014; /* abyss — the dead CRT everything ignites against */ --sn-surface: #0E2620; /* HUD tiles / panels — dark toxic teal */ --sn-surface-2: #04100F; /* RECESSED: terminal windows, inputs, stat tiles, toned rows. 1.21 off the tile, which reads as a clear step down. */ /* --sn-border IS TOXIC SLIME, and that single value carries the whole skin the way "border is hot magenta" carried the Saeng Si one. There are NO neutral borders anywhere in this theme: a grey edge is the one thing that would make the page look like everybody else's. Strokes are --sn-rule (2px) and the WEIGHT COMES FROM THE BLOOM AROUND THEM — a 2px neon edge with an outer glow reads bolder than a dull 8px line, which is the single biggest difference from the 4px frames on site #3. */ --sn-border: #39FF14; /* ===== Text ===== Both at full phosphor mint-white. See rule 4 — the contrast headroom a dark skin normally spends on reading comfort is spent on the scanline overlay instead. NOT #FFFFFF: pure white on a near-black screen reads as paper, and this page is a monitor. */ --sn-heading: #F2FFFC; --sn-text: #F2FFFC; --sn-text-muted: #8FB3AC; /* see rule 3 in the header */ /* ===== The five neons ===== This is the palette. Everything repeated on the page — tiles, stats, FAQ rows, steps, chips, ticker segments — rotates through these five IN THIS ORDER via the rotation table in base.css. Never pick one by hand for a repeated element; that is what makes the chaos look designed instead of random. Slime is the brand anchor and gets the hero. */ --sn-acc-1: #39FF14; /* slime — toxic terminal green, the signature */ --sn-acc-2: #FF3B6B; /* coral — hot laser, pink-red heat */ --sn-acc-3: #1E9BFF; /* azure — cold digital blue */ --sn-acc-4: #9D4EDD; /* violet — blacklight depth. SEE RULES 1 AND 2 */ --sn-acc-5: #FFB000; /* amber — warning-light glow */ /* The rotation slots. A repeated element reads: --sn-acc its colour, for FILLS, strokes and blooms; --sn-acc-ink for anything printed ON that colour; --sn-acc-fg when the accent itself is the FOREGROUND (an icon, a numeral, a marker) sitting on a tile or the page; --sn-acc-clash the neon its STROKE takes, two slots away in the rotation so a fill and its border always fight. The table in base.css sets all four together, plus the two bloom layer colours, so a caller never has to know which slot it landed on. Defaults are slot 1. --sn-acc-clash is the plain-CSS form of the brief's "clash on purpose": never tone-on-tone, a slime tile takes a coral stroke. Two slots of separation is the maximum hue distance the five-colour wheel allows and it is applied uniformly rather than picked per element. */ --sn-acc: var(--sn-acc-1); --sn-acc-ink: var(--sn-bg); --sn-acc-fg: var(--sn-acc-1); --sn-acc-clash: var(--sn-acc-2); /* The two foreground lifts, per rule 2. Glyphs only — never a fill, never a stroke, never a bloom colour. */ --sn-acc-2-fg: #FF5C82; /* coral, lifted for foreground glyphs only */ --sn-acc-4-fg: #BE8CF5; /* violet, lifted for foreground glyphs only */ /* ===== Brand roles ===== Token NAMES are inherited across every market skin and are deliberately not renamed — a skin swaps values, never names, or every block stylesheet would need editing. Read them as roles. */ --sn-primary: #39FF14; /* the action colour */ --sn-primary-hover: #7BFF5C; /* BRIGHTER, per the hover rule below */ --sn-primary-dark: #051014; /* ink printed ON primary — 14.20:1 */ --sn-accent: #1E9BFF; /* links and markers — 6.59:1, and cold enough that a link never reads as a CTA */ --sn-pink: #FF3B6B; /* --sn-gold is the MONEY colour and nothing else: payout figures, star ratings, the age badge. It is not a sixth neon and it never fills a button. Amber, 10.51:1 on the abyss. */ --sn-gold: #FFB000; /* HOVERS BRIGHTEN, NEVER DARKEN. The page is the darkest thing in the system, so anything that darkens on hover walks toward the background and disappears. (Inherited unchanged from the last three dark skins.) */ /* ===== Chrome (topbar / header / footer / hero) ===== */ --sn-purple: #0A1D1A; /* chrome body */ --sn-purple-2: #16443A; /* chrome lift / hero bloom */ --sn-purple-deep: #02090B; /* topbar + footer body */ --sn-purple-tint: rgba(57, 255, 20, .14); --sn-on-chrome: #F2FFFC; /* ===== Semantic ===== Pulled INTO the neon family rather than imported from a generic status palette — a muted blue "info" on this page would look like a dead pixel. Measured on the abyss: azure 6.59, slime 14.20, amber 10.51, coral 5.58. Danger is coral and warning is amber, so the two are not neighbouring warm hues. */ --sn-info: #1E9BFF; --sn-tip: #39FF14; --sn-warning: #FFB000; --sn-danger: #FF3B6B; /* Tints for callout backgrounds. Alphas run high (.12–.18): a light-skin tint over a near-black screen is simply not there. */ --sn-info-tint: rgba(30, 155, 255, .16); --sn-tip-tint: rgba(57, 255, 20, .13); --sn-warning-tint: rgba(255, 176, 0, .14); --sn-danger-tint: rgba(255, 59, 107, .16); --sn-primary-tint: rgba(57, 255, 20, .13); /* ===== Typography ===== */ --sn-font: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Leelawadee UI', Tahoma, sans-serif; --sn-font-display: 'Fahkwang', 'Sarabun', -apple-system, 'Leelawadee UI', Tahoma, sans-serif; /* Space Mono covers Latin and digits; Thai falls through to Fahkwang. */ --sn-font-accent: 'Space Mono', 'Fahkwang', ui-monospace, SFMono-Regular, Menlo, monospace; /* The brief wants everything a size up from a normal site, and Thai wants the same thing for a different reason (mark stacking needs height). The two agree, so the scale is aggressive. */ --sn-fs-xs: .8125rem; /* 13px HUD / mono labels */ --sn-fs-sm: 1rem; /* 16px small */ --sn-fs-md: 1.1875rem; /* 19px body — the brief's text-lg/text-xl band */ --sn-fs-lg: 1.625rem; /* 26px h3 */ /* h1 and h2 are FLUID: these two are the CEILINGS their clamps run up to, not fixed sizes. The brief asks for 48–72px section headings and a 72–128px hero; 60px and 96px is where that lands once Thai line-height is accounted for, because 1.34 leading on a two-line 128px Thai headline is 343px of headline before the page has said anything. */ --sn-fs-xl: 3.75rem; /* 60px — h2 ceiling */ --sn-fs-2xl: 6rem; /* 96px — h1 ceiling */ --sn-lh-body: 1.9; /* Thai rule 1 — do not reduce */ --sn-lh-heading: 1.34; /* Thai rule 1 — do not reduce */ /* THE SCOPED TRACKING TOKEN. Legal ONLY in a rule that also declares `content:` with a literal Latin/digit string. See the Thai typography note in this file's header before using it anywhere else. */ --sn-hud-track: .22em; /* ===== Spacing (multiples of 4) ===== */ --sn-sp-1: .25rem; --sn-sp-2: .5rem; --sn-sp-3: .75rem; --sn-sp-4: 1rem; --sn-sp-6: 1.5rem; --sn-sp-8: 2rem; --sn-sp-12: 3rem; --sn-sp-16: 4rem; /* The brief's py-24 / py-32 section rhythm — full-bleed bands and the hero want more air than sp-16 gives them. */ --sn-sp-24: 6rem; --sn-sp-32: 8rem; /* ===== Shape ===== Chunky, not soft, and NEVER a pill — a 999px capsule with a gradient fill is the brief's anti-pattern 3. --sn-radius-pill keeps its NAME (token names are stable across skins, §4) but is now the arcade-key 6px, so every caller that asked for a capsule gets a key instead with no block stylesheet edited. */ --sn-radius: 8px; /* tiles, panels, images */ --sn-radius-sm: 6px; /* inputs, small controls */ --sn-radius-pill: 6px; /* was a capsule; now the arcade key. See above. */ --sn-rule: 2px; /* the standard stroke — glow does the weight */ --sn-rule-heavy: 4px; /* featured tiles, section frames */ /* THE HUD CORNER NOTCH — this skin's signature shape, and the thing that replaces site #3's rotate(-1deg) as the "off-kilter" move. One corner cut so a tile reads as a heads-up-display frame rather than a card. TWO HAZARDS, both real and both hit while building this: - clip-path CLIPS box-shadow, so a notched element gets its bloom from `filter: drop-shadow()` instead, which follows the clipped silhouette. Use the .xfa8dc52a utility in base.css, do not hand-roll it. - clip-path also clips CHILDREN. Anything that straddles an edge (the casino rank tile, a badge hanging off a corner) must not be inside a notched box — those elements get the sticker ring instead. */ --sn-notch: 16px; --sn-notch-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); /* Mirrored, for elements that want the cut on the left. */ --sn-notch-path-l: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px); /* ===== Shadows ===== BLOOM IS THE ONLY ELEVATION LANGUAGE. There is no grey drop shadow and no diagonal stacked offset anywhere in this theme — the second of those is site #3's entire depth system and the brief's anti-pattern 2. The bloom follows --sn-acc through color-mix, so a rotated element glows in its own neon without restating the stack. --sn-shadow-1 and --sn-shadow-2 keep their names from the offset era and are now the two bloom layer colours, so the rotation table still recolours a whole subtree in one declaration. */ --sn-shadow-1: var(--sn-acc-1); --sn-shadow-2: var(--sn-acc-2); --sn-bloom: 0 0 18px color-mix(in srgb, var(--sn-shadow-1) 45%, transparent), 0 0 44px color-mix(in srgb, var(--sn-shadow-1) 22%, transparent); --sn-bloom-lg: 0 0 24px color-mix(in srgb, var(--sn-shadow-1) 55%, transparent), 0 0 60px color-mix(in srgb, var(--sn-shadow-2) 35%, transparent), 0 0 100px color-mix(in srgb, var(--sn-acc-4) 28%, transparent); /* HUD panels and terminal windows: lit from inside as well as outside. */ --sn-bloom-inset: inset 0 0 24px color-mix(in srgb, var(--sn-shadow-1) 16%, transparent), 0 0 20px color-mix(in srgb, var(--sn-shadow-1) 28%, transparent); /* drop-shadow() equivalents, for notched elements — box-shadow is clipped by clip-path and these are not. Two layers only: drop-shadow is far more expensive than box-shadow and three of them on a scrolling grid is visibly slower. */ --sn-bloom-filter: drop-shadow(0 0 10px color-mix(in srgb, var(--sn-shadow-1) 50%, transparent)) drop-shadow(0 0 26px color-mix(in srgb, var(--sn-shadow-1) 25%, transparent)); /* Legacy names, repointed. Every block that already asked for a shadow or a glow gets a bloom with no edit. */ --sn-shadow: var(--sn-bloom); --sn-shadow-lg: var(--sn-bloom-lg); --sn-glow: var(--sn-bloom); --sn-glow-lg: var(--sn-bloom-lg); /* THE STICKER RING — two clashing neons stacked as zero-blur spread, the brief's double-outline badge treatment. This is a hard edge and NOT an offset: it sits concentrically around the element, which is what keeps it on the right side of anti-pattern 2. */ --sn-ring: 0 0 0 3px var(--sn-acc), 0 0 0 6px var(--sn-acc-clash); /* THE ARCADE HARD-PRESS — a single solid neon underside that collapses on :active so the button travels like a mechanical key. ONE offset, always straight down, never diagonal and never stacked. --sn-arcade-drop is the travel and the underside depth at once; the two must stay equal or the key appears to sink through its own base. */ --sn-arcade-drop: 6px; --sn-arcade: 0 var(--sn-arcade-drop) 0 color-mix(in srgb, var(--sn-acc) 38%, #000), 0 var(--sn-arcade-drop) 18px color-mix(in srgb, var(--sn-acc) 40%, transparent); --sn-arcade-press: 0 0 18px color-mix(in srgb, var(--sn-acc) 45%, transparent), 0 0 40px color-mix(in srgb, var(--sn-acc) 25%, transparent); /* ===== Text shadow stacks ===== CHROMATIC ABERRATION, not poster shadows. The glyph is split into a coral copy offset left and an azure copy offset right — a misaligned RGB signal — optionally over a neon glow. This REPLACES site #3's diagonal stacked offsets entirely and is the headline signature. EVERY VALUE IS IN em, NOT px, and that is load-bearing twice over: a 2px split is right on a 96px hero and turns a 26px Thai sub-heading into a smear, and the glow radius has to scale with the glyph or it swallows the tone mark sitting above it. THE SPLIT IS HORIZONTAL ONLY, which is the one way this treatment is KINDER to Thai than the skin it replaces: a vertical or diagonal offset puts a copy of a tone mark inside the consonant below it, and a purely horizontal one never can. DISPLAY ROLE ONLY — never on body text, never under 1.25rem. */ --sn-ts-1: 0 0 .17em color-mix(in srgb, currentColor 55%, transparent); --sn-ts-2: -.022em 0 var(--sn-acc-2), .022em 0 var(--sn-acc-3); --sn-ts-3: -.028em 0 var(--sn-acc-2), .028em 0 var(--sn-acc-3), 0 0 .42em color-mix(in srgb, var(--sn-acc-1) 45%, transparent); /* ===== Gradients ===== Names inherited from earlier market skins; read them as roles. --sn-gold-grad = THE ACTION GRADIENT (all five neons here) --sn-lacquer-grad = the chrome (header, footer, topbar, dark slabs) --sn-band-grad = a band that must read LIGHTER than the tile it sits on: table headers, panel bars. The action gradient starts and ends on slime so an animated loop is seamless. Sized at 200% by callers — at 300% the biggest surfaces show only a third of the palette at rest. */ --sn-gold-grad: linear-gradient(90deg, #39FF14 0%, #1E9BFF 24%, #9D4EDD 46%, #FF3B6B 68%, #FFB000 86%, #39FF14 100%); --sn-lacquer-grad: linear-gradient(150deg, #10302A 0%, #071A16 55%, #02090B 100%); --sn-band-grad: linear-gradient(150deg, #1B4A3E 0%, #0E2620 100%); /* THE SCANLINE SWEEP — a horizontal bright band that crosses a button or tile on hover. Horizontal, because a diagonal sheen is the glossy-skin move and this one is a CRT refresh passing down the element. */ --sn-sheen: linear-gradient(180deg, transparent 0%, rgba(242, 255, 252, .5) 50%, transparent 100%); /* ===== Patterns ===== MANDATORY LAYERING: the whole page carries scanlines plus noise, and every major section adds one or two of its own. No surface in the theme is a flat fill. They are full `background` shorthands (image, position, size, repeat) so a caller writes `background: var(--sn-pat-halftone), var(--sn-surface);` and gets both the layer and its geometry — a bare background-image token cannot carry its own background-size. Individual opacities stay LOW (.04–.25); the effect is cumulative. */ /* 1. CRT SCANLINES — the global signature, and it ships in TWO STRENGTHS for a measured reason. The brief asks for one fixed 18% overlay across the whole page. Laid over CONTENT that costs real contrast the hex values cannot show: inside a covered pixel row a muted label drops 5.49 -> 4.28 and an azure link 6.59 -> 4.67, i.e. below AA on a YMYL page. So the effect is split: --sn-pat-scanlines .18, and it only ever goes in a BACKGROUND — the page, a panel's own background shorthand, a band. It is under the text, so it costs nothing, and it is where the CRT texture actually lives: every surface in the theme carries it. --sn-pat-scanlines-soft .06, and it is the ONE layer allowed OVER content (body::after, fixed). That is what makes the page read as a single screen that the content scrolls behind rather than as a texture glued to each box. At .06 the worst pair in the theme still measures 4.90. DO NOT raise the soft one to match the brief. The number is the accessibility budget for the entire skin, and every contrast figure in the rules above is quoted with it applied. */ --sn-pat-scanlines: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .18) 3px 4px) 0 0 / auto repeat; --sn-pat-scanlines-soft: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .06) 3px 4px) 0 0 / auto repeat; /* 2. Synthwave grid — flat here; the receding HORIZON version is built in base.css, which adds the perspective transform and the fade mask. */ --sn-pat-grid: linear-gradient(rgba(57, 255, 20, .25) 1px, transparent 1px) 0 0 / 40px 40px repeat, linear-gradient(90deg, rgba(57, 255, 20, .25) 1px, transparent 1px) 0 0 / 40px 40px repeat; /* 3. Halftone — denser and finer than a dot grid; reads as print dithering rather than polka dots. */ --sn-pat-halftone: radial-gradient(circle, rgba(30, 155, 255, .15) 1.5px, transparent 1.6px) 0 0 / 14px 14px repeat; --sn-pat-halftone-2: radial-gradient(circle, rgba(57, 255, 20, .12) 1.5px, transparent 1.6px) 0 0 / 22px 22px repeat; /* 4. Static noise — feTurbulence as a data URI. THE OPACITY IS BAKED INTO THE SVG, on the rect, and it has to be: a CSS `background` layer cannot carry its own opacity, so the first version of this token painted a FULL-STRENGTH grey noise field over the whole page and turned the abyss into concrete. `opacity='.06'` sits in the brief's .04–.08 band and reads as grain. If you need it stronger, change the number in the SVG — do not wrap it in an element with an `opacity`, because this layer is stacked with the scanlines and the mesh and would take them down with it. */ --sn-pat-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E") 0 0 / 140px 140px repeat; /* 5. Neon bloom mesh — the coloured light pooling behind a section. */ --sn-pat-mesh: radial-gradient(ellipse at 16% 24%, rgba(57, 255, 20, .16), transparent 55%) no-repeat, radial-gradient(ellipse at 84% 66%, rgba(30, 155, 255, .14), transparent 55%) no-repeat, radial-gradient(ellipse at 52% 108%, rgba(157, 78, 221, .18), transparent 60%) no-repeat; /* LEGACY PATTERN NAMES, repointed at the set above. Nineteen block stylesheets already ask for "the theme's dots" or "the theme's stripes"; repointing rather than renaming is what makes this pass CSS-only in those files too. The mapping is deliberate, not arbitrary: stripes were already horizontal rules, so they become the scanlines, and the dot grids become halftones. */ --sn-pat-dots: var(--sn-pat-halftone); --sn-pat-dots-2: var(--sn-pat-halftone-2); --sn-pat-stripes: var(--sn-pat-scanlines); --sn-pat-checker: var(--sn-pat-grid); /* The house texture, kept under its inherited name so blocks that ask for "the theme's pattern" keep working: halftone over scanlines. */ --sn-grid: var(--sn-pat-halftone), var(--sn-pat-scanlines); /* ===== Legacy names kept but unused on this skin ===== --sn-pink, --sn-primary-hover and --sn-purple-2 are declared and referenced by little or nothing here, and that is deliberate: token NAMES are stable across every market skin in this repo (CLAUDE.md §4), so deleting one would mean editing block stylesheets on every other branch the next time a skin is ported. They are spare, not broken. */ /* ===== Layout ===== Wide. Thai wraps without spaces between words, so a short measure produces very ragged lines — and the brief wants density anyway. */ --sn-container: 1240px; --sn-content: 820px; }