/* ============================================================ Le Bonhomme Pharma — Canonical light / dark theme system Shared across every page. Single source of truth for the premium pill toggle component + smooth theme transition. Pairs with theme.js (injects the toggle, persists choice in localStorage under "lbp-theme", sets data-theme pre-paint). Per-page colour values live in each page's own [data-theme="light"] block — this file owns the COMPONENT, not the palette, so there is no per-component duplication. ============================================================ */ /* ── Smooth recolour on toggle ────────────────────────────── Enabled only after first paint (theme.js adds .theme-anim to ), so switching themes cross-fades but the initial load never animates — no jarring flash. Declared before the toggle rules so the toggle keeps its own transform transition. */ .theme-anim, .theme-anim *:not(canvas):not(.lbp-theme-toggle__thumb):not(.lbp-theme-toggle__icon) { transition: background-color 300ms ease, background-image 300ms ease, border-color 300ms ease, color 300ms ease, fill 300ms ease, box-shadow 300ms ease; } /* ── Canonical pill toggle ──────────────────────────────────── */ .lbp-theme-toggle { /* Accent resolves to whatever the host page calls its accent. */ --lbp-accent: var(--color-accent, var(--teal, var(--neon-b, #22D3EE))); appearance: none; -webkit-appearance: none; border: 0; margin: 0; padding: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; border-radius: 999px; line-height: 0; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .lbp-theme-toggle:focus-visible { /* canonical focus ring — see interaction.css */ outline: 2px solid #22D3EE; outline-offset: 2px; } .lbp-theme-toggle__track { position: relative; display: inline-flex; align-items: center; width: 52px; height: 28px; padding: 3px; border-radius: 999px; background: linear-gradient(145deg, #10141c, #1c2433); border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55); transition: background 300ms ease, border-color 300ms ease, box-shadow 300ms ease; } [data-theme="light"] .lbp-theme-toggle__track { background: linear-gradient(145deg, #dcd1a8, #f4d98a); border-color: rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px 3px rgba(120, 90, 0, 0.18); } .lbp-theme-toggle__thumb { position: relative; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; transform: translateX(0); background: linear-gradient(145deg, #3a465c, #232c3c); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.06); transition: transform 300ms cubic-bezier(0.4, 0.15, 0.2, 1), background 300ms ease, box-shadow 300ms ease; } [data-theme="light"] .lbp-theme-toggle__thumb { transform: translateX(24px); background: linear-gradient(145deg, #ffffff, #ffe39a); box-shadow: 0 2px 6px rgba(146, 100, 0, 0.35), 0 0 12px rgba(251, 191, 36, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.7); } /* Hover / active polish */ .lbp-theme-toggle:hover .lbp-theme-toggle__thumb { box-shadow: 0 2px 7px rgba(0, 0, 0, 0.55), 0 0 10px color-mix(in srgb, var(--lbp-accent) 55%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.12); } [data-theme="light"] .lbp-theme-toggle:hover .lbp-theme-toggle__thumb { box-shadow: 0 2px 8px rgba(146, 100, 0, 0.4), 0 0 16px rgba(251, 191, 36, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.8); } .lbp-theme-toggle:active .lbp-theme-toggle__thumb { width: 24px; } /* Icons cross-fade with a little rotation inside the thumb */ .lbp-theme-toggle__icon { position: absolute; width: 13px; height: 13px; transition: opacity 300ms ease, transform 350ms cubic-bezier(0.4, 0.15, 0.2, 1); } .lbp-theme-toggle .lbp-icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.4); color: #b45309; } .lbp-theme-toggle .lbp-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); color: #c7d2e8; } [data-theme="light"] .lbp-theme-toggle .lbp-icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } [data-theme="light"] .lbp-theme-toggle .lbp-icon-moon { opacity: 0; transform: rotate(90deg) scale(0.4); } @media (prefers-reduced-motion: reduce) { .theme-anim, .theme-anim *, .lbp-theme-toggle__track, .lbp-theme-toggle__thumb, .lbp-theme-toggle__icon { transition: none !important; } }