/* ============================================================================ 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), html.pre-dark{ background:#17140f; } /* pre-paint dark: the inline head script adds .pre-dark from the saved theme so dark-mode users never get a white flash before JS applies the body class. */ html.pre-dark body{ background:#17140f; color:#f1ede4; } 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; } } /* ---- CMS loading veil ---- Hold page content hidden until Sanity data is in, so visitors never see the demo/template text flash and get overwritten. An inline script adds .cms-veil before first paint; sanity.js calls window.__cmsShow() when data has settled (with a 2s safety timeout in the head script itself). The page background still paints (set above), so this is a gentle content fade only. */ html.cms-veil body{ opacity:0; } html.cms-shown body{ opacity:1; transition:opacity .5s ease; } @media (prefers-reduced-motion: reduce){ html.cms-shown body{ transition:none; } } /* ============================================================================ POLISH PASS — typography refinement + scroll moments (global) ========================================================================== */ /* #1 — Typographic craft. - hanging punctuation pulls quotes/marks into the margin for a cleaner edge - body copy wraps "pretty" (no orphans / ragged last lines) - headings balance so titles never strand a single word - sensible kerning/ligatures everywhere */ html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } body{ hanging-punctuation:first allow-end last; text-rendering:optimizeLegibility; font-kerning:normal; } p, li, blockquote, figcaption, .standfirst, .intro, .b-text p, .cap span{ text-wrap:pretty; } h1, h2, h3, .tt, .t, .b-heading h2, .mast h1, .chapter-head h1{ text-wrap:balance; } /* tighten large display type optically (big type needs less spacing) */ .mast h1, .chapter-head h1{ letter-spacing:-.022em; } /* refined italic standfirsts: slightly looser line, hung punctuation already on */ .mast .standfirst, .chapter-head .intro{ text-wrap:pretty; } /* #5 — Scroll moments. Content fade-in is handled by: (a) the JS IntersectionObserver reveal in site-kit.js (data-reveal), and (b) the blur-up image fade in site-kit.js. Both work in every browser with safety nets. A previous scroll-timeline (animation-timeline:view()) version was Chrome-only and made images "pop in" on Firefox — removed in favour of the universal JS path. */