/* =========================================================================== SECTION CORNERS — Call Insights, SEO & Content, Websites --------------------------------------------------------------------------- Brees, 8/31: "go through the created pages and see where we should add border radius to sections — goal is to make it feel like it's always flowing into the next section." The Google Ads page solved this on 8/31 and its mechanics are ported here rather than rediscovered. Google Ads keeps its own copy in google-ads.css and is NOT touched by this sheet. --------------------------------------------------------------------------- WHY ONE SHARED SHEET AND NOT THREE PAGE SHEETS seo-content.css opens by warning about the two-page blast radius of editing a shared rule, and that warning is right — but the hazard it names is a rule landing on a page nobody was looking at. EVERY selector below is prefixed with a page class (.page-vci / .page-seo / .page-wsite), so a rule physically cannot reach a page it was not written for. What is shared here is the token and the prose, both identical on all three pages and worth writing once. 🔴 THE PAGE CLASSES LIVE ON AND ARE LOAD-BEARING. Remove one and that page silently loses every corner — no error, no gate, just flat edges again. scripts/corner-check.js asserts they are present. --------------------------------------------------------------------------- 🔴 A ROUNDED CORNER REVEALS WHATEVER IS PAINTED BENEATH IT, AND IS --oat CREAM ON THESE THREE PAGES. Sections stack edge to edge, so there is nothing behind a corner but the page ground. Four separate corners hit this on Google Ads in a single day. The fix, both halves required: 1. PULL UP. The rounded section gets a negative top margin of R, so the corner reveals the PREVIOUS SECTION'S ground — a real colour — instead of the page ground. 🔴 AND NOTHING IS ADDED BACK ON TOP. The first version paid the pull-up back as top padding so content would not MOVE. That was a continuity choice, not something the corner needs, and it quietly skewed the whole site: the top payback is fully visible, while the BOTTOM payback is eaten by the next section pulling up over it. Measured at 1440 across all four pages, nearly every rounded section painted ~178px above its content against 66-112px below. Brees, 9/2: "a lot of the sections have more padding on top vs on the bottom." Sections now keep their own --section-pad on top, which is what makes top and bottom match. ⚠️ THE PAD-OUT BELOW GOES WHERE THE SECTION'S OWN PADDING LIVES, WHICH IS NOT ALWAYS ON THE SECTION. .proofcase and .wsite-approach declare ZERO block padding ON PURPOSE and put it on their inner columns, because each has a full-bleed panel that must run the section's whole height — pad the section and the panel floats as a stripe with ground above and below it. Handing those two `--section-pad + R` on the section did exactly that: a band of dead indigo above the heading, which Brees circled on BOTH pages. Their COLUMNS take the pad-out instead, and `overflow: clip` clips the panel to the rounded corner — which is what makes a corner read on a full-bleed panel at all. ⚠️ .wsite-approach only zeroes its padding at 900px and up; below that it is an ordinary --section-pad section. 2. PAD OUT. The pull-up is full-width, so it eats R off the bottom of the previous section. Growing that section's bottom padding by the same R restores the gap the reader sees. Brees on the Google Ads version before this half was added: "too much white and not enough blue." PULL-UP AND PAD-OUT ARE ONE SETTING. Change one, change both. 🔴 THE RADIUS IS CAPPED BY THE PREVIOUS SECTION'S BOTTOM PADDING, because until the pad-out lands the pull-up is covering real copy. Measured --section-pad (direction-d-v3.css, a clamp of 3rem / 6vw / 5.5rem): 1600px 88px 1024px 61px 900px ~54px A clamp of 32px / 5vw / 80px stays under all three (80 / 51 / 45) and is the value Google Ads ships, so the five pages read as one system. ⚠️ Going bigger is not a matter of raising this number — every preceding section needs matching extra bottom padding first. That conversation is still open from Brees' marked-up shot. --------------------------------------------------------------------------- THE SIDE ALTERNATES, AND IT IS ANCHORED AT THE BOTTOM Corners alternate top-left / top-right down the page so the stack reads as a weave rather than the same stamp repeated. The alternation is counted BACKWARDS from the closing CTA, which is top-left on all four built pages — it is the one section every page shares, and it looked wrong being the odd one out on a page with an even number of corners. */ :root { --corner: clamp(32px, 5vw, 80px); } /* =========================================================================== PANEL CORNERS — the bleeding two-tone fills, 9/2 --------------------------------------------------------------------------- Brees, 9/2, pointing at the bottom-left of the Websites approach panel: "should any other elements have curves? like this example" THE RULE COMES OUT OF THE LOGO. brand-devices.md: "the rounded language comes from the logo's arch forms", and an arch is round where it turns and straight where its legs run off. A panel that bleeds off the page is the same shape — so it curves on the edge that stays INSIDE the page and squares off on the edge that leaves. That is the section corners' logic one tier down. 📌 THE PATTERN ALREADY EXISTED; TWO PAGES JUST NEVER GOT IT. .gads-standardblock bleeds left, capped right, curved 220px .gads-manifesto::before bleeds left, capped right, curved 500px (the arc) .recovered__field bleeds left, capped right, curved 240px .wapp__aside::before bleeds right, capped left, SQUARE <- added here .proofcase__rail::before bleeds left, capped right, SQUARE <- added here ⏹ .wsite-gal__copy-inner::before is deliberately left alone — it bleeds on three sides inside the hero's sticky animated pane, so it has no quiet inside edge to curve. 🔴 THE BOTTOM CORNER HAS TO BE SHORTENED INTO VIEW OR IT IS INVISIBLE. Both panels are tied to their cell with `inset-block: 0`, so they run to the section's true bottom — and the next section is pulled up over that by one --corner. Measured at 1440: 72px of each panel sits under the section below. A radius down there would paint beneath the cover and never be seen, so the panel is ended at the seam instead, which is exactly where Brees drew his curve. */ :root { --panel-corner: clamp(24px, 3.2vw, 56px); } /* Websites: bleeds RIGHT off the viewport, capped on the left. */ @media (min-width: 900px) { .page-wsite .wapp__aside::before { bottom: var(--corner); border-top-left-radius: var(--panel-corner); border-bottom-left-radius: var(--panel-corner); } } /* SEO: the mirror — bleeds LEFT, capped on the right. */ .page-seo .proofcase__rail::before { bottom: var(--corner); border-top-right-radius: var(--panel-corner); border-bottom-right-radius: var(--panel-corner); } /* =========================================================================== ⏹ NO BLANKET z-index ON THE ROUNDED SECTIONS, AND THIS IS THE SECOND ANSWER TO THAT PROBLEM, NOT THE ABSENCE OF ONE. The Websites approach panel's bleeding fill was painting into the section pulled up over it — `.wapp__split` is a `.container`, and websites.css puts containers at z-index 2, so it outranked a section sitting at `auto`. The first fix raised every rounded section to 3. 🔴 THAT FIX HAD A BLAST RADIUS AND BREES FOUND IT: a raised `.final-cta` also outranks the FOOTER, so its big --petal disc stopped being covered and sat over the footer as a pink circle. Raising things to win a local fight wins fights you did not know you were in. The panel curves added later end each bleeding fill at the seam (`bottom: var(--corner)`), which removes the overlap at its source. Measured with the z-index taken back out: corner-check's overlap-strip proof stays green at 1766 checks. So the raise is not needed here and is gone. ⚠️ Google Ads still needs a small ladder, because its testimonial is raised to slide over Derek — see google-ads.css. The footer now carries its own z-index so no section can climb over it again. =========================================================================== */ /* =========================================================================== PANEL CORNERS — the bleeding two-tone fills, 9/2 --------------------------------------------------------------------------- Brees, 9/2, pointing at the bottom-left of the Websites approach panel: "should any other elements have curves? like this example" THE RULE COMES OUT OF THE LOGO. brand-devices.md: "the rounded language comes from the logo's arch forms", and an arch is round where it turns and straight where its legs run off. A panel that bleeds off the page is the same shape — so it curves on the edge that stays INSIDE the page and squares off on the edge that leaves. That is the section corners' logic one tier down. 📌 THE PATTERN ALREADY EXISTED; TWO PAGES JUST NEVER GOT IT. .gads-standardblock bleeds left, capped right, curved 220px .gads-manifesto::before bleeds left, capped right, curved 500px (the arc) .recovered__field bleeds left, capped right, curved 240px .wapp__aside::before bleeds right, capped left, SQUARE <- added here .proofcase__rail::before bleeds left, capped right, SQUARE <- added here ⏹ .wsite-gal__copy-inner::before is deliberately left alone — it bleeds on three sides inside the hero's sticky animated pane, so it has no quiet inside edge to curve. 🔴 THE BOTTOM CORNER HAS TO BE SHORTENED INTO VIEW OR IT IS INVISIBLE. Both panels are tied to their cell with `inset-block: 0`, so they run to the section's true bottom — and the next section is pulled up over that by one --corner. Measured at 1440: 72px of each panel sits under the section below. A radius down there would paint beneath the cover and never be seen, so the panel is ended at the seam instead, which is exactly where Brees drew his curve. */ :root { --panel-corner: clamp(24px, 3.2vw, 56px); } /* Websites: bleeds RIGHT off the viewport, capped on the left. */ @media (min-width: 900px) { .page-wsite .wapp__aside::before { bottom: var(--corner); border-top-left-radius: var(--panel-corner); border-bottom-left-radius: var(--panel-corner); } } /* SEO: the mirror — bleeds LEFT, capped on the right. */ .page-seo .proofcase__rail::before { bottom: var(--corner); border-top-right-radius: var(--panel-corner); border-bottom-right-radius: var(--panel-corner); } /* =========================================================================== 🔴 A PULLED-UP SECTION MUST OUTRANK THE ONE IT OVERLAPS, AND `auto` DOES NOT. The pull-up puts the rounded section on top of the previous section's last R pixels. Painting order for positioned elements at `z-index: auto` is DOM order, so the later section wins — which is why 18 of the 19 corners looked right without anyone thinking about stacking. The nineteenth did not. websites.css writes the house scale down: "`.container` is 2, the ambient shapes are 1" (header 40, the flying render 30). `.wapp__split` IS a .container, so the approach section's bleeding two-tone panel lives in a z-index-2 stacking context and outranked the cream section pulled up over it — a band of `rgba(47, 47, 53, 0.22)` over cream, measured at rgb(199,195,193), on the right-hand side only. Brees circled it. z-index 3 puts the rounded section above any predecessor's .container while staying below the flying render and the sticky header, so nothing that is meant to fly over a section boundary is affected. ⚠️ SCOPED TO THIS SHEET'S PAGES. google-ads.css says a z-index there "would break" its own corners, and its sections have no .container bleeding into the overlap. Do not port this rule to that page. 📌 Equal z-index still resolves by DOM order, so the rounded sections keep their normal front-to-back relationship with each other. */ .page-vci .problem, .page-vci .how, .page-vci .deliverable, .page-vci .pricing, .page-vci .faq, .page-vci .final-cta, .page-seo .aspects, .page-seo .services, .page-seo .costs, .page-seo .proofcase, .page-seo .faq, .page-seo .final-cta, .page-wsite .wsite-problem, .page-wsite .wsite-approach, .page-wsite .wsite-steps, .page-wsite .wsite-costs, .page-wsite .wproof, .page-wsite .faq, .page-wsite .final-cta { position: relative; /* z-index: 3; <- TEMPORARILY DISABLED FOR A MEASUREMENT */ } /* =========================================================================== 1. CALL INSIGHTS — /products/call-insights/ Grounds in order: hero white / problem indigo / how cream / deliverable white / proof sky-soft / pricing indigo / faq white / cta sky. 🔴 .proof.recovered GETS NO CORNER AND NO PAD-OUT, AND THAT IS A MEASURED DECISION, NOT AN OVERSIGHT. Its height is load-bearing: direction-d-v3.css records that the section was deliberately shortened on 8/24 so the indigo below "should not scroll in until the light blue touches the bottom of the header", and that initProofPin() falls back to pinning at viewport-minus-section-height once the section stops fitting. That note measures the failure at 863px tall in a 900px viewport. Either half of the corner mechanic adds R to this section's height and walks it straight back into that branch — a corner adds R of top padding, a pad-out adds R at the bottom. So it stays square, and .pricing's corner rises over it without compensation. ⚠️ THE COST IS REAL AND IS BREES' TO ACCEPT: the sky-soft gap below the last content drops from 128px to 48px at 1600, and 70px to 25px at 1024, in the moment before the indigo arrives over it. corner-check.js asserts those numbers so they cannot drift unnoticed. */ /* 🔴 A CORNER AND ITS PULL-UP ARE ONE THING - LIST BOTH OR NEITHER. A section that gets a border-radius above must also get this negative margin, or the previous section's corner-sized bottom padding is never overlapped and paints as a band of dead ground. .recovered was given a corner on 9/22 when .how was removed, and leaving it out of THIS rule opened ~64px of white between the email cards and the proof band - visible in a full-page shot, invisible to every checker. .how is dropped here too; it no longer exists. */ .page-vci .problem, .page-vci .deliverable, .page-vci .recovered, .page-vci .pricing, .page-vci .faq, .page-vci .final-cta { margin-top: calc(-1 * var(--corner)); } /* The hero's top padding is its own value, not --section-pad, so it is kept out of the group rule above; only its BOTTOM is compensated here. */ .page-vci .hero { padding-bottom: calc(var(--section-pad) * 0.75 + 53px + var(--corner)); } .page-vci .problem, .page-vci .deliverable, .page-vci .recovered, .page-vci .pricing, .page-vci .faq { padding-bottom: calc(var(--section-pad) + var(--corner)); } /* 🔴 THE RUN ALTERNATES, AND IT IS COUNTED FROM .problem — RE-MAPPED 9/22. `.how` was removed with the VCI copy v3 (Alie: "remove the three things, zero setup section entirely"). It held the LEFT corner in the middle of the run, so dropping it left .problem and .deliverable BOTH on the right and killed the curve into .recovered. Brees saw all three symptoms on the live page. This is the hazard the .si-setup block in this file warns about in so many words: insert or drop a section and the whole run flips. A dead selector for a section that no longer exists does not fail anything - it just silently stops contributing its corner, which is why nothing caught it. Current order, hero excluded: problem / deliverable / recovered / pricing / faq / final-cta. Each carries its own ground, so every corner paints. ⚠ .recovered is the `section proof recovered` band (--sky). It had no corner before because .how's left corner made the rhythm work without one. ⚠ If a section is added or removed here again, RE-COUNT THE WHOLE RUN. */ .page-vci .problem { border-top-right-radius: var(--corner); } .page-vci .deliverable { border-top-left-radius: var(--corner); } .page-vci .recovered { border-top-right-radius: var(--corner); } .page-vci .pricing { border-top-left-radius: var(--corner); } .page-vci .faq { border-top-right-radius: var(--corner); } .page-vci .final-cta { border-top-left-radius: var(--corner); } /* =========================================================================== 2. SEO & CONTENT — /products/seo-content/ Grounds in order: hero white / aspects cream / services indigo / costs white / proofcase indigo / faq white / cta sky. ⚠️ .proofcase declares a zero bottom padding — its 68px of painted breathing room comes from content inside it. Its pad-out is therefore the corner alone, not --section-pad plus the corner, or it would gain a bottom gap it never had. This is the trap the Google Ads session named as "declared padding is not painted spacing", read from the other direction. */ /* The pull-up is on the section for everything, including .proofcase — it is only the PAYBACK that differs. */ .page-seo .aspects, .page-seo .services, .page-seo .costs, .page-seo .proofcase, .page-seo .faq, .page-seo .final-cta { margin-top: calc(-1 * var(--corner)); } .page-seo .hero { padding-bottom: calc(var(--section-pad) * 0.75 + 53px + var(--corner)); } .page-seo .aspects, .page-seo .services, .page-seo .costs, .page-seo .faq { padding-bottom: calc(var(--section-pad) + var(--corner)); } /* 🔴 .proofcase KEEPS ITS ZERO AND ITS COLUMNS PAY. seo-content.css zeroes the section's block padding and puts --section-pad on .proofcase__rail and .proofcase__panel so the full-bleed panel runs the whole height. Padding the section instead puts indigo above the panel — the band Brees circled. */ .page-seo .proofcase__rail, .page-seo .proofcase__panel { padding-top: var(--section-pad); padding-bottom: calc(var(--section-pad) + var(--corner)); } .page-seo .aspects { border-top-right-radius: var(--corner); } .page-seo .services { border-top-left-radius: var(--corner); } .page-seo .costs { border-top-right-radius: var(--corner); } .page-seo .proofcase { border-top-left-radius: var(--corner); } .page-seo .faq { border-top-right-radius: var(--corner); } .page-seo .final-cta { border-top-left-radius: var(--corner); } /* =========================================================================== 3. WEBSITES — /products/websites/ Grounds in order: hero white / problem sky-soft / approach indigo / steps cream / costs white / proof indigo / faq white / cta sky. ⚠️ .wsite-hero IS A 190vh SCROLL TRACK AND GETS NO PAD-OUT. Its painted slack measures 1171px at 1600 — the empty run the gallery unfurls through — so an 80px pull-up over it costs nothing a reader can see. It is also the one section on the site where height is a tuned animation setting: the session notes record that the track height and the phase splits in hero-gallery.js are ONE setting, and that changing the height alone speeds the unfurl by the same ratio. Adding padding to it would do exactly that. 🔴 Do not "fix" the missing pad-out here. 📌 The pull-up itself sits on the FOLLOWING section and does not touch the hero's own height; corner-check.js measures the unfurl rate to prove it. ⚠️ .wsite-approach declares a zero bottom padding for the same reason .proofcase does — see the SEO block above. */ .page-wsite .wsite-problem, .page-wsite .wsite-approach, .page-wsite .wsite-steps, .page-wsite .wsite-costs, .page-wsite .wproof, .page-wsite .faq, .page-wsite .final-cta { margin-top: calc(-1 * var(--corner)); } .page-wsite .wsite-problem, .page-wsite .wsite-approach, .page-wsite .wsite-steps, .page-wsite .wsite-costs, .page-wsite .wproof, .page-wsite .faq { padding-bottom: calc(var(--section-pad) + var(--corner)); } /* 🔴 FROM 900px UP, .wsite-approach KEEPS ITS ZERO AND ITS COLUMNS PAY. websites.css: "THE SECTION'S BLOCK PADDING MOVES TO THE COLUMNS ... with the panel full-bleed, that padding would sit OUTSIDE the dark fill and the two-tone band would float as a stripe." Padding the section is precisely that failure, and it is the band Brees circled. ⚠️ The breakpoint MIRRORS websites.css. Move one and move both. */ @media (min-width: 900px) { .page-wsite .wsite-approach { padding-top: 0; padding-bottom: 0; } /* 🔴 THE TOP PAYBACK IS DROPPED HERE, AND ONLY HERE — Brees, 9/2: "lots of top space." The pull-up's top payback exists so content does not MOVE when a section is pulled up; it is a continuity choice, not something the corner needs. The corner is a property of the section's box. Its cost is that the visible gap between a section's top edge and its first content grows by one corner on every rounded section — 158px here against the page's 86px baseline. On sections with a heading at the top that reads as air; on this one, with a tall dark panel already carrying dead space, it read as unfinished. ⚠️ THE BOTTOM PAYBACK STAYS AND IS NOT OPTIONAL. It pays for the corner .wsite-steps pulls up over this section — drop it and the indigo band under the last row collapses to 14px. That is the "too much white and not enough blue" failure, and corner-check.js asserts it. Top and bottom are different obligations; only one of them is load-bearing. */ /* 🔴 AND THE ASIDE'S BOTTOM COMES OFF TOO, SO THE TITLE CENTRES TRUE. With 88 top against 168 bottom, `align-content: center` centred the title in the CONTENT box and left 240px above it against 280px below — 40px out, which is exactly the padding difference and exactly the kind of near-miss Brees spots. Symmetric padding makes centred mean centred. ⚠️ SAFE ONLY BECAUSE THIS CELL IS STRETCHED, NOT SIZED BY ITS CONTENT. The grid row is as tall as the LIST column, so the aside's own padding moves its title and nothing else — the section's height, and therefore the pad-out that .wsite-steps needs, comes from the list. If the aside ever becomes the taller column this silently stops paying, which is why corner-check.js also measures the section's PAINTED bottom gap rather than trusting these declarations. */ .page-wsite .wapp__aside { padding-top: var(--section-pad); padding-bottom: var(--section-pad); } .page-wsite .wapp__list { padding-top: var(--section-pad); padding-bottom: calc(var(--section-pad) + var(--corner)); } } .page-wsite .wsite-problem { border-top-left-radius: var(--corner); } .page-wsite .wsite-approach { border-top-right-radius: var(--corner); } .page-wsite .wsite-steps { border-top-left-radius: var(--corner); } .page-wsite .wsite-costs { border-top-right-radius: var(--corner); } .page-wsite .wproof { border-top-left-radius: var(--corner); } .page-wsite .faq { border-top-right-radius: var(--corner); } .page-wsite .final-cta { border-top-left-radius: var(--corner); } /* =========================================================================== 4. SMART INTAKE — /products/smart-intake/ Grounds in order: hero charcoal / setup white / how cream / comparison off-white / shines blue / integrations charcoal / effect cream / faq white / cta gold. 🟢 NO LONGER PROVISIONAL — 9/9. The note that used to sit here said the sides could not be derived until the closing CTA existed, because the alternation on every other page is counted BACKWARDS from that section. The CTA is now built, so the count is real: cta LEFT · faq right · effect left · int right · shines left · compare right · how left · setup right ⚠️ AND IT LANDED ON THE SIDES THE PROVISIONAL VERSION ALREADY HAD. That is luck, not confirmation of the old reasoning — the page happens to carry an even number of corners, so counting forwards from .si-setup and backwards from .si-cta agree. Do not read it as evidence that the anchor does not matter; insert or drop a section and the whole run flips. ⏹ THE ARTBOARD DRAWS THIS DIFFERENTLY AND THE SYSTEM WINS — BREES, 9/9. His Spotlight artboard rounds BOTH top corners on the gold CTA and puts the FAQ's corner on the left. Asked directly, he chose to keep the system: one corner per section, alternating, so the weave holds across all five pages and corner-check keeps asserting one rule rather than a page exception. =========================================================================== */ .page-si .si-setup, .page-si .si-how, .page-si .si-compare, .page-si .si-shines, .page-si .si-effect, .page-si .si-int, .page-si .si-faq, .page-si .si-cta { margin-top: calc(-1 * var(--corner)); } /* The hero pays for .si-setup's corner. Its bottom padding is the shared .hero expression, not --section-pad, so the corner is added to THAT — the same shape as .page-vci .hero and .page-seo .hero. corner-check caught this missing: nine failures, one per width. */ .page-si .si-hero { padding-bottom: calc(var(--section-pad) * 0.75 + 53px + var(--corner)); } /* [x] .si-compare IS BACK IN THIS GROUP, 9/14. It sat out while its closing sentence lived in a full-bleed coda band that paid the corner instead. The band is gone (the sentence is now the table's seventh row, see smart-intake-flow.css), so the section pays for .si-shines' corner the same way every other section does. corner-check asserts the delta is exactly one corner: 168px measured when the payment sat in smart-intake-flow.css, because that sheet also carried the section's own padding. */ /* [i] .si-cta IS ABSENT ON PURPOSE, AS .final-cta IS ON ALL FOUR SIBLINGS. The pad-out pays for the corner of the section that pulls up OVER this one, and nothing does — the footer follows, square and flush. Giving it one would add a band of gold under the last line that nothing covers. */ .page-si .si-setup, .page-si .si-how, .page-si .si-compare, .page-si .si-shines, .page-si .si-effect, .page-si .si-int, .page-si .si-faq { padding-bottom: calc(var(--section-pad) + var(--corner)); } .page-si .si-setup { border-top-right-radius: var(--corner); } .page-si .si-how { border-top-left-radius: var(--corner); } .page-si .si-compare { border-top-right-radius: var(--corner); } .page-si .si-shines { border-top-left-radius: var(--corner); } /* Order changed 9/9: Integrations now precedes The Spotlight Effect, so the alternation follows it - shines left, int right, effect left. */ .page-si .si-int { border-top-right-radius: var(--corner); } .page-si .si-effect { border-top-left-radius: var(--corner); } /* 9/9: the last two. .si-cta is the anchor the whole run is counted back from, top-left like .final-cta on all four siblings, and .si-faq falls out of that as the right. */ .page-si .si-faq { border-top-right-radius: var(--corner); } .page-si .si-cta { border-top-left-radius: var(--corner); } /* 🔁 SMART INTAKE CORNERS AT 3x — BREES, 9/14, THE TRIAL PAGE. "I think we need to make it bigger ... increased by about 3 times. I don't want to see it bigger than the curve on the Google Ads page. Let's just start with one page." site --corner clamp(32px, 5vw, 80px) 72px at 1440 · 32px at 390 this page clamp(96px, 15vw, 240px) 216px at 1440 · 96px at 390 CAP: the Google Ads manifesto curve is 500px across and paints ~454px tall at 1440 (clamped by its section height). 240px stays under both at every width. 📌 Declared on , so every var(--corner) on this page follows it — pull-up, pad-out, radius and .si-setup::before's notch stay ONE setting. The old cap ("the radius is capped by the previous section's bottom padding") does not bind, because the pad-out grows by the same amount. ⚠️ The other four pages keep :root's value until Brees approves this one. */ body.page-si { --si-corner-3x: clamp(96px, 15vw, 240px); --corner: var(--si-corner-3x); } /* 🔁 EXCEPT SECTION 1 -> 2 (hero -> setup, top-RIGHT): SINGLE, the site value. Brees, 9/14: first "doubled, not triple. That's the only part that should be", then "actually let's do single on that corner only". 🔴 PULL-UP AND PAD-OUT ARE ONE SETTING, SO BOTH ELEMENTS TAKE IT: .si-setup owns the radius, the pull-up and (via inheritance) its ::before notch in spotlight.css; .si-hero owns the pad-out that pays for it. 🔴 BUT .si-setup'S OWN PAD-OUT STAYS 3x. It pays for .si-compare's corner, not its own. The 2x version set --corner on setup and shrank that too — .si-compare then pulled up 72px deeper than setup paid for. corner-check caught it (9/9 widths: "bottom padding changed by 144px, expected 216px"). Hence the explicit padding below, off --si-corner-3x, which inherits from untouched. Safe on both: nothing inside either section reads var(--corner). */ .page-si .si-hero, .page-si .si-setup { --corner: clamp(32px, 5vw, 80px); } .page-si .si-setup { padding-bottom: calc(var(--section-pad) + var(--si-corner-3x)); } /* =========================================================================== 🔁 CALL INSIGHTS, SEO & CONTENT AND WEBSITES AT THE SMART INTAKE SCALE — 9/15 --------------------------------------------------------------------------- Brees, 9/15: "all pages should have the same border radius" — the standing rule "unless I ask for a specific corner to be measured differently, all of the pages should have the same section size and border radius as the smart intake page." So the three pages take .page-si's exact mechanics: - --corner is the 3x value on , so pull-up, radius and pad-out stay ONE setting on every section below; - the section 1 -> 2 join (hero -> section 2) is the single corner, set on BOTH elements (the hero pays the pad-out, section 2 owns the pull-up); - section 2's own pad-out stays 3x, because it pays for section 3's corner, not its own (the exact trap corner-check caught on Smart Intake, 9/9). The old "radius is capped by the previous section's bottom padding" note at the top of this sheet no longer binds, for the reason Smart Intake recorded: the pad-out grows by the same amount. ⚠️ .wsite-hero keeps NO pad-out (its 190vh track is an animation setting) and .wsite-problem's pull-up over it stays single — unchanged from before. =========================================================================== */ body.page-vci, body.page-seo, body.page-wsite { --corner-3x: clamp(96px, 15vw, 240px); --corner: var(--corner-3x); } /* 🔁 9/16, Brees: SEO & Content section 2 "should be 3x or whatever we did on the google ads page" - .page-seo .hero and .page-seo .aspects come OFF the single list, so the hero -> aspects join takes --corner-3x (the hero's pad-out rule already reads var(--corner), so it grows with it). */ .page-vci .hero, .page-vci .problem, .page-wsite .wsite-problem { --corner: clamp(32px, 5vw, 80px); } .page-vci .problem, .page-seo .aspects, .page-wsite .wsite-problem { padding-bottom: calc(var(--section-pad) + var(--corner-3x)); } /* 🔴 ONE CORNER STAYS SINGLE, AND IT IS A MEASURED CONSTRAINT, NOT A STYLE CALL — ✅ APPROVED BY BREES 9/15: "keep pricing corner single". .pricing on Call Insights is pulled up over .proof.recovered, which carries NO pad-out because its height drives initProofPin() (see the Call Insights block above). At 80px the pull-up already leaves only 48px of sky-soft under the proof at 1600; at 240px it would cover ~190px of the proof's real content. So its radius and pull-up stay single, while its OWN pad-out is 3x because it pays for the FAQ's corner. */ .page-vci .pricing { --corner: clamp(32px, 5vw, 80px); padding-bottom: calc(var(--section-pad) + var(--corner-3x)); } /* [x] THE CODA-BAND CORNER PAYMENT IS RETIRED, 9/14. .si-compare no longer ends in a band: Alie's closing sentence is the table's seventh row, and the section pays its own corner in the group above. */ /* 🔁 9/16 (later), Brees: "The 'Your phone is leaking new clients..' section should have the same size text as the 'How it works' on the google ads page." Measured at 1536: labels were 32px/36.8 against Google Ads' .gstep__label 24px/30 (var(--fs-h3), 1.25), and the reasons 21px/34.65 against .gstep__text 17px/28 (body). Both now take the Google Ads tokens. Headlines already matched (48px). Scoped to Call Insights; nothing else uses .problem__*. */ .page-vci .problem .problem__label { font-size: var(--fs-h3); line-height: 1.25; } .page-vci .problem .problem__text { font-size: var(--fs-body); line-height: 1.65; } /* =========================================================================== 🔁 9/17 — SECTION 2 TAKES THE GOOGLE ADS / SMART INTAKE SWEEP (SEO & Content, Call Insights) --------------------------------------------------------------------------- Brees: "in section 2 ... the curve looks like it's single and it really should be triple." Google Ads (.gads-manifesto) and Smart Intake (.si-setup) are "perfect": the section itself is WHITE, and a ::before paints the section's ground with a deep top-LEFT sweep on the 40/160/240/380/500 ladder (google-ads.css records why it steps down: the curve may only use the gutter beside the copy). Same construction here. 🔴 The ::before repeats the section's own top-right notch (border-top-right-radius: var(--corner)) — the gate caught a full-bleed overlay painting over its section's notch on Smart Intake (spotlight.css). The hero above both sections is white, so the white section ground reads as the hero continuing into the sweep, exactly as on Google Ads. Content rides above the band. */ .page-seo .aspects, .page-vci .problem { position: relative; background-color: var(--white); } .page-seo .aspects { --s2-ground: var(--oat); } .page-vci .problem { --s2-ground: var(--indigo); } .page-seo .aspects::before, .page-vci .problem::before { content: ""; position: absolute; inset: 0; z-index: 0; background-color: var(--s2-ground); /* 🔁 9/17 (later), Brees: "the left side should be straight not curved. The right side is already curved so let's increase that curve." The sweep moved to the TOP-RIGHT (the side that already had the corner), same ladder; the top-left is square. */ border-top-left-radius: 0; border-top-right-radius: 40px; pointer-events: none; } @media (min-width: 700px) { .page-seo .aspects::before, .page-vci .problem::before { border-top-right-radius: 160px; } } @media (min-width: 900px) { .page-seo .aspects::before, .page-vci .problem::before { border-top-right-radius: 240px; } } @media (min-width: 1024px) { .page-seo .aspects::before, .page-vci .problem::before { border-top-right-radius: 380px; } } @media (min-width: 1280px) { .page-seo .aspects::before, .page-vci .problem::before { border-top-right-radius: 500px; } } .page-vci .problem > .container { position: relative; z-index: 1; } /* 🔴 THE COPY MUST CLEAR THE SWEEP. Unlike Google Ads' centred statement, these sections start with a LEFT-set (Call Insights) or wide (SEO) heading, and the deep curve cut through it — measured, the "Y" of "Your phone is leaking" sat on white. Required drop (curve maths per heading box, +12px air), worst of both pages: 700-899 R160: 5 · 900-1023 R240: 37 -> 23 · 1024-1279 R380: 107 -> 54 · >=1280 R500: 133 at 1280, 42 at 1440, 0 by ~1520. Each range is a line in vw from those two measurements, floored at 0, so wide screens get no extra air. */ @media (min-width: 700px) and (max-width: 899px) { .page-seo .aspects > .container, .page-vci .problem > .container { padding-top: 8px; } } @media (min-width: 900px) and (max-width: 1023px) { .page-seo .aspects > .container, .page-vci .problem > .container { padding-top: max(0px, calc(40px - (100vw - 900px) * 0.12)); } } @media (min-width: 1024px) and (max-width: 1279px) { .page-seo .aspects > .container, .page-vci .problem > .container { padding-top: max(0px, calc(110px - (100vw - 1024px) * 0.21)); } } @media (min-width: 1280px) { .page-seo .aspects > .container, .page-vci .problem > .container { padding-top: max(0px, calc(136px - (100vw - 1280px) * 0.57)); } } /* 🔁 9/17 (later) — WEBSITES SECTION 2 GETS THE SAME TREATMENT. Brees: "do th website page curve", after SEO + Call Insights went left-square / deep top-right. .wsite-problem's own corner was TOP-LEFT (single); it is now square (the section clip too, or an 80px curve would survive on the left), and the sky-soft ground is painted by a ::before with the 40..500 TOP-RIGHT ladder over a white section — the hero above is white, so the sweep reads as the hero continuing. The pull-up and pad-out are untouched. Children (.shape, .container) ride above. */ .page-wsite .wsite-problem { position: relative; background-color: var(--white); border-top-left-radius: 0; } .page-wsite .wsite-problem::before { content: ""; position: absolute; inset: 0; z-index: 0; background-color: var(--sky-soft); /* 🔁 9/17 (later still), Brees on Websites: "that's the right curve but I want the curve to be on the left side". The sweep sits TOP-LEFT on this page (SEO + Call Insights keep theirs top-right). */ border-top-left-radius: 40px; pointer-events: none; } @media (min-width: 700px) { .page-wsite .wsite-problem::before { border-top-left-radius: 160px; } } @media (min-width: 900px) { .page-wsite .wsite-problem::before { border-top-left-radius: 240px; } } @media (min-width: 1024px) { .page-wsite .wsite-problem::before { border-top-left-radius: 380px; } } @media (min-width: 1280px) { .page-wsite .wsite-problem::before { border-top-left-radius: 500px; } } .page-wsite .wsite-problem > .container { position: relative; z-index: 2; } .page-wsite .wsite-problem > .shape { z-index: 1; } /* Websites section 2 with the sweep on the LEFT: heading clearance (probe 17@900, 101@1024, 129@1280, 34@1440, 0@1920). */ @media (min-width: 900px) and (max-width: 1023px) { .page-wsite .wsite-problem > .container { padding-top: max(0px, calc(40px - (100vw - 900px) * 0.12)); } } @media (min-width: 1024px) and (max-width: 1279px) { .page-wsite .wsite-problem > .container { padding-top: max(0px, calc(110px - (100vw - 1024px) * 0.21)); } } @media (min-width: 1280px) { .page-wsite .wsite-problem > .container { padding-top: max(0px, calc(136px - (100vw - 1280px) * 0.57)); } }