Enhance customization options for tiffin delivery and update related styles

index.html

@@ -31,7 +31,7 @@
         <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 delivered on your frequency. No noise. Just the right fuel for wherever you are going.</p>
+          <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">
@@ -55,6 +55,22 @@
         <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>
@@ -87,18 +103,19 @@
 
       <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>Small box.<br /><em>Big energy.</em></h2><p>We turn nutrition science into food you look forward to. Tell us the goal, choose your rhythm, and we will handle the rest.</p><a class="text-link" href="#contact">See the protocol <span>↗</span></a></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="pricing.html?mode=balanced">Customize your tiffin <span>↗</span></a></div>
-        <div class="steps"><div class="step"><span>01</span><h3>Choose your goal</h3><p>Tell us what you are building towards.</p></div><div class="step"><span>02</span><h3>Set your frequency</h3><p>Daily, weekly, or whenever you need a reset.</p></div><div class="step"><span>03</span><h3>We do the cooking</h3><p>Fresh food, delivered to your door.</p></div></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>
-        <a class="button button-light" href="mailto:hello@thetiffinfood.com">Start your order <span>↗</span></a>
+        <p class="contact-note">Fresh tiffins for busy desks, campuses, and everything in between.</p>
+        <a class="button button-light" href="pricing.html?mode=balanced">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>© 2024 The Tiffin Food / Made for your next.</p></footer>
+    <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>

pricing.css

@@ -14,4 +14,17 @@
 .price-card strong{font-size:40px;letter-spacing:-.05em;margin:28px 0}
 .price-card strong span{color:var(--muted);font:12px "DM Mono",monospace;letter-spacing:0;margin-left:8px}
 .price-card .button{align-self:flex-start}
+.customize-section{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:130px;padding-top:34px;border-top:1px solid var(--line)}
+.customize-section h2{font-size:clamp(48px,6vw,82px);line-height:.92;letter-spacing:-.07em;margin:18px 0 26px}
+.customize-section>div>p:last-child{color:var(--muted);font-size:16px;line-height:1.6;max-width:430px}
+.customize-form{display:grid;gap:10px;align-content:start}
+.customize-form label{font:500 11px "DM Mono",monospace;letter-spacing:.08em;text-transform:uppercase;margin-top:8px}
+.customize-form select,.customize-form textarea{width:100%;border:1px solid var(--line);border-radius:0;background:rgba(241,240,234,.04);color:var(--paper);font:14px "Space Grotesk",sans-serif;padding:14px;outline:none}
+.customize-form select:focus,.customize-form textarea:focus{border-color:var(--lime)}
+.customize-form select option{background:var(--ink);color:var(--paper)}
+.customize-form textarea{resize:vertical}
+.customize-form .button{margin-top:12px;justify-self:start;border:0;cursor:pointer}
+.form-note{color:var(--lime);font:11px "DM Mono",monospace;min-height:16px}
+.contact-note{color:var(--muted);margin:0 auto 28px;max-width:380px}
 @media(max-width:760px){.pricing-page{padding:38px 20px 80px}.pricing-intro{padding:70px 0 52px}.pricing-options{grid-template-columns:1fr}.price-card{min-height:260px}}
+@media(max-width:760px){.customize-section{grid-template-columns:1fr;gap:42px;margin-top:90px}}

pricing.html

@@ -33,6 +33,32 @@
         <h2 id="pricing-heading">Choose your box</h2>
         <div id="pricing-options" class="pricing-options"></div>
       </section>
