From 4697dab339e9e8daeeedeb933a1205f3aa5d63ce Mon Sep 17 00:00:00 2001 From: debu-2 Date: Thu, 8 Oct 2026 05:19:46 +0530 Subject: [PATCH] Tiffin food --- TheTiffinFood/README.md | 93 ++++++++++++++++++++++++++++ TheTiffinFood/index.html | 121 +++++++++++++++++++++++++++++++++++++ TheTiffinFood/pricing.css | 32 ++++++++++ TheTiffinFood/pricing.html | 69 +++++++++++++++++++++ TheTiffinFood/pricing.js | 74 +++++++++++++++++++++++ TheTiffinFood/script.js | 18 ++++++ TheTiffinFood/styles.css | 17 ++++++ docker-compose.yml | 7 +++ 8 files changed, 431 insertions(+) create mode 100644 TheTiffinFood/README.md create mode 100644 TheTiffinFood/index.html create mode 100644 TheTiffinFood/pricing.css create mode 100644 TheTiffinFood/pricing.html create mode 100644 TheTiffinFood/pricing.js create mode 100644 TheTiffinFood/script.js create mode 100644 TheTiffinFood/styles.css diff --git a/TheTiffinFood/README.md b/TheTiffinFood/README.md new file mode 100644 index 0000000..5b86015 --- /dev/null +++ b/TheTiffinFood/README.md @@ -0,0 +1,93 @@ +# The Tiffin Food + +Hyper-futuristic landing page and ordering flow for a goal-oriented tiffin service. + +The Tiffin Food helps people choose meals based on the body and lifestyle they are working toward, then customize delivery around their office or college schedule: + +- **Lean mode** — minimal-fat meals for a lighter, sharper routine +- **Protein mode** — protein-focused meals to support strength and training +- **Bulk mode** — carbohydrate and protein-focused meals for intentional gains +- **Balanced mode** — a balanced mix of nutrients for sustainable everyday eating + +## Pricing + +Each mode has three monthly meal-frequency plans: + +| Mode | Breakfast, lunch & dinner | Lunch & dinner | Dinner | +| --- | ---: | ---: | ---: | +| Balanced | ₹5,000 | ₹4,000 | ₹2,000 | +| Bulk | ₹6,000 | ₹5,000 | ₹2,500 | +| Protein | ₹6,500 | ₹5,500 | ₹3,000 | +| Lean | ₹7,000 | ₹6,000 | ₹3,500 | + +## Experience + +The page combines a dark editorial interface with neon lime accents, orbital motion-inspired graphics, and hyper-realistic food photography. It includes: + +- Hero section with an orbital meal visual +- Responsive navigation and calls to action +- Animated principles marquee +- Highlighted “Not home at lunchtime?” positioning explaining how customers can receive a tiffin before leaving, pack it, and take it to work or college +- Four interactive meal goal cards that open a mode-specific pricing page +- Monthly pricing for breakfast/lunch/dinner, lunch/dinner, and dinner plans +- Tiffin customization for office or college delivery +- Delivery windows for morning, afternoon, evening, or custom timing +- Meal preference capture, including dietary and ingredient requests +- WhatsApp Business redirect with a pre-filled customization message +- Hover and keyboard focus states for meal cards +- Accessible keyboard and click navigation from each meal goal card +- Responsive layouts for desktop, tablet, and mobile screens + +## Project structure + +```text +. +├── index.html # Page structure and content +├── styles.css # Visual system, responsive layout, and image treatment +├── script.js # Meal card navigation +├── pricing.html # Mode-specific pricing page +├── pricing.css # Pricing page layout and responsive styles +├── pricing.js # Pricing data and plan rendering +└── README.md # Project documentation +``` + +## Run locally + +This is a dependency-free static site. Open `index.html` directly in a browser, or serve the folder with any local web server: + +```bash +python -m http.server 8000 +``` + +Then visit [http://localhost:8000](http://localhost:8000). + +## Image sources + +Meal photography is loaded from Unsplash using optimized image URLs. An internet connection is required for the remote images to appear. The page still retains its layout and visual overlays if the images are unavailable. + +## Customization + +- Update meal copy and labels in `index.html`. +- Adjust colors and responsive breakpoints in `styles.css`. +- Change the image URLs in the `.food-orb` elements to use different meals. +- Update plan names, descriptions, and prices in `pricing.js`. +- Update delivery destinations, timing windows, and preference fields in `pricing.html`. +- Update the WhatsApp Business recipient in `pricing.js` by changing `WHATSAPP_NUMBER`. Use the full international number without `+`, spaces, or dashes. + +## WhatsApp ordering + +Submitting the customization form opens WhatsApp with a message containing: + +- Selected meal mode +- Destination (office or college) +- Preferred delivery window +- Meal preferences + +The customer reviews the pre-filled message and sends it from WhatsApp. The current recipient is configured as `919453226814`. + +## Brand direction + +**Tone:** precise, energetic, modern, and intentional +**Primary accent:** neon lime +**Typography:** Space Grotesk for display text and DM Mono for labels and metadata +**Tagline:** *Eat with intent.* \ No newline at end of file diff --git a/TheTiffinFood/index.html b/TheTiffinFood/index.html new file mode 100644 index 0000000..a06a31f --- /dev/null +++ b/TheTiffinFood/index.html @@ -0,0 +1,121 @@ + + + + + + + + The Tiffin Food — Eat with intent + + + + + + +
+
+ + + THE TIFFIN
FOOD + + + Build your box ↗ +
+ +
+
+
+

