/* ============================================ RTL OVERRIDES ──────────────────────────────────────────── PHILOSOPHY: The site uses `direction: rtl` on + logical CSS properties (margin-inline, padding-inline, inset-inline, grid-template-columns). That alone mirrors 95% of the layout for free. This file ONLY overrides things that are physical, not logical: • gradients with hard-coded direction (to left/right / degrees) • physical borders (border-left/right) where needed • transform arrows that need flipping • fixed-position offsets (left/right) ============================================ */ [dir="rtl"] body { font-family: 'IBM Plex Sans Arabic', sans-serif; } /* ─── HERO OVERLAY — flip horizontal/diagonal gradients for RTL ─────────── */ /* Dark mode: 135deg → 225deg (mirror diagonal) */ [dir="rtl"][data-theme="dark"] .hero-overlay { background: linear-gradient(225deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.6) 60%, rgba(204,0,0,0.06) 100%); } /* Light mode: 90deg → 270deg (mirror horizontal) so the opaque side stays under the text */ [dir="rtl"][data-theme="light"] .hero-overlay { background: linear-gradient(270deg, rgba(247,246,242,0.85) 0%, rgba(247,246,242,0.6) 60%, rgba(247,246,242,0.2) 100%); } /* ─── ABOUT SPLIT — flip image-edge gradient ─────────────────────────────── */ [dir="rtl"] .about-img-overlay { background: linear-gradient(to left, transparent 60%, var(--bg)); } [dir="rtl"] .about-text-col { border-left: none; border-right: 0.5px solid var(--border); } /* ─── LEFT/RIGHT ACCENT BARS — flip sides ────────────────────────────────── */ [dir="rtl"] .founder-quote { border-left: none; border-right: 2px solid var(--accent); padding-left: 0; padding-right: 24px; } [dir="rtl"] .phi-item { border-left: none; border-right: 1px solid var(--accent); padding-left: 0; padding-right: 12px; } [dir="rtl"] .case-quote { border-left: none; border-right: 2px solid var(--accent); padding-left: 0; padding-right: 36px; } /* ─── STATS / META / FOOTER — flip column dividers ───────────────────────── */ [dir="rtl"] .stats-band .stat { border-right: none; border-left: 0.5px solid var(--border); } [dir="rtl"] .stats-band .stat:last-child { border-left: none; } [dir="rtl"] .meta-item { border-right: none; border-left: 0.5px solid var(--border); } [dir="rtl"] .meta-item:last-child { border-left: none; } /* ─── CONTACT PAGE — flip column divider ─────────────────────────────────── */ [dir="rtl"] .contact-left { border-right: none; border-left: 0.5px solid var(--border); } /* ─── ARROWS — flip the glyph so → reads as ← in RTL ────────────────────── */ [dir="rtl"] .svc-arrow, [dir="rtl"] .blog-arrow, [dir="rtl"] .post-arrow { transform: scaleX(-1); } [dir="rtl"] .svc-row:hover .svc-arrow, [dir="rtl"] .blog-card:hover .blog-arrow, [dir="rtl"] .post-card:hover .post-arrow { transform: scaleX(-1) translateX(4px); } /* ─── SERVICE-ROW HOVER PUSH — flip the physical padding-left → right ────── */ [dir="rtl"] .svc-row:hover { padding-left: 0; padding-right: 12px; } [dir="rtl"] .svc-row::before { left: auto; right: 0; } /* ─── POSITIONING: scroll indicator & chat widget ────────────────────────── */ [dir="rtl"] .scroll-indicator { left: auto; right: 40px; } [dir="rtl"] .chat-trigger { left: 28px; right: auto; } [dir="rtl"] .chat-window { left: 28px; right: auto; } [dir="rtl"] .chat-msg.user { align-self: flex-start; } [dir="rtl"] .chat-msg.assistant { align-self: flex-end; } [dir="rtl"] .chat-input { text-align: right; direction: rtl; } /* ─── LANG BUTTON — keep EN/Latin words in Latin sans font under RTL ────── */ [dir="rtl"] .lang-btn-target { font-family: var(--font-sans); } /* ─── ARABIC LABEL SIZES — bump small eyebrow/meta labels for readability ── Reasoning: Arabic letterforms with diacritics render harder than Latin at 10-12px. Also reduce wide letter-spacing (which works for Latin all-caps but breaks Arabic letter connections and ligatures). */ [dir="rtl"] .sec-label, [dir="rtl"] .page-hero-label, [dir="rtl"] .faq-group-label, [dir="rtl"] .see-all, [dir="rtl"] .t-attr, [dir="rtl"] .legal-meta { font-size: 14px; letter-spacing: 0.04em; } [dir="rtl"] .hero-eyebrow, [dir="rtl"] .founder-name { font-size: 15px; letter-spacing: 0.04em; } [dir="rtl"] .work-index, [dir="rtl"] .case-index, [dir="rtl"] .post-meta { font-size: 13px; letter-spacing: 0.04em; } [dir="rtl"] .contact-meta-label { font-size: 12px; letter-spacing: 0.04em; } /* Philosophy cards — body text bumped substantially for Arabic readability */ /* Homepage uses .phi-item; About page uses .phi-pillars-grid > .process-step */ [dir="rtl"] .phi-item h4, [dir="rtl"] .phi-pillars-grid .step-num { font-size: 15px; } [dir="rtl"] .phi-item p, [dir="rtl"] .phi-pillars-grid .process-step p { font-size: 14px; line-height: 1.8; } /* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */ @media (max-width: 768px) { [dir="rtl"] .scroll-indicator { left: auto; right: 20px; } [dir="rtl"] .chat-trigger { left: 20px; right: auto; } [dir="rtl"] .chat-window { left: 20px; right: auto; } }