/* ======================================================================== Phase 4 Step 6 — Dark mode toggle button Two visual modes: 1) Default: injected into Blocksy's header next to .ct-header-search (desktop) and .ct-header-trigger (mobile). Matches Blocksy's ct-toggle button proportions. 2) Fallback: appended to with .cai-theme-toggle--fixed when JS injection fails (no header found within 500ms). Icon swap is pure CSS — controlled by [data-theme] on the root element. ======================================================================== */ .cai-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; background: var(--cai-btn-ghost-bg); /* transparent */ color: var(--cai-btn-ghost-text); /* text-secondary */ border: 1px solid transparent; border-radius: var(--cai-radius-md); cursor: pointer; transition: color var(--cai-duration-fast) var(--cai-easing), background-color var(--cai-duration-fast) var(--cai-easing), border-color var(--cai-duration-fast) var(--cai-easing); } .cai-theme-toggle:hover { color: var(--cai-text-strong); background: var(--cai-btn-ghost-hover-bg); } .cai-theme-toggle:focus-visible { outline: 2px solid var(--cai-primary); outline-offset: 2px; } /* Icons — show MOON when in light mode (signal: click to go dark), show SUN when in dark mode (signal: click to go light). */ .cai-theme-toggle__icon { display: block; flex-shrink: 0; transition: transform var(--cai-duration) var(--cai-easing), opacity var(--cai-duration) var(--cai-easing); } .cai-theme-toggle__icon--sun { display: none; } .cai-theme-toggle__icon--moon { display: block; } [data-theme="dark"] .cai-theme-toggle__icon--sun { display: block; } [data-theme="dark"] .cai-theme-toggle__icon--moon { display: none; } /* Smooth click feedback — slight rotation on toggle for delight without bursting into animation. Reduced-motion users see no transition. */ .cai-theme-toggle:active .cai-theme-toggle__icon { transform: rotate(-15deg); } /* --- Fixed-position fallback (used when JS can't find the header anchor) Bottom-right, 56px from edge, above any sticky bottom bars. --- */ .cai-theme-toggle--fixed { position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; background: var(--cai-bg); border: 1px solid var(--cai-border-strong); border-radius: 50%; box-shadow: var(--cai-shadow-md); z-index: 8500; /* below progress bar (9000), below drawer (9050) */ padding: 0; } .cai-theme-toggle--fixed:hover { background: var(--cai-bg); box-shadow: var(--cai-shadow-lg); } @media (max-width: 599px) { /* On mobile, mind the safe-area inset and the mobile-TOC drawer button that will live in the same corner family. */ .cai-theme-toggle--fixed { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } } @media (prefers-reduced-motion: reduce) { .cai-theme-toggle, .cai-theme-toggle__icon { transition: none; } }