/* ════════════════════════════════════════════════════════════════ MyLeadDone – RTL Overrides Active when (Arabic locale) ════════════════════════════════════════════════════════════════ */ /* ── Arabic font ── */ [dir="rtl"] { --font-family: 'Noto Sans Arabic', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } [dir="rtl"] body { font-family: var(--font-family); } /* ── Global text alignment ── */ [dir="rtl"] .prob-mobile-card, [dir="rtl"] .solution-step-card, [dir="rtl"] .feature-card, [dir="rtl"] .hiw-details li, [dir="rtl"] .hiw-card, [dir="rtl"] .hiw-card--wide, [dir="rtl"] .bna-col, [dir="rtl"] .bna-col-header, [dir="rtl"] .pricing-features { text-align: right; } /* ── Hero badge ── */ /* ── Proof avatars overlap direction ── */ /* ── Hero orbs ── */ [dir="rtl"] .hero-orb-1 { right: auto; left: -80px; } [dir="rtl"] .hero-orb-2 { left: auto; right: -100px; } /* ── Hero notification chips ── */ [dir="rtl"] .hero-notif-1 { right: auto; left: -4px; } [dir="rtl"] .hero-notif-2 { left: auto; right: -4px; } @media (max-width: 767px) { [dir="rtl"] .hero-notif-1 { left: 8px; right: auto; } [dir="rtl"] .hero-notif-2 { right: 8px; left: auto; } } /* ── Solution stepper track line ── */ [dir="rtl"] .solution-steps::before { left: 12.5%; right: 12.5%; } /* ── Solution step mobile vertical line ── */ @media (max-width: 767px) { [dir="rtl"] .solution-step:not(:last-child)::after { left: auto; right: 18px; transform: translateX(50%); } } /* ── How It Works number badge (mobile) ── */ @media (max-width: 767px) { [dir="rtl"] .hiw-number { left: 50%; right: auto; transform: translateX(-50%); } [dir="rtl"] .hiw-card { padding: 28px 20px 24px; text-align: center; } } @media (max-width: 480px) { [dir="rtl"] .hiw-card { padding: 24px 16px 20px; } } /* ── Chat bubbles asymmetric radius ── */ /* ── Chat bubble user alignment ── */ /* ── Flow visual (Coming Soon section) ── */ /* ── Workflow attempt dots ── */ [dir="rtl"] .wfl-attempt-dots { padding-left: 0; padding-right: 1px; } [dir="rtl"] .wfl-attempt-dot-label { margin-left: 0; margin-right: 2px; } /* ── Workflow carrier chips ── */ [dir="rtl"] .wfl-carrier { padding: 3px 5px 3px 7px; } /* ── Desktop nav / header actions ── No flex-direction here: dir="rtl" already reverses these rows. The row-reverse rules that used to live here were double-flips that never ran, because this file was keyed to a .rtl class nothing ever set. */ /* ── Arabic display leading ── The Latin display scale sets .hero-title at a 0.95 line-height ratio — the line box is smaller than the type. Latin tolerates that; Arabic does not: ascenders (أ) and descenders (ج ي) collide across lines. Measured on the rendered /ar/ page, not assumed. */ [dir="rtl"] .hero-title { /* 1.22 was still too tight once the line box was also acting as an animation mask: Arabic descenders were being cut at the bottom of every line. Arabic display type wants roughly 1.45 at this size — the glyphs carry more vertical ink than Latin at the same point size, so the Latin display scale cannot simply be reused. */ line-height: 1.45; letter-spacing: 0; } [dir="rtl"] .section-title { line-height: 1.28; } /* ── Hero layout ── */ [dir="rtl"] .hero-content { text-align: right; } /* Subtitle is width-constrained — push to the right */ [dir="rtl"] .hero-subtitle { margin-left: auto; margin-right: 0; } /* No .hero-actions override: the base column/row layout mirrors correctly from dir="rtl" alone. The previous rules were a no-op plus an align-items:flex-end that resolves LEFT in RTL — backwards. They never ran, so nothing regressed. */ [dir="rtl"] .hero-proof-text { text-align: right; } /* ── Feature grid cards icon alignment ── */ [dir="rtl"] .feature-icon { margin-left: auto; margin-right: 0; } /* ── Footer grid ── */ [dir="rtl"] .footer-brand { text-align: right; } [dir="rtl"] .footer-links { text-align: right; } /* ── CTA section ── */ [dir="rtl"] .cta-content { text-align: right; } /* ── Before & After section RTL ── */ /* Do NOT use flex-direction: row-reverse on flex rows — dir="rtl" already auto-reverses flex row to right→left. row-reverse would double-reverse it back to LTR. */ /* Row body text: stat + label right-aligned */ [dir="rtl"] .bna-row-body { text-align: right; } /* ── Stats bar ── */ /* ── KPI section ── */ [dir="rtl"] .kpi-cities-label, [dir="rtl"] .kpi-city-nm { text-align: right; } [dir="rtl"] .kpi-city-val { text-align: left; } /* ── Integrations marquee — reverse animation for RTL ── */ [dir="rtl"] .marquee-track { animation-direction: reverse; } /* ── Language switcher button ── */ .lang-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text); font-size: 13px; font-weight: 600; font-family: var(--font-family); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; white-space: nowrap; } .lang-switch:hover { background: rgba(184, 51, 118, 0.05); border-color: rgba(184, 51, 118, 0.2); } /* ── Mobile nav RTL ── */ [dir="rtl"] .nav-mobile { text-align: right; } [dir="rtl"] .nav-mobile-actions { flex-direction: column; } /* ── Workflow section RTL ── */ /* Keep the workflow diagram always LTR (left → right flow) */ [dir="rtl"] .wfl-stage { direction: ltr; } /* Column labels right-aligned */ [dir="rtl"] .wfl-col-label { text-align: right; } /* Source cards: icon on the right */ [dir="rtl"] .wfl-node.wfl-source { flex-direction: row-reverse; text-align: right; } /* Action card headers (Phone, WhatsApp) — icon on the right */ [dir="rtl"] .wfl-action-header { flex-direction: row-reverse; } /* Delivery header — icon on the right */ [dir="rtl"] .wfl-delivery-header { flex-direction: row-reverse; } /* Tracking items — icon on the right, text left-aligned visually */ [dir="rtl"] .wfl-track-item { flex-direction: row-reverse; } [dir="rtl"] .wfl-track-text { text-align: right; } /* AI badge: flip from right to left */ [dir="rtl"] .wfl-ai-badge { right: auto; left: 8px; } /* Feedback label: icon on the right */ [dir="rtl"] .wfl-feedback-label { flex-direction: row-reverse; } /* ── Pricing section RTL ── */ /* Card content: default to right-align in Arabic */ [dir="rtl"] .pricing-card { text-align: right; } /* Keep header & price amount centered (design intent) */ [dir="rtl"] .pricing-header { text-align: center; } /* Note stays centered under the CTA button */ [dir="rtl"] .pricing-note { text-align: center; } /* ── General fixes for RTL flex gaps ── */ /* Do NOT add flex-direction: row-reverse here. dir="rtl" on already sets direction:rtl, which auto-reverses flex-direction:row to flow right→left. Adding row-reverse would double-reverse it back to LTR. */ [dir="rtl"] .pricing-features li { text-align: right; } [dir="rtl"] .pricing-features svg { margin-top: 2px; } /* ── Prevent FOUC: hide body until i18n is applied ── */ html:not([dir]) body { visibility: visible; }