Thanks to visit codestin.com
Credit goes to ediblefactor.com

carries `.bg-bg`, and a class * (0,1,0) outranks the `html, body` element selector (0,0,1) no matter what * order they appear in - so the body kept painting the OLD background while * `html` and the sticky nav had moved to the new one. Most of the page was * therefore a different black from its own header. * The light theme already re-pointed these; the base theme never did, which * is why the drift only showed in dark. This is the general fix, so the next * token change cannot silently leave the body behind again. * -------------------------------------------------------------------- */ .bg-bg { background-color: var(--bg); } .bg-bg\/70 { background-color: color-mix(in srgb, var(--bg) 72%, transparent); } .bg-bg2\/80 { background-color: color-mix(in srgb, var(--bg-2) 80%, transparent); } /* Same trap, text side: `.text-inklow` bakes rgb(107 104 133) and `.text-inkdim` bakes rgb(150 147 172). The light theme re-points both; the base theme never did, so lifting --ink-low for contrast moved every element that used the VARIABLE and left every element using the UTILITY exactly where it was - the deck hint and the section kickers stayed at 3.85:1 while their neighbours moved to 4.9:1. */ .text-inklow { color: var(--ink-low); } .text-inkdim { color: var(--ink-dim); } /* Clip horizontal overflow WITHOUT making body a scroll container (overflow-x:hidden would; clip does not) so position:sticky keeps working. */ /* margin:0 is load-bearing, not tidiness. There is no preflight reset in this file, so body kept the UA default 8px and every full-bleed band - the dark .efmod module, the marquee, the footer - was inset by it. On the dark sections that read as an 8px white stripe down both edges of the screen at every width. Verified by pixel crop before and after. */ body { overflow-x: clip; margin: 0; } ::selection { background: var(--periwinkle); color: var(--bg); } /* Faint grid overlay · same vibe as production */ .bg-grid { background-image: linear-gradient(rgba(217,95,82,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(217,95,82,0.04) 1px, transparent 1px); background-size: 80px 80px; } /* Desktop only: wire the hero's 2-col grid manually (lg:grid-cols-2 is not in the precompiled Tailwind subset). Mobile + tablet keep the existing single-column stack untouched. Selectors use `.hero-grid-lg .x` instead of `.x` so they override the base rules via natural specificity, without leaning on !important. */ @media (min-width: 1024px) { /* The CTA column is a percentage of the grid, capped at 440px, rather than a flat 440px. At 1024px a flat column left only ~432px for the headline, which the one-line rule then had to render at ~42px. Sizing it proportionally hands the narrow desktops their width back and makes the headline scale continuously through 1024 instead of stepping. */ .hero-grid-lg { grid-template-columns: minmax(0, 1fr) minmax(0, min(440px, 34%)); gap: 40px; align-items: center; } /* Fallback only, for engines without container query units. The @supports block below sizes the H1 from its container so the whole tagline sits on one line at every width. */ .hero-grid-lg .hero__title { font-size: clamp(60px, 5.8vw, 84px); } /* Center the CTA card vertically in the right column so it reads as the visual anchor of the right side. The right column's grid cell already vertically centers via align-items: center on the grid, but adding flex-center inside the cell also handles cases where the cell auto-stretches taller than the card. */ .hero-grid-lg #waitlist-hero { display: flex; flex-direction: column; justify-content: center; } /* Size the card's headline off the CARD, not the viewport. The flat md:text-[2.4rem] was written when the card spanned the page; in the hero's right column the column is a percentage, so between 1024px and 1373px it resolves to 321-440px and 38.4px type broke "Skip the problem. / Join the waitlist." from the intended two lines into four, taking the card from 364px to 504px tall. 9.4cqi holds it at two lines at every card width from 265px of inner space up to 452px, and because it is one continuous expression there is no step at the 1441px boundary where the band starts growing. Card-relative units are the house rule here for exactly this reason - vw in a card has regressed three times. */ .hero-grid-lg .wl-card h2 { font-size: clamp(24px, 9.4cqi, 46px); } } /* ========================================================================== WIDE DESKTOP AND ULTRAWIDE Below 1441px not one rule in here applies, so every laptop keeps exactly the layout it has today. The page was drawn on a 1400px band and stopped growing there, which meant a 1512px MacBook and a 3440px ultrawide were served the identical pixels - measured, byte for byte, from 1512 all the way to 3840. On a wide monitor that reads as a small island in an empty field rather than a page designed for the screen. The fix is one number, --band-grow, and everything else is derived from it so there is a single place to retune. The band takes a SHARE of the extra width (46%), not all of it: claiming all of it would drag the lede and the friction cards out to a line length nobody can read, and claiming none of it is the bug. The ceilings are stops, not guesses - past them the text blocks stop looking composed and start looking stretched. This has to live in bespoke CSS. The inlined Tailwind is a precompiled subset whose widest breakpoint is lg (1024px), so there is no xl/2xl to write against, and a new utility class in the markup would silently do nothing. Overriding the utilities from here works because the subset is emitted in the

You are HOW you eat

The only app that tracks your calories budget at the same time

Scan any menu, log any meal, stay inside both budgets

Solving the equation that every other app leaves half-done

Harvest grain bowl
Harvest grain bowl520 kcal 340 rupees
Grilled vegetable panini
Grilled vegetable panini610 kcal 290 rupees
Avocado and beet toast
Avocado and beet toast430 kcal 260 rupees
Calories0 / 2,000
Spend0 / 1,200

Hover a dish to preview what it costs both budgets. Sample figures

Early Access · Limited Seats

Skip the problem Join the waitlist

Not ready to sign up? Your encouragement still means a lot
No spam Unsubscribe India + Global
2
Budgets, one app
100+
Cuisines recognized
12
Languages scanned

You've always
had to choose

Every menu is a silent negotiation between what your body wants, what your wallet allows, and what your week has planned for you. Most apps solve one side of it

Three reasons why

Calorie apps don't know what you ordered. What it cost you

Budget apps don't know the receipt total. What it fed you

Menus don't tell you whether you can afford the pasta. Calorically, or otherwise

One dinner, watched two ways

Two budgets,
one plate

Calories left
2,000
of 2,000 kcal today
Budget left
₹1,800
of ₹1,800 tonight
Now serving
Sparkling kombucha
Your Home

Dine-in mode,
on the table

Calories and budget for the session you're sitting in. Set a target, customize a meal, or ask the AI Chat. The home screen tracks your decision in real time, before the bill arrives

Find The Table

A menu that
reads you back

The restaurant's full menu, with veg, non-veg, bestseller filters, calorie tags, and allergen badges baked into every dish. Lite mode keeps it fast even on a hotspot

AI Sommelier

Pairings with
a reason attached

Tonight's Reasoning explains why the signature cut went first, and offers alternates priced and portioned so the table balances. Tap WHY THIS on any dish for the math

Insights

The patterns
behind your plate

Calories across the week, spend held within intention, energy in motion. A quiet rhythm read back to you, not a spreadsheet to wrestle

Swipe, drag, click, or arrow keys
EdibleFactor menu detail: Ninan's Steakhouse with veg, non-veg, bestseller filter chips, alternates strip, and individual dish cards (Pepper Mushroom Soup, Caesar Salad) with calorie and price labels
EdibleFactor AI Sommelier alternates strip and dish cards with WHY THIS reasoning and allergen badges
Swipe to explore

Numbers that
mean something

Not another calorie counter. Three readings that actually change how you order, graded against your body, your wallet, and your goals. Drag them

72%METABOLIC EFFICIENCY
Great progress. Nearly there!
91%GOAL ALIGNMENT
Top 1%. Goals Achieved
100%BUDGET PRECISION
Perfect. To the paisa
Reserve My Seat →