/* ============================================================================ TOKENS — the whole design system's vocabulary. Nothing else in the CSS may contain a raw colour, a raw pixel size or a raw duration; site.css composes only from what is declared here. WHY: the prototype carried its palette as comments pointing at the patcher's C++ colour constants (kColorGround, kColorGold...). That link is the point -- the site and the launcher a player sees ten seconds apart must not be two different products. Keeping the values in one named layer is what makes the link checkable instead of remembered. The type scale is fluid rather than stepped. A fixed scale designed on a laptop is either cramped on a 1440p monitor or overflowing on a phone; the hero is meant to fill the first screen exactly once, on both. ========================================================================= */ :root { /* ---- COLOUR --------------------------------------------------------- Sourced from patcher/win/ui_main.cpp. The comment after each value is the C++ constant it mirrors; if one moves, both move. */ --c-ground: #14110E; /* kColorGround — page floor */ --c-ground-2: #100D0B; /* strips, footer */ --c-panel: #1F1A15; /* kColorPanel — raised surface */ --c-well: #2A231C; /* kColorWell — recessed surface */ --c-raise: #342C23; /* one step above well */ --c-line: #3A3129; /* kColorLine — visible border */ --c-hair: #2A231C; /* hairline divider */ --c-gold: #C9A227; /* kColorGold — the single accent */ --c-gold-hi: #DFB841; /* hover */ --c-gold-dim: #8A701B; /* inactive */ --c-gold-deep: #4A3B0F; /* selection ground */ --c-gold-soft: #D9BE63; /* secondary — text and icons only*/ --c-gold-tint: rgba(201,162,39,.09); /* wash */ --c-gold-ink: #171208; /* text ON gold */ --c-ink: #E8E2D6; /* kColorInk — body text */ --c-ink-dim: #9A9081; /* kColorInkDim — secondary */ --c-ink-faint: #6E6659; /* tertiary, labels */ --c-ok: #5E9B6E; /* kColorOk */ --c-danger: #8B2E2E; /* kColorDanger — grounds only */ --c-danger-ink: #C96B68; /* danger as TEXT on dark; the raw danger colour fails contrast */ /* ---- TYPE FAMILIES -------------------------------------------------- Every family ends in a real fallback stack: the page must be readable before the webfont arrives, and identical in shape if it never does. */ --f-display: "Bodoni Moda", "Didot", "Playfair Display", Georgia, "Times New Roman", serif; --f-text: "Barlow", "Helvetica Neue", Arial, system-ui, -apple-system, sans-serif; --f-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; /* ---- TYPE SCALE ----------------------------------------------------- clamp(min, preferred, max). The preferred term is in vw so the scale tracks the viewport; min and max stop it collapsing on a phone or ballooning on a television. Deliberately larger than the prototype: --step-0 lands at 19px on a 1440-wide screen where the prototype used 16, and the display step is roughly a third bigger. Metin2's audience reads this on phones and on large monitors, and small type on a dark ground is where legibility goes first. */ --step--2: clamp(0.72rem, 0.68rem + 0.20vw, 0.84rem); /* micro labels */ --step--1: clamp(0.86rem, 0.81rem + 0.24vw, 1.00rem); /* captions */ --step-0: clamp(1.02rem, 0.96rem + 0.30vw, 1.22rem); /* body */ --step-1: clamp(1.20rem, 1.10rem + 0.48vw, 1.50rem); /* lede */ --step-2: clamp(1.45rem, 1.28rem + 0.80vw, 1.95rem); /* card title */ --step-3: clamp(1.85rem, 1.55rem + 1.45vw, 2.85rem); /* section head */ --step-4: clamp(2.35rem, 1.80rem + 2.60vw, 4.20rem); /* big number */ --step-5: clamp(2.90rem, 1.90rem + 4.60vw, 6.40rem); /* hero display */ /* ---- TYPE MECHANICS ------------------------------------------------- */ --lh-tight: 1.04; /* display: lines must lock together */ --lh-heading: 1.16; --lh-body: 1.62; /* long Turkish text; diacritics need the room */ --ls-display: -0.022em; --ls-tight: -0.012em; --ls-wide: 0.16em; /* eyebrow / all-caps labels */ --w-regular: 400; --w-medium: 500; --w-semibold: 600; --measure: 68ch; /* longest comfortable line */ /* ---- SPACE ---------------------------------------------------------- One ratio (~1.5) all the way up, so nothing needs a value in between. */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2.25rem; --s-7: 3.5rem; --s-8: 5rem; --s-9: 7.5rem; /* Section rhythm scales with the viewport too, or a full-height hero is followed by sections that look starved on a large screen. */ --s-section: clamp(3.5rem, 2rem + 6vw, 8rem); /* ---- LAYOUT ---------------------------------------------------------- */ --w-page: 82rem; /* outer content width */ --w-narrow: 56rem; /* prose blocks */ --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 3.25rem); --bar-h: clamp(3.5rem, 3rem + 1.4vw, 4.5rem); /* ---- BORDER / RADIUS / SHADOW --------------------------------------- 3px, not a pill. The launcher's frame is square-ish and the game's UI is chrome-and-corners; a soft radius here would read as a different product. */ --r-sm: 2px; --r: 3px; --r-lg: 5px; --bw: 1px; --sh-1: 0 2px 10px rgba(6,4,2,.35); --sh-2: 0 18px 46px rgba(6,4,2,.60); --sh-gold: 0 0 0 1px var(--c-gold-dim), 0 10px 30px rgba(201,162,39,.14); /* ---- MOTION ---------------------------------------------------------- */ --t-fast: 120ms; --t: 200ms; --t-slow: 420ms; --ease: cubic-bezier(.22,.61,.36,1); } /* Someone who has asked their system to stop animating things means it. Every transition and animation collapses to a single frame rather than being merely shortened. */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 1ms; --t: 1ms; --t-slow: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* The design is committed to one look: a dark, gold-on-near-black ground that matches the launcher. There is no light variant, so the tokens are not redefined per colour scheme -- but the page still paints its own ground explicitly rather than inheriting the browser's. */