/** * Arabic / RTL overrides — loaded only when the active language is Arabic * (see AP_I18n::enqueue_rtl_assets). Layered on top of style.css. * * Three jobs: * 1. Swap the Latin type stack for Arabic faces (Amiri display, IBM Plex * Sans Arabic for body + UI). Done by re-pointing the design-system font * variables so every existing rule picks them up. * 2. Kill letter-spacing / uppercase on script text — Arabic letters join, * and tracking or "uppercasing" them breaks or distorts the word. * 3. Flip the handful of rules that hard-code a physical side (margin-left: * auto, absolute left/right, padding-left lists, text-align left/right). * * Block direction itself comes from dir="rtl" on ; flexbox and normal * text flow mirror automatically, so only the explicit physical rules below * need attention. */ /* ---- 1. Arabic type stack ------------------------------------------------ */ :root[dir="rtl"], [dir="rtl"] { --ap-serif: "Noto Naskh Arabic", "SF Arabic", "Geeza Pro", serif; --ap-sans: "IBM Plex Sans Arabic", "SF Arabic", "Geeza Pro", -apple-system, sans-serif; --ap-mono: "IBM Plex Sans Arabic", "SF Arabic", "Geeza Pro", -apple-system, sans-serif; } [dir="rtl"] body { font-family: var(--ap-sans); } /* Amiri runs visually smaller than Bodoni at the same px; nudge display sizes. */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] .ap-hero__title, [dir="rtl"] .ap-secnum__title, [dir="rtl"] .ap-cta__title { line-height: 1.3; } /* ---- 2. No tracking / casing on Arabic script ---------------------------- */ [dir="rtl"] .ap-eyebrow, [dir="rtl"] .ap-brand__kicker, [dir="rtl"] .ap-nav a, [dir="rtl"] .ap-secnum__num, [dir="rtl"] .ap-secnum__caption, [dir="rtl"] .ap-course-card__partner-label, [dir="rtl"] .ap-course-card__cert span, [dir="rtl"] .ap-pill, [dir="rtl"] .ap-badge, [dir="rtl"] .ap-btn, [dir="rtl"] .ap-langswitch__item, [dir="rtl"] .ap-course-glance__list dt, [dir="rtl"] .ap-field label, [dir="rtl"] .ap-webinar-hero__when, [dir="rtl"] .ap-webinar-form__next, [dir="rtl"] .ap-webinar-when, [dir="rtl"] .ap-contact-facts dt { letter-spacing: normal; text-transform: none; } /* The circular seal text stays Latin (it is baked SVG), so leave it untouched. */ /* ---- 3. Physical-side flips ---------------------------------------------- */ /* Primary nav sits at the end of the header row. */ [dir="rtl"] .ap-nav { margin-left: 0; margin-right: auto; } /* Section-header caption pushes to the row end. */ [dir="rtl"] .ap-secnum__caption { margin-left: 0; margin-right: auto; } /* Course-card corner badges. */ [dir="rtl"] .ap-course-card__partner { left: auto; right: 18px; } [dir="rtl"] .ap-course-card__cert { right: auto; left: 16px; } /* Decorative hero rings mirror to the opposite corner. */ [dir="rtl"] .ap-hero__rings { right: auto; left: -160px; } /* Course body lists indent from the right. */ [dir="rtl"] .ap-course-content ul, [dir="rtl"] .ap-course-content ol { padding-left: 0; padding-right: 20px; } /* The topic select's CSS chevron is anchored to a physical side, so it moves to the other one — otherwise it sits on top of the Arabic text. The two halves keep their order (the 45deg wedge is always the left one) because the chevron is symmetric: mirroring it would draw the same shape, badly. */ [dir="rtl"] .ap-field select { background-position: left 11px center, left 16px center; padding-right: 12px; padding-left: 34px; } /* Glance list values align to the reading edge. */ [dir="rtl"] .ap-course-glance__list dd { text-align: left; } /* Styleguide swatch label (kept for completeness). */ [dir="rtl"] .ap-swatch { text-align: right; } /* Switcher: in Arabic the active/inactive roles mirror, but the base chrome lives in style.css so it also renders in English. */