From 3f6d7bd6389223b46d59f6f67d80325355c737a1 Mon Sep 17 00:00:00 2001 From: AnuragJangid18 Date: Thu, 8 Oct 2026 02:23:34 +0530 Subject: [PATCH] commit all. --- index.html | 105 +++++++++++++++++++++++++++++++++++++++++++++++++++++ script.js | 17 +++++++++ styles.css | 12 ++++++ 3 files changed, 134 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..403e46d --- /dev/null +++ b/index.html @@ -0,0 +1,105 @@ + + + + + + + + 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 delivered on your frequency. 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✳
+
+ + + +
+
HOW IT
WORKS ↘
+

03 / The tiffin protocol

Small box.
Big energy.

We turn nutrition science into food you look forward to. Tell us the goal, choose your rhythm, and we will handle the rest.

See the protocol ↗
+
01

Choose your goal

Tell us what you are building towards.

02

Set your frequency

Daily, weekly, or whenever you need a reset.

03

We do the cooking

Fresh food, delivered to your door.

+
+ +
+

04 / Ready when you are

+

Make your next
meal count.

+ Start your order ↗ +
+
+ + +
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..2bc4cf1 --- /dev/null +++ b/script.js @@ -0,0 +1,17 @@ +const toast = document.querySelector(".toast"); +const showToast = (goal) => { + toast.textContent = `${goal} mode selected — your box is almost ready.`; + toast.classList.add("show"); + window.setTimeout(() => toast.classList.remove("show"), 3200); +}; + +document.querySelectorAll(".meal-card").forEach((card) => { + const action = card.querySelector(".card-action"); + action.addEventListener("click", () => showToast(card.dataset.goal)); + card.addEventListener("keydown", (event) => { + if ((event.key === "Enter" || event.key === " ") && event.target === card) { + event.preventDefault(); + showToast(card.dataset.goal); + } + }); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..552b08d --- /dev/null +++ b/styles.css @@ -0,0 +1,12 @@ +: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}