Build Services page: service tiles section (LS-1598)

[brandonmarshal]

Summary

Adds the Services page's "Fourteen services. One delivery model." section: a 14-card bento grid (Discovery through AI) below the existing hero, linked-decisions, and service-clusters sections. Each card is a single stretched link to its individual /services/{slug}/ page, with an icon well, index number, kicker line and description.

Stacked on #51 — this branch is feature/ls-1598-services-page-batch-2, based off feature/ls-1598-build-services-page rather than develop, and is intended to merge into that branch once #51 lands.

Section pattern

• Added patterns/sections/services-service-tiles.php: eyebrow/heading/intro pair plus the 14-card grid, built as four wp:columns rows (4/4/2/4 cards) — row 3 is the only asymmetric row, with Training and Support each at 50% width. Icons reuse the exact same 14 service→icon mapping already established in services-hero.php.
• Added styles/sections/cards/card-service-tile.json: new shared card shell, modelled on Card - Category's shell (position/overflow/content-flex/stretched-link/focus-visible + hover border-color swap recipe) but flatter — no default shadow, tighter padding, and an index-number slot Card - Category doesn't have.
• Added src/scss/structural/services-service-tiles.scss: only the hover border-color swap (a :hover/:focus-within state with no theme.json pseudo-state key for an arbitrary is-style variant).
• Wired into package.json (build:css/build:css:dev/watch:css), inc/animations.php (render-marker detection + conditional editor/front-end enqueue), and functions.php (add_editor_style).

Fixed during review

• Each row's blockGap originally only set the horizontal ("left") component. On mobile/tablet, once wp:columns stacks vertically, the vertical gap between stacked cards has no explicit value and falls back to WordPress's own default instead of the intended spacing — producing visibly inconsistent gaps between cards. Fixed by setting blockGap to a single value per row so it applies uniformly to both axes, verified consistent at mobile width with no change to the desktop bento layout.

Investigated and not used

• Initially rebuilt this section as a single native CSS Grid group (layout:{"type":"grid","columnCount":4} with per-card columnSpan) to get a single blockGap value governing all spacing natively. This technically fixed the spacing issue but produced a broken/overlapping layout at narrower viewports in real testing, so it was reverted in favor of the simpler wp:columns fix above, which reuses WordPress's own proven column-stacking behavior already used successfully by every other section on this page.

Test plan

• npm run schema:validate — all JSON files pass, including the new card-service-tile.json
• npm run patterns:escape — only the expected phpcs-ignored static-SVG echo (same accepted pattern as services-hero.php/services-service-clusters.php)
• npm run security:scan — clean
• php -l — no syntax errors
• vendor/bin/phpcs --standard=WordPress on the new pattern file — clean
• npm run lint:json — all JSON valid
• Verified live on a local WP install: all 14 cards render in the correct order/copy; desktop shows the 4/4/2/4 bento rows (confirmed via each row's actual top offset); mobile (375px) shows all 14 cards stacked single-column with identical 14px gaps between every card
• Manual visual QA in the Site Editor / cross-browser check

Stacks on #51 (LS-1598).

[linear-code]

LS-1598

[Copilot]

🟡 Changes recommended

Address the unconditional CSS enqueue and preserve AI/SEO capitalization in CTA labels.

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

Pull request overview

Adds the Services page’s 14-card bento grid with responsive layouts, shared styling, and asset integration.

Changes:

• Adds the service-tile pattern and card style.
• Adds hover styling, build/enqueue wiring, and editor support.
• Updates compiled CSS and changelog, including mobile spacing fixes.

File summaries

File	Summary
styles/sections/cards/card-service-tile.json	Defines the shared service-tile card shell.
src/scss/structural/services-service-tiles.scss	Adds tile hover styling.
patterns/sections/services-service-tiles.php	Adds 14 service cards; CTA capitalization for AI/SEO needs correction. Moderate, 2 votes.
package.json	Wires the stylesheet into build and watch scripts.
inc/animations.php	Registers asset loading; frontend CSS currently lacks a reliable page condition. Moderate, 3 votes.
functions.php	Adds editor stylesheet loading.
CHANGELOG.md	Documents the section and spacing fix.
assets/css/services-service-tiles.css	Provides the compiled tile styles.

Review details

Files not reviewed (1)

• assets/css/services-service-tiles.css: Generated file

Suppressed comments (2)

patterns/sections/services-service-tiles.php:137

• Please emit the native core/icon block here with the lightspeed/{name} slugs already used by the Services patterns, rather than reintroducing outermost/icon-block plus inline SVG. CHANGELOG.md:27-30 records that this third-party/raw-SVG approach was migrated away, and services-hero.php:163 plus services-service-clusters.php:109 show the supported form. As written, these tiles depend on the removed Services icon-block path and duplicate the service-icon map (the AI icon already differs), so icons can be missing or inconsistent.

			<!-- wp:outermost/icon-block {"iconName":"","width":"18px"} -->
			<div class="wp-block-outermost-icon-block"><div class="icon-container" style="width:18px;transform:rotate(0deg) scaleX(1) scaleY(1)"><?php echo $ls_tile['icon']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static, developer-authored Phosphor icon markup, not user input. ?></div></div>
			<!-- /wp:outermost/icon-block -->

patterns/sections/services-service-tiles.php:134

• ls-icon-well-brand is styled by work-archive-sections.css (src/scss/structural/work-archive-sections.scss:23-33), but that bundle's front-end condition only covers the home page, project archive and search (inc/animations.php:248-250). On a Services page this marker is detected during body rendering and the CSS is printed in the footer, so these new icon wells can appear unstyled and then visibly restyle after first paint. Load the shared icon-well rules in the head for this page, or move them into a bundle already loaded there.

		<!-- wp:group {"className":"ls-icon-well-brand"} -->
		<div class="wp-block-group ls-icon-well-brand">

• Files reviewed: 7/8 changed files
• Comments generated: 2
• Review effort level: Lite

---

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.