/* Right-to-left overrides for the Arabic locale. * * The shared stylesheets stay at /assets/ and are used by every language, so nothing here may * change them. `dir="rtl"` on already flips text flow, inline-block order, flexbox and * grid direction; what it does NOT flip are the physical Tailwind utilities (ml-*, pr-*, * text-left/right, left-*). There are only 14 such classes in the whole codebase, listed below. * * Load this AFTER tailwind.min.css and styles.css. */ /* ---- physical padding utilities ---------------------------------------- */ [dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; } [dir="rtl"] .pr-3 { padding-right: 0; padding-left: 0.75rem; } [dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; } [dir="rtl"] .pl-5 { padding-left: 0; padding-right: 1.25rem; } [dir="rtl"] .pl-10 { padding-left: 0; padding-right: 2.5rem; } /* ---- physical margin utilities ------------------------------------------ */ [dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; } [dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; } [dir="rtl"] .ml-9 { margin-left: 0; margin-right: 2.25rem; } [dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; } [dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; } /* ---- text alignment ------------------------------------------------------ * These are physical in Tailwind, so "right" means "end" in an LTR design and * must become "left" (the end) under RTL. Number columns keep hugging the end. */ [dir="rtl"] .text-left { text-align: right; } [dir="rtl"] .text-right { text-align: left; } /* ---- absolute positioning ------------------------------------------------ */ [dir="rtl"] .left-0 { left: auto; right: 0; } [dir="rtl"] .left-4 { left: auto; right: 1rem; } /* ---- site components defined in styles.css ------------------------------- * The mobile nav slides in from the left in LTR; mirror it. */ [dir="rtl"] .nav2-mobile { inset: 56px 0 0 0; } /* The cookie modal and banner are centred, so they need no flip. The FRAEON * banner is a flex row and follows dir automatically. */ /* The language-switch button carries `margin-right:6px` as an INLINE style, copied verbatim from * the English source so all seven locales share one markup contract. Inline styles beat a normal * stylesheet rule, so this is the one place `!important` is warranted — without it the 6px gap * would sit on the visual left under RTL. */ [dir="rtl"] .nav2-lang-switch { margin-right: 0 !important; margin-left: 6px !important; } /* ---- numerals ------------------------------------------------------------- * Statistics read better with Western digits, which is standard on Arabic * consumer sites. Force the Latin digit shapes so a user's font or locale * settings cannot substitute Eastern Arabic numerals mid-sentence. */ [dir="rtl"] { font-variant-numeric: lining-nums; } /* Numbers, percentages and dates stay LTR even inside RTL prose, otherwise a * value like "8.2" or "12%" can render with its sign/percent on the wrong side. */ [dir="rtl"] .num, [dir="rtl"] [data-num] { direction: ltr; unicode-bidi: embed; display: inline-block; }