/* * RTL overrides - GENERATED FILE, DO NOT EDIT BY HAND. * * Regenerate with: npm run build:rtl * * Every rule is scoped to [dir="rtl"], which only the generated Arabic pages * set, so nothing here can affect the English site. * * Absolute positioning (left-*, right-*, inset-*) and transforms * (translate-x-*) are intentionally left alone: they are physical by design and * "left-1/2 -translate-x-1/2" centres correctly in both directions. */ /* ---------------------------------------------------------------- typography */ /* * Inter has no Arabic glyphs. The carries an inline font-family, which * beats a normal stylesheet rule, so this one has to be !important. */ [dir="rtl"] body, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea { font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif !important; } /* * Arabic is a joined script: letter-spacing pulls the glyphs apart and breaks * the connections. Tailwind's tracking-* utilities are used heavily in the * English design, so neutralise them all here. */ [dir="rtl"] [class*="tracking-"] { letter-spacing: normal; } /* Arabic has no letter case; leave the words as the translator wrote them. */ [dir="rtl"] .uppercase { text-transform: none; } /* * Arabic headline text needs a little more leading than the tight Latin * settings this design uses, or the diacritic-free glyphs feel cramped. */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.35; } /* ------------------------------------------------------------------- icons */ /* * Icons that depict motion or a handed tool read backwards beside Arabic text. * The build tags only the icons named in i18n.config.json (mirrorIcons) - never * all of them. A blanket rule would be actively harmful here: the Products * chevrons carry group-hover:rotate-180 and a JS-set inline transform, and * "transform" is a single property, so a mirror would silently wipe the rotation. * * Symmetric glyphs (shields, targets, globes) gain nothing from mirroring, and * check marks must never be mirrored — a reversed tick reads as an error mark. */ [dir="rtl"] .rtl-mirror { /* transform does not apply to non-replaced inline boxes, and not every tagged icon is a flex item, so do not rely on the custom element's own display value. */ display: inline-block; transform: scaleX(-1); } /* ------------------------------------------------------------------- lists */ [dir="rtl"] ul, [dir="rtl"] ol { padding-right: 0; } /* --------------------------------------------------------------- direction */ /* * Latin runs inside Arabic text (product codes, standards, the brand name) * need isolating so surrounding punctuation does not jump to the wrong end. */ [dir="rtl"] [lang="en"], [dir="rtl"] [translate="no"] { unicode-bidi: isolate; } /* ------------------------------------------------- directional utilities */ [dir="rtl"] .-right-4:not([class*="translate-x"]) { right: auto; left: -1rem; } [dir="rtl"] .bg-gradient-to-br { background-image: linear-gradient(to bottom left, var(--tw-gradient-stops)); } [dir="rtl"] .border-l-2 { border-left-width: 0px; border-right-width: 2px; } [dir="rtl"] .left-0:not([class*="translate-x"]) { left: auto; right: 0px; } [dir="rtl"] .left-1\/2:not([class*="translate-x"]) { left: auto; right: 50%; } [dir="rtl"] .left-6:not([class*="translate-x"]) { left: auto; right: 1.5rem; } [dir="rtl"] .ml-2 { margin-left: 0px; margin-right: 0.5rem; } [dir="rtl"] .mr-2 { margin-right: 0px; margin-left: 0.5rem; } [dir="rtl"] .pl-4 { padding-left: 0px; padding-right: 1rem; } [dir="rtl"] .pl-5 { padding-left: 0px; padding-right: 1.25rem; } [dir="rtl"] .right-0:not([class*="translate-x"]) { right: auto; left: 0px; } [dir="rtl"] .text-center { text-align: center; } [dir="rtl"] .text-left { text-align: right; } /* both sides set: mirror the pair instead of letting the single-side rules collide */ [dir="rtl"] .left-0.right-0:not([class*="translate-x"]) { left: 0px; right: 0px; } /* both sides set: mirror the pair instead of letting the single-side rules collide */ [dir="rtl"] .ml-2.mr-2 { margin-left: 0.5rem; margin-right: 0.5rem; } @media (min-width: 640px) { [dir="rtl"] .sm\:left-8:not([class*="translate-x"]) { left: auto; right: 2rem; } [dir="rtl"] .sm\:text-center { text-align: center; } } @media (min-width: 1024px) { [dir="rtl"] .lg\:ml-auto { margin-left: 0px; margin-right: auto; } [dir="rtl"] .lg\:pl-8 { padding-left: 0px; padding-right: 2rem; } }