<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nature Happy — good things, plainly good for you</title>
<script src="https://cdn.tailwindcss.com"></script>
<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:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Work+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          paper: '#FEFCFA',
          ink: '#2A2632',
          sage: '#6E9463',
          sagedeep: '#47643F',
          sagetint: '#E8F0E3',
          lilac: '#9B72C9',
          lilactint: '#F3ECFA',
        },
        fontFamily: {
          display: ['"Fraunces"', 'serif'],
          sans: ['"Work Sans"', 'sans-serif'],
        },
      },
    },
  };
</script>
<style>
  html { scroll-behavior: smooth; }
  body { font-family: 'Work Sans', sans-serif; background: #FEFCFA; color: #2A2632; }
  .blob-1 { border-radius: 63% 37% 54% 46% / 43% 37% 63% 57%; }
  .blob-2 { border-radius: 42% 58% 61% 39% / 51% 44% 56% 49%; }
  .blob-3 { border-radius: 55% 45% 39% 61% / 60% 41% 59% 40%; }
  .blob-4 { border-radius: 48% 52% 66% 34% / 38% 53% 47% 62%; }
  .hero-in { opacity: 0; transform: translateY(14px); animation: heroIn 0.9s cubic-bezier(.22,.61,.36,1) forwards; }
  .hero-in.d1 { animation-delay: .08s; }
  .hero-in.d2 { animation-delay: .2s; }
  .hero-in.d3 { animation-delay: .32s; }
  .hero-in.d4 { animation-delay: .44s; }
  @keyframes heroIn { to { opacity: 1; transform: translateY(0); } }
  .hero-img-in { opacity: 0; transform: scale(.94); animation: heroImgIn 1.1s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: .18s; }
  @keyframes heroImgIn { to { opacity: 1; transform: scale(1); } }
  @media (prefers-reduced-motion: reduce) {
    .hero-in, .hero-img-in { animation: none; opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
  }
  .link-underline { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .25s ease; }
  .link-underline:hover { background-size: 100% 1px; }
  @media (prefers-reduced-motion: reduce) {
    .link-underline { transition: none; }
  }
</style>
</head>
<body class="bg-paper text-ink antialiased">

  <!-- Header -->
  <header class="sticky top-0 z-40 bg-paper/95 backdrop-blur border-b border-sagetint">
    <div class="max-w-6xl mx-auto px-6 h-20 flex items-center justify-between">
      <a href="#" class="font-display text-2xl text-ink">Nature Happy</a>
      <nav class="hidden lg:flex items-center gap-9 text-[15px]">
        <a href="#shop" class="link-underline hover:text-sagedeep transition-colors">Shop</a>
        <a href="#food" class="link-underline hover:text-sagedeep transition-colors">Food</a>
        <a href="#home" class="link-underline hover:text-sagedeep transition-colors">Home</a>
        <a href="#body" class="link-underline hover:text-sagedeep transition-colors">Body</a>
        <a href="#ideas" class="link-underline hover:text-sagedeep transition-colors">Ideas for living</a>
      </nav>
      <div class="hidden lg:block">
        <a href="#newsletter" class="inline-flex items-center rounded-full bg-sagedeep text-paper text-[14px] font-medium px-5 py-2.5 hover:bg-ink transition-colors duration-200">Get the email</a>
      </div>
      <button id="menuBtn" aria-expanded="false" aria-controls="mobileMenu" class="lg:hidden inline-flex flex-col justify-center gap-[5px] w-9 h-9">
        <span class="block h-[2px] w-6 bg-ink"></span>
        <span class="block h-[2px] w-6 bg-ink"></span>
        <span class="block h-[2px] w-4 bg-ink"></span>
      </button>
    </div>
    <div id="mobileMenu" class="hidden lg:hidden border-t border-sagetint bg-paper">
      <div class="px-6 py-6 flex flex-col gap-5 text-[16px]">
        <a href="#shop" class="mobile-link">Shop</a>
        <a href="#food" class="mobile-link">Food</a>
        <a href="#home" class="mobile-link">Home</a>
        <a href="#body" class="mobile-link">Body</a>
        <a href="#ideas" class="mobile-link">Ideas for living</a>
        <a href="#newsletter" class="inline-flex w-fit items-center rounded-full bg-sagedeep text-paper text-[14px] font-medium px-5 py-2.5 mt-1">Get the email</a>
      </div>
    </div>
  </header>

  <!-- Hero -->
  <section class="relative overflow-hidden">
    <div class="max-w-6xl mx-auto px-6 pt-16 pb-20 lg:pt-24 lg:pb-28 grid lg:grid-cols-2 gap-14 items-center">
      <div>
        <p class="hero-in d1 text-[15px] text-sagedeep font-medium mb-5">Food, nature, and everyday life</p>
        <h1 class="hero-in d2 font-display text-[2.75rem] leading-[1.08] sm:text-[3.4rem] sm:leading-[1.06] text-ink">
          Good things,<br />plainly good for you.
        </h1>
        <p class="hero-in d3 mt-6 text-[18px] leading-relaxed text-ink/75 max-w-md">
          Food, home, and body care picked for short ingredient lists and honest making — from the people who make them.
        </p>
        <div class="hero-in d4 mt-9 flex items-center gap-8 flex-wrap">
          <a href="#shop" class="inline-flex items-center rounded-full bg-sagedeep text-paper text-[15px] font-medium px-7 py-3.5 hover:bg-ink transition-colors duration-200">Shop the essentials</a>
          <a href="#ideas" class="link-underline text-[15px] font-medium text-sagedeep">Read the journal</a>
        </div>
      </div>
      <div class="relative hero-img-in">
        <div class="absolute -inset-6 sm:-inset-10 rounded-full bg-lilactint -z-10"></div>
        <div class="absolute -bottom-6 -left-4 w-16 h-16 rounded-full bg-lilac/70 -z-10"></div>
        <div class="overflow-hidden blob-1 aspect-[4/5] w-full max-w-md mx-auto">
          <img src="https://images.pexels.com/photos/12969371/pexels-photo-12969371.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="Sunlit hands cradling soil and a young seedling" class="w-full h-full object-cover" />
        </div>
      </div>
    </div>
  </section>

  <!-- Editorial statement -->
  <section class="bg-lilactint">
    <div class="max-w-6xl mx-auto px-6 py-20 lg:py-24 grid lg:grid-cols-[auto_1fr] gap-8 lg:gap-16 items-start">
      <div class="w-10 h-10 rounded-full bg-lilac shrink-0 mt-2"></div>
      <p class="font-display italic text-[1.6rem] sm:text-[2rem] leading-[1.35] text-ink max-w-2xl">
        Nature Happy starts with the thing itself — an ingredient, an object, a recipe, a maker — and follows it wherever it goes.
      </p>
    </div>
  </section>

  <!-- Territories -->
  <section class="bg-paper">
    <div class="max-w-6xl mx-auto px-6 py-20 lg:py-28">
      <div class="grid sm:grid-cols-2 gap-8">

        <div id="food" class="group rounded-3xl overflow-hidden bg-white border border-ink/10 shadow-sm hover:shadow-xl transition-shadow duration-300">
          <div class="overflow-hidden aspect-[6/5]">
            <img src="https://www.naturehappy.co.za/wp-content/uploads/2026/09/pexels-photo-36096929-3.jpeg" alt="Fresh green beans piled in a wooden crate at an outdoor market" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
          </div>
          <div class="p-7">
            <span class="text-[11px] font-semibold tracking-widest uppercase text-sagedeep">Food</span>
            <h3 class="font-display text-[1.4rem] text-ink mt-2">What's in season, what's in the pantry</h3>
            <p class="mt-2 text-[14px] leading-relaxed text-ink/70">The recipes we keep coming back to, the ingredients behind them, and the people who grow them.</p>
            <a href="#" class="link-underline inline-block mt-4 text-[14px] font-medium text-sagedeep">Explore Food</a>
          </div>
        </div>

        <div id="home" class="group rounded-3xl overflow-hidden bg-white border border-ink/10 shadow-sm hover:shadow-xl transition-shadow duration-300">
          <div class="overflow-hidden aspect-[6/5]">
            <img src="https://www.naturehappy.co.za/wp-content/uploads/2026/09/pexels-photo-32960958-scaled.jpeg" alt="A cozy kitchen nook with warm sunlight through the window" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
          </div>
          <div class="p-7">
            <span class="text-[11px] font-semibold tracking-widest uppercase text-lilac">Home</span>
            <h3 class="font-display text-[1.4rem] text-ink mt-2">Things for the kitchen and the house</h3>
            <p class="mt-2 text-[14px] leading-relaxed text-ink/70">Tools and materials made to be used every day, built to outlast a season.</p>
            <a href="#" class="link-underline inline-block mt-4 text-[14px] font-medium text-sagedeep">Explore Home</a>
          </div>
        </div>

        <div id="body" class="group rounded-3xl overflow-hidden bg-white border border-ink/10 shadow-sm hover:shadow-xl transition-shadow duration-300">
          <div class="overflow-hidden aspect-[6/5]">
            <img src="https://www.naturehappy.co.za/wp-content/uploads/2026/09/pexels-photo-35101526-scaled.jpeg" alt="A minimalist flat lay of a natural skincare serum bottle in soft light" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
          </div>
          <div class="p-7">
            <span class="text-[11px] font-semibold tracking-widest uppercase text-lilac">Body</span>
            <h3 class="font-display text-[1.4rem] text-ink mt-2">Care with a short ingredient list</h3>
            <p class="mt-2 text-[14px] leading-relaxed text-ink/70">Skincare we can explain in a sentence. A considered edit, not a full shelf.</p>
            <a href="#" class="link-underline inline-block mt-4 text-[14px] font-medium text-sagedeep">Explore Body</a>
          </div>
        </div>

        <div id="ideas" class="group rounded-3xl overflow-hidden bg-white border border-ink/10 shadow-sm hover:shadow-xl transition-shadow duration-300">
          <div class="overflow-hidden aspect-[6/5]">
            <img src="https://www.naturehappy.co.za/wp-content/uploads/2026/09/pexels-photo-7728876-3.jpeg" alt="Close-up of hands tending to soil in a garden" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
          </div>
          <div class="p-7">
            <span class="text-[11px] font-semibold tracking-widest uppercase text-sagedeep">Ideas for living</span>
            <h3 class="font-display text-[1.4rem] text-ink mt-2">Eat. Make. Create. Explore.</h3>
            <p class="mt-2 text-[14px] leading-relaxed text-ink/70">Guides and small experiments. We try the thing, then write down what happened.</p>
            <a href="#" class="link-underline inline-block mt-4 text-[14px] font-medium text-sagedeep">Explore Ideas for living</a>
          </div>
        </div>

      </div>
    </div>
  </section>

  <!-- Featured story (text-only, deliberate no-photo treatment) -->
  <section class="bg-sagedeep text-paper">
    <div class="max-w-6xl mx-auto px-6 py-20 lg:py-24">
      <div class="max-w-2xl">
        <h2 class="font-display text-[2rem] sm:text-[2.5rem] leading-[1.15]">Five ingredients, one afternoon, a loaf of bread.</h2>
        <p class="mt-5 text-[17px] leading-relaxed text-paper/80">No starter, no stand mixer, no waiting three days for a rise. Just the version of no-knead bread we actually make on a Tuesday.</p>
        <a href="#" class="link-underline inline-block mt-6 text-[15px] font-medium">Read the story</a>
      </div>
    </div>
  </section>

  <!-- The edit (flat colour-block treatment, no stock photos) -->
  <section id="shop" class="bg-paper">
    <div class="max-w-6xl mx-auto px-6 py-20 lg:py-28">
      <h2 class="font-display text-[1.9rem] sm:text-[2.2rem] text-ink max-w-md">A short list of things we're enjoying.</h2>
      <div class="mt-12 grid sm:grid-cols-3 gap-6">

        <div class="bg-sagetint p-8 rounded-[2rem]">
          <div class="w-14 h-14 rounded-full bg-sage/60 blob-2"></div>
          <h3 class="font-display text-[1.25rem] mt-6 text-ink">Raw wildflower honey</h3>
          <p class="mt-2 text-[14px] leading-relaxed text-ink/70">One hive, one harvest, unfiltered.</p>
        </div>

        <div class="bg-lilactint p-8 rounded-[2rem]">
          <div class="w-14 h-14 rounded-full bg-lilac/60 blob-3"></div>
          <h3 class="font-display text-[1.25rem] mt-6 text-ink">Cederberg rooibos, loose-leaf</h3>
          <p class="mt-2 text-[14px] leading-relaxed text-ink/70">Sun-dried on the same slopes for a hundred years.</p>
        </div>

        <div class="bg-sagetint p-8 rounded-[2rem]">
          <div class="w-14 h-14 rounded-full bg-sage/60 blob-4"></div>
          <h3 class="font-display text-[1.25rem] mt-6 text-ink">Hand-thrown stoneware</h3>
          <p class="mt-2 text-[14px] leading-relaxed text-ink/70">Every piece slightly different, on purpose.</p>
        </div>

      </div>
    </div>
  </section>

  <!-- Newsletter -->
  <section id="newsletter" class="bg-lilactint text-ink">
    <div class="max-w-xl mx-auto px-6 py-20 lg:py-24 text-center">
      <h2 class="font-display text-[1.9rem] sm:text-[2.2rem]">Get the occasional email.</h2>
      <p class="mt-4 text-[15px] leading-relaxed text-ink/70">New stories, seasonal food, and anything we add to the shop. No more than once a week.</p>
      <form class="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
        <label for="email" class="sr-only">Email address</label>
        <input id="email" type="email" required placeholder="you@example.com" class="rounded-full px-5 py-3 text-[15px] text-ink bg-paper placeholder:text-ink/40 border border-lilac/30 focus:outline-none focus:ring-2 focus:ring-sagedeep w-full sm:w-72" />
        <button type="submit" class="rounded-full px-7 py-3 text-[15px] font-medium bg-sagedeep text-paper hover:bg-ink transition-colors duration-200">Subscribe</button>
      </form>
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-paper border-t border-sagetint">
    <div class="max-w-6xl mx-auto px-6 py-14 flex flex-col sm:flex-row sm:items-start justify-between gap-10">
      <div>
        <p class="font-display text-xl text-ink">Nature Happy</p>
        <p class="mt-3 text-[14px] text-ink/60">Food, nature, and everyday life.</p>
        <p class="text-[14px] text-ink/60">naturehappy.co.za</p>
      </div>
      <nav class="flex flex-col gap-3 text-[14px]">
        <a href="#shop" class="link-underline text-ink/80 hover:text-sagedeep w-fit">Shop</a>
        <a href="#food" class="link-underline text-ink/80 hover:text-sagedeep w-fit">Food</a>
        <a href="#home" class="link-underline text-ink/80 hover:text-sagedeep w-fit">Home</a>
        <a href="#body" class="link-underline text-ink/80 hover:text-sagedeep w-fit">Body</a>
        <a href="#ideas" class="link-underline text-ink/80 hover:text-sagedeep w-fit">Ideas for living</a>
      </nav>
    </div>
  </footer>

  <style>
    .mobile-link { color: #2A2632; }
  </style>
  <script>
    const menuBtn = document.getElementById('menuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    menuBtn.addEventListener('click', () => {
      const isOpen = mobileMenu.classList.contains('hidden') === false;
      mobileMenu.classList.toggle('hidden');
      menuBtn.setAttribute('aria-expanded', String(!isOpen));
    });
    mobileMenu.addEventListener('click', (e) => {
      if (e.target.tagName === 'A') {
        mobileMenu.classList.add('hidden');
        menuBtn.setAttribute('aria-expanded', 'false');
      }
    });
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && !mobileMenu.classList.contains('hidden')) {
        mobileMenu.classList.add('hidden');
        menuBtn.setAttribute('aria-expanded', 'false');
      }
    });
  </script>
</body>
</html>