The Fortnight: Cinematic Hospitality Landing, Champagne on Institutional Green

Palette

Typography

AaEB GaramondAaMontserrat

Summary

A hospitality landing page for an invitation-only experience at a two-week tennis championship, built to feel like a film rather than a page. Every section is a held shot: the hero is pinned and scrubbed by the scroll wheel, the story sections are full-bleed video under a single line of Caslon, and the three tiers on offer each carry their own clip that starts under the cursor. The institution supplies the frame — deep green, royal purple — and the luxury lives inside it in cream, champagne and gold.

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

Nine held shots in sequence: loader, bar, pinned hero, and then an alternation of full-bleed cinema and cream editorial until the invitation closes it.

Loader

Full-screen cream. Crest, the two-word title in serif at clamp(22px, 3.4vw, 34px), a 1px progress bar that fills with real asset progress, and a percentage in 10px uppercase at 0.4em tracking. It dissolves — never slides — once the hero's first frame can be drawn.

Top bar

Fixed, transparent over the hero, three-part: crest plus the institution's name in 12px uppercase at 0.34em tracking on the left, the page's own name in serif italic 15px in the centre, and the single call to action on the right in 11px uppercase at 0.28em. It picks up a ground only after the hero has been passed.

Hero — pinned scroll-scrub

One viewport, position sticky, holding a canvas over a still poster. The scroll position maps to a frame index across a decoded image sequence and the canvas is redrawn on each step, cover-fitted with device pixel ratio honoured. The copy — a kicker in uppercase sans, the title in serif at display scale, one subtitle line — dissolves and lifts as the scrub travels. A scroll cue with a drawn hairline sits bottom centre and fades on first movement. Two fallbacks are mandatory, not optional: the still poster stands in until the sequence has decoded, and prefers-reduced-motion keeps the still forever.

Cinema section (the ritual)

Full-bleed muted looping video behind a one-sided scrim, copy locked to that side in a column no wider than 620px: eyebrow, a two-line serif headline whose second half is italic, one paragraph of 18–25px serif at 1.6. The video carries preload=none and a poster; an IntersectionObserver starts it on entry and pauses it on exit, so a page of five clips never has five playing. The background lifts at 0.18 of the scroll for depth.

Hospitality tiers

Cream editorial band. Section head — eyebrow, serif title with an italic tail, one subtitle, a hairline rule — then three cards on one row. Each card holds a looping clip, a name in serif, a price in serif at the same weight as the name, and a short list in sans. The clip plays on hover on pointer devices and on entering the viewport on touch, and returns to its poster on leave. Prices are shown, not hidden behind a request.

Arrival / Golden hour

Two more cinema sections alternating the copy side, so the eye crosses the page. Same rules as the ritual: lazy video, single scrim, one paragraph.

Invitation

The only form on the page, on the darkest ground. Name, email, preferred tier as a select carrying the three prices verbatim, party size, message. Labels sit above the fields in 10–11px uppercase sans; the fields are hairline-ruled, never boxed. Submitting validates in place and swaps the form for a written confirmation — no alert, no redirect.

Colophon

Crest and title, one line of copy in the centre, the year of foundation and the postcode on the right, and beneath it the fine print that states the tribute is independent and unaffiliated. Small, low contrast, and always present.

Special components · 4

Pinned canvas scroll-scrubThe hero, driven frame by frame from the scroll position

The hero, driven frame by frame from the scroll position

A sticky viewport holds a canvas sized to innerWidth × devicePixelRatio. Preload the sequence, tracking progress into the loader bar. On scroll, map the section's travelled fraction to a frame index, clamp it, and draw that frame cover-fitted. Draw inside a rAF and never inside the scroll handler itself. Keep the still poster visible until the first frame is drawable, and skip the whole mechanism under prefers-reduced-motion — the still is a complete state, not a placeholder.

Lazy cinema backgroundFull-bleed video that only plays while it is on screen

Full-bleed video that only plays while it is on screen

Each background video ships preload=none, muted, playsinline, loop, and a poster still. One IntersectionObserver plays on entry and pauses on exit. Never autoplay everything on load: a page of five clips otherwise decodes five streams at once and drops the scroll to a crawl.

Hover-autoplay tier cardA card whose clip starts under the cursor

A card whose clip starts under the cursor

Give the card a data attribute naming its clip. On a pointer device, create or resume the video on mouseenter and pause plus reset on mouseleave. On coarse pointers there is no hover, so an IntersectionObserver plays the card that is centred instead. Always keep a poster behind it, so a card that has not loaded still reads as a photograph.

Animated film grainA generated noise layer over the whole document

A generated noise layer over the whole document

Draw noise once into an offscreen canvas, export it as a data URL, and set it as the background image of a fixed overlay at low opacity with pointer-events none. Shift its background-position on a slow interval. Generating it beats shipping a PNG and it never repeats visibly.

Notes

            Every motion in the page has a still equivalent, and prefers-reduced-motion takes it: the scrub becomes a poster, the cinema videos stay on their posters, the reveals appear already revealed. The form is the one thing that must work with no JavaScript behind it — validate in place, confirm in place, and never navigate away. Contrast: the champagne and gold are for hairlines and display type only; body copy stays on ink over cream, or chalk at 72% over the dark grounds.