/* Peakspan — Arabic / RTL layer. Loaded only by the /ar/ pages, after base.css + the page's own stylesheet. House rules this file enforces: · a real Arabic typeface (IBM Plex Arabic), never a Latin face faking it · Arabic body copy set 12% larger than the Latin, which the master spec puts at 10–15% · letter-spacing forced to 0 on Arabic — tracking breaks Arabic joining · Western Arabic numerals (0–9) stay as authored; nothing here substitutes ٠١٢ · direction handled by dir="rtl" on ; this file only fixes what direction alone cannot */ @font-face{font-family:'IBM Plex Arabic';src:url('../fonts/plex-arabic-400.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'IBM Plex Arabic';src:url('../fonts/plex-arabic-600.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'IBM Plex Arabic';src:url('../fonts/plex-arabic-700.woff2') format('woff2');font-weight:700;font-display:swap} :root{--ar-scale:1.12} [lang="ar"] body, body[lang="ar"], [dir="rtl"] body{ font-family:'IBM Plex Arabic',Inter,system-ui,sans-serif; font-size:calc(1rem * var(--ar-scale)); letter-spacing:0; } /* Every heading and UI string: Arabic face, no tracking. The Latin designs lean on negative tracking, which is actively wrong for Arabic. */ [dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4, [dir="rtl"] .eyebrow,[dir="rtl"] .hero-serif,[dir="rtl"] .gate-line,[dir="rtl"] .gate-wordmark, [dir="rtl"] .button,[dir="rtl"] .site-nav a,[dir="rtl"] .product-card__body h3, [dir="rtl"] .range-table th,[dir="rtl"] .spec-list dt,[dir="rtl"] .series-copy p, [dir="rtl"] .buy-specs b,[dir="rtl"] .price-block strong,[dir="rtl"] .announcement span{ font-family:'IBM Plex Arabic',Sora,sans-serif; letter-spacing:0; } [dir="rtl"] .hero-serif,[dir="rtl"] .gate-line em,[dir="rtl"] .series-copy p{font-style:normal} /* Latin fragments inside Arabic text — model numbers, AED, nm, mm, kg — must stay left-to-right and keep the Latin face. */ [dir="rtl"] .ltr, [dir="rtl"] .range-table td:first-child, [dir="rtl"] code,[dir="rtl"] .model{ direction:ltr;unicode-bidi:isolate; font-family:Inter,system-ui,sans-serif; font-size:calc(1em / var(--ar-scale)); letter-spacing:0; } /* Numeric cells: Western numerals, tabular, isolated so RTL cannot reorder them */ [dir="rtl"] .range-table td,[dir="rtl"] .spec-list dd{ direction:ltr;unicode-bidi:isolate;text-align:right; font-variant-numeric:tabular-nums; } [dir="rtl"] .range-table th{text-align:right} /* Mirrored affordances */ [dir="rtl"] .detail-breadcrumb,[dir="rtl"] .back-to-shop{direction:rtl} [dir="rtl"] .back-to-shop::before{content:"→"} [dir="rtl"] .gate-choice__go{transform:scaleX(-1)} [dir="rtl"] .series-copy{border-left:0;border-right:2px solid #ff493d;border-radius:14px 0 0 14px} [dir="rtl"] .product-rail i{transform:scaleX(-1);display:inline-block} [dir="rtl"] .spec-note{margin-inline-start:7px} /* Language switch — base styles live in base.css; RTL tweak below */ [dir="rtl"] .lang-switch{font-family:'IBM Plex Arabic',Inter,sans-serif;letter-spacing:0} /* View transitions: on RTL the incoming page should arrive from the right */ @media (prefers-reduced-motion:no-preference){ [dir="rtl"]::view-transition-old(root){animation-name:vtOutRtl} [dir="rtl"]::view-transition-new(root){animation-name:vtInRtl} } @media (max-width:640px){ :root{--ar-scale:1.10} }