/* -- SIDEBAR ---------------------------------------------------------------- Fixed position, full viewport height, always visible. z-index: 20 - above PCB background, below nav. */ .sidebar { position: fixed; top: 52px; left: 0; width: 200px; height: calc(100vh - 52px); z-index: 20; background: rgba(13, 13, 18, 0.82); border-right: 2px solid rgba(160, 120, 255, 0.18); backdrop-filter: blur(8px); overflow-y: auto; flex-shrink: 0; padding-top: 1.4rem; /* smooth slide for mobile toggle */ transition: transform 0.28s ease; } /* In-flow spacer so content doesn't slide under the fixed sidebar */ .sidebar-spacer { flex-shrink: 0; width: 200px; transition: width 0.28s ease; } /* -- SIDEBAR CONTENT -------------------------------------------------------- */ .sidebar .sidebar-label { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(160, 120, 255, 0.5); margin-bottom: 0.6rem; padding: 0 0.8rem 0.6rem 0.8rem; border-bottom: 2px solid rgba(160, 120, 255, 0.12); } .sidebar ul { list-style: none; padding: 0.4rem 0; } .sidebar ul li a { display: block; padding: 0.35rem 0.8rem; font-size: 0.78rem; color: rgba(210, 195, 255, 0.6); text-decoration: none; border-left: 2px solid transparent; transition: color 0.2s, border-color 0.2s, background 0.2s; letter-spacing: 0.03em; } .sidebar ul li a:hover { color: #fff; border-left-color: rgba(160, 120, 255, 0.5); background: rgba(160, 120, 255, 0.06); } .sidebar ul li a.active { color: #cbb8ff; border-left-color: #8855ff; background: rgba(136, 85, 255, 0.08); } /* -- MOBILE SIDEBAR TOGGLE BUTTON -------------------------------------------- Only visible below 768px. Sits in the top-left of the viewport, above the nav via z-index, toggles .sidebar-open on . */ .sidebar-toggle { display: none; position: fixed; top: 11px; /* vertically centred in 52px nav */ left: 1rem; z-index: 210; /* above nav */ background: none; border: 1px solid rgba(160, 120, 255, 0.3); border-radius: 5px; color: rgba(210, 195, 255, 0.8); width: 30px; height: 30px; cursor: pointer; font-size: 1rem; line-height: 1; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s; } .sidebar-toggle:hover { background: rgba(160, 120, 255, 0.1); border-color: rgba(160, 120, 255, 0.6); } /* -- OVERLAY (mobile) ------------------------------------------------------ */ .sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 15; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); } /* -- NARROW BREAKPOINT (<768px) --------------------------------------------- Sidebar slides off-screen by default. .sidebar-open on slides it back in. */ @media (max-width: 768px) { .sidebar { transform: translateX(-100%); box-shadow: none; } body.sidebar-open .sidebar { transform: translateX(0); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5); background: #0f0f18; } body.sidebar-open .sidebar-overlay { display: block; } .sidebar-overlay { left: 200px; /* start overlay after the sidebar's width */ } .sidebar-spacer { width: 0; } .sidebar-toggle { display: flex; } .nav-left { padding-left: 2.4rem; } }