:root {
interpolate-size: allow-keywords;
}
html {
font-size: 16px;
}
body,
html {
scroll-padding-top: var(--wp-admin--admin-bar--height, 0rem) !important;
overflow-x: clip;
@media not (prefers-reduced-motion: reduce) {
scroll-behavior: smooth;
}
}
/*
* Take the document's own smooth scrolling back off once Lenis is running, and
* leave everything else's alone.
*
* `scroll-behavior` is inherited, and the rule above sets it on both elements —
* so every scroll container on the page gets it from ``, while the
* *viewport* takes it from the root element and only from there (a ``
* value is not propagated to the viewport the way `overflow` is). Overriding it
* on `html` alone therefore says exactly one thing: the page no longer animates
* its own scrolling. The horizontal rails still do — which is what the dots
* under `kg-product/case-slider`, `kg-product/orbit-scroll` and
* `kg-product/panel-stack` ride on, and why they are left as ordinary fragment
* links.
*
* Two animations for one gesture is the failure this avoids. Lenis integrates
* the wheel itself and calls `scrollTo({ behavior: 'instant' })` every frame, so
* its own scrolling is unaffected either way; what breaks is a *native* smooth
* scroll — a fragment link, or `scrollIntoView()` from a focus change — running
* its animation while Lenis runs a second one at the same target.
*
* `.lenis` is the class the library puts on `` for the life of the
* instance, so this applies only when it is actually there: with JavaScript off,
* or before the deferred module runs, the rule above is the whole story.
* `src/interactions/smooth-scroll.js` is what then takes fragment links on.
*/
html.lenis {
scroll-behavior: auto;
}
body {
text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/*
* `svh`, and never `dvh`.
*
* `dvh` re-resolves continuously as a mobile browser's chrome slides away and
* back, so this min-height changes *while the reader is scrolling* — on iOS
* Safari that is a visible jump on every direction change, and it is this
* declaration that produces it, because it sets the height of the whole page.
*
* `svh` is the small viewport — the height with the chrome showing — so it is a
* constant for the life of the page and nothing reflows mid-scroll. The cost is
* the other way round: with the chrome retracted the viewport is taller than
* `100svh`, so a page with almost no content can leave a strip under the footer.
* A strip that sits still is the better half of that trade, and every other
* viewport-relative length in this theme is already `svh` — `theme.json`'s
* `settings.spacing.units` does not even offer the other two.
*/
.wp-site-blocks {
display: flex;
flex-flow: column;
min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0rem));
footer {
margin-top: auto !important;
}
}
@media screen and (width < 37.5rem) {
#wpadminbar {
position: fixed;
}
}
input,
textarea,
select,
button {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
text-wrap: pretty;
}
/*
* Bold has to be stated, because the theme's body weight is 300.
*
* Neither browser default gives `` a weight; they give it a *relative*
* one, and the two disagree. WebKit and Blink use `font-weight: bold`, which is
* 700. Gecko uses `font-weight: bolder`, and `bolder` is a step up the CSS Fonts
* ladder from the inherited weight — from 300 that step lands on **400**, not
* 700 (CSS Fonts 4 § 2.2.1). So the emphasis a designer drew, and the one the
* editor's own Bold button writes, renders in Firefox as text that is one
* imperceptible notch heavier than the copy around it.
*
* It fails silently and only in one engine, which is why it is worth stating
* here rather than per pattern: any block can contain a ``, so there is
* no block to hang this off — the same reasoning `text-formats.css` opens with.
*
* 700 and not `bold`: Inter is a variable font with the full 100–900 axis, and a
* number says which instance to cut without going through the keyword's own
* mapping a second time.
*/
b,
strong {
font-weight: 700;
}