Pizzeria: Cart, Checkout, WhatsApp Orders — No Frameworks

Another one from the project series — a single-page site for a food delivery business. Built for the kind of place that runs its own kitchen and handles its own orders: pizzerias, burger joints, sushi bars, shawarma spots, small bakeries. Single brand, one or multiple locations in the same city.

The demo is in Brazilian Portuguese because that was the brief for this client, but the whole thing is content-driven — swapping copy, currency, payment methods, and map location takes maybe an hour. The structure doesn't care what language the menu is in.

What's inside:

Hero, signature dish, prep process, gallery, customer reviews

Full menu rendered from a JS array, with category filters (Clássicas / Especiais / Premium)

Cart drawer with subtotal / delivery / total

Checkout modal: delivery or pickup, address fields, payment method selector (PIX / card / cash)

Order gets formatted and pushed to the owner's WhatsApp — no backend, no aggregator, no commission cut

How it's built:

Mobile-first. Breakpoints at 480 / 768 / 1024. Layout is CSS Grid throughout, with repeat(auto-fill, minmax(...)) on the menu and delivery zones so cards reflow without media queries.

Typography uses clamp() — clamp(2.4rem, 5.5vw, 4.2rem) on the hero title scales smoothly between phone and desktop without breakpoint jumps.

aspect-ratio on every image container (hero 4/5, signature 4/3, gallery 1/1, menu cards 16/10). No layout shift while images load.

backdrop-filter: blur(16px) on the fixed navbar — translucent, darkens on scroll.

:has(input:checked) parent selector on the delivery/pickup toggle in the checkout — pure-CSS state highlighting, no JS class swapping.

Custom properties as design tokens at :root — palette, radii, shadows, easing, font stacks. One edit, propagates everywhere.

Reveal animations on IntersectionObserver — sections fade up as they enter the viewport, not before. CPU stays idle until needed.

OpenStreetMap embed instead of Google Maps — no API key, no billing, no quota.

No frameworks. No build step. One HTML file, one inline <style>, one inline <script>. Ships as-is.

Stack: vanilla HTML / CSS / JS. Fonts via Bunny Fonts (Playfair Display for headings, Inter for body, DM Mono for numbers and labels). Palette is dark brown-black (#0c0a09) with a neon green accent (#4ade80).