/** * RTL layer for the Arabic version of the site. * * Loaded on every page AFTER all other stylesheets, and only takes effect * when the page root is `` (set by includes/i18n.php based * on the visitor's chosen language). English pages are completely * unaffected — nothing in this file has a bare/unscoped selector. * * Scope/approach (see docs/README.md "Arabic RTL system" for the full * write-up): CSS flexbox already auto-mirrors `justify-content`, * `flex-direction: row`, and start/end ordering once `dir="rtl"` is set on * an ancestor, so the navbar/footer/card layouts built with flex mostly * flip correctly for free. This file only handles the things that do NOT * auto-mirror: literal text-align, literal left/right offsets & margins, * horizontal transforms with a hard-coded sign, and genuinely directional * iconography (arrows). Purely decorative motion (fades, scale, the * Partners image-sequence crossfade) is left untouched on purpose per the * "don't mirror everything mathematically" requirement — it reads the * same whether the page is LTR or RTL. */ [dir="rtl"] { text-align: right; } /* Elements that should stay left-aligned even in RTL (numbers, logos, code-like content) can opt out explicitly with this utility class. */ [dir="rtl"] .ltr-align { text-align: left; direction: ltr; } /* --------------------------------------------------------------------- Navbar --------------------------------------------------------------------- */ /* The active-link underline animates in from the left edge in LTR (`left: 0` + `transform: scaleX(0)` with a left-anchored transform origin); mirror the anchor so it grows from the right in RTL. */ [dir="rtl"] .navbar .navbar-container .navbar-center__link::after, [dir="rtl"] .navbar .navbar-container .navbar-right .navbar-right__link::after { right: 0; left: auto; transform-origin: right center; } [dir="rtl"] .navbar .navbar-container .navbar-right .navbar-right__link:hover::after { transform-origin: right; } /* Social icon reveal animation grows from the near edge - mirror it. */ [dir="rtl"] .navbar-menu .navbar-menu__socials .navbar-menu__socials-li { transform-origin: right; } /* Each mobile menu link staggers in from a fixed horizontal offset (see css/components/navbar.css .navbar-menu__block-li) - mirror the sign so items still enter from the edge closest to the toggle button instead of sliding in backwards. */ [dir="rtl"] .navbar-menu .navbar-menu__block .navbar-menu__block-li { transform: translateX(5.5rem); } @media (orientation: portrait) { [dir="rtl"] .navbar-menu .navbar-menu__block .navbar-menu__block-li { transform: translateX(3.2rem); } } /* --------------------------------------------------------------------- Language switcher --------------------------------------------------------------------- */ .lang-switch { display: flex; align-items: center; gap: 0.4rem; font-size: 1.4rem; } .lang-switch__link { padding: 0.3rem 0.6rem; border-radius: 0.4rem; color: inherit; text-decoration: none; opacity: 0.6; transition: opacity 0.2s ease; } .lang-switch__link:hover { opacity: 0.85; } .lang-switch__link[aria-current="true"] { opacity: 1; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .lang-switch__divider { opacity: 0.4; } /* --------------------------------------------------------------------- Directional icons (arrows that point "forward"/"next") — flip them horizontally in RTL so "forward" still reads as forward. Apply the `.dir-icon` class to an SVG/icon wrapper to opt it in. --------------------------------------------------------------------- */ [dir="rtl"] .dir-icon { transform: scaleX(-1); } /* cta-button icon is a directional "arrow" glyph in this design system */ [dir="rtl"] .cta-button__icon svg { transform: scaleX(-1); } /* Services page carousel prev/next controls: `.juice-swiper-navigation` is flex/space-between, so the buttons already swap sides for free in RTL - but the arrow glyphs themselves are literal left/right-pointing paths that don't mirror on their own. Flip them so "previous" still points toward the start of the reading direction and "next" still points toward the end. Keep the existing centering transform. */ [dir="rtl"] .carousel__button svg { transform: translate(-50%, -50%) scaleX(-1); } /* --------------------------------------------------------------------- Footer --------------------------------------------------------------------- */ /* The footer wordmark (`.footer-brand`) is sized in vw units to fill the footer width edge-to-edge for the English name. The Arabic company name ("كابيتال للمصاعد والسلالم المتحركة") is meaningfully longer, so the same huge font-size overflows its container / causes horizontal overflow and clipped letters. Scale it down and allow it to wrap so it never breaks out of the footer - English size is untouched. */ [dir="rtl"] .footer-brand { font-size: 5vw; line-height: 1.15; overflow-wrap: break-word; word-break: break-word; } @media (orientation: portrait) { [dir="rtl"] .footer-brand { font-size: 6.5vw; } } /* --------------------------------------------------------------------- Forms --------------------------------------------------------------------- */ [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; } /* Keep phone/email inputs left-to-right since that's how those values are actually written/read, even on an RTL page. */ [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="url"] { text-align: right; direction: ltr; } /* --------------------------------------------------------------------- Post-Hero cards (elevator/escalator spec cards, .goals-swiper-slide) Portrait/mobile only - see css/pages/homepage.css, these are hidden (display:none) outside the portrait media query, so no extra media guard is needed here. --------------------------------------------------------------------- */ /* The capacity/speed gauge (.goals-swiper-slide__bottom-loader-bar) is a physical gauge graphic - a left-to-right colored fill with a knob at its end - not text, so it must keep reading left -> right exactly like the English version. It's a plain block box sized narrower than its container, so under dir="rtl" it would otherwise flip to hug the right edge instead of the left. Pin it back to ltr locally; this only affects this one element's own box position, nothing else on the page. */ [dir="rtl"] .goals-swiper-slide__bottom-loader, [dir="rtl"] .goals-swiper-slide__bottom-loader-bar { direction: ltr; } /* .goals-swiper-slide__info lays out [divider bar | spec text | thumbnail image] with grid-template-columns: auto 1fr auto (see homepage.css). Forcing this row back to ltr keeps that exact physical arrangement - divider on the left, thumbnail on the right - identical to English, instead of letting dir="rtl" mirror which edge each column hugs. */ [dir="rtl"] .goals-swiper-slide__info { direction: rtl; } /* The spec text itself should still read naturally right-to-left as Arabic - only the row's block layout was pinned to ltr above, not the script inside it (Arabic still shapes/reads correctly inside an ltr box; that's normal Unicode bidi behavior). */ [dir="rtl"] .goals-swiper-slide__grid, [dir="rtl"] .goals-swiper-slide__grid-group, [dir="rtl"] .goals-swiper-slide__grid-group strong { text-align: right; } /* Root cause of the clipped Arabic text / dead empty space: the middle "1fr" column and its flex children default to min-width:auto, so a long unbroken run of Arabic spec text (e.g. "تشطيب من الرخام الرمادي الفاتح الطبيعي") sizes the column to its own overflow instead of wrapping inside it, and .goals-swiper-slide__inner's overflow:hidden then silently crops whatever didn't fit - which reads as "text cut off with empty space nearby." Letting these shrink to their grid track lets the text wrap inside the existing card instead of overflowing it. Card size, image size/position, and animation are untouched. */ [dir="rtl"] .goals-swiper-slide__grid, [dir="rtl"] .goals-swiper-slide__grid-group, [dir="rtl"] .goals-swiper-slide__grid-group strong { min-width: 0; } /* The label span has a hardcoded width: 3.5rem tuned for short English labels ("Flooring", "Walls & Doors"). Arabic labels of the same meaning run wider at the same font size and were being clipped by that fixed box; let the label size to its Arabic content instead while keeping the English rule (width: 3.5rem) completely untouched. */ [dir="rtl"] .goals-swiper-slide__grid span { width: auto; min-width: 3.5rem; text-align: right; } /* ========================================================= ARABIC DESKTOP — MATCH MOBILE CARD VISUAL STRUCTURE Goals / Cabins / Escalators ========================================================= */ @media screen and (orientation: landscape) { [dir="rtl"] .goals .accordion-css__item-bottom { direction: rtl; } /* Main content area: make Arabic follow the same visual reading direction as the mobile Arabic card */ [dir="rtl"] .goals .accordion-css__item-info { direction: rtl; min-width: 0; } [dir="rtl"] .goals .accordion-css__item-info > * { min-width: 0; } /* Information grid */ [dir="rtl"] .goals .accordion-css__item-grid { direction: rtl; min-width: 0; justify-items: stretch; } [dir="rtl"] .goals .accordion-css__item-grid-group { direction: rtl; min-width: 0; justify-content: flex-start; } [dir="rtl"] .goals .accordion-css__item-grid-group span, [dir="rtl"] .goals .accordion-css__item-grid-group strong { min-width: 0; } [dir="rtl"] .goals .accordion-css__item-grid-group strong { overflow-wrap: anywhere; word-break: normal; } /* Image group follows the same RTL visual flow */ [dir="rtl"] .goals .accordion-css__item-images { direction: rtl; } /* * IMPORTANT: * The decorative indicator/loader must stay visually identical * to the English/mobile design. * * Do NOT mirror the physical loader itself. * Keep its left-to-right visual direction. */ [dir="rtl"] .goals .accordion-css__item-bottom-loader { direction: ltr; } [dir="rtl"] .goals .accordion-css__item-bottom-loader-bar { direction: ltr; margin-left: 0; margin-right: auto; } [dir="rtl"] .goals .accordion-css__item-bottom-loader-circle { right: 0; left: auto; transform: translate(50%, -50%); } /* Prevent Arabic content from being clipped */ [dir="rtl"] .goals .accordion-css__item-info, [dir="rtl"] .goals .accordion-css__item-grid, [dir="rtl"] .goals .accordion-css__item-grid-group { overflow: visible; } /* Keep the top indicator/tag visually centered */ [dir="rtl"] .goals .accordion-css__top-loader { left: 50%; right: auto; } } /* Arabic Desktop - Move Hero Contact button to the left */ @media screen and (orientation: landscape) { [dir="rtl"] .hero .hero-container .hero-contact { right: auto; left: 0; border-radius: 0 1.5rem 0 0; } [dir="rtl"] .hero .hero-container .hero-contact:hover { border-radius: 0 3rem 0 0; } } @media screen and (orientation: landscape) { [dir="rtl"] .goals .goals-container .goals-header { left: auto; right: 6rem; text-align: right; } [dir="rtl"] .goals .goals-container .goals-header__h2, [dir="rtl"] .goals .goals-container .goals-header__p { text-align: right; } }