/* ========================================================================== 4ewdsr5y — THEME TOKENS -------------------------------------------------------------------------- The only file you need to touch to re-skin the entire site. Every colour, size, space and timing used anywhere is declared here. Direction: dark streetwear. Near-black ground, bone ink, monochrome- dominant. Colour is withheld on purpose so the garments carry it — the only chromatic note is --alert, and it is spent sparingly. Dark is the default. The light theme below overrides tokens only; no rule anywhere else in the codebase references a specific theme. ========================================================================== */ /* ---- The typeface, served from this site --------------------------------- JetBrains Mono (SIL Open Font License 1.1), the files Google Fonts itself serves, now in assets/fonts/. It used to be fetched from fonts.googleapis.com, which handed every visitor's IP address to Google before they had agreed to anything — the GDPR problem a Munich court ruled on in 2022 — and which cost two DNS lookups and two TLS handshakes to two origins before a letter could be drawn. Self-hosted, the CSP allows nothing from outside this site at all, and the brand's own typeface can no longer be taken away by a third party. ONE FILE PER ALPHABET, NOT PER WEIGHT: this is a variable font covering weights 100-800, which is why Google serves the same file for 400 and 700 and why `font-weight: 100 800` below is correct. Declaring a single weight would make the browser fake the bold instead of instancing the real one. ONLY LATIN AND CYRILLIC are shipped. Measured against every string in the site: Latin-ext, Cyrillic-ext, Greek and Vietnamese are never used, so the four files for them would be dead weight. The copy is Russian — if these two are ever regenerated, the Cyrillic file is NOT optional. `unicode-range` is what keeps that cheap: a browser downloads the Cyrillic file only if Cyrillic is on the page. Keep both ranges exactly as Google publishes them. */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("../assets/fonts/jetbrains-mono-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: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("../assets/fonts/jetbrains-mono-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } :root { color-scheme: dark; /* --- Surfaces --------------------------------------------------------- */ /* Warm blacks and ashed bone. The neutral near-black read clean and tactical; these are dirtier, which is the point. */ --bg: #0a0806; --bg-raised: #12100d; --bg-inset: #060504; --bg-panel: #0f0d0a; /* Product photography sits on this. Kept dark in BOTH themes so garments shot on white never punch a glaring hole in a dark interface — images are blend-mode composited onto the plate instead. */ --bg-plate: #16130f; /* --- Ink (bone) ------------------------------------------------------- */ --fg: #e2dccf; /* 14.6:1 on --bg */ --fg-dim: #948d80; /* 6.1:1 on --bg */ --fg-faint: #8a8375; /* 5.2:1 on --bg — the lowest we allow for text */ /* --- Rules & edges ---------------------------------------------------- */ --rule: rgba(226, 220, 207, 0.13); --rule-mid: rgba(226, 220, 207, 0.24); --rule-strong: rgba(226, 220, 207, 0.42); /* --- Signal (BLOOD) ---------------------------------------------------- Split into two reds, because a colour used as a FILL can be far darker than one used as TEXT. --signal thin marks and coloured text on the dark ground. This is as deep as a red can go and still clear 4.5:1 here (it measures 4.52:1). Below this it stops being readable, not a matter of taste. --signal-fill the deep blood you actually see, used on every solid surface — acquire, selected size and filter, featured tag. It is only 1.6:1 on --bg, which does not matter, because nothing is ever the colour of it: text on top is --signal-ink at 7.7:1. That split is what makes a genuinely deep blood possible. Collapsing them back into one token forces the whole accent up to a bright red. */ --signal: #e03444; --signal-fill: #8b1b2e; --signal-soft: rgba(224, 52, 68, 0.12); --signal-edge: rgba(224, 52, 68, 0.45); --signal-ink: #f2e9ea; /* text drawn ON a --signal-fill surface */ /* --- Damage ------------------------------------------------------------ Deep wine, used ONLY for the screen-edge vignette. It is far too dark to carry text (about 2.5:1 on --bg), which is exactly why it works as atmosphere: it bleeds in from the edges without competing for the eye. */ --damage: #7a1225; --damage-idle: 0.16; /* resting vignette strength */ --damage-beat: 0.36; /* ambient heartbeat, every --beat-every */ --damage-hit: 0.72; /* peak of a damage pulse */ --beat-every: 10s; /* documented here; the interval lives in damage.js */ /* Heal — the counterpart to damage. Cool bone, so it reads as restored without introducing a third hue. */ --heal: #dfeae6; --heal-peak: 0.42; --alert: #e03e46; /* 4.8:1 on --bg — sold out, errors, only ever this */ --ok: #4ac085; /* --- Type ------------------------------------------------------------- */ --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", Menlo, monospace; /* Scale. 11px is ambient telemetry (status bar, index chips) and 12px is secondary chrome (breadcrumbs, counters, key legends). Product copy and every interactive control sit at 13px or above — the reference site put its size swatches and add-to-cart at 8px, which is what this avoids. */ --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 21px; --fs-xl: 28px; --fs-2xl: clamp(30px, 5vw, 46px); --fs-3xl: clamp(42px, 11vw, 132px); /* wordmark */ /* Display tier. The site had nothing above 28px, which is why it read as interface rather than identity. Oversized mono is the one type moment. */ --fs-display: clamp(52px, 11.5vw, 168px); /* drop name, shop header */ --fs-display-sm: clamp(30px, 4.6vw, 62px); /* product name, PDP */ --lh-tight: 1.12; --lh-snug: 1.35; --lh-body: 1.62; --tr-wide: 0.12em; --tr-wider: 0.24em; /* --- Space ------------------------------------------------------------ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --gutter: clamp(16px, 4vw, 40px); --maxw: 1560px; /* --- Motion ----------------------------------------------------------- */ --dur-fast: 120ms; --dur: 200ms; --dur-slow: 340ms; --ease: cubic-bezier(0.2, 0, 0.15, 1); /* Boot sequence budget. Deliberately short — the whole intro finishes well inside a second, so it never withholds first paint. */ --boot-step: 60ms; --boot-total: 540ms; /* --- Atmosphere -------------------------------------------------------- Film grain and fog. Both sit BELOW everything readable (see hud.css) — grain over live text would cost roughly 0.3 of a contrast ratio, which is enough to push the tightest pairs under 4.5:1. */ --grain-opacity: 0.10; --fog-opacity: 0.055; /* --- Depth ------------------------------------------------------------ */ --z-base: 0; --z-raised: 10; --z-doors: 20; --z-header: 60; --z-dock: 50; /* the phone's bottom buy bar, under the header and status bar */ --z-warp: 95; /* the pull's blowout, over everything */ --z-overlay: 80; --z-modal: 90; } /* ========================================================================== LIGHT THEME — [data-theme="light"] on ========================================================================== */ :root[data-theme="light"] { color-scheme: light; --bg: #e7e4dc; --bg-raised: #ddd9d0; --bg-inset: #f2f0ea; --bg-panel: #e1ded5; --bg-plate: #f4f2ed; --fg: #131316; --fg-dim: #4f4c46; /* Tuned against the PANELS, not just --bg: .boot-frame sits a shade darker than the page, which is where this was failing. */ --fg-faint: #5f5b54; --rule: rgba(19, 19, 22, 0.15); --rule-mid: rgba(19, 19, 22, 0.28); --rule-strong: rgba(19, 19, 22, 0.48); /* Acid cannot survive on a pale ground, so light theme runs a deepened version of the same hue. 5.2:1 on --bg; --signal-ink is 6.0:1 on it. */ --signal: #9b1330; --signal-fill: #7a1225; --signal-soft: rgba(155, 19, 48, 0.10); --signal-edge: rgba(155, 19, 48, 0.42); --signal-ink: #f7eef0; --damage: #7a1225; --damage-idle: 0.10; --damage-beat: 0.24; --damage-hit: 0.42; --heal: #1f5c48; --heal-peak: 0.26; --alert: #a81f26; --ok: #1f7a4d; } /* ========================================================================== ALTERNATE COLOURWAYS -------------------------------------------------------------------------- To introduce chroma, uncomment ONE block. It overrides only the signal tokens, so nothing else in the site needs to change. ========================================================================== */ /* --- BONE (fully monochrome, no accent) --------------------------------- :root { --signal: #e8e3d9; --signal-soft: rgba(232, 227, 217, 0.09); --signal-edge: rgba(232, 227, 217, 0.38); --signal-ink: #08080a; } :root[data-theme="light"] { --signal: #131316; --signal-soft: rgba(19, 19, 22, 0.07); --signal-edge: rgba(19, 19, 22, 0.38); --signal-ink: #e7e4dc; } ------------------------------------------------------------------------- */ /* --- WINE --------------------------------------------------------------- A true oxblood cannot reach 4.5:1 on this ground, so this is the deepest wine that stays legible on the countdown and the acquire button. If you want a darker wine, use it via --damage (atmosphere) rather than --signal. :root { --signal: #d94057; --signal-soft: rgba(217, 64, 87, 0.12); --signal-edge: rgba(217, 64, 87, 0.45); --signal-ink: #08080a; } :root[data-theme="light"] { --signal: #9b1330; --signal-soft: rgba(155, 19, 48, 0.10); --signal-edge: rgba(155, 19, 48, 0.42); --signal-ink: #f7eef0; } ------------------------------------------------------------------------- */ /* --- HAZARD ------------------------------------------------------------- :root { --signal: #ff8a1f; --signal-soft: rgba(255, 138, 31, 0.12); --signal-edge: rgba(255, 138, 31, 0.45); --signal-ink: #08080a; } ------------------------------------------------------------------------- */