/* ==== font fallback metrics (fix_font_shift.py) ==== */ @font-face{font-family:"Hepta Slab Fallback";src:local("Georgia");font-weight:400;size-adjust:125.26%;ascent-override:78.87%;descent-override:21.00%;line-gap-override:0.00%} @font-face{font-family:"Hepta Slab Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:111.50%;ascent-override:88.61%;descent-override:23.59%;line-gap-override:0.00%} @font-face{font-family:"Sarala Fallback";src:local("Arial");font-weight:400;size-adjust:103.16%;ascent-override:113.50%;descent-override:44.54%;line-gap-override:0.00%} @font-face{font-family:"Sarala Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:100.11%;ascent-override:116.96%;descent-override:45.90%;line-gap-override:0.00%} /* ==== end font fallback metrics ==== */ /* sodeaslim.com - SodaSlim, the U.S. desk for SodaSlim. Design slot row 284 in batch11_assignments.py. All six levers, as assigned: Type Hepta Slab / Sarala. A slab serif with square terminals over a humanist sans with a tall x-height. No site on this estate sets its headings in a slab, and none pairs these two. Layout an ASYMMETRIC hero whose product column has no right gutter and runs off the page edge, and sections that STAGGER: odd measures sit flush left, even ones flush right. Cards pill-shaped. 28px radius, a tinted fill, no border at all. Ground pale periwinkle, flat. No gradient bands anywhere on the page. Depth no box-shadow on any component. Every panel carries a 3px offset DUPLICATE OUTLINE instead, drawn behind its own fill. Motion soda-fizz, written into hero_motifs.py for this domain. Colour is taken from the bottle: an amber sunburst on a navy band. The periwinkle page is the one thing NOT on the label, and it is there so the amber reads as the warm object in a cool room. Two mechanical notes, both of which have cost real time on this estate. No comment in this file may contain a brace: validate.py reads the token list as everything before the first closing brace, and preflight's top-level scan counts braces without stripping comments first. And every rule above CRITICAL-END is inlined into every page head, so editing this file alone changes nothing on pages where the inline copy wins. */ /* ---- tokens */ :root{ --ground:#edeefb; /* the lightest periwinkle; the motif builds from it */ --paper:#e5e7f7; /* the page */ --tint:#dcdff2; /* the alternate band */ --card:#f4f4fd; /* the tinted card fill */ --white:#ffffff; --ink:#1a1b30; --ink-2:#414565; --ink-3:#575c7f; --navy:#1c3c6b; /* the label band, and every heading */ --deep:#132a4c; /* the dark strip */ --amber:#c56a08; /* the label sunburst */ --amber-d:#a85905; --amber-ink:#8a4a05; /* amber that clears 4.5:1 as small text */ --line:#c8cbe7; --line-2:#adb2d6; --dup:#bcc1e4; /* the offset duplicate outline */ --dup-d:#7f88bb; --good:#166f45; --warn:#8a5410; --wrap:1180px; --measure:740px; --measure-wide:960px; --navh:112px; --display:"Hepta Slab","Hepta Slab Fallback",Rockwell,Georgia,serif; --text:"Sarala","Sarala Fallback",system-ui,-apple-system,"Segoe UI",sans-serif; } /* ---- base */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} html{overflow-x:clip;-webkit-text-size-adjust:100%} body{ overflow-x:clip;background:var(--paper);color:var(--ink); font-family:var(--text);font-size:17px;line-height:1.74;font-weight:400; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} a{color:var(--navy);text-underline-offset:3px} a:hover{color:var(--amber-ink)} h1,h2,h3,h4{font-family:var(--display);color:var(--navy);font-weight:800;line-height:1.16;margin:0 0 .5em} h1{font-size:clamp(2rem,1.28rem + 2.25vw,3.1rem);letter-spacing:-.018em} h2{font-size:clamp(1.5rem,1.16rem + 1.28vw,2.16rem);letter-spacing:-.014em} h3{font-size:1.22rem;font-weight:600} h4{font-size:1.05rem;font-weight:600} p,li{font-size:1.0625rem} p{margin:0 0 1.05em} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px} .skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:200} .skip:focus{left:8px;top:8px} :focus-visible{outline:3px solid var(--amber-d);outline-offset:2px} /* the eyebrow names the JOB of the section beneath it */ .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-family:var(--text);font-size:0.9375rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--amber-ink); margin:0 0 12px; } .eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--amber-d)} /* ---- buttons: fully rounded, to rhyme with the pill cards */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:54px;padding:15px 32px; font-family:var(--text);font-size:1rem;font-weight:700;letter-spacing:.01em; border:0;border-radius:999px;cursor:pointer;text-decoration:none; background:var(--amber-d);color:#fff; transition:filter .18s ease,transform .18s ease; } .btn:hover{filter:brightness(1.1);color:#fff} .btn:active{transform:translateY(1px)} .btn--lg{min-height:62px;padding:17px 38px;font-size:1.06rem} .btn--ghost{background:none;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)} .btn--ghost:hover{background:var(--navy);color:#fff} .btn--wide{width:100%} /* ---- topline: the dark strip above the bar */ .util{background:var(--deep);color:#b9c6dd;font-size:.875rem;line-height:1.5} .util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:9px} .util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap} .util__item--lead{color:#f3e1c4;font-weight:700} .util__item+.util__item::before{content:"";width:5px;height:5px;border-radius:50%; background:#3f5d88;flex:0 0 auto;margin-right:11px} .util b{color:#f3e1c4;font-weight:700} .util a{color:inherit;text-decoration:none} .util a:hover{text-decoration:underline} /* ---- header: DESTINATIONS LEFT, IDENTITY RIGHT ------------------------- The reverse of the estate default and this slot's header lever. The markup order is destinations, order button, identity, so the tab order and a screen reader meet them in reading order; the flex row does the rest and nothing is hidden to achieve it. */ .nav{position:sticky;top:0;z-index:100;background:var(--ground);border-bottom:1px solid var(--line)} /* padding-BLOCK, never the shorthand: this element also carries .wrap, and a padding shorthand here would wipe the page gutter - pitfall 46. */ .nav__top{display:flex;align-items:center;gap:18px;padding-block:13px} .nav__dest{min-width:0;flex:1 1 auto} .menu{ display:flex;flex-wrap:wrap;gap:2px 22px;list-style:none;margin:0;padding:0; align-items:center; } .menu a{ display:inline-block;padding:7px 0;font-family:var(--text); font-size:.9375rem;font-weight:700;color:var(--ink-2);text-decoration:none; border-bottom:2px solid transparent; } .menu a:hover{color:var(--navy)} .menu a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--amber-d)} .menu__more{display:none} .nav__rail{display:flex;align-items:center;gap:14px;margin-left:auto;flex:0 0 auto} .nav__buy{min-height:44px;padding:10px 22px;font-size:.9375rem} .brand{ display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--navy); background:var(--card);border-radius:999px;padding:7px 18px 7px 12px; } .brand__glyph{width:32px;height:32px;flex:0 0 auto} /* Size the mark by ELEMENT as well as by class: brand_marks.py replaces the svg and does not carry the class onto the replacement, so a class-only rule stops applying the moment the tool runs - pitfall 16. */ .brand>svg{width:32px;height:32px;flex:0 0 auto} .bw{display:flex;flex-direction:column;line-height:1.12} .bw b{font-family:var(--display);font-size:1.28rem;font-weight:800;letter-spacing:-.02em} .bw b em{font-style:normal;color:var(--amber-d)} .bw small{font-size:0.8125rem;font-weight:400;color:var(--ink-3)} .burger{ display:none;width:48px;height:46px;background:var(--card);border:0; border-radius:999px;cursor:pointer;padding:12px 11px; } .burger span{display:block;height:2px;border-radius:2px;background:var(--navy);margin:0 0 5px} .burger span:last-child{margin:0} /* ---- hero: ASYMMETRIC, PRODUCT BLED TO THE RIGHT EDGE ------------------- .hero__grid also carries .wrap and deliberately overrides it: the left gutter is rebuilt from a percentage of the hero so the copy still lines up with every other section, and the right gutter is removed entirely so the media column ends at the page edge. The bleed is computed from 100% of the hero, never from 100vw. A viewport unit includes the scrollbar, so a vw-based bleed pushes the column one scrollbar width past the document and every per-element overflow test in responsive.md reports it. .hero__card carries NO background. An opaque card filling this column sits above the motif's pseudo-elements and hides them completely, which is the failure house rule 7 warns about: the hero then passes every check and shows no motion at all. This pack's hero shot is a true cut-out, so the fizz reads through it as well as around it. */ .hero{position:relative;background:var(--ground);padding:26px 0 54px;overflow-x:clip} .hero__grid{ position:relative;z-index:1; display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(22px,3vw,52px);align-items:start; max-width:none;margin-inline:0; padding-left:max(22px,calc((100% - var(--wrap)) / 2 + 22px)); padding-right:0; } .hero__copy{min-width:0} .hero h1{margin:0 0 18px;max-width:20ch} .hero h1 em{font-style:normal;color:var(--amber-ink)} .answer{ background:var(--card);border-radius:28px;padding:22px 26px;margin:0 0 18px; max-width:var(--measure-wide);position:relative;isolation:isolate; } .answer p{margin:0 0 .75em;font-size:1.0625rem} .answer p:last-child{margin:0} .hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 20px;max-width:58ch} .hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 16px} .hero__sub{display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 20px;font-size:1rem;font-weight:700;color:var(--ink-2)} .hero__sub span{display:inline-flex;align-items:center;gap:7px} .hero__sub span::before{content:"\2713";color:var(--good);font-weight:700} .hero__media{position:relative;min-width:0;margin:4px 0 0} .hero__card{position:relative;z-index:2;background:none;padding:0} .hero__card img{position:relative;z-index:3;width:100%;height:auto;margin:0} .hero__cap{position:relative;z-index:3;margin:2px 0 0;padding:0 0 0 4px;font-size:.9375rem;color:var(--ink-3)} .factpills{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:0 0 18px;padding:0} .factpills li{ font-size:0.9375rem;color:var(--ink-2);background:var(--card); border-radius:999px;padding:7px 16px; } .factpills li b{color:var(--navy);font-weight:700} .figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0} .figures div{padding:14px 18px;background:var(--card);border-radius:22px} .figures b{display:block;font-family:var(--display);font-size:1.7rem;font-weight:800;color:var(--navy);line-height:1.1} .figures span{display:block;font-size:0.9375rem;color:var(--ink-3);margin-top:4px} .trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:1rem;color:var(--ink-2)} .trust__row li{display:inline-flex;align-items:center;gap:8px} .trust__row li::before{content:"\2713";color:var(--good);font-weight:700} /* ---- inner page head */ .phead{padding:34px 0 18px;background:var(--ground);border-bottom:1px solid var(--line)} .crumbs{font-size:0.9375rem;color:var(--ink-3);margin:0 0 14px} .crumbs a{color:var(--ink-2);text-decoration:none} .crumbs a:hover{color:var(--amber-ink)} .phead h1{margin:0 0 16px;max-width:var(--measure-wide)} .phead .answer{max-width:var(--measure-wide)} .lead{font-size:1.14rem;color:var(--ink-2);max-width:var(--measure)} /* --- hero responsive rules, copied into the critical block. A phone paints the desktop hero from the inline block and then relays when the async sheet arrives - 692px of reflow on the worst site here. These are COPIES: the originals stay below, so the cascade is unchanged and the first paint is already right. */ @media (max-width:980px){ .hero__grid{grid-template-columns:minmax(0,1fr);gap:24px;padding-right:22px} .hero__media{order:3;margin:4px 0 6px} .hero__card img{max-width:420px;margin-inline:auto} .hero__cap{text-align:center;padding-left:0} .hero h1{max-width:none} } @media (max-width:760px){ .hero{padding:18px 0 38px} .figures{grid-template-columns:1fr;gap:10px} } /* ---- hero motif -- soda-fizz ---------------------------------------- */ .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:radial-gradient(128% 88% at 78% 6%,#e0c4ad 0%,#e6d6cf 44%,#edeefb 100%)}.hero__copy{position:relative;z-index:4}.hero__media::before{content:'';position:absolute;left:50%;top:5%;width:126%;aspect-ratio:1/1.02;translate:-50% 0;z-index:1;pointer-events:none;background-repeat:no-repeat;background-image:radial-gradient(circle at 21% 71%,transparent 0 7px,rgba(197,106,8,0.90) 7px 9.5px,transparent 10px),radial-gradient(circle at 63% 31%,transparent 0 11px,rgba(197,106,8,0.78) 11px 14px,transparent 15px),radial-gradient(circle at 84% 61%,transparent 0 5px,rgba(197,106,8,0.94) 5px 7.5px,transparent 8px),radial-gradient(circle at 38% 15%,transparent 0 8px,rgba(197,106,8,0.82) 8px 11px,transparent 12px),radial-gradient(circle at 71% 86%,transparent 0 7px,rgba(197,106,8,0.86) 7px 9.5px,transparent 10px);-webkit-mask-image:radial-gradient(70% 78% at 50% 62%,#000 30%,rgba(0,0,0,.34) 68%,transparent 92%);mask-image:radial-gradient(70% 78% at 50% 62%,#000 30%,rgba(0,0,0,.34) 68%,transparent 92%);transform-origin:50% 62%;animation:ssFizz 6.4s cubic-bezier(.22,.68,.3,1) infinite}.hero__media::after{content:'';position:absolute;left:50%;top:1%;width:150%;aspect-ratio:1/.34;translate:-50% 0;z-index:0;pointer-events:none;border-radius:50%;background:radial-gradient(58% 120% at 50% 100%,rgba(19,42,76,0.34) 0%,transparent 74%);filter:blur(15px);transform-origin:50% 100%;animation:ssCrown 11s ease-in-out infinite}@keyframes ssFizz{0%{transform:scale(.64);opacity:0}20%{opacity:1}58%{transform:scale(1.08);opacity:.62}100%{transform:scale(1.26);opacity:0}}@keyframes ssCrown{0%,100%{transform:scaleX(.88) scaleY(.70);opacity:.20}44%{transform:scaleX(1.06) scaleY(1.08);opacity:.60}74%{transform:scaleX(.98) scaleY(.90);opacity:.36}}@media(max-width:980px){.hero__media::before{width:112%}.hero__media::after{width:128%;filter:blur(12px)}} @media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}} /*!CRITICAL-END*/ /* ---- the offset duplicate outline --------------------------------------- This slot has NO shadow anywhere. Separation comes from a second outline of the same shape, offset three pixels down and to the right, drawn BEHIND the panel's own fill. Both layers are negative-z pseudo-elements and the panel isolates itself, which is the part that has to be right: without `isolation`, a negative-z child is painted into the nearest ancestor stacking context and lands underneath the SECTION background rather than under the card, so the duplicate disappears on every tinted band. */ .card,.callout,.alert,.keypoints,.answer,.toc,.faq,.byline,.final,.rel a, .posts article,.shots figure,.badgewall figure,.fcare,.ingcard,.versus, .card--pack,.form-note{ position:relative;isolation:isolate;background:none;border-radius:28px; } .card::before,.callout::before,.alert::before,.keypoints::before,.answer::before, .toc::before,.faq::before,.byline::before,.final::before,.rel a::before, .posts article::before,.shots figure::before,.badgewall figure::before, .fcare::before,.ingcard::before,.versus::before,.card--pack::before, .form-note::before{ content:"";position:absolute;inset:0;border-radius:inherit; background:var(--card);z-index:-1; } .card::after,.callout::after,.alert::after,.keypoints::after,.answer::after, .toc::after,.faq::after,.byline::after,.final::after,.rel a::after, .posts article::after,.shots figure::after,.badgewall figure::after, .fcare::after,.ingcard::after,.versus::after,.card--pack::after, .form-note::after{ content:"";position:absolute;inset:0;border-radius:inherit; border:1.5px solid var(--dup);translate:3px 3px;z-index:-2;pointer-events:none; } /* ---- sections, staggered in pairs --------------------------------------- */ .sec{padding:58px 0;position:relative} .sec--tint{background:var(--tint)} .sec--panel{background:var(--white)} .sec--dark{background:var(--deep);color:#d4e0f1;--card:#1d3557;--dup:#35578b} .sec--dark h2,.sec--dark h3{color:#fff} .sec--dark p,.sec--dark li{color:#c2d2e7} .sec--dark .eyebrow{color:#f2c98d} .sec--dark .eyebrow::before{background:var(--amber)} .sec--dark a{color:#ffdbaa} .sec--center{text-align:center} .sec--center .sec__head{margin-inline:auto} .sec--center .eyebrow{justify-content:center} .sec--rule{border-top:3px solid var(--navy)} .sec__head{max-width:var(--measure);margin:0 0 28px} .sec__head h2{margin:0 0 10px} .sec__head p{color:var(--ink-2);margin:0} .sec--dark .sec__head p{color:#c2d2e7} /* The stagger. Single-column content gets a measure, as responsive.md requires, but the measures ALTERNATE their edge: odd sections sit flush against the left gutter, even sections against the right. Multi-column components keep the full wrap at every width. */ @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:0 auto} .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{ max-width:var(--measure-wide);margin-inline:0 auto} main>.sec:nth-of-type(even)>.wrap>h2,main>.sec:nth-of-type(even)>.wrap>h3, main>.sec:nth-of-type(even)>.wrap>h4,main>.sec:nth-of-type(even)>.wrap>p, main>.sec:nth-of-type(even)>.wrap>ul,main>.sec:nth-of-type(even)>.wrap>ol, main>.sec:nth-of-type(even)>.wrap>.sec__head, main>.sec:nth-of-type(even)>.wrap>.callout, main>.sec:nth-of-type(even)>.wrap>.alert, main>.sec:nth-of-type(even)>.wrap>.byline, main>.sec:nth-of-type(even)>.wrap>.refs, main>.sec:nth-of-type(even)>.wrap>.pullquote, main>.sec:nth-of-type(even)>.wrap>.keypoints, main>.sec:nth-of-type(even)>.wrap>blockquote, main>.sec:nth-of-type(even)>.wrap>.tablewrap, main>.sec:nth-of-type(even)>.wrap>.faq, main>.sec:nth-of-type(even)>.wrap>.steps{margin-inline:auto 0} main>.sec:nth-of-type(even)>.wrap>.sec__head{text-align:right} main>.sec:nth-of-type(even)>.wrap>.sec__head .eyebrow{flex-direction:row-reverse} .sec--center>.wrap>.sec__head{margin-inline:auto;text-align:center} } /* ---- lists */ .ticks{list-style:none;margin:0 0 1.1em;padding:0} .ticks li{position:relative;padding-left:28px;margin:0 0 .5em} .ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--good);font-weight:700} .sec--dark .ticks li::before{color:#7dd6a6} /* ---- tables: a rounded well, hairline rules inside */ .tablewrap{overflow-x:auto;margin:0 0 1.2em;background:var(--card); border-radius:24px;padding:4px} table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem} th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top} th{font-family:var(--text);font-weight:700;color:var(--navy);font-size:.9375rem; letter-spacing:.05em;text-transform:uppercase} tbody tr:last-child td{border-bottom:0} td b{color:var(--navy);font-weight:700} .tnote{font-size:.9375rem;color:var(--ink-3);margin:-.4em 0 1.2em} .sec--dark th,.sec--dark td{border-color:#2d4a74} .sec--dark th{color:#fff} /* ---- numbered steps: pill rows with the number in a disc */ .steps{display:grid;gap:12px;margin:0 0 1.2em;counter-reset:s} .step{position:relative;isolation:isolate;background:none;border-radius:28px; padding:22px 26px 20px 74px} .step::before{ content:"";position:absolute;inset:0;border-radius:inherit; background:var(--card);z-index:-1; } .step::after{ counter-increment:s;content:counter(s); position:absolute;left:22px;top:22px;width:36px;height:36px; display:grid;place-items:center;border-radius:50%; background:var(--navy);color:#fff; font-family:var(--display);font-weight:800;font-size:1.02rem; } .step h3{margin:0 0 6px} .step p:last-child{margin:0} /* ---- cards: PILLS. 28px radius, tinted fill, no border ------------------ */ .grid{display:grid;gap:16px} .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))} .card{padding:26px 28px 24px} .card h3{margin:0 0 8px} .card p:last-child,.card ul:last-child{margin-bottom:0} /* ---- callout, alert, quote, keypoints */ .callout{padding:22px 26px;margin:0 0 1.2em} .callout b:first-child{display:block;margin-bottom:6px;color:var(--navy)} .callout p:last-child{margin:0} .alert{padding:22px 26px;margin:0 0 1.2em;--card:#fbf1df;--dup:#d9b77c} .alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)} .alert p:last-child{margin:0} .pullquote{font-family:var(--display);font-size:1.3rem;font-weight:600;line-height:1.48;color:var(--navy);border-left:4px solid var(--amber-d);padding:6px 0 6px 24px;margin:0 0 1.2em} .pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;font-weight:400;color:var(--ink-3);margin-top:8px} .keypoints{padding:22px 26px;margin:0 0 1.2em} .keypoints>b{display:block;margin-bottom:8px;color:var(--navy)} .keypoints ul{margin:0;padding-left:20px} /* ---- 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--flip .split__img{order:2} /* A grid item's default min-width is auto, which floors at min-content, so a .tablewrap holding a 520px-min table keeps its column 520px wide however narrow the grid gets. min-width:0 belongs on the items at every width. */ .split__img,.split__body{min-width:0} .split__img img{width:100%;border-radius:28px;background:var(--card)} .split__body p:last-child{margin:0} /* ---- stat band */ .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} .stats div{padding:18px 22px;border-radius:26px;background:#1d3557} .stats div b{display:block;font-family:var(--display);font-size:2.2rem;font-weight:800;color:#fff;line-height:1.1} .stats div span{display:block;font-size:.9375rem;color:#a8c0dc;margin-top:6px} /* ---- the clock: plant, timescale, amount */ .versus{display:grid;grid-template-columns:1fr 1fr 1.5fr;margin:0 0 1.2em; padding:6px;overflow:hidden} .versus>div{padding:13px 16px;border-bottom:1px solid var(--line);font-size:.98rem} .versus>div:nth-child(3n+1){font-weight:700;color:var(--navy)} .versus>div:nth-last-child(-n+3){border-bottom:0} .versus__h{color:var(--navy);font-family:var(--text); font-weight:700;font-size:.9375rem;letter-spacing:.05em;text-transform:uppercase} /* ---- ingredient panels */ .inglist{display:grid;gap:16px} /* Same family as the .split fix: .ingcard is a grid item and .ing__dose is nowrap, so min-content would set the column floor. */ .inglist>*{min-width:0} .ingcard{padding:26px 28px 24px} .ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 12px} .ingcard__top h3{margin:0} .ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)} .ing__dose{margin-left:auto;font-size:.9375rem;font-weight:700;color:#fff;background:var(--navy);border-radius:999px;padding:4px 14px;white-space:nowrap} .ingcard p:last-child{margin:0} /* ---- add-to-cart panel: three pills, one shared baseline */ .prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; align-items:stretch;margin:0 0 20px} .card--pack{display:flex;flex-direction:column;padding:0;overflow:hidden} /* No lift and no margin on the flagged card: a pricing row has to share one height and one button baseline, and a raised card breaks both. The accent head band and the flag are what mark it. */ .card--pack.featured{--dup:var(--amber-d)} .pack__head{background:rgba(28,60,107,.08);padding:16px 22px;display:flex;align-items:center;gap:10px} .card--pack.featured .pack__head{background:var(--navy)} .card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff} .pack__head b{font-family:var(--display);font-size:1.14rem;font-weight:800;color:var(--navy)} .pack__head span{font-size:.875rem;font-weight:700;color:var(--ink-3);margin-left:auto} .pack__flag{position:absolute;right:0;top:0;background:var(--amber-d);color:#fff;font-family:var(--text);font-size:0.8125rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:5px 16px;border-bottom-left-radius:16px;z-index:3} .pack__body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px} .card--pack img{width:auto;max-width:100%;height:var(--pack-img,170px);object-fit:contain;margin-inline:auto;margin-bottom:14px} .pack__per{font-family:var(--display);font-size:2.5rem;font-weight:800;color:var(--navy);line-height:1;text-align:center;margin:0} .pack__per sup{font-size:1rem;top:-.8em} .pack__unit{display:block;text-align:center;font-size:.9375rem;font-weight:700;color:var(--ink-3);margin:6px 0 14px} .pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 16px;font-size:1rem} .pack__tot b{font-weight:700} .pack__was{color:var(--ink-3);text-decoration:line-through} .pack__perks{list-style:none;margin:0 0 20px;padding:0;font-size:.9375rem} .pack__perks li{position:relative;padding-left:24px;margin:0 0 7px;color:var(--ink-2)} .pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:700} .card--pack>.pack__body>.btn{margin-top:auto} .pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:12px 0 0;font-size:.8125rem;color:var(--ink-3)} .buy__note{font-size:.9375rem;color:var(--ink-3);margin:0} /* ---- captioned images */ .shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 1.2em} .shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))} .shots figure{margin:0;overflow:hidden} .shots img{width:100%} .shots figcaption{padding:16px 22px 20px} .shots figcaption b{display:block;margin-bottom:5px;color:var(--navy)} .shots figcaption span{font-size:.9375rem;color:var(--ink-2)} figure.portrait img{width:var(--figw,320px);margin-inline:auto} /* ---- seal wall */ .badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 1.2em} .badgewall figure{margin:0;text-align:center;padding:22px 18px} .badgewall img{width:72px;height:72px;object-fit:contain;margin:0 auto 10px} .badgewall b{display:block;font-size:1rem;margin-bottom:4px;color:var(--navy)} .badgewall span{font-size:.9375rem;color:var(--ink-2)} /* ---- star distribution */ .meter{margin:0 0 1.2em} .meter__row{display:grid;grid-template-columns:78px 1fr 52px;gap:12px;align-items:center;margin:0 0 9px;font-size:.9375rem} .meter__bar{height:12px;border-radius:999px;background:var(--line);overflow:hidden} .meter__bar i{display:block;height:100%;border-radius:999px;background:var(--amber-d)} .stars{color:#bd7510;letter-spacing:1px} .stars i{font-style:normal;opacity:.34} /* ---- FAQ. Padding on summary, which is the click target. */ .faq{margin:0 0 1.2em;overflow:hidden} .faq details{border-bottom:1px solid var(--line)} .faq details:last-child{border-bottom:0} .faq summary{padding:18px 52px 18px 26px;cursor:pointer;position:relative;list-style:none;font-family:var(--text);font-weight:700;font-size:1.06rem;color:var(--navy)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:24px;top:50%;translate:0 -50%;font-size:1.34rem;font-weight:400;color:var(--amber-ink)} .faq details[open] summary::after{content:"\2212"} .faq__body{padding:0 26px 20px} .faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0} /* ---- references and byline */ .refs{margin:0 0 1.2em} .refs ol{padding-left:22px;margin:0} .refs li{font-size:1.0625rem;color:var(--ink-2);margin:0 0 .6em} /* The list prints each source's full URL as its own link text, and a URL is one unbreakable token: at 390 that pushed a single anchor past the viewport on eleven pages of another site, clipped and invisible to every static check. `anywhere` also lowers the element's min-content width. */ .refs li,.refs li a{overflow-wrap:anywhere} .byline{display:flex;gap:18px;padding:24px 28px;margin:0 0 1.2em} .byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--display);font-weight:800;font-size:1.14rem} .byline b{display:block;margin-bottom:6px;color:var(--navy)} .byline p{font-size:1rem;color:var(--ink-2);margin:0} /* ---- closing CTA */ .final{padding:30px 34px} .final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center} .final__img img{width:200px} .final h2{margin:0 0 10px} .final__price{font-weight:700;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:16px;text-align:left} .rel a{display:block;padding:24px 28px;text-decoration:none;color:var(--ink);transition:translate .18s ease} .rel a:hover{translate:0 -2px} .rel b{display:block;font-family:var(--display);font-size:1.1rem;font-weight:800;color:var(--navy);margin-bottom:5px} .rel span{font-size:.9375rem;color:var(--ink-2)} /* ---- forms. 16px minimum or iOS Safari zooms on focus and never zooms back. */ .form{display:grid;gap:16px;max-width:var(--measure)} .field label{display:block;font-weight:700;font-size:1rem;margin-bottom:6px} .field input,.field select,.field textarea{width:100%;font-family:var(--text);font-size:16px;padding:13px 16px;border:1px solid var(--line-2);border-radius:18px;background:var(--white);color:var(--ink)} .field textarea{min-height:140px;resize:vertical;border-radius:24px} .field small{display:block;font-size:0.9375rem;color:var(--ink-3);margin-top:5px} .form-note{padding:20px 24px;margin:0 0 1.2em} /* ---- blog */ .article{max-width:var(--measure);margin-inline:auto} .postmeta{font-size:.9375rem;color:var(--ink-3);margin:0 0 20px} .toc{padding:22px 26px;margin:0 0 28px} .toc b{display:block;margin-bottom:8px;color:var(--navy)} .toc ol{margin:0;padding-left:20px} .toc li{margin:0 0 5px;font-size:1.0625rem} .posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} .posts article{padding:26px 28px} .posts h3{margin:0 0 8px} .posts p{font-size:1.0625rem;color:var(--ink-2)} .dtable{min-width:520px} /* ---- footer: two ranked columns BESIDE a tall precautions panel --------- */ .fcta{position:relative;background:var(--deep);color:#fff;padding:52px 0} .fcta h2,.fcta__h{color:#fff} .fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center} .fcta__eye{display:inline-block;font-size:.9375rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#f2c98d;margin-bottom:10px} .fcta__h{font-family:var(--display);font-size:1.7rem;font-weight:800;line-height:1.24;margin:0 0 10px} .fcta p{color:#c2d2e7} .fcta__sm{font-size:.9375rem;color:#a8c0dc;margin:12px 0 0} .fcta__sm a,.fcta p a{color:#ffdbaa} .fcta__img img{width:260px} footer{background:var(--ground)} .fseals{background:var(--tint)} .fseals__row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 18px;padding-block:20px} .fseals img{width:46px;height:46px;object-fit:contain} .fseals span{font-size:16px;color:var(--ink-2);max-width:42ch} .findex{display:grid;grid-template-columns:1.15fr 1.5fr 1fr;gap:34px;padding:44px 0 30px;align-items:start} .findex__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px} .fbrand{font-family:var(--display);font-size:1.72rem;font-weight:800;color:var(--navy);line-height:1} .fbrand span{color:var(--amber-d)} .frole{font-size:16px;color:var(--ink-2);margin:10px 0 14px} .fcard p{font-size:16px;color:var(--ink-2);margin:0 0 .7em} .fcard b{color:var(--navy)} .fh{font-family:var(--text);font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)} .findex ul{list-style:none;margin:0 0 22px;padding:0} .findex li{margin:0} .findex__col ul:last-child{margin-bottom:0} /* inline-block, not block: the box shrink-wraps so the hover underline stays the width of the words, and the negative margin gives the row height back. */ footer li a{display:inline-block;padding-block:5px;margin-block:-5px;font-size:16px;color:var(--ink-2);text-decoration:none} footer li a:hover{color:var(--amber-ink)} /* The tall precautions panel. It runs the full height of the index beside it, which is this slot's footer lever, and it is the only place in the chrome where the bottle's caution is reproduced. */ .fcare{padding:24px 26px} .fcare ul{list-style:none;margin:0;padding:0} .fcare li{position:relative;font-size:16px;color:var(--ink-2);padding-left:18px;margin:0 0 10px} .fcare li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:2px;border-radius:2px;background:var(--amber-d)} .fcare__lot{margin:16px 0 0;font-size:16px;font-weight:700;color:var(--navy)} .fcare__lot span{display:block;font-weight:400;font-size:16px;color:var(--ink-3)} .fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:22px 0 28px;border-top:1px solid var(--line)} .fpay img{width:230px;height:auto} .fpay span{font-size:16px;color:var(--ink-3)} .disc{background:var(--tint);padding:28px 0 32px} .disc p,.disc li{font-size:16px;color:var(--ink-2)} .disc b{color:var(--navy)} .disc__list{columns:2;column-gap:38px;list-style:none;margin:14px 0 0;padding:0} .disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:16px;position:relative} .disc__list li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;border-radius:2px;background:var(--amber-d)} .copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:16px} /* ---- sticky buy bar. Declared at the TOP LEVEL and never display:none: a bar that does not render on desktop cannot take over from the header, and the direction classes would land on an element nobody sees - house rule 8. */ .buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--deep);color:#fff; display:block;transform:translateY(105%);transition:transform .25s ease} .buybar.show{transform:none} .buybar__in{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin-inline:auto;padding:12px 22px} .buybar__t{font-size:.9375rem;min-width:0} .buybar__t b{display:block;font-size:1rem} .buybar__t span{color:#a8c0dc} .buybar .btn{margin-left:auto;flex:0 0 auto} /* ---- 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 */ @media (max-width:1100px){ .findex{grid-template-columns:1fr 1.4fr;gap:28px} .fcare{grid-column:1 / -1} } @media (max-width:980px){ :root{--navh:104px} .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 12px; order:3;flex-basis:100%} .menu.open{display:flex} .menu__more{display:block} .menu a{padding:12px 0;border-bottom:1px solid var(--line)} .menu a[aria-current="page"]{border-bottom-color:var(--line)} .nav__top{flex-wrap:wrap} .nav__dest{order:3;flex-basis:100%} .burger{display:block;order:1} .nav__buy{display:none} .nav__rail{order:2;margin-left:auto} .hero__grid{grid-template-columns:minmax(0,1fr);gap:24px;padding-right:22px} .hero__media{order:3;margin:4px 0 6px} .hero__card img{max-width:420px;margin-inline:auto} .hero__cap{text-align:center;padding-left:0} .hero h1{max-width:none} .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))} .stats{grid-template-columns:repeat(2,minmax(0,1fr))} .fcta__box{grid-template-columns:1fr} .fcta__img{display:none} .final--media{grid-template-columns:1fr;gap:20px} } @media (max-width:760px){ body{font-size:16.5px} .sec{padding:44px 0} .hero{padding:18px 0 38px} .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr} .prices{grid-template-columns:1fr} .card--pack.featured{order:-1} .shots,.shots.s2{grid-template-columns:1fr} .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))} .rel,.posts{grid-template-columns:1fr} .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0} .versus{grid-template-columns:1fr} .versus>div{border-bottom:0} .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2);margin-top:6px} /* The timescale chip is nowrap with margin-left:auto, so on a narrow panel it is pushed onto a line with no room for it and overhangs the edge. On a phone it starts its own line and wraps its own text. */ .ing__dose{margin-left:0;white-space:normal} .disc__list{columns:1} .figures{grid-template-columns:1fr;gap:10px} .findex{grid-template-columns:1fr;gap:26px} .findex__pair{grid-template-columns:1fr 1fr;gap:20px} .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px} .buybar .btn{width:100%;margin-left:0} } @media (max-width:440px){ .findex__pair{grid-template-columns:1fr} .badgewall{grid-template-columns:1fr} .brand{padding:6px 12px 6px 8px} .bw small{display:none} } /* ---- the bottle's own shadow ------------------------------------------- Transform only, NEVER opacity: the bottle is the LCP element, and an element that starts at opacity 0 is not recorded as painted. The slot says no shadow on any COMPONENT, and this is not one: it is the ground contact under a photographed object, without which a cut-out on a flat ground floats. */ .hero__card{isolation:isolate} .hero__card::after{ content:"";position:absolute;left:50%;bottom:4%;translate:-50% 0; width:52%;height:16px;border-radius:50%; background:radial-gradient(closest-side,rgba(26,27,48,.26),transparent 76%); filter:blur(6px);z-index:1;pointer-events:none; } /* --- 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 shots here are three shapes - 1200x1200, 569x647 and 683x647 - so without these the images render at three sizes and the three CTAs sit at three heights. It has to be CSS: correcting the height ATTRIBUTES would fight fix_img_dims.py, and two passes correcting one attribute in opposite directions is a fight neither wins. */ .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} /* ---- 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; } } /* ==== 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 ==== */ /* ==== modern surface (modern_surface.py) ==== */ /* House rule 11. This stylesheet had 1 box-shadow declaration(s) and 0 of them layered, so every panel read flat however generous the radius was. Two stops -- a tight contact shadow and a wide ambient one -- is what makes a surface look raised. The tint is this site's own ink (26,27,48), not neutral black. Paint only: border-radius, box-shadow and transform change no geometry, so this is safe below the critical marker and needs a restamp rather than a rebuild. */ :root{ --radius:16px; --shadow:0 1px 2px rgba(26,27,48,.06), 0 6px 18px rgba(26,27,48,.07); --lift:0 2px 6px rgba(26,27,48,.09), 0 16px 34px rgba(26,27,48,.14); } .card, .step, .keypoints, .callout, .alert, .toc, .byline, .posts article, .shots figure, .badgewall figure, .tablewrap, .faq, .ingcard, .final, .split__img, .answer{box-shadow:var(--shadow)} /* These panels declared no radius of their own, so raising the token alone left them square. House rule 11 is a floor: it outranks a slot that chose square corners. */ .split__img{border-radius:var(--radius)} /* A surface a reader can click answers the pointer. 2px registers without reflowing the row beside it. */ .rel a, .posts article, .shots figure, .card--pack, .badgewall figure{transition:box-shadow .2s ease, transform .2s ease} .rel a:hover, .posts article:hover, .shots figure:hover, .card--pack:hover, .badgewall figure:hover{box-shadow:var(--lift);transform:translateY(-2px)} @media(prefers-reduced-motion:reduce){ .rel a:hover, .posts article:hover, .shots figure:hover, .card--pack:hover, .badgewall figure:hover{transform:none} } /* ==== end modern surface ==== */ /* ==== tables never fade (reveal_skip_tables.py) ==== */ /* A comparison table is reference content the reader scrolled to on purpose. Fading it in leaves it illegible for half a second at exactly that moment, which reads as broken text rather than as motion. The reveal stays on cards and callouts, which are decorative arrivals. */ .tablewrap[data-reveal],.tablewrap.reveal{opacity:1;transform:none;transition:none} /* ==== end tables never fade ==== */