/* ========================================================================== EYEDIA — Arabic / RTL The component layer already uses CSS logical properties (inset-inline-*, margin-inline-*, padding-inline-*), so direction mostly handles itself. This file covers the Arabic type stack and the handful of places where a physical value or a Latin-specific rhythm needs correcting. Note: the "is-rtl" class sits on itself, so selectors are written "body.is-rtl" / ".is-rtl" — never ".is-rtl body", which would match nothing. ========================================================================== */ body.is-rtl { --font-body: "Cairo", "Segoe UI", Tahoma, sans-serif; --font-head: "Cairo", "Segoe UI", Tahoma, sans-serif; /* Arabic sits lower in the em box and needs a touch more leading. */ line-height: 1.75; } body.is-rtl, .is-rtl h1, .is-rtl h2, .is-rtl h3, .is-rtl h4, .is-rtl .btn, .is-rtl .nav-links { font-family: var(--font-body); } .is-rtl .hero-title { line-height: 1.25; } .is-rtl .section-title, .is-rtl .card-title, .is-rtl .story-title { line-height: 1.4; } /* Tracking is a Latin device. Positive tracking breaks Arabic letter joining; negative tracking crowds the glyphs and can overlap joined forms. */ .is-rtl .hero-sub, .is-rtl .section-sub, .is-rtl .hero__scroll, .is-rtl .marquee__item, .is-rtl .product-card__badge, .is-rtl .hero-title, .is-rtl .section-title, .is-rtl .shop-hero h1 { letter-spacing: 0; } /* Uppercasing does nothing in Arabic but does distort the rhythm. */ .is-rtl .hero-sub, .is-rtl .section-sub { text-transform: none; } /* The language toggle shows English on the Arabic side. */ .is-rtl .lang-switch { font-family: "Space Grotesk", var(--font-body); } /* Numerals, prices and timecodes stay Latin and left-to-right. */ .is-rtl .nav-links__num, .is-rtl .product-card__price, .is-rtl .modal-price, .is-rtl .cart-total, .is-rtl .cart-item__price, .is-rtl .summary-row span:last-child, .is-rtl .error-code { direction: ltr; unicode-bidi: isolate; font-family: "Space Grotesk", var(--font-body); } /* Underline wipe should start from the right. */ .is-rtl .nav-links__text::after { --underline-origin: right; } /* Font Awesome arrows are directional glyphs, so mirror them. */ .is-rtl .btn .fa-arrow-right, .is-rtl .back-to-site .fa-arrow-left { transform: scaleX(-1); } .is-rtl .btn:hover .fa-arrow-right { transform: scaleX(-1) translateX(4px); } /* Marquee runs the other way so it reads with the text. */ .is-rtl .marquee__track { animation-direction: reverse; } /* * The mobile drawer needs NO direction overrides. theme.css already positions * it with inset-inline-start / border-inline-end and parks it off-canvas with * a direction-aware translate, so RTL mirrors it correctly on its own. * An earlier override here re-applied physical offsets and double-flipped the * panel, leaving a slice of it visible against the right edge. */