/* * 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: "Saeng Si" (แสงสี — "light and colour", the Thai phrase for the * neon of a night entertainment district). Thai market SITE #3. Maximalism / * dopamine: a cosmic purple-black void, FIVE screaming accents in permanent * rotation, four-pixel clashing frames, hard offset shadows in stacked * colours, and a pattern behind every single surface. * * THE GUIDING QUESTION IS "is this visually overwhelming in a joyful way?" * If a surface looks calm, it is wrong. Empty space is wasted space. But the * chaos is SYSTEMATIC — every value below is a token, every repeated element * rotates through the same five accents 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 * THIRD 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) or with `thailand-theme2` ("Bangkok Night" — * night-blue glass, one cyan action colour, restrained, Bai Jamjuree + IBM * Plex Sans Thai). Site #2 was ALSO dark, so darkness alone does not separate * us: what separates us is that this page has five action colours where that * one has exactly one, 4px frames where it has 1px hairlines, hard offset * shadows where it has soft glow, and a pattern on every surface where it has * a single faint grid. * * --------------------------------------------------------------------------- * FOUR RULES THAT ARE MEASURED, NOT TASTE. Read before changing a colour. * --------------------------------------------------------------------------- * * 1. FOUR OF THE FIVE ACCENTS TAKE INK. ONE TAKES WHITE. Measured against * --sn-bg #0D0D1A as ink: * magenta #FF3AF2 6.56:1 cyan #00F5D4 13.79:1 * yellow #FFE600 15.22:1 orange #FF6B35 6.80:1 * purple #7B2FFF 3.39:1 ← FAILS. White on it reads 5.69:1. * So --sn-acc-5 is the one accent whose ink is white, and the rotation * below ships --sn-acc-ink alongside --sn-acc so no caller has to know * which slot it landed on. Never hardcode ink next to a rotated accent. * * 2. PURPLE IS NEVER TEXT ON THE PAGE. #7B2FFF measures 3.39:1 on the void — * fine for a border, a shadow layer or a fill, never for a label. The other * four all clear 6.5:1 and may carry decorative text. * * 3. --sn-text-muted must clear 4.5:1 against the LIGHTEST surface it lands * on, which is --sn-surface-2 #2D1B4E — not against the page. #A79AD0 * reads 5.92 there and 6.90 on the void. * * 4. 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 from the site #2 pass — same rule, and it * still holds because this skin is dark too.) * * --------------------------------------------------------------------------- * THAI TYPOGRAPHY — three rules, and they OVERRIDE the design brief. * --------------------------------------------------------------------------- * The maximalism brief asks for `uppercase` headlines, `tracking-widest` * 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 * is breaking Thai text, 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 in either direction. Thai glyphs join and stack; * positive tracking detaches a tone mark from its consonant and negative * tracking crashes them together. * The loudness the brief wants is carried by SIZE, WEIGHT, COLOUR and the * shadow stacks instead — 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 / display-accent split: * * display Mitr 600/700 — a chunky, geometric, loopless Thai sans * (Cadson Demak). Rounded terminals and very * wide counters: it is the closest thing Thai * has to a poster face, and it is what makes * a 5.5rem headline read as joyful rather * than as shouting. * body Prompt 400/600 — geometric, loopless, built for long text. * Same family logic as the display face so * they sit together, a size class apart. * accent Chakra Petch 700 — squared, technical, Y2K. Used SPARINGLY and * only for figures and rank marks: numerals, * the 404 code, calculator stat values, the * casino rank discs. This is the brief's * "Bangers / Bungee" slot, in a face that * actually draws Thai. * * None of the three is shared with our other Thai sites (Kanit + Noto Sans * Thai on site #1, Bai Jamjuree + IBM Plex Sans Thai on site #2) 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 ON ALL THREE. The brief asks for 800–900 headline * weights; none of these faces ships one, so `font-weight: 800` gets a * synthesised fake-bold that smears Thai tone marks into their consonants. * Mitr 700 is already heavier than most Latin 800s. Do not ask for more. * Ten files, 152KB total. */ @font-face { font-family: 'Mitr'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/mitr-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: 'Mitr'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/mitr-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: 'Mitr'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/mitr-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: 'Mitr'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/mitr-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; } @font-face { font-family: 'Prompt'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/prompt-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: 'Prompt'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/prompt-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: 'Prompt'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/prompt-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: 'Prompt'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/prompt-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: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/chakra-petch-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: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/chakra-petch-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 void, then two lifts out of it. Both lifts are OPAQUE on purpose: the brief reaches for translucent cards 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. Cards carry their OWN pattern layer instead (see --sn-pat-* and .x8f4af156), which gives the same pattern-on-pattern depth with none of the bleed-through bugs. */ --sn-bg: #0D0D1A; /* the void — cosmic purple-black */ --sn-surface: #251845; /* cards / panels */ --sn-surface-2: #2D1B4E; /* toned rows, inputs, tiles, insets */ /* --sn-border IS HOT MAGENTA, and that single value carries the whole skin the way "border is ink" carried the Kaffefläck 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. Frames are --sn-rule (4px) wide so the clash is actually visible. */ --sn-border: #FF3AF2; /* ===== Text ===== Headings are pure white (19.3:1). Body is a hair off white: at 18px, 1.9 line-height and a Thai face with marks above AND below every other glyph, pure #FFF on a near-black page halates badly over a long guide. #F2EEFF still measures 16.9:1 — the contrast cost is nil and the reading comfort is not. */ --sn-heading: #FFFFFF; --sn-text: #F2EEFF; --sn-text-muted: #A79AD0; /* see rule 3 in the header */ /* ===== The five accents ===== This is the palette. Everything repeated on the page — cards, stats, FAQ items, steps, chips — 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. */ --sn-acc-1: #FF3AF2; /* magenta — electric energy */ --sn-acc-2: #00F5D4; /* cyan — digital glow */ --sn-acc-3: #FFE600; /* yellow — attention */ --sn-acc-4: #FF6B35; /* orange — warmth */ --sn-acc-5: #7B2FFF; /* purple — depth. DECORATIVE ONLY (3.39:1) */ /* The rotation slots. A repeated element reads: --sn-acc its colour, for FILLS, borders and shadows; --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 card or the page. The table in base.css sets all three together so a caller never has to know which slot it landed on. Defaults are slot 1. WHY --sn-acc-fg EXISTS, measured on a real ten-row FAQ rather than guessed: as a foreground the accents read magenta 5.51, cyan 11.59, yellow 12.79, orange 5.72 — and PURPLE 2.85 against a card. That fails the 4.5:1 bar for the ToC numerals and the sources markers AND the 3:1 bar for the FAQ chevron (WCAG 1.4.11). The fill/border/shadow uses of purple are fine and keep the true colour; only the foreground one is lifted, to --sn-acc-5-fg, which is the same hue at 5.45 on a card and 6.48 on the page. Use --sn-acc-fg for any accent-coloured GLYPH. */ --sn-acc: var(--sn-acc-1); --sn-acc-ink: var(--sn-bg); --sn-acc-fg: var(--sn-acc-1); --sn-acc-5-fg: #A97DFF; /* purple, lifted for foreground use 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: #FF3AF2; /* the action colour */ --sn-primary-hover: #FF6FF6; /* BRIGHTER, per rule 4 */ --sn-primary-dark: #0D0D1A; /* ink printed ON primary — 6.56:1 */ --sn-accent: #00F5D4; /* links and markers — 13.79:1 */ --sn-pink: #FF3AF2; /* --sn-gold is the MONEY colour and nothing else: payout figures, star ratings, the age badge. It is not a sixth accent and it never fills a button. 15.22:1 on the void — the brightest thing in the system. */ --sn-gold: #FFE600; /* ===== Chrome (topbar / header / footer / hero) ===== */ --sn-purple: #17103A; --sn-purple-2: #3B1D7A; /* chrome lift / hero bloom */ --sn-purple-deep: #08060F; /* topbar + footer body */ --sn-purple-tint: rgba(255, 58, 242, .16); --sn-on-chrome: #FFFFFF; /* ===== Semantic ===== Pulled INTO the accent family rather than imported from a generic status palette — a muted blue "info" on this page would look like a bug. Measured on the void: violet 6.44, spring 12.7, yellow 15.22, rose 5.89. Danger is rose, not the orange accent, so warning and danger are not two neighbouring warm hues. */ --sn-info: #B58CFF; --sn-tip: #2BF0A6; --sn-warning: #FFE600; --sn-danger: #FF4D6D; /* Tints for callout backgrounds. Alphas run high (.14–.18): a light-skin tint over a near-black page is simply not there. */ --sn-info-tint: rgba(181, 140, 255, .16); --sn-tip-tint: rgba(43, 240, 166, .14); --sn-warning-tint: rgba(255, 230, 0, .14); --sn-danger-tint: rgba(255, 77, 109, .16); --sn-primary-tint: rgba(255, 58, 242, .16); /* ===== Typography ===== */ --sn-font: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Leelawadee UI', Tahoma, sans-serif; --sn-font-display: 'Mitr', 'Prompt', -apple-system, 'Leelawadee UI', Tahoma, sans-serif; --sn-font-accent: 'Chakra Petch', 'Mitr', 'Leelawadee UI', Tahoma, sans-serif; /* 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: .875rem; /* 14px meta */ --sn-fs-sm: 1rem; /* 16px small */ --sn-fs-md: 1.125rem; /* 18px body */ --sn-fs-lg: 1.5rem; /* 24px 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; 52px and 88px is where that lands once Thai line-height is accounted for, because a 1.34 leading on a two-line 128px Thai headline is 343px of headline before the page has said anything. */ --sn-fs-xl: 3.25rem; /* 52px — h2 ceiling */ --sn-fs-2xl: 5.5rem; /* 88px — h1 ceiling */ --sn-lh-body: 1.9; /* Thai rule 1 — do not reduce */ --sn-lh-heading: 1.34; /* Thai rule 1 — do not reduce */ /* ===== 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; /* ===== Shape ===== Generous curves, and a FRAME WIDTH as a token: the brief's border-4 / border-8. Every frame in the theme is --sn-rule; inner dividers are the only 2px lines allowed. */ --sn-radius: 24px; /* cards, panels, images */ --sn-radius-sm: 16px; /* containers, inputs, small controls */ --sn-radius-pill: 999px; /* buttons, badges, chips */ --sn-rule: 4px; /* the standard frame */ --sn-rule-heavy: 8px; /* section dividers, featured elements */ /* ===== Shadows ===== TWO SYSTEMS, and elements that matter carry both. HARD: flat, zero-blur, offset, stacked, each layer a different accent and each offset double the last. This is where the depth comes from — there is no soft drop shadow anywhere in this theme. The two layer colours are their own tokens so a context can recolour a whole subtree's shadows in one declaration instead of restating the stack; the rotation table uses exactly that. */ --sn-shadow-1: var(--sn-acc-5); --sn-shadow-2: var(--sn-acc-1); --sn-shadow: 6px 6px 0 var(--sn-shadow-1), 12px 12px 0 var(--sn-shadow-2); --sn-shadow-lg: 10px 10px 0 var(--sn-shadow-1), 20px 20px 0 var(--sn-shadow-2), 30px 30px 0 var(--sn-acc-2); /* GLOW: soft, coloured, luminous. Buttons, icons, featured elements. Mixed with the hard stack on hero elements. */ --sn-glow: 0 0 20px rgba(255, 58, 242, .50), 0 0 42px rgba(0, 245, 212, .30); --sn-glow-lg: 0 0 40px rgba(255, 58, 242, .60), 0 0 80px rgba(255, 230, 0, .35), 0 0 120px rgba(123, 47, 255, .35); /* ===== Text shadow stacks ===== The brief's signature move. EVERY VALUE IS IN em, NOT px, and that is load-bearing: a flat 2/4/6px stack is right on a 5rem hero and turns a 1.5rem Thai sub-heading into an unreadable smear, because Thai already carries a tone mark directly above most consonants and the shadow of that mark lands inside the glyph below it. In em the stack scales with whatever size a block sets and stays proportional. HARD LIMIT: these are DISPLAY-ROLE ONLY (h1, h2, hero, banner headings, the 404 code). Never on body text, never under 1.25rem. */ --sn-ts-1: .035em .035em 0 var(--sn-acc-5); --sn-ts-2: .035em .035em 0 var(--sn-acc-5), .07em .07em 0 var(--sn-acc-1); --sn-ts-3: .035em .035em 0 var(--sn-acc-5), .07em .07em 0 var(--sn-acc-1), .105em .105em 0 var(--sn-acc-2); /* ===== Gradients ===== Names inherited from earlier market skins; read them as roles. --sn-gold-grad = THE ACTION GRADIENT (all five accents here) --sn-lacquer-grad = the chrome (header, footer, topbar, dark slabs) --sn-band-grad = a band that must read LIGHTER than the card it sits on: table headers, panel bars. The action gradient is 300% wide so it can be animated with x1d891514; it starts and ends on the same magenta so the loop is seamless. */ --sn-gold-grad: linear-gradient(90deg, #FF3AF2 0%, #7B2FFF 22%, #00F5D4 46%, #FFE600 70%, #FF6B35 85%, #FF3AF2 100%); --sn-lacquer-grad: linear-gradient(150deg, #1E1248 0%, #130B2E 55%, #08060F 100%); --sn-band-grad: linear-gradient(150deg, #452880 0%, #2D1B4E 100%); --sn-sheen: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%); /* ===== Patterns ===== MANDATORY LAYERING: every section carries at least two of these, and 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-dots), var(--sn-surface);` and gets both the layer and its geometry — a bare background-image token cannot carry its own background-size, which is the trap the previous skin's --sn-grid walked into. Individual opacities stay LOW (.05–.12); the effect is cumulative. */ --sn-pat-dots: radial-gradient(circle, rgba(255, 58, 242, .30) 1.5px, transparent 1.5px) 0 0 / 22px 22px repeat; --sn-pat-dots-2: radial-gradient(circle, rgba(0, 245, 212, .22) 1px, transparent 1px) 0 0 / 34px 34px repeat; --sn-pat-stripes: repeating-linear-gradient(45deg, transparent 0 10px, rgba(255, 230, 0, .07) 10px 20px) 0 0 / auto repeat; --sn-pat-checker: conic-gradient(from 90deg at 1px 1px, transparent 90deg, rgba(0, 245, 212, .05) 0) 0 0 / 40px 40px repeat; --sn-pat-mesh: radial-gradient(ellipse at 18% 28%, rgba(255, 58, 242, .16), transparent 52%) no-repeat, radial-gradient(ellipse at 82% 68%, rgba(0, 245, 212, .14), transparent 52%) no-repeat, radial-gradient(ellipse at 52% 108%, rgba(123, 47, 255, .18), transparent 60%) no-repeat; /* The house texture, kept under its inherited name so blocks that ask for "the theme's pattern" keep working: dots over stripes, the brief's default pairing. */ --sn-grid: var(--sn-pat-dots), var(--sn-pat-stripes); /* ===== Legacy names kept but unused on this skin ===== --sn-pink, --sn-primary-hover, --sn-purple and --sn-purple-2 are declared and referenced by 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 unused because this skin has no single "hover colour" for the action (it is a gradient that shifts) and no flat chrome fill (the header is a gradient plus a pattern). If you are wondering whether they are broken: they are not, they are spare. */ /* ===== 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; }