Build Services page: hero, linked decisions, and service clusters (LS-1598)

[brandonmarshal]

Summary

Builds the Services page in three patterns: the hero, a six-step "linked decisions" process row, and a service-clusters section grouping all 14 services into 5 thematic cards. No new colour tokens, font sizes, or global styles were needed — everything reuses existing semantic tokens, presets, and card shells.

Hero (patterns/hero/services-hero.php)

• Breadcrumb, eyebrow, heading, description, primary/secondary CTAs
• A wrapped row of all 14 service tags, colour-coded by lifecycle phase (Discover/Create/Build/Launch/Grow/Evolve) to match the mega-menu convention, each linking to its real /services/ page
• A decorative "Services / Lifecycle" preview card reusing the existing is-style-glass-card shell
• Interactive pill states (hover/focus-within background/border tint, lift, shadow, :focus-visible ring) added via src/scss/structural/services-hero.scss, since block-supports has no equivalent for hover/focus-visible
• Fixed the breadcrumb-to-badge gap reading too tight (eyebrow badge top margin bumped from spacing|20 to spacing|30)

Linked decisions (patterns/sections/services-linked-decisions.php)

• Six-step process pill row (Discover/Create/Build/Launch/Grow/Evolve) matching the site's lifecycle-phase colours, linking to new /services/ phase pages
• Neutral pills with a phase-only badge, hover/focus-within states, :focus-visible outline
• Fixed the whole-pill click target on both hero and this section's pills — previously only the text was clickable; the anchor now stays position:static so its ::before overlay sizes against the full pill, not just the text
• Added src/scss/structural/services-linked-decisions.scss for the states/pseudo-elements JSON can't express

Service clusters (patterns/sections/services-service-clusters.php)

• Five cluster cards in an asymmetric 3+2 layout, each with an icon well, index number, description, and a footer row of clickable tag links to the individual service pages
• New shared card shell styles/sections/cards/card-cluster.json — no existing shell fit, since background and single-link behaviour differ from Card - Category
• Equal card height via dimensions.minHeight:100%, footer tags pinned to the bottom via margin-top:auto
• Fixed a real bug: the second card row's blockGap was nested outside spacing instead of inside it, silently falling back to WordPress's default gap instead of matching row 1
• Distinguished the section's background from Section 1's using the existing surface.card token, matching homepage-what-we-build's established alternating-section convention
• Added src/scss/structural/services-service-clusters.scss for the tag hover states

Test plan

• php -l on all touched PHP files — passes
• npm run schema:validate — all JSON files, including the new card-cluster.json, pass
• npm run patterns:escape — the only warnings are in the two new files' pre-existing icon-echo lines, each already phpcs:ignore-annotated with justification (static, developer-authored SVG, not user input)
• npm run security:scan — passes clean on every file this branch touches
• sass compiles all three new stylesheets clean
• Manual visual QA of hero, linked-decisions, and service-clusters sections in the Site Editor/frontend
• Confirm pill/tag hover, focus-visible, and click-target fixes behave correctly across breakpoints

Tracked under LS-1598.

[linear-code]

LS-1598

[Copilot]

🟡 Changes recommended

Unresolved moderate findings remain around asset loading, missing service links, and ineffective hover/focus states.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Builds the Services page with a hero, lifecycle decision links, and five service-cluster cards.

Changes:

• Adds 14 service links and six lifecycle phases.
• Adds clustered service cards with shared styling.
• Adds interaction styles, compiled assets, registration, and documentation.

File summaries

File	Summary
styles/sections/cards/card-cluster.json	Adds the cluster card style. Nit (2 votes): avoid exposing a one-off global style or provide another reusable consumer.
src/scss/structural/services-service-clusters.scss	Adds cluster tag interactions. Moderate (3 votes): inline colors override hover/focus tint declarations.
src/scss/structural/services-linked-decisions.scss	Adds lifecycle pill interactions. Moderate (3 votes): inline border color prevents the hover/focus tint from applying.
src/scss/structural/services-hero.scss	Adds hero pill interaction styles.
patterns/sections/services-service-clusters.php	Adds five cluster cards. Moderate (3 votes): four services are missing from cluster metadata. Moderate (2 votes): shared icon-well styles load only after render.
patterns/sections/services-linked-decisions.php	Adds the six-step lifecycle process row.
patterns/hero/services-hero.php	Adds the Services hero and 14 service links.
package.json	Adds Sass build entries.
inc/animations.php	Registers and detects Services bundles. Moderate (3 votes): add head-time Services-page conditions for these bundles and their shared dependency.
functions.php	Registers editor styles.
CHANGELOG.md	Documents the Services page changes.
assets/css/services-service-clusters.css	Provides compiled cluster styles.
assets/css/services-linked-decisions.css	Provides compiled lifecycle styles.
assets/css/services-hero.css	Provides compiled hero styles.

Review details

Files not reviewed (3)

• assets/css/services-hero.css: Generated file
• assets/css/services-linked-decisions.css: Generated file
• assets/css/services-service-clusters.css: Generated file

• Files reviewed: 11/14 changed files
• Comments generated: 6
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.