@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;500;600;700;800&display=swap'); /* * RTL layer for the Arabic edition. Injected as the LAST stylesheet on every * /ar/ page, so it wins over the inlined page CSS without editing it. * * ## What this file can and cannot do * * `dir="rtl"` on already flips text direction, inline-axis flow, list * markers and the default text alignment. What it does NOT flip is any rule * that names a physical side: `left`, `right`, `margin-left`, `padding-right`, * `text-align: left`. This site has 274 of those and zero logical properties, * so this file corrects the global, structural ones — page shells, headers, * footers, cards, buttons — and the remainder are converted at source to * logical properties (`margin-inline-start` and friends) as each section is * done. * * The Arabic webfont is imported HERE rather than preloaded in : this * sheet is inert until dir=rtl, and @import inside it means the font is only * fetched once a reader actually switches. Most never will. * * Treat this as the baseline that makes every page READABLE in Arabic, not as * a substitute for that conversion. A rule here that has to name a component * class is a sign that component should be converted instead. */ /* ── Typography ────────────────────────────────────────────────────────── Poppins has no Arabic glyphs. Without an Arabic-capable face first in the stack the browser falls back per-glyph, which mixes two faces inside one sentence and makes the line height jump. Noto Sans Arabic covers the full range and pairs acceptably with the Latin text that remains (brand names, product names, numerals). */ html[dir='rtl'], html[dir='rtl'] body, html[dir='rtl'] button, html[dir='rtl'] input, html[dir='rtl'] select, html[dir='rtl'] textarea { font-family: 'Noto Sans Arabic', 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif; } /* Arabic script has taller ascenders/descenders and no capitals, so the Latin line-height reads cramped. A small bump restores comfortable rhythm. */ html[dir='rtl'] body { line-height: 1.85; } /* Arabic has no letter case. `text-transform: uppercase` on eyebrows and labels does nothing to Arabic glyphs but still applies its letter-spacing, which visually breaks the cursive joins. */ html[dir='rtl'] * { text-transform: none !important; letter-spacing: normal !important; } /* ── Direction ─────────────────────────────────────────────────────────── Text alignment. Anything explicitly aligned left in the LTR sheet must become right, and vice versa — but only where the author set it, which is why these are attribute/utility level rather than blanket. */ html[dir='rtl'] body { text-align: right; } /* Numerals, code, URLs and brand names stay left-to-right inside RTL text. Without this a phone number or "Zimyo HRMS" mid-sentence renders with its parts reordered. */ html[dir='rtl'] code, html[dir='rtl'] pre, html[dir='rtl'] [dir='ltr'], html[dir='rtl'] input[type='tel'], html[dir='rtl'] input[type='email'], html[dir='rtl'] input[type='url'] { direction: ltr; text-align: left; unicode-bidi: embed; } /* ── Mirrored glyphs ───────────────────────────────────────────────────── Directional icons — chevrons, arrows, "read more" carets — point the wrong way once the layout mirrors. Flipping the SVG horizontally is correct for arrows; it is NOT correct for logos or pictograms, so this is scoped to inline SVGs inside links and buttons, where directional glyphs live. */ html[dir='rtl'] a > svg, html[dir='rtl'] button > svg { transform: scaleX(-1); } /* Opt-out for a non-directional icon that must not mirror. Add `data-no-flip` to the svg. */ html[dir='rtl'] svg[data-no-flip] { transform: none; } /* ── Forms ─────────────────────────────────────────────────────────────── Native controls need their own nudge; the inherited direction is not enough for the dropdown arrow or the checkbox/label order. */ html[dir='rtl'] select, html[dir='rtl'] input, html[dir='rtl'] textarea { text-align: right; } /* ── Scroll shadows and gradients ──────────────────────────────────────── A linear-gradient written `to right` points the wrong way in a mirrored layout. `to inline-end` would be correct but is not yet widely supported, so this is a targeted flip of the common horizontal-fade pattern. */ html[dir='rtl'] [class*='fade-right'], html[dir='rtl'] [class*='scroll-shadow'] { transform: scaleX(-1); } html[dir='rtl'] [class*='fade-right'] > *, html[dir='rtl'] [class*='scroll-shadow'] > * { transform: scaleX(-1); }