/* ========================================================================== rtl.css — right-to-left overrides for RTL locales (ar, he, fa, ur) -------------------------------------------------------------------------- Scoped entirely under [dir="rtl"] (the attribute set by helper.js render() / generate.js from config/locales.js `dir`). Loaded LAST in every style chain so it wins the cascade, same pattern as tools-hp.css. For LTR locales the selector never matches, so this file is inert. Covers the homepage + chrome + pricing surfaces that RTL locales serve first (nav, mobile drawer, footer, cookie banner, language modal, hero, pricing). The modern hp-* homepage and the flex/grid nav are largely direction-agnostic already; this sheet flips the residual physical-property rules those systems still carry, plus the older cookie-banner / pricing chrome. A full logical-property migration of the legacy Foundation grid (app-critical.css) is deliberately out of scope — those classes do not render on the homepage/chrome/pricing surfaces (verified against the live DOM), so they are deep-page debt, not launch-blocking. ========================================================================== */ /* ── Base text direction ─────────────────────────────────────────────────── */ [dir="rtl"] body { text-align: right; } /* Keep intrinsically-LTR content upright inside an RTL page: prices, code, brand tokens, model names, phone/URL fields. Add `dir="ltr"` in markup OR the .ltr helper where a Latin token must not be bidi-reordered. */ [dir="rtl"] .ltr, [dir="rtl"] [dir="ltr"] { direction: ltr; text-align: left; unicode-bidi: isolate; } /* ── Primary navigation (theme-global.css / landing-redesign.css) ─────────── */ /* CTA sits after the utility cluster; its inline gap must move to the start. */ [dir="rtl"] .lr-navbar__cta { margin-left: 0; margin-right: 16px; } /* Mega-menu / dropdown panels anchor to the physical left of their trigger. */ [dir="rtl"] .lr-navbar__dropdown-menu { left: auto; right: 0; } [dir="rtl"] .lr-navbar__dropdown-menu--right { left: 0; right: auto; } [dir="rtl"] .lr-navbar__dropdown-menu--resources { left: 16px; right: auto; } [dir="rtl"] .lr-navbar__dropdown-menu--plugins { left: 0; right: auto; } /* Promo card in the Products mega-menu: flip its inline spacing + divider. */ [dir="rtl"] .lr-navbar__promo { margin-left: 0; margin-right: 24px; } /* Solutions image panel + any inline arrow CTA read start-aligned. */ [dir="rtl"] .lr-solutions-panel__cta, [dir="rtl"] .lr-navbar__promo-cta { text-align: right; } /* ── Mobile menu drawer (app-navigation.css + app-redesign.css duplicate) ──── */ /* Rebuild the slide-in on transform instead of the physical `left`, so it originates from the inline-end (right) edge under RTL and animates on the compositor rather than triggering layout. Overrides both duplicate copies. */ [dir="rtl"] .mobile-menu-drawer { left: auto !important; right: 0 !important; transform: translateX(100%) !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; border-right: 0 !important; border-left: 1px solid rgba(0, 0, 0, 0.08) !important; } [dir="rtl"] .mobile-menu-drawer.active { left: auto !important; right: 0 !important; transform: translateX(0) !important; } /* Full-width phone drawer: no horizontal offset to flip, just neutralise it. */ [dir="rtl"] #mobile-menu.mobile-menu-drawer { transform: translateX(100%) !important; } [dir="rtl"] #mobile-menu.mobile-menu-drawer.active { transform: translateX(0) !important; } /* ── Cookie consent banner (cookie-banner.css) ───────────────────────────── */ [dir="rtl"] #cookie-banner.cookie-banner { left: auto !important; right: 24px !important; text-align: right; } /* ── Footer (theme-global.css .dbf) ──────────────────────────────────────── */ [dir="rtl"] .dbf, [dir="rtl"] .dbf .dbf-links, [dir="rtl"] .dbf .dbf-col { text-align: right; } [dir="rtl"] .dbf .dbf-social { justify-content: flex-end; } /* ── Language picker modal (frontend_change_lang.pug) ─────────────────────── */ [dir="rtl"] .lang-modal-head, [dir="rtl"] .lang-list a.js-lang-link { text-align: right; } [dir="rtl"] .close-x-btn { right: auto; left: 20px; } /* The active-row check glyph sits at the inline end. */ [dir="rtl"] .lang-check { margin-left: 0; margin-right: auto; } /* ── Homepage hp-* residuals (home.css) ──────────────────────────────────── */ [dir="rtl"] .hp-tile__tag { left: auto; right: 10px; } [dir="rtl"] .hp-modelstrip__tile .hp-tile__tag { left: auto; right: 6px; } [dir="rtl"] .hp-cardmedia__caption, [dir="rtl"] .hp-overlay { text-align: right; } @media (min-width: 761px) { [dir="rtl"] .hp-step:not(:first-child) { border-left: 0; border-right: 1px solid var(--hp-line); padding-left: 0; padding-right: clamp(20px, 3vw, 36px); } [dir="rtl"] .hp-step { padding-right: 0; padding-left: 24px; } } /* ── Pricing (frontend_pricing_inline_styles.pug + plans template) ────────── */ [dir="rtl"] #pricing .price_wrapper, [dir="rtl"] #pricing .price_wrapper li, [dir="rtl"] #pricing ul.perks li { text-align: right; } /* Perk check bullets lead from the inline start. */ [dir="rtl"] #pricing ul.perks li { padding-left: 0; padding-right: 24px; } [dir="rtl"] .mpt-table__header-cell { text-align: right; } /* ── Directional glyphs ──────────────────────────────────────────────────── */ /* Arrow glyphs (→) baked into CTA copy point the wrong way under RTL. Mirror any element explicitly tagged as a directional arrow. Authors should move new arrows into a `.rtl-arrow` span rather than hardcoding the glyph. */ [dir="rtl"] .rtl-arrow, [dir="rtl"] .dbf-viewall a::after, [dir="rtl"] .hp-studio__cta .rtl-arrow { display: inline-block; transform: scaleX(-1); } /* Exit-promo chip/arrow (frontend_exit_promo.pug) */ [dir="rtl"] .db-exit__close { right: auto; left: 16px; } [dir="rtl"] .db-exit__cta .db-exit__ico { transform: scaleX(-1); } /* ── Reduced motion: drawer still opens, just without the slide ───────────── */ @media (prefers-reduced-motion: reduce) { [dir="rtl"] .mobile-menu-drawer { transition: none !important; } }