/* ─── Section edges — parameterized boundary treatments ──────────────── Wave S spatial vocabulary. A section boundary is a design decision. Today the fleet has exactly two answers to it: a hard colour change, or one of the four frozen paths in components/section-divider/section-dividers.css (wave / mosaic). Both are choices you make once and cannot tune. This file makes the boundary a PARAMETER: angle, size, shape, and colour. NOTHING HERE REPLACES ANYTHING. section-dividers.css keeps its wave and mosaic paths and keeps working exactly as before; this is the additive, token-driven vocabulary that new work should reach for first. ── The model: the edge IS the neighbour's surface ────────────────────── The treatment is a pseudo-element painted in --edge-color, laid over the bottom (or top) band of THIS section. Set --edge-color to the ADJACENT section's background and the two surfaces interlock — no third colour appears at the seam, which is what separates a designed transition from a decorative squiggle. On the standard alternator that is one line:
The next section is --pale (--bg-alt), so the dark band appears to be cut on a diagonal by the pale one. Get --edge-color wrong and it reads as a stripe; that is the single thing to check in a screenshot. ── Classes ───────────────────────────────────────────────────────────── .hzo-section--edge-bottom arm the bottom edge (uses ::after) .hzo-section--edge-top arm the top edge (uses ::before) Shape (compose one onto an armed edge): .hzo-edge--diagonal straight cut, rises left → right .hzo-edge--diagonal-rev straight cut, rises right → left .hzo-edge--angled as --diagonal, but sized from --edge-angle .hzo-edge--angled-rev as --diagonal-rev, but sized from --edge-angle .hzo-edge--curve the neighbour rises as a wide dome .hzo-edge--arch soft rounded corners; the quietest option No shape class = a flat band of --edge-color, which is a legitimate (and very quiet) treatment: a colour shelf under the section. ── diagonal vs angled: which straight cut ────────────────────────────── Both draw the SAME triangle. They differ only in what fixes its size, and therefore in what stays constant as the page widens: --diagonal height is --edge-size. The band is a known px height at every width, so the ANGLE flattens as the page widens (64px reads 9.7° at 375 and 1.9° at 1920). --angled height is derived from --edge-angle, so the ANGLE is what holds and the band height grows with the viewport. Pick --diagonal when the band must fit a known vertical budget; pick --angled when the slope itself is the design. Do not stack them. ── Tokens ────────────────────────────────────────────────────────────── --edge-color the neighbour's surface default --bg-page --edge-size band height (--diagonal etc.) default 64px --edge-angle used by --angled / --angled-rev only default 6deg --edge-radius used by --arch only default --radius-3 --edge-rise is DERIVED, not authored: it resolves to --edge-size normally and to the tan()-computed rise on an --angled edge. It is the single value both the band height and .hzo-section--edge-pad read, which is what keeps the pad honest on an angled edge. Read it; do not set it. ── What --edge-angle actually costs you ──────────────────────────────── The cut spans the FULL width of the section, so a true angle θ needs a rise of `width × tan(θ)` — not half of it. That makes the band tall on a wide screen, and that is the honest price of a stated angle: (measured in Chromium, not calculated — see resources/release-checks/) --edge-angle 375 768 1250 1440 1920 3deg 19.6px 40.2px 65.5px 75.5px 100.6px 6deg 39.4px 80.7px 131.4px 151.3px 201.8px 12deg 79.7px 163.2px 265.7px 306.1px 408.1px 6deg is the token default and is a strong move at desktop; 2–4deg is the range that reads as a designed slope rather than a wedge. Whatever you pick, pair it with .hzo-section--edge-pad — a 200px band over an 80px padding is 120px of band sitting on copy. (`vw` includes the scrollbar, so on a scrolling desktop page the run is a scrollbar narrower than the rise assumes and the drawn angle lands under 0.1° over the stated one — 6.06° for 6° at 1440 with a 15px bar. Same caveat, and the same magnitude, as the one at the top of _base/bleed.css.) ── Two things that will bite ─────────────────────────────────────────── 1. THE EDGE EATS PADDING. The band overlays the section's own bottom padding (48px mobile / 64px tablet / 80px desktop). At the default 64px an edge on mobile reaches past the padding into content. Either keep --edge-size at or below the section's padding on small screens, or add .hzo-section--edge-pad (below) which adds the band height back as extra padding on the edged side. Prefer the pad class; it is one word. 2. ::before / ::after ARE SPENT ON IMAGE SECTIONS. .hzo-section--image and .hzo-hero--image already use ::before for their scrim, so an --edge-top cannot be added to an image section. Put a --edge-bottom on the section ABOVE it instead — the composition is identical and the pseudo is free. Content is lifted to --z-above on any edged section so the band can never paint over copy. Direct children only, mirroring what image-band.css already does for its scrim. Purely additive: these selectors require the new classes, so no existing section's computed output changes. ────────────────────────────────────────────────────────────────────────── */ /* --edge-rise is the ONE height the band and the pad both read. Declared on the armed section (not in :root) so it is scoped to edged sections and so the --angled override below can win on specificity alone. */ .hzo-section--edge-bottom, .hzo-section--edge-top { position: relative; --edge-rise: var(--edge-size, 64px); } .hzo-section--edge-bottom > *, .hzo-section--edge-top > * { position: relative; z-index: var(--z-above, 1); } .hzo-section--edge-bottom::after, .hzo-section--edge-top::before { content: ""; position: absolute; left: 0; right: 0; height: var(--edge-rise, var(--edge-size, 64px)); background: var(--edge-color, var(--bg-page)); pointer-events: none; } .hzo-section--edge-bottom::after { bottom: 0; } .hzo-section--edge-top::before { top: 0; } /* Diagonal / angled — the straight cut. The wedge keeps the corner it is anchored to and loses the opposite one, so THIS section's colour reads as the rising side. ONE corner-to-corner triangle spanning the whole band: the hypotenuse runs (0,100%) → (100%,0), so its rise is the band height and its run is the FULL band width. That is the geometry --angled has to satisfy. --angled shares the shape and differs only in how the height is derived. */ .hzo-section--edge-bottom.hzo-edge--diagonal::after, .hzo-section--edge-bottom.hzo-edge--angled::after { clip-path: polygon(0 100%, 100% 0, 100% 100%); } .hzo-section--edge-bottom.hzo-edge--diagonal-rev::after, .hzo-section--edge-bottom.hzo-edge--angled-rev::after { clip-path: polygon(0 0, 100% 100%, 0 100%); } .hzo-section--edge-top.hzo-edge--diagonal::before, .hzo-section--edge-top.hzo-edge--angled::before { clip-path: polygon(0 0, 100% 0, 0 100%); } .hzo-section--edge-top.hzo-edge--diagonal-rev::before, .hzo-section--edge-top.hzo-edge--angled-rev::before { clip-path: polygon(0 0, 100% 0, 100% 100%); } /* Curve — the neighbour's surface rises as one wide, shallow dome. The elliptical radius (`/`) is what keeps it shallow: 50% horizontally, the full band height vertically. A circular radius here would read as a bubble. */ .hzo-section--edge-bottom.hzo-edge--curve::after { border-radius: 50% 50% 0 0 / 100% 100% 0 0; } .hzo-section--edge-top.hzo-edge--curve::before { border-radius: 0 0 50% 50% / 0 0 100% 100%; } /* Arch — rounded corners only. The restrained option: it softens the seam without announcing itself, and it is the one that survives at 375px. */ .hzo-section--edge-bottom.hzo-edge--arch::after { border-radius: var(--edge-radius, var(--radius-3)) var(--edge-radius, var(--radius-3)) 0 0; } .hzo-section--edge-top.hzo-edge--arch::before { border-radius: 0 0 var(--edge-radius, var(--radius-3)) var(--edge-radius, var(--radius-3)); } /* Angled — the same straight cut, sized so it holds a TRUE --edge-angle at every viewport width instead of flattening as the page widens. THE RISE IS 100vw, NOT 50vw. The clip-path above is a single corner-to-corner triangle, so tan(θ) = rise / FULL width. A 50vw rise draws atan(0.5·tan θ) — 3.0° for a stated 6° — which is what shipped in the first cut of this file and is why the class name and the token both lied. 50vw would only be right for a symmetric two-half peak, and no shape here is one. Overriding --edge-rise (not `height`) is deliberate: it keeps .hzo-section--edge-pad correct automatically, since the pad reads the same value. tan() is baseline in every browser the fleet supports; the @supports gate means an engine without it degrades to a --edge-size-tall straight cut — still a diagonal, just at a fixed band height — rather than losing the cut. */ @supports (height: calc(1px * tan(45deg))) { .hzo-section--edge-bottom.hzo-edge--angled, .hzo-section--edge-bottom.hzo-edge--angled-rev, .hzo-section--edge-top.hzo-edge--angled, .hzo-section--edge-top.hzo-edge--angled-rev { --edge-rise: calc(100vw * tan(var(--edge-angle, 6deg))); } } /* Padding restore — adds the band height back so the edge overlays empty space instead of copy. Compound selector (0,2,0) to beat the base .hzo-section padding ladder (0,1,0) at every breakpoint. Reads --edge-rise, NOT --edge-size, so it covers an --angled band too. With --edge-size it restored a flat 64px under a band that measures 101px at 1920, leaving 37px of cut sitting on the copy it exists to protect. */ .hzo-section.hzo-section--edge-pad.hzo-section--edge-bottom { padding-bottom: calc(var(--space-xl) + var(--edge-rise, var(--edge-size, 64px))); } .hzo-section.hzo-section--edge-pad.hzo-section--edge-top { padding-top: calc(var(--space-xl) + var(--edge-rise, var(--edge-size, 64px))); } @media (min-width: 768px) { .hzo-section.hzo-section--edge-pad.hzo-section--edge-bottom { padding-bottom: calc(var(--space-2xl) + var(--edge-rise, var(--edge-size, 64px))); } .hzo-section.hzo-section--edge-pad.hzo-section--edge-top { padding-top: calc(var(--space-2xl) + var(--edge-rise, var(--edge-size, 64px))); } } @media (min-width: 1250px) { .hzo-section.hzo-section--edge-pad.hzo-section--edge-bottom { padding-bottom: calc(var(--space-3xl) + var(--edge-rise, var(--edge-size, 64px))); } .hzo-section.hzo-section--edge-pad.hzo-section--edge-top { padding-top: calc(var(--space-3xl) + var(--edge-rise, var(--edge-size, 64px))); } }