/* ============================================================================
bto-about-hero-scrub.css — the scroll-scrubbed rack-focus video background.
FILENAME IS NOW A MISNOMER, KEPT ON PURPOSE. This shipped 2026-08-11
targeting `#about-hero`. Same day, founder: "move the back ground to panel
2 and have no video for panel one" — every selector below now targets
`#about-handoff` (panel 2) instead. Renaming the file would mean re-wiring
its `` path in about.html for no real benefit and more risk than just
leaving a filename that no longer matches its own target — the header you
are reading is the correction, not a rename. If this moves again, update
THIS comment and the selectors, not the filename.
TWO FOUNDER DECISIONS LOCKED going into the ORIGINAL build, not
re-litigated since:
1. Copy volume: TRIM to eyebrow / H1 (or H2, on this section) / support /
one more line of prose accompanying the video section only.
2. Ship the Coca-Cola can fully visible, no extra crop beyond normal
object-fit: cover safety.
TWO MORE locked across the next two revisions, same day:
3. Scrub sensitivity: "the video is slowed down [in the grade already]…
make the interaction very sensitive, a very small scroll" — see
bto-js/about-hero-scrub.js's own `WINDOW_PX` note; JS-only, nothing
here changed for it.
4. THIRD PASS: "the scroll starts at the end of panel 2, start it as
soon as we start to scroll down. remove the black faded solid behind
the text. match the scroll with the font animation." Three changes:
the trigger point (JS-only, §2's own comment there), §4's copy scrim
losing its background (this file, below), and the h2 heading now
being scrubbed by the same JS off the same `p` as the video (§6,
new, this file).
The old `.mph-hero-media` rules (bto-about-mph.css §4, lines ~260-292) are
LEFT IN PLACE, unused — about.html's markup no longer has a
`.mph-hero-media` element on this page. Same lowest-risk reasoning as
before: nothing there was touched, and the retired asset pair
(`videos/reel.mp4` + `videos/reel-poster.jpg`) is NOT deleted from disk,
only unreferenced.
Scoped entirely to `#about-handoff`, same safety pattern as
bto-css/bto-about-founder.css — nothing outside this one section is
touched. Linked in right after bto-about-founder.css, before
bto-system.css — same "additive page sheet, before the shared system
sheet" slot that file already uses (link tag itself unchanged by this
revision, only this file's own contents moved targets).
============================================================================ */
/* ── §1 · THE SECTION — room for the video, a floor on how short it can get ──
`position: relative` is already true via the base `.bto-static .bto-panel`
rule (bto-static.css:224-225) — restated here so this file reads correctly
on its own, without depending on that other file's cascade.
NO `overflow: hidden` HERE — LOAD-BEARING OMISSION, read before "fixing"
this. `#about-handoff` is a `.bto-panel`, and every `.bto-panel` carries
its own `::before` ground-colour bleed (bto-static.css:228-234,
`inset: 0 calc(50% - 50vw)`) — that is how its navy fill reaches the
viewport edges from inside the capped `.bto-static__body` container.
`overflow: hidden` on THIS element would clip that `::before` to this
section's own (narrower) box, killing the section's own ground-bleed — the
exact failure mode bto-static.css's "OVERFLOW GUARD" comment already
documents from the other direction. The page-level guard
(`.bto-static:has(.bto-panel) { overflow-x: clip }`, bto-static.css:255-257)
already protects against horizontal scroll from ANY bleeding panel,
including this one's video plate below — nothing further is needed here.
`min-height` is a FLOOR only, same reasoning as the original hero build:
gives `object-fit: cover` enough vertical room that the can can't get
squeezed out of frame on a short viewport. The copy block can push the
section taller; it must never render shorter.
DROPPED 80vh → 55vh, 5th pass (founder: "shorten the height of panel 2").
Still tall enough to protect the §2 crop (object-position: 72% 55% keeps
the can well inside a 55vh-tall plate at any reasonable viewport), just a
noticeably shorter section than the original hero-height build. */
#about-handoff {
position: relative;
min-height: 55vh;
}
/* ── §2 · THE VIDEO PLATE ──────────────────────────────────────────────────
First child so it paints first; the copy scrim (§4) comes after it in the
DOM and sits on top by explicit z-index, not by DOM order alone.
`inset: 0 calc(50% - 50vw)` — NOT plain `inset: 0`. This is the difference
from the original hero build: `#about-hero` was a direct child of
`` with no horizontal padding of its own, so its box
was ALREADY flush to the viewport edges and plain `inset: 0` happened to be
full-bleed. `#about-handoff` sits inside the capped, gutter-padded
`.bto-static__body` — its own box is narrower than the viewport. The same
`calc(50% - 50vw)` idiom `.bto-panel::before` already uses (bto-static.css
:228-234) is reused here so the video plate reaches the true viewport
edges left/right, while `0` on the vertical axis keeps it pinned to THIS
section's own top/bottom bounds, not the viewport's. */
.abh-scrub {
position: absolute;
inset: 0 calc(50% - 50vw);
z-index: 0;
}
.abh-scrub__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* 72% 55%: a measured ESTIMATE off the poster frame — the can sits
right-of-centre, roughly vertically centred. Gets a final visual check
separately; not chased further here. */
object-position: 72% 55%;
}
/* ── §3 · THE WASH — base scrim over the whole plate ──────────────────────
#13181B → rgb(19,24,27): 0x13=19, 0x18=24, 0x1B=27 — confirmed by hand,
not just trusted off arithmetic.
⚠ HARDCODED, AND THAT IS CORRECT HERE — same reasoning bto-work-screen.css
:60 and bto-about-grounds.css:56 already record for their own literals.
`--bg-inset-dark` is #13181B in the LIGHT theme and BECOMES #003A6C in the
DARK theme (palette.css:169 vs :226). Binding the wash to that token would
shift it to navy the instant the visitor flips the theme — but the video
plate underneath does NOT retheme, so the scrim sitting on top of it
carries the same fixed ink in both themes. An accepted, deliberate
mismatch against the section's own (token-bound) navy ground colour
underneath, same as the original build.
TWO LAYERS since the 5th pass (founder: "add a vignette to the left
behind the text") — CSS paints multiple comma-separated backgrounds in
listed order, first on top:
1. A LEFT-TO-RIGHT vignette, darkest at the left edge (where the copy
column sits — §4/§6 below) fading to fully transparent by 60% of the
panel's width, so it never reaches the can on the right. This is the
legibility fix for removing §4's old boxed scrim: a soft graduated
darkening instead of a hard-edged rectangle, same intent, no visible
box edge.
2. The ORIGINAL top-to-bottom wash, unchanged from every earlier pass —
still the base darkening over the whole plate, independent of where
the text sits. */
.abh-scrub__wash {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(19, 24, 27, .65) 0%, rgba(19, 24, 27, .32) 35%, rgba(19, 24, 27, 0) 60%),
linear-gradient(180deg, rgba(19, 24, 27, .45) 0%, rgba(19, 24, 27, .55) 100%);
}
@media (prefers-reduced-motion: reduce) {
/* NOT `display: none` on .abh-scrub__video — would ALSO hide its `poster`
attribute (the sharp end frame this fallback depends on). The JS in
bto-js/about-hero-scrub.js hard-returns under this same media query, so
`currentTime` is never programmatically set and the poster (already the
sharp, in-focus frame) simply renders as-is. Nothing to do here. */
}
/* ── §4 · THE COPY — on top of the video/wash; explicit z-index, not just
DOM order. NOTE: unlike the original hero build, there is no `.container`
wrapper between the section and this scrim — `#about-handoff` holds its
content directly, so this class carries the stacking rule.
NO BACKGROUND HERE ANYMORE — founder, third pass: "remove the black faded
solid behind the text." This div is now layout-only: it caps the text
column's width and lifts it above the video/wash by z-index. Legibility
over the video is carried ENTIRELY by §3's lighter, full-panel wash now —
if that stops being enough contrast once the sharp end frame is showing
(the softbox glow behind the can is the brightest part of the clip),
that's the first place to look, not a reason to bring this box back. ── */
.abh-scrub__copyscrim {
position: relative;
z-index: 1;
max-width: var(--bto-measure);
}
/* max-width reuses `--bto-measure` (34em ≈ 68 characters, bto-type.css:105) —
the SAME token `.bto-static__lead` / `.bto-prose` / `.bto-support` are
already capped at, not an invented number. */
/* ── §5 · NARROW ────────────────────────────────────────────────────────────
No override needed at 991px (this file's breakpoint, matching every other
sheet on this page). The §1 `min-height: 55vh` floor applies unchanged;
the copy column only ever grows taller here, never shorter, so the can
never gets squeezed out of frame. */
/* ── §6 · THE HEADING — scrubbed by JS off the SAME `p` as the video ───────
Founder, third pass: "match the scroll with the font animation." This h2
used to carry `.bto-wipe-centre` (static-panels.js's shared M3 wipe — a
fire-once ScrollTrigger, `top 85%`, unrelated to the video's own scroll
math). It's been swapped for `abh-scrub__title` here, driven instead by
bto-js/about-hero-scrub.js's own rAF loop — same `p` that sets the video's
`currentTime`, so the two motions are locked frame-for-frame, not just
similarly timed.
`--closed` is the STARTING state, added by JS (not this stylesheet) right
before the scrub loop begins — SAME contract static-panels.js's own
opt-in class carries: the plain `.abh-scrub__title` selector below has NO
collapsed state of its own, so a page that never runs the JS (blocked
script, 404, a throw) renders this heading fully visible by default. JS
adds the class, then immediately starts overriding `clip-path` inline
every frame — the class's own rule only ever matters for the single frame
between "class added" and "first inline value set."
Polygon values are byte-identical to static-panels.js's own M3 wipe
(bto-js/static-panels.js, the `clipIn(el, "centre", …)` call) — same
visual signature as every other centre-out wipe on this site, just
scroll-scrubbed here instead of tweened. */
.abh-scrub__title--closed {
clip-path: polygon(50% -25%, 50% -25%, 50% 125%, 50% 125%);
}
@media (prefers-reduced-motion: reduce) {
/* Belt and suspenders: the JS never adds `--closed` under reduced motion
(it returns before reaching that line, same guard every scrub in this
file already respects) — but if that ever changes, this keeps the
heading visible regardless. */
.abh-scrub__title--closed {
clip-path: none;
}
}