/* ========================================================================== Writing systems, direction, and the language switcher THIS FILE MUST STAY THE LAST STYLESHEET LINKED IN THE HEAD. Two of its jobs depend on that. It binds --display and --body per writing system, which has to win over main.css; and it zeroes the tracking tokens for Arabic and Georgian, which has to beat roughly fifty letter-spacing LITERALS in main.css and lead-capture.css — several of them set inside media queries, where zeroing a token cannot reach them (SOP §6.3). The root element carries `data-script` and `data-locale`, written by the generator (src/build/render.mjs → documentOpen). Everything here keys on those rather than on a locale list, so adding a language that reuses an existing script costs nothing in this file. ========================================================================== */ /* ========================================================================== 1. Font pairing per writing system ========================================================================== Checked against the faces actually loaded, per SOP §6.1: - Cormorant Garamond and EB Garamond BOTH carry Cyrillic. Russian therefore keeps the design's own pair and its intent is unchanged. Worth stating, because the usual finding is the opposite one — the sibling builds in this family had to move Russian off Poppins and off Archivo, neither of which has any Cyrillic at all. - Neither face carries Georgian or Arabic. Both scripts get their own pairing, chosen on the same skeleton — a high-contrast serif for display, a humanist sans for body — so the letter-spaced small labels keep their proportions where they are kept at all. Only the page's own faces are requested: the generator emits one Google Fonts link per script, so six extra languages cost the English pages nothing. */ :root[data-script='latin'], :root[data-script='cyrillic'] { /* Unchanged from the original build. */ --display: 'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif; --body: 'EB Garamond', Georgia, 'Times New Roman', serif; } :root[data-script='arabic'] { /* Amiri is a naskh with the same high-contrast, old-style feel as a Garamond and is what Arabic editorial typography reaches for. IBM Plex Sans Arabic carries the interface and the running text, where naskh at 16px on a screen loses its counters. */ --display: 'Amiri', 'Noto Naskh Arabic', 'Times New Roman', serif; --body: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', sans-serif; } :root[data-script='georgian'] { /* Mkhedruli has no Garamond. The Noto Georgian pair is the only complete, well-hinted option at these weights, and Noto Serif Georgian holds a display size without the wobble the alternatives have. */ --display: 'Noto Serif Georgian', 'BPG Nino Mtavruli', Georgia, serif; --body: 'Noto Sans Georgian', 'BPG Arial', 'Segoe UI', sans-serif; } /* ========================================================================== 2. Tracking ========================================================================== > Arabic must not be letter-spaced. It is a cursive script. Tracking forces gaps into the letter joins, and the result does not read as elegant — it reads as broken text. The small labels earn their hierarchy from size, weight and colour instead, which is what Arabic typography uses in place of the capitalisation it does not have. Georgian is UNICAMERAL. A letter-spaced "small caps" treatment reinforces a case contrast that does not exist, while costing real width on words that are already long — so it is zeroed too, and `text-transform: uppercase` with it, because uppercasing Mkhedruli does nothing at all and is a lie to a screen reader about the emphasis. `!important` is deliberate and is the reason this file loads last: these selectors have to beat literal `letter-spacing` values, including ones inside media queries that no token reaches. */ :root[data-script='arabic'] *, :root[data-script='georgian'] * { letter-spacing: 0 !important; word-spacing: normal !important; } :root[data-script='georgian'] .label, :root[data-script='georgian'] .micro, :root[data-script='georgian'] .eyebrow, :root[data-script='georgian'] .units-head, :root[data-script='georgian'] .instalment__name, :root[data-script='georgian'] .cell-action, :root[data-script='georgian'] .masterplan__hint, :root[data-script='georgian'] .lead-label, :root[data-script='georgian'] .gated__badge, :root[data-script='arabic'] .label, :root[data-script='arabic'] .micro, :root[data-script='arabic'] .eyebrow, :root[data-script='arabic'] .units-head, :root[data-script='arabic'] .instalment__name, :root[data-script='arabic'] .cell-action, :root[data-script='arabic'] .masterplan__hint, :root[data-script='arabic'] .lead-label, :root[data-script='arabic'] .gated__badge { text-transform: none; } /* ========================================================================== 3. Line height ========================================================================== Naskh has deep descenders and marks below the baseline, and needs more leading than a Latin face at the same size. Headings set in a display naskh sit low in their line box, so the display sizes get the larger share of it (SOP §6.4). Georgian has long descenders too, though less pronounced. */ :root[data-script='arabic'] body { line-height: 1.85; } :root[data-script='arabic'] h1, :root[data-script='arabic'] h2, :root[data-script='arabic'] h3, :root[data-script='arabic'] h4, :root[data-script='arabic'] .h-hero, :root[data-script='arabic'] .h-section, :root[data-script='arabic'] .h-card { line-height: 1.45; } :root[data-script='arabic'] p, :root[data-script='arabic'] .muted, :root[data-script='arabic'] .muted-dark, :root[data-script='arabic'] .intro__copy { line-height: 1.9; } :root[data-script='georgian'] body { line-height: 1.72; } :root[data-script='georgian'] h1, :root[data-script='georgian'] h2, :root[data-script='georgian'] .h-hero, :root[data-script='georgian'] .h-section { line-height: 1.3; } /* ========================================================================== 4. Right-to-left ========================================================================== The stylesheets were converted to logical properties in the source, so mirroring is the browser's job and there is no parallel `[dir="rtl"]` sheet restating every rule backwards — that arrangement drifts the first time someone edits one and not the other (SOP §6.2). What genuinely remains after that conversion is below, and only that. */ /* --- glyphs that ENCODE a direction --------------------------------------- The arrow characters in the prev/next controls and the "back" link are content, not layout: the browser will not mirror a character, so they are flipped here. `display: inline-block` is required — a transform does nothing to an inline box. */ [dir='rtl'] .slider__arrow, [dir='rtl'] .lightbox__nav, [dir='rtl'] .nav-panel__back::first-letter { display: inline-block; } [dir='rtl'] .slider__arrow--prev, [dir='rtl'] .slider__arrow--next, [dir='rtl'] .lightbox__nav--prev, [dir='rtl'] .lightbox__nav--next { transform: scaleX(-1); } /* The hover nudges on the lightbox arrows are written against the unmirrored glyph, so they need restating inside the flip. */ [dir='rtl'] .lightbox__nav--prev:hover { transform: translateY(-50%) scaleX(-1) translateX(-3px); } [dir='rtl'] .lightbox__nav--next:hover { transform: translateY(-50%) scaleX(-1) translateX(3px); } [dir='rtl'] .lightbox__nav { transform: translateY(-50%) scaleX(-1); } /* The download-arrow on the secondary CTA points down, not sideways. Left alone deliberately — mirroring it would be wrong. */ /* The hero scroll chevron is drawn from two borders and rotated. The border pair is already logical, so the chevron mirrors itself; the rotation is what needs correcting. */ [dir='rtl'] .hero__scroll i { transform: rotate(-45deg) translate(1px, -1px); } /* --- Latin runs inside RTL prose ------------------------------------------ Brand names, prices and currency codes stay in Latin (SOP §8), and the bidi algorithm will drag adjacent punctuation to the wrong side of the phrase without isolation. `unicode-bidi: isolate` on the elements that carry a Latin run is what keeps `USD 196,216 / AED 720,605` reading as one figure inside an Arabic sentence. */ [dir='rtl'] .figure, [dir='rtl'] .instalment__pct, [dir='rtl'] .units-row .cell, [dir='rtl'] .brand__mark, [dir='rtl'] .brand__logo, [dir='rtl'] .lead-confirm__wordmark, [dir='rtl'] .lead-confirm__licence, [dir='rtl'] .legal__meta, [dir='rtl'] address, [dir='rtl'] code, [dir='rtl'] [data-plan-price] { unicode-bidi: isolate; } /* --- the phone field stays LTR ------------------------------------------- A phone number typed right-to-left is unreadable. Every bank and every airline in the region does this, and so does every messenger. The FIELD is LTR; the label above it is not. */ [dir='rtl'] .lead-input[type='tel'], [dir='rtl'] .iti__tel-input, [dir='rtl'] input[name='phone'] { direction: ltr; text-align: left; } /* --- intl-tel-input builds a left-to-right UI ---------------------------- A third-party widget whose internal offsets assume LTR: the country selector sits at the leading edge of the field and the flag/chevron pair inside it is ordered for LTR. The container is mirrored and the corner radii swapped so the joint with the input stays on the correct side. */ [dir='rtl'] .iti__country-container { inset-inline-start: 0; inset-inline-end: auto; } [dir='rtl'] .iti__selected-country { border-radius: 0 var(--r-btn) var(--r-btn) 0; } [dir='rtl'] .iti__tel-input { padding-inline-start: 12px; } /* The dropdown itself lists countries in Latin; keep it LTR so the dial codes read correctly, but align it to the field's own edge. */ [dir='rtl'] .iti__dropdown-content { direction: ltr; text-align: left; } /* --- the menu panel opens from the correct edge --------------------------- */ [dir='rtl'] .nav-panel { text-align: start; } /* ========================================================================== 5. The language switcher ========================================================================== A
disclosure, so it works with no JavaScript at all — on a fixed header a script-dependent menu is the one control that breaks before hydration (SOP §5.3). */ .lang { position: relative; flex: 0 0 auto; } /* §14.1 — A CONTROL THAT DOES NOT FOLLOW THE BAR IT SITS IN. THE SAME COLOUR CONTRACT AS THE NAV BESIDE IT, WHICH HERE MEANS `inherit`. This was wrong on the first pass and shipped: the toggle was given a hardcoded `var(--cream)` plus an override on `.site-header[data-scrolled="true"]` — an attribute that does not exist in this codebase. So the override never matched and the control stayed cream at every scroll position: correct over the hero, and invisible the moment the header turned light. How the header actually works: `.site-header` declares `color: var(--green)` ON ITSELF, and `.site-header.is-top` — the class main.js toggles while the header is over the hero — overrides it to `var(--cream)`. `.header__nav a`, `.menu-btn` and the brand lockup therefore declare NO colour at all; they inherit, and invert with the bar for free. The lesson §14.1 draws is "give the control the same contract as the nav", and the nav's contract is inheritance. Note the transition lives on `.site-header`, so the colour crossfades with the background rather than snapping a beat before it. */ .lang__toggle { display: flex; align-items: center; gap: 6px; padding: 6px 4px; list-style: none; cursor: pointer; font-family: var(--body); font-size: 13px; letter-spacing: .16em; /* Explicit, though `summary` would inherit anyway: this control's colour going its own way is the exact defect above, so it is stated. */ color: inherit; transition: opacity .3s; } .lang__toggle::-webkit-details-marker { display: none; } .lang__toggle:hover { opacity: .72; } /* A stroked SVG path taking currentColor, not a `▾` character: at 12px the glyph renders as an indistinct dot on some platforms, and most of its box is padding so it cannot be sized up (§14.1). */ .lang__chev { flex: 0 0 auto; transition: transform .3s var(--ease); } .lang[open] .lang__chev { transform: rotate(180deg); } .lang__menu { position: absolute; top: calc(100% + 10px); /* Logical, so the menu opens from the correct edge in RTL and stays on screen rather than hanging off it (§12.3). */ inset-inline-end: 0; z-index: 120; min-width: 168px; display: flex; flex-direction: column; padding: 8px; background: rgba(26, 35, 32, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(243, 241, 236, .16); border-radius: 14px; box-shadow: 0 20px 50px rgba(10, 16, 13, .34); } .lang__item { padding: 9px 12px; border-radius: 9px; color: var(--cream); text-decoration: none; font-size: 15px; /* The menu draws EVERY endonym at once, and the page's own stack is the one script guaranteed not to cover the others — an Arabic page set in Amiri cannot draw ქართული, and a Georgian page set in Noto Georgian cannot draw العربية. This stack is not a font choice; it is a coverage guarantee (SOP §5.3). */ font-family: 'Noto Sans', 'Noto Sans Georgian', 'Noto Sans Arabic', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; letter-spacing: 0 !important; text-transform: none; transition: background .25s, color .25s; } .lang__item:hover { background: rgba(243, 241, 236, .12); } /* The current language STAYS IN THE LIST, marked. A switcher that hides where you are makes the reader hunt for confirmation that they are already there. */ .lang__item.is-current { color: var(--burgundy-on-dark, #E7C7C7); background: rgba(243, 241, 236, .08); cursor: default; } .lang__item.is-current::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-inline-start: 8px; border-radius: 50%; background: currentColor; vertical-align: middle; } /* On a phone the switcher must not sit against the header CTA (§12.3): the endonym collapses to its two-letter mark, which is what .lang__short is. */ .lang__short { display: inline-block; } @media (max-width: 640px) { .lang__toggle { padding-inline: 2px; font-size: 12px; letter-spacing: .1em; } .lang__menu { min-width: 150px; } } /* ========================================================================== 6. The nav collapse breakpoint, per language ========================================================================== MEASURED, not guessed (SOP §14.3). main.css collapses .header__nav at 1200px. That number was set for English before this header carried a language switcher, and it was already wrong: at 1201px the English header's groups demand 1366px against 1186px of usable width, and the CTA sits 112px off the right edge. It does not cause a horizontal scrollbar — the header is `position: fixed` — so the only symptom is a control the visitor cannot reach, which is why it survived. The numbers below are each language's measured demand on its WIDER page plus ~40px of slack. Method: load the page at breakpoint+1, sum the header groups' widths plus the flex gap, compare against documentElement.clientWidth. The raw measurements are recorded in seo/launch-checklist.md so the next person does not have to re-derive them — and so a changed nav label is understood to invalidate them. language demand breakpoint ar 1039 1200 (main.css default is already ample) ka 1255 1320 en 1366 1490 es 1430 1480 ru 1453 1500 de 1462 1520 fr 1496 1560 The three raised a second time (en, de, fr) were on screen at demand+40 but the flex gap was being compressed to get them there, which is the state one longer word away from the same failure. Positive headroom on BOTH pages of every language is the acceptance condition, not merely a visible CTA. Below its own breakpoint each language falls back to the menu panel, which carries every nav link and more. Nothing is lost — the nav is a shortcut, not the only path. */ @media (max-width: 1320px) { :root[data-locale='ka'] .header__nav { display: none; } } @media (max-width: 1490px) { :root[data-locale='en'] .header__nav { display: none; } } @media (max-width: 1480px) { :root[data-locale='es'] .header__nav { display: none; } } @media (max-width: 1500px) { :root[data-locale='ru'] .header__nav { display: none; } } @media (max-width: 1520px) { :root[data-locale='de'] .header__nav { display: none; } } @media (max-width: 1560px) { :root[data-locale='fr'] .header__nav { display: none; } } /* The switcher must not sit against the header CTA on a phone (§12.3): below 640px the two share a row with the menu button, so the gap is held open explicitly rather than left to `justify-content`. */ @media (max-width: 640px) { .header__right { gap: 8px; } .lang { margin-inline-end: 2px; } } /* ========================================================================== 7. The legal review notice ========================================================================== Rendered only where a language's legal text has not been reviewed in that language (SOP §10.4). It is deliberately plain and unmissable: a live page telling every visitor its own terms are provisional undercuts the consent the forms record against them, so this is a state to LEAVE rather than to style comfortably. */ .legal__notice { margin: clamp(18px, 2vw, 28px) 0 0; padding: 14px 18px; border-inline-start: 3px solid var(--burgundy); background: rgba(122, 30, 42, .06); font-size: 15px; line-height: 1.55; color: var(--ink, #26332F); }