/* ==========================================================================
StoneView Construction & Landscape — Header & Footer, v4
--------------------------------------------------------------------------
SELF-CONTAINED ON PURPOSE.
This file is the single source of truth for the header and footer on BOTH
targets:
1. the static site (site-v3), loaded via alongside site.css
2. the WordPress site, enqueued by the Hello Elementor child theme and
paired with the same markup inside an Elementor HTML widget
Because target 2 has no site.css, this file must not depend on it. Every
token it needs is declared below under an --sv- prefix, and every class is
namespaced .sv-*, so it can never collide with site.css, with Hello
Elementor, or with Elementor's own generated classes.
Do not reference --forest/--bone/etc. from site.css in here. Do not drop
the .sv- prefix. Both rules exist so the two targets stay identical.
========================================================================== */
/* --- Tokens --------------------------------------------------------------
Same palette values as site.css v3, re-declared under an --sv- prefix so
this file stands alone. Kept additive: declaring these on :root cannot
affect any existing rule, because no existing rule reads these names.
------------------------------------------------------------------------ */
:root {
--sv-forest: #1F3A2E;
--sv-forest-d: #14251C;
--sv-forest-dd: #0E1A13;
--sv-moss: #4F6F52;
--sv-charcoal: #242822;
--sv-stone: #4E6771;
--sv-stone-l: #7B939C;
--sv-sand: #C9B79C;
--sv-sand-l: #E4DACB;
--sv-bone: #F2F4F1;
--sv-bone-d: #E5EAE4;
--sv-white: #FFFFFF;
--sv-ink: #1D211C;
--sv-muted: #5F675E;
--sv-line: #D5DCD4;
--sv-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', serif;
--sv-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;
--sv-wrap: 1240px;
--sv-gut: 32px;
--sv-r-sm: 4px;
--sv-r: 8px;
--sv-r-lg: 16px;
--sv-sh-1: 0 1px 2px rgba(35,35,31,.06), 0 4px 12px rgba(35,35,31,.05);
--sv-sh-2: 0 2px 6px rgba(35,35,31,.07), 0 12px 32px rgba(35,35,31,.09);
--sv-sh-3: 0 8px 24px rgba(35,35,31,.10), 0 30px 60px rgba(35,35,31,.14);
--sv-ease: cubic-bezier(.22,.61,.36,1);
/* Header geometry. --sv-head-h is read by the scroll-padding rule below and
by header-footer.js, so anchor links never land under the sticky bar. */
--sv-util-h: 40px;
--sv-bar-h: 84px;
--sv-bar-h-sm: 64px;
--sv-head-h: 84px;
}
/* Anchor targets must clear the sticky bar. Only the collapsed bar height is
used: by the time the user is jumping to an anchor the page has scrolled and
the utility strip is already retracted. */
html { scroll-padding-top: calc(var(--sv-bar-h-sm) + 16px); }
/* --- Scoped reset --------------------------------------------------------
WordPress themes and Elementor both ship opinionated base styles. Rather
than fight them globally, neutralise them inside our own scope only.
Every selector here is wrapped in :where() so the whole reset carries ZERO
specificity from the scope. This matters: written as `.sv-head a`, the
`color: inherit` below would score 0-1-1 and beat `.sv-btn-primary`
(0-1-0), silently repainting every button label back to body ink. With
:where() the reset scores 0-0-1 and any real component rule wins.
Keep the :where() wrappers if you add to this block.
------------------------------------------------------------------------ */
:where(.sv-head, .sv-foot, .sv-drawer),
:where(.sv-head, .sv-foot, .sv-drawer) *,
:where(.sv-head, .sv-foot, .sv-drawer) *::before,
:where(.sv-head, .sv-foot, .sv-drawer) *::after {
box-sizing: border-box;
}
:where(.sv-head, .sv-foot, .sv-drawer) ul {
margin: 0; padding: 0; list-style: none;
}
:where(.sv-head, .sv-foot, .sv-drawer) li { margin: 0; list-style: none; }
:where(.sv-head, .sv-foot, .sv-drawer) p { margin: 0; }
:where(.sv-head, .sv-foot, .sv-drawer) a {
color: inherit; text-decoration: none; box-shadow: none;
}
:where(.sv-head, .sv-foot, .sv-drawer) img {
max-width: 100%; height: auto; display: block; border: 0;
}
:where(.sv-head, .sv-foot, .sv-drawer) button {
font: inherit; color: inherit; background: none; border: 0;
cursor: pointer; padding: 0; text-align: left;
}
:where(.sv-head, .sv-foot, .sv-drawer) svg { display: block; }
:where(.sv-head, .sv-foot, .sv-drawer) :is(h1, h2, h3, h4) {
margin: 0; font-weight: 400; letter-spacing: -.015em; line-height: 1.15;
font-family: var(--sv-serif); color: inherit;
}
.sv-head :focus-visible, .sv-foot :focus-visible, .sv-drawer :focus-visible {
outline: 3px solid var(--sv-stone-l); outline-offset: 3px; border-radius: 3px;
}
.sv-wrap {
width: 100%; max-width: var(--sv-wrap);
margin-inline: auto; padding-inline: var(--sv-gut);
}
/* Visually hidden but available to screen readers. */
.sv-sr {
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* ==========================================================================
HEADER
========================================================================== */
/* position: sticky only works if NO ancestor is a scroll container.
site.css sets `body { overflow-x: hidden }`, which makes body compute to
`overflow: hidden auto`. Per CSS overflow propagation that should still be
safe here (html is `visible`, so body's overflow propagates to the viewport
and body's own used value becomes `visible`) — but the behaviour is subtle
and easy to break later by adding overflow to any wrapper.
`overflow-x: clip` clips exactly like `hidden` WITHOUT ever creating a
scroll container, so the sticky header cannot be broken by it. If you ever
need a wrapper to hide horizontal overflow, use clip, not hidden. */
html { overflow-x: clip; }
body { overflow-x: clip; }
/* --- WordPress: make Elementor's wrapper the sticky element ---------------
Inert on the static build — these selectors simply never match there.
A sticky element can only stick WHILE ITS PARENT'S BOX IS STILL IN VIEW.
On the static site .sv-head is a direct child of , whose box spans the
whole document, so it has the entire page to stick against.
Elementor renders a header template as:
<- direct child of