What I have shipped on this site.

What changed, in plain English: the four dropdown menus in the header now share a single, wider design with helpful descriptions and a feature panel. Long pages with a table of contents now keep that TOC visible as you scroll. The glossary doubled in size. The client portal got a single, consistent layout across all four stages. And the brief flicker some visitors saw when navigating between pages is gone.

• Megamenus: all four header dropdowns (Services, Service Areas, Resources, Company) now use a unified site-width layout: two columns of links plus a feature panel with stats and a CTA, plus a bottom strip with a secondary action. Same width, same rhythm, helpful copy in every panel.
• Sticky TOCs: on long-form pages (Owner's Guide, Technical Approach, What We Build) the table-of-contents sidebar now stays pinned to the viewport as you scroll, with the active section highlighting via IntersectionObserver.
• Glossary expansion: /glossary/ grew from ~85 terms to ~165 across A–Y; new K, Q, X, Y sections; expanded coverage of local SEO, performance, and security topics owners actually ask about.
• Client portal redesign: all four stages (new, in-build, live, anytime) now share the identical layout, plus a sticky-sidebar TOC matching the long-form pages. Direct contact and self-serve resources gained the same treatment.
• FOUC (flash) fix: the brief flash of unstyled megamenus and nav some visitors saw between pages is eliminated. Critical CSS now locks the position of the megamenu, hamburger, nav-icon buttons, and mobile backdrop from first paint, so the deferred stylesheet swap is invisible.

• New: /what-we-build/: 20-section deep dive on the deliverable, plain language first with the technical detail right after. Pairs with /technical-approach/ (which talks to engineers + agency evaluators); this one talks to the actual buyer.
• Improved: /technical-approach/ container widened from --max-prose (~72ch) to 1100 px so headings, code, lists, and the table of contents breathe; running paragraphs constrained to 70 ch via a new .prose--wide modifier so long-form text stays readable.
• Glossary: added robots.txt and security.txt entries.
• robots.txt: now disallows the internal/portal-form URLs that should never have been crawled (/client-portal/, /onboarding/, /content-update/, /emergency/, /design-feedback/, /refer/, /testimonial/).

Yesterday's Lighthouse baseline showed main-site mobile performance dragged down to 79 on the homepage by render-blocking CSS. Today's changes target every step of the network dependency tree.

• Critical CSS inlined via partials/critical-css.njk (~3 KB): theme tokens (light + dark), reset, body baseline, container, sticky header, hero / page-hero padding, h1 sizes, primary button, skip-link, reduced-motion. Prevents FOUC during the brief window before the deferred sheet applies.
• Every stylesheet now non-render-blocking: style.css, Bunny Fonts CSS, and pagefind-ui.css all switched to the <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'"> pattern with a matching <noscript> fallback.
• Direct font preload: Playfair Display 600 + Inter 400 woff2 files preloaded so they start fetching alongside the HTML rather than after the Bunny CSS parses, collapsing the long network dependency chain.
• Cloudflare Pages _headers shipped: /assets/* and /pagefind/* get one-year immutable cache (filenames are content-hashed via eleventy-img + eleventy-auto-cache-buster, so this is safe). HTML revalidates per request. Security: HSTS preload, X-Frame-Options DENY, X-Content-Type-Options nosniff, strict-origin-when-cross-origin Referrer-Policy, Permissions-Policy denying camera / microphone / geolocation / FLoC by default.

Lighthouse mobile delta (deployed, simulated throttling):

• / 79 → 92 (+13). LCP 4.1 s → 3.2 s. FCP 3.5 s → 2.0 s.
• /samples/ 81 → 87 (+6). LCP 3.9 s → 3.6 s. FCP 2.3 s.
• /pricing/ 87 ~ 82 (within Lighthouse simulated noise; LCP 3.4–3.9 s).
• /demo/redcap-roofing/ 96 ~ 95 (noise; demos already at target).
• /demo/lumen-electric/ 95 ~ 94 (noise).

Accessibility, Best Practices, and SEO all hold at 100 across every page. Demo layouts unchanged because they were already 95+; the work targeted the main-site bottleneck.

• New: the six cards on /samples/ now display actual 1280×800 screenshots of each demo's home page (Redcap Roofing, Alpine Inspectors, Meadow & Stone, Summit HVAC, Lumen Electric, Clearwater Plumbing) instead of colored gradient mockups.
• Pipeline: screenshots captured via a one-off headless-chromium script (scripts/capture-demo-screenshots.mjs) against the local dev server. Source PNGs live in src/assets/img/samples/; @11ty/eleventy-img generates AVIF + WebP + JPEG variants at 480 / 760 / 1100 widths with proper srcset + sizes, native lazy loading, and explicit dimensions to prevent CLS.
• A11y: Lighthouse caught one contrast failure on the page; the inline-styled "Live demo" labels were using --gold-600 (light-mode color, 3.16:1 on the dark sample-card surface in dark theme). Switched to --gold-500 which auto-flips per theme.
• Hover: screenshots subtly scale (1.025) on card hover/focus and inherit a 3 px gold focus-visible ring.

Lighthouse audited five representative pages on production. Mobile-simulated throttling. Recorded as a regression baseline for future work.

• / (mobile): Perf 79 / A11y 100 / BP 100 / SEO 100. LCP 4.1 s, CLS 0, TBT 0 ms.
• / (desktop): Perf 91 / A11y 100 / BP 100 / SEO 100. LCP 1.4 s, CLS 0.004, FCP 1.3 s.
• /samples/ (mobile): Perf 81 / A11y 100 / BP 100 / SEO 100. LCP 3.9 s.
• /pricing/ (mobile): Perf 87 / A11y 100 / BP 100 / SEO 100. LCP 3.4 s.
• /demo/redcap-roofing/ (mobile): Perf 96 / A11y 100 / BP 100 / SEO 100. LCP 2.3 s.
• /demo/lumen-electric/ (mobile): Perf 95 / A11y 100 / BP 100 / SEO 100. LCP 2.6 s.

Demo pages hit the 95+ Performance target as expected; they ship a small per-demo CSS bundle. Main-site pages drag down to 79–87 because the full style.css is render-blocking on every page. Improving the main-site mobile score is a separate piece of work (critical-CSS extraction, or a per-page CSS slice). All six pages hit 100 on Accessibility, Best Practices, and SEO.

The site was built desktop-first using @media (max-width) queries, with most layouts collapsing only at 880–980 px. That left a recurring tablet-portrait pain band at 768–820 px where layouts targeted desktop without yet collapsing, and the few "mobile" rules at 720 px and below hadn't kicked in. Symptoms ranged from a 5-column footer crushed into 768 px, to hero side-cards stuck at ~350 px, to two cramped form inputs side-by-side on iPad portrait, to multi-column stat grids that skipped the tablet break entirely.

One pass, ten fixes:

• F1 footer: 5-column footer now collapses through a 4-col intermediate at 1100 px to 2-col at 820 px to 1-col at 560 px (was 5 → 2 → 1 with no intermediate).
• F2 main hero: introduced an intermediate 1.4fr 1fr ratio at 1180 px so iPad landscape stays 2-col without crushing the side card; full stack now happens at 920 px (was 880 px straight to single column).
• F3 form rows: stack threshold raised from 560 px → 720 px on the main .form-row plus all six per-demo equivalents. iPad portrait now gets full-width inputs instead of two cramped ~340 px fields.
• F4 lighthouse-scores: 4-col → 2-col break raised from 560 px → 820 px so iPad portrait gets a readable 2×2 grid instead of cramped four-in-a-row rings.
• F5 industries-grid: minmax lowered from 170 px → 150 px and explicit 2-col rule added at 600 px (1-col below 380 px) so phone portrait gets a guaranteed predictable layout.
• F6 per-demo grids: stat and services grids in all six demos now have explicit @820 px partner rules so the tablet-portrait band doesn't fall through to cramped desktop layouts.
• F7 journey-grid: client-portal stage selector now goes 4-col → 2-col at 1024 px → 1-col at 560 px (was 4 → 2 → 1 at 880/480, stranding tablet portrait on cramped 2-col).
• F8 Leaflet popups: popup wrapper now respects max-width: calc(100vw − 60px) so 30-pin clustering doesn't push popups off-screen at 360 px.
• F9 demo nav hide threshold: Alpine, Meadow, and Lumen headers now hide the inline nav at 980 px (matching the main site) instead of 920–960 px, so the post-nav-hide gap shrinks.
• F10 phone-landscape: rotated phones (568–736 px wide, ~360 px tall) now get hero-padding and banner-padding tuned for short height so the hero CTAs stay above the fold.

Verified on the 28-template page sample at 360 / 414 / 568 / 768 / 820 / 1024 / 1280 px in both light and dark themes. All six demo CSS bundles re-extracted cleanly; boundary markers untouched.

• Fixed: the HTML /sitemap/ page had a hardcoded grid-template-columns: 1fr 1fr that forced two cramped columns at every viewport, including phones. Replaced with a proper mobile-first .sitemap-grid that goes 1 column under 640 px, 2 up to 999 px, 3 above.
• Improved: every link now has a 44 px minimum touch target with a hover state that slides text 0.45 rem on focus. Dashed dividers replace the previous gap-only spacing for stronger visual rhythm.
• Improved: each section gets a numbered eyebrow (gold, tracked uppercase) plus a gold-underlined h2; the typography hierarchy is now obvious at a glance instead of relying on color alone.
• Improved: service-area cities and demo links promoted from inline anchor lists to pill cards in their own responsive grid (1 / 2 / 3 / 4 columns by viewport). Each pill is a 44 px tap target with a gold-bordered hover state.
• New: two missing sections added: SEO & feeds (sitemap.xml, feed.xml, robots.txt, security.txt) and Live demos (all six demo sites with quick-link pills).

• New: human-readable sitemap on each of the five newer demos (Redcap already had one), each tuned to its own design language and tone: Alpine, Meadow & Stone, Summit, Lumen, Clearwater.
• New: brand-guidelines (style-guide) page on each of the five newer demos, each documenting that demo's palette, typography, components, and editorial voice with live examples in the demo's own design language: Alpine, Meadow, Summit, Lumen, Clearwater.
• Improved: all six demo footers now link to Sitemap + Brand alongside the existing Privacy / Terms / Accessibility set, so every demo is a full operational build.

• Fixed (root cause): per-demo CSS bundles (demo.css, alpine.css, etc.) are extracted at build time from comment-bounded blocks in style.css. The previous "button hardening" pass landed at the bottom of the file, outside any demo block, so it never reached the per-demo bundles. On the Clearwater demo specifically, this meant the generic .clearwater-site a link color (cyan) was bleeding through onto every CTA button (navy "Book Service", peach phone CTA, header "Book Service"); the cyan-on-navy contrast was unreadable.
• Fixed: moved button hardening rules INSIDE each demo's CSS block (Redcap, Alpine, Meadow, Summit, Lumen, Clearwater) so they ship in the per-demo bundle. Each demo now locks button text colors for default, hover, focus, and visited via a.<demo>-btn selectors, which beat .<demo>-site a on specificity.
• Fixed: Clearwater body link color bumped from --cw-aqua-deep (3.76:1 on cream, fails AA) to --cw-navy (8.8:1, passes).
• Fixed: demo layout files (demo-redcap.njk, etc.) had hardcoded fake industry phone numbers in the sticky header that the earlier sweep missed (it only touched src/demo/, not src/_includes/layouts/). All six layouts now show the real working number.
• A11y: every demo button gets a high-contrast :focus-visible ring (3 px currentColor + double box-shadow halo).

• New: interactive map at the top of /service-areas/ showing all 30 metros with linked-area pages. Click any pin to jump to that local market page.
• New: coverage map on the Redcap Roofing demo's service-area page, showing the shop, every covered neighborhood with zip codes, and a 30-mile radius ring.
• Stack: Leaflet 1.9.4 + raw OpenStreetMap tiles. No Google Maps API, no API key, no cookies, GDPR-compliant.
• Performance: Leaflet is lazy-loaded only on pages that have a map. Other pages remain unaffected.

• Fixed: button text colors locked across all six demos for every state (default, hover, focus, visited) so generic a:hover rules can never override and produce poor contrast.
• Fixed: outline buttons sitting outside any explicit section context (page heroes, CTA bands) now have explicit text + border color so they never render invisible against any background.
• A11y: every demo CTA button now gets a high-contrast focus-visible ring (3 px currentColor + double box-shadow halo) for keyboard navigation. Visible against any theme or section background.
• Coverage: Redcap, Alpine, Meadow, Summit, Lumen, and Clearwater button systems all hardened.

• Rewrote: Owner's Guide from a one-page handover to a multi-section reference covering what's live, who handles what, asking for changes, emergencies, form submissions, domain ownership, email setup, hosting, security, SEO, analytics, Google Business Profile, content additions, seasonal updates, the monthly invoice, leaving us, and a quick contact card.
• Rewrote: Technical Approach; added image pipeline, font strategy, CSS architecture, JavaScript architecture, theming, search, form architecture, SEO architecture, caching, environments & branching, browser support matrix, and failure modes. Now 20 sections plus 11 technical Q&A items.
• Expanded: FAQ with five new groups: demos & samples, onboarding & client portal, domain/email/ownership, privacy & data, maintenance & the long term.
• Expanded: Glossary from ~25 terms across 9 letters to ~85 terms across 21 letters, covering every term used elsewhere on the site.
• Expanded: Privacy Policy with subprocessor list, GDPR / CCPA rights, security details, breach notification, international transfer language.
• Expanded: Accessibility Statement with WCAG 2.2 specifics, testing methodology, assistive-tech matrix, escalation paths.

• Copy: removed every em-dash from rendered content across the main site and all six demo sites. ~310 instances replaced with commas, semicolons, periods, or parentheses depending on context.
• Why: em-dashes were over-used and made the prose feel uniform across very different industry voices. The voice now reads more directly per page.
• Restored: en-dashes (used for ranges and number spans) were preserved.

• Moved: the full nine-section onboarding form is now hosted only at /onboarding/. The client portal Stage 1 section presents a CTA card linking to it instead of inlining the entire form.
• Refactored: the onboarding form into a reusable partial (src/_includes/partials/onboarding-form.njk) so a single source of truth is included on the dedicated page.
• Improved: client portal now has a four-stage journey selector at the top: brand-new, in-build, live, anytime. Each stage has its own anchor section with a stage tag, summary, time estimate, and the relevant action cards.
• Improved: direct contact section (phone, email, Google Meet) under all stages, plus a self-serve resource grid linking to Owner's Guide, FAQ, Service Agreement, Privacy Policy, Changelog, and Glossary.

• New: five additional industry demos joined Redcap Roofing, each with a distinct visual voice and full operational page set: Alpine Inspectors (editorial / report-like), Meadow & Stone (organic / magazine), Summit HVAC (technical / blueprint), Lumen Electric (Bauhaus / oversized), Clearwater Plumbing (friendly / retail).
• New: industry-specific pricing pages on every demo, tuned to that trade's typical job structure (per-job vs. flat-rate vs. estimate-then-quote).
• New: Privacy Policy, Terms of Use, and Accessibility Statement on every demo (not just Redcap), so each demo is a complete, defensible build.
• Improved: per-demo CSS extracted into separate stylesheets at build time (alpine.css, meadow.css, summit.css, lumen.css, clearwater.css) so demos share zero design tokens. Each demo really is its own visual system.
• Updated: phone numbers across all six demos consolidated to a single working number so call-to-action buttons reach a real line.

• New: the previously preview-only sample forms gallery now contains eight fully-functional Web3Forms-backed intake forms, one per industry: HVAC, plumbing, electrician, roofing, contractor, landscaper, home inspector, commercial inspector.
• Depth: each form is intentionally substantive (12 to 20 fields) to show what real triage intake looks like for that trade, not a generic "name + email + message".
• Spam: hidden honeypot field on every form. No CAPTCHA. All Web3Forms keys live and active.
• A11y: radio and checkbox groups standardized with role="radiogroup" / role="group" and aria-labelledby; labels bound to inputs; errors announced via role="alert".
• Fixed: fieldset legend styling now lifts above its border with consistent typography across all forms (was rendering in display font / bigger than form labels and felt like two separate visual systems).

• Fixed: demo "Live Demo" top banners were wrapping awkwardly on narrow screens; now constrained to a single line at every viewport.
• Fixed: demo top banners were obscuring the hamburger menu on phones; raised hamburger z-index above the banner across every demo.
• Audited: button color contrast across all six demos; primary, secondary, outline, and inverted variants all hit WCAG AA in both light and dark themes.
• Improved: hamburger panel contrast in both light and dark mode. Mobile dropdown toggles now use a distinct background with a visible border (was nearly invisible against the surface in dark mode). Theme switch buttons get higher-contrast type and a clear active state.
• Improved: mobile search box inside the slide-in nav now has explicit background and border tokens so it stays legible against the panel.

• New: fully functional seven-page demo site at /demo/redcap-roofing/, home, services, residential, commercial, service-area, about, contact. Working Web3Forms inquiry form. Lighthouse scores cited on the homepage (test them yourself at pagespeed.web.dev).
• New: this changelog. Published on every ship.
• New: flagship blog post, WordPress Alternatives for Small Business Websites in 2026.
• Improved: the Sample Websites page now prominently features the live demo as a call-out, with a "View live demo" CTA on the Redcap Roofing sample card.

• New: Technical Approach, a ~2,000-word deep dive aimed at developers and evaluators. Covers the full stack, why I use it, performance targets, accessibility pipeline, security posture, and the build & deploy flow.
• Improved: wired into the Company mega menu (desktop + mobile), footer, and HTML sitemap.

• Improved: standardized every form heading (.form-heading = 1.5rem/700), form intro (.form-intro), callouts (.form-callout + .form-callout--danger), and radio/checkbox groups (.form-radio-group / .form-checkbox-group) across all seven forms: contact, onboarding, content-update, emergency, design-feedback, refer, testimonial.
• A11y: radio and checkbox groups now use role="radiogroup"/role="group" + aria-labelledby. Native accent-color ties the brand to the theme.
• Copy: renamed every mention of "hand-coded" / "hand-written" / "by hand" to "custom-coded" / "from scratch", 13 replacements across 8 files.

• Fixed: hero order on mobile (main copy was appearing below the pricing card, now above).
• Fixed: topbar was stacking awkwardly; now a compact single row with just phone + Client Portal on narrow screens.
• Fixed: header was covering the hamburger menu (z-index bug), mobile nav now sits above the header with an explicit close button inside the panel.
• Improved: every form input forced to 16px on mobile to stop iOS auto-zoom. Complex grids collapse to a single column at ≤720px. Tables scroll horizontally. Container/section padding tightens at ≤480px and again at ≤360px for budget phones.
• Improved: every interactive control gets min-height: 44px + touch-action: manipulation (no 300ms tap delay).
• Improved: the "Toggle theme" button is now a proper Light / Auto / Dark segmented control with live system-preference tracking.

• New: Client Portal, a hub for existing clients linking to every operational form.
• New: five operational forms, each with its own thank-you variant on the shared /thank-you/ page: content update, emergency support, design feedback, referral, testimonial.
• New: Sample Forms gallery, eight industry-specific form previews (HVAC, plumbing, electrician, roofing, contractor, landscaper, home inspector, commercial inspector).
• Business model clarification: every client site now ships with 8 operational pages (privacy, accessibility, terms, contact, thank-you, testimonials, style guide, sitemap) plus 8 technical files (robots.txt, humans.txt, sitemap.xml, feed.xml, security.txt, 404, favicon suite, OG/Twitter images). None of it counts against the 10 content pages.
• New: lump-sum plan now includes up to 10 content pages (previously 5), matches the monthly plan.

• New: site-wide full-text search via Pagefind, dedicated /search/ page, a header modal (tap the search icon or press /), and an inline search box at the top of the mobile nav.
• New: /glossary/ A–Z definitions with Tippy.js-powered hover tooltips. Technical terms throughout the site like Web3Forms get inline definitions.
• New: instant.page prefetching for hover-time link priming.
• New: analytics stack of Umami + Cloudflare Web Analytics. Both cookie-free, both GDPR-compliant by design, no cookie banner needed.
• Improved: Pagefind now indexes on every build via an eleventy.after hook so Cloudflare Pages' default preset handles it without a custom build script.

• New design system: Playfair Display + Inter via Bunny Fonts, navy + gold palette, full light/dark theme with no-flash inline script, WCAG AA contrast across every state.
• New: About page with founder photo, six principles, four differentiators.
• New: Accessibility, Style Guide, HTML Sitemap, Glossary, Owner's Guide, Terms of Use, and Service Agreement.
• New: Onboarding form, nine-section detailed intake for new clients.
• Copy: removed all 532 em-dashes site-wide. Rewrote homepage, about, pricing, how-it-works in conversational tone centered on "I handle the whole website."
• Nav: rebuilt with mega menus for Services, Service Areas, Resources, Company. Theme toggle, search, accessible hamburger.

• pikespeakwebdesigns.com shipped on Cloudflare Pages, with the source kept in a private repository.
• Initial content: home, about, pricing, how-it-works, what's-included, samples, service-areas, blog, 30 service area pages, contact, privacy policy.