Food for the body in progress

+

Eat with
intent.

+

Goal-oriented meals, cooked fresh and timed for your office or college day. No noise. Just the right fuel for wherever you are going.

+ Find your fuel ↓ +
+ +
01SCROLL TO EXPLORE
+
+ +
+
CALCULATED FLAVOR✳FRESH BY DESIGN✳YOUR GOAL. OUR CRAFT.✳CALCULATED FLAVOR✳
+
+ +
+
+

Built for the day ahead

+

Not home at
lunchtime?

+

Get your tiffin before you leave, pack it for the office or college, and eat fresh when your schedule says.

+ Set your arrival time ↗ +
+
+
01ChooseYour meal plan
+ → +
02ReceiveBefore you head out
+ → +
03Pack & goFresh food, your timing
+
+
+ + + +
+
HOW IT
WORKS ↘
+

03 / The tiffin protocol

Your day.
Your tiffin.

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.

Customize your tiffin ↗
+
01

Choose your goal

Pick the fuel that fits your body and routine.

02

Set your timing

Choose an office or college delivery window.

03

Make it yours

Share preferences and we will handle the cooking.

+
+ +
+

04 / Ready when you are

+

Make your next
meal count.

+

Fresh tiffins for busy desks, campuses, and everything in between.

+ Build your tiffin ↗ +
+
+ + + + + diff --git a/TheTiffinFood/pricing.css b/TheTiffinFood/pricing.css new file mode 100644 index 0000000..f6dfc2e --- /dev/null +++ b/TheTiffinFood/pricing.css @@ -0,0 +1,32 @@ +.pricing-page{max-width:1180px;margin:0 auto;padding:54px 50px 120px} +.back-link{color:var(--muted);font:500 11px "DM Mono",monospace;letter-spacing:.08em;text-transform:uppercase} +.back-link:hover{color:var(--lime)} +.pricing-intro{padding:90px 0 70px;max-width:700px} +.pricing-intro h1{font-size:clamp(64px,10vw,140px);line-height:.88;letter-spacing:-.08em;margin:18px 0 28px} +.pricing-intro>p:last-child{color:var(--muted);font-size:18px;max-width:460px} +.pricing-grid h2{font:500 12px "DM Mono",monospace;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:18px} +.pricing-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px} +.price-card{min-height:310px;border:1px solid var(--line);padding:26px;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .25s,transform .25s} +.price-card:hover{border-color:var(--lime);transform:translateY(-5px)} +.price-index{color:var(--lime);font:500 11px "DM Mono",monospace} +.price-card h3{font-size:25px;line-height:1.05;max-width:180px;margin:28px 0 8px} +.price-card p:last-child{color:var(--muted);font:12px "DM Mono",monospace} +.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 input,.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 input:focus,.customize-form textarea:focus{border-color:var(--lime)} +.customize-form input::placeholder,.customize-form textarea::placeholder{color:var(--muted)} +.customize-form input[readonly]{border-color:rgba(213,243,75,.5);color:var(--lime);cursor:default} +.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}} diff --git a/TheTiffinFood/pricing.html b/TheTiffinFood/pricing.html new file mode 100644 index 0000000..04a5efa --- /dev/null +++ b/TheTiffinFood/pricing.html @@ -0,0 +1,69 @@ + + + + + + + Choose your rhythm — The Tiffin Food + + + + + + + +
+
+ + + THE TIFFIN
FOOD + + Change your goal ↗ +
+ +
+ ← Back to directions +
+

