/* ============================================================ Arabic / right-to-left layer Loaded only on /ar/. Companion to dir="rtl" on . WHY !important IS EVERYWHERE The original page styles almost everything with inline style attributes, and inline styles beat normal stylesheet rules. An !important declaration in a stylesheet is the one thing that outranks a non-important inline style, so it is the correct (not lazy) tool here. Each rule below is scoped to a single class added specifically as an RTL hook, so the blast radius is small. dir="rtl" on already handles, for free: - text direction and alignment - flexbox and grid main-axis reversal (nav, cards, table columns) - list and form control alignment Only physical offsets, physical margins and directional glyphs need manual flipping. ============================================================ */ /* ---- 1. Typography ------------------------------------------------- The Latin display font uses tight negative tracking (-0.038em on the h1, -0.032em on h2s). Arabic is cursive: negative tracking pulls the joined letterforms into each other and damages legibility. Reset it, and give the tall ascenders and diacritics room to breathe. */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] blockquote { letter-spacing: 0 !important; } [dir="rtl"] .ai-h1 { line-height: 1.28 !important; } [dir="rtl"] h2, [dir="rtl"] .ai-sec { line-height: 1.32 !important; } [dir="rtl"] blockquote { line-height: 1.62 !important; } /* Arabic body copy needs more leading than Latin at the same size. */ [dir="rtl"] p, [dir="rtl"] .ai-lead { line-height: 1.85 !important; } /* Uppercase transforms are meaningless in Arabic script and the wide letter-spacing on eyebrow labels breaks letter joining. */ [dir="rtl"] [style*="text-transform:uppercase"] { text-transform: none !important; letter-spacing: 0.02em !important; } /* ---- 2. Physical offsets that dir= cannot flip -------------------- */ /* Mega-menu panel: inline left:-24px */ [dir="rtl"] .ai-mega { left: auto !important; right: -24px !important; } /* Slide counter: inline margin-left:10px */ [dir="rtl"] .ai-ml { margin-left: 0 !important; margin-right: 10px !important; } /* Decorative glow blob in the contact panel: inline right:-120px */ [dir="rtl"] .ai-glow { right: auto !important; left: -120px !important; } /* ---- 3. Directional glyphs --------------------------------------- The chevrons (‹ ›) and CTA arrow (→) are literal characters, not icons, so they do not flip with dir=. Mirroring the glyph box is cleaner than swapping characters in the markup, and keeps the prev/next semantics correct once flex has already reversed the button order. */ [dir="rtl"] .ai-chev, [dir="rtl"] .ai-arrow { display: inline-block; transform: scaleX(-1); } /* ---- 4. Client-name marquee -------------------------------------- The strip carries dir="ltr" in the markup so the Latin brand names read correctly. The keyframe translates X negatively, which still scrolls the same visual direction inside an LTR subtree, so no animation change is needed - but the strip must not be re-reversed by the RTL flex parent. */ [dir="rtl"] .ai-marquee { direction: ltr !important; } /* ---- 5. Latin runs inside Arabic text ---------------------------- Product names, acronyms and URLs stay in Latin script. The browser's bidi algorithm handles them, but isolating them prevents adjacent punctuation from being dragged to the wrong side of the run. */ [dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="http"] { unicode-bidi: isolate; } /* ---- 6. Form controls -------------------------------------------- */ [dir="rtl"] input, [dir="rtl"] textarea { text-align: right !important; } /* ---- 7. Language switcher ---------------------------------------- */ [dir="rtl"] .ai-lang-menu { left: 0 !important; right: auto !important; }