Pages Medium
D2C — Supplements / Wellness Landing
A full direct-to-consumer landing page for a fictional clinically-dosed supplements brand, built in clean vanilla HTML, CSS and JS. It pairs a product hero and benefit claim with an ingredient-science breakdown carrying study callouts, a benefit icons grid, a how-it-works timeline, star-rated reviews, a subscribe-versus-one-time pricing toggle, an accordion FAQ and a sticky add-to-cart bar. Energetic teal-and-lime accents on clinical white give it a confident, science-backed wellness feel.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
/* =========================================================
Vitalize — D2C supplements landing
Palette: clinical white + teal/lime accent + soft gray
========================================================= */
:root {
--bg: #ffffff;
--bg-soft: #f4f7f5;
--bg-mint: #eef7f1;
--ink: #0f1512;
--ink-soft: #4b5a52;
--line: #e2eae5;
--teal: #0fb88f;
--teal-deep: #0a8e6e;
--lime: #b9f24a;
--lime-deep: #93d50f;
--accent-ink: #063b2c;
--shadow-sm: 0 1px 2px rgba(15,21,18,.06);
--shadow-md: 0 14px 40px -18px rgba(10,142,110,.35);
--shadow-lg: 0 30px 70px -28px rgba(10,142,110,.45);
--radius: 16px;
--radius-lg: 26px;
--maxw: 1140px;
--ease: cubic-bezier(.22,.61,.36,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { font-family: "Sora", "Inter", system-ui, sans-serif; line-height: 1.08; margin: 0; letter-spacing: -.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.grad { background: linear-gradient(96deg, var(--teal-deep), var(--lime-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: .5rem; font-family: "Sora", sans-serif; font-weight: 600;
font-size: .95rem; padding: .8rem 1.4rem; border-radius: 999px;
border: 1.5px solid transparent; cursor: pointer; transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .2s;
background: none; color: var(--ink); white-space: nowrap;
}
.btn--primary { background: linear-gradient(96deg, var(--teal), var(--teal-deep)); color: #fff; box-shadow: var(--shadow-md); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn--line { border-color: var(--line); background: #fff; }
.btn--line:hover { border-color: var(--teal); color: var(--teal-deep); transform: translateY(-2px); }
.btn--ghost { border-color: var(--line); }
.btn--ghost:hover { border-color: var(--teal); color: var(--teal-deep); }
.btn--lg { padding: 1rem 2rem; font-size: 1.05rem; }
.btn:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.78); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
.nav.is-scrolled { border-color: var(--line); box-shadow: var(--shadow-sm); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-family: "Sora", sans-serif; font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; }
.brand__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(140deg, var(--teal), var(--lime-deep)); color: #fff; box-shadow: var(--shadow-sm); }
.nav__links { display: flex; gap: 1.6rem; }
.nav__links a { font-weight: 500; font-size: .95rem; color: var(--ink-soft); position: relative; padding: .3rem 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--teal); transition: width .25s var(--ease); }
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { width: 100%; }
.nav__actions { display: flex; align-items: center; gap: .7rem; }
.nav__toggle { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; align-items: center; justify-content: center; }
.nav__toggle span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .2s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 70px 0 90px; background:
radial-gradient(60% 50% at 85% 0%, var(--bg-mint), transparent 70%),
radial-gradient(50% 40% at 0% 100%, #f4fbe9, transparent 70%); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; color: var(--accent-ink); background: #fff; border: 1px solid var(--line); padding: .45rem .9rem; border-radius: 999px; box-shadow: var(--shadow-sm); }
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(15,184,143,.18); }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; margin: 1.1rem 0 1rem; }
.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 33ch; }
.hero__cta { display: flex; gap: .8rem; margin: 1.8rem 0 1.4rem; flex-wrap: wrap; }
.hero__trust { display: flex; gap: 1.6rem; flex-wrap: wrap; color: var(--ink-soft); font-size: .95rem; }
.hero__trust strong { color: var(--ink); font-family: "Sora", sans-serif; }
/* Product visual */
.hero__visual { display: grid; place-items: center; }
.product { position: relative; width: min(360px, 80vw); }
.product__glow { position: absolute; inset: -10% -6% -16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(185,242,74,.55), rgba(15,184,143,.25), transparent 75%); filter: blur(8px); z-index: 0; }
.product__tub { position: relative; z-index: 1; aspect-ratio: 3/4; border-radius: 34px 34px 28px 28px; background: linear-gradient(160deg, #ffffff, #eaf3ee); border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: grid; align-content: end; padding: 26px; overflow: hidden; }
.product__tub::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 38%; background: linear-gradient(180deg, rgba(255,255,255,.85), transparent); }
.product__cap { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 56%; height: 34px; border-radius: 14px; background: linear-gradient(140deg, var(--teal), var(--teal-deep)); box-shadow: var(--shadow-md); }
.product__label { position: relative; z-index: 2; background: linear-gradient(155deg, #0f1512, #14211b); color: #fff; border-radius: 18px; padding: 18px 18px 20px; display: grid; gap: 2px; }
.product__label strong { font-family: "Sora", sans-serif; font-weight: 800; letter-spacing: .18em; color: var(--lime); }
.product__label em { font-style: normal; font-family: "Sora", sans-serif; font-weight: 700; font-size: 1.35rem; }
.product__meta { font-size: .82rem; color: #b9c8c0; }
.product__badge { position: absolute; z-index: 3; font-size: .78rem; font-weight: 600; background: #fff; border: 1px solid var(--line); padding: .4rem .7rem; border-radius: 999px; box-shadow: var(--shadow-md); }
.product__badge--a { top: 12%; right: -8%; color: var(--teal-deep); }
.product__badge--b { bottom: 14%; left: -10%; }
/* ---------- Logos ---------- */
.logos { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.logos__inner { display: flex; align-items: center; gap: 2rem; padding: 22px 24px; flex-wrap: wrap; }
.logos__lead { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.logos__row { display: flex; gap: 2rem; flex-wrap: wrap; flex: 1; }
.logos__row li { font-family: "Sora", sans-serif; font-weight: 700; font-size: 1rem; color: #8a988f; letter-spacing: .04em; }
/* ---------- Section heads ---------- */
.section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section-head--left { text-align: left; margin-left: 0; }
.eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: .8rem; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 700; }
.section-head p { color: var(--ink-soft); margin-top: .9rem; font-size: 1.08rem; }
/* ---------- Science ---------- */
.science { padding: 90px 0; }
.science__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.study { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; transition: transform .25s var(--ease), box-shadow .25s, border-color .2s; }
.study:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.study__amount { font-family: "Sora", sans-serif; font-weight: 800; font-size: 2.3rem; color: var(--teal-deep); line-height: 1; margin-bottom: 1rem; }
.study__amount small { font-size: 1rem; color: var(--ink-soft); font-weight: 600; }
.study h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.study p { color: var(--ink-soft); font-size: .95rem; }
.study__cite { display: block; margin-top: 1rem; font-size: .78rem; color: var(--teal-deep); background: var(--bg-mint); padding: .45rem .7rem; border-radius: 10px; }
.study__cite em { color: var(--ink-soft); font-style: normal; }
.science__foot { margin-top: 28px; text-align: center; font-size: .8rem; color: #93a39a; max-width: 70ch; margin-inline: auto; }
/* ---------- Benefits ---------- */
.benefits { padding: 90px 0; background: var(--bg-soft); }
.benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.benefit { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; transition: transform .25s var(--ease), box-shadow .25s; }
.benefit:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.benefit__icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--bg-mint); font-size: 1.4rem; margin-bottom: 1rem; }
.benefit h3 { font-size: 1.15rem; margin-bottom: .45rem; }
.benefit p { color: var(--ink-soft); font-size: .96rem; }
/* ---------- Timeline ---------- */
.how { padding: 90px 0; }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; position: relative; }
.timeline__step { position: relative; padding-top: 12px; }
.timeline__step::before { content: ""; position: absolute; top: 31px; left: 56px; right: -22px; height: 2px; background: linear-gradient(90deg, var(--teal), transparent); }
.timeline__step:last-child::before { display: none; }
.timeline__num { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(150deg, var(--teal), var(--lime-deep)); color: #fff; font-family: "Sora", sans-serif; font-weight: 800; font-size: 1.3rem; box-shadow: var(--shadow-md); margin-bottom: 1.1rem; }
.timeline__step h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.timeline__step p { color: var(--ink-soft); font-size: .95rem; }
/* ---------- Reviews ---------- */
.reviews { padding: 90px 0; background: linear-gradient(180deg, var(--bg-mint), #fff); }
.reviews__score { margin-top: 1rem; font-size: 1.05rem; color: var(--ink-soft); }
.reviews__score strong { font-family: "Sora", sans-serif; color: var(--ink); }
.stars { color: var(--lime-deep); letter-spacing: 2px; }
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.review { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; margin: 0; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s; }
.review:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.review blockquote { margin: 1rem 0 1.3rem; font-size: 1.02rem; color: var(--ink); }
.review figcaption { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--ink-soft); }
.review figcaption em { font-style: normal; color: #93a39a; }
.review__av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-mint); color: var(--teal-deep); font-weight: 700; font-size: .8rem; }
/* ---------- Pricing ---------- */
.pricing { padding: 90px 0; }
.toggle { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.4rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 5px; position: relative; }
.toggle__btn { font-family: "Sora", sans-serif; font-weight: 600; font-size: .92rem; border: 0; background: transparent; color: var(--ink-soft); padding: .55rem 1.2rem; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.toggle__btn.is-active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.toggle__save { font-size: .76rem; font-weight: 700; color: var(--accent-ink); background: var(--lime); padding: .3rem .6rem; border-radius: 999px; margin-left: .3rem; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plan { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; display: flex; flex-direction: column; transition: transform .25s var(--ease), box-shadow .25s; position: relative; }
.plan:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.plan--featured { border-color: var(--teal); box-shadow: var(--shadow-md); }
.plan--featured::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); padding: 1.5px; background: linear-gradient(150deg, var(--teal), var(--lime)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.plan__tag { position: absolute; top: -13px; left: 30px; font-size: .74rem; font-weight: 700; color: #fff; background: linear-gradient(96deg, var(--teal), var(--teal-deep)); padding: .35rem .8rem; border-radius: 999px; box-shadow: var(--shadow-sm); }
.plan h3 { font-size: 1.25rem; }
.plan__desc { color: var(--ink-soft); font-size: .92rem; margin: .4rem 0 1.2rem; }
.plan__price { display: flex; align-items: baseline; gap: .3rem; margin-bottom: 1.2rem; }
.plan__price .amt { font-family: "Sora", sans-serif; font-weight: 800; font-size: 2.6rem; }
.plan__price .per { color: var(--ink-soft); font-weight: 600; }
.plan__list { display: grid; gap: .65rem; margin-bottom: 1.6rem; }
.plan__list li { position: relative; padding-left: 1.7rem; color: var(--ink-soft); font-size: .95rem; }
.plan__list li::before { content: "✓"; position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-mint); color: var(--teal-deep); font-size: .72rem; font-weight: 700; }
.plan__cta { margin-top: auto; width: 100%; }
/* ---------- FAQ ---------- */
.faq { padding: 90px 0; background: var(--bg-soft); }
.faq__inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start; }
.accordion { display: grid; gap: 12px; }
.acc__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.acc__item.is-open { border-color: var(--teal); box-shadow: var(--shadow-sm); }
.acc__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; font-family: "Sora", sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--ink); background: none; border: 0; padding: 20px 22px; cursor: pointer; }
.acc__icon { position: relative; flex: none; width: 18px; height: 18px; }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; background: var(--teal-deep); border-radius: 2px; transition: transform .25s var(--ease); }
.acc__icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.acc__icon::after { top: 0; left: 8px; width: 2px; height: 18px; }
.acc__item.is-open .acc__icon::after { transform: scaleY(0); }
.acc__a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.acc__a p { padding: 0 22px 20px; color: var(--ink-soft); font-size: .96rem; }
/* ---------- CTA band ---------- */
.cta-band { padding: 80px 0; }
.cta-band__inner { background: linear-gradient(150deg, #0f1512, #0a352a 70%, #0a8e6e); border-radius: var(--radius-lg); padding: 56px 32px; text-align: center; color: #fff; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.cta-band__inner::after { content: ""; position: absolute; inset: auto -10% -40% auto; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, rgba(185,242,74,.45), transparent); }
.cta-band__inner h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); position: relative; }
.cta-band__inner p { color: #c4d6cd; margin: .9rem 0 1.8rem; position: relative; }
.cta-band .btn { position: relative; }
/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #cdd9d2; padding: 64px 0 28px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr .7fr .7fr 1.4fr; gap: 36px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand--foot { color: #fff; margin-bottom: .9rem; }
.footer__brand p { color: #8fa39a; max-width: 28ch; font-size: .95rem; }
.footer h4 { color: #fff; font-size: .92rem; margin-bottom: 1rem; font-family: "Sora", sans-serif; }
.footer nav a { display: block; color: #aebcb4; padding: .3rem 0; font-size: .95rem; transition: color .2s; }
.footer nav a:hover { color: var(--lime); }
.footer__field { display: flex; gap: .5rem; margin-bottom: .6rem; }
.footer__field input { flex: 1; min-width: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: .7rem 1rem; color: #fff; font-family: inherit; font-size: .95rem; }
.footer__field input::placeholder { color: #7f928a; }
.footer__field input:focus-visible { outline: 2px solid var(--lime); border-color: transparent; }
.footer__news small { color: #7f928a; font-size: .82rem; }
.footer__bar { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 22px; font-size: .84rem; color: #7f928a; }
/* ---------- Sticky add-to-cart ---------- */
.atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-top: 1px solid var(--line); box-shadow: 0 -12px 30px -18px rgba(15,21,18,.25); transform: translateY(100%); transition: transform .35s var(--ease); }
.atc.is-visible { transform: translateY(0); }
.atc__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 14px 24px; }
.atc__info { display: grid; gap: 2px; }
.atc__name { font-family: "Sora", sans-serif; font-weight: 700; font-size: 1rem; }
.atc__price { font-size: .9rem; color: var(--ink-soft); }
.atc__price em { font-style: normal; color: var(--teal-deep); font-weight: 600; }
/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 20px); z-index: 90; background: var(--ink); color: #fff; padding: .8rem 1.3rem; border-radius: 999px; font-size: .92rem; font-weight: 500; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease); max-width: 90vw; }
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
/* ---------- Responsive ---------- */
@media (max-width: 980px) {
.science__grid { grid-template-columns: repeat(2, 1fr); }
.benefits__grid { grid-template-columns: repeat(2, 1fr); }
.timeline { grid-template-columns: repeat(2, 1fr); }
.timeline__step::before { display: none; }
.reviews__grid, .plans { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
.faq__inner { grid-template-columns: 1fr; gap: 28px; }
.footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
.nav__links { position: absolute; top: 70px; left: 0; right: 0; flex-direction: column; gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 8px 24px 16px; box-shadow: var(--shadow-md); clip-path: inset(0 0 100% 0); transition: clip-path .3s var(--ease); }
.nav__links.is-open { clip-path: inset(0 0 0 0); }
.nav__links a { padding: .85rem 0; border-bottom: 1px solid var(--line); }
.nav__cta { display: none; }
.nav__toggle { display: flex; }
.hero__grid { grid-template-columns: 1fr; gap: 40px; }
.hero__visual { order: -1; }
.lede { max-width: none; }
.section-head { margin-bottom: 36px; }
.science, .benefits, .how, .reviews, .pricing, .faq { padding: 64px 0; }
}
@media (max-width: 520px) {
.container { padding: 0 18px; }
.science__grid, .benefits__grid, .timeline { grid-template-columns: 1fr; }
.hero__trust { gap: 1rem; font-size: .88rem; }
.footer__grid { grid-template-columns: 1fr; }
.footer__bar { flex-direction: column; gap: .4rem; }
.cta-band__inner { padding: 40px 22px; }
.atc__inner { padding: 12px 18px; }
.btn { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.reveal { opacity: 1 !important; transform: none !important; }
}/* =========================================================
Vitalize landing — vanilla JS interactions
========================================================= */
(function () {
"use strict";
/* ---------- Toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("is-show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("is-show");
}, 2600);
}
document.querySelectorAll("[data-toast]").forEach(function (el) {
el.addEventListener("click", function () {
toast(el.getAttribute("data-toast"));
});
});
/* ---------- Mobile nav ---------- */
var toggle = document.getElementById("navToggle");
var links = document.getElementById("navLinks");
function closeNav() {
if (!toggle) return;
toggle.setAttribute("aria-expanded", "false");
links.classList.remove("is-open");
}
if (toggle && links) {
toggle.addEventListener("click", function () {
var open = toggle.getAttribute("aria-expanded") === "true";
toggle.setAttribute("aria-expanded", String(!open));
links.classList.toggle("is-open", !open);
});
links.querySelectorAll("a").forEach(function (a) {
a.addEventListener("click", closeNav);
});
}
/* ---------- Nav shadow on scroll ---------- */
var nav = document.querySelector(".nav");
function onScroll() {
if (nav) nav.classList.toggle("is-scrolled", window.scrollY > 8);
}
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
/* ---------- Scroll reveal ---------- */
var reveals = document.querySelectorAll(".reveal");
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (e) {
if (e.isIntersecting) {
e.target.classList.add("is-in");
io.unobserve(e.target);
}
});
},
{ threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
);
reveals.forEach(function (el) { io.observe(el); });
} else {
reveals.forEach(function (el) { el.classList.add("is-in"); });
}
/* ---------- Pricing toggle ---------- */
var billSub = document.getElementById("billSub");
var billOnce = document.getElementById("billOnce");
var amounts = document.querySelectorAll(".amt");
var pers = document.querySelectorAll(".plan__price .per");
var saveTag = document.querySelector(".toggle__save");
function setBilling(mode) {
var sub = mode === "sub";
billSub.classList.toggle("is-active", sub);
billOnce.classList.toggle("is-active", !sub);
billSub.setAttribute("aria-pressed", String(sub));
billOnce.setAttribute("aria-pressed", String(!sub));
amounts.forEach(function (a) {
var val = a.getAttribute(sub ? "data-sub" : "data-once");
if (val) a.textContent = "$" + val;
});
pers.forEach(function (p) { p.textContent = sub ? "/mo" : " once"; });
if (saveTag) saveTag.style.visibility = sub ? "visible" : "hidden";
syncAtc();
}
if (billSub && billOnce) {
billSub.addEventListener("click", function () { setBilling("sub"); });
billOnce.addEventListener("click", function () { setBilling("once"); });
}
/* ---------- FAQ accordion ---------- */
document.querySelectorAll(".acc__q").forEach(function (q) {
q.addEventListener("click", function () {
var item = q.parentElement;
var panel = item.querySelector(".acc__a");
var open = item.classList.toggle("is-open");
q.setAttribute("aria-expanded", String(open));
panel.style.maxHeight = open ? panel.scrollHeight + "px" : "0px";
});
});
/* ---------- Sticky add-to-cart ---------- */
var atc = document.getElementById("atc");
var atcPrice = document.getElementById("atcPrice");
var featuredAmt = document.querySelector(".plan--featured .amt");
var hero = document.querySelector(".hero");
var footer = document.querySelector(".footer");
function syncAtc() {
if (atcPrice && featuredAmt) atcPrice.textContent = featuredAmt.textContent;
}
syncAtc();
if (atc && "IntersectionObserver" in window) {
var pastHero = false, atFooter = false;
function updateAtc() {
var show = pastHero && !atFooter;
atc.hidden = !show;
atc.classList.toggle("is-visible", show);
}
var heroIo = new IntersectionObserver(function (entries) {
pastHero = !entries[0].isIntersecting;
updateAtc();
}, { threshold: 0 });
if (hero) heroIo.observe(hero);
var footIo = new IntersectionObserver(function (entries) {
atFooter = entries[0].isIntersecting;
updateAtc();
}, { threshold: 0 });
if (footer) footIo.observe(footer);
}
/* ---------- Newsletter form ---------- */
var news = document.getElementById("newsForm");
if (news) {
news.addEventListener("submit", function (e) {
e.preventDefault();
var input = document.getElementById("newsEmail");
toast("You're in — 15% code is on its way to " + (input.value || "your inbox"));
news.reset();
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Vitalize — Clinically-dosed daily supplements</title>
<meta name="description" content="Vitalize delivers clinically-dosed, third-party tested supplements backed by peer-reviewed research. One simple daily ritual." />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- ===== NAV ===== -->
<header class="nav" id="top">
<div class="container nav__inner">
<a href="#top" class="brand" aria-label="Vitalize home">
<span class="brand__mark" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none"><path d="M12 2c0 5-4 6-4 10a4 4 0 0 0 8 0c0-4-4-5-4-10Z" fill="currentColor"/><circle cx="12" cy="13" r="2.4" fill="#fff"/></svg>
</span>
Vitalize
</a>
<nav class="nav__links" id="navLinks" aria-label="Primary">
<a href="#science">Science</a>
<a href="#benefits">Benefits</a>
<a href="#how">How it works</a>
<a href="#reviews">Reviews</a>
<a href="#faq">FAQ</a>
</nav>
<div class="nav__actions">
<a href="#pricing" class="btn btn--ghost nav__cta">Get started</a>
<button class="nav__toggle" id="navToggle" aria-expanded="false" aria-controls="navLinks" aria-label="Toggle menu">
<span></span><span></span><span></span>
</button>
</div>
</div>
</header>
<main>
<!-- ===== HERO ===== -->
<section class="hero">
<div class="container hero__grid">
<div class="hero__copy reveal">
<span class="pill"><span class="pill__dot"></span> Third-party tested · NSF certified</span>
<h1>The daily multi that's<br><span class="grad">actually dosed</span> to work.</h1>
<p class="lede">Most supplements under-dose to cut costs. Vitalize delivers 32 clinically-studied nutrients at the amounts shown in peer-reviewed research — in one clean scoop a day.</p>
<div class="hero__cta">
<a href="#pricing" class="btn btn--primary" data-toast="Added — choose your plan below">Start your trial</a>
<a href="#science" class="btn btn--line">See the science</a>
</div>
<ul class="hero__trust">
<li><strong>4.9</strong>/5 · 12,400 reviews</li>
<li><strong>0g</strong> added sugar</li>
<li><strong>60-day</strong> money back</li>
</ul>
</div>
<div class="hero__visual reveal">
<div class="product">
<div class="product__glow" aria-hidden="true"></div>
<div class="product__tub">
<span class="product__cap"></span>
<span class="product__label">
<strong>VITALIZE</strong>
<em>Daily Foundation</em>
<span class="product__meta">30 servings · Citrus</span>
</span>
</div>
<span class="product__badge product__badge--a">32 actives</span>
<span class="product__badge product__badge--b">Vegan · Gluten-free</span>
</div>
</div>
</div>
</section>
<!-- ===== LOGOS ===== -->
<section class="logos" aria-label="As featured in">
<div class="container logos__inner">
<span class="logos__lead">As featured in</span>
<ul class="logos__row">
<li>WELLNESS TODAY</li>
<li>THE LONGEVITY LAB</li>
<li>NUTRA JOURNAL</li>
<li>FORM&FUNCTION</li>
<li>VITALITY WIRE</li>
</ul>
</div>
</section>
<!-- ===== SCIENCE ===== -->
<section class="science" id="science">
<div class="container">
<div class="section-head reveal">
<span class="eyebrow">Ingredient science</span>
<h2>Every dose has a citation.</h2>
<p>We formulate at clinical doses — the amounts that produced results in published human trials — and publish the studies behind them.</p>
</div>
<div class="science__grid">
<article class="study reveal">
<div class="study__amount">200<small>mg</small></div>
<h3>Magnesium Glycinate</h3>
<p>Chelated for absorption. Supports sleep quality and muscle recovery without the GI upset of cheaper oxide forms.</p>
<span class="study__cite">RCT · 126 adults · <em>J. Sleep Res. 2022</em></span>
</article>
<article class="study reveal">
<div class="study__amount">2<small>g</small></div>
<h3>Creatine Monohydrate</h3>
<p>The most-studied performance compound on earth. Supports strength, power output and cognitive endurance.</p>
<span class="study__cite">Meta-analysis · 22 trials · <em>JISSN 2021</em></span>
</article>
<article class="study reveal">
<div class="study__amount">1000<small>IU</small></div>
<h3>Vitamin D3 + K2</h3>
<p>Paired so calcium lands in bone, not arteries. Supports immune function and mood through darker months.</p>
<span class="study__cite">Cohort · 9,400 adults · <em>Nutrients 2020</em></span>
</article>
<article class="study reveal">
<div class="study__amount">500<small>mg</small></div>
<h3>Lion's Mane Extract</h3>
<p>8:1 dual-extract for fruiting-body actives. Studied for focus, memory and nerve-growth support.</p>
<span class="study__cite">RCT · 30 adults · <em>Phytother. Res. 2019</em></span>
</article>
</div>
<p class="science__foot reveal">These statements have not been evaluated by any regulatory authority. This product is not intended to diagnose, treat, cure or prevent any disease.</p>
</div>
</section>
<!-- ===== BENEFITS ===== -->
<section class="benefits" id="benefits">
<div class="container">
<div class="section-head reveal">
<span class="eyebrow">Why people stay</span>
<h2>One scoop. Five systems supported.</h2>
</div>
<div class="benefits__grid">
<article class="benefit reveal">
<span class="benefit__icon" aria-hidden="true">⚡</span>
<h3>Sustained energy</h3>
<p>B-complex + adaptogens for steady output — no jittery crash by 3pm.</p>
</article>
<article class="benefit reveal">
<span class="benefit__icon" aria-hidden="true">🧠</span>
<h3>Sharper focus</h3>
<p>Nootropic actives dosed for clarity and working memory under load.</p>
</article>
<article class="benefit reveal">
<span class="benefit__icon" aria-hidden="true">🛡️</span>
<h3>Immune defense</h3>
<p>Zinc, D3 and vitamin C in bioavailable, well-absorbed forms.</p>
</article>
<article class="benefit reveal">
<span class="benefit__icon" aria-hidden="true">😴</span>
<h3>Deeper sleep</h3>
<p>Magnesium glycinate and L-theanine to help you wind down.</p>
</article>
<article class="benefit reveal">
<span class="benefit__icon" aria-hidden="true">💪</span>
<h3>Recovery & strength</h3>
<p>Creatine and electrolytes that keep training consistent.</p>
</article>
<article class="benefit reveal">
<span class="benefit__icon" aria-hidden="true">✨</span>
<h3>Skin & gut</h3>
<p>Collagen peptides and a 5-strain probiotic for the inside-out glow.</p>
</article>
</div>
</div>
</section>
<!-- ===== HOW IT WORKS ===== -->
<section class="how" id="how">
<div class="container">
<div class="section-head reveal">
<span class="eyebrow">How it works</span>
<h2>A ritual, not a regimen.</h2>
</div>
<ol class="timeline">
<li class="timeline__step reveal">
<span class="timeline__num">1</span>
<h3>Take the 2-minute quiz</h3>
<p>Tell us your goals, sleep and training. We map them to the right starting dose.</p>
</li>
<li class="timeline__step reveal">
<span class="timeline__num">2</span>
<h3>Scoop into anything</h3>
<p>One light citrus scoop in water, juice or your morning smoothie. That's it.</p>
</li>
<li class="timeline__step reveal">
<span class="timeline__num">3</span>
<h3>Track how you feel</h3>
<p>Log energy and sleep in the app. We fine-tune your blend each cycle.</p>
</li>
<li class="timeline__step reveal">
<span class="timeline__num">4</span>
<h3>Refills on autopilot</h3>
<p>Fresh pouch every 30 days. Skip, pause or cancel anytime — no friction.</p>
</li>
</ol>
</div>
</section>
<!-- ===== REVIEWS ===== -->
<section class="reviews" id="reviews">
<div class="container">
<div class="section-head reveal">
<span class="eyebrow">12,400 reviews</span>
<h2>Real people. Real consistency.</h2>
<div class="reviews__score" aria-label="Average rating 4.9 out of 5">
<span class="stars" aria-hidden="true">★★★★★</span> <strong>4.9</strong> average
</div>
</div>
<div class="reviews__grid">
<figure class="review reveal">
<span class="stars" aria-hidden="true">★★★★★</span>
<blockquote>"I stopped taking five separate pills and my 3pm slump just… vanished. The dosing transparency sold me, the energy kept me."</blockquote>
<figcaption><span class="review__av" aria-hidden="true">MA</span> Maya A. · <em>Verified · 8 months</em></figcaption>
</figure>
<figure class="review reveal">
<span class="stars" aria-hidden="true">★★★★★</span>
<blockquote>"As a coach I read every label. Vitalize is the first scoop I'd actually recommend — clinical doses, no proprietary blend hiding."</blockquote>
<figcaption><span class="review__av" aria-hidden="true">DR</span> Devin R. · <em>Verified · 1 year</em></figcaption>
</figure>
<figure class="review reveal">
<span class="stars" aria-hidden="true">★★★★☆</span>
<blockquote>"Sleep is noticeably deeper since week two. Taste is mild citrus, easy in water. Wish the scoop was a touch smaller, honestly minor."</blockquote>
<figcaption><span class="review__av" aria-hidden="true">JL</span> Jordan L. · <em>Verified · 4 months</em></figcaption>
</figure>
</div>
</div>
</section>
<!-- ===== PRICING ===== -->
<section class="pricing" id="pricing">
<div class="container">
<div class="section-head reveal">
<span class="eyebrow">Simple pricing</span>
<h2>Subscribe and save 30%.</h2>
<div class="toggle" role="group" aria-label="Billing period">
<button class="toggle__btn is-active" id="billSub" aria-pressed="true">Subscribe</button>
<button class="toggle__btn" id="billOnce" aria-pressed="false">One-time</button>
<span class="toggle__save">Save 30%</span>
</div>
</div>
<div class="plans">
<article class="plan reveal">
<h3>Starter</h3>
<p class="plan__desc">The Daily Foundation. 30 servings.</p>
<div class="plan__price"><span class="amt" data-sub="42" data-once="59">$42</span><span class="per">/mo</span></div>
<ul class="plan__list">
<li>32 clinical-dose actives</li>
<li>Free shipping</li>
<li>Skip or cancel anytime</li>
</ul>
<button class="btn btn--line plan__cta" data-toast="Starter added to cart">Choose Starter</button>
</article>
<article class="plan plan--featured reveal">
<span class="plan__tag">Most popular</span>
<h3>Complete</h3>
<p class="plan__desc">Foundation + Sleep + Greens. 30 servings each.</p>
<div class="plan__price"><span class="amt" data-sub="68" data-once="97">$68</span><span class="per">/mo</span></div>
<ul class="plan__list">
<li>Everything in Starter</li>
<li>Sleep & Greens stacks</li>
<li>Personalized dose tuning</li>
<li>Priority app coaching</li>
</ul>
<button class="btn btn--primary plan__cta" data-toast="Complete added — most popular pick!">Choose Complete</button>
</article>
<article class="plan reveal">
<h3>Household</h3>
<p class="plan__desc">Two Complete plans. Share the ritual.</p>
<div class="plan__price"><span class="amt" data-sub="119" data-once="169">$119</span><span class="per">/mo</span></div>
<ul class="plan__list">
<li>2× Complete subscriptions</li>
<li>Best per-serving value</li>
<li>Two app profiles</li>
</ul>
<button class="btn btn--line plan__cta" data-toast="Household added to cart">Choose Household</button>
</article>
</div>
</div>
</section>
<!-- ===== FAQ ===== -->
<section class="faq" id="faq">
<div class="container faq__inner">
<div class="section-head section-head--left reveal">
<span class="eyebrow">Questions</span>
<h2>Good to know.</h2>
<p>Can't find it? Our nutrition team replies within a day at hello@vitalize.example.</p>
</div>
<div class="accordion reveal">
<div class="acc__item">
<button class="acc__q" aria-expanded="false">When will I feel a difference?<span class="acc__icon" aria-hidden="true"></span></button>
<div class="acc__a"><p>Most people notice steadier energy and sleep within 10–14 days as nutrient levels build. Strength and recovery benefits compound over 4–6 weeks of consistent use.</p></div>
</div>
<div class="acc__item">
<button class="acc__q" aria-expanded="false">Is it third-party tested?<span class="acc__icon" aria-hidden="true"></span></button>
<div class="acc__a"><p>Every batch is tested by an independent NSF-registered lab for purity, label accuracy and heavy metals. Certificates of analysis are published by batch number in your account.</p></div>
</div>
<div class="acc__item">
<button class="acc__q" aria-expanded="false">Can I pause or cancel?<span class="acc__icon" aria-hidden="true"></span></button>
<div class="acc__a"><p>Yes — anytime, in two taps, no phone call. Skip a month, change your cadence, or cancel outright from the app. Your trial is also covered by a 60-day money-back guarantee.</p></div>
</div>
<div class="acc__item">
<button class="acc__q" aria-expanded="false">Will it interact with my medication?<span class="acc__icon" aria-hidden="true"></span></button>
<div class="acc__a"><p>Always check with your physician before starting any supplement, especially if you're pregnant, nursing or on prescription medication. We publish full doses so your provider can review them.</p></div>
</div>
</div>
</div>
</section>
<!-- ===== CTA BAND ===== -->
<section class="cta-band">
<div class="container cta-band__inner reveal">
<h2>Build a ritual you'll actually keep.</h2>
<p>Start today with a 60-day money-back guarantee.</p>
<a href="#pricing" class="btn btn--primary btn--lg" data-toast="Choose your plan above to start">Start your trial</a>
</div>
</section>
</main>
<!-- ===== FOOTER ===== -->
<footer class="footer">
<div class="container footer__grid">
<div class="footer__brand">
<a href="#top" class="brand brand--foot">
<span class="brand__mark" aria-hidden="true">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none"><path d="M12 2c0 5-4 6-4 10a4 4 0 0 0 8 0c0-4-4-5-4-10Z" fill="currentColor"/><circle cx="12" cy="13" r="2.4" fill="#0f1512"/></svg>
</span>
Vitalize
</a>
<p>Clinically-dosed daily wellness, formulated in the open.</p>
</div>
<nav aria-label="Product">
<h4>Product</h4>
<a href="#science">Ingredients</a>
<a href="#benefits">Benefits</a>
<a href="#pricing">Pricing</a>
</nav>
<nav aria-label="Company">
<h4>Company</h4>
<a href="#reviews">Reviews</a>
<a href="#faq">FAQ</a>
<a href="#top">Our standards</a>
</nav>
<form class="footer__news" id="newsForm">
<h4>Get 15% off your first month</h4>
<div class="footer__field">
<label class="sr-only" for="newsEmail">Email address</label>
<input id="newsEmail" type="email" placeholder="you@email.com" required />
<button class="btn btn--primary" type="submit">Join</button>
</div>
<small>No spam — just dosing notes and the occasional discount.</small>
</form>
</div>
<div class="container footer__bar">
<span>© 2026 Vitalize Labs (fictional). All rights reserved.</span>
<span>Not evaluated by any regulatory authority.</span>
</div>
</footer>
<!-- ===== STICKY ADD TO CART ===== -->
<div class="atc" id="atc" hidden>
<div class="container atc__inner">
<div class="atc__info">
<span class="atc__name">Vitalize · <span id="atcPlan">Complete</span></span>
<span class="atc__price"><span id="atcPrice">$68</span>/mo · <em>save 30%</em></span>
</div>
<button class="btn btn--primary" data-toast="Nice — proceeding to checkout (demo)">Add to cart</button>
</div>
</div>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Supplements / Wellness Landing
A self-contained direct-to-consumer landing page for Vitalize, a fictional daily-supplement brand built around one promise: every nutrient is dosed at the amount shown to work in published research. The page opens with a sticky transparent nav, a split hero pairing a CSS-rendered product tub with a benefit-led headline and dual CTAs, and a social-proof logo strip. From there it walks the visitor through an ingredient-science section where each active lists its clinical dose and a study citation, a six-card benefits grid, and a four-step “how it works” timeline.
Lower down, star-rated reviews build trust, a pricing block offers three tiers with a subscribe vs. one-time toggle that live-updates every price and savings badge, and an accordion FAQ answers the common objections. A sticky add-to-cart bar slides in once the hero scrolls out of view and hides again at the footer, mirroring the featured plan’s current price. Interactions are pure vanilla JS — mobile menu, smooth scroll, IntersectionObserver scroll-reveal, the pricing toggle, the accordion, the newsletter capture and a small toast() helper for CTA feedback.
The design system leans on a clinical-white canvas with vibrant teal and lime accents, soft-gray supporting tones, a confident Sora display sans over Inter body text, generous spacing, tasteful gradients and hover micro-interactions. It is fully responsive down to ~360px with a collapsing mobile nav and stacked sections, and respects reduced-motion preferences.
Illustrative UI only — fictional brand, not a real product.