/* =========================================================================== RIGHT-TO-LEFT — loaded only on /ar --------------------------------------------------------------------------- The theme is ~740KB of physical left/right rules with no RTL build, so this mirrors the ones the marketing page actually uses rather than trying to flip the whole sheet. The list is not guesswork: every selector below was found by intersecting the classes present in whispercrm-body.html with the rules in style.css / pricing.css that set a directional property. Everything is scoped to [dir="rtl"], which __root.tsx puts on for the /ar route. The English page never loads this file and could not be affected by it if it did. NOT LISTED HERE, ON PURPOSE — these already mirror themselves: · flex and grid containers (Bootstrap's .row and the pricing grids) follow `dir`, so columns reverse with no help · margin-inline / padding-inline, which pricing.css already uses in places · text runs, which the bidi algorithm handles =========================================================================== */ /* ── type ────────────────────────────────────────────────────────────────── The theme's Latin stack has no Arabic glyphs. Without a face that does, the browser substitutes per-character and the page loses its typography. Cairo is a humanist Arabic that sits comfortably beside the theme's Latin. */ [dir="rtl"] body, [dir="rtl"] .navmenu, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] .btn, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] button { font-family: "Cairo", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif; } /* Arabic has no capitals; letter-spaced uppercase treatments are meaningless and actively damage the joins between letters. */ [dir="rtl"] .wc-opt, [dir="rtl"] .wc-switch-opt span, [dir="rtl"] .wc-addons-head span, [dir="rtl"] .wc-ribbon { text-transform: none; letter-spacing: 0; } /* ── SVG illustrations: keep the geometry they were drawn with ───────────── `text-anchor` resolves against the inline base direction, so under RTL "start" silently becomes the right edge. Every label in every illustration is pinned to a hand-chosen x with a hand-chosen anchor, so the whole set jumps: labels grow backwards through their own bullets and off the artboard. Pinning direction here restores the drawn layout. The Arabic still reads right-to-left inside each label — bidi handles the run — it is only the anchoring that stays as designed. The one drawing that SHOULD mirror (the cost breakdown, a label/value table) is flipped properly in i18n.ts instead, coordinate by coordinate. */ [dir="rtl"] svg text, [dir="rtl"] svg tspan { direction: ltr; } /* …except the one drawing that IS mirrored. Its coordinates were flipped, so its text has to run right-to-left for the anchors to land where the flip intends — and so that the total, "0.132 رصيد", keeps its number and its unit in reading order rather than swapping them. */ [dir="rtl"] svg[data-rtl-mirror] text, [dir="rtl"] svg[data-rtl-mirror] tspan { direction: rtl; } /* ── header ────────────────────────────────────────────────────────────── */ [dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; } [dir="rtl"] .me-xl-0 { margin-right: 0 !important; } @media (min-width: 1200px) { [dir="rtl"] .me-xl-0 { margin-left: 0 !important; } } [dir="rtl"] .header .logo img { margin-right: 0; margin-left: 8px; } [dir="rtl"] .header .logo h1 { padding-left: 0; padding-right: 5px; } [dir="rtl"] .header .logo h1.sitename { padding-right: 0; } [dir="rtl"] .header .header-social-links { padding-right: 0; padding-left: 15px; } /* :not(.wc-lang) matters — the language link lives in this group and sets its own symmetric spacing with margin-inline-end. This rule would out-specify that and add a stray 6px to the wrong side of it. */ [dir="rtl"] .header .header-social-links a:not(.wc-lang) { padding-left: 0; padding-right: 6px; } [dir="rtl"] .mobile-nav-toggle { margin-right: 0; margin-left: 10px; } [dir="rtl"] .navmenu a i, [dir="rtl"] .navmenu a:focus i { margin-left: 0; margin-right: 5px; } [dir="rtl"] .navmenu li:last-child a { padding-right: 15px; padding-left: 0; } /* ── hero ────────────────────────────────────────────────────────────────── The two blobs behind the hero image are decorative; mirroring them keeps the composition weighted the same way round as the English page. */ [dir="rtl"] .hero .hero-image .shape-1 { right: auto; left: -20px; } [dir="rtl"] .hero .hero-image .shape-2 { left: auto; right: -20px; } /* ── about ─────────────────────────────────────────────────────────────── */ [dir="rtl"] .about .about-content { padding-left: 0; padding-right: 2rem; } @media (max-width: 991px) { [dir="rtl"] .about .about-content { padding-right: 0; } } /* ── pricing ───────────────────────────────────────────────────────────── */ [dir="rtl"] .wc-limits i, [dir="rtl"] .wc-form-note i, [dir="rtl"] .wc-su-note i { margin-right: 0; margin-left: .3rem; } [dir="rtl"] .wc-addons-head span, [dir="rtl"] .wc-addon-price, [dir="rtl"] .wc-switch-opt span, [dir="rtl"] .wc-req, [dir="rtl"] .wc-opt { margin-left: 0; margin-right: .35rem; } [dir="rtl"] .wc-su-cycle { margin-left: 0; margin-right: auto; } /* The ribbon is centred by a translate, which is direction-agnostic — but the translate has to be re-stated or the theme's own value wins the cascade. */ [dir="rtl"] .wc-ribbon { left: auto; right: 50%; transform: translateX(50%); } /* ── the country picker ──────────────────────────────────────────────────── :dir(rtl), NOT [dir="rtl"] — and the difference matters here. The Get In Touch form carries dir="ltr" so it keeps its English layout in both languages, but it still sits inside . A descendant selector would therefore reach into it and mirror the picker's divider and popup while the form around them stayed left-to-right — the two halves fighting each other. :dir(rtl) matches on the element's OWN resolved direction, so these apply to the picker in the signup popup (which is right-to-left) and skip the one in the contact form (which is not). The grid columns reverse on their own; what does not is the divider between the trigger and the input, and the popup's anchor edge. */ .wc-phone select:dir(rtl), .wc-dial-trigger:dir(rtl) { border-right: none; border-left: 1.5px solid #eef1f5; text-align: right; } .wc-phone select:dir(rtl) option { text-align: right; } .wc-dial-pop:dir(rtl) { left: auto; right: 0; } .wc-phone:dir(rtl)::before { left: auto; right: 0; padding-right: 0; padding-left: .85rem; } /* Below the breakpoint the picker stacks and the divider becomes horizontal; the border must go back to the bottom in both directions. */ @media (max-width: 575px) { .wc-phone select:dir(rtl), .wc-dial-trigger:dir(rtl) { border-left: none; border-bottom: 1.5px solid #eef1f5; padding-left: 0; padding-right: .85rem; } .wc-phone:dir(rtl)::before { padding-left: 0; padding-right: .85rem; } } /* A phone number, a dialling code and a price are read left-to-right in every language. Left alone, the bidi algorithm drags the "+" of "+971" to the wrong end and reorders "AED 4,400". */ input[type="tel"]:dir(rtl), .wc-dial-code:dir(rtl), [dir="rtl"] .wc-amt, [dir="rtl"] .wc-total-figure, [dir="rtl"] .wc-addon-price { direction: ltr; text-align: right; unicode-bidi: isolate; } /* …but the currency word beside the figure belongs to the Arabic run. */ [dir="rtl"] .wc-cur { unicode-bidi: isolate; } /* ── the Get In Touch form: left-to-right in both languages, by request ──── The labels and buttons are still Arabic; only the field geometry, the country picker and the number entry keep their English arrangement. The heading and lead paragraph above the card are NOT part of the form and stay right-to-left with the rest of the section. */ [dir="rtl"] .wc-contact-card .wc-form { text-align: left; } [dir="rtl"] .wc-contact-card .wc-form label, [dir="rtl"] .wc-contact-card .wc-form input, [dir="rtl"] .wc-contact-card .wc-form textarea { text-align: left; } /* ── signup popup + footer ─────────────────────────────────────────────── */ .wc-sent-next:dir(rtl) { text-align: right; } [dir="rtl"] .wc-modal-x { right: auto; left: 13px; } [dir="rtl"] .wc-su-head::after { right: auto; left: -40px; } /* ── page furniture ────────────────────────────────────────────────────── */ [dir="rtl"] .scroll-top { right: auto; left: 15px; } /* NOTE: no .text-start / .text-end overrides. The page does not use those Bootstrap utilities, and a rule that matches nothing makes this file look like a guess when every other line in it was verified against the markup. */ /* ── the language switch itself ──────────────────────────────────────────── It uses margin-inline-end, so it needs nothing here. Listed so the next person does not go looking for it. */