A clean, class-based layout you can reuse
This page demonstrates longform content in the same visual system as the main page and teasers. Everything is styled by classes rather than global element selectors, so it can be dropped into a project without clobbering existing typography or anchor styles. The header stays consistent across pages and includes a mobile drawer that slides in from the right. The footer behavior stays correct whether the page is short or long.
How the sticky footer works
The body uses a flex column layout with a minimum height of 100vh. The main area is set to flex: 1, which makes it expand to fill remaining vertical space when content is short. When content grows, the main section naturally expands and pushes the footer below the fold. This avoids absolute positioning and keeps layout predictable.
Mobile menu behavior
On small viewports, the desktop nav is hidden and a single toggle icon appears top-right. Clicking it opens a full overlay: a 10% left scrim that closes on click, and a 90% right drawer. The same icon becomes the close X in the same position, and it stays visible for the entire open state. Drawer links are centered and constrained for a cleaner layout.
Hero styling choices
The hero keeps framing minimal: no heavy inner frame around the hero image and no loud borders that compete with the artwork. Radii are kept tighter across the site to reduce the rounded, pill-heavy look. The header is brighter to improve readability without putting the logo inside a separate container.
Back to teasers Back to main