claudetools/projects/acg-website-showcase/multipage/design/review-gemini-mp.md at 9960da5f9a6dac80d5ee4df5f08a3133fd87cdfc

Files

Mike Swanson c5d4d3527c sync: auto-sync from GURU-5070 at 2026-06-14 20:04:14

Author: Mike Swanson
Machine: GURU-5070
Timestamp: 2026-06-14 20:04:14

2026-06-14 20:05:02 -07:00

index.html

[WARN] Cross-page consistency: The inline theme <script> in the <head> is unminified, whereas it is a minified one-liner in the other 5 pages (line 12).
[WARN] Cross-page consistency: Footer <p class="disclaimer"> text heavily drifts/diverges from the strings used on other pages (line 109).
[WARN] Inline styling: Uses a hardcoded <div style="display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:var(--base);"> instead of a CSS utility class (line 94).

services.html

[ERROR] Accessibility: Missing semantic headings. Item titles use <div class="svc__name"> inside <article> tags instead of heading elements (line 46). Group titles use <p class="svc-group__title"> instead of headings (line 44).
[WARN] Cross-page consistency: Footer disclaimer text drifts from other pages (line 78).

pricing.html

[ERROR] Accessibility: Missing semantic headings. The rate cards use <div class="tier__name"> instead of <h3> elements (line 37).
[WARN] Cross-page consistency: Footer disclaimer text drifts from other pages (line 107).

calculator.html

[OK] Accessibility: Form controls are properly labeled, input modes are specified, and aria-live is correctly placed on the total output.
[WARN] Cross-page consistency: Footer disclaimer text drifts from other pages (line 90).

about.html

[ERROR] Accessibility: Missing semantic headings. Similar to the services page, item names inside the .svc-list are structured as <div class="svc__name"> instead of headings (line 51).
[WARN] Cross-page consistency: Footer disclaimer text drifts from other pages (line 81).

contact.html

[WARN] Inline styling: The main page heading uses heavy inline styles <h1 id="contact-h" style="..."> rather than pulling from the stylesheet (line 39).
[WARN] Cross-page consistency: Footer disclaimer text drifts from other pages (line 80).

styles.css

[ERROR] House Rules: An em dash (—) is used in the header comment string block, violating the strict no em dash rule (line 2).
[ERROR] WCAG AA Contrast: The active nav underline uses var(--accent) (orange) on --paper (cream), which fails the 3:1 non-text contrast requirement in light mode (line 348).
[ERROR] WCAG AA Contrast: The .bigquote::before quotation mark uses var(--accent) on --paper, failing the 3:1 ratio for large text in light mode (line 364).
[ERROR] WCAG AA Contrast: The .office-figure figcaption uses var(--ink-3) on var(--surface). While --ink-3 passes on --paper, the darker --surface background causes this to fail the 4.5:1 ratio for small text in light mode (line 386).
[WARN] Responsive risk: The mobile nav .nav__links relies on max-height: 60vh; overflow: hidden;. On short landscape viewports, overflowed links will clip and become entirely inaccessible because it lacks overflow-y: auto (line 103).
[OK] House Rules: Verified no side-stripe accent borders (border-left / border-right) are used on components.

app.js

[OK] Calculator handoff logic: Cleanly captures .lname and .lcost strings, utilizes .textContent to safely strip nested spans/HTML entities (like ×), and successfully targets the contact textarea via sessionStorage.
[INFO] Handoff edge case: The acg-estimate payload is only saved when clicking the specific #sendEstimate button (line 125). If a user builds an estimate and manually clicks the "Contact" header link, their built estimate is lost.

WCAG Contrast Check: In styles.css, darken --accent (or swap to --accent-ink) for active nav underlines and .bigquote marks in light mode. Change the .office-figure figcaption text color to --ink-2 to pass 4.5:1 contrast on --surface.
Semantic Hierarchy: Convert <div class="svc__name">, <div class="tier__name">, and <p class="svc-group__title"> elements to appropriate heading tags (<h3>, <h4>) across services.html, pricing.html, and about.html.
Mobile Nav Overflow Risk: Add overflow-y: auto to .nav__links within the @media (max-width: 880px) query in styles.css to prevent clipping.
Markup Unification: Standardize the varying footer .disclaimer text into a single unified string across all 6 HTML pages to resolve cross-page drift. Do the same for the <head> theme inline <script>.
CSS Cleanup: Relocate the inline styles from index.html (line 94) and contact.html (line 39) into utility or block classes in styles.css.
House Rules: Delete the em dash on line 2 of styles.css.
Handoff Improvement (Optional): Bind the sessionStorage.setItem call to the recalc function in app.js so the estimate auto-saves, preventing data loss if a user navigates to the contact page manually.