/* ============================================================ Ambient gradient backdrop — sits behind every page; each page's own content container keeps the solid --bg color and floats on top of it like a sheet of paper. Pans very slowly; respects reduced-motion. ============================================================ */ html { min-height: 100%; background-color: #E8A9A0; background-image: radial-gradient(ellipse 60% 50% at 8% 102%, rgba(255, 189, 99, 0.65) 0%, rgba(255, 189, 99, 0) 60%), linear-gradient(135deg, #9FC1EE 0%, #E7A6A3 38%, #FB6E43 68%, #FF9A44 100%); background-size: 180% 180%, 220% 220%; background-attachment: fixed, fixed; animation: ambient-pan 90s ease-in-out infinite alternate; } body { background: transparent; } @keyframes ambient-pan { 0% { background-position: 0% 0%, 0% 0%; } 100% { background-position: 100% 100%, 100% 100%; } } @media (prefers-reduced-motion: reduce) { html { animation: none; } } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { background-color: #3A2A2E; background-image: radial-gradient(ellipse 60% 50% at 8% 102%, rgba(122, 74, 30, 0.55) 0%, rgba(122, 74, 30, 0) 60%), linear-gradient(135deg, #223049 0%, #3D2A32 38%, #52281C 68%, #4A3016 100%); } } html[data-theme="dark"] { background-color: #3A2A2E; background-image: radial-gradient(ellipse 60% 50% at 8% 102%, rgba(122, 74, 30, 0.55) 0%, rgba(122, 74, 30, 0) 60%), linear-gradient(135deg, #223049 0%, #3D2A32 38%, #52281C 68%, #4A3016 100%); } /* ============================================================ Dark mode — system preference by default, manual override persisted via [data-theme] on (set by js/theme.js). Works with either token set in use across the site: the homepage's (bg/ink/muted/faint/line) or the case-study one (adds panel/panel-2/line-strong/accent/accent-ink/chip-bg). ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #121210; --panel: #1C1C18; --panel-2: #242420; --ink: #F2F1EC; --muted: #A8A79E; --faint: #6F6E66; --line: rgba(255, 255, 255, 0.10); --line-strong: rgba(255, 255, 255, 0.18); --accent: #F2F1EC; --accent-ink: #121210; --chip-bg: #1C1C18; } } :root[data-theme="dark"] { --bg: #121210; --panel: #1C1C18; --panel-2: #242420; --ink: #F2F1EC; --muted: #A8A79E; --faint: #6F6E66; --line: rgba(255, 255, 255, 0.10); --line-strong: rgba(255, 255, 255, 0.18); --accent: #F2F1EC; --accent-ink: #121210; --chip-bg: #1C1C18; } /* ---------- Toggle button ---------- */ .theme-btn { position: fixed; top: 1.25rem; right: clamp(1.5rem, 6vw, 3rem); z-index: 50; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong, var(--line)); background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .theme-btn:hover { border-color: var(--ink); color: var(--ink); } .theme-btn svg { width: 15px; height: 15px; } .theme-btn .i-sun { display: none; } .theme-btn .i-moon { display: block; } :root[data-theme="dark"] .theme-btn .i-moon { display: none; } :root[data-theme="dark"] .theme-btn .i-sun { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; } :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; } } /* Inline variant — sits inside existing chrome (deck-top, rail nav) instead of floating fixed. */ .theme-btn--inline { position: static; width: 26px; height: 26px; } @media (max-width: 520px) { .theme-btn { top: 1rem; right: 1.25rem; width: 30px; height: 30px; } }