Pages Medium

D2C — Skincare / Beauty Landing

A polished direct-to-consumer skincare landing page for a fictional glow serum brand. Soft blush-and-gold palette, an elegant serif-and-sans pairing, and a dewy, premium mood. Includes a product-shot hero with add-to-cart, a benefit grid, ingredient callouts, a three-step routine with results stats, star-rated reviews, bundle pricing cards, an accordion FAQ, a sticky add-to-cart bar that appears on scroll, scroll-reveal animations, a mobile nav, and a fully responsive layout.

Open in Lab

html css vanilla-js

Targets: JS HTML

Code

:root {
  /* Palette — soft neutrals + gold */
  --cream: #faf6f1;
  --cream-2: #f4ece3;
  --sand: #ece1d4;
  --blush: #f3dfd6;
  --blush-deep: #e8c7ba;
  --ink: #2c2622;
  --ink-soft: #6a5f57;
  --gold: #c8a25c;
  --gold-deep: #a8843f;
  --white: #ffffff;
  --line: #e6dbcf;

  --shadow-sm: 0 2px 10px rgba(76, 58, 40, 0.06);
  --shadow-md: 0 14px 40px rgba(76, 58, 40, 0.10);
  --shadow-lg: 0 30px 70px rgba(76, 58, 40, 0.16);

  --radius: 18px;
  --radius-lg: 28px;
  --maxw: 1140px;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: 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;
}

.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 700;
  margin-bottom: 0.9rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  text-align: center;
}
.btn--sm { padding: 0.65rem 1.15rem; font-size: 0.85rem; }
.btn--block { width: 100%; }
.btn--solid {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--solid:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- Announcement ---------- */
.announce {
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 0.55rem 1rem;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 246, 241, 0.78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.nav.is-scrolled {
  box-shadow: var(--shadow-sm);
  border-color: var(--line);
  background: rgba(250, 246, 241, 0.92);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--serif); font-size: 1.55rem; font-weight: 600; letter-spacing: 0.02em;
}
.logo__mark {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--gold) 70%, var(--gold-deep));
  box-shadow: 0 0 0 4px rgba(200, 162, 92, 0.18);
}
.logo--light { color: var(--cream); }
.nav__links { display: flex; gap: 1.8rem; }
.nav__links a {
  font-size: 0.92rem; font-weight: 600; color: var(--ink-soft);
  position: relative; padding: 0.25rem 0;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
  background: var(--gold); transition: width 0.22s ease;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { width: 100%; }
.nav__cta { display: flex; }
.nav__toggle {
  display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav__toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }
.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(900px 500px at 85% -10%, var(--blush) 0%, transparent 55%),
    radial-gradient(700px 400px at 0% 110%, var(--cream-2) 0%, transparent 50%),
    var(--cream);
  overflow: hidden;
  padding: 4.5rem 0 5rem;
}
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center;
}
.hero__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 1.1rem;
}
.hero__sub { font-size: 1.12rem; color: var(--ink-soft); max-width: 30rem; margin: 0 0 1.8rem; }
.hero__actions { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.hero__trust {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 1.8rem; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--ink-soft);
}
.hero__trust strong { display: block; color: var(--ink); font-size: 1rem; }

