/* ═══════════════════════════════════════════════════════════════ i18n.css — Locale picker, sale pricing UI, RTL support ═══════════════════════════════════════════════════════════════ */ /* ─── Locale Picker & Language Picker ─────────────────────────── */ .locale-picker, .language-picker { position: relative; display: inline-block; } /* Pages that don't sell anything (helpcenter, use-cases, integrations, resources, legal) suppress the currency picker but PRESERVE its width so navigating between pricing↔info pages doesn't cause a navbar jerk. Apply by adding `class="dark-theme no-locale"` (or similar) on . */ body.no-locale .locale-picker { visibility: hidden; pointer-events: none; } .locale-picker-btn, .language-picker-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; /* Fixed height so the two navbar pills (language + currency) always match visually. Without this the locale pill was rendering taller because of the flag emoji's intrinsic line-height (since replaced with a Lucide `wallet` icon for full visual parity). */ height: 36px; line-height: 1; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md, 8px); color: var(--text-primary, #fff); font-size: 0.85rem; font-family: var(--font-body, 'Inter', sans-serif); cursor: pointer; transition: all 0.2s; white-space: nowrap; } /* `.icon-only` modifier is vestigial — js/locale.js injects globe+text+chevron into the button at runtime, so even buttons originally meant as icon-only end up with full label. Keep them styled as a pill matching .locale-picker-btn so the language picker is visually consistent with the currency picker. */ .locale-picker-btn:hover, .language-picker-btn:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.2); } .locale-dropdown, .language-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 120px; max-height: 420px; overflow-y: auto; background: var(--surface-card, #1a1a2e); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-lg, 12px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); z-index: 9999; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all 0.2s ease; padding: 6px 0; } .locale-dropdown.open, .language-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); } @media (max-width: 1249px) { .locale-dropdown, .language-dropdown { left: 0; right: 0; width: 100%; min-width: 100%; } } .locale-dropdown-group, .language-dropdown-group { padding: 4px 0; } .locale-dropdown-group+.locale-dropdown-group, .language-dropdown-group+.language-dropdown-group { border-top: 1px solid rgba(255, 255, 255, 0.06); } .locale-dropdown-label, .language-dropdown-label { padding: 8px 16px 4px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary, rgba(255, 255, 255, 0.4)); } .locale-dropdown-item, .language-dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 16px; background: none; border: none; color: var(--text-secondary, rgba(255, 255, 255, 0.7)); font-size: 0.85rem; font-family: var(--font-body, 'Inter', sans-serif); cursor: pointer; text-align: left; transition: all 0.15s; } .locale-dropdown-item:hover, .language-dropdown-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary, #fff); } .locale-dropdown-item.active, .language-dropdown-item.active { color: var(--accent-green, #25D366); background: rgba(37, 211, 102, 0.08); } .locale-currency-tag, .language-name-en { margin-left: 8px; font-size: 0.75rem; color: var(--text-tertiary, rgba(255, 255, 255, 0.4)); font-family: var(--font-mono, monospace); } .locale-dropdown-item.active .locale-currency-tag, .language-dropdown-item.active .language-name-en { color: var(--accent-green, #25D366); } /* ─── Sale Pricing ──────────────────────────────────────────── */ .price-original { text-decoration: line-through; color: var(--text-tertiary, rgba(255, 255, 255, 0.35)); font-size: 0.85em; margin-right: 8px; } .price-sale { color: var(--accent-green, #25D366); font-weight: 700; } .sale-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: rgba(37, 211, 102, 0.12); color: var(--accent-green, #25D366); font-size: 0.7rem; font-weight: 600; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 8px; } .price-display-wrapper { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; } /* ─── Language Switcher (inline, for inside pages) ──────────── */ .language-switcher-inline { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .language-switcher-inline button { padding: 4px 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; color: var(--text-secondary); font-size: 0.78rem; cursor: pointer; transition: all 0.15s; } .language-switcher-inline button:hover { background: rgba(255, 255, 255, 0.08); } .language-switcher-inline button.active { background: rgba(37, 211, 102, 0.12); border-color: var(--accent-green, #25D366); color: var(--accent-green, #25D366); } /* ─── RTL Support ───────────────────────────────────────────── */ [dir="rtl"] { direction: rtl; text-align: right; } [dir="rtl"] .nav-links { flex-direction: row-reverse; } /* ─── Wide-glyph language nav tightening ────────────────────── Tamil + Malayalam glyphs are visibly wider than Latin/Devanagari at the same font-size, so nav-links overflow the 1200px container. Pull font + gap tighter for these scripts only. */ :lang(ta) .nav-links a, :lang(ml) .nav-links a { font-size: 0.8rem; } :lang(ta) .nav-links, :lang(ml) .nav-links { gap: var(--space-3); } :lang(ta) .nav-content, :lang(ml) .nav-content { gap: var(--space-2); } /* Long-label Latin languages (DE/FR/ES) get a near-imperceptible font shrink (0.875rem → 0.86rem, ~1.5%) — visually indistinguishable from base but gives ~3-5px of horizontal room on the pricing/compare nav where the currency picker uses space. */ :lang(de) .nav-links a, :lang(fr) .nav-links a, :lang(es) .nav-links a { font-size: 0.86rem; } [dir="rtl"] .locale-dropdown { right: auto; left: 0; } [dir="rtl"] .locale-currency-tag { margin-left: 0; margin-right: 8px; } [dir="rtl"] .price-original { margin-right: 0; margin-left: 8px; } [dir="rtl"] .sale-badge { margin-left: 0; margin-right: 8px; } [dir="rtl"] .hero-content, [dir="rtl"] .section-header, [dir="rtl"] .pref-text { text-align: right; } [dir="rtl"] .trust-marks { flex-direction: row-reverse; } [dir="rtl"] .footer-grid { direction: rtl; } /* ─── Responsive ────────────────────────────────────────────── */ @media (max-width: 768px) { .locale-picker-btn { padding: 5px 10px; font-size: 0.8rem; } .locale-dropdown { min-width: 260px; right: -20px; } } @media (max-width: 480px) { .locale-dropdown { position: fixed; top: auto; bottom: 0; left: 0; right: 0; min-width: 100%; max-height: 60vh; border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0; transform: translateY(100%); } .locale-dropdown.open { transform: translateY(0); } }