/* ============================================================================ FOCAL ANCHOR — global (filename kept for the base.html ; the design no longer uses teal — see note below) ---------------------------------------------------------------------------- Source design: Claude Design bundle "calm-amber" / study-session-amber.html LATEST approved pass: the user rejected the deep-teal Study Session button and its muddy dark text. The focal CTA is now a FLAT solid fill — no gradient, no glow halo, no pulse — with high-contrast text: light = deep walnut #3A2818 + ink-cream #F6E8C2 text dark = luminous brass #E5A340 + near-black espresso #1F1408 text "Pigment depth = prestige": the button is the densest/brightest single element in the header. One soft warm drop shadow for lift; hover bumps the fill one step (walnut → lighter walnut / brass → brighter brass). The --teal-* variable names are kept purely as backwards-compat aliases (referenced by other scoped sheets); their VALUES are now warm walnut / brass. Applied GLOBALLY to the two components the design assigns the focal treatment: 1. Study Session button (.mn-top-island .mn-pill-main) 2. Active sidebar nav (.mn-desktop-link/.mn-desktop-sublink.is-active) Loaded LAST in so it wins source order; key visual props carry !important to beat the existing inline purple rules (which are !important). The light-mode play-icon ::after on the pill is intentionally NOT touched so it survives. Theme model (matches the rest of the app): dark = default (:root) light = html[data-theme="light"] ============================================================================ */ :root{ /* dark mode — luminous brass, espresso text */ --teal-cta-top: #F2B85B; /* hover — even brighter */ --teal-cta-mid: #E5A340; /* default fill — luminous brass */ --teal-cta-bot: #B07820; --teal-cta-text: #1F1408; /* near-black espresso on brass */ --teal-cta-border: #6B4012; --teal-highlight: rgba(255,232,176,0.55); --teal-glow: rgba(229,163,64,0.55); --teal-glow-strong: rgba(242,184,91,0.75); --teal-deep: #F2C36A; --teal-strong: #E5A340; --teal-line: rgba(229,163,64,0.55); --teal-soft: rgba(229,163,64,0.16); --teal-aura: rgba(229,163,64,0.40); --cta-shadow: 0 6px 18px rgba(0,0,0,0.42); --cta-shadow-hover: 0 8px 22px rgba(0,0,0,0.50); } html[data-theme="light"]{ /* light mode — deep walnut, ink-cream text */ --teal-cta-top: #5A3F22; /* hover — lighter walnut */ --teal-cta-mid: #3A2818; /* default fill — deep walnut */ --teal-cta-bot: #241608; --teal-cta-text: #F6E8C2; /* ink-cream on walnut */ --teal-cta-border: #1A1108; --teal-highlight: rgba(217,162,74,0.42); --teal-glow: rgba(180,117,20,0.34); --teal-glow-strong: rgba(180,117,20,0.52); --teal-deep: #3A2818; --teal-strong: #5A3F22; --teal-line: rgba(90,63,34,0.42); --teal-soft: rgba(90,63,34,0.10); --teal-aura: rgba(180,117,20,0.22); --cta-shadow: 0 6px 18px rgba(40,20,6,0.18); --cta-shadow-hover: 0 8px 22px rgba(40,20,6,0.24); } /* --------------------------------------------------------------------------- 1. STUDY SESSION BUTTON — the focal anchor. FLAT solid fill (walnut light / brass dark), 1px warm border, one soft warm drop shadow. No gradient, no inset highlights, no glow, no pulse. Replaces the purple gradient + the earlier teal treatment in BOTH modes. Hover lifts the fill one step lighter. The light-mode play-icon ::after is intentionally left alone so it survives. --------------------------------------------------------------------------- */ .mn-top-island .mn-pill-main, .mn-header .mn-nav .mn-pill-main, html[data-theme="light"] .mn-top-island .mn-pill-main{ background: var(--teal-cta-mid) !important; background-image: none !important; background-size: auto !important; border: 1px solid var(--teal-cta-border) !important; color: var(--teal-cta-text) !important; text-shadow: none !important; box-shadow: var(--cta-shadow) !important; animation: none !important; transition: transform .15s ease, background .2s ease, box-shadow .2s ease !important; } .mn-top-island .mn-pill-main:hover, .mn-top-island .mn-pill-main:focus-visible, html[data-theme="light"] .mn-top-island .mn-pill-main:hover, html[data-theme="light"] .mn-top-island .mn-pill-main:focus-visible{ background: var(--teal-cta-top) !important; filter: none !important; transform: translateY(-1px); box-shadow: var(--cta-shadow-hover) !important; animation: none !important; outline: none; } .mn-top-island .mn-pill-main:active{ transform: translateY(0); } @media (prefers-reduced-motion: reduce){ .mn-top-island .mn-pill-main, html[data-theme="light"] .mn-top-island .mn-pill-main{ animation: none !important; transition: none !important; } } /* --------------------------------------------------------------------------- 2. ACTIVE SIDEBAR NAV — soft warm walnut/brass accent + a warm rail on the inner edge. Replaces the purple/violet (and earlier teal) active state in both modes. Token-driven, so it follows the palette above. --------------------------------------------------------------------------- */ .mn-desktop-link.is-active, .mn-desktop-sublink.is-active, html[data-theme="light"] .mn-desktop-link.is-active, html[data-theme="light"] .mn-desktop-sublink.is-active{ background: var(--teal-soft) !important; border-color: var(--teal-line) !important; color: var(--teal-deep) !important; box-shadow: 0 0 0 1px var(--teal-aura), 0 6px 16px var(--teal-aura) !important; } .mn-desktop-link.is-active .mn-sidebar-icon, .mn-desktop-link.is-active .mn-desktop-label, .mn-desktop-sublink.is-active .mn-sidebar-icon, html[data-theme="light"] .mn-desktop-link.is-active .mn-sidebar-icon, html[data-theme="light"] .mn-desktop-sublink.is-active .mn-sidebar-icon{ color: var(--teal-deep) !important; } .mn-desktop-link.is-active::before, .mn-desktop-sublink.is-active::before{ content: ""; position: absolute; left: -1px; top: 50%; width: 3px; height: 22px; border-radius: 2px; transform: translateY(-50%); background: var(--teal-strong); box-shadow: 0 0 12px var(--teal-aura); pointer-events: none; }