/* ═══════════════════════════════════════════════════════════════ ar.css — RTL Arabic overrides for Alps Air Conditioning Loaded only on the /ar/ version. Extends ../styles.css. KEY PRINCIPLE: dir="rtl" on already makes flex-direction:row flow right-to-left. Never add flex-direction:row-reverse here — that double-reverses everything back to LTR. ═══════════════════════════════════════════════════════════════ */ /* ── Arabic Font ────────────────────────────────────────────── */ body, .section-title, .section-label, .section-desc, .hero-title, .hero-subtitle, .hero-stat-lbl, .philosophy-text, .phi-body, .vmv-headline, .vmv-duo-title, .vmv-duo-text, .vmv-tab-name, .vmv-panel-name, .vmv-panel-text, .svc-heading, .svc-body, .svc-features li, .svc-tag, .step-heading, .step-pill, .step-card ul li, .space-info h3, .space-info p, .testi-quote, .testi-author-info, .faq-q, .faq-a p, .contact-form-title, .contact-form-sub, .cc-label, .cc-value, .direct-label, .direct-link, .whatsapp-cta-title, .whatsapp-cta-sub, .footer-col h4, .footer-col li a, .partners-title, input, textarea, button, label { font-family: 'Cairo', 'Inter', sans-serif !important; } /* Arabic doesn't use letter-spacing */ .section-label, .svc-tag, .step-pill, .space-badge, .hero-badge, .vmv-label-dim, .contact-badge { letter-spacing: 0 !important; } /* ── Marquees — force LTR on BOTH wrapper and track ─────────── */ /* Root cause: width:max-content tracks inside overflow:hidden wrappers. In RTL the browser RIGHT-ALIGNS the track inside the wrapper, so translateX(0) starts at the END of the track, not the start — creating a huge gap when the animation loops. Fixing direction:ltr on the track alone is not enough: the WRAPPER still right-aligns its child. Apply direction:ltr to both so the track is left-aligned and translateX(-50%) lands exactly at the SET 1 → SET 2 boundary → seamless loop. */ .marquee-strip, .cert-strip, .clients-marquee, .highlight-marquee, .cert-track, .clients-track, .highlight-marquee-track { direction: ltr; } /* ── Header ─────────────────────────────────────────────────── */ /* dir="rtl" already reverses the flex row: logo → right, actions → left. Only adjustments to text/dropdown needed. */ .nav-dropdown { left: auto; right: 0; text-align: right; } /* ── Hero ───────────────────────────────────────────────────── */ /* hero-container has text-align:center + align-items:center. Do NOT override text-align here — let hero stay centered. */ /* ── Cert strip items ───────────────────────────────────────── */ .cert-item-text { text-align: right; } /* ── About / Philosophy ─────────────────────────────────────── */ /* In RTL flex-column, flex-end = physical left — content sits on left */ .phi-inner { align-items: flex-end; } /* Match the text block's box so the heading starts on the same edge as the paragraph's first character (right edge in RTL) */ .phi-brand-mark { text-align: right; width: 100%; max-width: 640px; } .phi-text-wrap { text-align: right; } /* ── VMV Section ────────────────────────────────────────────── */ .vmv-hdr { text-align: right; } .vmv-duo-card { text-align: right; clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%); } /* Watermark number: move from physical right (where icon sits in RTL) to physical left */ .vmv-duo-watermark { right: auto; left: 1.5rem; } /* ── Values Wheel (Arabic) ──────────────────────────────────── */ /* vals-wheel has direction:ltr so RTL does not auto-flip columns. Values 01–03 are in vals-right-col (3 items); add row 3 placement. */ .vals-right-col .val-row:nth-child(3) { grid-column: 3; grid-row: 3; } /* Arabic text should read right-to-left inside the LTR grid */ .vals-wheel .val-text { text-align: right; } /* ── Services ───────────────────────────────────────────────── */ .section-header { text-align: right; } /* In RTL flex row the svc layout is already alternated correctly: even cards → img RIGHT, content LEFT odd cards → content RIGHT (order:1), img LEFT (order:2) Only fix the gradient edge (::before pseudo-element position). */ /* Even cards (0,2,4): content is on the LEFT — gradient on RIGHT edge */ .svc-content-pane::before { left: auto; right: 0; background: linear-gradient(to left, rgba(248,250,255,0.95) 0%, rgba(248,250,255,0.6) 40%, transparent 100%); } /* Odd cards (1,3,5): content is on the RIGHT — gradient on LEFT edge */ .svc-card[data-svc="1"] .svc-content-pane::before, .svc-card[data-svc="3"] .svc-content-pane::before, .svc-card[data-svc="5"] .svc-content-pane::before { right: auto; left: 0; background: linear-gradient(to right, rgba(248,250,255,0.95) 0%, rgba(248,250,255,0.6) 40%, transparent 100%); } .svc-content-pane { text-align: right; } .svc-features { padding-right: 0; } /* Service number: flip decorative big number to left corner */ .svc-num-bg { right: auto; left: -0.5rem; } /* ── Spaces / Project Grid ──────────────────────────────────── */ .spaces-header { text-align: right; } .proj-filters { justify-content: flex-end; } .pc-badge { left: auto; right: 0.85rem; } .pc-count { right: auto; left: 0.85rem; } .pc-info-overlay { text-align: right; } .pc-loc { flex-direction: row-reverse; justify-content: flex-end; } /* ── Journey / Process ──────────────────────────────────────── */ /* In RTL: normal step (.journey-step): label → RIGHT (RTL first) card → LEFT reverse step (.journey-step.reverse): English uses row-reverse. In RTL context, row-reverse = LTR flow, so card ends up LEFT and label RIGHT → BOTH steps look the same (no alternating). Fix: reset reverse step to row so RTL flow gives correct alternating. */ .journey-step.reverse { flex-direction: row; } .journey-track { padding-left: 0; padding-right: 4rem; } /* Label alignment: right side labels stay right, left side labels stay left */ .step-side.step-label-side { text-align: right; align-items: flex-end; } .step-side.step-label-side.step-label-right { text-align: left; align-items: flex-start; } /* ── Testimonials ───────────────────────────────────────────── */ .testi-quote { text-align: right; } .testi-author-info { text-align: right; } /* ── Partners ───────────────────────────────────────────────── */ .partners-header { text-align: center; } /* ── FAQ ────────────────────────────────────────────────────── */ /* .faq-q uses justify-content:space-between. In RTL row: question text (1st child) → RIGHT side ✓ + icon (last child) → LEFT side ✓ No flex-direction override needed. */ .faq-q { text-align: right; } .faq-a-inner { text-align: right; } /* ── Contact ────────────────────────────────────────────────── */ .contact-card-item { text-align: right; } .contact-info-col { text-align: right; } .direct-methods { align-items: flex-end; } .direct-item { text-align: right; } /* Phone numbers: isolate as LTR so space-separated digit groups (e.g. "0500 919 933") are not reordered by the bidi algorithm. The wrappers in HTML are the primary fix; this CSS reinforces it on the container elements. */ .cc-value { direction: ltr; unicode-bidi: isolate; } .direct-link { direction: ltr; unicode-bidi: isolate; } /* Form floating labels: move anchor from left to right */ .input-group label { left: auto; right: 1.1rem; transform-origin: right top; } .input-group input:focus ~ label, .input-group input:not(:placeholder-shown) ~ label, .input-group textarea:focus ~ label, .input-group textarea:not(:placeholder-shown) ~ label { transform: translateY(-1.45rem) translateX(0.25rem) scale(0.78); } .input-group input, .input-group textarea { text-align: right; padding-left: 1.1rem; padding-right: 1.1rem; } /* ── Footer ─────────────────────────────────────────────────── */ /* In RTL row: footer-brand-col (1st child) → RIGHT, link cols follow to the LEFT — correct RTL layout. */ .footer-brand-col { text-align: right; } .footer-socials { justify-content: flex-start; } .footer-col { text-align: right; } .footer-bottom { text-align: center; direction: rtl; } /* ── Project Detail Modal ───────────────────────────────────── */ /* In RTL the scope-col (1st child) sits in the RIGHT grid column; swap border-right → border-left so the divider stays between cols */ .pd-scope-col { border-right: none; border-left: 1px solid var(--border-light); } .pd-close { right: auto; left: 1.1rem; } .pd-hero-overlay { text-align: right; } .pd-section-label { text-align: right; } .pd-scope-item { text-align: right; } .pd-gallery-btn { direction: rtl; } @media (max-width: 768px) { .pd-scope-col { border-left: none; } } /* ── Scroll-progress bar ────────────────────────────────────── */ #scroll-progress { left: 0; right: auto; } /* ── Flipped overlay gradients (angle = 360° − original) ────── */ /* Horizontal mirror formula: negate the angle (360° − θ). This moves the dark/light sides to their physically opposite edges. */ /* philosophy::before: 115° → 245° — dark moves from lower-right to lower-left */ .philosophy-section::before { background: linear-gradient(245deg, rgba(0,10,35,0.25) 0%, rgba(0,18,58,0.68) 48%, rgba(0,10,38,0.90) 100%); } /* vmv::before: 108° → 252° */ .vmv-section::before { background: linear-gradient(252deg, rgba(0,8,32,0.90) 0%, rgba(0,14,48,0.75) 45%, rgba(0,8,28,0.55) 100%); } /* vmv-vals-wrap::before: 165° → 195° */ .vmv-vals-wrap::before { background: linear-gradient(195deg, rgba(0,8,38,0.78) 0%, rgba(0,14,55,0.68) 50%, rgba(0,6,30,0.85) 100%); } /* ── Flipped background images (RTL mirror) ─────────────────── */ .philosophy-section { background: url('../about-ar.webp') center center / cover no-repeat fixed; } .vmv-section { background: url('../services-ar.webp') center 35% / cover no-repeat fixed; } .vmv-vals-wrap { background: url('../values-ar.webp') center center / cover no-repeat fixed; } .services-section { background: linear-gradient(185deg, rgba(0,10,42,0.84) 0%, rgba(0,8,35,0.70) 38%, rgba(0,5,28,0.52) 100%), url('../our-services-ar.webp') center center / cover no-repeat fixed; } .journey-section { background: linear-gradient(210deg, rgba(0,6,22,0.78) 0%, rgba(0,12,38,0.66) 45%, rgba(0,8,28,0.80) 100%), url('../steps-ar.webp') center center / cover no-repeat fixed; } .testimonials-section { background: linear-gradient(210deg, rgba(0,5,20,0.82) 0%, rgba(0,10,35,0.70) 50%, rgba(0,6,24,0.84) 100%), url('../reviews-ar.webp') center center / cover no-repeat fixed; } .partners-section { background: linear-gradient(210deg, rgba(0,5,20,0.82) 0%, rgba(0,10,35,0.70) 50%, rgba(0,6,24,0.84) 100%), url('../reviews-ar.webp') center center / cover no-repeat fixed; } .faq-section { background: linear-gradient(210deg, rgba(0,5,20,0.80) 0%, rgba(0,10,36,0.68) 50%, rgba(0,6,24,0.82) 100%), url('../faq-ar.webp') center center / cover no-repeat fixed; } .contact-section { background: linear-gradient(210deg, rgba(0,5,20,0.78) 0%, rgba(0,12,38,0.65) 50%, rgba(0,6,24,0.80) 100%), url('../contact-ar.webp') center center / cover no-repeat fixed; } /* ── Mobile overrides ───────────────────────────────────────── */ @media (max-width: 768px) { .main-nav.open .nav-links { text-align: right; } .contact-form-row { flex-direction: column; } .footer-grid { flex-direction: column; } .journey-track { padding-right: 2rem; } /* On mobile, col layout for phi-grid is fine as-is */ } /* ── Mobile sticky background layers: Arabic image variants ──── */ @media (max-width: 1024px) { .vmv-section > .section-bgfix { background: url('../services-ar.webp') center 35% / cover no-repeat; } .services-section .section-bgfix { background: linear-gradient(175deg, rgba(0,10,42,0.84) 0%, rgba(0,8,35,0.70) 38%, rgba(0,5,28,0.52) 100%), url('../our-services-ar.webp') center center / cover no-repeat; } .journey-section .section-bgfix { background: linear-gradient(150deg, rgba(0,6,22,0.78) 0%, rgba(0,12,38,0.66) 45%, rgba(0,8,28,0.80) 100%), url('../steps-ar.webp') center center / cover no-repeat; } .faq-section .section-bgfix { background: linear-gradient(150deg, rgba(0,5,20,0.80) 0%, rgba(0,10,36,0.68) 50%, rgba(0,6,24,0.82) 100%), url('../faq-ar.webp') center center / cover no-repeat; } .contact-section .section-bgfix { background: linear-gradient(150deg, rgba(0,5,20,0.78) 0%, rgba(0,12,38,0.65) 50%, rgba(0,6,24,0.80) 100%), url('../contact-ar.webp') center center / cover no-repeat; } } /* Arabic image variants for the remaining mobile bgfix layers */ @media (max-width: 1024px) { .philosophy-section .section-bgfix { background: url('../about-ar.webp') center center / cover no-repeat; } .vmv-vals-wrap .section-bgfix { background: linear-gradient(165deg, rgba(0,8,38,0.78) 0%, rgba(0,14,55,0.68) 50%, rgba(0,6,30,0.85) 100%), url('../values-ar.webp') center center / cover no-repeat; } .testimonials-section .section-bgfix, .partners-section .section-bgfix { background: linear-gradient(150deg, rgba(0,5,20,0.82) 0%, rgba(0,10,35,0.70) 50%, rgba(0,6,24,0.84) 100%), url('../reviews-ar.webp') center center / cover no-repeat; } } /* ── Values wheel on mobile (AR): rows pack right, number trails on the right, text right-aligned. The wheel itself stays LTR, so the English-page order rules are undone here. ── */ @media (max-width: 900px) { /* AR markup keeps 04-05 in the first column; stack 01-03 first on mobile */ .vals-left-col { order: 2; } .vals-right-col { order: 1; } .vals-side-col .val-row { justify-content: flex-end; } .vals-left-col .val-row .val-connector-left { order: 1; } .vals-right-col .val-row .val-connector-right { order: 1; } .vals-wheel .val-text-left, .vals-wheel .val-text-right { text-align: right; } }