/* shared lateral (offcanvas) mobile menu, used on every page so the mobile nav experience is identical no matter where the visitor enters the site. tokens live at :root (not scoped to .reels-root) so both base.html and base_reels.html can use them; base.html/base_reels.html both set data-bs-theme on from prefers-color-scheme via an inline script. */ :root { --menu-surface: #141414; --menu-text: #f5f5f0; --menu-text-muted: #9b9b95; --menu-accent: #f0b429; --menu-hairline: rgba(255, 255, 255, 0.12); --menu-close-filter: invert(1) grayscale(100%) brightness(200%); } :root[data-bs-theme="light"] { --menu-surface: #f0ece3; --menu-text: #1c1a17; --menu-text-muted: #6b655c; --menu-accent: #9c5b00; --menu-hairline: rgba(0, 0, 0, 0.12); --menu-close-filter: none; } .site-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: none; border-radius: 999px; background: var(--menu-surface); color: var(--menu-text); font-size: 1.1rem; line-height: 1; } .site-menu-toggle:hover, .site-menu-toggle:focus { background: var(--menu-surface); color: var(--menu-accent); } #site-menu { background: var(--menu-surface); color: var(--menu-text); } #site-menu .offcanvas-header { border-bottom: 1px solid var(--menu-hairline); } #site-menu .offcanvas-title { color: var(--menu-text); } #site-menu .btn-close { filter: var(--menu-close-filter); } #site-menu .nav-link { color: var(--menu-text-muted); padding: 0.6rem 0.25rem; border-bottom: 1px solid var(--menu-hairline); } #site-menu .nav-item:last-child .nav-link { border-bottom: none; } #site-menu .nav-link:hover, #site-menu .nav-link:focus, #site-menu .nav-link.active { color: var(--menu-accent); } #site-menu hr { border-color: var(--menu-hairline); margin: 0.5rem 0; }