Pages Medium

Cookbook — Modern Wellness / Clean Eating landing

An airy modern-wellness cookbook landing in a calm bone, matcha and terracotta palette, pairing a Fraunces serif headline with light Inter body type. A minimal hero with floating CSS-gradient food bowls leads into a values row, a balanced-recipe grid with nutrition highlights, a seven-day meal-plan teaser and serene testimonials. Vanilla JS adds gentle scroll-reveal, a diet-preference toggle that relabels featured recipes, smooth-scroll nav and toast-backed signup forms.

Open in Lab

html css vanilla-js

Targets: JS HTML

Code

:root {
  /* Themed wellness palette: bone + matcha + terracotta */
  --bone: #f6f3ec;
  --paper: #fffefb;
  --ink: #25302a;
  --ink-2: #4f5b52;
  --muted: #8a948a;

  --matcha: #7fa05a;
  --matcha-d: #5f7e41;
  --matcha-soft: #e7eedd;
  --terracotta: #c9764f;
  --terracotta-d: #ad5e3a;
  --clay: #d8a07e;
  --sage: #9bb08f;

  --line: rgba(37, 48, 42, 0.1);
  --line-2: rgba(37, 48, 42, 0.18);

  --ok: #3f8f5f;
  --warn: #d98a2b;
  --danger: #c8412b;

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 26px;

  --shadow-1: 0 1px 2px rgba(37, 48, 42, 0.06);
  --shadow-2: 0 14px 40px rgba(37, 48, 42, 0.1);

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;

  --wrap: 1120px;
}

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

.visually-hidden,
.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;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--matcha-d);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--matcha);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Layout helpers ---------- */
.hero,
.values,
.recipes,
.plan,
.voices {
  padding: clamp(56px, 8vw, 104px) 24px;
}

.section-head {
  max-width: var(--wrap);
  margin: 0 auto clamp(28px, 4vw, 48px);
  text-align: center;
}

.section-head h2 {
  font-size: clamp(28px, 4vw, 44px);
  margin-top: 8px;
}

.section-sub {
  color: var(--ink-2);
  max-width: 56ch;
  margin: 14px auto 0;
}

.kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--matcha-d);
  padding: 5px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--matcha-soft);
}
.kicker-light {
  background: rgba(255, 255, 255, 0.6);
  color: var(--matcha-d);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.btn-primary {
  background: var(--matcha-d);
  color: #fff;
  box-shadow: var(--shadow-1);
}
.btn-primary:hover {
  background: var(--matcha);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.btn-primary:active {
  transform: translateY(0);
}
.btn-ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink);
}
.btn-ghost:hover {
  border-color: var(--matcha);
  color: var(--matcha-d);
  background: var(--matcha-soft);
}

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(246, 243, 236, 0.82);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
}
.brand-mark {
  font-size: 22px;
}
.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: auto;
}
.nav-links a {
  color: var(--ink-2);
  font-weight: 500;
  font-size: 15px;
  position: relative;
  padding: 4px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--matcha);
  transition: width 0.22s ease;
}
.nav-links a:hover {
  color: var(--ink);
}
.nav-links a:hover::after {
  width: 100%;
}
.nav-cta {
  margin-left: 4px;
}

