@layer base { body { font-family: var(--tf-font-family); font-size: var(--tf-font-size-m); line-height: var(--tf-line-height-base); color: var(--tf-text); background-color: var(--tf-surface); } h1, h2, h3, h4 { line-height: var(--tf-line-height-tight); text-wrap: balance; } p { text-wrap: pretty; } /* Arabic typographic corrections — see docs/design-system.md §23. * Arabic is a connected script: letter-spacing breaks letter joins, * and Arabic has no letter case, so uppercase is meaningless. */ [dir="rtl"] body, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: 0; text-transform: none; line-height: var(--tf-line-height-loose); } } /* Arabic typeface — deliberately OUTSIDE @layer base. * * Elementor's kit stylesheet sets `.elementor-kit-N { font-family }` * unlayered, and any unlayered rule beats every layered one regardless * of specificity — so the layered RTL block above could never change * the Arabic font. Unlayered, `[dir="rtl"] body` (0,1,1) outranks * `.elementor-kit-N` (0,1,0) on specificity and wins properly. * * The Elementor widget selectors are listed because widgets carry their * own font-family from the kit's global typography rather than * inheriting from body. */ [dir="rtl"] body, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] .elementor-heading-title, [dir="rtl"] .elementor-widget-text-editor, [dir="rtl"] .elementor-widget-html, [dir="rtl"] .elementor-button { font-family: var(--tf-font-family-ar); } /* Elementor widgets take their font from the kit's global typography * variables (`.elementor-widget-heading .elementor-heading-title` reads * --e-global-typography-primary-font-family, and so on), so overriding * body alone leaves every heading and button in the Latin face. * * Repointing the four variables is what makes the whole widget set * follow the Arabic typeface, including widgets added later — far more * durable than overriding each widget selector by hand. Elementor * defines them on the kit class on , so the override has to land * on body too: `html[dir="rtl"] body` (0,1,2) outranks * `.elementor-kit-N` (0,1,0). */ html[dir="rtl"] body { --e-global-typography-primary-font-family: var(--tf-font-family-ar); --e-global-typography-secondary-font-family: var(--tf-font-family-ar); --e-global-typography-text-font-family: var(--tf-font-family-ar); --e-global-typography-accent-font-family: var(--tf-font-family-ar); } /* English (LTR) typeface -- Ranade via --tf-font-family. * * The Elementor kit hardcodes "Plus Jakarta Sans" in its four global * typography variables (confirmed live), so changing the token alone * would leave every Elementor heading, paragraph and button in the old * face. This is the mirror of the Arabic block above: repoint the * variables on body, unlayered, scoped to non-RTL documents so Arabic * is untouched. `html:not([dir="rtl"]) body` (0,1,2) outranks the * kit's `.elementor-kit-N` (0,1,0). */ html:not([dir="rtl"]) body { font-family: var(--tf-font-family); --e-global-typography-primary-font-family: var(--tf-font-family); --e-global-typography-secondary-font-family: var(--tf-font-family); --e-global-typography-text-font-family: var(--tf-font-family); --e-global-typography-accent-font-family: var(--tf-font-family); }