Pizzeria · Light

Crust

A single cut-out pizza is the protagonist that crosses the whole page — under a giant red wordmark it splits into eight, parades through the menu, enters the dark oven and ends up closed in a cardboard box.

Palette

--bg#EFE5DA
cream (flour) background for most of the page
--vermelho#E8221B
wordmark, flavor names, giant numbers, labels
--forno#120B0B
background of the oven scene and the fermentation block
--kraft#C89E73
cardboard card of the order section and the box
--tinta#1A1412
body text, black buttons
--texto-2#6E645A
captions and supporting text (darkened from #8E8378 to 4.6:1)
--brasa#F2A65A
fire glow (radial overlay)

Typography

Display: extra-wide (extended) grotesque in black weight, mixed case, tracking -0.04em, wordmark at 100% of the screen width — clamp(5rem, 15vw, 15rem) — suggestions: Unbounded Black / Archivo Expanded ExtraBold
Display 2 (flavors): high-contrast italic serif in red, ~12vw, for each pizza's name on the menu — suggestions: Playfair Display Italic 700 / Instrument Serif Italic
Body: neutral grotesque 14–15px weight 500, line-height 1.35, blocks of 3–4 short lines
Support/labels: 10–11px weight 600, red for "flavor x of y", gray for meta
Treatments: the wordmark sits behind the pizza (the pizza overlaps the letters); flavor name with letters partially covered; giant "48h"-style number in red over a photo; footer wordmark cropped by the bottom edge with a line illustration of a city skyline passing through it.

Sections

Nav — thin row: 4 links at 11px on the left, opening hours on the right. No logo (the wordmark is the hero).
Hero — edge-to-edge wordmark at the top; cut-out pizza (background-less PNG) centered, cropped by the bottom of the screen; short note on the left, contact on the right; black pill "order" button + circle with an arrow over the pizza.
Slicing — with a pin, the pizza rises over the wordmark and splits into 8 slices that move apart; 2-line title at the bottom left and technical description on the right.
Pinned menu — flavor name in giant red italic serif; the flavor's pizza centered overlapping the name; description on the left with a "flavor n of N" label; price on the right; "order this one" button over the pizza. On scroll, the pizza rotates and exits sideways while the next one enters.
Oven — almost black background; arched oven mouth (mask) with fire; the pizza slides in and then comes out baked.
Fermentation — macro photo of the dough filling the screen, giant red number and italic serif caption; small note in the corner.
Box — back to cream: the pizza descends into a 3D (CSS) cardboard box whose lid closes.
Order — large kraft card with a radius, small red wordmark, question on the right and 3 option rows (display name, small description, circle-arrow button).
Final CTA + footer — torn top edge (paper), 2-line title, black button on the right, 4 small info columns, giant wordmark cropped at the bottom.

Motion and interaction

Continuous pizza: a single fixed element (position: fixed) whose transform is controlled by several ScrollTrigger timelines in sequence; GSAP + Lenis.
Slicing into 8: scroll scrub with pin → 8 wedges (clip-path polygon over the same image) translate radially 0→28px and rotate ±4°.
Flavor carousel: pin + scrub → current pizza rotate 0→180° and x 0→-60vw; next one enters from +60vw; flavor name switches with a letter mask (y 100%→0 per letter, stagger 0.03).
Entering the oven: pizza scale 1→0.7, y into the arch; radial glow pulses (opacity .6↔1, 1.2s yoyo).
Box: CSS 3D lid rotateX 0→-110° on enter and closes (−110→0) with scrub; perspective 1200px.
Button hover: arrow circle rotates 45° and grows 1.1, 200ms.
Footer wordmark: rises from translateY(40%)→0 on enter.

Components

Order button: 32px black pill (white 11px text) + 32px black circle with a white arrow, joined with 4px.
Option row: 64px height, name in wide grotesque 32px, 10px description on the right, 28px circle-arrow, 1px divider.
Kraft card: 16px radius, paper texture (6% noise), light inner shadow.
Flavor label: "flavor 2 of 5" 10px red weight 600.
Price: wide grotesque 22px weight 800 + 10px gray meta.
Torn edge: irregular cut-out SVG, 24px, at the top of the section.
CSS box: 5 kraft faces with a red logo stamped on the lid.