, so they need the reset. */#fonLcg .cap { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--fg-soft); }#fonLcg .link--sm { font-size: 13px; }
/* "What to expect" timeline */#fonLcg .tline {
margin-top: clamp(20px, 2.4vw, 32px);
padding: clamp(22px, 2.6vw, 34px);
background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--r-lg);
}#fonLcg .tline__head { margin-bottom: clamp(18px, 2vw, 26px); }#fonLcg .tline__head .h3 { margin-bottom: 6px; }#fonLcg .tline__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: t; }@media (min-width: 820px) {#fonLcg .tline__l { grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); } }#fonLcg .tline__l li { padding-top: 16px; border-top: 3px solid var(--rule-str); }#fonLcg .tline__l li:nth-child(2) { border-top-color: rgba(38, 32, 20, .3); }#fonLcg .tline__l li:nth-child(3) { border-top-color: rgba(38, 32, 20, .26); }#fonLcg .tline__w {
display: block; margin-bottom: 7px;
font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
color: var(--ink);
}
/* --------------------------------------------------------------------------
4 · PRODUCT + OFFER
-------------------------------------------------------------------------- */#fonLcg .offer { display: grid; gap: clamp(24px, 3vw, 44px); align-items: start; }@media (min-width: 940px) {#fonLcg .offer { grid-template-columns: 1fr 1fr; } }
/* 2026-08-20: on mobile, #offer inherits .section--tall's full
padding-block (clamp(44px, 6.8vw, 106px), both top and bottom), which
reads as a large empty gap above the tightly-packed proof pill/pdp__name
block. Cut just the top half on mobile; bottom padding and desktop are
untouched. Not confirmed against a live render yet. */
@media (max-width: 899.98px) {#fonLcg #offer { padding-top: 20px; } }
#fonLcg .offer__gal {
border-radius: var(--r-lg); overflow: hidden;
background: #fff; border: 1px solid var(--card-edge);
margin-bottom: clamp(18px, 2vw, 26px);
}#fonLcg .offer__gal img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }#fonLcg .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }#fonLcg .ticks li { position: relative; padding-left: 29px; font-size: 15px; line-height: 1.5; color: var(--fg-mut); }#fonLcg .ticks li::before {
content: ""; position: absolute; left: 0; top: 3px;
width: 18px; height: 18px; border-radius: 50%; background: var(--ink);
}#fonLcg .ticks li::after {
content: ""; position: absolute; left: 5px; top: 8px;
width: 8px; height: 4.5px;
border-left: 1.9px solid #FFFFFC; border-bottom: 1.9px solid #FFFFFC;
transform: rotate(-45deg);
}#fonLcg .ticks b { color: var(--fg); font-weight: 600; }
/* ---- THE PDP CHECKLIST -----------------------------------------------------
FON'S OWN BLUE CHECK, NOT A DRAWN ONE. The marker was an ink disc with a CSS
chevron in it. usefon.com's PDP marks exactly this list with Blue_Check.svg,
so the file itself is used and the imitation is deleted.
AND THE WHOLE LINE IS TYPE NOW, NOT HALF OF IT. Each item was a bold benefit
followed by its dose in the body grey, so five items produced ten fragments
alternating between two weights and two colours, and the eye had nowhere to
settle. The benefit stays semibold in the ink; the dose is now its own line
underneath at a smaller size, which is a caption rather than a trailing
clause.
AND THEN IT BECAME THE INGREDIENT LIST. Five benefit sentences each with a
dose underneath is ten lines of type to say what is in the sachet, and on a
phone that pushed the format and flavour pickers below the fold. What the
reader wants here is the contents; the benefits are argued across the seven
beats above and in the comparison panel. So: one line per ingredient, dose
first in the ink, name after it in the grey — every figure that was in the
captions is still here, in half the height. */#fonLcg .ticks__lead {
margin: 0 0 11px; font-size: 14.5px; font-weight: 600; color: var(--fg);
}#fonLcg .ticks--check { gap: 7px; }#fonLcg .ticks--check li {
padding-left: 26px;
font-size: 13.5px; line-height: 1.4; font-weight: 400; color: var(--fg-mut);
}#fonLcg .ticks--check li b { font-weight: 600; color: var(--fg); }#fonLcg .ticks--check li::before,
#fonLcg .ticks--check li::after { content: none; }#fonLcg .ticks--check li {
background: url("Blue_Check.svg") left 1px / 20px 20px no-repeat;
}#fonLcg .ticks--check i {
display: block; margin-top: 2px;
font-style: normal; font-size: 13px; line-height: 1.42; font-weight: 400;
color: var(--fg-soft);
}@media (max-width: 939.98px) {#fonLcg .ticks--check { gap: 11px; }#fonLcg .ticks--check li { padding-left: 27px; font-size: 13.5px; background-size: 18px 18px; }#fonLcg .ticks--check i { font-size: 12.5px; }
}
/* ---- THE PRODUCT'S OWN HEAD, ABOVE THE CONFIGURATOR ------------------------
The right column opened on a form legend. Proof, then name, then one line of
what it is, then the questions — that order is the difference between a
product page and a checkout step, and it is the order FON's own PDP uses.
The name is a , not a heading: the section already has an h2 and this is
the same product it is about, so promoting it would put two competing
headings in one section and read as a new topic to a screen reader. */#fonLcg .pdp__id { margin-bottom: clamp(20px, 2.4vw, 28px); }#fonLcg .pdp__rate {
display: flex; align-items: center; flex-wrap: wrap; gap: 2px 7px;
margin: 0 0 9px;
font-size: 13px; line-height: 1; color: var(--fg-mut);
}#fonLcg .pdp__rate b { font-weight: 600; color: var(--fg); }#fonLcg .pdp__rate i { font-style: normal; color: var(--rule-str); }#fonLcg .pdp__stars { color: var(--star-dk); letter-spacing: .08em; font-size: 12.5px; }#fonLcg .pdp__name {
margin: 0 0 10px;
/* 2026-09-02 (Akaash): "make the headline bigger... you see how big the
headline vs sub headline is". Ran 24/15 = 1.6, which reads as one
paragraph in two weights; now ~2.5, matching his reference. */
font-size: clamp(27px, 3.1vw, 37px); font-weight: 700;
line-height: 1.06; letter-spacing: -.036em; color: var(--fg);
}#fonLcg .pdp__name sup { font-size: .4em; top: -.82em; position: relative; font-weight: 600; }#fonLcg .pdp__sub { margin: 0; max-width: 46ch; font-size: 14.5px; line-height: 1.55; color: var(--fg-mut); }
/* The label link under the gallery. Full width and outlined rather than a text
link: it is a second action on this column, and at text size it disappeared
between the thumbnail rail and the benefit list. */#fonLcg .gal__label {
display: flex; align-items: center; justify-content: center;
margin-top: 14px; min-height: 46px; padding: 12px 20px;
border: 1px solid var(--rule-str); border-radius: var(--r-pill);
background: var(--card);
font-size: 13.5px; font-weight: 600; color: var(--fg);
transition: border-color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease);
}#fonLcg .gal__label:hover { border-color: var(--fg); background: #FFFFFF; }
/* --- The configurator --- */#fonLcg .cfg {
background: var(--card); border: 1px solid var(--card-edge);
border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 30px);
box-shadow: var(--shadow-lg);
}#fonLcg .cfg__f { border: 0; margin: 0 0 clamp(18px, 2vw, 24px); padding: 0; }
/* The three step legends are the spine of the configurator — they are what
tells someone this is three decisions and not one long form. Bold, in the
ink, and a size that reads as a heading rather than as a caption. */#fonLcg .cfg__lg {
padding: 0; margin-bottom: 12px;
font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
color: var(--fg);
}#fonLcg .cfg__opts { display: grid; gap: 8px; }#fonLcg .cfg__opts--2 { grid-template-columns: 1fr 1fr; }#fonLcg .cfg__opts--flav { grid-template-columns: 1fr 1fr; }@media (min-width: 520px) {#fonLcg .cfg__opts--flav { grid-template-columns: repeat(3, 1fr); } }#fonLcg .opt { position: relative; display: block; cursor: pointer; }#fonLcg .opt input { position: absolute; opacity: 0; width: 0; height: 0; }
/* WHITE, NOT THE BAND IT SITS ON.
Every option took `var(--surface)`, which inside the offer section is the
sand band — so an unselected option was a beige rectangle on a beige ground,
held apart only by a hairline. It read as disabled rather than as available,
which is the wrong signal on the one control that has to feel clickable.
White lifts it off the band and makes the whole configurator brighter. */#fonLcg .opt__b {
display: block; height: 100%;
padding: 12px 14px;
border: 1px solid var(--card-edge);
border-radius: var(--r);
background: var(--card);
transition: border-color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}#fonLcg .opt__b b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--fg); }#fonLcg .opt__b em { display: block; margin-top: 3px; font-style: normal; font-size: 12.5px; line-height: 1.35; color: var(--fg-soft); }#fonLcg .opt:hover .opt__b { border-color: var(--rule-str); }#fonLcg .opt input:checked + .opt__b {
border-color: var(--ink);
background: rgba(234, 246, 171, .42);
box-shadow: 0 0 0 2px rgba(38, 32, 20, .16);
}#fonLcg .opt input:focus-visible + .opt__b { outline: 2px solid var(--ink); outline-offset: 2px; }#fonLcg .opt--sm .opt__b { padding: 10px 12px; }#fonLcg .opt--sm .opt__b b { font-size: 13px; }
/* ---- FORMAT PICKER ---------------------------------------------------------
THE OPTION SHOWS THE THING IT IS AN OPTION FOR. These were two text boxes
reading "Sachets" and "Pouches" — asking someone to choose between two
physical formats by name, without letting them see either one. usefon.com's
PDP builds this option as an image beside a title and a per-serve price, so
that is the shape here, with the same two picker photographs the live PDP
uses.
The image sits in its own fixed column and is `object-fit: contain` on a
neutral plate: the sachet file is a 750x1100 portrait and the pouch a 300x450,
and `cover` on two different ratios would crop one of them through the
product. Contain lets both sit whole at whatever size they are. */#fonLcg .opt--fmt .opt__b {
display: grid; grid-template-columns: clamp(50px, 5.2vw, 74px) minmax(0, 1fr);
gap: clamp(12px, 1.2vw, 16px); align-items: center; padding: clamp(11px, 1vw, 14px) clamp(12px, 1vw, 15px);
}#fonLcg .opt__img {
position: relative;
/* The photograph is the whole reason this option exists rather than a
word, so it grows with the column instead of staying at phone size. */
/* The plate follows the product shape. Both picker files are portrait
(750x1100 and 300x450) and the plate was near-square, so object-fit
contain fitted them by height and left a band of empty white each side. */
height: clamp(70px, 7vw, 104px); border-radius: 9px; overflow: hidden;
background: #FFFFFF; border: 1px solid rgba(38, 32, 20, .07);
}
/* MAX-WIDTH AND MAX-HEIGHT, NOT WIDTH AND HEIGHT.
This was width:100%; height:100%; object-fit:contain, which looks like it
should letterbox the product inside the plate and does not. The plate is a
grid with place-items:center, so the image is a CENTRED grid item, and a
percentage height on a centred item has no definite containing block to
resolve against -- Chrome drops it to auto. The image then sized itself off
its own aspect ratio: 164px of sachet inside a 58px plate, spilling 107px
past the rounded corner and across the label beside it.
Max constraints have no such failure mode: the image takes its natural
size, is capped by the plate in both axes, and place-items centres what is
left. overflow:hidden above is the belt to that braces. */
/* THE PLATE STRETCHES ITS ITEM, AND THAT IS THE WHOLE FIX.
Originally: plate `place-items: center` + image `height: 100%`. A centred
grid item has no definite containing block, so Chrome silently dropped the
percentage to auto and the image sized off its own aspect ratio -- 164px of
sachet inside a 58px plate, spilling 107px past the rounded corner and
across the label beside it.
The obvious patch, max-width/max-height with auto sizes, traded one bug for
a worse one: these images are lazy, and before they load an auto-sized
replaced element is 0x0, so the plate collapsed and the row shifted when
each image arrived.
Letting the item stretch (the grid default) gives it the plate box, which
IS definite because the plate has an explicit height. 100% then resolves,
object-fit letterboxes inside it, and the box is correct before a single
byte of image has downloaded. overflow:hidden stays as the backstop. */
/* THE IMAGE IS ABSOLUTELY POSITIONED, WHICH IS THE ONLY THING THAT HELD.
Three attempts failed on the same root cause -- a percentage height that
never resolved -- and each failure looked different enough to send me after
the wrong thing:
plate place-items:center + image height:100% a centred grid item has no
definite containing block, so Chrome dropped the percentage to auto and
the image sized off its aspect ratio: 164px of sachet in a 58px plate,
spilling 107px past the corner radius and across the label.
image max-width/max-height + auto lazy images are 0x0 before
they load, so the plate collapsed and the row jumped on arrival.
plate grid with default alignment align-items:normal behaves
as START for REPLACED elements, not stretch, so the percentage still
had nothing definite to resolve against. Still spilled 61px.
Absolute positioning sidesteps the question entirely: `inset` sizes the box
directly off the plate, with no percentage and no dependence on alignment,
intrinsic ratio, or whether the file has downloaded yet. object-fit then
letterboxes the product inside that box. This is the same pattern .plate in
tokens.css uses, and for the same reason.
inset:0 with an explicit 100% is what actually sizes it: for an absolutely
positioned REPLACED element, auto width/height falls back to the intrinsic
size and the offsets are simply ignored -- which is why inset:5px alone still
drew a 158px sachet. Padding does the inner margin instead. */#fonLcg .opt__img img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 5px; object-fit: contain; }#fonLcg .opt__txt { display: block; min-width: 0; }#fonLcg .opt--fmt .opt__txt b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.2; color: var(--fg); }#fonLcg .opt--fmt .opt__txt em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; line-height: 1.3; color: var(--fg-soft); }#fonLcg .opt__from {
display: block; margin-top: 5px;
font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--fg);
font-variant-numeric: tabular-nums;
}
/* The plate goes white inside the selected option so the product is not sitting
on a grey square inside a lime card. */#fonLcg .opt--fmt input:checked + .opt__b .opt__img { background: #FFFFFF; }
/* ---- FLAVOUR SWATCHES ------------------------------------------------------
Five identical grey boxes told apart only by their wording is the least
appetising way to sell a drink. Each option now leads with FON's own
Swatch_*.webp — a photograph of that flavour made up — cropped to a disc, so
the colour of the drink does the work the name was doing on its own.
`cover` is right here and `contain` would be wrong: these are 2:1 crops of a
surface, with no edges that matter, so filling the disc is the point. */#fonLcg .opt--flav .opt__b { display: flex; align-items: center; gap: 10px; padding: 9px 11px; }#fonLcg .opt__sw {
display: block; flex: none;
width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
box-shadow: 0 0 0 1px rgba(38, 32, 20, .12), 0 1px 4px rgba(38, 32, 20, .14);
}#fonLcg .opt__sw img { width: 100%; height: 100%; object-fit: cover; }#fonLcg .opt--flav .opt__b b { font-size: 12.5px; line-height: 1.22; }
/* ONE FORMAT PER ROW BELOW 560px.
Two-up, each card was 154px wide and the image column took 58 of them, which
left about 60px of measure — enough to break "Single-serve sachets" over
three lines, "Grab and go" over two, and the price over two more. A choice
between two things should not need six lines of ragged type to state.
Full width, the text gets ~256px and every line fits: image left, name,
description and price stacked beside it. The two options are also easier to
compare stacked, because their prices land on the same left edge instead of
in two different columns. */@media (max-width: 559.98px) {#fonLcg .cfg__opts--2 { grid-template-columns: 1fr; }
/* No plate override here any more. This block used to force the plate back
to 56x58, which silently cancelled the sizes set on .opt__img above and
left the picker photographs at thumbnail scale on exactly the width that
most needed them legible. The clamps above resolve to sensible phone
values on their own. */#fonLcg .opt--fmt .opt__b { align-items: center; }#fonLcg .opt--fmt .opt__txt b { font-size: 14px; }#fonLcg .opt--fmt .opt__txt em { display: inline; margin-top: 0; }#fonLcg .opt__from { margin-top: 4px; font-size: 12.5px; }
}@media (max-width: 400px) {#fonLcg .opt--flav .opt__b { gap: 8px; padding: 8px 9px; }#fonLcg .opt__sw { width: 26px; height: 26px; }#fonLcg .opt--flav .opt__b b { font-size: 11.5px; }
}#fonLcg .opt--plan .opt__b { padding: 15px 16px; }
/* ---- THE SUBSCRIBE OPTION, BUILT AS AN ARGUMENT -----------------------------
It was one bold line, one grey line and a price, sitting level with the
one-time option — so the page recommended a plan and never said why. The live
PDP builds this option as a banner, a price against its comparison, and a
short list of what subscribing actually gets you. Same three parts here.
The banner is the ink pill rather than the lime: lime is spoken for on this
page (it means "this is the number that matters") and a lime bar the width of
the card would be the loudest thing in the offer block, louder than the CTA
under it. *//* THE CORNER IS NOT SETTLED HERE. The frequency control's block, 1700 lines
below, sets overflow and the bar's radius on the same two selectors and wins
on order - which is why two attempts at clipping in this rule changed nothing
on screen. All this rule does now is take the card's padding away so the bar
can reach both edges; the arcs are matched down there, next to the overflow
rule that forces the matching to be necessary. The ink top border stays here
because it belongs with the bar's own colour: while the bar is showing, the
card's 1px edge under it is painted the same ink, so the join is seamless
instead of a hairline of card edge above a black bar. */
#fonLcg .opt--sub .opt__b { padding: 0; overflow: hidden; }
#fonLcg .opt--sub:has(.opt__banner:not([hidden])) .opt__b { border-top-color: var(--ink); }
/* SELECTED SUBSCRIBE CARD: uniform fill + blue edge, not the generic lime wash.
The shared `.opt input:checked + .opt__b` paints the whole card lime at .42,
and because the frequency row carries its own --chip background it broke the
fill into visible bands (header lime, select white, bullets lime). Scope a
clean selected state to this card: a soft even lime tint, a blue outline to
match the reference, and a frequency row that sits ON the tint rather than
over it. */
#fonLcg .opt--sub input:checked + .opt__b {
border-color: var(--blue);
background: rgba(234, 246, 171, .30);
box-shadow: 0 0 0 2px rgba(0, 81, 255, .18);
}
#fonLcg .opt--sub input:checked + .opt__b .sub__freqwrap { background: transparent; }
#fonLcg .opt--sub input:checked + .opt__b .sub__freq {
background: rgba(255, 255, 255, .85);
border-color: var(--card-edge);
}
/* The panel divider reads better as one hairline across the tint. */
#fonLcg .opt--sub .sub__panel { border-top: 1px solid rgba(38, 32, 20, .10); }
#fonLcg .opt__banner {
display: block; padding: 9px 16px;
background: var(--ink); color: #FFFFFC;
font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
line-height: 1.3; text-align: center;
}#fonLcg .opt--sub .opt__head { padding: 14px 16px 0; }#fonLcg .opt--sub .opt__ups { padding: 0 16px 15px; }#fonLcg .opt--plan:not(.opt--sub) .opt__head { padding: 0; }#fonLcg .opt__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }#fonLcg .opt__name { display: block; min-width: 0; flex: 1 1 auto; }#fonLcg .opt__name b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--fg); }#fonLcg .opt__name em { display: block; margin-top: 3px; font-style: normal; font-size: 12.5px; line-height: 1.35; color: var(--fg-soft); }
/* --- Subscription plan card ---------------------------------------------
RESTORED. These rules are Renz's, written when the stylesheet was still
inline in the section; the d298210 rebuild dropped them while keeping the
markup, so .sub__panel, .sub__freq, .sub__list, .sub__head, .sub__best,
.opt__b--row and .opt--buy .opt__price had no styles at all and the whole
subscribe card rendered as raw form controls. Recovered verbatim from
17347ab. They were never in the prototype stylesheet - this is theme-only
work, so build-theme-section.mjs cannot regenerate them. */
#fonLcg .opt__b--row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#fonLcg .opt--buy .opt__price { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
#fonLcg .opt--buy .opt__price strong { font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--blue); }
#fonLcg .opt--buy .opt__price s { font-size: 14px; color: var(--fg-soft); text-decoration-thickness: 1px; }
#fonLcg .sub__head { margin-bottom: 0; }
#fonLcg .sub__best { margin-bottom: 8px; }
#fonLcg .sub__best[hidden] { display: none; }
#fonLcg .sub__panel { display: block; margin-top: 14px; }
/* Closed only where :has() can actually re-open it. */
@supports selector(:has(*)) {
#fonLcg .opt--sub:not(:has(input:checked)) .sub__panel { display: none; }
}
#fonLcg .sub__freqwrap { position: relative; display: block; }
#fonLcg .sub__freqwrap::after {
content: ""; position: absolute; right: 15px; top: 50%; width: 8px; height: 8px;
border-right: 1.8px solid var(--blue); border-bottom: 1.8px solid var(--blue);
transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
#fonLcg .sub__freq {
width: 100%; appearance: none; -webkit-appearance: none;
padding: 13px 38px 13px 15px;
border: 1px solid var(--card-edge); border-radius: var(--r-sm);
background: var(--chip); color: var(--blue);
font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.3;
cursor: pointer; text-overflow: ellipsis;
}
#fonLcg .sub__freq:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#fonLcg .sub__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
#fonLcg .sub__list li { position: relative; padding-left: 30px; font-size: 13.5px; line-height: 1.4; color: var(--fg-mut); }
#fonLcg .sub__list li::before {
content: ""; position: absolute; left: 0; top: -1px;
width: 19px; height: 19px; border-radius: 50%;
background: var(--chip); border: 1px solid var(--card-edge);
}
#fonLcg .sub__list li::after {
content: ""; position: absolute; left: 6px; top: 6px;
width: 7px; height: 4px;
border-left: 1.6px solid var(--blue); border-bottom: 1.6px solid var(--blue);
transform: rotate(-45deg);
}
/* .opt__b b is display:block for the plan cards' stacked headings; these bullets
sit inside that same card, so the count was breaking onto its own line. */
#fonLcg .sub__list b { display: inline; font-weight: 600; color: var(--fg); }
/* THE PRICE COLUMN IS ONE NARROW STACK, NOT A ROW THAT WRAPS.
With the figure and its struck comparison side by side the column needed
~150px of a 276px card, which left the name 112px and broke "Subscribe &
Save" over two lines with "90-day supply, billed monthly" running to four
underneath it. Stacked — figure, comparison, per-day — the column is about
80px, the name gets a real measure back, and the three numbers read top to
bottom in descending importance instead of competing on one baseline.
Per-day stays whatever else goes: it is the number a subscription is actually
weighed against. */#fonLcg .opt--plan .opt__price {
display: flex; flex-direction: column; align-items: flex-end;
gap: 1px; margin-top: 0; flex: none; text-align: right;
}#fonLcg .opt--plan .opt__price strong { font-size: 21px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: var(--fg); }#fonLcg .opt--plan .opt__price s { font-size: 12.5px; line-height: 1.2; color: var(--fg-soft); text-decoration-thickness: 1px; }#fonLcg .opt--plan .opt__price i { font-style: normal; font-size: 11.5px; line-height: 1.2; color: var(--fg-soft); }#fonLcg .opt__ups { display: grid; gap: 7px; margin-top: 13px; }#fonLcg .opt__ups > span {
display: flex; align-items: center; gap: 9px;
font-size: 13px; line-height: 1.35; color: var(--fg-mut);
}#fonLcg .opt__ups img { width: 18px; height: 18px; flex: none; }
/* The tag is only on the plain option now; the subscribe card has its banner. *//* A flavour its format cannot supply is removed, not greyed: syncFlavourStock()
toggles this class, so without the rule the class lands on an element nothing
hides and an unbuyable flavour stays clickable. */
#fonLcg .opt--oos { display: none; }
/* Format cards - ported from the prototype (css/sections.css). The image is
absolutely positioned inside the plate: a percentage height on a centred or
auto-sized grid item has no definite containing block to resolve against, and
lazy images are 0x0 before they load, so every other approach either spilled
the packshot past the corner radius or collapsed the plate until it arrived. */
#fonLcg .opt--fmt .opt__b {
display: grid; grid-template-columns: clamp(50px, 5.2vw, 74px) minmax(0, 1fr);
gap: clamp(12px, 1.2vw, 16px); align-items: center;
padding: clamp(11px, 1vw, 14px) clamp(12px, 1vw, 15px);
}
#fonLcg .opt__img {
position: relative; height: clamp(70px, 7vw, 104px);
border-radius: 9px; overflow: hidden;
background: #FFFFFF; border: 1px solid rgba(38, 32, 20, .07);
}
#fonLcg .opt__img img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 5px; object-fit: contain; }
#fonLcg .opt__txt { display: block; min-width: 0; }
#fonLcg .opt--fmt .opt__txt b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.2; color: var(--fg); }
#fonLcg .opt--fmt .opt__txt em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; line-height: 1.3; color: var(--fg-soft); }
#fonLcg .opt__from {
display: block; margin-top: 5px;
font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--fg);
font-variant-numeric: tabular-nums;
}
#fonLcg .opt--fmt input:checked + .opt__b .opt__img { background: #FFFFFF; }
@media (max-width: 559.98px) {
#fonLcg .cfg__opts--2 { grid-template-columns: 1fr; }
#fonLcg .opt--fmt .opt__b { align-items: center; }
#fonLcg .opt--fmt .opt__txt b { font-size: 14px; }
#fonLcg .opt--fmt .opt__txt em { display: inline; margin-top: 0; }
#fonLcg .opt__from { margin-top: 4px; font-size: 12.5px; }
}#fonLcg .opt__tag {
display: inline-block; margin-bottom: 6px;
padding: 3px 9px; border-radius: var(--r-pill);
background: var(--lime); color: var(--lime-ink);
font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
}#fonLcg .opt__price { display: block; margin-top: 8px; font-size: 15px; color: var(--fg-mut); }#fonLcg .opt__price strong { font-size: 21px; font-weight: 600; letter-spacing: -.03em; color: var(--fg); }#fonLcg .opt__price i { font-style: normal; font-size: 13px; color: var(--fg-soft); }#fonLcg .cfg__note { margin: 9px 0 0; font-size: 12.5px; color: var(--fg-soft); }#fonLcg .cfg__sum {
margin-bottom: 16px; padding: 14px 16px;
background: var(--chip); border: 1px solid var(--card-edge); border-radius: var(--r);
display: grid; gap: 8px;
}#fonLcg .cfg__sumrow { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 13.5px; color: var(--fg-soft); }#fonLcg .cfg__sumrow b { font-size: 14px; font-weight: 600; color: var(--fg); text-align: right; }#fonLcg .cfg__sumrow--big b { font-size: 24px; letter-spacing: -.03em; }#fonLcg .cfg__sumrow--big i { font-style: normal; font-size: 13px; font-weight: 400; color: var(--fg-soft); }
/* ---- THE TRUST ROW ---------------------------------------------------------
FOUR MARKS IN A ROW, NOT FOUR LINES OF FOOTNOTE.
This was 13px grey text with a CSS tick beside each item, stacked — the shape
of small print, sitting in the one place on the page where a buyer is
deciding whether to trust the purchase. The reference PDP runs its equivalent
as outlined marks with a short label under each, which reads in a glance and
survives being scrolled past.
The icons are FON's own, lifted from usefon.com's PDP for these same four
promises, so nothing here is a lookalike chosen off an icon set. Each sits in
a ring rather than on its own: at 15px these are small solid glyphs, and a
ring gives each one a consistent footprint so four different drawings still
line up as a set.
THREE ACROSS, ON ONE LINE, AT EVERY WIDTH. It was four, which on a phone
wrapped to a two-by-two block — and a square of four grey captions reads as
a specification table, not as reassurance. Three fit one row even at 360px,
so the promises stay a single glance instead of becoming a thing to read. */#fonLcg .badges {
list-style: none; margin: 18px 0 0; padding: 0;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 6px;
text-align: center;
}#fonLcg .badges li {
display: flex; flex-direction: column; align-items: center; gap: 8px;
font-size: 11.5px; line-height: 1.3; color: var(--fg-mut);
text-wrap: balance;
}#fonLcg .badges li img {
width: 17px; height: 17px; flex: none;
box-sizing: content-box; padding: 9px;
border: 1px solid var(--rule-str); border-radius: 50%;
opacity: .85;
}@media (max-width: 480px) {#fonLcg .badges { gap: 9px 5px; }#fonLcg .badges li { font-size: 10.5px; line-height: 1.28; }#fonLcg .badges li img { width: 15px; height: 15px; padding: 7px; } }
/* The old stacked treatment, kept for any other .badges list on the page. */#fonLcg .badges--rows { grid-template-columns: 1fr; gap: 8px; text-align: left; }@media (min-width: 520px) {#fonLcg .badges--rows { grid-template-columns: 1fr 1fr; } }#fonLcg .badges--rows li { position: relative; display: block; padding-left: 21px; font-size: 13px; line-height: 1.4; color: var(--fg-mut); }#fonLcg .badges--rows li::before {
content: ""; position: absolute; left: 2px; top: 6px;
width: 8px; height: 4.5px;
border-left: 1.8px solid var(--ink); border-bottom: 1.8px solid var(--ink);
transform: rotate(-45deg);
}
/* THE CHECKOUT NOTE IS THE LAST THING READ BEFORE PAYING, so it stops being
the faintest type on the page. Up a weight and into the mid grey, and held
on one line wherever the column can take it — it is three short statements
that only look like a paragraph because they were set like one. It is still
allowed to wrap on the narrowest phones; a clipped price disclosure would
be a worse outcome than a wrapped one. */
#fonLcg .cfg__fine {
margin: 14px 0 0;
font-size: 11.5px; font-weight: 500; line-height: 1.5;
color: var(--fg-mut);
text-wrap: balance;
}
@media (min-width: 560px) {#fonLcg .cfg__fine { white-space: nowrap; font-size: 11px; } }
/* --- Product carousel ----------------------------------------------------
Scroll-snap rather than a JS transform, so swipe and trackpad work with no
script and the strip degrades to something usable if page.js never runs. */#fonLcg .gal { margin-bottom: clamp(18px, 2vw, 26px); }#fonLcg .gal__stage { position: relative; }
/* ---- THE PACKSHOT CARRIES ITS OWN OFFER ------------------------------------
THE PRODUCT IMAGE WAS A PHOTOGRAPH AND NOTHING ELSE, at 350px on a phone,
with every fact about the product living in text somewhere below it. The
reference PDP puts a card of contents and a saving flag over its packshot,
and that is the whole reason its image reads as an offer rather than as a
picture — the two things a buyer wants to know are on the thing they are
already looking at.
BOTH ARE MARKUP OVER THE PHOTOGRAPH, NEVER BAKED INTO IT. This repo has
already paid for the alternative: generated frames carrying label text came
back with "6g Sugar" against a 0g label and "20 SacNets". Real text also
stays selectable, translatable and readable by a screen reader, and can be
corrected without re-rolling an image.
THE FRAME ALSO GETS BIGGER ON MOBILE, running edge to edge instead of sitting
inside the gutter, which is what leaves room for a card over it at a size
anyone can read. */
/* BOTTOM RIGHT, NOT TOP RIGHT. Sat in the top corner the card covered the
model's face, which is the one part of a lifestyle frame that is doing the
persuading. Low and right it sits over the counter and the out-of-focus
background, leaving the face, the sachet and the pour — the entire action of
the photograph — completely clear. The saving flag moves to the opposite
corner so the two never crowd one another. */
/* THE CARD IS SOLID, AND IT SHOWS THE INGREDIENTS RATHER THAN LISTING THEM.
The first version was a translucent, blurred panel carrying five small
number-and-label pairs. Two problems, and they compound: a frosted card over
a photograph has no edge of its own, so it read as a watermark rather than as
an object on the product; and five rows of tabular type with nothing in them
but figures is exactly the texture that reads as generated filler.
Solid white with a real shadow gives it an edge. FON's own photograph of each
raw ingredient — the same files the nutrient panel uses, already in the repo —
gives each row something that only this product could have put there. The
figures grew a step at the same time, because they are the reason the card is
on the picture at all. */
/* The dose the whole page is about is the only thing in here that is coloured. */
/* NO HIGHLIGHT BLOCK — THE TYPE CHANGES COLOUR.
A lime pill behind "1,000mg" was marking the figure by putting a shape around
it, which is a highlighter pen rather than typography, and it fought the
photograph underneath the card. Colour does the same job with nothing added
to the layout. It cannot be lime: at 1.2:1 on white, lime is invisible as
text. It is the blue that already marks every check on this page, at 4.5:1. */
/* The overlays sit on the first slide only. On the others the visitor is
looking at the box, the label or the preparation diagram, and a card over
those is covering the thing they went looking for. *//* THE DOSE CARD IS THE FIRST FRAME'S, NOT THE GALLERY'S - Akaash. It was
scoped with a sibling selector that could never match: .galcard is a child of
.gal__stage and .gal__slide is a child of .gal__track, so the two are never
siblings and the card was drawn over all five photographs. The stage carries
.is-off from the same mark() that moves the thumbnails, so the card is tied to
the frame that is actually on screen. No JS, no class, card stays - which is
the right failure, because slide one is what loads first. */#fonLcg .gal.is-off .galcard { display: none; }@media (max-width: 939.98px) {
/* Full-bleed frame: +40px of picture, and the room the card needs. */#fonLcg .gal__stage { margin-inline: calc(var(--gutter) * -1); }#fonLcg .gal__slide img { border-radius: 0; }
/* THE CONTENTS CARD COMES OFF THE PHOTOGRAPH ON A PHONE.
Two positions were tried and both failed for the same reason: the frame
is 390px wide and the card needs five rows, so wherever it goes it takes
a third of the picture. Bottom-right it covered the glass and the pour;
centred on the right edge it still crowded the subject.
It is also redundant here. The benefit checklist sits directly under this
gallery on a phone and carries every one of the same five figures --
1,000mg, 25g, 5g, 20 billion, 13 -- at a size anyone can read. So the
card was covering the photograph to repeat what the next 200px already
says. The saving flag stays, because nothing else on screen carries it.
It returns at 940px, where the gallery has its own column and the space
it occupies is space nothing else wanted. */#fonLcg .gal__thumbs { margin-top: 12px; }
}#fonLcg .gal__track {
list-style: none; margin: 0; padding: 0;
display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
overflow-x: auto; scroll-snap-type: x mandatory;
border-radius: var(--r-lg); border: 1px solid var(--card-edge); background: #fff;
scrollbar-width: none;
}#fonLcg .gal__track::-webkit-scrollbar { display: none; }#fonLcg .gal__track:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }#fonLcg .gal__slide { scroll-snap-align: center; }#fonLcg .gal__slide img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }#fonLcg .gal__nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
background: rgba(255, 255, 252, .92); border: 1px solid var(--card-edge);
box-shadow: 0 2px 10px rgba(38, 32, 20, .14);
display: grid; place-content: center;
}#fonLcg .gal__nav::before {
content: ""; width: 9px; height: 9px;
border-left: 1.8px solid var(--ink); border-bottom: 1.8px solid var(--ink);
}#fonLcg .gal__nav--prev { left: 10px; }#fonLcg .gal__nav--prev::before { transform: rotate(45deg) translate(1px, -1px); }#fonLcg .gal__nav--next { right: 10px; }#fonLcg .gal__nav--next::before { transform: rotate(-135deg) translate(1px, -1px); }#fonLcg .gal__nav:disabled { opacity: 0; pointer-events: none; }#fonLcg .gal__nav:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }#fonLcg .gal__thumbs {
list-style: none; margin: 10px 0 0; padding: 0;
display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}#fonLcg .gal__thumb {
display: block; width: 100%; padding: 0; cursor: pointer;
background: #fff; border: 1px solid var(--card-edge); border-radius: 9px;
overflow: hidden; line-height: 0;
}#fonLcg .gal__thumb img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }#fonLcg .gal__thumb.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }#fonLcg .gal__thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* --- Value stack --- */#fonLcg .stack {
margin-top: clamp(28px, 3.2vw, 46px);
padding: clamp(22px, 2.6vw, 34px);
background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--r-lg);
}#fonLcg .stack__head { margin-bottom: clamp(18px, 2vw, 24px); }#fonLcg .stack__head .h3 { margin-bottom: 5px; }#fonLcg .stack__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }@media (min-width: 640px) {#fonLcg .stack__l { grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 48px); } }#fonLcg .stack__l li {
display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
padding-block: 10px; border-bottom: 1px solid var(--rule);
font-size: 14.5px; color: var(--fg-mut);
}#fonLcg .stack__l b { font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
/* The packshot beside the basket, with the saving riding on it as a badge, and
the comparison resolved as a COST PER DAY. Two columns from 820px, where the
basket has room to sit next to the image without either being squeezed. */#fonLcg .stack__grid { display: grid; gap: clamp(22px, 3vw, 44px); align-items: center; }@media (min-width: 820px) {#fonLcg .stack__grid { grid-template-columns: 1fr 1fr; } }#fonLcg .stack__art { position: relative; display: grid; place-items: center; padding-block: 6px; }#fonLcg .stack__art > img { width: min(100%, 480px); height: auto; }
/* The badge is a disc, so it needs a fixed square and centred text rather than
padding — padding on a circle pushes the label off its own centre. */#fonLcg .stack__badge {
position: absolute; top: clamp(-38px, -2.4vw, -16px); right: clamp(0px, 3vw, 26px);
display: grid; place-content: center; text-align: center;
width: clamp(96px, 11vw, 128px); aspect-ratio: 1; border-radius: 50%;
background: var(--lime); color: var(--lime-ink);
box-shadow: 0 10px 26px -12px rgba(38, 32, 20, .5);
}#fonLcg .stack__badge b { display: block; font-size: clamp(20px, 2.3vw, 27px); font-weight: 600; letter-spacing: -.03em; line-height: 1; }#fonLcg .stack__badge span { display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.25; }
/* BELOW THE TWO-COLUMN BREAK, THE PACK AND THE BADGE SIT SIDE BY SIDE.
Stacked, the packshot took 300px of a 1168px card to show a white box on a
white ground, and the disc — positioned for a column that only exists above
820px — landed on top of the carton and clipped its corner. Neither is
carrying 300px of page.
In a row they are a 130px band: the pack at a size where the label is still
readable, the saving beside it where it reads as a figure rather than a
sticker stuck on the product. The disc goes back to `position: absolute` at
820px, where the art has its own column again. */@media (max-width: 819.98px) {#fonLcg .stack__grid { gap: 18px; }#fonLcg .stack__art {
display: flex; align-items: center; justify-content: center;
gap: clamp(16px, 5vw, 30px); padding-block: 0;
}
/* THE PRODUCT IS THE BIGGER OF THE TWO. First attempt at overlapping put a
112px disc over a 168px carton, so the badge was most of the product's own
height and sat across its label: the saving was reading as the hero and the
thing being sold as its backdrop. The pack is now the largest object in the
block and the disc clips only its top-right corner, which is the
arrangement in the supplied reference — a saving stuck to the product reads
as this product's saving, but only while the product is still what you see
first.
The offset is explicit rather than the `right:` used above 820px, because
here the art is a centred flex row rather than a column of its own. */#fonLcg .stack__art { position: relative; display: block; text-align: center; padding-block: 4px; }#fonLcg .stack__art > img { width: min(88%, 360px); margin-inline: auto; }#fonLcg .stack__badge {
position: absolute; top: -14px; left: 50%;
width: 86px;
transform: translateX(46px);
}#fonLcg .stack__badge b { font-size: 19px; }#fonLcg .stack__badge span { font-size: 9px; }
}#fonLcg .stack__k {
margin: 0 0 10px; font-size: 12px; font-weight: 600;
letter-spacing: .13em; text-transform: uppercase; color: var(--fg-soft);
}#fonLcg .stack__sum { margin-top: clamp(16px, 1.8vw, 22px); display: grid; gap: 8px; }#fonLcg .stack__row {
display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
padding: 13px 16px; border-radius: var(--r-md);
background: #FFFFFF; border: 1px solid var(--card-edge);
font-size: 14px; color: var(--fg-mut);
}#fonLcg .stack__row b { font-size: clamp(19px, 2.1vw, 25px); font-weight: 600; letter-spacing: -.03em; color: var(--fg); font-variant-numeric: tabular-nums; }#fonLcg .stack__row i { font-style: normal; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--fg-soft); }
/* THE FILL COMES BACK HERE. This row IS a selection — it is the option the
comparison is recommending, sitting between the one it beats and the saving
it produces — and a fill is the right way to mark a chosen thing. That is the
distinction: highlight a choice, never highlight a word inside a sentence. */#fonLcg .stack__row--key { background: rgba(234, 246, 171, .42); border-color: rgba(38, 32, 20, .26); color: var(--fg); }#fonLcg .stack__row--save { background: transparent; border-style: dashed; }#fonLcg .stack__f { margin: clamp(12px, 1.4vw, 16px) 0 0; font-size: 11.5px; line-height: 1.5; color: var(--fg-soft); }
/* --- The 90-day guarantee, rebuilt out of elements ----------------------
Every value below was a pixel in a PNG this afternoon. That is the point: the
heading can be resized, the quote reworded, the faces swapped and the whole
card reflowed, none of which was possible while it was one flat 1008x702
composite scaled to whatever width it landed in.
IT NEVER STACKS. The first pass dropped to one column under 760px and put the
packshot beneath the copy, which is the reflex answer and the wrong one here:
the card is a claim and a piece of evidence, and side by side is what makes
them read as one statement. Stacked, it also became the tallest thing between
the offer and the FAQ - the same "too long" the composite had. So the two
columns hold at every width and the type scales instead, which is the trade
the artwork was making all along.
The sizes are set twice rather than in one clamp. A single curve wide enough
to give a 50px headline at 1440 leaves 13px at 390, and one narrow enough to
be readable at 390 caps far too low for the desktop card. Two ranges, one
breakpoint, no compromise in the middle. */
#fonLcg .gtee {
margin: clamp(16px, 1.8vw, 24px) 0 0;
display: grid; align-items: center;
grid-template-columns: minmax(0, 1fr) 34%;
gap: clamp(12px, 2.4vw, 34px);
padding: clamp(14px, 2.2vw, 32px);
background: var(--card);
border: 1px solid var(--card-edge); border-radius: var(--r-lg);
}
#fonLcg .gtee__h {
margin: 0;
font-size: clamp(16px, 4.7vw, 26px); font-weight: 700;
line-height: 1.09; letter-spacing: -.03em; color: var(--ink);
text-wrap: balance; max-width: 16ch;
}
/* Grey, and a shade lighter than body copy: it is a quotation inside a card,
not the card's own voice, and it sits under the heading without competing. */
#fonLcg .gtee__q {
margin: clamp(8px, 2.2vw, 16px) 0 0; padding: 0; border: 0;
font-size: clamp(11.5px, 3.2vw, 17px); line-height: 1.35;
color: var(--grey-500); max-width: 34ch;
}
#fonLcg .gtee__by {
margin: clamp(8px, 2.2vw, 16px) 0 0;
font-size: clamp(11px, 3vw, 16px); line-height: 1.3; color: var(--ink);
}
#fonLcg .gtee__by b { font-weight: 700; }
#fonLcg .gtee__by i { font-style: italic; }
/* aria-hidden in the markup, so this is decoration and needs no list semantics.
The ring is the CARD's colour, not white for its own sake - it is there to
cut one face from the next where they overlap, so it has to be whatever is
behind them. */
#fonLcg .gtee__faces {
list-style: none; display: flex; margin: clamp(10px, 2.6vw, 18px) 0 0; padding: 0;
}
#fonLcg .gtee__faces li {
width: clamp(28px, 8vw, 44px); aspect-ratio: 1;
border-radius: 50%; overflow: hidden;
box-shadow: 0 0 0 2px var(--card);
}
#fonLcg .gtee__faces li + li { margin-left: -8px; }
/* The stills are 420x746 portrait video frames, so a centred square crop lands
on a collarbone. Pulled up to the top third, it lands on the face. */
#fonLcg .gtee__faces img {
display: block; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 22%;
}
#fonLcg .gtee__count {
margin: clamp(7px, 1.8vw, 11px) 0 0;
font-size: clamp(10.5px, 2.9vw, 15px); font-weight: 600; line-height: 1.32;
color: var(--ink); max-width: 22ch;
}
/* 3:4 out of a 1:1 file. The pour is centred in the frame, so the crop takes
the width off both sides and loses nothing that matters. */
#fonLcg .gtee__shot {
aspect-ratio: 3 / 4; overflow: hidden;
border-radius: clamp(8px, 1.3vw, 20px);
box-shadow: var(--lcg-shadow);
}
#fonLcg .gtee__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* --- and from 760px up, the desktop range ---
The copy is the half of this card that carries it - the packshot is the same
pour that already leads the gallery a screen above - so the left column takes
the growth and the photograph stops at 310px rather than tracking the page. */
@media (min-width: 760px) {
#fonLcg .gtee { grid-template-columns: minmax(0, 1fr) clamp(220px, 24vw, 310px); }
#fonLcg .gtee__h { font-size: clamp(30px, 3.4vw, 50px); }
#fonLcg .gtee__q { font-size: clamp(17px, 1.55vw, 22px); }
#fonLcg .gtee__by { font-size: clamp(15px, 1.35vw, 19px); }
#fonLcg .gtee__faces li { width: clamp(46px, 4.2vw, 60px); }
#fonLcg .gtee__faces li + li { margin-left: -10px; }
#fonLcg .gtee__count { font-size: clamp(14px, 1.25vw, 18px); }
}
/* --------------------------------------------------------------------------
5 · REFERENCE STACK + FAQ (shared accordion)
/* The FAQ follows the video row inside the same section, so its heading needs
the air a section boundary would otherwise have given it. */#fonLcg .faq__head { margin-top: clamp(48px, 7vw, 88px); }
-------------------------------------------------------------------------- */#fonLcg .faq { border-top: 1px solid var(--rule); }#fonLcg .faq__i { border-bottom: 1px solid var(--rule); }
/* THE "DETAIL, IF YOU WANT IT" DIVIDER IS GONE and the thirteen panels are one
list. It was marking where the questions ended and the specification began,
which is a distinction the page cared about and the reader did not: both
halves are the same object — a question you can open — and splitting them put
a second heading inside a section that already has one.
SMOOTH OPEN AND CLOSE. A snaps because its content goes from
`display: none` to laid out in one frame, and no amount of transition on the
panel can catch that. `::details-content` is the browser's own handle on that
box, and `interpolate-size: allow-keywords` is what makes `height: auto`
animatable at all — without it there is no numeric end state to travel to.
`content-visibility` has to be transitioned `allow-discrete` alongside, or
the box vanishes on frame one of the close and the height animates against
nothing.
Wrapped in @supports so this is strictly additive: where it is unsupported
the accordion opens instantly, exactly as it did before. */@supports (interpolate-size: allow-keywords) {#fonLcg { interpolate-size: allow-keywords; }#fonLcg .faq__i::details-content {
height: 0;
overflow: hidden;
transition: height .34s var(--ease), content-visibility .34s var(--ease) allow-discrete;
}#fonLcg .faq__i[open]::details-content { height: auto; }
}#fonLcg .faq__i summary {
display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
padding-block: clamp(16px, 1.9vw, 22px);
cursor: pointer; list-style: none;
font-size: clamp(16px, 1.3vw, 18.5px); font-weight: 500; letter-spacing: -.014em; line-height: 1.35;
color: var(--fg);
transition: color var(--d-fast) var(--ease);
}#fonLcg .faq__i summary::-webkit-details-marker { display: none; }#fonLcg .faq__i summary:hover { color: var(--ink); }#fonLcg .faq__i summary::after {
content: ""; flex: none; width: 15px; height: 15px; margin-top: 5px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8, replaces it. */#fonLcg .film__t {
position: relative; display: block; width: 100%; padding: 0; border: 0;
border-radius: 18px; overflow: hidden; cursor: pointer;
background: var(--grey-300); aspect-ratio: 9 / 16;
box-shadow: 0 18px 44px -22px rgba(38, 32, 20, .5);
}#fonLcg .film__t img, #fonLcg .film__t video {
display: block; width: 100%; height: 100%; object-fit: cover;
}
/* The poster is a muted showing its own first frame, so it must not
swallow the click meant for the tile, and it goes when the real player
arrives. */#fonLcg .film__poster { pointer-events: none; }#fonLcg .film__t.is-live .film__poster { display: none; }#fonLcg .film__t::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, transparent 38%, rgba(0,0,0,.42) 100%);
}#fonLcg .film__t.is-live::after { display: none; }#fonLcg .film__badge {
position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
display: grid; place-items: center;
width: clamp(48px, 6vw, 66px); aspect-ratio: 1; border-radius: 50%;
background: rgba(255, 255, 255, .92); backdrop-filter: blur(2px);
box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .5);
transition: transform var(--d-fast) var(--ease);
}#fonLcg .film__t:hover .film__badge { transform: translate(-50%, -50%) scale(1.06); }#fonLcg .film__badge::before {
content: ""; margin-left: 3px;
border-style: solid; border-width: 9px 0 9px 15px;
border-color: transparent transparent transparent var(--ink);
}#fonLcg .film__t.is-live .film__badge { display: none; }
/* The caption rides the scrim, so it needs no room of its own. */#fonLcg .film__cap {
position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; margin: 0;
font-size: 12.5px; font-weight: 600; line-height: 1.25; color: #FFFFFC;
text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}#fonLcg .film__t.is-live .film__cap { display: none; }
/* A tile with no source yet is not a button and must not look like one: no
badge, no pointer, no hover. It is a photograph until its file exists. */#fonLcg .film__t--empty { cursor: default; }#fonLcg .film__t--empty .film__badge { display: none; }@media (max-width: 899.98px) {#fonLcg .film__grid { grid-template-columns: repeat(2, 1fr); }
}@media (max-width: 739.98px) {#fonLcg .film__grid { gap: 8px; }#fonLcg .film__cap { font-size: 11px; left: 10px; right: 10px; bottom: 9px; }
}
/* ==========================================================================
THE REVIEW ROW, MOVING
Below the 1040px grid the row scrolls itself. As a static swipe rail it sat
with the second card sliced through the middle of a sentence, which reads as
a clipped layout rather than as an invitation to swipe.
HOW THE SEAM IS AVOIDED: page.js appends an aria-hidden duplicate of the
whole set, so the track holds the reviews twice, and the animation travels
exactly one copy. `translateX(-50%)` alone lands half a gap out — with N
cards duplicated to 2N the track is 2N*w + (2N-1)*g wide, and half of that
is one gap short of a whole copy — so half the gap is added back and the
loop is invisible.
The track is `width: max-content` so the cards keep their real width instead
of resolving a percentage against a container that no longer has a fixed
size, which is why the card width below is absolute rather than 84%.
ONE ROW AT EVERY WIDTH. This used to stop at 1040px and hand over to a
three-up grid, which is what put six reviews on two static rows: the row
that was alive on a phone went dead on the machine most people read the
page on. The marquee now runs everywhere and the cards simply grow into
the space rather than re-flowing into a block.
========================================================================== */#fonLcg .rgrid__list[data-marquee="on"] {
--rgrid-card: 278px;
--rgrid-gap: 12px;
grid-auto-columns: var(--rgrid-card);
width: max-content;
/* Manual scrolling and snapping are for the static fallback; a scroll
container that is also being translated fights the user's finger. */
overflow: visible;
scroll-snap-type: none;
margin-inline: 0;
padding-inline: 0;
padding-bottom: 0;
/* PER CARD, NOT PER LOOP, so three reviews and twelve travel at the same
speed. At 5.2s a 360px card crossed at about 70px a second, which is
faster than the eye tracks a sentence it is trying to start reading -
the row registered as motion rather than as testimony. 9s puts it at
about 40px a second: a drift you can read across. */
animation: rgrid-marquee calc(var(--rgrid-n, 6) * 9s) linear infinite;
will-change: transform;
}
/* Stop it while it is being read or tabbed through. */#fonLcg .rgrid__list[data-marquee="on"]:hover,
#fonLcg .rgrid__list[data-marquee="on"]:focus-within { animation-play-state: paused; }
/* The row runs full-bleed, and fades into the surface at both ends so cards
arrive and leave rather than being cut off by the viewport edge. */#fonLcg .rgrid:has(> [data-marquee="on"]) {
overflow: hidden;
margin-inline: calc(var(--gutter) * -1);
padding-inline: var(--gutter);
/* THE FADE HAS TO BE WIDER THAN THE GUTTER TO DO ITS JOB. At 20px it was
technically applied and visually useless: a card still met the edge of
the screen at full opacity with a word chopped through the middle, which
is the exact thing the static rail was being replaced for. Over 56px a
card visibly dissolves as it leaves, so a partial card reads as one that
is on its way out rather than one that is broken. */
--rgrid-fade: 56px;
}
/* Wider cards and a wider dissolve once there is room for them; 278px on a
1440px screen read as a ticker of receipts rather than as reviews. */
@media (min-width: 700px) {#fonLcg .rgrid__list[data-marquee="on"] { --rgrid-card: 320px; --rgrid-gap: 16px; }
}
@media (min-width: 1040px) {#fonLcg .rgrid__list[data-marquee="on"] { --rgrid-card: 360px; --rgrid-gap: 20px; }
#fonLcg .rgrid:has(> [data-marquee="on"]) { --rgrid-fade: 96px; }
-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--rgrid-fade), #000 calc(100% - var(--rgrid-fade)), transparent);
mask-image: linear-gradient(to right, transparent, #000 var(--rgrid-fade), #000 calc(100% - var(--rgrid-fade)), transparent);
}
/* Smaller cards. At full size two of them filled a phone screen on their own
and the row read as a stack of documents rather than as a row of quotes. */
@media (max-width: 1039.98px) {#fonLcg .rcard { padding: 16px 16px 15px; gap: 8px; }#fonLcg .rcard__stars i { width: 13px; height: 13px; }#fonLcg .rcard__t { font-size: 14.5px; }#fonLcg .rcard__b { font-size: 13px; line-height: 1.5; -webkit-line-clamp: 5; max-height: calc(1.5em * 5); }#fonLcg .rcard__f { padding-top: 11px; }#fonLcg .rcard__av { width: 32px; height: 32px; }#fonLcg .rcard__who b { font-size: 12.5px; }#fonLcg .rcard__who span { font-size: 11px; }
}@keyframes rgrid-marquee {from { transform: translateX(0); }to { transform: translateX(calc(-50% - (var(--rgrid-gap) / 2))); }
}
/* THE DUPLICATE SET EXISTS ONLY FOR THE MOVING ROW.
The clones are appended unconditionally by page.js, so anywhere the marquee
is not running they have to be taken back out — otherwise the reduced-motion
swipe rail scrolls through the same six reviews a second time.
The 1040px rule that used to sit here went with the grid: above that width
the marquee is now running too, and hiding its second copy would have left
the row travelling -50% into empty space once a loop came round. */@media (prefers-reduced-motion: reduce) {#fonLcg .rgrid__list > [aria-hidden="true"] { display: none; }
}
/* Motion this large is exactly what the reduced-motion query is for. The row
goes back to being a swipe rail, which is fully usable and completely still. */@media (prefers-reduced-motion: reduce) {#fonLcg .rgrid__list[data-marquee="on"] {
animation: none;
width: auto;
overflow-x: auto;
scroll-snap-type: x mandatory;
grid-auto-columns: 84%;
}#fonLcg .rgrid:has(> [data-marquee="on"]) { -webkit-mask-image: none; mask-image: none; }
}
/* Stars drawn as CSS shapes rather than a font or an SVG sprite: no request.
Filled in the theme's gold rather than ink: a row of black stars reads as
five glyphs, and the same row in gold reads as a rating without anyone
having to look twice. The empty state stays a faded version of the same
shape, so the ratio is still legible at a glance. */#fonLcg .rcard__stars { display: inline-flex; gap: 3px; }#fonLcg .rcard__stars i {
width: 15px; height: 15px; background: var(--star);
-webkit-mask: url("data:image/svg+xml;utf8,s of three,
so making each list two columns left an orphan on a third row in each and the
block came out ragged. `display: contents` drops both list boxes so all six
become items of the callout grid itself, giving one clean 2 x 3 beside
the pack. The lists carry role="list" in the markup, because removing the box
also removes list semantics in some browsers and this is a list of doses.
From 620px the arrangement the panel was designed for returns: doses either
side of a centred pack, each list back to a single column. */
/* The pack column is an explicit width, not `auto`. `width: 100%` on the image
inside an `auto` track is circular — the track sizes to the content and the
content sizes to the track — and the pack resolved to 0x0. */#fonLcg .callout { display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }#fonLcg .callout__l { list-style: none; margin: 0; padding: 0; display: contents; }#fonLcg .callout__pack {
grid-row: 1 / span 3; align-self: center;
width: 100%; height: auto; margin-inline: auto;
filter: drop-shadow(0 18px 30px rgba(38, 32, 20, .22));
}@media (min-width: 620px) {#fonLcg .callout { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(12px, 1.8vw, 24px); align-items: center; }#fonLcg .callout__l { display: grid; grid-template-columns: 1fr; gap: 8px; }
/* BIGGER ON DESKTOP. At 86px the pack was a thumbnail floating between two
lists that were doing all the work. It is the product, and the whole layout
is built around it, so it is sized to hold the middle. */
/* ORDER MATTERS HERE: the pack is markup-first, so left to itself it took
column one and the two dose lists sat together to its right, which is not
"doses either side of the pack" and is why one column came out 94px wide
against the other at 290px. The first list is pulled ahead of it. */#fonLcg .callout__pack { grid-row: auto; order: 0; width: auto; max-width: 120px; }#fonLcg .callout__l--a { order: -1; text-align: right; }#fonLcg .callout__l--b { order: 1; }
}@media (min-width: 1100px) {#fonLcg .callout__pack { max-width: 132px; } }#fonLcg .callout__l li {
padding: 10px 13px; border-radius: 11px; background: var(--tile);
border: 1px solid rgba(38, 32, 20, .08);
}#fonLcg .callout__l b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--fg); }#fonLcg .callout__l span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--fg-soft); }#fonLcg .callout__l--a li:first-child b { color: var(--blue); }
/* --- 06 · the callout, now sitting under a photograph -------------------
The photo carries the product, so the callout drops its pack column and
becomes a plain grid of the six label amounts. Six lays out 2x3 on a phone
and 3x2 from 620px, which keeps every figure and its unit on one line. The
numbers stay as text here on purpose: they are label doses, and a generated
image cannot be trusted to print them. */
#fonLcg .panel--under { margin-top: 10px; }
#fonLcg .callout--nopack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; align-items: start; }
#fonLcg .callout--nopack .callout__l { display: contents; }
@media (min-width: 620px) {
#fonLcg .callout--nopack { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); align-items: start; }
#fonLcg .callout--nopack .callout__l--a { text-align: left; }
}
/* --- 06 · the step tiles -------------------------------------------------- */#fonLcg .tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }#fonLcg .tile { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start; padding: 14px 16px; border-radius: 13px; background: var(--tile); }#fonLcg .tile > b {
display: grid; place-items: center; flex: none;
width: 26px; height: 26px; border-radius: 50%;
background: var(--ink); color: #FFFFFC;
font-size: 12.5px; font-weight: 600; line-height: 1;
}#fonLcg .panel--ink .tile > b { background: var(--lime); color: var(--lime-ink); }#fonLcg .tile > span { display: block; font-size: 13px; line-height: 1.45; color: var(--fg-mut); }#fonLcg .tile em { display: block; font-style: normal; font-size: 14px; font-weight: 600; color: var(--fg); margin-bottom: 2px; }
/* --- 07 · the week timeline ----------------------------------------------- */
/* ---- FON'S OUTCOME ICONS, DRAWN AS MASKS -----------------------------------
usefon.com's PDP ships one mark per reported outcome, and the four labels in
the study block below are word-for-word the four those marks belong to. They
are used here and in the week timeline so the evidence and the timeline share
one vocabulary.
THEY ARE MASKS, NOT , so it matched these four
links and blew them up from the 14px they inherit from .hdr__nav. */
#fonLcg .hdr__nav a { font-size: inherit; font-style: inherit; }
/* fon-combined-style-common.css `.panel {width:100%; height:100%}` — another
class-name collision; the prototype's .panel sizes itself from its content. */
#fonLcg .panel { width: auto; height: auto; }
/* --- Buy box on a phone -------------------------------------------------
THE BUY BOX GOES EDGE TO EDGE ON A PHONE. At 390px the card was losing
82px of horizontal room before a word was set: 20px of shell gutter each
side, 1px of card border each side, and 20px of card padding each side.
That left ~308px, which is why "Sachets . Chocolate Milkshake . 90-Day"
broke mid-phrase, "One-time purchase / Delivered once, no subscription"
wrapped, and the four trust badges stacked four lines deep.
Pulling the card out by the gutter it sits in gives the full viewport and
drops the internal padding to 16px, so the content gets ~358px instead -
about 16% more. The side border and the corner radius go with it, because
a full-bleed card with rounded corners and a hairline edge reads as a
mistake rather than a decision. */
@media (max-width: 899.98px) {
/* Raised from 640px to the page’s own mobile breakpoint. Between the two the
buy box was still an inset card with a border and a radius, on a screen with
no room to spare for either — the frame was costing 42px of line length to
draw an edge nobody needed. Full width, no card, all the way to 900px. */
#fonLcg .cfg {
margin-inline: calc(var(--gutter) * -1);
border-left: 0; border-right: 0; border-radius: 0;
padding-inline: 12px;
}
/* THE PADDING WAS NESTED. Going full bleed only removed the outer gutter;
inside it the card still padded 16px and then every option card padded
another 16px, so a line of copy had 390 - 32 - 32 = 326px to live in.
Trimming both layers to 12px gives 342px. Only the inline padding moves,
so the cards keep their vertical rhythm. */
#fonLcg .opt--plan .opt__b { padding: 14px 12px; }
#fonLcg .opt--sub .opt__b { padding: 0; }
#fonLcg .opt--sub .opt__head { padding: 13px 12px 0; }
#fonLcg .opt--sub .opt__ups { padding: 0 12px 14px; }
#fonLcg .opt__banner { padding: 8px 12px; }
/* The two-by-two that used to sit here is gone with the fourth badge: three
across ~342px is ~114px a column, which the shortened labels hold on one
row without the block ever becoming a grid of text. */
}
/* ==========================================================================
PROOF MARKS
Every claim on the three proof rows now carries the mark of whoever is
actually vouching for it — Trustpilot’s star on the rating, Google’s G on
the review count, and a house glyph on the three that are FON’s own claim.
========================================================================== */
#fonLcg .pf { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#fonLcg .pf__i { flex: none; width: 15px; height: 15px; }
/* The Trustpilot star is a bare glyph with no padding inside its box, so at a
matched pixel size it reads heavier than the G. Pulled down to compensate. */
#fonLcg .pf__i--tp { width: 13px; height: 13px; }
#fonLcg .rating__src .pf__i--tp { width: 14px; height: 14px; }
/* A LOGO IS A MARK PLUS A NAME, NOT A MARK PARKED NEXT TO A RATING.
The star used to lead the item, which put it immediately beside the five
gold stars of the rating itself — two star shapes in two colours, touching,
which reads as a mistake rather than as a brand. Bound tight to the word
instead, at a gap narrower than the row gap, it reads as one unit. */
#fonLcg .pf__lock { display: inline-flex; align-items: center; gap: 4px; }
/* THE MARKS KEEP THEIR BRAND COLOUR — THE LOCKUP IS WHAT FIXED THE CLASH.
Going monochrome was treating the symptom. The green star did not fight the
gold rating because it was green; it fought because it was a star, sitting
against five other stars, a few pixels away. Bound to the word and moved off
the rating it is a logo, and a logo is allowed its own colour. The house
glyphs below stay grey on purpose: Trustpilot and Google are third parties
vouching for FON and have earned their colour on this row, while members,
refund and batch-testing are FON’s own claims and should not dress
themselves up as somebody else’s endorsement. */
/* ==========================================================================
AND THE WHOLE ROW COMES UP A SIZE.
500,000 members and a 4.8 from 2.1K reviews is the strongest thing the page
has to say, and it was being said at 13px in grey — smaller than the body
copy underneath it. The pill now carries the weight it earns: the figures
step up to 15px and to the full ink, the labels stay grey and small so the
numbers are what the eye lands on, and the faces and marks grow with them.
========================================================================== */
#fonLcg .proofpill {
gap: 9px 12px;
padding: 8px 18px 8px 9px;
font-size: 13.5px;
}
#fonLcg .proofpill b { font-size: 15px; letter-spacing: -.01em; }
#fonLcg .proofpill__av img { width: 30px; height: 30px; border-width: 2px; }
#fonLcg .proofpill__av img + img { margin-left: -10px; }
#fonLcg .proofpill__stars { font-size: 13px; letter-spacing: .05em; }
#fonLcg .proofpill .pf { gap: 7px; }
#fonLcg .proofpill .pf__i { width: 16px; height: 16px; }
/* The sticky bar is a fixed 62px, so it gets the same treatment at a smaller
step — enough to stop the proof reading as fine print, not enough to
crowd the nav. */
#fonLcg .hdr__proof { font-size: 13px; gap: 9px; }
#fonLcg .hdr__proof b { font-size: 14px; color: var(--ink); }
#fonLcg .hdr__stars { font-size: 13px; }
#fonLcg .hdr__proof .pf__i { width: 15px; height: 15px; }
/* The reviews bar is the one place the figures get real display size, so the
glyphs above them grow to match rather than sitting under them as specks. */
/* MARK ON THE LEFT AT THE HEIGHT OF BOTH LINES, TEXT ON THE RIGHT — the same
lockup the buy box uses, so the two places the page states its proof state
it the same way. Stacked, the glyph sat above the figure as a third line and
each fact was a little tower; beside it, the figure and its label read as
one statement and the row gets shorter. The mark spans both rows, so it
stays centred on the pair however the label wraps. */
@media (max-width: 639.98px) {
/* Two across ~330px gave each fact ~150px, so "members taking FON daily"
wrapped to two lines while "Google reviews" stayed on one and the rows
stopped lining up. One per row: every fact gets the full width, every
label fits, and the four read as a list rather than a broken table. */
#fonLcg .rating__facts { grid-template-columns: 1fr; gap: 13px; }
}
#fonLcg .rating__facts li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 11px; row-gap: 1px;
align-items: center;
}
#fonLcg .rating__facts .fact__i {
grid-column: 1; grid-row: 1 / span 2;
align-self: center;
width: 34px; height: 34px; margin: 0;
}
/* The faces are a li > span too, and that selector outranks .rating__faces,
so it was dragging them into column two and stacking them above the number.
Excluded by name rather than answered with more specificity. */
#fonLcg .rating__facts b,
#fonLcg .rating__facts li > span:not(.rating__faces) { grid-column: 2; }
#fonLcg .rating__faces {
grid-column: 1; grid-row: 1 / span 2; align-self: center;
display: inline-flex; margin: 0;
}
#fonLcg .rating__faces img {
width: 26px; height: 26px; border-radius: 50%;
object-fit: cover; border: 2px solid var(--card);
}
#fonLcg .rating__faces img + img { margin-left: -10px; }
@media (max-width: 639.98px) {
#fonLcg .rating__faces img { width: 24px; height: 24px; }
#fonLcg .rating__faces img + img { margin-left: -9px; }
}
#fonLcg .rating__facts b { font-size: 17.5px; }
#fonLcg .rating__stars { font-size: 16px; }
#fonLcg .rating__src { font-size: 13px; }
@media (max-width: 779.98px) {
#fonLcg .rating__facts .fact__i { width: 29px; height: 29px; margin: 0; }
#fonLcg .rating__facts li { column-gap: 9px; }
#fonLcg .rating__facts b { font-size: 15.5px; }
#fonLcg .rating__stars { font-size: 13px; }
}
/* On the phone the pill sits over the photograph, where it has less room and
more to compete with, so it scales down from the new base rather than up
from the old one. */
@media (max-width: 899.98px) {
#fonLcg .proofpill { gap: 7px 9px; padding: 6px 13px 6px 7px; font-size: 12px; }
#fonLcg .proofpill b { font-size: 13px; }
#fonLcg .proofpill__av img { width: 24px; height: 24px; border-width: 1.5px; }
#fonLcg .proofpill__av img + img { margin-left: -8px; }
#fonLcg .proofpill__stars { font-size: 11px; letter-spacing: .03em; }
#fonLcg .proofpill .pf { gap: 5px; }
#fonLcg .proofpill .pf__i { width: 14px; height: 14px; }
}
/* ==========================================================================
THE PLAN BENEFIT ROWS STAY ON ONE LINE.
"90 Sachets | One A Day For Best Results" was breaking onto a second line,
and because the row is a flex with the tick centred, the runover landed
UNDER the tick rather than under the text — so one promise read as two
bullets, the second of which had no tick. These are scan-copy: the line
holds, and the type steps down on the narrowest phones instead.
========================================================================== */
#fonLcg .opt__ups > span { white-space: nowrap; min-width: 0; }
@media (max-width: 640px) {
#fonLcg .opt__ups > span { font-size: clamp(10.5px, 3.3vw, 12.5px); gap: 7px; }
#fonLcg .opt__ups img { width: 15px; height: 15px; }
}
/* ==========================================================================
THE BUY BOX PROOF, AS A REVIEW WIDGET
It was one grey 13px line of six values separated by middots, which is a
list of numbers rather than a rating. Split across two lines with the mark
set at the height of both, the score reads first and the counts support it.
========================================================================== */
#fonLcg .pdp__proof { display: none; }
/* Sized to the two lines it stands beside, not to the type: 2 x 16px of line
box plus the 9px between them. Change the leading below and change this. */
#fonLcg .pdp__proof-mark { flex: none; width: 41px; height: 41px; }
#fonLcg .pdp__rate {
display: flex; align-items: center; flex-wrap: wrap;
gap: 5px 14px; margin: 0 0 12px;
font-size: 12.5px; line-height: 1.2; color: var(--fg-mut);
}
#fonLcg .pdp__rate b { font-weight: 600; color: var(--fg); }
#fonLcg .pdp__rate .pf { gap: 5px; }
#fonLcg .pdp__g { flex: none; width: 14px; height: 14px; }
#fonLcg .pdp__g--tp { width: 12px; height: 12px; }
#fonLcg .pdp__rateline { display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; gap: 2px 7px; }
#fonLcg .pdp__rateline--sub { font-size: 12.5px; }
#fonLcg .pdp__src { color: var(--fg-soft); }
#fonLcg .pdp__g { flex: none; width: 14px; height: 14px; }
#fonLcg .pdp__stars { font-size: 13.5px; }
@media (max-width: 640px) {
#fonLcg .pdp__proof { gap: 11px; margin-bottom: 18px; }
#fonLcg .pdp__proof-mark { width: 37px; height: 37px; }
#fonLcg .pdp__src { display: none; }
}
/* ==========================================================================
OPEN AND CLOSE, EVERYWHERE
The FAQ was already smooth, through ::details-content. Everything else on
the page that appears or disappears does it by toggling the `hidden`
attribute - the saving banner, the checkout error, the review row, the
gallery arrows - and `hidden` is display:none, which cannot be transitioned.
So all of them snapped.
`transition-behavior: allow-discrete` is what makes a display change
animatable: going to none, the display flip is held back until the opacity
has finished, so the element fades out and only then stops existing.
@starting-style supplies the from-state on the way in, which an element
that was display:none does not otherwise have.
Both are inside @supports. A browser without them gets exactly the snap it
gets today - nothing is worse than it was, it is only better where it can be.
========================================================================== */
@supports (transition-behavior: allow-discrete) {
/* FADE ONLY, AND QUICKLY. The first pass slid and scaled these as well,
which was wrong for where they actually live: the saving banner sits at
the top of the plan card and re-runs on EVERY change of plan, so a bit of
furniture the eye uses to compare prices was jumping and rescaling each
time the thing next to it was clicked. Motion that reads as craft once
reads as a fault by the third repeat. A short fade still removes the snap
without asking to be watched. */
#fonLcg .opt__banner,
#fonLcg .cfg__err,
#fonLcg .rgrid,
#fonLcg .gal__nav {
transition: opacity .2s var(--ease), display .2s allow-discrete;
}
#fonLcg .opt__banner[hidden],
#fonLcg .cfg__err[hidden],
#fonLcg .rgrid[hidden],
#fonLcg .gal__nav[hidden] { opacity: 0; }
@starting-style {
#fonLcg .opt__banner,
#fonLcg .cfg__err,
#fonLcg .rgrid,
#fonLcg .gal__nav { opacity: 0; }
}
}
/* The plan cards change state on click, and colour alone carries that fine.
Transitioning transform as well put a lift under a card the user is trying
to compare against the one beside it, which is the wrong moment to move
anything. Border and fill only, and fast enough to feel like a response
rather than an effect. */
#fonLcg .opt--plan .opt__b {
transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
/* The reviews, offer and FAQ washes that used to sit here are gone. The wash
belongs to the fold: it is the light the page opens in, and repeating it on
three more bands turned a single effect into a texture. */
/* ==========================================================================
THE SCROLL REVEAL COMES IN FROM THE SIDES
It used to rise 20px, which is the one direction that fights a page being
scrolled: the content moves the same way the scroll does, so the travel
cancels out and what is left reads as a flicker. Sideways is perpendicular
to the scroll, so the same distance is actually seen, and it can be given
a direction that means something instead of one that is merely up.
Each element enters from the side it already lives on. The listicle panels
sit in the right-hand column, so they arrive from the right and land where
the layout was always going to put them. The offer block splits its two
halves outward, left from left and right from right. The full-width blocks
alternate down the page so the run of them has a rhythm rather than a tic.
THE TRANSFORM IS DECLARED ONCE, on .rv, and the per-element rules only set
custom properties. Writing the transform into each of those rules instead
would raise their specificity above .rv.in, and the landed state would lose
to the starting state — every element would animate to its offset and stay
there. Two properties keep all of it at one specificity.
========================================================================== */
.anim #fonLcg .rv {
transform: translate3d(var(--rv-x, 0), var(--rv-y, 20px), 0);
transition:
opacity .66s cubic-bezier(.22, .68, 0, 1),
transform .66s cubic-bezier(.22, .68, 0, 1);
transition-delay: var(--d-i, 0ms);
}
.anim #fonLcg .rv.in { transform: none; }
/* from the right */
.anim #fonLcg .blk__panel.rv,
.anim #fonLcg .offer__right.rv,
.anim #fonLcg .rgrid.rv,
.anim #fonLcg .stack.rv,
.anim #fonLcg .midcta--end.rv { --rv-x: 44px; --rv-y: 0; }
/* from the left */
.anim #fonLcg .offer__left.rv,
.anim #fonLcg .rating.rv,
.anim #fonLcg .ugc.rv,
.anim #fonLcg .gtee.rv { --rv-x: -44px; --rv-y: 0; }
/* TEXT MOVES LESS THAN FURNITURE, AND FASTER.
A paragraph carried 44px across looks like it is being flown in; the same
line at 20px reads as settling. Shorter distance, shorter duration, and a
stagger applied by the script so the numeral, the heading and the body of
a beat arrive in the order they are read rather than all at once. */
.anim #fonLcg .rv--t {
--rv-x: -20px; --rv-y: 0;
transition-duration: .52s;
}
/* Centred copy is the exception: a centred heading sliding in from the left
is a centred heading that was briefly not centred. It rises instead. */
.anim #fonLcg .head--center .rv--t { --rv-x: 0; --rv-y: 14px; }
/* Shorter travel on a phone. The columns are stacked there, so nothing is
arriving from the side it belongs to any more — it is just movement, and
44px of it across a 390px screen is a third of the width. */
@media (max-width: 899.98px) {
.anim #fonLcg .rv { --rv-x: 0; }
/* Higher specificity than the .rv reset above, so it needs its own. */
.anim #fonLcg .rv--t { --rv-x: -13px; }
.anim #fonLcg .head--center .rv--t { --rv-x: 0; --rv-y: 12px; }
.anim #fonLcg .blk__panel.rv,
.anim #fonLcg .offer__right.rv,
.anim #fonLcg .rgrid.rv,
.anim #fonLcg .stack.rv,
.anim #fonLcg .midcta--end.rv { --rv-x: 26px; }
.anim #fonLcg .offer__left.rv,
.anim #fonLcg .rating.rv,
.anim #fonLcg .ugc.rv,
.anim #fonLcg .gtee.rv { --rv-x: -26px; }
}
/* The facts are a column — icon, number, label — so the glyph sits above the
figure and every one of the three lines still starts on the same left edge. */
#fonLcg .rating__facts .fact__i { width: 18px; height: 18px; margin-bottom: 6px; }
@media (max-width: 779.98px) {
#fonLcg .rating__facts .fact__i { width: 16px; height: 16px; margin-bottom: 4px; }
}
/* THE PILL IS ALLOWED TO WRAP AGAIN UNDER ~430px, AND THIS IS A REGRESSION
BEING PAID BACK. The phone-hero block pins it to flex-wrap:nowrap at 11px
on purpose - one line is what makes it read as a single claim rather than a
list. Then it was scaled up to 12px with 24px avatars in a later block at
the same breakpoint, which won on source order: the pill grew while it was
still forbidden to wrap, so at 390px it ran past the gutter and cut the word
"members" in half.
One clipped line reads as broken, which is worse than two clean ones, so
below 430px the no-wrap comes off and the separators stay hidden - they
would otherwise start the second line. Above 430px there is room and it
still holds the single line it was designed to hold. */
/* ONE LINE UNDER 430px, AND THE FACES ARE WHAT PAY FOR IT.
Measured at a 390px viewport, where the pill has 350px to live in:
11px + avatars ....... 387px over by 37
10px + avatars ....... 364px over by 14
11px, no avatars ..... 336px fits, 14px spare
With the faces in, it does not fit on one line at ANY readable size - 10px
type is already past the point of being worth reading and it is still 14px
too wide. Dropping the icons instead is not enough either; they are only
34px of the excess.
So on the narrowest phones the avatar stack goes and every figure stays.
The faces are decoration, the three numbers are the proof, and this is the
one width where that trade has to be made - above 430px the stack is back. */
@media (max-width: 429.98px) {
#fonLcg .proofpill i { display: none; }
#fonLcg .proofpill__av { display: none; }
#fonLcg .proofpill {
flex-wrap: nowrap;
white-space: nowrap;
gap: 6px;
padding: 5px 11px;
font-size: 11px;
}
#fonLcg .proofpill b { font-size: 12px; }
#fonLcg .proofpill__stars { font-size: 10px; }
#fonLcg .proofpill .pf { gap: 4px; }
#fonLcg .proofpill .pf__i { width: 13px; height: 13px; }
/* The buy box rating missed one line by a single pixel at 12.5px, and by
one again at 11.5px — the column narrows with the type, so the margin has
to be taken rather than trimmed to nothing. 11px leaves ~13px of slack. */
#fonLcg .pdp__rateline--sub { font-size: 11px; gap: 2px 5px; }
#fonLcg .pdp__g { width: 13px; height: 13px; }
/* THE FACES STAY AND THE WORD "STARS" GOES. Measured at 390px, where the
pill has 350px:
11px, avatars, all words ..... 377px over by 27
11px, avatars, no "stars" .... 339px fits, 11px spare
"stars" is the only word on the row that earns nothing — five gold stars
sit immediately to its left saying it already. Every other label stays,
and so do the faces. */
#fonLcg .proofpill__av { display: inline-flex; }
#fonLcg .pf__w { display: none; }
#fonLcg .proofpill__av img { width: 20px; height: 20px; border-width: 1.5px; }
#fonLcg .proofpill__av img + img { margin-left: -7px; }
/* The buy box rating row takes the same treatment as the pill: no avatars to
pay for here, so it holds all three labels at 11px. */
#fonLcg .pdp__rate { font-size: 11px; gap: 4px 10px; flex-wrap: nowrap; white-space: nowrap; }
#fonLcg .pdp__g { width: 13px; height: 13px; }
#fonLcg .pdp__g--tp { width: 11px; height: 11px; }
#fonLcg .pdp__stars { font-size: 11px; }
/* BREATHING ROOM. The phone column had been tightened repeatedly — tokens cut
30%, the buy box taken full width at 12px of inner padding, the ingredient
list halved — and each of those was right on its own, but together they
left the block with nothing between one idea and the next. The width stays;
the air goes back vertically, where it costs nothing horizontally. */
#fonLcg .ticks--check { gap: 11px; }
#fonLcg .ticks__lead { margin-bottom: 15px; }
#fonLcg .pdp__rate { margin: 20px 0 15px; }
#fonLcg .pdp__name { margin-bottom: 12px; }
#fonLcg .pdp__sub { line-height: 1.62; }
#fonLcg .pdp__id { margin-bottom: 30px; }
}
/* ==========================================================================
THE PROOF WALL
Built on the reference block: one dark card carrying the score, the count
and the faces together. The rating used to sit in a light card at the top
of the section and the videos arrived several thousand pixels later under
their own heading, so the number and the people it came from were two
separate claims. They are one now, and the card gives the middle of the
page its only dark anchor — until this, the ink band was the closing CTA
and nothing else.
========================================================================== */
/* THE SAME CARD THE PAGE ALREADY USES. This went black first, then lime,
and both were the same mistake in different paint: the reference block is
dark because dark green is THAT brand’s colour, so what carries over is the
idea — rating and faces in one card — not the darkness. This page already
has a card: --card on a --card-edge hairline, which is what the rating block
beside it is built from. Matching it means the two read as a pair instead of
one of them announcing itself. */
/* Specificity has to beat the original .ugc__head, which is a space-between
flex row built for a heading with a link opposite it. */
/* The figures carry on weight, and the words around them sit in the muted grey,
so the numbers come first without needing a colour of their own. */
/* The rail bled to the viewport edge to escape the section gutter; inside a
padded card that would run it under the card’s own edge instead. */
/* ==========================================================================
THE INGREDIENT GRID
FON’s own ingredient photography — the same files the other product sections
use — rather than a drawn icon set or a generated panel. Three across so it
holds two rows on a phone without any cell needing to wrap.
========================================================================== */
/* The .ing grid that used to sit here is gone. It was six cells where five
bullets had been, and taller than the thing it replaced. The bullets came
back on request; only the wording changed. */
/* The full-bleed that used to sit here is gone. It bought the generated frames
about 11% more type height on a phone, and cost them the thing that made them
read as exhibits: a card with an edge and air around it. Seven framed panels
down a column is the rhythm of the section — seven edge-to-edge images is a
slideshow. The legibility problem is real but it is the images’ problem, not
the frame’s. */
/* ==========================================================================
THE RATING FACTS, TIGHTENED
The figure and its label were drifting apart: default leading on a 17.5px
number over a 13px caption left more air inside one fact than between two of
them, so the row read as eight loose fragments rather than four statements.
Both lines pull in, the mark aligns to the top of the pair instead of
floating in the middle of a caption that wrapped, and on a phone the four
sit as one column with a hairline between them so each is visibly its own.
========================================================================== */
#fonLcg .rating__facts { row-gap: 18px; }
#fonLcg .rating__facts li { column-gap: 10px; row-gap: 0; align-items: start; }
#fonLcg .rating__facts b { line-height: 1.15; }
#fonLcg .rating__facts li > span { line-height: 1.32; margin-top: 2px; }
#fonLcg .rating__facts .fact__i { align-self: start; margin-top: 1px; width: 26px; height: 26px; }
@media (max-width: 639.98px) {
#fonLcg .rating { padding: 18px 16px; gap: 14px; }
#fonLcg .rating__facts { row-gap: 0; }
#fonLcg .rating__facts li { padding-block: 11px; column-gap: 11px; }
#fonLcg .rating__facts li + li { border-top: 1px solid var(--rule); }
#fonLcg .rating__facts .fact__i { width: 24px; height: 24px; }
#fonLcg .rating__facts b { font-size: 15px; }
#fonLcg .rating__facts li > span { font-size: 12.5px; }
}
/* ==========================================================================
"90 SACHETS | ONE A DAY FOR BEST RESULTS" HOLDS ONE LINE — THIRD ATTEMPT,
AND THIS TIME AT THE RIGHT THING.
white-space: nowrap went on the row two commits ago and measured correctly
in isolation: 17px tall, one line, at 318px. It kept wrapping on the live
page, and the reason the local check could not see it is that the local
check only loads this stylesheet. The storefront also loads the theme’s own
CSS, and a break after with the runover aligning under the text rather
than under the tick is what a display:block looks like — nowrap cannot
stop a block-level child from starting its own line.
So the fix is not more nowrap, it is putting the back inline, at a
specificity a theme-wide element rule cannot outrank. */
#fonLcg .opt__ups > span,
#fonLcg .opt__ups > span > span { white-space: nowrap; }
#fonLcg .opt__ups > span b,
#fonLcg .opt__ups > span i,
#fonLcg .opt__ups > span span { display: inline; }
#fonLcg .opt__ups > span > span { display: inline-block; }
/* ==========================================================================
PHONE: BOTH LISTS BECOME GRIDS
Six ingredients as six rows and four facts as four rows is ten lines of
furniture on a screen that has none to spare. Three across and two across
respectively puts each of them in two rows, which is roughly a third of the
height for exactly the same content.
========================================================================== */
@media (max-width: 639.98px) {
/* Ingredients: three up, stacked inside each cell. The loses the negative
margin it carries in the row layout, where it was closing a flex gap that
no longer sits between the dose and the name. */
/* Facts: two up, and the hairlines that separated a single column come off —
they were reading as a table once there were two of them side by side. */
#fonLcg .rating__facts { grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 17px; }
#fonLcg .rating__facts li { padding-block: 0; column-gap: 9px; }
#fonLcg .rating__facts li + li { border-top: 0; }
}
/* THE SCORE STARS WERE INK. A row of black stars reads as five glyphs; the same
row in the theme gold reads as a rating without anyone having to look twice —
which is the note already written against the review-card stars further up,
and this one had simply never been brought in line with it. Bigger too: it
sits under a 40px figure and was set smaller than the caption beneath it. */
#fonLcg .rating__score .rating__stars { font-size: 18px; color: var(--star); letter-spacing: .1em; }
@media (max-width: 779.98px) {
#fonLcg .rating__score .rating__stars { font-size: 16px; }
}
/* The buy box full-bleed had to climb a level. .cfg sits inside .offer__right,
inside .offer, inside .shell — and a negative margin on the form only pulls
it out of the column it is in, not out of the gutter two ancestors up. The
column takes the negative margin now and the form simply fills it. */
@media (max-width: 899.98px) {
#fonLcg .offer__right { margin-inline: calc(var(--gutter) * -1); }
#fonLcg .offer__right .cfg { margin-inline: 0; }
/* The note is three statements, not a paragraph; it holds one line once it
stops trying to say 'from usefon.com' as well. */
#fonLcg .cfg__fine { white-space: nowrap; font-size: clamp(9.5px, 2.6vw, 11px); }
}
/* ==========================================================================
THE FACTS LINE UP
Two across a 390px card leaves each column about 139px of text once the card
padding, the column gap and the 24px mark are taken out — and 'third-party
lab tested' needs about 128px at 12.5px, so it broke, 'members taking FON
daily' broke, and the two columns ended up different heights with the marks
floating at different depths. Ragged, but not a mis-alignment: a wrapping
problem wearing one.
So the labels come down half a step until they fit on one line, the mark
comes down with them, and the grid aligns to the top of each cell rather
than the middle — which keeps the four marks on two clean baselines however
long a label gets later.
========================================================================== */
@media (max-width: 639.98px) {
#fonLcg .rating__facts { align-items: start; column-gap: 12px; }
#fonLcg .rating__facts li { align-items: start; column-gap: 8px; }
#fonLcg .rating__facts .fact__i { width: 22px; height: 22px; margin-top: 2px; }
#fonLcg .rating__facts b { font-size: 14.5px; }
#fonLcg .rating__facts li > span { font-size: 11.5px; line-height: 1.3; }
}
/* THE THUMBNAILS BELONG TO THE COLUMN, NOT TO THE STAGE. They were given the
stage’s negative gutter so the two would share a left edge — which fixed that
pair and broke the column: the strip then sat a full gutter left of the
supplement-facts button, the ingredient list and the wordmark, so five things
in one column started at two different places.
Only the stage bleeds, because it is a photograph and running to the edge is
what a photograph should do on a phone. The thumbnails are controls, and
controls line up with the text they belong to. One left edge for everything
below the image. */
/* ==========================================================================
THE INGREDIENT BLOCK TIGHTENS BACK UP
Going three-up made each cell a little tower — mark, dose, name — and the
row gap that suited a flat list is far too much between two rows of towers.
The air that was added around the buy box identity earlier was right and
stays; this is the one block that took more than it needed.
========================================================================== */
@media (max-width: 639.98px) {
#fonLcg .ticks__lead { margin-bottom: 11px; }
#fonLcg .pdp__rate { margin: 15px 0 10px; }
#fonLcg .pdp__id { margin-bottom: 22px; }
}
/* ==========================================================================
THE TRUSTPILOT MARK JOINS THE COLUMN THE OTHER MARKS ARE IN
.rating__src was pushed to the far right of the score row with margin-left:
auto — a layout that made sense when the facts underneath were a two-by-two
block with no left column to line up with. Now that every fact leads with a
mark at the card’s left padding, the one mark sitting on the opposite side of
the card is the only thing in the block not on that line. It drops to its own
row, hard left, and the four marks and it read as one column.
========================================================================== */
@media (max-width: 639.98px) {
#fonLcg .rating__score { flex-wrap: wrap; row-gap: 7px; }
#fonLcg .rating__src { margin-left: 0; width: 100%; }
/* AND THE IDENTITY BLOCK GETS ITS AIR BACK. The last pass tightened the
ingredient grid, which needed it, and took the gaps either side of the
proof row with it, which did not. The grid stays tight; the joins between
the three separate things — what is in it, who says so, what it is called
— open back up. Space inside a block and space between blocks are not the
same measurement and should not have moved together. */
#fonLcg .pdp__rate { margin: 26px 0 14px; }
#fonLcg .pdp__name { margin-bottom: 13px; }
#fonLcg .pdp__id { margin-bottom: 28px; }
}
/* ==========================================================================
ALL THE WAY TO THE EDGE, MEASURED
At a true 390px viewport the form already reached 0 and 390 — .offer__right
takes the negative gutter and .cfg fills it. What was left was the form’s own
12px of inner padding, so every option card stopped 12px short with a border
down each side: a card inside a full-width card, which is the look the
full-bleed was meant to remove in the first place.
The padding goes, the side borders and side radii go with it, and the rows
run edge to edge with a rule between them instead of a box around each. The
TEXT keeps its inset — that moves onto the row, where it belongs, so nothing
ever touches the glass.
========================================================================== */
@media (max-width: 899.98px) {
#fonLcg .cfg { padding-inline: 0; }
/* Section labels and anything that is not a card keep the text inset. */
/* The 14px inset that was here is gone. It targeted .cfg > * with a
:not(.opts) that never matched anything — the class is .cfg__opts — and the
only thing that extra :not() achieved was raising the rule to (1,3,0), so it
beat the later (1,2,0) rule that sets this to 0. The fieldset therefore kept
14px of padding, and every format, flavour and supply card came out 28px
narrower than the CTA, the summary and the badges directly beneath them. */
#fonLcg .opt--plan .opt__b,
#fonLcg .opt--fmt .opt__b,
#fonLcg .opt--flav .opt__b {
border-left: 0; border-right: 0; border-radius: 0;
}
#fonLcg .opt--plan .opt__b { padding-inline: 14px; }
#fonLcg .opt--sub .opt__head { padding-inline: 14px; }
#fonLcg .opt--sub .opt__ups { padding-inline: 14px; }
#fonLcg .opt__banner { padding-inline: 14px; }
#fonLcg .badges { padding-inline: 14px; }
}
/* ==========================================================================
THE TRUSTPILOT STAR SHARES THE MARKS’ COLUMN
Putting .rating__src on its own row hard-left got it into the column but not
onto the line: its star is a 14px box and every fact mark is a 22px one, so
two things both starting at x=0 still had their glyphs 4px apart, and the gap
after them differed too. Boxes align, not glyphs — so the star gets a 22px
box with the glyph inset inside it, and the same 8px gap the facts use. Five
marks, one edge.
========================================================================== */
@media (max-width: 639.98px) {
#fonLcg .rating__src .pf__lock { gap: 8px; }
#fonLcg .rating__src .pf__i--tp {
width: 22px; height: 22px;
padding: 4px; box-sizing: border-box;
object-fit: contain;
}
}
/* ==========================================================================
FULL BLEED MEASURED FROM THE VIEWPORT, NOT FROM AN ANCESTOR
Every previous attempt cancelled a specific parent’s padding: a negative
gutter on .cfg, then on .offer__right. Both measure flush in the local
preview at every width from 390 to 880 — and both are still inset on the
storefront, because the preview loads THIS stylesheet only while the live
page also loads the theme’s, and the note further up in this file records
that fon-combined-style-common.css adds container padding-inline of its own.
A gutter this file cannot see is a gutter it cannot subtract.
width:100vw with margin-left: calc(50% - 50vw) does not care. It measures
from the viewport, so it lands on the glass no matter how many padded
ancestors sit between the form and the edge, known or not. No transform, so
nothing inside gets a new containing block.
========================================================================== */
@media (max-width: 899.98px) {
#fonLcg .offer__right { margin-inline: 0; }
#fonLcg .offer__right .cfg {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-inline: 0;
border-left: 0; border-right: 0; border-radius: 0;
}
/* 2026-08-20: .pdp__id (proof pill + product name, sitting right above
.cfg) was still inset by whatever the unseen theme gutter happens to
be, while .cfg's left edge is pinned to a known 16px via the full-bleed
technique above - so the two didn't line up. Same technique, same
final 16px inset, so both edges match exactly regardless of the theme
gutter's real width. */
#fonLcg .offer__right .pdp__id {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-inline: 16px;
}
/* Same fix, other column: .ticks__lead ("31 ingredients in 1 sachet")
and the .ticks--check list below the gallery were also inset by the
unseen theme gutter instead of the known 16px .cfg uses. */
#fonLcg .offer__left .ticks__lead,
#fonLcg .offer__left .ticks--check {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-inline: 16px;
}
}
/* ==========================================================================
THE BULLETS GET THEIR TWO LEVELS BACK
They were flattened to one weight when the list was briefly an ingredient
run — every row the same size in the same grey. With the dose leading and
the benefit under it, the first line has to carry again: semibold in the
ink, caption in the soft grey, which is the treatment this list had before
and the one the tick was drawn for.
========================================================================== */
#fonLcg .ticks--check li {
font-size: 14.5px; line-height: 1.35; font-weight: 600; color: var(--fg);
}
#fonLcg .ticks--check li b { font-weight: 600; color: var(--fg); }
#fonLcg .ticks--check i {
display: block; margin-top: 2px;
font-style: normal; font-size: 13px; line-height: 1.42; font-weight: 400;
color: var(--fg-soft);
}
@media (max-width: 639.98px) {
#fonLcg .ticks--check { gap: 11px; }
#fonLcg .ticks--check li { font-size: 13.5px; padding-left: 26px; }
#fonLcg .ticks--check i { font-size: 12.5px; }
#fonLcg .ticks__lead { margin-bottom: 12px; }
}
/* The subscribe card carries BOTH .opt--plan and .opt--sub, so the 14px inset
meant for a plain plan row landed on its body as well — and the saving banner
lives inside that body, so a full-width black bar ended up floating 14px in
from each edge with lime showing past it. The body goes back to zero and the
inset moves onto the three things that actually hold text. */
@media (max-width: 899.98px) {
#fonLcg .opt--sub .opt__b { padding-inline: 0; }
#fonLcg .opt--sub .opt__head { padding-inline: 14px; }
#fonLcg .opt--sub .opt__ups { padding-inline: 14px; }
#fonLcg .opt--sub .sub__panel { padding-inline: 14px; }
#fonLcg .opt__banner { padding-inline: 14px; }
}
/* ==========================================================================
FULL WIDTH, BUT STILL A DESIGN
'No spacing or border all the way to the end' was read too literally: the
card borders came off, the radii came off and the form's inner padding went
to zero, so the buy box reached both edges and stopped looking like anything.
Those are two different things. Full bleed is about not spending 40px of a
390px screen on a gutter; it is not about removing the edges that tell one
option from the next.
So the form keeps the whole viewport and gets its inset back inside, and the
option cards get their borders and corners back — same cards as before, just
40px wider each. The per-element 14px insets added while the form had none
go with it, or everything would be padded twice.
========================================================================== */
@media (max-width: 899.98px) {
#fonLcg .offer__right .cfg { padding-inline: 16px; }
/* Only the things that do NOT draw their own box. The summary card and the
CTA are bordered, filled objects with their own inner padding — zeroing it
put the price and '/month' hard against the summary's own border, and
'90-Day' broke onto a second line to escape it. The fieldset and the note
have no box of their own, so they are the ones that would double up. */
#fonLcg .cfg > *:not(.badges):not(.cfg__sum):not(.btn) { padding-inline: 0; }
#fonLcg .opt--plan .opt__b,
#fonLcg .opt--fmt .opt__b,
#fonLcg .opt--flav .opt__b,
#fonLcg .opt--sm .opt__b {
border-left: 1px solid var(--card-edge);
border-right: 1px solid var(--card-edge);
border-radius: var(--r-md);
}
/* The selected card draws its own heavier edge, so it must not be reset to
the hairline on the two sides that were taken away. */
#fonLcg .opt input:checked ~ .opt__b {
border-left-color: var(--ink);
border-right-color: var(--ink);
}
/* Padding now belongs to the form, so the pieces inside stop adding their own. */
#fonLcg .opt--plan .opt__b { padding-inline: 15px; }
#fonLcg .opt--sub .opt__b { padding-inline: 0; }
#fonLcg .opt--sub .opt__head { padding-inline: 15px; }
#fonLcg .opt--sub .opt__ups { padding-inline: 15px; }
#fonLcg .opt--sub .sub__freqwrap { padding-inline: 15px; }
#fonLcg .opt__banner { padding-inline: 15px; }
#fonLcg .badges { padding-inline: 0; }
}
/* The checkout note is a whole-block statement, not the last line of the badge
row above it, so it centres under the button rather than hanging off the left. */
#fonLcg .cfg__fine { text-align: center; }
/* ==========================================================================
THE DELIVERY FREQUENCY CONTROL
Replaces the operating system’s rendering of a with the page’s own,
so it looks the same on a handset, in a desktop browser and in a browser
pretending to be a handset. The native select is still in the form carrying
the value; this is only what is seen.
.opt__b CLIPS ITS CONTENTS — overflow:hidden, so the banner follows the
card’s rounded top. An absolutely positioned panel inside it would be cut
off at the card edge, so the clip is lifted on the subscribe card and the
banner is given the corners it was borrowing from the parent instead.
========================================================================== */
#fonLcg .opt--sub .opt__b { overflow: visible; }
/* HERE IS THE WEDGE. The bar was given --r-md, 10px, and the card it sits on
draws its corner at --r, 4px. With the clip lifted on the line above there is
nothing to reconcile them, so the bar's much wider arc curves away from the
card's tighter one and the card's own fill shows through the gap: a pale
wedge in each top corner, most obvious on the selected card where a black
border runs around it.
Ten was the better number - these plan cards are the largest controls on the
page and 4px reads as a box on them - so the CARD moves up to meet the bar
rather than the bar down to meet the card. The bar then takes the card's
INNER radius, one pixel tighter, because it sits inside a 1px border. Two
concentric arcs, one pixel apart, with ink on both sides of the join. */
#fonLcg .opt--plan .opt__b { border-radius: var(--r-md); }
#fonLcg .opt--sub .opt__banner { border-radius: calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0; }
#fonLcg .fx { position: relative; }
/* The select keeps its place in the form and loses its place on the screen. */
#fonLcg .fx .sub__freq {
position: absolute; width: 1px; height: 1px;
opacity: 0; pointer-events: none; clip-path: inset(50%);
}
/* The chevron belonged to the wrapper because the select could not carry one.
The button can, so the wrapper stops drawing it. */
#fonLcg .fx::after { display: none; }
#fonLcg .fx__btn {
position: relative; display: block; width: 100%; text-align: left;
padding: 13px 38px 13px 15px;
border: 1px solid var(--card-edge); border-radius: var(--r-sm);
background: var(--chip); color: var(--blue);
font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.3;
cursor: pointer;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#fonLcg .fx__btn::after {
content: ""; position: absolute; right: 15px; top: 50%;
width: 8px; height: 8px;
border-right: 1.8px solid var(--blue); border-bottom: 1.8px solid var(--blue);
transform: translateY(-70%) rotate(45deg);
transition: transform .18s var(--ease);
}
#fonLcg .fx__btn[aria-expanded="true"]::after { transform: translateY(-25%) rotate(225deg); }
#fonLcg .fx__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#fonLcg .fx__list {
position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
background: #FFFFFC;
border: 1px solid var(--card-edge); border-radius: var(--r-sm);
box-shadow: 0 14px 30px -12px rgba(23, 21, 15, .34);
overflow: hidden;
}
#fonLcg .fx__opt {
display: block; width: 100%; text-align: left;
padding: 12px 15px;
font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.3;
color: var(--fg); background: transparent; cursor: pointer;
}
#fonLcg .fx__opt + .fx__opt { border-top: 1px solid var(--rule); }
#fonLcg .fx__opt:hover { background: rgba(38, 32, 20, .05); }
#fonLcg .fx__opt:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
#fonLcg .fx__opt[aria-selected="true"] { color: var(--blue); }
#fonLcg .fx__opt.is-off { opacity: .45; cursor: not-allowed; }
/* The bullets come down a step on a phone. At 13.5px over 12.5px they were the
largest thing in the buy box after the price, and the electrolytes line — the
longest of the five — was breaking onto a second row while the other four sat
on one, which is what made the block look ragged rather than long. */
@media (max-width: 639.98px) {
#fonLcg .ticks--check { gap: 10px; }
#fonLcg .ticks--check li { font-size: 12.5px; padding-left: 24px; background-size: 17px 17px; }
#fonLcg .ticks--check i { font-size: 11.5px; margin-top: 1px; }
#fonLcg .ticks__lead { font-size: 13.5px; margin-bottom: 11px; }
}
/* ==========================================================================
THE VIDEO WALL COMES OUT OF ITS CARD
It was given a card so it would read as a pair with the rating block beside
it. Wrong instinct: a card is a container for a fixed amount of content, and
this is a row that runs off the edge on purpose. The border was drawing a
box around something whose whole point is that it does not end — and it cost
the videos 68px of width to draw it.
So: no card, no padding, full bleed, bigger frames, and the row dissolves at
both ends the way the written reviews do rather than stopping at a border.
========================================================================== */
/* Full bleed, and fading at both ends so a partial frame reads as one on its
way past rather than one that has been cut off. */
/* The heading sits on the page now, not on a card, so it lines up with the
section rather than floating in the middle of one. */
/* THE FADE WAS EATING THE FIRST FRAME. The mask ramps from the very edge of the
rail, but the rail also pads itself by a gutter — so the first video starts
20px in, which was half way through a 40px ramp, and it opened greyed out
before anyone had scrolled anything. The ramp now finishes inside the gutter,
so it softens the cut without touching the content. */
/* THE VIDEO WALL MARQUEE THAT WAS HERE IS REVERTED.
It cloned the six cells and translated the track, the same way the review row
works. The review row is a scroller at every width; this rail is NOT — above
1040px it is grid-template-columns: repeat(6, 1fr), a six-up grid. Twelve
cells in six columns, with width:max-content on top, collapsed the row and
the videos disappeared entirely.
Moving it properly means reworking the desktop grid into a scroller first,
which is a real change to a working component rather than an addition to it.
Left still until that is worth doing. */
/* The 100vw rule stays as a no-JS fallback, but it is no longer the mechanism.
It assumes the form’s parent is centred in the viewport, which .offer__right
is not obliged to be, and on a real handset the form came out offset to the
right by exactly the column’s own offset. The script measures and overrides
this inline; if the script never runs, this is still better than a gutter. */
@media (max-width: 899.98px) {
#fonLcg .offer__right .cfg { max-width: none; }
}
/* ==========================================================================
THE TRUST CARD
Built to the supplied design, in ink and the page’s blue rather than the
reference’s green — green is not a colour this page speaks anywhere else,
and a whole card of it would read as another brand’s block dropped in.
Three bands, divided by rules rather than gaps, so it reads as one object:
the two ratings and who gave them, the three guarantees, and the closing
pair. Mobile-first — everything stacks by default and the columns only
appear when there is room, so nothing is being undone at a breakpoint.
========================================================================== */
#fonLcg .trust {
background: var(--card);
border: 1px solid var(--card-edge);
border-radius: var(--r-lg);
overflow: hidden;
}
/* --- band 1: the two ratings --- */
#fonLcg .trust__top {
display: grid; gap: 20px;
padding: clamp(20px, 2.4vw, 30px);
}
#fonLcg .trust__big { display: flex; align-items: center; gap: 12px; margin: 0 0 9px; }
#fonLcg .trust__num {
font-size: clamp(38px, 4.6vw, 56px); font-weight: 700;
letter-spacing: -.04em; line-height: .9; color: var(--fg);
}
#fonLcg .trust__stars { color: var(--star); font-size: clamp(17px, 1.9vw, 23px); letter-spacing: .1em; }
#fonLcg .trust__src {
display: flex; align-items: center; gap: 8px; margin: 0;
font-size: clamp(13px, 1.15vw, 15px); color: var(--fg-mut);
}
#fonLcg .trust__src b { font-weight: 600; color: var(--fg); }
#fonLcg .trust__src i { font-style: normal; color: var(--rule-str); }
#fonLcg .trust__mk { flex: none; width: 20px; height: 20px; }
#fonLcg .trust__g { display: flex; align-items: center; gap: 14px; }
#fonLcg .trust__chip {
flex: none; width: clamp(46px, 4.6vw, 58px); aspect-ratio: 1;
border-radius: 50%; background: #FFFFFF;
border: 1px solid var(--card-edge);
display: grid; place-items: center;
}
#fonLcg .trust__glogo { width: 56%; height: 56%; }
#fonLcg .trust__gtxt { margin: 0; display: grid; gap: 2px; }
#fonLcg .trust__gtxt b {
font-size: clamp(20px, 2.2vw, 27px); font-weight: 700;
letter-spacing: -.03em; line-height: 1.05; color: var(--fg);
}
#fonLcg .trust__gtxt span { font-size: clamp(13px, 1.15vw, 15px); color: var(--fg-mut); }
/* --- band 2: the three guarantees --- */
#fonLcg .trust__facts {
list-style: none; margin: 0; padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 30px);
border-top: 1px solid var(--rule);
display: grid; gap: 16px;
}
#fonLcg .trust__facts li {
display: grid; grid-template-columns: auto minmax(0, 1fr);
column-gap: 13px; row-gap: 1px; align-items: center;
}
#fonLcg .trust__ico {
grid-column: 1; grid-row: 1 / span 2; align-self: center;
width: clamp(38px, 3.8vw, 48px); aspect-ratio: 1; border-radius: 50%;
background: rgba(38, 32, 20, .055);
display: grid; place-items: center;
}
#fonLcg .trust__ico .trust__mk { width: 46%; height: 46%; }
#fonLcg .trust__facts b {
grid-column: 2; font-size: clamp(16px, 1.5vw, 19px); font-weight: 700;
letter-spacing: -.02em; line-height: 1.15; color: var(--fg);
}
#fonLcg .trust__facts li > span:not(.trust__ico) {
grid-column: 2; font-size: clamp(12.5px, 1.1vw, 14px);
line-height: 1.35; color: var(--fg-mut);
}
/* --- band 3: the closing pair, on a tint so it reads as a footer --- */
#fonLcg .trust__foot {
display: grid; gap: 16px;
padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 30px);
border-top: 1px solid var(--rule);
background: rgba(38, 32, 20, .028);
}
#fonLcg .trust__q,
#fonLcg .trust__join { display: flex; align-items: center; gap: 13px; }
#fonLcg .trust__ico--sm { width: clamp(34px, 3.2vw, 42px); }
#fonLcg .trust__foot p { margin: 0; display: grid; gap: 2px; }
#fonLcg .trust__foot b {
font-size: clamp(14px, 1.25vw, 16px); font-weight: 700;
letter-spacing: -.015em; color: var(--fg);
}
#fonLcg .trust__foot span { font-size: clamp(12.5px, 1.1vw, 14px); line-height: 1.35; color: var(--fg-mut); }
#fonLcg .trust__faces { flex: none; display: inline-flex; }
/* aspect-ratio loses to a flex row’s default stretch, so the faces came out
as ovals. Explicit height, and flex:none so they are not asked to grow. */
#fonLcg .trust__faces img {
flex: none; align-self: center;
width: clamp(34px, 3.2vw, 42px); height: clamp(34px, 3.2vw, 42px);
border-radius: 50%; object-fit: cover; border: 2px solid var(--card);
}
#fonLcg .trust__faces img + img { margin-left: -12px; }
/* --- THE COLUMNS ARE THE LAYOUT, AT EVERY WIDTH ---
They were a >=700px behaviour and everything stacked below it, which is the
textbook answer and the wrong one here: this card’s whole idea is the
comparison across a row — two ratings side by side, three guarantees side by
side. Stacked it becomes a list of nine unrelated facts and stops being the
thing that was designed. So the composition holds all the way down and the
type, the marks and the gutters scale instead. */
#fonLcg .trust__top {
grid-template-columns: 1fr 1fr;
align-items: center;
column-gap: clamp(12px, 3vw, 44px);
}
#fonLcg .trust__g { border-left: 1px solid var(--rule); padding-left: clamp(12px, 3vw, 44px); }
#fonLcg .trust__facts { grid-template-columns: repeat(3, 1fr); column-gap: 0; }
#fonLcg .trust__facts li + li {
border-left: 1px solid var(--rule);
padding-left: clamp(9px, 2.2vw, 30px);
}
#fonLcg .trust__facts li:not(:last-child) { padding-right: clamp(9px, 2.2vw, 30px); }
#fonLcg .trust__foot { grid-template-columns: 1fr 1fr; align-items: center; column-gap: clamp(12px, 3vw, 44px); }
#fonLcg .trust__join { border-left: 1px solid var(--rule); padding-left: clamp(12px, 3vw, 44px); }
/* THE PHONE STEP. Three columns across ~350px gives each fact about 100px once
the rules and gutters are out, so everything comes down together rather than
the layout coming apart: the mark to 28px, the figure to 13px, the label to
10.5px over tighter leading. The label is allowed two lines — at this width
that is the honest amount of room, and a wrapped caption still reads as one
fact where a stacked column of nine does not. */
@media (max-width: 639.98px) {
#fonLcg .trust__top { padding: 15px; gap: 0; }
#fonLcg .trust__big { gap: 8px; margin-bottom: 6px; }
#fonLcg .trust__num { font-size: 30px; }
#fonLcg .trust__stars { font-size: 13px; letter-spacing: .06em; }
#fonLcg .trust__src { font-size: 11px; gap: 6px; }
#fonLcg .trust__src .trust__mk { width: 15px; height: 15px; }
#fonLcg .trust__g { gap: 9px; }
#fonLcg .trust__chip { width: 34px; }
#fonLcg .trust__gtxt b { font-size: 17px; }
#fonLcg .trust__gtxt span { font-size: 11px; }
#fonLcg .trust__facts { padding: 14px 15px; }
#fonLcg .trust__facts li { column-gap: 8px; align-items: start; }
#fonLcg .trust__ico { width: 28px; align-self: start; }
#fonLcg .trust__ico .trust__mk { width: 15px; height: 15px; }
#fonLcg .trust__facts b { font-size: 13px; }
#fonLcg .trust__facts li > span:not(.trust__ico) { font-size: 10.5px; line-height: 1.28; }
#fonLcg .trust__foot { padding: 14px 15px; }
#fonLcg .trust__q, #fonLcg .trust__join { gap: 9px; }
#fonLcg .trust__ico--sm { width: 26px; }
#fonLcg .trust__foot b { font-size: 11.5px; }
#fonLcg .trust__foot span { font-size: 10.5px; line-height: 1.28; }
#fonLcg .trust__faces img { width: 24px; height: 24px; border-width: 1.5px; }
#fonLcg .trust__faces img + img { margin-left: -8px; }
}
/* The mark-above-figure block that was here is deleted, not overridden. It was
contradicted by a later rule putting the marks back beside their figures, and
two rules arguing at the same specificity is how a component ends up behaving
differently depending on which one someone edits next. */
/* ==========================================================================
THE SUBSCRIBE CARD: SPACING, AND A COLLAPSE THAT MOVES
SPACING. .opt--sub .opt__head carried padding-bottom: 0 because the panel
underneath supplied that space. Select one-time and the panel is gone, so
nothing supplies it and the card shuts tight under the price while every
other card in the stack keeps its padding. The head owns its own bottom
padding now and the panel stops adding a top margin, so the two states are
spaced the same and only the content differs.
THE COLLAPSE. It was display:none, which cannot be transitioned — the panel
vanished, everything below jumped up the height of four rows, and on a card
the user is mid-comparison on that reads as a fault rather than a response.
interpolate-size: allow-keywords is already enabled on #fonLcg for the FAQ,
which makes height:auto animatable, so this collapses to its real height
with no magic number to go stale when the copy changes.
========================================================================== */
#fonLcg .opt--sub .opt__head { padding-bottom: 14px; }
/* The panel owns one consistent inset so the frequency select and the bullet
list line up with the header above them, instead of running to the card edge.
This replaces the piecemeal padding-inline that only some breakpoints set on
.sub__freqwrap and never on .sub__list. */
#fonLcg .sub__panel { margin-top: 0; padding: 14px 16px 16px; }
#fonLcg .sub__panel .sub__freqwrap { padding-inline: 0; }
#fonLcg .sub__list { margin-top: 14px; }
@supports (interpolate-size: allow-keywords) {
#fonLcg .opt--sub .sub__panel {
display: block;
height: auto;
overflow: hidden;
opacity: 1;
transition: height .34s var(--ease), opacity .2s var(--ease);
}
#fonLcg .opt--sub:not(:has(input:checked)) .sub__panel {
display: block;
height: 0;
opacity: 0;
}
}
/* The faces sit where the glyph did, at the same box size so the two proof
items keep one baseline. */
#fonLcg .pdp__faces { display: inline-flex; flex: none; }
#fonLcg .pdp__faces img {
flex: none; width: 18px; height: 18px; border-radius: 50%;
object-fit: cover; border: 1.5px solid var(--card);
}
#fonLcg .pdp__faces img + img { margin-left: -7px; }
@media (max-width: 639.98px) {
#fonLcg .opt--sub .opt__head { padding-bottom: 13px; }
#fonLcg .pdp__faces img { width: 16px; height: 16px; }
#fonLcg .pdp__faces img + img { margin-left: -6px; }
}
/* ==========================================================================
THE TRUST MARKS TAKE COLOUR, BY MEANING NOT BY DECORATION
Green is anything VERIFIED — the Trustpilot shield, the refund guarantee,
the batch testing, the quality rosette. Blue is PEOPLE — the member count,
and blue is already the page’s own accent. Two colours, one rule, so the
card can be read by shape before it is read by word.
The discs tint to match at a tenth of the strength, which is what keeps four
coloured marks from reading as four separate badges pasted on.
========================================================================== */
#fonLcg .trust__ico--g { background: rgba(14, 159, 110, .10); }
#fonLcg .trust__ico--b { background: rgba(1, 113, 227, .10); }
/* ==========================================================================
THE REVIEW ROW DISSOLVES PROPERLY
96px of fade against a 360px card is a quarter of one card — enough to see
the ramp, not enough to hide the cut, so a card still met the edge with a
readable word chopped through it. At 150px a card is most of the way gone
before it reaches the edge, which is the difference between a row that
continues and a row that has been trimmed.
========================================================================== */
@media (min-width: 1040px) {
#fonLcg .rgrid:has(> [data-marquee="on"]) { --rgrid-fade: 150px; }
}
@media (min-width: 700px) and (max-width: 1039.98px) {
#fonLcg .rgrid:has(> [data-marquee="on"]) { --rgrid-fade: 90px; }
}
/* With the mark on its own line the column can carry a step more type. */
@media (max-width: 639.98px) {
#fonLcg .trust__facts li { row-gap: 3px; }
#fonLcg .trust__facts b { font-size: 14px; }
#fonLcg .trust__facts li > span:not(.trust__ico) { font-size: 11px; line-height: 1.3; }
#fonLcg .trust__ico { width: 30px; }
#fonLcg .trust__ico .trust__mk { width: 16px; height: 16px; }
}
/* ==========================================================================
THE VIDEO WALL MOVES — SECOND ATTEMPT, WITH THE TWO LINES THE FIRST MISSED
The first version set grid-auto-columns and width:max-content and the row
collapsed to nothing. The reason: above 1040px this rail is NOT a scroller
like the review row — it is grid-template-columns: repeat(6, 1fr) with
grid-auto-flow: row. grid-auto-columns does not apply to a grid that has an
explicit template, so the twelve cells went into six columns over two rows,
and max-content on top left them with no width to occupy.
Overriding BOTH — the template back to none, the flow back to column — is
the whole fix. It was never the cloning or the translate.
========================================================================== */
/* Stopped whenever it is being read, tabbed through, or watched. A row still
travelling under a playing video is the one case where the motion is in the
way rather than an invitation. */
#fonLcg .ugc__rail[data-marquee="on"]:hover,
#fonLcg .ugc__rail[data-marquee="on"]:focus-within,
/* Without the animation the duplicates are just six videos shown twice. */
/* ==========================================================================
THE INGREDIENT CAPTIONS COME UP OUT OF THE GREY
The dose leads in semibold ink and the benefit sat under it in --fg-soft,
which is the tone used for footnotes and legal lines. These are not
footnotes — they are the reason each ingredient is in the sachet. Moved to
--fg-mut, the same weight of grey the body copy uses, so the pair reads as
one statement at two levels rather than a claim and a disclaimer.
========================================================================== */
#fonLcg .ticks--check i { color: var(--fg-mut); }
/* ==========================================================================
THE OFFER COLUMNS STOP BEING STRETCHED BY THEIR OWN CONTENT
.gal__stage full-bleeds with margin-inline: -gutter, so it is one gutter
wider than the column it sits in. A grid item defaults to min-width: auto,
which means it cannot be narrower than its content — so the overflowing
stage pushed .offer__left wider than its track, the column ran past the
shell’s right padding, and the image ended up hard against one edge with a
gutter on the other. Measured at 490px: the column began at 41 and ended at
490, and the stage sat 16px from the left and 24px PAST the right.
min-width: 0 is the fix and it is the root cause, not a nudge: the columns
go back to their track width, the stage overflows visually as intended, and
#fonLcg’s overflow-x: hidden clips it evenly on both sides. This is also why
it looked correct on one phone and offset on another — which side won
depended on how much the content overflowed by. */
#fonLcg .offer > * { min-width: 0; }
#fonLcg .offer__left,
#fonLcg .offer__right { min-width: 0; }
/* ==========================================================================
THE FREQUENCY LIST WAS BEING CLIPPED BY THE COLLAPSE IT SITS INSIDE
.sub__panel got overflow:hidden so its height transition would clip cleanly
when the card is deselected. The dropdown lives inside that panel, so the
moment it opened past the panel’s own height it was cut off — two options
visible and the third sliced.
The clip is only needed while the panel is CLOSED or closing. Open, there is
nothing to clip and everything to show, so the open state goes back to
visible and the closed state keeps hidden. The height still animates; it is
only the overflow that stops being permanent.
========================================================================== */
@supports (interpolate-size: allow-keywords) {
#fonLcg .opt--sub:has(input:checked) .sub__panel { overflow: visible; }
}
#fonLcg .opt--sub:has(input:checked) .opt__b,
#fonLcg .opt--sub:has(input:checked) .sub__freqwrap { overflow: visible; }
/* ==========================================================================
ONE LEFT EDGE, INCLUDING THE PHOTOGRAPH
The stage kept a full-bleed negative gutter on a phone while the thumbnails,
the supplement-facts button, the ingredient lead and the bullets all sat on
the column. So the image was a gutter wider than the five things under it,
and the column read as misaligned even though everything except the image
agreed. The photograph joins the column: one edge, top to bottom.
========================================================================== */
@media (max-width: 899.98px) {
#fonLcg .gal__stage { margin-inline: 0; }
}
/* ==========================================================================
MOTION SYSTEM
Before this the page had ONE easing token and ONE duration token, and then
eleven durations hardcoded across the stylesheet: .16, .18, .2, .22, .3,
.32, .34, .52, .58, .6, .66. Nothing shared a rhythm, so a card answered in
160ms and a panel in 340ms with no reason a person could feel. That is what
reads as unfinished — not the speed of any one thing.
Four durations, and they are deliberately slower than what was there. Fast
motion reads as cheap: it looks like the browser doing something rather than
the page responding. Slower, with a curve that decelerates hard, is what
feels considered.
Exits use a shorter step than entrances. Things should arrive with weight
and leave without ceremony — an element taking as long to go as it took to
come feels like it is arguing.
========================================================================== */
#fonLcg {
--m1: 200ms; /* taps, hovers, colour, borders */
--m2: 340ms; /* small state changes, chevrons, fades */
--m3: 520ms; /* panels, dropdowns, collapses */
--m4: 820ms; /* scroll reveals — things arriving */
--ease-entrance: cubic-bezier(.16, 1, .3, 1); /* decelerates hard */
--ease-exit: cubic-bezier(.5, 0, .9, .3); /* leaves quickly */
--ease-move: cubic-bezier(.4, 0, .2, 1); /* repositioning */
}
/* --- the scroll reveal, on the slow step --- */
.anim #fonLcg .rv {
transition:
opacity var(--m4) var(--ease-entrance),
transform var(--m4) var(--ease-entrance);
transition-delay: var(--d-i, 0ms);
}
.anim #fonLcg .rv--t { transition-duration: calc(var(--m4) - 140ms); }
/* --- panels: the FAQ and the subscribe collapse are the same gesture and
should have taken the same time as each other all along --- */
@supports (interpolate-size: allow-keywords) {
#fonLcg .faq__i::details-content {
transition: height var(--m3) var(--ease-entrance), content-visibility var(--m3) allow-discrete;
}
#fonLcg .opt--sub .sub__panel {
transition: height var(--m3) var(--ease-entrance), opacity var(--m2) var(--ease-entrance);
}
#fonLcg .opt--sub:not(:has(input:checked)) .sub__panel {
transition: height var(--m2) var(--ease-exit), opacity calc(var(--m2) - 120ms) var(--ease-exit);
}
}
/* --- state changes --- */
#fonLcg .opt--plan .opt__b,
#fonLcg .opt--fmt .opt__b,
#fonLcg .opt--flav .opt__b,
#fonLcg .opt--sm .opt__b {
transition: border-color var(--m1) var(--ease-move), background-color var(--m1) var(--ease-move);
}
#fonLcg .faq__i summary::after { transition: transform var(--m2) var(--ease-entrance); }
#fonLcg .fx__btn::after { transition: transform var(--m2) var(--ease-entrance); }
#fonLcg .bbar { transition: transform var(--m3) var(--ease-move); }
@supports (transition-behavior: allow-discrete) {
#fonLcg .opt__banner,
#fonLcg .cfg__err,
#fonLcg .rgrid,
#fonLcg .gal__nav {
transition: opacity var(--m2) var(--ease-entrance), display var(--m2) allow-discrete;
}
}
/* ==========================================================================
THE FREQUENCY LIST OPENS INSTEAD OF APPEARING
It was a hidden toggle with no transition at all — the one control on this
page that was actually built rather than inherited, and it had the crudest
motion on it. It scales down from its own top edge, which is where a
dropdown comes from, rather than fading in place like something unrelated.
And its border comes back. The panel needs to read as sitting ABOVE the card
rather than continuing it: a full-strength edge, the card radius, and a
shadow with enough spread to lift it off the lime behind it.
========================================================================== */
#fonLcg .fx__list {
border: 1px solid var(--rule-str);
border-radius: var(--r-md);
box-shadow: 0 18px 38px -14px rgba(23, 21, 15, .40), 0 2px 6px rgba(23, 21, 15, .08);
transform-origin: top center;
transform: scaleY(1) translateY(0);
opacity: 1;
transition:
transform var(--m3) var(--ease-entrance),
opacity var(--m2) var(--ease-entrance),
display var(--m3) allow-discrete;
}
@supports (transition-behavior: allow-discrete) {
#fonLcg .fx__list[hidden] {
display: block;
transform: scaleY(.94) translateY(-6px);
opacity: 0;
pointer-events: none;
transition:
transform var(--m2) var(--ease-exit),
opacity calc(var(--m2) - 140ms) var(--ease-exit),
display var(--m2) allow-discrete;
}
@starting-style {
#fonLcg .fx__list { transform: scaleY(.94) translateY(-6px); opacity: 0; }
}
}
/* The options do not scale with the panel, or the type stretches on the way in. */
#fonLcg .fx__opt { transition: background-color var(--m1) var(--ease-move), color var(--m1) var(--ease-move); }
/* The button keeps its own edge and corners — it is a control, and it should
still look like one while its panel is open. */
#fonLcg .fx__btn { border: 1px solid var(--rule-str); border-radius: var(--r-sm); }
#fonLcg .fx__btn[aria-expanded="true"] { border-color: var(--blue); }
/* ==========================================================================
AND A PRESS STATE, WHICH THE PAGE HAD NONE OF
Nothing here responded to being touched. On a phone that is the single
loudest cheap signal — louder than any entrance animation, because it is the
only motion a person causes themselves rather than watches.
========================================================================== */
#fonLcg .btn:active,
#fonLcg .fx__btn:active,
#fonLcg .opt__b:active,
#fonLcg .btn, #fonLcg .opt__b,
@media (prefers-reduced-motion: reduce) {
#fonLcg .btn:active,
#fonLcg .fx__btn:active,
#fonLcg .opt__b:active,
}
/* ==========================================================================
THE OPEN DROPDOWN HAS TO OUTRANK THE CARD BELOW IT
z-index: 40 on the panel is meaningless if its own card does not outrank the
one-time card that follows it in the DOM — a later sibling paints over an
earlier one whatever the child says. The whole option is lifted while its
panel is open, and put back when it closes so it is not permanently sitting
on top of everything else in the stack.
========================================================================== */
#fonLcg .opt--sub:has(.fx__btn[aria-expanded="true"]) { position: relative; z-index: 60; }
#fonLcg .fx { z-index: 61; }
#fonLcg .fx__list { z-index: 62; }
/* ==========================================================================
THE TRUST MARKS GO BLUE, AND THE DISCS WITH THEM
Green was doing a job — verified vs people — but two accent colours in one
card, neither of which the rest of the page uses, was a system invented for
a single component. Blue is the page’s own accent and it is already carrying
every link and the primary button, so the card now borrows rather than
introduces. Google’s G keeps its colour and the rating keeps its gold: those
two are identification, not decoration.
========================================================================== */
#fonLcg .trust__ico--b { background: rgba(1, 113, 227, .09); }
/* ==========================================================================
THE TRUST CARD COMES DOWN A STEP ON A PHONE
Same composition — that was the point — but the labels were wrapping to two
and three lines while the figures sat on one, so the three columns lost their
shared baseline and the card read as ragged rather than tight. Everything
drops together so the proportions hold.
========================================================================== */
@media (max-width: 639.98px) {
#fonLcg .trust__top { padding: 13px 13px 12px; }
#fonLcg .trust__num { font-size: 26px; }
#fonLcg .trust__stars { font-size: 11px; }
#fonLcg .trust__src { font-size: 10px; gap: 5px; }
#fonLcg .trust__src .trust__mk { width: 13px; height: 13px; }
#fonLcg .trust__chip { width: 30px; }
#fonLcg .trust__gtxt b { font-size: 15px; }
#fonLcg .trust__gtxt span { font-size: 10px; }
#fonLcg .trust__g { gap: 8px; }
#fonLcg .trust__facts { padding: 12px 13px; }
#fonLcg .trust__ico { width: 26px; }
#fonLcg .trust__ico .trust__mk { width: 14px; height: 14px; }
#fonLcg .trust__facts b { font-size: 12.5px; }
#fonLcg .trust__facts li > span:not(.trust__ico) { font-size: 10px; line-height: 1.26; }
#fonLcg .trust__facts li + li { padding-left: 8px; }
#fonLcg .trust__facts li:not(:last-child) { padding-right: 8px; }
#fonLcg .trust__foot { padding: 12px 13px; }
#fonLcg .trust__ico--sm { width: 24px; }
#fonLcg .trust__foot b { font-size: 10.5px; }
#fonLcg .trust__foot span { font-size: 10px; line-height: 1.26; }
#fonLcg .trust__faces img { width: 21px; height: 21px; }
#fonLcg .trust__faces img + img { margin-left: -7px; }
#fonLcg .trust__q, #fonLcg .trust__join { gap: 8px; }
#fonLcg .trust__join { padding-left: 10px; }
}
/* THE VIDEO RAIL LOSES ITS EDGE FADE. A mask that dissolves the frames is right
for the written reviews — those are blocks of text, and half a sentence at the
edge reads as broken. These are faces. A half-visible face reads perfectly
well as a face, and fading it out reads as the row being switched off rather
than continuing. The clip stays; only the dissolve goes. */
/* ==========================================================================
THE PHONE GUTTER COMES IN, SO THE IMAGE CAN GO BACK OUT
Aligning the gallery to the column was the right call and it was paid for in
the wrong currency: the photograph lost a gutter each side and came out 40px
narrower, which is not what “align these” asked for. Alignment says everything
shares an edge — it does not say which edge.
So the edge moves outward instead. 20px to 14px on a phone gives the image,
the thumbnails, the button, the bullets and the wordmark 12px more width
each, all still on one line. Text at 14px from the glass is tight but it is
the same 14px the buy box already uses inside its own full-bleed, so the two
halves of the offer finally agree with each other.
========================================================================== */
@media (max-width: 639.98px) {
#fonLcg { --gutter: 14px; }
}
/* ==========================================================================
THE MARKS GO BACK BESIDE THE FIGURES ON A PHONE
They were stacked above because three columns across ~350px left each fact
about 100px and a mark beside the text took a third of it. That solved the
wrapping and broke the brief: the card is supposed to be the desktop
composition at a smaller size, and mark-above-figure is a different
composition, not a smaller one.
So they sit beside the text as they do everywhere else, and the labels are
allowed their two lines. Desktop wraps “members taking FON daily” to two
lines as well — the reference does too — so this is the design behaving
consistently rather than the phone failing. */
@media (max-width: 639.98px) {
#fonLcg .trust__facts li {
grid-template-columns: auto minmax(0, 1fr);
row-gap: 1px;
align-items: center;
}
#fonLcg .trust__ico {
grid-column: 1;
grid-row: 1 / span 2;
align-self: center;
}
#fonLcg .trust__facts b,
#fonLcg .trust__facts li > span:not(.trust__ico) { grid-column: 2; }
/* Tighter again, since the mark is taking width back from the label. */
#fonLcg .trust__ico { width: 24px; }
#fonLcg .trust__ico .trust__mk { width: 13px; height: 13px; }
#fonLcg .trust__facts li { column-gap: 7px; }
#fonLcg .trust__facts b { font-size: 12px; }
#fonLcg .trust__facts li > span:not(.trust__ico) { font-size: 9.5px; line-height: 1.25; }
#fonLcg .trust__facts li + li { padding-left: 7px; }
#fonLcg .trust__facts li:not(:last-child) { padding-right: 7px; }
}
/* ==========================================================================
THE TRUST CARD COMES DOWN ANOTHER STEP ON A PHONE
The composition is right and the type is still riding it: three labels were
wrapping while their figures sat on one line, so each column had a different
height and the row lost the baseline that makes three facts read as three
facts. Everything drops together — figures and labels in the same proportion
— so the card gets smaller rather than getting squashed.
9px is small, and it is the right small: these are captions under figures,
the figure is what is being read, and the caption only has to be legible
enough to say which figure it is.
========================================================================== */
@media (max-width: 639.98px) {
#fonLcg .trust__top { padding: 12px 12px 11px; }
#fonLcg .trust__num { font-size: 23px; }
#fonLcg .trust__stars { font-size: 10px; }
#fonLcg .trust__src { font-size: 9.5px; gap: 5px; }
#fonLcg .trust__src .trust__mk { width: 12px; height: 12px; }
#fonLcg .trust__chip { width: 27px; }
#fonLcg .trust__gtxt b { font-size: 13.5px; }
#fonLcg .trust__gtxt span { font-size: 9.5px; }
#fonLcg .trust__facts { padding: 11px 12px; }
#fonLcg .trust__ico { width: 22px; }
#fonLcg .trust__ico .trust__mk { width: 12px; height: 12px; }
#fonLcg .trust__facts li { column-gap: 6px; }
#fonLcg .trust__facts b { font-size: 11px; }
#fonLcg .trust__facts li > span:not(.trust__ico) { font-size: 9px; line-height: 1.22; }
#fonLcg .trust__facts li + li { padding-left: 6px; }
#fonLcg .trust__facts li:not(:last-child) { padding-right: 6px; }
#fonLcg .trust__foot { padding: 11px 12px; }
#fonLcg .trust__ico--sm { width: 22px; }
#fonLcg .trust__foot b { font-size: 10px; }
#fonLcg .trust__foot span { font-size: 9px; line-height: 1.22; }
#fonLcg .trust__faces img { width: 19px; height: 19px; border-width: 1.5px; }
#fonLcg .trust__faces img + img { margin-left: -6px; }
#fonLcg .trust__q, #fonLcg .trust__join { gap: 7px; }
#fonLcg .trust__join { padding-left: 9px; }
}
/* The flavour swap line holds one line. Split in two, “guaranteed.” sat alone on
the second row reading as a separate promise rather than the tail of the
sentence it belongs to. */
#fonLcg .cfg__note { white-space: nowrap; }
@media (max-width: 639.98px) {
#fonLcg .cfg__note { font-size: clamp(9.5px, 3.05vw, 12.5px); }
}
/* THE FLAVOUR LINE MUST WRAP, unlike the note above it.
.cfg__note is nowrap so the guarantee sentence never splits mid-phrase, but
the flavour line is longer and sits above the plan rows: held on one line it
would overflow the card on a narrow phone. It also needs to sit ABOVE the
options rather than under them, so the margin flips. */
#fonLcg .cfg__note--flav {
white-space: normal;
margin: -2px 0 13px;
color: var(--fg-mut);
}
/* ==========================================================================
THE FIELDSET WAS WEARING ITS BROWSER DEFAULTS
Measured at 390px: .cfg sits 0-390, the fieldset 16-374 like everything else,
and then the legend and every option inside it 30-360. Fourteen pixels further
in on each side, so the format, flavour and supply cards came out 330 wide
while the summary, the CTA, the badges and the fine print underneath were all
358 — one column of controls, two different widths, and the group that matters
most was the narrow one.
That is : the UA sheet gives it padding-block-start .35em,
padding-inline .75em and a 2px groove border, and none of it had been reset.
It is also min-width: min-content by default, which is its own trap in a grid.
Reset properly rather than nudged, so the fieldset contributes nothing but
grouping — which is the only reason it is there.
========================================================================== */
#fonLcg .cfg__f {
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
#fonLcg .cfg__lg { padding-inline: 0; }
/* ==========================================================================
THE THREE STEPS NEED AIR BETWEEN THEM
Format, flavour and supply are three separate decisions, and they were
running into each other: the swap-flavours note sat almost against the next
legend, so “PICK YOUR SUPPLY” read as part of the flavour group rather than
the start of a new one. The gap between groups is now clearly larger than
the gap inside one, which is the only thing that tells a reader where a
group ends.
========================================================================== */
#fonLcg .cfg__f { margin-bottom: clamp(26px, 3vw, 34px); }
#fonLcg .cfg__lg { margin-bottom: 11px; }
#fonLcg .cfg__note { margin: 11px 0 0; }
@media (max-width: 639.98px) {
#fonLcg .cfg__f { margin-bottom: 24px; }
#fonLcg .cfg__lg { margin-bottom: 10px; }
#fonLcg .cfg__opts { gap: 7px; }
}
/* ==========================================================================
PORTED FROM assets/lcg-lander.css — KEEP THIS AT THE TAIL OF THE SHEET.
These blocks land last in lcg-lander.css and they only work from there. Two
of them exist to BEAT earlier rules at equal specificity: the rating heading
re-centres over the .ugc__head that left-aligns it, and .ugc gives up its
own bleed so .ugc__band can take it. Moved up the file they lose silently —
the selectors still match, the cascade just picks the older rule, and the
rows go back to stopping a gutter short of the edge with the heading inset
beside them. If more theme CSS is ported later, it goes after this.
========================================================================== */
/* ==========================================================================
THE TWO REVIEW ROWS RUN TO THE EDGE OF THE SCREEN, AND DISSOLVE THERE
Ported from assets/lcg-lander.css. Both rows bled by exactly one gutter —
`margin-inline: calc(var(--gutter) * -1)` reaches the shell's PADDING box,
not the viewport. Under 1300px that is the same thing; over it the shell is
centred and the row stopped hundreds of pixels short of the edge, with a card
sliced clean through by the container. A row whose whole argument is "this
keeps going" ending in a hard vertical cut in the middle of the page reads as
a broken layout, not as a rail.
`calc(50% - 50vw)` is the escape: 50% resolves against the shell's content
box, so the margin is exactly the distance from the shell's centre to the
viewport's, whatever the shell's max-width is doing. #fonLcg already carries
overflow-x: hidden, so the ~half-scrollbar of 100vw overhang is clipped
evenly on both sides rather than opening a horizontal scrollbar.
The fade then does the ending. It is measured off the viewport, so the last
card visibly leaves rather than being amputated by a box edge. One fade for
both rows: this supersedes --rgrid-fade and --ugc-fade, which were sized for
a row that stopped at the shell's edge and are too narrow for one that now
crosses the whole screen.
========================================================================== */
#fonLcg .rgrid:has(> [data-marquee="on"]),
/* .ugc hands the bleed over to .ugc__band. It has to stop doing it itself, or
the heading inside it goes to the edge of the screen with the videos. */
/* Standing still, the rows are swipe rails again and a rail that starts under
the edge of the screen has nothing to grab. The gutter comes back with them. */
@media (prefers-reduced-motion: reduce) {
#fonLcg .rgrid:has(> [data-marquee="on"]),
}
/* --------------------------------------------------------------------------
THE RATING HEADING STOPS LOOKING INDENTED
Ported from assets/lcg-lander.css, where this landed after these three files
were split off. It is a THIRD .ugc__head rule and it deliberately overrides
the left-align one above: same specificity, later wins.
It was left-aligned to the shell's content column while the video row beside
it bled a gutter further out, so the heading sat inset from the only thing
near it and read as a mis-indent on a phone and on a desktop alike. Now that
both rows run the full width of the screen there is no left edge left to
align to, and the section's own h2 above is centred — so the rating, the
count and the link centre with it. The block relates to the heading it sits
under and to two symmetrical rows, instead of to nothing.
-------------------------------------------------------------------------- */
/* ==========================================================================
EVERY REVIEW CARD IS BUILT TO THE SAME PLAN
Ported verbatim from assets/lcg-lander.css, where this was fixed on the
L-Carnitine section after these three files were split off. Carried across
unchanged so the lander and the theme do not drift.
The cards were the same width and nothing else. A one-line headline against
a two-line one started the body at a different height; a four-line body
against a six-line one finished it at a different height; and because the
body was `flex: 1` with a max-height capping it, the short ones could not
stretch to push the footer down — so the avatar rows landed wherever the
copy happened to stop. Six cards, six internal layouts, side by side in a
moving row where they are directly compared.
Each part now reserves its space whether it needs it or not: the headline
always occupies two lines, the body always occupies its clamp, and the
footer is pinned to the bottom. The card height does not change — the row
was already as tall as its tallest card — but every card now uses that
height the same way, so stars, headline, body and footer line up straight
across the row.
========================================================================== */
#fonLcg .rcard__t {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
min-height: calc(1.3em * 2);
}
/* min-height AND max-height off the same two variables, so the box, the clamp
and the reserved space can never disagree the way they did before. */
#fonLcg .rcard__b {
--rb-lines: 6;
--rb-lh: 1.58;
flex: none;
line-height: var(--rb-lh);
-webkit-line-clamp: var(--rb-lines);
min-height: calc(1em * var(--rb-lh) * var(--rb-lines));
max-height: calc(1em * var(--rb-lh) * var(--rb-lines));
}
@media (max-width: 1039.98px) {
#fonLcg .rcard__b { --rb-lines: 5; --rb-lh: 1.5; }
}
#fonLcg .rcard__f { margin-top: auto; }
/* The one line that could still wrap and put the footers back out of step. A
flavour long enough to overflow now truncates instead of taking a new row. */
#fonLcg .rcard__meta {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Its own line under the buyer line, and it holds that line's height even when
an entry carries no date — otherwise a dateless review shortens one footer
and the problem comes straight back. */
#fonLcg .rcard__when {
min-height: 1.3em;
margin-top: 1px;
color: var(--fg-soft);
}