Fieldnote Coffee Roasters — Brutalist Coffee The Cafe Page for Divi 5

Fieldnote Coffee Roasters — The Cafe is a brutalist full-page layout built for specialty coffee businesses that want to communicate craft and place without softening either. The page opens with a full-bleed Pexels photograph of a cafe interior, dimmed to 70% opacity by a uniform dark gradient overlay that sits on top of the image layer. Over that sits a Space Mono breadcrumb in white at 13px with 2px letter-spacing, followed by an Archivo h1 at 56px/900-weight in all-caps with -1px tracking. A Public Sans subheading at 19px caps the hero at 600px max-width, keeping the text column tight against the left edge while the photograph bleeds to every margin. The whole section carries 120px top padding on desktop, collapsing to 64px on mobile — generous air that lets the image breathe without losing the brutalist density.

The menu section beneath uses a warm linen ground (#e8e4da) that reappears throughout, anchoring every content section in the same material palette. Three drink items — Espresso, Pour Over, Milk Drinks — are laid out in alternating image-left/image-right rows at a 1/2 + 1/2 column split, each image locked to a 4:3 aspect ratio with object-fit: cover. Item counters (01, 02, 03) in Space Mono 13px uppercase act as brutalist numbering rather than decorative dividers. On mobile, every two-column row collapses to a single column; the pour-over row additionally reorders the image above the text via a order: -1 property on the image column, keeping the visual rhythm consistent across breakpoints.

A six-image masonry-style gallery section uses a three-column grid with 16px gutters, each column stacking two images at alternating 4:5 and 4:3 aspect ratios so adjacent columns land at different vertical heights — a tight editorial grid rather than a uniform tile wall. This sits on the same #e8e4da ground with a two-column header (wider left, narrower right) where the h2 and a one-line descriptor split the horizontal space at a 14/24 and 10/24 proportion.

The final sections shift registers: a white-background info block presents eight venue facts (hours, wifi, dogs, milk options, retail beans, tours, pastries, accessibility) in a two-column CSS grid using native Divi Icon + Text rows, each with a solid black Font Awesome checkmark at 18px. A full-bleed testimonial section with a 90-degree gradient overlay carries an oversized Archivo opening quote mark at 120px, a 42px pull-quote, a 64px-wide white divider, and a two-line attribution. The page closes on a flat #ff3b00 section — no image, no gradient — with a centered h2, a thick-bordered square button (Get directions, 4px solid, 0px radius, white fill inverting to black on hover), and a one-line hours reminder.