/** * Contact — page stylesheet (story 1 of spec-contact-page). * * Pairs with templates/contact.php + contact.js. Enqueued by the Neve child * theme's functions.php ONLY when the rendered post is a WordPress Page * (`is_page()`) whose assigned Template slug is `templates/contact.php` — * the second entry in `$joetennis_page_template_assets`. That map has no * default fallback: a Page on any other template, this site's Home and Blog * included, misses the lookup and loads nothing from here. * * It goes out through the same `joetennis_child_enqueue_template_pair()` * emitter the seven project templates and about.css use, so it carries the * same three base dependencies — `joetennis-child-style`, * `joetennis-site-fonts` and `joetennis-site-interactive-states`. The third * is the load-order edge the whole interactive-states model rests on * (functions.php:517-523): omit it and WP_Styles is free to put this sheet * AHEAD of the shared one, which would silently lose every override declared * here with no visible diff in either file. Every token the rules below read * is declared in that sheet's `:root`, so the edge is load-bearing here * rather than theoretical. * * THIS SHEET DECLARES NO COLOUR VALUE OF ITS OWN. Not one hex, not one * rgba(). Every colour below is a `var()` onto a role * site-interactive-states.css already decided for the white ground — * `--ground-ink`, `--ground-edge`, and the four `--state-link-*` roles. * That is deliberate and it is the whole of this file's colour policy, * and it has survived the page growing a form, a panel and a headline: * every colour this page needs was decided in the states sheet, against * the ground it is measured on. SPEC.md's `#8cc201` constraint is the * sharp end of the same * rule (`checks/06:129-169` now pins that value to two ROLES across every * `theme/*.css`, so a fork here would be caught — but the general form of * the mistake would not be). Story 2 introduces this theme's first form * controls and WILL have values to decide; it decides them in * `token-contract.md` and `state-values.md` first, not here. * * WHY THE LINKS ARE ENUMERATED HERE AT ALL, which is the one thing in this * file that is not obvious. site-interactive-states.css:1830-1845 states, * as a deliberate boundary, that there is NO `a { color }` rule anywhere in * that sheet — blanket colour on anchors is exactly the blast radius * enumerating exists to avoid — and that the price of the boundary is that * "Neve's own `a:focus, a:hover` tints every unenumerated anchor to the * SECONDARY accent", which is the same hue as the sitewide "you are here" * marker. Its enumerated prose-link group ends at * `body .nv-content-wrap.entry-content a`, and A PAGE TEMPLATE NEVER * PRODUCES THAT WRAPPER: this template replaces Neve's own page content * template, so `.contact-page` sits directly inside `main#content.neve-main` * with no `.entry-content` anywhere in its ancestry (verified against the * live /about/ render, 2026-09-25). So Contact's two links reach none of * those rules, and left alone they would hover purple. The block below is * this page joining that enumerated list from the template-sheet side, * reading the same four tokens rather than restating their values — which * is the outcome that baseline block's own note asks for. * * SPECIFICITY IS (0,2,0) AND EVERY CONTESTED PROPERTY IS STATED, per the * lesson flush-split.css:1068-1072 and about.css:270-275 both record from * live bugs: state every property Neve's hover states, at a specificity * that clears Neve outright rather than tying it and depending on `$deps` * order to break the tie. Neve's `a:hover, a:focus` is (0,1,1); (0,2,0) * wins on class count. Neve also renders `text-decoration: var(--linkdeco)` * on content links, so `--linkdeco` is set alongside `text-decoration` in * every state — setting only one of the two leaves the other free to * contradict it. * * THE FORM RULES ARE HERE AND THE COLOUR RULES ARE NOT, which is the * split CAP-3 asked for rather than an accident of who wrote what. This * sheet owns the form's GEOMETRY — the grid, the measures, the gaps, the * padding, the breakpoint. site-interactive-states.css owns its STATE — * every ink, edge, fill and ring, on both grounds. deferred-work named * the specific failure that split avoids: colour overridden onto Neve's * geometry, decided half at a time. * * (This paragraph read "NO FORM RULES, and the absence is the story * boundary" from story 1 until story 5 — three stories after the form * landed. Kept as a note rather than silently replaced, because it is * the same trap templates/contact.php's own docblock records twice: a * summary of what a file contains is the last thing anyone updates.) * * THE BEM PREFIX IS `contact-page__`, and the root is `.contact-page` — * deliberately not the bare template slug the seven project sheets use. * `contact` is a single common dictionary word and contact.js resolves its * root with `document.querySelector()`, which takes the FIRST match in * document order. templates/contact.php:43-52 carries the full argument; * keep every selector added here under `contact-page`. */ /* ===================================================================== THE COLUMN -- WHICH IS NOW THE SITE BAND, AND EVERYTHING UNDER THIS HEADING DESCRIBES THE ARRANGEMENT IT REPLACED. READ THIS PARAGRAPH FIRST AND THE REST AS HISTORY, 2026-09-30. This page no longer has a column of its own. `.contact-page` IS the site's band: `max-width: var(--container)` (1400) with `padding-inline: var(--band-gutter)` inside it, which is the same box `about.css:300` gives `.about-page__band` and the same one the header and footer resolve. The rule this block spends fifty lines justifying -- `width: min(1200px, 100% - 2 * var(--band-gutter, 15px))` -- is gone. WHY IT WENT, and it is the one thing this page was actually getting wrong rather than merely differently. A 1200px cap inside a 1400px band is 1288 - 1200 = 88px narrower than the chrome around it, so the panel's edge sat ~44px inside the header logo and the footer at every width above the cap. The block below notices the inequality and reads it as a safety property -- "this panel is still never wider than the header band above it" -- which is true and was never the goal. The goal is the alignment invariant `spec-sitewide-alignment-band` exists for: the logo, the headline and the panel edge on ONE line. Never wider is not the same as flush, and this is what that distinction cost. WHAT SURVIVES AND IS STILL LOAD-BEARING: the `var(--band-gutter, 15px)` fallback argument at the end of this block. An unresolved custom property still invalidates the function it sits in, and the band's `padding-inline` still carries that fallback for exactly the reason given there. The 760 -> 1200 history is worth keeping because it records WHY a two-column field grid needs width, which is the reason the band is an improvement rather than merely a different number. --------------------------------------------------------------------- One centred measure, and the prose sits in it. There is nothing else on this page yet — story 2's form joins this column rather than sitting beside it, which is why the measure is on the ROOT rather than on an inner `__content` wrapper: an inner wrapper would have to be emitted by the template, and the template deliberately emits nothing but `the_content()`. STORY 5 WIDENED THIS FROM 760px TO 1200px, and the block at :320 below predicted the change in as many words: "if Joe wants the drawn width, the change is this template's column rather than this block -- and it is a layout story, not a fix." This is that story. Layout D is a panel, not a prose column: the page's only prose is one headline set across it, and everything under that headline is a two-column field grid that was running at ~300px per column against the prototype's ~540. THAT PARAGRAPH IS FROM STORY 5 AND ITS SECOND HALF IS NOW HISTORY. It recorded that `min()` capped on `--container` at mobile and tablet once the measure went to 1200. v1.14.0 dropped the `--container` term altogether in favour of `100% - 2 * gutter`, which subsumes it -- so there is no dial in this rule any more and no tier for 1200 to sit above. The MECHANISM note it was defending still holds and is restated below. `min(1200px, 100% - 2 * var(--band-gutter, 15px))` is this codebase's prose measure, in the form legal.css:35 states at length -- read that comment for the full reasoning rather than re-deriving it here. 1200px is the panel's own measure; the second term is the sitewide gutter; the `min()` is which of the two is binding at this viewport. IT CHANGED FORM AT v1.14.0. It was `max-width: min(1200px, var(--container, 1200px))` plus `padding: 64px 15px 96px`, which is the same thing ONLY WHILE THE GUTTER IS A CONSTANT. `--band-gutter` ramps to 56px at 1400, and a border-box `max-width` of 1200 with 56px of padding inside it leaves 1088 -- the gutter eating into a panel it was never sized against. The gutter belongs OUTSIDE a narrow measure and INSIDE a full-width band. THAT MATTERS MORE ON THIS PAGE THAN ANYWHERE ELSE: the whole reason this measure moved from 760 to 1200 was a two-column field grid running at ~300px per column against the prototype's ~540, so a silent 112px loss here is a return trip toward the bug this layout story exists to fix. Desktop columns go 570 -> 585 instead. THE `--container` TERM WAS DROPPED, NOT LOST -- `100%` subsumes it, for the reason legal.css:56 gives. The 1200px CAP STILL CLEARS THE BAND at the new dial: the chrome's content width at 1400 is 1400 - 112 = 1288, and 1200 < 1288, so this panel is still never wider than the header band above it. Check that inequality if the dial is ever lowered below ~1312px, because nothing asserts it. THE 15px INSIDE THE `var()` IS NOT DECORATION: an unresolved custom property inside `min()` makes the whole function invalid at computed-value time, which drops `width` back to `auto` — the panel would silently go full-bleed, which is the one failure this rule exists to prevent. With the fallback it degrades to a flat 15px inset, i.e. to what shipped through v1.13.41. `box-sizing: border-box` IS RETAINED AND IS NO LONGER LOAD-BEARING HORIZONTALLY -- there is no horizontal padding left for it to govern. ===================================================================== */ .contact-page { /* THE PAGE RHYTHM UNIT, and it is About's. `about.css` declares `--about-gap: 20px` and derives every gap, inset and page margin on /about/ from it or an integer multiple; this page now follows the same rhythm, so the two read as one site rather than two pages that happen to share a palette. It is DECLARED HERE rather than read from about.css because that sheet loads only on /about/ -- the same scoping fact recorded at `--shape-input-radius`. A page's rhythm is a page-level decision, though, so two pages each declaring their own at the same value is not the duplication problem the radii are. Scoped to this element rather than `:root` because this sheet declares nothing globally. */ --contact-gap: 20px; /* About's panel inset, hand-copied for the same scoping reason as the rhythm unit above (`about.css:--about-panel-inset`, /about/ only). */ --contact-panel-inset: clamp(20px, 3vw, 40px); display: flex; flex-direction: column; gap: var(--contact-gap); box-sizing: border-box; max-width: var(--container, 1400px); margin-inline: auto; padding-inline: var(--band-gutter, 15px); padding-block: calc(var(--contact-gap) * 3) calc(var(--contact-gap) * 5); font-family: var(--font-body); color: var(--ground-ink); } /* The page's own heading, if the content carries one. Neve's typography theme_mods bind `--h2fontsize`/`--h2letterspacing`/`--h2fontweight` from an inline