/* ── Theme Toggle Button ───────────────────────────────────────────────────── Sun/moon icon button placed in the nav-actions cluster. The correct icon is shown via [data-theme] on . ─────────────────────────────────────────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: transparent; border: 1.5px solid var(--color-border); color: var(--color-text-3); cursor: pointer; transition: background var(--ease-fast), border-color var(--ease-fast), color var(--ease-fast); flex-shrink: 0; } .theme-toggle:hover { background: var(--color-bg-muted); border-color: var(--color-text-4); color: var(--color-text); } .theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Show sun icon in light mode, moon icon in dark mode */ .theme-toggle__sun { display: block; } .theme-toggle__moon { display: none; } html[data-theme="dark"] .theme-toggle__sun { display: none; } html[data-theme="dark"] .theme-toggle__moon { display: block; } /* Mobile variant — wider, sits inside the mobile-nav__cta footer */ .theme-toggle--mobile { width: auto; padding: 0 var(--space-4); gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); border-color: var(--color-border); color: var(--color-text-3); } .theme-toggle--mobile .theme-toggle__label { display: inline; } /* ── Scroll-to-Top FAB ─────────────────────────────────────────────────────── Injected by JS. Appears after the user scrolls 400px down. ─────────────────────────────────────────────────────────────────────────── */ .scroll-to-top { position: fixed; bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); right: var(--space-5); z-index: 90; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--color-surface); border: 1.5px solid var(--color-border); color: var(--color-text-3); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--ease-base), transform var(--ease-base), background var(--ease-fast), color var(--ease-fast); } .scroll-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .scroll-to-top:hover { background: var(--color-bg-muted); color: var(--color-accent); } @media (max-width: 640px) { .scroll-to-top { right: var(--space-4); } }