/* ============================================================
stems.dilkan.com — SHARED UI SHELL
One cohesive identity across Player · YouTube · Separator · Lyrics
Canonical design system = the Stem Player's purple (#7c5cfc) dark theme.
Loaded by every music subsite via: inside ;
the shared bar is with no .nav child, so this is safe. */
header .nav{ display:none !important; }
/* Re-tint accent-tinted bits the apps hard-coded off-palette */
.btn-accent{ color:#fff !important; }
.step.done{
color:var(--accent) !important;
background:rgba(124,92,252,.14) !important;
border-color:rgba(124,92,252,.35) !important;
}
/* ---- 2. The shared top nav --------------------------------- */
.snav{
position:sticky; top:0; z-index:1000;
display:flex; align-items:center; gap:14px;
height:var(--snav-h); padding:0 20px;
background:var(--snav-bg);
-webkit-backdrop-filter:saturate(160%) blur(16px);
backdrop-filter:saturate(160%) blur(16px);
border-bottom:1px solid rgba(255,255,255,.07);
font-family:var(--snav-font);
}
/* Brand */
.snav-brand{
display:flex; align-items:center; gap:10px;
color:#fff; text-decoration:none; font-weight:800;
font-size:18px; letter-spacing:-.4px; flex-shrink:0;
}
.snav-mark{
width:30px; height:30px; border-radius:9px; flex-shrink:0;
display:grid; place-items:center;
background:linear-gradient(135deg,#7c5cfc,#b15cfc);
box-shadow:0 4px 16px -4px rgba(124,92,252,.7);
}
.snav-mark svg{ width:18px; height:18px; display:block; }
.snav-brand b{ font-weight:800; }
.snav-brand .snav-sub{
font-weight:600; font-size:12px; color:var(--accent);
background:rgba(124,92,252,.12); border:1px solid rgba(124,92,252,.28);
padding:2px 8px; border-radius:999px; letter-spacing:.1px;
}
/* Desktop link row */
.snav-links{
margin-left:auto; display:flex; align-items:center; gap:4px;
}
.snav-links a{
display:flex; align-items:center; gap:7px;
color:var(--muted); text-decoration:none;
font-size:14px; font-weight:550; line-height:1;
padding:9px 13px; border-radius:10px;
transition:color .15s, background .15s;
}
.snav-links a svg{ width:16px; height:16px; opacity:.85; }
.snav-links a:hover{ color:var(--text); background:rgba(255,255,255,.06); }
.snav-links a.active{
color:#fff; background:rgba(124,92,252,.16);
box-shadow:inset 0 0 0 1px rgba(124,92,252,.4);
}
.snav-links a.active svg{ opacity:1; }
/* Hamburger (mobile only) */
.snav-burger{
margin-left:auto; display:none;
width:42px; height:42px; border-radius:11px;
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
color:var(--text); cursor:pointer; align-items:center; justify-content:center;
}
.snav-burger svg{ width:22px; height:22px; }
.snav-burger:active{ background:rgba(255,255,255,.1); }
/* ---- 3. Mobile drawer -------------------------------------- */
.snav-scrim{
position:fixed; inset:0; z-index:1900;
background:rgba(0,0,0,.5);
opacity:0; pointer-events:none; transition:opacity .25s;
-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.snav-scrim.open{ opacity:1; pointer-events:auto; }
.snav-drawer{
position:fixed; top:0; right:0; bottom:0; z-index:2000;
width:min(82vw,320px);
background:#121217;
border-left:1px solid rgba(255,255,255,.08);
box-shadow:-24px 0 60px -20px rgba(0,0,0,.8);
transform:translateX(105%); transition:transform .28s cubic-bezier(.22,.8,.26,1);
display:flex; flex-direction:column;
padding:calc(env(safe-area-inset-top) + 16px) 16px 16px;
font-family:var(--snav-font);
}
.snav-drawer.open{ transform:none; }
.snav-drawer-head{
display:flex; align-items:center; gap:10px;
padding:4px 6px 16px; margin-bottom:8px;
border-bottom:1px solid rgba(255,255,255,.07);
}
.snav-drawer-head .snav-brand{ font-size:17px; }
.snav-close{
margin-left:auto; width:38px; height:38px; border-radius:10px;
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
color:var(--text); cursor:pointer; display:grid; place-items:center; font-size:20px;
}
.snav-drawer a{
display:flex; align-items:center; gap:14px;
color:var(--text); text-decoration:none;
font-size:16px; font-weight:600;
padding:15px 14px; border-radius:13px; margin-bottom:4px;
transition:background .15s;
}
.snav-drawer a .di{
width:38px; height:38px; border-radius:11px; flex-shrink:0;
display:grid; place-items:center;
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
color:var(--accent);
}
.snav-drawer a .di svg{ width:19px; height:19px; }
.snav-drawer a small{ display:block; font-weight:450; font-size:12.5px; color:var(--muted); margin-top:2px; }
.snav-drawer a:active{ background:rgba(255,255,255,.05); }
.snav-drawer a.active{ background:rgba(124,92,252,.14); }
.snav-drawer a.active .di{ background:var(--accent); color:#fff; border-color:transparent; }
.snav-drawer-foot{
margin-top:auto; padding:14px 8px 4px; color:var(--faint);
font-size:12px; border-top:1px solid rgba(255,255,255,.07);
}
/* ---- 4. Responsive switch --------------------------------- */
@media (max-width:820px){
.snav-links{ display:none; }
.snav-burger{ display:flex; }
}
/* ---- 5. Player dual-UI hook -------------------------------
The player's mobile UI is position:fixed; inset:0 and would cover the
sticky nav. On the player page we instead expose the hamburger inside
its own .mob-bar (see player edit) and keep #mob full-screen. This rule
is harmless everywhere else (#mob exists only on the player). */
.snav-burger.in-mobbar{
display:flex; margin-left:auto; width:38px; height:38px;
}
/* tidy scrollbars to match the dark theme */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#2a2a33; border-radius:99px; border:2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover{ background:#3a3a46; }
::selection{ background:rgba(124,92,252,.35); }