/* ============================================================ DROPDOWN FIX Add to styles.css or inline in index.html Ensures dropdowns always render above everything, even when the topbar is mid-transition. ============================================================ */ /* The topbar must not clip its children */ .topbar { overflow: visible !important; } /* Dropdown wrapper — position context */ .nav-dropdown { position: relative; } /* Menu hidden by default */ .dropdown-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 9999; /* above everything */ min-width: 160px; background: var(--surface, #13161c); border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 10px; padding: 5px; box-shadow: 0 12px 32px rgba(0,0,0,.45); /* Animate in */ opacity: 0; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease; pointer-events: none; } /* Open state — triggered by JS adding .dd-open */ .dropdown-menu.dd-open { display: block; opacity: 1; transform: translateY(0); pointer-events: auto; } /* Nav button open state */ .nav-button.dd-open { color: var(--text, #e8ecf4); } /* Chevron rotation */ .nav-button.dd-open .chevron { display: inline-block; transform: rotate(180deg); transition: transform .14s ease; } /* ── Theme grid inside dropdown ── */ .theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 2px; } .theme-btn { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--text-dim, #6b7691); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .13s, color .13s, border-color .13s; white-space: nowrap; font-family: inherit; } .theme-btn:hover, .theme-btn.active { background: var(--accent-soft, rgba(110,142,251,.1)); color: var(--text, #e8ecf4); border-color: var(--border-accent, rgba(110,142,251,.3)); } .theme-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } /* Dropdown items */ .dropdown-item { display: block; width: 100%; padding: 8px 12px; border-radius: 7px; border: none; background: transparent; color: var(--text-dim, #6b7691); font-size: 13px; font-weight: 500; cursor: pointer; text-align: left; font-family: inherit; transition: background .13s, color .13s; white-space: nowrap; } .dropdown-item:hover, .dropdown-item.active { background: var(--card-hover, rgba(255,255,255,.06)); color: var(--text, #e8ecf4); } /* ── Make sure topbar transition doesn't clip dropdown ── */ /* If .topbar-hidden uses transform, the stacking context */ /* can trap the dropdown. Fix: use a wrapper for the slide. */ body.topbar-hidden .topbar { /* overflow must stay visible so dropdown escapes */ overflow: visible !important; }