/* ========================================================================== Public-site RTL overrides. Loaded ONLY when the fe_lang cookie selects Arabic (the layout emits ), so the English experience is completely untouched. Setting direction on the document flips flex/inline flow for free; the rules below right-align text and mirror the handful of components that pin a side. ========================================================================== */ /* Re-point the design system's font tokens at Cairo for Arabic. Every component in main.css draws its face from one of these four variables, so overriding them here fixes the whole site in one place — including the components that set `font-family: var(--f-display) !important`, which no per-selector rule could beat. Space Grotesk / Inter / Playfair carry no Arabic glyphs, so leaving them in place only produced a mid-run fallback to whatever the OS picked, with a visible size and weight jump. */ html[dir="rtl"] { --f-body: "Cairo", system-ui, sans-serif; --f-display: "Cairo", system-ui, sans-serif; --f-head: "Cairo", system-ui, sans-serif; --f-serif: "Cairo", system-ui, sans-serif; } html[dir="rtl"] body { direction: rtl; text-align: right; font-family: "Cairo", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] .display, html[dir="rtl"] .section-title, html[dir="rtl"] .hero-title { font-family: "Cairo", "Playfair Display", serif; letter-spacing: 0; } /* Display type is tracked NEGATIVELY in the English design (-0.01 to -0.02em on headlines, emphasis runs and card titles) to tighten Latin. Arabic is cursive, so squeezing it jams the letter-joins just as badly as spreading them. These are the elements still carrying tracking after the heading reset above — measured on the live /ar pages, not guessed. Left alone on purpose: the SVG certification marks (UL LISTED / FM APPROVED) and the S.P.S seal, which stay English and need their spacing. */ html[dir="rtl"] h6, html[dir="rtl"] strong, html[dir="rtl"] b, html[dir="rtl"] .title, html[dir="rtl"] .v8-thin, html[dir="rtl"] .faq-question, html[dir="rtl"] .single-products .content-body .title { letter-spacing: 0; } /* Header / navigation mirror. NOTE: under direction:rtl a plain `row` flex already lays out right-to-left, so `row-reverse` here RESTORES the English left-to-right arrangement (logo on the left, actions on the right). The action cluster needs the same treatment, otherwise it alone stays mirrored and the hamburger ends up inboard of the CTA / language switch instead of at the far right edge. */ html[dir="rtl"] .navbar { flex-direction: row-reverse; } html[dir="rtl"] .nav-desktop { flex-direction: row-reverse; } html[dir="rtl"] .nav-actions { flex-direction: row-reverse; } html[dir="rtl"] .nav-overlay-links, html[dir="rtl"] .nav-overlay-sub-links { text-align: right; } /* Language dropdown. It pins 'Space Grotesk' via main.css rather than the token, so the Arabic "العربية" menu item is the one string the token override above cannot reach — give the whole widget Cairo here. The menu panel keeps its PHYSICAL right:0 anchor on purpose: the header bar is deliberately un-mirrored (see the .nav-actions note above), so the trigger stays on the physical right and the panel must hang from the same edge. */ html[dir="rtl"] .lang-dd-btn, html[dir="rtl"] .lang-dd-item { font-family: "Cairo", system-ui, sans-serif; } /* Raise the Arabic glyphs to the same floor as the rest of the nav. */ html[dir="rtl"] .lang-dd-btn { font-size: 14px !important; } html[dir="rtl"] .lang-dd-item { font-size: 14px !important; text-align: right; } /* Generic content flow. The blanket `ul, ol { padding-right: 1.2rem; padding-left: 0 }` that used to live here is GONE: it existed only to undo main.css's physical padding-left on lists. Those are logical properties now (padding-inline-start), which already resolve to the right edge under dir=rtl. Keeping the override would have out-specified every component list and added a stray 1.2rem indent — including on the legal pages and product prose, whose custom bullets are positioned with inset-inline-start. */ html[dir="rtl"] .container, html[dir="rtl"] .row { direction: rtl; } /* Footer columns flow right-to-left */ html[dir="rtl"] .footer .row, html[dir="rtl"] .footer-cols { flex-direction: row-reverse; } /* ========================================================================== ARABIC TYPOGRAPHY FLOOR — site-wide. The English design leans on tiny (9–13px), heavily letter-spaced, UPPERCASE Latin micro-type for eyebrows, badges, section labels, buttons and form labels. Three things break when that same CSS renders Arabic: 1. Size — Arabic needs roughly 2px more than Latin at the same optical weight, so 10px Latin reads as ~8px Arabic. Sub-11px is unreadable. 2. letter-spacing — Arabic is cursive. Tracking prises the letter-joins apart, so the word visually shatters AND looks even smaller. 3. text-transform: uppercase — a no-op for Arabic, but it usually travels with a Latin display face that has no Arabic glyphs, so the browser falls back mid-run and the size/weight jumps. Everything below is therefore expressed as three tiers rather than per-component tweaks: labels, interactive/body text, and fine print. Add new selectors to the tier that matches their ROLE, not their pixel size. Deliberately NOT bumped (Latin/numeric runs where the English metrics are correct and enlarging would break a fixed-size container): .pd__ref, .qpage__row-id — SKU / row identifiers .pd__gallery-index — "3 / 8" counter .qcart-fab__badge — count bubble inside a fixed circle .qcart-stepper__val — quantity digits in a fixed stepper .v8-svc-svg text — labels baked into an SVG viewBox ::before markers — bullets and TOC numbering ========================================================================== */ /* --- Tier 1: micro labels — eyebrows, section labels, badges, breadcrumbs, step numbers. Bold so they still read as labels at a larger size. ----- */ html[dir="rtl"] .section-label, html[dir="rtl"] .section-title .label, html[dir="rtl"] .section-title > span, html[dir="rtl"] .nav-overlay-sub-label, html[dir="rtl"] .footer-col-title, html[dir="rtl"] .f-link h3, html[dir="rtl"] .services-hero-badge, html[dir="rtl"] .service-page-badge, html[dir="rtl"] .shc-badge, html[dir="rtl"] .type-recommended, html[dir="rtl"] .system-badge, html[dir="rtl"] .breadcrumb-list, html[dir="rtl"] .breadcrumb-list li, html[dir="rtl"] .breadcrumb-nav li, html[dir="rtl"] .products-toolbar-eyebrow, html[dir="rtl"] .pd__eyebrow, html[dir="rtl"] .pd__sec-eyebrow, html[dir="rtl"] .pd__head-tag, html[dir="rtl"] .out-of-stock-badge, html[dir="rtl"] .pd__oos-badge, html[dir="rtl"] .v8-eyebrow, html[dir="rtl"] .v8-hero__loc, html[dir="rtl"] .v8-hero__scrollcue, html[dir="rtl"] .v8-proj__cat, html[dir="rtl"] .v8-stat__l, html[dir="rtl"] .v8-svc__num, html[dir="rtl"] .v8-bp__step-n, html[dir="rtl"] .v8-legal__updated, html[dir="rtl"] .v8-legal__toc h2 { font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1.7; } /* The homepage blueprint's lit caption steps forward by 6px. `transform` takes physical pixels, not logical ones, so the same +6px that reads as "forward" in English reads as "backward" in Arabic — and it pushed the row's number column out past the right edge of the parked illustration, where the second digit of 01–05 showed through the drawing on a phone. Mirror the nudge. */ html[dir="rtl"] .v8-bp__step { --bp-nudge: -6px; } /* The scroll cue sits in a tight hero corner — one notch down from the tier. */ html[dir="rtl"] .v8-hero__scrollcue { font-size: 13px; font-weight: 600; } html[dir="rtl"] .v8-hero__loc { font-weight: 500; } /* --- Tier 2: interactive + body text — nav, buttons, links, form labels, chips, list items. Keep each component's own weight. ------------------ */ html[dir="rtl"] .nav-desktop-link, html[dir="rtl"] .nav-cta, html[dir="rtl"] .nav-overlay-contact a, html[dir="rtl"] .nav-overlay-legal a, html[dir="rtl"] .btn-sps, html[dir="rtl"] .btn-sps-outline, html[dir="rtl"] .btn-white-outline, html[dir="rtl"] .btn-whatsapp-outline, html[dir="rtl"] .btn-cta-submit, html[dir="rtl"] .button .btn, html[dir="rtl"] .btn.btn-primary, html[dir="rtl"] a.btn.btn-primary, html[dir="rtl"] .whatsapp-cta, html[dir="rtl"] .v8-btn, html[dir="rtl"] .v8-btn--ghost, html[dir="rtl"] .v8-textlink, html[dir="rtl"] .v8-svc__tags, html[dir="rtl"] .v8-legal__toc a, html[dir="rtl"] .footer-brand p, html[dir="rtl"] .f-about p, html[dir="rtl"] .footer-links li a, html[dir="rtl"] .f-link ul li a, html[dir="rtl"] .form-group label, html[dir="rtl"] .contact-form-wrap .control-label, html[dir="rtl"] .qpage__field label, html[dir="rtl"] .sf-item, html[dir="rtl"] .application-chip, html[dir="rtl"] .amc-list li, html[dir="rtl"] .pagination-list li a, html[dir="rtl"] .pd__link, html[dir="rtl"] .pd__buy-quote, html[dir="rtl"] .pd__buy-wa, html[dir="rtl"] .add-to-quote-btn, html[dir="rtl"] .pf-chip, html[dir="rtl"] .pf-clearall, html[dir="rtl"] .pf-count, html[dir="rtl"] .latest-products-area .nav-tabs .nav-link, html[dir="rtl"] .latest-products-area .dropdown-item, html[dir="rtl"] .latest-products-area .input-group .form-control, html[dir="rtl"] .qcart-drawer__sum, html[dir="rtl"] .qcart-toast__link { font-size: 15px; letter-spacing: 0; text-transform: none; } /* --- Tier 3: fine print — copyright, legal links, consent, result counts. --- */ html[dir="rtl"] .footer-copy, html[dir="rtl"] .footer-bottom p, html[dir="rtl"] .footer-legal-links a, html[dir="rtl"] .form-consent, html[dir="rtl"] .qpage .form-consent, html[dir="rtl"] .pf-filter-count, html[dir="rtl"] .qcart-drawer__clear, html[dir="rtl"] .qpage__clear { font-size: 14px; letter-spacing: 0; text-transform: none; line-height: 1.8; } /* --- Stubborn cases. main.css sets these with !important (or with a longer :not() chain), so the tier rules above lose. Matched here at equal or greater weight; keep in sync with the tier the component belongs to. --- */ html[dir="rtl"] .section-title span:not(.stat-number):not(.dot):not(.toggler-icon):not(.ham-line) { font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; } html[dir="rtl"] .btn-whatsapp-outline, html[dir="rtl"] .whatsapp-cta, html[dir="rtl"] .latest-products-area .input-group .form-control { font-size: 15px !important; letter-spacing: 0 !important; text-transform: none !important; } /* ========================================================================== COMPONENT MIRRORING. direction:rtl flips inline and flex flow for free, but it cannot move a physical `padding-left`, `border-left`, `text-align: left`, or an absolutely positioned marker. These are every live component that pins a side. ========================================================================== */ /* FAQ accordion — the +/− marker is absolutely pinned to the right edge and the question reserves its padding on that same side. Unflipped, the marker lands on top of the first Arabic word. main.css sets the padding with !important. */ html[dir="rtl"] .faq-question { text-align: right; padding: 24px 0 24px 36px !important; } html[dir="rtl"] .faq-question::after { right: auto; left: 4px; } @media (max-width: 600px) { html[dir="rtl"] .faq-question { padding: 20px 0 20px 30px !important; } } /* Mobile menu sub-list — the indent rail sits on the left. Note the entrance offset must be re-zeroed on .open too: our html[dir] prefix outweighs main.css's `.nav-overlay.open .nav-overlay-sub`, which would otherwise leave the panel permanently nudged off-position. */ html[dir="rtl"] .nav-overlay-sub { border-left: 0; border-right: 1px solid var(--c-border); padding-left: 0; padding-right: 40px; transform: translateX(-20px); } html[dir="rtl"] .nav-overlay.open .nav-overlay-sub { transform: translateX(0); } /* Product description prose — tables and list indents */ html[dir="rtl"] .pd__prose th, html[dir="rtl"] .pd__prose td { text-align: right; } html[dir="rtl"] .pd__prose ul, html[dir="rtl"] .pd__prose ol { padding-left: 0; padding-right: 1.4em; } html[dir="rtl"] .pd__prose li { padding-left: 0; padding-right: 4px; } /* Product lead paragraph — the accent bar is an absolute ::before at left:0 */ html[dir="rtl"] .pd__info .pd__lead { padding-left: 0; padding-right: 18px; } html[dir="rtl"] .pd__info .pd__lead::before { left: auto; right: 0; } /* Legal pages + maintenance checklists — custom bullets, absolutely placed. padding-*: 0 also cancels the generic ul/ol indent set near the top of this file, which these lists (list-style: none) must not receive. */ html[dir="rtl"] .v8-legal__body ul { padding-right: 0; } html[dir="rtl"] .v8-legal__body ul li { padding-left: 0; padding-right: 22px; } html[dir="rtl"] .v8-legal__body ul li::before { left: auto; right: 2px; } html[dir="rtl"] .amc-list { padding-right: 0; } html[dir="rtl"] .amc-list li { padding-left: 0; padding-right: 20px; } html[dir="rtl"] .amc-list li::before { left: auto; right: 0; } /* Homepage FM-200 schematic — the annotation labels are localized (see FeText "Diagram.*"), so they now carry Arabic and must lose the tracking that breaks the letter-joins. Scoped to .hs-label on purpose: the UL / FM certification marks in the same SVG stay English and keep their spacing. Sizes are left alone — they are user units inside a fixed viewBox. */ html[dir="rtl"] .v8-svc-svg .hs-label { letter-spacing: 0; text-transform: none; } /* Product-filter dropdown rows and the nested facet options */ html[dir="rtl"] .pf-dd-item, html[dir="rtl"] .pf-opt { text-align: right; } html[dir="rtl"] .pf-opt--sub { padding-left: 14px; padding-right: 26px; } /* Directional arrow / chevron icons are drawn pointing the LTR way (rightward, or diagonally up-right). Rotate them 180° so they read correctly in Arabic. The button icon also has a hover nudge, so re-apply the rotation there. */ html[dir="rtl"] .v8-btn svg, html[dir="rtl"] .v8-textlink svg, html[dir="rtl"] .v8-svc__arrow svg, html[dir="rtl"] .sps-svc-arrow svg, html[dir="rtl"] .product-card-details svg { transform: rotate(180deg); } html[dir="rtl"] .v8-btn:hover svg { transform: rotate(180deg) translateX(4px); } /* The services-list arrow nudges toward the reading direction on hover, so in Arabic it must travel LEFT, not right (the row itself already mirrors). */ html[dir="rtl"] .sps-svc-item:hover .sps-svc-arrow { transform: translateX(-6px); } html[dir="rtl"] .v8-svc:hover .v8-svc__arrow svg { transform: rotate(180deg) translate(3px, 3px); } /* Gallery prev/next are pinned with physical left/right + !important in main.css. Under RTL the carousel advances leftward, so the buttons swap sides. */ html[dir="rtl"] .pd .product-details-swiper .swiper-button-next { right: auto !important; left: 14px !important; } html[dir="rtl"] .pd .product-details-swiper .swiper-button-prev { left: auto !important; right: 14px !important; } /* Phone number and email must read left-to-right even inside Arabic RTL, otherwise the digit/character order is mirrored. Keep the contact links LTR (icon then value, in reading order). */ html[dir="rtl"] .v8-cta__contact { direction: ltr; unicode-bidi: isolate; } /* Hero subtitle. This used to shrink Arabic to 13px against English's 15px to keep it on the same number of lines — backwards, since Arabic needs MORE size than Latin, not less. Matched to English and given a line-height that clears the taller Arabic marks; it may now take an extra line, which is the right trade for legibility. */ html[dir="rtl"] .v8-hero__sub { font-size: 15px; line-height: 1.6; } /* Hero title: the English design packs the lines at line-height 0.98, which is too tight for Arabic (its taller letters/marks overlap). Give it breathing room between lines. */ html[dir="rtl"] .v8-hero__headline { line-height: 1.35; } /* The English headline uses a steeper vw ramp (up to 128px) to fill the full-height hero. Arabic can't take it: at line-height 1.35 that pushes the hero past one viewport on a 1440x900 screen. Hold Arabic to the previous ramp above 1366px; at or below 1366px the shared short-desktop rule (5vw / 82px) still applies and is left alone. */ @media (min-width: 1367px) { html[dir="rtl"] .v8-hero__headline { font-size: clamp(40px, 7vw, 112px); } } /* Hero headline second line (.v8-thin): the English design sets this at 0.42em with a system-ui font, which leaves the Arabic sub-headline tiny and spindly. Give Arabic a legible size and the Cairo face. */ html[dir="rtl"] .v8-hero__headline .v8-thin { font-family: "Cairo", system-ui, sans-serif; font-size: 0.5em; font-weight: 400; line-height: 1.5; max-width: 40ch; } /* Keep numbers, phone, code and Latin brand marks LTR inside RTL text */ html[dir="rtl"] .ltr, html[dir="rtl"] [dir="ltr"], html[dir="rtl"] .navbar-brand, html[dir="rtl"] time, html[dir="rtl"] .phone { direction: ltr; unicode-bidi: embed; } /* ========================================================================== QUOTE CART — mirror the FAB and its slide-over to the left ========================================================================== main.css pins all of it with PHYSICAL right/left offsets (the button, its count bubble, the panel, the panel's shadow and the row-remove slide), so in Arabic the cart stayed clamped to the right edge and the drawer still flew in from the right — against the reading direction, and over the side the eye lands on last. Mirror every physical value; the drawer's inner layout already flows from dir="rtl" and needs nothing. */ html[dir="rtl"] .qcart-fab { right: auto; left: 22px; } html[dir="rtl"] .qcart-fab__badge { right: auto; left: -4px; } @media (max-width: 600px) { html[dir="rtl"] .qcart-fab { right: auto; left: 16px; } } html[dir="rtl"] .qcart-drawer__panel { right: auto; left: 0; transform: translateX(-100%); box-shadow: 20px 0 50px rgba(14, 42, 71, 0.18); } html[dir="rtl"] .qcart-drawer.is-open .qcart-drawer__panel { transform: translateX(0); } /* the row slides out toward the panel's own edge */ html[dir="rtl"] .qcart-row.is-leaving { transform: translateX(-12px); } /* "Proceed to quote" carries a forward chevron; forward is leftward in Arabic (same treatment as the 404 page's back button below). */ html[dir="rtl"] .qcart-btn--primary svg { transform: scaleX(-1); } /* Error page (404/500/etc.): the English design hard-codes left alignment on the copy block, the eyebrow label and the action row. Flip them all to the right for Arabic, and mirror the "Back to Home" chevron so it points the RTL way. */ html[dir="rtl"] .pnf-inner { text-align: right; } html[dir="rtl"] .pnf-section .section-label, html[dir="rtl"] .pnf-section .section-label-light { justify-content: flex-end; } html[dir="rtl"] .pnf-desc { margin-left: auto; margin-right: 0; } html[dir="rtl"] .pnf-actions { justify-content: flex-start; } html[dir="rtl"] .pnf-actions .btn-sps svg { transform: scaleX(-1); } /* --- Hero film (Arabic) --------------------------------------------------- The light rakes in from the reading-start edge, so it flips with the page. Safe to mirror: nothing in frame is readable, so there is no text to reverse. The flip goes on the