/* ===================================================================== ltr.css — English (/en) direction overrides. Loaded ONLY when . The marketing CSS is almost entirely flexbox + logical, so dir="ltr" flips most of it for free. This file fixes the handful of physically-positioned bits the design pinned to a side for the Arabic (RTL) layout, plus a couple of type niceties for Latin text under the Thmanyah display fonts. ===================================================================== */ /* The RTL-first sheets hard-set `direction: rtl` on html/body, which overrides the dir="ltr" attribute. Flip it back for English — this alone corrects text-alignment, flex order (nav, hero), and Latin bidi (e.g. "15+ years", trailing periods) since the layout is start-relative. */ [dir="ltr"], [dir="ltr"] body, [dir="ltr"] body.ao-body { direction: ltr; } /* Absolute-positioned corner badges pinned to the left for RTL → right. */ [dir="ltr"] .ao-stack-sponsored { left: auto; right: 12px; } [dir="ltr"] .cover-tag { /* cover tags read from the start edge */ } /* Section heads that were right-aligned inline on the stack page. The inline style is overridden from the Blade for LTR; this is the safety net for any that slip through. */ [dir="ltr"] .ao-section-head[style*="text-align: right"] { text-align: left !important; } [dir="ltr"] .ao-stack-cat-head { text-align: left !important; } /* Reel play triangle nudged for RTL — recentre for LTR. */ [dir="ltr"] .reel-play svg, [dir="ltr"] .ao-reel-play svg { margin-right: 0; margin-left: 0; } /* Latin runs a touch tighter than Arabic display type; relax line-height a hair and drop the swash feature (it's an Arabic-only OpenType axis). */ [dir="ltr"] { font-feature-settings: normal; } [dir="ltr"] .hero-title, [dir="ltr"] .ao-h2, [dir="ltr"] .section-title, [dir="ltr"] .bio-rich-title { line-height: 1.18; } /* Link-hub (/en/links): the card chevron points toward the "forward" reading edge — left for RTL, so flip it to point right for LTR. */ [dir="ltr"] .hub-card-arrow svg { transform: scaleX(-1); } /* Email / latin inline bits already isolate direction; nothing to do. */ /* Landing (design.css) fixes for the EN tree. */ [dir="ltr"] .course-eyebrow { text-align: left; } [dir="ltr"] .b2b-mark { left: auto; right: 24px; }