/* ============================================================ RTL / ARABIC STYLESHEET Typography, mirroring, and tone adjustments for the Arabic version of the Archec Group site. Applied when . ============================================================ */ html[lang="ar"] body { font-family: var(--font-arabic); direction: rtl; text-align: right; line-height: 1.75; letter-spacing: 0; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4, html[lang="ar"] h5 { font-family: var(--font-arabic); font-weight: 900; text-transform: none; letter-spacing: 0; line-height: 1.2; } /* Display sizes scale down slightly in Arabic so Cairo Black doesn't overwhelm the layout at the same point-sizes as Archivo Black. */ html[lang="ar"] h1 { font-size: clamp(2.2rem, 6.4vw, 5.2rem); } html[lang="ar"] h2 { font-size: clamp(1.9rem, 4.4vw, 3.6rem); } html[lang="ar"] .eyebrow, html[lang="ar"] .breadcrumb, html[lang="ar"] .credential-pill, html[lang="ar"] .credential-badge { font-family: var(--font-arabic); font-weight: 700; letter-spacing: 0; text-transform: none; } /* Numerals, email addresses, phone numbers, SKU codes and anything explicitly LTR stay in Latin — opt-in via .num, .ltr, [dir=ltr]. */ html[lang="ar"] .num, html[lang="ar"] .ltr, html[lang="ar"] .phone-pill, html[lang="ar"] [dir="ltr"] { unicode-bidi: isolate; } html[lang="ar"] .site-logo__word strong, html[lang="ar"] .site-logo__word span { text-align: start; } /* ---------- Nav / icon mirroring ---------- */ /* Any inline SVG arrow inside a button or service-card link flips so it points in the reading direction (i.e. visually left in RTL). */ html[lang="ar"] .btn__arrow, html[lang="ar"] .btn svg:not(.phone-pill__icon svg), html[lang="ar"] .service-card__link svg, html[lang="ar"] .hse-duty__arrow, html[lang="ar"] .breadcrumb svg { transform: scaleX(-1); } /* Flex buttons: swap icon + text order */ html[lang="ar"] .btn { flex-direction: row-reverse; } /* Phone pill + any tel: link: the number is LTR-anchored so icon + digits stay in their natural LTR order inside an RTL page. */ html[lang="ar"] .phone-pill, html[lang="ar"] a[href^="tel:"], html[lang="ar"] .paint-hero__phones a { direction: ltr; unicode-bidi: isolate; } /* ---------- Header / nav ---------- */ /* Do NOT use flex-direction: row-reverse here. With direction:rtl on the body, flex items already flow right-to-left so the first DOM item (Home / lang-toggle) naturally lands closest to the reader's entry point — preserving English's Home→Contact semantic order. */ html[lang="ar"] .site-header__end { direction: rtl; } html[lang="ar"] .nav-list { direction: rtl; } /* ---------- Hero headline / tagline ---------- */ /* Text-shadow "stroke" still applies, but the big dark shadow offset goes slightly negative so the letter-shadows sit to the RIGHT of each glyph (which is the trailing side in RTL reading). */ html[lang="ar"] .hero h1 em, html[lang="ar"] .hero h1 .headline-gold, html[lang="ar"] .hero h1 .stroke { text-shadow: -3px 3px 0 var(--violet-900), -6px 6px 0 rgba(43, 20, 88, 0.25); } html[lang="ar"] .headline-gold { text-shadow: -3px 3px 0 var(--violet-900), -6px 6px 0 rgba(43, 20, 88, 0.35); } /* ---------- Marquee ---------- */ html[lang="ar"] .marquee__track { animation-direction: reverse; } /* ---------- Ribbons ---------- */ /* Hanging ribbons in English use left: 4%. In Arabic we hang from the opposite edge so the ribbon still reads as "pinned into the first corner your eye meets." */ html[lang="ar"] .ribbon--hang { left: auto; right: 4%; } /* ---------- Breadcrumb ---------- */ /* The breadcrumb uses a 32×2px dash via ::before. In RTL, with direction:rtl on the flex container, the dash naturally flips to the right edge of the row — no further mirror required. */ /* ---------- About-teaser + mega stat ---------- */ /* In English the stat card sits on the right (col 2). In Arabic we mirror so the text column still leads the reading order and the stat floats into the trailing (left) column. */ html[lang="ar"] .about-teaser__grid { direction: rtl; } html[lang="ar"] .about-teaser__stat .mega { direction: ltr; unicode-bidi: isolate; } html[lang="ar"] .about-teaser__stat small { direction: ltr; } /* ---------- Section head (ribbon + intro) ---------- */ html[lang="ar"] .section-head { direction: rtl; } /* ---------- Services pillars ---------- */ /* In English: illustration on the left, copy on the right. In Arabic we flip: illustration on the right, copy on the left — copy still leads the RTL reading order. */ html[lang="ar"] .pillar__grid { direction: rtl; } /* Service card bullet markers: base CSS uses ::before pseudos that already flip to the right edge under direction:rtl. Arrow icons get mirrored via the earlier rule. */ /* ---------- Contact: info-card grid ---------- */ /* Base layout is `grid-template-columns: 44px 1fr` — with direction:rtl the 44px icon track naturally places on the right, content on the left. Nothing extra needed, but make sure text aligns right and inline LTR tokens (emails, usernames) render properly. */ html[lang="ar"] .info-card { text-align: right; } html[lang="ar"] .info-card h4 { text-align: right; } html[lang="ar"] .info-card a[href^="mailto:"], html[lang="ar"] .info-card a[href^="tel:"], html[lang="ar"] .info-card a[href*="instagram"] { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* ---------- Contact form ---------- */ html[lang="ar"] .contact-form input, html[lang="ar"] .contact-form textarea, html[lang="ar"] .contact-form select, html[lang="ar"] .contact-form label { text-align: right; font-family: var(--font-arabic); direction: rtl; } html[lang="ar"] .contact-form input[type="email"], html[lang="ar"] .contact-form input[type="tel"] { direction: ltr; text-align: left; } /* ---------- Activity table ---------- */ /* Columns: code / activity / license. In RTL the first column (code) sits on the right, last column (license) on the left. Codes and license numbers stay LTR. */ html[lang="ar"] .activity-table { direction: rtl; } html[lang="ar"] .activity-table th, html[lang="ar"] .activity-table td { text-align: right; } html[lang="ar"] .activity-table td:first-child, html[lang="ar"] .activity-table td:last-child, html[lang="ar"] .activity-table th:first-child, html[lang="ar"] .activity-table th:last-child { direction: ltr; unicode-bidi: isolate; } html[lang="ar"] .activity-table th:first-child, html[lang="ar"] .activity-table td:first-child { text-align: right; } html[lang="ar"] .activity-table th:last-child, html[lang="ar"] .activity-table td:last-child { text-align: left; } /* ---------- Paint hero title ---------- */ /* On the Arabic page the h1 structure is:

الرسامون The Painters

Base .ar styles already set "block, smaller, magenta with gold shadow" — keep that as the secondary-subtitle treatment and just override the font + direction so the English subtitle renders correctly. */ html[lang="ar"] .paint-hero h1 { direction: rtl; text-align: right; } html[lang="ar"] .paint-hero h1 .ar { font-family: var(--font-display); direction: ltr; unicode-bidi: isolate; font-weight: 900; letter-spacing: -0.02em; } /* Paint shop product card specs: keep labels RTL and values LTR */ html[lang="ar"] .spec-list li { direction: rtl; } html[lang="ar"] .spec-list li strong { text-align: right; } html[lang="ar"] .spec-list li span { direction: ltr; unicode-bidi: isolate; text-align: left; } /* Paint shop filter chips row should read RTL (all → warm → red …) */ html[lang="ar"] .filter-chips { direction: rtl; } /* .shop-sticky is a tel: link — leave it on the LTR rule above so the "+968 9950 4012" digit groups don't get scrambled by bidi reordering. */ /* Mirror the sticky call-to-action from bottom-right to bottom-left so it sits on the reader's "trailing" side in RTL, same as the English page has it on the trailing side in LTR. */ html[lang="ar"] .shop-sticky { right: auto; left: 1.5rem; } @media (max-width: 640px) { html[lang="ar"] .shop-sticky { right: auto; left: 1rem; } } /* Paint swatch hex codes stay LTR regardless of direction */ html[lang="ar"] .swatch__hex { direction: ltr; font-family: var(--font-mono); unicode-bidi: isolate; } /* ---------- HSE duty list ---------- */ /* Each duty: [icon] [«««« arrow] [text]. We want icon at the end of the row in RTL (left edge), text leading from the right. */ html[lang="ar"] .hse-duty { text-align: right; direction: rtl; } html[lang="ar"] .hse-duty__num { margin-left: 1.25rem; margin-right: 0; } /* ---------- Projects: hex tiles ---------- */ html[lang="ar"] .hex-grid, html[lang="ar"] .projects-grid { direction: rtl; } /* ---------- Footer ---------- */ /* Same rule as the nav: `direction: rtl` already flips flex order — do NOT add `row-reverse` on top or you get a double-flip back to LTR order. Copyright stays on the right (first DOM), codes flow into the left (second DOM). Within `.footer-legal__codes` the first span (سجل تجاري) lands on the right, last span (شهادة) on the left — matching English's CR → TAX → CERT reading order. */ html[lang="ar"] .footer-grid, html[lang="ar"] .footer-legal, html[lang="ar"] .footer-legal__codes { direction: rtl; } html[lang="ar"] .footer-legal > div:first-child { text-align: right; } html[lang="ar"] .footer-legal__codes { text-align: left; } /* Each CR/TAX/CERT token contains Latin digits after Arabic labels. Keep each span internally bidi-isolated so the number group can't get chopped and re-ordered by neighbouring spans. */ html[lang="ar"] .footer-legal__codes span { unicode-bidi: isolate; } /* Footer column links (explore / activities / head office) read right-aligned in RTL without needing flex reversal. */ html[lang="ar"] .footer-col h4, html[lang="ar"] .footer-col li, html[lang="ar"] .footer-col a, html[lang="ar"] .footer-brand p { text-align: right; } /* Email / phone links in the footer column stay LTR so "info@…" and "+968 …" don't get bidi-fractured. */ html[lang="ar"] .footer-col a[href^="mailto:"], html[lang="ar"] .footer-col a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; display: inline-block; } html[lang="ar"] .footer-brand__mark { margin-inline-end: 0; margin-inline-start: 0; } /* ---------- Body text tightening for Arabic readability ---------- */ html[lang="ar"] p { font-size: 1.05em; } html[lang="ar"] .section-intro, html[lang="ar"] .paint-hero__lead, html[lang="ar"] .page-hero__lead, html[lang="ar"] .hero__sub { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.85; } /* ---------- Date / legal string isolation ---------- */ /* Anything that mixes Arabic text with a Latin number or email (e.g. "سجل تجاري 1035197" or "info@archecgroup.com") — keep those tokens bidi-isolated so they render cleanly. */ html[lang="ar"] .footer-legal__codes span { unicode-bidi: isolate; } /* Full-stops after LTR numbers in Arabic display headings are known to float to the wrong visual side. Strip them on the big hero titles only — body text keeps punctuation as-is. */ html[lang="ar"] .hero h1, html[lang="ar"] .page-hero h1, html[lang="ar"] .paint-hero h1 { /* punctuation kept in source HTML; no CSS strip needed here */ }