/* ========================================================================== TASNEE WATER SOLUTIONS — RTL overrides (Arabic) Loaded AFTER style.css, only when (locale = ar). Targeted overrides only — style.css remains the single source of truth. -------------------------------------------------------------------------- Contents: 01. Arabic font stacks & letter-spacing resets 02. Latin/numeric runs kept LTR (bidi isolation) 03. Base direction fixes (lists, tables) 04. Header / nav / dropdown / mobile drawer 05. Hero & page-hero (ghost words, chips, diagonal clip) 06. Links & arrows (link-arrow, footer chevrons, card arrow badge) 07. Cards & badges (tags, dates, steps, icon badges, album) 08. Article / aside / toast / forms 09. Marquees, product strip, stats (kept LTR animation loops) 10. Progress bars & scroll-reveal directions 11. Floating buttons & modals (kept physical — see notes) ========================================================================== */ /* -------------------------------------------------------------------------- 01. Arabic font: Tajawal, self-hosted (assets/fonts/tajawal-*-arabic.woff2, Arabic unicode-range subsets only). Space Grotesk / Inter are latin-only, so Latin keeps the design fonts and Arabic glyphs resolve to Tajawal; system Arabic fonts remain as a last-resort fallback. No external font downloads (self-contained rule from DESIGN.md). -------------------------------------------------------------------------- */ @font-face { font-family: "Tajawal"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/tajawal-400-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08E3-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Tajawal"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/tajawal-500-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08E3-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Tajawal"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/tajawal-700-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08E3-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Tajawal"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/tajawal-800-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08E3-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } [dir="rtl"] { --font-head: "Space Grotesk", "Tajawal", "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, system-ui, sans-serif; --font-body: "Inter", "Tajawal", "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, system-ui, sans-serif; } [dir="rtl"] body { font-family: var(--font-body); } /* Tracking breaks Arabic letter joining — neutralise every letter-spaced rule (negative display tracking and wide small-caps tracking alike). */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] .hero-title, [dir="rtl"] .page-hero h1, [dir="rtl"] .btn, [dir="rtl"] .eyebrow, [dir="rtl"] .hero-eyebrow, [dir="rtl"] .dropdown .dropdown-group, [dir="rtl"] .main-nav a, [dir="rtl"] .card-tag, [dir="rtl"] .wwd-step, [dir="rtl"] .stat .stat-label, [dir="rtl"] .team-card .team-role, [dir="rtl"] .scroll-cue, [dir="rtl"] .mb-track, [dir="rtl"] .ghost-num, [dir="rtl"] .page-hero-ghost, [dir="rtl"] .album-idx, [dir="rtl"] .album-cap em, [dir="rtl"] .experience-badge small { letter-spacing: 0; } /* -------------------------------------------------------------------------- 02. Latin / numeric runs stay LTR inside RTL text -------------------------------------------------------------------------- */ [dir="rtl"] .stat-num, [dir="rtl"] [data-counter], [dir="rtl"] .hero-chip strong, [dir="rtl"] .phone-chip, [dir="rtl"] .news-date, [dir="rtl"] .album-idx, [dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: isolate; } /* email / phone / url inputs are latin data — type LTR */ [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="url"] { direction: ltr; } /* -------------------------------------------------------------------------- 03. Base direction fixes -------------------------------------------------------------------------- */ /* flip the base list indent (style.css: ul,ol { padding-left: 1.25rem }) */ [dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 1.25rem; } /* lists that reset their padding keep it reset */ [dir="rtl"] .main-nav > ul, [dir="rtl"] .breadcrumb, [dir="rtl"] .check-list, [dir="rtl"] .footer-links, [dir="rtl"] .footer-contact, [dir="rtl"] .aside-links { padding-right: 0; } [dir="rtl"] .dropdown { padding-right: .6rem; } /* table headers were forced text-align: left */ [dir="rtl"] .article-body thead th { text-align: right; } /* -------------------------------------------------------------------------- 04. Header / nav -------------------------------------------------------------------------- */ /* animated nav underline grows from the reading start (right) */ [dir="rtl"] .main-nav > ul > li > a::after { transform-origin: right; } /* mobile drawer: mirrored — slides in from the left edge */ @media (max-width: 940px) { [dir="rtl"] .main-nav { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--line-dark); transform: translateX(-100%); box-shadow: 24px 0 70px rgba(3, 13, 22, .5); } [dir="rtl"] .main-nav.open { transform: translateX(0); } /* static in-drawer dropdown: accent rule on the right, indent to the left */ [dir="rtl"] .dropdown { border-left: 0; border-right: 2px solid var(--cyan); margin: .2rem .8rem .4rem 0; } } /* -------------------------------------------------------------------------- 05. Hero & page-hero -------------------------------------------------------------------------- */ /* staggered glass chips: mirror the offset of the middle chip */ [dir="rtl"] .hero-chip:nth-child(2) { margin-left: 0; margin-right: 1.8rem; } /* ghost display words sit opposite the (now right-aligned) text */ [dir="rtl"] .ghost-num, [dir="rtl"] .page-hero-ghost { right: auto; left: max(1.25rem, (100vw - var(--container)) / 2); } /* diagonal page-hero clip mirrored (low edge follows reading direction) */ [dir="rtl"] .page-hero { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3vw)); } /* -------------------------------------------------------------------------- 06. Links & arrows -------------------------------------------------------------------------- */ /* RESTORED mirroring (reverted an intermediate "unmirror everything" pass): `.link-arrow`/`.btn` put the icon AFTER the label in DOM order. RTL's natural flex reorder already moves that trailing icon to the LEFT edge (correctly matching English's reading-order: label-then-icon) — but an unmirrored icon glyph then points RIGHT while sitting at the LEFT edge, i.e. back INTO the label instead of away from it. The glyph must mirror to match where RTL naturally puts it; only the shape needed to change, never the position — no direction/order override belongs here. */ [dir="rtl"] .link-arrow svg { transform: scaleX(-1); } /* transform functions compose right-to-left: translateX runs inside the mirrored frame, so +5px here moves the arrow physically LEFT (forward for Arabic). -5px would double-flip back to a rightward slide. */ [dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(5px); } /* directional arrows inside buttons (tagged .i-arrow in markup; play / download glyphs are deliberately untagged and stay unmirrored) */ [dir="rtl"] .i-arrow { transform: scaleX(-1); } /* footer link chevrons: a LEADING bullet, not a trailing "forward" arrow — RTL's natural reorder puts it at the RIGHT edge with nothing beyond it, so "›" pointing further right (into the margin, away from the label) is already correct without mirroring... but mirror it anyway for one concrete reason: hover nudges it toward the label (a "reveal" motion), and that motion must point the same way the label continues (left). */ [dir="rtl"] .footer-links a::before { content: "‹"; } [dir="rtl"] .footer-links a:hover::before { transform: translateX(-3px); } /* aside list chevrons */ [dir="rtl"] .aside-links a::after { content: "‹"; } /* card-media hover arrow badge: mirrored corner + arrow */ [dir="rtl"] .card-media::before { content: "←"; right: auto; left: 1rem; transform: translate(-10px, 10px); } [dir="rtl"] .card:hover .card-media::before { transform: translate(0, 0); } /* -------------------------------------------------------------------------- 07. Cards & badges -------------------------------------------------------------------------- */ [dir="rtl"] .card-tag { left: auto; right: 1rem; } [dir="rtl"] .news-date { right: auto; left: 1rem; } [dir="rtl"] .value-num { right: auto; left: 1.3rem; } [dir="rtl"] .wwd-step { left: auto; right: 1rem; } [dir="rtl"] .app-card .icon-badge { left: auto; right: 1.6rem; } [dir="rtl"] .album-idx { left: auto; right: 1.1rem; } [dir="rtl"] .album-zoom { right: auto; left: 1rem; } /* accent frame + experience badge mirror as a pair */ [dir="rtl"] .img-frame-accent::before { inset: 1.4rem 1.4rem -1.4rem -1.4rem; } [dir="rtl"] .experience-badge { right: auto; left: -1.2rem; } @media (max-width: 940px) { [dir="rtl"] .experience-badge { right: auto; left: 1rem; } } /* footer column heading underline anchors to the reading start */ [dir="rtl"] .footer-col h4::after { left: auto; right: 0; } /* -------------------------------------------------------------------------- 08. Article / aside / toast / forms -------------------------------------------------------------------------- */ /* h4 gradient rule flips sides */ [dir="rtl"] .article-body h4 { padding-left: 0; padding-right: 1rem; border-left: 0; border-right: 3px solid; border-image: linear-gradient(180deg, var(--cyan), var(--aqua)) 1; } /* toast accent rule flips sides */ [dir="rtl"] .toast { border-left: 1px solid var(--line-dark); border-right: 4px solid var(--cyan); } /* -------------------------------------------------------------------------- 09. Marquees, product strip, stats — keep the LTR animation loops. The translateX keyframes assume LTR layout; running the tracks RTL breaks the seamless -50% wrap, so the tracks stay direction: ltr. -------------------------------------------------------------------------- */ [dir="rtl"] .marquee-track, [dir="rtl"] .mb-track { direction: ltr; } /* ...but the phrases inside the band are Arabic content — restore their base direction so bullets/punctuation sit on the correct side */ [dir="rtl"] .mb-track > * { direction: rtl; } /* This is a reading-flow ticker (words, not logos/cards): under LTR it drifts leftward — new text enters from the right, matching how an LTR reader's eye tracks. For Arabic that motion runs backwards against the reading direction; reverse the same keyframe so text enters from the left instead. Percentage-based translateX is symmetric, so playing the 0%->-50% loop backwards is a perfectly valid infinite cycle. */ [dir="rtl"] .mb-track { animation-direction: reverse; } /* horizontal product strip (scroll-snap + GSAP pin math are LTR) */ [dir="rtl"] .product-strip, [dir="rtl"] .hscroll .hscroll-track { direction: ltr; } /* the track stays LTR for the scroll/pin math, but each card holds Arabic content — restore its base direction */ [dir="rtl"] .product-strip > *, [dir="rtl"] .hscroll .hscroll-track > * { direction: rtl; } [dir="rtl"] .hscroll-progress span { transform-origin: right; } /* stats grid mirrors, but divider hairlines move to the other gap */ [dir="rtl"] .stat + .stat::before { left: auto; right: -1rem; } /* -------------------------------------------------------------------------- 10. Progress bars & scroll-reveal -------------------------------------------------------------------------- */ /* navbar reading-progress grows from the right */ [dir="rtl"] .scroll-progress { transform-origin: right; } /* CSS-fallback reveals: "left"/"right" keep their logical meaning */ html[dir="rtl"].js [data-reveal="left"] { transform: translateX(32px); } html[dir="rtl"].js [data-reveal="right"] { transform: translateX(-32px); } html[dir="rtl"].js [data-reveal].revealed, html[dir="rtl"].js [data-reveal].gsap-owned { transform: none; } @media (prefers-reduced-motion: reduce) { html[dir="rtl"].js [data-reveal] { transform: none; } } /* -------------------------------------------------------------------------- 11. Floating buttons & modals — deliberately KEPT at their physical positions: in RTL the browser scrollbar moves to the left edge, so the WhatsApp float and back-to-top stay bottom-right where they never collide with it. Lightbox prev/next arrows also stay physical (left arrow on the left) — image navigation is spatial, not textual. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 13. Review fixes — overlaps & unmirrored elements found in the RTL audit -------------------------------------------------------------------------- */ /* hero glass chips were pinned right, overlapping the right-aligned Arabic hero copy — move them to the left where the empty space now is */ [dir="rtl"] .hero-chips { right: auto; left: clamp(1.5rem, 5vw, 5rem); } /* hero overlay gradient: keep the opaque end under the (now right-aligned) copy so white text never sits on raw video */ [dir="rtl"] .hero { --grad-hero-overlay: linear-gradient(260deg, rgba(3, 13, 22, 0.94) 0%, rgba(6, 32, 50, 0.82) 42%, rgba(3, 13, 22, 0.42) 100%); } /* org-chart bus connectors: flex order reverses under RTL, so first/last child halves must swap or the bar overshoots the end nodes */ [dir="rtl"] .org-level--branched .org-node:first-child::after { left: 0; width: 50%; } [dir="rtl"] .org-level--branched .org-node:last-child::after { left: 50%; width: 50%; } /* preloader progress line: static position follows direction while the keyframes are physical — keep the whole track LTR so the sweep is smooth */ [dir="rtl"] .preloader-line { direction: ltr; } /* the global RTL list-padding flip outranks .dropdown's shorthand padding — restore both sides */ [dir="rtl"] .dropdown { padding-right: 0.6rem; padding-left: 0.6rem; } /* modal close button belongs at the leading corner for Arabic readers */ [dir="rtl"] .modal-close { right: auto; left: 0.8rem; } /* certificate seal check badge: mirror like every sibling badge */ [dir="rtl"] .cert-check { right: auto; left: -4px; } /* decorative glows composed against the ghost words — mirror them so the art direction stays balanced on dark sections */ [dir="rtl"] .section-navy::before { right: auto; left: -10%; } [dir="rtl"] .hero-blob { right: auto; left: -6rem; } [dir="rtl"] .hero-blob.two { left: auto; right: -8rem; } [dir="rtl"] .stats-band::before { right: auto; left: -20%; } [dir="rtl"] .cta-band::before { right: auto; left: -15%; } [dir="rtl"] .cta-band::after { left: auto; right: -10%; } [dir="rtl"] .page-hero::after { left: auto; right: 15px; } /* CMS content that falls back to another language resolves its own base direction via dir="auto" — align it to its resolved start edge */ [dir="rtl"] [dir="auto"] { text-align: start; } /* -------------------------------------------------------------------------- 14. Arabic type system — professional Arabic typography The Latin display scale is tuned for Space Grotesk: huge sizes, weight 800, line-height 1.12, stroked outlines. Arabic (Tajawal) is denser and carries ascenders/descenders that need air, and text-stroke breaks the connected script. This section retunes the whole scale for Arabic. -------------------------------------------------------------------------- */ /* Reading rhythm: Arabic needs taller lines everywhere */ [dir="rtl"] body { line-height: 1.85; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { font-weight: 700; /* Tajawal 800 is too heavy at display sizes */ line-height: 1.5; } /* Display scale: ~12% smaller than the Latin scale — Arabic glyphs read visually larger at equal em, and the tighter sizes keep lines from colliding at line-height 1.5 */ [dir="rtl"] h1 { font-size: clamp(2.2rem, 4.8vw, 3.7rem); } [dir="rtl"] h2 { font-size: clamp(1.75rem, 3.6vw, 2.7rem); } [dir="rtl"] h3 { font-size: clamp(1.25rem, 2.1vw, 1.55rem); } [dir="rtl"] .hero-title { font-size: clamp(2.4rem, 5.6vw, 4.7rem); line-height: 1.42; max-width: 22ch; } [dir="rtl"] .page-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); } /* The line-slide mask clips Arabic descenders (ي ع ح ...) — give them room */ [dir="rtl"] .hero-line { padding-bottom: 0.22em; margin-bottom: -0.14em; } /* Stroked outline display text breaks connected Arabic letterforms — render the same hierarchy as a translucent fill instead */ [dir="rtl"] .txt-outline { -webkit-text-stroke: 0; color: rgba(230, 242, 248, 0.4); } /* Decorative ghost words: same stroke problem, same cure */ [dir="rtl"] .page-hero-ghost { -webkit-text-stroke: 0; color: rgba(230, 242, 248, 0.06); } [dir="rtl"] .ghost-num { -webkit-text-stroke: 0; color: rgba(15, 34, 51, 0.05); } /* Body copy: a touch larger and airier for comfortable Arabic reading */ [dir="rtl"] .lead { font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 2; } [dir="rtl"] .article-body { line-height: 2; } [dir="rtl"] .article-body p { line-height: inherit; } [dir="rtl"] .section-head p, [dir="rtl"] .card p, [dir="rtl"] .two-col p { line-height: 1.9; } /* Small labels: Arabic has no capitals to carry a .76rem label — nudge up */ [dir="rtl"] .eyebrow { font-size: 0.85rem; font-weight: 500; } [dir="rtl"] .hero-eyebrow { font-size: 0.9rem; } /* Hero stat chips: calmer label, roomier lines */ [dir="rtl"] .hero-chip span { line-height: 1.7; font-weight: 400; }