Coffee Shop × Editorial

Build a one-page editorial site that feels like a printed magazine turned into a paper archive. Use a warm off-white paper background (#f2ebdc), espresso ink (#33271c), and a single brick accent (#a34a21). Pair a high-contrast display serif (Playfair Display) for headlines with a monospace (Space Mono) for small index labels like 'EST. 2024', 'NO.01', 'FILE_001'. Everything sharp-cornered (border-radius: 0), separated by 1px hairline rules, with generous whitespace. Lay content out like magazine spreads: an oversized headline, a two-column body with a drop cap, and a captioned full-bleed photo.

Create a scroll-driven 'file drawer': a set of cards that stack like folders. Make each card position: sticky, top: <navHeight>, so it pins under the section title as you scroll and the next card scrolls up to cover it. Give every card a tab with a horizontal offset (left: index * 20%) so that when all cards are pinned the tabs line up into one horizontal index row. Two gotchas to bake in from the start: (1) put the scroll distance in a separate empty spacer element between cards — never use margin-bottom, which shrinks the sticky range and makes cards unpin early; (2) set pointer-events: none on the pinned card wrapper with pointer-events: auto on the tab and body, so the earlier tabs stay clickable once stacked.

A minimal specialty coffee bar counter in warm morning light, matte concrete and pale plaster walls, an espresso machine and a pour-over station, dried flowers in a ceramic vase, muted warm beige and sand tones, soft directional sunlight with long shadows, editorial interior photography, 35mm film look, Kodak Portra --ar 16:9