TheTiffinFood/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#090b12" />
    <meta name="description" content="The Tiffin Food — goal-oriented meals for the body you are building." />
    <title>The Tiffin Food — Eat with intent</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=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="noise"></div>
    <header class="site-header">
      <a class="brand" href="#" aria-label="The Tiffin Food home">
        <span class="brand-mark"><i></i><i></i><i></i></span>
        <span>THE TIFFIN<br /><b>FOOD</b></span>
      </a>
      <nav class="nav-links" aria-label="Main navigation">
        <a href="#menu">The menu</a>
        <a href="#method">Our method</a>
        <a href="#contact">Contact</a>
      </nav>
      <a class="header-cta" href="#menu">Build your box <span>↗</span></a>
    </header>

    <main>
      <section class="hero">
        <div class="hero-copy">
          <p class="eyebrow"><span class="pulse"></span> Food for the body in progress</p>
          <h1>Eat with<br /><em>intent.</em></h1>
          <p class="hero-description">Goal-oriented meals, cooked fresh and timed for your office or college day. No noise. Just the right fuel for wherever you are going.</p>
          <a class="button button-primary" href="#menu">Find your fuel <span>↓</span></a>
        </div>
        <div class="hero-orbit" aria-hidden="true">
          <img class="hero-food-image" src="https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&fit=crop&w=1100&q=88" alt="" />
          <div class="orbit orbit-one"></div>
          <div class="orbit orbit-two"></div>
          <div class="orbit orbit-three"></div>
          <div class="core">
            <span class="core-kicker">01 / 04</span>
            <strong>FUEL<br />THE<br /><em>FORM</em></strong>
            <span class="core-line"></span>
            <span class="core-caption">Precision nutrition<br />for real life.</span>
          </div>
          <span class="orbit-label label-top">NUTRIENT<br />DENSITY</span>
          <span class="orbit-label label-right">FRESH<br />EVERY DAY</span>
        </div>
        <div class="scroll-note"><span>01</span><span class="scroll-line"></span><span>SCROLL TO EXPLORE</span></div>
      </section>

      <section class="marquee" aria-label="Our principles">
        <div class="marquee-track"><span>CALCULATED FLAVOR</span><b>✳</b><span>FRESH BY DESIGN</span><b>✳</b><span>YOUR GOAL. OUR CRAFT.</span><b>✳</b><span>CALCULATED FLAVOR</span><b>✳</b></div>
      </section>

      <section class="schedule-callout" aria-labelledby="schedule-heading">
        <div class="schedule-callout-copy">
          <p class="eyebrow"><span class="pulse"></span> Built for the day ahead</p>
          <h2 id="schedule-heading">Not home at<br /><em>lunchtime?</em></h2>
          <p>Get your tiffin before you leave, pack it for the office or college, and eat fresh when your schedule says.</p>
          <a class="text-link" href="pricing.html?mode=balanced">Set your arrival time <span>↗</span></a>
        </div>
        <div class="schedule-flow" aria-label="How scheduled delivery works">
          <div class="schedule-step"><span>01</span><strong>Choose</strong><small>Your meal plan</small></div>
          <span class="schedule-arrow">→</span>
          <div class="schedule-step"><span>02</span><strong>Receive</strong><small>Before you head out</small></div>
          <span class="schedule-arrow">→</span>
          <div class="schedule-step"><span>03</span><strong>Pack & go</strong><small>Fresh food, your timing</small></div>
        </div>
      </section>

      <section class="menu-section" id="menu">
        <div class="section-intro">
          <p class="eyebrow">02 / Choose your direction</p>
          <h2>Four ways to<br /><em>show up.</em></h2>
          <p>Every body has a different brief. Pick the one that sounds like your next chapter.</p>
        </div>
        <div class="meal-grid">
          <article class="meal-card card-lime" data-goal="Lean" data-mode="lean" tabindex="0">
            <div class="card-number">01</div>
            <div class="food-orb orb-lime"><img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=700&q=88" alt="Fresh salad bowl with vegetables and grains" /><span>LOW<br />FAT</span></div>
            <div class="card-content"><p class="card-tag">The cut</p><h3>Lean<br />mode</h3><p>Minimal fats. Maximum clarity. Light, clean meals to help you move sharper.</p><button class="card-action" type="button">Explore meal <span>↗</span></button></div>
          </article>
          <article class="meal-card card-orange" data-goal="Protein" data-mode="protein" tabindex="0">
            <div class="card-number">02</div>
            <div class="food-orb orb-orange"><img src="https://images.unsplash.com/photo-1532550907401-a500c9a57435?auto=format&fit=crop&w=700&q=88" alt="High protein chicken and vegetables meal" /><span>HIGH<br />PROTEIN</span></div>
            <div class="card-content"><p class="card-tag">The build</p><h3>Protein<br />mode</h3><p>Pure protein power for the work you put in, from first rep to last.</p><button class="card-action" type="button">Explore meal <span>↗</span></button></div>
          </article>
          <article class="meal-card card-violet" data-goal="Bulk" data-mode="bulk" tabindex="0">
            <div class="card-number">03</div>
            <div class="food-orb orb-violet"><img src="https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?auto=format&fit=crop&w=700&q=88" alt="Colorful rice, vegetables and protein meal" /><span>CARBS +<br />PROTEIN</span></div>
            <div class="card-content"><p class="card-tag">The gain</p><h3>Bulk<br />mode</h3><p>Intentional calories, complex carbs and protein in a bigger, bolder box.</p><button class="card-action" type="button">Explore meal <span>↗</span></button></div>
          </article>
          <article class="meal-card card-blue" data-goal="Balanced" data-mode="balanced" tabindex="0">
            <div class="card-number">04</div>
            <div class="food-orb orb-blue"><img src="https://images.unsplash.com/photo-1543352634-a1c51d9f1fa7?auto=format&fit=crop&w=700&q=88" alt="Balanced meal with vegetables, grains and protein" /><span>ALL-ROUND<br />GOOD</span></div>
            <div class="card-content"><p class="card-tag">The flow</p><h3>Balanced<br />mode</h3><p>A little bit of everything, dialed into a rhythm you can actually keep.</p><button class="card-action" type="button">Explore meal <span>↗</span></button></div>
          </article>
        </div>
      </section>

      <section class="method-section" id="method">
        <div class="method-stamp">HOW IT<br />WORKS <span>↘</span></div>
        <div class="method-copy"><p class="eyebrow">03 / The tiffin protocol</p><h2>Your day.<br /><em>Your tiffin.</em></h2><p>Customize your meals and choose a delivery window that works around your lectures, classes, meetings, and commute. We cook fresh so your tiffin is ready when you are.</p><a class="text-link" href="#menu">Customize your tiffin <span>↗</span></a></div>
        <div class="steps"><div class="step"><span>01</span><h3>Choose your goal</h3><p>Pick the fuel that fits your body and routine.</p></div><div class="step"><span>02</span><h3>Set your timing</h3><p>Choose an office or college delivery window.</p></div><div class="step"><span>03</span><h3>Make it yours</h3><p>Share preferences and we will handle the cooking.</p></div></div>
      </section>

      <section class="contact-section" id="contact">
        <p class="eyebrow">04 / Ready when you are</p>
        <h2>Make your next<br /><em>meal count.</em></h2>
        <p class="contact-note">Fresh tiffins for busy desks, campuses, and everything in between.</p>
        <a class="button button-light" href="#menu">Build your tiffin <span>↗</span></a>
      </section>
    </main>

    <footer><a class="brand" href="#"><span class="brand-mark"><i></i><i></i><i></i></span><span>THE TIFFIN<br /><b>FOOD</b></span></a><p>© 2023 The Tiffin Food / Made for your next.</p></footer>
    <script src="script.js"></script>
  </body>
</html>