/* ========================================================================== Front page rhythm — one boundary, correctly sized. ========================================================================== THIS WHOLE FILE IS THE CHANGE, AND DELETING IT IS THE REVERT. It loads on the front page only (functions.php, guarded by the same is_front_page() that adds the .kt-front body class) and every rule below is fenced behind that class. To undo the spacious pass completely, remove the `kty-front-rhythm` wp_enqueue_style call in functions.php and redeploy. The page returns to the site token exactly, with nothing to unpick. -------------------------------------------------------------------------- THE DIAGNOSIS (measured at 1280px on the live page, not estimated) The page is not short of air. Its air is in the wrong order. `.kt-panel` — the frame around the stats block and the FAQ block — carries `padding: clamp(30px, 4vw, 44px) …` (theme.css:478). So at 1280 a panel's own content sits 44px from its own border, while two whole panels sit 34px apart. The inside of the frame is more generous than the outside of it. That is a grouping inversion, and it is why seven sections read as one long undifferentiated column: nothing tells the eye where an idea ends. The inversion runs at every width and is total on a phone, where the boundary floors at 24px against the same panel's 30px padding and against the 34px `padding-top` separating two specialty marks (theme.css:2679). On the device that is the majority of this restaurant's traffic there is currently no hierarchy in the vertical rhythm at all. THE MEASURED BOUNDARY AUDIT — what each seam actually delivers today: B1 specialties -> #menu 66 (wrap pad) + 34 + 18 (frameless pad) = 118px B2 #menu -> promo 18 + 34 = 52px B3 promo -> stats 34px, between two drawn borders B4 stats -> #reserve 34px, between two drawn borders B5 #reserve -> FAQ 34px, between two drawn borders B6 FAQ -> footer 70px + a 1px rule + 56px (theme.css:1930/1936) COST, measured by injecting these rules into the live page and snapshotting before/after in a single reflow: 1280 en 3281 -> 3343 (+62px, +1.9%) 375 en 5656 -> 5716 (+60px, +1.06%) 1280 zh-hant 3197 -> 3259 (+62px) 375 zh-hant 5265 -> 5325 (+60px) Every seam grows 59%, and most of the increase is paid out of space that was already being wasted — see blocks 2 and 3. THE FOLD CANNOT MOVE. `--kt-stack` has exactly one consumer in the theme (`.kt-section`, theme.css:465), and no section above the third reads it: the hero has no top margin and specialties is `--flush`. Verified live rather than trusted — the hero's "Order now" measures 349-393 and "Book a table" 407-452 both before and after, at 375 and at 1280, in English and Chinese. Scoped to `.kt-front`, so the menu archive, product, cart, checkout, account and book-a-table pages do not move. Audited: 11 `.kt-section` call sites exist outside the front page and none of them can match these rules. ========================================================================== */ /* -------------------------------------------------------------------------- 1. The section boundary — the only token this file redefines. -------------------------------------------------------------------------- Site token is clamp(24px, 3.4vw, 34px). Both ends are measured against `.kt-panel`'s own block padding clamp(30px, 4vw, 44px) — the thing the boundary must beat for two frames to read as separate objects: 375px -> 40px floor; 1.33x the panel's 30px padding floor 768px -> 46px 1024px -> 50px 1275px -> 54px cap engages; 1.23x the panel's 44px padding cap 54 is pinned from both sides and is not a taste number: - it must exceed 44px, `.kt-panel`'s inner block padding at 1280; - it must clear 38.4px, `.kt-faq`'s internal gap at 1280 (3vw, theme.css:1901), and 28px, the `.kt-dishes` card gap — 1.41x and 1.93x; - it must stay clearly under 70px, the break this page already gives its own ending (block 4), so the FAQ seam still reads as the larger one. `rem` in the preferred value so the boundary tracks the reader's root font-size: someone browsing at 20px root gets a proportionally larger boundary rather than a fixed one. That is an accessibility nicety and nothing more — it is NOT a language matter, and an earlier draft of this comment wrongly claimed it mattered especially for Chinese readers. The pixel-identical alternative, if the rem ever causes confusion, is clamp(40px, 33.6px + 1.6vw, 54px). ACCEPTED, NOT FIXED: between ~601 and ~1022px the specialties grid is 2-up or 3-up with a flat 44px row-gap, so the boundary leads it by only 1.04x at 768. That band is the narrowest slice of traffic and the marks are visibly framed into a grid by `border-left` there, which contains its own gaps. Do NOT fix that by adding `.kt-front .kt-specialties__grid { row-gap: … }`. That selector is 0,2,0 and out-specifies the `@media (max-width: 600px)` rule at theme.css:2686 which zeroes the row-gap for the phone's border-separated layout — media queries add no specificity — and it would inflate the phone block by ~108px. If the band ever matters, put the override inside `@media (min-width: 601px)`. -------------------------------------------------------------------------- */ .kt-front { --kt-stack: clamp(40px, 2.1rem + 1.6vw, 54px); } /* -------------------------------------------------------------------------- 2. Claw-back — the one seam that would otherwise double-count. -------------------------------------------------------------------------- `.kt-specialties__grid-wrap` is the only section on this page that pays for its own bottom margin: clamp(48px, 6vw, 66px) (theme.css:1368). Measured, B1 is already 118px at 1280 — the widest break in the body, at the page's closest relationship. Under the new boundary it would reach 138px. Trimmed to clamp(36px, 4vw, 48px), B1 delivers 48 + 54 = 102px at 1280 and 36 + 40 = 76px at 375 (against 118 / 80 today). The seam holds roughly where it is instead of growing, and 18px / 12px comes back. 36px is measured against the 34px `padding-top` separating two stacked specialty marks below 600px — the block's foot must not close tighter than its own internal rhythm. The TOP padding is deliberately untouched: it sits under `.kt-specialties__tag`, inside the composition, competing with nothing. Longhand at 0,2,0 overrides only the third value of the shorthand, so the 38-54px top and the 0 inline padding survive, as does the wrap's `overflow: hidden` that clips the grid's -1px column-separator overhang. -------------------------------------------------------------------------- */ .kt-front .kt-specialties__grid-wrap { padding-bottom: clamp(36px, 4vw, 48px); } /* -------------------------------------------------------------------------- 3. The refund — space that was never doing any work. -------------------------------------------------------------------------- The menu-highlights section wraps its content in `.kt-panel .kt-panel--fill .kt-panel--frameless`, and `--frameless` (theme.css:2773) strips the border, the radius and the background but keeps `padding-block: clamp(8px, 1.5vw, 18px)`. With nothing drawn, that padding is indistinguishable from margin: it silently leaks 18px at 1280 / 8px at 375 into BOTH of that section's seams, which is why B1 measured 118 and not 100. Zeroing it returns 36px of scroll at 1280 (18 top + 18 bottom) and makes `--kt-stack` the whole gap, so the audit above stays true as the page changes. Net effect on B2 is nil: 18 + 34 = 52px today, 0 + 54 = 54px after. This is also why the menu heading arrives EARLIER on a phone after the change — 1513 -> 1509 — since the refund plus the claw-back together exceed the boundary growth at that seam. `.kt-panel--frameless` has exactly one consumer inside `.kt-front` (highlights.php:149). The product loop and archive keep their padding, since this rule cannot reach them. -------------------------------------------------------------------------- */ .kt-front .kt-panel--frameless { padding-block: 0; } /* -------------------------------------------------------------------------- 4. The one larger break, placed where extra air is free. -------------------------------------------------------------------------- A uniform page reads as a template; one deliberate larger break reads as art direction. The only question is where to spend it, and on a page that must not bury its actions the answer is positional: air below the last conversion point costs zero CTA depth. THE CONVERSION POINTS ON THIS PAGE, in order: the hero's "Order now" and "Book a table"; `.kt-promo__cta` in the promo band (section 4) — a second ORDER CTA, recorded here so a future change does not spend air above it by mistake; and the reservation card at `#reserve`. B5 sits after all of them, so widening it pushes nothing but the FAQ, and it isolates the reservation card from below — which makes it read as a destination rather than as more page. Measured: `.kt-promo__cta` actually moves UP 14px at 1280, because blocks 2 and 3 refund more than the boundary costs at that depth. The value is `.kt-footer`'s own margin (theme.css:1930), copied verbatim rather than invented: it is the theme's existing statement of a major boundary, so this introduces no new number and no second token. 70 against 54 is a 1.30 step — a decision, not drift — and the page end still wins outright, because the footer follows its 70px with a 1px rule and 56px of padding (theme.css:1936). Sibling selector, not `:has()`: `#reserve` is emitted unconditionally (social-proof.php:21), while the FAQ section carries no class of its own and early-returns when no FAQ pairs exist. If the FAQ ever disappears this rule simply lands on whatever follows, or matches nothing. Cost of this block, measured: `#reserve` 2077 -> 2103 at 1280, and the booking button itself 2303 -> 2329. On a phone the card moves 3742 -> 3778, which is 4.61 -> 4.65 screens: nobody who has scrolled 4.6 screens is stopped by 36 more pixels. -------------------------------------------------------------------------- */ .kt-front #reserve + .kt-section { margin-top: clamp(48px, 6vw, 70px); } /* -------------------------------------------------------------------------- 5. Under the hero. -------------------------------------------------------------------------- The hero and the specialties row measured 0px apart, because the section that follows the hero carries `.kt-section--flush`, whose entire job is to set margin-top: 0 (theme.css:469). That was deliberate — the hero's vertical veil ends fully opaque, so the picture dissolves into the page ground and a gap would have shown as a band of nothing between two things that were meant to touch. The dissolve is still right. What was missing is the same thing that was missing on the book-a-table page: some ground to dissolve INTO before the first line of content. A full-bleed band handing over to the body of the page is a major boundary, so it takes the major-boundary value — the same clamp(48px, 6vw, 70px) as block 4 above, as the footer's own margin, and as the hero/body break on book-a-table. Hero-to-body now reads identically on both pages. Adjacent-sibling rather than `.kt-section--flush`, because the intent is "the section directly under the hero", not "anything flush". At 0,2,1 it also comfortably out-specifies the 0,1,0 modifier it has to beat. -------------------------------------------------------------------------- */ .kt-front .kt-hero + .kt-section { margin-top: clamp(48px, 6vw, 70px); }