/* ============================================================ lang-dropdown.css v2 Desktop: dropdown panel Mobile < 768px: bottom sheet (rendered via JS after body move) ============================================================ */ /* ── Wrapper ─────────────────────────────────────────────── */ .tl-lang { position: relative; display: inline-flex; align-items: center; z-index: 1040; margin-left: 6px; } /* ── Toggle button ───────────────────────────────────────── */ .tl-lang-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; background: transparent; border: 1.5px solid rgba(0,0,0,.15); border-radius: 8px; cursor: pointer; font-family: inherit; font-size: .8rem; font-weight: 600; color: #1e293b; white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent; transition: border-color .15s, background .15s, color .15s; } .tl-lang-btn:hover, .tl-lang-btn:focus-visible { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; outline: none; } .tl-lang-btn.loading { opacity: .5; pointer-events: none; } /* Dark nav */ .navbar-dark .tl-lang-btn, .nav-dark .tl-lang-btn { border-color: rgba(255,255,255,.25); color: #fff; } .navbar-dark .tl-lang-btn:hover, .nav-dark .tl-lang-btn:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); } .tl-lang-chevron { transition: transform .2s ease; } .tl-lang-btn[aria-expanded="true"] .tl-lang-chevron { transform: rotate(180deg); } /* ═══════════════════════════════════════════════════ DESKTOP DROPDOWN ═══════════════════════════════════════════════════ */ .tl-lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 6px; box-shadow: 0 8px 32px rgba(15,23,42,.12); z-index: 1060; display: none; /* hidden by default */ flex-direction: column; gap: 2px; animation: tlDropIn .15s ease; } .tl-lang-menu.open { display: flex; } @keyframes tlDropIn { from { opacity:0; transform:translateY(-6px) scale(.97); } to { opacity:1; transform:none; } } .tl-lang-menu-head { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: #94a3b8; padding: 6px 10px 4px; } .tl-lang-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; background: transparent; border: none; border-radius: 8px; cursor: pointer; font-family: inherit; transition: background .1s; -webkit-tap-highlight-color: transparent; } .tl-lang-opt:hover { background: #f1f5f9; } .tl-lang-opt--active { background: #eff6ff; } .tl-lang-opt--active:hover { background: #dbeafe; } .tl-lang-opt-native { flex: 1; font-size: .875rem; font-weight: 600; color: #0f172a; } .tl-lang-opt-region { font-size: .7rem; color: #94a3b8; } .tl-lang-opt--active .tl-lang-opt-native { color: #1d4ed8; } .tl-lang-opt--active .tl-lang-opt-region { color: #60a5fa; } .tl-lang-check { color: #2563eb; flex-shrink: 0; } /* ═══════════════════════════════════════════════════ MOBILE BOTTOM SHEET These are children after JS move — NOT inside the nav stacking context. ═══════════════════════════════════════════════════ */ /* Overlay — hidden by default via display:none */ .tl-lang-sheet-overlay { display: none; /* JS sets display:block before adding .open */ position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 9990; opacity: 0; transition: opacity .25s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .tl-lang-sheet-overlay.open { opacity: 1; } /* Sheet — hidden by default via display:none */ .tl-lang-sheet { display: none; /* JS sets display:flex before adding .open */ position: fixed; left: 0; right: 0; bottom: 0; flex-direction: column; background: #fff; border-radius: 20px 20px 0 0; z-index: 9999; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; /* Start translated off the bottom */ transform: translateY(100%); transition: transform .3s cubic-bezier(.32,.72,0,1); /* Safe area for iPhone home bar */ padding-bottom: env(safe-area-inset-bottom, 16px); } /* JS adds .open after display:flex + reflow */ .tl-lang-sheet.open { transform: translateY(0); } /* Pull handle */ .tl-lang-sheet-handle { width: 40px; height: 4px; background: #cbd5e1; border-radius: 2px; margin: 12px auto 0; flex-shrink: 0; } .tl-lang-sheet-title { font-size: 15px; font-weight: 700; color: #0f172a; text-align: center; padding: 14px 20px 12px; border-bottom: 1px solid #f1f5f9; flex-shrink: 0; } /* 2-col grid */ .tl-lang-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; } .tl-lang-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 12px; background: #f8fafc; border: 2px solid transparent; border-radius: 12px; cursor: pointer; font-family: inherit; position: relative; transition: border-color .15s, background .15s; -webkit-tap-highlight-color: transparent; } .tl-lang-tile:active { background: #e2e8f0; } .tl-lang-tile--active { background: #eff6ff; border-color: #2563eb; } .tl-lang-tile-label { font-size: 11px; font-weight: 700; color: #94a3b8; letter-spacing: .3px; } .tl-lang-tile-native { font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.2; } .tl-lang-tile-region { font-size: 10px; color: #94a3b8; margin-top: 1px; } .tl-lang-tile--active .tl-lang-tile-label { color: #2563eb; } .tl-lang-tile--active .tl-lang-tile-native { color: #1e3a8a; } .tl-lang-tile-check { position: absolute; top: 10px; right: 10px; color: #2563eb; } /* Cancel button */ .tl-lang-sheet-close { display: block; width: calc(100% - 32px); margin: 4px 16px 16px; padding: 13px; background: #f1f5f9; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; color: #64748b; cursor: pointer; font-family: inherit; flex-shrink: 0; -webkit-tap-highlight-color: transparent; transition: background .12s; } .tl-lang-sheet-close:hover { background: #e2e8f0; } .tl-lang-sheet-close:active { background: #cbd5e1; } /* Switching spinner */ .tl-lang-tile.switching { opacity: .55; pointer-events: none; } /* ─── Breakpoint rules ───────────────────────────────────── */ /* Desktop: show dropdown, sheet HTML is in body but hidden */ @media (min-width: 768px) { /* Force sheet hidden on desktop even if accidentally triggered */ .tl-lang-sheet, .tl-lang-sheet-overlay { display: none !important; } } /* Mobile: dropdown panel always hidden */ @media (max-width: 767.98px) { .tl-lang-menu { display: none !important; } } /* Very small phones: single column */ @media (max-width: 360px) { .tl-lang-sheet-grid { grid-template-columns: 1fr; } }