/*! * AimsCraft — Arabic (right-to-left) layer * File: assets/css/rtl.css * Developer: Shahid Malla * Company: ElySpace — owner of this source code * Copyright: © ElySpace. All rights reserved. */ /* ============================================================================= Loaded only on /ar pages (modules/i18n adds the with ), after the five shop stylesheets. The layout is mostly logical properties already (inline-start/end), so this file only fixes what is physical: drawers and sliders that move with translateX, the marquee, switches, tooltips, hover nudges, and the arrows and chevrons that point the way through the page. Logos and product photographs are never mirrored. Type: Arabic glyphs come from IBM Plex Sans Arabic (text), Noto Naskh Arabic (headings), Amiri italic (the Modest design's italic accents) and Aref Ruqaa (its script word). Each stack keeps the Latin face first, so the brand, sizes and prices still set in the design's own fonts; Arabic falls through to the Arabic face. Letter-spacing is always 0 — tracking breaks the joins between Arabic letters. Prices keep ₹ and Western digits. ========================================================================== */ html[dir="rtl"] { --font-sans: "Plus Jakarta Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; --font-display: "Instrument Serif", "Noto Naskh Arabic", "Amiri", Georgia, serif; --ar-italic: "Amiri", "Noto Naskh Arabic", serif; } html[dir="rtl"] body { font-family: var(--font-sans); } html[dir="rtl"] [data-page="home-modest"] { --mo-display: "Bodoni Moda", "Noto Naskh Arabic", "Amiri", Georgia, serif; --mo-italic: "Playfair Display", "Amiri", "Noto Naskh Arabic", serif; --mo-script: "Ballet", "Aref Ruqaa", "Amiri", cursive; --mo-sans: "Montserrat", "IBM Plex Sans Arabic", var(--font-sans); } /* Arabic letters join: no tracking anywhere */ html[dir="rtl"] *, html[dir="rtl"] *::before, html[dir="rtl"] *::after { letter-spacing: 0 !important; } /* taller ascenders and dots: headings need more line-height than a Latin serif */ html[dir="rtl"] :is(h1, h2, h3, h4, h5, h6) { line-height: 1.35; } html[dir="rtl"] :is(p, li, dd, .lede) { line-height: 1.8; } /* italic in Arabic is a real slanted face, not a faux oblique */ html[dir="rtl"] :is(h1, h2, h3, h4) em, html[dir="rtl"] :is(h1, h2, h3, h4) i { font-family: var(--ar-italic); font-style: italic; } html[dir="rtl"] :is(em, i, cite):not(:is(h1, h2, h3, h4) *) { font-style: normal; font-weight: 600; } /* numbers, codes, e-mail and phone numbers stay left-to-right inside Arabic text */ html[dir="rtl"] a[href^="tel:"], html[dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: isolate; } html[dir="rtl"] :is(input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[inputmode="numeric"], input[inputmode="tel"], input[inputmode="email"], input[autocomplete="one-time-code"], input[name="pincode"], input[name="pin"], input[name*="card"], input[name="cvv"], input[name="expiry"]) { direction: ltr; text-align: right; } html[dir="rtl"] :is(input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[inputmode="numeric"], input[inputmode="tel"])::placeholder { direction: rtl; } html[dir="rtl"] :is([data-otp], .otp, .otp-inputs, .otp__boxes, [data-otp-inputs]) { direction: ltr; } html[dir="rtl"] :is(code, kbd, samp, .sku, [data-sku]) { direction: ltr; unicode-bidi: isolate; } /* arrows and chevrons point the way through the page: mirrored. (scale, not transform, so hover nudges and rotations still compose.) */ html[dir="rtl"] svg:is(:has(> use[href="#i-arrow-right"]), :has(> use[href="#i-arrow-left"]), :has(> use[href="#i-chevron-right"]), :has(> use[href="#i-chevron-left"]), :has(> use[href="#i-arrow-up-right"]), :has(> use[href="#i-log-in"]), :has(> use[href="#i-log-out"]), :has(> use[href="#i-send"]), :has(> use[href="#i-truck"]), :has(> use[href="#i-corner-down-left"]), :has(> use[href="#i-undo"]), :has(> use[href="#i-redo"])) { scale: -1 1; } html[dir="rtl"] :is(.nav-mega__all, .nav-mega__trigger + * .nav-mega__all) svg { scale: -1 1; } /* hover nudges go the reading way */ html[dir="rtl"] :is(.footer-join__submit, .section-head__link, .mega__promo-cta, .nav-mega__all):hover .icon, html[dir="rtl"] .nav-mega__all:hover svg { translate: -6px 0; } html[dir="rtl"] .mega__cat-arrow { transform: translateX(4px); } /* the skip link */ html[dir="rtl"] .skip-link { left: auto; right: var(--sp-2); } /* switches: the thumb travels to the left when on */ html[dir="rtl"] .switch__input:checked + .switch__track .switch__thumb { transform: translateX(-19px); } html[dir="rtl"] .switch--sm .switch__input:checked + .switch__track .switch__thumb { transform: translateX(-15px); } /* off-canvas panels: they sit on the logical side already, so they hide towards it */ html[dir="rtl"] .mobile-nav__panel { transform: translateX(100%); } html[dir="rtl"] .mobile-nav--end .mobile-nav__panel { transform: translateX(-100%); } html[dir="rtl"] .mobile-nav.is-open .mobile-nav__panel { transform: none; } html[dir="rtl"] .drawer--right .drawer__panel { transform: translateX(-100%); } html[dir="rtl"] .drawer--left .drawer__panel { transform: translateX(100%); } html[dir="rtl"] .drawer.is-open .drawer__panel, html[dir="rtl"] .drawer[open] .drawer__panel { transform: none; } /* the marquee scrolls the reading way */ @keyframes ss-marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } } html[dir="rtl"] .marquee__track { animation-name: ss-marquee-rtl; } /* tooltips centred with inset-inline-start: 50% sit on the right half in RTL */ html[dir="rtl"] :is(.tooltip--top, .tooltip--bottom)::after { transform: translateX(50%) translateY(4px); } html[dir="rtl"] :is(.tooltip--top, .tooltip--bottom):is(:hover, :focus-visible)::after { transform: translateX(50%) translateY(0); } /* counters and fractions ("01 / 04", "2 of 5") read left to right */ html[dir="rtl"] :is(.hmo-count, [data-hmo-count], .slider__count, .carousel__count, .gallery__count) { direction: ltr; unicode-bidi: isolate; } /* a price the scripts write next to Arabic words stays "₹1,790", never "1,790₹" */ html[dir="rtl"] [data-money] { direction: ltr; unicode-bidi: isolate; }