/* ============================================================ scrollbar.css — Vyshnav P C Portfolio Custom scrollbar styled to match dark terminal aesthetic Scroll-lock class for mobile nav (no layout jump) ============================================================ */ /* ── Scroll lock (mobile nav open) ────────────────────────── Uses overflow:hidden on + scrollbar-gutter:stable so the page doesn't jump when scrollbar disappears ─────────────────────────────────────────────────────────── */ html { scrollbar-gutter: stable; /* reserves scrollbar space always */ } html.nav-open { overflow: hidden; /* lock scroll when mobile menu open */ } /* ── Custom scrollbar — Webkit (Chrome, Safari, Edge) ─────── */ ::-webkit-scrollbar { width: 14px; height: 14px; } ::-webkit-scrollbar-track { background: #0d0d0d; border-radius: 0; } ::-webkit-scrollbar-thumb { background: rgba(165, 148, 255, 0.25); /* --accent2 at low opacity */ border-radius: 3px; transition: background 0.2s ease; } ::-webkit-scrollbar-thumb:hover { background: rgba(165, 148, 255, 0.55); } ::-webkit-scrollbar-thumb:active { background: rgba(165, 148, 255, 0.80); } ::-webkit-scrollbar-corner { background: #0d0d0d; } /* ── Custom scrollbar — Firefox ───────────────────────────── */ * { scrollbar-width: thin; scrollbar-color: rgba(165, 148, 255, 0.25) #0d0d0d; } /* ── Code blocks / terminal bodies (teal accent) ──────────── Overrides for any pre/code scroll containers so they feel distinct from the page scrollbar ─────────────────────────────────────────────────────────── */ pre::-webkit-scrollbar, .terminal-body::-webkit-scrollbar { height: 10px; width: 10px; } pre::-webkit-scrollbar-thumb, .terminal-body::-webkit-scrollbar-thumb { background: rgba(45, 212, 191, 0.30); /* --teal */ border-radius: 2px; } pre::-webkit-scrollbar-thumb:hover, .terminal-body::-webkit-scrollbar-thumb:hover { background: rgba(45, 212, 191, 0.60); } pre, .terminal-body { scrollbar-width: thin; scrollbar-color: rgba(45, 212, 191, 0.30) transparent; }