/* ═══════════════════════════════════════════════════════════ RTL overrides for the Arabic version (loaded after styles.css on pages with ). Physical left/right properties from styles.css are re-expressed as logical ones here; photo-anchored elements (compare sliders, Before/After tags) intentionally stay physical. ═══════════════════════════════════════════════════════════ */ /* Arabic typography — Latin display serif doesn't carry Arabic */ [dir="rtl"] body { font-family: 'Tajawal', 'Segoe UI', system-ui, sans-serif; letter-spacing: 0; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: 'Cairo', 'Tajawal', sans-serif; font-weight: 600; letter-spacing: 0; line-height: 1.25; /* Arabic needs taller lines than Cormorant's 1.04 */ } [dir="rtl"] h1 { font-size: clamp(2.3rem, 1.4rem + 4vw, 4.6rem); } [dir="rtl"] h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem); } [dir="rtl"] .hero__lede, [dir="rtl"] .section__lede { line-height: 1.9; } [dir="rtl"] .eyebrow { letter-spacing: 0; } [dir="rtl"] .quote p { font-family: 'Tajawal', sans-serif; font-size: 1.15rem; line-height: 1.8; } [dir="rtl"] .stat__label, [dir="rtl"] .card__meta, [dir="rtl"] .brand__sub, [dir="rtl"] .details__block h3, [dir="rtl"] .casebook__title { letter-spacing: 0; } /* Keep the Latin script wordmark/signature working alongside Arabic */ [dir="rtl"] .brand__name, [dir="rtl"] .signature, [dir="rtl"] .hero__script { direction: ltr; } /* ── Header / nav ── */ [dir="rtl"] .nav { margin-left: 0; margin-inline-start: auto; } [dir="rtl"] .nav__cta { margin-left: 0; margin-inline-start: .8rem; } [dir="rtl"] .hamburger { margin-left: 0; margin-inline-start: auto; } [dir="rtl"] .topbar__item--right { margin-left: 0; margin-inline-start: auto; } /* Mobile drawer slides in from the left in RTL */ @media (max-width: 860px) { [dir="rtl"] .nav { inset: 0 auto 0 0; transform: translateX(-100%); box-shadow: 20px 0 60px -20px rgba(35,32,28,.3); } [dir="rtl"] .nav.is-open { transform: none; } } /* ── Credentials timeline ── */ [dir="rtl"] .creds { border-left: 0; border-inline-start: 1px solid var(--greige-200); } [dir="rtl"] .creds li { padding: 1rem 1.6rem 1rem 0; } [dir="rtl"] .creds li::before { left: auto; inset-inline-start: -3.5px; } /* ── Hero composition mirrors ── */ [dir="rtl"] .hero__inset { left: auto; inset-inline-start: -8%; } [dir="rtl"] .hero__script { right: auto; inset-inline-end: 1%; } /* ── About composition ── */ [dir="rtl"] .about__media { padding-right: 0; padding-inline-end: 2rem; } [dir="rtl"] .about__img--sub { right: auto; inset-inline-end: 0; } [dir="rtl"] .about__badge { left: auto; inset-inline-start: -10px; } /* ── Tables / details ── */ [dir="rtl"] .hours th { text-align: right; } [dir="rtl"] .hours td { text-align: left; } /* ── Footer ── */ [dir="rtl"] .footer__nav a:hover { transform: translateX(-3px); } /* ── FAB ── */ [dir="rtl"] .fab { right: auto; left: 1.1rem; } /* ── Ghost button arrow points the other way ── */ [dir="rtl"] .btn--ghost .ico { transform: scaleX(-1); } [dir="rtl"] .btn--ghost:hover .ico { transform: scaleX(-1) translateX(4px); } @media (max-width: 620px) { [dir="rtl"] .about__media { padding-inline-end: 0; } [dir="rtl"] .about__img--sub { inset-inline-end: -4px; } [dir="rtl"] .about__badge { inset-inline-start: 0; } }