Page, bleed, overlay

A sticky-footer page, a full-bleed section, and an overlay that covers its parent.

.page.bleed.overlayCSS only

Examples

Page

header

main grows

Overlay

Content underneath.

Anatomy

`.page`	Full-height flex column (at least `100dvh`), often the `<body>` itself.
`.page > header / footer`	Optional, at their natural height. The footer stays at the bottom however short the page.
`.page > main`	Must be a `<main>` element: it grows to fill the space between.
`.bleed`	A section inside a centred container that breaks out to the full viewport width.
`.overlay`	Covers its parent edge to edge with a blurred, translucent veil and centres its content (a spinner, a message). The parent is made `position: relative` for you.

Accessibility

.page only grows a <main>, so the landmark comes with the layout; keep the site header and footer as <header> and <footer> beside it.
An .overlay blocks the pointer, not the keyboard: the content under it stays focusable. Set inert on that content, or aria-busy="true" on the parent while it loads.