/* ── Signed-in sidebar ──────────────────────────────────────────────── Loaded on every page but only does anything when the root element carries .sp-has-sidebar, which _Layout puts on for authenticated users. It is on rather than so the head script can add .sp-sb-collapsed alongside it before the body exists. Logged-out pages are untouched. The rail follows the theme. Every colour it uses is a --sb-* token declared twice: light values on .sp-sb, dark values under [data-theme="dark"] .sp-sb, which is the same attribute site.js already toggles and persists. Nothing below hardcodes a colour outside those two blocks - if you add a rule that needs one, add the token to both blocks rather than reaching for a literal, or it will look right in one theme and wrong in the other. ──────────────────────────────────────────────────────────────────── */ :root { --sb-w: 252px; --sb-w-collapsed: 72px; --sb-ease: cubic-bezier(.4, 0, .2, 1); --sb-speed: .24s; } .sp-has-sidebar { --sb-offset: var(--sb-w); } .sp-has-sidebar.sp-sb-collapsed { --sb-offset: var(--sb-w-collapsed); } /* ── The rail ─────────────────────────────────────────────────────── */ .sp-sb { /* Light. The project's own light-theme values, so the rail sits in the same family as the page beside it rather than looking like a separate product. */ --sb-bg-top: #ffffff; --sb-bg-bottom: #f7f4f0; --sb-line: #e2ddd6; --sb-fg: #1a1713; --sb-fg-muted: #6b6560; --sb-accent: #e8530a; --sb-accent-deep: #c94208; --sb-accent-soft: rgba(232, 83, 10, .10); --sb-edge: rgba(232, 83, 10, .28); /* Hover is a tint of the foreground, so it darkens a light rail and lightens a dark one without either needing its own rule. */ --sb-hover: rgba(26, 23, 19, .055); --sb-active-fg: #12100e; --sb-active-wash: rgba(232, 83, 10, .02); --sb-scroll: #c9c2b8; position: fixed; top: 0; left: 0; z-index: 200; display: flex; flex-direction: column; width: var(--sb-offset, var(--sb-w)); height: 100vh; height: 100dvh; background: linear-gradient(180deg, var(--sb-bg-top) 0%, var(--sb-bg-bottom) 100%); border-right: 1px solid var(--sb-line); color: var(--sb-fg); font-family: var(--font-body); overflow: hidden; transition: width var(--sb-speed) var(--sb-ease), transform var(--sb-speed) var(--sb-ease); } [data-theme="dark"] .sp-sb { --sb-bg-top: #1c1a18; --sb-bg-bottom: #131211; --sb-line: #2a2724; --sb-fg: #f0ede8; --sb-fg-muted: #9e9990; --sb-accent: #f06030; --sb-accent-deep: #c94208; --sb-accent-soft: rgba(240, 96, 48, .13); --sb-edge: rgba(240, 96, 48, .35); --sb-hover: rgba(255, 255, 255, .055); --sb-active-fg: #ffffff; --sb-active-wash: rgba(240, 96, 48, .03); --sb-scroll: #3d3a36; } /* A hairline of accent down the leading edge. Cheap, and it stops the rail reading as a flat slab in either theme. */ .sp-sb::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 1px; background: linear-gradient(180deg, transparent, var(--sb-edge) 30%, transparent 85%); pointer-events: none; } /* ── Head ─────────────────────────────────────────────────────────── */ .sp-sb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 64px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--sb-line); flex: 0 0 auto; } .sp-sb-wordmark { font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sb-fg-muted); white-space: nowrap; } .sp-sb-toggle { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--sb-fg-muted); cursor: pointer; transition: color var(--sb-speed) var(--sb-ease), background var(--sb-speed) var(--sb-ease), border-color var(--sb-speed) var(--sb-ease), transform var(--sb-speed) var(--sb-ease); } .sp-sb-toggle svg { width: 20px; height: 20px; } .sp-sb-toggle:hover { color: var(--sb-fg); background: var(--sb-hover); border-color: var(--sb-line); } .sp-sb-toggle:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 2px; } /* ── Links ────────────────────────────────────────────────────────── */ .sp-sb-nav { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; padding: 14px 12px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--sb-scroll) transparent; } .sp-sb-nav::-webkit-scrollbar { width: 8px; } .sp-sb-nav::-webkit-scrollbar-thumb { background: var(--sb-scroll); border-radius: 99px; } .sp-sb-link { position: relative; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 10px; color: var(--sb-fg-muted); text-decoration: none; font-size: .88rem; font-weight: 500; white-space: nowrap; transition: color var(--sb-speed) var(--sb-ease), background var(--sb-speed) var(--sb-ease); } .sp-sb-link:hover { color: var(--sb-fg); background: var(--sb-hover); text-decoration: none; } .sp-sb-link:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: -2px; } .sp-sb-link.is-active { color: var(--sb-active-fg); font-weight: 600; background: linear-gradient(90deg, var(--sb-accent-soft), var(--sb-active-wash)); } /* The marker is on the left edge and only exists when active, so the collapsed rail still shows where you are with no label to read. */ .sp-sb-link.is-active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--sb-accent); } .sp-sb-ico { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; } .sp-sb-ico svg { width: 20px; height: 20px; } .sp-sb-link.is-active .sp-sb-ico { color: var(--sb-accent); } .sp-sb-label { overflow: hidden; text-overflow: ellipsis; transition: opacity calc(var(--sb-speed) * .7) var(--sb-ease); } .sp-sb-rule { height: 1px; margin: 10px 12px; background: var(--sb-line); flex: 0 0 auto; } /* ── Foot ─────────────────────────────────────────────────────────── */ .sp-sb-foot { flex: 0 0 auto; padding: 12px; border-top: 1px solid var(--sb-line); } .sp-sb-user { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 8px; border-radius: 10px; overflow: hidden; } .sp-sb-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--sb-accent), var(--sb-accent-deep)); /* Literal, and correct in both themes: this sits on the accent gradient, which is the same colour whichever theme is on. */ color: #fff; font-family: var(--font-display); font-size: .82rem; font-weight: 700; } .sp-sb-username { font-size: .82rem; color: var(--sb-fg-muted); white-space: nowrap; } .sp-sb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Collapsed ────────────────────────────────────────────────────── */ .sp-sb-collapsed .sp-sb-label, .sp-sb-collapsed .sp-sb-wordmark { opacity: 0; width: 0; pointer-events: none; } .sp-sb-collapsed .sp-sb-head { justify-content: center; padding: 0 12px; } .sp-sb-collapsed .sp-sb-toggle { transform: rotate(180deg); } .sp-sb-collapsed .sp-sb-link, .sp-sb-collapsed .sp-sb-user { justify-content: center; gap: 0; padding: 0; } /* ── The page beside it ───────────────────────────────────────────── */ .sp-has-sidebar .sp-topbar, .sp-has-sidebar .main-content { margin-left: var(--sb-offset); transition: margin-left var(--sb-speed) var(--sb-ease); } .sp-topbar { display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 24px; background: var(--bg-card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .sp-topbar-spacer { flex: 1 1 auto; } .sp-topbar-actions { display: flex; align-items: center; gap: 10px; } .sp-topbar-user { display: flex; align-items: center; gap: 9px; padding: 4px 10px 4px 4px; border: 1px solid var(--border); border-radius: 999px; color: var(--fg); text-decoration: none; font-size: .82rem; font-weight: 600; transition: border-color var(--transition), background var(--transition); } .sp-topbar-user:hover { border-color: var(--border-strong); background: var(--bg-subtle); text-decoration: none; } .sp-topbar-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: #fff; font-family: var(--font-display); font-size: .78rem; font-weight: 700; } /* Opens the drawer on small screens; pointless anywhere the rail is visible. */ .sp-topbar-burger { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--fg); font-size: 1.05rem; cursor: pointer; } .sp-sb-scrim { position: fixed; inset: 0; z-index: 150; /* Literal for the same reason: an overlay dims the page behind it, and it has to be dark to do that whichever theme that page is in. */ background: rgba(8, 7, 6, .55); opacity: 0; pointer-events: none; transition: opacity var(--sb-speed) var(--sb-ease); } /* ── Mobile: the rail becomes a drawer ────────────────────────────── */ @media (max-width: 900px) { .sp-has-sidebar { --sb-offset: 0px; } .sp-sb { width: var(--sb-w); transform: translateX(-100%); box-shadow: none; } /* Collapsing is a desktop idea. On a drawer the labels are always wanted, so the collapsed class must not shrink anything here. */ .sp-sb-collapsed .sp-sb-label, .sp-sb-collapsed .sp-sb-wordmark { opacity: 1; width: auto; pointer-events: auto; } .sp-sb-collapsed .sp-sb-link, .sp-sb-collapsed .sp-sb-user { justify-content: flex-start; gap: 12px; padding: 0 12px; } .sp-sb-collapsed .sp-sb-head { justify-content: space-between; padding: 0 12px 0 20px; } .sp-sb-collapsed .sp-sb-toggle { transform: none; } .sp-sb-open .sp-sb { transform: translateX(0); box-shadow: var(--shadow-lg); } .sp-sb-open .sp-sb-scrim { opacity: 1; pointer-events: auto; } .sp-topbar-burger { display: inline-flex; } /* The rail's own toggle closes the drawer instead of collapsing it. */ .sp-sb-toggle { transform: none; } .sp-topbar { padding: 0 14px; } .sp-topbar-username { display: none; } } /* Someone who asked for less motion should not get a sliding drawer. */ @media (prefers-reduced-motion: reduce) { .sp-sb, .sp-sb-scrim, .sp-sb-label, .sp-has-sidebar .sp-topbar, .sp-has-sidebar .main-content { transition: none; } }