/* rtl.css — right-to-left + Arabic typography, applied only when (i.e. the Arabic view, toggled by core/i18n.js). Linked on pages that carry a full Arabic pass (home, pricing). English/LTR is completely unaffected. */ /* Archivo Var (the display font) has Latin glyphs only, and the CSP blocks remote web fonts — so in Arabic swap to a broad platform Arabic stack. Keep the mono stack for UI chrome that stays Latin (language code, "AED", "24/7", emails). */ [dir="rtl"] { --font-display: 'Segoe UI', Tahoma, 'Geeza Pro', 'Noto Sans Arabic', 'Arabic Typesetting', system-ui, sans-serif; --font-body: 'Segoe UI', Tahoma, 'Geeza Pro', 'Noto Sans Arabic', system-ui, sans-serif; } [dir="rtl"] .t-mono, [dir="rtl"] .lang-select__btn, [dir="rtl"] .plan__price { font-family: var(--font-mono); } /* ── nav ────────────────────────────────────────────────────────────── Logo stays at the start (right); the links cluster is pushed to the end (left). In LTR that is margin-left:auto — mirror it here. */ [dir="rtl"] .nav__links { margin-left: 0; margin-right: auto; } [dir="rtl"] .nav__cta { margin-left: 0; margin-right: .4rem; } /* language dropdown anchors to its own start edge and reads right-aligned */ [dir="rtl"] .lang-select__menu { right: auto; left: 0; } [dir="rtl"] .lang-select__menu button { text-align: right; } /* ── home: pinned narrative scenes ─────────────────────────────────── Each caption should point toward the central phone. dir:rtl already reverses the grid columns, so swap the physical alignment to keep the composition (desktop only; scenes center on small screens). */ @media (min-width: 901px) { [dir="rtl"] .scene__side--left { justify-items: start; text-align: left; } [dir="rtl"] .scene__side--right { justify-items: end; text-align: right; } } /* ── footer ────────────────────────────────────────────────────────── The legal row keeps space-between; the grid auto-flows RTL. List/heading text starts from the right (browser default for dir:rtl) — no rules needed. */