+
+      <section class="customize-section" aria-labelledby="customize-heading">
+        <div>
+          <p class="eyebrow">06 / Make it work for you</p>
+          <h2 id="customize-heading">Customize your<br /><em>tiffin run.</em></h2>
+          <p>Tell us where you spend your day and when you need your meal. We will prepare it fresh and plan around your schedule.</p>
+        </div>
+        <form id="customize-form" class="customize-form">
+          <label for="destination">I need my tiffin at</label>
+          <select id="destination" name="destination">
+            <option>Office</option>
+            <option>College</option>
+          </select>
+          <label for="timing">Preferred delivery window</label>
+          <select id="timing" name="timing">
+            <option>7:30 AM – 9:00 AM</option>
+            <option>12:00 PM – 1:30 PM</option>
+            <option>4:00 PM – 5:30 PM</option>
+            <option>Custom timing (tell us below)</option>
+          </select>
+          <label for="preferences">Meal preferences</label>
+          <textarea id="preferences" name="preferences" rows="3" placeholder="Less spicy, no onion, add extra protein..."></textarea>
+          <button class="button button-primary" type="submit">Send my preferences <span>↗</span></button>
+          <p class="form-note" role="status" aria-live="polite"></p>
+        </form>
+      </section>
     </main>
 
     <footer><a class="brand" href="index.html"><span class="brand-mark"><i></i><i></i><i></i></span><span>THE TIFFIN<br /><b>FOOD</b></span></a><p>© 2024 The Tiffin Food / Made for your next.</p></footer>

pricing.js

@@ -46,3 +46,17 @@ document.querySelector("#pricing-options").innerHTML = options
     </article>
   `)
   .join("");
+
+document.querySelector("#customize-form").addEventListener("submit", (event) => {
+  event.preventDefault();
+  const form = new FormData(event.currentTarget);
+  const subject = `${selected.name} mode — customized tiffin`;
+  const body = [
+    `Plan: ${selected.name} mode`,
+    `Destination: ${form.get("destination")}`,
+    `Preferred delivery window: ${form.get("timing")}`,
+    `Meal preferences: ${form.get("preferences") || "None specified"}`,
+  ].join("\n");
+  window.location.href = `mailto:hello@thetiffinfood.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+  document.querySelector(".form-note").textContent = "Opening your email app with your tiffin preferences.";
+});

styles.css

@@ -10,3 +10,5 @@
 .meal-card:hover .food-orb img,.meal-card:focus .food-orb img{transform:scale(1.08);filter:saturate(1.3) contrast(1.12)}
 .food-orb span{position:relative;z-index:1;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8);font-weight:500}
 .food-orb:after{z-index:2}.food-orb:before{z-index:2}
+
+.schedule-callout{margin:0 5.3vw;padding:54px clamp(24px,5vw,72px);display:grid;grid-template-columns:minmax(280px,.9fr) 1.1fr;gap:clamp(40px,8vw,130px);align-items:center;background:linear-gradient(115deg,rgba(213,243,75,.13),rgba(213,243,75,.035));border:1px solid rgba(213,243,75,.45);position:relative;overflow:hidden}.schedule-callout:after{content:"";position:absolute;width:280px;height:280px;border:1px solid rgba(213,243,75,.2);border-radius:50%;right:-100px;top:-160px}.schedule-callout-copy{position:relative;z-index:1}.schedule-callout-copy .eyebrow{color:var(--lime);margin-bottom:22px}.schedule-callout-copy h2{font-size:clamp(43px,5vw,72px);line-height:.88;letter-spacing:-.08em;font-weight:500;margin:0 0 22px}.schedule-callout-copy>p:not(.eyebrow){color:var(--paper);font-size:15px;line-height:1.55;max-width:390px;margin-bottom:28px}.schedule-flow{display:flex;align-items:center;gap:clamp(10px,2vw,28px);position:relative;z-index:1}.schedule-step{display:flex;flex-direction:column;gap:7px;min-width:100px}.schedule-step span{color:var(--lime);font:11px "DM Mono",monospace}.schedule-step strong{font-size:17px;font-weight:500}.schedule-step small{color:var(--muted);font:10px/1.4 "DM Mono",monospace;text-transform:uppercase;letter-spacing:.04em}.schedule-arrow{color:var(--lime);font-size:22px}@media(max-width:760px){.schedule-callout{margin:0 20px;padding:38px 25px;grid-template-columns:1fr;gap:38px}.schedule-flow{align-items:flex-start;gap:12px}.schedule-step{min-width:0;flex:1}.schedule-arrow{padding-top:19px;font-size:16px}.schedule-step strong{font-size:14px}.schedule-step small{font-size:9px}}