/* * RTL overrides for the Arabic locale. * The base theme (bootstrap.min.css + style.css) is compiled LTR-only, so this * file re-declares the directional utility classes and a handful of * components using CSS logical properties / mirrored values. Loaded only * when app()->getLocale() === 'ar' (see components/head.blade.php). */ /* * The theme's Latin webfonts (Rethink Sans / DM Sans) have no Arabic glyphs, so Arabic * text silently falls back to a generic system font. That fallback's line metrics don't * match the sizes tuned for the Latin fonts, which visibly overlaps heading/eyebrow lines. * Cairo is designed for Arabic and is loaded (see head.blade.php) only for this locale. */ [dir="rtl"] { --font-family-base: 'Cairo', sans-serif; --font-family-headings: 'Cairo', sans-serif; --font-family-btn: 'Cairo', sans-serif; } /* * CRITICAL: do not remove. With `direction: rtl` inherited by (the normal effect of * dir="rtl" on ), this theme's pages render fully blank — not just the jarallax hero, * but the whole page, header included. This was verified precisely: DOM/CSSOM state is * provably correct in every case (right opacity, right position, right background, real * decoded images) — only the actual paint fails, and only when 's *own* computed * `direction` is rtl, regardless of what any descendant declares (overriding direction on * .promo-sec or on the itself does not help; overriding it on does, immediately, * with no reload). This reads as a real Chromium paint/compositing bug specific to this * theme's fixed-position + 3D-transform layers (jarallax, Lenis) combined with document-level * RTL, not something we can fix "properly" from application code — so we route around it. * Arabic text still shapes and reads correctly RTL regardless (Unicode bidi handles glyph * shaping/order independently of the CSS `direction` property); what `direction` mainly * controls here is flex/table visual ordering, which we restore by hand below for the * containers where it's visibly needed, same as we already do for Bootstrap's hardcoded- * physical utility classes (this theme's compiled CSS isn't logical-property-aware either * way, so most of that mirroring work was already manual, not something `direction` gave us * for free). */ [dir="rtl"] body { direction: ltr; text-align: right; } /* * custom.js runs GSAP SplitText on every `.sec-title` (type: "chars, words"), * wrapping each word/character in its own inline-block span for a scroll-reveal * animation. Inline-block boxes (unlike plain text runs) are ordered on the line * according to their containing block's CSS `direction`, not by Unicode bidi * alone — so with body forced to ltr above, these split fragments were laid out * left-to-right, visually scrambling the word and character order. Restoring * direction here (inherited by the generated word/char spans, which don't set * their own) fixes it without touching the jarallax workaround on body. */ [dir="rtl"] .sec-title { direction: rtl; } /* Restore right-to-left visual order for the main nav row (logo / links / quote+switcher) now that it no longer inherits it automatically from body's direction. */ [dir="rtl"] nav.navbar > .container { flex-direction: row-reverse; } /* * header-bg.png (the pill-shaped background behind the nav row) has a transparent * cutout baked in at ~20% from its left edge, designed to sit behind the logo in the * LTR layout. flex-direction: row-reverse above only reorders the flex children (logo * now renders on the right, quote button + language switcher on the left) — it has no * effect on this static background image, so the transparent cutout stays on the left, * now landing behind the language switcher instead of the logo. The dark hero background * shows through that hole, and since the switcher's text color (#020e28) is nearly * identical to that hero color, the locale code becomes effectively invisible. Mirroring * the image via a ::before pseudo-element (transform can't target a background-image * directly) moves the cutout to the right, back behind the logo where it belongs. */ [dir="rtl"] .header.header-default .navbar .container { background: none; position: relative; z-index: 0; } [dir="rtl"] .header.header-default .navbar .container::before { content: ''; position: absolute; inset: 0; background: url(../images/header-bg.png) no-repeat 50% 50%/contain; transform: scaleX(-1); border-radius: inherit; z-index: -1; pointer-events: none; } /* Bootstrap spacing utilities: mirror margin/padding start-end classes */ [dir="rtl"] .ms-1 { margin-right: .25rem !important; margin-left: 0 !important; } [dir="rtl"] .ms-2 { margin-right: .5rem !important; margin-left: 0 !important; } [dir="rtl"] .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; } [dir="rtl"] .ms-4 { margin-right: 1.5rem !important; margin-left: 0 !important; } [dir="rtl"] .ms-5 { margin-right: 3rem !important; margin-left: 0 !important; } [dir="rtl"] .me-1 { margin-left: .25rem !important; margin-right: 0 !important; } [dir="rtl"] .me-2 { margin-left: .5rem !important; margin-right: 0 !important; } [dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; } [dir="rtl"] .me-4 { margin-left: 1.5rem !important; margin-right: 0 !important; } [dir="rtl"] .me-5 { margin-left: 3rem !important; margin-right: 0 !important; } [dir="rtl"] .ps-1 { padding-right: .25rem !important; padding-left: 0 !important; } [dir="rtl"] .ps-2 { padding-right: .5rem !important; padding-left: 0 !important; } [dir="rtl"] .ps-3 { padding-right: 1rem !important; padding-left: 0 !important; } [dir="rtl"] .ps-4 { padding-right: 1.5rem !important; padding-left: 0 !important; } [dir="rtl"] .ps-5 { padding-right: 3rem !important; padding-left: 0 !important; } [dir="rtl"] .pe-1 { padding-left: .25rem !important; padding-right: 0 !important; } [dir="rtl"] .pe-2 { padding-left: .5rem !important; padding-right: 0 !important; } [dir="rtl"] .pe-3 { padding-left: 1rem !important; padding-right: 0 !important; } [dir="rtl"] .pe-4 { padding-left: 1.5rem !important; padding-right: 0 !important; } [dir="rtl"] .pe-5 { padding-left: 3rem !important; padding-right: 0 !important; } [dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; } [dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; } [dir="rtl"] .text-start { text-align: right !important; } [dir="rtl"] .text-end { text-align: left !important; } [dir="rtl"] .float-start { float: right !important; } [dir="rtl"] .float-end { float: left !important; } [dir="rtl"] .border-start { border-left: 0 !important; border-right: 1px solid var(--border-color, #d8dde1) !important; } [dir="rtl"] .border-end { border-right: 0 !important; border-left: 1px solid var(--border-color, #d8dde1) !important; } [dir="rtl"] .rounded-start { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } [dir="rtl"] .rounded-end { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* Breadcrumbs: mirror the separator direction */ [dir="rtl"] .breadcrumb { flex-direction: row-reverse; } /* Header navigation and dropdowns */ [dir="rtl"] .navbar-nav { padding-right: 0; } [dir="rtl"] .dropdown-menu { text-align: right; } [dir="rtl"] .dropdown-menu-end { --bs-position: start; left: 0; right: auto; } /* Offcanvas mobile menu and canvas sidebar: slide in from the right */ [dir="rtl"] .offcanvas-start { left: auto; right: 0; transform: translateX(100%); } [dir="rtl"] .offcanvas-start.show { transform: translateX(0); } [dir="rtl"] .canvas-menu { left: auto; right: 0; transform: translateX(100%); } [dir="rtl"] .canvas-menu.active, [dir="rtl"] .canvas-menu.show { transform: translateX(0); } /* Form icons positioned inside inputs (contact / quote forms) */ [dir="rtl"] .form-group i, [dir="rtl"] .qr-group i { left: auto; right: 20px; } [dir="rtl"] .form-group input, [dir="rtl"] .form-group textarea, [dir="rtl"] .form-group select, [dir="rtl"] .qr-group input { padding-left: 20px; padding-right: 45px; } /* Keep phone numbers, emails and numeric data left-to-right even in RTL text */ [dir="rtl"] .keep-ltr, [dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: embed; } /* Swiper carousels: reverse slide order so "next" still advances toward the reading direction */ [dir="rtl"] .swiper { direction: rtl; } /* * jarallax.js's fixed-position/3D-transform parallax technique renders its target images * fully invisible under dir="rtl" (a rendering-engine interaction with RTL directionality, * not something fixable with a CSS override alone) — scripts.blade.php strips the plugin's * marker attribute/class for this locale before its init script ever runs, so these elements * are always left as plain, untouched tags with no inline styles. * Style them here as an ordinary static cover image. Note: `inset: 0` (not `width/height: * 100%`) is required because the parent section (e.g. .promo-sec) has no explicit height of * its own — a percentage height would resolve against the nearest ancestor that DOES have one, * which in practice is the full page, stretching the image to the page's scroll height. */ [dir="rtl"] .jarallax-img { position: absolute !important; top: 0 !important; left: 0 !important; /* `width`/`height` must be explicit percentages, not `auto`: per the CSS replaced-element sizing rules, an absolutely positioned with width/height:auto always sizes to its intrinsic (natural) dimensions regardless of inset offsets — "auto" does not mean "stretch" for a replaced element the way it does for a normal block. */ width: 100% !important; height: 100% !important; margin: 0 !important; transform: none !important; object-fit: cover !important; }