/* ┌─────────────────────────────────────────────────────────────────────────┐ │ WAVE — a recurring decorative divider used across the site. │ │ │ │ HOW IT WORKS │ │ The SVG (assets/svg/wave.svg) is drawn with `fill: currentColor`, so the │ │ wave colour is whatever `color` is in effect. The wave is paired with a │ │ section and MUST match that section's background colour — set it via the │ │ partial's `color` arg (templates/partials/wave.php), which writes │ │ `style="color: …"` on the wrapper. │ │ │ │ e.g. above the dark-green footer → color = var(--color-green-dark). │ │ │ │ CHANGE POLICY │ │ This is a tricky shared visual. If you change the SVG shape or this CSS, │ │ re-check EVERY place the wave is used (currently: footer top). Keep the │ │ SVG, this file and templates/partials/wave.php as the single source. │ └─────────────────────────────────────────────────────────────────────────┘ */ .wave { display: block; line-height: 0; /* kill the inline-SVG descender gap */ color: var(--color-green-dark); /* fallback; normally set per-use via the partial */ pointer-events: none; } .wave svg { display: block; width: 100%; height: auto; fill: currentColor; } /* Flip vertically when the wave dips upward instead of downward. */ .wave--flip svg { transform: scaleY(-1); } /* Pull the following section up so it tucks under the wave seamlessly. */ .wave + * { margin-block-start: -1px; } /* Overlap modifier: lap the wave UP over the section above it, instead of sitting in its own band. Used by the footer wave (footer.php). Taken OUT OF FLOW (position:absolute), so it reserves no space and the following section butts straight up against the section above; the wave then paints across that seam. translateY(-100%) is resolved against the element's OWN height, so it lifts the wave up by exactly its rendered height — whatever the SVG's aspect ratio is. This is deliberately decoupled from the SVG shape: re-crop wave.svg to any viewBox ratio and the overlap stays exact, with no magic margin to re-tune. CONTRACT / fragility — read before moving this: - No top/left, so the wave falls back to its STATIC position (where it would have sat in flow: the seam between the two sections). That placement is what makes it land correctly — don't add offsets. - width:100% and the horizontal origin resolve against the containing block. There is no positioned ancestor, so that's the viewport (initial containing block). Correct only while stays full-width and unpositioned — give position:relative or padding and this wave shifts/over-widens. - z-index:1 lifts it above the section it laps over; base .wave's pointer-events:none is load-bearing here so it never eats clicks beneath. */ .wave--overlap { z-index: 1; width: 100%; position: absolute; transform: translateY(-100%); } /* Pin the rendered height to a token. With preserveAspectRatio="none" this equals the auto height at full-viewport width (the SVG's own ratio, --footer-wave-height = 81.73/1440 ≈ 5.68vw), so the look is unchanged — but now it's a known value the content above can reserve exactly (see below). */ .wave--overlap svg { height: var(--footer-wave-height); } /* Reserve the lapped-over space so the crest paints over cleared/extended surface rather than over the last content row. Because a CTA band pads its body (not its padding:0 row) and a filled row pads itself, the reserve is applied at the SURFACE via --surface-reserve-end, set on the last row before this wave — see the "Footer-wave clearance" rules in components/page-content.css. */