/* * e-Sehha — Right-to-left (Arabic) overrides. * Loaded only when the site language is Arabic. main.css loads first; * handles most mirroring automatically — this file tunes * typography, arrow direction and the handful of physical-direction styles. */ /* Arabic typography — redefine the font tokens used across the theme */ :root { --font: "Tajawal", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --head: "Cairo", "Tajawal", "Poppins", sans-serif; } body { text-align: right; } /* the decorative logo marquees scroll horizontally — keep them LTR so they clip identically to the English layout (avoids leftward overflow in RTL) */ .marquee, .marquee__track { direction: ltr; } /* belt-and-braces: clip any leftward overflow at the content wrapper. `clip` (not `hidden`) doesn't create a scroll container, so the sticky header — which lives outside .site-content — is unaffected. */ .site-content { overflow-x: clip; } /* Arabic reads better without Latin letter-spacing / uppercasing */ h1, h2, h3, h4, h5, .section__title, .hero__title, .kicker, .eyebrow, .btn, .nav-menu a, .footer-title, .vision__badge small { letter-spacing: normal; } .kicker { text-transform: none; } /* page heroes are left-aligned in LTR — flip to right */ .page-hero--grad, .page-hero { text-align: right; } /* flip directional arrows (forward = left in RTL) */ .btn .icon, .card__link .icon, .topbar__cta a .icon, .read-more::after { transform: scaleX(-1); } .btn:hover .icon { transform: scaleX(-1) translateX(3px); } .card__link:hover .icon { transform: scaleX(-1) translateX(4px); } /* back-to-top arrow stays pointing up */ .back-to-top .icon, .back-to-top:hover .icon { transform: rotate(-90deg); } /* footer hover nudge should move toward the inline-start (right) */ .footer-list a:hover { padding-left: 0; padding-right: 4px; } /* skip link rounds on the opposite corner */ .skip-link { border-radius: 0 0 0 10px; } /* mobile menu slides in from the left in RTL */ @media (max-width: 768px) { .main-navigation .nav-menu { inset: 0 auto 0 0; transform: translateX(-100%); box-shadow: var(--shadow-lg); } .main-navigation.is-open .nav-menu { transform: translateX(0); } .nav-menu .sub-menu { padding-left: 0; padding-right: 1rem; } }