/* ============================================================================ site-kit.css ยท shared across every template - global dark / light theme (token overrides; works on any page using the standard --paper/--ink token names) - a small persistent theme toggle - scroll-reveal for headings & text (fade + rise) ========================================================================== */ /* ---- kill the white flash between page navigations ---- The base document background is painted before any page content, so the split-second gap during navigation shows paper (or near-black in dark), never white. site-kit.css is loaded in , so this applies at first paint. */ html{ background:#f4f1ea; } @media (prefers-color-scheme: dark){ html{ background:#17140f; } } html:has(body.theme-dark), html:has(body.stage-dark){ background:#17140f; } html:has(body:not(.theme-dark):not(.stage-dark)){ background:#f4f1ea; } /* ---- dark theme (also matches Concept Art's legacy .stage-dark) ---- */ body.theme-dark, body.stage-dark{ --paper:#17140f; --paper-2:#221d15; --ink:#f1ede4; --ink-soft:#a8a092; --line:rgba(241,237,228,.15); background:#17140f !important; color:#f1ede4; } body{ transition:background .55s ease, color .55s ease; } /* keep dark-by-design blocks dark when the whole theme goes dark (avoid token-flip inversion) */ body.theme-dark .foot{ background:#0e0c09; color:#f1ede4; } body.theme-dark .next{ border-color:rgba(241,237,228,.14); } /* ---- floating theme toggle (bottom-left, clear of the Tweaks panel which lives bottom-right) ---- */ .theme-toggle{ position:fixed; left:18px; bottom:18px; z-index:55; width:44px; height:44px; border-radius:50%; border:1px solid var(--line,#d8d2c6); background:var(--paper,#f4f1ea); color:var(--ink,#1c1a16); cursor:pointer; display:grid; place-items:center; box-shadow:0 8px 26px rgba(0,0,0,.16); transition:background .3s, color .3s, border-color .3s, transform .2s; } .theme-toggle:hover{ transform:translateY(-2px); } .theme-toggle svg{ width:19px; height:19px; display:block; } @media print{ .theme-toggle{ display:none; } } /* ---- scroll reveal ---- */ @media (prefers-reduced-motion: no-preference){ [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1); transition-delay:var(--reveal-d,0s); } [data-reveal].in{ opacity:1; transform:none; } }