/* ═══════════════════════════════════════════════════════════════════════════ EDGES — the shaped seams between bands. These lived in landing.css and were therefore index-only, which is why every other page on the site meets its neighbour on a flat line while the front door has a different event at every seam. Kevin: "that is copied exactly from the landing page. So you can just make it so that it's consistent and it's not looking like it's gonna cut off if you scroll one more time." Also, on the museum specifically: "don't do that jagged shit here" — so /museum uses wave, drift, crest and scallop, and never jag or torn. The whole system is a three-layer CSS mask, so it never needs to know a band's colour: cream, sand, sage, white and ink all cut identically. THE LAST RULE IN HERE IS THE ONE THAT STOPS THINGS LOOKING CLIPPED. A shape eats vertical space out of the band's own padding, so the padding is given back — otherwise a headline sits inside the trough of its own wave and the section reads as cut off at the top. ═══ WHY THE TOKEN IS --seam AND NOT --edge ═══════════════════════════════ It was --edge, and site.css has used --edge as a HAIRLINE COLOUR since long before this file existed — including redefining it per tone, so on any [data-tone="ink"] section it resolves to rgba(244,241,234,.18). calc(96px + * 1.5) is invalid AT COMPUTED-VALUE TIME, which does not fall back to the previous cascade value: it resets the property to its initial. So the last section of every ink-toned page got padding-bottom 0, the footer climbed its 64px anyway, and the seam ate the content above it. That is the clipping. One name, two meanings, and the older meaning wins. This file renames. ═══════════════════════════════════════════════════════════════════════════ */ /* ══ THE EDGES ════════════════════════════════════════════════════════════ Kevin drew this one. Two rectangles: the first ends in a long S-curve, the second begins on the matching curve and ends in a row of half-drawn circles. "Jagged. Like a wave. Some of them is like a little cloud-ish, like a bunch of half-drawn circles. Get very creative with every single transition." HOW, and why not the three obvious ways: clip-path: path() absolute coordinates. Correct at one width. clip-path: url(#id) with objectBoundingBox units it scales, but it scales BOTH axes — a scallop becomes an ellipse on a tall band and a different ellipse on a short one. The shape stops being a shape. an SVG divider element a real node between every pair of bands, whose fill has to be told the colour of the band above AND below it. Fourteen bands, four tones. Instead: a THREE-LAYER MASK on the band itself. top the shape, 100% x var(--seam) at the top middle a flat fill 100% x calc(100% - 2*var(--seam)) bottom the shape, 100% x var(--seam) at the bottom The middle never stretches, so only the shaped strips are scaled — and only the ones that SHOULD be. A wave wants to stretch across the viewport; a scallop does not, so scallops and jags TILE at a fixed width and keep their aspect at any screen size. And because it is a mask, it never needs to know the band's colour: cream, sand, white and ink all cut identically. THE SHADOW HAD TO GO. box-shadow draws the element's border box, not its masked silhouette, so every shaped band was rendering a hard rectangular shadow underneath a wavy edge. drop-shadow() would respect the mask and costs a full-size filter pass on a 1500px band, fourteen times. The pastel gap already separates the plates; the shapes are the interest now. */ :root { --seam: 64px; --seam-tile: 168px; } /* Every band that carries a shape opts in. The unshaped ones keep the plate radius and the shadow exactly as they were. */ [data-edge] { box-shadow: none; -webkit-mask-repeat: no-repeat, no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat, no-repeat; -webkit-mask-position: top center, center, bottom center; mask-position: top center, center, bottom center; -webkit-mask-size: 100% var(--seam), 100% calc(100% - var(--seam) * 2), 100% var(--seam); mask-size: 100% var(--seam), 100% calc(100% - var(--seam) * 2), 100% var(--seam); } /* The flat middle. Opaque, so it keeps everything between the two shapes. */ :root { --mid: linear-gradient(black, black); } /* ── THE SHAPES ─────────────────────────────────────────────────────────── Each is a 1200x64 strip. Top variants cut ABOVE the line, bottom variants cut BELOW it, so the same drawn curve reads as the underside of one plate and the topside of the next. */ /* WAVE — Kevin's drawing. A long S that dips left and lifts right. */ :root { --w-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0 34 C 200 4 380 60 600 32 C 820 4 1000 56 1200 26 L1200 64 L0 64 Z' fill='black'/%3E%3C/svg%3E"); --w-bot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1200 0 L1200 38 C 1000 8 820 60 600 32 C 380 4 200 60 0 30 Z' fill='black'/%3E%3C/svg%3E"); } /* SCALLOP — the half-drawn circles at the bottom of the drawing. Tiles. */ :root { --s-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 64'%3E%3Cpath d='M0 46 C 0 6 168 6 168 46 L168 64 L0 64 Z' fill='black'/%3E%3C/svg%3E"); --s-bot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 64'%3E%3Cpath d='M0 0 L168 0 L168 18 C 168 58 0 58 0 18 Z' fill='black'/%3E%3C/svg%3E"); } /* JAG — angular. Tiles, so the teeth stay the same size everywhere. */ :root { --j-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 64'%3E%3Cpath d='M0 20 L42 48 L84 16 L126 48 L168 20 L168 64 L0 64 Z' fill='black'/%3E%3C/svg%3E"); --j-bot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 64'%3E%3Cpath d='M0 0 L168 0 L168 44 L126 16 L84 48 L42 16 L0 44 Z' fill='black'/%3E%3C/svg%3E"); } /* CREST — one asymmetric swell across the whole width. Stretches. */ :root { --c-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0 52 C 300 52 420 6 700 6 C 940 6 1040 44 1200 44 L1200 64 L0 64 Z' fill='black'/%3E%3C/svg%3E"); --c-bot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1200 0 L1200 20 C 1040 20 940 58 700 58 C 420 58 300 12 0 12 Z' fill='black'/%3E%3C/svg%3E"); } /* DRIFT — a long lazy dune, shallower than the wave. Stretches. */ :root { --d-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C 260 50 460 14 760 30 C 980 42 1080 22 1200 34 L1200 64 L0 64 Z' fill='black'/%3E%3C/svg%3E"); --d-bot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1200 0 L1200 30 C 1080 18 980 38 760 26 C 460 10 260 46 0 18 Z' fill='black'/%3E%3C/svg%3E"); } /* TORN — irregular, hand-torn paper. Stretches; the irregularity survives. */ :root { --t-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0 30 L86 42 L170 24 L268 38 L360 22 L452 40 L556 26 L648 44 L742 28 L840 42 L936 24 L1032 40 L1120 26 L1200 36 L1200 64 L0 64 Z' fill='black'/%3E%3C/svg%3E"); --t-bot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1200 0 L1200 28 L1120 38 L1032 24 L936 40 L840 22 L742 36 L648 20 L556 38 L452 24 L360 42 L268 26 L170 40 L86 22 L0 34 Z' fill='black'/%3E%3C/svg%3E"); } /* ── ASSIGNMENT ─────────────────────────────────────────────────────────── No band shares an edge shape with the one it touches, so every seam on the page is a different event. The name says which shape meets which: data-edge="wave-scallop" is a wave on top, scallops underneath. */ [data-edge$="-wave"], [data-edge^="wave-"] { } /* declared below */ [data-edge^="wave-"] { --top: var(--w-top); } [data-edge^="scallop-"] { --top: var(--s-top); } [data-edge^="jag-"] { --top: var(--j-top); } [data-edge^="crest-"] { --top: var(--c-top); } [data-edge^="drift-"] { --top: var(--d-top); } [data-edge^="torn-"] { --top: var(--t-top); } [data-edge^="flat-"] { --top: var(--mid); } [data-edge$="-wave"] { --bot: var(--w-bot); } [data-edge$="-scallop"] { --bot: var(--s-bot); } [data-edge$="-jag"] { --bot: var(--j-bot); } [data-edge$="-crest"] { --bot: var(--c-bot); } [data-edge$="-drift"] { --bot: var(--d-bot); } [data-edge$="-torn"] { --bot: var(--t-bot); } [data-edge$="-flat"] { --bot: var(--mid); } [data-edge] { -webkit-mask-image: var(--top), var(--mid), var(--bot); mask-image: var(--top), var(--mid), var(--bot); } /* The tiling ones. A scallop stretched to 1600px is not a scallop, so these repeat at a fixed tile instead of scaling — the arcs stay circular on a phone and on a 4K display, and only the COUNT changes. */ [data-edge^="scallop-"], [data-edge^="jag-"] { -webkit-mask-repeat: repeat-x, no-repeat, no-repeat; mask-repeat: repeat-x, no-repeat, no-repeat; -webkit-mask-size: var(--seam-tile) var(--seam), 100% calc(100% - var(--seam) * 2), 100% var(--seam); mask-size: var(--seam-tile) var(--seam), 100% calc(100% - var(--seam) * 2), 100% var(--seam); } [data-edge$="-scallop"], [data-edge$="-jag"] { -webkit-mask-repeat: no-repeat, no-repeat, repeat-x; mask-repeat: no-repeat, no-repeat, repeat-x; -webkit-mask-size: 100% var(--seam), 100% calc(100% - var(--seam) * 2), var(--seam-tile) var(--seam); mask-size: 100% var(--seam), 100% calc(100% - var(--seam) * 2), var(--seam-tile) var(--seam); } /* both ends tiled */ [data-edge^="scallop-"][data-edge$="-jag"], [data-edge^="jag-"][data-edge$="-scallop"], [data-edge^="scallop-"][data-edge$="-scallop"], [data-edge^="jag-"][data-edge$="-jag"] { -webkit-mask-repeat: repeat-x, no-repeat, repeat-x; mask-repeat: repeat-x, no-repeat, repeat-x; -webkit-mask-size: var(--seam-tile) var(--seam), 100% calc(100% - var(--seam) * 2), var(--seam-tile) var(--seam); mask-size: var(--seam-tile) var(--seam), 100% calc(100% - var(--seam) * 2), var(--seam-tile) var(--seam); } /* A shaped band cannot also be a rounded rectangle — the radius rounds the border box, which the mask has already cut away, so the two fight and the corners come back as little nicks. Square the box and let the shape be the shape. The left and right edges keep the plate inset either way. */ [data-edge] { border-radius: 0; } /* Shapes eat vertical space out of the band's own padding, so give it back — otherwise a headline sits inside the trough of its own wave. */ [data-edge] { padding-top: calc(var(--band-pad, 96px) + var(--seam) * .5); padding-bottom: calc(var(--band-pad, 96px) + var(--seam) * .5); } @media (max-width: 900px) { :root { --seam: 40px; --seam-tile: 108px; } } @media (prefers-reduced-motion: no-preference) { /* nothing animates here — the shapes are static geometry. Recorded so the next reader does not go looking for the animation that is not missing. */ } /* ══ THE FOOTER SEAM ══════════════════════════════════════════════════════ Kevin: "the little bottom section for Corvexal... in some places it is clipped off, or it's very short... I want it to be consistent across every single section in this entire thing where it's copied. The first image, where it's like a little wavy border, that is copied exactly from the landing page." It was index-only, because the rule lived in landing.css and landing.css is linked by index and nothing else. Every other page met its footer on a flat line, and — separately — an ID selector in site.css was zeroing the footer's top padding on all of them, so the same footer shipped at three different heights: 954px on index, 886px on aria, 794px everywhere else, with its first line hard against its own top edge. That is the clipped look, and it was two unrelated bugs wearing one coat. THE MECHANISM IS INDEX'S, UNCHANGED. The footer climbs 64px over the plate above it and gives the same 64px back as padding, so the seam is one curve instead of two curves with a strip of ground trapped between them. Only the top is shaped: there is no plate below the footer for a bottom edge to meet, so the second mask layer runs flat to the end. main + .foot2, not .foot2 alone, because footer.css loads after this sheet and sets margin as a shorthand. At equal specificity the later sheet wins and the overlap silently does not happen. The combinator costs one point, which is all it takes, and it states something true: this is the footer that directly follows main. THE LAST PLATE PAYS THE 64px BACK. On index that is #door, named explicitly below. Everywhere else it is whichever section ends main, and :has() cannot see across , so it is said as a last-child rule. */ main + .foot2 { /* THE SIDE INSET IS INDEX'S, NOT EVERY PAGE'S. --plate-x is 16px and is declared in landing.css, which only index loads: its whole page is plates floating in a cream gutter, so the footer insetting to match is correct there. Everywhere else the sections are full-bleed, so a 16px fallback put a cream stripe down both edges of the footer on 23 pages. The fallback is 0; index still gets 16px from its own token. */ margin: calc(var(--seam) * -1) var(--plate-x, 0px) 0; border-radius: 0; padding-top: calc(92px + var(--seam)); -webkit-mask-image: var(--w-top), var(--mid); mask-image: var(--w-top), var(--mid); -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; -webkit-mask-position: top center, bottom center; mask-position: top center, bottom center; -webkit-mask-size: 100% var(--seam), 100% calc(100% - var(--seam)); mask-size: 100% var(--seam), 100% calc(100% - var(--seam)); } /* the plate the footer climbs over gives the distance back */ main > section:last-child { padding-bottom: calc(var(--band-pad-y, 96px) + var(--seam) * 1.5); } #door { padding-bottom: calc(var(--band-pad, 96px) + var(--seam) * 1.5); } @media (max-width: 640px) { main + .foot2 { margin-inline: var(--plate-x, 0px); } }