.bt-login-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; backdrop-filter: blur(18px); } .bt-login-nav-brand { display: inline-flex; align-items: center; gap: 0.85rem; min-width: 0; } .bt-login-nav-brand-link { display: inline-flex; align-items: center; min-width: 0; color: inherit; text-decoration: none; border-radius: 16px; } .bt-login-nav-brand-link:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.35); outline-offset: 4px; } .bt-login-nav-logo { width: auto; height: 60px; max-width: 240px; object-fit: contain; flex-shrink: 0; } .bt-login-nav-menu { display: none; position: relative; margin-left: auto; } .bt-login-nav-menu summary { list-style: none; } .bt-login-nav-menu summary::-webkit-details-marker { display: none; } .bt-login-nav-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: var(--text); cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; box-shadow: none; } .bt-login-nav-menu-toggle:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); transform: translateY(-1px); } .bt-login-nav-menu-icon { display: inline-flex; flex-direction: column; gap: 4px; } .bt-login-nav-menu-icon span { display: block; width: 18px; height: 2px; border-radius: 999px; background: currentColor; transition: transform 0.18s ease, opacity 0.18s ease; } .bt-login-nav-menu[open] .bt-login-nav-menu-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .bt-login-nav-menu[open] .bt-login-nav-menu-icon span:nth-child(2) { opacity: 0; } .bt-login-nav-menu[open] .bt-login-nav-menu-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .bt-login-nav-menu-panel { position: absolute; right: 0; top: calc(100% + 0.65rem); width: min(240px, 72vw); padding: 0.65rem; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(12, 18, 41, 0.98); box-shadow: 0 24px 60px rgba(2, 6, 23, 0.28); backdrop-filter: blur(18px); z-index: 30; } .bt-login-nav-menu-links { display: grid; gap: 0.35rem; list-style: none; margin: 0; padding: 0; } .bt-login-nav-menu-links a { display: flex; align-items: center; justify-content: flex-start; min-height: 42px; padding: 0.7rem 0.95rem; border-radius: 12px; color: rgba(255, 255, 255, 0.92); border: 1px solid transparent; transition: 0.18s ease; font-size: 0.92rem; } .bt-login-nav-menu-links a:hover { color: #fff; border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); } .bt-login-nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.4rem; list-style: none; margin: 0; padding: 0; } .bt-login-nav-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0.45rem 0.9rem; border-radius: 999px; color: var(--muted); border: 1px solid transparent; transition: 0.18s ease; font-size: 0.9rem; } .bt-login-nav-links a:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); } @media (max-width: 840px) { .bt-login-nav { flex-direction: row; align-items: center; justify-content: space-between; } .bt-login-nav-links { justify-content: flex-start; } } @media (max-width: 640px) { .bt-login-nav-logo { height: 44px; max-width: 180px; } .bt-login-nav-menu { display: inline-flex; } .bt-login-nav-links { display: none; } .bt-login-nav-menu-panel { width: min(260px, calc(100vw - 1rem)); } }