/* ============================================================ LEXCAP — Arabic / RTL overrides Loaded only on Arabic pages (which set ) Swaps fonts to Arabic families and mirrors directional layout. ============================================================ */ /* Arabic type: Amiri (serif display) + Cairo (sans body) */ :root[dir="rtl"] { --serif: "Amiri", "Cormorant Garamond", Georgia, serif; --sans: "Cairo", "Jost", -apple-system, sans-serif; } [dir="rtl"] body { font-size: 17px; line-height: 1.85; } /* Keep the whole brand mark as an unmirrored LTR unit (logos never flip) */ [dir="rtl"] .brandmark { direction: ltr; } [dir="rtl"] .brandmark .word .name { font-family: "Cormorant Garamond", Georgia, serif; } [dir="rtl"] .brandmark .word small { font-family: "Cairo", sans-serif; letter-spacing: 0; direction: rtl; } [dir="rtl"] .footer-brand .brandmark { direction: ltr; } /* Arabic headings sit better a touch larger / tighter line */ [dir="rtl"] .display { line-height: 1.2; } [dir="rtl"] .h-sec { line-height: 1.3; } [dir="rtl"] .eyebrow { letter-spacing: .04em; } [dir="rtl"] .navlink { letter-spacing: 0; font-size: .84rem; } [dir="rtl"] .btn { letter-spacing: .02em; } [dir="rtl"] .role, [dir="rtl"] .insight__date, [dir="rtl"] .article-meta, [dir="rtl"] .article-cat, [dir="rtl"] .tag, [dir="rtl"] .crumbs, [dir="rtl"] .stat .l, [dir="rtl"] .fcol h5, [dir="rtl"] .more { letter-spacing: 0; } /* ---- Directional icon flips (arrows point the RTL way) ---- */ [dir="rtl"] .btn svg, [dir="rtl"] .link-arrow svg, [dir="rtl"] .more svg, [dir="rtl"] .svc .more svg, [dir="rtl"] .insight .more svg { transform: scaleX(-1); } [dir="rtl"] .btn:hover svg, [dir="rtl"] .svc:hover .more svg { transform: scaleX(-1) translateX(4px); } [dir="rtl"] .link-arrow:hover { gap: 1em; } /* ---- Nav underline anchor ---- */ [dir="rtl"] .nav a.navlink::after { left: auto; right: 0; } /* ---- Mobile drawer slides in from the left ---- */ [dir="rtl"] .mobile-nav { transform: translateX(-100%); } [dir="rtl"] .mobile-nav.open { transform: translateX(0); } [dir="rtl"] .mobile-nav a .n { margin-right: 0; margin-left: .8rem; } /* ---- Pillar strip dividers ---- */ [dir="rtl"] .pillar-strip .cell { border-left: 0; border-right: 1px solid rgba(255,255,255,.08); } [dir="rtl"] .pillar-strip .cell:first-child { border-right: 0; } @media (max-width: 1080px) { [dir="rtl"] .pillar-strip .cell:nth-child(3) { border-right: 0; } } /* ---- Home hero: overlay dark on the right (text side in RTL). Uses the unflipped photo variant so Cairo Tower stays on the LEFT, clear of the darkened text side (mirror of the LTR treatment). ---- */ [dir="rtl"] .hero { background: linear-gradient(260deg, rgba(9,20,40,.94) 0%, rgba(11,24,48,.86) 30%, rgba(14,30,58,.55) 58%, rgba(14,30,58,.32) 100%), linear-gradient(0deg, rgba(9,20,40,.88) 0%, rgba(9,20,40,0) 38%), url("../assets/hero-bg-ar.jpg?v=20260718h") center 62%/cover no-repeat, var(--navy); } /* ---- Page hero: overlay dark on the right (text side) ---- */ [dir="rtl"] .page-hero::before { background: linear-gradient(270deg, rgba(9,20,40,.94) 0%, rgba(14,30,58,.86) 42%, rgba(14,30,58,.48) 100%); } /* ---- Insight card tag ---- */ [dir="rtl"] .insight__img .tag { left: auto; right: 16px; } /* ---- Steps: number + connector line ---- */ [dir="rtl"] .step .n { left: auto; right: 0; } [dir="rtl"] .step::before { left: auto; right: 2.4rem; } [dir="rtl"] .step:last-child::before { display: none; } /* ---- Prose tick lists ---- */ [dir="rtl"] .prose ul.ticks li { padding-left: 0; padding-right: 1.9rem; } [dir="rtl"] .prose ul.ticks li::before { left: auto; right: 0; border-left: 0; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); } /* ---- Founder feature ---- */ [dir="rtl"] .founder__photo::after { transform: translate(-16px,16px); } [dir="rtl"] .founder__quote { padding-left: 0; padding-right: 1.4rem; border-left: 0; border-right: 2px solid var(--gold); } @media (max-width: 860px) { [dir="rtl"] .founder__photo::after { transform: translate(-12px,12px); } } /* ---- Member emblem watermark ---- */ [dir="rtl"] .member__ph .emblem { right: auto; left: -16px; } /* ---- FAQ accordion marker ---- */ [dir="rtl"] .faq summary { padding: 1.5rem 0 1.5rem 3rem; } [dir="rtl"] .faq summary::after { right: auto; left: 0; } [dir="rtl"] .faq .ans { padding: 0 0 1.7rem 3rem; } /* ---- Detail rows (services / industries): index on the right ---- */ [dir="rtl"] .detail-row .sub { } /* ---- Footer hover nudge ---- */ [dir="rtl"] .fcol a:hover { padding-left: 0; padding-right: .35rem; } /* ---- Article body left-border accents (if any blockquotes) ---- */ [dir="rtl"] .article-body .article-disclaimer { } /* ---- Eyebrow decorative line spacing already flows via flex ---- */ /* ---- Arabic toggle label uses the Latin serif for the "EN" glyphs ---- */ [dir="rtl"] .lang-toggle { font-family: var(--sans); }