/* Bottle mockup */
.hero__visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 420px; }
.bottle { position: relative; width: 190px; }
.bottle__glass {
  height: 320px; border-radius: 22px 22px 30px 30px;
  background: linear-gradient(160deg, rgba(255,255,255,0.9), var(--blush) 60%, var(--blush-deep));
  box-shadow: var(--shadow-lg), inset 0 0 40px rgba(255,255,255,0.5);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.7);
}
.bottle__glass::before {
  content: ""; position: absolute; left: 18px; top: 24px; width: 26px; height: 70%;
  border-radius: 999px; background: linear-gradient(rgba(255,255,255,0.85), transparent);
  filter: blur(2px);
}
.bottle__label {
  text-align: center; font-family: var(--serif); color: var(--ink);
  font-size: 1.35rem; line-height: 1.2; letter-spacing: 0.04em;
  background: rgba(255,255,255,0.72); padding: 0.9rem 1.2rem; border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.bottle__label em { color: var(--gold-deep); font-size: 1.6rem; font-style: italic; }
.bottle__cap {
  position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 42px; border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, #f1e2c6, var(--gold) 70%, var(--gold-deep));
  box-shadow: var(--shadow-sm);
}
.bottle__shadow {
  position: absolute; bottom: -34px; left: 50%; transform: translateX(-50%);
  width: 150px; height: 26px; background: rgba(76,58,40,0.18); filter: blur(14px); border-radius: 50%;
}
.hero__pill {
  position: absolute; background: var(--white); color: var(--ink);
  font-weight: 700; font-size: 0.82rem; padding: 0.6rem 1rem; border-radius: 999px;
  box-shadow: var(--shadow-md); border: 1px solid var(--line);
  animation: float 5s ease-in-out infinite;
}
.hero__pill--a { top: 12%; left: 2%; }
.hero__pill--b { bottom: 14%; right: 0%; animation-delay: -2.4s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Press ---------- */
.press { background: var(--ink); color: var(--cream); padding: 1.6rem 0; }
.press__row { display: flex; align-items: center; gap: 2rem; justify-content: center; flex-wrap: wrap; }
.press__row > span { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; }
.press__logos { display: flex; gap: 2.2rem; flex-wrap: wrap; justify-content: center; }
.press__logos span {
  font-family: var(--serif); font-size: 1.25rem; letter-spacing: 0.12em; opacity: 0.85;
}

/* ---------- Sections ---------- */
.section { padding: 5.5rem 0; }
.section--cream { background: linear-gradient(180deg, var(--cream-2), var(--cream)); }
.section__head { text-align: center; max-width: 40rem; margin: 0 auto 3rem; }
.section__head h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.1; margin: 0 0 0.7rem;
}
.section__lead { color: var(--ink-soft); font-size: 1.05rem; margin: 0; }

/* Benefits */
.benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem 1.6rem; box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.card__icon {
  width: 52px; height: 52px; display: grid; place-items: center; font-size: 1.5rem;
  border-radius: 14px; background: var(--blush); margin-bottom: 1.1rem;
}
.card h3 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.card p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

/* Ingredients */
.ingredients__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.ingredient {
  background: var(--white); border-radius: var(--radius); padding: 1.8rem 1.5rem;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease;
}
.ingredient:hover { transform: translateY(-5px); }
.ingredient__pct {
  display: inline-grid; place-items: center; min-width: 56px; height: 56px; padding: 0 0.6rem;
  border-radius: 50%; font-family: var(--serif); font-size: 1.5rem; font-weight: 600;
  color: var(--gold-deep); background: var(--cream-2); border: 1px solid var(--blush-deep);
  margin-bottom: 1rem;
}
.ingredient h3 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.ingredient p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }

/* Routine */
.routine {
  list-style: none; margin: 0 0 3.5rem; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; counter-reset: r;
}
.routine__step {
  background: var(--white); border-radius: var(--radius); padding: 2rem 1.7rem;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); position: relative;
}
.routine__num {
  font-family: var(--serif); font-size: 2.6rem; color: var(--blush-deep); font-weight: 600;
  display: block; line-height: 1; margin-bottom: 0.6rem;
}
.routine__step h3 { margin: 0 0 0.4rem; font-size: 1.2rem; }
.routine__step p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

.results {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  background: var(--blush); border-radius: var(--radius-lg); padding: 2.4rem;
  position: relative;
}
.results__stat { text-align: center; }
.results__stat strong {
  display: block; font-family: var(--serif); font-size: 2.8rem; color: var(--gold-deep); line-height: 1;
}
.results__stat span { color: var(--ink-soft); font-size: 0.9rem; }
.results__note {
  grid-column: 1 / -1; text-align: center; font-size: 0.78rem; color: var(--ink-soft);
  margin: 0.5rem 0 0; opacity: 0.85;
}

/* Reviews */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.review {
  background: var(--white); border-radius: var(--radius); padding: 2rem 1.8rem;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); margin: 0;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.review:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.stars { color: var(--gold); letter-spacing: 0.15em; font-size: 1.05rem; margin-bottom: 0.9rem; }
.review blockquote { margin: 0 0 1.2rem; font-family: var(--serif); font-size: 1.3rem; line-height: 1.35; }
.review figcaption { font-size: 0.85rem; color: var(--ink-soft); }
.review figcaption strong { color: var(--ink); }

