/* ============================================================ rtl.css — RTL (right-to-left) overrides for Arabic mode Triggered by `` which i18n.js sets when the user picks Arabic. Body also gets class `lang-ar` for more specific targeting. Strategy: keep the LTR base CSS as the source of truth, only override what genuinely needs to mirror in RTL. Most modern layouts (flex / grid) already handle RTL correctly via the `dir` attribute. We only override things that use physical positioning (margin-left, padding-right, etc.). Phase 18 scope: landing page + thank-you + email modal + chat widget. Demo flow + risk report RTL = Phase 19. ============================================================ */ /* ── Global text alignment for Arabic ── */ html[dir="rtl"] body { font-family: 'Inter', 'Segoe UI', Tahoma, Arial, sans-serif; /* Inter has reasonable Arabic glyph coverage; Tahoma is the classic Windows Arabic fallback; Segoe UI has good Arabic on Windows. */ } html[dir="rtl"] { text-align: right; } /* Inline links that had margin-left adjustments need flipping */ html[dir="rtl"] .landing-alt-cta { text-align: center; } /* ── Nav: language toggle in RTL ── */ html[dir="rtl"] .landing-nav-inner { /* flexbox auto-mirrors with dir="rtl" — no override needed */ } /* Lang toggle stays LTR even in Arabic mode (EN/AR labels are Latin) */ html[dir="rtl"] .landing-lang-toggle { direction: ltr; } /* ── Hero ── */ html[dir="rtl"] .landing-headline { /* keep heading flowing right-to-left */ } html[dir="rtl"] .landing-cta-row { /* flex-direction: row is auto-mirrored */ } /* CTAs: arrow character flips visually for RTL */ html[dir="rtl"] .landing-cta span[aria-hidden="true"] { display: inline-block; /* keep arrow as written in the dictionary (we write ← for AR) — no transform needed */ } /* ── Hero browser mockup ── */ /* The browser-bar dots (red/yellow/green) live on the left in macOS; in RTL we mirror them to keep the visual familiar to RTL readers as "where action buttons live". Actually keep them as-is so the mockup still reads as a macOS browser window — this is a recognizable visual. */ html[dir="rtl"] .landing-browser-bar { direction: ltr; } html[dir="rtl"] .landing-mock-row { /* flex auto-mirrors */ } html[dir="rtl"] .landing-mock-row-icon { margin-left: 0; margin-right: 0; /* gap handles spacing in modern flex */ } /* The "Apply fix →" arrow in RTL would point right; we wrote it as ← in the dictionary. Just ensure the button doesn't have explicit margins that fight. */ html[dir="rtl"] .landing-mock-apply { margin-left: 0; margin-right: auto; } /* ── Pain stat / outcome cards / how-it-works ── */ /* These are mostly center-aligned text blocks — auto-handles via text-align: right */ html[dir="rtl"] .landing-pain-headline, html[dir="rtl"] .landing-pain-sub, html[dir="rtl"] .landing-section-title, html[dir="rtl"] .landing-section-sub, html[dir="rtl"] .landing-insight-headline, html[dir="rtl"] .landing-insight-sub, html[dir="rtl"] .landing-final-headline, html[dir="rtl"] .landing-final-sub { text-align: center; /* match LTR design intent: centered sections */ } html[dir="rtl"] .landing-outcome-card, html[dir="rtl"] .landing-how-step { text-align: right; } html[dir="rtl"] .landing-outcome-title, html[dir="rtl"] .landing-outcome-body, html[dir="rtl"] .landing-how-name, html[dir="rtl"] .landing-how-body { text-align: right; } /* ── Pricing card ── */ html[dir="rtl"] .landing-price-card { text-align: center; } html[dir="rtl"] .landing-price-features { text-align: right; padding-right: 0; padding-left: 0; list-style: none; } html[dir="rtl"] .landing-price-features li { /* Move the checkmark to the right side */ display: flex; align-items: flex-start; gap: 8px; } html[dir="rtl"] .landing-price-features .landing-check { order: 0; /* checkmark first in RTL = visually on the right */ } html[dir="rtl"] .landing-price-amount { display: flex; flex-direction: row-reverse; justify-content: center; gap: 6px; } /* ── Express interest section ── */ html[dir="rtl"] .landing-express-interest { text-align: center; } html[dir="rtl"] .landing-express-interest-form { /* email input + button - keep email input LTR (emails are Latin), button RTL */ } html[dir="rtl"] .landing-express-interest-input { direction: ltr; /* emails read LTR even in Arabic UI */ text-align: left; } /* ── Testimonial ── */ html[dir="rtl"] .landing-quote-text { text-align: center; } html[dir="rtl"] .landing-quote-attr { text-align: center; } /* ── Footer ── */ html[dir="rtl"] .landing-footer-grid { text-align: right; } html[dir="rtl"] .landing-footer-col a { text-align: right; } /* ── Email signup modal (modals.js) ── */ html[dir="rtl"] .ms-signup-input, html[dir="rtl"] .ms-lead-form input[type="email"] { direction: ltr; text-align: left; } html[dir="rtl"] .ms-signup-footer, html[dir="rtl"] .ms-signup-label, html[dir="rtl"] .ms-signup-sub { text-align: right; } /* CTA arrow in modal — we use → and ← in the dictionary; no transform needed */ /* ── Chat widget (meetrisk.js) ── */ /* The bubble lives in bottom-right (LTR) by default. In RTL we move it to the bottom-LEFT corner for natural Arabic UX (icons follow reading direction; the chat icon should be where the user's eye naturally lands). */ html[dir="rtl"] .meetrisk-root { right: auto; left: 24px; } html[dir="rtl"] .meetrisk-bubble { /* Re-order: icon on the right, text on the left in RTL */ flex-direction: row-reverse; } html[dir="rtl"] .meetrisk-bubble-text { align-items: flex-end; /* labels right-aligned */ } html[dir="rtl"] .meetrisk-panel { right: auto; left: 0; text-align: right; } html[dir="rtl"] .meetrisk-head { flex-direction: row-reverse; } html[dir="rtl"] .meetrisk-input-row { flex-direction: row-reverse; } html[dir="rtl"] .meetrisk-input { text-align: right; } html[dir="rtl"] .meetrisk-message { text-align: right; } html[dir="rtl"] .meetrisk-chip { text-align: right; } /* ── Language toggle button styling (works in both directions) ── */ .landing-lang-toggle { display: inline-flex; background: var(--bg-elevated, #F4F6FA); border: 1px solid var(--border, #E5E7EE); border-radius: 999px; padding: 2px; margin-right: 8px; } .landing-lang-btn { appearance: none; background: transparent; border: 0; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text-secondary, #6B7080); cursor: pointer; font-family: inherit; transition: background 150ms ease, color 150ms ease; letter-spacing: 0.02em; } .landing-lang-btn:hover { color: var(--text-primary, #0F111C); } .landing-lang-btn.is-active { background: var(--accent, #2EC4B6); color: #fff; } /* ── Number numerals ── Arabic mode uses Eastern Arabic numerals in some places (we wrote them directly in the dictionary, e.g. "٤ دقائق"). For numerals in the dictionary strings, they render as written. For numerals in the JS-generated content (slider values, tile counts), we keep Latin numerals — easier to scan and already universal in KSA digital products. */