as the final child of the last section, AND add class "section--wave" to that section so its side/bottom padding is removed where the wave sits (the wave is full-bleed and must touch the footer with no gap). ============================================================ */ .section--wave { padding-bottom: 0 !important; /* wave tucks straight onto the footer, no gap */ } .page-wave { /* Nested full-bleed: unlike .site-footer, this lives inside padded sections (.section > .container), so it MUST break out with a vw-based negative margin to escape that padding. With a vertical scrollbar present this overhangs the viewport by ~half the scrollbar width — there is no static, container-agnostic CSS breakout that is scrollbar-exact for a nested element. That residual overhang is absorbed by html { overflow-x: clip } (see site-menu.css); it must NOT be "fixed" by zeroing these margins, or the wave will be trapped inside the section padding. */ margin-left: calc(50% - 50vw); /* full-bleed regardless of section padding */ margin-right: calc(50% - 50vw); margin-bottom: -1px; /* close sub-pixel seam against the footer */ line-height: 0; /* kill inline-svg descender gap */ pointer-events: none; position: relative; /* anchor the seam-bridge ::after below */ } /* Seam bridge. A full-bleed wave scaled to viewport width can render a fractional bottom pixel row that anti-aliases to a light sliver -- a white line that flickers in and out as the viewport width changes. A fixed negative margin cannot track a rounding artifact that shifts with width, so a solid strip bridges the boundary instead: it sits in the wave's already- filled bottom band and overlaps a few px into the footer, so the seam is always covered by opaque blue regardless of the sub-pixel edge. Colour must match the wave's bottom fill / footer band; it is the literal value because .page-wave lives OUTSIDE .site-footer (last child of the page's final section), where the --sf-blue token is out of scope. */ .page-wave::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; /* extend into the footer to cover the seam */ height: 8px; background: #4792bc; /* TODO(#8): match divider_waves_dark_blue.png bottom-fill / footer band. Currently the old --sf-blue; if the wave PNG and footer band are darker, update this hex to match or a light strip shows at the seam. */ pointer-events: none; } .page-wave__img { display: block; width: 100%; height: auto; /* PNG keeps its natural aspect ratio full-bleed */ }