Match Clay County service cards to St. Johns card pattern

[GsCommand]

Motivation

• Make the Clay County service-area cards visually and structurally match the St. Johns county cards so both pages read as the same family while preserving Clay County’s orange color tone.
• Remove per-card inline styling that caused inconsistent sizing and copy length across Clay cards to ensure equal heights and consistent touch/hover behavior.
• Keep the change minimal and scoped to the Clay county cards to avoid regressions elsewhere on the site.

Description

• Added a scoped CSS block under #county-links-clay .service-card that mirrors the St. Johns component metrics (same min-height: 104px, padding, centered flex column layout, border-radius, blur/gloss gradients, box-shadow, and hover polish inside an @media (hover:hover) and (pointer:fine) rule).
• Removed repeated inline background/border styles from each Clay card and consolidated visuals into the shared scoped rule so all cards render equal height and identical spacing behavior.
• Adjusted the grid gap to match St. Johns (gap: 14px) and added the same ::before radial highlights for the glassy gloss effect while swapping gradient colors/border accents to Clay’s orange shades.
• Replaced long paragraph copy inside each Clay card with the requested compact structure (title, 3–4 word descriptor, and View [Place] link with an inline arrow span) for all Clay cards.

Testing

• Verified the file-level diff and that only service-areas/clay-county/index.html contains the changes using git diff and git status.
• Inspected the HTML/CSS diff to confirm inline styles were removed and the new #county-links-clay .service-card rules provide consistent sizing, alignment, and hover behavior.
• Launched a local static server with python3 -m http.server and attempted an automated Playwright screenshot to validate rendering, but the Playwright Chromium process crashed in this environment (SIGSEGV), so a visual screenshot could not be produced here; the CSS/HTML validation steps above succeeded.

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hydrosealpavers-site	Ready	Preview, Comment	Mar 9, 2026 1:06pm