/* gogelagen.com - Gelagen, USA Authorized Gelagen Retailer desk. DESIGN SLOT, row 338 (_generators/batch9_assignments.py) Piazzolla / Spline Sans. Ground: cold slate with parchment panels. Header: a masthead whose name sits inside a tall notched shield at the left edge. Footer: a block whose destinations run down one side of a tall guarantee panel. Hero motif glow / sheen-rise. Brand mark bare + wave. There is NO look reference on batch 9, so the slot above is the whole differentiation budget and every line of it is built, not approximated. WHERE THE COLOUR COMES FROM The bottle, read pixel by pixel out of assets/gelagen-square-dark-product-1- bottle.webp: deep berry-crimson gummies clustered behind clear PET, a parchment-cream label, thin gold foil rules, a bone-white cap. The crimson is the accent and carries every call to action. The cream is the parchment the panels are cut from. The gold is a rule and a small-caps colour, never a field. The cold slate under all of it is the slot's ground and is the one colour the bottle does not contain - which is the point: the product is the warm object on a cool page. Everything above CRITICAL-END is inlined into every page head, so the first screen paints without waiting for this file. The topline strip and the hero motif live up there on purpose: appended to the end of the sheet they load async and flash unstyled at the very top of the page. AFTER EDITING THIS FILE, run python _generators/restamp_assets.py gogelagen.com or a returning visitor keeps last year's stylesheet for a year (pitfall 49), and rebuild, or the inlined copy in every page goes stale (pitfall 47). */ /* ---- tokens */ :root{ /* ground: cold slate. --paper is read by hero_motifs.py as the ground stop */ --paper:#eef1f5; --paper-2:#e4e9f0; --parch:#f8f1e2; /* the panels the slot asks for */ --tint:#f5efe1; /* the parchment band between slate sections */ --panel:#fffdf8; /* cards: parchment lifted almost to white */ /* ink */ --ink:#1c232e; --ink-2:#414c5c; --ink-3:#5d6a7c; /* 4.8:1 on --paper. Never on the hero gradient */ --line:#d9e0e8; --line-2:#bcc7d4; /* cold slate, the dark surface */ --slate:#28313d; --slate-d:#1b222c; --slate-ink:#dfe5ee; /* 11.0:1 on --slate. Text on a slate band */ /* accent: the gummies */ --accent:#a5121f; --accent-d:#7c0c17; --accent-l:#fbeaea; --accent-line:#eccbcd; --accent-ink:#fbe7e4; /* 6.5:1 on --accent, 9.2:1 on --accent-d. Do not darken this towards the crimson */ /* gold: the foil rules on the label */ --gold:#b8873f; --gold-d:#7f5a16; /* 5.5:1 on --paper. The small-caps colour */ --gold-l:#f6edd9; --gold-line:#e2cfa6; /* states */ --good:#1f6a4a; --warn:#8a5a10; /* metrics */ --wrap:1180px; --measure:760px; --measure-wide:980px; --radius:2px; --radius-card:4px; --navh:92px; --pack-img:150px; --figw:340px; --shadow:0 1px 2px rgba(20,30,44,.05), 0 10px 26px rgba(20,30,44,.08); --shadow-lg:0 22px 56px rgba(20,30,44,.20); --serif:"Piazzolla",Georgia,"Times New Roman",serif; --sans:"Spline Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } /* ---- base */ *,*::before,*::after{box-sizing:border-box} *{min-width:0} html,body{margin:0;padding:0} html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:108px} body{ overflow-x:clip; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.72; -webkit-font-smoothing:antialiased; } img,svg,video{max-width:100%;height:auto;display:block} table{max-width:100%} a{color:var(--accent-d);text-underline-offset:3px} a:hover{color:var(--accent)} h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:600;line-height:1.22;margin:0 0 .5em} h1{font-size:clamp(2rem,1.28rem + 2.2vw,2.95rem);letter-spacing:-.014em;line-height:1.14} h2{font-size:clamp(1.48rem,1.14rem + 1.25vw,2.1rem);letter-spacing:-.008em} h3{font-size:1.18rem} h4{font-size:1.02rem} p,li{font-size:1.0625rem} p{margin:0 0 1.05em} /* The gutter comes from a WIDTH constraint, not from padding, so no component sharing the element can wipe it with a `padding: 12px 0` shorthand - the defect in pitfall 46, invisible above the container's max-width and invisible to every overflow test. */ .wrap{width:min(var(--wrap),calc(100% - 40px));margin-inline:auto} .skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:12px 18px;z-index:200} .skip:focus{left:8px;top:8px} :focus-visible{outline:3px solid var(--accent);outline-offset:2px} /* The eyebrow names the JOB of the section under it. Every section has one. A gold hairline under it, because the label's own hierarchy is set that way: small caps over a thin foil rule. */ .eyebrow{ display:inline-block;font-size:.875rem;font-weight:700;letter-spacing:.17em; text-transform:uppercase;color:var(--gold-d);margin:0 0 13px; padding-bottom:7px;border-bottom:2px solid var(--gold-line); } /* ---- buttons: crimson blocks with a squared foot, no gradient, no pill */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:52px;padding:14px 26px; font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:.01em; border:2px solid var(--accent);border-radius:var(--radius);cursor:pointer; text-decoration:none;background:var(--accent);color:#fff; transition:background .18s ease,border-color .18s ease,transform .18s ease; } .btn:hover{background:var(--accent-d);border-color:var(--accent-d);color:#fff} .btn:active{transform:translateY(1px)} .btn--cta{box-shadow:0 3px 0 0 var(--accent-d)} .btn--cta:hover{box-shadow:0 3px 0 0 #5e070f} .btn--lg{min-height:60px;padding:16px 34px;font-size:1.06rem} .btn--ghost{background:transparent;color:var(--accent-d);border-color:var(--line-2)} .btn--ghost:hover{background:var(--accent-l);color:var(--accent-d);border-color:var(--accent-line)} .btn--block{width:100%} /* ---- topline strip: the five trust facts, ABOVE the navigation. Role, lot, dose, guarantee, order phone. Five facts a buyer wants before reading anything, on one line, so the navigation does not have to carry any of them (hero.md, "The topline strip carries the trust facts, not the nav"). getexitide shipped without one, pushed the lot into the menu as a chip, crowded the navigation and still left the other four facts off the page. On a phone five items wrap to three lines and eat 103px of an 844px screen, so the lot and the dose drop out under 760px. Role, guarantee and phone stay. */ .util{background:var(--slate-d);color:var(--slate-ink);font-size:.875rem;line-height:1.5} .util__row{display:flex;flex-wrap:wrap;align-items:center;gap:2px 17px;padding-block:8px} .util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap} .util__item+.util__item::before{ content:"";width:5px;height:5px;background:var(--gold); flex:0 0 auto;margin-right:10px;transform:rotate(45deg); } .util b{color:#fff;font-weight:600} .util__tel{margin-left:auto;color:#fff;font-weight:700;white-space:nowrap;text-decoration:none} .util__tel:hover{color:var(--gold-line);text-decoration:underline} /* ---- the masthead: the name inside a tall notched shield at the left edge. The shield is a parchment plate, gold-ruled, that starts at the top of the header row and hangs BELOW it, its foot notched into a shallow V. The menu sits to its right on the cold slate ground. The shield is parchment rather than slate on purpose. brand_marks.py picks the glyph colour by MEASURING the header background, and a crimson teardrop on a dark plate would have been the invisible-logo defect of pitfall 64. On parchment the same mark reads at 6.9:1. */ .nav{position:sticky;top:0;z-index:100;background:var(--paper); border-bottom:1px solid var(--line-2)} .nav__row{display:flex;align-items:stretch;justify-content:space-between;gap:26px; min-height:76px;flex-wrap:nowrap} .brand{ position:relative;z-index:2;flex:none;align-self:stretch; display:flex;align-items:center;gap:11px; padding:13px 22px 27px;margin-bottom:-21px; background:linear-gradient(180deg,var(--panel),var(--parch) 62%,#efe3cc); color:var(--ink);text-decoration:none; clip-path:polygon(0 0,100% 0,100% calc(100% - 21px), calc(50% + 15px) calc(100% - 21px),50% 100%, calc(50% - 15px) calc(100% - 21px),0 calc(100% - 21px)); filter:drop-shadow(0 6px 10px rgba(20,30,44,.13)); } .brand>svg{width:27px;height:27px;flex:0 0 auto} .bw{display:flex;flex-direction:column;line-height:1.1} .bw b{font-family:var(--serif);font-size:1.32rem;font-weight:600;letter-spacing:-.018em} .bw b em{font-style:normal;color:var(--accent)} .bw small{font-size:0.9062rem;font-weight:500;color:var(--ink-3);letter-spacing:.03em} .nav__right{display:flex;align-items:center;gap:22px;min-width:0} .menu{display:flex;flex-wrap:nowrap;gap:21px;list-style:none;margin:0;padding:0} .menu a{display:inline-block;padding:8px 0;font-size:.95rem;font-weight:500; color:var(--ink-2);text-decoration:none;white-space:nowrap; border-bottom:2px solid transparent} .menu a:hover{color:var(--accent-d)} .menu a[aria-current="page"]{color:var(--accent-d);border-bottom-color:var(--accent)} .nav__buy{flex:none;min-height:44px;padding:10px 20px;font-size:.94rem;white-space:nowrap} .burger{display:none;width:46px;height:44px;background:transparent; border:1px solid var(--line-2);border-radius:var(--radius);cursor:pointer;padding:11px 10px} .burger span{display:block;height:2px;background:var(--ink);margin:0 0 5px} .burger span:last-child{margin:0} /* ---- the hero ------------------------------------------------------------ Two columns: the reading matter down the left, the jar standing on a parchment plate in the right rail. The plate's foot is notched exactly like the masthead shield, so the two devices rhyme down the first screen. The H1 is the second thing in the left column, so at 1440x900 its top lands near y=190 and its bottom well above the fold. A centred stack buried one site's headline at y=796 with the CTA at 1651 (pitfall 86/103), which is why this hero is a rail rather than a stack. .hero__grid is genuinely two-column at desktop, so hero_sticky.py applies and the plate travels with the reader until the hero has scrolled past. */ .hero{position:relative;padding:34px 0 54px;border-bottom:1px solid var(--line-2)} .hero__grid{ display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); column-gap:52px;row-gap:0;align-items:start; } /* Placed explicitly rather than auto-flowed. The media column is the third element in the DOM -- the phone order puts the jar straight after the headline -- and auto-placement would drop it into the left column's third row instead of the right rail. The H1 measure is 23ch, not 17ch. At 17ch the headline broke to three lines in a 563px column and pushed the order button to y=916 at 1440x900; at 23ch it sets in two and the whole hero, button included, lands inside the first screen. The H1's own top and bottom were never at risk -- 204 and 404 -- but a CTA one pixel below the fold is a CTA nobody on a 900px screen sees. */ .hero .eyebrow{grid-area:1/1} .hero h1{grid-area:2/1;margin:0 0 4px;max-width:23ch} .hero__media{grid-area:1/2/7/3} .hero__copy{grid-area:3/1} .hero__sub{grid-area:4/1} .hero .factpills{grid-area:5/1} .hero .figures{grid-area:6/1} .h1__key{display:block;color:var(--accent-d);font-size:.4em;letter-spacing:.14em; text-transform:uppercase;font-family:var(--sans);font-weight:700;margin-bottom:.9em} /* the product rail. The plate is narrower than the media column on purpose: the sheen the motif crosses the jar with is sized against .hero__media, and a plate filling it edge to edge would hide the whole movement behind an opaque panel -- the defect SKILL.md rule 7 calls out by name. */ .hero__media{position:relative;width:min(470px,100%);margin:6px auto 0; display:flex;flex-direction:column;align-items:center;justify-content:center; padding-block:8px 30px} /* position:relative is declared here as well as by the motif. The motif writes it through :where(), which carries zero specificity and only exists once that tool has run -- without this line .hero__tag would anchor to the wrong ancestor on a fresh build. */ .hero__card{ position:relative;z-index:2;width:min(352px,82%); /* Tight padding on purpose: the vendor shot already carries its own margin inside the frame, so generous plate padding twice over left the jar small in a large field of cream. The product is what the first screen is for. */ padding:14px 12px 34px; background:linear-gradient(180deg,var(--panel),var(--parch) 58%,#efe3cc); clip-path:polygon(0 0,100% 0,100% calc(100% - 26px), calc(50% + 19px) calc(100% - 26px),50% 100%, calc(50% - 19px) calc(100% - 26px),0 calc(100% - 26px)); /* drop-shadow, not box-shadow: a box shadow is drawn on the unclipped border box and the notch would sit inside a rectangular shadow. */ filter:drop-shadow(0 16px 26px rgba(20,30,44,.22)); } /* The jar: 1024x1024, the front bottle face-on with the label readable. NEVER animated -- it is the LCP element and it is preloaded (hero.md). Two selectors deep on purpose. hero_motifs.py writes `.hero__card img{position:relative;z-index:3}` into the critical block on every run, and that block is inserted AFTER these rules, so a single-class selector here would lose the cascade to it. */ .hero .hero__card img{position:relative;z-index:3;width:100%;height:auto} .hero__tag{ position:relative;z-index:4;margin:18px 0 0;align-self:center; background:var(--slate);color:var(--slate-ink); border-left:3px solid var(--gold); padding:8px 14px;font-size:.9375rem;font-weight:600; box-shadow:var(--shadow); } .hero__tag b{color:#fff} /* the copy column: answer, roadmap line, ticks, seal words, CTA, payment */ .hero__copy{margin:20px 0 0} .answer{ background:var(--panel);border:1px solid var(--gold-line); border-left:4px solid var(--accent); padding:18px 22px;margin:0 0 14px;box-shadow:var(--shadow); } .answer .qtag{ display:inline-block;font-size:.875rem;font-weight:700;letter-spacing:.15em; text-transform:uppercase;color:var(--accent-d);margin-bottom:7px; } .answer p{margin:0;font-size:1.0625rem} .hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 15px} .ticks{list-style:none;margin:0 0 16px;padding:0} .ticks li{position:relative;padding-left:27px;margin:0 0 .55em;font-size:1rem} .ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--good);font-weight:700} .trust__row{display:flex;flex-wrap:wrap;gap:8px 20px;margin-block:0 18px;padding:0;list-style:none; font-size:1rem;font-weight:500;color:var(--ink-2)} .trust__row li{display:inline-flex;align-items:center;gap:8px} .trust__row li::before{content:"";width:9px;height:9px;flex:0 0 auto; background:var(--gold);transform:rotate(45deg)} .hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 15px} /* --ink-2, never --ink-3. The payment line and the trust strip are the only hero text sitting on the bare motif gradient rather than on a card, and --ink-3 measures 3.5:1 against that gradient's #e1c9ce top stop while reading 4.8 on --paper. Measure hero copy against every stop of the gradient, not against the token's usual ground (responsive.md proof 4). */ .pay{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0; font-size:.9375rem;color:var(--ink-2)} .pay img{width:180px;height:31px} /* the three fact blocks at the foot of the hero copy column. Stripped from twenty-six heroes on 17 Sep 2026 by a pass asked to change the CONTENT, and restored the next day (pitfall 76). They stay. */ .hero__sub{ display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0; font-size:1rem;font-weight:500;color:var(--ink-2); } .hero__sub span{display:inline-flex;align-items:center;gap:8px} .hero__sub span::before{content:"";width:7px;height:7px;background:var(--accent); flex:0 0 auto;transform:rotate(45deg)} .factpills{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:15px 0 0;padding:0} .factpills li{font-size:.9375rem;font-weight:500;color:var(--ink-2); background:var(--panel);border:1px solid var(--gold-line);padding:7px 14px} .factpills li b{color:var(--ink);font-weight:700} .figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0 0} .figures div{background:var(--parch);border:1px solid var(--gold-line); border-top:3px solid var(--accent);padding:14px 16px} .figures b{display:block;font-family:var(--serif);font-size:1.5rem;font-weight:600; color:var(--accent-d);line-height:1.12} .figures span{display:block;font-size:0.9062rem;font-weight:500;color:var(--ink-2);margin-top:3px} /* ---- inner page head */ .phead{padding:30px 0 6px;background:var(--paper);border-bottom:1px solid var(--line)} .crumbs{font-size:.9375rem;color:var(--ink-3);margin:0 0 14px} .crumbs a{color:var(--ink-2);text-decoration:none} .crumbs a:hover{color:var(--accent-d)} .lead{font-size:1.14rem;color:var(--ink-2);max-width:var(--measure)} /* ---- hero motif -- sheen-rise ---------------------------------------- */ .hero{position:relative;overflow-x:clip;overflow-y:visible} :where(.hero__media){position:relative} .hero__card{position:relative;z-index:2} .hero__card img{position:relative;z-index:3} .hero{background:linear-gradient(174deg,#e1c9ce,#eef1f5 58%,#eef1f5)}.hero__media::before{content:'';position:absolute;left:-10%;right:-10%;top:-10%;bottom:-10%;z-index:1;pointer-events:none;background:linear-gradient(112deg,transparent 34%,rgba(165,18,31,0.34) 48%,transparent 62%);animation:ggSheen 9s ease-in-out infinite}.hero__media::after{content:'';position:absolute;left:50%;bottom:8%;width:70%;height:26%;translate:-50% 0;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(165,18,31,0.22),transparent 74%);animation:ggRest 9s ease-in-out infinite}@keyframes ggSheen{0%{transform:translateY(18%);opacity:0}45%{opacity:.9}100%{transform:translateY(-16%);opacity:0}}@keyframes ggRest{0%,100%{opacity:.45;transform:scale(.94)}50%{opacity:.85;transform:scale(1.05)}} @media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}} /* --- hero responsive rules, copied into the critical block A phone painted the desktop hero from the inline block and then jumped when the async sheet arrived -- 692px on one site, CLS 0.95. These are COPIES: the originals stay below, so the cascade is unchanged and the first paint is already correct. */ @media (max-width:1060px){ .hero__grid{column-gap:34px} .hero h1{max-width:21ch} } @media (max-width:900px){ /* The stacked hero on a phone, ordered by hand. The copy column is promoted with display:contents so its children become grid items -- and every sibling it exposes gets an explicit order, or an unordered one defaults to 0 and jumps above the eyebrow (hero.md). The jar goes directly after the H1: a buyer arriving from an ad wants the bottle before the 57-word answer, not after it. */ .hero__copy{display:contents} .hero .eyebrow{order:1} .hero h1{order:2;max-width:100%} .hero__media{order:3;margin-top:14px} .hero .answer{order:4} /* The roadmap line moves BELOW the CTA on a phone. hero.md's mobile order is eyebrow, H1, shot, Quick Answer, CTA, sub, ticks, payment -- the roadmap sentence is not in it, and leaving it between the answer and the button put the button at y=1183 against a ~1,100 target on a 390x844 screen. */ .hero__cta{order:5} .hero__road{order:6} .hero__sub{order:8} .hero .ticks{order:9} .hero .trust__row{order:10} .hero .pay{order:11} .hero .factpills{order:12} .hero .figures{order:13} } @media (max-width:760px){ .hero{padding:30px 0 40px} .hero__card{width:min(320px,86%)} } @media (max-width:430px){ .hero__tag{padding:6px 10px} } @media (min-width: 981px){ .hero__media{position: sticky; top: calc(var(--navh, 88px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 88px) - 28px); min-height: calc(100svh - var(--navh, 88px) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center;} } @media (prefers-reduced-motion: reduce){ .hero__media{position: relative; top: 0; min-height: 0;} } /*!CRITICAL-END*/ /* ---- sections: cold slate ground, parchment bands, slate slabs */ .sec{padding:58px 0;position:relative} .sec--tight{padding:34px 0 10px} .sec--tint{background:var(--tint);border-block:1px solid var(--gold-line)} .sec--panel{background:var(--panel);border-block:1px solid var(--line)} .sec--band{background:var(--slate);color:var(--slate-ink);border-block:0} .sec--band h2,.sec--band h3{color:#fff} .sec--band p,.sec--band li{color:var(--slate-ink)} .sec--band .eyebrow{color:var(--gold-line);border-bottom-color:rgba(226,207,166,.4)} .sec--band a{color:#f3ded9} .sec--center{text-align:center} .sec__head{max-width:var(--measure);margin:0 0 26px} .sec__head h2{margin:0 0 10px} .sec__head p,.sec__head .lead{color:var(--ink-2);margin:0} .sec--band .sec__head .lead{color:var(--slate-ink)} .sec--center .sec__head{margin-inline:auto} .sec--center .sec__head .lead{margin-inline:auto} /* One measure, centred. Single-column content gets --measure; multi-column components keep the full wrap. Released below 1060px or a tablet gets a fixed 760px box in a 700px viewport (responsive.md). */ @media (min-width:1060px){ .sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,.sec>.wrap>p, .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout, .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.pullquote, .sec>.wrap>.keypoints,.sec>.wrap>blockquote{max-width:var(--measure);margin-inline:auto} .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{ max-width:var(--measure-wide);margin-inline:auto} } /* ---- tables */ .tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--gold-line); background:var(--panel)} table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem} caption{text-align:left;padding:14px 16px 0;font-size:.9375rem;color:var(--ink-3)} th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top} th{font-family:var(--sans);font-weight:600;color:var(--ink);background:var(--parch);font-size:.95rem} tbody tr:last-child td{border-bottom:0} td b{color:var(--ink)} .dtable{min-width:520px} .note{font-size:.9375rem;color:var(--ink-3)} /* ---- lists that carry content */ .chips{display:flex;flex-wrap:wrap;gap:10px 18px;list-style:none;margin:0 0 1.2em;padding:0} .chips li{display:inline-flex;align-items:flex-start;gap:9px;font-size:1rem;color:var(--ink-2)} .chips .ck{color:var(--good);font-weight:700} /* ---- numbered steps */ .steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s} .step{position:relative;background:var(--panel);border:1px solid var(--line); border-left:3px solid var(--gold);padding:20px 22px 20px 68px} .step__n{position:absolute;left:20px;top:19px;width:34px;height:34px;display:grid; place-items:center;background:var(--accent);color:#fff;font-family:var(--serif); font-weight:600;font-size:1rem} .step__n::before{counter-increment:s;content:counter(s)} .step h3{margin:0 0 6px} .step p:last-child{margin:0} /* ---- cards */ .grid{display:grid;gap:18px} .grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))} .grid>*{min-width:0} .card,.whycard{position:relative;background:var(--panel);border:1px solid var(--line); padding:24px 24px 22px} .card::before,.whycard::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px; background:linear-gradient(90deg,var(--accent) 34%,var(--gold) 34%)} .card h3,.whycard h3{margin:0 0 8px} .card p:last-child,.card ul:last-child,.whycard p:last-child{margin-bottom:0} .whygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .whygrid>*{min-width:0} /* ---- callout, alert, quote, keypoints */ .callout{background:var(--parch);border:1px solid var(--gold-line); border-left:4px solid var(--gold);padding:20px 22px;margin:0 0 1.2em} .callout b:first-child{display:block;margin-bottom:6px;color:var(--gold-d)} .callout p:last-child{margin:0} .alert{background:#fdf5e8;border:1px solid #eedcbb;border-left:4px solid var(--warn); padding:20px 22px;margin:0 0 1.2em} .alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)} .alert p:last-child{margin:0} .pullquote{font-family:var(--serif);font-size:1.3rem;line-height:1.5;color:var(--ink); border-left:4px solid var(--accent);padding:4px 0 4px 22px;margin:0 0 1.2em} .pullquote cite{display:block;font-family:var(--sans);font-size:.9375rem;font-style:normal; color:var(--ink-3);margin-top:8px} .keypoints{background:var(--accent-l);border:1px solid var(--accent-line); border-left:4px solid var(--accent);padding:20px 22px;margin:0 0 1.2em} .keypoints>b{display:block;margin-bottom:8px} .keypoints ul{margin:0;padding-left:20px} .keypoints li{margin:0 0 .5em} .flag{display:inline-block;font-size:.85rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:#fff;background:var(--accent);padding:4px 11px; margin-bottom:9px} .pill{display:inline-block;font-size:.85rem;font-weight:600;color:var(--gold-d); background:var(--gold-l);padding:4px 12px} /* ---- image beside copy */ .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px; align-items:center;margin:0 0 1.2em} .split>*,.split__media{min-width:0} .split--rev .split__media{order:-1} .split__media img{width:100%;border:1px solid var(--gold-line);background:var(--parch)} .split p:last-child{margin:0} /* ---- captioned images. There is no bare image grid in this system: .gallery is retired and every .shots figure carries a heading and 30-45 words. */ .shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0 0 1.2em} .shots--wide{grid-template-columns:repeat(3,minmax(0,1fr))} .shots>*{min-width:0} .shots figure{margin:0;background:var(--panel);border:1px solid var(--gold-line);overflow:hidden} .shots img{width:100%} .shots figcaption{padding:16px 18px;font-size:.9375rem} .shots figcaption b{display:block;margin-bottom:5px;font-size:1.0625rem;color:var(--ink)} .shots figcaption span,.shots figcaption p{color:var(--ink-2)} figure.portrait img{width:var(--figw,340px);margin-inline:auto} /* ---- seal wall. auto-fit rather than a fixed four: at 768 a fixed four gave 169px a card and the captions wrapped to one word a line (responsive.md proof 2). The 240px floor resolves to 4 columns at 1440, 2 at 768 and 1 on a phone with no breakpoint to keep in step. */ .badgewall{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px;margin:0 0 1.2em} .badgewall>*{min-width:0} .badgewall figure{margin:0;text-align:center;background:var(--panel); border:1px solid var(--gold-line);padding:18px 16px} .badgewall img{width:72px;height:72px;object-fit:contain;margin:0 auto 10px} .badgewall b{display:block;font-size:1rem;margin-bottom:4px} .badgewall span{font-size:.9375rem;color:var(--ink-2)} /* ---- the seal strip repeated as a page band */ .trust{background:var(--parch);border-block:1px solid var(--gold-line)} .trust .trust__row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px; padding-block:20px;margin-block:0} .trust figure{margin:0;display:flex;align-items:center;gap:10px;font-size:.9375rem;font-weight:500} .trust figure img{width:56px;height:56px;object-fit:contain} .trust__note{flex:1 1 280px;font-size:.9375rem;color:var(--ink-3);margin:0} /* ---- star distribution */ .meter{margin:0 0 1.2em} .meter__row{display:grid;grid-template-columns:74px 1fr 54px;gap:12px;align-items:center; margin:0 0 8px;font-size:.9375rem} .meter__bar{height:10px;background:var(--line);overflow:hidden} .meter__bar i{display:block;height:100%;background:var(--accent)} .stars{color:var(--gold-d);letter-spacing:1px} .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center} .stats div b{display:block;font-family:var(--serif);font-size:2.1rem;font-weight:600;line-height:1.1} .stats div span{display:block;font-size:.9375rem;margin-top:4px} /* ---- who it is for */ .whofor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0 0 1.2em} .whofor>*{min-width:0} .forlist{background:var(--panel);border:1px solid var(--line); border-top:3px solid var(--good);padding:22px 24px} .forlist--no{border-top-color:var(--accent)} .forlist ul{list-style:none;margin:0;padding:0} .forlist li{position:relative;padding-left:26px;margin:0 0 .6em;font-size:1.062rem} .forlist li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:700} .forlist--no li::before{content:"\2715";color:var(--accent)} /* ---- add-to-cart panel: the shared component on home and pricing */ .buy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px; align-items:stretch;margin:0 0 20px} .buy>*{min-width:0} .buy__card{display:flex;flex-direction:column;background:var(--panel); border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--line-2); overflow:hidden;position:relative} /* Every card gets the 2px border and only the featured one colours it in: box-sizing is border-box, so a border on one card alone steals 2px from its content box and drops its button out of line with the other two (responsive.md proof 3). */ .buy__card--feature{border-color:var(--accent);box-shadow:var(--shadow-lg)} .buy__head{background:var(--parch);border-bottom:1px solid var(--gold-line);padding:14px 18px} .buy__card--feature .buy__head{background:var(--accent);border-bottom-color:var(--accent)} .buy__card--feature .buy__head .buy__name, .buy__card--feature .buy__head .buy__supply{color:#fff} .buy__card--feature .buy__flag{background:#fff;color:var(--accent-d)} /* min-height, because a flag that wraps to two lines in one card pushes that card's image slot 22px below the other two. Measured at 768, where the column is ~229px: the head band is the only part of a pack card whose height depends on its own text, so it is the only part that needs pinning. */ .buy__flag{display:inline-block;font-size:.85rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;background:var(--gold-l);color:var(--gold-d); padding:3px 10px;margin-bottom:7px;min-height:1.9em} .buy__head{min-height:7.4em} .buy__name{font-family:var(--serif);font-size:1.22rem;font-weight:600;margin:0 0 2px} .buy__supply{font-size:.9375rem;font-weight:500;color:var(--ink-3);margin:0; min-height:1.6em} .buy__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px} .buy__img{width:auto;max-width:100%;height:var(--pack-img,150px);object-fit:contain; margin-inline:auto;margin-bottom:14px} .buy__price{font-family:var(--serif);font-size:2.3rem;font-weight:600;line-height:1; text-align:center;margin:0} .buy__cur{font-size:1.1rem;font-weight:600;vertical-align:.6em} .buy__per{display:block;font-family:var(--sans);font-size:0.9062rem;font-weight:600; color:var(--ink-3);margin-top:5px} .buy__total{text-align:center;font-size:1rem;margin:12px 0 14px} .buy__total s{color:var(--ink-3);font-weight:500;margin-left:8px} .buy__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem} .buy__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2)} .buy__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:700} /* The "why this pack" note sits ABOVE the button, and the button is followed only by the payment strip, which is the same height on all three cards. With the note underneath, three different blurb lengths produced three different button tops inside three cards of identical height (responsive.md proof 3). margin-top:auto then pushes every button to one baseline. Reason, then action, is also the better reading order. */ .buy__why{font-size:.9375rem;color:var(--ink-3);margin:12px 0 16px;min-height:4.4em} .buy__add{margin-top:auto} .buy__cart{flex:0 0 auto} /* Two classes deep on purpose: pack_cards.py appends `.card--pack img` (0-1-1) at the foot of this sheet to standardise the PRODUCT slot, and a single-class rule here would lose the cascade to it and stretch the 180x31 payment strip to the 150px product height. */ .buy__card .buy__pay{width:180px;height:31px;margin:12px auto 0} .buy__foot{margin:0} /* ---- FAQ. The padding lives on , the click target: on
the row measures ~30px against the 44px minimum (pitfall 73). */ .faq{border:1px solid var(--gold-line);overflow:hidden;background:var(--panel); margin:0 0 1.2em;text-align:left} .faq details{border-bottom:1px solid var(--line)} .faq details:last-child{border-bottom:0} .faq summary{padding:17px 48px 17px 20px;cursor:pointer;position:relative;list-style:none; font-family:var(--serif);font-weight:600;font-size:1.06rem} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:19px;top:50%;translate:0 -50%; font-family:var(--sans);font-size:1.4rem;font-weight:400;color:var(--accent)} .faq details[open] summary::after{content:"\2212"} .faq__b{padding:0 20px 18px} .faq__b p:last-child,.faq__b ul:last-child{margin-bottom:0} /* ---- the editorial score card */ .facts{background:var(--panel);border:1px solid var(--gold-line);overflow:hidden;margin:0 0 1.2em} .facts__h{background:var(--slate);color:#fff;font-family:var(--serif);font-weight:600; padding:13px 18px} .facttab{min-width:0} .facttab th{background:transparent;font-weight:500;color:var(--ink-2)} /* ---- references and byline */ .refs{margin:0 0 1.2em} .refs ol{padding-left:22px;margin:0} .refs li{font-size:1.062rem;color:var(--ink-2);margin:0 0 .6em} /* A printed URL is one unbreakable token, and at 390px it pushed a single past the viewport on eleven pages of another site -- clipped, unscrollable and invisible to every static check. `anywhere` also lowers the element's min-content, which is what stops an ancestor being sized by the longest URL. */ .refs li,.refs li a{overflow-wrap:anywhere} .byline{display:flex;gap:18px;background:var(--panel);border:1px solid var(--gold-line); border-left:4px solid var(--accent);padding:22px 24px;margin:0 0 1.2em;text-align:left} .byline__mark{flex:0 0 auto;width:52px;height:52px;display:grid;place-items:center; background:var(--slate);color:#fff;font-family:var(--serif);font-weight:600; font-size:1.06rem} .byline b{display:block;margin-bottom:6px} .byline p{font-size:.9375rem;color:var(--ink-2);margin:0} .meta{font-size:.9375rem;color:var(--ink-3)} /* ---- closing CTA */ .final{background:var(--panel);border:1px solid var(--gold-line); border-top:4px solid var(--accent);padding:30px 32px;text-align:left} .final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center} .final__img img{width:300px} .final h2{margin:0 0 10px} .final__price{font-weight:600;color:var(--ink-2)} .final__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0} /* ---- related */ .rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left} .rel>*{min-width:0} .rel a{display:block;background:var(--panel);border:1px solid var(--line); padding:20px 22px;text-decoration:none;color:var(--ink); transition:border-color .18s ease} .rel a:hover{border-color:var(--accent)} .rel b{display:block;font-family:var(--serif);font-size:1.06rem;margin-bottom:5px} .rel span{font-size:.9375rem;color:var(--ink-2)} /* ---- forms. 16px minimum on inputs, or iOS Safari zooms on focus and never zooms back (pitfall 86). */ .form{display:grid;gap:16px;max-width:var(--measure)} .formcard{background:var(--panel);border:1px solid var(--gold-line); padding:24px 26px;margin:0 0 1.2em} .field label{display:block;font-weight:600;font-size:.9688rem;margin-bottom:6px} .field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:16px; padding:13px 14px;border:1px solid var(--line-2);border-radius:var(--radius); background:var(--panel);color:var(--ink)} .field textarea{min-height:140px;resize:vertical} .field small{display:block;font-size:.9375rem;color:var(--ink-3);margin-top:5px} /* ---- blog */ .article{max-width:var(--measure);margin-inline:auto} .postmeta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.9375rem;color:var(--ink-3); border-block:1px solid var(--line);padding-block:12px;margin:0 0 22px} .toc{background:var(--parch);border:1px solid var(--gold-line);padding:20px 24px;margin:0 0 28px} .toc b{display:block;margin-bottom:8px} .toc ol{margin:0;padding-left:20px} .toc li{margin:0 0 5px;font-size:1.062rem} .article h2{scroll-margin-top:118px} .posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .posts>*{min-width:0} .posts article{background:var(--panel);border:1px solid var(--line);overflow:hidden} .posts article img{width:100%} .posts .posts__b{padding:20px 22px} .posts h3{margin:0 0 8px;font-size:1.1rem} .posts p{font-size:1.062rem;color:var(--ink-2);margin:0 0 .6em} .article .final--media{grid-template-columns:1fr;gap:18px} .article .final__img img{width:220px} /* ---- footer: the destinations run down ONE SIDE of a tall guarantee panel. The guarantee panel is a slate slab carrying the sixty days, the seal, the order phone and both addresses -- the four things a reader actually hunts a footer for. The page index runs down the right of it as a single narrow column, grouped by small-caps headings, with a gold hairline between. */ footer{background:var(--paper-2);border-top:1px solid var(--line-2)} .fmain{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0; padding-block:0 30px} .fmain>*{min-width:0} .fguard{background:linear-gradient(180deg,var(--slate),var(--slate-d)); color:var(--slate-ink);padding:32px 34px 34px;margin-top:-1px} .fguard__k{display:block;font-size:.85rem;font-weight:700;letter-spacing:.17em; text-transform:uppercase;color:var(--gold-line);margin-bottom:10px} .fguard h4{font-family:var(--serif);font-size:1.5rem;color:#fff;margin:0 0 12px} .fguard p{font-size:1.0625rem;color:var(--slate-ink);margin:0 0 .9em} .fguard p:last-child{margin-bottom:0} .fguard a{color:#fff;font-weight:600} .fguard__seal{display:flex;align-items:flex-start;gap:16px;margin:0 0 16px} .fguard__seal img{width:84px;height:84px;object-fit:contain;flex:0 0 auto} .fguard__facts{list-style:none;margin:18px 0 0;padding:18px 0 0; border-top:1px solid rgba(226,207,166,.32)} .fguard__facts li{font-size:1.062rem;color:var(--slate-ink);margin:0 0 .5em} .fguard__facts b{display:block;font-size:.85rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--gold-line)} .findex{padding:32px 0 10px 34px;border-left:1px solid var(--gold-line)} .fh{font-size:.85rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase; color:var(--gold-d);margin:0 0 9px;font-family:var(--sans)} .findex ul{list-style:none;margin:0 0 20px;padding:0} .findex li{margin:0} /* inline-block, not block: the box still shrink-wraps to the text so the hover underline stays the width of the words, and the negative margin gives the row its height back, so the footer is unchanged to the pixel (pitfall 82). */ footer li a{display:inline-block;padding-block:5px;margin-block:-5px;font-size:.9688rem; color:var(--ink-2);text-decoration:none} footer li a:hover{color:var(--accent-d)} .fseals{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-block:20px; border-top:1px solid var(--line-2)} .fseals img{width:44px;height:44px;object-fit:contain} .fseals span{flex:1 1 260px;font-size:.9375rem;color:var(--ink-3)} .fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-bottom:26px} .fpay img{width:180px;height:31px} .fpay span{font-size:.9375rem;color:var(--ink-3)} .disc{background:var(--tint);border-top:1px solid var(--gold-line);padding-block:30px 34px} .disc p,.disc li{font-size:.9375rem;color:var(--ink-2)} .disc b{color:var(--ink)} .copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--gold-line); font-size:.9375rem;color:var(--ink-3)} .legal p,.legal li{font-size:1.0625rem} /* ---- sticky buy bar */ .buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--slate-d); color:#fff;transform:translateY(105%);transition:transform .25s ease} .buybar.show{transform:none} .buybar__in{display:flex;align-items:center;gap:18px;width:min(var(--wrap),calc(100% - 40px)); margin-inline:auto;padding-block:12px} .buybar__t{font-size:.9375rem;min-width:0} .buybar__t b{display:block;font-size:1rem} .buybar__t span{color:var(--slate-ink)} .buybar .btn{margin-left:auto;flex:0 0 auto;background:var(--accent);color:#fff; border-color:var(--accent);box-shadow:none} .buybar .btn:hover{background:#c2202d;border-color:#c2202d;color:#fff} /* ---- reveal */ [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease} [data-reveal].in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ [data-reveal]{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} } /* ---- responsive. The nav row SHEDS rather than wraps: menu gaps tighten, then the CTA goes, then the menu collapses to the burger. A wrapped header row measures 100px+ instead of ~76px and looks broken (design-system.md). */ @media (max-width:1180px){ .menu{gap:16px} .menu a{font-size:.9rem} .findex{padding-left:26px} .fguard{padding-inline:26px} } @media (max-width:1120px){ /* The topline sheds before it wraps, exactly as the nav row does. Five items need about 1,150px; at 1,024 they wrapped to two lines and the strip went from 37px to 60px. The dose goes first -- it is on how-to-use.html and in the hero's own fact pills -- and the lot follows at phone width. */ .util__item--trim2{display:none} } @media (max-width:1060px){ .menu{gap:12px} .menu a{font-size:.875rem} .hero__grid{column-gap:34px} .hero h1{max-width:21ch} } @media (max-width:980px){ .nav__buy{display:none} .hero__grid{grid-template-columns:1fr} } @media (max-width:900px){ :root{--navh:76px} .burger{display:block} .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column; gap:0;background:var(--panel);border-block:1px solid var(--line); padding:6px 20px 14px;box-shadow:var(--shadow-lg)} .menu.open{display:flex} .menu a{padding:12px 0;border-bottom:1px solid var(--line)} .menu a[aria-current="page"]{border-bottom-color:var(--line)} .nav{position:sticky} .nav__right{gap:12px} /* The stacked hero on a phone, ordered by hand. The copy column is promoted with display:contents so its children become grid items -- and every sibling it exposes gets an explicit order, or an unordered one defaults to 0 and jumps above the eyebrow (hero.md). The jar goes directly after the H1: a buyer arriving from an ad wants the bottle before the 57-word answer, not after it. */ .hero__copy{display:contents} /* display:contents promotes the copy column's children into .hero__grid AND THEY BRING THEIR grid-area NAMES WITH THEM. The explicit row/column numbers above belong to a template that no longer applies here, so every hero child is reset to auto placement before the orders are read. */ .hero .eyebrow,.hero h1,.hero__media,.hero__copy,.hero__sub, .hero .factpills,.hero .figures,.hero .hero__copy>*{grid-area:auto} .hero .eyebrow{order:1} .hero h1{order:2;max-width:100%} .hero__media{order:3;margin-top:14px} .hero .answer{order:4} /* The roadmap line moves BELOW the CTA on a phone. hero.md's mobile order is eyebrow, H1, shot, Quick Answer, CTA, sub, ticks, payment -- the roadmap sentence is not in it, and leaving it between the answer and the button put the button at y=1183 against a ~1,100 target on a 390x844 screen. */ .hero__cta{order:5} .hero__road{order:6} .hero__sub{order:8} .hero .ticks{order:9} .hero .trust__row{order:10} .hero .pay{order:11} .hero .factpills{order:12} .hero .figures{order:13} .whygrid,.grid.g3,.grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))} .stats{grid-template-columns:repeat(2,minmax(0,1fr))} .fmain{grid-template-columns:1fr} .findex{padding:26px 0 10px;border-left:0;border-top:1px solid var(--gold-line)} .final--media{grid-template-columns:1fr;gap:20px} .final__img img{width:240px} } @media (max-width:760px){ /* Five topline items wrap to three lines and eat 103px of an 844px screen. Keep the role, the guarantee and the order phone; the lot and the dose are on the pages that need them (hero.md). */ .util__item--trim{display:none} .util__row{gap:2px 14px} .util__tel{margin-left:0} .sec{padding:44px 0} .hero{padding:30px 0 40px} .hero__card{width:min(320px,86%)} .figures{grid-template-columns:1fr;gap:10px} .grid.g2,.grid.g3,.grid.g4,.whygrid{grid-template-columns:1fr} .buy{grid-template-columns:1fr;max-width:430px;margin-inline:auto} /* Stacked, the ladder must not lead with the smallest pack. DOM order stays 2, 3, 6; the best-value card comes first on a phone (design-system.md). */ .buy__card:nth-child(1){order:3} .buy__card:nth-child(2){order:1} .buy__card:nth-child(3){order:2} .buy__why{min-height:0} .shots,.shots--wide{grid-template-columns:1fr} .rel,.posts{grid-template-columns:1fr} .split,.whofor{grid-template-columns:1fr} .split--rev .split__media{order:0} .meter__row{grid-template-columns:62px 1fr 48px} .fguard{padding:26px 20px 28px} .fguard__seal img{width:64px;height:64px} .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px} .buybar .btn{width:100%;margin-left:0} .final{padding:24px 22px} } @media (max-width:430px){ .stats{grid-template-columns:1fr} .hero__tag{padding:6px 10px} .brand{padding-inline:16px} .bw b{font-size:1.2rem} } /* ---- hero: the plate breathes ------------------------------------------- The float goes on .hero__card, never on the . The image is the LCP element and it is preloaded; an animation on it moves the LCP time (hero.md). Transform only -- an element starting at opacity:0 is not recorded as painted at all. hero_motifs.py owns the movement AROUND the jar (the sheen crossing it from below). This is the one thing it does not own: the plate itself lifting and settling, slow enough to read as light shifting rather than as a bounce. */ @media (prefers-reduced-motion:no-preference){ .hero__card{animation:ggLift 9s ease-in-out infinite} @keyframes ggLift{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} } /* ---- hero: sticky, centred product column ------------------------------ The product column holds its place, vertically centred, until the hero has fully scrolled past. --navh is measured and published by site.js: nav heights run 66-99px across the estate and change when a bar compacts, and a hardcoded offset tucks the product under the bar on the taller ones. min-height makes the sticky box a full screen tall so the shot can be CENTRED inside it. Without it the box is only as tall as the image and `top` merely pins it under the header, which is what the old house rule did. Requires .hero NOT to clip on the block axis -- any non-visible overflow on an ancestor becomes the scrollport sticky resolves against. See pitfall 65, whose first fix got this wrong. */ @media (min-width: 981px) { .hero__grid { align-items: start; } .hero__media { position: sticky; top: calc(var(--navh, 88px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 88px) - 28px); min-height: calc(100svh - var(--navh, 88px) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center; } } /* Cancelling the sticky column must NOT cancel the containing block. Every hero motif sizes its .hero__media pseudo-elements in PERCENT, so they resolve against the nearest positioned ancestor; `static` re-parents them to a box several times wider -- measured at 1800px against a 523px column -- and the ring lands across the headline. Worse, the same query stops it animating, so it SITS there: ask for less motion, get the one broken hero. `relative` lays out identically to `static` and keeps the containing block. `top:0` is not decoration: the rule above sets a top offset of one nav height plus 14px, which a relative box would apply for real and push the plate ~110px down the page (pitfall 65). Written WITHOUT naming that custom property in the usual var() form on purpose -- preflight's undefined-variable check reads comments too, so a property named here is a property it believes the sheet uses. Measured on 7 sites before and after (pitfall 107). */ @media (prefers-reduced-motion: reduce) { .hero__media { position: relative; top: 0; min-height: 0; } } /* brand mark: bare construction */ .brand svg.brand__glyph{background:none!important} /* --- pack cards read as one repeated object ---------------------------- A pricing row is three cards that have to share their edges, their image slot and their button baseline. The vendor product shots are different shapes (one site shipped 200x243, 200x105 and 200x65 side by side) and the blurbs are different lengths, so without these three rules the images render at three sizes and the three CTAs sit at three heights. The height lives here and not on the attributes on purpose: those must keep stating each file's true ratio, or fix_img_dims.py rewrites them and CLS gets worse. Override per site with --pack-img. */ .card--pack{display:flex;flex-direction:column} .card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px); object-fit:contain;margin-inline:auto;margin-bottom:14px} .card--pack>.btn{margin-top:auto} /* ==== fix_layout_breaks.py ==== */ /* A figure alone on its row, and components whose own background fights the band they sit in. Appended: each rule below is correct in isolation and only their combination fails, so the originals stay as written. */ .sec--band .lead{color:#dfe5ee} .sec--band .note{color:#dfe5ee} .sec--band .tablewrap,.sec--band .tablewrap p,.sec--band .tablewrap li,.sec--band .tablewrap td,.sec--band .tablewrap th,.sec--band .tablewrap caption{color:var(--ink)} /* ==== end fix_layout_breaks.py ==== */ /* ==== directional chrome (fix_chrome_scroll.py) ==== */ .nav,#nav{transition:transform .28s ease} @media(prefers-reduced-motion:reduce){.nav,#nav{transition:none}} .nav--away{transform:translateY(-100%)} html.chrome-up .buybar{transform:translateY(105%)} /* ==== end directional chrome ==== */ /* ==== footer type floor (footer_type.py) ==== */ /* The footer carried the smallest text on the page -- the legal pages, the guarantee and the contact routes, set as fine print. Running text and links sit at 16px, column headings at 15px (uppercase and letter-spaced, so they read larger than the number). Last in the file on purpose: it outranks the phone breakpoints that shrank them. */ footer li a{font-size:16px} footer .copy{font-size:16px} footer .disc li{font-size:16px} footer .disc p{font-size:16px} footer .fguard__facts b{font-size:16px} footer .fguard__k{font-size:16px} footer .fh{font-size:15px} footer .fpay span{font-size:16px} footer .fseals span{font-size:16px} /* ==== end footer type floor ==== */