/* ============================================================ AL-SHARAFI HQ — Arabic Typography (Premium Geometric-Kufi) Scoped to [lang="ar"] / [dir="rtl"] pages. Loaded AFTER output.v4.css on /ar/* pages only. Primary font: Cairo · Fallbacks: IBM Plex Sans Arabic, Tajawal ============================================================ */ /* --- 1. Premium Arabic font stack (Arabic first) ------------ */ html[lang="ar"] { --font-arabic: "Cairo", "IBM Plex Sans Arabic", "Tajawal", "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; } html[lang="ar"], html[lang="ar"] body, html[lang="ar"] .font-sans, html[lang="ar"] .font-arabic, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6, html[lang="ar"] p, html[lang="ar"] a, html[lang="ar"] span, html[lang="ar"] li, html[lang="ar"] label, html[lang="ar"] button, html[lang="ar"] input, html[lang="ar"] textarea, html[lang="ar"] select { font-family: var(--font-arabic); } /* --- 2. Kill inherited letter-spacing (breaks Arabic joining) */ html[lang="ar"] *, html[lang="ar"] *::before, html[lang="ar"] *::after { letter-spacing: 0 !important; } /* --- 3. Wider line-height for Arabic ascenders & descenders -- */ html[lang="ar"] body { line-height: 1.85; } html[lang="ar"] p, html[lang="ar"] li, html[lang="ar"] a, html[lang="ar"] span { line-height: 1.85; } html[lang="ar"] .leading-relaxed { line-height: 1.9; } html[lang="ar"] .leading-snug { line-height: 1.65; } html[lang="ar"] .leading-tight { line-height: 1.5; } html[lang="ar"] .leading-none { line-height: 1.2; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.4; } /* --- 4. Visual-weight matched font sizes (EN ⇄ AR) ---------- */ /* Hero H1 — large (index hero) */ html[lang="ar"] h1.text-4xl { font-size: 40px; } @media (min-width: 40rem) { html[lang="ar"] h1.sm\:text-6xl { font-size: 64px; } } @media (min-width: 64rem) { html[lang="ar"] h1.lg\:text-7xl { font-size: 76px; } } /* Hero H1 — medium (legal, insights articles) */ html[lang="ar"] h1.text-3xl { font-size: 32px; } @media (min-width: 40rem) { html[lang="ar"] h1.sm\:text-4xl { font-size: 38px; } html[lang="ar"] h1.sm\:text-5xl { font-size: 50px; } } /* Section H2 */ html[lang="ar"] h2.text-3xl { font-size: 32px; } @media (min-width: 40rem) { html[lang="ar"] h2.sm\:text-5xl { font-size: 52px; } } /* Sub-headings / article H2 */ html[lang="ar"] h2.text-2xl { font-size: 26px; } @media (min-width: 40rem) { html[lang="ar"] h2.sm\:text-3xl { font-size: 32px; } } html[lang="ar"] article h2.text-lg, html[lang="ar"] h2.text-lg { font-size: 20px; } /* H3 */ html[lang="ar"] h3.text-lg { font-size: 19px; } html[lang="ar"] h3.text-base { font-size: 17px; } /* Body copy */ html[lang="ar"] .text-2xl { font-size: 25px; } html[lang="ar"] .text-xl { font-size: 21px; } html[lang="ar"] .text-lg { font-size: 19px; } html[lang="ar"] .text-base { font-size: 17px; } /* ============================================================ 5. RTL text-alignment guarantees The already makes `start` = right; these rules make the intent explicit so nothing can drift LTR. Elements that carry .text-center keep it (excluded via :not). ============================================================ */ html[lang="ar"] body { text-align: start; } /* Hero — centered by design (badge, h1, divider, CTA row) */ html[lang="ar"] #home { text-align: center; } /* Contact — prose, labels, inputs & list items stay start-aligned */ html[lang="ar"] #contact :where(p, li, dt, dd, label, .field-input, textarea, select):not(.text-center) { text-align: start; } /* ============================================================ 6. Physical → Logical property remap (RTL only) The AR templates reuse Tailwind's physical utilities that were written for the EN layout. Remapping under html[lang="ar"] makes each one direction-aware (inline-start/end), so the same class adapts without duplicating code. Every rule below was verified against every /ar/* page: table th, legal-nav, timeline, select chevron, decorative blobs. NOTE: .text-left/.text-right stay PHYSICAL on purpose — in RTL they already mirror correctly (left = end, right = start) and they drive the dt/dd + table mirrored-cell layout. ============================================================ */ /* Padding: physical side → logical inline side */ html[lang="ar"] .pl-6 { padding-inline-end: 1.5rem; } /* table th (company) */ html[lang="ar"] .pl-10 { padding-inline-end: 2.5rem; } /* select chevron (index contact) */ html[lang="ar"] .pr-4 { padding-inline-start: 1rem; } /* legal-nav */ html[lang="ar"] .pr-5 { padding-inline-start: 1.25rem; }/* legal lists */ html[lang="ar"] .pr-8 { padding-inline-start: 2rem; } /* timeline (about) */ /* Margin: physical side → logical inline side */ html[lang="ar"] .ml-2 { margin-inline-end: 0.5rem; } /* legal-nav numbers */ html[lang="ar"] .mr-auto { margin-inline-start: auto; } /* portfolio badge */ /* Positioning: absolute icons/blobs → logical insets */ html[lang="ar"] .left-4 { inset-inline-end: 1rem; } /* select chevron */ html[lang="ar"] .-right-24 { inset-inline-start: -6rem; } /* company blob */ html[lang="ar"] .-right-40 { inset-inline-start: -10rem; } /* section blobs */ html[lang="ar"] .-left-40 { inset-inline-end: -10rem; } /* contact blob */ /* Borders: side border → logical inline border */ html[lang="ar"] .border-r { border-inline-start-width: 1px; border-inline-start-style: var(--tw-border-style, solid); } html[lang="ar"] .border-r-2 { border-inline-start-width: 2px; border-inline-start-style: var(--tw-border-style, solid); } /* ============================================================ 7. Arabic buttons — perfect centering + diacritic headroom Cairo (Kufi) has tall ascenders (لا، ك) and deep descenders (ق، ص، ج، ي) plus harakat (ً ٌ ٍ). We give the label enough block padding so nothing is clipped, and force flex centering so the text sits exactly in the middle both axes. ============================================================ */ html[lang="ar"] .btn-gold, html[lang="ar"] .btn-ghost, html[lang="ar"] .btn-gold-outline { display: inline-flex; align-items: center; justify-content: center; text-align: center; padding-block: 1.05rem 1.2rem; /* extra bottom room for descenders */ line-height: 1.5; } /* .btn-gold clips its sheen via overflow:hidden — release it so Cairo ascenders/descenders are never cut off. */ html[lang="ar"] .btn-gold { overflow: visible; } /* ============================================================ 8. Visual polish — Arabic luxury refinements Micro-interactions & legibility on the black ink canvas. ============================================================ */ /* --- 8.1 Gold gradient, Arabic-safe -------------------------- The base .text-gold-gradient uses background-clip:text with a transparent fill. Cairo glyphs are tall and carry harakat, but background-clip:text paints only the glyph silhouettes, so nothing is ever clipped. We still harden the class for Arabic: • solid gold fallback when background-clip:text is unsupported • a deeper 5-stop gradient (135°) matching .btn-gold's sheen • a slow 9s shimmer (background-position drift) echoing the hero glow, disabled under prefers-reduced-motion background-size:220% guarantees every Arabic title stays fully covered while the sheen travels across the glyphs. */ html[lang="ar"] .text-gold-gradient { color: var(--color-gold-300); background-image: linear-gradient(135deg, var(--color-gold-100) 0%, var(--color-gold-300) 28%, var(--color-gold-500) 52%, var(--color-gold-600) 72%, var(--color-gold-200) 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; } @supports (background-clip: text) or (-webkit-background-clip: text) { html[lang="ar"] .text-gold-gradient { color: transparent; -webkit-text-fill-color: transparent; text-fill-color: transparent; animation: gold-shimmer 9s var(--ease-luxury) infinite; } } @keyframes gold-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce) { html[lang="ar"] .text-gold-gradient { animation: none; } } /* --- 8.2 Contrast on the black canvas ------------------------ .field-input::placeholder ships as 50%-alpha muted (~2.8:1) — too faint on the dark field. Silver-400 at 92% is ~9:1: clearly readable without shouting. .text-silver-600 (#7c828c, ~5:1 footer brand line) → #8b93a0 (~6.4:1). .text-muted gets a gentle lift too. */ html[lang="ar"] .field-input::placeholder { color: var(--color-silver-400); opacity: 0.92; } html[lang="ar"] .text-silver-600 { color: #8b93a0; } html[lang="ar"] .text-muted { color: #adb2ba; } /* --- 8.3 RTL dropdown (select) & form micro-interactions ----- */ html[lang="ar"] #contact select { cursor: pointer; text-align: start; } /* Native options must render RTL regardless of OS/browser locale */ html[lang="ar"] #contact select option { direction: rtl; text-align: right; background-color: var(--color-ink-800); color: var(--color-cream); } /* Guaranteed chevron clearance — left side in RTL (inline-end). Overrides any physical padding class so a long placeholder or selected label never collides with the arrow icon. */ html[lang="ar"] #contact select.field-input { padding-inline-end: 2.75rem; } /* Chevron micro-interaction: soft gold + 180° flip while open */ html[lang="ar"] #contact .relative > svg { transition: transform 0.35s var(--ease-luxury), color 0.35s ease; } html[lang="ar"] #contact select:hover + svg { color: var(--color-gold-300); } html[lang="ar"] #contact select:focus + svg { color: var(--color-gold-300); transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { html[lang="ar"] #contact .relative > svg { transition: none; } }