/* =================================================================== STEPPED CORNERS — global css =================================================================== Website.pdf draws every cut corner as a TWO-step staircase, not the single step `.notch` produces. Measured off the new artboard, step size varies by the size of the thing being cut, but the shape is always the same: stat card (567x365) 20px steps -> --notch-xs inset dark boxes 35px steps -> --notch-md section colour bands 60px steps -> --stair (see .band-stair) large decorative panels 105px steps -> --notch-lg `.notch` in vendor.css stays exactly as it is — it is still correct for the 5px button corner, which the PDF draws as a single step. Everything larger uses `.notch-2` INSTEAD of `.notch`, paired with a step class: class="notch-2 notch-md" not class="notch notch-md notch-2" (`.notch-md` / `.notch-lg` set --notch on their own; dropping `.notch` keeps a single clip-path on the element instead of two fighting ones.) =================================================================== */ :root { /* the stat-card step; the other three already exist in vendor.css */ --notch-xs: 20px; /* Raised dark surfaces measure #252525 on the artboard, which is exactly --ink lifted by --tint-light (white at 10%). Written as a colour-mix so it stays derived from the palette instead of hard-coding the hex. */ --surface-raised: color-mix(in srgb, var(--white) 10%, var(--ink)); @media (max-width: 767.98px) { --notch-xs: 14px; } } /* ------------------------------------------------------------------- .notch-2 — the two-step staircase, all four corners. Pair with a step class, which is what sets --notch: class="notch-2 notch-xs" 20px stat cards class="notch-2 notch-md" 35px inset dark boxes, portrait panels class="notch-2 notch-lg" 105px large decorative panels ------------------------------------------------------------------- */ .notch-2 { --n: var(--notch, var(--notch-sm)); --n2: calc(var(--n) * 2); clip-path: polygon( var(--n2) 0, calc(100% - var(--n2)) 0, calc(100% - var(--n2)) var(--n), calc(100% - var(--n)) var(--n), calc(100% - var(--n)) var(--n2), 100% var(--n2), 100% calc(100% - var(--n2)), calc(100% - var(--n)) calc(100% - var(--n2)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n2)) calc(100% - var(--n)), calc(100% - var(--n2)) 100%, var(--n2) 100%, var(--n2) calc(100% - var(--n)), var(--n) calc(100% - var(--n)), var(--n) calc(100% - var(--n2)), 0 calc(100% - var(--n2)), 0 var(--n2), var(--n) var(--n2), var(--n) var(--n), var(--n2) var(--n) ); } .notch-xs { --notch: var(--notch-xs); } /* Modifier for .notch-2 (it reuses --n / --n2, so keep both classes on the element). Website.pdf leaves the bottom-left corner of the team portrait panels square while stepping the other three. Measured, not assumed. */ .notch-2--no-bl { clip-path: polygon( var(--n2) 0, calc(100% - var(--n2)) 0, calc(100% - var(--n2)) var(--n), calc(100% - var(--n)) var(--n), calc(100% - var(--n)) var(--n2), 100% var(--n2), 100% calc(100% - var(--n2)), calc(100% - var(--n)) calc(100% - var(--n2)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n2)) calc(100% - var(--n)), calc(100% - var(--n2)) 100%, 0 100%, 0 var(--n2), var(--n) var(--n2), var(--n) var(--n), var(--n2) var(--n) ); } /* ------------------------------------------------------------------- .band-stair — the staircase where two full-bleed colour bands meet. Measured at six junctions on the new artboard (intro/reasons, reasons/one-reason, outcomes/market, agenda/different, different/team, team/closing). In every one of them the LOWER band's colour climbs into the band above it at both corners, in two 60px steps: y 0 .. 60 -> 60px wide at each edge y 60 .. 120 -> 120px wide at each edge y 120 .. -> full width So the lower section is pulled up by the full 120px depth and clipped to that shape, and its top padding gains the same 120px back so the content inside does not move. Put it on the LOWER of the two sections. The four junctions the PDF draws flat (hero/marquee, marquee/intro, one-reason/outcomes, market/agenda) do not get this class. The class does NOT set padding — section files load after this one and would override it. Each section spends the 120px back itself: padding-block: calc(var(--sectionGap) + var(--stair2)) var(--sectionGap); ------------------------------------------------------------------- */ .band-stair { --stair: var(--sp40); --stair2: calc(var(--stair) * 2); position: relative; margin-top: calc(var(--stair2) * -1); clip-path: polygon( 0 0, var(--stair) 0, var(--stair) var(--stair), var(--stair2) var(--stair), var(--stair2) var(--stair2), calc(100% - var(--stair2)) var(--stair2), calc(100% - var(--stair2)) var(--stair), calc(100% - var(--stair)) var(--stair), calc(100% - var(--stair)) 0, 100% 0, 100% 100%, 0 100% ); @media (max-width: 991.98px) { --stair: var(--sp40); } @media (max-width: 575.98px) { --stair: var(--sp20); } } /* ------------------------------------------------------------------- .grid-dots — the + / dot checkerboard. Measured pitch 63.7 x 66.6. The hero has carried this since the first build; Website.pdf adds it to the agenda CTA box too, so it moves here rather than being copied. Decorative only: always pair with aria-hidden. ------------------------------------------------------------------- */ .grid-dots { position: absolute; inset: 0; z-index: 0; pointer-events: none; /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='127.4' height='133.2' viewBox='0 0 127.4 133.2'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.16'%3E%3Cpath d='M33.4 29.9h8.7M37.75 25.55v8.7M97.1 96.5h8.7M101.45 92.15v8.7'/%3E%3C/g%3E%3Cg fill='%23D9D9D9' opacity='0.16'%3E%3Crect x='99.65' y='28.45' width='2.9' height='2.9'/%3E%3Crect x='36.3' y='95.05' width='2.9' height='2.9'/%3E%3C/g%3E%3C/svg%3E"); background-size: 63.7px 66.6px; background-repeat: repeat; */ } /* ------------------------------------------------------------------- .ascii-art — the outlined ASCII drawings on the new artboard. They ship as transparent PNGs exported from Website.pdf at 2x (the artwork is vector-outlined text in the PDF, so there is no live string to typeset). Decorative: empty alt + aria-hidden. ------------------------------------------------------------------- */ .ascii-art { position: absolute; z-index: 0; display: block; height: auto; max-width: none; pointer-events: none; user-select: none; width: 100%; }