/* ================================================================== Kwizzbit base — global resets + utility classes used across patterns. Tokens come from theme.json; nothing here should declare colour or spacing values directly. ================================================================== */ /* The page-loader FOUC guard (html.kwb-loading { ... visibility:hidden }) lives in the page-loader segment's own CSS, not here — so it is only active on pages that actually include the loader, and is dismissed by the loader's own script. */ /* Dark-mode defensive line: the site is a deliberate light-only design. Declaring the light colour-scheme stops browsers from auto-darkening UA-styled controls (inputs, selects, textareas, scrollbars) in OS dark mode — which would otherwise render dark fields on our cream backdrops. Pairs with the in functions.php. Does NOT touch our explicitly-coloured elements. */ html { color-scheme: light; /* Paint the page CANVAS cream, matching . iOS Safari draws its dynamic-toolbar / overscroll regions (the strip beneath the floating URL bar, pull-to-refresh, rubber-banding) from the canvas, NOT from body — an unset canvas defaults to white and flashed through as a naff white band at the bottom when the mobile-menu scrim faded in. body still paints cream over the whole page, so this only ever shows where body doesn't reach; the top status area stays as-is (driven by theme-color, already cream). */ background-color: var(--wp--preset--color--cream); } /* ================================================================== LOADER GATE — keep animations and reveals suppressed while the page-loader is showing (html has the .kwb-loading class). Two problems solved: 1. Run-once CSS animations (e.g. content-rise, ~0.72s) would burn through their full duration while hidden behind the 3s loader, so the user never sees them. Pausing keeps them at frame 0. 2. IntersectionObservers fire during load and add .is-visible, so when the loader lifts the [data-reveal] lift transition is already "done" — nothing moves. Forcing opacity/transform to their start state ensures the transition fires fresh when kwb-loading is removed. #kwb-loader lives directly in (not in .kwb-segment) so the .kwb-segment scope never touches the loader's own animations. ================================================================== */ html.kwb-loading .kwb-segment, html.kwb-loading .kwb-segment *{ animation-play-state: paused !important; } /* Hold [data-reveal] elements at their start state even after .is-visible is added by the observer — transition fires on dismiss. */ html.kwb-loading [data-reveal]{ transition: none !important; } html.kwb-loading [data-reveal].is-visible{ opacity: 0 !important; transform: translateY(32px) !important; } /* Same guard for the JS-primed hero reveals (.has-scroll-reveal). Unlike scroll reveals — which are born hidden in CSS and never "prime" — the hero starts visible and only gets its hidden state when hero.js adds .has-scroll-reveal. With transitions live, that makes the hero animate INTO the hidden state (a priming fade/slide-down) before it lifts. If that priming animation hasn't finished when the loader lifts, its tail leaks on-screen: the hero flashes and restarts its lift from a slightly lower position. Suppressing transitions while the loader is up makes priming SNAP instantly, so the only transition the user ever sees is the lift itself (fires cleanly once .kwb-loading is removed). This is why ONLY the first, load-triggered block was affected. */ html.kwb-loading .has-scroll-reveal, html.kwb-loading .has-scroll-reveal *{ transition: none !important; } /* On a cross-PAGE view-transition navigation (NOT reloads — those skip the transition and keep the loader + lift) the cross-fade is the entrance. The pagereveal hook snaps the in-view reveal elements to .is-visible just before the snapshot is captured; suppress their transitions while the transition is active so that snap is instant, not a second lift fighting the cross-fade. */ html.kwb-vt-active .has-scroll-reveal, html.kwb-vt-active .has-scroll-reveal *, html.kwb-vt-active [data-reveal]{ transition: none !important; } /* ================================================================== CONTENT-RISE — shared entry lift for load-gated section reveals (blog/FAQ header stagger, article + legal "window" lift). Held at frame 0 by the html.kwb-loading animation pause above, so it only plays once the page-loader clears — exactly like the rest of the site's entry choreography. `backwards` fill keeps the start state through any stagger delay and leaves NO lingering transform after, so it never creates a containing block for fixed/sticky children. ================================================================== */ @keyframes kwb-content-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } /* Universal reset — every source segment was authored against "* { box-sizing: border-box; margin: 0; padding: 0 }". The per-segment slices rely on it (e.g. footer/nav