Three Price Cards Whose Film Only Loads, and Plays, Under the Cursor

Palette

Typography

AaEB GaramondAaMontserrat

Summary

Tre carte affiancate, una per livello di ospitalità, con prezzo e lista di cosa comprende. Il video di ognuna non esiste finché non ci passi sopra: al primo mouseenter la sorgente viene scritta e caricata, poi parte; uscendo si ferma. Da touch non c'è hover, quindi parte quella al centro della scorsa laterale. Perché conta: tre video in autoplay all'apertura sono megabyte spesi per qualcosa che nessuno sta guardando. Qui il filmato è il premio della curiosità, e la pagina resta leggera per chi non lo chiede.

Style

A printed championship programme rendered as a film: editorial serif over full-bleed footage, gold hairlines, and a permanent grain over everything.

              Two palettes doing two jobs, never mixed. INSTITUTION, used for frames, bars and dark grounds: deep green #06231a, green #0a3d28, brand green #007649, deep purple #241238, purple #3d2360, brand purple #593987, light purple #b39ddb. LUXURY, used for every surface the reader actually sits on: cream #f7f1e4, soft cream #efe6d3, champagne #e7d6ac, gold #b8933f, light gold #d6b464, deep gold #8f6f28. Ink is #23180d, softened to 68% for body and 42% for captions; on dark grounds the chalk is #f7f1e4 at 72%. Gold is a hairline and a rule, never a fill — no gold buttons, no gradients on type. Two typefaces with separate jobs: EB Garamond (standing in for A Caslon Pro) for every display line, every pull quote and every price, italic for the second half of a headline so the sentence turns; Montserrat (standing in for Gotham) for eyebrows, labels, nav and form, always uppercase at 0.28–0.4em tracking, never above 12px. Headlines run on clamp() from 22px to 34px for the loader word and up to 1.02 line-height at section scale — set them by viewport, never at a fixed size. Gutter is clamp(22px, 6vw, 120px) and holds on every section. One easing everywhere: cubic-bezier(0.22, 0.61, 0.24, 1). A film-grain layer sits above the entire document at low opacity and shifts its background position on a timer, so the page is never perfectly still.

Layout & structure

Una sola sezione, presa dalla pagina a cui appartiene.

La sezione

Notes

            Perché conta: tre video in autoplay all'apertura sono megabyte spesi per qualcosa che nessuno sta guardando. Qui il filmato è il premio della curiosità, e la pagina resta leggera per chi non lo chiede.