/* Bundles */
.bundles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; align-items: stretch; }
.bundle {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 2.2rem 1.9rem; box-shadow: var(--shadow-sm); position: relative;
  display: flex; flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.bundle:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.bundle--featured {
  border-color: var(--gold); box-shadow: var(--shadow-md);
  background: linear-gradient(180deg, #fffdf9, var(--white));
}
.bundle__flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #fff; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.05em; padding: 0.35rem 0.9rem; border-radius: 999px; white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.bundle__flag--alt { background: var(--ink); }
.bundle h3 { font-family: var(--serif); font-size: 1.7rem; margin: 0.4rem 0 0.4rem; }
.bundle__desc { color: var(--ink-soft); font-size: 0.92rem; margin: 0 0 1.2rem; }
.bundle__price { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 1.4rem; }
.bundle__price span { font-size: 2.2rem; font-weight: 800; }
.bundle__price del { color: var(--ink-soft); opacity: 0.7; font-size: 1.1rem; }
.bundle .btn { margin-top: auto; }
.bundle__meta { font-size: 0.78rem; color: var(--ink-soft); margin: 0.9rem 0 0; text-align: center; }

/* FAQ */
.faq { max-width: 48rem; }
.accordion { display: flex; flex-direction: column; gap: 0.85rem; }
.acc {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.acc__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: 0; cursor: pointer; padding: 1.25rem 1.4rem;
  font-family: var(--sans); font-size: 1.02rem; font-weight: 600; color: var(--ink); text-align: left;
}
.acc__head:hover { color: var(--gold-deep); }
.acc__icon { font-size: 1.5rem; color: var(--gold-deep); transition: transform 0.25s ease; flex: none; }
.acc.is-open .acc__icon { transform: rotate(45deg); }
.acc__body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.acc__body p { margin: 0; padding: 0 1.4rem 1.3rem; color: var(--ink-soft); }

/* CTA band */
.cta-band {
  background:
    radial-gradient(600px 300px at 80% 10%, rgba(200,162,92,0.25), transparent 60%),
    var(--ink);
  color: var(--cream); padding: 5rem 0;
}
.cta-band__inner { text-align: center; max-width: 38rem; margin: 0 auto; }
.cta-band h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 0.8rem; }
.cta-band p { color: rgba(250,246,241,0.78); margin: 0 0 2rem; font-size: 1.05rem; }

/* Footer */
.footer { background: var(--ink); color: rgba(250,246,241,0.8); padding: 3.5rem 0 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.6fr; gap: 2rem; padding-bottom: 2.5rem; }
.footer__brand p { font-size: 0.9rem; max-width: 18rem; margin: 1rem 0 0; }
.footer__col h4 { color: var(--cream); font-size: 0.95rem; margin: 0 0 1rem; }
.footer__col a { display: block; font-size: 0.9rem; padding: 0.28rem 0; color: rgba(250,246,241,0.72); }
.footer__col a:hover { color: var(--gold); }
.footer__news p { font-size: 0.88rem; margin: 0 0 0.9rem; }
.news { display: flex; gap: 0.5rem; }
.news input {
  flex: 1; min-width: 0; padding: 0.7rem 0.9rem; border-radius: 999px; border: 1px solid rgba(250,246,241,0.25);
  background: rgba(255,255,255,0.06); color: var(--cream); font-family: var(--sans); font-size: 0.9rem;
}
.news input::placeholder { color: rgba(250,246,241,0.5); }
.news input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.footer__base {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid rgba(250,246,241,0.14); padding-top: 1.5rem;
  font-size: 0.8rem; opacity: 0.7;
}

/* Sticky add-to-cart bar */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(250,246,241,0.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); box-shadow: 0 -8px 30px rgba(76,58,40,0.12);
  transform: translateY(110%); transition: transform 0.32s ease;
}
.sticky-bar.is-visible { transform: translateY(0); }
.sticky-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 24px; }
.sticky-bar__info { display: flex; flex-direction: column; }
.sticky-bar__name { font-weight: 700; font-size: 0.98rem; }
.sticky-bar__price { font-size: 0.85rem; color: var(--ink-soft); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 140%);
  background: var(--ink); color: var(--cream); padding: 0.85rem 1.4rem; border-radius: 999px;
  font-size: 0.92rem; font-weight: 600; box-shadow: var(--shadow-lg); z-index: 80;
  transition: transform 0.3s cubic-bezier(.2,.9,.3,1.2); pointer-events: none;
}
.toast.is-shown { transform: translate(-50%, 0); }
body.has-sticky .toast { bottom: 84px; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .benefits, .ingredients__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav__links {
    position: fixed; inset: 72px 0 auto 0;
    flex-direction: column; gap: 0; background: var(--cream);
    padding: 1rem 24px 1.4rem; border-bottom: 1px solid var(--line);
    transform: translateY(-130%); transition: transform 0.3s ease; box-shadow: var(--shadow-md);
  }
  .nav__links.is-open { transform: translateY(0); }
  .nav__links a { padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__copy { order: 2; }
  .hero__visual { order: 1; min-height: 360px; }
  .hero__actions, .hero__trust { justify-content: center; }
  .hero__sub { margin-left: auto; margin-right: auto; }
  .routine, .reviews, .bundles, .results { grid-template-columns: 1fr; }
  .section { padding: 4rem 0; }
}
@media (max-width: 520px) {
  .benefits, .ingredients__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__base { justify-content: center; text-align: center; }
  .press__row { gap: 1rem; }
  .press__logos { gap: 1.3rem; }
  .hero__title { font-size: clamp(2.2rem, 9vw, 3rem); }
  .sticky-bar__price { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

(function () {
  "use strict";

  /* ---------- Mobile nav toggle ---------- */
  var toggle = document.getElementById("navToggle");
  var links = document.getElementById("navLinks");
  if (toggle && links) {
    toggle.addEventListener("click", function () {
      var open = links.classList.toggle("is-open");
      toggle.classList.toggle("is-open", open);
      toggle.setAttribute("aria-expanded", String(open));
      toggle.setAttribute("aria-label", open ? "Close menu" : "Open menu");
    });
    links.addEventListener("click", function (e) {
      if (e.target.tagName === "A") {
        links.classList.remove("is-open");
        toggle.classList.remove("is-open");
        toggle.setAttribute("aria-expanded", "false");
      }
    });
  }

  /* ---------- Nav scrolled state ---------- */
  var nav = document.getElementById("nav");
  function onScroll() {
    if (nav) nav.classList.toggle("is-scrolled", window.scrollY > 8);
  }
  window.addEventListener("scroll", onScroll, { passive: true });
  onScroll();

  /* ---------- Toast helper ---------- */
  var toastEl = document.getElementById("toast");
  var toastTimer;
  function toast(msg) {
    if (!toastEl) return;
    toastEl.textContent = msg;
    toastEl.classList.add("is-shown");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function () {
      toastEl.classList.remove("is-shown");
    }, 2600);
  }

  document.querySelectorAll("[data-toast]").forEach(function (el) {
    el.addEventListener("click", function (e) {
      // Allow anchor links to still scroll
      if (el.tagName === "BUTTON") e.preventDefault();
      toast(el.getAttribute("data-toast"));
    });
  });

  /* ---------- Newsletter form ---------- */
  var newsForm = document.getElementById("newsForm");
  if (newsForm) {
    newsForm.addEventListener("submit", function (e) {
      e.preventDefault();
      var input = newsForm.querySelector("input");
      toast("You're in ✦ check your inbox for 10% off");
      newsForm.reset();
      if (input) input.blur();
    });
  }

  /* ---------- FAQ accordion ---------- */
  var accs = document.querySelectorAll(".acc");
  accs.forEach(function (acc) {
    var head = acc.querySelector(".acc__head");
    var body = acc.querySelector(".acc__body");
    if (!head || !body) return;
    head.addEventListener("click", function () {
      var open = acc.classList.contains("is-open");
      // Close all others (single-open accordion)
      accs.forEach(function (other) {
        if (other !== acc) {
          other.classList.remove("is-open");
          var ob = other.querySelector(".acc__body");
          var oh = other.querySelector(".acc__head");
          if (ob) ob.style.maxHeight = null;
          if (oh) oh.setAttribute("aria-expanded", "false");
        }
      });
      if (open) {
        acc.classList.remove("is-open");
        body.style.maxHeight = null;
        head.setAttribute("aria-expanded", "false");
      } else {
        acc.classList.add("is-open");
        body.style.maxHeight = body.scrollHeight + "px";
        head.setAttribute("aria-expanded", "true");
      }
    });
  });

  /* ---------- Scroll reveal ---------- */
  var revealEls = document.querySelectorAll(".reveal");
  if ("IntersectionObserver" in window) {
    var io = new IntersectionObserver(
      function (entries) {
        entries.forEach(function (entry) {
          if (entry.isIntersecting) {
            entry.target.classList.add("is-in");
            io.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
    );
    revealEls.forEach(function (el) { io.observe(el); });
  } else {
    revealEls.forEach(function (el) { el.classList.add("is-in"); });
  }

  /* ---------- Sticky add-to-cart bar ---------- */
  var stickyBar = document.getElementById("stickyBar");
  var hero = document.querySelector(".hero");
  var bundles = document.getElementById("bundles");
  if (stickyBar && hero && "IntersectionObserver" in window) {
    var heroVisible = true;
    var bundlesVisible = false;

    function update() {
      // Show once past the hero, hide again when the bundles section is in view
      var show = !heroVisible && !bundlesVisible;
      stickyBar.classList.toggle("is-visible", show);
      stickyBar.setAttribute("aria-hidden", String(!show));
      document.body.classList.toggle("has-sticky", show);
    }

    new IntersectionObserver(function (e) {
      heroVisible = e[0].isIntersecting;
      update();
    }, { threshold: 0.05 }).observe(hero);

    if (bundles) {
      new IntersectionObserver(function (e) {
        bundlesVisible = e[0].isIntersecting;
        update();
      }, { threshold: 0.2 }).observe(bundles);
    }
  }
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Lumère — Hydrating Glow Serum</title>
  <meta name="description" content="Lumère Dew Drops — a dermatologist-tested hydrating glow serum with hyaluronic acid, niacinamide and squalane. Clean, vegan, dewy skin in 14 days." />
  <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=Cormorant+Garamond:wght@500;600&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <!-- Announcement bar -->
  <div class="announce" role="region" aria-label="Promotion">
    Free shipping on orders over $45 · 30-day glow guarantee
  </div>

  <!-- Nav -->
  <header class="nav" id="nav">
    <div class="nav__inner container">
      <a href="#top" class="logo" aria-label="Lumère home">
        <span class="logo__mark" aria-hidden="true"></span>
        Lumère
      </a>
      <nav class="nav__links" id="navLinks" aria-label="Primary">
        <a href="#benefits">Benefits</a>
        <a href="#ingredients">Ingredients</a>
        <a href="#routine">Routine</a>
        <a href="#reviews">Reviews</a>
        <a href="#bundles">Shop</a>
      </nav>
      <div class="nav__cta">
        <a href="#bundles" class="btn btn--solid btn--sm">Add to cart · $38</a>
      </div>
      <button class="nav__toggle" id="navToggle" aria-label="Open menu" aria-expanded="false" aria-controls="navLinks">
        <span></span><span></span><span></span>
      </button>
    </div>
  </header>

  <main id="top">
    <!-- Hero -->
    <section class="hero">
      <div class="container hero__grid">
        <div class="hero__copy reveal">
          <span class="eyebrow">New · Dew Drops Serum</span>
          <h1 class="hero__title">Skin that looks lit from within.</h1>
          <p class="hero__sub">
            A weightless hydrating glow serum with triple hyaluronic acid, 5% niacinamide
            and squalane. Plump, dewy, calm skin — visibly in 14 days.
          </p>
          <div class="hero__actions">
            <a href="#bundles" class="btn btn--solid" data-toast="Added Dew Drops to your cart ✦">
              Add to cart · $38
            </a>
            <a href="#routine" class="btn btn--ghost">See the routine</a>
          </div>
          <ul class="hero__trust">
            <li><strong>4.9★</strong> 12,400 reviews</li>
            <li><strong>Clean</strong> vegan · cruelty-free</li>
            <li><strong>Tested</strong> by dermatologists</li>
          </ul>
        </div>

        <div class="hero__visual reveal">
          <div class="bottle">
            <div class="bottle__glass">
              <span class="bottle__label">
                Lumère<br><em>Dew&nbsp;Drops</em>
              </span>
            </div>
            <div class="bottle__cap"></div>
            <div class="bottle__shadow" aria-hidden="true"></div>
          </div>
          <div class="hero__pill hero__pill--a">+72% hydration</div>
          <div class="hero__pill hero__pill--b">Fragrance-free</div>
        </div>
      </div>
    </section>

    <!-- Social proof / press -->
    <section class="press" aria-label="As seen in">
      <div class="container press__row">
        <span>As featured in</span>
        <div class="press__logos">
          <span>VÉRA</span><span>GLOSSE</span><span>The Cut+</span><span>BYRDE</span><span>élan</span>
        </div>
      </div>
    </section>

    <!-- Benefits grid -->
    <section class="section" id="benefits">
      <div class="container">
        <header class="section__head reveal">
          <span class="eyebrow">Why it works</span>
          <h2>Everything skin loves. Nothing it doesn't.</h2>
          <p class="section__lead">Formulated with under 12 ingredients — each one earns its place.</p>
        </header>
        <div class="benefits">
          <article class="card reveal">
            <div class="card__icon" aria-hidden="true">💧</div>
            <h3>Deep hydration</h3>
            <p>Three molecular weights of hyaluronic acid draw moisture to every layer for plump, bouncy skin.</p>
          </article>
          <article class="card reveal">
            <div class="card__icon" aria-hidden="true">🌿</div>
            <h3>Clean &amp; vegan</h3>
            <p>No fragrance, sulfates, parabens or drying alcohols. Just clinically-loved actives.</p>
          </article>
          <article class="card reveal">
            <div class="card__icon" aria-hidden="true">🩺</div>
            <h3>Dermatologist-tested</h3>
            <p>Patch-tested and approved for sensitive, reactive and acne-prone skin types.</p>
          </article>
          <article class="card reveal">
            <div class="card__icon" aria-hidden="true">✦</div>
            <h3>Glow, not grease</h3>
            <p>A featherlight finish that layers under SPF and makeup without pilling or shine.</p>
          </article>
        </div>
      </div>
    </section>

    <!-- Ingredients callouts -->
    <section class="section section--cream" id="ingredients">
      <div class="container ingredients">
        <header class="section__head reveal">
          <span class="eyebrow">Inside the bottle</span>
          <h2>Hero ingredients, in honest doses.</h2>
        </header>
        <div class="ingredients__grid">
          <article class="ingredient reveal">
            <span class="ingredient__pct">x3</span>
            <h3>Hyaluronic Acid</h3>
            <p>Multi-weight hydration that holds up to 1,000× its weight in water.</p>
          </article>
          <article class="ingredient reveal">
            <span class="ingredient__pct">5%</span>
            <h3>Niacinamide</h3>
            <p>Refines pores, evens tone and strengthens the moisture barrier.</p>
          </article>
          <article class="ingredient reveal">
            <span class="ingredient__pct">2%</span>
            <h3>Squalane</h3>
            <p>Plant-derived lipid that seals in moisture and softens texture.</p>
          </article>
          <article class="ingredient reveal">
            <span class="ingredient__pct">1%</span>
            <h3>Panthenol (B5)</h3>
            <p>Soothes redness and calms post-cleanse tightness on contact.</p>
          </article>
        </div>
      </div>
    </section>

    <!-- Routine steps -->
    <section class="section" id="routine">
      <div class="container">
        <header class="section__head reveal">
          <span class="eyebrow">The ritual</span>
          <h2>Three steps to a lit-from-within glow.</h2>
          <p class="section__lead">Morning and night. Sixty seconds. That's it.</p>
        </header>
        <ol class="routine">
          <li class="routine__step reveal">
            <span class="routine__num">01</span>
            <h3>Cleanse</h3>
            <p>Start with clean, slightly damp skin so the serum has water to lock in.</p>
          </li>
          <li class="routine__step reveal">
            <span class="routine__num">02</span>
            <h3>Drop &amp; press</h3>
            <p>Press 3–4 drops of Dew Drops across the face and neck. Don't rub — pat.</p>
          </li>
          <li class="routine__step reveal">
            <span class="routine__num">03</span>
            <h3>Seal</h3>
            <p>Follow with moisturizer at night, or SPF by day, to lock the glow in.</p>
          </li>
        </ol>
        <div class="results reveal">
          <div class="results__stat"><strong>96%</strong><span>saw plumper, dewier skin in 2 weeks</span></div>
          <div class="results__stat"><strong>91%</strong><span>said skin felt calmer and less tight</span></div>
          <div class="results__stat"><strong>88%</strong><span>swapped a product for Dew Drops</span></div>
          <p class="results__note">Based on a 4-week consumer study of 142 participants.</p>
        </div>
      </div>
    </section>

    <!-- Reviews -->
    <section class="section section--cream" id="reviews">
      <div class="container">
        <header class="section__head reveal">
          <span class="eyebrow">Loved out loud</span>
          <h2>4.9 / 5 from 12,400 glowing reviews.</h2>
        </header>
        <div class="reviews">
          <figure class="review reveal">
            <div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
            <blockquote>My skin has never looked dewier. Three drops and I genuinely skip foundation now.</blockquote>
            <figcaption><strong>Amara T.</strong> · Combination skin · Verified buyer</figcaption>
          </figure>
          <figure class="review reveal">
            <div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
            <blockquote>Finally a serum that doesn't pill under SPF. The redness around my nose calmed in a week.</blockquote>
            <figcaption><strong>Priya N.</strong> · Sensitive skin · Verified buyer</figcaption>
          </figure>
          <figure class="review reveal">
            <div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
            <blockquote>Fragrance-free and it shows — zero irritation, all glow. I'm on bottle four.</blockquote>
            <figcaption><strong>Jordan M.</strong> · Acne-prone · Verified buyer</figcaption>
          </figure>
        </div>
      </div>
    </section>

    <!-- Bundles / pricing -->
    <section class="section" id="bundles">
      <div class="container">
        <header class="section__head reveal">
          <span class="eyebrow">Choose your glow</span>
          <h2>Save more when you stock up.</h2>
        </header>
        <div class="bundles">
          <article class="bundle reveal">
            <h3>Single</h3>
            <p class="bundle__desc">One 30ml bottle. Try the glow.</p>
            <div class="bundle__price"><span>$38</span></div>
            <button class="btn btn--ghost btn--block" data-toast="Single Dew Drops added ✦">Add to cart</button>
            <p class="bundle__meta">One-time purchase</p>
          </article>

          <article class="bundle bundle--featured reveal">
            <span class="bundle__flag">Most popular · Save 18%</span>
            <h3>Glow Duo</h3>
            <p class="bundle__desc">Two bottles. Never run out mid-routine.</p>
            <div class="bundle__price"><span>$62</span><del>$76</del></div>
            <button class="btn btn--solid btn--block" data-toast="Glow Duo added — you saved $14 ✦">Add to cart</button>
            <p class="bundle__meta">$31 / bottle · free shipping</p>
          </article>

          <article class="bundle reveal">
            <span class="bundle__flag bundle__flag--alt">Best value · Save 30%</span>
            <h3>Ritual Set</h3>
            <p class="bundle__desc">Serum, moisturizer &amp; SPF — the full ritual.</p>
            <div class="bundle__price"><span>$84</span><del>$120</del></div>
            <button class="btn btn--ghost btn--block" data-toast="Ritual Set added — you saved $36 ✦">Add to cart</button>
            <p class="bundle__meta">Free travel pouch included</p>
          </article>
        </div>
      </div>
    </section>

    <!-- FAQ -->
    <section class="section section--cream" id="faq">
      <div class="container faq">
        <header class="section__head reveal">
          <span class="eyebrow">Good to know</span>
          <h2>Questions, answered.</h2>
        </header>
        <div class="accordion" id="accordion">
          <div class="acc">
            <button class="acc__head" aria-expanded="false">
              <span>Is Dew Drops safe for sensitive skin?</span>
              <span class="acc__icon" aria-hidden="true">+</span>
            </button>
            <div class="acc__body"><p>Yes. It's fragrance-free, dermatologist-tested and patch-tested on sensitive, reactive and acne-prone skin. Always patch test new products first.</p></div>
          </div>
          <div class="acc">
            <button class="acc__head" aria-expanded="false">
              <span>When will I see results?</span>
              <span class="acc__icon" aria-hidden="true">+</span>
            </button>
            <div class="acc__body"><p>Most people notice plumper, dewier skin within the first few uses, with visible tone and texture improvement around the two-week mark.</p></div>
          </div>
          <div class="acc">
            <button class="acc__head" aria-expanded="false">
              <span>Can I use it with retinol or vitamin C?</span>
              <span class="acc__icon" aria-hidden="true">+</span>
            </button>
            <div class="acc__body"><p>Absolutely. Dew Drops layers beautifully under or over most actives. Apply it to damp skin first, then follow with your treatment.</p></div>
          </div>
          <div class="acc">
            <button class="acc__head" aria-expanded="false">
              <span>What's your return policy?</span>
              <span class="acc__icon" aria-hidden="true">+</span>
            </button>
            <div class="acc__body"><p>We offer a 30-day glow guarantee. If you're not seeing the glow, return it — even if the bottle's empty — for a full refund.</p></div>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA band -->
    <section class="cta-band">
      <div class="container cta-band__inner reveal">
        <h2>Your dewiest skin starts tonight.</h2>
        <p>Join 80,000+ people glowing with Lumère. 30-day guarantee, free shipping over $45.</p>
        <a href="#bundles" class="btn btn--solid" data-toast="Let's get you glowing ✦">Shop Dew Drops · $38</a>
      </div>
    </section>
  </main>

  <!-- Footer -->
  <footer class="footer">
    <div class="container footer__grid">
      <div class="footer__brand">
        <a href="#top" class="logo logo--light"><span class="logo__mark" aria-hidden="true"></span>Lumère</a>
        <p>Clean, dewy skincare made in small batches. Fictional brand for demo purposes.</p>
      </div>
      <nav class="footer__col" aria-label="Shop">
        <h4>Shop</h4>
        <a href="#bundles">Dew Drops Serum</a>
        <a href="#bundles">Glow Duo</a>
        <a href="#bundles">Ritual Set</a>
      </nav>
      <nav class="footer__col" aria-label="Company">
        <h4>Company</h4>
        <a href="#ingredients">Ingredients</a>
        <a href="#reviews">Reviews</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div class="footer__col footer__news">
        <h4>Get 10% off</h4>
        <p>Join the list for glow tips &amp; early drops.</p>
        <form class="news" id="newsForm">
          <label class="sr-only" for="email">Email address</label>
          <input id="email" type="email" placeholder="[email protected]" required />
          <button class="btn btn--solid btn--sm" type="submit">Join</button>
        </form>
      </div>
    </div>
    <div class="container footer__base">
      <span>© 2026 Lumère Skincare · Fictional brand</span>
      <span>Made for demonstration only</span>
    </div>
  </footer>

  <!-- Sticky add-to-cart bar -->
  <div class="sticky-bar" id="stickyBar" aria-hidden="true">
    <div class="container sticky-bar__inner">
      <div class="sticky-bar__info">
        <span class="sticky-bar__name">Dew Drops Serum</span>
        <span class="sticky-bar__price">$38 · 30ml</span>
      </div>
      <button class="btn btn--solid btn--sm" data-toast="Added Dew Drops to your cart ✦">Add to cart</button>
    </div>
  </div>

  <div class="toast" id="toast" role="status" aria-live="polite"></div>

  <script src="script.js"></script>
</body>
</html>

Skincare / Beauty Landing

A complete one-page direct-to-consumer landing for Lumère Dew Drops, a fictional hydrating glow serum. The design leans into a high-end beauty aesthetic: soft neutrals (blush, cream, sand) lifted with a subtle gold accent, a Cormorant Garamond serif for headlines paired with a clean Manrope sans, and a clean, dewy, premium feel throughout. The page opens with a sticky transparent nav and a split hero pairing a CSS-rendered product bottle with a strong claim, dual CTAs, and trust badges.

Below the hero, the page walks a shopper through the full conversion story: a press/social-proof strip, a four-up benefit grid, ingredient callouts with honest dosing, a three-step routine ritual backed by results stats, star-rated customer reviews, and three bundle pricing cards with a featured “most popular” tier. An accordion FAQ, a dark CTA band, and a newsletter footer round it out.

Interactions are all vanilla JavaScript with no dependencies: a mobile nav toggle, smooth in-page scrolling, IntersectionObserver scroll-reveal, a single-open FAQ accordion, a toast helper on every add-to-cart and the newsletter submit, and a sticky add-to-cart bar that slides up once you scroll past the hero and tucks away again over the pricing section. The layout is fully responsive down to ~360px with stacked sections and a slide-down mobile menu, and it respects prefers-reduced-motion.

Illustrative UI only — fictional brand, not a real product.