05 / Set your frequency

+

Your
rhythm.

+

Fresh meals, prepared around the way you want to show up.

+
+ +
+

Choose your box

+
+
+ +
+
+

06 / Make it work for you

+

Customize your
tiffin run.

+

Tell us where you spend your day and when you need your meal. We will prepare it fresh and plan around your schedule.

+
+
+ + + + + + + + + +

+
+
+
+ + + + + diff --git a/TheTiffinFood/pricing.js b/TheTiffinFood/pricing.js new file mode 100644 index 0000000..c08b4bf --- /dev/null +++ b/TheTiffinFood/pricing.js @@ -0,0 +1,74 @@ +const pricing = { + balanced: { + name: "Balanced", + description: "A little bit of everything, dialed into a rhythm you can actually keep.", + prices: [5000, 4000, 2000], + }, + bulk: { + name: "Bulk", + description: "Intentional calories, complex carbs and protein in a bigger, bolder box.", + prices: [6000, 5000, 2500], + }, + protein: { + name: "Protein", + description: "Pure protein power for the work you put in, from first rep to last.", + prices: [6500, 5500, 3000], + }, + lean: { + name: "Lean", + description: "Minimal fats. Maximum clarity. Light, clean meals to help you move sharper.", + prices: [7000, 6000, 3500], + }, +}; + +const WHATSAPP_NUMBER = "919453226814"; + +const options = [ + { label: "Breakfast, lunch & dinner", detail: "3 meals a day" }, + { label: "Lunch & dinner", detail: "2 meals a day" }, + { label: "Dinner", detail: "1 meal a day" }, +]; + +const mode = new URLSearchParams(window.location.search).get("mode") || "balanced"; +const selected = pricing[mode] || pricing.balanced; + +document.title = `${selected.name} mode pricing — The Tiffin Food`; +document.querySelector("#mode-title").textContent = `${selected.name} mode`; +document.querySelector("#mode-description").textContent = selected.description; +document.querySelector("#pricing-options").innerHTML = options + .map((option, index) => ` +
+
+

0${index + 1}

+

${option.label}

+

${option.detail}

+
+ ₹${selected.prices[index].toLocaleString("en-IN")}/ month + Choose this box ↗ +
+ `) + .join(""); + +document.querySelectorAll(".choose-box").forEach((button) => { + button.addEventListener("click", () => { + const box = document.querySelector("#box"); + box.value = button.dataset.box; + box.focus(); + }); +}); + +document.querySelector("#customize-form").addEventListener("submit", (event) => { + event.preventDefault(); + const form = new FormData(event.currentTarget); + const message = [ + "Hi The Tiffin Food! I would like to customize my tiffin.", + "", + `Plan: ${selected.name} mode`, + `Your box: ${form.get("box")}`, + `Destination: ${form.get("destination")}`, + `Preferred delivery window: ${form.get("timing")}`, + `Meal preferences: ${form.get("preferences") || "None specified"}`, + ].join("\n"); + document.querySelector(".form-note").textContent = "Opening WhatsApp with your tiffin preferences."; + window.location.href = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(message)}`; +}); diff --git a/TheTiffinFood/script.js b/TheTiffinFood/script.js new file mode 100644 index 0000000..f4fea27 --- /dev/null +++ b/TheTiffinFood/script.js @@ -0,0 +1,18 @@ +document.querySelectorAll(".meal-card").forEach((card) => { + const openPricing = () => { + window.location.href = `pricing.html?mode=${encodeURIComponent(card.dataset.mode)}`; + }; + + card.querySelector(".card-action").addEventListener("click", openPricing); + card.addEventListener("click", (event) => { + if (event.target.closest(".card-action")) return; + openPricing(); + }); + + card.addEventListener("keydown", (event) => { + if ((event.key === "Enter" || event.key === " ") && event.target === card) { + event.preventDefault(); + openPricing(); + } + }); +}); diff --git a/TheTiffinFood/styles.css b/TheTiffinFood/styles.css new file mode 100644 index 0000000..cfd094b --- /dev/null +++ b/TheTiffinFood/styles.css @@ -0,0 +1,17 @@ +:root{--ink:#090b12;--paper:#f1f0ea;--muted:#a4a6b0;--line:rgba(241,240,234,.16);--lime:#d5f34b;--orange:#ff704b;--violet:#af8cff;--blue:#64b9ff} +*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font-family:"Space Grotesk",sans-serif;overflow-x:hidden}.noise{position:fixed;inset:0;opacity:.035;pointer-events:none;z-index:10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}.site-header{height:88px;padding:0 5.3vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:3}.brand{display:flex;align-items:center;gap:11px;color:var(--paper);font:500 11px/1.05 "DM Mono",monospace;letter-spacing:.08em;text-decoration:none}.brand b{color:var(--lime);font-weight:500}.brand-mark{display:flex;gap:2px;align-items:end;width:22px;height:23px}.brand-mark i{display:block;width:5px;border-radius:5px;background:var(--lime)}.brand-mark i:nth-child(1){height:12px}.brand-mark i:nth-child(2){height:20px}.brand-mark i:nth-child(3){height:16px}.nav-links{display:flex;gap:35px;margin-left:9vw}.nav-links a,.header-cta,.socials a{color:var(--paper);font:11px "DM Mono",monospace;text-decoration:none;text-transform:uppercase;letter-spacing:.08em}.nav-links a{color:var(--muted);transition:color .2s}.nav-links a:hover{color:var(--lime)}.header-cta{border:1px solid var(--line);padding:12px 16px}.header-cta span,.button span,.text-link span,.card-action span{color:var(--lime);font-size:16px;margin-left:20px}.hero{min-height:calc(100vh - 88px);padding:11vh 5.3vw 6vh;position:relative;display:flex;align-items:center;overflow:hidden}.hero-copy{max-width:520px;position:relative;z-index:1}.eyebrow{font:11px "DM Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 24px}.pulse{width:7px;height:7px;background:var(--lime);border-radius:50%;display:inline-block;margin-right:9px;box-shadow:0 0 13px var(--lime)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(74px,10.5vw,154px);letter-spacing:-.095em;line-height:.82;margin:0 0 40px;font-weight:500}h1 em,h2 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.08em;color:var(--lime)}.hero-description{max-width:330px;color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:35px}.button{display:inline-flex;align-items:center;text-decoration:none;text-transform:uppercase;font:11px "DM Mono",monospace;letter-spacing:.08em;padding:17px 20px}.button-primary{color:var(--ink);background:var(--lime)}.button-primary span{color:var(--ink)}.hero-orbit{position:absolute;width:min(65vw,780px);height:min(65vw,780px);right:-5vw;top:50%;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at 49% 48%,rgba(213,243,75,.35),rgba(213,243,75,.07) 15%,transparent 38%)}.orbit{position:absolute;border:1px solid rgba(213,243,75,.28);border-radius:50%;inset:5%;transform:rotate(-25deg) skew(5deg)}.orbit-two{inset:20%;transform:rotate(55deg) skew(-10deg);border-color:rgba(213,243,75,.4)}.orbit-three{inset:35%;transform:rotate(-50deg) skew(8deg);border-color:rgba(213,243,75,.55)}.orbit:after{content:"";position:absolute;width:7px;height:7px;background:var(--lime);box-shadow:0 0 15px 3px var(--lime);border-radius:50%;top:4%;left:65%}.orbit-two:after{top:75%;left:4%}.core{position:absolute;inset:39%;border:1px solid var(--lime);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:rgba(9,11,18,.3);box-shadow:0 0 40px rgba(213,243,75,.12)}.core strong{font-size:25px;line-height:.8;letter-spacing:-.08em}.core strong em{font-family:Georgia,serif;font-weight:400;color:var(--lime)}.core-kicker,.core-caption,.orbit-label{font:9px "DM Mono",monospace;letter-spacing:.09em;color:var(--muted)}.core-line{width:22px;border-top:1px solid var(--lime);margin:16px}.label-top{position:absolute;top:10%;right:25%}.label-right{position:absolute;bottom:24%;right:3%}.scroll-note{position:absolute;bottom:7%;left:5.3%;display:flex;align-items:center;gap:12px;font:9px "DM Mono",monospace;color:var(--muted);letter-spacing:.13em}.scroll-note span:first-child{color:var(--lime)}.scroll-line{width:56px;border-top:1px solid var(--line)}.marquee{border-block:1px solid var(--line);padding:17px 0;overflow:hidden;white-space:nowrap}.marquee-track{display:flex;width:max-content;align-items:center;gap:32px;font:12px "DM Mono",monospace;letter-spacing:.12em;animation:marquee 24s linear infinite}.marquee b{color:var(--lime);font-size:20px}@keyframes marquee{to{transform:translateX(-50%)}}.menu-section{padding:145px 5.3vw 140px}.section-intro{display:grid;grid-template-columns:1fr 1.25fr .8fr;align-items:end;gap:30px;margin-bottom:70px}.section-intro h2,.method-copy h2,.contact-section h2{font-size:clamp(52px,6.4vw,94px);line-height:.87;letter-spacing:-.08em;font-weight:500;margin:0}.section-intro>p:last-child{color:var(--muted);font-size:14px;line-height:1.5;max-width:220px;margin-bottom:4px}.meal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.meal-card{min-height:465px;position:relative;padding:19px;display:flex;flex-direction:column;overflow:hidden;color:var(--ink);transition:transform .35s ease}.meal-card:hover,.meal-card:focus{transform:translateY(-9px);outline:none}.card-lime{background:var(--lime)}.card-orange{background:var(--orange)}.card-violet{background:var(--violet)}.card-blue{background:var(--blue)}.card-number{font:11px "DM Mono",monospace}.food-orb{width:155px;height:155px;border-radius:50%;margin:43px auto 20px;display:grid;place-items:center;text-align:center;font:11px "DM Mono",monospace;letter-spacing:.09em;border:1px solid rgba(9,11,18,.5);position:relative}.food-orb:after,.food-orb:before{content:"";position:absolute;border:1px solid rgba(9,11,18,.4);border-radius:50%;inset:-15px;transform:rotate(30deg)}.food-orb:before{inset:-30px;transform:rotate(-45deg)}.orb-lime{background:radial-gradient(circle at 32% 25%,#fff9c6,#7c9e00);box-shadow:0 20px 40px rgba(45,62,0,.35)}.orb-orange{background:radial-gradient(circle at 32% 25%,#ffd4a3,#bd2e19);box-shadow:0 20px 40px rgba(90,24,0,.35)}.orb-violet{background:radial-gradient(circle at 32% 25%,#eee0ff,#5f3baf);box-shadow:0 20px 40px rgba(49,19,103,.35)}.orb-blue{background:radial-gradient(circle at 32% 25%,#ddf7ff,#2f79bc);box-shadow:0 20px 40px rgba(19,61,111,.35)}.card-content{margin-top:auto}.card-tag{font:10px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}.card-content h3{font-size:34px;line-height:.85;letter-spacing:-.08em;margin-bottom:16px;font-weight:500}.card-content>p:not(.card-tag){font-size:12px;line-height:1.4;max-width:200px;margin-bottom:23px}.card-action{background:none;border:0;border-top:1px solid rgba(9,11,18,.35);width:100%;padding:13px 0 0;text-align:left;color:var(--ink);font:10px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.card-action span{color:var(--ink);float:right}.method-section{background:#171a23;display:grid;grid-template-columns:.7fr 1fr 1fr;gap:8vw;padding:130px 5.3vw;position:relative}.method-stamp{width:148px;height:148px;border:1px solid var(--lime);border-radius:50%;display:grid;place-items:center;text-align:center;color:var(--lime);font:11px "DM Mono",monospace;line-height:1.1;transform:rotate(-14deg)}.method-stamp span{font-size:22px}.method-copy>p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.6;max-width:310px;margin:30px 0}.text-link{font:11px "DM Mono",monospace;color:var(--paper);text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--lime);padding-bottom:8px}.steps{border-top:1px solid var(--line)}.step{padding:23px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:45px 1fr;column-gap:15px}.step span{color:var(--lime);font:11px "DM Mono",monospace}.step h3{font-size:17px;font-weight:500;margin-bottom:6px}.step p{grid-column:2;color:var(--muted);font-size:12px;margin:0}.contact-section{text-align:center;padding:145px 20px 160px;background:var(--lime);color:var(--ink)}.contact-section .eyebrow{color:rgba(9,11,18,.65)}.contact-section h2{margin-bottom:42px}.contact-section h2 em{color:var(--ink)}.button-light{color:var(--paper);background:var(--ink)}.button-light span{color:var(--lime)}footer{display:flex;align-items:center;justify-content:space-between;padding:35px 5.3vw}footer p{font:10px "DM Mono",monospace;color:var(--muted);margin:0}.socials{display:flex;gap:18px}.socials a{font-size:10px;color:var(--muted)}.toast{position:fixed;bottom:25px;right:25px;background:var(--lime);color:var(--ink);padding:14px 18px;font:11px "DM Mono",monospace;transform:translateY(120px);transition:transform .3s;z-index:20}.toast.show{transform:translateY(0)} +@media(max-width:850px){.nav-links{display:none}.hero{min-height:780px;align-items:flex-start;padding-top:100px}.hero-orbit{width:600px;height:600px;right:-210px;top:57%}.scroll-note{bottom:30px}.section-intro{grid-template-columns:1fr 1.2fr}.section-intro>p:last-child{grid-column:2}.meal-grid{grid-template-columns:repeat(2,1fr)}.method-section{grid-template-columns:1fr 1.3fr;gap:50px}.method-copy{grid-column:2}.steps{grid-column:1/-1}} +@media(max-width:560px){.site-header{height:73px;padding:0 20px}.header-cta{padding:10px;font-size:9px}.hero{padding:75px 20px 40px;min-height:700px}.hero-orbit{width:480px;height:480px;right:-220px;top:64%}h1{font-size:82px}.hero-description{font-size:13px}.menu-section,.method-section{padding:90px 20px}.section-intro{display:block;margin-bottom:45px}.section-intro h2{margin-bottom:25px}.section-intro>p:last-child{max-width:280px}.meal-grid{grid-template-columns:1fr}.meal-card{min-height:440px}.method-section{display:block}.method-stamp{margin-bottom:70px}.method-copy{margin-bottom:70px}.contact-section{padding:100px 20px 115px}.contact-section h2{font-size:62px}footer{padding:28px 20px;gap:20px;flex-wrap:wrap}footer p{order:3;width:100%}.label-top,.label-right{display:none}} + +/* Photographic food layer: real texture under the neon editorial treatment. */ +.hero-food-image{position:absolute;inset:18%;width:64%;height:64%;object-fit:cover;border-radius:50%;opacity:.65;filter:saturate(.9) contrast(1.12);mix-blend-mode:screen;box-shadow:0 0 90px rgba(213,243,75,.2)} +.food-orb{overflow:visible} +.food-orb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;filter:saturate(1.15) contrast(1.08);transition:transform .4s ease,filter .4s ease} +.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}} +.marquee-track{transform:translateX(100%);animation:marquee 24s linear infinite} +@keyframes marquee{from{transform:translateX(100%)}to{transform:translateX(-50%)}} +.schedule-callout{margin-top:70px} +@media(max-width:760px){.schedule-callout{margin-top:90px}} diff --git a/docker-compose.yml b/docker-compose.yml index fcc150a..0bef0d9 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -15,6 +15,13 @@ services: backend: condition: service_healthy + tiffin: + image: nginx:1.27-alpine + ports: + - "8088:80" + volumes: + - ./TheTiffinFood:/usr/share/nginx/html:ro + backend: build: ./backend ports: