/* ============================================================================ 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 the atlas (sancar2-atlas), whose :root is the one place these values are decided. The comment after each is the atlas token it mirrors; where the atlas has no counterpart the derivation is written out, because a value nobody can trace back is a value the next branch will quietly change. THE PATCHER STILL MATTERS. The launcher a player opens ten seconds after the site must not look like a different product, and the gold is the same #C9A227 it always was -- what changed underneath it is the ground, which went a full step darker so the gold reads as metal rather than mustard. */ --c-ground: #0C0A08; /* atlas --ink -- page floor */ --c-ground-2: #0A0806; /* strips, footer; atlas .nav's rgba(10,8,6,.94), flattened */ --c-panel: #1C1510; /* atlas --card -- raised surface */ --c-well: #15100C; /* atlas --ink2 -- recessed */ --c-raise: #241A13; /* derived: one step from --card toward --line */ --c-line: #3A2A1E; /* atlas --line -- visible border */ --c-hair: #2A1E16; /* derived: half a step below --line. The site divides far more often than the atlas does, and at the atlas's one border weight the page turns into a grid. */ --c-line-hi: #4A3624; /* atlas --line2 -- badge, tab and chip borders */ --c-gold: #C9A227; /* atlas --gold -- the one accent */ --c-gold-hi: #E3BE4A; /* atlas --gold-hi -- hover */ --c-gold-dim: #8A701B; /* atlas --gold-dim -- inactive */ --c-gold-deep: #4A3624; /* atlas --line2: what the atlas sets its ghost numerals and step counters in */ --c-gold-soft: #D9B84E; /* derived: midway --gold -> --gold-hi. Links are set in it so that hovering to --gold-hi is a visible change; the atlas draws no hover state. */ --c-gold-tint: rgba(201,162,39,.09); /* wash over --gold */ --c-gold-ink: #1B1305; /* atlas .btn.gold -- text ON gold */ /* The veil over artwork. The hero and the class cards both set text on a photograph, and this is what keeps it readable. Three steps and a clear one, named rather than written out at each use, so two sections cannot darken the same picture by different amounts. Mixed from --c-ground. */ --c-veil-0: rgb(12 10 8 / 0); --c-veil-1: rgb(12 10 8 / .14); --c-veil-2: rgb(12 10 8 / .62); --c-veil-3: rgb(12 10 8 / .93); --c-ink: #EDE4D2; /* atlas --paper -- body text */ --c-ink-dim: #B6A891; /* atlas --paper-dim */ --c-ink-faint: #7C7060; /* atlas --paper-faint */ --c-ok: #4E8C7A; /* atlas --jade */ /* Jade as a BOX rather than as ink: the "Açık" badge in a box heading and the open safebox's line. Named for the same reason --c-danger-tint is -- two branches drawing the same jade chip at two alphas is how one screen ends up teaching a different thing than the next. Atlas .box .bh .st and .sbx .open, whose alphas differ by .02 and are taken here as one. */ --c-ok-tint: rgba(78,140,122,.11); --c-ok-line: rgba(78,140,122,.45); --c-danger: #9E2414; /* atlas --ember -- grounds only */ --c-danger-hi: #D8451F; /* atlas --ember-hi */ --c-danger-ink: #C96B68; /* atlas --err -- danger as TEXT on dark; the ground colour fails contrast at body size */ /* The wash behind a rejected form's summary, and the brighter border on the box that was rejected. Named rather than written at each use: a sign-in error and a registration error must be the same red, or the two screens teach a player two different things about what red means. */ --c-danger-tint: rgba(158,36,20,.10); /* atlas --err-bg */ --c-danger-line: rgba(201,107,104,.55);/* atlas --err-line */ /* THE ANNOUNCEMENT STRIP IS A GRADIENT, not a flat bar, and the gradient is the atlas's: dark at both ends, hot in the middle, so a full-width band across a 1920 monitor does not read as a solid red wall. Two moods, the same shape -- red for an interruption, jade for a notice. */ --g-ann: linear-gradient(90deg,#7E1C0F,#B33417 55%,#7E1C0F); --c-ann-line: #5E1409; --c-ann-ink: #FFEFE2; --g-ann-info: linear-gradient(90deg,#1F3A33,#2F5A4C 55%,#1F3A33); --c-ann-info-line: #16302A; --c-ann-info-ink: #DDEFE7; /* Derived: the same gradient with the atlas's --ember and --ember-hi in place of the strip's mid reds. The maintenance strip has to be louder than the announcement strip, and since the announcement strip is now already red it gets louder inside red rather than by changing hue. */ --g-ann-maint: linear-gradient(90deg,#9E2414,#D8451F 55%,#9E2414); --c-ann-maint-line: #7E1C0F; /* THE FOUR CLASSES HAVE THEIR OWN COLOURS IN THE ATLAS, one each, used wherever a character's class is named next to their name -- the podium, the ranking rows, the character list on the account page. Declared here whether or not a rule reaches for them yet: the alternative is four hex values invented separately by four branches. */ --c-class-warrior: #C0432A; /* atlas --k-war */ --c-class-ninja: #9B8A5A; /* atlas --k-nin */ --c-class-sura: #C97A2A; /* atlas --k-sur */ --c-class-shaman: #4E8C7A; /* atlas --k-sha */ /* THE MARK ON THE VISITOR'S OWN ROW. The atlas washes it in gold at a tenth -- .lst .r.me and .rank tr.me, the same value in both, which is what makes the landing page's preview and the full table read as one list. Named rather than shared with --c-gold-tint: that one is the table's HOVER, and a row that is mine must not be indistinguishable from a row the pointer happens to be over. */ --c-mine-tint: rgba(201,162,39,.10); /* atlas .r.me / tr.me background */ /* The gold HAIRLINE, as opposed to the gold ink. The atlas draws a box round the counters beside the download button at a third of the gold rather than at --gold-dim, which is a solid colour and comes out as a frame rather than an edge. atlas .tile. */ --c-gold-edge: rgba(201,162,39,.30); /* ---- TYPE FAMILIES -------------------------------------------------- The atlas's three, and the division of labour is the atlas's too: --f-display for anything a player reads as a sign (headings, tabs, labels, table columns), --f-text for anything they read as a sentence, --f-mono for anything they read as a quantity. Every family ends in a real fallback stack: the page must be readable before the webfont arrives, and near enough in shape if it never does -- which for Oswald means a condensed fallback, not Arial. Impact is the one condensed face present on every desktop; the two after it cover the Windows and Android cases where it is not. */ --f-display: "Oswald", Impact, "Haettenschweiler", "Arial Narrow", sans-serif; --f-text: "Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, "SF 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. RE-CUT FOR OSWALD. The scale above was drawn for Bodoni Moda, a didone with a wide body and short extenders, and it had to be large to be read at all -- --step-0 landed at 19px and the hero at 102px. Oswald is the opposite face: narrow, tall-shouldered, and it looks shouted at those sizes. The ceilings here are the atlas's own measurements taken off its 1248px page -- body 15px, hero 3.2rem, section head 1.9rem, card title 1.2rem, micro label 0.7rem -- with a little headroom at 1440 and above, where the atlas mock does not reach. */ --step--2: clamp(0.68rem, 0.65rem + 0.12vw, 0.75rem); /* micro labels */ --step--1: clamp(0.78rem, 0.75rem + 0.14vw, 0.88rem); /* captions */ --step-0: clamp(0.94rem, 0.90rem + 0.16vw, 1.02rem); /* body */ --step-1: clamp(1.02rem, 0.97rem + 0.22vw, 1.18rem); /* lede */ --step-2: clamp(1.12rem, 1.04rem + 0.32vw, 1.35rem); /* card title */ --step-3: clamp(1.45rem, 1.20rem + 1.05vw, 2.05rem); /* section head */ --step-4: clamp(1.85rem, 1.45rem + 1.70vw, 2.80rem); /* big number */ --step-5: clamp(2.30rem, 1.60rem + 3.00vw, 3.60rem); /* hero display */ /* ONE STEP ABOVE THE HERO, and the only thing set in it is the 404's numeral. The atlas draws that numeral at 4.4rem against its own 3.2rem hero -- deliberately the largest thing on the site, because it is the one word a lost visitor recognises before reading anything. Resolves to 4.45rem on the atlas's 1248px page. */ --step-6: clamp(2.60rem, 1.80rem + 3.40vw, 4.40rem); /* ghost numeral */ /* THE RETURNING PLAYER'S GREETING IS NOT THE SLOGAN, and the atlas sizes them a third apart: 3.2rem for the hero that is selling the game, 2.2rem for the line that says hello to somebody who already bought it (atlas .hero h1 against .hi). One step here rather than reaching for --step-3, whose ceiling is 2.05rem and which every section heading on the site already owns -- moving it to fit the greeting would resize /ranking, /news and /download with it. Resolves to 2.13rem on the atlas's own 1248px page. */ --step-hello: clamp(1.45rem, 1.15rem + 1.25vw, 2.30rem); /* greeting */ /* ---- TYPE MECHANICS ------------------------------------------------- THE TRACKING TURNED POSITIVE, and that is the single change that makes Oswald look set rather than jammed. A didone is drawn with generous sidebearings and wants pulling in; a condensed grotesque has almost none and wants letting out. The atlas spaces its display type at +.02em and its uppercase section heads at +.03em, and those are the two numbers below. The token names still say "tight" and "display" because site.css composes from them by name -- what they mean is "heading tracking" and "hero tracking", and both are now a hair wider than normal. */ --lh-tight: 1.06; /* display: lines must lock together */ --lh-heading: 1.18; /* Oswald's caps are tall; 1.16 clipped diacritics */ --lh-body: 1.60; /* atlas body line-height */ --ls-display: 0.02em; /* atlas .hero h1 / .brand */ --ls-tight: 0.02em; /* atlas headings */ --ls-head: 0.03em; /* atlas uppercase section heads */ --ls-tab: 0.08em; /* atlas .tab -- narrower than an eyebrow because a tab has a box round it */ --ls-class: 0.05em; /* atlas .ch .mt em -- the class word on a character card. Narrower than a tab because it sits INSIDE a running line rather than in a box of its own, and tracked-out caps mid-sentence stop reading as one word. */ --ls-wide: 0.13em; /* atlas eyebrow / all-caps labels */ --ls-kicker: 0.22em; /* atlas .kick / .pghead .kk -- the widest one */ --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* atlas .brand, .hero h1, .pod .rk */ --measure: 68ch; /* longest comfortable line */ /* The footer's brand sentence, which stands in a column rather than in a page. Its grid track is wide enough at 1440 to run the sentence out to fifty-odd characters beside three short link lists, and a single long line under a wordmark reads as a stray paragraph rather than as the caption of the block it belongs to. */ --measure-brand: 34ch; /* ---- 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; /* THE BAND, NOT THE GAP. Every section on this site wears one class, while the atlas sets its padding per section -- 2.1rem under the download call, 2.2rem around the ranking pair, 2.3/2.7rem around the classes, 1.8rem on the account page. That is one measure with a little play in it, and this is the measure: the floor is the atlas's shortest band (.pghead, 1.9rem) and the ceiling its longest (.klass, 2.7rem), reached at 1920. On the atlas's own 1248px page this resolves to 2.35rem against its 2.2rem. WHAT IT REPLACES was clamp(3.5rem, 2rem + 6vw, 8rem): 118px above and below every section at 1440, against the atlas's 35. A section is a band of content, and three finger-widths of empty ground around each one turns a page of five sections into five pages. */ --s-section: clamp(1.9rem, 1.7rem + 0.84vw, 2.7rem); /* ---- LAYOUT ---------------------------------------------------------- */ --w-page: 82rem; /* outer content width */ --w-narrow: 56rem; /* prose blocks; atlas .lgbody */ /* The class painting beside its introduction. The plates are 440x600, so 14rem draws one at 224x305 -- large enough to recognise the figure, small enough that the text beside it keeps a readable measure. */ --w-class-art: 14rem; --w-docnav: 15rem; /* atlas .lgnav -- the legal pages' document menu */ --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 3.25rem); /* THE MASTHEAD IS A STACK, AND --bar-h IS THE WHOLE STACK. Two things can be pinned to the top of the page: the announcement strip (only when there is an announcement) and the bar (always). Everything below measures its clearance from --bar-h -- the main padding, the ornament rule, the hero's height, the anchor scroll offset, the mobile drop panel -- so --bar-h has to mean "how much is pinned up there in total", not "how tall the bar is". The bar's own height is --h-bar and only the bar itself uses it. This is why the strip needs no second set of rules: turn --ann-top on and the entire page moves down by exactly the strip's height, in one place, with no JavaScript measuring anything. */ --h-bar: clamp(3.5rem, 3rem + 1.4vw, 4.5rem); --h-ann: clamp(2.15rem, 1.95rem + 0.55vw, 2.65rem); /* 0 unless carries .ann-on (site.css). The template puts that class on the root element precisely so this substitution happens here, where --bar-h is resolved. */ --ann-top: 0px; --bar-h: calc(var(--h-bar) + var(--ann-top)); /* The Greek-key strip, at the two heights it is used at: a hairline under the masthead, and a heavier rule between sections. Both are heights for the same artwork, so they belong to the same vocabulary. */ --h-key: 15px; --h-orn: 30px; /* Narrowest a class card may become before the row wraps. Below this the 440x600 painting is too small to tell one class from another. */ --w-class: 13rem; /* The portrait on a character card: a square crop of the same 440x600 painting the class cards use, at the atlas's .ch .ic size. The offset is the atlas's too -- a cover crop centred vertically lands on the figure's chest, and 12% from the top is what puts the face in the square. */ --sz-portrait: 44px; --pos-portrait: center 12%; /* THE CLASS COLOUR AS A SHAPE, at the two places the atlas draws it as one rather than as ink: a short rule down the left of a ranking row and a rule across the top of a podium card. Both are the same thickness -- they are the same mark seen from two sides -- so the thickness is one token and only the row's length is its own. atlas .lst .bar (3x18px) and .pod::before (3px). */ --bw-class: 3px; --h-class-bar: 18px; /* THE INVENTORY SQUARE, which is what the shop's icons sit in. The game's icons are 32x32 (a few are 32x64), so both sizes are whole multiples of 32 in rem terms at the default root: the sprite lands on the pixel grid instead of between two of them, which is the difference between a crisp icon and a smeared one. */ --sz-slot: 4.5rem; --sz-slot-lg: 9rem; --sz-slot-md: 6rem; /* the shelf card's square */ /* THE PICK: one item's square in the shelf grid. Narrow on purpose -- the shop is read by its icons, and seven across is what makes the page read as a shop rather than as a list. */ --w-pick: 9.5rem; /* THE COUNTER BOX. Three across a full page, which is what gives the art room to be looked at rather than managed. */ --w-box: 21rem; --sz-slot-xl: 10rem; /* The five shelves, as quiet identifiers rather than decoration. Desaturated so the gold stays the only bright thing on the page. */ --c-sh-guclendirme: #A8623C; --c-sh-yukseltme: #4E7C8C; --c-sh-kostum: #8A5E96; --c-sh-binek: #6B8A4A; --c-sh-cesitli: #8A7A52; /* Narrowest a shelf card may become before the grid drops a column. Under this the slot and a two-word item name stop fitting side by side. */ --w-shelf-i: 10.5rem; /* The confirm and code cards. Narrower than --w-narrow on purpose: those are prose and this is a short arithmetic block, and a sum spread over fifty-six rems is a sum nobody reads as one thing. */ --w-conf: 34rem; /* THE TWO FIXED ENDS OF A RANKING ROW. The place and the level are the columns a reader compares DOWN the list rather than across it, so both are given a width and right-aligned inside it: everything between them can be any length without the figures going out of line. atlas .lst .pos (1.9rem) and .lst .lv (3.6rem); the place is wider here because the site prints a level with its "Sv" in front of it and a three-figure place behind a two-figure one. */ --w-rank-pos: 2.5rem; --w-rank-lv: 3.6rem; /* The "!" a rejected field carries beside its sentence. A token because the box is square and its border is drawn round it: three rules would otherwise each carry the same number and one of them would be wrong. atlas .emsg::before. */ --sz-err-mark: 13px; /* The numbered badge on an installation step, at the atlas's .steps li::before size. Everything else about that list is derived from it -- the rule the badges sit on is half a badge in, and the text clears a badge plus a gutter -- so the list cannot come apart when the number changes size. */ --sz-step-num: 1.7rem; /* ---- THE HERO'S PROPORTIONS ----------------------------------------- From the atlas: the opening band is 440px tall on a 1248px page and the signed-in one is 330px, not a full screen. The site had been filling the window (100svh) because a second column -- the sign-in card -- had to fit in it; with the card moved out, a full-screen band of picture with four lines on it is a page that starts by saying nothing. The copy column is capped rather than the band: the atlas's words sit in a 40rem measure against the dark left of a full-width plate. */ --h-hero: 27.5rem; /* atlas .hero -- 440px */ --h-hero-back: 20.625rem; /* atlas .hero2 -- 330px */ --w-hero-copy: 40rem; /* THE SIGNED-IN HERO'S COLUMN IS WIDER, and the width is what decides the shape of the strip under the greeting rather than a rule counting boxes. The atlas gives .hero-in 40rem and .hero2-in 46rem: at 46rem the download button and two counters fill the first line and the remaining two fall to a second, which is the arrangement the design draws. Held at 40rem the four counters came out in one row under a button standing on its own line -- a different picture, and one the atlas never shows. */ --w-hero-copy-back: 46rem; /* atlas .hero2-in -- 736px */ /* THE DOWNLOAD BUTTON IN THAT STRIP IS WIDE, and its width is the other half of what shapes the row. MEASURED off the atlas's own screen 16 rather than chosen: the button there comes out 322px against 144px counters, which is what pushes the third counter onto a second line and leaves the row as 2 and 2 instead of 3 and 1. It is also the right shape for what it is -- the one thing the page is asking a returning player to do -- and at its natural text width (136px) it was the SMALLEST box in a row of counters. min() rather than a flat floor: on a 320px phone a 20rem minimum is wider than the screen. */ --w-hero-cta: 20rem; /* atlas screen 16 .btn.gold.lg -- 322px */ /* The padding INSIDE the band. It is the atlas's, and the site adds the masthead to the top of it rather than to this number: the atlas's nav is in the flow and ours is fixed, so the hero's foot is this alone and its head is this plus --bar-h. */ --s-hero: 2.5rem; /* atlas .hero-in */ --s-hero-back: 2rem; /* atlas .hero2-in */ /* THE SIGN-IN AND REGISTRATION BANDS HAVE A HEIGHT, NOT A SCREENFUL. The atlas gives them 520px, and 600px for the taller registration screen. The site had been asking for (100svh - the masthead), which on a 900px window is 832px of column around a form 380px tall -- the boxes floated in the middle of an empty plate and the painting beside them was stretched to match. */ --h-auth: 32.5rem; /* atlas .auth -- 520px */ --h-auth-tall: 37.5rem; /* atlas .auth.tall -- 600px */ /* THE MESSAGE PAGE IS A BAND TOO, and giving it a height is what stops it being a heading marooned at the top of an empty window. The atlas draws every "it worked / it did not" ending -- verification, the reset letter, 404, a refused sign-in -- as one centred column in a 400px band, and these are its three measurements. */ --h-msg: 25rem; /* atlas .msgpg min-height -- 400px */ --w-msg: 38rem; /* atlas .msgc max-width */ --measure-msg: 48ch; /* atlas .msgc p */ /* The wash at the top of that band: a wide, shallow pool of gold that fades out before it reaches the foot. The atlas fades to `transparent`, which is rgba(0,0,0,0) -- gold interpolated toward it passes through a grey, and on this ground the pool comes out with a dirty rim. Fading to the same gold at zero alpha is the same picture without the rim. */ --c-gold-wash: rgba(201,162,39,.07); --c-gold-wash-0: rgba(201,162,39,0); --g-msg: radial-gradient(900px 340px at 50% 0%, var(--c-gold-wash), var(--c-gold-wash-0) 70%); /* ---- ARTWORK ON A NARROW SCREEN -------------------------------------- Below the two-column breakpoints the hero's plate and the sign-in painting stop being a column and become a band, and the band needs a height stated once rather than guessed per section. MEASURED, NOT PICKED. hero.jpg is 1440x738. Covering a 390px-wide box 180px tall scales it to 390x200 -- the whole 1.95 picture squeezed into a 2.18 window, which is how the warrior lost the top of his head. At 20rem the same box takes the picture at 624x320 and crops the SIDES instead, so the figures keep their full height. svh rather than vh so a phone's collapsing toolbar cannot make the band taller than the screen. The sign-in plates are 440x600 portraits, so their band is shorter: the crop there is vertical and anything taller starts showing the floor. */ --h-hero-art: min(46svh, 20rem); --h-auth-art: min(30svh, 14rem); /* The smallest a finger may be asked to hit. 44px is the figure both platform guidelines land on, and it is a token because the burger, the tabs, a row of the ranking and every small link in a note have to agree on it -- a number typed per rule is a number three of them get wrong. */ --tap: 2.75rem; /* ---- 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; /* The marker rule down the side of a selected item -- the gold edge on the open document in the legal menu. Thicker than --bw on purpose: at 1px it reads as the item's own border rather than as a mark. */ --bw-mark: 2px; --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); } /* THE ANNOUNCEMENT STRIP IS TALLER ON A PHONE, and the reason is the finger rather than the type. The strip carries a link ("Ayrıntı"), and a link inside a 34px strip is a 22px target however much padding it is given. Raising the strip's own height is the only way to make that link reachable, and because --bar-h is composed from it the whole page moves down by exactly the same amount with nothing else to change. Measured at 390px: the link went from 22.5px to 47px tall, on a tablet as well as on a phone. 3rem rather than the 44px minimum itself: the strip carries a 1px rule at its foot, so a box the exact height of the target comes out a pixel short. */ @media (max-width: 51.25rem), (pointer: coarse) { :root { --h-ann: 3rem; } } /* 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. */