/* v16.75 · Dynamic Glass Navigation Dock bawah (HP) terasa melayang di atas konten. Lapisan tampilan saja: tidak ada markup baru, tidak ada JS baru, logika navigasi tidak diubah. Dimuat paling akhir (setelah optical-glass.css). Hapus ini untuk kembali ke v16.74. 1. Kapsul kaca tipis di belakang item aktif (memakai .npv-ind yang sudah meluncur) 2. Ikon aktif terisi + sedikit terangkat, label aktif tebal dan kontras tinggi (bukan hanya ganti warna) 3. Bar: bayangan ambient berlapis + garis pemisah gelap/terang tipis dari latar 4. Ruang safe area bawah tetap dipakai (viewport-fit=cover, env(safe-area-inset-bottom)) */ :root { --gn-safe-b: env(safe-area-inset-bottom, 0px); /* bar (tema gelap) */ --gn-bar-top: rgba(255, 255, 255, .15); --gn-bar-ring: rgba(255, 255, 255, .07); --gn-bar-sep: rgba(0, 0, 0, .46); --gn-bar-sheen: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, .10)); --gn-bar-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 8px 18px -6px rgba(0, 0, 0, .46), 0 26px 52px -16px rgba(0, 0, 0, .72); /* kapsul aktif (tema gelap) */ --gn-cap-bg: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .055) 52%, rgba(var(--an-gold-rgb, 200, 169, 106), .12)); --gn-cap-edge: inset 0 1px 0 rgba(255, 255, 255, .30), inset 0 0 0 1px rgba(255, 255, 255, .10), inset 0 -8px 12px -8px rgba(var(--an-gold-rgb, 200, 169, 106), .22); --gn-cap-drop: 0 1px 2px rgba(0, 0, 0, .34), 0 8px 16px -8px rgba(var(--an-gold-rgb, 200, 169, 106), .34); --gn-cap-spec: rgba(255, 255, 255, .75); --gn-label-on: var(--text-primary, rgba(255, 255, 255, .96)); --gn-icon-fill: rgba(var(--an-gold-rgb, 200, 169, 106), .22); --gn-icon-glow: rgba(var(--an-gold-rgb, 200, 169, 106), .45); } body.light { --gn-bar-top: #fff; --gn-bar-ring: rgba(60, 48, 20, .07); --gn-bar-sep: rgba(60, 48, 20, .14); --gn-bar-sheen: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 50%, rgba(60, 48, 20, .035)); --gn-bar-shadow: 0 1px 2px rgba(60, 48, 20, .10), 0 8px 18px -6px rgba(60, 48, 20, .18), 0 24px 46px -16px rgba(60, 48, 20, .30); --gn-cap-bg: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .72) 55%, rgba(var(--an-gold-rgb, 126, 95, 23), .10)); --gn-cap-edge: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(60, 48, 20, .08), inset 0 -8px 12px -8px rgba(var(--an-gold-rgb, 126, 95, 23), .14); --gn-cap-drop: 0 1px 2px rgba(60, 48, 20, .16), 0 8px 14px -8px rgba(var(--an-gold-rgb, 126, 95, 23), .30); --gn-cap-spec: rgba(255, 255, 255, 1); --gn-label-on: rgba(0, 0, 0, .9); --gn-icon-fill: rgba(var(--an-gold-rgb, 126, 95, 23), .16); --gn-icon-glow: rgba(var(--an-gold-rgb, 126, 95, 23), .30); } @media (max-width: 640px) { /* ---------- 3. Bar melayang: pemisah + bayangan ambient ---------- Selektor diulang agar menang atas lapisan lama (ambient-glass memakai :is() dengan id, jadi perlu !important). Hanya box-shadow dan sheen statis; blur dan warna dasar tetap dari lapisan lama (token transparansi tetap berlaku). */ html body.npv.authed.authed.authed .npv-dock { box-shadow: inset 0 1px 0 var(--gn-bar-top), inset 0 0 0 1px var(--gn-bar-ring), 0 0 0 1px var(--gn-bar-sep), var(--gn-bar-shadow) !important; } /* ---------- 1. Kapsul kaca tipis di belakang item aktif ---------- */ html body.npv.authed.authed.authed.authed .npv-dock .npv-ind::before { content: ''; position: absolute; pointer-events: none; top: 6px; bottom: 6px; left: 3px; right: 3px; width: auto; height: auto; margin: 0; border-radius: 20px; background: var(--gn-cap-bg); box-shadow: var(--gn-cap-edge), var(--gn-cap-drop); transition: none; } /* dock memadat saat gulir turun (v16.65): kapsul ikut lebih pendek, label tetap muat */ html body.an-compact.npv.authed.authed.authed.authed .npv-dock .npv-ind::before { top: 4px; bottom: 4px; } html body.an-compact.npv.authed.authed.authed.authed .npv-dock .npv-ind::after { top: 5px; } /* pantulan cahaya tipis di tepi atas kapsul */ html body.npv.authed.authed.authed.authed .npv-dock .npv-ind::after { display: block; content: ''; position: absolute; pointer-events: none; top: 7px; left: 50%; width: 26px; height: 1px; margin-left: -13px; opacity: 1; border-radius: 1px; box-shadow: none; background: linear-gradient(90deg, transparent, var(--gn-cap-spec), transparent); } /* ---------- 2. Item aktif: ikon terisi + terangkat, label tebal dan kontras ---------- */ html body.npv.authed.authed.authed .npv-dock .npv-item { gap: 3px; } html body.npv.authed.authed.authed .npv-dock .npv-item svg { transition: transform .3s cubic-bezier(.3, .8, .3, 1), fill .25s ease, filter .25s ease, stroke-width .2s ease; } html body.npv.authed.authed.authed .npv-dock .npv-item[aria-current="page"] svg { fill: var(--gn-icon-fill); stroke-width: 2; transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 2px 5px var(--gn-icon-glow)); } html body.npv.authed.authed.authed .npv-dock .npv-item[aria-current="page"]:active svg { transform: scale(.9); } html body.npv.authed.authed.authed .npv-dock .npv-item[aria-current="page"] span { color: var(--gn-label-on); font-weight: 600; letter-spacing: -.01em; } html body.npv.authed.authed.authed .npv-dock .npv-item:not([aria-current="page"]) span { font-weight: 500; } } /* ===================================================================== v16.75.1 · Tab navigasi tablet / desktop (≥641px) disamakan dengan dock HP Memakai token bar dan kapsul yang sama. Tombol aktif = kapsul kaca tipis; ikon emas, label kontras tinggi; bar melayang dengan bayangan ambient + pemisah. Ikon tab adalah ::before (mask), jadi tidak bisa diisi/glow seperti SVG dock; sebagai gantinya ikon aktif membesar sedikit dan naik 1px. ===================================================================== */ :root { --gn-bar-bg: rgba(22, 23, 26, .62); --gn-bar-shadow-hi: 0 2px 4px rgba(0, 0, 0, .34), 0 12px 24px -6px rgba(0, 0, 0, .55), 0 34px 64px -16px rgba(0, 0, 0, .80); } body.light { --gn-bar-bg: rgba(255, 255, 255, .66); --gn-bar-shadow-hi: 0 2px 4px rgba(60, 48, 20, .12), 0 12px 24px -6px rgba(60, 48, 20, .22), 0 30px 56px -16px rgba(60, 48, 20, .34); } @media (min-width: 641px) { /* bar melayang */ html body.authed #app > header.app-header .glass-pill.nav-wrap { border-radius: 22px; background-color: var(--gn-bar-bg); background-image: var(--gn-bar-sheen); -webkit-backdrop-filter: blur(24px) saturate(165%); backdrop-filter: blur(24px) saturate(165%); box-shadow: inset 0 1px 0 var(--gn-bar-top), inset 0 0 0 1px var(--gn-bar-ring), 0 0 0 1px var(--gn-bar-sep), var(--gn-bar-shadow); transition: box-shadow .25s ease; } html body.authed.sl-scrolled #app > header.app-header .glass-pill.nav-wrap { box-shadow: inset 0 1px 0 var(--gn-bar-top), inset 0 0 0 1px var(--gn-bar-ring), 0 0 0 1px var(--gn-bar-sep), var(--gn-bar-shadow-hi); } /* tab: kapsul kaca tipis pada item aktif */ html body.authed #app .glass-pill.nav-wrap .nav-pill-btn { border-radius: 18px; } html body.authed #app .glass-pill.nav-wrap .nav-pill-btn.active { background: var(--gn-cap-bg) !important; box-shadow: var(--gn-cap-edge), var(--gn-cap-drop) !important; color: var(--gn-label-on) !important; text-shadow: none !important; font-weight: 600; } /* pantulan cahaya tipis di tepi atas kapsul (menggantikan garis emas kecil di bawah) */ html body.authed #app .glass-pill.nav-wrap .nav-pill-btn::after { top: 1px; bottom: auto; left: 50%; width: 26px; height: 1px; margin-left: -13px; border-radius: 1px; background: linear-gradient(90deg, transparent, var(--gn-cap-spec), transparent); opacity: 0; transform: none; } html body.authed #app .glass-pill.nav-wrap .nav-pill-btn.active::after { opacity: 1; transform: none; } /* ikon aktif: emas, sedikit lebih besar dan terangkat */ html body.authed #app .glass-pill.nav-wrap .nav-pill-btn.active::before { transform: translateY(-.5px) scale(1.12); } html body.authed #app .glass-pill.nav-wrap .nav-pill-btn.active:active::before { transform: scale(.92); } html body.authed #app .glass-pill.nav-wrap .nav-pill-btn:not(.active) { font-weight: 500; } } /* HP hemat: tanpa blur, latar padat */ @media (min-width: 641px) { html.mo-lite body.authed #app > header.app-header .glass-pill.nav-wrap { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: #1a1b1e; } html.mo-lite body.light.authed #app > header.app-header .glass-pill.nav-wrap { background-color: #fff; } } /* Transparansi dikurangi: latar padat */ @media (min-width: 641px) and (prefers-reduced-transparency: reduce) { html body.authed #app > header.app-header .glass-pill.nav-wrap { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: #1a1b1e; background-image: none; } html body.light.authed #app > header.app-header .glass-pill.nav-wrap { background-color: #fff; } } @media (min-width: 641px) and (prefers-contrast: more) { html body.authed #app .glass-pill.nav-wrap .nav-pill-btn.active { box-shadow: inset 0 0 0 1.5px var(--accent-text, #C8A96A) !important; } } @media (min-width: 641px) and (forced-colors: active) { html body.authed #app .glass-pill.nav-wrap .nav-pill-btn.active { background: transparent !important; box-shadow: none !important; border: 1px solid Highlight; } html body.authed #app .glass-pill.nav-wrap .nav-pill-btn::after { display: none; } } @media (prefers-reduced-motion: reduce) { html body.authed #app .glass-pill.nav-wrap .nav-pill-btn::before { transition: none !important; } } /* Sheen kaca statis di bar: hanya bila pengguna tidak meminta transparansi dikurangi. Browser yang belum mengenal fitur ini melewati blok ini (bar tetap sama seperti v16.74). */ @media (max-width: 640px) and (prefers-reduced-transparency: no-preference) { html body.npv.authed.authed.authed .npv-dock { background-image: var(--gn-bar-sheen) !important; } } /* Kontras lebih tinggi: tepi dan kapsul lebih tegas */ @media (max-width: 640px) and (prefers-contrast: more) { html body.npv.authed.authed.authed .npv-dock { --gn-bar-sep: rgba(0, 0, 0, .8); --gn-bar-ring: rgba(255, 255, 255, .22); } body.light { --gn-bar-sep: rgba(0, 0, 0, .55); --gn-bar-ring: rgba(0, 0, 0, .25); } html body.npv.authed.authed.authed.authed .npv-dock .npv-ind::before { box-shadow: inset 0 0 0 1.5px var(--accent-text, #C8A96A); } } /* Mode warna paksa: kapsul jadi garis sistem */ @media (max-width: 640px) and (forced-colors: active) { html body.npv.authed.authed.authed.authed .npv-dock .npv-ind::before { background: transparent; box-shadow: none; border: 1px solid Highlight; } html body.npv.authed.authed.authed.authed .npv-dock .npv-ind::after { display: none; } html body.npv.authed.authed.authed .npv-dock .npv-item[aria-current="page"] svg { filter: none; } } /* Gerak dikurangi: tidak ada transisi baru */ @media (prefers-reduced-motion: reduce) { html body.npv.authed.authed.authed .npv-dock .npv-item svg { transition: none !important; } }