/* ----------------------------------------------------------------------------- * P4 · Footer measure parity with the reference plane. * * WHAT WAS ACTUALLY WRONG, and it was not the content. * ---------------------------------------------------- * The footer is the one piece of chrome on every route, so any error in it is * an error seven times over. Measured on 2026-08-11 at 1440, `.pix-footer` is * 405.6 px tall on ALL seven reference routes and `.vnm-footer` is 317 px tall * on all seven here — a constant 88.6 px, the single most-repeated structural * delta in this effort. * * The first thing to check was whether something was MISSING, because a short * box usually means absent content. It is not: both planes render 6 links to * the same 6 destinations (GitHub, LinkedIn, X, Bluesky, mailto, the lambo * product), 2 images and the same three lines of copy. A2 built the footer * correctly and A6's lambo button measures 630 x 122.5 with its 300 px car on * both. The whole 88.6 px is spacing. That is worth stating plainly because * "the footer is 88 px short" reads like a missing row, and chasing a missing * row here would have found nothing. * * THE REFERENCE DECOMPOSES EXACTLY, so this file targets the parts, not the sum: * * .pix-footer 405.6 * .container padding-top 80.0 * row 1 (card) 219.4 * row 2 (copyright) 66.2 = 1 border + 40 pad + 25.2 text * .container padding-bottom 40.0 * ---------------------- * 405.6 (80 + 219.4 + 66.2 + 40) * * Matching only the total would have been easy and wrong: candidate `E` * (padding 80/40, all the slack dumped on the copyright line) also measures * 405.6 but distributes it as 158.2 / 84.2, putting the copyright line ~18 px * from where the reference puts it. Both candidates were rendered and measured * in the browser before this file was written; `F`, below, is the one that * reproduces 219.4 and 66.2 as well as 405.6. * * The 43.2 px gap between the card and the copyright is a margin in A2's * markup. It is zeroed rather than left in place and worked around, because * leaving it would mean this file's numbers only add up while that margin * happens to be 43.2. * * NO `!important` ANYWHERE. A4, A5 and A6 each measured it to be unnecessary on * this estate — in A5's case the rule measured byte-identical with and without * it — and this sheet is enqueued at priority 120, after A2's chrome sheet at * 100. Ordering, not specificity. If a rule here ever stops applying, the * enqueue order changed and THAT is the bug; reaching for !important would * hide it. * * The background image is NOT set here — it is injected by * inc/block-patterns.php from wp_get_upload_dir(), because a hard-coded host * would make dev hot-link prod. * -------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SCOPED TO >= 992 ON PURPOSE, AND THIS IS A CORRECTION TO MY OWN FIRST DRAFT. * * The first version of this file applied the padding unscoped and added a * `max-width: 991px` block that ADDED more vertical padding for small screens. * Measured at 414 it made things worse, not better: * * 414 reference here (before) after that draft * .footer 552.4 638.2 719.4 * * Two things were wrong with that. First, the footer here was ALREADY 85.8 px * taller than the reference at 414 before this lane touched anything — so a * mobile rule written to "add the missing height" was solving a problem that * ran the other way. Second, the remaining difference is not padding at all: * `.vnm-footer__inner` alone measures 541.2 at 414, which is essentially the * reference's ENTIRE 552.4 footer. Closing it means changing how the identity * card and the lambo CTA stack, which is A2's markup and A6's fenced button — * not this lane's files, and not something to do blind. * * Three mobile candidates were rendered and measured (664.2 / 642.2 / 628.2); * the best still overshot by 75.8, which is what confirmed the cause is * structural rather than spacing. So the rules below are confined to the * desktop range where they are demonstrably correct, mobile is left exactly as * A2 and A6 built it, and the 85.8 px pre-existing mobile delta is reported * rather than papered over. A lane that cannot fix something should leave it * measured, not make it worse while appearing busy. * -------------------------------------------------------------------------- */ @media (min-width: 992px) { .vnm-footer { padding-top: 80px; padding-bottom: 40px; } /* Row 1 — the identity card + the lambo CTA. 145.2 + 74.2 = 219.4. */ .vnm-footer__inner { margin-bottom: 0; padding-bottom: 74.2px; } /* Row 2 — the copyright line. 1 (border) + 40 + 25.2 (its own text) = 66.2. * * ⚠ CORRECTION 2026-08-29. This rule previously read 18 / 23.2, which also * totals 66.2 — and that is exactly the trap this file's own header warns * about: matching a SUM while distributing it differently. The reference * puts all of the slack ABOVE the text (its wrapper is padding-top: 40px, * padding-bottom: 0), so its copyright line sits 40px under the hairline * and hard against the footer's bottom padding. Ours sat 18px under the * hairline — a visible 22px difference in where the line falls, inside a * row whose height already measured correct. Measured on both planes, not * inferred: reference .vc_custom_… wrapper padding-top 40px / bottom 0. * * The space BELOW the line is the footer's own padding-bottom, not this * element's — which is what lets the ArneIron credit strip's * --vnm-mw-reserve grow it without moving the copyright line. */ .vnm-footer__copy { margin-top: 0; padding-top: 40px; padding-bottom: 0; } /* The mark PAINTS 130 x 130 on the reference plane — but it does not * OCCUPY 130. Measured 2026-08-29: * * reference box-sizing border-box; width/height 100px; padding 5px; * transform: scale(1.3) -> layout 100, ink 117, paint 130 * (+ its wrapper carries margin-right: -10px) * here width/height 130px, no padding, no transform * -> layout 130, ink 130, paint 130 * * Two consequences, both visible and both wrongly attributed before: * 1. the drawn spiral was 13px FATTER here, because the reference's 5px * padding shrinks the ink inside the scaled box and ours had none; * 2. the identity text started at x=218 against the reference's 190. * That 28px is pure box arithmetic — 130 of layout plus an 18px gap * against 100 - 10 plus a 25px gap — not a padding or a margin on the * text, which is where two earlier passes went looking. * * Ported as the reference states it rather than faked with a single * negative margin: the scale is what keeps ink and layout independent, and * a reader who diffs the two planes should find the same three numbers. * There is no wrapper element here (the img is a direct flex child of the * card), so the wrapper's -10px is folded onto the img itself. * * The residual 5px against the reference's x=190 is the deliberate 1300px * container: this footer's content box starts at 70, the reference's at 75. * Chasing it would undo the owner's layout width. */ .vnm-footer__mark { box-sizing: border-box; width: 100px; height: 100px; padding: 5px; margin-right: -10px; transform: scale(1.3); } }