, putting both classes on one element. Both set
`padding` with the shorthand at equal specificity, and
styles.css:1646 (.section-v6, 44px 0) is written after
styles.css:80 (.wrap, 0 var(--gutter)), so it wins and
zeroes the inline padding. The sections above these use the
correct nesting and stay inset, which is what makes the
three flush ones look like a rendering fault rather than a
choice. page.php skips its own .wrap for this shortcode, so
there is no parent to fall back on.
A compound selector is (0,2,0) and settles it in both
directions without touching the 44px block padding that is
doing its job. */
.wrap.section-v6 {
padding-inline: var(--gutter);
}
/* 9.2 · 404, same mechanism.
404.php:2 is
and
styles.css:556 restates the padding shorthand, so the
headline, the sentence and the button all sit against both
bezels. The h1 there is bare, so it also misses the mobile
step-down that .page-head h1 gets in section 5 above, and
arrives at 36px on a 375px screen.
Scoped to the compound deliberately: cart-empty.php writes a
bare .empty-state inside page.php's own .wrap, and a blanket
rule would gutter that one twice. */
.wrap.empty-state {
padding-inline: var(--gutter);
}
@media (max-width: 600px) {
.empty-state h1 { font-size: 1.875rem; }
}
/* 9.3 · Checkout, the summary bar eats the bottom of the page.
50-cart.css:881 reserves a flat 96px for .hl-bar, but the
bar pads its own bottom by calc(14px + var(--safe-b)). On a
phone with a home indicator that is 34px the browser never
accounted for, so the last stretch of every checkout step,
the Back link and the legal line, sits under the bar. In a
375px desktop frame --safe-b is 0 and the bug does not
exist, which is exactly why it shipped.
10-tokens.css:152 already writes this correctly for the
shared bottom bar. This is the same idiom, applied to the
one bar that forgot it, and kept under 1024 so it cannot
undo the desktop zero-out at 50-cart.css:1187. */
@media (max-width: 1023px) {
body.hl-focus { padding-bottom: calc(96px + var(--safe-b, 0px)); }
}
/* 9.4 · Research library, filter pills 8px under the floor.
archive-product.php:92 emits class="cat-pill chip" and picks
up .chip's 44px minimum plus the invisible extension at
40-plp-home.css:90. research.php:122 and :128 emit .cat-pill
alone, so they get neither. With no line-height reset on
button in this theme, .88rem text in 9px of padding lands
around 36px. These sit in a horizontally scrolling row,
where a tap that lands low is read as the start of a scroll
and the filter the reader reached for simply does not
happen.
Harmless on the archive pills, which already measure 44. */
.cat-pill {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* 9.5 · Sign in, the two controls you need when the code
does not arrive are the two smallest things on the screen.
phone-auth.php:523 is the Resend button: styles.css:1295
gives it 4px of padding and nothing else, so it is about
27px tall. phone-auth.php:504 is the Change link, and
styles.css:1302 forces display:inline on it, which means it
cannot take a height at all and its target is the ~19px
line box it happens to occupy mid-sentence. The submit
buttons beside them are a correct 56px, so this is an
oversight rather than a density choice.
display:flex with width:max-content rather than inline-flex,
because the centring at styles.css:1295 is `margin: 16px
auto 0` and only a block-level box honours it. */
.auth-link {
display: flex;
align-items: center;
justify-content: center;
width: max-content;
min-height: 44px;
padding: 0 12px;
}
.auth-sub .auth-link {
display: inline-flex;
align-items: center;
min-height: 44px;
padding-inline: 6px;
vertical-align: middle;
}
/* 9.6 · Checkout step actions, a three pixel margin.
Back plus Continue to payment measure roughly 292px of
button inside about 289px of content width at 375. That is
inside the uncertainty of font metrics rather than a proven
overflow, so the fix is the cheap one that costs nothing if
the buttons already fit: let them shrink instead of forcing
the label to wrap. */
@media (max-width: 400px) {
.hl-step-actions .hl-step-next,
.hl-step-actions .hl-step-back { min-width: 0; }
.hl-step-actions .hl-step-next { padding-inline: 18px; }
}
/* ============================================================
A1 · HOME HERO · signature motion and graphics layer
------------------------------------------------------------
Loads last: the build sorts parts by codepoint and digits sort
before uppercase, so A1- lands after 99-mobile.css and wins
every tie on equal specificity. Nothing here needs !important.
Scope is .hero-v6 (front-page.php:34) and only .hero-v6. Every
animated property is transform, opacity, filter or
background-position; nothing moves layout, so this layer can
not cause CLS. Everything that moves is stilled in the motion
off block at the bottom of the file.
What this adds, back to front:
1. Film grain over the hero's gradient ground.
2. The halo, re-keyed: its base keyframes drop the centering
translate, which put the glow half its own size low and
right whenever it animated. Fixed here.
3. A caustic pool of light and shadow under the lead bottle,
breathing in phase with the existing float.
4. A specular sweep across the glass of each bottle: one
light source, passing left to right, with a long rest
between passes.
5. Entrance choreography for the copy column, and a one-time
foil glint on the emphasised word.
6. Scroll parallax at four depths, gated behind
@supports (animation-timeline: view()).
Considered and deliberately dropped:
- Any motion on the CTAs. The motion family pulses exactly
one thing sitewide, the promo code pill, and a storefront
whose buy button breathes reads as anxious, not premium.
- Animated grain. Flickering noise reads as video artefact,
and a full-bleed layer repainting forever is exactly the
cost the is-off machinery exists to avoid. The grain is
static.
- Parallax on the copy column. The copy is the reference
plane the depth is measured against, and .reveal already
owns its transform via a transition during entrance
(styles.css:789), so a scroll-driven transform on the same
element would mask the reveal.
- A true alpha mask for the sweep. mask-image with the
per-SKU cutout would need the image URL, which this static
file cannot know and which would be a second fetch anyway.
The approximation used instead is documented at section 4.
============================================================ */
/* ------------------------------------------------------------
1 · Film grain
------------------------------------------------------------
The hero ground is three stacked gradients (styles.css:1469)
and at phone width most of the band is that flat wash. The
grain sits at z-index 1, under .wrap which the base pins at
z-index 2 (styles.css:1477), so the texture lands on the
ground and never dirties the type or the photography.
The tile is an inline data: SVG running feTurbulence through a
desaturate, so it costs no request. soft-light rather than
multiply because multiply can only darken, which reads as a
grey veil on cream; soft-light modulates both ways around the
ground colour and reads as paper. Static on purpose, see the
header note on animated grain.
------------------------------------------------------------ */
.hero-v6::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
background-size: 240px 240px;
opacity: .32;
mix-blend-mode: soft-light;
}
/* ------------------------------------------------------------
2 · The halo, re-keyed
------------------------------------------------------------
.hero-halo (front-page.php:72) centres itself with
transform: translate(-50%, -50%) (styles.css:1494) and then
runs h-glow, whose keyframes declare transform: scale() alone
(styles.css:1383). An animation replaces a plain declaration
on the same property outright, so the moment h-glow starts the
centering translate is discarded and the glow rides low and
right by half its own size: 116px at the mobile 232px, 210px
at the desktop 420px. This is the same trap 90-home-hero.css
documents for the slot tilts, on one more element. The fix is
the same fix: carry the translate in every keyframe.
The base motion-off sweep (styles.css:1396) never listed the
halo either, so it kept glowing under reduced motion. It stops
in the motion off block below.
------------------------------------------------------------ */
.hero-v6 .hero-halo {
animation: a1-halo 7s ease-in-out infinite;
}
@keyframes a1-halo {
0%, 100% { opacity: .28; transform: translate(-50%, -50%) scale(1); }
50% { opacity: .5; transform: translate(-50%, -50%) scale(1.06); }
}
/* ------------------------------------------------------------
3 · The caustic pool
------------------------------------------------------------
A transparent bottle over a gradient is a PNG on a page. What
makes it an object in a room is the floor answering it: a
pool of warmed light where the glass focuses the light down,
inside a soft shadow where the bottle blocks it. One squashed
radial does both, gold-bright at the core falling to the same
warm brown the vial drop-shadows already use
(70-vial-photo.css:56).
Vertical placement is derived from the declared geometry, not
eyeballed: at phone width v1 sits at top 8px and 228px tall
in a 268px band (90-home-hero.css:140), so its base lands at
236px and the pool centres there. The tablet and desktop
steps re-derive the same way from the 360px and 440px bands
with the bottle flex-centred.
It breathes with the float: a1-pool runs 4s ease-in-out, the
exact pairing of v1's f-float (styles.css:1388), and both are
released by the same .is-lit recalc, so they start in phase.
The pool contracts and dims as the bottle lifts, which is
what couples the object to the floor. Gating the breath
behind .is-lit also means it never animates before there is a
bottle to answer; the pool itself is static furniture and is
present from first paint.
z-index 0 with the halo, and a pseudo paints after the
element's children at the same level, so the stack reads
halo, then pool, then bottles. pointer-events: none because
it lies inside an aria-hidden decoration (front-page.php:71).
------------------------------------------------------------ */
.hero-v6 .hero-collage::after {
content: "";
position: absolute;
left: 50%;
bottom: 12px;
z-index: 0;
width: 190px;
height: 40px;
transform: translateX(-50%);
pointer-events: none;
background: radial-gradient(closest-side,
rgba(227, 192, 133, .34),
rgba(161, 98, 7, .12) 46%,
rgba(83, 56, 12, .06) 66%,
transparent 82%);
opacity: .8;
}
.hero-v6 .hero-collage.is-lit::after {
animation: a1-pool 4s ease-in-out infinite;
}
@keyframes a1-pool {
0%, 100% { opacity: .9; transform: translateX(-50%) scale(1, 1); }
50% { opacity: .62; transform: translateX(-50%) scale(.93, .86); }
}
@media (min-width: 768px) {
.hero-v6 .hero-collage::after { bottom: 52px; width: 240px; height: 48px; }
}
@media (min-width: 1024px) {
.hero-v6 .hero-collage::after { bottom: 44px; width: 300px; height: 56px; }
}
/* ------------------------------------------------------------
3b · Hold the pose, not just the position
------------------------------------------------------------
90-home-hero.css:250 states the intent for the .is-lit hold:
the only thing that changes when the bottles light is that
they start moving. The code does not quite deliver it. The
slots still carry their own rotate declarations, at
styles.css:1489 for desktop and in the 90-home-hero mobile
block, and those only ever render while the float is NOT
running, because a running float replaces the slot transform.
So during the pre-lit hold the slot rotation stacked on the
image rotation from 90-home-hero.css:211 and every bottle
waited at roughly double tilt, then stood up by its own slot
angle the moment the float began. Neutralising the slot
transform in the held state makes the pose identical before
and after .is-lit, which is the documented intent. The image
keeps its tilt; position comes from left/top/margin, so
nothing moves.
------------------------------------------------------------ */
.hero-v6 .hero-collage:not(.is-lit) .hero-vial { transform: none; }
/* ------------------------------------------------------------
4 · The specular sweep
------------------------------------------------------------
One pass of light across the glass, then a long rest. The
sweep lives on each slot's ::after (.hero-vial,
front-page.php:85), a rounded lozenge inset from the slot box.
The slot is the bottle's bounding box because 70-vial-photo
gives it the bottle's own 47/96 ratio (70-vial-photo.css:31),
so an inset lozenge hugs the glass body closely.
Reading as light on glass rather than a shine rectangle takes
four things together: the lozenge's radius clips the band to a
bottle-ish silhouette; an elliptical gradient mask fades the
band out before it can touch the lozenge's edges, which is
what curvature does to a reflection; mix-blend-mode: screen
makes it brighten the photograph instead of sitting on it,
and turns near-invisible over the white label the way a real
highlight dies on matte paper; and the pseudo is rotated to
the exact angle the image is (90-home-hero.css:211-214), so
the streak runs down the glass axis, not down the page.
The band travels via background-position, which rule 1
permits. The trade is that a background-position animation
repaints the pseudo rather than riding a compositor
transform, and the honest price of clipping by transform
instead would be overflow: hidden on the slot, which slices
the image's drop-shadow at the box edge. The pseudos are
small, the pass lasts under six seconds of a fourteen second
cycle, and the is-off observer stops the lot offscreen.
One light source: the delays run west to east across the
group, v2 left, v1 centre, v3 then v4 on the right, matching
the slot positions in 90-home-hero.css and the desktop map in
styles.css:1489. All four share one period so they stay phase
locked as a single pass. The travel is 42% of a 14s cycle,
about 5.9s, inside the 4 to 7s target, with an 8s rest.
Gated behind .is-lit: light on glass needs the glass decoded,
and the parked band (background-position 130%) is fully
outside the mask, so the static composition simply has no
sweep and loses nothing.
------------------------------------------------------------ */
.hero-v6 .hero-vial::after {
content: "";
position: absolute;
inset: 4% 14% 3%;
border-radius: 26% / 7%;
pointer-events: none;
background-image: linear-gradient(105deg,
transparent 40%,
rgba(255, 255, 255, .22) 47%,
rgba(255, 255, 255, .5) 50%,
rgba(255, 255, 255, .22) 53%,
transparent 60%);
background-size: 340% 100%;
background-repeat: no-repeat;
background-position: 130% 0;
mix-blend-mode: screen;
-webkit-mask-image: radial-gradient(ellipse 62% 46% at 50% 44%, #000 52%, transparent 94%);
mask-image: radial-gradient(ellipse 62% 46% at 50% 44%, #000 52%, transparent 94%);
}
/* The image tilts, restated on the pseudo. If 90-home-hero
retunes its angles these four follow it by hand; they are the
same numbers for the same reason. */
.hero-v6 .hero-vial.v1::after { transform: rotate(-8deg); }
.hero-v6 .hero-vial.v2::after { transform: rotate(12deg); }
.hero-v6 .hero-vial.v3::after { transform: rotate(-15deg); }
.hero-v6 .hero-vial.v4::after { transform: rotate(8deg); }
.hero-v6 .hero-collage.is-lit .hero-vial::after {
animation: a1-sweep 14s ease-in-out 2.4s infinite;
}
.hero-v6 .hero-collage.is-lit .hero-vial.v1::after { animation-delay: 2.8s; }
.hero-v6 .hero-collage.is-lit .hero-vial.v3::after { animation-delay: 3.2s; }
.hero-v6 .hero-collage.is-lit .hero-vial.v4::after { animation-delay: 3.35s; }
@keyframes a1-sweep {
0% { background-position: 130% 0; }
42% { background-position: -30% 0; }
100% { background-position: -30% 0; }
}
/* ------------------------------------------------------------
5 · Entrance choreography
------------------------------------------------------------
The copy column already reveals as one block: .hero-copy
carries .reveal (front-page.php:36) and main.js adds .in from
its observer, with a 3s failsafe and a no-observer fallback.
This keeps that system and sequences the children inside it:
headline, lede, CTAs, then the trust row on desktop, 60ms
apart on the family ease-out, translate and opacity only.
Rule 4, taken literally: opacity on these children exists
nowhere but inside the keyframes, so an animation that never
starts leaves them at their static opacity of 1, and the
keyframes themselves start from .35 and .3, never zero, so
even a frame frozen at 0% is readable. The whole thing is
additionally gated behind .js (header.php:27) and .in, both
set by the same script that guards .reveal itself.
The emphasised word gets its own beat: it arrives last, as a
focus pull on filter: blur rather than a translate, because
the em is an inline box (front-page.php:50) and a transform
would need inline-block, which opens a break opportunity
before the full stop that follows it and risks an orphaned
period at 375px. Blur and opacity apply to inline boxes as
they are.
------------------------------------------------------------ */
@keyframes a1-rise {
from { opacity: .35; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
/* Was a blur focus-pull from opacity .3 and blur(7px). Measured on
the live page at 375: the claim word is painted with
background-clip: text over a transparent fill, so a blurred gold
gradient on a cream ground is not a soft word, it is no word. For
the ~940ms of delay plus duration the headline read "Research-grade
peptides you can ." with a smudge in the gap, while every line
around it was already sharp. A missing word is worse than a still
one, so the em now only carries the foil sweep, which passes
through the letterforms without ever emptying them. */
@keyframes a1-focus {
from { opacity: .82; }
to { opacity: 1; }
}
.js .hero-v6 .hero-copy.in > h1 { animation: a1-rise 560ms var(--ease-out) both; }
.js .hero-v6 .hero-copy.in > .lede { animation: a1-rise 560ms var(--ease-out) 60ms both; }
.js .hero-v6 .hero-copy.in > .hero-ctas-v6 { animation: a1-rise 560ms var(--ease-out) 120ms both; }
.js .hero-v6 .hero-copy.in > .hero-trust { animation: a1-rise 560ms var(--ease-out) 180ms both; }
.js .hero-v6 .hero-copy.in h1 em { animation: a1-focus 360ms var(--ease-out) 120ms both; }
/* ------------------------------------------------------------
5b · Foil on the claim word
------------------------------------------------------------
The bottle's label prints its type in gold; the headline's
claim word should be the same material. Not --gold-foil
as-is: its light stops sit around #e3c085, which against this
hero's cream ground is nowhere near the 3:1 large-text floor,
and the site only ever runs that gradient on dark grounds
(styles.css:1442 onward). This variant keeps the same
family, #854d0e through #a16207 with one #c9973f glint stop,
and it is sized at 300% so the visible slice at rest, either
end of the gradient, is the dark range only. The accent
itself is documented at 4.9:1 on white (styles.css:33).
The glint is entrance-only: one pass of the highlight through
the word as it focuses in, then it rests dark and static.
Motion carries the foil moment so the resting state never has
to trade contrast for shine.
Gated behind @supports for background-clip: text, because the
fallback chain matters: without support the em keeps the
base's solid accent colour (styles.css:1501) and nothing is
transparent over nothing.
------------------------------------------------------------ */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.hero-v6 h1 em {
background-image: linear-gradient(105deg,
#854d0e 0%, #a16207 35%, #c9973f 50%, #a16207 65%, #854d0e 100%);
background-size: 300% 100%;
background-repeat: no-repeat;
background-position: 0 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--accent);
}
.js .hero-v6 .hero-copy.in h1 em {
animation: a1-focus 360ms var(--ease-out) 120ms both,
a1-foil 1100ms var(--ease-soft) 300ms both;
}
}
@keyframes a1-foil {
from { background-position: 0% 0; }
to { background-position: 100% 0; }
}
/* ------------------------------------------------------------
6 · Scroll parallax, four depths
------------------------------------------------------------
As the hero scrolls away, the layers leave at different
rates: the front bottle slightly faster than the page, the
back bottles, the halo and the pool progressively slower, and
the copy column exactly with the page as the reference plane.
Small offsets on purpose; depth is felt at 12 to 46px, and
anything bigger reads as an effect.
All of it is scroll-driven CSS inside this @supports gate, so
a browser without animation-timeline gets the full static
composition and loses nothing. Inside the gate,
animation-composition is safely available, which is what lets
the parallax ADD to the floats instead of replacing them: the
float shorthand must be restated to grow the list, so the
pairings below restate styles.css:1388-1391 exactly, per the
slot-to-float table in front-page.php:74-79. If the float
family retunes, these four lines follow it by hand.
The .is-lit gate stays in the selector for the same reason it
exists at all (90-home-hero.css:247): these shorthands would
otherwise out-specify the hold and re-promote undecoded
layers at first paint.
One keyframe block serves every layer: the offset lives in
--a1-px, resolved per element. The range runs over exit, so
progress is zero while the hero is fully in view and the
motion only exists in the leave.
------------------------------------------------------------ */
@supports (animation-timeline: view()) {
@keyframes a1-px {
from { transform: translateY(0); }
to { transform: translateY(var(--a1-px, 0px)); }
}
.hero-v6 .hero-collage.is-lit .hero-vial.v1 {
--a1-px: -16px;
animation: h-float 4s ease-in-out infinite, a1-px linear both;
animation-timeline: auto, view();
animation-range: normal, exit 0% exit 100%;
animation-composition: replace, add;
}
.hero-v6 .hero-collage.is-lit .hero-vial.v2 {
--a1-px: 12px;
animation: h-float-slow 5s ease-in-out .5s infinite, a1-px linear both;
animation-timeline: auto, view();
animation-range: normal, exit 0% exit 100%;
animation-composition: replace, add;
}
.hero-v6 .hero-collage.is-lit .hero-vial.v3 {
--a1-px: 24px;
animation: h-float-deep 4.5s ease-in-out 1s infinite, a1-px linear both;
animation-timeline: auto, view();
animation-range: normal, exit 0% exit 100%;
animation-composition: replace, add;
}
.hero-v6 .hero-collage.is-lit .hero-vial.v4 {
--a1-px: 32px;
animation: h-drift 7s ease-in-out infinite, a1-px linear both;
animation-timeline: auto, view();
animation-range: normal, exit 0% exit 100%;
animation-composition: replace, add;
}
.hero-v6 .hero-halo {
--a1-px: 40px;
animation: a1-halo 7s ease-in-out infinite, a1-px linear both;
animation-timeline: auto, view();
animation-range: normal, exit 0% exit 100%;
animation-composition: replace, add;
}
.hero-v6 .hero-collage.is-lit::after {
--a1-px: 46px;
animation: a1-pool 4s ease-in-out infinite, a1-px linear both;
animation-timeline: auto, view();
animation-range: normal, exit 0% exit 100%;
animation-composition: replace, add;
}
}
/* ------------------------------------------------------------
7 · The is-off pause reaches the pseudos
------------------------------------------------------------
The base pause rule (40-plp-home.css:647) matches the marked
element and its descendants, but * never matches a
pseudo-element and animation-play-state does not inherit, so
the sweep and the pool this file added would keep compositing
offscreen while everything around them paused. Restated here
for the two pseudos. No !important, unlike the base rule:
these sit after every animation shorthand above at equal or
greater specificity, so the cascade resolves it on order,
which is the point of the A1- prefix.
------------------------------------------------------------ */
.hero-v6 .hero-collage.is-off::after,
.hero-v6 .hero-collage.is-off .hero-vial::after {
animation-play-state: paused;
}
/* ------------------------------------------------------------
8 · Motion off
------------------------------------------------------------
Reduced motion keeps the whole composition and loses only the
movement: grain, pool, halo glow, foil word and the collage
all render in their resting states. The floats themselves are
already stopped by the base sweep with !important
(styles.css:1396); everything this file added stops here, and
the halo joins the list it was never on. The halo's static
opacity is pinned between its animated extremes of .28 and
.5, because with the animation gone it would otherwise render
the gradient at full strength for the first time.
The last rule is the reduced-motion half of 3b: with the
floats stopped, the slot rotations would come back and double
the image tilts, so the slot transform is neutralised here
too and the bottles hold the exact pose the moving version
floats around.
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.hero-v6 .hero-halo {
animation: none;
transform: translate(-50%, -50%);
opacity: .38;
}
.hero-v6 .hero-collage::after,
.hero-v6 .hero-collage.is-lit::after {
animation: none;
}
.hero-v6 .hero-vial::after,
.hero-v6 .hero-collage.is-lit .hero-vial::after {
animation: none;
}
.hero-v6 .hero-collage.is-lit .hero-vial.v1,
.hero-v6 .hero-collage.is-lit .hero-vial.v2,
.hero-v6 .hero-collage.is-lit .hero-vial.v3,
.hero-v6 .hero-collage.is-lit .hero-vial.v4 {
animation: none;
}
.js .hero-v6 .hero-copy.in > h1,
.js .hero-v6 .hero-copy.in > .lede,
.js .hero-v6 .hero-copy.in > .hero-ctas-v6,
.js .hero-v6 .hero-copy.in > .hero-trust,
.js .hero-v6 .hero-copy.in h1 em {
animation: none;
}
.hero-v6 .hero-vial { transform: none; }
}
/* ============================================================
A2 · Motion, the card and the rails
------------------------------------------------------------
Loads after 99-mobile.css (digits sort before "A" in the
codepoint sort build.sh uses), so everything in this file wins
ties against the entire system. That is a loaded gun, so the
rules here add states and timing only. Nothing restates a
z-index, a height, a padding or a snap value that an earlier
part already fixed; section 1 of 99-mobile.css in particular
(link at z 2, controls at 3, badges at 4 and inert, 44px
buttons) is treated as law and never re-declared.
Scope, verified against the markup before styling:
.product-card / .card-link / .qa-btn / .card-btn
woocommerce/content-product.php:29, 30, 72, 77
.rail / .rail-card / .rail-media / .rail-price
front-page.php:169, 235, 257, 278; base .rail in
css/styles.css:1540
.product-media content-product.php:40 (outer box passed
to halotir_rail_media), base css/styles.css:194
.is-cut functions.php:647 (halotir_rail_media)
.card-proof / .cp-purity / .cp-coa
functions.php:427-439 (halotir_card_proof)
.product-grid.reveal-group
woocommerce/archive-product.php:145
.qa-btn.added assets/main.js:594 adds it on a quick add,
main.js:597 removes it 1600ms later. main.js also swaps
the label to "Added" via textContent, which deletes the
plus icon, so the added state styles a text-only pill.
related rail functions.php:1756 (.rail-media),
functions.php:1770 (.qa-btn), same classes as the home
rail, so every rule here covers it for free.
Only transform, opacity, filter, background-position and
clip-path are ever animated. The one mask in this file is
static. Every moving thing is answered in the reduced motion
block at the end.
============================================================ */
/* ============================================================
A2.1 · The press, made physical
------------------------------------------------------------
Phones have no hover, so the pressed state is the only
feedback a card ever gives. The system already has the bones:
10-tokens.css:128 presses the card to scale(.985) and
40-plp-home.css:657 restates it above the base layer. What is
missing is feel. The shipped press inherits the one 200ms
pairing, so the card eases DOWN over 200ms, and a press that
arrives late reads as lag, not as contact.
Two changes. Press-in gets its own short duration, so contact
registers inside a frame or two; release falls back to the
base 200ms, which is the "returns fast" half of the contract
and needs no new rule. And the art answers slightly more than
the frame: the frame goes to .985 while the tile art goes to
.97, so the two layers separate by about 1.5% and the surface
reads as flexing under the thumb rather than the whole card
shrinking as one flat sticker.
The art rule targets the wrapper (.is-cut) and never the vial,
for the reason 40-plp-home.css:553 records: the float
animation owns the bottle's own transform, and an animation
beats a plain declaration, so a rule on .vial would silently
never apply. The bare .vial selectors below cover the drawn
SVG fallback, which has no float animation and takes the
transform directly (base transitions at styles.css:201 and
styles.css:1560).
Trade-off: on hover+touch hybrids a press momentarily wins
over the hover zoom (scale 1.05 from 40-plp-home.css:558).
That is correct; the thumb outranks the pointer.
============================================================ */
.product-card:active,
.rail-card:active {
transition-duration: 90ms;
}
/* Pressing the quick-add button, or the COA chip, must not squish
the card underneath it. The two targets overlap visually, and if
both compress together the button reads as painted onto the card
instead of resting on it. :active reaches every ancestor of the
pressed element, so without this carve-out the shipped card
scale fires on every button press. In a browser without :has()
the rule drops silently and the shipped behaviour continues,
which is a safe floor. */
.product-card:active:has(.qa-btn:active, .cp-coa:active),
.rail-card:active:has(.qa-btn:active, .cp-coa:active) {
transform: none;
}
@media not all and (prefers-reduced-motion: reduce) {
/* The art presses deeper than the frame. Guarded by the same
:has() carve-out so the bottle stays still while the button
is the thing being pressed. */
.product-card:active:not(:has(.qa-btn:active, .cp-coa:active)) .is-cut,
.rail-card:active:not(:has(.qa-btn:active, .cp-coa:active)) .is-cut,
.product-card:active:not(:has(.qa-btn:active, .cp-coa:active)) .product-media .vial,
.rail-card:active:not(:has(.qa-btn:active, .cp-coa:active)) .rail-media .vial {
transform: scale(.97);
transition-duration: 110ms;
}
}
/* ============================================================
A2.2 · Light on the glass
------------------------------------------------------------
The press moment carries one more cue: a soft band of warm
light crossing the tile, masked to an ellipse sitting where
the bottle sits (the same 50%/56% centre the standing bloom
uses, 40-plp-home.css:481), so it reads as light catching
glass rather than as a banner shine across the whole tile.
Mechanics: press-in fades the band up in 90ms and sends it
across on a 460ms ease-out, so even a 120ms tap shows a
believable glimmer starting to move. On release the band
fades out in 140ms where it stands, and only snaps back to
its start 200ms later, after it is already invisible; that
delayed zero-duration return is what makes a short tap end
clean instead of visibly rewinding.
Layering is the part that could break the site, so it is
explicit: the pseudo sits at z-index 1 inside the card's
stacking context, the same layer as the bottle (which paints
first, being earlier in the tree), and BELOW .card-link at 2
and .qa-btn at 3 per 99-mobile.css:44-51. pointer-events is
none on top of that, so it can never eat a tap even if the
layering ever changes around it. Both tiles clip: overflow
hidden at styles.css:199 and styles.css:1555.
The whole feature lives inside the motion media query, so a
reduced motion user never has the pseudo at all. */
@media not all and (prefers-reduced-motion: reduce) {
.product-media::after,
.rail-media::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(105deg, transparent 40%, rgba(255, 251, 240, .55) 50%, transparent 60%);
-webkit-mask-image: radial-gradient(ellipse 72% 64% at 50% 56%, #000 38%, transparent 74%);
mask-image: radial-gradient(ellipse 72% 64% at 50% 56%, #000 38%, transparent 74%);
opacity: 0;
transform: translateX(-65%);
transition: opacity 140ms linear, transform 0s linear 200ms;
}
.product-card:active:not(:has(.qa-btn:active, .cp-coa:active)) .product-media::after,
.rail-card:active:not(:has(.qa-btn:active, .cp-coa:active)) .rail-media::after {
opacity: .85;
transform: translateX(65%);
transition: opacity 90ms linear, transform 460ms var(--ease-out);
}
}
/* ============================================================
A2.3 · The button is its own object
------------------------------------------------------------
The quick-add pill (base at styles.css:1001) hovers to a full
ink fill on desktop but had no press state at all, so on a
phone the only acknowledgment of the site's single most
important tap was the card squish behind it, which is exactly
the confusion the carve-out above removes. The press is the
hover fill arriving instantly plus a .96 compression on a
70ms in-stroke: filled, small, fast, which is a different
gesture vocabulary from the card's soft .985, so thumb and
eye agree there are two objects.
.96, no deeper. Hit testing follows transforms, so a pressed
44px pill is momentarily about 42px; that is under a pixel a
side, the same order as the shipped card scale, and well
inside touch slop. A stronger squash would start gambling
with edge taps.
The COA chip gets a colour snap only. It is a 30px text chip
over a busy card; making it jump would out-shout the button. */
.qa-btn:active {
background: var(--ink);
border-color: var(--ink);
color: #fff;
transform: scale(.96);
transition-duration: 70ms;
}
.cp-coa:active {
color: var(--accent-deep);
}
/* ============================================================
A2.4 · The add-to-cart moment
------------------------------------------------------------
main.js:594 adds .added, swaps the label to "Added", and
holds the state for 1600ms (main.js:597). The base layer
already turns the pill success green (styles.css:1010). Two
things were missing.
First, a fault: the button is disabled for the whole added
window, and .qa-btn:disabled (styles.css:1009) dims it to
half opacity, so the confirmation was being shown at 50%.
The dim is right for "Adding" and wrong for "Added"; the
moment gets its full opacity back.
Second, the ceremony. A check draws itself in ahead of the
word: an L of two borders rotated into a tick, revealed by a
clip-path wipe that runs in the element's own pre-rotation
space, so the reveal travels along the stroke, short arm
first, the way a pen would draw it. Under it the pill
settles: it starts at the pressed .96 the thumb just left it
at, overshoots to 1.015 and lands at rest. No confetti; a
receipt, not a celebration. The green itself still arrives
through the base 180ms background transition
(styles.css:1006), which is enough.
"Adding" itself gets nothing new on purpose. It is a sub-
second wait state and the shipped dim already says "busy";
giving it motion would make the wait feel longer. */
.qa-btn.added:disabled {
opacity: 1;
}
.qa-btn.added {
animation: a2-qa-settle 340ms var(--ease-out);
}
/* position: static is load-bearing. This same pseudo is the old
44px hit-area stretcher: 40-plp-home.css:276 declares it
absolute with left/right 0 and top 50% at every width, and
99-mobile.css:91 only removed its content on phones. The
moment content comes back, that stray geometry would come
back with it and pin a full-width 44px ghost over the price;
static opts out of all of it and lets the check ride the
button's own flex row, sitting ahead of the word with the
base gap (styles.css:1005). */
.qa-btn.added::before {
content: "";
position: static;
flex: none;
width: 12px;
height: 7px;
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-1px) rotate(-45deg);
animation: a2-check-draw 240ms var(--ease-out) 60ms both;
}
@keyframes a2-qa-settle {
0% { transform: scale(.96); }
60% { transform: scale(1.015); }
100% { transform: scale(1); }
}
@keyframes a2-check-draw {
from { clip-path: inset(-2px 100% -2px -2px); }
to { clip-path: inset(-2px); }
}
/* ============================================================
A2.5 · Entrance
------------------------------------------------------------
The shop grid already animates in: archive-product.php:145
wraps it in .reveal-group, main.js:980 observes it, and
styles.css:1663 staggers children at 70ms steps. But the
stagger stops at nth-child(6), so in a 4-up desktop grid
cards seven and eight fire at 0ms, BEFORE cards two through
six, and the sweep reads as broken. Re-timed here for the
grid only: 40ms steps, capped at 360ms from nth-child(10)
on, so a 12-card grid never leaves a card waiting long and
the order is monotonic. These delays outrank the base rule
on specificity and only matter to the transition path.
Where scroll-driven animations exist, each card instead
drives its own entrance off its position in the scrollport:
grid cards rise as they enter from below, rail cards resolve
as they are swiped in from the right. Progress is position,
not time, so a card revealed by scrolling animates exactly
as it appears, a refresh mid-page renders every visible card
already settled, and nothing ever waits at opacity 0 for an
observer that failed (main.js:986 keeps a 3s safety net for
the fallback path; the scroll-driven path needs none).
Two techniques worth recording because they are load-bearing:
The "to" keyframes deliberately omit transform. A missing
keyframe value resolves to the underlying computed value, so
at full progress the animation stops holding transform and
the :active press scale and desktop hover lift keep working.
Naming transform in the "to" frame would pin it forever
(scroll-driven animations never end) and silently kill every
press state above.
Inside the @supports block the reveal-group's waiting state
(.js .reveal-group:not(.in) > *, styles.css:2067) is
neutralised for grid cards, because it is the underlying
value the trick above resolves to; without this, a fully
scrolled-in card would sit 16px low until the observer
fired.
Cost accepted knowingly: in supporting browsers, cards
already on screen at load do not play the time-based load
stagger, because their scroll progress is already complete.
Position-honest entrances for everything below the fold are
worth more than a one-time flourish above it.
The rail peek is the second dividend: at 375px the next card
peeks about 90px into frame, which puts it mid-entrance,
visibly lighter than the settled cards. A card that is
obviously mid-arrival says "this row continues" better than
any arrow. The fallback rail gets no time-based entrance;
with no observer hook on .rail, a load-time animation would
finish before the rail is ever seen. */
.product-grid.reveal-group.in > .product-card:nth-child(2) { transition-delay: 40ms; }
.product-grid.reveal-group.in > .product-card:nth-child(3) { transition-delay: 80ms; }
.product-grid.reveal-group.in > .product-card:nth-child(4) { transition-delay: 120ms; }
.product-grid.reveal-group.in > .product-card:nth-child(5) { transition-delay: 160ms; }
.product-grid.reveal-group.in > .product-card:nth-child(6) { transition-delay: 200ms; }
.product-grid.reveal-group.in > .product-card:nth-child(7) { transition-delay: 240ms; }
.product-grid.reveal-group.in > .product-card:nth-child(8) { transition-delay: 280ms; }
.product-grid.reveal-group.in > .product-card:nth-child(9) { transition-delay: 320ms; }
.product-grid.reveal-group.in > .product-card:nth-child(n + 10) { transition-delay: 360ms; }
@supports (animation-timeline: view()) {
.js .product-grid.reveal-group:not(.in) > .product-card {
opacity: 1;
transform: none;
}
.product-grid > .product-card {
animation: a2-card-rise linear both;
animation-timeline: view(block);
animation-range: entry 0% entry 45%;
}
/* Alternate columns complete a beat later, so a row arrives as
a slight diagonal rather than a slab. Range offset, not
animation-delay: time delays do not apply to progress-based
timelines. */
.product-grid > .product-card:nth-child(2n) {
animation-range: entry 8% entry 53%;
}
.rail > .rail-card {
animation: a2-rail-in linear both;
animation-timeline: view(inline);
animation-range: entry 0% entry 85%;
}
}
/* Starts at .3, not 0.
The sibling rule in A3 used an identical construction on the box
picker with a `from` of opacity 0, and on the live page cards that
were sitting fully inside the viewport, 71px from the top, still
reported opacity 0: the view() progress was not advancing for those
subjects, so `from` was simply what the browser painted. On a shop
grid that means the products are gone.
A non-zero floor makes that failure survivable. A stalled timeline
now costs a slightly faint card instead of no card, and the visible
travel from .3 to 1 is enough that nothing is lost when it does
run. This is the same floor A1 and A4 use, and it is the reason
neither of them failed the way A3 did. */
@keyframes a2-card-rise {
from { opacity: .3; transform: translateY(16px); }
to { opacity: 1; }
}
@keyframes a2-rail-in {
from { opacity: .3; transform: translateX(18px); }
to { opacity: 1; }
}
/* ============================================================
A2.6 · The rail says it scrolls
------------------------------------------------------------
Checked before touching: snapping is already complete.
styles.css:1541 sets scroll-snap-type: x mandatory,
styles.css:1546 aligns each card to start, and
10-tokens.css:112 fixed the scroll-padding so the snap
respects the gutter. None of that is restated here.
What was missing is the edge story. Cards were guillotined
flat at the bezel, which is the same fault the proof strip
had before 40-plp-home.css:330 masked it. Same cure: a fade
sized to the gutter at both ends. The geometry makes it
honest at the extremes with a purely static mask: the rail's
own gutter padding (styles.css:1543) means that at either end
of travel the terminal card rests inside the fade zone's
inner edge and reads at full strength, so nothing is ever
permanently washed out; mid-scroll, whatever crosses the
bezel dissolves instead of being cut, which is the
continuation cue. Together with the peek entrance above, the
rail now states its own affordance twice without an arrow.
overscroll-behavior-x keeps a hard swipe at the rail's end
from chaining into the browser's own horizontal gestures, so
the snap stop feels like the rail's edge and not the page
giving way. */
.rail {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
overscroll-behavior-x: contain;
}
/* ============================================================
A2.7 · What deliberately does not move
------------------------------------------------------------
Decided, not forgotten:
The price. It is the number a buyer checks twice, it already
has tabular numerals so it cannot jitter, and a price that
moves reads as a price that changed. Static.
The proof row. "≥99% purity" and "COA on request" are the
trust surface of the card; evidence that animates reads as
marketing. The COA chip keeps only the colour snap in A2.3.
The badges. .rail-badge and .promo-badge are pointer-inert
decoration by decree of 99-mobile.css:53, and the promo badge
already owns a state change (is-on, functions.php:1003) that
swaps it to the sage receipt; motion on top of that state
machine would blur which change means something.
The card-flag and card-meta lines: annotations. Annotations
hold still.
============================================================ */
/* ============================================================
A2.8 · Motion off
------------------------------------------------------------
Everything this file animates, answered. The press keeps a
non-motion acknowledgment: the hairline lift ring the system
already uses for hover (10-tokens.css:38), applied instantly,
so a reduced motion user still sees the card respond to touch
as a static state change. 10-tokens.css:242 and
40-plp-home.css:660 already zero the card scale itself; the
art press and the light sweep never exist under reduced
motion because A2.1/A2.2 wrap them in the motion query.
The last rule also settles a pre-existing gap for the grid:
under reduced motion the base guard (styles.css:1671) is
outspecified by the .js waiting state (styles.css:2067), so
grid cards still faded in over 560ms. For product cards the
waiting state is neutralised outright, which makes the added
delays above moot and the grid simply present.
============================================================ */
@media (prefers-reduced-motion: reduce) {
.product-card:active,
.rail-card:active {
transition: none;
box-shadow: var(--lift);
}
.qa-btn:active {
transform: none;
transition: none;
}
.qa-btn.added {
animation: none;
}
.qa-btn.added::before {
animation: none;
}
.product-grid > .product-card,
.rail > .rail-card {
animation: none;
}
.product-grid.reveal-group.in > .product-card:nth-child(n) {
transition-delay: 0s;
}
.js .product-grid.reveal-group:not(.in) > .product-card {
opacity: 1;
transform: none;
}
}
/* ============================================================
A3 · BUILD A BOX · motion and micro-interaction layer
------------------------------------------------------------
Loads last: the build sorts parts by codepoint, digits sort
before uppercase, so A3- lands after 99-mobile.css and wins
every tie at equal specificity. Nothing here needs !important
and nothing here restates a rule 99-mobile.css already
shipped (tile body padding, .in-box hidden under 768, the
30px phone tokens all stay exactly as that file left them).
Scope is the Build a Box page only: everything hangs off
.box-grid, .box-filter, .box-tray, .box-sheet, .box-scrim,
.box-slot or .box-gift, none of which render anywhere else.
Every animated property is transform, opacity, filter or
background-position. Nothing animates a box dimension or an
offset, so this layer cannot cause CLS, and no keyframe
translates an element sideways past its own container, so
nothing can widen the page at 375px. Every state selector
below is one the JS actually sets; the ledger:
.box-add.in-cart box.js:196
.box-add[disabled] box.js:201
.box-card[hidden] box.js:259
.tray-token.filled box.js:176
.tray-token.tray-free.filled box.js:184
.box-sheet.open box.js:276 and 286
.box-scrim.show box.js:277 and 287
.box-tray[aria-expanded] box.js:278 and 288
.chip[aria-pressed] box.js:253-255
.box-gift[data-unlocked] box.js:164
.box-cta[disabled] box.js:187, php:361 and 524
.box-slot / .box-slot-token rebuilt in box.js:105-146
Selection has no card-level class, so the card states ride on
:has() over .box-add.in-cart, gated behind @supports. In a
browser without :has() the button and the tray still confirm;
only the tile ring and the spent dimming are lost.
One grammar decision runs through the whole file: selection
is ink, completion is gold. The tray's filled tokens already
border in ink (30-box.css:261), so the selected tile ring is
ink to match, and gold appears exactly once, at the moment
the fourth slot fills. A gold ring on every picked tile would
spend the payoff four times before it is earned.
============================================================ */
/* ------------------------------------------------------------
1 · The ADD moment
------------------------------------------------------------
Observed: tapping Add flips the button ink to green under the
thumb that is covering it, and nothing else on the tile moves.
Scrolled back past later, a picked tile is distinguishable
only by reading the button copy. Three answers, all driven by
the one class the JS sets (box.js:196):
The button confirms with a compressed pop. The colour swap to
var(--success) is already handled by styles.css:1068 and the
sitewide colour transition in 10-tokens.css:134, so this file
adds only the beat the eye catches at the tile's edges when
the centre is under a thumb.
The artwork stamps. The media block compresses about 4% and
settles. It only shrinks, never grows, because the cutout
photograph covers its tile edge to edge and any upscale would
shear the vial cap against the card's overflow clip, which is
exactly the rendering fault 70-vial-photo.css exists to bury.
Targeted as the media's first element child so it catches the
.box-media-inner wrapper (functions.php:647) and the drawn
SVG fallback (functions.php:644) alike.
The tile keeps a persistent record: an inset ink ring plus a
faint ink wash on the media, fading on opacity both ways. The
fade OUT is the remove path's answer on the grid: un-picking
releases the tile over 200ms instead of blinking.
------------------------------------------------------------ */
.box-grid .box-add.in-cart {
animation: a3-add-confirm 300ms var(--ease-out);
}
@keyframes a3-add-confirm {
0% { transform: scale(.94); }
55% { transform: scale(1.04); }
100% { transform: none; }
}
/* The ring lives on every media block at opacity 0 so that both
directions of the state change are a pure opacity transition. */
.box-grid .box-card-media::after {
content: "";
position: absolute;
inset: 0;
z-index: 2; /* under .box-coa, which 99-mobile.css:412 pins at 3 */
pointer-events: none;
box-shadow: inset 0 0 0 2px var(--ink);
background: rgba(28, 25, 23, .05);
opacity: 0;
transition: opacity 200ms var(--ease-soft);
}
@supports selector(:has(*)) {
.box-grid .box-card:has(.box-add.in-cart) .box-card-media::after {
opacity: 1;
}
.box-grid .box-card:has(.box-add.in-cart) .box-card-media > :first-child {
animation: a3-vial-stamp 420ms var(--ease-soft);
}
/* Once the box is full the JS spends every unpicked button
(box.js:201). The grid should read the same way: the four
chosen tiles hold full colour, the rest recede. Filter and
opacity only, and it reverses the moment a slot reopens. */
.box-grid .box-card:has(.box-add:disabled:not(.in-cart)) .box-card-media {
opacity: .55;
filter: saturate(.55);
}
}
@keyframes a3-vial-stamp {
0% { transform: scale(1); }
38% { transform: scale(.955); }
75% { transform: scale(1.006); }
100% { transform: scale(1); }
}
/* The spent button itself. State styling, not motion: the fade
between states comes from the sitewide button transition. */
.box-grid .box-add:disabled:not(.in-cart) {
opacity: .45;
cursor: not-allowed;
}
/* ------------------------------------------------------------
2 · The SLOT FILL
------------------------------------------------------------
Observed: .tray-token gets .filled and its innerHTML swapped
in the same synchronous render pass (box.js:174-182), so the
vial thumb appears the same frame the finger lifts, with no
sense that anything travelled or landed.
The land: the token holds invisible for 90ms, the travel time
the eye needs to move from the tile to the tray, then drops
in from 7px above at 112% and settles with one overshoot.
fill-mode backwards is what holds the from-frame through the
delay. 7px of upward start pokes past the tray's top border
because .bottom-bar clips nothing, and that crossing is what
sells "dropped in" rather than "appeared".
The land animation is keyed to the class, not the element:
render() rewrites every filled token's innerHTML on every
change (box.js:178), so any first-render hook on the img
would replay across all filled tokens on each add. The class
only changes on the token whose state actually changed, so
the animation fires exactly once per fill.
The reopen: an emptied token replays its entrance, a short
rise from faint, which is the remove path made visible in the
tray. The same keyframes run once per token at page load with
a small left-to-right stagger, so the choreography is
established as the tray's own idiom the first time it slides
up, not invented mid-session.
------------------------------------------------------------ */
.tray-token:not(.tray-free):not(.filled) {
animation: a3-slot-open 260ms var(--ease-out) backwards;
}
/* The :not(.filled) guard keeps these delay rules from ever
touching the land animation's own 90ms hold below, whatever
the source order says. */
.box-tray-tokens .tray-token:nth-child(2):not(.filled):not(.tray-free) { animation-delay: 45ms; }
.box-tray-tokens .tray-token:nth-child(3):not(.filled):not(.tray-free) { animation-delay: 90ms; }
.box-tray-tokens .tray-token:nth-child(4):not(.filled):not(.tray-free) { animation-delay: 135ms; }
@keyframes a3-slot-open {
from {
opacity: .2;
transform: scale(.82);
}
}
.tray-token.filled:not(.tray-free) {
animation: a3-token-land 340ms cubic-bezier(.22, 1.2, .36, 1) 90ms backwards;
}
@keyframes a3-token-land {
0% {
opacity: 0;
transform: translateY(-7px) scale(1.12);
}
62% {
opacity: 1;
transform: translateY(1px) scale(.97);
}
100% {
opacity: 1;
transform: none;
}
}
/* ------------------------------------------------------------
3 · COMPLETION
------------------------------------------------------------
Observed: the fourth fill and the first are identical events.
The free token flips .filled (box.js:184), the heading text
swaps (box.js:172), and the page's entire payoff is a border
going from dashed to solid at 30px wide.
The sequence, timed to follow the fourth land (which settles
at about 430ms after the tap: 90ms hold plus 340ms of land):
380ms the Free pill pops once, scale only, it never
disappears so there is nothing to fade
500ms a single gold glint crosses the pill, clipped to
the stadium by the token's own overflow
560ms a gold-foil hairline lights along the tray's top
edge and stays lit while the box is complete
(state, not loop: it reverts the moment a slot
reopens because :has stops matching)
The heading goes deep gold by state. It is a text swap the JS
makes instantly, so colouring it instantly is coherent where
easing it would smear a change that already happened.
The desktop aside gets the same glint on the gift row, keyed
to data-unlocked (box.js:164), riding on top of the 500ms
unlock transition 30-box.css:155 already ships. And the CTA,
which enables only now, announces itself with one small pulse
rather than sitting there hoping to be noticed.
Nothing loops. A lab brand earns the moment and then stands
still.
------------------------------------------------------------ */
.tray-token.tray-free {
position: relative;
}
.tray-token.tray-free.filled {
animation: a3-free-pop 420ms var(--ease-out) 380ms;
}
@keyframes a3-free-pop {
0% { transform: scale(1); }
45% { transform: scale(1.12); }
100% { transform: scale(1); }
}
/* Absolute, because .tray-token is a grid container and an
in-flow pseudo would push the word Free into a second row. */
.tray-token.tray-free::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(105deg,
rgba(227, 192, 133, 0) 35%,
rgba(227, 192, 133, .85) 50%,
rgba(227, 192, 133, 0) 65%);
background-size: 260% 100%;
background-position: 130% 0;
opacity: 0;
}
.tray-token.tray-free.filled::before {
animation: a3-free-glint 800ms var(--ease-soft) 500ms both;
}
@keyframes a3-free-glint {
0% {
background-position: 130% 0;
opacity: 0;
}
25% { opacity: 1; }
100% {
background-position: -30% 0;
opacity: 0;
}
}
@supports selector(:has(*)) {
.box-tray:has(.tray-free.filled)::after {
content: "";
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 2px;
pointer-events: none;
background: var(--gold-foil);
background-size: 220% 100%;
animation: a3-tray-foil 1200ms var(--ease-soft) 560ms both;
}
.box-tray:has(.tray-free.filled) .box-tray-label strong {
color: var(--accent-deep);
}
}
@keyframes a3-tray-foil {
0% {
opacity: 0;
background-position: 0% 0;
}
30% { opacity: 1; }
100% {
opacity: 1;
background-position: 100% 0;
}
}
/* Aside and sheet: the gift row glints once when it unlocks. */
.box-gift {
position: relative;
}
.box-gift::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(105deg,
rgba(227, 192, 133, 0) 35%,
rgba(227, 192, 133, .6) 50%,
rgba(227, 192, 133, 0) 65%);
background-size: 260% 100%;
background-position: 130% 0;
opacity: 0;
}
.box-gift[data-unlocked="true"]::after {
animation: a3-free-glint 900ms var(--ease-soft) 400ms both;
}
/* Fires when disabled is removed, which only happens at four of
four (box.js:187). At load the PHP ships the button disabled
(build-a-box.php:361), so this cannot fire on page load. */
.box-cta:not(:disabled) {
animation: a3-cta-arm 340ms var(--ease-out);
}
@keyframes a3-cta-arm {
0% { transform: scale(1); }
50% { transform: scale(1.02); }
100% { transform: scale(1); }
}
/* ------------------------------------------------------------
4 · The REMOVE path in the slot lists
------------------------------------------------------------
Observed: render() rebuilds every slot row from scratch on
every change (box.js:152-157), so a removed item's row does
not transition to empty, it is replaced by a new empty row.
No exit animation is possible without JS changes, and any
entrance hook on whole rows would replay across all rows on
every render, which reads as the panel flickering.
What is animated instead is the one element only empty rows
contain: the numbered circle. When a removal rebuilds the
list, the reopened slot's number breathes back in, which is
the visible undo. The cost accepted: on an add, the numbers
of the slots still empty replay the same soft fade, which
reads as the remaining count acknowledging the change. Filled
rows carry no .box-slot-token, so picked items never blink.
Plus one affordance: the X on a filled row turns crosswise a
quarter turn on hover, so the row telegraphs removal before
it is committed. Its colour shift is already in 30-box:146.
------------------------------------------------------------ */
.box-slot-token {
animation: a3-num-in 320ms var(--ease-soft) backwards;
}
@keyframes a3-num-in {
from { opacity: .2; }
}
.box-slot-x {
transition: transform 200ms var(--ease-out);
}
button.box-slot:hover .box-slot-x {
transform: rotate(90deg);
}
/* ------------------------------------------------------------
5 · The BOTTOM SHEET
------------------------------------------------------------
Observed: the sheet already slides from its trigger's edge
(30-box.css:330, translateY 102%), but it moves as one slab
with everything painted on, enter and exit take the same
300ms, and the JS unhides content 320ms after close
(box.js:296), so a slower exit would get display-noned mid
flight.
Enter is retimed to 320ms on the page's decelerating curve,
and the contents cascade up behind the slab in four steps, so
opening reads as the tray unpacking rather than a screenshot
arriving. Exit drops to 200ms, just over 60% of enter, which
both matches how dismissal should feel and clears the JS
cleanup timer with margin. The delays live only on the .open
state, so on exit the contents drop away in 120ms with no
stagger, the polite way to leave.
The chevron on the tray rotates to point down while the sheet
is up, keyed to aria-expanded (box.js:278 and 288), and dips
under the finger on press.
------------------------------------------------------------ */
.box-sheet {
transition: transform 200ms var(--ease-soft);
}
.box-sheet.open {
transition: transform 320ms var(--ease);
}
.box-scrim {
transition: opacity 160ms var(--ease-soft);
}
.box-scrim.show {
transition: opacity 260ms var(--ease-soft);
}
.box-sheet .box-sheet-head,
.box-sheet .box-slot-list,
.box-sheet .box-gift,
.box-sheet .box-cta {
opacity: 0;
transform: translateY(10px);
transition: opacity 120ms var(--ease-soft), transform 120ms var(--ease-soft);
}
.box-sheet.open .box-sheet-head,
.box-sheet.open .box-slot-list,
.box-sheet.open .box-gift,
.box-sheet.open .box-cta {
opacity: 1;
transform: none;
transition: opacity 260ms var(--ease-out), transform 300ms var(--ease-out);
}
.box-sheet.open .box-sheet-head { transition-delay: 40ms; }
.box-sheet.open .box-slot-list { transition-delay: 90ms; }
.box-sheet.open .box-gift { transition-delay: 130ms; }
.box-sheet.open .box-cta { transition-delay: 160ms; }
.box-tray-chev {
transition: transform 200ms var(--ease-soft);
}
.box-tray:active .box-tray-chev {
transform: translateY(2px);
}
/* The glyph inside is already rotated to point up (30-box:298);
turning the wrapper flips it to point down at the open sheet. */
.box-tray[aria-expanded="true"] .box-tray-chev {
transform: rotate(180deg);
}
/* Transform is already in the sitewide button transition set
(10-tokens.css:134), so a state alone is enough here. */
.box-sheet-close:active {
transform: scale(.88);
}
/* ------------------------------------------------------------
6 · FILTER CHIPS and the re-shown grid
------------------------------------------------------------
Observed: filtering sets card.hidden (box.js:259), which is
display none. Hiding cannot be animated from CSS without
holding the dying cards in layout past the click, and letting
both the leaving and the arriving set occupy the grid at once
makes the reflow churn worse than the jump it would soften,
so the hide stays instant on purpose. The reveal is where the
eye lands, and reveals CAN be animated: a card coming back
from display none gets a first-render frame, and
@starting-style supplies what that frame looks like.
The crossfade rides on the card's children rather than the
card, because section 7 permanently owns the card's own
opacity and transform where scroll timelines are supported,
and an animation silences a transition on the same property.
Even columns run 60ms behind odd, a checker stagger cheap
enough to read as a ripple instead of a popple. The same
frames run once at first paint, a quiet page entrance for
browsers that will not run section 7.
The pressed chip ticks. aria-pressed moves between chips
(box.js:253-255), the fill swap is 15-signature.css:238, and
the animation restarts because the selector match is new. The
All chip ships pressed (build-a-box.php:301) so one whisper
of a tick happens at load; at scale .94 for a quarter second
that is below the threshold of complaint.
------------------------------------------------------------ */
.box-grid .box-card-media,
.box-grid .box-card-body {
transition: opacity 260ms var(--ease-soft),
transform 260ms var(--ease-out),
filter 300ms var(--ease-soft);
}
.box-grid .box-card:nth-child(2n) .box-card-media,
.box-grid .box-card:nth-child(2n) .box-card-body {
transition-delay: 60ms;
}
@starting-style {
.box-grid .box-card-media,
.box-grid .box-card-body {
opacity: 0;
}
.box-grid .box-card-media {
transform: translateY(6px);
}
}
.box-filter .chip[aria-pressed="true"] {
animation: a3-chip-tick 240ms var(--ease-out);
}
@keyframes a3-chip-tick {
0% { transform: scale(.94); }
60% { transform: scale(1.02); }
100% { transform: none; }
}
/* ------------------------------------------------------------
7 · Scroll-driven entrance
------------------------------------------------------------
Tiles below the fold rise 16px and fade as they cross into
view, scrubbed by scroll, not time. Even columns complete a
little later than odd so rows arrive with a diagonal grain
instead of in ranks. The range ends well before the tile is
halfway in, so nothing sits half-faded above the tray line.
Cost, accepted knowingly: while this animation is applied its
fill holds the card's transform, so the .box-card:active
press scale from 10-tokens.css:128 stops applying on this
grid. The card surface takes no taps here, its actions are
the Add button and the COA link, both of which keep their own
press states, so what is lost is feedback on a dead surface.
Cards re-shown by a filter that are already inside the range
render at 100% progress, which is why section 6's crossfade
lives on the children and still runs.
------------------------------------------------------------ */
/* The scroll-driven entrance that used to live here is gone.
Measured on the live page at 375 after deploy: with the grid
scrolled so that cards 3 and 4 sat at 71px from the top, fully
inside the viewport, both were still reporting opacity 0, and
cards 5 and 6 with them. Only the first row ever resolved. The
view() progress was not advancing for those subjects, so the
keyframe's `from` state was what the page rendered, and the
`from` state was opacity 0.
That is the one failure this grid cannot absorb. build-a-box.php
paints the picker server-side on purpose, with its own comment
saying it must survive every script failing, and an entrance that
can hide the products is a worse outcome than no entrance at all.
The other layers in this build start their reveals at opacity .25
or higher for exactly this reason; this one started at 0.
It is deleted rather than repaired because the repair is not worth
what it buys. The picker is a grid of photographs the buyer came
to look at. It should be there when they arrive. Everything else
in this file, the add moment, the slot fill, the completion beat,
the sheet and the filter crossfade, is untouched and all of it is
driven by state the JS actually sets rather than by scroll. */
/* ------------------------------------------------------------
8 · Motion off
------------------------------------------------------------
Every animation and transition this file introduces, stilled.
A media query adds no specificity, so a flat low-specificity
list here would lose to the very state rules it is meant to
silence; each override below therefore restates the exact
selector of the rule it stills, and wins on source order
alone. The :has() restatements sit in their own @supports so
a parser without :has() cannot invalidate the plain list.
States keep their values because nothing in this file relies
on an animation fill to stay visible: sheet contents are
opacity 1 under .open, the completion hairline rests at
opacity 1 with its shimmer removed, the glints rest at 0, and
the chevron still flips (instantly) while the sheet is open.
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.box-grid .box-add.in-cart,
.box-grid .box-card-media::after,
.box-grid .box-card-media,
.box-grid .box-card-body,
.box-grid .box-card,
.tray-token:not(.tray-free):not(.filled),
.tray-token.filled:not(.tray-free),
.tray-token.tray-free.filled,
.tray-token.tray-free.filled::before,
.box-gift[data-unlocked="true"]::after,
.box-cta:not(:disabled),
.box-slot-token,
.box-slot-x,
.box-scrim,
.box-scrim.show,
.box-sheet,
.box-sheet.open,
.box-sheet .box-sheet-head,
.box-sheet .box-slot-list,
.box-sheet .box-gift,
.box-sheet .box-cta,
.box-sheet.open .box-sheet-head,
.box-sheet.open .box-slot-list,
.box-sheet.open .box-gift,
.box-sheet.open .box-cta,
.box-tray-chev,
.box-filter .chip[aria-pressed="true"] {
animation: none;
transition: none;
}
.box-tray:active .box-tray-chev,
.box-sheet-close:active {
transform: none;
}
@supports selector(:has(*)) {
.box-grid .box-card:has(.box-add.in-cart) .box-card-media > :first-child,
.box-tray:has(.tray-free.filled)::after {
animation: none;
transition: none;
}
}
}
/* ============================================================
A4 · Motion system, scroll and chrome
------------------------------------------------------------
The sitewide layer: the vocabulary the surface files share,
the scroll-driven reveal path, the header on scroll, the cart
badge, drawer exit timing, section rhythm, anchor offsets,
overscroll containment and cross-document view transitions.
Loads last: build.sh sorts parts by codepoint, digits sort
before uppercase, so A4- lands after 99-mobile.css and wins
every tie against the whole system. Everything in this file
therefore only ADDS states and timing. It never restates a
z-index, a height, a padding an earlier part fixed (the one
padding rule in section A4.6 is a deliberate, measured
normalisation, recorded there), and no declaration in it is flagged important.
Division of labour with the other motion files: A1 owns
.hero-v6, A2 owns the product card, the home rail and
.product-grid.reveal-group. This file owns everything generic:
bare .reveal, every .reveal-group that is not the product
grid, and the page chrome. A surface file that needs to retune
a specific group outranks this layer by adding one element
type or class to its selector, exactly as A2 already does.
Hard rules obeyed throughout: only transform, opacity, filter,
backdrop-filter and background-position are ever animated;
translates are Y-only so nothing can widen the page at 375px;
every moving thing is answered in the motion-off block at the
end of the file.
============================================================ */
/* ============================================================
A4.1 · The vocabulary
------------------------------------------------------------
The system already speaks with a small set of numbers; this
block names them so the next file reaches for a word instead
of a number. Nothing below invents a new value: each token is
an existing, shipped duration observed in the cascade.
Durations:
enter 520ms the reveal transition (styles.css:789). The
longest thing the site does; content arriving
is allowed to take its time.
exit 340ms roughly 65% of enter. Exits must be faster
than entrances: the user has already decided
to leave, and matching the enter duration on
the way out reads as the page dragging its
feet. Nothing shipped uses this number yet;
it is the pair rule, stated once.
sheet 300ms the drawer slide, --dur (styles.css:779,
used at styles.css:809 and :958).
sheet-exit 210ms 70% of sheet, applied in A4.5 below.
press 90ms contact feedback, set by A2 for the card
press (A2-motion-cards.css:75). Press-in is
nearly instant; release rides the base 200ms.
pop 360ms a badge or counter announcing a change.
sweep 1100ms a foil or light pass (A1's headline glint,
A1-motion-hero.css:347). Decorative sweeps
are the only thing allowed to run over a
second, and only ever once.
ui 200ms already tokenised as --dur-ui with --motion
(10-tokens.css:34); listed for completeness.
Easings, all shipped, none new:
--ease cubic-bezier(.32,.72,0,1) weight settling,
sheets and reveals (styles.css:778).
--ease-out cubic-bezier(.22,1,.36,1) entrances and
lifts (styles.css:1366).
--ease-soft cubic-bezier(.4,0,.2,1) state changes, the
4,966-use pairing (styles.css:1367,
10-tokens.css:31).
No spring, no bounce, anywhere: the brand brief is weight and
glass, and glass does not overshoot by more than a hair.
============================================================ */
:root {
--a4-enter: 520ms;
--a4-exit: 340ms;
--a4-sheet: var(--dur);
--a4-sheet-exit: 210ms;
--a4-press: 90ms;
--a4-pop: 360ms;
--a4-sweep: 1100ms;
}
/* ============================================================
A4.2 · Scroll-driven reveals
------------------------------------------------------------
The shipped system is three cooperating pieces:
styles.css:789 and :1663 the .reveal / .reveal-group > *
transitions, waiting at opacity
0 and translateY(14 or 16px);
styles.css:2062-2067 the waiting state gated behind
html.js so failed JS can never
blank the page (header.php:27
sets the class inline);
main.js:980-1007 the IntersectionObserver adding
.in, plus a no-observer fallback
at main.js:984 and a 3 second
failsafe at main.js:995.
Where the browser has scroll-driven animations, this section
replaces time with position: an element animates by where it
stands in the viewport, so a mid-page refresh renders every
visible element already settled, entrance progress tracks the
finger exactly, and nothing ever waits on an observer.
How the two paths avoid double-animating: inside the
@supports gate the JS waiting state is neutralised (restated
at equal or higher specificity; this file loads after
styles.css:2066-2067, so the tie resolves here). From then on
the .in class that main.js keeps adding is visually a no-op:
the transitioned properties' underlying values never change,
so the transition has no delta to run, and the scroll
animation alone owns the entrance. Outside the gate nothing
here applies and the shipped JS path runs exactly as before.
Two inherited techniques, both load-bearing, both from A2
(A2-motion-cards.css:277-283): the "to" keyframe omits
transform, so at full progress the animation stops holding it
and hover or press transforms on the same element keep
working (a scroll animation never "ends"); and the entrance
starts at opacity .25, never 0, so even a frame frozen by a
stalled timeline is readable. The group timeline below lives
on the group element, which always sits in the root scroller,
so children of the two horizontal rails that carry
reveal-group (.rel-rail, 40-plp-home.css:1081; .ru-rail,
60-chrome.css:685) are driven by their rail's vertical
position and never by the rail's own inline scroller. That is
what keeps every timeline in this section provably active.
Ranges are percentages of entry, not time delays, because
time delays do not apply to progress-based timelines. Entry
is safe for any element height: for a subject taller than the
viewport, entry 100% resolves at contain 0%, the moment the
subject's top reaches the top of the screen, so the range
always completes within one screen of scrolling.
.product-grid.reveal-group is excluded everywhere: A2 already
drives it per-card (A2-motion-cards.css:315-333) and its own
neutraliser covers it.
============================================================ */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
/* The waiting states, retired on this path. */
.js .reveal:not(.in) {
opacity: 1;
transform: none;
}
.js .reveal-group:not(.product-grid):not(.in) > * {
opacity: 1;
transform: none;
}
/* Single reveals ride their own position. */
.reveal {
animation: a4-rise linear both;
animation-timeline: view(block);
animation-range: entry 0% entry 60%;
}
/* Groups share one timeline, the group's own, and stagger
by range offset: each child starts 8% of entry later and
finishes on the same slope. The cap at nth-child(6)
matches the JS path's cap so both paths read as the same
choreography, and no child in a long list is ever left
waiting: by entry 90% the whole set is settled. */
.reveal-group:not(.product-grid) {
view-timeline-name: --a4-grp;
view-timeline-axis: block;
}
.reveal-group:not(.product-grid) > * {
animation: a4-rise linear both;
animation-timeline: --a4-grp;
animation-range: entry 0% entry 50%;
}
.reveal-group:not(.product-grid) > :nth-child(2) {
animation-range: entry 8% entry 58%;
}
.reveal-group:not(.product-grid) > :nth-child(3) {
animation-range: entry 16% entry 66%;
}
.reveal-group:not(.product-grid) > :nth-child(4) {
animation-range: entry 24% entry 74%;
}
.reveal-group:not(.product-grid) > :nth-child(5) {
animation-range: entry 32% entry 82%;
}
.reveal-group:not(.product-grid) > :nth-child(n + 6) {
animation-range: entry 40% entry 90%;
}
}
}
@keyframes a4-rise {
from { opacity: .25; transform: translateY(14px); }
to { opacity: 1; }
}
/* ------------------------------------------------------------
A4.2b · The JS path's stagger, capped
------------------------------------------------------------
styles.css:1665-1670 delays group children at 70ms steps and
stops writing delays at nth-child(6), so in any group longer
than six the seventh child inherits 0ms and fires BEFORE
children two through six. A2 recorded the fault for the shop
grid (A2-motion-cards.css:255-263) and fixed it there; the
same fault is live for every other long group, the partner
check-list (inc/partner.php:462) being the clearest case.
One rule makes the order monotonic sitewide: everything from
seven on shares the cap the sixth child already set. Equal
specificity with the base rules, later in the cascade, so it
wins; A2's grid delays are more specific and keep their own
tuning.
------------------------------------------------------------ */
.reveal-group.in > :nth-child(n + 7) {
transition-delay: 350ms;
}
/* ============================================================
A4.3 · The header earns its shadow
------------------------------------------------------------
60-chrome.css:42 designed a scrolled state for the header, a
soft separation shadow under .site-header.is-scrolled, and
its comment assumes "chrome.js toggles the class". No such
file exists: the theme ships main.js, cart.js, box.js, pdp.js
and checkout.js, and none of them writes is-scrolled, so the
shadow has never fired. Verified by grepping every asset.
Rebuilt here in pure CSS. A pseudo-element carries the exact
shadow the design intended, at opacity 0, and a scroll()
timeline fades it in across the first hundred pixels of
scroll, which is about the distance the 89px promo band takes
to pass underneath (99-mobile.css:188 measured the band at
375px; the verified mobile pass leaves it at 89px). Only
opacity animates; the shadow itself is a static declaration.
The pseudo sits at z-index -1 inside the header's own
stacking context (styles.css:96 makes the header sticky at
z-index 50), so it paints above the page but under the
header's controls, and pointer-events: none keeps it inert.
At rest the range starts at 8px, not 0, so rubber-band
overscroll at the top of the page cannot flicker it.
If a chrome.js ever appears and starts toggling is-scrolled,
the two shadows would stack; whoever adds it should delete
this block in the same change.
============================================================ */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: scroll()) {
.site-header::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
box-shadow: 0 1px 0 rgba(28, 25, 23, .03), 0 4px 16px rgba(28, 25, 23, .07);
opacity: 0;
animation: a4-header-shade linear both;
animation-timeline: scroll(root block);
animation-range: 8px 96px;
}
}
}
@keyframes a4-header-shade {
from { opacity: 0; }
to { opacity: 1; }
}
/* ============================================================
A4.4 · The cart badge lands with weight
------------------------------------------------------------
The badge is #cartCount.cart-count (header.php:115), hidden
until it has something to say: styles.css:130 sets display:
none and styles.css:139 flips it to flex under .has-items.
Two writers toggle that class: main.js:295 on load, from the
halotir_cart_count cookie, and main.js:476 after any cart
mutation. classList.toggle with a force argument only mutates
when the state actually changes, so this animation fires
exactly when the badge goes from absent to present: first
item added, and on landing with a non-empty cart. A count
moving 2 to 3 repaints textContent only, which CSS cannot
see, and re-popping on every quantity tick would read as
nagging anyway; the drawer already confirms those.
The scale settles through 1.08, the same restraint as A2's
quick-add settle (A2-motion-cards.css:241, peak 1.015 from a
pressed start): a hair of overshoot to feel physical, nothing
that reads as bounce. Ends on scale(1) with no fill so the
underlying state is exactly the shipped one.
============================================================ */
.cart-count.has-items {
animation: a4-badge-pop var(--a4-pop) var(--ease-out);
}
@keyframes a4-badge-pop {
0% { opacity: 0; transform: scale(.55); }
70% { opacity: 1; transform: scale(1.08); }
100% { transform: scale(1); }
}
/* ============================================================
A4.5 · Sheets leave faster than they arrive
------------------------------------------------------------
Both drawers slide on transform over --dur 300ms
(styles.css:809 cart, :958 nav) in BOTH directions, and a
symmetric close is the single clearest "the UI is slow" tell:
opening is an arrival and may take its time, closing is the
user asking to have their page back. Transitions read their
timing from the destination state, so putting a shorter
duration on the closed state changes only the close. 210ms is
70% of the open, the exit rule from A4.1 applied.
main.js:183-188 keeps the panel in the tree for 320ms after
removing .open before setting hidden; a 210ms slide is long
gone by then, so the earlier finish costs nothing. The
backdrop already runs 180ms (styles.css:796) and needs no
help.
============================================================ */
.cart-drawer:not(.open),
.nav-drawer:not(.open) {
transition-duration: var(--a4-sheet-exit);
}
/* ============================================================
A4.6 · Section rhythm at 375
------------------------------------------------------------
Read from the cascade, mobile values, top padding then
bottom:
.hero-v6 44 / 52 40-plp-home.css:636
.section-v6 44 / 44 styles.css:1646
.hfaq-section 44 / 48 40-plp-home.css:817
.rel-section 44 / 48 40-plp-home.css:1066
.ofact-section 44 / 48 40-plp-home.css:1171
.ru-section 44 / 52 60-chrome.css:642
The top edge is unanimous at 44px, which is why the page
already scans as one system on the way down. The bottoms run
48 to 52 except .section-v6 at 44, the one section class that
appears between the others on the home page (front-page.php
156, 302, 359), so the home page alternates 44 and 48 gaps
for no reason a reader could name. Normalised to the 48px the
three purpose-built sections agreed on. Scoped to the phone
breakpoint: at 1024px and up styles.css:1704 sets 68px and
that desktop decision is left exactly alone.
============================================================ */
@media (max-width: 767px) {
.section-v6 {
padding-bottom: 48px;
}
}
/* ============================================================
A4.7 · Anchors land clear of the header
------------------------------------------------------------
The chrome above a page at load is 154px at 375px: the 65px
sticky header plus the 89px promo band. Only the header
STAYS: grep across styles.css and every part shows no sticky
or fixed rule for .promo-bar or .announce, so by the time an
anchor jump lands, the band has scrolled away and the header
is the only thing an anchor can hide under.
Coverage before this rule: 60-chrome.css:335 offsets
.faq-cat and .prose h2, which carries every doc-toc target
(doc-nav.php:150 builds the list from .prose h2 ids,
page.php:97 applies .prose). What it misses is every other
id on the site, and at least one is a live in-page link
today: the PDP's "Request COA" button (functions.php:1140)
jumps to id="certificate" (functions.php:1238), a bare .wrap
with no offset, so the certificate panel lands with its head
under the header. An attribute selector closes the class of
bug rather than the instance: scroll-margin only ever acts
during anchor and :target scrolling, it cannot move layout,
and no theme script calls scrollIntoView (verified across
every script in assets; checkout.js:112 computes its own scrollTo top),
so a blanket rule is safe. At (0,1,0) it loses to the tuned
.prose h2 rule on specificity, which keeps the shipped doc
pages exactly as verified.
16px of breathing room past --header-h (64px, styles.css:42;
the rendered 65px includes the 1px border) puts a jumped-to
heading 15px clear of the hairline.
============================================================ */
[id] {
scroll-margin-top: calc(var(--header-h) + 16px);
}
/* ============================================================
A4.8 · Scroll stays where the finger put it
------------------------------------------------------------
Nested scrollers, both axes. Vertically: reaching the end of
the nav drawer's link list (.nd-links, styles.css:964), the
cart drawer body (.cd-body, styles.css:828) or the age gate
(.age-gate, built at main.js:83,
scrolling per styles.css:629) must not hand the remaining
momentum to the page behind the scrim; body scrolling is
locked while a drawer is open (styles.css:800) but the gate
locks via its own class and iOS chains enthusiastically
either way. Horizontally: the four full-bleed snap rails
named at 10-tokens.css:107-112 plus the two rail-shaped
reveal groups (.rel-rail, 40-plp-home.css:1081; .ru-rail,
60-chrome.css:685) should swallow the end-of-rail bounce
rather than let a hard flick start navigating the page.
Contain, not none: the rubber-band inside the scroller is
kept, only the chaining is cut.
============================================================ */
.nd-links,
.cd-body,
.age-gate {
overscroll-behavior-y: contain;
}
.rail,
.chip-row,
.cat-pills,
.hero-trust,
.rel-rail,
.ru-rail {
overscroll-behavior-x: contain;
}
/* ============================================================
A4.9 · Cross-document view transitions
------------------------------------------------------------
Judged safe here, enabled, and the judgement is recorded:
LiteSpeed's public page cache is a non-issue: the transition
is composed entirely on the client between two same-origin
documents, cached or not, and both documents carry this
stylesheet, which is the only opt-in the feature needs. The
fixed chrome is the real question. The header is sticky and
identical on every page, so it gets a view-transition-name:
snapshotted as its own group, it holds perfectly still while
the root crossfades beneath it, which is precisely the
app-like read a multi-page store wants. The promo band and
the announce strip are NOT named: header.php renders one or
the other from a sitewide option so consecutive pages always
agree, both sit in normal flow at the top of the root
snapshot, and identical pixels crossfading into identical
pixels is indistinguishable from stillness. Naming them would
buy nothing and costs a failure mode: a duplicate
view-transition-name on one page skips the transition
entirely.
Checkout is the one asymmetric hop: header.php:42 swaps the
whole chrome for the focus header, so site-header exists on
one side only and the header simply crossfades away with the
root group. Acceptable, and arguably correct for entering a
focused flow.
The crossfade runs at --dur-ui, the system's 200ms, rather
than the UA default: page-to-page should feel like a state
change, not a scene change. The whole feature sits inside
the reduced-motion query, so those users keep instant
navigations; browsers without the at-rule ignore all of it.
============================================================ */
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
}
.site-header {
view-transition-name: site-header;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: var(--dur-ui);
}
::view-transition-group(site-header) {
animation-duration: var(--dur-ui);
}
}
/* ============================================================
A4.10 · Motion off
------------------------------------------------------------
Everything this file animates, answered, plus one repair the
system has needed since v6. The base sheet's global nuke
(styles.css:746) collapses every duration to .01ms, but it
cannot stop scroll-driven animations, whose progress comes
from position, not time, so A4.2 and A4.3 are switched off
by the media queries wrapping them AND re-answered here as
belt and braces.
The repair: under reduced motion the base guards at
styles.css:791 and :1671 try to force reveals visible, but
both are outspecified by the .js waiting states at
styles.css:2066-2067, so a reduced-motion user still gets
content that is INVISIBLE until the observer notices it,
flipping in 8% above the fold's edge. A2 fixed this for the
shop grid only (A2-motion-cards.css:421 onward, its own
comment records the same diagnosis). Restating the
neutralisers here at winning specificity settles it
sitewide: for reduced motion the content is simply present,
observer or no observer. The delay reset is then strictly
redundant, and kept anyway so no future change to the
waiting states can quietly bring back a 350ms ripple of
.01ms flickers.
============================================================ */
@media (prefers-reduced-motion: reduce) {
.reveal,
.reveal-group > * {
animation: none;
}
.js .reveal:not(.in) {
opacity: 1;
transform: none;
}
.js .reveal-group:not(.in) > * {
opacity: 1;
transform: none;
}
.reveal-group.in > :nth-child(n) {
transition-delay: 0s;
}
.site-header::after {
animation: none;
}
.cart-count.has-items {
animation: none;
}
}
/* ============================================================
v7 · A5 · Decorative graphics system
------------------------------------------------------------
The pages are typographically strong but the panels between
sections are bare flat colour, and nothing on the site says
"lab" except the product photography. This file gives the
brand a small visual vocabulary. Five marks, used quietly:
1. CHROMATOGRAM TRACE. The HPLC output that backs the
purity claim, drawn as a fine line with one dominant
peak. A full-width strip-chart feed runs along the foot
of the dark verification panel, and a 64px mini trace
signs off every v6 section head, the way an instrument
signs a report.
2. PURITY ARC. A ring gauge closed to within a few degrees,
so it reads as "all but complete" without printing a
measured number the copy does not print.
3. MOLECULAR LATTICE. A diamond mesh with hollow nodes,
very fine stroke, used as a field behind hero and panel
surfaces, never as an illustration.
4. LOT GRID. Rows of small ledger marks, ticks, dots and
the odd filled square, suggesting documented lots. Ambient
texture for the flat tinted bands.
5. GRAIN. feTurbulence film grain so large flat panels stop
banding and stop reading as raw hex fill. Foil-toned dust
on dark panels, ink-toned on light bands.
Every mark is an inline data: URI, deliberately. build.sh has
no sync step for images/deco/ (it copies only the wordmark,
the icon set and the vial cutouts), and the concatenated parts
are also served as css/v7.css on the static reference site,
where a ../images/deco/ path would resolve to a directory that
does not exist there. Inlining removes both failure modes. The
editable sources live in woocommerce/halotir-theme/images/deco/
and each URI below names the source it was encoded from.
Recolouring: the line marks are applied as CSS masks (the same
technique the wordmark already uses), so one URI serves every
surface and the colour comes from background-color, which can
be a token or a gradient fade. Only the two grain tiles carry
baked colour, because noise needs its own alpha ramp. Literal
colours used inside URIs and gradients, and the token each one
is: #1c1917 is --ink, #a16207 is --accent, #e3c085 is the mid
stop of --gold-foil.
Contrast, computed (WCAG relative luminance, not eyeballed):
white text over the trace at .22 on the light end of the
verify gradient: 9.39:1
white text over the arc at .18 on ink: 11.67:1
footer #a8a29e over foil grain at .05 on ink: 6.32:1
--ink-2 over the lot field at .05 on --tint: 6.63:1
--muted over the lot field at .03 on white: 4.52:1
The page-head field is capped at .03 for exactly that last
pairing; at .04 it computes 4.44 and fails.
What this file trades away: no glass-caustic wash (a sixth
motif would dilute the five that earn their place), nothing on
the home hero (it already carries halo, collage and vial
layers from A1), and no decoration on cart, checkout or the
auth head, which are working chrome above forms.
Load order: A5 sorts after 99-mobile.css, so ties resolve here.
Stacking pattern used throughout: the wrapper gets
isolation: isolate, the pseudo gets z-index: -1, which places
the mark above the wrapper's own background and below all of
its in-flow content without touching global z-index. Where the
base already lifts children (.verify-panel > *, .promo-panel
> *), the pseudo stays at z-index auto and no isolation is
needed. Every decorative layer is pointer-events: none.
============================================================ */
/* ---------- 1a. The section-head signature ----------
A 64px chromatogram tick under every v6 section head. One
dominant peak, two shoulders, drawn in accent gold. This is
the systemic mark: it appears wherever a section introduces
itself, so the lab motif travels with the type instead of
living on one page. Decoration only; the head says what the
section is, the trace just signs it.
Attached to markup that exists:
front-page.php:159, front-page.php:304
inc/home-proof.php:86, inc/home-proof.php:186
inc/partner.php:362, 401, 429, 458, 502
inc/research.php:87, inc/research.php:114
inc/build-a-box.php:293, inc/build-a-box.php:409 */
.section-head-v6::after {
content: "";
display: block;
width: 64px;
height: 14px;
margin-top: 10px;
background-color: var(--accent);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2014'%20width='64'%20height='14'%3E%3Cpath%20fill='none'%20stroke='currentColor'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M1%2012%20L14%2012%20Q17%2012%2018.5%209.5%20Q20%207%2021.5%209.5%20Q23%2012%2026%2012%20L34%2012%20Q37%2012%2038.5%203.5%20Q40%201.4%2041.5%203.5%20Q43%2012%2046%2012%20L52%2012%20Q54%2012%2055.5%2010.5%20Q57%209%2058.5%2010.5%20Q60%2012%2063%2012'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2014'%20width='64'%20height='14'%3E%3Cpath%20fill='none'%20stroke='currentColor'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M1%2012%20L14%2012%20Q17%2012%2018.5%209.5%20Q20%207%2021.5%209.5%20Q23%2012%2026%2012%20L34%2012%20Q37%2012%2038.5%203.5%20Q40%201.4%2041.5%203.5%20Q43%2012%2046%2012%20L52%2012%20Q54%2012%2055.5%2010.5%20Q57%209%2058.5%2010.5%20Q60%2012%2063%2012'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 64px 14px;
mask-size: 64px 14px;
opacity: .9;
pointer-events: none;
}
/* ---------- 1b. The strip-chart feed ----------
The full trace, on the one panel that talks about testing:
the dark "every lot is verified" panel on the research page
(inc/research.php:54). It runs along the panel foot as a
repeating 480px tile and creeps left like chart paper coming
off an instrument, 480px every 64 seconds, slow enough to
read as an idle recorder rather than as a marquee. The panel
already has position: relative and overflow: hidden
(styles.css:1849) and lifts its children to z-index 1
(styles.css:1859), so the pseudo needs no z-index of its own.
Transform only, so the loop composites; the tile starts and
ends flat on the baseline, so the repeat has no seam. */
.verify-panel::after {
content: "";
position: absolute;
left: -480px;
bottom: 4px;
width: calc(100% + 960px);
height: 96px;
background-color: #e3c085;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20480%2096'%20width='480'%20height='96'%3E%3Cpath%20fill='none'%20stroke='currentColor'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M0%2084%20L34%2084%20Q40%2084%2043%2080%20Q46%2076%2049%2080%20Q52%2084%2058%2084%20L96%2084%20Q104%2084%20108%2072%20Q112%2060%20117%2060%20Q122%2060%20126%2072%20Q130%2084%20138%2084%20L166%2084%20Q172%2084%20175%2078%20Q178%2072%20181%2078%20Q184%2084%20190%2084%20L216%2084%20Q224%2084%20228%2046%20Q231%2012%20236%2010%20Q241%2012%20244%2046%20Q248%2084%20256%2084%20L292%2084%20Q300%2084%20304%2064%20Q308%2046%20313%2046%20Q318%2046%20322%2064%20Q326%2084%20334%2084%20L372%2084%20Q378%2084%20381%2079%20Q384%2074%20387%2079%20Q390%2084%20396%2084%20L432%2084%20Q438%2084%20441%2081%20Q444%2078%20447%2081%20Q450%2084%20456%2084%20L480%2084'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20480%2096'%20width='480'%20height='96'%3E%3Cpath%20fill='none'%20stroke='currentColor'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M0%2084%20L34%2084%20Q40%2084%2043%2080%20Q46%2076%2049%2080%20Q52%2084%2058%2084%20L96%2084%20Q104%2084%20108%2072%20Q112%2060%20117%2060%20Q122%2060%20126%2072%20Q130%2084%20138%2084%20L166%2084%20Q172%2084%20175%2078%20Q178%2072%20181%2078%20Q184%2084%20190%2084%20L216%2084%20Q224%2084%20228%2046%20Q231%2012%20236%2010%20Q241%2012%20244%2046%20Q248%2084%20256%2084%20L292%2084%20Q300%2084%20304%2064%20Q308%2046%20313%2046%20Q318%2046%20322%2064%20Q326%2084%20334%2084%20L372%2084%20Q378%2084%20381%2079%20Q384%2074%20387%2079%20Q390%2084%20396%2084%20L432%2084%20Q438%2084%20441%2081%20Q444%2078%20447%2081%20Q450%2084%20456%2084%20L480%2084'/%3E%3C/svg%3E");
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
-webkit-mask-size: 480px 96px;
mask-size: 480px 96px;
-webkit-mask-position: 0 bottom;
mask-position: 0 bottom;
opacity: .22;
pointer-events: none;
will-change: transform;
animation: a5-chart-feed 64s linear infinite;
}
@keyframes a5-chart-feed {
to { transform: translateX(-480px); }
}
/* ---------- 2. The purity arc ----------
A ring gauge stroked through all but 18 degrees, with a dot
terminator where the stroke stops. It reads as "nearly the
whole circle" without printing a figure, which matters: the
panel's own copy carries the real numbers, and this mark must
never claim one. Placed once, on the partner page's dark
proof card (inc/partner.php:367), the panel whose whole job
is a single hero figure; the arc haloes that figure from the
top-right corner. The card has position: relative and
overflow: hidden but does not lift its children
(15-signature.css), so it gets the isolation pattern. Its
existing ::before is the foil top rule; the arc takes the
free ::after. */
.proof-card {
isolation: isolate;
}
.proof-card::after {
content: "";
position: absolute;
top: -46px;
right: -58px;
width: 230px;
height: 230px;
z-index: -1;
background-color: #e3c085;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20240%20240'%20width='240'%20height='240'%3E%3Cpath%20fill='none'%20stroke='currentColor'%20stroke-width='3'%20stroke-linecap='round'%20d='M129%2016.4%20A104%20104%200%201%201%2096.6%2018.7'/%3E%3Ccircle%20cx='129'%20cy='16.4'%20r='4'%20fill='currentColor'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20240%20240'%20width='240'%20height='240'%3E%3Cpath%20fill='none'%20stroke='currentColor'%20stroke-width='3'%20stroke-linecap='round'%20d='M129%2016.4%20A104%20104%200%201%201%2096.6%2018.7'/%3E%3Ccircle%20cx='129'%20cy='16.4'%20r='4'%20fill='currentColor'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
opacity: .18;
transform: rotate(14deg);
pointer-events: none;
}
/* ---------- 3. The molecular lattice ----------
A 72px diamond mesh with hollow nodes at the intersections.
One inscribed diamond per tile is all it takes: tiled, the
edges join into a continuous diagonal lattice and the corner
nodes complete each other across tile seams. It is a field,
not a picture, so it always arrives through a gradient fade
rather than at full strength, and the fade IS the colour
layer: the pattern comes from the mask, the ink and its decay
come from the background gradient underneath it. */
/* Partner hero (inc/partner.php:317, full bleed, bare gradient
ground from styles.css:1100). Lattice falls from the top of
the band and is gone before the stat strip. */
.partner-hero {
position: relative;
isolation: isolate;
}
.partner-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: linear-gradient(200deg, rgba(28, 25, 23, .06), rgba(28, 25, 23, 0) 62%);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2072%2072'%20width='72'%20height='72'%3E%3Cpath%20fill='none'%20stroke='currentColor'%20stroke-width='1'%20d='M36%200%20L72%2036%20L36%2072%20L0%2036%20Z'/%3E%3Cg%20fill='none'%20stroke='currentColor'%20stroke-width='1'%3E%3Ccircle%20cx='36'%20cy='0'%20r='2.6'/%3E%3Ccircle%20cx='72'%20cy='36'%20r='2.6'/%3E%3Ccircle%20cx='36'%20cy='72'%20r='2.6'/%3E%3Ccircle%20cx='0'%20cy='36'%20r='2.6'/%3E%3C/g%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2072%2072'%20width='72'%20height='72'%3E%3Cpath%20fill='none'%20stroke='currentColor'%20stroke-width='1'%20d='M36%200%20L72%2036%20L36%2072%20L0%2036%20Z'/%3E%3Cg%20fill='none'%20stroke='currentColor'%20stroke-width='1'%3E%3Ccircle%20cx='36'%20cy='0'%20r='2.6'/%3E%3Ccircle%20cx='72'%20cy='36'%20r='2.6'/%3E%3Ccircle%20cx='36'%20cy='72'%20r='2.6'/%3E%3Ccircle%20cx='0'%20cy='36'%20r='2.6'/%3E%3C/g%3E%3C/svg%3E");
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
-webkit-mask-size: 72px 72px;
mask-size: 72px 72px;
pointer-events: none;
}
/* Light promo panels (front-page.php:452, inc/partner.php:569).
The sage panel is the flattest surface on the front page; the
dark twin beside it already carries the vial rain. Children
are lifted to z-index 2 by styles.css:1631, so the pseudo
stays at auto. */
.promo-panel.p-light::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(235deg, rgba(28, 25, 23, .07), rgba(28, 25, 23, 0) 58%);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2072%2072'%20width='72'%20height='72'%3E%3Cpath%20fill='none'%20stroke='currentColor'%20stroke-width='1'%20d='M36%200%20L72%2036%20L36%2072%20L0%2036%20Z'/%3E%3Cg%20fill='none'%20stroke='currentColor'%20stroke-width='1'%3E%3Ccircle%20cx='36'%20cy='0'%20r='2.6'/%3E%3Ccircle%20cx='72'%20cy='36'%20r='2.6'/%3E%3Ccircle%20cx='36'%20cy='72'%20r='2.6'/%3E%3Ccircle%20cx='0'%20cy='36'%20r='2.6'/%3E%3C/g%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2072%2072'%20width='72'%20height='72'%3E%3Cpath%20fill='none'%20stroke='currentColor'%20stroke-width='1'%20d='M36%200%20L72%2036%20L36%2072%20L0%2036%20Z'/%3E%3Cg%20fill='none'%20stroke='currentColor'%20stroke-width='1'%3E%3Ccircle%20cx='36'%20cy='0'%20r='2.6'/%3E%3Ccircle%20cx='72'%20cy='36'%20r='2.6'/%3E%3Ccircle%20cx='36'%20cy='72'%20r='2.6'/%3E%3Ccircle%20cx='0'%20cy='36'%20r='2.6'/%3E%3C/g%3E%3C/svg%3E");
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
-webkit-mask-size: 72px 72px;
mask-size: 72px 72px;
pointer-events: none;
}
/* Footer (footer.php:30). The largest dark slab on every page.
Foil-toned lattice falling from under the gold border-image,
spent before the link columns, so link text never sits on it
at more than a whisper. Computed pairing above: 6.32:1 even
if it did. */
.site-footer {
position: relative;
isolation: isolate;
}
.site-footer::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 220px;
z-index: -1;
background-image: linear-gradient(180deg, rgba(227, 192, 133, .07), rgba(227, 192, 133, 0) 85%);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2072%2072'%20width='72'%20height='72'%3E%3Cpath%20fill='none'%20stroke='currentColor'%20stroke-width='1'%20d='M36%200%20L72%2036%20L36%2072%20L0%2036%20Z'/%3E%3Cg%20fill='none'%20stroke='currentColor'%20stroke-width='1'%3E%3Ccircle%20cx='36'%20cy='0'%20r='2.6'/%3E%3Ccircle%20cx='72'%20cy='36'%20r='2.6'/%3E%3Ccircle%20cx='36'%20cy='72'%20r='2.6'/%3E%3Ccircle%20cx='0'%20cy='36'%20r='2.6'/%3E%3C/g%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2072%2072'%20width='72'%20height='72'%3E%3Cpath%20fill='none'%20stroke='currentColor'%20stroke-width='1'%20d='M36%200%20L72%2036%20L36%2072%20L0%2036%20Z'/%3E%3Cg%20fill='none'%20stroke='currentColor'%20stroke-width='1'%3E%3Ccircle%20cx='36'%20cy='0'%20r='2.6'/%3E%3Ccircle%20cx='72'%20cy='36'%20r='2.6'/%3E%3Ccircle%20cx='36'%20cy='72'%20r='2.6'/%3E%3Ccircle%20cx='0'%20cy='36'%20r='2.6'/%3E%3C/g%3E%3C/svg%3E");
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
-webkit-mask-size: 72px 72px;
mask-size: 72px 72px;
pointer-events: none;
}
/* ---------- 4. The lot grid ----------
A 96px ledger tile: short rules, dots, an outlined square, a
filled one. Rows of documented lots, abstracted until it is
texture. Nothing in it means anything, which is the point;
the moment a mark like this looks like data, somebody reads
it. */
/* Shortcode page heads: the research library head
(inc/research.php:49) and the build-a-box head
(inc/build-a-box.php:259). Both render inside page.php's
.wrap, unlike the cart and checkout heads, which are sections
CONTAINING a .wrap, so `.wrap .page-head` selects exactly the
two decorated heads and leaves working chrome alone. The auth
head (inc/phone-auth.php:466) also lands inside a wrap and is
excluded by class. Capped at .03 ink for the --muted pairing
computed in the header. */
.wrap .page-head:not(.auth-head) {
position: relative;
isolation: isolate;
}
.wrap .page-head:not(.auth-head)::after {
content: "";
position: absolute;
top: 10px;
right: 0;
bottom: 10px;
width: min(46%, 300px);
z-index: -1;
background-image: linear-gradient(250deg, rgba(28, 25, 23, .03), rgba(28, 25, 23, 0) 78%);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2096%2048'%20width='96'%20height='48'%3E%3Cg%20stroke='currentColor'%20stroke-width='1.5'%20stroke-linecap='round'%3E%3Cpath%20d='M18%209.5%20H26'/%3E%3Cpath%20d='M30%209.5%20H34'/%3E%3Cpath%20d='M52%209.5%20H62'/%3E%3Cpath%20d='M84%209.5%20H90'/%3E%3Cpath%20d='M16%2033.5%20H28'/%3E%3Cpath%20d='M48%2033.5%20H54'/%3E%3Cpath%20d='M60%2033.5%20H70'/%3E%3Cpath%20d='M86%2033.5%20H91'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='currentColor'%20stroke-width='1'%3E%3Crect%20x='4'%20y='7'%20width='5'%20height='5'/%3E%3Crect%20x='36'%20y='31'%20width='5'%20height='5'/%3E%3C/g%3E%3Crect%20x='70'%20y='7'%20width='5'%20height='5'%20fill='currentColor'/%3E%3Cg%20fill='currentColor'%3E%3Ccircle%20cx='44'%20cy='9.5'%20r='1.8'/%3E%3Ccircle%20cx='8'%20cy='33.5'%20r='1.8'/%3E%3Ccircle%20cx='80'%20cy='33.5'%20r='1.8'/%3E%3C/g%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2096%2048'%20width='96'%20height='48'%3E%3Cg%20stroke='currentColor'%20stroke-width='1.5'%20stroke-linecap='round'%3E%3Cpath%20d='M18%209.5%20H26'/%3E%3Cpath%20d='M30%209.5%20H34'/%3E%3Cpath%20d='M52%209.5%20H62'/%3E%3Cpath%20d='M84%209.5%20H90'/%3E%3Cpath%20d='M16%2033.5%20H28'/%3E%3Cpath%20d='M48%2033.5%20H54'/%3E%3Cpath%20d='M60%2033.5%20H70'/%3E%3Cpath%20d='M86%2033.5%20H91'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='currentColor'%20stroke-width='1'%3E%3Crect%20x='4'%20y='7'%20width='5'%20height='5'/%3E%3Crect%20x='36'%20y='31'%20width='5'%20height='5'/%3E%3C/g%3E%3Crect%20x='70'%20y='7'%20width='5'%20height='5'%20fill='currentColor'/%3E%3Cg%20fill='currentColor'%3E%3Ccircle%20cx='44'%20cy='9.5'%20r='1.8'/%3E%3Ccircle%20cx='8'%20cy='33.5'%20r='1.8'/%3E%3Ccircle%20cx='80'%20cy='33.5'%20r='1.8'/%3E%3C/g%3E%3C/svg%3E");
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
-webkit-mask-size: 96px 48px;
mask-size: 96px 48px;
pointer-events: none;
}
/* Tinted v6 bands: front-page.php:156, front-page.php:359,
inc/home-proof.php:83, inc/partner.php:399. These are the big
flat panels the brief calls bare. The field hangs from the
top of the band and is finished by half height, so the cards
and rails lower down sit on clean tint. At .05 over --tint
the --ink-2 pairing computes 6.63:1. */
.section-v6.ground-tint {
position: relative;
isolation: isolate;
}
.section-v6.ground-tint::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: linear-gradient(180deg, rgba(28, 25, 23, .05), rgba(28, 25, 23, 0) 52%);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2096%2048'%20width='96'%20height='48'%3E%3Cg%20stroke='currentColor'%20stroke-width='1.5'%20stroke-linecap='round'%3E%3Cpath%20d='M18%209.5%20H26'/%3E%3Cpath%20d='M30%209.5%20H34'/%3E%3Cpath%20d='M52%209.5%20H62'/%3E%3Cpath%20d='M84%209.5%20H90'/%3E%3Cpath%20d='M16%2033.5%20H28'/%3E%3Cpath%20d='M48%2033.5%20H54'/%3E%3Cpath%20d='M60%2033.5%20H70'/%3E%3Cpath%20d='M86%2033.5%20H91'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='currentColor'%20stroke-width='1'%3E%3Crect%20x='4'%20y='7'%20width='5'%20height='5'/%3E%3Crect%20x='36'%20y='31'%20width='5'%20height='5'/%3E%3C/g%3E%3Crect%20x='70'%20y='7'%20width='5'%20height='5'%20fill='currentColor'/%3E%3Cg%20fill='currentColor'%3E%3Ccircle%20cx='44'%20cy='9.5'%20r='1.8'/%3E%3Ccircle%20cx='8'%20cy='33.5'%20r='1.8'/%3E%3Ccircle%20cx='80'%20cy='33.5'%20r='1.8'/%3E%3C/g%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2096%2048'%20width='96'%20height='48'%3E%3Cg%20stroke='currentColor'%20stroke-width='1.5'%20stroke-linecap='round'%3E%3Cpath%20d='M18%209.5%20H26'/%3E%3Cpath%20d='M30%209.5%20H34'/%3E%3Cpath%20d='M52%209.5%20H62'/%3E%3Cpath%20d='M84%209.5%20H90'/%3E%3Cpath%20d='M16%2033.5%20H28'/%3E%3Cpath%20d='M48%2033.5%20H54'/%3E%3Cpath%20d='M60%2033.5%20H70'/%3E%3Cpath%20d='M86%2033.5%20H91'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='currentColor'%20stroke-width='1'%3E%3Crect%20x='4'%20y='7'%20width='5'%20height='5'/%3E%3Crect%20x='36'%20y='31'%20width='5'%20height='5'/%3E%3C/g%3E%3Crect%20x='70'%20y='7'%20width='5'%20height='5'%20fill='currentColor'/%3E%3Cg%20fill='currentColor'%3E%3Ccircle%20cx='44'%20cy='9.5'%20r='1.8'/%3E%3Ccircle%20cx='8'%20cy='33.5'%20r='1.8'/%3E%3Ccircle%20cx='80'%20cy='33.5'%20r='1.8'/%3E%3C/g%3E%3C/svg%3E");
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
-webkit-mask-size: 96px 48px;
mask-size: 96px 48px;
pointer-events: none;
}
/* ---------- 5. Grain ----------
160px feTurbulence tiles. On the dark panels the dust is
foil-toned at 8 percent peak alpha, which under the ink reads
as material rather than colour; on the tinted bands it is
ink-toned at 5 percent. Grain rides as an extra
background-image layer on the element itself, under every
masked pseudo. Where the base paints its ground with a
`background` shorthand gradient, that gradient is restated
here as the bottom layer, because the longhand replaces the
whole image stack; the sources are cited so a base change has
a trail to follow. Where the ground is a plain colour the
longhand adds the tile without touching it. */
/* Ground was: styles.css:1851, linear-gradient(155deg, #1c1917
0%, #2b2118 100%). */
.verify-panel {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200.89%200%200%200%200%200.753%200%200%200%200%200.522%200%200%200%200.08%200'/%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url(%23g)'/%3E%3C/svg%3E"), linear-gradient(155deg, #1c1917 0%, #2b2118 100%);
background-repeat: repeat, no-repeat;
}
/* Ground was: styles.css:1627, linear-gradient(150deg, #241c14,
#3b2a15). Grain sits under the vial rain, which styles.css
keeps at z-index 1. */
.promo-panel.p-dark {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200.89%200%200%200%200%200.753%200%200%200%200%200.522%200%200%200%200.08%200'/%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url(%23g)'/%3E%3C/svg%3E"), linear-gradient(150deg, #241c14, #3b2a15);
background-repeat: repeat, no-repeat;
}
/* Plain-colour grounds: var(--ink) on the proof card
(15-signature.css) and the footer (styles.css:657), var(--tint)
on the tinted bands (15-signature.css .ground-tint) and the
prose page head (page.php:73). background-color survives the
background-image longhand untouched. */
.proof-card,
.site-footer {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200.89%200%200%200%200%200.753%200%200%200%200%200.522%200%200%200%200.08%200'/%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url(%23g)'/%3E%3C/svg%3E");
background-repeat: repeat;
}
.section-v6.ground-tint,
.page-head.ground-tint {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200.11%200%200%200%200%200.098%200%200%200%200%200.09%200%200%200%200.05%200'/%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url(%23g)'/%3E%3C/svg%3E");
background-repeat: repeat;
}
/* ---------- Motion off ----------
The chart feed is the only animation this file owns. */
@media (prefers-reduced-motion: reduce) {
.verify-panel::after {
animation: none;
}
}
/* ---------- Small screens carry less ----------
At 375px the page-head field would sit under most of the
heading measure and the proof-card arc crowds the figure, so
both step back; the section-head trace and the fields already
fade before they reach anything that matters. Nothing here
can overflow horizontally: every layer is absolutely
positioned inside a bound it cannot leave, or is a 64px
in-flow block. */
@media (max-width: 479px) {
.wrap .page-head:not(.auth-head)::after {
width: 38%;
}
.proof-card::after {
width: 190px;
height: 190px;
top: -50px;
right: -64px;
}
}
/* ============================================================
A6 · PURCHASE PATH · motion and micro-interaction layer
------------------------------------------------------------
PDP buy box, cart drawer, cart page, checkout, order
confirmation. Loads last: build.sh concatenates the parts
in codepoint order, digits sort before uppercase, so A6-
lands after 99-mobile.css and wins every tie. That is a
loaded gun, so this file adds STATES AND TIMING ONLY. It
never restates a width, a height, a padding, a flex rule or
a z-index that an earlier part owns; 99-mobile.css in
particular (the buy-row growth rules, the bundle tier
geometry, section 9.3's checkout clearance) is treated as
law and never re-declared.
Only transform, opacity, filter, backdrop-filter,
background-position and clip-path are ever animated or
transitioned here. Nothing in this file can move layout, so
nothing in this file can cause CLS. Every moving thing is
answered in the reduced-motion block at the end.
No price, total, error message or submit control is ever
parked at opacity 0 waiting for an animation: entrances run
as keyframes whose absence leaves the element at its static,
fully visible state, and every keyframe that touches content
starts from a non-zero opacity so even a frozen first frame
is readable. The only opacity-0 base states in this file are
pure decoration (a focus ring, a celebration ring) whose
correct resting state IS invisible.
Every selector below was verified against the markup or the
script that toggles it before it was styled:
.single_add_to_cart_button
markup woocommerce/single-product/add-to-cart/simple.php:73
gated assets/pdp.js:108 (addBtn.disabled = !ready)
busy assets/pdp.js:356 (disabled + label swap while the
AJAX add is in flight; no class is added, see S1)
.qty / .q-up / .q-dn simple.php:48,56; driver main.js:310
.price-row .price functions.php:895 contract;
repainted assets/pdp.js:257,260
.price-coupon.is-applied main.js:690; markup functions.php:918
.mass-opt.active assets/pdp.js:132
.bundle-box.revealed assets/pdp.js:122; base 20-pdp.css:402
.bundle-card.active assets/pdp.js:272; markup
functions.php:2095 (first card ships
active); press kill under reduced
motion already at 99-mobile.css:349
.pdp-bar.show assets/pdp.js:190
.pdp-stage / .pdp-glow functions.php:844,845
.cart-drawer.open main.js:207 add, main.js:175 remove,
hidden re-applied 320ms later at
main.js:184-188, so every exit here
finishes inside 320ms
.backdrop.show main.js:209 / main.js:177
.cd-item inc/cart-drawer.php:338; the whole
drawer body is re-rendered as HTML on
every mutation (main.js:467), so
entrance keyframes re-run per paint
.cd-qty button:disabled inc/cart-drawer.php:360 (minus at 1)
.cd-x inc/cart-drawer.php:371 (no leaving
class exists, see S6d)
.cd-bump-add busy main.js:570-571 (disabled + "Adding")
.cd-offer-apply busy main.js:634
.cd-promo-form.show main.js:609; base styles.css:903
.cart-count.has-items main.js:295, main.js:476; display
flip at styles.css:139
.toast.show / .error main.js:433,435; base styles.css:641
#cartBar.show assets/cart.js:126; shell
10-tokens.css:157-168
.cart-offer-apply busy assets/cart.js:97-98
.hl-step.open / .done assets/checkout.js:85-86
.hl-step-tick unhidden assets/checkout.js:95
.hl-step-recap unhidden assets/checkout.js:74
.hl-rail-dot.current/.done assets/checkout.js:104-105
#place_order gate assets/checkout.js:168-169; markup
inc/checkout-steps.php:207
form.checkout.processing applied by WooCommerce core
assets/js/frontend/checkout.js on
submit. The plugin is not vendored in
this repo so no repo file:line exists;
the theme already banks on the same
script's classes at 50-cart.css:547
(.woocommerce-invalid), and
functions.php:480 empties Woo's
STYLES only, never its scripts. If
the class never lands, every rule on
it is inert and nothing is hidden.
.form-row.woocommerce-invalid same script; styled by the theme
at 50-cart.css:547-549
.hl-bar-figs / .hl-pay-total replaced wholesale as AJAX
fragments, inc/checkout-flow.php:227-232,
so keyframes on their children re-run
on every recalculation
.hl-consent .hl-box 50-cart.css:1150-1151 flips the svg
opacity on :checked
.ty-* confirmation woocommerce/checkout/thankyou.php;
.ty-mark already pops (50-cart.css:1840
ty-pop) and keeps that job
Verified, not fixed, because it was already right: every
input on the path renders at 16px (10-tokens.css:81-84 sets
input, select, textarea and the qty field globally; the
floating checkout fields restate 16px at 50-cart.css:1487),
so iOS has nothing to auto-zoom. No tap target is resized
anywhere in this file.
============================================================ */
/* ------------------------------------------------------------
S0 · Shared keyframes
------------------------------------------------------------
One vocabulary for the whole path, so the drawer, the
checkout and the confirmation read as the same hand. Content
keyframes start from .25 to .35 opacity, never zero: a frame
frozen at 0% is dim but legible, and an animation that never
starts leaves the element at its static, fully painted state.
a6-settle is the number move. The brief for tier and total
changes is "the same number moving, not a different number
appearing", and the whole path already re-renders its figures
as fresh DOM (pdp.js:257-262, main.js:467, the checkout
fragments). Fresh nodes restart animations, so a short rise
from just below the baseline plays on exactly the figures
that changed, on every change, with no script. Tabular
numerals (10-tokens.css:141-146, 99-mobile.css:316) keep the
glyph widths fixed while it happens.
------------------------------------------------------------ */
@keyframes a6-settle {
from { opacity: .25; transform: translateY(.34em); }
to { opacity: 1; transform: none; }
}
@keyframes a6-rise {
from { opacity: .3; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@keyframes a6-rise-sm {
from { opacity: .35; transform: translateY(5px); }
to { opacity: 1; transform: none; }
}
@keyframes a6-pop {
0% { transform: scale(.55); opacity: .25; }
62% { transform: scale(1.09); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
/* Busy pulse for a control that is mid-request. Floor of .68 so
the label stays readable through every phase of the loop. */
@keyframes a6-busy {
0%, 100% { opacity: 1; }
50% { opacity: .68; }
}
/* The refusal. Three diminishing horizontal taps, the smallest
gesture that reads as "no" without reading as an alarm. */
@keyframes a6-nudge {
0%, 100% { transform: translateX(0); }
22% { transform: translateX(-4px); }
48% { transform: translateX(3px); }
74% { transform: translateX(-2px); }
}
/* One pass of light, long rest. Same period family as the home
hero's sweep (A1-motion-hero.css a1-sweep) so the two glass
objects on the site are lit by the same lamp. */
@keyframes a6-sweep {
0% { background-position: 130% 0; }
40% { background-position: -30% 0; }
100% { background-position: -30% 0; }
}
/* ============================================================
S1 · PDP · Add to cart
------------------------------------------------------------
The button has four real states and three of them are
CSS-reachable:
idle enabled, label from the product
pressed :active
gated disabled with the label "Select a mass"
(pdp.js:108, simple.php:18-24)
in-flight disabled with the label "Adding"
(pdp.js:356-357), restored at pdp.js:394/400
Gated and in-flight share :disabled and no class separates
them, so this file styles :disabled once, quietly, and lets
the label carry the distinction, which is exactly how the JS
built it. No .loading or .added class exists on this button
(grep of assets/pdp.js; the .added class at main.js:594
belongs to the PLP quick-add pills, which are A2's surface
and are not touched here). Success feedback is the drawer
arriving with the item staggering in (S6) plus the badge pop
(S6f); inventing a second success state on the button would
fire it at the same moment the drawer covers it.
The press: the sitewide pairing gives every button a 200ms
ease into scale(.985) (10-tokens.css:128-131, 134-139). On
the one button that spends money, contact should register
inside a frame or two, so press-in gets a short duration and
release falls back to the family 200ms. Same trick A2 plays
on the cards, for the same reason.
------------------------------------------------------------ */
.buy-row .single_add_to_cart_button:active:not(:disabled),
.pdp-bar-add:active:not(:disabled) {
transform: scale(.975);
transition-duration: 70ms;
}
/* The disabled state reads as parked, not broken: desaturated
and dimmed by filter, which repaints without touching the
layout the buy-row rules in 99-mobile.css measured. Opacity
floor keeps "Select a mass" and "Adding" fully legible,
because a label that names the missing step is content. */
.buy-row .single_add_to_cart_button:disabled,
.pdp-bar-add:disabled {
filter: grayscale(.35) opacity(.62);
cursor: not-allowed;
}
/* ------------------------------------------------------------
S2 · PDP · Quantity stepper
------------------------------------------------------------
The plus and minus are 44px pills (simple.php:48,56) driven
by main.js:310, which clamps at min and max without ever
disabling, so on the PDP the bound state is "the number
stopped moving". The press is the feedback channel that
exists, so it gets the same fast-in physics as the buy
button, scaled to the smaller control.
The drawer stepper is different: its minus really is
disabled at quantity 1 (inc/cart-drawer.php:360), so it gets
a true disabled treatment in S6e.
------------------------------------------------------------ */
.qty .q-up:active,
.qty .q-dn:active {
transform: scale(.88);
transition-duration: 60ms;
}
/* ------------------------------------------------------------
S3 · PDP · The price is one number moving
------------------------------------------------------------
Choosing a tier makes pdp.js:260-263 replace the contents of
.price-row .price with fresh .was / .bundle-flag / .now
nodes, and choosing tier one restores the original Woo
markup the same way (pdp.js:257). Fresh nodes restart
animations, so a6-settle plays on precisely the figures that
changed: the new price rises into the slot the old one
occupied, in fixed-width digits, which the eye reads as the
same number moving. The struck was-price and the flag follow
a beat later so the sequence reads new price first,
explanation second.
The bare selector also catches the server-rendered price
once on page load, which is kept deliberately: the price
arriving with the same settle as every later change is what
makes the motion a vocabulary instead of an effect.
------------------------------------------------------------ */
.price-row .price .now,
.price-row .price > .woocommerce-Price-amount {
display: inline-block; /* transforms need a box; inline spans ignore them */
animation: a6-settle 300ms var(--ease-out) both;
}
.price-row .price .was,
.price-row .price .bundle-flag {
display: inline-block;
animation: a6-settle 300ms var(--ease-out) 70ms both;
}
/* The coupon line's applied state (main.js:690 adds
.is-applied and the tick is drawn by the existing ::after,
20-pdp.css:386). The confirmation deserves a beat of arrival
rather than an instant swap. */
.price-coupon.is-applied .coupon-tap::after {
display: inline-block;
animation: a6-pop 360ms var(--ease-out) both;
}
/* ------------------------------------------------------------
S4 · PDP · Bundle tiers
------------------------------------------------------------
The tier box is display:none until a mass is chosen, then
pdp.js:122 adds .revealed and 20-pdp.css:407 flips it to
block. A display flip restarts animations, so the reveal can
ride a keyframe with no extra state: the box rises in as a
consequence of the choice just made above it.
Selection: pdp.js:272 moves .active between cards. The card
chrome already transitions through the sitewide pairing
(10-tokens.css:134) and 99-mobile.css owns the tier geometry,
so the only thing added is the vials nodding when their card
is chosen: the class landing on a new element restarts the
pop. transform on .bundle-vials moves a 42px strip inside
the card, never the card box, so the equal-height grid the
mobile pass measured is untouched.
Press: 20-pdp.css:460 already scales the card and
99-mobile.css:349 already stills it under reduced motion.
Nothing to add, nothing re-declared.
------------------------------------------------------------ */
.bundle-box.revealed {
animation: a6-rise 340ms var(--ease-out) both;
}
.bundle-card.active .bundle-vials {
animation: a6-vials 380ms var(--ease-out) both;
}
@keyframes a6-vials {
0% { transform: translateY(0) scale(1); }
45% { transform: translateY(-3px) scale(1.04); }
100% { transform: translateY(0) scale(1); }
}
/* ------------------------------------------------------------
S5 · PDP · Light on the glass, depth on the scroll
------------------------------------------------------------
The stage is a photographic cutout on a warm tile with a
breathing glow behind it (functions.php:844-846, float and
glow at 20-pdp.css:95-174). What the home hero has and this
bottle lacks is the specular pass: one light source crossing
the glass. Same construction as A1 section 4, one lozenge
pseudo, a band travelling by background-position (permitted
list), an elliptical mask so the band dies before the
lozenge's edge the way a reflection dies on curvature, and
screen blending so it brightens the photograph instead of
sitting on it. The PDP bottle stands upright so the lozenge
is unrotated; insets hug the 47/96 bottle body inside the
square stage with the letterboxing 20-pdp.css:153-172
produces. The pseudo sits at z-index 2, over the img at
z-index 1 and under nothing.
The trade, stated: a background-position animation repaints
the pseudo rather than riding the compositor. The pseudo is
a fraction of one tile, the pass occupies 40% of a 15s
cycle, and this page has no is-off observer, so the honest
mitigation is the long rest plus the reduced-motion kill.
------------------------------------------------------------ */
.pdp-stage::after {
content: "";
position: absolute;
inset: 7% 27% 17%;
z-index: 2;
border-radius: 30% / 9%;
pointer-events: none;
background-image: linear-gradient(105deg,
transparent 40%,
rgba(255, 255, 255, .20) 47%,
rgba(255, 255, 255, .44) 50%,
rgba(255, 255, 255, .20) 53%,
transparent 60%);
background-size: 340% 100%;
background-repeat: no-repeat;
background-position: 130% 0;
mix-blend-mode: screen;
-webkit-mask-image: radial-gradient(ellipse 60% 46% at 50% 46%, #000 50%, transparent 92%);
mask-image: radial-gradient(ellipse 60% 46% at 50% 46%, #000 50%, transparent 92%);
animation: a6-sweep 15s ease-in-out 2.6s infinite;
}
/* Parallax, gently and only where it is safe. The vial itself
already owns its animation (the float), so depth is written
on the stage box and composes with it. Gated twice: behind
@supports because scroll-driven animation is the enhancement
tier, and under 1024px because the desktop layout pins
.pdp-media sticky (20-pdp.css:968) and a transform inside a
sticky ancestor reads as slippage, not depth. */
@supports (animation-timeline: view()) {
@media (max-width: 1023px) {
.pdp-stage {
animation: a6-plx linear both;
animation-timeline: view();
animation-range: entry 0% exit 100%;
}
}
}
@keyframes a6-plx {
from { transform: translateY(12px); }
to { transform: translateY(-14px); }
}
/* ============================================================
S6 · Cart drawer
------------------------------------------------------------
The state machine, from main.js: open() unhides the panel,
forces a reflow, then adds .open to the panel and .show to
the shared backdrop (main.js:202-210); close() removes both
and re-hides the DOM 320ms later (main.js:175-188). The base
sheet slides the panel with one 300ms transition both ways
(styles.css:803-813). Weight comes from asymmetry: arriving
is the event, so it takes the long curve; dismissal is
already understood, so it leaves at about 65% of the enter
time and finishes with 60ms to spare inside the JS teardown
window. The declaration order below makes the split: the
base state's transition governs the exit, the .open state's
transition governs the entrance.
============================================================ */
/* S6a · The panel and the scrim on their own curves. */
.cart-drawer {
transition: transform 240ms var(--ease-soft);
}
.cart-drawer.open {
transition: transform 380ms var(--ease);
}
/* The scrim is light, not furniture: it fades on plain curves,
quicker than the panel on the way out so the page is back
before the panel has fully left. The backdrop is shared with
the nav drawer (header.php:183, one element for both), so
the nav inherits this timing too; both drawers run the same
320ms teardown in main.js, so the budget holds for both. */
.backdrop {
transition: opacity 200ms ease-out;
}
.backdrop.show {
transition: opacity 300ms ease-out;
}
/* S6b · Line items arrive as a cascade. Every mutation hands
back the whole drawer as fresh HTML (main.js:467), so these
keyframes re-run on every paint: on first open it reads as
the cart assembling, and after a quantity change it reads as
the lines re-settling, which is truthful, because the volume
ladder really can reprice every line on one change
(inc/cart-drawer.php header note). The soft .25 start is
what keeps a repaint from reading as a blink. Delay is
capped at the sixth row so a long cart never makes the foot
of the list feel late. */
/* fill backwards, not both: a forwards fill would keep the
final keyframe applied after the animation ends and would
outrank the S6d press transition on the same properties. */
.cd-item {
animation: a6-rise-sm 260ms var(--ease-out) backwards;
}
.cd-item:nth-child(2) { animation-delay: 40ms; }
.cd-item:nth-child(3) { animation-delay: 80ms; }
.cd-item:nth-child(4) { animation-delay: 120ms; }
.cd-item:nth-child(5) { animation-delay: 160ms; }
.cd-item:nth-child(n+6) { animation-delay: 190ms; }
/* The cards after the lines follow the cascade at its tail. */
.cd-assure,
.cd-bump,
.cd-offer {
animation: a6-rise-sm 280ms var(--ease-out) 140ms both;
}
.cd-empty {
animation: a6-rise 320ms var(--ease-out) both;
}
/* S6c · The totals settle as figures, not as a card. Rows are
re-rendered per mutation like everything else, so the money
lines get the number treatment from S0 and nothing else
moves in the footer. The free-shipping fill keeps its
existing width transition (styles.css:917, re-armed by
main.js:483-489); width is not this file's to animate and
the behaviour already ships. */
.cd-total-row,
.cd-urgency {
animation: a6-settle 260ms var(--ease-out) both;
}
.cd-total-row.cd-total-due {
animation-delay: 60ms;
}
/* S6d · Removal. The X posts, the server answers, the drawer
repaints without the row (main.js:562-564); no class ever
marks the leaving row, so a true exit animation is not
honestly reachable from CSS and none is faked here. What CSS
can reach is the press itself: while the finger is on the X,
the whole row dims and shrinks under it, so the row is
already visibly going before the repaint takes it. Scoped
behind @supports because :has() is the only way to reach the
row from its button. */
@supports selector(.a:has(.b)) {
.cd-item:has(.cd-x:active) {
opacity: .45;
transform: scale(.975);
transition: opacity 120ms ease-out, transform 120ms ease-out;
}
}
/* S6e · Drawer stepper and the busy buttons. The minus is
genuinely disabled at quantity 1 (inc/cart-drawer.php:360):
at the bound the control goes flat and the press physics
stop, which is the difference between "will not" and "did
not register". */
.cd-qty button:not(:disabled):active {
transform: scale(.86);
transition-duration: 60ms;
}
.cd-qty button:disabled {
opacity: .32;
cursor: not-allowed;
transform: none;
}
/* Buttons the JS parks in a disabled+relabelled busy state
while a request runs: the bump add (main.js:570-571), the
drawer offer (main.js:634), and the cart page's offer card
(cart.js:97-98). One pulse says "working" on all three. */
.cd-bump-add:disabled,
.cd-offer-apply:disabled,
.cart-offer-apply:disabled {
animation: a6-busy 1.1s ease-in-out infinite;
}
/* The promo field unfolds (display flip at styles.css:903 when
main.js:609 adds .show), so its entrance can ride a
keyframe. */
.cd-promo-form.show {
animation: a6-rise-sm 240ms var(--ease-out) both;
}
/* S6f · The badge. main.js:295 and :476 toggle .has-items and
styles.css:139 flips display, so the pop plays when the
count first exists, which is the moment the user caused. A
later 2 becoming 3 rewrites textContent with no class change
and no display flip; CSS has no hook for that, it is not
faked, and the drawer opening on every add is the feedback
that moment already owns. */
.cart-count.has-items {
animation: a6-pop 420ms var(--ease-out) both;
}
/* S6g · The toast, error flavour. The base slide-in
(styles.css:641-648) stays; a failed action additionally
refuses sideways. The keyframes restate the base centering
translate because transform is atomic and a bare shake would
throw the pill off its midline. */
.toast.error.show {
animation: a6-toast-no 380ms var(--ease-out) 80ms;
}
@keyframes a6-toast-no {
0%, 100% { transform: translateX(-50%) translateY(0); }
22% { transform: translateX(calc(-50% - 5px)) translateY(0); }
48% { transform: translateX(calc(-50% + 4px)) translateY(0); }
74% { transform: translateX(calc(-50% - 2px)) translateY(0); }
}
/* ============================================================
S7 · Cart page
------------------------------------------------------------
The cart page is deliberately reload-driven: every drawer
mutation on /cart/ reloads the page so PHP can restate every
number (main.js:532), and quantity changes submit the form
(cart.js:34-52). So "feedback" here is arrival feedback:
the money figures settle on every load with the same S0
vocabulary, which after a quantity change reads as the
reprice landing. Kept to the figures alone; animating the
rows on a page that reloads per edit would make editing feel
like the page collapsing and rebuilding.
The sticky bar's own slide already works: cart.js:122-127
reveals it a frame after load and the shared shell animates
it (10-tokens.css:157-169). Not re-declared.
------------------------------------------------------------ */
body.woocommerce-cart .cart-line-price,
body.woocommerce-cart .cart-summary .sum-row,
body.woocommerce-cart .cart-bar-sum b {
animation: a6-settle 280ms var(--ease-out) both;
}
/* ============================================================
S8 · Checkout
------------------------------------------------------------
Money is on the table, so motion here is confined to three
jobs: show which panel is alive, refuse bad input visibly,
and make the one submit feel held while the order posts.
Nothing decorative.
============================================================ */
/* S8a · Focus worth the money. The base already paints the
focused field instantly (border to ink plus an 8% halo,
50-cart.css:1492-1496) and the floating label already glides
(50-cart.css:1464-1472). Added: the halo now arrives instead of
appearing, drawn as a ring pseudo on the row that fades and
tightens in. Ink, never gold: the tokens layer is explicit
that the accent means "action", not "location"
(10-tokens.css:44-47). The ring is decoration, so its
resting opacity of 0 hides nothing that matters, and it is
state-driven, so even with transitions unavailable the
focused state still shows it. The :has() rule degrades to
nothing in engines without it, leaving the base focus paint
intact. */
.hl-checkout .form-row.hl-float::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 15px;
border: 2px solid rgba(28, 25, 23, .14);
opacity: 0;
transform: scale(.99);
pointer-events: none;
transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.hl-checkout .form-row.hl-float:has(input.input-text:focus)::after {
opacity: 1;
transform: scale(1);
}
/* S8b · Refusal, inline. WooCommerce core validation lands
.woocommerce-invalid on the row (the theme already colours
it, 50-cart.css:547-549); the class arriving triggers one
nudge, so the red border is noticed the moment it is earned
rather than on the next read-through. The error summary Woo
prints on a failed submit rises in the same way; it is a
keyframe, so the error is fully visible even if animation
never runs. */
.hl-checkout .form-row.woocommerce-invalid {
animation: a6-nudge 300ms var(--ease-out);
}
body.woocommerce-checkout .woocommerce-error {
animation: a6-rise-sm 320ms var(--ease-out) both;
}
/* S8c · The panels. checkout.js:85-86 moves .open and .done;
the body's hidden attribute flips with it (checkout.js:87),
and the display flip restarts the keyframe, so opening a
step plays its contents in. One caveat is handled by the JS
itself: after an AJAX recalculation an already-open body is
re-asserted visible without a display flip (checkout.js:238-242),
so the animation does not replay under someone mid-typing. */
.hl-step.open .hl-step-body {
animation: a6-rise-sm 280ms var(--ease-out) both;
}
/* The recap line and the tick appear by unhiding
(checkout.js:74, :95): arrival, not toggling. */
.hl-step-recap {
animation: a6-rise-sm 260ms var(--ease-out) both;
}
.hl-step-tick {
animation: a6-pop 380ms var(--ease-out) both;
}
/* The rail: the dot that becomes current pops once
(checkout.js:104 toggles the class as the buyer advances).
The connecting fill is drawn by width at 50-cart.css:1319
and width is not this file's to animate; the dot carries the
moment instead. */
.hl-rail-dot.current {
animation: a6-pop 380ms var(--ease-out) both;
}
/* S8d · Consents. The base flips the tick svg's opacity when
checked (50-cart.css:1150-1151). Giving the svg a resting
scale and a transition turns the flip into a small
confirmation without touching the 44px labels or the box
geometry. State-driven, so it works with or without the
transition running. */
.hl-consent .hl-box svg {
transform: scale(.55);
transition: transform 200ms var(--ease-out), opacity 140ms linear;
}
.hl-consent input:checked + .hl-box svg {
transform: scale(1);
}
/* S8e · Place order, held while it posts. WooCommerce core
adds .processing to the form for the duration of the submit
(provenance in the header map). The button cannot be
double-tapped ambiguously: pointer-events stop instantly and
the pulse says the first tap took. The label never dips
below .68 opacity, because "what did I just press" must stay
answerable for the whole wait. If the class never arrives,
these rules never run and the button is its normal self. */
form.checkout.processing .hl-place-order {
pointer-events: none;
animation: a6-busy 1.2s ease-in-out infinite;
}
form.checkout.processing .hl-step-next,
form.checkout.processing .hl-step-back {
pointer-events: none;
opacity: .6;
}
/* S8f · The running total is a fragment WooCommerce replaces on
every recalculation (inc/checkout-flow.php:227-232), so the
figures are fresh nodes each time shipping or a coupon moves
the number: the settle plays on exactly the totals that
changed, in the bar and on the pay button both. */
.hl-bar-total,
.hl-pay-figure {
display: inline-block;
animation: a6-settle 280ms var(--ease-out) both;
}
/* ============================================================
S9 · Order confirmation
------------------------------------------------------------
The last screen a first-time buyer sees, and the only one
allowed a moment of ceremony. The base already pops the tick
(ty-pop, 50-cart.css:1830-1844) and that stays the anchor;
this section sequences the rest of the page off that beat:
greeting, lede, then the facts and next-steps in a cascade,
so the eye is walked from "it worked" to "here is your
number" to "here is what happens".
The failed branch gets NOTHING. thankyou.php renders it as
.ty-head-fail with its own copy ("Nothing celebratory here",
thankyou.php:76-79), and every celebratory selector below is
scoped out of it. A declined payment still deserves instant,
motionless clarity, so the retry button never waits on a
delay.
------------------------------------------------------------ */
.ty-head:not(.ty-head-fail) .eyebrow {
animation: a6-rise 460ms var(--ease-out) 120ms both;
}
.ty-head:not(.ty-head-fail) h1 {
animation: a6-rise 460ms var(--ease-out) 180ms both;
}
.ty-head:not(.ty-head-fail) .ty-lede,
.ty-head:not(.ty-head-fail) .ty-extra {
animation: a6-rise 460ms var(--ease-out) 240ms both;
}
/* One ring leaves the tick as it lands: the celebration, spent
in 700ms, then a still page. Pure decoration, invisible at
rest by design, drawn in the success palette the mark
already wears. position:relative is layout-neutral here; the
mark is an inline-flex box whose children are unpositioned. */
.ty-head:not(.ty-head-fail) .ty-mark {
position: relative;
}
.ty-head:not(.ty-head-fail) .ty-mark::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid var(--success, #15803d);
opacity: 0;
pointer-events: none;
animation: a6-ty-ring 700ms var(--ease-out) 360ms;
}
@keyframes a6-ty-ring {
0% { opacity: .5; transform: scale(.72); }
100% { opacity: 0; transform: scale(1.5); }
}
/* The facts row: order number, date, total, one beat apart.
The order number is the thing people screenshot, so the
cascade leads with it. */
.ty-facts .ty-fact { animation: a6-rise 420ms var(--ease-out) both; }
.ty-facts .ty-fact:nth-child(1) { animation-delay: 320ms; }
.ty-facts .ty-fact:nth-child(2) { animation-delay: 380ms; }
.ty-facts .ty-fact:nth-child(3) { animation-delay: 440ms; }
.ty-facts .ty-fact:nth-child(n+4) { animation-delay: 500ms; }
/* What happens next, arriving in the order it will happen. */
.ty-steps .ty-step { animation: a6-rise 420ms var(--ease-out) both; }
.ty-steps .ty-step:nth-child(1) { animation-delay: 480ms; }
.ty-steps .ty-step:nth-child(2) { animation-delay: 560ms; }
.ty-steps .ty-step:nth-child(n+3) { animation-delay: 640ms; }
/* The aside follows the main column, quietly. */
.ty-aside .ty-card {
animation: a6-rise 420ms var(--ease-out) 560ms both;
}
/* The bought vial floats over the aside on desktop
(thankyou.php's .ty-deco, shown from 1000px at
50-cart.css:2261-2263). It is the same object the PDP
floats, so it gets the same idle from the shared keyframe
set, slowed to match the calm of the page. */
.ty-deco .vial,
.ty-deco img.vial {
animation: h-float-slow 7s ease-in-out 1.2s infinite;
}
/* ============================================================
S10 · Motion off
------------------------------------------------------------
Every animation and transition this file introduced, stilled.
States remain: disabled still reads disabled, focus still
rings, the tick still shows, errors still colour, the sweep
pseudo rests parked outside its mask, and every entrance
keyframe's absence leaves its element fully painted, because
nothing here starts hidden. Base-layer motion (the drawer
slide, the toast, the bottom bars, ty-pop) is already
answered by its own layers; re-stilling the drawer and
backdrop is repeated here anyway because this file re-timed
them and the kill must outrank the re-timing.
============================================================ */
@media (prefers-reduced-motion: reduce) {
.buy-row .single_add_to_cart_button:active:not(:disabled),
.pdp-bar-add:active:not(:disabled),
.qty .q-up:active,
.qty .q-dn:active,
.cd-qty button:not(:disabled):active {
transform: none;
}
.price-row .price .now,
.price-row .price > .woocommerce-Price-amount,
.price-row .price .was,
.price-row .price .bundle-flag,
.price-coupon.is-applied .coupon-tap::after,
.bundle-box.revealed,
.bundle-card.active .bundle-vials,
.pdp-stage,
.pdp-stage::after,
.cd-item,
.cd-assure,
.cd-bump,
.cd-offer,
.cd-empty,
.cd-total-row,
.cd-urgency,
.cd-bump-add:disabled,
.cd-offer-apply:disabled,
.cart-offer-apply:disabled,
.cd-promo-form.show,
.cart-count.has-items,
.toast.error.show,
body.woocommerce-cart .cart-line-price,
body.woocommerce-cart .cart-summary .sum-row,
body.woocommerce-cart .cart-bar-sum b,
.hl-checkout .form-row.woocommerce-invalid,
body.woocommerce-checkout .woocommerce-error,
.hl-step.open .hl-step-body,
.hl-step-recap,
.hl-step-tick,
.hl-rail-dot.current,
form.checkout.processing .hl-place-order,
.hl-bar-total,
.hl-pay-figure,
.ty-head:not(.ty-head-fail) .eyebrow,
.ty-head:not(.ty-head-fail) h1,
.ty-head:not(.ty-head-fail) .ty-lede,
.ty-head:not(.ty-head-fail) .ty-extra,
.ty-head:not(.ty-head-fail) .ty-mark::after,
.ty-facts .ty-fact,
.ty-steps .ty-step,
.ty-aside .ty-card,
.ty-deco .vial,
.ty-deco img.vial {
animation: none;
}
.cart-drawer,
.cart-drawer.open,
.backdrop,
.backdrop.show,
.hl-checkout .form-row.hl-float::after,
.hl-consent .hl-box svg {
transition: none;
}
@supports selector(.a:has(.b)) {
.cd-item:has(.cd-x:active) {
opacity: 1;
transform: none;
transition: none;
}
}
/* The consent tick and the focus ring keep their states with
the travel removed. */
.hl-consent .hl-box svg { transform: scale(1); }
.hl-checkout .form-row.hl-float::after { transform: none; }
}
/* ============================================================
A7 · Research library, certificates page, partner 375 sweep
------------------------------------------------------------
Loads after 99-mobile.css: the build concatenates parts in
codepoint order and digits sort before uppercase, so this file
wins every equal-specificity tie. Nothing shipped in
99-mobile.css is redone here; where a shipped rule exists (COA
left alignment, .cat-pill 44px, .wrap.section-v6 gutter) this
file builds on top of it.
Scoping, so nothing leaks onto surfaces other agents own:
Research library .wrap:has(.verify-panel)
research.php:54 is the only .verify-panel
in the theme (checked with a full grep),
and page.php:97 wraps the shortcode in a
bare .wrap, so the hook matches exactly
one page.
Certificates page .prose:has(.coa-cert)
The PDP renders the same card inside
.coa-panel (functions.php:1240), never
inside .prose, and the PDP references
list sits inside .pdp-refs
(research.php:203). Only the certificates
page (provision.sh:601) puts either class
inside the .prose measure.
Partner program .partner-page (partner.php:315)
Motion: none is added. No animation, no keyframes, no new
transition. Sticky positioning is not motion. The hover lift
and press states that fire on .spec-card and .coa-item come
from 10-tokens.css and are already stilled under reduced
motion there.
============================================================ */
/* ============================================================
1 · Research library: the library goes first
------------------------------------------------------------
Measured top to bottom at 375px, the page ran: title, a dark
420px testing panel, a 760px stack of four COA explainer
cards, and only then the compound browser. The browser is the
page's one job and its best asset (the tinted tiles), and it
started roughly 1,350px deep. Two blocks about certificates
stood in front of the block the page is named after.
page.php:97 wraps the shortcode output in one .wrap whose
children are exactly: .page-head (research.php:49),
.verify-panel (research.php:54), the spec section
(research.php:86) and the browser section (research.php:113).
Flex order re-sequences them CSS-only: title, browser, then
the testing panel, then the COA explainer as supporting
matter.
Trade-off, stated honestly: keyboard tab order still follows
the DOM, so the testing panel's CTA is reached before the
filter pills even though it now sits below them. Judged
acceptable against opening the page on its subject; whole
sections move, nothing interleaves. Browsers without :has()
keep the original order and lose nothing else.
============================================================ */
.wrap:has(.verify-panel) {
display: flex;
flex-direction: column;
}
.wrap:has(.verify-panel) > .verify-panel { order: 2; }
.wrap:has(.verify-panel) > .section-v6:has(.spec-cards) { order: 3; }
/* The browser section now follows the h1 directly, so its 44px
section padding (styles.css:1646) doubled the page-head's own
bottom padding into a 62px hole under the title. The heading
hands straight into the eyebrow instead. */
.wrap:has(.verify-panel) > .section-v6:has(.cat-strip) { padding-block-start: 8px; }
@media (min-width: 768px) {
/* Overrides the 68px desktop step-up at styles.css:1704. */
.wrap:has(.verify-panel) > .section-v6:has(.cat-strip) { padding-block-start: 24px; }
}
/* After the move the verify panel's margin-top: 32px
(styles.css:1852) stacked onto the browser section's 44px
bottom padding for a 76px gap, while every other block break
on the page is 44px. One rhythm, so the stray margin goes. */
@media (max-width: 767px) {
.wrap:has(.verify-panel) > .verify-panel { margin-top: 0; }
}
/* ============================================================
2 · Research library: type ramp at 375
------------------------------------------------------------
Measured heading sizes at 375px before this file: h1 32px
(99-mobile.css 5a), section h2 29.6px (styles.css:1652),
verify h2 25.6px (styles.css:1861). Three sizes within 6px of
each other is not a ramp, it is jitter: the section heads
read as competing h1s. Normalised to one clear step per
level: 32 / 24 / 15.2 (the card and spec h3s). Desktop keeps
its own scale.
============================================================ */
@media (max-width: 767px) {
.wrap:has(.verify-panel) .section-head-v6 h2 { font-size: 1.5rem; }
.wrap:has(.verify-panel) .verify-panel h2 { font-size: 1.5rem; }
/* The intro under the h1 is the page's lede, not a footnote.
At 16px muted it spoke in the same voice as every caption
below it. 17px at the 327px measure is about 40 characters
a line, inside the 35 to 60 band. */
.wrap:has(.verify-panel) .page-head p {
font-size: 1.0625rem;
line-height: 1.6;
}
}
/* ============================================================
3 · Research library: the filter travels with the grid
------------------------------------------------------------
The category pills (research.php:120) filter a grid of every
compound in the catalogue. Two screens into that grid the
filter was gone. Sticky keeps it one thumb-reach away for the
whole scroll, and it releases when its section ends, so it
never haunts the panels that now follow the grid.
The negative-margin trick on .cat-pills (styles.css:986) lets
the row bleed to both screen edges, so the strip takes the
same negative margin plus matching padding; its white ground
then covers the full bleed while stuck and cards cannot show
through beside the pills. z-index 5 sits above the raised
.card-link (99-mobile.css 1a) and far below the header's 50.
============================================================ */
.wrap:has(.verify-panel) .cat-strip {
position: sticky;
top: var(--header-h);
z-index: 5;
background: var(--bg);
margin-inline: calc(var(--gutter) * -1);
padding-inline: var(--gutter);
padding-block: 8px 2px;
margin-bottom: 12px;
/* A hairline drawn as shadow, not border, so it adds no height
and the pill row keeps its snap geometry. */
box-shadow: 0 1px 0 var(--line);
}
/* ============================================================
4 · Research library: the COA explainer stops wearing borders
------------------------------------------------------------
The four .spec-card explainers (research.php:94) rendered as
full-width grey boxes with a hairline border, stacked 760px
tall at 375px: four identical weights directly beside the
tinted compound tiles the owner singled out. The tiles are
where this site uses colour with confidence, so the explainer
borrows the same move: the four cards take the four warm
tints in the site's fixed rotation, and the border stops
pretending to separate what colour now separates.
Contrast, checked before shipping: body copy is --ink-2
#57534e, which measures 7.1:1 on --tint-gold #fdf6e9 and
6.6:1 on the coolest ground --tint-steel #eaeff5, both over
the 4.5:1 floor. --muted is not used on any tint here; it
only clears 4.5:1 against --tint and lighter.
============================================================ */
.wrap:has(.verify-panel) .spec-card {
border-color: transparent;
background: var(--tint-gold);
padding: 16px 18px;
}
.wrap:has(.verify-panel) .spec-cards > .spec-card:nth-child(4n + 2) { background: var(--tint-sage); }
.wrap:has(.verify-panel) .spec-cards > .spec-card:nth-child(4n + 3) { background: var(--tint-steel); }
.wrap:has(.verify-panel) .spec-cards > .spec-card:nth-child(4n + 4) { background: var(--tint-clay); }
.wrap:has(.verify-panel) .spec-card h3 { margin-bottom: 6px; }
.wrap:has(.verify-panel) .spec-card p {
font-size: .9375rem;
line-height: 1.55;
color: var(--ink-2);
}
@media (max-width: 767px) {
.wrap:has(.verify-panel) .spec-cards { gap: 10px; }
}
/* styles.css:1878 never gives .spec-cards columns, so on a
1440px desktop these were four 1392px-wide ribbons. Two-up
from tablet, four-up wide: the stat strip's own rhythm. */
@media (min-width: 640px) {
.wrap:has(.verify-panel) .spec-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.wrap:has(.verify-panel) .spec-cards { grid-template-columns: repeat(4, 1fr); }
}
/* ============================================================
5 · Research library: the testing panel, demoted not deleted
------------------------------------------------------------
The dark panel is good; it was doing a hero's job on a
librarian's page. Following the grid it now closes the page
as "how we test" plus the certificate CTA. Measured at 375 it
ran about 420px on 28px padding with a 2rem display figure;
tightened so it reads as a closing statement rather than a
second hero. Its CTA goes full width: a clean 48px target,
and the panel's one action reads as the panel's one action.
Desktop (40px padding, 2.1rem h2 in the base layer) is
untouched.
============================================================ */
@media (max-width: 767px) {
.wrap:has(.verify-panel) > .verify-panel { padding: 22px 18px; }
.wrap:has(.verify-panel) .verify-stats {
margin-top: 16px;
gap: 14px;
}
.wrap:has(.verify-panel) .verify-stat strong { font-size: 1.75rem; }
.wrap:has(.verify-panel) .verify-pills { margin-top: 14px; }
.wrap:has(.verify-panel) .verify-panel .btn {
margin-top: 18px;
width: 100%;
}
}
/* ============================================================
6 · Certificates page: read, then request
------------------------------------------------------------
The page's real order at 375 (provision.sh:601 plus the
shortcode at functions.php:1307): certificate card, then the
full request-by-product directory, and only after that the
lede, the "what the certificate reports" list, the release
panel and the how-to steps. The directory of every product in
the catalogue stood between the page's opening claim and the
three sections that explain it.
Flex order fixes the read: card, lede, what it reports, the
release standard, how to request, older lots, and the
directory last, where an index belongs, after the steps that
tell you what to do with it. The directory trio is targeted
precisely: the only h2 on the page carrying a style attribute
(functions.php:1320), its caption paragraph, and .coa-list.
Same tab-order trade as section 1, same verdict; without
:has() the page keeps its original order.
Flex stops sibling margins collapsing, which would have
quietly changed every gap on the page, so the separators are
re-normalised below. Measured separator heights at 375 before
this file: paragraph to h2 44px, list to h2 60px
(60-chrome.css:356), directory h2 56px (its inline 40px plus
16px padding). All become 44px: 12px sibling margin, 16px
margin, 16px padding. On desktop the same three measured 60,
64 and 60, and all become 60.
============================================================ */
.prose:has(.coa-cert) {
display: flex;
flex-direction: column;
}
.prose:has(.coa-cert) > h2[style],
.prose:has(.coa-cert) > h2[style] + p,
.prose:has(.coa-cert) > .coa-list { order: 2; }
/* Separator normalisation under flex, desktop then mobile. */
.prose:has(.coa-cert) > h2 { margin-top: 28px; }
.prose:has(.coa-cert) > .proof-card,
.prose:has(.coa-cert) > .step-cards { margin-bottom: 12px; }
.prose:has(.coa-cert) > div:has(> .coa-cert) { margin-bottom: 24px; }
.prose:has(.coa-cert) > h2[style] {
/* !important: overrides the element's own style attribute,
margin-top:40px, written by halotir_certificates_shortcode()
at functions.php:1320. An attribute style outranks every
selector, so there is no other way in from CSS. */
margin-top: 28px !important;
}
@media (max-width: 767px) {
.prose:has(.coa-cert) > h2 { margin-top: 16px; }
.prose:has(.coa-cert) > h2[style] {
/* !important: same inline margin-top:40px from
functions.php:1320, mobile step of the rule above. */
margin-top: 16px !important;
}
}
/* ============================================================
7 · Certificates page: one spacing scale for the panels
------------------------------------------------------------
"Not super tight" measured out as panels that almost agree:
the certificate card padded 30/20/26 (styles.css:341) while
.proof-card runs 24/20 (15-signature.css) and .step-card runs
20 (styles.css:1119); inside the card, seal to h2 16, h2 to
p 8 (styles.css:353), button 20 (styles.css:355), fine print
14 (styles.css:363), list margin 20 (styles.css:367).
Normalised onto the 4px scale the neighbouring panels already
use: card padding 24/20/24, seal to h2 12, h2 to p 8, button
24, fine print 12, list 16.
Type on the same page, measured then fixed: the card h2 at
22px sat between the 32px page h1 and the 20px prose h2s, so
it takes the 24px step from the research ramp; card body copy
was 14.7px and step-card copy 14.4px, both under the 15px
floor, both to 15px (at the card's 287px inner measure that
is about 40 characters a line); the release panel's note was
12px and takes the 13px floor 10-tokens.css names for copy a
buyer actually reads.
============================================================ */
.prose:has(.coa-cert) .coa-cert { padding: 24px 20px; }
.prose:has(.coa-cert) .coa-cert h2 {
font-size: 1.5rem;
margin: 12px 0 8px;
}
.prose:has(.coa-cert) .coa-cert p { font-size: .9375rem; }
.prose:has(.coa-cert) .coa-cert .btn { margin-top: 24px; }
.prose:has(.coa-cert) .coa-cert .coa-fine { margin-top: 12px; }
.prose:has(.coa-cert) .step-card p { font-size: .9375rem; }
.prose:has(.coa-cert) .proof-card .proof-note { font-size: .8125rem; }
@media (min-width: 768px) {
.prose:has(.coa-cert) .coa-cert { padding: 32px 28px 28px; }
}
/* ============================================================
8 · Certificates page: rows that read as requests
------------------------------------------------------------
The catalog directory (functions.php:1322) was hairline
rows, 6px of padding on the row with a 44px link floating
inside it, and a bare gold "Request" that could as easily be
a download. Certificates are on request by policy, so a row
has to look like the start of a correspondence, not a file.
Three moves:
Rows become quiet --tint cards on an 8px grid; the tint
does the separating the hairlines were doing badly, the
same trick the compound tiles use.
The action becomes a visible pill in the certificate
card's cream-and-gold language.
Every action whose href is a mailto: wears an envelope
glyph (section 9). The card's alternate branch, a hosted
report at functions.php:1291, is http and never matches,
so the icon is the honest tell: envelope means request,
no envelope means document.
Contrast, checked: --accent-deep #854d0e on --bg white is
6.9:1 and on --accent-tint #fdf8ee is 6.5:1; --muted catalog
numbers on --tint measure 4.6:1. All over the 4.5:1 floor.
============================================================ */
.prose:has(.coa-cert) .coa-list {
border-top: 0;
display: grid;
gap: 8px;
margin-top: 16px;
}
.prose:has(.coa-cert) .coa-item {
background: var(--tint);
border-bottom: 0;
border-radius: var(--radius-sm);
padding: 10px 12px 10px 16px;
gap: 12px;
}
.prose:has(.coa-cert) .coa-item > div { min-width: 0; }
.prose:has(.coa-cert) .coa-item-sub { font-size: .8125rem; }
.prose:has(.coa-cert) .coa-item a[href^="mailto:"] {
flex: none;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 16px;
border: 1px solid var(--accent-line);
border-radius: var(--radius-pill);
background: var(--bg);
color: var(--accent-deep);
font-size: .875rem;
font-weight: 600;
white-space: nowrap;
}
@media (hover: hover) {
.prose:has(.coa-cert) .coa-item a[href^="mailto:"]:hover {
border-color: var(--accent);
background: var(--accent-tint);
color: var(--accent-deep);
}
}
/* The certificate card's own request button takes the same
language: white pill, gold line, dark-gold label, envelope.
Outline-on-cream was the lightest thing on the card; the
page's single action should not be. */
.prose:has(.coa-cert) .coa-cert .btn[href^="mailto:"] {
background: var(--bg);
border-color: var(--accent-line);
color: var(--accent-deep);
font-weight: 600;
}
.prose:has(.coa-cert) .coa-cert .btn[href^="mailto:"]:hover {
border-color: var(--accent);
background: var(--accent-tint);
color: var(--accent-deep);
}
/* ============================================================
9 · The envelope, drawn inline
------------------------------------------------------------
Mask plus currentColor, so the glyph inherits each control's
text colour and its states. A data: URI is bytes in this
file, not a request, so the no-new-HTTP-requests rule holds.
============================================================ */
.prose:has(.coa-cert) .coa-cert .btn[href^="mailto:"]::before,
.prose:has(.coa-cert) .coa-item a[href^="mailto:"]::before {
content: "";
flex: none;
width: 15px;
height: 15px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='3'/%3E%3Cpath d='m2.5 6.5 9.5 7 9.5-7'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='3'/%3E%3Cpath d='m2.5 6.5 9.5 7 9.5-7'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* ============================================================
10 · Partner program: 375 sweep only
------------------------------------------------------------
The owner likes this page, so this section fixes measurements
and nothing else. Swept at 375: no horizontal overflow found
(the widest fixed content is the two stat cells at 158px each
and the proof figure at about 160px in a 287px measure); tap
targets already clear 44 (.faq-q 56px at styles.css:573, the
CTA 52px at 60-chrome.css:224, and the missing side gutter
shipped in 99-mobile.css 9.1). What failed was type:
.bento-cell p 13.4px (styles.css:1596) in a 121px-wide
column: styles.css:1587 keeps two columns
at 375, so benefit copy ran about 18
characters a line, six or seven lines deep.
.stat-cap span 12px (15-signature.css) under the hero
rates: a full sentence at caption size.
.proof-note 12px (60-chrome.css:231) on the dark card.
The two captions take the 13px floor 10-tokens.css names for
copy a buyer actually reads; the bento copy is body copy and
takes 15px, with the grid stacking one-up below 480 so 15px
has a measure to live in (about 37 characters a line). All
scoped to .partner-page (partner.php:315), all inside the
mobile query; desktop keeps its shipped look everywhere.
============================================================ */
@media (max-width: 767px) {
.partner-page .bento-cell p {
font-size: .9375rem;
line-height: 1.5;
}
.partner-page .stat-cap span { font-size: .8125rem; }
.partner-page .proof-note { font-size: .8125rem; }
}
@media (max-width: 479px) {
.partner-page .bento { grid-template-columns: 1fr; }
.partner-page .bento-cell {
min-height: 0;
padding: 18px 20px;
}
}
/* ============================================================
A8 · Mobile space
============================================================
Written off a measured audit rather than a scroll through
screenshots. tools/mobile-audit.js walks every page at 375px in
two-thirds-of-a-screen steps and measures the real ink extent of
every run of text against its neighbours and against the box it
sits in; tools/collide.js is the measuring part. Everything here
is a number that came back from it.
The headline number was on the shop. A phone opened /shop/ and
saw no products at all: the first card began at 846px on an
812px screen, behind 313px of chrome that was not merchandise.
A shop whose first screen contains no shop is the whole problem
the rest of this file is arranging around.
------------------------------------------------------------ */
@media (max-width: 767px) {
/* ----------------------------------------------------------
1 · The shop hero stops taking a whole screen
----------------------------------------------------------
249px for a headline and a lede, of which the lede alone was
102px because it ran to four lines. It is a shop page. The
promise belongs on it, but not at the size of a poster: the
first row of bottles is the argument, and it was below the
fold entirely.
Padding and leading only. The words are untouched and the
type is not shrunk, because the lede is a claim about purity
and diluent that has to stay legible.
---------------------------------------------------------- */
.shop-hero { padding-block: 20px 16px; }
.shop-hero .wrap > p {
margin-top: 8px;
line-height: 1.45;
}
/* ----------------------------------------------------------
2 · Search and sort share a line
----------------------------------------------------------
Two 44px controls stacked with a gap is 114px to say "find
something" and "order it". Side by side they are 44px and
lose nothing: the search field still takes every pixel it can
get, and the sort collapses to the width of its longest
option, which is the only width it ever needed.
---------------------------------------------------------- */
.store-tools {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
padding-bottom: 12px;
}
.store-tools .search-field { flex: 1 1 auto; min-width: 0; }
.store-tools .sort-field {
flex: 0 0 auto;
width: auto;
min-width: 104px;
max-width: 36%;
}
.store-tools .sort-field select { width: 100%; }
/* ----------------------------------------------------------
3 · Products before promotions
----------------------------------------------------------
Two full-width banners sat between the filters and the grid
and cost 199px, which is most of the reason the first bottle
was off screen. They are not being deleted, they are being
put after the merchandise, which is where an interstitial
belongs on a listing page.
order works because the wrap becomes a column flex container
here. Flex also stops the vertical margins collapsing, so the
gaps below are set explicitly rather than inherited from
whichever neighbouring margin used to win.
---------------------------------------------------------- */
body.woocommerce-shop main > .wrap {
display: flex;
flex-direction: column;
}
body.woocommerce-shop main > .wrap > * { order: 1; }
body.woocommerce-shop main > .wrap > .shop-promos {
order: 2;
margin-block: 26px 0;
}
.cat-strip { margin-block: 12px 14px; }
.result-count { padding-bottom: 8px; }
/* ----------------------------------------------------------
3b · The home hero admits there is a page under it
----------------------------------------------------------
The hero measured 639px and started at 154px, so it finished
at 793 on an 812px screen: nineteen pixels of the proof strip
showed. Not a hero that fills the fold, a hero that lands on
it exactly, which reads as the whole site. Nothing invited a
scroll and the first trust claim was hidden by a hair.
Taken out of the collage rather than the copy, because the
copy is the promise and the collage is decoration. Scaling
rather than resizing keeps every bottle's position, overlap
and bleed exactly as composed; the negative margin below it
gives back the space the scale no longer occupies, since a
transform does not change layout on its own.
639 becomes about 590, the hero ends near 744, and the whole
proof strip clears the fold: purity target, certificate, the
row that answers "why you". That row is worth more on the
first screen than 49px of bottle.
---------------------------------------------------------- */
.hero-v6 { padding-bottom: 14px; }
.hero-collage {
transform: scale(.88);
transform-origin: 50% 0;
/* 268px of box, 12% of it given back. */
margin-bottom: -28px;
}
/* ----------------------------------------------------------
4 · The card meta stops ending in an ellipsis
----------------------------------------------------------
"10 mg · Metabolic Research" measures 145px of text in a
134px column, so every card on the grid ended mid-word.
Twelve pixels of type fits it with a pixel to spare, and a
line that is complete reads as smaller than a line that is
cut, whatever the point size says.
---------------------------------------------------------- */
.product-card .card-meta {
font-size: .75rem;
letter-spacing: -.01em;
}
/* ----------------------------------------------------------
5 · The discount badge stops crowding itself
----------------------------------------------------------
line-height: 1 on "20%" gives the line box exactly the point
size, but Poppins draws a percent sign taller than that, so
the digits and the "off" underneath were left with three
pixels between them inside a 54px circle. The badge is a
sticker; it should look pressed on, not squeezed in.
---------------------------------------------------------- */
.promo-disc {
width: 58px;
height: 58px;
gap: 2px;
}
.promo-disc b { font-size: 1rem; line-height: 1.05; }
.promo-disc small { font-size: .6875rem; line-height: 1; }
/* ----------------------------------------------------------
6 · Label stacks that were one pixel apart
----------------------------------------------------------
.bundle-sub sat 2px under .bundle-qty and .bundle-each sat
1px under .bundle-unit. Both are a value with its caption, and
a caption that close stops reading as a separate thing and
starts reading as a second line of the number.
---------------------------------------------------------- */
.bundle-sub { margin-top: 5px; }
.bundle-each { margin-top: 4px; }
}
/* ------------------------------------------------------------
7 · The promo code sits in the middle of its pill
------------------------------------------------------------
letter-spacing puts its space after the last character as well
as between them, so "HALO20" carried 1.44px of tracking past
the final zero and the whole word sat that far left of centre
inside the gold pill. Adding the same amount back as a text
indent moves the ink to where the padding says it should be.
Not inside the media query: the pill is the same on every
width and so is the arithmetic.
------------------------------------------------------------ */
.promo-code {
justify-content: center;
/* Half the tracking, not all of it. The trailing space sits on one
side of the word, so the ink is off centre by half its width, and
indenting by the full .16em simply moved it a pixel the other way.
Measured after: 17.6px of pill to the left of the H, 17.6px to the
right of the final zero. */
text-indent: .08em;
}
/* ============================================================
v8 · The shelf, and the band above it
------------------------------------------------------------
Two changes, one cause.
The sitewide code is applied to every cart automatically now
(halotir_autoapply_promo), so the discounted figure is what
the cart charges rather than what it would charge if somebody
found a button and pressed it. Once that is true two things
follow that were not available before:
1. Prices can be struck. Every card, rail and buy box shows
the list price crossed out beside the charged price. The
old rule against this was right about the old mechanic and
does not survive it.
2. The offer bar has nothing to instruct. It states a fact, so
it stops needing two rows, a four-unit countdown ticking
seconds twenty-six days out, and a decorative halo to make
an occasion of it.
And the card was 443px tall on a 375px phone, which is 55% of
the viewport for one tile of ten, because six pieces of
information each had their own full-width row. Everything that
is a marker rather than a sentence moves onto the picture,
where there is empty tint on every SKU.
Loads last, after A8, so equal-specificity rules in the older
parts are simply overridden rather than fought with !important.
============================================================ */
/* ------------------------------------------------------------
0 ·
is not underlined here
------------------------------------------------------------
The charged price is marked up as / rather than two
spans, because that is the only thing in HTML that says which
of two prices is the live one, and a screen reader reading
"sixty four ninety nine, fifty one ninety nine" with no
relationship between them is a coin toss. The UA sheet
underlines , which on a price reads as a link.
------------------------------------------------------------ */
.was,
.now { text-decoration: none; }
del.was { text-decoration: line-through; }
/* ============================================================
1 · The product card
============================================================ */
/* ------------------------------------------------------------
1a · The tile
------------------------------------------------------------
New box, and the thing that makes the overlay layout possible.
The badges used to position against .product-card, which
worked only because the media happened to be the first child;
the proof pill has to sit on the bottom edge of the PICTURE,
and the picture is not the bottom of the card.
Square, not 4/5. On a 158px card that is 158px of art instead
of 197px, and the vial is drawn rather than photographed so it
loses nothing by being smaller: 39px of the 138px this rebuild
saves comes from here alone. It also puts the proof pill and
the price within one thumb-length of each other, which is the
pair the shopper is actually comparing across tiles.
------------------------------------------------------------ */
.card-tile {
position: relative;
isolation: auto; /* see the z-index note below: no new stacking context. */
}
.product-card .product-media,
.rail-card .rail-media .product-media {
aspect-ratio: 1 / 1;
}
/* The bottle keeps its presence at the smaller size, and rides a
little high so the proof pill lands on plain glass rather than
across the gold label band.
margin:auto is doing the centring and is not optional.
The vial is position:absolute with inset:0, which fills the tile
only for as long as nothing constrains its size. Capping the
height and the width here made the box smaller than its own
inset rectangle, which over-constrains the equation, and CSS
resolves that by discarding `right` and `bottom` in a
left-to-right document. Every bottle on the site pinned itself
to the top-left corner of its tile with 92px of dead space down
the right-hand side and 72px underneath: on a 330px tile that is
a quarter of the width, which is plainly visible and reads as
the art having slipped rather than as a margin.
With all four insets at 0, `margin: auto` centres an absolutely
positioned box on both axes, which is the one line that was
missing. translateY still does the optical lift on top of it. */
.product-card .product-media .vial,
.rail-card .rail-media .vial {
height: 104%;
max-width: 92%;
margin: auto;
transform: translateY(-5%);
}
@media (hover: hover) {
.product-card:hover .product-media .vial,
.rail-card:hover .rail-media .vial { transform: translateY(-5%) scale(1.05); }
}
/* ------------------------------------------------------------
1b · The two markers, opposite corners
------------------------------------------------------------
Deliberately unequal. They were two gold pills of the same
size once, which read as one striped lump on a bottle whose
own label is printed in gold.
The discount is live, sitewide, and the reason the price below
is struck, so it takes solid ink and rhymes with the Add
button. The featured marker is an annotation, so it is a quiet
warm pill. Different weight, different colour, different
corner: there is no contest between them to resolve.
Both are inert. .card-link covers the whole tile and these sit
above it on the z axis, so without pointer-events:none they
would eat a tap near the top of the card and do nothing with
it. .promo-badge already has that from 99-mobile; .card-flag
is new to this position and needs it too.
------------------------------------------------------------ */
.rail-badge,
.promo-badge {
top: 8px;
padding: 4px 9px;
font-size: .6875rem;
font-weight: 700;
letter-spacing: .01em;
font-family: var(--font-num);
font-variant-numeric: tabular-nums;
}
.promo-badge {
left: auto;
right: 8px;
background: var(--ink);
color: #fff;
box-shadow: 0 1px 2px rgba(28, 25, 23, .18);
}
.product-card .card-flag {
position: absolute;
top: 8px;
left: 8px;
z-index: 4;
pointer-events: none;
display: inline-flex;
align-items: center;
gap: 5px;
margin: 0;
padding: 4px 9px 4px 8px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, .92);
box-shadow: inset 0 0 0 1px var(--accent-line);
color: var(--accent-deep);
font-size: .625rem;
font-weight: 700;
letter-spacing: .02em;
white-space: nowrap;
}
/* Two absolutely positioned pills in the same 8px band cannot see
each other, so the flag has to be told where the badge starts.
The badge is 55px of pill plus its 8px inset; 70px leaves the
gap between them visible rather than merely non-overlapping.
Without this the flag simply ran underneath it and "Lab
favorite" was served as "Lab favorit". */
.product-card .card-flag {
max-width: calc(100% - 70px);
overflow: hidden;
text-overflow: ellipsis;
}
/* Below 480px it goes entirely, because a two-up phone grid gives
the tile about 130px and the guard above would clip the label
to "Lab f...", which is worse than absent. Of the two markers
the discount is the one that changes the price, so it is the
one that stays. The favourites are not lost with it: the shop
sorts them to the top of the grid and the product page still
says so on the page you land on. */
@media (max-width: 479px) {
.product-card .card-flag { display: none; }
}
/* The dot survives the move. It is what stops a small warm pill
from reading as a second discount flash. */
.product-card .card-flag::before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--accent);
flex: none;
}
/* ------------------------------------------------------------
1c · The proof pill, on the bottom edge of the picture
------------------------------------------------------------
This was two chips in the card body taking 66px of height, and
it was the single biggest reason the card ran to 443px: more
vertical space than the price and the button combined. On the
art it costs nothing, because the bottom of a vial cutout is
empty tint on all ten SKUs.
The pill is inert and the certificate link inside it is not.
.card-link covers the tile, so anything meant to be separately
clickable has to sit above it AND anything not meant to be
clickable has to let taps through, or the purity figure
becomes a 90px dead zone over the product link.
Nothing here creates a stacking context on purpose: .card-tile
and .card-proof both stay at z-index auto, so .cp-coa's 3 and
.card-link's 2 still compare directly in the card's context.
Giving either wrapper a z-index would trap the link's 3 inside
it and hand the tap back to the card.
------------------------------------------------------------ */
.card-proof {
position: absolute;
left: 8px;
right: 8px;
bottom: 8px;
z-index: 3;
pointer-events: none;
display: inline-flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
gap: 0;
margin: 0;
min-height: 26px;
padding: 0 4px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, .94);
box-shadow: 0 1px 3px rgba(28, 25, 23, .10);
}
/* Both halves lose the chip treatment they had as free-standing
objects: inside one pill they are two fields, not two buttons,
and two nested pills is the striped-lump problem again. */
.card-proof .cp-purity,
.card-proof .cp-coa {
min-height: 0;
padding: 3px 7px;
border-radius: var(--radius-pill);
background: none;
box-shadow: none;
font-size: .625rem;
font-weight: 700;
letter-spacing: 0;
line-height: 1.2;
white-space: nowrap;
}
.card-proof .cp-purity {
color: var(--vivid-sage);
display: inline-flex;
align-items: center;
gap: 3px;
}
/* The tick is the whole reason this reads as verification rather
than as a spec. It is decoration for a screen reader, which
gets the words either way. */
.card-proof .cp-purity::before {
content: "✓";
font-size: .6875rem;
line-height: 1;
}
/* The certificate is the one live control on the picture. */
.card-proof .cp-coa {
pointer-events: auto;
position: relative;
z-index: 3;
color: var(--ink-2);
text-decoration: none;
}
/* Hairline between the two fields, and only when there are two:
Halotir H2O carries no purity figure, so on that card the pill
is the certificate alone and a leading divider would be a rule
with nothing on its left. */
.card-proof .cp-purity + .cp-coa::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 1px;
height: 11px;
transform: translateY(-50%);
background: var(--line-2);
}
@media (hover: hover) {
.card-proof .cp-coa:hover { color: var(--accent-deep); box-shadow: none; }
}
/* "on request" is the wording and is not negotiable: certificates
are held per lot and emailed, and no card may imply a library
of published reports that does not exist. It is abbreviated
below 768px purely because 142px of pill cannot hold it, and it
is abbreviated rather than replaced. The visible word says less
than the truth there, never more, and the full phrase is still
in the accessibility tree and one tap away on the page it
links to. */
.card-proof .cp-more {
position: absolute;
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;
}
/* ------------------------------------------------------------
1c-bis · The proof pill on a rail, which is a grid
------------------------------------------------------------
styles.css:1559 carries
.rail-media > div { width: 100%; height: 100%;
display: grid; place-items: center; }
written when .rail-media had exactly one child, the wrapper
around the vial. Putting the proof pill inside .rail-media so
it could sit over the picture made it a second child, so
it took that rule too: 100% of the box, 94% white, and a
9999px radius. The result was a white disc the size of the
whole tile lying on top of the vial at 94% opacity, with the
two chips flung to opposite ends of a 313px grid. Every card
in "Most requested" and in the PDP's related rail rendered as
a blank pale tile.
The shop grid was untouched because those cards put the pill
in .card-tile, which is a plain positioned box. This is the
rail-only correction; .rail-media > .card-proof (0,2,0) beats
.rail-media > div (0,1,1), and styles.css is not edited.
top:auto matters as much as the rest. With height:100% and
bottom:8px both set, the used top resolves to -8px, which is
how the disc ended up hanging off the top edge as well.
------------------------------------------------------------ */
.rail-media > .card-proof {
width: auto;
height: auto;
top: auto;
display: inline-flex;
place-items: center;
}
@media (min-width: 768px) {
.card-proof .cp-more {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
clip-path: none;
}
/* The space in "COA on request" is in the markup and it still
disappeared, because .cp-coa is a flex container: the bare
word and the span are two flex items, and flex layout throws
the whitespace between items away. It read "COAon request".
Below 768 the span is out of flow and there is only one item,
so the gap is inert there and this can stay unconditional if
it ever needs to be. */
.card-proof .cp-coa { gap: .3em; }
.card-proof { min-height: 28px; }
.card-proof .cp-purity,
.card-proof .cp-coa { font-size: .6875rem; padding: 3px 9px; }
}
/* ------------------------------------------------------------
1d · The body, down to four things
------------------------------------------------------------
Name, what it is, what it costs, and the button. Everything
else moved onto the tile. .card-row is gone from the markup
entirely; the heading is a direct child now.
------------------------------------------------------------ */
.card-body {
padding: 11px 11px 12px;
gap: 0;
}
.card-body > h3 {
margin: 0;
font-size: .9375rem;
font-weight: 650;
line-height: 1.25;
letter-spacing: -.005em;
/* One line, with an ellipsis. Two-line clamping was what let a
long name push the price and the button down on one card in a
row and not the others; the full name is on the page the card
links to. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.product-card .card-meta {
margin: 2px 0 0;
font-size: .75rem;
line-height: 1.35;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ------------------------------------------------------------
1e · The price pair
------------------------------------------------------------
Struck list price, then the charged one. The order is the
order the whole category uses and it is the right one: the eye
lands on the struck figure, registers it as crossed out, and
arrives at the live number already knowing it is lower.
Deep gold on the live figure, matching .price-row .now in the
buy box. Crimson is the category convention and does read as
"reduced", but on a page whose only accent is gold it arrives
as a second accent and an error colour at once. The ink badge
over the picture is what carries the loudness.
------------------------------------------------------------ */
.card-price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 3px 7px;
margin: 8px 0 0;
font-family: var(--font-num);
line-height: 1.15;
white-space: normal;
}
.card-price .was {
font-size: .78rem;
font-weight: 500;
color: var(--muted);
text-decoration-thickness: 1.5px;
}
.card-price .now,
.card-price > .amount {
font-size: 1.0625rem;
font-weight: 700;
letter-spacing: -.01em;
color: var(--accent-deep);
}
/* No promotion running: one figure, and it is not a sale price,
so it takes ink rather than gold. */
.card-price > .amount { color: var(--ink); }
/* ------------------------------------------------------------
1f · The button
------------------------------------------------------------
Filled, not outlined. It is the only control in the body now
and the card has room for exactly one piece of emphasis down
there; an outlined pill under a gold price reads as the
quieter of two options when it is the only option.
------------------------------------------------------------ */
.product-card .qa-btn,
.rail-card .qa-btn {
margin-top: 10px;
height: 40px;
border-color: var(--ink);
background: var(--ink);
color: #fff;
font-size: .8125rem;
font-weight: 600;
}
.product-card .qa-btn:hover,
.rail-card .qa-btn:hover { background: #000; border-color: #000; }
.product-card .qa-btn.added,
.rail-card .qa-btn.added { background: var(--success); border-color: var(--success); }
/* 40px of pill with the hit area stretched back to 44px, rather
than a 44px pill. The card is short now and the four extra
pixels are worth more as air than as button; the overhang is
safe because .card-price sits 10px above it and is not a
control. Same pattern as .qa-btn::before was before 99-mobile
retired it, restored here for the same reason it existed. */
.product-card .qa-btn::before,
.rail-card .qa-btn::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 44px;
transform: translateY(-50%);
}
.product-card .qa-btn,
.rail-card .qa-btn { position: relative; }
.product-card .card-btn {
margin-top: 10px;
height: 40px;
}
@media (min-width: 1024px) {
.card-body { padding: 14px 14px 15px; }
.card-body > h3 { font-size: 1rem; }
.product-card .card-meta { font-size: .8125rem; }
.card-price .now { font-size: 1.15rem; }
.product-card .qa-btn,
.rail-card .qa-btn,
.product-card .card-btn { height: 42px; }
}
/* ------------------------------------------------------------
1g · The rails, kept in step
------------------------------------------------------------
The home rail and the related rail run the same component with
different wrappers, so the proof pill moved on all three
surfaces at once. Only the body selectors differ.
------------------------------------------------------------ */
.rail-card .rail-media { position: relative; }
.rail-body h3 {
font-size: .9375rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rail-cat {
font-size: .75rem;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rail-price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 2px 7px;
margin-top: 8px;
padding-bottom: 0;
line-height: 1.15;
}
.rail-price .was {
font-size: .78rem;
font-weight: 500;
color: var(--muted);
}
/* `>` and not a descendant selector, and that is the whole fix.
wc_price() renders
INSIDE the , so
`.rail-price .amount` reached the struck figure too and painted
it gold at the live figure's size. The rail showed "$24.99
$19.99" in two golds, with only the strikethrough telling them
apart. The card grid was already written with the child
combinator, which is why it was only ever wrong here. */
.rail-price .now,
.rail-price > .amount {
font-size: 1.0625rem;
font-weight: 700;
color: var(--accent-deep);
}
/* Belt and braces: whatever the live figure is styled as, the
struck one is muted and quiet. */
.rail-price .was,
.rail-price .was .amount,
.card-price .was,
.card-price .was .amount {
color: var(--muted);
font-weight: 500;
}
/* The caption belongs to the live figure, so it breaks to its own
line rather than sitting between the two prices. */
.rail-price small {
flex: 1 0 100%;
margin-top: 1px;
font-size: .7rem;
color: var(--muted);
}
.rail-actions { margin-top: 10px; }
/* ============================================================
2 · The offer bar
------------------------------------------------------------
89px and two rows on a phone, for a message that no longer
asks for anything. One row, one band height, and the
decoration stands down where it has no gutter to sit in.
--strip-h (58px) is kept rather than beaten. It is the shared
height of every band under the header and the reason the promo
bar, the free-shipping line and the research-use notice read
as a stack rather than as three unrelated accidents. 89 to 58
is 31px of a 812px viewport handed back, and the row fits
inside 58 comfortably.
============================================================ */
@media (max-width: 639px) {
.promo-bar {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: 9px;
padding-block: 8px;
padding-inline: 12px;
}
/* The campaign name goes. It is the least load-bearing thing in
the band, it was the reason the bar needed a second row, and
it survives on every wider screen. What a phone gets instead
is the sentence that changed: the discount is already on. */
.promo-eyebrow,
.promo-rule { display: none; }
.promo-line { flex: 0 1 auto; min-width: 0; }
.promo-offer {
font-size: 1.0625rem;
line-height: 1.1;
white-space: nowrap;
}
.promo-act {
flex: 0 1 auto;
min-width: 0;
gap: 7px;
/* nowrap, and this is the whole reason the bar was still 87px
after the row was rebuilt: .promo-act inherits wrap from
95-promo, so when its three children came to 217px in a
351px row it broke its own line inside a bar that was
already a single row, and the band grew to hold two. */
flex-wrap: nowrap;
}
.promo-code {
flex: none;
/* 10-tokens gives every promo code a 44px min-height, which is
the right instinct and the wrong shape here: 44px of solid
gold inside a 58px band is three quarters of the band. The
pill shrinks to 30 and the ::after below stretches the hit
area back over the full height of the row, which is the same
trade already made at .qa-btn and .cp-coa. */
min-height: 30px;
height: 30px;
padding: 0 12px;
font-size: .6875rem;
letter-spacing: .08em;
}
.promo-code::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 44px;
transform: translateY(-50%);
}
.promo-code { position: relative; }
.promo-auto {
flex: none;
font-size: .625rem;
letter-spacing: .01em;
}
/* "Applied automatically" is 144px of a 351px row. On a phone the
word that carries the meaning is the first one; the second is
the kind of precision a desktop has room for. */
.promo-auto-more { display: none; }
/* The end date is a desktop luxury. On a phone the row has
three objects already and a date twenty-six days out is the
one a shopper is least deciding on. It comes back the moment
it is actually deciding anything: main.js adds .is-urgent
inside the last 48 hours and the countdown takes the slot
the reassurance was in, because at that point the deadline
IS the reassurance's replacement. */
.promo-timer { display: none; }
.promo-bar.is-urgent .promo-timer { display: inline-flex; }
.promo-bar.is-urgent .promo-auto { display: none; }
/* The halo and the horizon need a reserved gutter to sit in.
On a phone there is no gutter, only the pills they were
crossing, and a ring drawn across a code is not decoration.
Both are pure ornament, so both simply stop below 640. */
.promo-sun,
.promo-bar::before { display: none; }
}
/* Under 360px the three parts still fit, but only just: measured on
a 320px viewport the row comes to 246px of content in a 300px
track. The offer gives back the two points it can spare so the
margin is a margin rather than a rounding error, and nothing is
dropped. (An earlier draft hid "Applied" here. It was both
unnecessary and inert: the base rule below sets display on the
same selector at the same specificity and later in the file, so
it won regardless. Deleting it beats moving it.) */
@media (max-width: 359px) {
.promo-bar { gap: 7px; padding-inline: 10px; }
.promo-offer { font-size: .9375rem; }
}
/* ------------------------------------------------------------
2b · "Applied", the line that replaced "Code"
------------------------------------------------------------
The pill used to be labelled with the word "Code", which named
the object beside it and told nobody anything. This says what
the store has already done with it, which is the only new
information the bar carries.
------------------------------------------------------------ */
.promo-auto {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-num);
font-size: .6875rem;
font-weight: 500;
letter-spacing: .02em;
color: rgba(232, 200, 126, .82);
white-space: nowrap;
}
.promo-auto::before {
content: "✓";
font-size: .75rem;
line-height: 1;
color: rgba(232, 200, 126, .95);
}
/* Not a countdown any more, most of the time. A date is calm, it
is identical for every visitor, and it therefore survives being
cached publicly for a week, which a clock never could. */
.promo-timer {
font-size: .6875rem;
letter-spacing: .02em;
padding: 4px 10px;
}
@media (min-width: 640px) {
.promo-bar { gap: 10px 18px; }
.promo-act { gap: 10px; }
}
/* ------------------------------------------------------------
2c · The tablet band, where the bar quietly went back to two
rows
------------------------------------------------------------
95-promo puts the bar on one row from 640 up, and that was
true until this rebuild changed what is on the row. "Applied
automatically" is 144px where the label it replaced ("CODE")
was about 40, and .promo-bar keeps flex-wrap:wrap, so the
overflow does not clip or squeeze, it silently folds.
Measured on an iPad at 768: the band is 753px with 24px of
left padding and 132px reserved on the right for the halo, so
597px of track for 625px of content. Twenty-eight pixels over,
and the bar renders 97px tall, which is taller than the phone
bar it was supposed to improve on and taller than the desktop
bar it is supposed to match.
Fixed by priority rather than by shrinking type. The bar has
five things to say and they do not rank equally: the offer,
the code and the fact that it is already applied are the
message; the occasion and the end date are trim. So between
640 and 899 the trim goes, exactly as it does on a phone, and
the halo's gutter comes in by 24px to buy the margin back.
That leaves 508px of track for 446px of content at the 640
edge and more everywhere above it. Full sentence and end date
return at 900, where 744px of track holds all 625px of it.
------------------------------------------------------------ */
@media (min-width: 640px) and (max-width: 899px) {
.promo-bar { padding-right: 108px; }
.promo-auto-more { display: none; }
.promo-timer { display: none; }
/* The gutter shrank, so the shape that lives in it has to as
well, or the ring crosses the code pill. Same proportion,
same amount outside the band, 24px less of it inside. */
.promo-sun { width: 128px; height: 128px; right: -30px; bottom: -50px; }
.promo-sun::before { width: 82px; height: 27px; }
}
/* ============================================================
3 · The buy box, and the sticky bar
------------------------------------------------------------
The offer line under the price used to be "Save 20% with code
HALO20 · tap to apply", with a real button. There is nothing
to tap now, so it is a sentence: no link colour, no underline,
no 44px target reserved for a control that no longer exists.
============================================================ */
.price-coupon.is-auto {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding: 5px 12px 5px 10px;
border-radius: var(--radius-pill);
background: var(--tint-sage);
box-shadow: inset 0 0 0 1px rgba(47, 122, 82, .22);
color: var(--vivid-sage);
font-size: .8125rem;
font-weight: 600;
line-height: 1.35;
}
.price-coupon.is-auto::before {
content: "✓";
flex: none;
font-size: .875rem;
line-height: 1;
}
.price-coupon.is-auto b {
color: inherit;
font-weight: 800;
letter-spacing: .04em;
}
/* Sticky-bar variant. .price-coupon-sm styled a .coupon-tap child
that no longer exists, so the pill treatment moves onto the
element itself. */
.price-coupon-sm.is-auto {
flex: none;
margin: 0;
padding: 3px 9px 3px 8px;
gap: 4px;
font-size: .6875rem;
font-weight: 700;
letter-spacing: .03em;
line-height: 1;
}
.price-coupon-sm.is-auto::before { font-size: .75rem; }
/* The bar quotes two figures now, on a strip that is one line of
chrome over the page. The struck one shrinks rather than the
live one. */
.pdp-bar-price .was { font-size: .8125rem; margin-right: 5px; }
/* ============================================================
4 · The shop hero, trimmed
------------------------------------------------------------
222px of headline and standfirst above a grid that the
visitor came to scroll. The reference has no hero on its
store page at all, which is one of the reasons theirs reads
as shorter before a single card is measured.
Trimmed rather than deleted. The H1 is the page's only
heading and the paragraph is one of the four places the
research-use condition is stated; losing either to save a
scroll would be trading a structural thing for a cosmetic
one. What goes is the slack: 37px of display type where 32
reads the same at arm's length, a 16px standfirst that ran
to four lines where 14.5px runs to three, and the padding
around both.
============================================================ */
@media (max-width: 767px) {
.shop-hero { padding-block: 16px 14px; }
.shop-hero h1 {
font-size: 2rem;
line-height: 1.14;
}
.shop-hero p {
margin-top: 7px;
font-size: .9rem;
line-height: 1.45;
}
}
/* ------------------------------------------------------------
3 · The coupon row that discounts nothing
------------------------------------------------------------
Set in the muted voice rather than the savings green: the row
is still a coupon row, but this half of it is an explanation,
not an amount, and it should not compete with the figure it is
explaining the absence of. See halotir_inert_coupon_amount().
------------------------------------------------------------ */
.coupon-inert {
color: var(--muted);
font-size: .8125rem;
font-weight: 400;
font-style: normal;
}
.sum-row.saving:has(.coupon-inert) { color: var(--muted); }
/* ------------------------------------------------------------
4 · A lone promo tile
------------------------------------------------------------
.shop-promos is a two-column grid from 1024 up and carried two
tiles, Build a box and Partner program. The first went with
that feature, which left the second sitting at half width with
an empty column beside it. One tile takes the full row.
------------------------------------------------------------ */
.shop-promos > .shop-promo:only-child { grid-column: 1 / -1; }
/* ============================================================
v8.1 — PDP tightening, the bump card, the offer pill
============================================================ */
/* ------------------------------------------------------------
The bottle sits lower on the product page
------------------------------------------------------------
The stage padding was 14px top and 40px bottom, which is a
26px upward bias on a square tile. That was written when the
chips overlapped further up the tile than they do now, and it
left the bottle floating in the top two thirds with a band of
empty tint under it. Evening the bias out drops it about 12px
without taking the clearance the chip row overlaps into. */
.pdp-stage img.vial,
.pdp-stage .vial { padding: 26px 14px 30px; }
/* ------------------------------------------------------------
The offer line stops being a pill when it stops being one line
------------------------------------------------------------
.price-coupon.is-auto is an inline-flex pill with a fully
round radius, which is correct for the sentence it was
designed around and wrong for the sentence it got. On a 375px
phone the copy wraps to three lines inside a shape whose ends
are still drawn as half-circles of the full box height, so it
renders as a green lozenge with enormous curved caps and text
ragged inside it.
Two changes, and the copy is the more important of them: the
sentence lost "Nothing to enter", which said the same thing
"applied automatically" had already said one clause earlier.
That alone takes it to two lines on a phone. The shape then
stops pretending: below 600px it is a left-aligned rounded
rectangle that wraps like a paragraph, with the tick pinned to
the first line rather than floating in the vertical middle of
a three-line block. */
/* Flex is the wrong display type for this box and always was.
The sentence contains a around the coupon code, so its
children are three flex items, not one paragraph: a text run,
a bold run, and the full stop after it. `gap: 6px` then pushed
them apart, which is why the desktop pill read "code HALO20 ."
with a visible space before the period, and why wrapping it on
a phone justified "HALO20" to the far right of its own line
with a hole in the middle of the sentence.
Block layout, with the tick lifted out of flow. Inline
children behave like a sentence again, the letter-spacing on
the code is cancelled on its right edge so it does not fake a
space of its own, and the wrap is an ordinary text wrap. */
.price-coupon.is-auto {
display: block;
position: relative;
gap: 0;
padding: 6px 13px 6px 30px;
line-height: 1.4;
}
.price-coupon.is-auto::before {
position: absolute;
left: 12px;
top: 6px;
}
/* Tracking adds its gap AFTER the last letter as well as between
letters, so a tracked run followed by a full stop always looks
like it has a space in it. Taken back off the right edge. */
.price-coupon.is-auto b { margin-right: -.04em; }
@media (max-width: 599px) {
.price-coupon.is-auto {
width: 100%;
padding: 9px 13px 9px 30px;
border-radius: 12px;
}
.price-coupon.is-auto::before { top: 9px; }
}
/* The sticky bar's variant has no and never wraps, so it
keeps the centred pill. Restated because the rules above are
written on the shared .is-auto class. */
.price-coupon-sm.is-auto {
display: inline-flex;
align-items: center;
position: static;
width: auto;
padding: 3px 9px 3px 8px;
gap: 4px;
border-radius: var(--radius-pill);
}
.price-coupon-sm.is-auto::before { position: static; }
/* ------------------------------------------------------------
The bump card's Add button and its dismiss X stop colliding
------------------------------------------------------------
The X was absolutely positioned at top:6px right:6px, and the
Add button is the last cell of a grid that ends at the same
right edge. A 30px circle at the top of that corner and a 40px
pill centred in it occupy the same 20px band, so on a phone
the X sat on top of the button: two controls, one target, and
whichever one the finger got was down to a few pixels.
Taking the X out of absolute positioning is the whole fix. It
becomes a fourth grid cell, aligned to the top of the row, and
the grid guarantees it cannot overlap its sibling because that
is what grid does. The invisible bleed target underneath it
still gives it 44px to be pressed by; only the geometry that
made it a floating sticker is gone.
minmax(0, 1fr) on the text column and not 1fr: the h4 wraps,
and a bare 1fr floors at the widest unbreakable word, which
would push the button off the edge on a narrow drawer instead
of wrapping. */
.cd-bump {
grid-template-columns: 56px minmax(0, 1fr) auto auto;
grid-template-rows: auto auto;
/* Two rows, and the thumbnail spans both. The eyebrow gets a
cell of its own rather than living inside the text column,
which is what lets the phone layout below hand it the full
width of the card without touching the markup again.
The card does not get taller for it: rows 1 and 2 come to
about 50px of content and the 56px thumbnail spanning them
is what sets the height, exactly as it did when all three
lines were stacked in one cell. */
grid-template-areas:
"media eyebrow add dismiss"
"media body add dismiss";
column-gap: 10px;
row-gap: 2px;
}
.cd-bump-media { grid-area: media; }
.cd-bump-eyebrow { grid-area: eyebrow; align-self: end; }
.cd-bump-body { grid-area: body; align-self: start; }
.cd-bump-add { grid-area: add; }
/* relative, NOT static, and the difference is the whole card.
50-cart.css gives this button a `::after { position: absolute;
inset: -7px }` as an invisible 44px tap target. An absolutely
positioned pseudo resolves against its nearest POSITIONED
ancestor, and taking the button out of position entirely
handed that job to .cd-bump, which is position:relative. The
bleed stopped being a 44px pad around a 30px X and became a
sheet 7px larger than the whole bump, laid over the heading,
the price and the Add button. Every click on the upsell was
landing on Dismiss: elementFromPoint at the dead centre of
"Add" returned .cd-bump-dismiss on every viewport tested.
position:relative keeps it in its grid cell exactly as static
did, since relative does not remove it from flow, and gives
the pseudo back the containing block it was written for. */
.cd-bump-dismiss {
grid-area: dismiss;
position: relative;
align-self: start;
justify-self: end;
top: auto;
right: auto;
margin-top: 2px;
}
/* Three lines: label, name, reason. The price is not among them
any more, it is the button, so nothing in this column is a
figure and the whole column can be set tight.
Everything here is a class and nothing is a bare element,
which is not a style preference. The old price line was a
and this file styled it as `.cd-bump p`, which is 0,1,1. A
`.cd-bump-eyebrow` is 0,1,0 and loses to it. Reintroducing the
eyebrow as a
would have silently taken the leader's 12px
floor back off it and set it at .875rem, from a rule written
for a price that no longer exists. There is no
left in the
card and no rule matching one.
The 12px floor is why the eyebrow is not 9px like theirs. That
floor is ours and it stays; the tracking and the caps do the
same work at a size that can be read. */
.cd-bump-body { min-width: 0; }
.cd-bump h4 { line-height: 1.3; }
.cd-bump-eyebrow {
display: block;
line-height: 1.2;
}
.cd-bump-sub {
display: block;
margin-top: 1px;
font-size: .75rem;
line-height: 1.3;
color: var(--muted);
/* One line or an ellipsis, never two. The row's height is set
by the 56px thumbnail beside it, and a descriptor that wraps
is the one thing in this card that can push past it. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* A glyph and a figure, so it has to be a flex box: a button
with two children and no display of its own centres them as
inline content and drops the icon a hair below the numeral's
baseline. */
.cd-bump-add {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0 15px;
white-space: nowrap;
}
.cd-bump-add svg {
width: 13px;
height: 13px;
flex: 0 0 13px;
stroke-width: 2.2;
}
/* ------------------------------------------------------------
The bump on a phone
------------------------------------------------------------
Three columns instead of four, and the eyebrow takes the whole
top row.
The numbers, at 375px: the card is 343px wide and 321px of
that is usable. Nested in the text column the eyebrow had
112px to render 159px of "COMPLETE YOUR ORDER", so it ran out
from under its own cell and across the price button. Shaving
the tracking, the thumbnail, the gaps and the button padding
together recovered about 42px of the 47px needed, which is
both a lot of fiddling and still short, and it would have
failed outright at 320px.
Giving it a row costs one 14px line and about 10px of card
height, and every string renders whole at the size the type
floor asks for. The dismiss rides the end of that row, so it
costs nothing at all.
------------------------------------------------------------ */
@media (max-width: 560px) {
.cd-bump {
grid-template-columns: 48px minmax(0, 1fr) auto;
grid-template-areas:
"eyebrow eyebrow dismiss"
"media body add";
column-gap: 9px;
}
.cd-bump-media { width: 48px; height: 48px; }
}
/* ------------------------------------------------------------
Three tiers, so three columns
------------------------------------------------------------
The ladder lost a rung: 1 / 3+ / 10+ where it used to be
1 / 2 / 3+ / 10+. The grid was written for four and neither
of its two shapes survives an odd count. Two-up on a phone
left the bulk tile alone on a second row at half width, and
repeat(4, 1fr) on desktop left a quarter of the row empty
with three tiles hugging the left edge.
One column count at every width, because three is a number
that works at both: three tiles across a 375px phone is about
107px each, which is the same tile width the two-up grid was
already giving the 320px case. */
.bundle-rows { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 900px) {
.bundle-rows { grid-template-columns: repeat(3, 1fr); }
}
/* The figures stack instead of running together. `each` is a
unit, `save $194.90` is the argument, and at 107px they were
never going to share a line. Kept at the same total height as
the old two-line block by taking the leading down. */
.bundle-each,
.bundle-save { display: block; line-height: 1.3; }
.bundle-save { color: var(--accent-deep); font-weight: 650; }
@media (max-width: 479px) {
/* Narrower tiles, so the two figures that set the tile's
minimum width both come down a step. Everything else in the
tile already wraps. */
.bundle-unit { font-size: 1rem; }
.bundle-each,
.bundle-save { font-size: .625rem; }
.bundle-vials { height: 38px; }
.bundle-card { padding: 14px 6px 12px; min-height: 138px; }
}
/* ==========================================================================
B2-pay-checkout.css — paying on the checkout page, before the order
Rendered by Halotir_Gateway_Manual::payment_fields() inside WooCommerce's
#payment .payment_box, for halotir_zelle and halotir_crypto only.
This is the panel a buyer actually sends money from, so it is not the
compact hint text .payment_box was built for. 50-cart.css sizes that box
for one line of gateway description; everything here widens it back out
and then lays out a two-step flow inside it.
The sibling file is 80-pay.css, which styles the same information after
the order exists. The two are deliberately separate: the post-order panel
is a receipt and can be quiet, this one is a task and cannot be.
========================================================================== */
/* Give the box room. Scoped with :has() so every other gateway's payment
box keeps the compact treatment it was designed for. */
body.woocommerce-checkout #payment div.payment_box:has(.pay-co) {
padding: 16px;
font-size: 1rem;
color: var(--ink-2);
background: var(--panel-2, var(--tint));
border: 1px solid var(--line);
}
.pay-co-intro {
margin: 0 0 14px;
font-size: 0.875rem;
line-height: 1.6;
color: var(--ink-2);
}
.pay-co-intro p {
margin: 0;
}
/* ---------- the two steps ---------- */
.pay-co-steps {
margin: 0;
padding: 0;
list-style: none;
counter-reset: none;
}
.pay-co-step {
position: relative;
display: grid;
/* minmax(0, 1fr) rather than 1fr: the body holds a 42-character wallet
address, and an implicit auto track floors at min-content and pushes
the whole checkout wider than the phone. */
grid-template-columns: 24px minmax(0, 1fr);
gap: 0 12px;
padding-bottom: 22px;
}
.pay-co-step:last-child {
padding-bottom: 0;
}
/* The rail joining step 1 to step 2. Sits behind the numbers, which carry
their own background so the line appears to stop at each of them. */
.pay-co-step:not(:last-child)::before {
content: "";
position: absolute;
top: 26px;
bottom: 6px;
left: 11px;
width: 2px;
background: var(--line);
}
/* Outlined and muted, not a filled black disc. The checkout around this
panel already numbers its own steps with filled black discs, and a
matching marker two levels in reads as a fifth peer step rather than as
a sub-step of Payment. Same ordering cue, visibly subordinate. */
.pay-co-num {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 24px;
height: 24px;
border: 1.5px solid var(--line-2, var(--line));
border-radius: 50%;
background: var(--bg);
color: var(--muted);
font-family: var(--font-num, inherit);
font-size: 0.75rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.pay-co-body {
min-width: 0;
padding-top: 3px;
}
.pay-co-lede {
margin: 0 0 14px;
font-size: 1rem;
font-weight: 650;
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--ink);
}
/* ---------- where the money goes ---------- */
.pay-co-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.pay-co-grid > * {
min-width: 0;
}
.pay-co-rows {
margin: 0;
padding: 0;
list-style: none;
}
.pay-co-rows li {
display: flex;
gap: 14px;
align-items: baseline;
justify-content: space-between;
padding: 9px 0;
border-bottom: 1px solid var(--line);
}
.pay-co-rows li:first-child {
padding-top: 0;
}
.pay-co-rows li:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.pay-co-k {
flex: none;
font-size: 0.8125rem;
color: var(--muted);
}
.pay-co-v {
min-width: 0;
font-size: 0.9375rem;
font-weight: 650;
color: var(--ink);
text-align: right;
overflow-wrap: anywhere;
}
/* The amount and the reference: the two strings a buyer retypes into a
banking app. Size rather than colour, because a tinted row reads as a
promotion and this is an instruction. */
.pay-co-rows li.is-key .pay-co-v {
font-family: var(--font-num, inherit);
font-size: 1.0625rem;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.pay-co-block-k {
margin: 14px 0 6px;
font-size: 0.8125rem;
color: var(--muted);
}
/* Monospace, because a proportional face makes 0/O and 1/l the same shape
and there is no undo on a mistyped wallet address. */
.pay-co-block-v {
margin: 0;
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--bg);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.8125rem;
line-height: 1.55;
color: var(--ink);
overflow-wrap: anywhere;
user-select: all;
}
.pay-co-qr {
margin: 0;
text-align: center;
}
.pay-co-qr img {
display: block;
width: 160px;
height: 160px;
max-width: 100%;
margin: 0 auto;
padding: 9px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
/* Always white, never a theme token. A QR needs light modules under the
dark ones to scan, and a panel colour is no guarantee of that. */
background: #fff;
}
.pay-co-qr figcaption {
margin-top: 7px;
font-size: 0.75rem;
color: var(--muted);
}
.pay-co-note {
margin: 14px 0 0;
font-size: 0.875rem;
line-height: 1.6;
color: var(--ink-2);
}
.pay-co-note b {
font-weight: 650;
color: var(--ink);
}
.pay-co-note.is-quiet {
margin-top: 8px;
font-size: 0.8125rem;
color: var(--muted);
}
/* ---------- confirming it ---------- */
.pay-co-field {
margin: 0 0 14px;
}
.pay-co-field label {
display: block;
margin-bottom: 6px;
font-size: 0.8125rem;
font-weight: 600;
color: var(--ink);
}
/* A chip, not a second label. At the label's own size this wraps onto a
line of its own on a phone and reads as another field name. */
.pay-co-opt {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
border-radius: var(--radius-pill);
background: var(--tint);
color: var(--muted);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
vertical-align: 1px;
}
body.woocommerce-checkout #payment .pay-co-input {
width: 100%;
padding: 12px 13px;
border: 1px solid var(--line-2, var(--line));
border-radius: var(--radius-sm);
background: var(--bg);
/* 16px exactly. Anything smaller and iOS Safari zooms the page on focus,
which on a checkout drops the buyer somewhere they did not ask to be. */
font-size: 16px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
color: var(--ink);
}
.pay-co-hint {
display: block;
margin-top: 6px;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--muted);
}
/* The gate. A card rather than a bare checkbox: this is the control that
places the order, and it has to look like a decision. */
.pay-co-tick {
display: flex;
gap: 12px;
align-items: flex-start;
margin: 0;
padding: 14px;
border: 1px solid var(--line-2, var(--line));
border-radius: var(--radius-sm);
background: var(--bg);
cursor: pointer;
transition: border-color var(--motion, 200ms ease),
background-color var(--motion, 200ms ease),
box-shadow var(--motion, 200ms ease);
}
body.woocommerce-checkout #payment .pay-co-tick input[type="checkbox"] {
flex: none;
width: 22px;
height: 22px;
margin: 0;
accent-color: var(--accent);
cursor: pointer;
}
.pay-co-tick > span {
font-size: 0.9375rem;
line-height: 1.45;
color: var(--ink);
}
.pay-co-tick b {
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.pay-co-tick:hover {
border-color: var(--ink-2);
}
/* Confirmed. The colour change is the receipt for the tap, and it is the
only thing on the page that says the order can now go through. */
.pay-co-tick:has(input:checked) {
border-color: var(--accent);
background: var(--accent-tint, var(--tint));
}
.pay-co-tick:focus-within {
box-shadow: var(--ring);
}
/* ---------- wider screens ---------- */
@media (min-width: 560px) {
body.woocommerce-checkout #payment div.payment_box:has(.pay-co) {
padding: 20px 22px;
}
.pay-co-step {
grid-template-columns: 28px minmax(0, 1fr);
gap: 0 14px;
}
.pay-co-step:not(:last-child)::before {
top: 30px;
left: 13px;
}
.pay-co-num {
width: 28px;
height: 28px;
font-size: 0.8125rem;
}
/* The QR moves alongside once the rows can spare the width. */
.pay-co-grid {
grid-template-columns: minmax(0, 1fr) auto;
gap: 24px;
}
.pay-co-qr img {
width: 172px;
height: 172px;
}
}
/* ============================================================
Research-use-only gate
------------------------------------------------------------
The confirmation that stands between the water SKU and the
cart. Structure and copy are in inc/ruo-gate.php, behaviour is
in assets/ruo.js, and the reasoning for all three is in the
header of the PHP file.
Two things about this file are load-bearing rather than
cosmetic.
The z index is 110: above --z-drawer (100), because the cart
drawer's own upsell is one of the paths that opens this and
the dialog has to land on top of it, and below --z-toast
(120), because an add that fails still has to be able to say
so. That is the same slot the category leader's sits in, for
the same reason.
And the scroll lock is a SECOND class, not a shared one. When
this opens over the drawer the page is already held still by
body.drawer-open; closing the dialog must not hand the scroll
back while the drawer is still up. Two independent rules, each
removed by its own owner, and the page stays locked until the
last one lets go.
============================================================ */
body.ruo-open { overflow: hidden; }
.ruo-gate {
position: fixed;
inset: 0;
z-index: 110;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
/* The panel is short and the viewport rarely is, but a 380px
card in a 420px landscape phone still has to be reachable. */
overflow-y: auto;
}
.ruo-gate[hidden] { display: none; }
.ruo-scrim {
position: fixed;
inset: 0;
background: rgba(28, 25, 23, .34);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
opacity: 0;
transition: opacity 220ms var(--ease-soft);
}
.ruo-gate.open .ruo-scrim { opacity: 1; }
.ruo-panel {
position: relative;
width: 100%;
max-width: 380px;
margin: auto;
padding: 26px 24px 22px;
background: var(--bg);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
text-align: left;
opacity: 0;
transform: translateY(10px) scale(.97);
transition:
opacity 240ms var(--ease-out),
transform 240ms var(--ease-out);
}
.ruo-gate.open .ruo-panel {
opacity: 1;
transform: none;
}
/* ---------- close ---------- */
.ruo-x {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: none;
color: var(--muted);
cursor: pointer;
transition: background var(--motion), color var(--motion);
}
.ruo-x:hover { background: rgba(28, 25, 23, .05); color: var(--ink); }
.ruo-x svg { width: 15px; height: 15px; }
/* ---------- copy ---------- */
.ruo-eyebrow {
/* Tracking this wide puts its own gap after the last letter as
well as between them, which is why nothing is allowed to sit
on the same line as this. It is a lone word on a row of its
own and stays that way. */
font-family: var(--font-num);
font-size: .625rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--muted);
/* Room for the close button, which overlaps this row. */
padding-right: 34px;
}
.ruo-title {
margin-top: 6px;
font-size: 1.3125rem;
font-weight: 600;
line-height: 1.2;
color: var(--ink);
}
.ruo-title em {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
/* Deliberately not the accent. A gold flourish on a legal
attestation reads as decoration, and decoration is the cue
that tells people a box is safe to dismiss unread. */
color: inherit;
}
.ruo-lede {
margin-top: 9px;
font-size: .875rem;
line-height: 1.6;
color: var(--ink-2);
}
/* ---------- the three lines ---------- */
.ruo-terms {
margin-top: 16px;
list-style: none;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.ruo-terms li {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
font-size: .8125rem;
line-height: 1.4;
color: var(--ink-2);
}
.ruo-terms li + li { border-top: 1px solid var(--line); }
.ruo-terms svg {
width: 14px;
height: 14px;
flex: 0 0 14px;
/* Muted, not accent-gold and not green. Every line here is a
prohibition, and a bright approving tick beside "Not for
human use" says the opposite of the sentence next to it. */
color: var(--muted);
}
.ruo-fine {
margin-top: 12px;
font-size: .6875rem;
line-height: 1.5;
color: var(--muted);
}
/* ---------- actions ---------- */
/* Nothing here but width and the gap above it. .btn already sets
the 48px min-height, the pill radius and the type; restating any
of that would be a second copy of the button system that drifts
the first time the real one is touched. */
.ruo-ok {
width: 100%;
margin-top: 16px;
}
.ruo-cancel {
width: 100%;
height: 36px;
margin-top: 6px;
border: 0;
background: none;
font-family: var(--font);
font-size: .875rem;
color: var(--muted);
cursor: pointer;
transition: color var(--motion);
}
.ruo-cancel:hover { color: var(--ink); }
/* ---------- small screens ---------- */
@media (max-width: 419px) {
.ruo-panel { padding: 24px 18px 20px; }
.ruo-title { font-size: 1.1875rem; }
}
@media (prefers-reduced-motion: reduce) {
.ruo-scrim,
.ruo-panel { transition: none; }
.ruo-panel { transform: none; }
}
/* ============================================================
Checkout · one promo row, not two
------------------------------------------------------------
WooCommerce's coupon field now renders inside .co-promo rather
than as its own band underneath it (see the comment above
halotir_checkout_promo_row()). That means three things have to
be re-laid-out here: the row becomes a wrapping flex line so
the link can sit beside the applied sentence, the notice
WooCommerce prints has to stop looking like a notice, and the
form has to drop onto a full-width line of its own when it
opens.
============================================================ */
.co-promo { flex-wrap: wrap; }
/* Both of these are full-width rows under the sentence. order
puts the form last no matter which way WooCommerce emitted
them, so the note never lands between the link and the field
it opens. */
.co-promo .woocommerce-form-coupon-toggle,
.co-promo form.checkout_coupon { flex: 1 0 100%; }
.co-promo form.checkout_coupon { order: 3; }
.co-promo-note { order: 4; }
/* The toggle is the exception: it is three words and it belongs
ON the sentence's line, pushed to the far end. */
.co-promo .woocommerce-form-coupon-toggle {
flex: 0 0 auto;
margin-left: auto;
order: 2;
}
/* The toggle is a plain link now (see the template override at
woocommerce/checkout/form-coupon.php). Colour comes from the
row so it turns green with it once a code is on. */
.co-promo .showcoupon {
color: inherit;
font-size: .875rem;
font-weight: 600;
line-height: 1.4;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
cursor: pointer;
}
.co-promo .showcoupon:hover { color: var(--ink); }
/* Applying a second code drops WooCommerce's success notice in
through $form.before(), which lands it inside this row. Same
treatment: a line of text, not a band inside a band. */
.co-promo .woocommerce-message,
.co-promo .woocommerce-info {
flex: 1 0 100%;
order: 3;
margin: 8px 0 0;
padding: 0;
border: 0;
background: none;
color: inherit;
font-size: .875rem;
line-height: 1.4;
}
.co-promo .woocommerce-message::before,
.co-promo .woocommerce-info::before { display: none; }
.co-promo-note {
flex: 1 0 100%;
margin-top: 6px;
font-size: .8125rem;
line-height: 1.45;
color: var(--ink-2);
}
.co-promo.is-on .co-promo-note { color: var(--ink-2); }
/* The field itself, on its own full-width line under the sentence.
WooCommerce hides it until .showcoupon is clicked and then
slideToggles it, so display is not ours to set; everything else
is. Capped at 420px because a promo code is six characters and a
field that runs the whole width of a desktop row reads as the
main event, which it is not. */
body.woocommerce-checkout .co-promo form.checkout_coupon {
display: flex;
align-items: flex-start;
gap: 8px;
max-width: 420px;
margin: 10px 0 0;
padding: 0;
border: 0;
background: none;
}
body.woocommerce-checkout .co-promo form.checkout_coupon p { margin: 0; }
.co-promo .co-code-field { flex: 1 1 auto; min-width: 0; }
.co-promo .co-code-go { flex: 0 0 auto; }
/* Not .form-row, so none of checkout's 52px field styling reaches
it: this one is sized to sit level with .co-promo-tap beside it.
16px font is the iOS zoom floor and is not negotiable. */
body.woocommerce-checkout .co-promo #coupon_code {
width: 100%;
min-height: 40px;
padding: 9px 16px;
border: 1px solid var(--line-2);
border-radius: var(--radius-pill);
background: var(--bg);
color: var(--ink);
font-size: 16px;
line-height: 1.25;
transition: border-color var(--motion);
}
body.woocommerce-checkout .co-promo #coupon_code:focus {
outline: none;
border-color: var(--ink);
}
body.woocommerce-checkout .co-promo #coupon_code::placeholder { color: var(--muted); }
.co-promo .co-code .co-promo-tap { white-space: nowrap; }
/* checkout.js appends this to the field's wrapper on a bad code. */
.co-promo .coupon-error-notice {
display: block;
margin: 6px 0 0;
padding: 0 16px;
font-size: .8125rem;
line-height: 1.4;
color: #dc2626;
}
body.woocommerce-checkout .co-promo #coupon_code.has-error { border-color: #dc2626; }
/* ============================================================
B4 · Touch targets and the type floor
============================================================
Everything here came out of one measurement pass: a real
mobile Chrome at 390 and 375 CSS pixels, walking fourteen
pages plus the open cart drawer and the checkout, recording
the used box of every control and the computed size of every
text run. Two lists came back.
The first is controls whose smallest side measured under 44
pixels. Forty four is not a style preference, it is the
figure both platform guidelines land on and the one WCAG
2.5.8 writes down, and the reason it exists is that a thumb
is not a cursor. Inline links inside a sentence are excluded
by that success criterion and are excluded here too: giving
a link in a paragraph a 44px hit area means overlapping the
lines above and below it, which trades one miss for two.
The second is text under 12 pixels. 10-tokens.css already
sets the house floor, 11px for a tracked uppercase badge and
13px for anything a buyer has to read, with the reasoning
written out there. The runs corrected below are ones that
were set before that floor existed or by a later part that
did not know about it. Nothing here lowers a size, and
nothing here changes a size that was already at the floor on
purpose: the promo bar's 11px code pill, the nav drawer's
group headings and the dose labels are all deliberate and
all left alone.
This part loads last, so equal specificity resolves here.
Where a rule below has to out-rank a descendant selector in
the base sheet the extra qualifier is noted on the rule.
============================================================ */
/* ------------------------------------------------------------
1 · The upsell card in the cart drawer
------------------------------------------------------------
The card offers reconstitution solution beside the vial that
needs it, and it was carrying two circular objects on its
right side: the black add button, and a dismiss drawn as a
white disc with a hairline ring. The disc is the louder of
the two at a glance, because it is the lightest shape on a
cream card, and it is attached to the one action on the card
nobody is being asked to take.
The same drawer already has the answer four pixels above it.
Every line item carries .cd-x, which is a bare grey glyph on
no background, and it reads as exactly what it is. The
dismiss now matches it. This is a subtraction, not a new
treatment: no disc, no ring, same muted ink, same glyph size
as the sibling it sits under.
The geometry is untouched on purpose. B1-shop-v8.css:1035
documents what happens when this button stops being
positioned: its ::after bleed hands its containing block to
.cd-bump, which is position:relative, and the 7px halo
becomes a sheet over the entire card that swallows every tap
aimed at the add button. It stays positioned. Only paint
changes here.
------------------------------------------------------------ */
.cd-bump-dismiss {
border: 0;
background: none;
color: var(--muted);
/* .cd-x on the line items above renders at 17px. Matching it is
the point of the rule; 13px on no background reads as a stray
character rather than a control. */
font-size: 17px;
}
.cd-bump-dismiss:active { color: var(--ink); }
@media (hover: hover) {
.cd-bump-dismiss:hover { background: none; color: var(--ink); }
}
/* Measured 91 by 40. The button is the whole reason the card is
in the drawer and it was the shortest control on it. */
.cd-bump-add {
height: 44px;
min-height: 44px;
}
/* ------------------------------------------------------------
2 · Controls that measured short
------------------------------------------------------------ */
/* 40 by 44. 10-tokens.css raised the height of every drawer close
and left the width at the 40 the base sheet set, so the button
came out four pixels narrow on one axis only. width:40px in the
base stands; a larger min-width simply wins the used value. */
.cd-close { min-width: 44px; }
/* 134 by 34. 8px of padding on an 18px line. */
.cd-promo-toggle { min-height: 44px; }
/* 40 by 40, absolutely placed in the corner of the checkout's
summary sheet. Growing it four pixels on each axis would push
the glyph off the optical centre of the corner, so the offsets
come in by two to hold it where it already reads. */
.hl-sheet-x {
width: 44px;
height: 44px;
top: 12px;
right: 8px;
}
/* The coupon toggle at the top of checkout measured 98 by 40, and
the coupon remove link in the totals 41.6. Both are corrected at
the rule that owns them, 50-cart.css:2419, rather than here: that
rule already pairs a floor with a negative margin so the row does
not move, and a second floor in a later part would have been an
override arguing with a decision instead of correcting it. */
/* 94 by 40, inside WooCommerce's own cart notice. Stock button,
stock markup, so this is the one place the fix is a floor
rather than a redesign. */
body.woocommerce-checkout .woocommerce-message .button,
body.woocommerce-checkout .woocommerce-info .button {
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* The "ship to a different address" row. The input is 20 by 20 and
the label that wraps it, which is what actually receives the tap,
measured 22 pixels tall. The checkbox keeps its size; the row it
sits in becomes a row. */
body.woocommerce-checkout .woocommerce-form__label-for-checkbox.checkbox {
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
margin: 0;
}
body.woocommerce-checkout .woocommerce-form__label-for-checkbox.checkbox
.woocommerce-form__input-checkbox {
flex: none;
width: 20px;
height: 20px;
margin: 0;
}
/* The certificate link inside the proof pill, 31 by 18, and the
smallest real target measured anywhere on the site. It sits on
the picture with .card-link underneath it, which is why it was
never given a bigger box: every pixel it grows is a pixel the
card link stops receiving.
So it does not grow. The visible pill is unchanged and an
invisible bleed carries the hit area to 49 by 44 around it,
which is the same trade 10-tokens.css already made at .box-coa
and 99-mobile.css made at the promo code pill. ::after, not
::before: the hairline divider between the purity figure and
the certificate is a ::before and is still there.
pointer-events is inherited from .cp-coa, which sets auto
against the pill's none, so the bleed is live without a second
declaration. z-index is not restated for the same reason it is
not set on the wrappers: giving this element a stacking context
would trap its own 3 and hand the tap back to the card. */
.card-proof .cp-coa::after {
content: "";
position: absolute;
inset: -13px -9px;
}
/* ------------------------------------------------------------
3 · The type floor, where later parts fell through it
------------------------------------------------------------ */
/* 10px. Set by the proof-pill rebuild in B1-shop-v8.css, which
shrank both fields to fit a 26px pill on the bottom edge of the
picture. The pill has the room for the badge floor: at 11px the
two fields measure 120.6px inside a pill that is 141.5px wide on
a 375px viewport and 149px on a 390px one, and neither wraps. */
.card-proof .cp-purity,
.card-proof .cp-coa { font-size: .6875rem; }
.card-proof .cp-purity::before { font-size: .75rem; }
/* 11.2px. "per vial" is the caption that tells a buyer the price
is not for the box, which makes it the readable tier, not the
badge tier. 40-plp-home.css had it right at 12px and the rail
rebuild took it back down. */
.rail-price small { font-size: .75rem; }
/* 11.52px, and it is a heading on a compliance block. The sitewide
FDA notice had the identical problem and 10-tokens.css settled
it at 13px with the reasoning written out: a disclaimer nobody
can read is a disclaimer that is not really there. Same tier,
same figure. */
.research-notice h3 { font-size: .8125rem; }
/* 9.92px, and the only text on the site under ten pixels. It is a
numeral in an 18px disc, so there is room; the size was set
before the floor existed. */
.cart-count { font-size: .6875rem; }
/* 11px, in the sticky bar under the PDP. Sentence case, so it is
read rather than scanned, which puts it above the badge tier.
12 rather than 13 because the bar is one line of chrome and the
figure beside it is the thing being read first. */
.price-coupon-sm.is-auto { font-size: .75rem; }
/* The three sub-11px runs on a product page, found on the second
pass once the audit was pointed at the real product permalinks
rather than at a slug that had been 404ing since the catalogue
was renamed. */
/* 10px, under a 33.6px figure, in the "most researchers save"
panel. Tracked uppercase, so it is the badge tier and 11 is its
floor. The figure above it is doing all the shouting either way,
which is the argument for raising the caption rather than for
leaving it as the smallest thing in the block. */
.mws-fig small { font-size: .6875rem; }
/* 10px each, in the bundle tiles. B1-shop-v8.css:1167 takes both
figures down a step under 480px so three tiles fit across, and
the arithmetic there was right about the width and wrong about
which line to spend it on: "save $194.90" is a dollar amount a
buyer is deciding on, not a unit label. Measured at 390px each
tile has 95px of track inside its padding and the longest string
in the set, "save $135.00", renders 73.4px at 12px on one line,
so the step down was buying room that was never needed. */
@media (max-width: 479px) {
.bundle-each,
.bundle-save { font-size: .75rem; }
}
/* 9.1px, and the smallest text anywhere on the site: a formula
subscript at .7em of a 13px monospace run. Subscripts are meant
to be smaller than their line, so the fix is not to flatten them
but to give the line they sit on something to be smaller than.
The sequence beside it gets the same rise and needs it more: a
forty character amino-acid string at 13px monospace is the
hardest thing to read on the page, and it already breaks on
words, so a larger size costs lines rather than overflow. */
.spec-formula,
.spec-seq { font-size: .875rem; }
.spec-formula sub { font-size: .72em; }
/* ============================================================
Bottles: rasterise once, then only move
------------------------------------------------------------
Reported as the bottle images "shaking and glitching", which is
a different fault from the gate field sliding on a URL-bar
transition (96-gate.css) and needed a different fix. That one
was geometry. This one is rasterisation.
Every animated bottle on this site is the same shape:
a wrapper that animates `transform`, forever
-> an ![]()
carrying `filter: drop-shadow(...)`
.hero-vial, .gs and .rain-tile are all built that way, and on
the rails and the product page the animation and the filter sit
on the same element. A filtered element inside a continuously
transformed ancestor is not something a browser can composite
by moving a finished layer: unless the subtree is promoted, it
re-runs the filter and re-samples the source bitmap every
frame, at a slightly different subpixel offset each time. On a
phone that lands as edge crawl along the glass and the cap,
which is exactly what "glitching" describes.
Measured on the live home page, worst first: the hero bottles
draw a 1100px-tall cutout into boxes 88 to 212px tall, which is
2.6x to 6.3x more source pixels than a 2x screen can use, and
every one of those resamples was being redone per frame. The
rain tiles are 3x over on the small cutout. Oversampling did
not cause the shimmer, but it is what made each redundant
resample expensive enough to see.
`will-change: transform` is the whole fix: it promotes the
subtree, so the bottle and its shadow are rastered once and
the compositor thereafter only translates a finished texture.
`backface-visibility: hidden` is carried alongside it because
several mobile engines still take that as the stronger hint
and will otherwise re-raster a promoted layer anyway.
THE .is-lit GATE IS NOT OPTIONAL, and it is the reason this
file cannot simply say `.gs { will-change: transform }`.
90-home-hero.css:247 and 96-gate.css:106 already hold the
animations back until every cutout has decoded, because a
promoted layer with nothing rastered into it paints as the page
background: twelve pale rectangles across the first screen a
visitor ever sees. `will-change` promotes on its own, animation
or not, so it has to wait behind the same gate or it
reintroduces that bug without the animation to blame.
============================================================ */
/* Home hero collage. Gated on .is-lit exactly like the floats it
is promoting; the four slots are named individually rather than
through .hero-vial so this cannot outlive the composition. */
.hero-v6 .hero-collage.is-lit .hero-vial.v1,
.hero-v6 .hero-collage.is-lit .hero-vial.v2,
.hero-v6 .hero-collage.is-lit .hero-vial.v3,
.hero-v6 .hero-collage.is-lit .hero-vial.v4 {
will-change: transform;
backface-visibility: hidden;
}
/* The gate's twelve. Same gate, same reason, twelve times over:
this is the one screen where an unrastered promoted layer would
be the entire first impression. */
.gate-scatter.is-lit .gs {
will-change: transform;
backface-visibility: hidden;
}
/* The falling tiles behind the dark promo panel. No decode gate
here because these carry a background and a border of their
own, so a layer that promotes a frame early paints a chip
rather than a hole. */
.rain-tile {
will-change: transform;
backface-visibility: hidden;
}
/* Where the float and the filter share one element: the rail
media bottle and the product-page bottle. Promoting the image
itself is the same trade, one layer instead of one resample per
frame. Scoped to the two surfaces that actually animate rather
than to .vial, which matches thirty static thumbnails on the
home page alone and would promote every one of them. */
.rail-media-inner .vial,
.pdp-media .vial,
.pdp-stage img.vial {
will-change: transform;
backface-visibility: hidden;
}
/* ------------------------------------------------------------
Motion off
------------------------------------------------------------
With the animations gone there is nothing to composite, and a
promoted layer that never moves is memory spent on a still
image. Every selector above is restated here rather than
filtered, because `will-change: auto` has to beat them on the
cascade and they are not all the same specificity.
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.hero-v6 .hero-collage.is-lit .hero-vial.v1,
.hero-v6 .hero-collage.is-lit .hero-vial.v2,
.hero-v6 .hero-collage.is-lit .hero-vial.v3,
.hero-v6 .hero-collage.is-lit .hero-vial.v4,
.gate-scatter.is-lit .gs,
.rain-tile,
.rail-media-inner .vial,
.pdp-media .vial,
.pdp-stage img.vial {
will-change: auto;
}
}
/* ============================================================
The bottles hold still
------------------------------------------------------------
Sebastian reported the bottles glitching up and down three
times, across two attempted fixes. Before this file was
written the motion was instrumented in both engines, at iPhone
size, at rest and under a frame-by-frame scroll:
Chromium max frame-to-frame step 0.30px, travel 10-14px
WebKit max frame-to-frame step 0.57px, travel 10-14px
Both traces are clean monotonic ease-in-out curves with no
discontinuity anywhere, and both engines report full support
for animation-timeline, animation-composition, svh and
will-change. There is no rendering fault in the float. What is
on screen IS the float: a dozen bottles each drifting 10 to
14px on periods between 4 and 7 seconds, under drop shadows,
and on the gate that is the entire first screen.
So this is not another guess at a glitch. The motion itself is
what was being objected to, and it stops here.
`animation-play-state: paused` rather than `animation: none`,
and the distinction matters. `none` snaps every element to its
base transform, which for the promo rain means eleven tiles
that were spread down a 920px fall all stacking at the top of
the panel in a row. Paused holds each one exactly where it
already is: the hero and the gate at their slot positions
(their delays are positive, so they are still at the from
frame), the rain scattered down its fall by the negative
delays it was built with. Every composition on the site keeps
the shape it has right now and only loses the drift. It is
also the idiom already in use here, at 40-plp-home.css:648.
TO BRING THE MOTION BACK: delete this file and rebuild. That
is the whole revert. Nothing else was changed to achieve it,
and B5-vial-raster.css is left intact underneath so the
compositor promotion is still correct the moment anything
moves again.
============================================================ */
.hero-v6 .hero-vial,
.hero-v6 .hero-collage.is-lit .hero-vial.v1,
.hero-v6 .hero-collage.is-lit .hero-vial.v2,
.hero-v6 .hero-collage.is-lit .hero-vial.v3,
.hero-v6 .hero-collage.is-lit .hero-vial.v4,
.hero-vials .hv,
.gate-scatter .gs,
.gate-scatter.is-lit .gs,
.rain-tile,
.rail-media-inner .vial,
.pdp-media .vial,
.pdp-stage img.vial,
img.vial {
animation-play-state: paused;
}
/* A paused layer never moves, so the promotion B5 asks for is
memory spent holding a texture that nothing will translate.
Released here rather than by editing B5, so that deleting this
one file restores both the motion and the compositing it
needs, together, with nothing left half-applied. */
.hero-v6 .hero-collage.is-lit .hero-vial.v1,
.hero-v6 .hero-collage.is-lit .hero-vial.v2,
.hero-v6 .hero-collage.is-lit .hero-vial.v3,
.hero-v6 .hero-collage.is-lit .hero-vial.v4,
.gate-scatter.is-lit .gs,
.rain-tile,
.rail-media-inner .vial,
.pdp-media .vial,
.pdp-stage img.vial {
will-change: auto;
}