/* ========================================================================== tokens.css — the whole palette, scale and easing vocabulary, declared once. This is the only stylesheet allowed to contain a literal colour; every other file composes from these names. CssConventionTests enforces both halves of that rule, and measures the text pairs below against WCAG AA. ========================================================================== */ /* -------------------------------------------------------------------------- KÂĞIT ÜSTÜNDE CAM — glass on paper. The client supplied two reference comps and one sentence: the colours stay, the design becomes THAT, and it moves. The comps are unambiguous about what "that" is, and about what the two versions before it got wrong: · The ground is lavender paper, top to bottom. Not a dark room. · Nothing on that paper is printed flat. Every card is a WHITE object lifted off the paper on a soft ink-tinted cast, with a lit top edge — the thing you can see is a real object because you can see under it. · The ink is spent as AREA, not as line: the primary button, the icon tiles, the footer slab are floods of Charleston Green, and the type on them is the paper. · Objects float around the hero — translucent glass solids, turning very slowly. That is the premium signal, and it is the one thing neither of the previous rounds had. So the palette does not move at all — the client said so — and the MATERIAL is what changes. The two versions this replaces failed in opposite ways and for the same reason: neither of them let anything sit ON the paper. The dark studio dissolved the paper entirely; the press sheet printed everything into it. This one puts objects on it. #E6E6FA Lavender the paper — the whole page, end to end #152717 Charleston Green the ink — type, flood, ornament Every value below is one of those two, or a blend of them. Two rules learned the expensive way and worth restating here: 1. TINTS BELOW 70% GO BLUE. Lavender is a blue paper, so screening a green ink into it neutralises the hue — 40% is #929A9F, a blue-grey. Anything meant to READ as green is drawn at 85% or above; 40% and below are hairlines, casts and faint chrome, where hue is not the point. 2. A CAST IS NEVER BLACK. A neutral shadow on lavender is a smudge. Every shadow here is struck from --ink at low alpha, which is what makes a white card look like it is lying on this paper rather than on any paper. -------------------------------------------------------------------------- */ :root { /* ------------------------------------------------------------- surfaces The paper, and three lifts of it toward white. A card is not a different colour from the page — it is the same paper closer to the light, which is why the ramp is short and why the separation is carried by the cast under the card rather than by the step in value. */ --surface-0: #E6E6FA; /* the paper — the page, end to end */ --surface-1: #F0F0FC; /* paper lifted 40% toward white: a quiet panel */ --surface-2: #F9F9FE; /* paper lifted 75%: THE card, the reference's white */ --surface-dim: #DCDCEF; /* the paper with 5% ink in it — a recess, a band */ /* The ink used as a ground. The footer slab, the MatchAI island, the phone bezel, the icon tiles: the two places on the page where the ink is an area rather than a mark. --surface-ink-2 is a card raised off that slab, and it is the ink with 8% paper mixed in rather than a lighter green, so the slab and the card on it are provably the same ink. */ --surface-ink: #152717; --surface-ink-2: #263629; /* ----------------------------------------------------------------- ink 100 / 85 / 70. Three strengths and nothing between them: a screened tint is what a two-colour press gives you, and a fourth step of grey is what makes a page look like it was designed in a colour picker. */ --ink: #152717; /* 14.32:1 on the paper */ --ink-soft: #344439; /* 85% — prose that is not the argument */ --ink-faint: #54605B; /* 70% — captions, meta, ordinals, form hints */ /* Text on an INK FLOOD — the primary button, the footer, the icon tiles, the phone screen. The paper, lifted, so the flood reads as printed ON this sheet rather than as a window onto a different one. */ --ink-inverse: #F0F0FC; /* 13.92:1 on --surface-ink */ --ink-inverse-faint: #9DA3AB; /* the caption voice on a flood — 6.19:1 */ /* -------------------------------------------------------------- accent There is no third hue. --accent is the ink used as AREA, which is the only thing on this site that behaves like an accent: it is what a flood is drawn in, and the eye reads a filled shape as emphasis without needing a colour it has not seen before. --accent-bright is that flood lifted for a hover state, --accent-deep is it pressed. Emphasis in type is carried by weight, size and rule — never by a fourth colour. */ --accent: #152717; --accent-bright: #344439; --accent-deep: #0E1C10; --accent-tint: #DCDCEF; /* the bed a badge or a chip sits in */ /* The coolest, lightest paper in the ramp, kept under its own name because the drawn artwork uses it as the white INSIDE a screen and needs to keep naming it that when the surface ramp is retuned. */ --screen-white: #F9F9FE; /* --------------------------------------------------- line, cast & shadow On paper, an edge is ink at low alpha and a shadow is ink at lower alpha still. Both are mixed from --ink rather than restated as their own literals, so a palette edit cannot leave one behind. */ --line: color-mix(in oklab, var(--ink) 12%, transparent); --line-strong: color-mix(in oklab, var(--ink) 26%, transparent); --line-inverse: color-mix(in oklab, var(--ink-inverse) 22%, transparent); /* THE CAST. Three alphas, and every raised thing on the site is built from them, which is what makes the whole page agree about where the light is. Tinted with the ink and never black — see the note at the head of the file. */ --cast-1: color-mix(in srgb, var(--ink) 6%, transparent); --cast-2: color-mix(in srgb, var(--ink) 11%, transparent); --cast-3: color-mix(in srgb, var(--ink) 17%, transparent); /* The lit top edge every white object carries. A one-pixel inset highlight, not a border: it is the paper catching the light on the object's near edge, and it is half of why a card reads as an object at all. */ --edge-lit: color-mix(in srgb, var(--surface-2) 92%, transparent); /* Two soft casts and one deep one. Each is edge + near shadow + far shadow: the near one anchors the object to the paper, the far one is what makes it look like it is a real distance above it. */ --shadow-soft: inset 0 1px 0 0 var(--edge-lit), 0 2px 6px -2px var(--cast-1), 0 16px 34px -12px var(--cast-2); --shadow-lift: inset 0 1px 0 0 var(--edge-lit), 0 6px 16px -4px var(--cast-2), 0 38px 70px -20px var(--cast-3); --shadow-deep: 0 60px 130px -45px var(--cast-3); /* THE LIT EDGE IS PAPER, SO IT ONLY BELONGS ON PAPER. --shadow-soft and --shadow-lift open with an inset hairline struck from --surface-2: the near edge of a white card catching the light. Every ink-flooded object was carrying that too — the primary button, the icon tiles, the lead card, the footer slab — and a #F9F9FE line drawn across the top of a #152717 solid is not a highlight, it is a broken outline: it follows the radius, thins as it turns the corner and stops dead partway down each side. That was the "bozukluk" on the buttons' edges. A dark solid lying on light paper does catch its near edge, but at a whisper — ten percent of the paper, which reads as a lift rather than as a stroke. It also casts harder than a white object does, so the two outer layers step up one strength. */ --edge-lit-ink: color-mix(in srgb, var(--ink-inverse) 10%, transparent); --shadow-soft-ink: inset 0 1px 0 0 var(--edge-lit-ink), 0 2px 6px -2px var(--cast-2), 0 16px 34px -12px var(--cast-3); --shadow-lift-ink: inset 0 1px 0 0 var(--edge-lit-ink), 0 6px 16px -4px var(--cast-2), 0 40px 74px -20px var(--cast-3); /* Translucent restatements, mixed from the tokens above. There is no --surface-blur any more. The scrolled header capsule was the only thing that used it, and a translucent bar over a page whose ink measures 14:1 against the paper leaves a legible ghost at every alpha short of opaque — blur softens an edge, it does not lower contrast. The capsule is solid paper now, which is what every other object here is. */ --ink-scrim: color-mix(in srgb, var(--ink) 68%, transparent); --accent-veil: color-mix(in srgb, var(--accent) 16%, transparent); --accent-bright-veil: color-mix(in srgb, var(--accent) 26%, transparent); --surface-dim-veil: color-mix(in srgb, var(--surface-dim) 70%, transparent); /* ---------------------------------------------------------- MATERIAL What the floating solids are made of. The comps show translucent glass objects tumbling around the hero — a cube, a prism, a sphere — and this is the whole recipe: a body you can see the paper through, a bright near edge, and a diagonal sheen that only crosses the face turned to the light. */ --glass: color-mix(in srgb, var(--surface-2) 78%, transparent); --glass-2: color-mix(in srgb, var(--surface-1) 62%, transparent); --glass-edge: color-mix(in srgb, var(--surface-2) 88%, transparent); --glass-edge-lit: color-mix(in srgb, var(--ink) 20%, transparent); --glass-blur: 20px; /* The specular sweep across a turned face. Struck from the whitest paper, so it reads as light on glass rather than as a lighter green. */ --sheen: linear-gradient( 118deg, transparent 0%, color-mix(in srgb, var(--surface-2) 30%, transparent) 36%, color-mix(in srgb, var(--surface-2) 78%, transparent) 47%, transparent 64%); /* The bloom under a floating object, and the halo the ink throws. Painted as their own radial layers rather than as box-shadows: a shadow is occlusion, and on a light page what separates a solid from the paper is a soft pool of ink under it plus a lift of the paper around it. */ --glow-accent: radial-gradient(closest-side circle, color-mix(in srgb, var(--ink) 13%, transparent) 0%, transparent 100%); --glow-bright: radial-gradient(closest-side circle, color-mix(in srgb, var(--surface-2) 96%, transparent) 0%, transparent 100%); /* ------------------------------------------------------------ DEPTH One perspective distance and three z steps, so every card deck, floating solid and hover lift is drawn from the same spatial scale. The steps are smaller than a dark room would take: paper is a shallow medium and an object 150px above it stops reading as lying on it. --persp is deliberately long (never the 400-800px of a CSS demo): a short perspective at page scale distorts violently at the edges of a 1440px viewport, which is what makes tilted-card layouts look cheap. */ --persp: 2400px; --persp-near: 1100px; /* for a single small object, e.g. the phone */ --depth-1: 18px; --depth-2: 46px; --depth-3: 96px; --lift-hover: 10px; /* ------------------------------------------------------------- signature Three motifs and nothing else decorates this site: an index rule down the start edge of every section, one drawn star used as every ornament there is, and a set of tilts. The tilts are shallow — under 9° — for the same reason the depth steps are. They are declared here so there is one place to re-weight every angle in the design, and one place for rtl.css to negate them all. */ --index-mark: 0.375rem; --index-hair: 1px; --stamp-tilt: -4deg; --tilt-a: 5deg; --tilt-b: -4deg; --tilt-c: 8deg; /* ---------------------------------------------------------------- type THE DISPLAY FACE MOVED, and it moved because the comps moved it. Both of them set the name of the academy as a very heavy, very tight grotesque running the full measure — that headline IS the composition in the second comp — and an editorial serif in that slot is a different design, not the same design in another font. Archivo carries it, and it is here for its WIDTH axis: 62-125%, alongside weight 400-900. The comps set the academy's name wide as well as heavy, and 112% is a register a static grotesque cannot reach without a second file. Instrument Sans keeps prose — a humanist next to a grotesque reads as a deliberate pair rather than as one family used twice — and Spline Sans Mono keeps every label, ordinal and figure, which is what makes the meta layer read as instrumentation rather than as small text. */ --font-display: "Archivo", "IBM Plex Sans Arabic", system-ui, sans-serif; --font-sans: "Instrument Sans", "IBM Plex Sans Arabic", system-ui, sans-serif; --font-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; /* One weight and one width for the display voice, named once each. A grotesque headline set at 700 next to one set at 800 reads as an accident, and the whole point of a variable axis is that the choice is a token rather than a habit — one place to re-cut every headline on the site. */ --weight-display: 800; --display-width: 112%; --weight-body: 400; --weight-strong: 600; /* The hero headline shares its row with the stage, so it is sized against the COLUMN it lives in and not against the viewport. Measured rather than chosen: at 6rem the Turkish headline broke MARKALARLA across two lines mid-word and pushed the lead and both buttons below the fold at 1440x900. A heavy grotesque at 4.25rem still reads larger than the serif it replaced did at 5.5rem, because the face carries far more ink per em. */ --text-hero: clamp(2.4rem, 4.9vw, 4.25rem); --text-display: clamp(2rem, 3.8vw, 3.5rem); --text-title: clamp(1.25rem, 1.9vw, 1.625rem); --text-body: clamp(1rem, 1.1vw, 1.125rem); --text-meta: 0.8125rem; --leading-hero: 0.94; --leading-display: 1.04; --leading-title: 1.24; --leading-body: 1.65; --tracking-hero: -0.042em; --tracking-display: -0.03em; --tracking-meta: 0.14em; /* --------------------------------------------------------------- space */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 9rem; /* ---------------------------------------------------------------- form The comps round everything generously: pill buttons, 24px cards, a footer slab whose top corners are cut at 40. --radius-pill is its own token because "999px" scattered through a stylesheet is a magic number, and because rounding a control to a pill is a design decision that should be revisited in one place. */ --radius-control: 14px; --radius-pill: 999px; --radius-card: 24px; --radius-organic: 40px; --radius-screen: 38px; /* the corner radius of a device screen */ --radius-slab: 40px; /* the footer, and any full-bleed ink block */ /* Form state. No red: an invalid field is marked by a heavier rule, the ink at full strength, and a sentence — which was always the accessible answer, and is the only one a two-colour identity can actually keep. */ --danger: #152717; --success: #344439; --danger-tint: color-mix(in srgb, var(--ink) 8%, var(--surface-2)); --success-tint: color-mix(in srgb, var(--ink) 5%, var(--surface-2)); --container: 82rem; --header-h: 4.5rem; --header-h-compact: 3.75rem; /* -------------------------------------------------------------- motion */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 200ms; --dur-base: 450ms; --dur-slow: 900ms; /* ------------------------------------------------------------- texture No flat surface anywhere. Grain over the whole page, the twelve column rules behind the content, and three enormous soft sources drifting behind it. GRAIN — inline feTurbulence rather than a raster: a few hundred bytes, no request, and it scales to any viewport without resampling. On paper it is composited with multiply at a low opacity, which is the opposite of what the dark version needed: mid-grey noise multiplied into lavender darkens it slightly and unevenly, which is exactly what paper does. */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* THE COLUMN RULES — the 12-column grid made visible as hairlines behind the content. One gradient tiled at a twelfth of the box, so it stays a true twelve columns at any width. */ --grid-lines: linear-gradient(90deg, var(--line) 0 1px, transparent 1px); /* THE AMBIENT LIGHT. Three soft sources drifting behind the page on a 25-40s cycle. On paper they are not glows — they are the sheet being lifted toward white in one place and dropped toward the ink in another, which is how a real sheet under a real light looks. Declared as three gradients so each is painted by its own element and drifts on its own transform, which keeps the whole effect on the compositor: nothing here animates a background. */ --blob-accent: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ink) 9%, transparent) 0%, transparent 70%); --blob-dim: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--surface-dim) 90%, transparent) 0%, transparent 68%); --blob-bright: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--surface-2) 95%, transparent) 0%, transparent 62%); /* The fills a cover plate carries until the client's photography arrives. */ --gradient-frame: linear-gradient(158deg, var(--surface-2) 0%, var(--surface-dim) 100%); --gradient-frame-light: linear-gradient(158deg, var(--surface-2) 0%, var(--surface-1) 100%); --gradient-plate: linear-gradient(152deg, var(--surface-ink-2) 0%, var(--surface-ink) 100%); } /* -------------------------------------------------------------------------- Arabic. IBM Plex Sans Arabic takes both roles: its 600 is the display voice and its 400 is prose. That is a change, and a deliberate one — the display face on the Latin side is now a heavy grotesque, and pairing it with a Naskh serif would mean the Arabic page and the Turkish page were two different designs rather than one design in two scripts. Plex Arabic is the closest thing the script has to a neo-grotesque, and it is already loaded. Three consequences are set here rather than per component: · The hero size comes down. The Latin scale is built for a face with tight Latin sidebearings; handing 6rem to Plex Arabic puts one word across the viewport. · Leading goes up. Arabic carries its detail in marks above and below the baseline, and 0.94 shears them into the line above. · Tracking is zeroed. Negative tracking breaks the joins between letters of a connected script, which is a defect rather than a tighter setting. -------------------------------------------------------------------------- */ [lang="ar"] { --font-display: "IBM Plex Sans Arabic", system-ui, sans-serif; --font-sans: "IBM Plex Sans Arabic", system-ui, sans-serif; --font-mono: "Spline Sans Mono", "IBM Plex Sans Arabic", ui-monospace, monospace; /* Plex Arabic ships 400 and 600 in this subset, so the display voice is 600 rather than the Latin 800: asking for a weight the file does not carry is what font-synthesis-weight: none refuses to fake. The width axis is reset to normal for a harder reason. Plex Arabic has no wdth axis at all, and left at 112% the browser synthesises the stretch by scaling the glyphs sideways — which on a connected script distorts the strokes and the joins rather than widening the letterforms. */ --weight-display: 600; --display-width: normal; --text-hero: clamp(2.25rem, 4.4vw, 3.75rem); --text-display: clamp(1.75rem, 3.1vw, 2.75rem); --leading-hero: 1.24; --leading-display: 1.32; --leading-title: 1.45; --leading-body: 1.9; --tracking-hero: 0; --tracking-display: 0; --tracking-meta: 0; }