/* --------------------------------------------------------------------------- RTL — loaded only by the Arabic build, after base.css and the page stylesheet. Additive by design: dir="rtl" on already mirrors flex/grid flow, text alignment and list markers, so this file only has to undo the places where the site pins something to a physical edge. The Arabic face is NOT set here. base.css registers IBM Plex Sans Arabic under both family names behind an Arabic unicode-range, so every Arabic glyph on the page picks it up — including ones no selector in this file names. What is left for this file is the typographic fallout: - no letter-spacing. Arabic is a joined script; tracking breaks the connections between letters rather than loosening them. - more leading. Plex Arabic runs taller than Plex Latin at the same size, so the site's Latin-tuned line-height crowds ascenders against descenders. --------------------------------------------------------------------------- */ [dir="rtl"] *{letter-spacing:normal!important;word-spacing:normal} [dir="rtl"] body{line-height:1.75} [dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{line-height:1.25} /* Latin brand names and product names inside Arabic prose keep their own run. */ [dir="rtl"] [lang="en"]{unicode-bidi:isolate;direction:ltr} /* --- fixed chrome pinned to a physical edge in base.css ------------------ */ [dir="rtl"] #progress{left:auto;right:0} [dir="rtl"] .totop{right:auto;left:20px} [dir="rtl"] .langmenu{right:auto;left:0} [dir="rtl"] .tgl .knob{left:auto;right:2px} [dir="rtl"][data-theme="midnight"] .tgl .knob{transform:translateX(-24px)} /* --- home.css ------------------------------------------------------------ */ [dir="rtl"] .crail{right:auto;left:20px;align-items:flex-start} [dir="rtl"] .hbody{right:auto;left:clamp(24px,5vw,64px);text-align:left} [dir="rtl"] .mqtrack span::after{margin-left:0;margin-right:.55em} @media(max-width:760px){[dir="rtl"] .hbody{left:auto;text-align:right}} /* --- industries.css ------------------------------------------------------ */ [dir="rtl"] .prow .pr{text-align:left} @media(max-width:560px){[dir="rtl"] .prow .pr{text-align:right}}