/* StockQuest i18n: language switcher + RTL overrides shared across all pages */ /* * Full EN/AR support is live. The switcher is shown everywhere. * Use [data-lang="ar"] on (set by i18n.js) plus [dir="rtl"] * for any RTL-specific tweaks. */ /* ─── Switcher (small pill in topbar) ────────────────────────── */ .lang-switch { position: relative; display: inline-flex; align-items: center; font-family: inherit; z-index: 1000; } .lang-switch--reenabled { position: relative; display: inline-flex; align-items: center; font-family: inherit; } .lang-switch .lang-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 8px; font-size: 12px; font-weight: 600; color: #1F2738; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; letter-spacing: 0.04em; } .lang-switch .lang-btn:hover { border-color: #C24B19; color: #C24B19; background: #fff; } .lang-switch .lang-btn svg { opacity: 0.6; transition: transform 0.18s ease; } .lang-switch[data-open="true"] .lang-btn svg { transform: rotate(180deg); } .lang-switch .lang-menu { position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border: 1px solid rgba(15, 23, 42, 0.10); border-radius: 10px; box-shadow: 0 12px 28px -8px rgba(11, 18, 32, 0.18); min-width: 150px; padding: 6px; z-index: 1001; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s; } .lang-switch[data-open="true"] .lang-menu { opacity: 1; visibility: visible; transform: none; transition: opacity 0.16s ease, transform 0.16s ease; } .lang-switch .lang-menu button { display: block; width: 100%; padding: 8px 12px; text-align: left; background: transparent; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; color: #1F2738; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .lang-switch .lang-menu button:hover { background: #FCF1E6; color: #C24B19; } .lang-switch .lang-menu button.current { color: #C24B19; font-weight: 700; } /* In RTL the menu opens left-anchored */ [dir="rtl"] .lang-switch .lang-menu { right: auto; left: 0; } [dir="rtl"] .lang-switch .lang-menu button { text-align: right; } /* ─── RTL overrides — make Latin-first layouts feel native in AR ── */ [dir="rtl"] body { font-family: 'Tajawal', 'Cairo', 'Noto Naskh Arabic', 'Segoe UI', sans-serif; } /* Display headings keep the serif but allow Tajawal fallback */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: 'Tajawal', 'Cairo', Georgia, serif; letter-spacing: 0; } /* Drop the kerning that's tuned for Latin (-0.02em etc.) */ [dir="rtl"] .display, [dir="rtl"] .headline, [dir="rtl"] h1.display { letter-spacing: 0; } /* Italic em's don't render meaningfully in Arabic. Style as accent color without italic; keep the gradient if the original used one. */ [dir="rtl"] em { font-style: normal; } /* The accent rule under headlines is a left-anchored 56px line — in RTL we want it on the right. */ [dir="rtl"] .rule { margin-inline-start: 0; } /* Decorative kicker arrows (←/→) should swap. */ [dir="rtl"] [data-i18n*="next"] { /* leave to translation file to flip arrow direction */ } /* Topbar navigation: text-align inherits dir, but right-side actions need flex-direction stay logical. flex auto-flips with rtl. */ /* Composer hint (chat) reads naturally when flipped. */ /* Make icon-text gap symmetrical (pseudo-margin auto-flips). */ /* In RTL, the editor topbar kicker rules render reversed via flex, but the ::before/::after pseudo-decorations need flipping too. */ [dir="rtl"] .question-topic::before, [dir="rtl"] .pm-kicker::before { /* no-op for now — the rules are short and look fine on either side */ } /* Toast renders centred and reads either direction OK. */ /* Form labels: keep their natural inline-start alignment. */ [dir="rtl"] .form-label, [dir="rtl"] .form-group label { text-align: right; } /* Buttons stay centred. */ /* Disable specific Latin-italic ems inside hero headlines (already covered by [dir=rtl] em above). */ /* Arabic numerals (٠-٩) are wider than Latin in some fonts — give them air. */ [dir="rtl"] .pct, [dir="rtl"] .gauge-score { letter-spacing: 0; }