/* ---------- Hero ---------- */
.hero {
  background: radial-gradient(
      120% 90% at 85% -10%,
      var(--matcha-soft) 0%,
      transparent 55%
    ),
    radial-gradient(90% 70% at 0% 110%, #f1ece0 0%, transparent 50%), var(--bone);
}
.hero-grid {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.hero-copy h1 {
  font-size: clamp(38px, 6vw, 66px);
  margin: 18px 0 0;
}
.lede {
  color: var(--ink-2);
  font-size: clamp(17px, 2vw, 20px);
  margin-top: 18px;
  max-width: 46ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
.hero-stats {
  display: flex;
  gap: 36px;
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
}
.hero-stats li {
  display: flex;
  flex-direction: column;
}
.hero-stats strong {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--ink);
}
.hero-stats span {
  font-size: 13px;
  color: var(--muted);
}

/* Hero food "photo" art */
.hero-art {
  position: relative;
  min-height: 380px;
}
.bowl {
  position: absolute;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-2);
  border: 6px solid var(--paper);
}
.bowl-emoji {
  font-size: clamp(40px, 8vw, 84px);
  filter: drop-shadow(0 6px 10px rgba(37, 48, 42, 0.18));
}
.bowl-main {
  width: 64%;
  aspect-ratio: 1;
  left: 14%;
  top: 8%;
  background: radial-gradient(circle at 32% 28%, #eaf0df, #cdd9b8 70%, #b9c79f);
}
.bowl-1 {
  width: 34%;
  aspect-ratio: 1;
  right: 2%;
  top: 0;
  background: radial-gradient(circle at 35% 30%, #f4ead9, #e6c9a6 75%);
  z-index: 2;
}
.bowl-2 {
  width: 30%;
  aspect-ratio: 1;
  left: 0;
  bottom: 4%;
  background: radial-gradient(circle at 35% 30%, #fbf3d6, #f1dd9b 75%);
  z-index: 2;
}
.leaf {
  position: absolute;
  font-size: 30px;
  opacity: 0.85;
  animation: sway 6s ease-in-out infinite;
}
.leaf-1 {
  top: 4%;
  left: 8%;
}
.leaf-2 {
  bottom: 2%;
  right: 10%;
  animation-delay: -3s;
}
@keyframes sway {
  0%,
  100% {
    transform: rotate(-6deg) translateY(0);
  }
  50% {
    transform: rotate(8deg) translateY(-6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .leaf {
    animation: none;
  }
}

/* ---------- Values ---------- */
.values {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.value-row {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.value {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.value:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-2);
}
.value-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--matcha-soft);
  display: grid;
  place-items: center;
  font-size: 26px;
  margin-bottom: 16px;
}
.value h3 {
  font-size: 20px;
  margin-bottom: 8px;
}
.value p {
  color: var(--ink-2);
  font-size: 15px;
}

/* ---------- Recipes ---------- */
.diet-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 22px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-1);
}
.diet-btn {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-2);
  background: transparent;
  border: none;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.diet-btn:hover {
  color: var(--ink);
  background: var(--matcha-soft);
}
.diet-btn.is-active {
  background: var(--matcha-d);
  color: #fff;
}
.diet-status {
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted);
}

.recipe-grid {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.recipe-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.recipe-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2);
}
.photo {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 80% at 50% 120%,
    rgba(37, 48, 42, 0.16),
    transparent 60%
  );
}
.photo-emoji {
  font-size: 64px;
  filter: drop-shadow(0 8px 14px rgba(37, 48, 42, 0.22));
  z-index: 1;
}
.photo-matcha {
  background: radial-gradient(circle at 30% 25%, #e9f0db, #b9cd96 70%, #9bb074);
}
.photo-terracotta {
  background: radial-gradient(circle at 30% 25%, #f3d8c4, #d99064 70%, #c0703f);
}
.photo-bone {
  background: radial-gradient(circle at 30% 25%, #fbf7ee, #ece2cf 70%, #ddd0b6);
}
.photo-sage {
  background: radial-gradient(circle at 30% 25%, #e6ede0, #aec2a2 70%, #93aa86);
}
.photo-clay {
  background: radial-gradient(circle at 30% 25%, #f6e3d2, #e0ad84 70%, #cf915f);
}
.photo-mint {
  background: radial-gradient(circle at 30% 25%, #e4f1e4, #aed8b4 70%, #8cc198);
}
.recipe-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.recipe-tag {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--matcha-d);
  background: var(--matcha-soft);
  padding: 4px 10px;
  border-radius: 999px;
}
.recipe-body h3 {
  font-size: 21px;
}
.recipe-body > p {
  color: var(--ink-2);
  font-size: 15px;
}
.nutri {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
}
.nutri li {
  flex: 1;
  text-align: center;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
}
.nutri strong {
  font-family: var(--serif);
  font-size: 17px;
}
.nutri span {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.recipe-meta {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Meal plan ---------- */
.plan {
  background: linear-gradient(135deg, var(--matcha-soft), #eef3e2);
}
.plan-card {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 56px);
  box-shadow: var(--shadow-2);
}
.plan-copy h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  margin: 10px 0 14px;
}
.plan-copy > p {
  color: var(--ink-2);
}
.plan-points {
  list-style: none;
  padding: 0;
  margin: 20px 0 26px;
  display: grid;
  gap: 10px;
}
.plan-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--ink);
}
.plan-points span {
  color: var(--matcha-d);
  font-weight: 700;
}
.plan-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.plan-form input,
.footer-form input {
  flex: 1;
  min-width: 180px;
  padding: 12px 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 15px;
  background: var(--paper);
  color: var(--ink);
}
.plan-form input:focus,
.footer-form input:focus {
  outline: none;
  border-color: var(--matcha);
  box-shadow: 0 0 0 3px var(--matcha-soft);
}
.plan-fine {
  font-size: 13px;
  color: var(--muted);
  margin-top: 12px;
}

.plan-art {
  display: grid;
  place-items: center;
}
.plan-week {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 320px;
}
.plan-week span {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 14px;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  box-shadow: var(--shadow-1);
}
.plan-week span:last-child {
  grid-column: span 2;
}

/* ---------- Voices ---------- */
.voices {
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.voice-row {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.voice {
  margin: 0;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px;
}
.voice blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink);
}
.voice figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--matcha-soft);
  font-size: 18px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: #d7ddd5;
  padding: clamp(48px, 6vw, 72px) 24px 28px;
}
.footer-grid {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 32px;
}
.site-footer .brand {
  color: #fff;
}
.footer-brand p {
  margin-top: 12px;
  font-size: 14px;
  color: #aab4ab;
  max-width: 32ch;
}
.footer-col h4 {
  color: #fff;
  font-size: 15px;
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  color: #aeb8af;
  font-size: 14px;
  padding: 4px 0;
  transition: color 0.16s ease;
}
.footer-col a:hover {
  color: #fff;
}
.footer-col p {
  font-size: 14px;
  color: #aab4ab;
  margin-bottom: 12px;
}
.footer-form {
  display: flex;
  gap: 8px;
}
.footer-form input {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.footer-form input::placeholder {
  color: #8d978e;
}
.footer-form .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.footer-form .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
}
.footer-base {
  max-width: var(--wrap);
  margin: 36px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: #8d978e;
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 90;
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .value-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .recipe-grid,
  .voice-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 16px;
  }
  .nav-links {
    display: none;
  }
  .hero-grid,
  .plan-card {
    grid-template-columns: 1fr;
  }
  .hero-art {
    min-height: 280px;
    order: -1;
  }
  .hero-stats {
    gap: 24px;
  }
  .recipe-grid,
  .voice-row {
    grid-template-columns: 1fr;
  }
  .footer-base {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .value-row {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .hero-stats {
    flex-wrap: wrap;
  }
}

/* ---------- Print-friendly recipe cards ---------- */
@media print {
  .site-header,
  .hero-art,
  .diet-toggle,
  .plan,
  .voices,
  .site-footer,
  .toast {
    display: none !important;
  }
  body {
    background: #fff;
  }
  .recipe-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #999;
  }
}

(function () {
  "use strict";

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

  /* ---------- Gentle scroll-reveal ---------- */
  var reveals = Array.prototype.slice.call(document.querySelectorAll(".reveal"));
  var reduceMotion = window.matchMedia(
    "(prefers-reduced-motion: reduce)"
  ).matches;

  if (reduceMotion || !("IntersectionObserver" in window)) {
    reveals.forEach(function (el) {
      el.classList.add("is-visible");
    });
  } else {
    var io = new IntersectionObserver(
      function (entries) {
        entries.forEach(function (entry) {
          if (entry.isIntersecting) {
            entry.target.classList.add("is-visible");
            io.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.14, rootMargin: "0px 0px -8% 0px" }
    );
    reveals.forEach(function (el) {
      io.observe(el);
    });
  }

  /* ---------- Smooth-scroll for in-page nav ---------- */
  document.querySelectorAll('a[href^="#"]').forEach(function (link) {
    link.addEventListener("click", function (e) {
      var id = link.getAttribute("href");
      if (id.length < 2) return;
      var target = document.querySelector(id);
      if (!target) return;
      e.preventDefault();
      target.scrollIntoView({
        behavior: reduceMotion ? "auto" : "smooth",
        block: "start",
      });
      if (typeof target.focus === "function") {
        target.setAttribute("tabindex", "-1");
        target.focus({ preventScroll: true });
      }
    });
  });

  /* ---------- Diet-preference toggle ---------- */
  // Each diet relabels the featured recipe tag + writes a calm status line.
  var dietCopy = {
    balanced: {
      tag: "Featured · Balanced",
      note: "Showing balanced highlights — fibre, protein and fats in harmony.",
    },
    vegan: {
      tag: "Featured · Vegan",
      note: "Reframed for fully plant-based eating — no animal products.",
    },
    protein: {
      tag: "Featured · High protein",
      note: "Leaning into protein-rich plates to keep you full and steady.",
    },
    lowcarb: {
      tag: "Featured · Lower carb",
      note: "Lighter on grains, leaning into greens and good fats.",
    },
  };

  var dietBtns = Array.prototype.slice.call(
    document.querySelectorAll(".diet-btn")
  );
  var dietTags = Array.prototype.slice.call(
    document.querySelectorAll("[data-recipe-tag]")
  );
  var statusEl = document.querySelector("[data-diet-status]");

  function setDiet(diet) {
    var copy = dietCopy[diet] || dietCopy.balanced;
    dietTags.forEach(function (tag) {
      tag.textContent = copy.tag;
    });
    if (statusEl) statusEl.textContent = copy.note;
    dietBtns.forEach(function (btn) {
      var active = btn.getAttribute("data-diet") === diet;
      btn.classList.toggle("is-active", active);
      btn.setAttribute("aria-pressed", active ? "true" : "false");
    });
  }

  dietBtns.forEach(function (btn) {
    btn.addEventListener("click", function () {
      setDiet(btn.getAttribute("data-diet"));
    });
  });

  /* ---------- Forms (illustrative) ---------- */
  function handleSignup(form, success) {
    if (!form) return;
    form.addEventListener("submit", function (e) {
      e.preventDefault();
      var input = form.querySelector('input[type="email"]');
      var value = input ? input.value.trim() : "";
      if (!value || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(value)) {
        if (input) input.focus();
        toast("Please enter a valid email.");
        return;
      }
      form.reset();
      toast(success);
    });
  }

  handleSignup(
    document.querySelector("[data-plan-form]"),
    "Welcome — your sample week is on its way (demo)."
  );
  handleSignup(
    document.querySelector("[data-foot-form]"),
    "You're in. One gentle email each Sunday (demo)."
  );

  /* ---------- Generic demo links ---------- */
  document
    .querySelectorAll("[data-toast]:not(.toast)")
    .forEach(function (el) {
      el.addEventListener("click", function (e) {
        e.preventDefault();
        toast(el.getAttribute("data-toast"));
      });
    });
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Verdant — Modern Wellness Kitchen</title>
  <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=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <a class="skip-link" href="#main">Skip to content</a>

  <header class="site-header" role="banner">
    <nav class="nav" aria-label="Primary">
      <a class="brand" href="#top" aria-label="Verdant home">
        <span class="brand-mark" aria-hidden="true">🌿</span>
        <span class="brand-name">Verdant</span>
      </a>
      <ul class="nav-links">
        <li><a href="#values">Why Verdant</a></li>
        <li><a href="#recipes">Recipes</a></li>
        <li><a href="#plan">Meal plan</a></li>
        <li><a href="#voices">Voices</a></li>
      </ul>
      <a class="btn btn-ghost nav-cta" href="#plan">Start eating well</a>
    </nav>
  </header>

  <main id="main">
    <section class="hero" id="top">
      <div class="hero-grid">
        <div class="hero-copy reveal">
          <span class="kicker">Whole food · Plant-forward · Calm</span>
          <h1>Eat well, gently.<br />Nourish without the noise.</h1>
          <p class="lede">Verdant is a quiet kitchen for clean, balanced meals — seasonal produce, honest portions, and recipes that fit a real, busy life.</p>
          <div class="hero-actions">
            <a class="btn btn-primary" href="#plan">Start eating well</a>
            <a class="btn btn-ghost" href="#recipes">Browse recipes</a>
          </div>
          <ul class="hero-stats" aria-label="At a glance">
            <li><strong>420+</strong><span>balanced recipes</span></li>
            <li><strong>15 min</strong><span>median prep</span></li>
            <li><strong>100%</strong><span>whole-food</span></li>
          </ul>
        </div>
        <div class="hero-art reveal" aria-hidden="true">
          <div class="bowl bowl-main"><span class="bowl-emoji">🥗</span></div>
          <div class="bowl bowl-1"><span class="bowl-emoji">🥑</span></div>
          <div class="bowl bowl-2"><span class="bowl-emoji">🍋</span></div>
          <div class="leaf leaf-1">🌿</div>
          <div class="leaf leaf-2">🌿</div>
        </div>
      </div>
    </section>

    <section class="values" id="values" aria-labelledby="values-title">
      <div class="section-head reveal">
        <span class="kicker">Why Verdant</span>
        <h2 id="values-title">A calmer way to eat well</h2>
      </div>
      <div class="value-row">
        <article class="value reveal">
          <div class="value-icon" aria-hidden="true">🌱</div>
          <h3>Plant-forward</h3>
          <p>Vegetables lead the plate. Animal foods are optional accents, never the headline.</p>
        </article>
        <article class="value reveal">
          <div class="value-icon" aria-hidden="true">⚖️</div>
          <h3>Truly balanced</h3>
          <p>Every recipe is built around fibre, protein and healthy fats — no crash diets.</p>
        </article>
        <article class="value reveal">
          <div class="value-icon" aria-hidden="true">⏱️</div>
          <h3>Realistically fast</h3>
          <p>Most weeknight dishes land on the table in under 25 minutes, start to finish.</p>
        </article>
        <article class="value reveal">
          <div class="value-icon" aria-hidden="true">🍃</div>
          <h3>Seasonal &amp; honest</h3>
          <p>Fictional but plausible recipes tuned to what's fresh — no obscure ingredients.</p>
        </article>
      </div>
    </section>

    <section class="recipes" id="recipes" aria-labelledby="recipes-title">
      <div class="section-head reveal">
        <span class="kicker">Balanced recipes</span>
        <h2 id="recipes-title">This week's featured plates</h2>
        <p class="section-sub">Pick how you like to eat — the highlights below adapt to your preference.</p>
        <div class="diet-toggle" role="group" aria-label="Diet preference">
          <button type="button" class="diet-btn is-active" data-diet="balanced" aria-pressed="true">Balanced</button>
          <button type="button" class="diet-btn" data-diet="vegan" aria-pressed="false">Vegan</button>
          <button type="button" class="diet-btn" data-diet="protein" aria-pressed="false">High protein</button>
          <button type="button" class="diet-btn" data-diet="lowcarb" aria-pressed="false">Lower carb</button>
        </div>
        <p class="diet-status" aria-live="polite" data-diet-status>Showing balanced highlights.</p>
      </div>

      <div class="recipe-grid">
        <article class="recipe-card reveal" data-tone="matcha">
          <div class="photo photo-matcha" aria-hidden="true"><span class="photo-emoji">🍵</span></div>
          <div class="recipe-body">
            <span class="recipe-tag" data-recipe-tag>Featured · Balanced</span>
            <h3>Matcha-glazed greens &amp; grains bowl</h3>
            <p>Charred broccolini, freekeh and a bright matcha-tahini drizzle.</p>
            <ul class="nutri">
              <li><strong>480</strong><span>kcal</span></li>
              <li><strong>21g</strong><span>protein</span></li>
              <li><strong>11g</strong><span>fibre</span></li>
            </ul>
            <div class="recipe-meta"><span>⏱️ 20 min</span><span>🌿 Easy</span></div>
          </div>
        </article>

        <article class="recipe-card reveal" data-tone="terracotta">
          <div class="photo photo-terracotta" aria-hidden="true"><span class="photo-emoji">🥘</span></div>
          <div class="recipe-body">
            <span class="recipe-tag" data-recipe-tag>Featured · Balanced</span>
            <h3>Smoky terracotta lentil stew</h3>
            <p>Slow red lentils, roasted pepper, cumin and a swirl of herbed yogurt.</p>
            <ul class="nutri">
              <li><strong>520</strong><span>kcal</span></li>
              <li><strong>26g</strong><span>protein</span></li>
              <li><strong>14g</strong><span>fibre</span></li>
            </ul>
            <div class="recipe-meta"><span>⏱️ 35 min</span><span>🌿 Easy</span></div>
          </div>
        </article>

        <article class="recipe-card reveal" data-tone="bone">
          <div class="photo photo-bone" aria-hidden="true"><span class="photo-emoji">🥑</span></div>
          <div class="recipe-body">
            <span class="recipe-tag" data-recipe-tag>Featured · Balanced</span>
            <h3>Avocado &amp; white bean smash toast</h3>
            <p>Cannellini, lemon, chilli flakes and microgreens on seeded sourdough.</p>
            <ul class="nutri">
              <li><strong>410</strong><span>kcal</span></li>
              <li><strong>18g</strong><span>protein</span></li>
              <li><strong>12g</strong><span>fibre</span></li>
            </ul>
            <div class="recipe-meta"><span>⏱️ 12 min</span><span>🌿 Easy</span></div>
          </div>
        </article>

        <article class="recipe-card reveal" data-tone="sage">
          <div class="photo photo-sage" aria-hidden="true"><span class="photo-emoji">🥒</span></div>
          <div class="recipe-body">
            <span class="recipe-tag" data-recipe-tag>Featured · Balanced</span>
            <h3>Cucumber, edamame &amp; sesame crunch</h3>
            <p>Smashed cucumber, edamame, toasted sesame and a ginger-lime dressing.</p>
            <ul class="nutri">
              <li><strong>360</strong><span>kcal</span></li>
              <li><strong>22g</strong><span>protein</span></li>
              <li><strong>9g</strong><span>fibre</span></li>
            </ul>
            <div class="recipe-meta"><span>⏱️ 15 min</span><span>🌿 Easy</span></div>
          </div>
        </article>

        <article class="recipe-card reveal" data-tone="clay">
          <div class="photo photo-clay" aria-hidden="true"><span class="photo-emoji">🍠</span></div>
          <div class="recipe-body">
            <span class="recipe-tag" data-recipe-tag>Featured · Balanced</span>
            <h3>Roast sweet potato &amp; tahini grain bowl</h3>
            <p>Caramelised sweet potato, quinoa, pomegranate and creamy tahini.</p>
            <ul class="nutri">
              <li><strong>540</strong><span>kcal</span></li>
              <li><strong>19g</strong><span>protein</span></li>
              <li><strong>13g</strong><span>fibre</span></li>
            </ul>
            <div class="recipe-meta"><span>⏱️ 30 min</span><span>🌿 Easy</span></div>
          </div>
        </article>

        <article class="recipe-card reveal" data-tone="matcha">
          <div class="photo photo-mint" aria-hidden="true"><span class="photo-emoji">🫛</span></div>
          <div class="recipe-body">
            <span class="recipe-tag" data-recipe-tag>Featured · Balanced</span>
            <h3>Spring pea &amp; mint soup</h3>
            <p>Sweet peas, mint, leek and a spoon of cashew cream — bright and light.</p>
            <ul class="nutri">
              <li><strong>320</strong><span>kcal</span></li>
              <li><strong>16g</strong><span>protein</span></li>
              <li><strong>10g</strong><span>fibre</span></li>
            </ul>
            <div class="recipe-meta"><span>⏱️ 25 min</span><span>🌿 Easy</span></div>
          </div>
        </article>
      </div>
    </section>

    <section class="plan" id="plan" aria-labelledby="plan-title">
      <div class="plan-card reveal">
        <div class="plan-copy">
          <span class="kicker kicker-light">Meal plan</span>
          <h2 id="plan-title">Seven calm days, planned for you</h2>
          <p>Your week of balanced dinners, a tidy shopping list and gentle prep notes — delivered every Sunday morning. Pause or adjust any time.</p>
          <ul class="plan-points">
            <li><span aria-hidden="true">✓</span> 7 dinners + 3 lunches, auto-balanced</li>
            <li><span aria-hidden="true">✓</span> One-tap grocery list, sorted by aisle</li>
            <li><span aria-hidden="true">✓</span> Adapts to your diet preference</li>
          </ul>
          <form class="plan-form" data-plan-form novalidate>
            <label class="visually-hidden" for="plan-email">Email address</label>
            <input id="plan-email" type="email" name="email" placeholder="you@example.com" autocomplete="email" required />
            <button class="btn btn-primary" type="submit">Get my plan</button>
          </form>
          <p class="plan-fine">No spam. Illustrative demo — nothing is actually sent.</p>
        </div>
        <div class="plan-art" aria-hidden="true">
          <div class="plan-week">
            <span>Mon 🥗</span><span>Tue 🍲</span><span>Wed 🥑</span>
            <span>Thu 🍵</span><span>Fri 🍠</span><span>Sat 🫛</span><span>Sun 🥒</span>
          </div>
        </div>
      </div>
    </section>

    <section class="voices" id="voices" aria-labelledby="voices-title">
      <div class="section-head reveal">
        <span class="kicker">Voices</span>
        <h2 id="voices-title">Quietly loved by home cooks</h2>
      </div>
      <div class="voice-row">
        <figure class="voice reveal">
          <blockquote>Verdant made weeknight cooking feel calm again. The portions are honest and the food actually tastes like food.</blockquote>
          <figcaption><span class="avatar" aria-hidden="true">🌼</span> Mara L. · Lisbon</figcaption>
        </figure>
        <figure class="voice reveal">
          <blockquote>I stopped dreading the &ldquo;what's for dinner&rdquo; spiral. The meal plan does the thinking and the grocery list is genius.</blockquote>
          <figcaption><span class="avatar" aria-hidden="true">🌾</span> Devin O. · Portland</figcaption>
        </figure>
        <figure class="voice reveal">
          <blockquote>Plant-forward without feeling preachy. My family didn't even notice it was &ldquo;the healthy thing.&rdquo;</blockquote>
          <figcaption><span class="avatar" aria-hidden="true">🍃</span> Priya S. · Bristol</figcaption>
        </figure>
      </div>
    </section>
  </main>

  <footer class="site-footer" role="contentinfo">
    <div class="footer-grid">
      <div class="footer-brand">
        <a class="brand" href="#top"><span class="brand-mark" aria-hidden="true">🌿</span><span class="brand-name">Verdant</span></a>
        <p>A quiet kitchen for clean, balanced eating. Seasonal, plant-forward, unhurried.</p>
      </div>
      <nav class="footer-col" aria-label="Recipes">
        <h4>Recipes</h4>
        <a href="#recipes">Bowls</a><a href="#recipes">Soups</a><a href="#recipes">Toasts</a><a href="#recipes">Salads</a>
      </nav>
      <nav class="footer-col" aria-label="Company">
        <h4>Verdant</h4>
        <a href="#values">Our approach</a><a href="#plan">Meal plan</a><a href="#voices">Voices</a><a href="#top">Top</a>
      </nav>
      <div class="footer-col">
        <h4>Stay seasonal</h4>
        <p>One gentle email each Sunday. No noise.</p>
        <form class="footer-form" data-foot-form novalidate>
          <label class="visually-hidden" for="foot-email">Email</label>
          <input id="foot-email" type="email" name="email" placeholder="you@example.com" required />
          <button class="btn btn-ghost" type="submit">Join</button>
        </form>
      </div>
    </div>
    <div class="footer-base">
      <span>© 2026 Verdant Kitchen — fictional demo.</span>
      <span>Illustrative UI · not dietary advice.</span>
    </div>
  </footer>

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

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

Modern Wellness / Clean Eating landing

A premium-minimal landing page for a clean-eating cookbook, built around calm whitespace and a bone, matcha and terracotta palette. The hero pairs an editorial Fraunces headline with light Inter body copy and a cluster of floating CSS-gradient “food bowls” — no images or libraries, just radial gradients and a few tasteful emoji accents that read as food photography. A values row, a balanced-recipe grid with per-dish nutrition (kcal, protein, fibre), a seven-day meal-plan teaser and quiet testimonials complete the page.

Everything is wired with vanilla JS. A diet-preference toggle (Balanced, Vegan, High protein, Lower carb) re-labels the featured recipe tags and updates an aria-live status line. Sections fade up via an IntersectionObserver scroll-reveal that respects prefers-reduced-motion, in-page nav links smooth-scroll and move focus for keyboard users, and the meal-plan and footer signup forms validate the email then confirm with a toast.

Accessibility and responsiveness are first-class: landmark roles, a skip link, visible focus rings, WCAG-AA contrast, a print stylesheet that isolates the recipe cards, and a layout that collapses gracefully from desktop down to ~360px.

Illustrative UI only — recipes & nutrition data are fictional, not dietary advice.