OSTERIA VALDRANO

The Brief

A fine-dining Italian restaurant in Melbourne with no web presence at all — operating entirely on referrals and a Google listing with no photos. The goal was a site that would justify a reservation before anyone had tasted the food.

The Challenge

Italian restaurant websites bifurcate sharply: either generic template sites that look like every other pizza place, or €30,000 agency builds that treat the food as secondary to the brand. The challenge was threading that needle — editorial luxury at a price point that makes sense for a single-location restaurant.

The Approach

Near-black (#0d0b09) is not quite black — it reads as a dark room with warm light sources rather than a digital void. Parchment (#e8dcc8) text creates the sensation of reading a handwritten menu. Terracotta (#b85c38) is the accent: the colour of Roman clay, of cookware that has seen decades of use.

Playfair Display headings at Source Serif 4 body text means every typographic choice reinforces the same idea: this food comes from somewhere. The grain texture overlay on the hero is a single CSS property — background-image with an SVG noise pattern at low opacity — but it adds physical warmth that no photograph can replicate.

The GSAP story entrance (word-by-word, each dish's description revealing as you scroll) is slow enough to feel like reading a letter, not scanning a menu. Six dishes in an editorial grid: name, description, suggested pairing. No prices visible in the hero — that's intentional. You fall in love first.

Tech Stack

Technical Decisions

Grain Texture

SVG feTurbulence filter as data URI in background-image — no extra HTTP request. The grain sits at 4% opacity: visible on dark monitors, invisible on bright ones, always felt.

Six-Dish Grid

CSS grid auto-fit minmax(340px, 1fr) — responsive without a single breakpoint. The layout collapses gracefully from three columns to two to one.

Reservation Form

Formspree with honeypot field — filters bots without CAPTCHA friction. The confirmation state is a terracotta banner, not a redirect.