/* ===================================================================== ABOUT -- the paired sheet for templates/about.php Story 2 of `_bmad-output/specs/spec-about-redesign/SPEC.md` (CAP-1 render half, CAP-2, CAP-3). It replaces the medallion's sheet wholesale: the disk, the four quarter-arc tabs, the circular text flow and the 35mm filmstrip are preserved byte-for-byte in medallion.css and are not referenced from here. WHAT THIS SHEET IS FOR, IN ONE SENTENCE. The page behind it exists as a drawing -- the "NEW About" frame of `Content Pages - Flush Split White` (`oiFIkg88DHxhQKIW68bG2V`, frame `75:278`, 1400x4802) -- and Joe's own verdict on that drawing is that it is *"neither color-correct nor positioning-correct"*. So the drawing settles STRUCTURE and settles nothing about paint or geometry, and every value below was re-derived against the site's system rather than lifted off the artboard. THE NORMALISATION, RECORDED HERE BECAUSE THIS IS WHERE IT LANDED. `_bmad-output/specs/spec-about-redesign/drawn-values-audit.md` carries the measurements; this is what each one ships as. drawn ships as why --------------------------- ----------------------- ---------- all nine headings, in the KEPT, as Joe's ruling, site's current-tab green --about-heading-accent 2026-09-29 facet labels --about-facet-label-ink Joe's ruling; the (the slate, as ink) drawn value, kept facet + prose fill, a light --about-band-bg Figma's default grey nothing here paints (--ground-band) rectangle grey hero + prose fill #3c5158 --color-bg-surface already correct the footer's grey not carried site chrome, and stale radii 11 / 28px KEPT, as two tokens Joe's ruling; the drawing has two gutter 63px / 81px --band-gutter 7px and 25px off 56 panel inset 44px 2 rhythm units at the cap facet inset 13px 1 rhythm unit (20px) 13 is off-grid facet gutter 70px 3 rhythm units (60px) panel gaps 26 / 48px 1 and 2 rhythm units inconsistent as drawn facet labels drift 5px aligned a drawing slip text overlaps the portrait two clean grid columns the fault being fixed THIS TABLE WAS THREE ROWS LONGER AND MORE CONFIDENT ON 2026-09-28. The first shipped version of this sheet normalised the drawn greens away and squared all nine boxes. Joe reviewed the installed page against the Figma on 2026-09-29 and overruled both, and the rows above now read KEPT where they read "ships as something else". The reasoning that was retired is not left standing under a new value -- each token below says what changed and why. TWO OF THE DRAWN LITERALS ARE NOT WRITTEN IN THIS FILE AT ALL, not even in a comment: the two retired greys. The heading green is now KEPT and is still not written here, because it is PINNED -- checks/06-pane-guards.sh scans every theme/*.css and requires it to be declared by exactly two named roles, `--color-psr-label` and `--color-tab-current` -- so a literal here fails the suite rather than forking silently. It is read through the token, which is contact.css:411-414's shipped pattern for the same colour. That check strips comments before scanning, so quoting the value would have passed it and still broken the story's boundary; the audit companion (`drawn-values-audit.md`) is where the literals live. ONE DEPARTURE THAT IS VISIBLE AND IS MEANT TO BE. The facet body text rises from the drawn ~13px to the site's one body size, so the four boxes grow taller than drawn. The prose measure was the second such departure and Joe ruled on it directly, 2026-09-29, when offered the drawn full-panel width and a middle option: *"Leave the 760 cap as shipped."* So the empty fill to the right of each prose panel is the accepted look and is not a loose end. NO LINK RULES. legal.css:186-215 and contact.css:210-247 both carry four -- `nv-content-wrap` is absent on a templated Page, so an unowned anchor falls to Neve's own `a:hover` and tints to a palette blue nobody decided. Page 27's `post_content` contains no anchors today (checked 2026-09-28, and legal.css's own comment recorded the same count on 2026-09-25), and half of this page sits on the slate, where the white-ground link roles would be the wrong values anyway. If a prose link is ever added here, the fix is to promote the shared group in site-interactive-states.css by adding this root to its selector list -- NOT to make a third copy. ===================================================================== */ /* ===================================================================== THE TOKENS -- "one knob each" TEN TOKENS, and two declarations underneath that spend them. Nearly everything this page paints or spaces resolves from them, and the spacing values in particular are all integer multiples of `--about-gap`. That is the point: Joe's *"then changing as a whole if needed"* is a value edit here, not a hunt through the file. THE CLAIM IS "NEARLY", AND THE EXCEPTIONS ARE NAMED SO THE SENTENCE CANNOT BE QUOTED AS THOUGH IT WERE ABSOLUTE. Four values below are neither a token nor a multiple of the rhythm: the prose `font-size` and `line-height`, the facet grid's `minmax(200px, 1fr)` floor, and the `760px` reading measure. Each is argued at the declaration that makes it, and none of them is a colour or a radius -- which is the scope CAP-2 actually covers. THEY ARE BOUND ON `.about-page`, NOT ON `:root`, and the reason is what the value IS rather than how many `:root` blocks this theme has. (It has three -- site-fonts.css:7, style.css:72 and site-interactive-states.css:161, the last of which holds both roles this sheet aliases.) `--color-bg-surface` is a COMPONENT-SURFACE role: flush-split-white.css:311-317 and simple-stack.css both bind it scoped to the component that paints it, because the site's GROUNDS are white (`:root`) and dark (`.joetennis-ground-dark`) and the slate is neither. Binding it at `:root` would make it a third ground by assertion. Consistently with that, this template's map entry carries no `ground` key, and checks/05 pins that count at six. ===================================================================== */ .about-page { /* THE TWO RADII, AND THEY ARE THE DRAWING'S. Joe ruled on 2026-09-29, after reviewing the installed page against the Figma: *"Pray don't stand on ceremony about rounded strictly meaning interactive."* So `spec-interactive-color-states` CAP-7 -- *a rounded box on this site can be operated; a squared one cannot* -- is OVERRIDDEN here, by name and on the record, rather than reinterpreted. THE ARGUMENT THAT USED TO STAND HERE IS RETIRED, NOT RE-POINTED, and saying so is the point of this paragraph. It read: the drawing gives nine static boxes THREE radii between them -- ~9-10 on the facets, ~25-26 on the band panels, 28 on the slate ones -- and the split tracks the FILL COLOUR rather than the box's role, which is the tell that they were drawn in two sittings rather than decided. **The premise was a measurement error.** Re-measured at 1:1 off the rendered artboard on 2026-09-29: all four facet boxes are 11px and all six large panels are 28px (28/29 across them, the +/-1 being antialiasing). Two values, applied by BOX SIZE, which is a decision and a legible one. `drawn-values-audit.md` section 2 carried the same wrong claim and is corrected with it. SO THERE ARE TWO TOKENS RATHER THAN ONE, and the split is the drawing's own: the small boxes take the small radius. The nine boxes are recorded in the standing-exception registry at site-interactive-states.css:583-606, beside `simple-stack`'s two, as static-but-rounded. That registry is the honest scope of CAP-7 and this entry is what keeps it honest. They are still ONE LINE EACH to change, which was the whole reason the first version was a token rather than nine literals -- and the reason a reversal cost a value edit instead of a redesign. */ --about-panel-radius: 28px; /* The facet boxes, at the drawing's smaller value. `simple-stack.css` keeps its own provisional radius the same way, at one use site. */ --about-facet-radius: 11px; /* THE RHYTHM UNIT. Every gap, inset and page margin below is this value or an integer multiple of it. The drawing has 26px between prose panels, 48px between the facet row and the first one, 13px inside a facet, 44px inside a panel and four facet labels drifting 5px out of line with each other -- five numbers for what is one decision. 20px is this site's rhythm unit and is already `--band-gutter`'s floor. */ --about-gap: 20px; /* THE PANEL INSET -- 2 rhythm units at the cap, against the drawn 44. Fluid rather than fixed because a 40px inset on a 390px phone is a quarter of the screen; `3vw` reaches 40 at 1334, so it is flat across the whole desktop range and only gives way below it. The floor is one rhythm unit. */ --about-panel-inset: clamp(20px, 3vw, 40px); /* THE BAND FILL, ALIASED AND NOT RESTATED. The literal lives once, at `--ground-band` in site-interactive-states.css:243, where the Portfolio archive's page area and every Flush Split White case-study band already read it. flush-split-white.css:318-320 is the precedent for keeping a template-local NAME over an upstream value: the name is the role the grey plays here and is the one line a deliberate divergence would be written on, while the value still has exactly one home. Retunes the grey everywhere at once, which is the consequence Joe asked for when he named it. */ --about-band-bg: var(--ground-band); /* THE INK ON WHITE AND ON THE BAND -- one role, because it is one value in both places. 17.63:1 on the white page ground and 13.87:1 on `--about-band-bg`. Aliased from `--ground-ink` (site-interactive-states.css:217) for the same reason as above. THESE TWO ALIASES CARRY NO FALLBACK, WHICH LOOKS LIKE AN OVERSIGHT NEXT TO THE BAND BLOCK BELOW AND IS THE OPPOSITE OF ONE. A fallback is a second copy of the value, and the whole argument for aliasing is that the value has ONE home -- `--about-ink: var(--ground-ink, #16191d)` would put the ink in two places and quietly keep painting the old one after the role moved. The band block's fallbacks are a different case and it explains why: an unresolved property inside a `padding` shorthand or a `min()` invalidates the WHOLE declaration, so the failure is geometric and total. An unresolved colour just leaves the element inheriting, which on this page means readable text on an unpainted panel. Degrade, do not duplicate. */ --about-ink: var(--ground-ink); /* THE SLATE. The bench's third ground and already the drawing's own value, so this is the one colour the artboard got right. It is a component SURFACE rather than a site ground -- see the block comment above -- and the role name is the shared one the other two surface-painting sheets use, so the value reads the same here as it does there. */ --color-bg-surface: #3C5158; /* THE INK ON THE SLATE. 8.37:1, the same pairing flush-split-white.css ships. The drawing puts the current-tab green here instead, which measures 3.92:1 on the slate -- a figure CLAUDE.md records being accepted once, for one small current-tab LABEL, and which is a different proposition on a page's headlines. */ --about-surface-ink: #FFFFFF; /* THE HEADING ACCENT -- the drawing's green, KEPT. Joe ruled it on 2026-09-29 after seeing the normalised page: the `

`, the hero's greeting and all four prose-section `

`s take it, on the white ground and on both panel fills. IT IS A REFERENCE, NEVER A LITERAL, and that is what keeps the suite green rather than a stylistic preference. `--color-tab-current` is declared exactly once, at site-interactive-states.css:507, and `checks/06-pane-guards.sh` fails on a second declaration of that value anywhere in theme/*.css. contact.css:411-414 does the same thing through `--state-statement-fg` and states the same reason. A local alias gives the role a name this sheet's prose can use while the value keeps one home. THE CONTRAST FIGURES, RECORDED BECAUSE THE DECISION SHOULD STAY LEGIBLE AND NOT BECAUSE IT IS IN DOUBT. Measured against the three grounds this page paints: on the white page ground 2.14:1 on --about-band-bg 1.68:1 on --color-bg-surface 3.92:1 WCAG's floor is 3:1 for large text and 4.5:1 for body, so the headline and the two band panels are under it and the slate panels sit at the figure CLAUDE.md already records this site accepting for the medallion's current-tab label. **Joe was given all three numbers and asked for the green anyway, 2026-09-29.** That is a ruling, not an oversight, and it is written here so that whoever finds the ratios later finds the decision beside them. The one-line reversal is changing this alias to `var(--about-ink)`. THE ROLE IS NOT FORKED FROM `--color-tab-current`, and the difference matters if the marker is ever retuned: this page follows it. If About should stop following it, that is when this alias becomes its own value -- and `checks/06` would then have an opinion about where that value is declared. */ --about-heading-accent: var(--color-tab-current); /* THE FACET LABEL INK -- the drawing's, KEPT, and it is deliberately a SURFACE colour used as ink. Joe ruled it on 2026-09-29. The first version of this sheet normalised it to `--about-ink` on the argument that spending a surface role as ink is the kind of borrowing that makes a palette stop meaning anything; that argument is overruled here and the four `

` labels take the slate, which is also the fill of the panel directly above them. IT IS THE ONE COLOUR CHANGE IN THIS RULING WITH NO CONTRAST COST: 8.37:1 on the white page ground, the same pairing as `--about-surface-ink` on the slate, inverted. */ --about-facet-label-ink: var(--color-bg-surface); font-family: var(--font-body); color: var(--about-ink); } /* ===================================================================== THE BAND -- CAP-3, satisfied by structure THREE DECLARATIONS, AND THEY ARE THE SAME THREE NEVE'S OWN `.container` TAKES. `--container` is Neve's, fed by the `neve_container_width` theme_mod ({mobile:748, tablet:992, desktop:1400}, read live 2026-09-28); `--band-gutter` is theme/style.css:72-74, and since v1.14.0 `body .container` reads OUR value for it. So the header above this page and every panel inside it resolve their edges from one pair of numbers, which is the 0.00px agreement `spec-sitewide-alignment-band` exists for. EVERY PANEL IS A CHILD OF THIS ELEMENT AND IS THEREFORE FULL-BAND BY CONSTRUCTION. That is CAP-3's six-rectangle assertion satisfied by structure rather than by six matching declarations, any one of which could drift. The drawing's own 63px/81px pair is exactly that failure already happened: five bands at one inset and the facet row at another, 18px apart, with nothing in the drawing explaining it. THE GUTTER IS STATED HERE AND NOWHERE INSIDE. Every measure below this point is relative to a box that already sits inside it, so subtracting `--band-gutter` a second time deeper in the page would inset content from an edge it is not next to. That mistake shipped in this file's first draft -- see the prose measure block for what it cost. THE FALLBACKS ARE NOT DECORATION. An unresolved custom property inside a `padding` shorthand or a `min()` is invalid at computed-value time and drops the whole declaration -- which for `padding-inline` means the page going flush to the viewport edge. `15px` is what shipped through v1.13.41, so a missing style.css degrades to that rather than to nothing. (The colour aliases above deliberately carry none; the token block says why.) A FLEX COLUMN RATHER THAN BLOCK FLOW, so the rhythm between panels is `gap` and cannot be collapsed away by a margin on a block that came out of `post_content`. `align-items` is left at `stretch`, which is what makes every child full-band without saying so six times. ===================================================================== */ .about-page__band { display: flex; flex-direction: column; gap: var(--about-gap); box-sizing: border-box; max-width: var(--container, 1400px); margin-inline: auto; padding-inline: var(--band-gutter, 15px); padding-block: calc(var(--about-gap) * 3) calc(var(--about-gap) * 5); } /* ===================================================================== HEADINGS -- what this sheet decides about type, and what it does not NO `font-size` AND NO `letter-spacing` ON ANY HEADING. Those two are load-bearing omissions: Neve's typography theme_mods emit an inline