/* ============================================================ arabic-rtl.css — Arabic (RTL) overlay for the /ar/* routes. Linked LAST, and ONLY on /ar pages (controller is_ar=True), so it overrides the shared/scoped English sheets without ever leaking into LTR. Every rule is scoped [dir=rtl] (belt-and-braces: even if this sheet were ever cached/shared, it cannot affect an LTR document). Contents: 1. @font-face — self-hosted Cairo (SIL OFL 1.1). 2. [dir=rtl] font-token overrides (display/body/mono -> Arabic). 3. [dir=rtl] Arabic type rhythm (Cairo needs more leading than Latin). 4. [dir=rtl] logical-property fixes for the catalogued physical left/right CSS in consult.css / legal.css / styles.css. Cairo is licensed under the SIL Open Font License v1.1 (https://openfontlicense.org). Guardrail G2: the shared styles.css/tokens.css and the scoped consult.css/home.css/legal.css are NOT edited — RTL fixes live here as [dir=rtl] overrides. ============================================================ */ /* ---- 1. self-hosted Cairo (OFL 1.1) ---- */ @font-face{font-family:'Cairo';font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/Cairo-Variable.woff2) format('woff2')} /* ---- 2. font-token overrides ---- Repoint the display/body tokens to the Arabic face so all running copy renders in Cairo on /ar (Space Grotesk has no Arabic glyphs). The Latin fallbacks stay so brand names / numerals still have a sane face. The MONO token is deliberately NOT repointed to the Arabic sans: the mono runs are Latin technical data (CAS numbers, lot/company numbers, emails, phone, spec tables) that must stay MONOSPACED and column-aligned — and have no Arabic glyphs to render. Cairo is proportional, so swapping it in would lose tabular alignment for no legibility gain. Keep IBM Plex Mono (its Arabic coverage is irrelevant here). */ [dir=rtl]{ --font-display:'Cairo', system-ui, sans-serif; --font-body:'Cairo', system-ui, sans-serif; } /* .theme-patches (the /patches ) re-declares --font-body:'Public Sans' DIRECTLY on (tokens.css), and a directly-matched declaration on the element beats the [dir=rtl] value inherited from . Without this, /ar/patches body copy would fall to Public Sans (no Arabic glyphs -> tofu) once ar.po lands. Override the token on the themed body under RTL. */ [dir=rtl] .theme-patches{--font-body:'Cairo', system-ui, sans-serif} /* ---- 2b. letter-spacing resets ---- The English sheets carry Latin tracking — positive on labels/eyebrows/CTAs (inserts a gap BETWEEN letters) and negative on display headings (pulls glyphs together). Arabic is cursive: both break the mandatory joins / cause collisions in Arabic type. Neutralise tracking for the text roles under RTL (latent until ar.po lands; this overlay is the only place to fix it). */ [dir=rtl] .display,[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3, [dir=rtl] .hero__h1,[dir=rtl] .gw-name,[dir=rtl] .brand__word, [dir=rtl] .eyebrow,[dir=rtl] .nav,[dir=rtl] .btn,[dir=rtl] .chip, [dir=rtl] .mono,[dir=rtl] .idx,[dir=rtl] .gw-label,[dir=rtl] .gw-domain, [dir=rtl] .std-row .n,[dir=rtl] .col-card__label,[dir=rtl] .footer__label, [dir=rtl] .compliance-band .inner,[dir=rtl] .hero__note,[dir=rtl] .cta-note, [dir=rtl] .ruo-line,[dir=rtl] .proof-point span{letter-spacing:normal} /* ---- 2c. Arabic type rhythm ---- The English system uses Space Grotesk display type with tight leading (1.0-1.08). Cairo's Arabic ascenders/descenders need more vertical air, especially in hero and display headings. Keep this in the Arabic overlay so English composition stays unchanged. */ [dir=rtl] body{line-height:1.72;text-rendering:optimizeLegibility} [dir=rtl] h1, [dir=rtl] .hero__h1{ font-size:clamp(32px,5.6vw,68px); line-height:1.22; max-width:min(22ch,100%); overflow-wrap:normal; word-break:normal; } [dir=rtl] h2, [dir=rtl] .display{ line-height:1.28!important; max-width:min(24ch,100%); overflow-wrap:normal; word-break:normal; } [dir=rtl] h3, [dir=rtl] .cap-card h3, [dir=rtl] .std-row b, [dir=rtl] .faq__item summary{ line-height:1.42; } [dir=rtl] .lead, [dir=rtl] .hero__sub p, [dir=rtl] .prose p, [dir=rtl] .section-intro, [dir=rtl] .cap-card p, [dir=rtl] .std-row p, [dir=rtl] .ticks li, [dir=rtl] .proof-point p, [dir=rtl] .faq__body p, [dir=rtl] .gateway p, [dir=rtl] .cta-band p, [dir=rtl] .footer p{ line-height:1.78; } [dir=rtl] .eyebrow, [dir=rtl] .mono, [dir=rtl] .idx, [dir=rtl] .gw-label, [dir=rtl] .std-row .n, [dir=rtl] .col-card__label, [dir=rtl] .footer__label{ font-family:var(--font-body); line-height:1.65; } [dir=rtl] .btn, [dir=rtl] .link-arrow, [dir=rtl] .chip{ line-height:1.55; white-space:normal; } [dir=rtl] .std-row{align-items:flex-start} [dir=rtl] .ladder + .ladder{margin-top:.08em} [dir=rtl] .ladder--lead{margin-top:.18em} @media (max-width:600px){ [dir=rtl] h1, [dir=rtl] .hero__h1{ font-size:clamp(30px,8.8vw,38px); line-height:1.26; } } /* ---- 3. logical-property RTL fixes ---- Each rule mirrors a physical left/right declaration in an English sheet that would render on the wrong edge under RTL. */ /* styles.css / legal.css — skip-link pinned to the (visual) start edge. */ [dir=rtl] .skip-link{left:auto;right:8px} /* consult.css — bullet ticks: marker + padding move to the start (right) edge. */ [dir=rtl] .ticks li{padding-left:0;padding-right:26px} [dir=rtl] .ticks li::before{left:auto;right:0} /* consult.css — start-edge inset accent bars (selected column / radio). */ [dir=rtl] .col-card--in{box-shadow:inset -3px 0 0 var(--ink)} [dir=rtl] .radio:has(input:checked){box-shadow:inset -3px 0 0 var(--ink)} /* consult.css — stepper connector line: flip inset + grow origin to the start. */ [dir=rtl] .stepper__step::before{left:8px;right:11px;transform-origin:right center} /* consult.css — error banner: the heavy rule moves to the start edge. */ [dir=rtl] .form-error{border-left-width:1px;border-right-width:4px} /* consult.css — structured-Latin inputs (email + phone) must edit L->R even under RTL: the caret, the '@'/'.' in an address and the '+'/'()' in a number are Latin and reorder confusingly if the field inherits RTL (WCAG 1.3.2). text-align:start keeps them visually on the reading (right) edge. The free- text name/role inputs and the building/offering textareas stay RTL so Arabic typists are unaffected. */ [dir=rtl] .field input[type=email], [dir=rtl] .field input[type=tel]{direction:ltr;text-align:start} /* legal.css — numbered-section list bullets + the §-number gap. */ [dir=rtl] .legal li{padding-left:0;padding-right:24px} [dir=rtl] .legal li::before{left:auto;right:0} [dir=rtl] .legal h2 .legal__num{margin-right:0;margin-left:12px} /* ---- 5. directional-glyph mirroring under RTL ---- Forward affordances must point WITH the reading direction. The glyphs are aria-hidden decorations, so a visual flip is semantically safe. Sentence- embedded arrows inside translated copy are already RTL-correct in ar_001.po and are NOT touched here. */ [dir=rtl] .gw-cta .arrow, [dir=rtl] .link-arrow span[aria-hidden], [dir=rtl] .ext-mark{display:inline-block;transform:scaleX(-1)} /* staqs.css (Motion Tier 1) — the batch-trace ruler's paper cover collapses toward the reading end; flip the origin so the ruler draws R->L on /ar (the only directional move in the Tier 1 motion set). */ [dir=rtl] .cm-ruler::after{transform-origin:left center}