/* =========================================================
Cinema Skin FX — Trust band (#trust)
Three facts, straight after the front page, asked for
against a reference: an icon, a bold line, and a small one
under it, three across. The reference is black on white;
this is the same UI in the page's own colours.
Its own file for the same reason hero.css, why.css,
proof.css and results.css are their own files.
⚠️ IT LOADS AFTER atmosphere.css, AND THE SELECTOR IS
.section.trust WITH TWO CLASSES. atmosphere.css carries
`.section{background:transparent}` at (0,1,0) so every
section shows the ambient layer through it. A single
class here scores the same and loses on source order, and
the ground silently does not appear. Both defences are
used, so a reordered cannot break it either.
⚠️ THERE IS NO data-scene ON THIS SECTION, ON PURPOSE.
main.js gives every [data-scene] band a .scene-seam that
bleeds the previous band over its top, and that seam is
clamp(120px,15vw,220px) tall. This band is about 250px
tall in total, so a scene would wash almost all of it
with the hero's sea key — which is the same fault that
once turned the top 90px of #proof blue-grey. A short
interstitial strip is not a scene. Two consequences,
both checked: the re-light keeps whatever the hero set
while this is mid-frame (this band paints its own opaque
ground, so nothing shows through), and headerGround
finds no band under its midline and leaves the header
light — which is correct, because this band IS light.
========================================================= */
.section.trust{
position:relative;
overflow:clip; /* ⚠️ clip, not hidden — a scroll
container here would break sticky and
view() for anything nested later */
/* ⚠️ SYMMETRIC PADDING, AND NO NEGATIVE MARGIN — BOTH WERE HERE ONCE.
The band was first built one section lower, between the hero and #about,
and carried two corrections that belong to that spot and not to this one:
a climb into --lift-gap, and --lift-rise of extra bottom padding because
#about deliberately rides up over whatever precedes it. Neither applies
after the title card. .titlecard ends where it ends, and .hero below is
position:relative with plain padding — no negative margin, no radius — so
nothing overlaps this band at either edge.
⚠️ AND MOVING IT PUT --lift-gap / --lift-rise BACK TOGETHER ON ITS OWN.
Those two are declared as a pair on :root in styles.css with a comment
saying they only make sense together: the hero reserves --lift-gap
under its fact bar and #about spends --lift-rise climbing into it. A
band between them left that room with nothing climbing into it —
measured 126px of empty hero ground under the fact bar at 1440. Up
here, #home is followed by #about again and the pair is untouched.
Do not reintroduce either correction.
⚠️ SINCE THEN THE FACT BAR ITSELF HAS GONE, and with it --lift-gap. The
hero now reserves --lift-rise in its own padding-bottom and #about
spends it, so there is one number, not a pair. The paragraph above is
kept as the record of why this band sits where it sits — read
"--lift-gap" in it as the arrangement of the time, not as code that
still exists. What has not changed is the conclusion: nothing may sit
between #home and #about. */
/* ⚠️ 42px CEILING, DOWN FROM 58. Measured at 1440 the band stood 241px
tall and 116 of that — nearly half — was its own padding. Padding is the
cheapest thing to take: it costs no type size and no contrast, and the
three claims keep the room they need to read as a band rather than a
list. The floor barely moves, because the phone was not the complaint. */
padding-block:clamp(32px,3.1vw,42px);
/* warm ivory, a shade brighter in the middle so the row sits in light */
background:
radial-gradient(120% 140% at 50% 42%,
rgba(255,253,248,1) 0%,
rgba(252,249,242,1) 46%,
rgba(248,244,235,1) 100%);
}
/* The band is bounded rather than blended: a gold hairline top and bottom,
fading out before the edges so neither one terminates on screen. This is
what makes a 250px strip read as a band and not as a gap.
⚠️ BOTH, AGAIN. The bottom one was deleted while the band sat between the
hero and #about, because #about climbed 30-64px over it with an opaque
rounded panel and the hairline was drawn underneath every time. Nothing
covers this edge after the title card, so it is back — and it is doing
real work here, because the ground below is .hero's cool silk and the
band's own is warm ivory. */
.trust::before,
.trust::after{
content:"";
position:absolute;
left:0;right:0;
height:1px;
pointer-events:none;
background:linear-gradient(90deg,
rgba(198,164,85,0) 0%,
rgba(198,164,85,.34) 22%,
rgba(198,164,85,.34) 78%,
rgba(198,164,85,0) 100%);
}
.trust::before{top:0;}
.trust::after{bottom:0;}
/* =========================================================
THE ROW
========================================================= */
/* ⚠️ THE GAP IS A CUSTOM PROPERTY BECAUSE THE DIVIDER IS HUNG IN IT.
.trust-item + .trust-item::before sits at minus half the gap, so the two
numbers have to be the same number. They were not: the gap was overridden
at 820 and again below, while the divider kept subtracting the widest
clamp — so between 620 and 820 every hairline was drawn up to 11px to the
left of the gap it was supposed to be centred in, touching the column
beside it. One variable, read in both places, and a future override of
the gap moves the hairline with it for free. */
.trust-row{
--tr-gap:clamp(20px,3vw,48px);
list-style:none;
margin:0;padding:0;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--tr-gap);
}
/* ⚠️ align-content:start, AND WITHOUT IT THE THREE MARKS DO NOT LINE UP.
Each
is a grid item of .trust-row, so it is stretched to the height of
the tallest of the three. Each
is ALSO a grid, and a stretched grid
with auto rows and no align-content spends that spare height by growing its
own rows — from the inside, starting at the top. So the shortest column
does not sit short: it pushes its own mark down and its words after it.
Measured at 390 before this line, with "FDA Approved" on one line while the
other two names wrap to two:
item 0 rows 34.47 / 22.45 / 37.16 mark box 34.47, svg only 28.86
item 1 rows 28.86 / 33.69 / 31.53 mark box 28.86
item 2 rows 28.86 / 33.69 / 31.53 mark box 28.86
totals identical at 94.08 - which is the tell
The names read 5.6px off each other and the first mark carried 5.61px of
empty space under a correctly-sized svg. Nothing was the wrong size; the
spare height had simply been handed to the rows instead of left at the
bottom. align-content:start leaves it at the bottom, where a shorter column
should have it.
⚠️ IT IS IN THE BASE RULE, NOT THE PHONE BLOCK, BECAUSE THE BUG IS NOT A
PHONE BUG. It needs the three names to differ in line count, which today
only happens on a narrow screen — so it was latent on desktop rather than
absent, and one more word in any of the three claims would have surfaced
it at 1440. Checked at 1440: all three names are one line there, the
items are naturally equal, and nothing moved. */
.trust-item{
position:relative; /* the divider and the halo hang off this */
display:grid;
align-content:start;
justify-items:center;
text-align:center;
gap:clamp(8px,.85vw,11px);
}
/* --- the hairlines between the three ---
⚠️ ::before ON THE ITEM, NOT A IN THE MARKUP. Three claims are three
list items and nothing else; a separator is not a fourth thing to read, and
an empty span would be one more node for a screen reader to skip.
It grows out of its own middle as the band lands, which is the same move
the dividers in #proof make, so the two agree. */
.trust-item + .trust-item::before{
content:"";
position:absolute;
left:calc(var(--tr-gap) * -.5);
top:12%;bottom:12%;
width:1px;
background:linear-gradient(180deg,
rgba(198,164,85,0), rgba(198,164,85,.42) 50%, rgba(198,164,85,0));
scale:1 0;
transition:scale .8s var(--ease-out) calc(var(--d,0) * 95ms + 320ms);
}
.trust-item.is-in + .trust-item::before,
.trust-item + .trust-item.is-in::before{scale:1 1;}
/* --- the mark ---
⚠️ THESE ARE THE PAGE'S EXISTING THREE MARKS, NOT THE REFERENCE'S.
The reference draws a lettered FDA seal, a raised fist and a dropper.
The same three claims already carry a shield-and-check, a four-point
sparkle and a flask in #proof and in the hero, and one claim wearing two
different marks on one page is worse than a mark that differs from a
comp. Drawn bare and large here, the way the reference has them, instead
of inside the round gold badge #proof uses. */
.tr-ico{
position:relative;
display:block;
line-height:0;
transition:translate .45s var(--ease-back);
}
/* --- the halo ---
The marks were drawn bare, which is right, and bare on a flat cream ground
is also what made the band read as three pieces of clip art. This puts light
behind them instead of a badge around them: it blooms in after the mark has
finished drawing itself, so the drawing is still the thing you watch. */
.tr-ico::before{
content:"";
position:absolute;
left:50%;top:50%;
/* the halo is sized off the mark it sits behind — down from
clamp(84px,7.8vw,116px) with it, or it stops reading as light behind the
mark and starts reading as a disc around it */
width:clamp(74px,6.6vw,98px);
aspect-ratio:1;
margin:0;
border-radius:50%;
/* ⚠️ measured up from .55/.26, which was there and could not be seen at
page scale — a glow that only reads in a close-up is not a glow */
background:radial-gradient(circle,
rgba(230,199,124,.72) 0%,
rgba(230,199,124,.34) 44%,
rgba(230,199,124,0) 73%);
pointer-events:none;
z-index:-1;
opacity:0;
translate:-50% -50%;
scale:.5;
transition:
opacity .9s var(--ease) calc(var(--d,0) * 95ms + 780ms),
scale .9s var(--ease-out) calc(var(--d,0) * 95ms + 780ms);
}
.trust-item.is-in .tr-ico::before{
opacity:1;
scale:1;
/* ⚠️ THE ONE LOOP IN THIS FILE — see the head of this block for why it is
here and how to remove it. It is paused whenever the section is more than
300px off screen, because #trust is a and main.js idles those. */
animation:trHalo 9s var(--ease-soft) 1.7s infinite;
}
/* ⚠️ IT BREATHES ON opacity ALONE, AND THE FIRST VERSION ALSO USED scale.
An animation supplies the computed value of every property it mentions, at
every moment — so the hover rule below, which opens the halo out to 1.22,
was silently overridden and measured 1.0665 -> 1.0818 instead. The same
collision cost time on a rotate earlier in this project. Keep the loop and
the pointer on DIFFERENT properties and neither can eat the other. */
@keyframes trHalo{
0%,100%{opacity:1;}
50% {opacity:.66;}
}
.tr-ico svg{
/* down from clamp(38px,3.4vw,48px) — the mark leads the band's scale, so it
comes down with it or the three marks start to look oversized next to
their own names */
width:clamp(34px,2.9vw,42px);
height:auto;
aspect-ratio:1;
fill:none;
stroke:var(--gold-ink);
stroke-width:1.45;
stroke-linecap:round;
stroke-linejoin:round;
overflow:visible;
transition:stroke .4s var(--ease);
}
/* ⚠️ THE MARKS DRAW THEMSELVES, AND pathLength="1" IN THE MARKUP IS WHY.
It renormalises every path to a length of 1 whatever its real length is,
so `stroke-dasharray:1` is one dash covering the whole outline and
`stroke-dashoffset` 1 -> 0 draws it from its start. One number covers a
shield, a star and a flask, and none of their lengths is ever measured.
⚠️ A TRANSITION, NOT AN ANIMATION, AND THAT IS THE POINT. This band sits
between two of the busiest sections on the page and the README already
counts 86 CSS animations at load. A transition fires once when .is-in
lands and then costs nothing forever. Nothing here loops.
⚠️ The delay is written INSIDE the shorthand. Writing `transition:` and
then a separate `transition-delay:` above it would work; writing the
shorthand AFTER a delay resets that delay to 0s and the three marks
would all draw at once. --d is the stagger main.js puts on the
,
and it inherits down to the path. */
.tr-ico path{
stroke-dasharray:1;
stroke-dashoffset:1;
transition:stroke-dashoffset 1.05s var(--ease-out)
calc(var(--d,0) * 95ms + 170ms);
}
/* the check inside the shield, and the flask's fill line, come in behind
their own outline rather than with it */
.tr-ico path + path{
transition-delay:calc(var(--d,0) * 95ms + 620ms);
}
.trust-item.is-in .tr-ico path{stroke-dashoffset:0;}
/* --- the words --- */
/* ⚠️ THEY MOVE ON translate, NOT transform. [data-reveal] owns transform on
the
above them and is still running when these start. */
.tr-name,
.tr-sub{
opacity:0;
translate:0 9px;
transition:
opacity .7s var(--ease),
translate .7s var(--ease-out),
color .35s var(--ease);
}
.tr-name{transition-delay:calc(var(--d,0) * 95ms + 420ms);}
.tr-sub {transition-delay:calc(var(--d,0) * 95ms + 560ms);}
.trust-item.is-in .tr-name,
.trust-item.is-in .tr-sub{opacity:1;translate:0 0;}
.tr-name{
position:relative;
margin:0;
font-family:var(--f-display);
font-weight:500;
/* 21px ceiling, down from 25. At 25px of Playfair these three read as three
headings; the section they introduce is not theirs. */
font-size:clamp(17px,1.48vw,21px);
line-height:1.2;
letter-spacing:-.01em;
color:var(--ink);
text-wrap:balance;
}
/* a hairline that draws under the name as it lands, and reaches wider when a
pointer arrives — the only thing on this band that answers a mouse besides
the mark itself */
.tr-name::after{
content:"";
position:absolute;
left:50%;bottom:-6px;
width:clamp(24px,2.2vw,32px);
height:1px;
translate:-50% 0;
background:linear-gradient(90deg,
rgba(198,164,85,0), var(--gold) 50%, rgba(198,164,85,0));
scale:0 1;
transition:
scale .75s var(--ease-out) calc(var(--d,0) * 95ms + 620ms),
width .45s var(--ease-out);
}
.trust-item.is-in .tr-name::after{scale:1 1;}
/* ⚠️ --ink-2, AND EVERY OTHER CAPTION ON THIS PAGE IS --ink-3.
That is deliberate and it is measured. --ink-3 on this band's ground
computes to 4.41:1 against the 4.5 that 13px owes — the same shortfall
.pf-sub already carries, and which is on the open list. This
line is new, so there is no reason to inherit a known-marginal choice:
--ink-2 measures 10.1:1 here and still reads as the secondary line,
because the size and the weight say so without the colour having to. */
.tr-sub{
margin:0;
/* ⚠️ 13px CEILING, AND THE NOTE ABOVE IS WHY IT CAN MOVE AT ALL. 13px
non-bold owes 4.5:1, and --ink-3 on this ground was already measured at
4.41:1 — under it. --ink-2 is what this line takes and it has room to
spare, so the size may come down. Re-measured off the rendered pixels
after the change, not assumed. */
font-size:clamp(12px,.95vw,13px);
font-weight:400;
line-height:1.5;
color:var(--ink-2);
max-width:24ch;
text-wrap:balance;
}
/* --- the pointer ---
These are statements, not links, so the response is small: the mark lifts
and deepens, and nothing moves that a reader might try to click. */
@media (hover:hover){
.trust-item:hover .tr-ico{translate:0 -4px;}
.trust-item:hover .tr-ico svg{stroke:#6F5514;}
/* the light behind the mark opens out with it */
.trust-item:hover .tr-ico::before{
scale:1.22;
opacity:1;
background:radial-gradient(circle,
rgba(226,190,110,.66) 0%,
rgba(226,190,110,.30) 42%,
rgba(226,190,110,0) 72%);
/* ⚠️ the entrance delay has to go, or the first hover waits most of a
second for a transition that was scheduled for the entrance */
transition-delay:0s;
}
.trust-item:hover .tr-name{color:var(--gold-ink);}
.trust-item:hover .tr-name::after{
width:clamp(52px,5.2vw,78px);
transition-delay:0s;
}
.trust-item:hover .tr-sub{translate:0 -2px;}
}
/* =========================================================
NARROWER SCREENS
========================================================= */
@media (max-width:820px){
.trust-row{--tr-gap:clamp(14px,2.4vw,26px);}
.tr-sub{max-width:20ch;}
}
/* ⚠️ THREE ACROSS ALL THE WAY DOWN, AND THIS BLOCK USED TO STACK THEM.
It turned the row into three full-width lines with the mark beside the
copy, on the argument that "Advanced Formulations" is 21 characters in a
110px column. That was asked to be undone against a phone reference in
which the three facts read left to right, exactly as they do on a wide
screen — so this block no longer changes the SHAPE of anything. It only
makes the existing row fit: same grid, same centred items, same vertical
hairlines between them, smaller.
⚠️ THE OBJECTION WAS NOT WRONG, IT WAS JUST NOT A REASON TO STACK.
"Advanced Formulations" genuinely does not fit on one line in a 112px
column and it is not meant to — text-wrap:balance splits it evenly over
two rather than stranding one word. What actually had to be checked is
that no WORD breaks and no column overflows, which is a measurement, not
a guess. Measured below at 430 / 390 / 375 / 360 / 320.
⚠️ AND THE ITEM GRID IS NOT RESET HERE, ON PURPOSE. The stacked version
set grid-template-columns and grid-row on .tr-ico to put the mark beside
the words. Removing the overrides is enough; re-declaring the base values
as "corrections" would leave two places to keep in step. */
@media (max-width:620px){
.trust-row{--tr-gap:clamp(9px,2.6vw,16px);}
.trust-item{gap:clamp(7px,2vw,11px);}
.tr-ico svg{width:clamp(27px,7.4vw,34px);}
.tr-ico::before{width:clamp(46px,13vw,62px);}
.tr-name{font-size:clamp(13px,3.6vw,17px);letter-spacing:-.014em;}
.tr-name::after{width:clamp(20px,5.6vw,26px);bottom:-6px;}
.tr-sub{
font-size:clamp(10.5px,2.85vw,12.5px);
line-height:1.42;
max-width:none; /* the column is the limit now, not 24ch */
}
}
/* =========================================================
REDUCED MOTION
The marks are drawn, not drawing. Everything else here was
already a resting state.
========================================================= */
@media (prefers-reduced-motion:reduce){
.tr-ico path{stroke-dashoffset:0;transition:none;}
.tr-ico{transition:none;}
/* every new resting state above is the visible one, so they are simply set
and the transitions removed. The halo stops breathing outright. */
.tr-name,
.tr-sub{opacity:1;translate:0 0;transition:none;}
.tr-ico::before{opacity:1;scale:1;transition:none;}
.trust-item.is-in .tr-ico::before{animation:none;}
.tr-name::after,
.trust-item + .trust-item::before{scale:1 1;transition:none;}
}
/* =========================================================
⚠️ THE SCRIPT OFF
interactive.css hands every [data-reveal] its resting state
back under .no-js, and its own comment says any NEW resting
state belongs in that rule too. This one is in a later file,
so it needs saying again here — without it the three marks
are dashed to invisible on a page with no script, and the
band reads as three headings floating above nothing.
========================================================= */
.no-js .tr-ico path{stroke-dashoffset:0;transition:none;}
/* ⚠️ AND SO DOES EVERY RESTING STATE ADDED SINCE. Without these the band on a
script-less page is three invisible names over three invisible sub-lines
with no marks and no rules — worse than the bare version it started as.
The file's own note above says exactly this; it applies to new work too. */
.no-js .tr-name,
.no-js .tr-sub{opacity:1;translate:0 0;transition:none;}
.no-js .tr-ico::before{opacity:1;scale:1;transition:none;animation:none;}
.no-js .tr-name::after,
.no-js .trust-item + .trust-item::before{scale:1 1;transition:none;}