/* ============================================================================ Right-to-left overrides. Loaded only when . The stylesheets carry 538 physical-direction declarations (margin-left, left:, text-align: right) and no logical properties. Rewriting all of them to margin-inline-start and friends is the better long-term answer — and doing it as one sweep across 7,148 lines would put every existing left-to-right page at risk to serve one new locale. So this file flips only what actually reads wrongly in Arabic, and stays small enough to read in one sitting. Convert files to logical properties as they are touched for other reasons; delete the corresponding block here when you do. Everything is scoped under [dir="rtl"] so it cannot affect English or French. ========================================================================== */ [dir="rtl"] body { /* Arabic script needs more line height than Latin at the same size: the glyphs are taller and the diacritics sit above and below. */ line-height: 1.85; } /* Latin-first font stacks put an Arabic fallback last, which lands on whatever the system happens to offer. Name the Arabic faces first so the page is set in a face chosen rather than inherited. */ [dir="rtl"], [dir="rtl"] body, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea { font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif; } /* Numerals, exam codes and prices stay left-to-right inside Arabic text. Without this, a code like "QA2026" beside Arabic can reorder on screen and be transcribed wrongly — which matters most in exactly the places it appears. */ [dir="rtl"] code, [dir="rtl"] .click-to-copy, [dir="rtl"] .ld-code__bar, [dir="rtl"] pre { direction: ltr; unicode-bidi: embed; text-align: left; } /* The pricing amount used to be in the list above, forced to `direction: ltr`. That is right for the three tiers whose amount is a number -- "$199" must not come out as "199$" -- and wrong for the two whose amount is a word, because "مجانًا" (Free) and "عرض سعر" (Quote) were being laid out and aligned as if they were Latin. `plaintext` settles it per element instead of per rule: the direction is taken from the element's own first strong character. A price has none (a currency sign and digits are not strong), so it falls back to left-to-right and stays isolated exactly as before. An Arabic word has one, so it reads right-to-left like the rest of the page. Measured on /plans?lang=ar: the three prices align left and render "$199", the two words align right. This needs no modifier class and no change to the markup, so a tier that switches between a price and a word -- or a new locale that translates "Free" -- keeps working with no further edit. */ [dir="rtl"] .pricing-card__amount { direction: inherit; unicode-bidi: plaintext; text-align: start; } /* --------------------------------- Text ---------------------------------- */ [dir="rtl"] .ld-section-head, [dir="rtl"] .pl-section-head, [dir="rtl"] .ex-section-head { /* These are centred already; nothing to flip, but they must not inherit a left alignment from a parent override below. */ text-align: center; } [dir="rtl"] .ld-integrate__point, [dir="rtl"] .ld-integrate__path, [dir="rtl"] .accordion-card, [dir="rtl"] .pricing-card, [dir="rtl"] .card-modern { text-align: right; } /* --------------------------- A note on flexbox ---------------------------- Do not add flex-direction: row-reverse here. Under dir="rtl" a plain `flex-direction: row` ALREADY lays its children out right to left, so row-reverse flips them back to left-to-right and produces exactly the bug it looks like it is fixing. Five rules in this file did that, and the result was a site nav with the logo on the left, pricing ticks on the wrong side of their text, and every icon in the admin sidebar still on the left. The same trap applies to `float`, which does not follow direction, and to `text-align: right`, which is what `start` already means here. -------------------------------------------------------------------------- */ /* ------------------------------- Navigation ------------------------------- */ [dir="rtl"] .ld-nav .btn-pill, [dir="rtl"] .ex-nav__cta { margin-left: 0; margin-right: 16px; } /* An auto margin does NOT follow the writing direction: margin-left:auto eats the free space on the left and so pins its element to the physical right in every direction. Each one that pins something to an edge has to be flipped by hand, or it stays on the same side of the screen while everything around it mirrors — which is how the account menu ended up wedged against the logo. */ [dir="rtl"] .ld-nav__toggle, [dir="rtl"] .ex-nav__toggle, [dir="rtl"] .ex-user-menu, [dir="rtl"] .ex-app__bell, [dir="rtl"] .ex-sandbox-banner a, [dir="rtl"] .ex-app__top .ex-sandbox-badge, [dir="rtl"] .ex-side-nav__chev { margin-left: 0; margin-right: auto; } /* ------------------------------ Admin sidebar ----------------------------- */ [dir="rtl"] .ex-side-nav .ex-sub { padding: 0 48px 0 16px; } [dir="rtl"] .ex-app__side { border-right: 0; border-left: 1px solid var(--ex-border); /* position:fixed with left:0 does not follow the writing direction, so flipping only the border left the panel itself on the left with its border on the far side of the page. */ left: auto; right: 0; } /* The offsets that keep content clear of the fixed sidebar have to move with it, or the content sits under the panel. There are two, set on different elements and in different properties, so flipping one leaves the other. */ [dir="rtl"] .ex-app__body { padding-left: 0; padding-right: 280px; } [dir="rtl"] .ex-app__foot { margin-left: 0; margin-right: 280px; } /* ------------------------------ Lists & marks ----------------------------- */ [dir="rtl"] .adm-scope-row { /* Resource name first still, but reading from the right. */ direction: rtl; } /* ------------------------------- Components ------------------------------- */ [dir="rtl"] .adm-cred__label, [dir="rtl"] .adm-field-label, [dir="rtl"] .ld-integrate__eyebrow { text-align: right; } /* The actions menu is pinned to one edge of its tile. */ [dir="rtl"] .dropdown-menu { left: 0 !important; right: auto !important; text-align: right; } [dir="rtl"] .panel-heading .pull-right { float: left; } /* Chevrons and arrows point along the reading direction, so they mirror. Icons that are not directional — a camera, a clock, a tick — must not, which is why this is a named list rather than a blanket transform on every svg. */ [dir="rtl"] .accordion-card summary svg, [dir="rtl"] .ex-crumb svg, [dir="rtl"] .ex-btn--next svg, [dir="rtl"] .ex-btn--prev svg, /* Inline arrows drawn straight into a template rather than reached through a component class: the hero and blog calls to action, the sign-in buttons, and the sandbox exit. They carry ex-icon--dir because the markup is the only place that knows an arrow is an arrow -- a plus sign shares the same horizontal stroke, and .btn-pill svg would have flipped both. */ [dir="rtl"] .ex-icon--dir, /* The sidebar chevron already moves to the trailing edge above; without this it moves there and goes on pointing away from the reader. */ [dir="rtl"] .ex-side-nav__chev svg { transform: scaleX(-1); } /* -------------------- Alignments that meant "reading start" ---------------- */ /* Every declaration below is a `text-align: left` written when left-to-right was the only case, meaning "align to where reading starts". None of them is a deliberate left-to-right isolation -- those live in the `direction: ltr` block near the top of this file and are not touched here. Left alone, each one pins Arabic text to the wrong edge of its container. Two stylesheets are involved. examina-2026.css carries the dashboard and comparison tables; css/pages/plans.css carries the pricing page's own comparison table and the dark "need something custom" band. Both are left-to-right sheets this file overrides rather than edits, for the reason given at the top: rewriting 538 physical declarations to logical properties to serve one locale would put every existing page at risk. `.pl-band__inner` and `.ex-user-menu__btn` are containers, not leaves. Their headings, paragraphs and buttons inherit the alignment, which is why fixing the container is enough and the six leaf elements do not each need a rule. */ /* examina-2026.css: dashboard tables and the pricing comparison grid. */ [dir="rtl"] .ex-table th, [dir="rtl"] .ex-user-menu__btn, [dir="rtl"] .pricing-tbl th:first-child, [dir="rtl"] .pricing-tbl td:first-child, [dir="rtl"] .price-ul .price-first-heading .panel-heading, [dir="rtl"] .price-ul .price-first-heading .list-group-item, [dir="rtl"] .price-ul .list-group-item { text-align: right; } /* css/pages/plans.css: the feature comparison table and the custom-plan band. */ [dir="rtl"] .cmp-table, [dir="rtl"] .cmp-table th.cmp-feature-head, [dir="rtl"] .cmp-table td.cmp-feature, [dir="rtl"] .pl-band__inner { text-align: right; } /* The narrow-screen rule at the end of examina-2026.css repeats `.price-ul .list-group-item { text-align: left }` inside a max-width media query. It needs no separate override: a media query adds no specificity, and the selector above already outweighs it, so the same rule covers both widths. ------------------------------------------------------------------------- */ /* ------------------------- A note on letter-spacing ------------------------ Nothing here neutralises letter-spacing, and the tempting one-liner `[dir="rtl"] * { letter-spacing: normal }` is deliberately absent. Arabic is cursive, so tracking genuinely does break it -- the joins come apart and the word arrives as loose disconnected glyphs -- and there are 165 such declarations left in the marketing and admin sheets. A wildcard would mute all of them at once, and would be wrong three ways. It would flatten the runs that are deliberately Latin inside an Arabic page. The `direction: ltr` block at the top of this file exists because exam codes and prices must not reorder; the same elements are tracked on purpose (.ex-secret, .ex-recovery-codes li, .adm-cred__masked space out a masked string so it can be read a character at a time), and a wildcard would undo that at the same specificity as the rule that set it. It fixes only one of the three faults. `text-transform: uppercase` is a no-op in Arabic rather than a corruption, so no override restores the hierarchy it was carrying; and `text-transform: capitalize` mis-cases French, which never matches [dir="rtl"] at all. And it would end the work. LatinOnlyTypographyRatchetTest counts the declaration where it is written, not whether something later cancels it, so a blanket override lowers no number while making the page look repaired. That is the same bargain the header of this file already makes: correct files at source as they are touched, and delete from here rather than add. The examinee-facing sheets -- verify, calculator, loading and the mobile player -- were corrected at source for exactly that reason, with html:not([dir="rtl"]) where the treatment was worth keeping for Latin. -------------------------------------------------------------------------- */ /* ---------------------------------- Email --------------------------------- */ /* Email carries its own inline styles and cannot use this file at all; the Arabic templates set dir and alignment inline. Nothing to do here — noted so the omission does not read as an oversight. */