/* Elia AI design tokens. Source of truth: elia-design.md. Do not add a sixth brand colour. */ :root { /* Brand, five colours, no sixth */ --color-ink: #0F1D2E; --color-ink-elevated: #1B2E45; --color-sand: #D9C9AC; --color-linen: #F5F0E6; --color-ember: #FF5A36; /* Derived from Ink. Structural neutrals, never accents. */ --color-ink-deep: #0A1420; --color-ink-line: #263D59; --color-ink-slate: #435770; /* Lightened 2026-08-29 from #758AA3 for the field. At #758AA3 this pair was 4.79:1 on Ink, 0.29 above the AA floor, which tolerated only 3.3% particle coverage behind a glyph before dropping under 4.5:1. The field is drawn behind the transparent dark bands, so that coverage is no longer zero. #93A5B9 is 6.74:1 on Ink and tolerates 17.5%. Kept clear of Ink Haze (#A9B6C6) so the two remain distinct roles. */ --color-ink-mist: #93A5B9; --color-ink-haze: #A9B6C6; --color-sand-wash: #1F2B38; --color-linen-sunken: #ECE8DF; --color-linen-line: #D9D7D0; /* Semantic aliases, dark register */ --text-on-dark: var(--color-linen); --text-on-dark-secondary: var(--color-sand); --text-on-dark-muted: var(--color-ink-mist); --border-on-dark: var(--color-ink-line); /* Semantic aliases, light register */ --text-on-light: var(--color-ink); --text-on-light-body: var(--color-ink-slate); --text-on-light-disabled: var(--color-ink-haze); --border-on-light: var(--color-linen-line); /* Accent. Ember always carries Ink as its label colour. */ --accent: var(--color-ember); --accent-label: var(--color-ink); --accent-hover: color-mix(in oklab, var(--color-linen) 12%, var(--color-ember)); --accent-active: color-mix(in oklab, var(--color-ink) 10%, var(--color-ember)); /* ---- Font families. Ruling AU. ---------------------------------------- Instrument Sans for display, Inter for text and UI, Geist Mono for genuinely technical content only. Fallbacks are system faces with similar metrics so a swap does not reflow the page. Space Grotesk is gone as the display face: on a Turkish page its tight quirky forms and its diacritics read cluttered, and it codes web3 rather than infrastructure. IBM Plex Mono is gone with it. Sora, which sat in the old fallback chain, is gone too and is not to return. */ --font-display: 'Instrument Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ---- Type scale. Ruling AU. ------------------------------------------- The numbers below are the system as specified, not a reinterpretation of it. Where the spec gives a range, the range is a clamp; where it gives one figure for English and another for Turkish, the Turkish value is set under html[lang="tr"] further down rather than averaged into a compromise. */ /* Hero. 56-92px fluid, tracking -0.022em. Leading and width are per language: see the html[lang] blocks. */ --text-stat: clamp(56px, 6.2vw, 92px); --leading-stat: 1.08; --tracking-stat: -0.022em; --hero-width-axis: 100; --text-display: clamp(56px, 6.2vw, 92px); --leading-display: 1.08; --tracking-display: -0.022em; /* H2. 36-48px, -0.015em, 1.15. */ --text-heading-lg: clamp(36px, 3.8vw, 48px); --leading-heading-lg: 1.15; --tracking-heading-lg:-0.015em; --text-heading: clamp(36px, 3.8vw, 48px); --leading-heading: 1.15; --tracking-heading: -0.015em; /* H3. 24-28px, -0.01em, 1.25. */ --text-heading-sm: clamp(24px, 2.4vw, 28px); --leading-heading-sm: 1.25; --tracking-heading-sm:-0.010em; /* Lead paragraph. 20px, Inter 400, never 500. */ --text-subheading: 20px; --leading-subheading: 1.60; --tracking-subheading:0; /* Body. 17-18px desktop, 16px mobile. Leading is per language. */ --text-body-lg: 18px; --leading-body-lg: 1.60; --text-body: 17px; --leading-body: 1.60; --measure: 68ch; /* UI text: navigation 14-15px, buttons 15px. */ --text-body-sm: 15px; --leading-body-sm: 1.50; --tracking-body-sm: 0; --text-caption: 14px; --leading-caption: 1.50; --tracking-caption: 0; /* Labels. 12-13px. Tracking is per language: +0.06em uppercase English, +0.02em sentence-case Turkish. */ --text-mono-sm: 13px; --leading-mono-sm: 1.50; --tracking-mono-sm: 0.060em; --text-micro: 12px; --leading-micro: 1.45; --tracking-micro: 0.060em; /* Weights. Instrument Sans carries 400-700 and nothing above 700 is used anywhere: over-weight display blooms on the dark surface and cheapens it. --weight-light is retained at 400 rather than deleted because it is referenced in two dozen places; it now means "the lightest this system allows", which is 400, not 300. Instrument Sans has no 300. */ --weight-light: 400; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-display: 600; /* hero and H2 */ --weight-h3: 500; /* H3 */ /* Spacing */ --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px; --spacing-32: 32px; --spacing-40: 40px; --spacing-48: 48px; --spacing-64: 64px; --spacing-80: 80px; --spacing-96: 96px; --spacing-120: 120px; --spacing-160: 160px; /* Layout */ --page-max-width: 1200px; --content-max-width: 68ch; --headline-max-width: 22ch; --section-gap: 96px; --band-gap: 120px; --card-padding: 20px; --card-padding-lg: 24px; --element-gap: 10px; --gutter: 24px; /* Radius. Three values. */ --radius-sm: 4px; --radius-md: 8px; --radius-dot: 50%; /* Surfaces */ --surface-0: var(--color-ink-deep); --surface-1: var(--color-ink); --surface-2: var(--color-ink-elevated); --surface-3: var(--color-sand-wash); --surface-l0: var(--color-linen-sunken); --surface-l1: var(--color-linen); /* Motion, easing */ --ease-signal: cubic-bezier(0.2, 0, 0, 1); --ease-settle: cubic-bezier(0.16, 1, 0.3, 1); --ease-emit: cubic-bezier(0.4, 0, 0.6, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* Motion, duration. Deliberately non harmonic so loops never synchronise. */ --dur-instant: 90ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-draw: 640ms; --dur-resolve: 720ms; --dur-sweep: 900ms; --dur-caret: 1100ms; --dur-ping: 1400ms; --dur-pulse: 1800ms; --stagger: 70ms; } /* Base document defaults. NOT scoped to a locale. This rule was html[lang="tr"] body, written when Turkish was the only locale. The moment the toggle became real, switching lang to "en" dropped the body font, size, line-height, colour, background and margin in one go -- the whole page reverting to UA defaults, invisible in the source and catastrophic in the paint. The Inter disambiguation set stays on in both locales deliberately: it is motivated by Turkish dotless i, and turning it off for English would make the two locales render the same glyphs differently for no gain. */ body { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); /* "tnum" and "zero" are global, not product-only: this page carries plate numbers, record references, latency figures and version tags in running text and in tables, and a proportional 0 that can be read as O is exactly the ambiguity those strings cannot afford. "cv05" is Inter's tailed lowercase l, which separates l / I / 1 -- the reason it was already on here is Turkish dotless i, and the system asks for it for the same reason. "ss02" is Inter's disambiguation set and stays with it. */ font-feature-settings: "ss02" 1, "cv05" 1, "tnum" 1, "zero" 1; text-wrap: pretty; overflow-wrap: break-word; color: var(--text-on-dark); background: var(--color-ink); margin: 0; -webkit-font-smoothing: antialiased; } /* hyphens is the ONE genuinely Turkish-specific property in the block above, and elia-design.md names it as such: a progressive enhancement for Turkish, with overflow-wrap as the guaranteed floor for everyone. Left switched on for English it broke "architecture" across two lines in the hero subhead -- correct hyphenation, wrong register for a headline-adjacent paragraph. */ /* Any Turkish-marked subtree, not just a Turkish-rooted document: the legal pages pin lang="tr" on the document body while the chrome around them may be in English. */ [lang="tr"] { hyphens: auto; } /* And back off again inside it. hyphens inherits, so the English note sitting in a Turkish document was picking up Turkish hyphenation -- the same defect, one level down, that switching the whole page to English produced. The pair reads as one decision: hyphenate Turkish, hyphenate nothing else. */ [lang="en"] { hyphens: manual; } /* ---- WHERE THE TWO LANGUAGES GENUINELY DIFFER. Ruling AU. --------------- Turkish runs longer than English for the same sentence and sets a denser grey. The system answers that in three places and nowhere else, so the two locales stay one design rather than becoming two. 1. The hero narrows on its WIDTH AXIS rather than dropping a type step or taking a third line. Instrument Sans carries wdth 75-100; Turkish sets at 92. This is the reason the face was chosen and it is the only place the axis is used. 2. Leading opens: 1.08 -> 1.18 on the hero, 1.60 -> 1.65 in body copy, because the diacritics need the room. 3. The measure tightens, 68ch -> 62ch, so the longer words do not produce a longer line. */ html[lang="tr"] { --leading-stat: 1.18; --leading-display: 1.18; --hero-width-axis: 92; --leading-body: 1.65; --leading-body-lg: 1.65; --measure: 62ch; } html[lang="tr"] body { line-height: var(--leading-body); } /* Body copy holds its measure. The hero and the headings are excluded: they are sized by their own column, and ruling AN(c) gives the hero's text column a width solved against the object beside it. */ p, li { max-width: var(--measure); } .hero-centre p, .hero h1, h2, h3 { max-width: none; } h1, h2, h3, h4 { font-family: var(--font-display); text-wrap: balance; margin: 0; } /* ONE weight for display, on both surfaces. Ruling AU. These were 300 on dark and 400 on light -- a light display face was the old system's signature and it does not survive the change: Instrument Sans has no 300 at all, and its lower weights go weedy at headline size where Space Grotesk went airy. 600 is the specified weight and it is the same on both surfaces, so a heading no longer changes weight when a band changes colour. Nothing on this page goes above 700; on the dark surface heavier display blooms and cheapens it. */ h1, .on-dark h1, .on-light h1, h2, .on-dark h2, .on-light h2 { font-weight: var(--weight-display); } h3, h4 { font-weight: var(--weight-h3); } h1 { letter-spacing: var(--tracking-display); line-height: var(--leading-display); } h2 { letter-spacing: var(--tracking-heading-lg); line-height: var(--leading-heading-lg); } h3 { letter-spacing: var(--tracking-heading-sm); line-height: var(--leading-heading-sm); } /* THE WIDTH AXIS, and the only place it is set. See the html[lang] block. */ .hero h1 { font-stretch: calc(var(--hero-width-axis) * 1%); } .mono { font-family: var(--font-mono); font-size: var(--text-micro); line-height: var(--leading-micro); letter-spacing: var(--tracking-micro); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; } /* MONO IS FOR TECHNICAL CONTENT AND NOTHING ELSE. Ruling AU. Geist Mono carries metrics, latency figures, version tags, status chips, plate and record references, and code. The moment it appears in marketing copy it stops being information and becomes decoration, which is the one thing the system asks it not to be. Its tracking is a label's, not a paragraph's, so it is never a comfortable place to put a sentence. TURKISH IS NOT SET IN CAPS. English labels are uppercase at +0.06em, which is the register that reads as a label in English. Turkish set the same way reads as shouting and its diacritics collide with the tracking, so Turkish labels stay in sentence case at +0.02em. The strings themselves are written in sentence case for Turkish -- see js/strings.js -- so nothing here has to force a transform back down, which lowercasing a proper noun would ruin. */ html[lang="en"] .mono { letter-spacing: 0.060em; } html[lang="tr"] .mono { letter-spacing: 0.020em; }