/* ========================================================================== 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 switch stays visually first-in-reading-order. Both switchers pin 'Space Grotesk' literally (inline in the header component, and in main.css for the mobile overlay) rather than via a token, so the Arabic "عربي" label there is the one string on the site the token override above cannot reach. */ html[dir="rtl"] .lang-switch { flex-direction: row-reverse; } html[dir="rtl"] .lang-switch, html[dir="rtl"] .lang-switch a, html[dir="rtl"] .nav-overlay-lang, html[dir="rtl"] .nav-overlay-lang a { font-family: "Cairo", system-ui, sans-serif; } /* The header switch also pins font-size:13px INLINE, so only !important can raise the Arabic "عربي" to the same floor as the rest of the nav. */ html[dir="rtl"] .lang-switch, html[dir="rtl"] .lang-switch a { font-size: 14px !important; } /* 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 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; } /* 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); } /* --- iOS focus-zoom guard (Arabic) --------------------------------------- main.css forces every field to 16px on touch devices, because iOS Safari zooms the page on focus for anything smaller. This sheet loads AFTER it and the Arabic type tiers above set 15px !important on form fields, which would win and bring the zoom back. Re-assert 16px for touch at RTL specificity. Must stay last in this file so it beats the tier rules above. */ @media (max-width: 767.98px), (pointer: coarse) { html[dir="rtl"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[dir="rtl"] select, html[dir="rtl"] textarea, html[dir="rtl"] .txtbox, html[dir="rtl"] .txtarea, html[dir="rtl"] .form-control, html[dir="rtl"] .form-select, html[dir="rtl"] .pf-search-input, html[dir="rtl"] .latest-products-area .input-group .form-control { font-size: 16px !important; } }