Winery · Dark

Vintage

A dark gallery where the camera enters a framed oil painting and the page becomes a painted film — from the vine to the glass and the table — until it pulls back out to the picture on the wall.

Palette

--bg#170d06
gallery wall, main background
--bg-2#0c0704
footer and bottom veils
--moldura#b98a43
old gold of the frame and fillets
--texto#f3ece2
titles and text over the film
--texto-2#a8998a
captions, inactive index
--acento#e7d3df
"club" pill (light wine pink), active item
--vinho#6b1b24
hover and markers

Typography

Display: condensed transitional serif, weight 400, mixed case, tracking -0.02em; one keyword in italic in each title; clamp(2.4rem,6.5vw,6rem) — suggestions: Instrument Serif / Newsreader (high opsz).
Body: neutral grotesque 400, 10–13px, 2–3 lines — suggestions: Inter / Geist.
Support/labels: side index in 9px grotesque with numbering on the right in gray.
Treatments: "statement + italic word." phrase in each chapter; hero title spans the full width at the base; supporting text aligned to the bottom right.

Sections

Nav — fixed vertical index on the left (7 chapters + numbers); logo with a grape-cluster icon in the center; on the right a shop link, outline pill and pink pill.
Hero / gallery — dark wall with a spotlight, gold frame in the center, blurred silhouettes of visitors in the foreground; short phrase on the left; giant title at the base.
Entering the painting — the camera advances until the painting fills the screen; the frame exits through the edges.
Painted film (chapters) — vineyard on hills, hand picking bunches, press, cellar with barrels, glass being poured, labels, table under the pergola; each chapter with a serif title (bottom left or middle) and a supporting phrase on the right.
Exit to the gallery — the camera pulls back, the last scene becomes another picture on the wall with the audience in silhouette.
Club — short text + pill over the gallery; giant title at the base.
Footer — logo, serif phrase, links and contact on the right.

Motion and interaction

Film via scroll: scroll scrub → sequence of frames (or painted video) drawn on a canvas, pin of the whole narrative; GSAP ScrollTrigger.
Push-in on the painting: scroll scrub → scale of the frame+painting group 1 → 4.2 with origin at the center of the picture; silhouettes descend and blur.
Chapter titles: progress windows → enter with blur 10px → 0 and opacity; exit upward.
Side index: progress → active item turns white, number follows.
Final pull-out: scroll scrub → inverse of the push-in over the last scene.
Tech: GSAP ScrollTrigger + Lenis + canvas image sequence.

Components

Chapter index: 9px list, number on the right, active in --texto, inactive in --texto-2.
Outline pill: 1px --linha border, 9px.
Pink pill: --acento background, --bg 9px text.
Frame: SVG/CSS with a gold bevel (linear gradients on 4 sides) and an inner shadow.
Chapter caption: serif title + 10px phrase, alternating alignments.
Audience silhouettes: dark blurred PNG at the foot of the picture.