/** Shopify CDN: Minification failed
Line 64:9 Expected ":"
**/
/* ==========================================================================
FGO HOME v4 -- the Beam-composition homepage.
Generated from pdp/design/beam-home/index.html on 22 Sep 2026, not retyped,
so the built page carries the prototype values rather than my memory of them.
SCOPED TO .fgoH4. The prototype is a whole document and sets body, html, a, p,
ul and h1-h4 bare. Those rules would hit the theme header, the mini-cart and the
footer, which render on this page too. Every selector is therefore prefixed, and
:root is rewritten to .fgoH4 so the token block travels with the scope.
The @font-face block is dropped: the theme already serves Founders from its own
assets, and the prototype paths (assets/fonts/...) do not exist here.
========================================================================== */
/* ---- theme tokens, lifted from fgo-system.css at build time. See the note in the generator: pdp-v4 needs these for the theme header and
footer, but must NOT take the .fgo-sys component rules with them. */
:root {
--fg-rail: 1360px;
--fg-sect: clamp(55px, 6.2vw, 89px); /* Fibonacci 55 -> 89 */
--fg-sect-merch: clamp(34px, 4.4vw, 55px); /* Fibonacci 34 -> 55 */
--fg-rail-gutter: clamp(20px, 2.8vw, 40px);
--fg-paper: #F8F7F0; /* cream lifted for large surfaces */
--fg-rule: rgba(0,0,0,.12); /* every hairline */
--fg-ink-70: rgba(0,0,0,.72); /* secondary copy */
--fg-green-12: rgba(4,106,56,.12); /* tick backgrounds, chips */
--fg-green-06: rgba(4,106,56,.06); /* callout grounds */
--fg-turmeric: #FFCD00; /* DECORATIVE ONLY. Never type:
--fg-bg: #F8F7F0; /* the light ground — product pops on this */
--fg-bg-alt: #F5F3E7; /* BRAND CREAM — the warm band */
--fg-tile: #EAE2CF; /* THE SURFACE. Deeper than the reference (they sit 7/9/16 below their page; this is 11/17/26) because THEIR products are white and pale, so the tile shows generously around them. OURS are saturated — magenta, teal, brown, deep green — and fill the card, leaving little ground visible, so the same small step registers as nothing. Must be DARKER than the
--fg-deep: #046A38; /* brand green, full strength */
--fg-deep-ink: #023A1F; /* THE INK, and it is ours: brand Organic
--fg-ink-soft: #3F6B4F; /* the same green, lifted for secondary copy */
--fg-line: rgba(2, 58, 31, .14);
--fg-accent: #046A38;
--fg-edge: var(--fg-rail);
--fg-gutter: var(--fg-rail-gutter);
--fg-r-sm: 8px; /* chips, flags */
--fg-r-md: 14px; /* tiles, cards, fields */
--fg-r-lg: 24px; /* full-width panels */
--fg-r-pill: 999px;
--fg-sect-y: var(--fg-sect-merch);
--fg-head-gap: clamp(13px, 2.4vw, 34px); /* Fibonacci 13 -> 34 */
--fg-card-gap: clamp(13px, 1.5vw, 21px); /* Fibonacci 13 -> 21 */
--fg-t-micro: 12px; /* ui-xs */ /* flags, counts, legal */
--fg-t-label: 12px; /* label, .125em tracked */ /* eyebrow / subhead: caps, tracking 125 */
--fg-t-body: 19px; /* THE ANCHOR. The whole editorial ladder is
--fg-t-lede: 24px; /* 24 x phi = 39, the H2 above it */ /* ui-lg */
--fg-t-h3: 31px; /* title. 31 = 19 x phi */ /* title-sm */
--fg-t-h2: clamp(29px, 2.7vw, 39px); /* title-lg. 39 = 24 x phi */ /* title -> display on the ramp */ /* was 36-60, sized for all-caps. Title case carries at a smaller step. */
--fg-t-h1: clamp(38px, 4.2vw, 61px); /* display-lg; 38 is the 390px cap */
--fg-t-cta: 16px; /* ui-base */
--fg-t-title: 20px; /* ui-lg, card + product names */
--fg-h-family: var(--fg-body);
--fg-h-weight: 600;
--fg-h-case: none;
--fg-h-track: -.025em;
--fg-h-lh: 1.08;
word in the hero, links, marks, the primary button fill. ONE token: put var(--fg-deep-ink) back here to
--fg-h-ink: #12160F;
--fg-h-em-family: inherit;
--fg-h-em-style: normal;
--fg-h-em-weight: inherit;
--fg-h-em-size: 1em;
--fg-h-em-track: inherit;
--fg-h-em-color: inherit;
--fg-btn-face: var(--fg-body);
--fg-btn-size: 16px;
--fg-btn-weight: 600;
--fg-btn-case: none;
--fg-btn-track: 0;
--fg-btn-h: 56px;
--fg-btn-r: 999px;
--fg-btn-pad-x: 30px;
--fg-display: "FoundersCondensed", Arial, sans-serif;
--fg-body: "Founders", "Open Sans", sans-serif;
--fg-serif: Georgia, "Times New Roman", serif;
--fg-lh-body: 1.58; /* at 19px, 1.618 opens the measure too far */
--fg-lh-tight: .98;
--fg-track-cta: .04em; /* every CTA. never wider */
--fg-track-lbl: .12em; /* every eyebrow/label */
--fg-ease: cubic-bezier(.16, 1, .3, 1);
}
/* ============================================================
From Great Origins · Homepage · shopbeam.com homepage layout
Every dimension below was measured on shopbeam.com at 1440x900
and 390x844 on 21 Sep 2026 (brief/LAYOUT-SPEC.md). Materials are
the Hibiscus PDP sister's (beam-layout/DESIGN.md), multi-product.
============================================================ */
.fgoH4 {
color-scheme:light;
/* brand core (PDP, verbatim) */
--paper:#FBF8F1; /* page ground */
--cream:#F5F3E7; /* bands, closed accordion rows, review tiles, image wells */
--white:#FFFFFF; /* open accordion row only */
--ink:#141414; /* type */
--ink-2:#6B675C; /* secondary type, warm */
--line:#D8D3C7; /* limestone hairline */
--green:#046A38; /* Organic Green, chrome: announcement + footer */
--forest:#023A1F; /* deep green: headings + the solid CTA */
/* beam's layout constants (PDP, verbatim) */
--indent:16px; --gutter:80px; --max:1440px;
--r-card:8px; --r-form:2px; --r-pill:9999px;
--ann-h:50px; --head-h:65px;
--ease:cubic-bezier(.16,1,.3,1);
/* home */
--r-tile:12px; /* review carousel tiles (Beam 12) */
--r-banner:16px; /* quality banner (Beam 16) */
--scrim:rgba(20,20,20,.45); /* the ONLY scrim value; never darker */
--chip-bg:rgba(251,248,241,.88); /* paper at .88, the badge chip ground */
}
.fgoH4 * {
box-sizing:border-box
}
.fgoH4 {
scroll-behavior:smooth;-webkit-text-size-adjust:100%
}
.fgoH4 {
margin:0;background:var(--paper);color:var(--ink);font-family:"Founders","Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:26px;font-weight:400;text-rendering:optimizeLegibility;font-kerning:normal;-webkit-font-smoothing:antialiased;overflow-x:hidden
}
.fgoH4 img {
display:block;max-width:100%
}
.fgoH4 button {
font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer
}
.fgoH4 a {
color:inherit
}
.fgoH4 p {
margin:0;text-wrap:pretty
}
.fgoH4 h1, .fgoH4 h2, .fgoH4 h3, .fgoH4 h4, .fgoH4 h5 {
margin:0;font-weight:300;color:var(--forest)
}
.fgoH4 :focus-visible {
outline:2px solid var(--forest);outline-offset:3px;border-radius:2px
}
.fgoH4 .sr {
position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap
}
.fgoH4 .ico {
width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round
}
.fgoH4 .wrap {
max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)
}
.fgoH4 .band {
background:var(--cream)
}
/* ---- type roles (PDP verbatim, then the homepage additions) ---- */
.fgoH4 .h0 {
font-size:56px;line-height:.95;font-weight:300;letter-spacing:-.01em
}
.fgoH4 .h1 {
font-size:48px;line-height:.98;font-weight:300;letter-spacing:-.01em
}
.fgoH4 .h2 {
font-size:40px;line-height:1.05;font-weight:300;letter-spacing:-.005em;text-wrap:balance
}
.fgoH4 .h4 {
font-size:20px;line-height:26px;font-weight:600;color:var(--ink)
}
.fgoH4 .h5 {
font-size:17px;line-height:24px;font-weight:600;color:var(--ink)
}
.fgoH4 .cap1 {
font-size:15px;line-height:20px
}
.fgoH4 .cap2 {
font-size:13px;line-height:18px
}
.fgoH4 .b {
font-weight:600
}
.fgoH4 .serif {
font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400
}
/* home */
.fgoH4 .h-hero {
font-size:56px;line-height:.95;font-weight:300;letter-spacing:-.01em;color:var(--forest);text-wrap:balance
}
.fgoH4 .h-tile {
font-size:40px;line-height:1.05;font-weight:300;letter-spacing:-.005em;color:var(--paper)
}
.fgoH4 .h3 {
font-size:24px;line-height:30px;font-weight:400;color:var(--ink)
}
.fgoH4 .lede {
font-size:18px;line-height:28px
}
.fgoH4 .chip {
display:inline-flex;align-items:center;height:26px;padding:0 16px;border-radius:var(--r-pill);background:var(--chip-bg);color:var(--ink);font-size:13px;line-height:16px;font-weight:600
}
.fgoH4 .field {
height:48px;width:100%;padding:0 16px;border-radius:var(--r-form);border:1px solid rgba(245,243,231,.6);background:transparent;color:var(--cream);font:inherit;font-size:16px
}
.fgoH4 .field::placeholder {
color:var(--cream);opacity:.85
}
.fgoH4 .field:focus-visible {
outline:2px solid var(--cream);outline-offset:2px
}
/* ---- buttons (PDP verbatim, plus the two homepage variants) ---- */
.fgoH4 .btn {
display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border-radius:var(--r-pill);background:var(--forest);color:#fff;font-size:16px;line-height:16px;font-weight:600;text-decoration:none;transition:background .3s var(--ease),transform .3s var(--ease);width:auto;white-space:nowrap
}
.fgoH4 .btn:hover {
background:var(--ink)
}
.fgoH4 .btn:active {
transform:translateY(1px)
}
.fgoH4 .btn.ghost {
background:transparent;color:var(--ink);border:1px solid var(--ink)
}
.fgoH4 .btn.ghost:hover {
background:var(--ink);color:#fff
}
.fgoH4 .btn.on-photo {
background:var(--paper);color:var(--forest)
}
.fgoH4 .btn.on-photo:hover {
background:var(--cream)
}
.fgoH4 .btn.ghost.on-green {
color:var(--cream);border-color:var(--cream)
}
.fgoH4 .btn.ghost.on-green:hover {
background:var(--cream);color:var(--green)
}
.fgoH4 .link {
font-weight:600;font-size:16px;line-height:16px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;padding:14px 0;margin:-14px 0
}
.fgoH4 .link:hover {
color:var(--forest)
}
/* ---- cards, images, motion (PDP verbatim) ---- */
.fgoH4 .card {
border-radius:var(--r-card);overflow:hidden
}
.fgoH4 .card.pic {
position:relative;background:var(--cream)
}
.fgoH4 .card.pic img {
width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform 1.2s var(--ease)
}
.fgoH4 .card.pic:hover img {
transform:scale(1.02)
}
/* ---- stars (PDP) ---- */
.fgoH4 .stars {
position:relative;display:inline-flex;height:16px;line-height:0;color:var(--forest)
}
.fgoH4 .stars .row {
display:flex;gap:2px
}
.fgoH4 .stars .fill {
position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap
}
.fgoH4 .stars svg {
width:16px;height:16px;flex:none
}
.fgoH4 .stars .row.o svg {
fill:none;stroke:currentColor;stroke-width:1.5
}
.fgoH4 .stars .row.f svg {
fill:currentColor;stroke:currentColor;stroke-width:1.5
}
/* ---- round arrow controls (PDP gallery arrows): a circle around an arrow is a control ---- */
.fgoH4 .rnav {
display:flex;justify-content:center;gap:6px;margin-top:37px
}
.fgoH4 .gnav {
position:relative;width:36px;height:36px;border-radius:50%;background:var(--paper);border:1px solid var(--line);color:var(--ink);display:flex;align-items:center;justify-content:center;transition:background .2s var(--ease),color .2s var(--ease)
}
.fgoH4 .gnav .ico {
width:10px;height:10px;stroke-width:2.4
}
.fgoH4 .gnav::before {
content:"";position:absolute;inset:-4px
}
.fgoH4 .gnav:hover {
background:var(--ink);color:#fff
}
/* ---- scroll rows (phone sliders, reviews carousel) ---- */
.fgoH4 .srow {
scrollbar-width:none;-ms-overflow-style:none
}
.fgoH4 .srow::-webkit-scrollbar {
display:none
}
/* ---- best-seller card: subscribe price ---- */
.fgoH4 .pcard .subline {
color:var(--green);font-weight:600;margin-top:2px
}
/* ---- real people ---- */
.fgoH4 .prow, .fgoH4 .tcards, .fgoH4 .statbar, .fgoH4 .moods {
list-style:none;margin:0;padding:0
}
.fgoH4 .people {
padding:80px 0
}
.fgoH4 .prow {
display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-bottom:40px
}
.fgoH4 .prow li {
margin:0
}
.fgoH4 .prow img {
width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:var(--r-card);background:var(--cream)
}
.fgoH4 .tcards {
display:grid;grid-template-columns:repeat(3,1fr);gap:32px
}
.fgoH4 .tcard {
background:var(--paper);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:10px
}
.fgoH4 .tcard blockquote {
margin:0
}
.fgoH4 .tcard .who {
margin-top:auto
}
.fgoH4 .tcard .vb {
color:var(--green);font-weight:600
}
.fgoH4 .statbar {
display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px;padding-top:32px;border-top:1px solid var(--line)
}
.fgoH4 .statbar li {
display:flex;flex-direction:column;gap:4px;text-align:center
}
.fgoH4 .statbar .n {
font-size:32px;line-height:1.1;font-weight:300;color:var(--forest);font-variant-numeric:tabular-nums
}
/* ---- guided discovery ---- */
.fgoH4 .mood {
padding:80px 0
}
.fgoH4 .moods {
display:grid;grid-template-columns:repeat(4,1fr);gap:24px
}
.fgoH4 .moods a {
display:flex;gap:14px;height:100%;padding:24px;border:1px solid var(--line);border-radius:var(--r-card);text-decoration:none;background:var(--paper);transition:border-color .2s var(--ease),background .2s var(--ease)
}
.fgoH4 .moods a:hover {
border-color:var(--forest);background:var(--cream)
}
.fgoH4 .mi {
flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--green)
}
.fgoH4 .mi .ico {
width:22px;height:22px
}
.fgoH4 .mt {
display:flex;flex-direction:column;gap:6px
}
.fgoH4 .ml {
font-size:15px;line-height:20px;font-weight:600;color:var(--forest);display:inline-flex;align-items:center;gap:6px;margin-top:4px
}
.fgoH4 .ml .ico {
width:14px;height:14px
}
@media (max-width:1024px) {
.fgoH4 .people, .fgoH4 .mood {
padding:40px 0
}
.fgoH4 .prow {
grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:24px
}
.fgoH4 .tcards {
grid-template-columns:1fr;gap:16px
}
.fgoH4 .statbar {
grid-template-columns:1fr 1fr;gap:20px;margin-top:24px;padding-top:24px
}
.fgoH4 .statbar .n {
font-size:28px
}
.fgoH4 .moods {
grid-template-columns:1fr;gap:12px
}
.fgoH4 .moods a {
padding:16px
}
}
/* ================= announcement + header (PDP verbatim) ================= */
.fgoH4 .ann {
height:var(--ann-h);background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:18px;font-weight:600;padding:0 var(--indent);text-align:center
}
.fgoH4 .hdr {
position:sticky;top:env(safe-area-inset-top,0px);z-index:40;height:var(--head-h);background:var(--paper);border-bottom:1px solid var(--line)
}
.fgoH4 .hdr .wrap {
height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center
}
.fgoH4 .nav {
display:flex;gap:28px;align-items:center;font-size:13px;line-height:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase
}
.fgoH4 .nav a {
text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding:8px 0;position:relative
}
.fgoH4 .nav a::after {
content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)
}
.fgoH4 .nav a:hover::after {
transform:scaleX(1)
}
.fgoH4 .nav.right {
justify-content:flex-end
}
.fgoH4 .nav .icon-btn {
display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:50%
}
.fgoH4 .nav .icon-btn .ico {
width:20px;height:20px;stroke-width:1.8
}
.fgoH4 .logo {
display:block;height:46px
}
.fgoH4 .logo img {
height:100%;width:auto
}
.fgoH4 .hdr .m-only {
display:none;width:40px;height:40px;align-items:center;justify-content:center;margin-left:-8px
}
.fgoH4 .hdr .logo {
justify-self:center
}
/* ================= hero (Beam content_grid, full-bleed photograph) ================= */
.fgoH4 .hero {
position:relative;background:var(--cream)
}
.fgoH4 .hero>picture img {
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right
}
.fgoH4 .hero .wrap {
position:relative;z-index:1
}
.fgoH4 .hero .item {
aspect-ratio:21/9;display:flex;flex-direction:column;justify-content:center;padding:40px 0
}
.fgoH4 .hero .copy {
animation:h4rise .7s var(--ease) both
}
@keyframes h4rise {
from {
transform:translateY(10px);opacity:0
}
to {
transform:translateY(0);opacity:1
}
}
.fgoH4 .hero .proof {
display:flex;align-items:center;gap:12px;color:var(--ink)
}
.fgoH4 .hero h1 {
width:40%;margin:40px 0 16px
}
.fgoH4 .hero .lede {
max-width:400px
}
.fgoH4 .hero .acts {
display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:24px
}
/* ================= press marquee (Beam fav-marquee) ================= */
.fgoH4 .press {
padding:32px 0;overflow:hidden
}
.fgoH4 .press .track {
display:flex;width:max-content;animation:h4marquee 46s linear infinite
}
.fgoH4 .press .grp {
display:flex;align-items:center;height:30px
}
.fgoH4 .press .it {
display:inline-flex;align-items:center;padding:0 70px;white-space:nowrap
}
.fgoH4 .press .it img {
width:auto
}
.fgoH4 .press .cap {
color:var(--ink-2)
}
.fgoH4 .press:hover .track, .fgoH4 .press:focus-within .track {
animation-play-state:paused
}
@keyframes h4marquee {
to {
transform:translateX(-50%)
}
}
/* ================= best sellers (Beam content_slider, 4 cards) ================= */
.fgoH4 .sellers {
padding:80px 0
}
.fgoH4 .cards {
display:grid;grid-template-columns:repeat(4,1fr);gap:32px
}
.fgoH4 .pcard {
display:flex;flex-direction:column;align-items:flex-start
}
.fgoH4 .pcard .card.pic {
aspect-ratio:1;width:100%
}
.fgoH4 .pcard .chip {
position:absolute;top:8px;left:8px;z-index:1
}
.fgoH4 .pcard:hover .card.pic img {
transform:scale(1.02)
}
.fgoH4 .pcard .h3 {
margin-top:16px
}
.fgoH4 .pcard .h3 a {
text-decoration:none
}
.fgoH4 .pcard .h3 a:hover {
text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px
}
.fgoH4 .pcard .meta {
margin-top:4px;color:var(--ink-2)
}
.fgoH4 .pcard .btn {
margin-top:16px;width:100%;padding:0 16px
}
.fgoH4 .pcard .h3 {
min-height:60px;display:flex;align-items:flex-end
}
/* ================= origins split + accordion (Beam core belief) ================= */
.fgoH4 .origins {
padding:80px 0
}
.fgoH4 .origins .split {
display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center
}
.fgoH4 .origins .card.pic {
aspect-ratio:1
}
.fgoH4 .origins .txt {
padding-left:110px
}
.fgoH4 .origins h2 {
margin-bottom:8px
}
.fgoH4 .acc {
margin-top:24px;display:flex;flex-direction:column;gap:8px
}
.fgoH4 .acc .row {
background:var(--cream);border-radius:var(--r-card);overflow:hidden;transition:background .3s var(--ease)
}
.fgoH4 .acc .row.open {
background:var(--white)
}
.fgoH4 .acc-btn {
width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;font-weight:600;font-size:17px;line-height:24px;min-height:56px;padding:16px;transition:color .18s var(--ease)
}
.fgoH4 .acc-btn .ico {
width:14px;height:14px;flex:none;transition:transform .45s var(--ease)
}
.fgoH4 .acc-btn:hover {
color:var(--forest)
}
.fgoH4 .open>.acc-btn .ico {
transform:rotate(45deg)
}
.fgoH4 .ac {
display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)
}
.fgoH4 .open>.ac {
grid-template-rows:1fr
}
.fgoH4 .ac>div {
overflow:hidden
}
.fgoH4 .ac .in {
padding:0 16px 16px
}
.fgoH4 .ac p {
max-width:60ch
}
.fgoH4 .ac .btn {
margin-top:16px
}
/* ================= quality banner (Beam content_grid banner) ================= */
.fgoH4 .quality {
padding:80px 0
}
.fgoH4 .banner {
position:relative;aspect-ratio:2.379;border-radius:var(--r-banner);overflow:hidden;background:var(--cream)
}
.fgoH4 .banner img {
position:absolute;inset:0;width:100%;height:100%;object-fit:cover
}
.fgoH4 .banner::after {
content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--scrim) 0%,rgba(20,20,20,.43) 34%,transparent 64%)
}
.fgoH4 .banner .in {
position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:64px 40px;color:var(--cream)
}
.fgoH4 .banner h2 {
color:var(--cream)
}
.fgoH4 .banner p {
max-width:430px;margin-top:12px;font-size:18px;line-height:29px
}
.fgoH4 .banner .btn {
margin-top:40px
}
/* ================= reviews carousel (Beam caption-bar carousel) ================= */
.fgoH4 .reviews {
padding:40px 0 48px;overflow:hidden
}
.fgoH4 .reviews h2 {
text-align:center;margin-bottom:36px
}
.fgoH4 .rrow {
display:flex;gap:16px;align-items:center;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 calc(50% - 150px)
}
@media (min-width:1025px) {
.fgoH4 .rrow {
-webkit-mask-image:linear-gradient(90deg,transparent,#000 60px,#000 calc(100% - 60px),transparent);mask-image:linear-gradient(90deg,transparent,#000 60px,#000 calc(100% - 60px),transparent)
}
}
.fgoH4 .rtile {
position:relative;flex:0 0 300px;height:393px;scroll-snap-align:center;background:var(--cream);border-radius:var(--r-tile);overflow:hidden
}
.fgoH4 .rtile.on {
height:505px
}
.fgoH4 .rtile .bg {
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0
}
.fgoH4 .rtile:not(.on) .bg {
object-position:50% 100%
}
.fgoH4 .rtile .q {
position:relative;z-index:1;padding:16px 20px 0
}
.fgoH4 .rtile .ttl {
margin-top:10px
}
.fgoH4 .rtile blockquote {
margin:6px 0 0
}
.fgoH4 .rtile .who {
margin-top:8px
}
.fgoH4 .rtile .who .vb {
color:var(--ink-2);margin-left:6px
}
.fgoH4 .rtile .cap {
position:absolute;left:10px;right:10px;bottom:10px;z-index:1;display:flex;align-items:center;gap:10px;padding:8px;background:var(--chip-bg);border-radius:var(--r-card)
}
.fgoH4 .rtile .cap .th {
flex:none;width:56px;height:56px;border-radius:4px;overflow:hidden;background:var(--cream)
}
.fgoH4 .rtile .cap .th img {
width:100%;height:100%;object-fit:cover
}
.fgoH4 .rtile .cap .nm {
min-width:0
}
.fgoH4 .rtile .cap .nm .b {
font-size:14px;line-height:18px
}
.fgoH4 .rtile .cap .pr {
color:var(--ink-2)
}
.fgoH4 .rtile .cap .add {
position:relative;margin-left:auto;flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--ink);color:var(--ink);display:flex;align-items:center;justify-content:center;transition:background .2s var(--ease),color .2s var(--ease)
}
.fgoH4 .rtile .cap .add::before {
content:"";position:absolute;inset:-6px
}
.fgoH4 .rtile .cap .add .ico {
width:14px;height:14px
}
.fgoH4 .rtile .cap .add:hover {
background:var(--ink);color:#fff
}
/* ================= six claims band (Beam ingredients band) ================= */
.fgoH4 .claims {
padding:80px 0 40px
}
.fgoH4 .claims h2 {
max-width:14ch;margin-bottom:40px
}
.fgoH4 .cgrid {
display:grid;grid-template-columns:repeat(6,1fr);gap:40px 32px
}
.fgoH4 .cell {
display:flex;flex-direction:column;align-items:flex-start;border-top:1px solid var(--line);padding-top:16px
}
.fgoH4 .cell .h5 {
min-height:48px
}
.fgoH4 .cell img {
order:2;height:64px;width:auto;margin:16px 0 0
}
.fgoH4 .cell .cico {
order:2;width:64px;height:64px;margin:16px 0 0;flex:none;fill:none;stroke:var(--forest);stroke-width:.9;stroke-linecap:round;stroke-linejoin:round
}
/* ================= category tiles (Beam content_slider, 7:8 tiles) ================= */
.fgoH4 .cats {
padding:40px 0
}
.fgoH4 .tiles {
display:grid;grid-template-columns:repeat(4,1fr);gap:32px
}
.fgoH4 .tile {
position:relative;display:block;aspect-ratio:7/8;border-radius:var(--r-card);overflow:hidden;background:var(--cream);text-decoration:none
}
.fgoH4 .tile img {
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)
}
.fgoH4 .tile:hover img {
transform:scale(1.02)
}
.fgoH4 .tile::after {
content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(20,20,20,.28) 65%,rgba(20,20,20,.45) 100%)
}
.fgoH4 .tile .in {
position:absolute;inset:0;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:24px
}
.fgoH4 .tile .arr {
flex:none;width:48px;height:48px;color:#fff;display:flex;align-items:center;justify-content:center
}
.fgoH4 .tile.light .h-tile, .fgoH4 .tile.light .arr {
color:var(--ink)
}
/* ================= footer (PDP materials, Beam newsletter composition) ================= */
.fgoH4 .foot {
background:var(--green);color:var(--cream);padding:80px 0 0;overflow:hidden
}
.fgoH4 .ftop {
display:grid;grid-template-columns:1fr 1fr;gap:32px;padding-bottom:40px;border-bottom:1px solid rgba(245,243,231,.25)
}
.fgoH4 .fnews h2 {
color:var(--cream);margin-bottom:16px
}
.fgoH4 .fnews form {
display:grid;grid-template-columns:1fr auto;gap:12px;margin-top:24px;max-width:514px
}
.fgoH4 .fnews .note {
margin-top:12px;color:var(--cream)
}
.fgoH4 .fcols {
display:grid;grid-template-columns:repeat(3,1fr);gap:32px
}
.fgoH4 .fcols>div {
border-top:1px solid rgba(245,243,231,.4);padding-top:16px
}
.fgoH4 .fcols h5 {
color:var(--cream);letter-spacing:.14em;text-transform:uppercase;font-size:13px;margin-bottom:10px
}
.fgoH4 .fcols ul {
list-style:none;margin:0;padding:0
}
.fgoH4 .fcols li {
margin:0 0 10px;line-height:20px
}
.fgoH4 .fcols a {
text-decoration:none;font-size:15px;line-height:20px
}
.fgoH4 .fvp {
list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;max-width:430px
}
.fgoH4 .fvp li {
display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:24px
}
.fgoH4 .fvp .ico {
width:16px;height:16px;margin-top:4px;flex:none;stroke-width:2.4
}
.fgoH4 .fcols a:hover {
text-decoration:underline;text-underline-offset:4px
}
.fgoH4 .social {
display:flex;gap:14px;margin-top:32px;gap:24px
}
.fgoH4 .social a {
width:auto;height:auto;border:0;border-radius:0;padding:4px;display:flex;align-items:center;justify-content:center;transition:opacity .2s var(--ease)
}
.fgoH4 .social a:hover {
opacity:.7
}
.fgoH4 .social .ico {
width:20px;height:20px;stroke-width:1.6
}
.fgoH4 .legal {
display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding:32px 0;font-size:14px;line-height:20px
}
.fgoH4 .legal ul {
list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 20px
}
.fgoH4 .legal a {
text-decoration:none
}
.fgoH4 .legal a:hover {
text-decoration:underline
}
.fgoH4 .wordmark {
display:flex;justify-content:center;align-items:baseline;gap:.15em;font-size:clamp(36px,10.4vw,150px);line-height:.8;height:.62em;overflow:hidden;color:var(--cream);white-space:nowrap;margin-top:32px
}
.fgoH4 .wordmark .a {
font-family:"Founders XCond","Founders",sans-serif;font-weight:700;letter-spacing:.01em
}
.fgoH4 .wordmark .b {
font-family:Georgia,serif;font-style:italic;font-size:.98em
}
/* ================= responsive ================= */
@media (max-width:1279px) {
.fgoH4 .nav.right .hide-md {
display:none
}
}
@media (max-width:1024px) {
.fgoH4 {
--gutter:16px;--head-h:53px
}
.fgoH4 .hdr .wrap {
grid-template-columns:auto 1fr auto
}
.fgoH4 .hdr .nav.left {
display:none
}
.fgoH4 .hdr .m-only {
display:inline-flex
}
.fgoH4 .hdr .nav.right a:not(.icon-btn) {
display:none
}
.fgoH4 .logo {
height:40px
}
.fgoH4 .h2 {
font-size:32px
}
.fgoH4 .h-hero {
font-size:40px;line-height:1
}
.fgoH4 .h-tile {
font-size:32px
}
/* hero: full-bleed 2:3, copy over the cream top, left on the 16px gutter */
.fgoH4 .hero>picture img {
object-position:center bottom
}
.fgoH4 .hero .wrap {
padding:0;max-width:none
}
.fgoH4 .hero .item {
aspect-ratio:2/3;justify-content:flex-start;padding:32px var(--indent);align-items:center;text-align:center
}
.fgoH4 .hero .proof {
flex-direction:row;justify-content:center;flex-wrap:wrap;gap:6px 8px
}
.fgoH4 .hero h1 {
width:auto;margin:16px 0 8px
}
.fgoH4 .hero .lede {
font-size:16px;line-height:24px
}
.fgoH4 .hero .acts {
flex-direction:column;align-items:center;gap:12px;margin-top:16px
}
/* marquee */
.fgoH4 .press {
padding:24px 0
}
.fgoH4 .press .it {
padding:0 36px
}
/* best sellers: 1.2 cards, the next peeks */
.fgoH4 .sellers {
padding:40px 0 24px
}
.fgoH4 .sellers .wrap {
padding:0
}
.fgoH4 .cards {
display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--indent);scroll-padding:0 var(--indent)
}
.fgoH4 .pcard {
flex:0 0 calc((100% - 3.2px)/1.2);scroll-snap-align:start
}
/* origins: text and accordion first, 3:2 photograph below */
.fgoH4 .origins {
padding:40px 0
}
.fgoH4 .origins .split {
display:flex;flex-direction:column;align-items:flex-start;gap:25px
}
.fgoH4 .origins .txt {
order:1;padding-left:0
}
.fgoH4 .origins .card.pic {
order:0;aspect-ratio:3/2;width:calc(100% + 32px);margin-left:-16px;border-radius:0
}
/* banner: portrait, full-bleed, copy at the bottom */
.fgoH4 .quality {
padding:0
}
.fgoH4 .quality .wrap {
padding:0;max-width:none
}
.fgoH4 .banner {
aspect-ratio:.537;border-radius:0
}
.fgoH4 .banner::after {
background:linear-gradient(0deg,var(--scrim) 0%,rgba(20,20,20,.43) 34%,transparent 64%)
}
.fgoH4 .banner .in {
justify-content:flex-end;padding:40px var(--indent)
}
.fgoH4 .banner .btn {
margin-top:24px
}
/* reviews: one tile size, first at the gutter */
.fgoH4 .reviews {
padding:40px 0
}
.fgoH4 .reviews h2 {
margin-bottom:29px
}
.fgoH4 .rrow {
padding:0 70px;gap:8px;scroll-padding:0 70px
}
.fgoH4 .rtile, .fgoH4 .rtile.on {
flex-basis:250px;height:393px;scroll-snap-align:center
}
.fgoH4 .rtile blockquote p {
font-size:15px;line-height:20px
}
/* claims: two columns */
.fgoH4 .claims {
padding:40px 0
}
.fgoH4 .claims h2 {
margin-bottom:24px
}
.fgoH4 .cgrid {
grid-template-columns:1fr 1fr;gap:24px
}
/* categories: 1.4 tiles */
.fgoH4 .cats {
padding:40px 0
}
.fgoH4 .cats .wrap {
padding:0
}
.fgoH4 .tiles {
display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--indent);scroll-padding:0 var(--indent)
}
.fgoH4 .tile {
flex:0 0 calc((100% - 6.4px)/1.4);scroll-snap-align:start
}
/* footer: newsletter first, link columns two-up */
.fgoH4 .foot {
padding-top:48px
}
.fgoH4 .ftop {
grid-template-columns:1fr;gap:40px
}
.fgoH4 .fnews form {
max-width:none
}
.fgoH4 .fcols {
grid-template-columns:1fr;gap:10px
}
.fgoH4 .fbox {
margin-top:32px
}
.fgoH4 .wordmark {
margin-top:16px
}
}
@media (prefers-reduced-motion:reduce) {
.fgoH4 *, .fgoH4 *::before, .fgoH4 *::after {
animation:none!important;transition:none!important;scroll-behavior:auto!important
}
}
/* ---- tiles: Tea Bags dominant (3.27% vs Loose Leaf 0 orders from 140 sessions) ---- */
@media (min-width:1025px) {
.fgoH4 .cats .tiles {
display:grid!important;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:32px;overflow:visible
}
.fgoH4 .cats .tiles .tile {
flex:none!important;width:auto!important;min-width:0
}
}
/* ---- best sellers: one row with a peek, never a second row of empty cells ---- */
@media (min-width:1025px) {
.fgoH4 .sellers .cards {
display:flex!important;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth
}
.fgoH4 .sellers .pcard {
flex:0 0 calc((100% - 192px)/4);scroll-snap-align:start;min-width:0
}
.fgoH4 .sellers .cnav {
display:flex
}
}
/* below 1280 a 4-up card is too narrow for a two-line product name: go 3-up */
@media (min-width:1025px) and (max-width:1279px) {
.fgoH4 .sellers .pcard {
flex:0 0 calc((100% - 160px)/3)
}
}
.fgoH4 .sellers .cnav {
display:flex;gap:6px
}
@media (max-width:1024px) {
.fgoH4 .sellers .cnav {
display:none
}
}
.fgoH4 .sellers .shead {
display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px
}
.fgoH4 .sellers .sact {
display:flex;align-items:center;gap:24px
}
@media (max-width:1024px) {
.fgoH4 .sellers .shead {
padding:0 var(--indent);margin-bottom:20px
}
.fgoH4 .sellers .sact .link {
font-size:15px
}
}
/* ---- 1. THE BUTTONS ----------------------------------------------------
Nate, on the best-seller cards: "fix the issue in the buttons."
Two faults, one you can see and one waiting to happen.
THE HOVER WAS BLACK. Every button on this page fills rgb(20,20,20) on
hover -- the solid one darkens to it, the ghost one fills with it. On a
cream ground under forest-green headings, a near-black pill is the loudest
object in the section, and black is not where this palette goes. The brand
has a named accent for exactly this. A ghost button now fills FOREST with
cream type, which is to say it becomes the page's own solid button; and the
solid button lifts from forest to Organic Green rather than dropping to
black. No black anywhere in the hover system.
THE LABEL COULD NOT WRAP. The card button is width:100% and the base .btn
is white-space:nowrap, so the label is pinned to one line inside a fixed
272px box. Measured at 1440: "Shop hibiscus flowers - cut & sifted" needs
270px of that 272. Two pixels of slack. The row only holds together because
of which products the collection happens to be serving today -- one longer
name and the text runs out through the border.
So the label wraps, the arrow is pinned out of the wrap, the height grows
from a floor rather than being fixed, and margin-top:auto drops every button
to the bottom of its card so a two-line label cannot stagger the row. A
short label renders at exactly the height it did before. */
.fgoH4 .btn:hover { background: var(--green); }
.fgoH4 .btn.ghost:hover { background: var(--forest); color: var(--cream); border-color: var(--forest); }
/* The row was already stretching its cards to a common height. Setting
height:100% on the card CANCELLED that -- an explicit cross size opts an
item out of stretch, and 100% of a content-sized flex container resolves to
auto, so every card except the tallest collapsed back to its own content and
the buttons staggered by 22px wherever one card had a Subscribe & Save line
the others did not. The stretch is stated instead, and the card keeps an
auto height so it can be stretched. */
.fgoH4 .sellers .cards { align-items: stretch; }
.fgoH4 .pcard { height: auto; }
.fgoH4 .pcard .btn {
margin-top: auto;
height: auto;
min-height: 48px;
padding: 13px 16px;
white-space: normal;
line-height: 18px;
text-align: left;
gap: 8px;
}
.fgoH4 .pcard .btn .lbl { min-width: 0; text-wrap: balance; }
.fgoH4 .pcard .btn .ico { flex: none; }
/* the meta lines keep their own spacing; only the button is pushed down */
.fgoH4 .pcard .meta, .fgoH4 .pcard .subline { margin-bottom: 0; }
/* ---- 2. THE CENTRED SECTION HEAD HAD NO SPACE UNDER IT ------------------
Nate: "spacing issue with headline and photos, fix symmetry."
Measured in the People section at 1440: heading to lede 0px, lede to the
photo rail 0px, photo rail to the review cards 40px, cards to the stat bar
40px. Every interval in the section was 40 except the two around the
heading, which were nothing -- so the rail read as though it were part of
the lede rather than the next thing down.
The head now carries the same 40 the rest of the section uses (24 on the
phone, matching the smaller gaps there), and the lede gets a little air
under the heading rather than sitting on its baseline. */
.fgoH4 .sec-head { margin-bottom: 40px; }
.fgoH4 .sec-head .lede { margin-top: 10px; }
@media (max-width: 1024px) {
.fgoH4 .sec-head { margin-bottom: 24px; }
}
/* ---- 3. THE RAIL CARRIES REVIEWS AS WELL AS LOGOS -----------------------
The rating and the quotes ride the same scroll as the mastheads, so they
have to sit on the same baseline and read at the same weight -- otherwise
the rail looks like two components that happen to be touching, which is
what it replaced. The reviewer name takes the quiet ink so the quote itself
is the thing you catch as it passes. */
.fgoH4 .press .it.rating,
.fgoH4 .press .it.quote { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.fgoH4 .press .it.rating .stars { height: 14px; color: var(--green); }
.fgoH4 .press .it.rating .stars svg { width: 14px; height: 14px; }
.fgoH4 .press .it.rating .b { font-weight: 600; color: var(--ink); }
.fgoH4 .press .it.quote .nm { color: var(--ink-2); }
.fgoH4 .press .it.quote .qt { font-weight: 600; color: var(--ink); }
/* ---- 4. THE LOGO BAR STANDS STILL ---------------------------------------
Nate: "bring back this bar -- just in the Beam theme."
The bar he means is the old one: a single centred line, the mastheads, a
hairline, the retailers. What comes back is its LAYOUT, not its typography
-- the labels stay Beam's sentence-case caption rather than the old
letterspaced caps, because the ask was to bring the bar into this theme
rather than bring the old theme along with it.
It wraps on narrow screens instead of overflowing, so the two groups stack
before anything is cut off, and the hairline hides once they are stacked --
a vertical rule between two rows separates nothing. */
.fgoH4 .press.is-static { overflow: visible; }
.fgoH4 .press.is-static .track { width: auto; animation: none; justify-content: center; }
.fgoH4 .press.is-static .grp { flex-wrap: wrap; justify-content: center; height: auto; row-gap: 16px; }
.fgoH4 .press.is-static .it { padding: 0 24px; }
.fgoH4 .press.is-static .rule {
flex: none; width: 1px; height: 24px; background: var(--line); margin: 0 12px;
}
@media (max-width: 860px) {
.fgoH4 .press.is-static .it { padding: 0 14px; }
.fgoH4 .press.is-static .rule { display: none; }
}
/* ---- 5. THE HERO FILLS THE WINDOW --------------------------------------
Measured before: 549px tall at 1440x900, stopping 297px above the fold,
and still 549 at 1920x1080 because the height came from a 21:9 ratio on a
rail that is capped at 1280. A wider screen bought no more hero.
It now takes the window height less the header and a deliberate peek of the
bar underneath, which is the part that tells you to scroll. The 21:9 stays
as the floor so a short laptop window cannot crush it, and svh rather than
vh so a phone browser's collapsing toolbar does not make it jump. Desktop
only -- see the note in fgo-h4-hero.liquid. */
@media (min-width: 1025px) {
.fgoH4 .hero.is-tall .item {
min-height: calc(100svh - var(--h4-hero-trim, 115px));
}
}
/* ---- 6. THE RAIL'S SPEED IS ITS OWN ------------------------------------
One duration for a rail of logos and a rail of quotes is one of them wrong.
Quotes have to be readable as they pass. */
.fgoH4 .press .track { animation: h4marquee var(--h4-marquee-s, 46s) linear infinite; }
.fgoH4 .press.is-static .track { animation: none; }
/* ---- 7. THE PINNED CLAIM -----------------------------------------------
The rating stands at the head of the rail and the quotes run past it, so
the count is on screen the whole time rather than once a cycle. The rule
after it is the same hairline the static bar uses between its two groups.
Under 760 the pin takes its own line: 200px of a 390px screen is most of
the width the quotes need to be legible. */
.fgoH4 .press.has-pin .bar { display: flex; align-items: center; }
.fgoH4 .press.has-pin .vp { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.fgoH4 .press.has-pin .pin {
flex: none; display: inline-flex; align-items: center; gap: 8px;
padding-left: var(--gutter); padding-right: 24px; position: relative; white-space: nowrap;
}
.fgoH4 .press.has-pin .pin::after {
content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
width: 1px; height: 24px; background: var(--line);
}
.fgoH4 .press.has-pin .pin .stars { height: 14px; color: var(--green); }
.fgoH4 .press.has-pin .pin .stars svg { width: 14px; height: 14px; }
.fgoH4 .press.has-pin .pin .b { font-weight: 600; color: var(--ink); }
@media (max-width: 760px) {
.fgoH4 .press.has-pin .bar { flex-wrap: wrap; }
.fgoH4 .press.has-pin .pin {
width: 100%; justify-content: center; padding: 0 var(--gutter) 10px;
}
.fgoH4 .press.has-pin .pin::after { display: none; }
.fgoH4 .press.has-pin .vp { flex-basis: 100%; }
}
/* ---- 8. THE COPY GETS ITS OWN HALF OF THE PHOTOGRAPH --------------------
Nate: "compare that to Beam."
The difference was never the height, it was the collision. Beam's lineup
occupies the right of the frame and the left is a plain wall, so the copy
has somewhere to be. Ours ran the headline straight across the Chamomile
and Turmeric pouches -- unreadable type on top of ruined packaging, the one
failure that wrecks both halves at once.
best_herop.png is that composition: pouches from about 39% of the width
rightward, warm wall and dappled light to the left of it. So the copy is
capped to stop before they start, and the cap has to move with the window
because the rail centres while the photograph stays full-bleed:
available = 0.37 x viewport - content-left
content-left = max(80, (viewport - 1440)/2 + 80)
which is the three-way min below -- 430 at 1440, 380 at 1920, 318 at 2400,
and the narrow branch for windows under 1440 where the rail is not yet
centred. The headline gives up its own 40% width, since the column now
holds the line. */
@media (min-width: 1025px) {
.fgoH4 .hero .copy {
max-width: min(430px, calc(37vw - 80px), calc(630px - 13vw));
}
.fgoH4 .hero h1 { width: auto; }
}
/* ---- 9. THE PINNED CLAIM SITS ON THE PAGE RAIL --------------------------
Nate: "why is it aligned far left?" Because it was: the pin was padded by a
flat 80px from the viewport edge while every other thing on the page sits on
a 1440 rail that centres itself. At 1440 those are the same number, which is
why it looked right here and wrong on his wider screen -- measured at 2020,
the headings started at 370 and the pin started at 80. 290px adrift.
It now takes the greater of the two, so it lands on the rail at every width. */
.fgoH4 .press.has-pin .pin {
padding-left: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter)));
}
/* ---- 10. THE STARS SIT ON THE TEXT'S OPTICAL CENTRE ---------------------
Nate: "this star rating and text need to align horizontally properly."
The boxes were already centred to the pixel -- measured, the two midpoints
were identical. The problem is that a line of digits and capitals has its
visual mass ABOVE the middle of its line box, because the box reserves room
for descenders that "150,000+ Trusted Reviews" does not use. Centring the
glyphs on the box centre therefore lands them low against the text.
For 15px type in a 20px line the digits run from about 3.2 to 13.8, centre
8.5 against a box centre of 10. The stars come up by that difference, as
position rather than margin so nothing in the layout moves. */
/* SUPERSEDED by note 62: the same correction, derived from the typeface's
metrics instead of eyeballed, so it holds at every size this rail is set
in rather than only at the one it was nudged against. */
/* ---- 11. THE CATEGORY TILES WERE NOT A ROW ------------------------------
Measured at 1440: tile one 428x489, tiles two to four 252x288. The grid was
1.7fr 1fr 1fr 1fr -- a deliberate hero tile in the prototype -- and because
every tile also carries aspect-ratio 7/8, the extra width became extra
HEIGHT. So three tiles floated at the top of a 489px row with 200px of
nothing underneath them, which is what read as misplaced.
A hero tile works when the first category earns the emphasis. Tea bags,
Superfoods, K-Cups and Loose leaf are four formats of equal standing, and
nothing on the page argues otherwise, so they get four equal columns:
296x338 each on the 1280 rail.
The title also needs room to keep one line -- "Loose leaf" was wrapping
against the arrow at 252 and clipping. */
.fgoH4 .cats .tiles { grid-template-columns: repeat(4, 1fr) !important; }
.fgoH4 .tile .in { gap: 12px; }
.fgoH4 .tile .h-tile { min-width: 0; text-wrap: balance; }
.fgoH4 .tile .arr { flex: none; }
@media (max-width: 1024px) {
.fgoH4 .cats .tiles { grid-template-columns: none !important; }
}
/* ---- 12. THE REVIEW BLOCK IS ONE SECTION -------------------------------
The People section and the carousel now make a single argument -- "real
customers, real reviews" -- so the seam between them has to stop looking
like a section break. The carousel drops its top padding when it is running
as the tail of that block, and the People section drops its bottom padding
to meet it. */
.fgoH4 .reviews.is-tail { padding-top: 0; }
.fgoH4 .people + .fgoH4 .reviews.is-tail,
.fgoH4 .reviews.is-tail { margin-top: -8px; }
/* ---- 13. THE BELIEF BLOCK CARRIES A CTA --------------------------------
Beam's commitment-to-quality block ends in one button into a collection;
ours ended in an accordion and stopped. The button sits under the rows, on
the text column, not inside a row. */
.fgoH4 .origins .txt > .btn { margin-top: 28px; }
/* ---- 14. "LOOSE LEAF" COULD NOT BE READ --------------------------------
Nate: "loose leaf text hard to read here."
The tile had a `light` flag that swaps the title to ink, and it was set --
but the photograph behind it is a pale green that goes almost white exactly
where the title sits, so dark-on-pale was still failing, and a scrim built
for white-on-dark was doing nothing for it.
Legibility on a photograph somebody else can swap cannot rest on the
photograph. Every tile now carries a gradient from its own foot, and the
light variant carries a pale one in the other direction, so whichever way
the picture goes the type has a ground of its own. The white tiles gain
contrast too -- the old scrim was flat and the bottom of a photograph is
where its detail usually is. */
.fgoH4 .tile::after {
background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 26%, rgba(0,0,0,0) 58%) !important;
}
.fgoH4 .tile.light::after {
background: linear-gradient(to top, rgba(255,255,255,.80) 0%, rgba(255,255,255,.45) 26%, rgba(255,255,255,0) 58%) !important;
}
.fgoH4 .tile.light .h-tile, .fgoH4 .tile.light .arr { color: var(--forest); }
/* ---- 15. FGO'S OWN ICONS IN THE CLAIMS BAND ----------------------------
The band was drawing generic glyphs -- a globe, a shield, two people -- when
FGO has a real icon set already running in the marquee bar. An has to
be told to behave like the