/* === JemmaPass i18n language switcher === */ /* 25-language dropdown, matches dark navy + emerald aesthetic. */ #jemma-lang-switcher { position: relative; display: inline-block; font-family: inherit; z-index: 1000; } .jemma-lang-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.25); border-radius: 8px; color: var(--text, #e5e7eb); font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: all 0.18s ease; line-height: 1; } .jemma-lang-btn:hover, .jemma-lang-btn[aria-expanded="true"] { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.4); transform: translateY(-1px); } .jemma-lang-btn-flag { font-size: 1rem; line-height: 1; } .jemma-lang-btn-code { letter-spacing: 0.04em; color: var(--emerald, #10b981); font-weight: 600; } .jemma-lang-btn-caret { font-size: 0.72rem; opacity: 0.7; } .jemma-lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 280px; max-height: 480px; overflow-y: auto; background: rgba(5, 9, 17, 0.98); border: 1px solid rgba(16, 185, 129, 0.25); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(16, 185, 129, 0.08); padding: 8px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .jemma-lang-menu[hidden] { display: none; } .jemma-lang-menu-title { padding: 10px 12px 8px; font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--emerald, #10b981); border-bottom: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 6px; } .jemma-lang-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; background: transparent; border: none; border-radius: 6px; color: var(--text-mid, #cbd5e1); font-size: 0.88rem; font-weight: 500; cursor: pointer; text-align: left; transition: all 0.15s ease; } .jemma-lang-item:hover { background: rgba(16, 185, 129, 0.1); color: var(--text, #e5e7eb); } .jemma-lang-item.is-active { background: rgba(16, 185, 129, 0.15); color: var(--emerald, #10b981); font-weight: 600; } .jemma-lang-item.is-active::after { content: '●'; margin-left: auto; color: var(--emerald, #10b981); font-size: 0.7rem; } .jemma-lang-item-flag { font-size: 1.1rem; line-height: 1; flex-shrink: 0; } .jemma-lang-item-name { flex: 1; } .jemma-lang-badge { font-size: 0.62rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; letter-spacing: 0.04em; } .jemma-lang-badge-full { background: rgba(16, 185, 129, 0.2); color: var(--emerald, #10b981); } .jemma-lang-badge-partial { background: rgba(251, 191, 36, 0.18); color: #fbbf24; } .jemma-lang-badge-machine { background: rgba(99, 102, 241, 0.18); color: #818cf8; } .jemma-lang-menu-footer { margin-top: 8px; padding: 10px 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.72rem; color: var(--text-dim, #94a3b8); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* === RTL support: when , flip the menu === */ html[dir="rtl"] .jemma-lang-menu { right: auto; left: 0; } html[dir="rtl"] .jemma-lang-item { text-align: right; } html[dir="rtl"] .jemma-lang-item.is-active::after { margin-left: 0; margin-right: auto; } /* === Mobile === */ @media (max-width: 768px) { .jemma-lang-menu { right: 0; left: auto; min-width: 240px; max-height: 60vh; } .jemma-lang-btn-code { display: none; } }