/* Right-to-left for the marketing site — Arabic and Central Kurdish (Sorani). * * Loaded only by generated pages under /ar and /ckb: website_i18n.js adds the in the same * pass that sets dir="rtl". Nothing changes for the English site or for any left-to-right language. * * WHY THIS FILE EXISTS AT ALL * `direction: rtl` on flips text, inline order, flex rows and table columns. It does not * touch a declaration that names a side: `margin-left`, `float: right`, `left: 0`. The site's own * stylesheets were converted to logical properties (margin-inline-start and friends), which flip on * their own — but three things stayed physical and are handled here: * * 1. Shorthands. `padding: 8px 22px 8px 18px` encodes direction in the ORDER of its values and * cannot be expressed logically. It has to be restated. * 2. Absolute positioning. `left`/`right` were left alone deliberately: converting them blindly * moves overlays and dropdowns in ways that are hard to predict. * 3. Bootstrap and MDB. Third-party, minified, not ours to maintain — roughly 1,200 physical * declarations. This file overrides the handful the pages actually use rather than rewriting * frameworks we would then have to re-patch on every update. * * Loaded LAST so it wins on equal specificity. */ /* ── What must NOT mirror ─────────────────────────────────────────────────── Facts read the same in every language: an email address, a price, a version number, a code block. Mirrored they become wrong, not merely foreign. `unicode-bidi: isolate` stops the surrounding right-to-left run from reordering them. */ [dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] .price, [dir="rtl"] .plan-price, [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="tel"], [dir="rtl"] .no-i18n, [dir="rtl"] [data-i18n-skip] { direction: ltr; text-align: start; unicode-bidi: isolate; } /* ── Header ─────────────────────────────────────────────────────────────── */ /* The utility bar is a flex row with the greeting at one end and the social links at the other; `justify-content: space-between` already follows the direction, so only the separators need turning round. */ [dir="rtl"] .topbar-right img { margin-inline: 0; } [dir="rtl"] nav ul li a { text-align: start; } /* The language switcher's own menu. Its anchoring is already logical (inset-inline-*), but `transform-origin` only accepts physical keywords, so the opening animation would unfold from the far corner. */ [dir="rtl"] .lang-switcher-menu { text-align: start; } [dir="rtl"] .lang-switcher-topbar { margin-inline-start: 12px; padding-inline-start: 12px; border-inline-start: 1px solid rgba(255, 255, 255, 0.18); /* The separator belongs on the side the switcher is entered from, which swaps with the direction; without this the line sits against the screen edge. */ border-inline-end: 0; } /* ── The mobile menu ────────────────────────────────────────────────────── */ /* It slides in from a side, and that side is set with a transform rather than a property that follows direction. In Arabic it must arrive from the left, or it covers the burger that opened it. */ [dir="rtl"] .menu-overlay, [dir="rtl"] nav.active ul { text-align: start; } [dir="rtl"] #menu-toggle { margin-inline-start: auto; margin-inline-end: 0; } /* ── Content blocks ─────────────────────────────────────────────────────── */ /* Shorthand paddings on the cards: the two horizontal values are swapped. Listed one by one on purpose — a blanket rule would also swap the vertical values of any three-value shorthand. */ [dir="rtl"] .pricing-table td, [dir="rtl"] .pricing-table th, [dir="rtl"] .feature-card, [dir="rtl"] .faq-question, [dir="rtl"] .faq-answer { text-align: start; } /* Bullets and numbers move to the other side with the text; several lists set a left padding by hand to align them with the body copy. */ [dir="rtl"] ul, [dir="rtl"] ol { padding-inline-start: 1.2em; padding-inline-end: 0; } /* Anything the page floats. Bootstrap's .float-left / .float-right are named after sides, so in a mirrored page they mean the opposite of what the markup intends. */ [dir="rtl"] .float-left { float: right; } [dir="rtl"] .float-right { float: left; } [dir="rtl"] .text-left { text-align: start; } [dir="rtl"] .text-right { text-align: end; } [dir="rtl"] .ml-auto { margin-inline-start: auto; margin-inline-end: 0; } [dir="rtl"] .mr-auto { margin-inline-end: auto; margin-inline-start: 0; } /* ── Footer ─────────────────────────────────────────────────────────────── */ [dir="rtl"] .footer-links a { margin-inline-start: 15px; margin-inline-end: 0; } /* ── Typography ─────────────────────────────────────────────────────────── */ /* Arabic and Sorani script has no capitals, and its letterforms carry more vertical detail than Latin at the same size: uppercasing does nothing, and tight leading makes it hard to read. */ [dir="rtl"] { line-height: 1.85; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .section-title, [dir="rtl"] .topbar { text-transform: none; letter-spacing: normal; line-height: 1.5; } /* Sorani has no widely-installed default on most systems; naming the usual Arabic-script faces first avoids the browser falling back to a Latin face that renders the text as boxes. */ [dir="rtl"] body { font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", sans-serif; } /* ── Icons that point somewhere ─────────────────────────────────────────── */ /* An arrow meaning "next" points the other way in a mirrored page. A logo or a product screenshot does NOT — mirroring those makes them wrong, which is why this is opt-in per class rather than applied to every image. */ [dir="rtl"] .arrow-next, [dir="rtl"] .carousel-control-next, [dir="rtl"] .carousel-control-prev, [dir="rtl"] .slider-arrow { transform: scaleX(-1); }