/* ========================================================================== RTL OVERRIDES — loaded only on /ar/ pages, after style.css, never on / Most of style.css is written with CSS logical properties (inline-start, inline-end, margin-inline, etc.) specifically so it mirrors automatically the moment is set. This file only needs the handful of things logical properties can't cover: Arabic font stack and any physical-property exceptions. Populated in Phase 4 — the Arabic type decision is made (Cairo) and real Arabic content now exists to check these rules against. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TYPOGRAPHY -------------------------------------------------------------------------- */ /* Cairo carries both display and body roles on the Arabic side. Its 200–1000 weight range gives enough contrast that a second Arabic family isn't needed — one family is lighter to load and removes any risk of two mismatched Arabic designs sitting next to each other. */ [dir="rtl"] body{ font-family: 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif; /* Arabic needs more leading than Latin — ascenders, descenders and optional diacritics collide at Latin line-heights. */ line-height: 1.85; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4{ font-family: 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif; line-height: 1.45; /* 1.12 is far too tight for Arabic headings */ letter-spacing: normal; font-weight: 700; } /* CRITICAL — Arabic is a connected script. letter-spacing does not "track" Arabic, it visually breaks the joins between letters and makes the text look broken to a native reader. Every tracked selector in style.css must be reset here. This is not cosmetic; spaced Arabic reads as an error. THIS LIST MIRRORS style.css. It was derived by parsing style.css for every rule setting letter-spacing to a non-zero value, not written by hand — an incomplete hand-written list is exactly how .hero-fact dt was missed on the first pass. Re-derive it if style.css gains new rules; the automated RTL check in testing will catch a miss. */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] .eyebrow, [dir="rtl"] .btn, [dir="rtl"] .lang-toggle, [dir="rtl"] .hero-fact dt, [dir="rtl"] .footer-col h3, [dir="rtl"] table.data thead th, [dir="rtl"] .fact-row dt, [dir="rtl"] .stat-figure, [dir="rtl"] .footer-bottom, [dir="rtl"] .mobile-contact, [dir="rtl"] .nav-logo .logo-text .name{ letter-spacing: normal; text-transform: none; } /* .sub ("MTC") is excluded above on purpose — it stays Latin, so its original 0.1em tracking from style.css is correct, not a bug to reset. */ /* JetBrains Mono, Space Grotesk and Inter are Latin-only. Left unset they silently fall back to a system Arabic face mid-page, which is exactly the drift that went unnoticed on the previous build. ALSO DERIVED FROM style.css, not hand-written — .pill strong was missed on the first pass precisely because the list was hand-maintained. Deliberate exception: table.data td.num and td.yr keep the mono face. Their content is Latin digits and dates, where tabular figures aid column alignment; no Arabic ever lands in those cells. */ [dir="rtl"] body, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] .eyebrow, [dir="rtl"] .stat-figure, [dir="rtl"] .btn, [dir="rtl"] .nav-links, [dir="rtl"] .lang-toggle, [dir="rtl"] .mobile-panel a, [dir="rtl"] .mobile-contact, [dir="rtl"] .hero-fact dt, [dir="rtl"] .hero-fact dd, [dir="rtl"] .pill strong, [dir="rtl"] .pill span, [dir="rtl"] .nav-logo .logo-text, [dir="rtl"] .footer-logo .logo-text, [dir="rtl"] .footer-bottom, [dir="rtl"] .footer-col h3, [dir="rtl"] table.data, [dir="rtl"] table.data caption, [dir="rtl"] table.data thead th, [dir="rtl"] .fact-row dt, [dir="rtl"] .fact-row dd, [dir="rtl"] blockquote, [dir="rtl"] blockquote footer, [dir="rtl"] .checklist li, [dir="rtl"] .checklist li strong, [dir="rtl"] .notice, [dir="rtl"] .media-band .band-caption p, [dir="rtl"] .table-note{ font-family: 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif; } /* .sub ("MTC") stays Latin deliberately — it's a Latin initialism even in the Arabic logo artwork itself, not a translated word. */ [dir="rtl"] .nav-logo .logo-text .sub, [dir="rtl"] .footer-logo .logo-text .sub{ font-family: var(--font-display); } /* Latin-only face is correct here — content is always Latin digits. */ [dir="rtl"] table.data td.num, [dir="rtl"] table.data td.yr{ font-family: var(--font-mono); } /* The eyebrow keeps its amber rule but loses the tracking. Slightly larger than the Latin version because Arabic at 0.72rem is hard to read. */ [dir="rtl"] .eyebrow{ font-size: 0.82rem; font-weight: 600; } /* Arabic has no case, so small uppercase labels lose their visual distinction — weight carries it instead. */ [dir="rtl"] .fact-row dt, [dir="rtl"] table.data thead th{ font-size: 0.8rem; font-weight: 600; } /* -------------------------------------------------------------------------- 2. BIDIRECTIONAL ISOLATION -------------------------------------------------------------------------- */ /* Latin words, phone numbers, emails, registration numbers, dates and currency figures inside Arabic text reorder incorrectly without isolation — "+965 51518115" can render as "51518115 965+", which is wrong and, for a number a client is meant to dial, actively harmful. Markup wraps those runs in . Both the class and the attribute are targeted so the rule holds if one is dropped during a later edit. */ [dir="rtl"] .ltr, [dir="rtl"] [dir="ltr"]{ direction: ltr; unicode-bidi: isolate; display: inline-block; } /* Table cells holding pure numbers/dates need isolation too, but must stay block-level so column alignment survives. */ [dir="rtl"] table.data td.num, [dir="rtl"] table.data td.yr{ direction: ltr; unicode-bidi: isolate; } [dir="rtl"] table.data td.num{ text-align: right; } [dir="rtl"] table.data td.yr{ text-align: right; } /* Tel/mailto/WhatsApp links are always Latin. */ [dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"]{ direction: ltr; unicode-bidi: isolate; } /* -------------------------------------------------------------------------- 3. PHYSICAL EXCEPTIONS -------------------------------------------------------------------------- */ /* The nav underline, card borders, blockquote rule and checklist dash all use logical properties already and mirror on their own. The items below genuinely cannot. Mobile panel slides in from the opposite edge. (Also declared in style.css so the behaviour stays correct even if this file fails to load.) */ [dir="rtl"] .mobile-panel{ transform: translateX(-100%); } [dir="rtl"] .mobile-panel.is-open{ transform: translateX(0); } /* The hero illustration is a technical drawing whose reading order runs left-to-right (derrick → road → pylon → building). Mirroring it would reverse the implied construction sequence for no benefit, so it is left unmirrored — a deliberate choice, not an oversight. Its caption text is replaced with Arabic in the markup. */ [dir="rtl"] .hero-art svg{ transform: none; } [dir="rtl"] .hero-art text{ font-family: 'Cairo', sans-serif; } /* -------------------------------------------------------------------------- 4. FORM CONTROLS -------------------------------------------------------------------------- */ [dir="rtl"] input, [dir="rtl"] textarea{ text-align: start; } /* Email and phone inputs accept Latin — keep their content LTR while the label above them stays RTL. */ [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"]{ direction: ltr; text-align: left; } /* The honeypot uses clip-based hiding (.visually-hidden), NOT a -9999px offset, precisely so it cannot create horizontal scroll under RTL. Nothing further is needed here — noted so it isn't "fixed" later. */ /* -------------------------------------------------------------------------- 5. PRINT -------------------------------------------------------------------------- */ @media print{ [dir="rtl"] body{ font-family: 'Cairo', sans-serif; } /* Latin link-destination suffixes must not reorder inside Arabic text. */ [dir="rtl"] main a[href^="http"]::after, [dir="rtl"] main a[href^="mailto:"]::after{ direction: ltr; unicode-bidi: isolate; } }