/** * RSI Toolkit — RTL overrides (Arabic). * * Every rule is scoped to `[dir="rtl"]` (Polylang stamps on the * Arabic page only), so this file is inert on the English LTR site. It mirrors * the LTR widgets for Arabic: forces the Alexandria typeface everywhere (Roboto * has no Arabic glyphs), right-aligns text, and flips the drag/scroll carousels * so they bleed to the LEFT viewport edge instead of the right. */ /* -------- 1. Alexandria on every RSI element (Roboto → Alexandria) -------- */ [dir="rtl"] [class^="rsi-"], [dir="rtl"] [class*=" rsi-"] { font-family: 'Alexandria', sans-serif !important; } /* * -------- 2. (was: Contact overrides — REMOVED, they were the bug) --------- * * This section used to re-state the contact tabs for Arabic: * * align-items: flex-end !important; ← this one was actively wrong * text-align: right !important; * padding: 18px 32px 18px 24px !important; * * `align-items: flex-start` in contact.css is already direction-aware — in a * column flex the cross axis follows `direction`, so it is the left edge in * English and the right edge in Arabic on its own. Forcing `flex-end` therefore * flipped it to the WRONG edge: the office names right-aligned as text while the * phone/email group was pushed left, landing at ragged edges (measured 286 / 333 / * 233 instead of the column's 336). * * The other two were merely redundant, and only needed because contact.css stated * `text-align: left` and a physical `padding`. Both are logical now * (`text-align: start`, `padding-inline`), so Arabic mirrors with no override at * all — which is the pattern the rest of these widgets follow. */ /* -------- 3. Carousels bleed to the LEFT (mirror of the LTR right bleed) -- */ [dir="rtl"] .rsi-projects__grid, [dir="rtl"] .rsi-initiatives__grid { margin-right: 0; margin-left: calc(50% - 50vw); } /* Initiatives Pro bleeds left only as a desktop carousel; on mobile it becomes a vertical stack (no bleed), so the left edge must keep the container's space. */ @media (min-width: 768px) { [dir="rtl"] .rsi-ipro__rail { margin-right: 0; margin-left: calc(50% - 50vw); } } /* Card labels read right-to-left. */ [dir="rtl"] .rsi-projects__label { text-align: right; } /* Carousel arrow glyphs: the flex row reverses in RTL but the chevrons keep their LTR orientation and end up pointing inward. Mirror them so the pair points outward again (left ‹ / right ›) — the JS inverts the scroll to match. */ [dir="rtl"] .rsi-projects__arrow svg, [dir="rtl"] .rsi-initiatives__arrow svg, [dir="rtl"] .rsi-ipro__arrow svg { transform: scaleX(-1); } /* Media-card "view more" arrow points toward the reading direction. */ [dir="rtl"] .rsi-media-card__btn-arrow { transform: scaleX(-1); } /* -------- 4. Arabic DISPLAY scale (what the shared stylesheet doesn't cover) -- */ /* * ⚠️ This section used to scale every Arabic heading to ~80% of its LTR size. * That is GONE as of 1.16.0. The client supplied a type stylesheet (Figma * 11012:502) written in Arabic, so its numbers ARE the Arabic sizes, and * type.css now applies one scale to both languages. Re-adding a blanket Arabic * reduction here would put the site back at odds with that stylesheet. * * What remains is only the DISPLAY type the stylesheet has no token for — the * hero title, its subtitle, and the galaxy heading. Those keep a per-language * value because Arabic at 96px genuinely did read bulky, and the client's answer * on the stylesheet was to leave the hero alone. * * The specificity note still applies to what's left: `[dir="rtl"] .rsi-x` is * 0,2,0 and beats the widgets' own 0,1,0 rules REGARDLESS of media query, so * every LTR breakpoint for these three selectors must be mirrored below or * Arabic would keep its desktop size on mobile. */ [dir="rtl"] .rsi-hero-title { font-size: 76px; } [dir="rtl"] .rsi-hero-title__sub { font-size: 20px; } [dir="rtl"] .rsi-galaxy__heading { font-size: clamp(46px, 8vw, 134px); } /* --- mirrored breakpoints (see specificity note above) --- */ @media (max-width: 1100px) { [dir="rtl"] .rsi-hero-title { font-size: 51px; } [dir="rtl"] .rsi-hero-title__sub { font-size: 16px; } } @media (max-width: 699px) { [dir="rtl"] .rsi-galaxy__heading { font-size: clamp(46px, 13.6vw, 66px); } } @media (max-width: 680px) { [dir="rtl"] .rsi-hero-title { font-size: 32px; } /* * Deliberately NOT scaled down. The reduction exists to tame bulk, which is a * large-size problem; at 16px there is none. Taking this to 13px pushed the * subtitle BELOW the body copy underneath it and inverted the hierarchy. It * still has to be declared, because the 0,2,0 base rule above would * otherwise win at 20px. */ [dir="rtl"] .rsi-hero-title__sub { font-size: 16px; } }