/* ========================================================================== NUTREOGEN design system v2 — tokens sourced from /DESIGN.md "The colour is the index" — --accent is rewritten by JS per section; every component below reads from --accent, never a product colour directly. ========================================================================== */ :root{ /* ground & ink */ --paper:#f6f3ec; --paper-2:#efeade; --card:#fffdf8; --ink:#16130e; --ink-2:#57524a; --ink-3:#8b857a; --rule:rgba(22,19,14,.14); --rule-2:rgba(22,19,14,.07); /* ingredient accents — see tools/palette.js, OKLCH L .51 C .132 */ --c-d3k2:#925700; --c-d3k2-tint:#f9eee0; --c-d3k2-deep:#472400; --c-b12:#a4442f; --c-b12-tint:#ffebe7; --c-b12-deep:#51180c; --c-film:#9a4173; --c-film-tint:#fceaf3; --c-film-deep:#4c1735; --c-mag:#7251a5; --c-mag-tint:#f2edfd; --c-mag-deep:#352153; --c-mel:#4660b1; --c-mel-tint:#eaf0ff; --c-mel-deep:#1b2a59; --c-zinc:#007a8a; --c-zinc-tint:#e0f5f7; --c-zinc-deep:#003943; /* live accent — rewritten on by the accent-flood observer */ --accent:var(--c-d3k2); --accent-tint:var(--c-d3k2-tint); --accent-deep:var(--c-d3k2-deep); --maxw:1240px; --maxw-text:720px; --font-display:"Instrument Serif","Iowan Old Style",Georgia,serif; --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; /* type */ --t-display:clamp(56px,11vw,172px); --t-h1:clamp(38px,6vw,92px); --t-h2:clamp(29px,3.6vw,54px); --t-h3:20px; --t-lede:clamp(17px,1.7vw,22px); --t-body:16px; --t-sm:14px; --t-cap:12.5px; --t-over:11px; /* spacing (base 4) */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px; --s-12:48px; --s-16:64px; --s-24:96px; --s-32:128px; /* motion */ --m-micro:140ms ease-out; --m-std:260ms cubic-bezier(.4,0,.2,1); --m-emph:520ms cubic-bezier(.16,1,.3,1); --m-accent:700ms cubic-bezier(.4,0,.2,1); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; transition:background var(--m-accent)} img,video,svg{max-width:100%;display:block} a{color:inherit} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s-6)} @media(min-width:1024px){.wrap{padding:0 var(--s-8)}} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} ::selection{background:var(--accent);color:var(--card)} *{transition-property:background-color,border-color,color;transition-duration:var(--m-accent)} .no-accent-transition,.no-accent-transition *{transition:none!important} /* ---------- nav ---------- */ .nav{position:fixed;top:0;left:0;right:0;height:56px;z-index:80; background:color-mix(in srgb,var(--paper) 72%,transparent); backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid var(--rule);transform:translateY(0);transition:transform var(--m-std),background var(--m-accent)} .nav.hide{transform:translateY(-100%)} .nav .wrap{height:56px;display:flex;align-items:center;justify-content:space-between;gap:var(--s-6)} .brand{font-family:var(--font-display);font-weight:400;font-size:19px;letter-spacing:-.01em; text-decoration:none;white-space:nowrap} .brand sup{font-size:.5em;top:-1em;position:relative;font-family:var(--font)} .navlinks{display:flex;align-items:center;gap:var(--s-6);margin:0 auto 0 var(--s-8)} .navlinks a{position:relative;font-size:var(--t-sm);font-weight:500;text-decoration:none;color:var(--ink-2);padding:4px 0} .navlinks a:after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--accent);transition:right var(--m-std)} .navlinks a:hover{color:var(--ink)} .navlinks a:hover:after,.navlinks a.on:after{right:0} .navlinks a.on{color:var(--ink)} @media(max-width:680px){.navlinks{display:none}} .navcta{display:inline-flex;align-items:center;min-height:44px;font-size:13px;font-weight:600; text-decoration:none;padding:0 18px;border-radius:980px; background:var(--accent);color:var(--card);white-space:nowrap;transition:transform var(--m-micro),background var(--m-accent)} .navcta:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .navcta:hover{transform:translateY(-1px)} /* ---------- buttons ---------- */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:14px 30px;min-height:44px;border-radius:980px;font-size:15px;font-weight:600; text-decoration:none;border:0;cursor:pointer;background:var(--accent);color:var(--card); transition:transform var(--m-micro),background var(--m-accent),box-shadow var(--m-micro)} .btn:hover{transform:translateY(-2px)} .btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .btn.ghost{background:none;color:var(--ink);border:1px solid var(--rule)} .btn.ghost:hover{border-color:var(--accent);color:var(--accent)} .btn.soon,.btn[disabled]{background:var(--paper-2);color:var(--ink-3);pointer-events:none} /* ---------- sections & type ---------- */ section{padding:var(--s-24) 0} .sec-ink{background:var(--ink);color:var(--paper)} .sec-ink .ink-2{color:rgba(246,243,236,.68)} .sec-tint{background:var(--accent-tint)} .kicker{font-family:var(--font);font-size:var(--t-over);font-weight:600;letter-spacing:.15em; text-transform:uppercase;color:var(--accent);margin:0 0 var(--s-4)} .sec-ink .kicker{color:color-mix(in srgb,var(--accent) 70%,white)} h1,h2{font-family:var(--font-display);font-weight:400;margin:0;letter-spacing:-.02em;line-height:1.05} h1{font-size:var(--t-h1)} h2{font-size:var(--t-h2)} h3{margin:0;font-family:var(--font);font-size:var(--t-h3);font-weight:600;letter-spacing:-.01em} .lede{margin:var(--s-6) 0 0;font-size:var(--t-lede);line-height:1.55;color:var(--ink-2);max-width:58ch;font-family:var(--font)} .sec-ink .lede{color:rgba(246,243,236,.72)} .center{text-align:center} .center .lede{margin-left:auto;margin-right:auto} .tnum{font-variant-numeric:tabular-nums} /* line-mask headline reveal */ .mask{overflow:hidden;display:block} .mask > span{display:block;transform:translateY(105%);transition:transform var(--m-emph)} .mask.in > span{transform:translateY(0)} .reveal{opacity:0;transform:translateY(26px);transition:opacity var(--m-emph),transform var(--m-emph)} .reveal.in{opacity:1;transform:none} /* ---------- component-local accent scoping ---------- */ /* data-tone opts an element OUT of the root accent flood and locks it to its own product colour (set inline as --accent-local etc by build.js). */ [data-tone]{--accent:var(--accent-local);--accent-tint:var(--accent-tint-local);--accent-deep:var(--accent-deep-local)} /* ---------- product grid ---------- */ .grid{display:grid;gap:var(--s-4);margin-top:var(--s-12);grid-template-columns:repeat(auto-fit,minmax(272px,1fr))} .pcard{position:relative;display:flex;flex-direction:column;text-decoration:none; border-radius:20px;overflow:hidden;background:var(--card);border:1px solid var(--rule); transition:transform var(--m-emph)} .pcard:hover{transform:translateY(-6px)} .pcard:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .pcard .shot{position:relative;padding:34px 22px 18px;background:var(--accent-tint);overflow:hidden} .pcard .shot svg{margin:0 auto;width:150px;height:auto;transition:transform var(--m-emph)} .pcard:hover .shot svg{transform:scale(1.045) rotate(-1deg)} .pcard .badge{position:absolute;top:14px;right:14px;font-size:10px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:980px; background:var(--accent-deep);color:var(--card)} .pcard .badge.soon{background:rgba(22,19,14,.5)} .pcard .body{padding:var(--s-1) var(--s-6) var(--s-6);display:flex;flex-direction:column;flex:1} .pcard .tag{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 8px} .pcard .name{font-family:var(--font-display);font-size:22px;font-weight:400} .pcard .dose{margin:8px 0 0;font-size:13.5px;color:var(--ink-3)} .pcard .why{margin:12px 0 0;font-size:14px;color:var(--ink-2);line-height:1.55;flex:1} .pcard .foot{margin:var(--s-4) 0 0;display:flex;align-items:center;justify-content:space-between;padding-top:var(--s-4);border-top:1px solid var(--rule-2)} .pcard .price{font-size:16px;font-weight:600} .pcard .go{font-size:13px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:4px;transition:gap var(--m-std)} .pcard:hover .go{gap:8px} /* ---------- the shelf: stacked accent-flood panels ---------- */ .shelf{position:relative} .panel{min-height:100dvh;display:flex;align-items:center;background:var(--accent-tint); padding:var(--s-24) 0;transition:background var(--m-accent)} .panel-in{display:grid;gap:var(--s-8);align-items:center;grid-template-columns:1fr} @media(min-width:900px){.panel-in{grid-template-columns:.85fr 1.15fr;gap:var(--s-24)}} .panel-shot{display:flex;justify-content:center} .panel-shot svg{filter:drop-shadow(0 34px 46px rgba(22,19,14,.16))} .panel-idx{font-size:var(--t-over);font-weight:600;letter-spacing:.18em;color:var(--accent); margin:0 0 var(--s-6);opacity:.75} .panel-name{font-family:var(--font-display);font-weight:400;font-size:clamp(36px,5.4vw,80px); letter-spacing:-.03em;line-height:1.02;margin:0} .panel-lede{margin:var(--s-6) 0 0;font-size:var(--t-lede);line-height:1.5;color:var(--ink-2);max-width:34ch} .panel-dose{margin:var(--s-4) 0 0;font-size:13.5px;color:var(--ink-3);letter-spacing:.01em} .panel-foot{margin:var(--s-8) 0 0;display:flex;align-items:center;gap:var(--s-6);flex-wrap:wrap} .panel .price{font-family:var(--font-display);font-size:28px} .panel .price i{font-family:var(--font);font-size:12px} @media(max-width:899px){.panel{min-height:auto;padding:var(--s-16) 0} .panel-shot svg{width:190px}} /* colour rail — the shelf, sorted warm-to-cool */ .rail{display:flex;gap:2px;margin-top:var(--s-16);border-radius:16px;overflow:hidden} .rail a{flex:1;min-width:0;padding:22px 14px;text-decoration:none;color:var(--card); background:var(--rail-color);display:flex;flex-direction:column;gap:38px; transition:flex var(--m-std) var(--m-std)} .rail a:hover{flex:1.6} .rail b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rail span{font-size:10.5px;opacity:.72;white-space:nowrap} /* ---------- product hero ---------- */ .phero{padding:132px 0 var(--s-16)} .phero .split{display:grid;gap:var(--s-8);align-items:center;grid-template-columns:1fr} @media(min-width:900px){.phero .split{grid-template-columns:.95fr 1.05fr;gap:var(--s-24)}} .pshot{display:flex;align-items:center;justify-content:center;padding:var(--s-6);position:relative} .pshot svg{width:min(300px,68vw);height:auto;filter:drop-shadow(0 34px 46px rgba(22,19,14,.18))} .p-buy{margin:var(--s-8) 0 0;display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap} .p-price{font-family:var(--font-display);font-size:30px} .p-note{margin:var(--s-4) 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.6;max-width:44ch} .facts{border:1px solid var(--rule);border-radius:16px;overflow:hidden;background:var(--card);max-width:520px} .facts h4{margin:0;padding:14px 20px;font-size:12px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;background:var(--accent-deep);color:var(--card)} .facts table{width:100%;border-collapse:collapse;font-size:14.5px} .facts td{padding:13px 20px;border-top:1px solid var(--rule-2)} .facts td:last-child{text-align:right;font-weight:600} .facts tr:first-child td{border-top:0} .facts .other{padding:14px 20px;font-size:12.5px;color:var(--ink-3);line-height:1.6;border-top:1px solid var(--rule);background:var(--paper-2)} /* ---------- price with per-day frame ---------- */ .price i,.p-price i{display:block;font-style:normal;font-family:var(--font); font-size:11.5px;font-weight:500;color:var(--ink-3);margin-top:3px;letter-spacing:.01em} .p-price i{font-size:12.5px} /* ---------- lot lookup ---------- */ .lookup{margin:var(--s-12) 0 0;max-width:560px} .lookup label{display:block;font-size:var(--t-over);font-weight:600;letter-spacing:.15em; text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s-3)} .lookup-row{display:flex;gap:var(--s-2);flex-wrap:wrap} .lookup input{flex:1;min-width:220px;min-height:52px;padding:0 var(--s-4);font-size:16px; font-family:var(--font);font-variant-numeric:tabular-nums;letter-spacing:.04em; color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:12px; transition:border-color var(--m-std),box-shadow var(--m-std)} .lookup input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)} .lookup input::placeholder{color:var(--ink-3)} .lookup .btn{border-radius:12px;min-height:52px} .lookup .hint{margin:var(--s-3) 0 0;font-size:13px;color:var(--ink-3)} .lotchip{font:inherit;font-size:13px;font-variant-numeric:tabular-nums;color:var(--accent); background:none;border:0;border-bottom:1px dashed currentColor;padding:0;cursor:pointer} .lotchip:hover{opacity:.7} .lookup .err{margin:var(--s-3) 0 0;font-size:13.5px;color:#a4442f;display:flex;align-items:center;gap:6px} /* result card */ .lot{margin:var(--s-12) 0 0;border:1px solid var(--rule);border-radius:20px;overflow:hidden; background:var(--card);max-width:820px;animation:lotIn var(--m-emph) both} @keyframes lotIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .lot-head{padding:var(--s-6);background:var(--accent-deep);color:var(--paper); display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-4);flex-wrap:wrap} .lot-head h3{font-family:var(--font-display);font-weight:400;font-size:26px;color:var(--paper)} .lot-head .lotno{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.72;margin:0 0 6px;font-variant-numeric:tabular-nums} .lot-head .meta{margin:8px 0 0;font-size:13px;opacity:.72} .lot-verdict{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:980px; background:rgba(246,243,236,.15);font-size:12.5px;font-weight:600;white-space:nowrap} .lot-verdict svg{flex:none} .lot table{width:100%;border-collapse:collapse;font-size:14px} .lot th{text-align:left;padding:12px var(--s-6);font-size:var(--t-over);font-weight:600; letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);background:var(--paper-2)} .lot th:nth-child(n+2),.lot td:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums} .lot td{padding:14px var(--s-6);border-top:1px solid var(--rule-2)} .lot td:first-child{font-weight:500} .lot .pass{color:#0a6b3d;font-weight:600;white-space:nowrap} .lot-foot{padding:var(--s-6);border-top:1px solid var(--rule);background:var(--paper-2); font-size:13px;color:var(--ink-2);line-height:1.6} .lot-foot b{color:var(--ink)} @media(max-width:640px){ .lot th:nth-child(2),.lot td:nth-child(2){display:none} } .preview-note{margin:var(--s-6) 0 0;padding:var(--s-4) var(--s-6);border-radius:12px; background:#fff6e0;border:1px solid #e8cf9a;font-size:13px;line-height:1.6;color:#5c4413;max-width:820px} .preview-note b{display:block;margin-bottom:3px} /* ---------- bento / stats ---------- */ .bento{display:grid;gap:var(--s-4);margin-top:var(--s-12);grid-template-columns:repeat(auto-fit,minmax(238px,1fr))} .bcard{padding:var(--s-8) var(--s-6);min-height:176px;display:flex;flex-direction:column;justify-content:flex-end; border-radius:18px;background:var(--card);border:1px solid var(--rule)} .sec-ink .bcard{background:rgba(246,243,236,.06);border-color:rgba(246,243,236,.14)} .bnum{font-family:var(--font-display);font-size:clamp(38px,4.6vw,58px);color:var(--accent)} .sec-ink .bnum{color:color-mix(in srgb,var(--accent) 65%,white)} .bnum span{font-family:var(--font);font-size:.32em;font-weight:600;margin-left:.2em;color:var(--ink-3)} .btxt{margin:12px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-2)} .sec-ink .btxt{color:rgba(246,243,236,.72)} .stat{font-family:var(--font-display);font-size:clamp(88px,15vw,220px);line-height:.88;margin:0;color:var(--paper)} .src{margin:var(--s-8) 0 0;font-size:12px;color:rgba(246,243,236,.48);line-height:1.6;max-width:56ch;margin-left:auto;margin-right:auto} /* ---------- steps / safety ---------- */ .steps{margin:var(--s-8) 0 0;padding:0;list-style:none;counter-reset:s;max-width:640px} .steps li{counter-increment:s;position:relative;padding:18px 0 18px 52px;border-top:1px solid var(--rule)} .steps li:last-child{border-bottom:1px solid var(--rule)} .steps li:before{content:counter(s);position:absolute;left:0;top:16px;width:32px;height:32px; border-radius:50%;background:var(--accent);color:var(--card);font-size:14px;font-weight:600; display:flex;align-items:center;justify-content:center;font-family:var(--font)} .steps b{display:block;font-size:16.5px;font-weight:600} .steps span{display:block;margin-top:5px;font-size:14.5px;color:var(--ink-2);line-height:1.55} .safety{display:grid;gap:var(--s-4);margin-top:var(--s-8);grid-template-columns:repeat(auto-fit,minmax(258px,1fr))} .safety div{padding:var(--s-6);border-radius:14px;background:var(--card);border:1px solid var(--rule)} .safety b{display:block;font-size:15px;font-weight:600;margin-bottom:6px} .safety p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)} .trust{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));padding:var(--s-6) 0} .trust div{text-align:center;padding:8px} .trust b{display:block;font-size:14px;font-weight:600} .trust p{margin:5px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.5} /* ---------- footer ---------- */ footer{background:var(--paper-2);padding:var(--s-16) 0;font-size:13px;color:var(--ink-2)} footer .cols{display:flex;flex-wrap:wrap;gap:var(--s-8);justify-content:space-between;align-items:flex-start} footer a{text-decoration:none;color:var(--ink);font-weight:500} footer a:hover{color:var(--accent)} footer .ftitle{margin:0 0 10px;font-weight:600;color:var(--ink)} footer ul{margin:0;padding:0;list-style:none} footer li{margin:0 0 7px} .disclaim{margin:var(--s-8) 0 0;padding-top:var(--s-6);border-top:1px solid var(--rule); font-size:12px;line-height:1.7;color:var(--ink-3);max-width:80ch} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition-duration:1ms!important;animation-duration:1ms!important} .reveal,.mask>span{opacity:1;transform:none} .pcard:hover,.btn:hover{transform:none} }