/**
* =============================================================================
* HERO STYLE: Live image counter (.hero-counter)
* =============================================================================
* Second Home hero design, selectable from the page editor (see
* inc/hero-styles.php). A single giant odometer — the running count of plant
* images Hiphen has turned into agronomic data — sits over a panoramic crop
* band, with a hairline rule and a caption rail underneath.
*
* Ported from the validated POC, rewritten on the theme's own tokens: no
* embedded fonts (Gilroy + Montserrat are the site's two faces), no bespoke
* palette (teal-800 / white ramp / green-400), no bespoke spacing scale.
*
* Markup (parts/hero/counter.php):
*
* ← photo, ratio preserved
* ← local teal reinforcement
* ← optional ghost word
*
*
Revolutionizing How You…
*
* …full sentence for screen readers…
* …wheels, built by JS…
* …unit + note + live pill…
*
*
…the CTA button…
*
*
*
* The digits are rendered as odometer wheels: one window per digit, each
* holding a 0-9 strip that scrolls. assets/js/hero-counter.js measures the
* loaded font at runtime and writes the geometry below (--hero-counter-cell,
* --hero-counter-mask-*, --hero-counter-baseline, --hero-counter-digit-w,
* --hero-counter-bearing-*) so a single digit is visible per window whatever
* font actually resolves.
*
* Loaded on the Home page only, and only while this hero style is selected.
* =============================================================================
*/
.hero-counter {
/* --- knobs the runtime writes back ------------------------------------- */
--hero-counter-cell: 1.32em; /* wheel pitch = window height (measured) */
--hero-counter-digit-w: 0.62em; /* advance width of one digit (measured) */
--hero-counter-mask-a: 15%; /* opaque band of the window mask */
--hero-counter-mask-b: 85%;
--hero-counter-baseline: 77.2%; /* digit baseline inside the cell */
--hero-counter-comma-baseline: 0.86em; /* comma box top → its own baseline */
--hero-counter-bearing-l: 0em; /* side bearings, absorbed for optical */
--hero-counter-bearing-r: 0em; /* alignment with the rule below */
--hero-counter-anchor: 50%; /* vertical centre of the photo band */
/* --- design knobs ------------------------------------------------------- */
--hero-counter-track: -0.03em; /* gutter between digits */
--hero-counter-sep: 0.46em; /* thousands interval */
--hero-counter-comma-size: 0.64em; /* comma size, as a share of the digits */
/* Heavier than the classic hero's veil on purpose: its title is solid white,
this number is translucent glass and needs a calmer ground to read on. */
--hero-counter-veil: 0.46; /* brand teal veil over the photo */
--hero-counter-scrim: 0.54; /* extra darkening behind the number */
--hero-counter-glass-angle: 168deg;
--hero-counter-width: 88%; /* share of the container the number fills */
position: relative;
isolation: isolate;
overflow: hidden;
/* The header is in flow (position: sticky), so a full-viewport hero would
push the fold down by its height. JS measures it into the custom property;
the fallback matches the header at its default padding. */
min-height: calc(100vh - var(--hero-counter-header-h, 108px));
min-height: calc(100svh - var(--hero-counter-header-h, 108px));
display: flex;
flex-direction: column;
justify-content: center;
padding-block: var(--space-40);
background: var(--color-bg-page);
}
/* ---------------------------------------------------------------------------
* PHOTO
* Same shot as the classic hero, given the same treatment: full-bleed, brand
* teal veil, darkened under the header and dissolving into the page background
* at the bottom so the section below starts on a clean seam (the classic hero
* does exactly this in blocks/hero-banner/style.css, .hero--tall).
* --------------------------------------------------------------------------- */
.hero-counter__band {
position: absolute;
z-index: -3;
inset: 0;
background: var(--color-teal-800) center / cover no-repeat;
overflow: hidden;
}
/* The photo is an (for srcset + fetch priority), sized exactly like the
background-image it replaced: full-bleed, centred, cover. The ::after veil
below stacks above it because it comes later in the paint order. */
.hero-counter__band-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-counter__band::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(to bottom,
rgba(4, 48, 65, 0.82) 0%,
rgba(4, 48, 65, var(--hero-counter-veil)) 30%,
rgba(4, 48, 65, var(--hero-counter-veil)) 62%,
rgba(4, 48, 65, 0.86) 88%,
var(--color-teal-800) 100%);
}
/* The number is translucent glass: it needs a calm ground. A wide ellipse
centred on the counter, never a full-section gradient. */
.hero-counter__scrim {
position: absolute;
z-index: -2;
inset: 0;
pointer-events: none;
background: radial-gradient(134% 46% at 50% var(--hero-counter-anchor),
rgba(4, 48, 65, var(--hero-counter-scrim)) 0%,
rgba(4, 48, 65, calc(var(--hero-counter-scrim) * 0.84)) 48%,
rgba(4, 48, 65, 0) 100%);
}
/* ---------------------------------------------------------------------------
* GHOST WORD — same role as .hero__watermark on every other page, drawn as an
* outline here so it survives behind a translucent number.
* --------------------------------------------------------------------------- */
.hero-counter__watermark {
position: absolute;
z-index: -1;
left: 50%;
top: 42%;
transform: translate(-50%, -50%);
font-family: var(--font-gilroy);
font-weight: var(--fw-extrabold);
font-size: 15vw;
line-height: 1;
letter-spacing: -0.02em;
white-space: nowrap;
text-transform: uppercase;
color: transparent;
-webkit-text-stroke: 1px var(--color-white-15);
user-select: none;
pointer-events: none;
}
.hero-counter__inner {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
/* ---------------------------------------------------------------------------
* KICKER — the page's h1, above the number
* ---------------------------------------------------------------------------
* The counter on its own announced a volume and left the visitor to guess the
* business behind it. This line carries that meaning, so it has to be readable
* as a heading — but deliberately a long way below the number's weight, or the
* two compete and the odometer stops being the thing you look at.
*
* Width is the full container, wider than the number's own 88% box — see the
* note on the rule below.
* --------------------------------------------------------------------------- */
.hero-counter__kicker {
/* The full container, NOT the number's 88% measure. The odometer is boxed to
88% because the rule and the caption rail are optically aligned to its ink;
a centred heading has nothing to align to, and at this size the extra
~150px is what keeps the line whole ("…Measure / Plants" orphaned its last
word). Longer editor copy still wraps — `balance` splits it into even lines
instead of dropping one word on its own. */
width: 100%;
text-wrap: balance;
margin: 0 0 var(--space-12);
font-family: var(--font-gilroy);
font-weight: var(--fw-bold);
/* Within a hair of the classic hero's title (--text-4xl = clamp(32px, 5vw,
68px)), so the two heroes carry the same voice. Clamped rather than taking
the token directly because it must track the odometer, which is itself
fluid — and the odometer still renders 3x this, so the number keeps the
stage. The first pass at 2.6vw/40px read as a caption. */
font-size: clamp(28px, 4.2vw, 62px);
line-height: var(--lh-tight);
letter-spacing: -0.01em;
text-align: center;
color: var(--color-white);
/* Same veil-proofing as the classic hero's title: legible even where the
photo underneath is bright. */
text-shadow: 0 2px 16px rgba(4, 48, 65, 0.55);
}
/* ---------------------------------------------------------------------------
* COUNTER
* --------------------------------------------------------------------------- */
.hero-counter__heading {
margin: 0;
width: var(--hero-counter-width);
max-width: 100%;
font-weight: var(--fw-regular); /* the h1 gets its size from the runtime fit */
display: block;
}
.hero-counter__number {
display: flex;
justify-content: center;
align-items: flex-end;
/* Optical alignment: absorb the side bearings so the ink of the first and
last digit meets the rule and the label exactly, not the glyph's own
invisible gutter. */
margin-left: calc(-1 * var(--hero-counter-bearing-l));
margin-right: calc(-1 * var(--hero-counter-bearing-r));
font-family: var(--font-gilroy);
font-weight: var(--fw-extrabold);
font-feature-settings: 'tnum' 1, 'lnum' 1;
line-height: 1;
font-size: 120px; /* recomputed at runtime to fill the container */
color: var(--color-white);
}
/* Tighten the gutter between windows; never make a window narrower than the
glyph's advance or the ink would be clipped. */
.hero-counter__number > * + * {
margin-left: var(--hero-counter-track);
}
.hero-counter__wheel {
display: block;
position: relative;
flex: 0 0 auto;
width: calc(var(--hero-counter-digit-w) + 0.04em);
height: var(--hero-counter-cell); /* exactly one notch — never two digits */
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--hero-counter-mask-a), #000 var(--hero-counter-mask-b), transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 var(--hero-counter-mask-a), #000 var(--hero-counter-mask-b), transparent 100%);
}
/* During the entrance the wheels spin fast: open the mask right up and add a
touch of vertical blur, so it reads as a turning drum rather than two
digits stacked in one window. */
.hero-counter__number--spin .hero-counter__wheel {
-webkit-mask-image: linear-gradient(to bottom, transparent 2%, rgba(0, 0, 0, 0.22) 20%, #000 48%, #000 54%, rgba(0, 0, 0, 0.22) 80%, transparent 98%);
mask-image: linear-gradient(to bottom, transparent 2%, rgba(0, 0, 0, 0.22) 20%, #000 48%, #000 54%, rgba(0, 0, 0, 0.22) 80%, transparent 98%);
}
.hero-counter__number--spin .hero-counter__cell {
filter: blur(0.012em) drop-shadow(0 0.075em 0.11em rgba(4, 48, 65, 0.48));
}
.hero-counter__strip {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
will-change: transform;
transform: translateY(0);
}
.hero-counter__cell {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: var(--hero-counter-cell); /* the air lives in the notch, not the window */
color: var(--color-white); /* fallback when the glass isn't supported */
text-shadow: 0 0.05em 0.12em rgba(4, 48, 65, 0.5);
}
/* ---------------------------------------------------------------------------
* GLASS DIGITS
* The glyph itself is the glass: a gradient clipped to the text gives a lit
* top edge, a near-transparent core and a rebound at the bottom, plus a
* specular sweep that travels across the number digit by digit.
*
* Guarded by @supports: without background-clip:text the digits would be
* invisible, so they stay solid white instead.
*
* Note the shadows are drop-shadow filters, not text-shadow: with a clipped
* background the fill belongs to the background layer, and a text shadow
* would paint OVER it and grey the glyph out.
* --------------------------------------------------------------------------- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
/* The comma rides along: a flat white mark next to glass digits reads as a
different material. Same fill, same edge, same sheen — only its size and
its baseline offset stay its own. */
.hero-counter__cell,
.hero-counter__sep--comma::before {
color: transparent;
-webkit-text-fill-color: transparent;
background-image:
linear-gradient(102deg, transparent 38%, rgba(255, 255, 255, 0.34) 46%, rgba(255, 255, 255, 0.08) 53%, transparent 62%),
linear-gradient(var(--hero-counter-glass-angle),
rgba(255, 255, 255, 0.76) 10%,
rgba(255, 255, 255, 0.52) 20%,
rgba(238, 244, 246, 0.20) 31%,
rgba(214, 222, 225, 0.11) 46%,
rgba(214, 222, 225, 0.14) 60%,
rgba(255, 255, 255, 0.38) 70%,
rgba(255, 255, 255, 0.78) 79%,
rgba(255, 255, 255, 0.26) 87%,
rgba(255, 255, 255, 0.10) 94%);
background-size: 210% 100%, 100% 100%;
background-position: 120% 0, 0 0;
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
/* The edge of the glass. It is painted in the text layer, i.e. ABOVE the
clipped fill, so it is what holds the silhouette — which is what lets
the body stay this transparent without losing the number. Gilroy has
finer stems than a display face, hence the light stroke. */
-webkit-text-stroke: max(0.8px, 0.006em) rgba(255, 255, 255, 0.48);
text-shadow: none;
/* One shadow, clearly offset downwards: a shadow hugging the glyph would
paint a dark silhouette right behind a translucent body and the photo
would stop showing through. */
filter: drop-shadow(0 0.075em 0.11em rgba(4, 48, 65, 0.48));
animation: hero-counter-sheen 7s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
animation-delay: calc(var(--i, 0) * 110ms);
}
}
@keyframes hero-counter-sheen {
0% { background-position: 120% 0, 0 0; }
44%, 100% { background-position: -58% 0, 0 0; }
}
/* Thousands separator: an interval, optionally carrying a dot or a comma sat
on the measured baseline. No glyph sits in the flow, so the width never
depends on the font that actually loaded. */
.hero-counter__sep {
flex: 0 0 auto;
width: var(--hero-counter-sep);
height: var(--hero-counter-cell);
}
.hero-counter__sep--dot,
.hero-counter__sep--comma {
position: relative;
}
.hero-counter__sep--dot::before {
content: "";
position: absolute;
left: 50%;
top: var(--hero-counter-baseline);
transform: translate(-50%, -50%);
width: 0.075em;
height: 0.075em;
border-radius: var(--radius-circle);
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 0.01em 0.03em rgba(4, 48, 65, 0.55);
}
/* A comma is a real glyph, so it needs two things the dot does not. A size of
its own: at display size the digits own comma is a blob, not a separator.
And a real baseline: absolute positioning aligns its BOX, and a comma hangs
below its own baseline, so the box has to be pulled up by the distance from
its top edge to its baseline. That distance is measured at runtime, in em of
the comma own font-size. */
.hero-counter__sep--comma::before {
content: ",";
position: absolute;
left: 50%;
top: var(--hero-counter-baseline);
font-size: var(--hero-counter-comma-size);
line-height: 1;
transform: translate(-50%, calc(-1 * var(--hero-counter-comma-baseline)));
color: rgba(255, 255, 255, 0.60);
text-shadow: 0 0.04em 0.1em rgba(4, 48, 65, 0.55);
}
/* ---------------------------------------------------------------------------
* RULE + CAPTION RAIL — aligned on the number's own box
* --------------------------------------------------------------------------- */
.hero-counter__rail {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-12);
margin-top: var(--space-12);
padding-top: var(--space-8);
border-top: 1px solid var(--color-white-20);
text-align: left;
}
.hero-counter__labels {
display: block;
min-width: 0;
}
.hero-counter__unit {
display: block;
font-family: var(--font-gilroy);
font-weight: var(--fw-bold);
font-size: clamp(13px, 1.05vw, 17px);
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: var(--lh-normal);
color: var(--color-white);
}
.hero-counter__note {
display: block;
margin-top: var(--space-4);
font-family: var(--font-inter);
font-weight: var(--fw-regular);
font-size: clamp(12px, 0.85vw, 14px);
line-height: var(--lh-relaxed);
color: var(--color-white-70);
}
/* "Live" pill — the glass chip used across the site */
.hero-counter__live {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-3) var(--space-7) var(--space-3) var(--space-6);
border-radius: var(--radius-full);
background: var(--color-white-10);
border: 1px solid var(--color-white-15);
font-family: var(--font-gilroy);
font-weight: var(--fw-medium);
font-size: 13px;
line-height: var(--lh-snug);
color: var(--color-text-secondary);
white-space: nowrap;
}
/* ---------------------------------------------------------------------------
* CTAs — the green button of the classic hero, plus this style's glass button
* scrolling down to the intro video. Centred as a pair: the box keeps the
* number's own width so they centre on the number rather than on the
* container. They wrap rather than shrink, so neither label is ever clipped.
* --------------------------------------------------------------------------- */
.hero-counter__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-8);
width: var(--hero-counter-width);
max-width: 100%;
margin-top: var(--space-16);
}
/* The glass variant is 30% → 10% white: over a photo that is legible enough
only once what is behind it is blurred. Scoped to the hero, since elsewhere
.btn--secondary sits on a flat ground and needs nothing. The blur goes at
hover, where the fill turns to the opaque green gradient anyway. */
.hero-counter__actions .btn--secondary {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.hero-counter__actions .btn--secondary:hover,
.hero-counter__actions .btn--secondary:active {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.hero-counter__dot {
width: 8px;
height: 8px;
flex: 0 0 auto;
border-radius: var(--radius-circle);
background: var(--color-green-400);
box-shadow: 0 0 0 4px var(--color-glass-lime-18);
animation: hero-counter-pulse 2.4s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}
@keyframes hero-counter-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.72); }
}
/* ---------------------------------------------------------------------------
* RESPONSIVE
* --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
.hero-counter {
padding-block: var(--space-32);
}
}
@media (max-width: 819px) {
.hero-counter {
/* The digits are much smaller here, so more fragile over a photo: lean
harder on the local scrim. */
--hero-counter-scrim: 0.68;
/* The counter drops to the bottom of the hero: the air goes to the top,
where the header lives. */
justify-content: flex-end;
padding-block: var(--space-32) var(--space-60);
}
/* The kicker is not in this list: it is already width: 100% at every
viewport, so it has no --hero-counter-width to widen. */
.hero-counter__heading,
.hero-counter__actions {
--hero-counter-width: 100%;
}
/* Stacked, the rail no longer has two ends to align on: everything centres
on the number, like the kicker and the CTAs (asked for on 2026-10-01). */
.hero-counter__rail {
flex-direction: column;
align-items: center;
gap: var(--space-8);
text-align: center;
}
/* The desktop clamp bottoms out at 28px on a phone, which read as small
next to the odometer. 34px at 390px, capped at 40px. */
.hero-counter__kicker {
font-size: clamp(34px, calc(5vw + 15px), 40px);
}
.hero-counter__watermark {
font-size: 26vw;
}
/* At small sizes translucent glass no longer holds over a photo: thicken
the body of the glyph (the modelling and the sheen stay) rather than
sacrificing legibility. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.hero-counter__cell,
.hero-counter__sep--comma::before {
background-image:
linear-gradient(102deg, transparent 38%, rgba(255, 255, 255, 0.40) 46%, rgba(255, 255, 255, 0.10) 53%, transparent 62%),
linear-gradient(var(--hero-counter-glass-angle),
rgba(255, 255, 255, 0.92) 10%,
rgba(255, 255, 255, 0.72) 20%,
rgba(240, 246, 247, 0.40) 31%,
rgba(226, 234, 237, 0.28) 46%,
rgba(232, 239, 241, 0.32) 60%,
rgba(255, 255, 255, 0.58) 70%,
rgba(255, 255, 255, 0.92) 79%,
rgba(255, 255, 255, 0.44) 87%,
rgba(255, 255, 255, 0.20) 94%);
}
}
}
@media (max-width: 560px) {
/* Less gutter between digits: the number gains presence. The thousands
interval stays wide — that is what keeps the grouping readable small. */
.hero-counter {
--hero-counter-track: -0.055em;
}
/* The live sentence ("+12 images processed since you opened this page")
is wider than a 360-390px phone column: let the pill wrap to a second
line instead of running off-screen, where body's overflow-x would clip
it. Wider screens keep it on one line. */
.hero-counter__live {
flex-shrink: 1;
max-width: 100%;
white-space: normal;
text-wrap: balance;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-counter__dot {
animation: none;
}
.hero-counter__cell,
.hero-counter__sep--comma::before {
animation: none;
background-position: 34% 0, 0 0;
}
}