/* Small, persistent theme control. Fixed to the viewport corner so it never lives in the header or over the hero product. */ .theme-toggle { position: fixed; z-index: 180; right: max(16px, calc(env(safe-area-inset-right) + 12px)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px)); pointer-events: none; } .theme-toggle-button { display: inline-flex; width: 44px; height: 44px; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 0; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--paper) 90%, transparent); color: var(--ink); box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 16%, transparent), inset 0 1px 0 color-mix(in srgb, var(--paper) 60%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); font-family: var(--mono); font-size: .59rem; font-weight: 600; letter-spacing: .12em; line-height: 1; text-transform: uppercase; pointer-events: auto; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; } .theme-toggle-button::before { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); content: ""; } .theme-toggle-button::after { width: 5px; height: 5px; margin-left: 1px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; content: ""; opacity: .64; transform: rotate(45deg); } .theme-toggle-button [data-theme-toggle-label] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .theme-toggle-button:hover, .theme-toggle-button:focus-visible { border-color: var(--action); background: var(--action); color: var(--action-ink); } .theme-toggle-button:active { transform: scale(.96); } html[data-skin="nocturne"] .theme-toggle-button { border-color: color-mix(in srgb, var(--ink) 28%, transparent); background: color-mix(in srgb, var(--paper) 82%, transparent); color: var(--ink); } @media (max-width: 560px) { .theme-toggle { right: max(12px, calc(env(safe-area-inset-right) + 8px)); bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px)); } .theme-toggle-button { width: 42px; height: 42px; min-height: 42px; } } @media (prefers-reduced-transparency: reduce) { .theme-toggle-button { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* ------------------------------------------------------------------------- The browser's own canvas must never show. carried no background, so the page colour was painted by and, with the mobile menu up, by the fixed nav sheet. Where neither reached, what showed was the browser's default canvas -- a slate grey in dark mode, near white in light -- which is why a band appeared along the bottom in both themes and matched neither. On iOS that gap is easy to open: a fixed element sized with inset: 0 is laid out against one viewport while the toolbars change how much of it you can actually see. Painting html with the same paper means there is nothing behind the page to reveal. It lives here because this is the one stylesheet every page loads, and it is behind body at all times, so it is only ever seen when something else has failed to cover. ------------------------------------------------------------------------- */ html { background-color: var(--paper); }