/* ========================================================================== sidebar_toybox.css — Toy Box skin for the app-shell sidebar. The sidebar in base.html uses the DESIGN-SYSTEM component API documented in DESIGN.md §4 and demoed in the specimen: .tb-side / .tb-side__label / .tb-side__item ([aria-current] = violet fill), plus a few app-shell-only sub-elements (__logo, __icon-btn, __avatar, __foot-link, __logout) for the header/footer chrome the marketing rail doesn't have. Self-contained on purpose: • We do NOT load site_toybox.css here — its bare element selectors (body, a, h1–h3, .card, table…) would leak into every page that has no .tbm wrapper, including the /studios/ surfaces that share this same shell. • Tokens are re-declared with a --tb- prefix and SCOPED to the sidebar chrome, so we never clobber the global --ink the clay/material components rely on. Loaded in AFTER the clay/material design system so it always wins. ========================================================================== */ /* --- Toy Box tokens, scoped to the shell sidebar chrome only ------------- */ .sidebar, #global-sidebar-tooltip, .app-shell-mobile-btn{ --tb-violet: oklch(58% 0.19 300); --tb-violet-deep: oklch(46% 0.17 300); --tb-rose: oklch(70% 0.16 10); --tb-card: oklch(99.5% 0.002 300); /* raised panel face */ --tb-ink: oklch(23% 0.03 300); /* primary text (local, not global --ink) */ --tb-soft: oklch(45% 0.025 300); /* muted text / rest icons */ --tb-hover: oklch(93% 0.03 300); /* subtle hover wash */ --tb-border: oklch(88% 0.03 300); --tb-r-md: 18px; --tb-r-sm: 12px; --tb-lift: 0 2px 4px rgb(40 20 80 / .06), 0 12px 28px -8px rgb(40 20 80 / .16), 0 32px 64px -24px rgb(40 20 80 / .22); --tb-ring-strong: 0 0 0 3px oklch(58% 0.19 300 / .30); --tb-dur: .15s; } /* --- Panel: light card surface + soft lift + hairline edge --------------- */ .sidebar.tb-side{ background: var(--tb-card); border: 0; border-inline-end: 1px solid var(--tb-border); box-shadow: var(--tb-lift); } /* --- Header: brand mark + collapse/close icon buttons ------------------- */ .sidebar > .h-16{ border-bottom: 1px solid var(--tb-border); } .tb-side__logo{ background: var(--tb-card); border: 1px solid var(--tb-border); box-shadow: var(--tb-lift); } .tb-side__logo-mark{ width: 24px; height: 24px; object-fit: contain; } .tb-side__icon-btn, .tb-side__icon-btn--rose{ transition: color var(--tb-dur), background var(--tb-dur); } .tb-side__icon-btn:hover{ background: var(--tb-hover); color: var(--tb-violet-deep); } .tb-side__icon-btn--rose:hover{ background: var(--tb-hover); color: var(--tb-rose); } /* --- Nav items: FULL Toy Box .tb-side__item spec (layout + skin) -------- Mirrors site_toybox.css .tb-side__item so the rows keep flex layout, padding and rounding once the clay-nav-item classes are gone. --- */ .sidebar .tb-side__item{ display: flex; align-items: center; gap: .7em; font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--tb-ink); padding: .6em .8em; border: 0; border-radius: var(--tb-r-md); background: transparent; transition: background var(--tb-dur), color var(--tb-dur); } .sidebar .tb-side__item:hover{ background: var(--tb-hover); color: var(--tb-ink); transform: none; } /* Active row — flat violet fill, white content (DS [aria-current] rule) */ .sidebar .tb-side__item[aria-current]{ background: var(--tb-violet); color: #fff; } .sidebar .tb-side__item[aria-current]:hover{ background: var(--tb-violet-deep); } .sidebar .tb-side__item:focus-visible{ outline: none; box-shadow: var(--tb-ring-strong); } /* Stacked "Studios" sub-label: muted at rest, legible on the violet row */ .sidebar .sidebar-subtext{ color: var(--tb-soft); opacity: 1; } .sidebar .tb-side__item[aria-current] .sidebar-subtext{ color: #fff; opacity: .82; } /* --- Footer: user row + logout ------------------------------------------ */ .sidebar > div:last-child{ border-top: 1px solid var(--tb-border); } .tb-side__avatar{ background: linear-gradient(135deg, var(--tb-violet), var(--tb-violet-deep)); } .tb-side__foot-link{ transition: background var(--tb-dur); } .tb-side__foot-link:hover{ background: var(--tb-hover); } .tb-side__logout{ color: var(--tb-rose); transition: background var(--tb-dur); } .tb-side__logout:hover{ background: var(--tb-hover); color: var(--tb-rose); } /* --- Collapsed-state tooltip (built by JS with .clay-card) --------------- */ #global-sidebar-tooltip{ background: var(--tb-card); color: var(--tb-ink); box-shadow: var(--tb-lift); border: 1px solid var(--tb-border); border-radius: var(--tb-r-sm); } /* --- Mobile menu (hamburger) button ------------------------------------- */ .app-shell-mobile-btn{ background: var(--tb-card) !important; color: var(--tb-ink) !important; box-shadow: var(--tb-lift) !important; border: 1px solid var(--tb-border) !important; border-radius: var(--tb-r-md) !important; } /* --- Optional dark seam (harmless if the shell never sets .dark) --------- */ .dark .sidebar, .dark #global-sidebar-tooltip, .dark .app-shell-mobile-btn{ --tb-violet-deep: oklch(80% 0.13 300); --tb-card: oklch(25.5% 0.026 300); --tb-ink: oklch(95% 0.008 300); --tb-soft: oklch(72% 0.02 300); --tb-hover: oklch(33% 0.028 300); --tb-border: oklch(40% 0.02 300); --tb-lift: 0 2px 4px rgb(0 0 0 / .35), 0 12px 28px -8px rgb(0 0 0 / .55), 0 32px 64px -24px rgb(0 0 0 / .65); }