/* ============================================================ UNITED CONSTRUCTION — i18n.css ------------------------------------------------------------ English-mode overrides only. Arabic stays exactly as designed; nothing here is loaded or applied unless . English typography deliberately mirrors the reference brand look — a classic serif (Cormorant Garamond) standing in for the Arabic display faces, so the two languages read as the same brand rather than two different sites. ============================================================ */ html[dir="ltr"]{ --font-ar: "Cormorant Garamond", "Jost", ui-sans-serif, system-ui, serif; --font-ar-alt: "Cormorant Garamond", "Jost", ui-sans-serif, system-ui, serif; } /* Body copy reads better in Jost at small sizes than in a serif, so only the elements that were already using --font-ar/-alt for *display* type keep the serif; running body text (leads, list copy, form fields) switches to the sans for legibility. */ html[dir="ltr"] body{ font-family:var(--font-en); } html[dir="ltr"] .hero-title, html[dir="ltr"] .sec-title, html[dir="ltr"] .ab-title, html[dir="ltr"] .pa-title, html[dir="ltr"] .proj-title, html[dir="ltr"] .stat-label, html[dir="ltr"] .pillar h3, html[dir="ltr"] .service h3, html[dir="ltr"] .ab-why-card h3, html[dir="ltr"] .ab-offer-card h3, html[dir="ltr"] .afl-step h3, html[dir="ltr"] .jp-title, html[dir="ltr"] .pc-title, html[dir="ltr"] .pa-name, html[dir="ltr"] .partners-slogan, html[dir="ltr"] .fo-title, html[dir="ltr"] .contact-title{ font-family:var(--font-ar); letter-spacing:0; } /* Kickers / eyebrows / nav keep the sans for a crisp small-caps feel */ html[dir="ltr"] .sec-kicker, html[dir="ltr"] .ab-kicker, html[dir="ltr"] .nav-link, html[dir="ltr"] .lang-code, html[dir="ltr"] .btn{ font-family:var(--font-en); } /* Numerals / phone / email stay LTR always — already isolated via .ltr-num / .ltr in the markup, nothing to flip here. */ /* Bidi-mirrored icons: the back-arrow and rail chevrons read "backwards" once the whole page flips to LTR. */ html[dir="ltr"] .proj-back svg, html[dir="ltr"] .btn .arrow, html[dir="ltr"] .service-link svg, html[dir="ltr"] .pa-arrow{ transform:scaleX(-1); } html[dir="ltr"] .btn:hover .arrow{ transform:scaleX(-1) translateX(-5px); } /* rail-nav prev/next swap meaning under mirroring */ html[dir="ltr"] .rail-nav--prev svg, html[dir="ltr"] .rail-nav--next svg{ transform:scaleX(-1); } /* ------------------------------------------------------------ Hero — the white wash and the copy column both hug the RTL "right" side to sit behind the Arabic text block. In English the copy sits on the left instead, so the fog must mirror to the same side, at the same level, so it still reads as behind the text rather than on the empty side of the hero. */ @media (min-width:821px){ html[dir="ltr"] .hero-scrim{ background: linear-gradient(to right, rgba(255,252,246,.97) 0%, rgba(255,252,246,.95) 26%, rgba(255,251,244,.88) 40%, rgba(255,251,244,.62) 52%, rgba(255,250,242,.26) 64%, rgba(255,250,242,0) 76%), linear-gradient(to bottom, rgba(255,253,248,.40) 0%, rgba(255,253,248,.10) 9%, rgba(255,253,248,0) 20%), linear-gradient(to top, rgba(252,248,240,.55) 0%, rgba(252,248,240,.16) 14%, rgba(252,248,240,0) 30%); } html[dir="ltr"] .hero-copy{ text-align:left; } }