/* droPrompt i18n styles — Arabic font + RTL overrides + toggle button. Loaded alongside i18n.js on every page. The only thing flipping layouts is plus body.is-rtl — browsers handle most of the work (flex, grid, text alignment) via the `dir` attribute alone. This file covers the spots where we need manual intervention (icons, margins that were hardcoded with left/right, the floating toggle itself). */ /* ── Arabic font ──────────────────────────────────────────────────────── Readex Pro is a contemporary Arabic + Latin variable sans-serif with great optical sizing. We only apply it when the page is in Arabic so English pages keep using the site's Geist stack. */ @import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600;700&display=swap'); html[lang="ar"], html[lang="ar"] body, body.is-rtl { font-family: 'Readex Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans Arabic', sans-serif !important; } /* Preserve monospace blocks (codeblocks, prompt output) — we do NOT want Arabic digits or shaping inside technical output. */ html[lang="ar"] code, html[lang="ar"] pre, html[lang="ar"] kbd, html[lang="ar"] samp, html[lang="ar"] .mono, html[lang="ar"] [class*="font-mono"] { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; direction: ltr; unicode-bidi: isolate; } /* ── RTL layout nudges ────────────────────────────────────────────────── Most modern CSS (flex, grid, logical properties) handles RTL cleanly. These rules cover a few places where we hardcoded left/right or rely on icon ordering. */ body.is-rtl .flip-rtl { transform: scaleX(-1); } /* Any ->arrow / chevron we use for "next" navigation should mirror so it points the natural reading direction. Add class="i18n-dir-icon" to any icon that should flip with language. */ body.is-rtl .i18n-dir-icon { transform: scaleX(-1); } /* Keep currency / numeric values LTR even inside Arabic paragraphs so things like "1,000 EGP" or "$10 USD/mo" don't get weird bidi flipping. */ body.is-rtl .ltr, body.is-rtl [data-ltr], body.is-rtl .plan-price, body.is-rtl .amount, body.is-rtl .ps-price { direction: ltr; unicode-bidi: isolate; text-align: right; } /* ── Floating language toggle ─────────────────────────────────────────── Docked at the BOTTOM-right (mirrored to bottom-left for RTL). Top-right was conflicting with existing page chrome (logos, sign-in buttons, etc.) on every page. Bottom-right is the universal "floating action" slot — never collides with anything. Pages can still opt out by placing
inside their own header — the engine will render there instead. */ .dp-lang-float { position: fixed; bottom: 18px; right: 18px; z-index: 100000; pointer-events: none; } body.is-rtl .dp-lang-float { right: auto; left: 18px; } /* ── The pill itself ── We use !important on background / color / border because most pages include a global `button { … }` reset (Tailwind preflight, normalize, custom resets) that would otherwise repaint our pill white-on-dark-text. The toggle has to look identical no matter which page hosts it. */ button.dp-lang-toggle, .dp-lang-toggle { pointer-events: auto !important; position: relative !important; display: inline-flex !important; align-items: center !important; gap: 9px !important; height: 40px !important; padding: 0 14px 0 6px !important; margin: 0 !important; border-radius: 999px !important; border: 1px solid rgba(231, 115, 26, 0.55) !important; background: #0e0e10 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important; color: #f4f4f4 !important; font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; line-height: 1 !important; text-transform: none !important; text-decoration: none !important; cursor: pointer !important; transition: border-color .15s, background .15s, transform .12s, box-shadow .15s !important; -webkit-tap-highlight-color: transparent; } button.dp-lang-toggle:hover, .dp-lang-toggle:hover { border-color: #e7731a !important; background: #161618 !important; transform: translateY(-1px) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 3px 8px rgba(231, 115, 26, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important; } button.dp-lang-toggle:focus-visible, .dp-lang-toggle:focus-visible { outline: 2px solid #e7731a !important; outline-offset: 2px !important; } .dp-lang-toggle .dp-lang-toggle-flag { font-family: 'Geist Mono', ui-monospace, monospace !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: 0.1em !important; background: #e7731a !important; color: #080808 !important; padding: 6px 10px !important; border-radius: 999px !important; text-transform: uppercase !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 32px !important; height: 28px !important; box-sizing: border-box !important; } .dp-lang-toggle .dp-lang-toggle-label { color: #f4f4f4 !important; font-weight: 600 !important; white-space: nowrap !important; } body.is-rtl .dp-lang-toggle .dp-lang-toggle-label { font-family: 'Readex Pro', 'Geist', ui-sans-serif, sans-serif !important; } /* Tiny status dot for "loading translations" state */ .dp-lang-toggle.is-loading::after { content: ''; position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #e7731a; box-shadow: 0 0 0 2px #0e0e10; animation: dpLangPulse 1.2s ease-in-out infinite; } body.is-rtl .dp-lang-toggle.is-loading::after { right: auto; left: 8px; } @keyframes dpLangPulse { 0%, 100% { opacity: 0.5; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } } @media (max-width: 520px) { .dp-lang-float { bottom: 14px; right: 14px; } body.is-rtl .dp-lang-float { right: auto; left: 14px; } button.dp-lang-toggle, .dp-lang-toggle { height: 38px !important; font-size: 12.5px !important; padding: 0 12px 0 5px !important; } .dp-lang-toggle .dp-lang-toggle-flag { font-size: 10px !important; padding: 5px 9px !important; min-width: 30px !important; height: 26px !important; } }