/* ========================================================================== site/rhythm-09.css · SOLUTION 09 "CLOSE RHYTHM", APPLIED SITE-WIDE Written 2026-09-21. Linked LAST in the of all six live pages. UNDO: delete the one line that loads this file from each page. --------------------------------------------------------------------------- WHERE IT CAME FROM --------------------------------------------------------------------------- Picked from /doctor/home-seam-x4p/ (option 09) as the answer to the empty first scroll after the homepage All Work band, then asked for on every section of every live page. 09 is proportion only — no colour, no component, no markup. Its thesis: a section boundary should not be the largest gap on the page. Measured on its render at 1440, the boundary reads last ink → edge ~50 edge → first ink 58 head → selector 26 head/selector → goods 38 so the gaps ACCELERATE into the content instead of stalling before it, and the edge sits nearer the block above it than the block below — which is what tells the eye the line belongs to what just ended and the heading belongs to what is starting. --------------------------------------------------------------------------- WHAT THE SITE HAD, measured at 1440 before this file --------------------------------------------------------------------------- homepage every section 100 / 100 (home.css:2486, !important) → ~205px of white between one section's goods and the next section's heading inner pages 52 open / 56 close through --sh-pt / --sh-pb (heads.css:96) → already near 09, but with the close larger than the open exceptions #gads-packages 78 / 78 (gads-packages/pkg.css:19) #reg 42 + a 46px panel margin = 88 open (heads.css:286, legal/_hero.css:58) --------------------------------------------------------------------------- WHAT THIS FILE DOES --------------------------------------------------------------------------- 1 the four 09 numbers become tokens, and the inner pages' own three tokens are pointed at them — which reaches every inner section at once through site/shelf.css and site/heads.css, their only two consumers 2 the homepage's !important-locked sections take the same numbers 3 the three sections that set their own padding are brought in line 4 the homepage first screen gets the rest of 09: the All Work plate is closed, the band gets its base, and the screen ends on the band edge NOT TOUCHED: any hero's own composition, the footer, colour, type, component, card, width, order or markup. The shelf aisle between inner blocks stays — it is the site's block system, not its rhythm. ========================================================================== */ /* ========================================================================== 1 · THE NUMBERS 1440 → 58 / 50 / 38 / 26 390 → 34 / 34 / 26 / 18 (09's own phone values were 34 open, ~35 close, 26 goods, 18 selector) ========================================================================== */ :root{ --r9-open: clamp(34px, 4.1vw, 58px); /* edge → first ink */ --r9-close: clamp(34px, 3.5vw, 50px); /* last ink → edge */ --r9-lede: clamp(26px, 2.8vw, 38px); /* head (or selector) → goods */ --r9-ctrl: clamp(18px, 1.9vw, 26px); /* head → its selector row */ --r9-base: clamp(22px, 2.6vw, 36px); /* the first-screen band's base */ /* the inner pages' own tokens (site/heads.css:96, :335) — later origin, same specificity, so these win on source order at every width */ --sh-pt: var(--r9-open); --sh-pb: var(--r9-close); --hd-lede: var(--r9-lede); } /* ========================================================================== 2 · THE HOMEPAGE SECTIONS home.css:2486 sets all seven with html body :is(#svc3 > section, #ss1, …){ padding: … !important } which scores (1,0,3) — two ids beat it. #wcu8 carries its padding on the inner .k5v instead (home.css:3904), so that is where it is changed. ========================================================================== */ html body #svc3#svc3 > section#services, html body #ss1#ss1, html body #hp1#hp1, html body #indwork#indwork, html body #about5#about5, html body #faq10#faq10{ padding-top: var(--r9-open) !important; padding-bottom: var(--r9-close) !important; } html body #wcu8#wcu8#wcu8.k5-sec .k5v{ padding-top: var(--r9-open) !important; padding-bottom: var(--r9-close) !important; } /* Our Services is the one homepage section with a selector between its head and its goods — 09 was drawn on it, so it keeps 09's inner cadence exactly */ html body #svc3#svc3#svc3#svc3#svc3 .s3-head{ margin-bottom: var(--r9-ctrl) !important; } html body #svc3#svc3#svc3#svc3#svc3 .s3-catwrap{ margin-top: var(--r9-ctrl) !important; } html body #svc3#svc3#svc3#svc3#svc3 #s3rows{ margin-top: var(--r9-lede) !important; } /* ========================================================================== 3 · THE SECTIONS THAT SET THEIR OWN PADDING ========================================================================== */ /* Google Ads Packages — gads-packages/pkg.css:19, 78px each way at 1440. Only the block axis changes; the inline gutter stays var(--pad). */ html body #gads-packages#gads-packages{ padding-top: var(--r9-open) !important; padding-bottom: var(--r9-close) !important; } /* Legal Documents' registration record — heads.css:286 kept it on the old hero values because it WAS the page's hero. The inner hero now sits above it (the section carries .ih-after), so it is an ordinary section, and its first object is the record panel, which added its own 46px on top. */ html body #reg#reg.s1{ padding-top: var(--r9-open) !important; padding-bottom: var(--r9-close) !important; } html body #reg#reg.s1 .hrec-panel{ margin-top: 0 !important; } /* Google Ads FAQ — gads-faq-head-r6q/faqhead.css:118 gave the last block before the footer "a little more floor than a mid-page block" (58 against 56). The homepage's last block, #faq10, never had that exception, so under one rhythm neither does this one. */ html body #gfaq#gfaq{ padding-bottom: var(--r9-close) !important; } /* ========================================================================== 4 · THE HOMEPAGE FIRST SCREEN — the rest of 09 ========================================================================== */ /* the white All Work plate is .stage::before, drawn bottom:-60px with a top-only radius and then guillotined by .tail{overflow:clip}. Closed. */ html body .tail.show .stage::before{ bottom: 0 !important; border-radius: 18px !important; } /* the band ends on a base of its own ground rather than on a cut */ html body .screen .tail.show{ padding-bottom: var(--r9-base) !important; box-shadow: inset 0 1px 0 #D6E0F0 !important; } /* and the first frame ends ON the band's edge, not on 37px of white under it (home.css:4498 subtracts a --hws-p peek) */ html:root body .screen{ min-height: calc(100dvh - var(--barh)) !important; }