/* ========================================================================== ARABIC / RTL OVERRIDES Loaded AFTER style.css on Arabic pages only. The site header and footer stay English and carry dir="ltr", so the [dir="rtl"] selectors below deliberately do not reach them. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TYPEFACE Cairo for Arabic, DM Sans kept for Latin runs inside Arabic text. -------------------------------------------------------------------------- */ body { font-family: 'Cairo', 'DM Sans', system-ui, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: 'Cairo', 'DM Sans', sans-serif; } /* DM Mono has no Arabic coverage. Anywhere the design uses it for texture, Arabic must be redirected to Cairo or it silently falls back to a random system family and the page loses its typographic consistency. */ .section-eyebrow, .hero-eyebrow, .trust-label, .stat-strip__num, .process-step__num, .why-icon, .stat-item strong { font-family: 'Cairo', 'DM Sans', sans-serif; } /* -------------------------------------------------------------------------- 2. LETTER-SPACING MUST BE ZERO Latin letter-spacing is decorative. Arabic letter-spacing breaks the cursive joins between letters and renders words as disconnected glyphs. This is the single most visible RTL typography mistake, so it is killed globally and then re-allowed only for Latin-only chrome. -------------------------------------------------------------------------- */ [dir="rtl"], [dir="rtl"] * { letter-spacing: normal; } /* text-transform: uppercase is a no-op in Arabic, so the eyebrows lose the visual weight they carry in English. Give them a small bump to hold the same place in the hierarchy. */ [dir="rtl"] .section-eyebrow, [dir="rtl"] .hero-eyebrow, [dir="rtl"] .trust-label { text-transform: none; font-weight: 700; font-size: 0.95rem; } /* -------------------------------------------------------------------------- 2b. LEADING FOR ARABIC DISPLAY TYPE The Latin hero runs line-height 1.1, which is fine for capitals but clips Arabic: the tashkeel (damma, shadda, fatha) sit above the letter body and collide with the descenders of the line above. Arabic needs more leading at every heading size, and noticeably more at display size. -------------------------------------------------------------------------- */ [dir="rtl"] .hero-h1 { line-height: 1.45; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] .section-title, [dir="rtl"] .contact-title { line-height: 1.5; } /* -------------------------------------------------------------------------- 3. BIDI ISOLATION HELPER Every Latin or numeric run inside Arabic text needs this, or a trailing "+", "." or ":" jumps to the wrong side of the string. Applies to phone numbers, emails, dimensions, MEP, GPR, C60, model names. -------------------------------------------------------------------------- */ .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* -------------------------------------------------------------------------- 3b. RTL CHROME The header and footer are fully Arabic and inherit dir="rtl" from , so the flex rows lay out right to left: logo top-right, hamburger top-left. Only the directional details that CSS cannot mirror on its own are fixed here. -------------------------------------------------------------------------- */ /* Active-row marker moves to the right edge in RTL. Mobile only: on desktop the indicator is the underline, and this selector (0,3,0) would otherwise outspecify the desktop `box-shadow: none` reset and draw both. */ @media (max-width: 1023px) { [dir="rtl"] .nav-menu>a[aria-current="page"] { box-shadow: inset -3px 0 0 var(--yellow); } } /* Mobile submenu: indent and hairline rule hang off the right. style.css sets these on the left, and the legacy [dir="rtl"] .dropdown-menu rule only flips the padding, so the margin and border need flipping too. */ @media (max-width: 1023px) { [dir="rtl"] .dropdown-menu { margin: 0.15rem 0.85rem 0.5rem 0; padding-right: 0.85rem; padding-left: 0; border-right: 1px solid rgba(255, 255, 255, 0.12); border-left: 0; } } /* Desktop submenu panel anchors to the right edge of its parent item. */ @media (min-width: 1024px) { [dir="rtl"] .dropdown-menu { left: auto; right: 0; margin: 0; padding: 0.4rem; border: 1px solid rgba(255, 255, 255, 0.1); } } /* The switcher label is Latin ("English"). Isolate it so the globe and the word cannot be reordered by the surrounding RTL context. */ .lang-switch span { unicode-bidi: isolate; } /* Footer contact rows: LTR glyph order for phone/email, but still flush right with the Arabic address above them. */ [dir="rtl"] .footer-contact-info a.ltr { text-align: right; } /* Article furniture mirrored for RTL: table alignment, callout accent edge and list indents all move to the right. */ [dir="rtl"] .prose th, [dir="rtl"] .prose td { text-align: right; } [dir="rtl"] .prose .callout { border-left: 0; border-right: 3px solid var(--yellow); } [dir="rtl"] .prose figcaption { text-align: right; } /* -------------------------------------------------------------------------- 4. FLOW AND ALIGNMENT -------------------------------------------------------------------------- */ [dir="rtl"] .prose, [dir="rtl"] .blog-card__body, [dir="rtl"] .cta-box, [dir="rtl"] .card-body, [dir="rtl"] .icon-card__body, [dir="rtl"] .feature-card, [dir="rtl"] .process-step, [dir="rtl"] .service-detail, [dir="rtl"] .faq-item, [dir="rtl"] .spec-table { text-align: right; } [dir="rtl"] ul, [dir="rtl"] ol { padding-right: 1.5rem; padding-left: 0; } [dir="rtl"] .prose ul, [dir="rtl"] .prose ol { padding-right: 1.5rem; padding-left: 0; } /* Checklists and icon rows: the icon must lead on the right. */ [dir="rtl"] .check-item, [dir="rtl"] .contact-method, [dir="rtl"] .icon-card { flex-direction: row-reverse; } [dir="rtl"] .check-item > svg { margin-left: 0.75rem; margin-right: 0; } /* Tables: header and cell alignment flips, but numeric spec values stay LTR via the .ltr helper on the cell content itself. */ [dir="rtl"] table th, [dir="rtl"] table td { text-align: right; } /* Lists that use a custom marker need the marker moved across. */ [dir="rtl"] .pill-list { padding-right: 0; } /* -------------------------------------------------------------------------- 5. DIRECTIONAL GLYPHS AND ICONS Anything that points must point the other way. -------------------------------------------------------------------------- */ [dir="rtl"] .hero-btn--primary svg, [dir="rtl"] .btn svg.arrow, [dir="rtl"] .btn-submit svg { transform: scaleX(-1); } [dir="rtl"] .hero-btn--primary svg { margin-left: 0; margin-right: 8px; } [dir="rtl"] .hero-btn--ghost svg { margin-right: 0; margin-left: 8px; } /* -------------------------------------------------------------------------- 6. FORMS -------------------------------------------------------------------------- */ [dir="rtl"] .input-group label, [dir="rtl"] .form-title, [dir="rtl"] .error { text-align: right; } [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; direction: rtl; } /* Phone and email inputs stay LTR so the caret and the "+974" behave. */ [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"] { direction: ltr; text-align: left; } [dir="rtl"] input::placeholder, [dir="rtl"] textarea::placeholder { text-align: right; } [dir="rtl"] input[type="tel"]::placeholder { text-align: left; } /* -------------------------------------------------------------------------- 7. MISC COMPONENTS -------------------------------------------------------------------------- */ [dir="rtl"] .hero-inner, [dir="rtl"] .hero-h1, [dir="rtl"] .hero-sub { text-align: center; } [dir="rtl"] .section-lead, [dir="rtl"] .section-title { text-align: right; } [dir="rtl"] .cta-wrap, [dir="rtl"] .section-cta .section-title, [dir="rtl"] .section-cta .section-lead { text-align: right; } [dir="rtl"] .stat-item, [dir="rtl"] .stat-strip__item { text-align: center; } /* Blog meta line: byline and date read right to left. */ [dir="rtl"] .blog-meta, [dir="rtl"] .post-meta { flex-direction: row-reverse; justify-content: flex-start; } /* Arabic body copy needs a touch more line-height than Latin at the same size, because of the ascenders and the diacritic space above the baseline. */ [dir="rtl"] p, [dir="rtl"] li { line-height: 1.9; }