/* ========================================================================== Arabic (RTL) overrides for landing pages. Loaded only on the Arabic site, after output.css. `dir="rtl"` on already reverses flex rows and grid tracks. Adding flex-direction: row-reverse flips them back to LTR, so this file never sets it — it only declares typography and the few places that must stay LTR. ========================================================================== */ /* -------------------------------------------------------------------------- Fonts Every theme rebinds --font-heading/--font-body to a Latin face on , and the brand classes read those variables, so swapping the two variables converts the whole page in one place. The selector must outrank the `.theme-*` class that declares them. -------------------------------------------------------------------------- */ [dir="rtl"] body { --font-heading: "Noto Kufi Arabic", sans-serif; --font-body: "Noto Sans Arabic", Arial, sans-serif; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ body { font-size: 16px; line-height: 1.75; text-align: right; } /* Arabic has no italic form */ .type-h1, .type-h2, .type-h3, .type-h2-regular, .type-h3-regular, .payment-pct { font-style: normal; } .text-center { text-align: center; } /* Digits and dial codes read left-to-right inside the RTL flow */ .section-badge, .payment-pct, .selected-dial-code { direction: ltr; } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .type-nav { font-size: 14px; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .landing-hero .type-h1 { font-size: clamp(34px, 3.6vw, 58px); line-height: 1.45; font-weight: 400; } .landing-hero .type-label { font-size: 14px; font-weight: 500; } .hero-body-white-text { font-size: 18px; line-height: 1.9; } /* -------------------------------------------------------------------------- Metrics -------------------------------------------------------------------------- */ .landing-metrics .type-h3 { font-size: 26px; font-weight: 400; } .landing-metrics .type-cta, .landing-metrics .type-label-strong { font-size: 14px; } /* -------------------------------------------------------------------------- Section headings (why / payment plan / project resources / location) -------------------------------------------------------------------------- */ .section-badge { font-size: 12px; } .type-label, .type-subtitle { font-size: 14px; font-weight: 500; } .type-h2 { font-size: clamp(29px, 3vw, 44px); font-weight: 400; line-height: 1.55; } /* Intro paragraph directly under a section heading block */ section > .flex.flex-col > .type-body { font-size: 18px; } /* -------------------------------------------------------------------------- Cards (features / residences / resources) -------------------------------------------------------------------------- */ section .type-h3, #project-resources .type-h3-regular { font-size: 21px; font-weight: 500; } #project-resources a { font-size: 14px; } /* -------------------------------------------------------------------------- Gallery — the track stays LTR so the scroll maths in the page script holds -------------------------------------------------------------------------- */ .gallery-scroll { direction: ltr; } .gallery-nav-prev { left: auto; right: 0; transform: translate(50%, -50%); } .gallery-nav-next { right: auto; left: 0; transform: translate(-50%, -50%); } @media (min-width: 1024px) { .gallery-nav-prev { left: auto; right: 16px; transform: translateY(-50%); } .gallery-nav-next { right: auto; left: 16px; transform: translateY(-50%); } } /* Arrow glyphs are authored for LTR, so mirror them */ .gallery-nav span { display: inline-block; transform: scaleX(-1); } /* -------------------------------------------------------------------------- Payment plan -------------------------------------------------------------------------- */ .payment-pct { font-size: 34px; font-weight: 400; text-align: right; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ footer .type-h2 { font-size: clamp(28px, 3vw, 44px); font-weight: 400; line-height: 1.55; } /* -------------------------------------------------------------------------- Registration form -------------------------------------------------------------------------- */ .registration-form { text-align: right; } .registration-form .type-h2-regular, .registration-form .type-h3-regular { font-size: 25px; font-weight: 500; line-height: 1.55; /* The desktop variant carries the `italic` utility, which Arabic should not use */ font-style: normal !important; } .registration-form .type-body { font-size: 16px; line-height: 1.75; } .registration-form .field-label { font-size: 13px; font-weight: 600; margin-bottom: 6px; } .registration-form .input-underline { height: 43px; font-size: 16px; text-align: right; } .registration-form .btn-submit { min-height: 46px; font-size: 16px; font-weight: 600; letter-spacing: 0; } /* Phone field: flag and dial code sit on the right, the number reads LTR */ .phone-field .selected-dial-code { unicode-bidi: isolate; } .phone-field .phone-input { direction: ltr; text-align: right; } .phone-field .country-list-with-search { left: auto; right: 0; } .phone-field .country-search { text-align: right; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 1023px) { .landing-hero .type-h1 { font-size: 36px; } .hero-body-white-text { font-size: 16px; } } @media (max-width: 560px) { body { font-size: 15px; } .landing-hero .type-h1 { font-size: 30px; } .landing-metrics .type-h3 { font-size: 21px; } .landing-metrics .type-cta, .landing-metrics .type-label-strong { font-size: 13px; } .type-h2 { font-size: 27px; } section > .flex.flex-col > .type-body { font-size: 16px; } } /* ========================================================================== O1NE District This project's Arabic design uses Noto Kufi Arabic for body copy too, on a larger scale than the shared one above. Rules are scoped to .theme-o1ne so they outrank the shared declarations. ========================================================================== */ [dir="rtl"] body.theme-o1ne { --font-body: "Noto Kufi Arabic", Arial, sans-serif; line-height: 1.85; } /* Headings keep the shared Arabic sizes above. The reference file's much larger scale was drawn against a mock whose hero form caps at 440px; this template's form is 680px, leaving the hero copy only 466px at 1440px, where a 6vw headline wraps to four lines. Only the weights carry over. */ .theme-o1ne .type-h2 { font-weight: 500; } .theme-o1ne .type-label, .theme-o1ne .type-subtitle { font-size: 0.82rem; font-weight: 600; } .theme-o1ne .section-badge { font-size: 0.78rem; } .theme-o1ne .type-nav { font-size: 0.82rem; } .theme-o1ne .btn-pill { font-weight: 700; } .theme-o1ne #why-o1ne .type-h3 { font-size: 1.32rem; font-weight: 500; } .theme-o1ne #offices .type-h3, .theme-o1ne #project-resources .type-h3-regular { font-size: 1.25rem; font-weight: 700; } .theme-o1ne #location .type-h3 { font-size: 1.55rem; } .theme-o1ne .landing-metrics .type-h3 { font-weight: 500; } .theme-o1ne .landing-metrics .type-cta, .theme-o1ne .landing-metrics .type-label-strong { font-size: 0.78rem; } .theme-o1ne .payment-pct { font-weight: 500; } .theme-o1ne .registration-form .type-h2-regular, .theme-o1ne .registration-form .type-h3-regular { font-size: 1.65rem; line-height: 1.45; font-weight: 500; } .theme-o1ne .registration-form .field-label { font-size: 0.75rem; font-weight: 600; } @media (max-width: 640px) { [dir="rtl"] body.theme-o1ne { font-size: 15px; } } /* ========================================================================== Cheval Residences Close to the shared scale, but with weight 500 headings and smaller cards, payment figures and labels. The h1 deliberately keeps the shared size: the file's 4vw was drawn against a 540px hero form, and this template's is 680px. ========================================================================== */ [dir="rtl"] body.theme-cheval { line-height: 1.8; } .theme-cheval .type-h1, .theme-cheval .type-h2 { font-weight: 500; } .theme-cheval .type-label, .theme-cheval .type-subtitle { font-size: 0.8rem; font-weight: 600; } .theme-cheval .type-nav { font-size: 0.84rem; font-weight: 500; } .theme-cheval section .type-h3, .theme-cheval #project-resources .type-h3-regular { font-size: 1.08rem; font-weight: 500; } .theme-cheval section > .flex.flex-col > .type-body { font-size: 1.08rem; } .theme-cheval .landing-metrics .type-h3 { font-size: 1.55rem; font-weight: 500; } .theme-cheval .landing-metrics .type-cta { font-size: 0.9rem; } .theme-cheval .payment-pct { font-size: 1.8rem; font-weight: 500; } .theme-cheval .registration-form .type-h2-regular, .theme-cheval .registration-form .type-h3-regular { font-size: 1.5rem; font-weight: 500; } /* Scoped to the intro paragraph so the phone field keeps its own size */ .theme-cheval .registration-form > .flex.flex-col > .type-body { font-size: 0.92rem; } .theme-cheval .registration-form .field-label { font-size: 0.84rem; font-weight: 500; } .theme-cheval .registration-form .input-underline { height: 45px; } @media (max-width: 620px) { [dir="rtl"] body.theme-cheval { font-size: 15px; } .theme-cheval .landing-metrics .type-h3 { font-size: 1.2rem; } }