/* ============================================================================ COFFEE & CRÈME — global chrome (sidebar + header) ---------------------------------------------------------------------------- Brings the warm parchment/espresso world of the student-profile redesign to the GLOBAL left sidebar + header, on every page. Loaded last in . IMPORTANT — specificity contract: base.html ships a "white panel" light-mode redesign whose selectors are `html[data-theme="light"] .mn-desktop-…` (specificity 0,2,1) with !important. A bare `.mn-desktop-…` (0,1,0) can NEVER beat that, no matter the load order. So every colour rule below is written in TWO forms: • `html .mn-desktop-…` → beats base dark (.x = 0,1,0) • `html[data-theme="light"] .mn-desktop-…` → ties base light, wins by order Compound selectors mirror base.html's exact shape so specificity matches and "loaded last" breaks the tie in our favour. Theme model: dark = default (:root) light = html[data-theme="light"] The teal active-nav state (teal_focal_anchor.css) is intentionally kept. ============================================================================ */ :root{ /* dark — warm espresso */ --cc-chrome-bg: #221C15; --cc-chrome-bg-2: #2D2419; --cc-chrome-border: #3A2F22; --cc-chrome-border-2: #4D4030; --cc-chrome-text: #F2E5C9; --cc-chrome-muted: #A89876; --cc-chrome-icon: #B8A47E; --cc-chrome-hover: #2D2419; --cc-page-bg: #18130E; /* = student-profile page bg (dark) */ --cc-chrome-shadow: 0 20px 48px rgba(0,0,0,0.45); --cc-amber: #D89C3C; /* Expanded-sidebar width — wide enough to clear the logo's right edge (collapsed rail 64px + ~140px "VALORY" wordmark ≈ 204px) with room. */ --cc-sidebar-expanded: 280px; } html[data-theme="light"]{ /* light — warm parchment / ivory */ --cc-chrome-bg: #F6EFDB; /* ivory surface */ --cc-chrome-bg-2: #E5DCC2; /* pale oat */ --cc-chrome-border: #D9CCA7; /* oat */ --cc-chrome-border-2: #C7B68A; --cc-chrome-text: #1F1810; /* espresso */ --cc-chrome-muted: #5B4A30; /* espresso-soft */ --cc-chrome-icon: #5B4A30; --cc-chrome-hover: #E5DABE; --cc-page-bg: #ECE5D2; /* = student-profile page bg (light) */ --cc-chrome-shadow: 0 18px 40px rgba(40,28,12,0.12), 0 1px 4px rgba(40,28,12,0.06); --cc-amber: #B47514; } /* --------------------------------------------------------------------------- 1. HEADER — ZERO SEAM with the body. The body paints `var(--mn-global-bg)`. Instead of trying to *match* that colour (which left a faint seam), we make the header + nav + containers fully transparent so the one body surface shows straight through. base.html forces `html[data-theme="light"] .mn-header{background:#DCDCE4!important}` plus a box-shadow — those exact selectors are mirrored here (equal specificity, loaded last → we win) and neutralised. --------------------------------------------------------------------------- */ html .mn-header, html .mn-nav, html .mn-header .container, html .mn-header .container-xxl, html .mn-header .container-xl, html .mn-header .container-lg, html .mn-header .container-md, html .mn-header .container-sm, html[data-theme="light"] .mn-header, html[data-theme="light"] .mn-header .container, html[data-theme="light"] .mn-header .container-xxl, html[data-theme="light"] .mn-header .container-xl, html[data-theme="light"] .mn-header .container-lg, html[data-theme="light"] .mn-header .container-md, html[data-theme="light"] .mn-header .container-sm, html[data-theme="light"] .mn-nav{ background: transparent !important; background-color: transparent !important; } html .mn-header, html[data-theme="light"] .mn-header{ border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Tighten the header — just tall enough for the Study Session island. */ html .mn-header, html[data-theme="light"] .mn-header{ padding-top: 6px !important; margin-bottom: 4px !important; } html .mn-nav, html[data-theme="light"] .mn-nav{ min-height: 52px !important; padding: 0 !important; } /* The decorative backdrop strip would re-introduce a tonal band — kill it. */ html .mn-header-backdrop, html[data-theme="light"] .mn-header-backdrop{ display: none !important; } /* --------------------------------------------------------------------------- 2. SIDEBAR SURFACE — Coffee & Crème (replaces the blue glass / white panel) --------------------------------------------------------------------------- */ html .mn-desktop-sidebar, html[data-theme="light"] .mn-desktop-sidebar{ background: var(--cc-chrome-bg) !important; border: 1px solid var(--cc-chrome-border) !important; box-shadow: var(--cc-chrome-shadow) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html .mn-desktop-sidebar-header, html .mn-desktop-sidebar-footer, html[data-theme="light"] .mn-desktop-sidebar-header, html[data-theme="light"] .mn-desktop-sidebar-footer{ border-color: var(--cc-chrome-border) !important; } /* nav links */ html .mn-desktop-link, html[data-theme="light"] .mn-desktop-link{ color: var(--cc-chrome-muted) !important; background: transparent !important; border-color: transparent !important; } html .mn-desktop-link .mn-sidebar-icon, html .mn-desktop-sublink .mn-sidebar-icon, html[data-theme="light"] .mn-desktop-link .mn-sidebar-icon, html[data-theme="light"] .mn-desktop-sublink .mn-sidebar-icon{ color: var(--cc-chrome-icon) !important; } html .mn-desktop-link:not(.mn-desktop-signout-btn):hover, html[data-theme="light"] .mn-desktop-link:not(.mn-desktop-signout-btn):hover{ background: var(--cc-chrome-hover) !important; color: var(--cc-chrome-text) !important; border-color: var(--cc-chrome-border) !important; } html .mn-desktop-link:not(.mn-desktop-signout-btn):hover .mn-sidebar-icon, html[data-theme="light"] .mn-desktop-link:hover .mn-sidebar-icon{ color: var(--cc-chrome-text) !important; } /* (.is-active stays teal — defined in teal_focal_anchor.css) */ html .mn-desktop-divider, html .mn-desktop-sidebar-nav .mn-desktop-divider, html[data-theme="light"] .mn-desktop-divider{ background: var(--cc-chrome-border) !important; } html .mn-desktop-submenu, html[data-theme="light"] .mn-desktop-submenu{ border-left: 1px solid var(--cc-chrome-border) !important; } html .mn-desktop-sublink, html[data-theme="light"] .mn-desktop-sublink{ color: var(--cc-chrome-muted) !important; background: transparent !important; } html .mn-desktop-sublink:hover, html[data-theme="light"] .mn-desktop-sublink:hover{ background: var(--cc-chrome-hover) !important; color: var(--cc-chrome-text) !important; } html .mn-desktop-sublink:hover .mn-sidebar-icon, html[data-theme="light"] .mn-desktop-sublink:hover .mn-sidebar-icon{ color: var(--cc-chrome-text) !important; } html .mn-desktop-more-toggle, html[data-theme="light"] .mn-desktop-more-toggle{ background: var(--cc-chrome-bg-2) !important; border: 1px solid var(--cc-chrome-border) !important; color: var(--cc-chrome-muted) !important; } /* sidebar search / bell icon buttons */ html .mn-desktop-sidebar-header-actions .mn-icon-btn, html[data-theme="light"] .mn-desktop-sidebar-header-actions .mn-icon-btn{ background: var(--cc-chrome-bg-2) !important; border: 1px solid var(--cc-chrome-border) !important; color: var(--cc-chrome-icon) !important; } html .mn-desktop-sidebar-header-actions .mn-icon-btn:hover, html[data-theme="light"] .mn-desktop-sidebar-header-actions .mn-icon-btn:hover{ background: var(--cc-chrome-hover) !important; color: var(--cc-chrome-text) !important; } /* sign-out keeps its red identity, just warm-tuned */ html .mn-desktop-signout-btn, html[data-theme="light"] .mn-desktop-signout-btn, html .mn-desktop-signout-btn .mn-sidebar-icon, html[data-theme="light"] .mn-desktop-signout-btn .mn-sidebar-icon{ color: #C0532B !important; } html .mn-desktop-signout-btn:hover, html[data-theme="light"] .mn-desktop-signout-btn:hover{ background: color-mix(in srgb, #C0532B 12%, transparent) !important; } /* --------------------------------------------------------------------------- 3. THE HAMBURGER — lives at the top of the rail and reads as part of it. Warm-neutral at rest, amber on hover (YouTube-style). --------------------------------------------------------------------------- */ html .mn-desktop-sidebar-edge-toggle, html[data-theme="light"] .mn-desktop-sidebar-edge-toggle{ background: var(--cc-chrome-bg) !important; border: 1px solid var(--cc-chrome-border) !important; color: var(--cc-chrome-icon) !important; box-shadow: none !important; width: 38px !important; height: 38px !important; border-radius: 11px !important; } html .mn-desktop-sidebar-edge-toggle:hover, html .mn-desktop-sidebar-edge-toggle:focus-visible, html[data-theme="light"] .mn-desktop-sidebar-edge-toggle:hover{ background: color-mix(in srgb, var(--cc-amber) 16%, transparent) !important; border-color: color-mix(in srgb, var(--cc-amber) 45%, transparent) !important; color: var(--cc-amber) !important; } /* --------------------------------------------------------------------------- 4. YOUTUBE-STYLE EXPAND (desktop only) - the hamburger/X stays pinned top-left and clickable at ALL times - expanding OVERLAYS content (no page push) - the expanded panel spans the FULL rail height but slides in BEHIND the logo + X: both stay 100% visible, unmoved, with the sidebar's tint showing around them (logo z7 > X z6 > panel z5) - a dim backdrop appears, click-to-close (existing JS already wired) --------------------------------------------------------------------------- */ @media (min-width: 769px){ /* Overlay, don't push: keep content/header offset at the collapsed width */ body.mn-sidebar-expanded{ --mn-sidebar-offset: var(--mn-sidebar-collapsed) !important; } body.mn-study-session-on.mn-sidebar-expanded{ --mn-sidebar-offset: 0px !important; } /* YouTube pattern — the sidebar BACKGROUND extends *under* the logo + X. Both stay fully visible, unmoved, at full opacity; only the tinted panel slides in behind them. z 7 logo (highest in the sidebar zone) z 6 hamburger / X (on the surface, in front of the panel) z 5 expanded panel background No transform / opacity on the logo at any point. */ .mn-desktop-logo-row{ position: relative; z-index: 7; } .mn-desktop-logo-link, .mn-desktop-logo-image{ position: relative; z-index: 7; } .mn-desktop-toggle-slot{ position: relative; z-index: 6; } /* ---- COLLAPSED: hamburger reads as the TOP of the sidebar column ---- The toggle slot gets the sidebar surface, the exact collapsed width, and sits flush on the icon rail (gap removed) so it's one continuous cream column — hamburger on top, icons below — bounded by the rail edges. */ html .mn-desktop-left-rail{ gap: 0 !important; } html .mn-desktop-logo-row{ padding-top: 0 !important; padding-bottom: 0 !important; } html .mn-desktop-toggle-slot{ align-self: stretch !important; min-height: var(--mn-logo-row-height) !important; width: var(--mn-sidebar-collapsed) !important; flex: 0 0 var(--mn-sidebar-collapsed) !important; background: var(--cc-chrome-bg) !important; border: 1px solid var(--cc-chrome-border) !important; border-bottom: 0 !important; border-radius: 18px 18px 0 0 !important; } /* The rail meets the slot with no double border / stray rounded corner. */ html .mn-desktop-sidebar.is-collapsed{ border-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } /* EXPANDED: the slot dissolves into the big panel (both cream, no divider); the X stays at the exact screen spot the hamburger occupied. */ body.mn-sidebar-expanded .mn-desktop-toggle-slot{ border-color: transparent !important; border-radius: 18px 0 0 0 !important; background: var(--cc-chrome-bg) !important; } /* Expanded sidebar = full-rail overlay panel that slides in BEHIND the logo + X (z 5, below them). Fixed width, wide enough that its right edge clears the logo's right edge with breathing room — tune via --cc-sidebar-expanded. Specificity (0,2,0) ties base.html's `.mn-desktop-sidebar.is-open`; this file loads last so these win. */ .mn-desktop-sidebar.is-open{ position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: var(--cc-sidebar-expanded) !important; z-index: 5 !important; padding-top: calc(var(--mn-logo-row-height) + 10px) !important; box-shadow: var(--cc-chrome-shadow) !important; overflow: hidden auto !important; } /* Dim backdrop while expanded (JS already closes on backdrop click) */ body.mn-sidebar-expanded .mn-desktop-sidebar-backdrop{ display: block !important; position: fixed !important; inset: 0 !important; background: rgba(20, 14, 6, 0.34) !important; z-index: 1400 !important; pointer-events: auto !important; } } /* --------------------------------------------------------------------------- 5. LOGO — 20% smaller on desktop (size/position constant across toggle) --------------------------------------------------------------------------- */ @media (min-width: 769px){ .mn-desktop-logo-image{ height: 51.5px !important; /* was 64.4px → −20% */ } :root, html[data-theme="light"]{ --mn-logo-row-height: 62.5px; /* tighten the row to match the smaller logo */ } } html[data-theme="light"] .mn-nav-brand img, .mn-nav-brand-img{ height: 25.6px !important; /* header logo (mobile / dark) — was 32px, −20% */ }