/* * Flush Split White — override sheet. * * The WHOLE template. Everything else — the split geometry, the 100vh cap and * its release path, the card and its flip, the hero carousel, the mobile * stack — is inherited from flush-split.css, which functions.php enqueues * unchanged on this template. This file is loaded AFTER it via a `$deps` edge * on the `joetennis-flush-split` handle, not by call order. * * So: nothing here re-declares geometry, the cap machinery, the card, the * footer ground (site-footer.css already sets the band sitewide for all seven * templates) or the shared gutter (site-breadcrumb-utility-row.css and * site-footer.css:44 already match). Re-declaring any of them is how the two * templates start drifting apart again. * * Everything is scoped under `body.project-template-flush-split-white`, the * class WordPress emits from the assigned template slug even though * templates/flush-split-white.php delegates to templates/flush-split.php. That * scope is also what keeps the shared header — rendered by get_header() for * all seven templates — white here and untouched everywhere else. * * The CARD's contrast fixes (rule 4) WERE selector-scoped and are not any * more. That rule was written when `--color-text-heading` and * `--color-text-body` each had one consumer out on the white ground and * another inside the dark card, so retargeting either would have repainted * the card too. Neither does now: v1.11.19 moved the carousel controls * inside the media column, which paints the same panel as the card, and the * eyebrow was removed at v1.12.x. Every consumer of both tokens on this * template now sits on the slate, so rule 5 retargets both -- which is what * CAP-3 of SPEC-revision01-colour-adoption asks for and what the old rule * would have forbidden for a reason that had expired. * * THE CHROME'S RULES ARE NOW THE OPPOSITE, and that is the point of story 3 of * SPEC-interactive-color-states. Rule 3 used to hardcode #000000 inside * `:hover` and `:focus-visible` rules of its own -- the diagnostic defect the * spec was written around. Those rules are gone; the shared sheet * (site-interactive-states.css) owns every interaction state on every ground. * * AND AS OF v1.11.18 IT OWNS THE VALUES TOO. This file used to supply the * white ground's token values in blocks 2, 2b, 5a and 5b; all four are now * `.joetennis-ground-white` in that same shared sheet, which this template * opts into via a body_class filter in functions.php. The split those blocks * encoded is preserved there rather than lost: page-level roles bind on the * class itself and must be safe on the footer band they inherit into (#21232b * since v1.11.21 -- and two of them were NOT: see the counter-binding in * site-interactive-states.css's FOOTER NAV block), while * roles that differ between the header band and that footer bind on the * header containers only. * * What is left in this file is what is genuinely Flush Split White's own: * the page ground (rule 1), the drawer hamburger's one painting line * (rule 2), the carousel counter (rule 3), the dark card (rule 4) and the * revision01 colour direction (rule 5, v1.13.3). Rules 1, 2 and 5d are * deletions kept as prose; 3, 4 and the rest of 5 are live. * * THE CARD IS NOT A FLIP CARD ANY MORE, v1.13.10. Several sentences above * predate SPEC-content-module-tabs and still say "the card and its flip" -- * what is inherited from flush-split.css is now the card and its TABS. The * substance of what those sentences claim is unchanged: this file still * re-declares no geometry, no cap machinery and no card structure, and * re-declaring any of it is still how the two templates drift apart. */ /* 1. THE GROUND RULE IS GONE, v1.13.0 (CAP-5). It read `background-color: #ffffff; color: #000000` on this template's body, and it existed because Neve painted the dark starter ground there from the active `darkMode` palette -- measured live 2026-09-17, body being the only element painting the page ground. The active palette is a light one now, so Neve paints #ffffff from `var(--nv-site-bg)` on every surface and this declaration would only have restated it. CAP-5's bar is that no child stylesheet carries a background-color whose sole purpose is covering a Neve dark ground, so it was deleted rather than kept as a duplicate. The ink half went with it: `--ground-ink` is #16191d at `:root`, which is the decided value and 18.1:1 here. WHAT THIS MEANS IF THE PALETTE EVER MOVES BACK. This template has no paint of its own any more; it is white because the site is white. It is not a white template on a dark site, which is what it was built as and is no longer. */ /* 2. THE DRAWER HAMBURGER LINE IS GONE TOO, v1.13.0, and this is the more interesting deletion. It read `.joetennis-ground-white .header-menu-sidebar .navbar-toggle .icon-bar { background-color: #000000 }` and was duplicated byte-identically here and in archive-project.css -- the sole residue of the v1.11.18 extraction, policed by checks/05 against drift because it was the one white-ground line no ground could carry as a VALUE (Neve paints those three bars through a bare background-color with no custom property behind it). The inversion retired both copies at once. White is the default, so the white drawer needs no override; the DARK consumers are the ones that now need a counter-rule, and that is ONE rule in site-ground-dark.css rather than a third copy here. A duplication that had been open since v1.11.18 closed as a side effect of flipping the default, which is the clearest evidence the default was the wrong way round. */ /* 3. Chrome contrast -- RETIRED as state rules, STORY 3 of SPEC-interactive-color-states. This block used to carry six declarations across four selector groups, TWO of them hardcoding #000000 inside a `:hover` / `:focus-visible` rule (`border-color` and `outline`); the third #000000 was in the REST rule, and `outline-offset: 3px` carried no colour at all. That was the diagnostic defect the whole spec was written around: not a different DESIGN, but the same design forced to hardcode a value because no token existed to re-bind. Every one of them is now a value in `.joetennis-ground-white` (site-interactive-states.css), consumed by that sheet's own rules. What each line became: carousel rest ink/edge -> --state-carousel-rest-fg / -bd carousel hover edge -> --state-carousel-hover-bd (and the hover INK, which this block never moved) carousel focus edge -> --state-carousel-focus-bd carousel focus ring -> --state-carousel-focus-ring (bound since story 1) breadcrumb focus ring -> --ground-default-ring, via the shared baseline `a:focus-visible` breadcrumb hover/focus -> --state-breadcrumb-hover-fg / -focus-fg TWO DELIBERATE CHANGES, both ruled by Joe 2026-09-19, both visible: (a) THE REST EDGE COMES BACK. This block shipped `border-color: transparent` -- "no box" -- sampled from the prototype at node 14:281. The states bench decides #000000 at 1px, and Joe ruled BENCH over the prototype sample. The button now carries a visible black edge at rest. Metrics are unaffected either way: `border-width: 1px` was always there (flush-split.css:604-619), only its colour was transparent, so the metrics the alignment machinery depends on do not move -- measured 66x40 on /projects/public-site-strategy/ -- BEFORE on the shipped v1.11.2, AFTER with this change injected over that same build, since the site installs zips by hand and was still on v1.11.2 at measurement time. THAT METRIC IS 66x40, NOT 40x40. The block this comment replaced claimed "the button keeps its 40x40 metrics" and had done since v1.10.1; the height is 40, the width is 66. Corrected here rather than carried forward. (simple-stack.css's own 40x40 claim is about a DIFFERENT button and is not touched by this.) (b) THE BREADCRUMB'S UNDERLINE-ONLY HOVER GOES. It was the one cell on this site where the white ground moved a DIFFERENT PROPERTY than the dark ground rather than a different value, which is exactly what CAP-2 forbids. Hover now moves ink, to #0b6b78 at 6.20:1, the same property flush-split moves. The precedent is the chip hover Joe ruled colour-only in story 2. One unremarked regression: `outline-offset` was 3px here and is 2px in the shared sheet, so both rings tighten by a pixel. THE ONE LITERAL THAT STAYS, and it is deliberate: the carousel COUNTER below. It is ground ink, not an interaction state -- no state moves it, so no Family A role owns it and there is nothing to re-bind it to. It is the single hex left in this file outside rule 1 and rule 4, and it is not a counter-example to "no literals in state rules". If a future ground-ink role covers it, this is the line to retire. ITS VALUE FLIPPED IN v1.11.20, and the reason is worth keeping because the old comment's justification is what went stale, not the rule. It used to read `#000000`, described here as "ground ink on a white page". That was true: the carousel controls rendered in a grid row of their own, OUTSIDE `.flush-split__media`, so the counter really did sit on the page's white. v1.11.19 (CAP-4) moved the controls inside the media column, which paints #3C5158 -- so the page under this text is no longer white, and black measured 2.51:1 on it, below AA for text. #f8fafc measures 8.0:1 on that slate and matches the button ink the shared sheet now binds for the same element (`.joetennis-ground-white .flush-split__media`), which is the relationship that matters: the counter and the two buttons are one control group and must read as one. So the literal is still ground ink. The ground beneath it changed. AND ITS VALUE FLIPPED AGAIN AT v1.13.4, for the OTHER half of the same sentence. The paragraph above binds this literal to the button ink -- "the counter and the two buttons are one control group and must read as one" -- and v1.13.4 moved that ink to #FFFFFF, landing the States Bench definition decision 8 ruled (white circle, white chevron). So this followed it: #f8fafc -> #FFFFFF, 8.00:1 -> 8.37:1 on the slate. THIS IS WHAT THE RELATIONSHIP COSTS. CSS cannot read another element's custom property, so the counter cannot resolve `--state-carousel-rest-fg` -- it is ink, not a state, and no Family A role owns it. This is a HAND COPY of that token's value. If the carousel rest ink moves again, move this line in the same commit or the control group silently stops reading as one. */ body.project-template-flush-split-white .flush-split__carousel-counter { color: #FFFFFF; } /* AND IT INVERTS AT THE STACKED BREAKPOINT, v1.13.6 -- WHITE ON WHITE OTHERWISE. This is the third time this one literal has moved, and the reason is always the same: it is ground ink, and the ground under it keeps changing. #000000 at v1.11.19 when the controls sat on the page, #f8fafc when CAP-4 moved them onto the slate, #FFFFFF at v1.13.6 when the slate's control group went white. At <=768px flush-split.css drops the media column's fill, so the page floor is back -- and the value directly above would render white text on a white page. Invisible, with nothing failing. #000000 MATCHES THE BUTTONS BESIDE IT, which is the rule this literal has always followed: the counter and the two buttons are one control group and must read as one. At this breakpoint those buttons take `:root`'s white-ground carousel values, whose rest ink is #000000. 21:1 on the white floor. IT CANNOT RESOLVE THE TOKEN ITSELF -- CSS cannot read another element's custom property, and the counter is ink rather than a state, so no Family A role owns it. Hand copy, same as the line above. If `--state-carousel-rest-fg` moves on either ground, both lines move. */ @media (max-width: 768px) { body.project-template-flush-split-white .flush-split__carousel-counter { color: #000000; } } /* The `:disabled` button keeps its inherited `opacity: 0.3` — a disabled control, exempt from the contrast floor. That opacity is also what distinguishes a disabled CTA from a hovered one on this ground: the bench gives white `button.hover` and `button.disabled` byte-identical colour cells (#000000 on #00E5FF), and SPEC.md's open question read that as a collision. It is not one -- the shared disabled rule applies `opacity: 0.3` on top, so disabled renders as a washed-out cyan pill beside a hovered solid one. BUT NOT "EXACTLY AS ON THE DARK GROUND", and the difference is the whole point: on dark the two cells ALSO differ in colour (`--state-button-disabled-fg: #7d7d7d` on `#00b8cc` against `#000000` on cyan). On white, `opacity: 0.3` is the SOLE differentiator. That is precisely what the "not a defect" ruling rests on, so it is stated plainly rather than softened -- if the opacity convention is ever dropped, white disabled becomes indistinguishable from white hover and this cell has to be re-decided. Joe ruled the cells unchanged, 2026-09-19. Latent besides: the only Button/CTA is an , which `:disabled` can never match. */ /* 4. The card (Story 2, SPEC.md CAP-4). Two token retargets on the `.flush-split` root -- which the delegating shim still emits -- and nothing else. The card STAYS DARK: it is the page that went white, so the card reads as a panel ON white rather than a lighter area within dark. --color-bg-surface has TWO consumers as of v1.11.17, and the count matters because this one declaration paints both of them. `.flush-split__card-face-inner` is the original: its `1px solid rgba(0, 229, 255, 0.15)` ring on the next line is RETAINED and deliberately not re-declared -- over the new #3C5158 panel it composites to #336771, which is what the prototype's 1px edge samples on all four sides. An earlier pass called the ring absent by comparing corner colours without accounting for alpha. ONE EXCEPTION TO "all four sides" AS OF v1.11.19: at >=769px the ring's LEFT edge is `transparent` (flush-split.css). Nothing about the prototype changed -- the sampled edge is still what it was. What changed is that the second consumer below paints the media column the same #3C5158 as this panel, so on the side where the two meet the ring had nothing left to separate and rendered as a stranded, shimmering hairline. The full four-sided ring still applies below 769px, where the layout stacks and every edge meets page ground again. Do not "restore" the fourth side here by reading the prototype note alone. The second consumer is `.flush-split__media`, the ground the hero letterboxes against (spec-flush-split-alignment CAP-4's colour half). It is why this template's hero ground is #3C5158 rather than the dark template's own surface -- picked up with no branch in flush-split.css, which is the whole reason that rule could be one declaration serving both templates. This comment claimed a single consumer until 2026-09-21; corrected then, because read literally it said retargeting this token affects only the card, which would make the hero ground's value look accidental to the next person to change it. v1.11.19 (CAP-4's geometry half) does not change either consumer's value, but it does change how much of the media column the fill shows through on: the image now hugs its own aspect ratio, so the slack the fill paints moves from above the carousel controls to below them. --color-text-muted has exactly two consumers -- `.flush-split__subhead` (:781) and `.flush-split__clip`, the back-face pull-quote (:823) -- and Joe set both to #FFFFFF on 2026-09-18. One declaration here rather than two selector overrides, so the pair cannot drift apart. (This is the OPPOSITE technique to rule 3 above, and deliberately so: there, each token had one consumer on the white ground and one inside the dark card, so retargeting would have blacked out the card text. Here both consumers are inside the card.) THE HEADLINE USED TO BE THE EXCEPTION HERE and is not any more. It was left at --color-text-heading #f8fafc because that matched the sampled prototype, which meant the sub-headline rendered BRIGHTER than the headline (#FFFFFF vs #F8FAFC) -- an inverted hierarchy this note defended as deliberate and warned against "correcting". v1.13.3 ends it, not by correcting the inversion but by removing it: Joe ruled headline, subhead and P/S/R value all #FFFFFF on the panel (8.37:1), so the three are one value and there is no hierarchy left to invert. The prototype sample is superseded by a ruling, which is the only thing that supersedes a sample. THE EYEBROW USED TO BE NAMED HERE TOO, as a second value left alone for the same reason (--color-accent-secondary #a855f7). It was REMOVED FROM BOTH TEMPLATES on 2026-09-21 (spec-flush-split-card-affordance): the year is still parsed off the headline, it is simply never rendered. `.flush-split__eyebrow` no longer exists in the markup or in flush-split.css, so this sheet has one fewer thing it is deliberately not touching. Note that --color-accent-secondary is NOT now unused here -- `.flush-split__psr-label` still reads it, which is the consumer the deferred 2.11:1 contrast item is actually about. */ body.project-template-flush-split-white .flush-split { --color-bg-surface: #3C5158; --color-text-heading: #FFFFFF; --color-text-body: #FFFFFF; --color-text-muted: #FFFFFF; --color-psr-label: #8cc201; --color-pullquote-bd: #d3ff5b; /* ALIASED, not restated, at v1.13.8. The literal moved to `--ground-band` at :root in site-interactive-states.css, where the Portfolio archive's grid layout reads it too. The template-local NAME survives on purpose: it is what this sheet's own prose references, it is the role the band plays here, and it is the one line a deliberate divergence would be written on. An alias has exactly one source, so the "one cell with two sources is how they drift" rule that block 5b invokes for the pullquote's ink is not in play -- there is still one source, it just lives upstream now. Renders identically: verified computed rgb(228,228,228) before and after on /projects/journey-mapping-program/. */ --flush-split-band-bg: var(--ground-band); --flush-split-breadcrumb-rest-fg: #000000; --flush-split-breadcrumb-current-fg: #000000; } /* 5. REVISION 01 -- the colour direction Joe drew on 2026-09-21, landed v1.13.3 (SPEC-revision01-colour-adoption). The block above carries every colour of it; the rules below carry the geometry that has no token to live in. WHAT THIS REPLACES. The direction shipped once already, as 72 lines hand-applied to flush-split.css and built into theme/builds/neve-child-v1.13.2.zip -- then reverted in the source tree (44ffaed) AFTER the zip was built, so the installed theme carried a design the repo did not. This is that direction re-landed properly: values Joe ruled row by row in decisions.md, bound to the roles that already existed, scoped to the template the design is OF. WHY IT IS ALL SCOPED HERE rather than in flush-split.css where the capture put it. templates/flush-split-white.php delegates wholesale to templates/flush-split.php, so `#flush-split`, `.flush-split__clip`, `.flush-split__psr-label` and the two flip cues are the SAME selectors on both templates. Applied unscoped, the amber-adjacent lime border, the #e4e4e4 band and the white P/S/R ink would repaint the DARK Flush Split too -- an explicit non-goal of the spec ("Not redesigning the dark case-study templates. The PNG is Flush Split White"). The v1.13.2 zip did exactly that, which is one of the reasons it could not simply be re-committed. This is the one place the sheet's own header rule -- "nothing here re-declares geometry" -- is knowingly set aside, and the reason it is safe to: that rule exists to stop the two templates DRIFTING apart on shared structure. These four rules are not shared structure restated, they are a treatment that exists on one template and not the other. If the dark card ever adopts the same treatment, the move is to promote these into flush-split.css and leave the COLOURS here -- not to copy them across. THREE RULED VALUES DO NOT APPEAR HERE, because they are not this template's: the sitewide purple (#8100fc, decision 3) is four token values in site-interactive-states.css, the footer band (#403f3f, decision 4) is one literal in site-footer.css, and the header CTA's cyan hover (decision 6) is a pair in that same shared sheet's header binding scope. MEASURED ON THE SURFACE EACH ONE SITS ON, not on the page -- which is the distinction that let the export's front-face grey reach 1.82:1 unnoticed. Everything in the block above except the last three sits on the card panel #3C5158: #FFFFFF 8.37:1, #8cc201 3.91:1, #d3ff5b 7.24:1. The last three sit on the band or the page: #e4e4e4 is a surface, and BOTH breadcrumb inks are #000000 at 16.52:1 as of v1.13.4 -- the ancestor link's rest ink was #8100fc at 4.95:1, the tightest cell in the spec, until Joe moved it to black. #8100fc still measures that 4.95:1 here, but on HOVER only now, which is what closed the rest/hover collision v1.13.3 shipped. #8cc201 IS SHORT OF 4.5:1 AND IS RULED IN. Decision 7: it stands as an improvement on the 2.11:1 that `--color-accent-secondary` gave this label, not as a pass. Do not darken it without Joe. WHAT THE EXPORT PROPOSED AND THE RULINGS DROPPED, so nobody re-discovers it in the zip and assumes it was lost: the amber headline (#ffbf00) and the grey subhead (#dbdfe5), both ruled back to #FFFFFF; the green front face (#345842) and its 1.82:1 grey ink (#737981), ruled out entirely so the front face keeps the same panel as the back; the lime carousel "next" accent (#d3ff5b on that button alone), ruled to the States Bench definition instead; the `#f9f9f9 !important` nth-child rule on two of the three P/S/R rows, which the single #FFFFFF above replaces; and two `background-color` fills, one on the pullquote and one on the P/S/R label, plus a `translateY(3px)` nudge. Both fills were the panel colour painted on itself -- captured at the export's own near-miss spelling of the slate, which is what decision 2 and CAP-4 are about -- so both render as nothing, and the nudge was a capture artifact. Decision 2 says that spelling normalises to the slate; the card-panel table then drops the declaration outright, and dropping it is the stronger reading of the two. */ /* 5a. THE BAND. A surface that exists in no stylesheet before this one: the ground behind the media/card pair, inside `#content`'s white. The two children still paint their own `--color-bg-surface` panel fill on top of it, so what shows is the margin around them rather than a repaint of the card or the hero. DELIBERATELY NOT BOUND TO `--ground-fill` (#f1f5f9), which is the nearest existing role. Joe kept #e4e4e4 as drawn; the two are close enough that binding it would have looked like tidying and would have moved the breadcrumb's 4.95:1 cell without anyone deciding to. Values above, rules here -- the same separation the ground contract keeps everywhere, which is why this is a second block on the same selector rather than a paint declaration inside the first. */ body.project-template-flush-split-white .flush-split { background-color: var(--flush-split-band-bg); } /* 5b. THE PULLQUOTE -- Joe's term, and the role decision 8 named for it. The back face's clip quote gains a lime hairline, a 12px radius and 8px of padding, and drops from 18px to 16px at weight 300. Its ink is NOT restated: `--color-text-muted` is already #FFFFFF on this template and one cell with two sources is how they drift. (0,2,1) against flush-split.css's (0,1,0), so it wins on specificity rather than on the `$deps` load order -- though that order holds too. */ body.project-template-flush-split-white .flush-split__clip { font-size: 16px; font-weight: 300; padding: 8px; border: 1px solid var(--color-pullquote-bd); border-radius: 12px; } /* 5c. THE P/S/R LABEL. Colour is the `--color-psr-label` retarget above; this rule carries only the size the design pass moved with it, 13px -> 14px. Kept because it shipped in v1.13.2 and is part of the same drawn design; it is not a colour and so has no decision row. */ body.project-template-flush-split-white .flush-split__psr-label { font-size: 14px; } /* 5d. THE FLIP CUES ARE GONE, v1.13.10 (SPEC-content-module-tabs story 1), and this rule pair went with them rather than being left behind. It ruled the cue rest #FFFFFF (8.37:1) and hover #00e5ff (5.43:1) on the slate, and it existed to close a cell nobody had measured: the cue used to bind `--state-nav-hover-fg`, which `.flush-split__card-scene` re-bound to #a855f7 precisely because the marker purple is unreadable on #3C5158 -- 2.11:1, and 1.33:1 had the white page's marker reached it. A hover state at 2.11:1 is a hover state that does not exist. BOTH OF ITS TARGETS NO LONGER EXIST. `.flush-split__flip-cue` and `.flush-split__card-scene` were removed with the flip mechanism, so this was dead CSS from the moment the tabs landed -- and dead CSS naming a colour decision is worse than none, because it reads as a live ruling. The decision it recorded is not lost: the tab bar's own rest/hover pair in flush-split.css is #FFFFFF and the primary accent, the same two values for the same reason on the same panel. THE SLATE'S PURPLE GAP IS STILL OPEN. #3C5158 has no purple clearing 4.5:1 (#8100fc 1.33:1, #7a22ce 1.17:1, #a855f7 2.11:1). Nothing on this card reads a nav role any more, so the gap has nothing on this template left to break -- but it is a property of the ground, not of the cue, and site-interactive-states.css keeps the note. */ /* 5e. THE BREADCRUMB'S CURRENT ITEM -- black, semibold, unmuted. 16.52:1 on the band. THE `opacity: 0.85` IS DELETED, NOT OVERRIDDEN BY ACCIDENT. It was this item's "quieter than the interactive items" treatment, and the revision01 direction inverts that relationship: the ancestor link is now the coloured one and the current page is the black, heavier one. Leaving the opacity would also have made the ruled figure untrue -- black at 0.85 over #e4e4e4 composites to 12.5:1, not 16.52:1. Safe to scope the usual way, unlike the ANCESTOR link beside it: this item is not an anchor, so no hover or focus rule competes with it. The ancestor's rest ink is a token on the shared rule instead -- see the note on `--flush-split-breadcrumb-rest-fg` in flush-split.css for why raising its specificity would have deleted its focus ring. */ body.project-template-flush-split-white .flush-split__breadcrumb-item--current { color: var(--flush-split-breadcrumb-current-fg); font-weight: 600; opacity: 1; } /* Nothing follows. The white ground's token values -- page half and header half alike -- are `.joetennis-ground-white` in site-interactive-states.css as of v1.11.18, shared with the Portfolio archive at /projects/ instead of duplicated into it (that archive reached this ground via `?layout=grid` until v1.12.0 made the grid its default). The extraction was verified against THIS page by deleting the old blocks from the live CSSOM, inserting the shared class and diffing computed paint: zero paint differences here. That statement is about GROUND and STATE values, and rule 5 above does not weaken it: every token rule 5 declares is a `--color-*` or `--flush-split-*` role belonging to this template, not a `--ground-*` or `--state-*` role belonging to a ground. checks/05 asserts exactly that distinction against this file by name. */