/* ============================================= ARKU — RTL & i18n Stylesheet Applied when is set. Handles: text alignment, flex reversal, Arabic typography, and layout mirroring. ============================================= */ /* ── ARABIC TYPOGRAPHY ──────────────────────── */ .lang-ar body, .lang-ar p, .lang-ar h1, .lang-ar h2, .lang-ar h3, .lang-ar h4, .lang-ar li, .lang-ar span, .lang-ar a, .lang-ar button, .lang-ar label, .lang-ar input, .lang-ar textarea, .lang-ar select { font-family: 'Cairo', sans-serif; } /* Display/hero titles use Cairo Light */ .lang-ar .hero__title, .lang-ar .process-section__title, .lang-ar .built-section__title, .lang-ar .factory-section__title, .lang-ar .about-teaser__title, .lang-ar .final-cta__title, .lang-ar .division-panel__title, .lang-ar .projects-section__title, .lang-ar .about-hero__title, .lang-ar .about-who__title, .lang-ar .about-what__title, .lang-ar .about-facility__title, .lang-ar .about-why__title, .lang-ar .about-cta__title, .lang-ar .about-pillar__title, .lang-ar .int-hero__title, .lang-ar .fo-hero__title { font-family: 'Cairo', sans-serif; font-weight: 300; letter-spacing: 0; /* Arabic doesn't use negative letter-spacing */ line-height: 1.2; } /* ── LANGUAGE SWITCHER ACTIVE STATE ─────────── */ .nav__lang span, .nav__mobile-lang span { opacity: 0.45; transition: opacity 0.2s; } .nav__lang span.lang-active, .nav__mobile-lang span.lang-active { opacity: 1; font-weight: 600; } .nav__lang span:not(.nav__lang-divider):hover, .nav__mobile-lang span:not(.nav__lang-divider):hover { opacity: 0.8; } /* ── NAV — RTL ──────────────────────────────── */ .lang-ar .nav { flex-direction: row-reverse; } .lang-ar .nav__links { flex-direction: row-reverse; } .lang-ar .nav__right { flex-direction: row-reverse; } .lang-ar .nav__lang { flex-direction: row-reverse; } /* ── HERO — RTL ─────────────────────────────── */ /* Mirror the absolute positions: headline → right, CTA → left */ .lang-ar .hero__body { left: auto; right: 8vw; text-align: right; } .lang-ar .hero__eyebrow { justify-content: flex-end; } .lang-ar .hero__eyebrow-text { text-align: right; } /* CTA button moves to the left corner */ .lang-ar .hero__cta-wrap { right: auto; left: 8vw; text-align: left; } /* Mobile: both snap to right edge in RTL */ @media (max-width: 768px) { .lang-ar .hero__body { left: 20px; right: 20px; text-align: right; } .lang-ar .hero__cta-wrap { left: auto; right: 20px; } } /* ── LABELS WITH DECORATIVE LINE ────────────── */ .lang-ar .t-label { flex-direction: row-reverse; } /* ── PROCESS SECTION ────────────────────────── */ .lang-ar .process-section__header { text-align: right; } .lang-ar .process-step { text-align: right; } .lang-ar .process-step__num { text-align: right; } /* ── BUILT / CAPABILITY CARDS ───────────────── */ .lang-ar .built-section__header { text-align: right; } .lang-ar .capability-card__content { text-align: right; } /* ── DIVISIONS ──────────────────────────────── */ .lang-ar .division-panel__content { text-align: right; } /* ── PROJECTS ───────────────────────────────── */ .lang-ar .projects-section__header { flex-direction: row-reverse; } .lang-ar .project-item__info { text-align: right; } /* ── FACTORY SECTION ────────────────────────── */ .lang-ar .factory-section__content { text-align: right; } /* ── ABOUT TEASER ───────────────────────────── */ .lang-ar .about-teaser__grid { direction: rtl; } .lang-ar .about-teaser__pillars { direction: rtl; } .lang-ar .pillar { text-align: right; } /* ── FINAL CTA ──────────────────────────────── */ .lang-ar .final-cta__content { text-align: center; /* Keep centered for CTA */ } .lang-ar .final-cta__buttons { flex-direction: row-reverse; justify-content: center; } /* ── FOOTER ─────────────────────────────────── */ .lang-ar .footer__top { direction: rtl; } .lang-ar .footer__links { text-align: right; } .lang-ar .footer__bottom { flex-direction: row-reverse; } .lang-ar .footer__tagline { text-align: right; } .lang-ar .footer__col-title { text-align: right; } .lang-ar .footer__contact-item { text-align: right; } /* ── ABOUT PAGE — RTL ───────────────────────── */ .lang-ar .about-hero__content { text-align: right; } .lang-ar .about-hero__label { flex-direction: row-reverse; } .lang-ar .about-hero__label::before { display: none; /* The ::before line goes on the right side via row-reverse */ } .lang-ar .about-hero__label::after { content: ''; display: block; width: 2rem; height: 1px; background: var(--c-gold); } .lang-ar .about-who__grid { direction: rtl; } .lang-ar .about-who__title, .lang-ar .about-who__desc { text-align: right; } .lang-ar .about-what__pillars { direction: rtl; } .lang-ar .about-pillar { text-align: right; } .lang-ar .about-pillar__item { flex-direction: row-reverse; text-align: right; } .lang-ar .about-pillar__item::before { content: '—'; } .lang-ar .about-facility__content { text-align: right; } .lang-ar .about-why__grid { direction: rtl; } .lang-ar .about-why__reason { text-align: right; } .lang-ar .about-why__reason-title, .lang-ar .about-why__reason-desc { text-align: right; } .lang-ar .about-cta { text-align: center; } .lang-ar .about-cta__buttons { flex-direction: row-reverse; justify-content: center; } /* ── CONTACT PAGE — RTL ─────────────────────── */ .lang-ar .contact-hero__content { text-align: right; } .lang-ar .form-field label { text-align: right; display: block; } .lang-ar input, .lang-ar textarea, .lang-ar select { text-align: right; direction: rtl; } /* ── INTERIORS PAGE — RTL ───────────────────── */ .lang-ar .int-hero__content { text-align: right; } .lang-ar .int-pillars__grid { direction: rtl; } .lang-ar .int-pillar { text-align: right; } .lang-ar .int-cta { text-align: center; } /* ── FITOUTS PAGE — RTL ─────────────────────── */ .lang-ar .fo-hero__content { text-align: right; } .lang-ar .fo-services__grid { direction: rtl; } .lang-ar .fo-service { text-align: right; } .lang-ar .fo-cta__inner { text-align: center; } /* ── PROJECTS PAGE — RTL ────────────────────── */ .lang-ar .proj-hero__content { text-align: right; } .lang-ar .proj-filter { flex-direction: row-reverse; } .lang-ar .projects-grid .project-item__info { text-align: right; } /* ── MOBILE MENU — RTL ──────────────────────── */ .lang-ar .nav__mobile-links { text-align: right; } .lang-ar .nav__mobile-footer { flex-direction: row-reverse; } .lang-ar .nav__mobile-lang { flex-direction: row-reverse; } /* ── BUTTONS — RTL ARROW FLIP ───────────────── */ .lang-ar .btn svg, .lang-ar .hero__cta-arrow, .lang-ar .btn-ghost-dark svg { transform: scaleX(-1); }