/* ============================================================================ 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; } /* The expanded width used to be declared here AND in base.html (F-SHELL-2). base.html's --mn-sidebar-expanded is the one definition now; this file reads it. */ 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. --mn-screen-top-gap is 0 except in browser full screen (base.html :root). */ html .mn-header, html[data-theme="light"] .mn-header{ padding-top: calc(6px + var(--mn-screen-top-gap, 0px)) !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 RAIL TOGGLE — lives at the top of the rail and reads as part of it. Collapsed it sits over the logo's icon and shows nothing at rest (section 4); expanded, the panel glyph. 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. THE RAIL, OPEN AND CLOSED (desktop only) - the toggle is clickable at ALL times: over the logo's icon while collapsed, a panel glyph at the top right while open - the logo (icon + wordmark, a link home) is one element whose icon never moves; only the wordmark fades, and the link is inert while collapsed - opening WIDENS THE RAIL IN PLACE, 64px to 280px, and the page reflows around it. Nothing is overlaid and nothing is dimmed: the rail is part of the page, not a thing on top of it. (Phase 2; it used to overlay a dimmed page, which is what the phone drawer does and the rail should not.) --------------------------------------------------------------------------- */ @media (min-width: 769px){ /* ---- The top row is the cap of the sidebar column ---- The toggle slot carries the sidebar surface and the exact current width, so the rail reads as one continuous cream column — mark on top, icons below. Both the row and the slot track --mn-sidebar-offset, which body already switches between collapsed and expanded, so there is one source for the width and one transition timing. */ html .mn-desktop-left-rail{ gap: 0 !important; } html .mn-desktop-logo-row{ position: relative; z-index: 2; padding-top: 0 !important; padding-bottom: 0 !important; /* 100%, not the offset variable: the row is a flex child of the rail, whose width is the thing that actually changes, so the row tracks it every frame without a width transition of its own. */ width: 100% !important; /* NOT overflow:hidden. Phase 1 clipped the whole row to stop the wordmark being drawn outside the panel mid-slide (F-SHELL-20); that also clipped the toggle's tooltip, which has to sit beside a 64px rail. The wordmark clips itself instead — see below — so the row can let the tooltip out. */ overflow: visible !important; } /* THE LOGO (D1, docs/cc-prompt-logo-swap.md). One 32px icon that never moves: centred on the collapsed rail's centre line — padding (64 - 32) / 2 — and vertically centred in the row, in both states. Out of flow, so it puts no pressure on the row's width. The wrapper is as wide as the row, which tracks the rail every frame, so its clip follows the rail's live edge and the wordmark is never drawn outside the panel (the F-SHELL-20 shape). clip, not hidden: no scroll container, so focusing the link can never scroll the icon. No transform anywhere on it, so nothing resamples or blurs the icon. */ html .mn-desktop-brand{ --brand-h: 32px; position: absolute; /* Below the cap's 1px top border — the slot's while closed, the row's while open — which is the band the toggle centres in, so icon and toggle are concentric in both states. */ top: 1px; left: 0; right: 0; height: calc(var(--mn-logo-row-height) - 1px); padding-left: calc((var(--mn-sidebar-collapsed) - var(--brand-h)) / 2); display: flex; align-items: center; overflow: clip; pointer-events: none; } html .mn-desktop-brand .mn-brand{ pointer-events: auto; } /* The wordmark fades on the rail's own slide (0s under reduced motion). Closed, it is fully transparent, so no sliver shows inside the 64px cap. */ html .mn-desktop-brand .mn-brand__wordmark{ opacity: 0; transition: opacity var(--mn-sidebar-slide); } /* CLOSED: the toggle sits exactly over the icon and shows nothing at rest, so the icon is its face. Hover and focus-visible bring back section 3's amber tile and the panel glyph; base.html cross-fades the icon out beneath it. */ body:not(.mn-sidebar-expanded) .mn-desktop-sidebar-edge-toggle:not(:hover):not(:focus-visible){ background: transparent !important; border-color: transparent !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 logo links home at the top left; the slot dissolves into the panel (both cream, no divider) and carries the toggle to the top right. */ body.mn-sidebar-expanded .mn-desktop-brand .mn-brand__wordmark{ opacity: 1; } /* Open, the row gains its own 1px border (below), which moves its padding box — what positions the wrapper — 1px in on both axes. Undo it so the icon keeps its exact pixel (measured identical in both states). */ body.mn-sidebar-expanded .mn-desktop-brand{ top: 0; left: -1px; } body.mn-sidebar-expanded .mn-desktop-logo-row{ /* Open, the whole row is the top of the column, not just the 64px cap: the wordmark used to sit on the page background beside the panel. */ 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; } body.mn-sidebar-expanded .mn-desktop-toggle-slot{ margin-left: auto !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } body.mn-sidebar-expanded .mn-desktop-sidebar.is-open{ border-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } } /* --------------------------------------------------------------------------- 6. THE SAME SIDEBAR, AS THE PHONE DRAWER Section 2's surface rules carry no media query, so below 769px the panel would draw its own cream box inside the drawer's cream box. The DRAWER is the surface; the panel inside it is transparent, and the toggle in its header is a bare glyph rather than a bordered tile. This is also what closes F-SHELL-6: the drawer used to build its background out of --info, a text-colour blue. --------------------------------------------------------------------------- */ @media (max-width: 768px){ html .mn-desktop-left-rail, html[data-theme="light"] .mn-desktop-left-rail{ background: var(--cc-chrome-bg) !important; border-right: 1px solid var(--cc-chrome-border) !important; } html .mn-desktop-sidebar, html[data-theme="light"] .mn-desktop-sidebar{ background: transparent !important; border: 0 !important; box-shadow: none !important; } html .mn-desktop-sidebar-edge-toggle, html[data-theme="light"] .mn-desktop-sidebar-edge-toggle{ background: transparent !important; border-color: transparent !important; } } /* --------------------------------------------------------------------------- 5. TOP ROW HEIGHT — the rail's top row (the toggle slot). It was sized to a header logo that left the rail on 2026-09-16; the height is unchanged. --------------------------------------------------------------------------- */ @media (min-width: 769px){ :root, html[data-theme="light"]{ --mn-logo-row-height: 62.5px; } }