/* ============ Colour scheme switcher — PREVIEW CHROME ONLY ============ Not part of the design system: excluded from design.md and the quality- bar review. Deliberately neutral styling (system font, plain neutrals, no brand gradient) so it never reads as part of the page itself. Safe to delete this file + switcher.js + the one markup include with zero effect on the actual homepage. */ .preview-switcher { position: fixed; right: 14px; bottom: 14px; z-index: 999; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } /* Always open — every scheme visible, one tap to switch (finalised per review, 2026-07-24; the old collapsed toggle button is gone). */ .preview-switcher__panel { width: 200px; background: #1c1c1e; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,0.35); padding: 10px; } .preview-switcher__label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); padding: 2px 4px 8px; } .preview-switcher__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; } .preview-switcher__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 10px; background: none; border: 0; color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; } @media (hover: hover) { .preview-switcher__item:hover { background: rgba(255,255,255,0.08); } } .preview-switcher__item:active { transform: scale(0.98); } .preview-switcher__item[aria-pressed="true"] { background: rgba(255,255,255,0.12); color: #fff; } .preview-switcher__swatch { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); } .preview-switcher__check { margin-left: auto; width: 14px; height: 14px; flex-shrink: 0; opacity: 0; } .preview-switcher__item[aria-pressed="true"] .preview-switcher__check { opacity: 1; } /* The ~200ms background/text colour cross-fade when a scheme is switched — scoped to a short-lived class on so it never fights other transitions on the page. */ html.theme-transition, html.theme-transition * { transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease !important; } @media (prefers-reduced-motion: reduce) { .preview-switcher__panel, .preview-switcher__item, html.theme-transition, html.theme-transition * { transition: none !important; } }