/* ============================================================================ Sea Gate — right-to-left layer. Loaded only on the Arabic pages. `dir="rtl"` on already flips text, inline flow, flex row order, table columns and logical properties. What it does NOT flip is anything physical: left/right offsets on positioned elements, directional margins and padding, floats, and physical border sides. That is what this file is for — one rule per thing the browser leaves behind. Two things deliberately do not mirror: • the play triangle on video tiles, which points the same way in every language, and • the optical nudge that centres it inside its round button. Arrows that mean "onward" do mirror, since onward is now leftward. main.css already carries a handful of html[lang="ar"] rules for Arabic typography (font size, tracking, transform-origin). Those stay authoritative — nothing here contradicts them. ========================================================================== */ /* ── Spacing utilities used in the markup ────────────────────────────────── */ /* Only the handful the templates actually apply, each reset on its old side. */ [dir="rtl"] .ml-10 { margin-left: 0; margin-right: 10px; } [dir="rtl"] .ml-35 { margin-left: 0; margin-right: 35px; } [dir="rtl"] .mr-10 { margin-right: 0; margin-left: 10px; } [dir="rtl"] .mr-20 { margin-right: 0; margin-left: 20px; } [dir="rtl"] .pl-50 { padding-left: 0; padding-right: 50px; } /* ── Header ──────────────────────────────────────────────────────────────── */ /* The row is flex, so the logo and the action cluster swap sides on their own; only the pieces pinned with physical offsets need help. */ [dir="rtl"] .tp-header-menu ul li .sub-menu { left: auto; right: -32px; text-align: right; } [dir="rtl"] .tp-header-menu ul li .sub-menu li .sub-menu { left: auto; right: 101%; } [dir="rtl"] .tp-header-top-cta a span { margin-left: 0; margin-right: 3px; } [dir="rtl"] .tp-section-title span { margin-left: 0; margin-right: 10px; } /* The pill button is padded 25px on the label side and 8px on the round icon side. Flex already swaps the two children over, so the padding has to swap with them or the button sits visibly lopsided. */ [dir="rtl"] .tp-btn { padding: 8px 25px 8px 8px; } /* Hamburger: the bars are right-aligned inside the button by margin-left:auto, and the button itself is padded on one side only. */ [dir="rtl"] .header-sidebar-btn { padding-right: 0; padding-left: 10px; } [dir="rtl"] .header-sidebar-btn span { margin: 0 auto 0 0; } /* The inline style on the nav column reads text-align:right, which is the wrong edge once the row itself has flipped. */ [dir="rtl"] .tp-header-wrap [style*="text-align: right"] { text-align: left !important; } /* At wide-but-not-huge widths the theme pulls the action cluster outward with a negative margin so it can sit flush with the page edge. Unflipped, that pulls it PAST the header's left padding in Arabic and the button hangs off the edge. Same breakpoints, mirrored side. */ @media only screen and (min-width: 1700px) and (max-width: 1800.98px), only screen and (min-width: 1600px) and (max-width: 1700.98px) { [dir="rtl"] .tp-header-cta { margin-left: 0; margin-right: -30px; } } @media only screen and (min-width: 1400px) and (max-width: 1599.98px) { [dir="rtl"] .tp-header-cta { margin-left: 0; margin-right: -50px; } } /* Language menu hangs off the opposite corner. */ [dir="rtl"] .sg-lang-menu { right: auto; left: 0; } [dir="rtl"] .sg-lang, [dir="rtl"] .sg-lang-opt { text-align: right; } /* ── Off-canvas drawer ───────────────────────────────────────────────────── */ /* Slides in from the left in Arabic. */ [dir="rtl"] .tp-offcanvas { right: auto; left: 0; transform: translateX(-100%); } /* Both classes sit on the same element, so the open state is written with both of them: at equal specificity the parked -100% could win on source order and the drawer would never appear. */ [dir="rtl"] .tp-offcanvas.tp-offcanvas-open { transform: translateX(0); } [dir="rtl"] .tp-offcanvas-overlay { right: auto; left: 0; } [dir="rtl"] .tp-offcanvas-menu ul li .sub-menu li, [dir="rtl"] .tp-offcanvas-menu ul li .mega-menu li { padding-left: 0; padding-right: 20px; } [dir="rtl"] .tp-offcanvas-cta li span i { margin-right: 0; margin-left: 6px; } [dir="rtl"] .tp-offcanvas-social a { margin-right: 0; margin-left: 15px; } /* ── Hero ────────────────────────────────────────────────────────────────── */ /* The pinned statistics move to the opposite corner. */ [dir="rtl"] .tp-hero-solid-fact, [dir="rtl"] .sg-hero .tp-hero-solid-fact { right: auto; left: 50px; } [dir="rtl"] .tp-hero-bg-shape, [dir="rtl"] .tp-hero-slider-shape, [dir="rtl"] .tp-hero-shape-transparent-2 { left: auto; right: 0; } [dir="rtl"] .sg-hero-lockup::after { transform: translateX(-130%); } /* ── About ───────────────────────────────────────────────────────────────── */ [dir="rtl"] .tp-about-badge-right { margin-right: 0; margin-left: -55px; } [dir="rtl"] .tp-about-video { margin-left: 0; margin-right: -270px; } [dir="rtl"] .tp-about-border-text::before { left: auto; right: 0; } [dir="rtl"] .tp-about-shape, [dir="rtl"] .tp-about-shape-parson, [dir="rtl"] .tp-about-shape-home { right: auto; left: 0; } [dir="rtl"] .tp-about-shape-line, [dir="rtl"] .tp-about-exprience-shape { left: auto; right: 0; } /* The About block re-tunes its overhang and gutters at four breakpoints, all with physical left properties. Each needs the same treatment at the same width or the image and the copy drift to the wrong side mid-range. */ @media only screen and (min-width: 992px) and (max-width: 1199.98px) { [dir="rtl"] .tp-about-video { margin-left: 0; margin-right: -350px; } [dir="rtl"] .tp-about-content { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) { [dir="rtl"] .tp-about-video { margin-left: 0; margin-right: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399.98px) { [dir="rtl"] .tp-about-content { padding-left: 0; padding-right: 0; } } /* Badge overhang on hover. */ @media only screen and (min-width: 768px) and (max-width: 991.98px) { [dir="rtl"] .tp-about-badge-wrap:hover .tp-about-badge:first-child { margin-right: 0; margin-left: -150px; } } @media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) { [dir="rtl"] .tp-about-badge-wrap:hover .tp-about-badge:first-child { margin-right: 0; margin-left: -80px; } } /* On the narrowest screens the fact divider moves from the side to the top; the mirrored side border has to be cleared too or it stays. */ @media only screen and (max-width: 479.98px) { [dir="rtl"] .sg-project-fact + .sg-project-fact { padding-right: 0; border-right: 0; } } /* ── Project cards ───────────────────────────────────────────────────────── */ [dir="rtl"] .sg-project-index { left: auto; right: clamp(14px, 1.5vw, 22px); } [dir="rtl"] .sg-project-tag, [dir="rtl"] .sg-project-state { right: auto; left: clamp(14px, 1.5vw, 22px); } [dir="rtl"] .sg-project-body { text-align: right; } [dir="rtl"] .sg-project-fact + .sg-project-fact { padding-left: 0; border-left: 0; padding-right: 14px; border-right: 1px solid rgba(16, 54, 91, 0.1); } [dir="rtl"] .sg-projects-glow { left: auto; right: -180px; } /* ── Sections and decorative glows ───────────────────────────────────────── */ [dir="rtl"] .sg-mast::after, [dir="rtl"] .sg-ph::after, [dir="rtl"] .sg-chan::after { right: auto; left: -120px; } [dir="rtl"] .sg-value-num { right: auto; left: clamp(18px, 2vw, 26px); } [dir="rtl"] .sg-more-sub, [dir="rtl"] .sg-pv-rail-cta, [dir="rtl"] .sg-pv-bar-wa, [dir="rtl"] .sg-pd-other-ar { margin-left: 0; margin-right: auto; } /* ── Video reel ──────────────────────────────────────────────────────────── */ [dir="rtl"] .sg-reel-glow { right: auto; left: -160px; } [dir="rtl"] .sg-reel-list { padding-right: 0; padding-left: 6px; } [dir="rtl"] .sg-reel-item { text-align: right; } [dir="rtl"] .sg-reel-item:hover { transform: translateX(-3px); } [dir="rtl"] .sg-reel-item-eq { right: auto; left: 6px; } /* Both pills are tight on the icon side and generous on the label side; flex swaps the icon over, so the padding has to follow it. */ [dir="rtl"] .sg-reel-channel { padding: 8px 8px 8px 22px; } [dir="rtl"] .sg-reel-badge { padding: 5px 11px 5px 15px; } /* Below 576px the channel pill drops its label and main.css pads it evenly. These rules are more specific than that override, so the even padding has to be restated or the pill keeps a stray 22px on one side. */ @media only screen and (max-width: 575.98px) { [dir="rtl"] .sg-reel-channel { padding: 8px; } } /* The play triangle and its optical nudge stay as they are — a play glyph points the same way in every language. */ /* ── Articles and posts ──────────────────────────────────────────────────── */ [dir="rtl"] .sg-post-date { left: auto; right: 14px; } [dir="rtl"] .sg-article-body li { padding-left: 0; padding-right: 46px; } [dir="rtl"] .sg-article-body ol li::before { left: auto; right: 0; } [dir="rtl"] .sg-article-body ul li::before { left: auto; right: 8px; } [dir="rtl"] .sg-post:hover .sg-post-more svg { transform: translateX(-4px); } /* ── Project detail ──────────────────────────────────────────────────────── */ [dir="rtl"] .sg-pd-fact, [dir="rtl"] .sg-pd-content, [dir="rtl"] .sg-pd-card { text-align: right; } [dir="rtl"] .sg-pv-ghost { right: auto; left: clamp(6px, 3vw, 54px); } [dir="rtl"] .sg-pv-map-card { left: auto; right: clamp(14px, 2vw, 28px); } [dir="rtl"] .sg-pv-next-in { padding-right: clamp(22px, 4vw, 64px); padding-left: clamp(90px, 14vw, 190px); } [dir="rtl"] .sg-pv-next-arrow { right: auto; left: clamp(18px, 4vw, 60px); } [dir="rtl"] .sg-pl-num { left: auto; right: clamp(14px, 1.6vw, 24px); } [dir="rtl"] .sg-pl-media .sg-pill { right: auto; left: 14px; } /* ── Testimonials ────────────────────────────────────────────────────────── */ /* The decorative glow and the big quote mark sit on the opposite corner; the quote glyph itself is a closing mark in both directions, so only its position moves, not the character. */ [dir="rtl"] .sg-tm-glow { right: auto; left: -160px; } [dir="rtl"] .sg-tm-mark { right: auto; left: clamp(18px, 2vw, 30px); } /* ── Contact rail ────────────────────────────────────────────────────────── */ [dir="rtl"] a.sg-rail-row:hover, [dir="rtl"] a.sg-ct-row:hover { transform: translateX(-4px); } /* ── Footer ──────────────────────────────────────────────────────────────── */ /* The credit sits at the far end of the bottom bar and is aligned to that same edge; in Arabic both move to the left. */ [dir="rtl"] .ac-footer__credit { text-align: left; } /* ── Back to top ─────────────────────────────────────────────────────────── */ /* Moves to the left so it never sits under the floating contact buttons, which stay on the right in both directions. */ [dir="rtl"] .back-to-top-wrapper { right: auto; left: 50px; } @media only screen and (max-width: 767px) { [dir="rtl"] .back-to-top-wrapper { left: 20px; } } /* ── Directional icons ───────────────────────────────────────────────────── */ /* "Onward" now points left. Chevrons and arrows inside links and buttons mirror; standalone glyphs (play, phone, mail, social) do not. */ [dir="rtl"] .sg-more svg, [dir="rtl"] .sg-post-more svg, [dir="rtl"] .sg-mast-crumb svg, [dir="rtl"] .sg-btn svg, [dir="rtl"] .tp-btn-icon svg, [dir="rtl"] .sg-pv-next-arrow svg, [dir="rtl"] .sg-projects-nav svg { transform: scaleX(-1); } /* The hover nudge on button arrows is composed with the mirror, so it has to restate the flip or the arrow snaps back mid-transition. */ [dir="rtl"] .sg-post:hover .sg-post-more svg { transform: scaleX(-1) translateX(4px); } /* ── Forms ───────────────────────────────────────────────────────────────── */ /* Inputs inherit direction from ; the placeholder and the required asterisk need the opposite edge. */ [dir="rtl"] .sg-f label, [dir="rtl"] .sg-formbox, [dir="rtl"] .sg-fnote { text-align: right; } [dir="rtl"] .sg-f input, [dir="rtl"] .sg-f textarea { text-align: right; } /* Phone numbers read left-to-right even in Arabic copy. */ [dir="rtl"] .sg-f input[type="tel"] { direction: ltr; text-align: right; } /* ── Bootstrap escape hatches ────────────────────────────────────────────── */ /* .tp-justify-end is `justify-content: end` — a LOGICAL keyword that already resolves to the left edge under rtl. Overriding it to flex-start pushed the header actions and the about badges back to the wrong side, so it is left alone deliberately. Bootstrap's .text-end / .text-start are physical in the ltr build, so those do need flipping. */ [dir="rtl"] .text-end { text-align: left !important; } [dir="rtl"] .text-start { text-align: right !important; }