Match the Squarespace design on all five pages

[tgwab-claude]

Closes #8

The site now reproduces the Squarespace original visually and textually. Every size, color, and spacing value was read from the Squarespace pages' computed styles, element boxes, Fluid Engine grid rules, and divider clip paths, using Playwright at 1280×900 and 390×844. None were eyeballed.

How it was verified

• Layout. A script loaded each Squarespace page and the local build side by side and matched every text run by content. At both widths, every text run and image box is within 4px, and the font family, weight, size, line height, letter spacing, and color all match. Page heights are identical on all ten page and width pairs except /directions at 390px, which is 1px shorter.
• Copy and links. A normalized innerText and link diff shows identical visible copy on all five pages. The only difference is Squarespace's /cart link, which is deliberately omitted.
• Pixels. Full-page pixel diffs, grouped into 100px bands, showed that the remaining differences are anti-aliasing, the hero video frame caught at screenshot time, and the Google map, as described below.
• Mobile menu. Opens, shows its links, closes on Escape, and updates aria-expanded and the button label. Without JS, the nav links stay visible.
• Network. The local build requested nothing from Squarespace or Google Fonts. Its only other hosts are Plausible and the Google Maps iframe, both already allowed by the CSP.
• CI. Every ci step passed locally: plumbing, no-eval, no mailto, _headers CSP, sitemaps, no Squarespace or Google Fonts CDNs, citations, and first-party hero video. _headers and .github/ are untouched, and the CSP is not relaxed.

Changes by page

• Shared chrome (all pages, including 404).
  • Header: it now overlays the first section with Squarespace's cream gradient, 12px backdrop blur, and drop shadow. It shows the Squarespace logo rendition at 100px desktop and 90px mobile, and the active page gets a 1px underline.
  • Mobile menu: the double-line burger becomes an X over a full-screen cream menu.
  • Footer: a navy band with centered Location (justified text), Hours, and Contact columns on the 24-column grid, then a cream bar with left-aligned copyright.
  • Fonts: variable Manrope and Nunito Sans, the same files Squarespace served, replace the static cuts.
• Home.
  • Hero: full-bleed video under a two-column layout, with a heavy left-aligned heading and the bold intro on the right.
  • Emergency section: a curved edge leads into the slate section. It has a two-column layout with the "not available" highlight stroke and underlined 911 and crisis-line links.
  • Footer edge: a sloped edge leads into the navy footer.
• Providers.
  • Layout: a centered title over a 3-column grid of circular portraits, with titles, specialties, and the pill "More Info" button.
  • Footer edge: a wave divider with a 6px slate stroke.
• Resources.
  • Layout: two columns with 4:3 images, left-aligned titles, bold kicker lines, and bottom-aligned "Visit Website" pills that open in a new tab.
  • Footer edge: a zigzag divider with a stroke.
• Cowan. Circular portrait on the right; on the left, the name in a light-accent panel above the bold large copy. On mobile they stack.
• Directions.
  • Hero: the Foggy Lake image with Squarespace's 29% slate overlay and a centered title.
  • Routes: a 2×2 grid, headings ending in colons as on Squarespace.
  • Map: a slate section with the map, then a curved divider with a stroke.

Meta descriptions, canonical tags, OG tags, JSON-LD, robots.txt and the sitemaps, the security headers, one h1 per page, alt text, and the page titles are kept from live.

Still differs

• All pages: link paths. Internal links keep the trailing slash (/providers/, /cowan/), the canonical form, where Squarespace uses /providers. Phone links use E.164 tel:+1… where Squarespace uses tel:1…. Both dial the same number. Phone links do not open a new tab.
• All pages: /cart and titles. Squarespace's /cart link and its "Contact 2" page title are not replicated, per the brief.
• All pages: widths other than 1280 and 390. Measurements were taken at those two widths only.
  • Grid and type: these scale by the same units Squarespace uses.
  • Dividers: Squarespace recomputes the providers wave and resources zigzag phase for each width. This build uses one fixed path for desktop and one for mobile, so between breakpoints the wave or zigzag can sit a few pixels off.
• All pages without JS. On mobile, the nav shows as a row under the logo instead of the burger menu, so it stays usable.
• Home. The hero video is the same Pexels clip, so screenshots differ only by frame.
• Directions: map. Squarespace renders the map with the Google Maps JavaScript API, which the CSP does not allow. This build keeps the maps.google.com embed iframe at Squarespace's exact size and position. The tiles, pin, and zoom level look the same, but the embed adds a place card in its top-left corner and draws slightly different controls.
• Directions at 390px. The page is 1px shorter.
• Not verified:
  • hover states other than the buttons' 0.8 opacity
  • browsers other than Chromium, including the backdrop blur fallback
  • the deployed site: the CSP in _headers is not applied by the local preview server

🤖 Generated with Claude Code

https://claude.ai/code/session_01KX5fU4VDLe5MbyaytQJByw

[tgwab-claude]

devops review: ready for Michal's approval. I checked these myself rather than taking them from the PR report:

• Visual match. I screenshotted the preview against Squarespace: home at 1280 and 390 px, and directions at 1280. The page heights are identical (1454, 2054, and 2453 px), and the layout, section curves, colors, and type match. One visible difference: at 390 px Squarespace breaks the hero heading mid-word ("Comprehensiv / e"), and this PR does not. That difference is kept on purpose.
• Assets. Nothing still references the removed logo.png or the per-weight font files. The preview serves the new fonts and logo (200) and returns 404 for the removed files and for README.md.
• Outside hosts. Only the expected ones: the canonical host, Plausible, Google Maps, the two resource sites, and schema.org. There is no Squarespace or Google Fonts CDN.
• Metadata. index.html keeps its title, canonical, description, robots, and Open Graph tags. _headers, _redirects, and the workflows are untouched.
• Fonts. Manrope and Nunito Sans variable woff2 files, under the SIL Open Font License, credited in the README.

Accepted differences:

• Internal links end in a slash (/providers/), which Pages serves without a redirect.
• Phone links use tel:+1….
• Directions uses Google's standard map embed, because the CSP blocks Squarespace's Maps API.

The branch was updated with main after #9.

🤖 Generated with Claude Code