/* ===========================================================================
RTD Services · holiday lighting landing page · the page stylesheet
---------------------------------------------------------------------------
v3 (2026-10-08). One page stylesheet plus motion.css (the scroll
choreography, loaded right after this file). Sections, in cascade order
(later wins):
0. FONTS self-hosted, latin-subset Fraunces + Inter (woff2)
1. SCROLLCRAFT the engine's taste floor (was scrollcraft.css, verbatim)
2. PAGE page styles: bar, CTA, cards, peak, steps band, rail
with quote cards, closing grid + footer band
3. VIDEO HERO the hero plate and its copy
4. SPARKLE (was sparkle.css, verbatim)
5. REVIEW BITS stars, outbound link, quote cards (from testimonials.css)
6. V2 COMPONENTS hours-aware actions, trust line, lead sheet, no-JS
7. PHONE every <= 860px rule, loaded last
Bump the ?v= on the in index.html (and html[data-v]) on every change.
========================================================================= */
/* ================================================================ 0. FONTS */
/* Fraunces (display) and Inter (text) as variable fonts, cut to the latin
range and to the weights the page uses (Fraunces 300-400 with the full opsz
axis, Inter 400-500). The roman Fraunces is preloaded in index.html. */
@font-face {
font-family: "Fraunces"; font-style: normal; font-weight: 300 400; font-display: swap;
src: url("fonts/fraunces-roman.woff2?v=20261008a") format("woff2");
}
@font-face {
font-family: "Fraunces"; font-style: italic; font-weight: 300 400; font-display: swap;
src: url("fonts/fraunces-italic.woff2?v=20261008a") format("woff2");
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 400 500; font-display: swap;
src: url("fonts/inter.woff2?v=20261008a") format("woff2");
}
/* ========================================================== 1. SCROLLCRAFT */
/* ============================================================================
scrollcraft.css: the taste floor
----------------------------------------------------------------------------
Two layers, and the split matters:
TOKENS what you override per brand. Colour roles, the type ramp, the
spacing scale, elevation, motion. A brand is ~12 values.
DEVICES what the engine drives. Do not restyle these to taste; they are
the mechanism. Style your own markup instead.
Nothing here draws a "component". There are no card, badge, or pill classes,
because a stylesheet that ships those is how every page built on it ends up
with the same shapes. You get a floor and a vocabulary; the composition is
yours.
========================================================================== */
/* ---------------------------------------------------------------- tokens -- */
:root {
/* --- colour roles. Override these six and the page is rebranded. -------- */
--sc-canvas: #08090b; /* the page ground. Drift interpolates this. */
--sc-surface: #101217; /* anything raised off the ground */
--sc-ink: #f4f2ef; /* primary text */
--sc-ink-soft: #9a9ba1; /* secondary text. Tinted, never flat gray. */
--sc-accent: #d8ff3e; /* ONE accent. It owns a region, not confetti. */
--sc-accent-ink: #08090b; /* text that sits on the accent */
--sc-hairline: color-mix(in oklab, var(--sc-ink) 12%, transparent);
--sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent);
/* --- type. Two families max. Display carries voice, text carries prose. - */
--sc-font-display: "Instrument Sans", "Geist", system-ui, sans-serif;
--sc-font-text: "Geist", system-ui, sans-serif;
--sc-font-mono: "Geist Mono", ui-monospace, monospace;
/* Fluid ramp. Tracking tightens as size grows because a face set at 6rem
with 0 tracking reads loose; this is optical correction, not decoration. */
--sc-t-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
--sc-t-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
--sc-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
--sc-t-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
--sc-t-xl: clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
--sc-t-2xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
--sc-t-3xl: clamp(2.8rem, 1.9rem + 4.2vw, 5rem);
--sc-t-4xl: clamp(3.4rem, 1.9rem + 6.6vw, 7.5rem);
--sc-track-tight: -0.035em;
--sc-track-snug: -0.02em;
--sc-track-normal: -0.005em;
--sc-track-wide: 0.08em;
--sc-leading-none: 0.94;
--sc-leading-tight: 1.06;
--sc-leading-body: 1.62;
--sc-measure: 62ch;
/* --- space. 4px base: the useful middle steps an 8-only scale misses. --- */
--sc-1: 0.25rem; --sc-2: 0.5rem; --sc-3: 0.75rem; --sc-4: 1rem;
--sc-5: 1.5rem; --sc-6: 2rem; --sc-7: 3rem; --sc-8: 4rem;
--sc-9: 6rem; --sc-10: 8rem; --sc-11: 12rem;
/* Section rhythm is fluid so a phone doesn't inherit desktop air. */
--sc-section: clamp(4.5rem, 9vw, 11rem);
--sc-gutter: clamp(1.25rem, 5vw, 5.5rem);
--sc-maxw: 82rem;
/* --- radius. Pick one scale for the page and hold it. ------------------- */
--sc-r-sm: 6px; --sc-r-md: 12px; --sc-r-lg: 20px; --sc-r-pill: 999px;
/* --- elevation. Every shadow has an offset AND a soft blur, and is tinted
to the canvas hue. A zero-offset coloured halo is decoration, not
depth, so there isn't one here. ---------------------------------- */
--sc-shadow-color: 220 40% 2%;
--sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.28),
0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.20);
--sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.24),
0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.30);
--sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.22),
0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.38),
0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.30);
/* Edge light: a 1px top highlight sells a raised surface better than any
amount of blur, because real raised things catch light on their lip. */
--sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent);
/* --- motion. Built-in CSS easings are too weak for UI. ------------------ */
--sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--sc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--sc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
--sc-d-fast: 160ms; --sc-d-base: 240ms; --sc-d-slow: 420ms;
--sc-z-stage: 1; --sc-z-copy: 20; --sc-z-chrome: 60;
}
/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--sc-canvas);
color: var(--sc-ink);
font-family: var(--sc-font-text);
font-size: var(--sc-t-base);
line-height: var(--sc-leading-body);
letter-spacing: var(--sc-track-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-synthesis-weight: none;
overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
/* ------------------------------------------------- the browser surfaces --
The parts you did not draw still carry the design. Selection, caret, focus
ring, scrollbar and tabular numerals all ship with defaults that belong to no
design system. Theming them is the cheapest signal that a page was built
rather than assembled, and it is the step that gets skipped most reliably. */
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:root { caret-color: var(--sc-accent); accent-color: var(--sc-accent); }
:focus-visible {
outline: 2px solid var(--sc-accent);
outline-offset: 3px;
border-radius: var(--sc-r-sm);
}
:where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
@supports (scrollbar-color: auto) {
html { scrollbar-color: color-mix(in oklab, var(--sc-ink) 26%, transparent) transparent; scrollbar-width: thin; }
}
:where(table, .sc-nums, [data-sc-count]) { font-variant-numeric: tabular-nums; }
/* ----------------------------------------------------------- typography -- */
.sc-display {
font-family: var(--sc-font-display);
font-weight: 500;
line-height: var(--sc-leading-none);
letter-spacing: var(--sc-track-tight);
text-wrap: balance;
margin: 0;
}
.sc-display--xl { font-size: var(--sc-t-4xl); }
.sc-display--lg { font-size: var(--sc-t-3xl); }
.sc-display--md { font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); }
.sc-lede {
font-size: var(--sc-t-lg);
line-height: 1.44;
letter-spacing: var(--sc-track-snug);
color: var(--sc-ink);
max-width: 46ch;
text-wrap: pretty;
margin: 0;
}
.sc-body { max-width: var(--sc-measure); color: var(--sc-ink-soft); text-wrap: pretty; margin: 0; }
.sc-label {
font-family: var(--sc-font-mono);
font-size: var(--sc-t-xs);
letter-spacing: var(--sc-track-wide);
text-transform: uppercase;
color: var(--sc-ink-soft);
}
/* ---------------------------------------------------------------- layout -- */
.sc-wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.sc-section { padding-block: var(--sc-section); }
/* More space above a heading than below it: the gap belongs to the boundary,
not to the pair. */
.sc-stack > * + * { margin-top: var(--sc-4); }
.sc-stack > :is(h1,h2,h3) { margin-top: var(--sc-7); }
.sc-stack > :is(h1,h2,h3):first-child { margin-top: 0; }
.sc-rule { height: 1px; border: 0; background: var(--sc-hairline); margin: 0; }
/* =============================================================== DEVICES ==
Driven by the engine. Restyle your own markup, not these. */
.sc-act--pinned { position: relative; }
.sc-stage {
position: sticky; top: 0;
height: 100vh; height: 100svh;
overflow: clip;
z-index: var(--sc-z-stage);
}
/* scrub / sequence media */
.sc-stage :is(video[data-sc-scrub], canvas[data-sc-sequence], .sc-stage__poster) {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
video[data-sc-scrub] { opacity: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip video[data-sc-scrub] { opacity: 1; }
/* The poster is a live frame-holder, not a placeholder: it stays up until a
real video frame has painted, which is what stops the blank-stage flash. */
.sc-stage__poster { z-index: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip .sc-stage__poster { opacity: 0; }
/* A scrim only where text sits. A full-frame darkening layer flattens the
image everywhere to fix contrast in one corner. */
.sc-scrim {
position: absolute; inset: 0; pointer-events: none; z-index: 1;
background: linear-gradient(
var(--sc-scrim-angle, 180deg),
color-mix(in oklab, var(--sc-canvas) var(--sc-scrim-a, 78%), transparent) 0%,
color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
transparent 68%);
}
/* Point the scrim at the copy. A scrim gradient that darkens the top while the
copy sits at the bottom fixes contrast nowhere and flattens the image
everywhere, which is the most common way text-over-video goes wrong. */
.sc-scrim--bottom { --sc-scrim-angle: 0deg; }
.sc-scrim--left { --sc-scrim-angle: 90deg; }
.sc-scrim--right { --sc-scrim-angle: 270deg; }
/* Corner scrims, for copy anchored to a corner. An edge gradient has to darken
a whole band across the frame to cover one corner; a corner gradient puts the
density where the text is and leaves the rest of the image alone. Pair with
.sc-copy--lead / .sc-copy--trail. */
.sc-scrim--lead {
background: linear-gradient(to top right,
color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
transparent 72%);
}
.sc-scrim--trail {
background: linear-gradient(to top left,
color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
transparent 72%);
}
/* A band across the bottom, for copy that spans the full width of the frame.
That is what both corner anchors become below 860px, and it is also the right
shape whenever the copy block is wider than a corner. */
.sc-scrim--band {
background: linear-gradient(to top,
color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
transparent 58%);
}
.sc-scrim--vignette {
background: radial-gradient(120% 90% at 50% 45%, transparent 40%,
color-mix(in oklab, var(--sc-canvas) 70%, transparent) 100%);
}
/* copy over a stage.
max-width is in rem, never ch. A `ch` on this container resolves against the
CONTAINER's font-size (body size), not the display size of the heading inside
it, so `max-width: 20ch` here silently produces a ~180px column and wraps a
hero headline to six lines. Set a ch measure on the text element itself. */
.sc-copy {
position: absolute; z-index: var(--sc-z-copy);
inset-inline: var(--sc-gutter);
max-width: min(46rem, 76vw);
will-change: opacity, transform;
}
.sc-copy--lead { left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); }
/* inset-inline FIRST. It is the shorthand for left+right, so declaring it after
`left: 50%` resets left to auto and the block drifts off the left edge. */
.sc-copy--center { inset-inline: auto; left: 50%; top: 50%; translate: -50% -50%; text-align: center; }
.sc-copy--trail { inset-inline: auto; right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); text-align: right; }
/* cue defaults: the engine writes opacity/transform inline, these are the
pre-paint state so nothing flashes before the first read() */
[data-sc-cue] { opacity: 0; will-change: opacity, transform; }
.sc-ready [data-sc-cue] { transition: none; }
/* kinetic split */
.sc-split { display: inline-block; overflow: hidden; vertical-align: top; }
/* Descenders live below the baseline; a line mask clipped to the line box eats
the tails off g, y, p, j. The padding buys them room back. */
.sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.sc-split__i { display: inline-block; will-change: transform, opacity; }
.sc-is-split { opacity: 1 !important; }
/* horizontal rail */
[data-sc-pan] { display: flex; will-change: transform; }
/* reveal + parallax */
[data-sc-reveal] { will-change: clip-path; }
[data-sc-parallax] { will-change: transform; }
/* flow reveal (fires once) */
[data-sc-in], [data-sc-stagger] > * {
opacity: 0;
transform: translate3d(0, 14px, 0);
transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out);
}
[data-sc-in].sc-in, [data-sc-stagger] > .sc-in { opacity: 1; transform: none; }
/* pointer devices */
[data-sc-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-sc-magnet] { will-change: transform; }
/* isolation always; position only if nothing more specific already set it.
Written with :where() (zero specificity) on purpose: a plain `position:
relative` here has the same weight as `.sc-stage` and, being later in the
file, silently wins. A stage carrying both attributes then stops being
sticky and the whole act scrolls away instead of pinning. */
[data-sc-spotlight] { isolation: isolate; }
:where([data-sc-spotlight]) { position: relative; }
[data-sc-spotlight]::after {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
background: radial-gradient(
28rem 28rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%),
color-mix(in oklab, var(--sc-accent) 16%, transparent), transparent 70%);
opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out);
}
[data-sc-spotlight]:hover::after { opacity: 1; }
/* =========================================================== WORLDFLIGHT ==
One fixed stage for the whole page. The only thing in document flow is the
spacer, and it is empty. If you find yourself adding a section here, you want
act mode instead: the moment a real block scrolls past the fixed stage, the
page has a seam again and the whole point is gone. */
[data-sc-mode="worldflight"] { position: relative; }
.sc-world {
position: fixed; inset: 0;
overflow: clip;
z-index: var(--sc-z-stage);
background: var(--sc-canvas);
}
/* Every leg is mounted for the life of the page and stacked in the same box.
The engine owns opacity, visibility and z-index here; do not set them. */
.sc-world__seg {
position: absolute; inset: 0;
opacity: 0;
will-change: opacity;
}
.sc-world__seg > :is(video, img, canvas) {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
/* The poster is the frame-holder AND the first camera move: the engine pushes
it in slowly until a real decoded frame is available to replace it. */
.sc-world__poster {
z-index: 0;
transform-origin: 50% 50%;
transition: opacity 420ms var(--sc-ease-out);
}
.sc-world__seg > video { z-index: 1; }
.sc-world__seg.sc-has-clip .sc-world__poster { opacity: 0; }
/* The act stylesheet lights a clip through its ancestor act. A worldflight leg
has no act, so match the class the engine also writes on the clip itself. */
video[data-sc-scrub].sc-has-clip { opacity: 1; }
/* The copy layer is fixed too, and inert by default: the engine hands
pointer-events back to a block only while it is actually legible. */
.sc-world__copy {
position: fixed; inset: 0;
z-index: var(--sc-z-copy);
pointer-events: none;
}
.sc-world__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
[data-sc-copy] {
opacity: 0;
pointer-events: none;
will-change: opacity, transform;
}
.sc-ready [data-sc-copy] { transition: none; }
/* The track. Empty on purpose. */
.sc-world__spacer { pointer-events: none; }
/* scroll progress */
[data-sc-progress] {
position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--sc-z-chrome);
background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0);
will-change: transform;
}
/* ----------------------------------------------------------- atmosphere --
Depth is not only shadow. Grain keeps a flat dark ground from banding, and
it is the difference between "a dark page" and "a lit room". */
.sc-grain { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.045; }
.sc-grain::before {
content: ""; position: absolute; inset: -50%;
background-image: url("data:image/svg+xml;utf8,");
}
/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
/* Fewer and gentler, not zero. Opacity still carries the reveal so the page
is comprehensible; every position change is dropped. */
[data-sc-in], [data-sc-stagger] > * { transform: none; transition-duration: 220ms; }
[data-sc-parallax], [data-sc-pan], .sc-split__i { transform: none !important; }
/* A wipe is a position change too. Show reveal content settled. */
[data-sc-reveal] { clip-path: none !important; }
/* A rail's transform IS its navigation, not decoration. Zeroing it the way
parallax and kinetic type are zeroed parks the act on its first screenful
and makes everything past the fold unreachable: a device degrading into
missing content. Hand the travel back to the reader as an ordinary scroll
region instead, so the same items are all still gettable without motion.
A build that would rather re-lay the rail out as a grid can still do that;
this is the floor, not the ceiling. */
[data-sc-act="pan"] .sc-stage,
[data-sc-act="pan"] [data-sc-stage] {
overflow-x: auto; overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
}
[data-sc-pan] > * { scroll-snap-align: center; }
[data-sc-spotlight]::after { display: none; }
/* A worldflight keeps its whole story here. No clip is ever fetched, so the
posters are the film, and they cross-dissolve through exactly the same
seams at exactly the same scroll positions. The push-in and the copy drift
are the only things that go. */
.sc-world__poster, [data-sc-copy] { transform: none !important; }
}
/* --------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
.sc-copy { inset-inline: var(--sc-gutter); max-width: none; }
.sc-copy--trail { text-align: left; }
.sc-stage { height: 100svh; }
/* .sc-copy--trail re-anchors to the left and spans the full width here, so a
bottom-RIGHT corner gradient darkens the one corner the copy just left and
guarantees a contrast failure over any bright clip. Point the density at
the copy: the same band .sc-scrim--band paints. */
.sc-scrim--trail {
background: linear-gradient(to top,
color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
transparent 58%);
}
}
/* ================================================================= 2. PAGE */
/* ===========================================================================
RTD Services · holiday lighting landing page
Page styles only. scrollcraft.css owns the device mechanism; nothing here
restyles .sc-stage, .sc-copy or any [data-sc-*] selector.
========================================================================= */
:root {
--sc-canvas: #070B16;
--sc-surface: #0F172A;
--sc-ink: #F4EEE3;
--sc-ink-soft: #A9A498;
--sc-accent: #E7C077;
--sc-accent-ink: #1A1408;
--sc-font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
--sc-font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--sc-measure: 60ch;
--sc-shadow-color: 220 55% 3%;
/* Plain values, not color-mix: a computed oklab() colour is unreadable to
any tool that parses getComputedStyle().color as rgb, the contrast pass
among them, and it reports every such line as near-black ink. */
--sc-ink-mid: #DDD7CC;
--ink-dim: #7C786F;
--bar-h: 68px;
/* The promo strip is gone; the property stays at zero so the calc() that
positions the peak rail under the chrome still computes. */
--promo-h: 0px;
}
html { background: var(--sc-canvas); }
body { font-weight: 400; }
/* Optical sizing is the reason this face is here. */
.display,
.display--xl,
.display--lg,
.display--md,
.display--sm {
font-family: var(--sc-font-display);
font-optical-sizing: auto;
font-weight: 300;
line-height: var(--sc-leading-tight);
letter-spacing: var(--sc-track-snug);
text-wrap: balance;
margin: 0;
color: var(--sc-ink);
}
.display--xl { font-size: clamp(2.6rem, 1.5rem + 3.1vw, 4.6rem); line-height: 1.02; letter-spacing: var(--sc-track-tight); }
.display--lg { font-size: clamp(2.2rem, 1.4rem + 2.2vw, 3.5rem); line-height: 1.06; }
.display--md { font-size: clamp(1.8rem, 1.3rem + 1.5vw, 2.6rem); }
.display--sm { font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem); line-height: 1.2; }
.lede {
font-size: var(--sc-t-lg);
line-height: 1.5;
color: var(--sc-ink-mid);
max-width: 34ch;
margin: 0;
}
.body {
max-width: var(--sc-measure);
color: var(--sc-ink-soft);
line-height: 1.68;
letter-spacing: 0.002em;
text-wrap: pretty;
margin: 0;
}
.body--turn { color: var(--sc-ink); }
.wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.skip {
position: fixed; top: 8px; left: 8px; z-index: 200;
padding: 10px 14px; border-radius: var(--sc-r-sm);
background: var(--sc-surface); color: var(--sc-ink);
transform: translateY(-160%);
transition: transform 160ms var(--sc-ease-out);
}
.skip:focus-visible { transform: translateY(0); }
/* ------------------------------------------------------------ chrome --- */
.bar {
position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
height: var(--bar-h);
display: flex; align-items: center; justify-content: space-between;
gap: var(--sc-5);
padding-inline: clamp(1rem, 3vw, 2.5rem);
background: transparent;
border-bottom: 1px solid transparent;
transition: background-color 300ms var(--sc-ease-out), border-color 300ms var(--sc-ease-out);
}
.bar.is-landed {
background: color-mix(in oklab, var(--sc-canvas) 88%, transparent);
backdrop-filter: blur(10px);
border-bottom-color: var(--sc-hairline);
}
/* Density under the chrome only: a band the height of the bar, gone by 130px.
The mark and the phone sit on a lit tree at p 0 otherwise. */
.bar::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 130px; z-index: -1;
pointer-events: none;
background: linear-gradient(to bottom,
color-mix(in oklab, var(--sc-canvas) 82%, transparent) 0%,
color-mix(in oklab, var(--sc-canvas) 46%, transparent) 48%,
transparent 100%);
transition: opacity 300ms var(--sc-ease-out);
}
.bar.is-landed::before { opacity: 0; }
.bar__mark { display: flex; align-items: center; }
.bar__mark img { width: auto; height: 28px; filter: brightness(0) invert(1); opacity: 0.93; }
/* The early-bird line, centred in the space between the wordmark and the
right cluster. One line, ellipsis rather than wrap or push. */
.bar__promo {
flex: 1 1 auto; min-width: 0;
margin: 0;
text-align: center;
font-size: 0.74rem; line-height: 1.2;
letter-spacing: 0.01em;
color: var(--sc-accent);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar__right { display: flex; align-items: center; gap: clamp(0.75rem, 1.6vw, 1.5rem); }
.bar__tel {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: var(--sc-t-sm); font-variant-numeric: tabular-nums;
color: var(--sc-ink-mid);
text-decoration: none;
white-space: nowrap;
}
.bar__tel:hover { color: var(--sc-ink); text-decoration: underline; }
.bar__tel-glyph { opacity: 0.8; }
/* ------------------------------------------------------- the CTA ------- */
/* One label, two temperatures. Cool until the house is fully lit, then warm
for the rest of the session. The change is the signature move, so it gets a
real 600ms settle rather than a UI-speed flick. */
.cta {
--cta-bg: transparent;
--cta-ink: var(--sc-ink);
--cta-edge: color-mix(in oklab, var(--sc-ink) 34%, transparent);
--cta-glow: 0 0 0 0 transparent;
display: inline-flex; align-items: center; justify-content: center;
white-space: nowrap;
font-family: var(--sc-font-text);
font-size: var(--sc-t-sm); font-weight: 500; letter-spacing: 0.01em; line-height: 1;
padding: 0.85em 1.4em;
border: 1px solid var(--cta-edge);
border-radius: var(--sc-r-pill);
background: var(--cta-bg);
color: var(--cta-ink);
cursor: pointer;
box-shadow: var(--cta-glow);
transition:
background-color 600ms var(--sc-ease-out),
border-color 600ms var(--sc-ease-out),
color 600ms var(--sc-ease-out),
box-shadow 600ms var(--sc-ease-out),
transform 140ms var(--sc-ease-out);
}
.cta:hover { --cta-edge: color-mix(in oklab, var(--sc-ink) 60%, transparent); }
.cta:active { transform: translateY(1px); }
.cta.is-warm {
--cta-bg: var(--sc-accent);
--cta-ink: var(--sc-accent-ink);
--cta-edge: var(--sc-accent);
--cta-glow: 0 2px 10px -2px color-mix(in oklab, var(--sc-accent) 42%, transparent),
0 8px 26px -10px color-mix(in oklab, var(--sc-accent) 34%, transparent);
}
.cta.is-warm:hover {
--cta-bg: color-mix(in oklab, var(--sc-accent) 88%, white);
--cta-edge: color-mix(in oklab, var(--sc-accent) 88%, white);
}
.cta--wide { width: 100%; padding-block: 1em; }
.cta--bar { padding: 0.75em 1.2em; }
/* ------------------------------------------------------------ stages --- */
.act { position: relative; }
.stage { background: var(--sc-canvas); }
.scene { position: absolute; inset: 0; overflow: clip; }
.scene__poster,
.scene__canvas {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
/* The poster and the canvas are the same scene at DIFFERENT camera states, so
cross-fading them prints a second, unscaled copy of every light. The canvas
draws its first frame before it is revealed, then the two swap in one frame
and the poster is taken out of the compositor entirely. */
.scene__canvas { opacity: 0; }
.scene__poster { opacity: 1; }
.scene.is-live .scene__canvas { opacity: 1; }
.scene.is-live .scene__poster { opacity: 0; visibility: hidden; }
/* --------------------------------------------------- 2 · recognition --- */
/* One testimonial, photo beside the quote. Compact on purpose: the hero
should hand the visitor to the peak quickly, so this band stays around
60vh and never fills the viewport. */
.act--recognition {
background: var(--sc-canvas);
padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.testimony {
display: grid;
grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
align-items: center;
gap: clamp(1.75rem, 3.5vw, 3.5rem);
}
.testimony__photo {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
max-height: 48vh;
object-fit: cover;
border-radius: 8px;
}
.testimony__fig { margin: 0; }
.testimony__quote {
margin: 0;
font-style: italic;
max-width: 24ch;
}
.testimony__cap {
margin-top: var(--sc-5);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--sc-2) var(--sc-4);
}
.testimony__name {
font-family: var(--sc-font-text);
font-size: var(--sc-t-sm);
color: var(--sc-ink-mid);
}
@media (max-width: 860px) {
.testimony { grid-template-columns: minmax(0, 1fr); }
.testimony__photo { max-height: 38vh; }
}
/* The three service cards. Same type, padding and radius at every width;
only the column count changes. Bodies are kept to equal lengths in copy and
the grid stretches the boxes to one height. */
.cards {
list-style: none;
margin: 0 0 clamp(2.5rem, 5vw, 4rem);
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(0.85rem, 1.6vw, 1.5rem);
}
.card {
display: flex; flex-direction: column; gap: 0.6rem;
padding: 1.35rem 1.4rem 1.45rem;
border: 1px solid rgb(231 192 119 / 0.26);
border-radius: 12px;
background: var(--sc-surface);
}
.card__title {
margin: 0;
font-family: var(--sc-font-display);
font-optical-sizing: auto;
font-weight: 400;
font-size: 1.4rem; line-height: 1.18;
letter-spacing: var(--sc-track-snug);
color: var(--sc-ink);
text-wrap: balance;
}
.card__body {
margin: 0;
font-size: 0.9rem; line-height: 1.55;
color: var(--sc-ink-mid);
text-wrap: pretty;
}
/* ---------------------------------------------------------- 3 · peak --- */
/* The scene surface's own box. motion.css crops it (clip-path / a shorter
box); the engine keeps measuring the stage, so nothing is rescaled. */
.peak__stage { position: absolute; inset: 0; }
.act--peak .stage { background: #050810; }
/* One opaque plate in the right gutter, top-aligned under the chrome and
present for the whole pin: no cue, no fade-in. The scene stays full bleed
underneath; a little overlap of the house is intended. */
.peak__rail {
position: absolute; z-index: 20;
left: auto;
right: var(--sc-gutter);
top: calc(var(--promo-h) + var(--bar-h) + clamp(1rem, 3vh, 2rem));
width: min(25rem, 32vw);
max-width: 25rem;
background: var(--sc-canvas);
border: 1px solid var(--sc-hairline);
border-radius: 14px;
padding: clamp(1.1rem, 2.4vh, 1.6rem) clamp(1.1rem, 1.6vw, 1.5rem);
box-shadow: 0 20px 52px -24px rgb(0 0 0 / 0.85);
}
.peak__rail .lede { margin-top: var(--sc-4); }
/* --------------------------------------------------------- 4 · steps --- */
/* A band of its own: a lifted navy panel with a warm wash and gold hairlines,
so the checklist reads as a separate beat. The spine runs down the number
column; .steps__line (gold, drawn at full length) sits on it behind the
numbers and motion.css reveals it with a scale from --steps-progress.
Unlit steps are dimmed only when JS is on and motion is allowed; every
other case shows them all lit. */
.act--steps {
--steps-num: 3rem;
--steps-band: #0D1830;
position: relative;
background:
radial-gradient(90% 60% at 50% 0%, rgb(231 192 119 / 0.08), transparent 70%),
var(--steps-band);
border-block: 1px solid rgb(231 192 119 / 0.2);
padding-block: clamp(4.5rem, 9vw, 8rem);
}
.steps__wrap { max-width: 48rem; }
.steps__head { text-align: center; }
.steps__head .display--lg { font-size: clamp(2.2rem, 1.4rem + 2.2vw, 3.4rem); }
.steps__sub {
margin: 0.9rem auto 0;
font-size: var(--sc-t-lg); line-height: 1.45;
color: var(--sc-ink-mid);
}
.steps__track {
position: relative;
margin: clamp(2.75rem, 6vw, 4.5rem) 0 0;
}
/* The unlit spine: a faint track the gold line fills. */
.steps__track::before,
.steps__line {
content: "";
position: absolute; z-index: 0;
left: calc(var(--steps-num) / 2 - 1px);
top: calc(var(--steps-num) / 2);
width: 2px;
border-radius: 1px;
}
.steps__track::before {
bottom: 0;
background: rgb(231 192 119 / 0.16);
}
.steps__line {
/* Full length here; motion.css scales it (page.js measures it unscaled). */
height: calc(100% - var(--steps-num) / 2);
background: linear-gradient(to bottom, #F1D49A, var(--sc-accent));
box-shadow: 0 0 10px rgb(231 192 119 / 0.45);
}
.steps {
list-style: none;
margin: 0; padding: 0;
position: relative; z-index: 1;
display: grid;
gap: clamp(2.25rem, 5vw, 3.5rem);
}
.step {
display: grid;
grid-template-columns: var(--steps-num) minmax(0, 1fr);
column-gap: clamp(1.1rem, 2.5vw, 1.75rem);
align-items: start;
}
.step__num {
grid-row: span 2;
display: grid; place-items: center;
width: var(--steps-num); height: var(--steps-num);
border-radius: 50%;
border: 1px solid var(--sc-accent);
background: var(--steps-band);
box-shadow: 0 0 0 6px var(--steps-band), 0 0 22px -4px rgb(231 192 119 / 0.5);
font-family: var(--sc-font-display);
font-optical-sizing: auto;
font-weight: 400; font-size: 1.35rem; line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--sc-accent);
}
.step__title {
margin: 0.45rem 0 0.4rem;
font-family: var(--sc-font-display);
font-optical-sizing: auto;
font-weight: 400;
font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.85rem); line-height: 1.15;
letter-spacing: var(--sc-track-snug);
color: #F3DDB0;
}
.step__body {
margin: 0;
max-width: 46ch;
font-size: var(--sc-t-base); line-height: 1.6;
color: var(--sc-ink-mid);
text-wrap: pretty;
}
.steps__finale {
margin: clamp(3.5rem, 8vw, 5.5rem) 0 0;
text-align: center;
font-family: var(--sc-font-display);
font-optical-sizing: auto;
font-weight: 300; font-style: italic;
font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.4rem);
line-height: 1.05;
letter-spacing: var(--sc-track-tight);
color: var(--sc-accent);
text-wrap: balance;
}
.step__num, .step__title, .step__body, .steps__finale {
transition: opacity 480ms var(--sc-ease-out), color 480ms var(--sc-ease-out),
border-color 480ms var(--sc-ease-out), box-shadow 480ms var(--sc-ease-out);
}
/* Unlit (JS on, motion allowed, the script has not reached it yet). */
@media (prefers-reduced-motion: no-preference) {
html.js:not(.is-static) .step:not(.is-lit) .step__num {
opacity: 0.4;
border-color: rgb(231 192 119 / 0.4);
box-shadow: 0 0 0 6px var(--steps-band);
}
html.js:not(.is-static) .step:not(.is-lit) .step__title { opacity: 0.4; color: var(--sc-ink); }
html.js:not(.is-static) .step:not(.is-lit) .step__body { opacity: 0.45; }
html.js:not(.is-static) .steps__finale:not(.is-lit) { opacity: 0.22; color: var(--sc-ink); }
}
/* Everything lit, line full: no JS, static mode, reduced motion. */
html:not(.js) .steps__line,
html.is-static .steps__line { height: calc(100% - var(--steps-num) / 2); }
@media (prefers-reduced-motion: reduce) {
.steps__line { height: calc(100% - var(--steps-num) / 2) !important; }
.step__num, .step__title, .step__body, .steps__finale { transition: none; }
}
/* --------------------------------------------------------- 5 · work --- */
/* A free horizontal scroller at every width: no pin, no wheel capture. Photo
items and quote cards share one height so the rail holds a straight line. */
.act--trust {
--rail-h: clamp(18rem, 44vh, 27rem);
background: var(--sc-canvas);
padding-block: clamp(4rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
}
.trust__top {
display: grid; gap: 0.6rem; justify-items: start;
padding-inline: var(--sc-gutter);
margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}
.trust__all { margin: 0; }
.trust__all .tlink { font-size: var(--sc-t-sm); color: var(--sc-ink-mid); }
.rail {
list-style: none;
margin: 0;
display: flex; align-items: stretch;
gap: clamp(0.75rem, 1.4vw, 1.25rem);
padding: 0 var(--sc-gutter) 1rem;
overflow-x: auto; overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scroll-padding-inline: var(--sc-gutter);
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgb(244 238 227 / 0.22) transparent;
}
.rail__item {
flex: 0 0 auto;
width: 26vw;
height: var(--rail-h);
scroll-snap-align: start;
}
.rail__item img {
width: 100%; height: 100%;
object-fit: cover;
border-radius: var(--sc-r-sm);
filter: saturate(0.78) sepia(0.1) brightness(0.94) contrast(1.02);
-webkit-user-drag: none;
}
.rail__quote { width: clamp(20rem, 24vw, 26rem); }
/* --------------------------------------------------------- 6 · close --- */
/* Two columns at 861px and up: the call to action on the illustrated frame
(image + snow canvas live inside .close__cta only), then the fine print in
a solid band. Phones stack them (PHONE section). */
.act--close { background: var(--sc-canvas); }
.close__grid {
display: grid;
grid-template-columns: minmax(0, 1.75fr) minmax(19rem, 1fr);
min-height: min(88vh, 52rem);
}
.close__cta {
position: relative; isolation: isolate; overflow: hidden;
display: flex; align-items: flex-start;
padding: clamp(5rem, 13vh, 8rem) clamp(2rem, 5vw, 5rem) clamp(3rem, 8vh, 5rem);
background: #050810;
}
.close__art { position: absolute; inset: 0; z-index: -1; }
.close__ground { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; z-index: 0; }
/* Snow sits on the frame, under the copy. Painted by footer-snow.js only
while the section is on screen. */
.close__snow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.is-static .close__snow { display: none; }
@media (prefers-reduced-motion: reduce) { .close__snow { display: none; } }
/* Density only where the type is: the dark sky band at the top of the frame. */
.close__art::after {
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: linear-gradient(to bottom,
rgb(7 11 22 / 0.94) 0%, rgb(7 11 22 / 0.78) 30%, rgb(7 11 22 / 0.18) 60%, transparent 76%);
}
.close__copy {
position: relative; z-index: 1;
display: grid; justify-items: start; gap: var(--sc-5);
max-width: 38rem;
}
.close__copy .display--lg { font-size: clamp(2.1rem, 1rem + 2.5vw, 3.5rem); text-shadow: 0 2px 18px rgb(0 0 0 / 0.5); }
.close__copy .lede { max-width: 32ch; color: var(--sc-ink); }
.close__act { margin: 0.35rem 0 0; }
.close__act .cta { min-height: 56px; font-size: 1rem; padding-inline: 1.6em; }
/* The fine print: a solid band, never on the illustration. */
.foot--band {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
align-content: center;
gap: 2rem clamp(1.5rem, 2.5vw, 2.5rem);
padding: clamp(3rem, 8vh, 5rem) clamp(1.75rem, 3vw, 3rem);
background: #0A1020;
border-left: 1px solid rgb(231 192 119 / 0.16);
font-size: 0.86rem; line-height: 1.6;
color: #A39E94;
}
.foot__col { display: grid; gap: 0.9rem; align-content: start; }
.foot p { margin: 0; }
.foot__name {
font-family: var(--sc-font-display); font-optical-sizing: auto;
font-weight: 400; font-size: 1.25rem; line-height: 1.2;
color: var(--sc-ink);
}
.foot__links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.foot a { color: var(--sc-ink-mid); text-decoration-color: rgb(244 238 227 / 0.3); }
.foot a:hover { color: var(--sc-ink); text-decoration-color: currentColor; }
/* ------------------------------------------------- fallbacks + motion --- */
.is-static .scene__canvas { display: none; }
.is-static .scene__poster { opacity: 1; visibility: visible; }
.is-static [data-sc-cue] { opacity: 1 !important; transform: none !important; }
.is-static [data-sc-in] > *, .is-static [data-sc-in] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
.cta { transition-duration: 1ms; }
}
/* =========================================================== 3. VIDEO HERO */
/* V2: a single video plate. Only snow has independent depth or drift. */
.video-hero { height: 400vh; }
.video-hero__stage { isolation: isolate; }
.video-hero__media,
.video-hero__snow,
.video-hero__shade,
.video-hero__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-hero__media { object-fit: cover; object-position: 50% 50%; background: #070b16; }
#hero-video { opacity: 0; }
.is-video-ready #hero-video { opacity: 1; }
.is-video-ready .video-hero__poster { visibility: hidden; }
.video-hero__snow { z-index: 1; pointer-events: none; }
.video-hero__shade {
z-index: 2; pointer-events: none;
opacity: var(--video-copy-opacity, 1);
background: linear-gradient(270deg, rgba(7,11,22,.92), rgba(7,11,22,.72) 26%, rgba(7,11,22,.12) 62%, transparent 74%);
}
.video-hero__copy {
position: absolute; z-index: 4;
width: min(35%, 31rem); right: 5%; top: max(110px, 18vh);
}
.video-hero__copy > * + * { margin-top: 1.35rem; }
.video-hero__copy .display--xl { font-size: clamp(2.1rem, 3vw, 3.7rem); }
.video-hero__copy .lede { font-size: clamp(.95rem, 1.15vw, 1.1rem); max-width: 35ch; }
/* The exit veil dims only the film: it sits above the media, snow and shade
but below .video-hero__copy (z-index 4), so the H1 and the subhead stay at
full strength through the crossfade. */
.video-hero__veil { z-index: 3; background: #070b16; opacity: 0; pointer-events: none; }
#hero.is-video-static { height: 100svh !important; min-height: 620px; }
#hero.is-video-static .video-hero__stage { position: relative; height: 100%; min-height: inherit; }
.video-hero a:focus-visible, .video-hero button:focus-visible { outline: 2px solid #e7c077; outline-offset: 5px; }
/* Phone rules for the hero live in the PHONE section below. */
@media (prefers-reduced-motion: reduce) {
#hero { height: 100svh !important; min-height: 620px; }
.video-hero__snow { display: none; }
}
/* ============================================================== 4. SPARKLE */
/* ===========================================================================
SPARKLE CURSOR
---------------------------------------------------------------------------
A fixed, full-viewport canvas that draws the snow-sparkle trail behind the
pointer. sparkle.js creates the element; this file only places it.
z-index: above the page chrome (--sc-z-chrome: 60) so the trail reads over
the header and the footer, and below the lead