claudetools/projects/acg-website-showcase/multipage/design/review-gemini-bold.md at 9b4e86cdfc28ed99e798d3003ff3718536492f12

Files

Mike Swanson 57322c66f5 sync: auto-sync from GURU-5070 at 2026-06-15 06:07:00

Author: Mike Swanson
Machine: GURU-5070
Timestamp: 2026-06-15 06:07:00

2026-06-15 06:07:20 -07:00

[INFO] 1. B2B Trust Assessment (Dial-back)

Verdict: Credible but leans industrial/brutalist; overcorrected away from "concierge."
Reasoning: Restricting the signal orange and relying on the bone/ink palette effectively neutralizes the "loud poster" liability. However, the relentless 2px hard ink borders (styles.css:151) and ubiquitous zero-radius corners project "heavy construction/logistics" rather than high-touch IT. It is safe for B2B, but lacks premium polish.

[ERROR] 2. WCAG AA Contrast

Verdict: CLAIM REFUTED. Light mode buttons fail AA compliance.
Reasoning: styles.css:135 pairs --accent: #E24A12 with --on-accent: #FBF7F0. For a 16.8px (1.05rem) 600-weight button text, WCAG AA requires 4.5:1. This pairing yields ~3.78:1.
Fix: Change html[data-skin="bold"] light mode --on-accent to #16120F (yields 5.5:1). Dark mode passes (button 5.5:1, text 7.4:1).

[WARN] 3. Anton Readability at UI Sizes

Verdict: Severe legibility friction on sentence-length strings.
Reasoning: styles.css:147 forces .faq__q (full questions) and .svc__name to uppercase. Anton's ultra-condensed, heavy letterforms are designed for isolated poster words. At 1.25rem (20px), block-capital questions smear into unreadable rectangles.
Fix: Remove .faq__q, .svc__name, and .brand__name from the styles.css:147 uppercase block.

[WARN] 4. Grayscale Filter Scope

Verdict: Destructive global targeting.
Reasoning: styles.css:158 (html[data-skin="bold"] img { filter: grayscale(1)... }) blindly desaturates the entire DOM. This will break Microsoft/partner badges, future client logos, and functional UI images.
Fix: Scope specifically to narrative frames: html[data-skin="bold"] .hero__frame img, html[data-skin="bold"] .story__img img, html[data-skin="bold"] .page-head--img img.

[ERROR] 5. Skin Scoping & Real Bugs

Verdict: 3 implementation failures detected.
Leak (Mobile Nav): styles.css:160 applies an active link gradient with a specificity of 0,0,2,2. This permanently defeats the multipage mobile reset at styles.css:431 (0,0,2,0), causing desktop underlines to break the mobile dropdown layout.
- Fix: Add @media (max-width: 880px) { html[data-skin="bold"] .nav__links a[aria-current="page"] { background-image: none; } }
Missing Selector: styles.css:154 applies thick borders to .pricing. index.html:121 uses .home-pricing. The homepage pricing block floats without borders.
- Fix: Add .home-pricing to the line 154 selector list.
Internal/External Clash: styles.css:153 slaps a harsh 2px ink border around .rate-card, but the internal dividers rely on a soft translucent 1px gap (--rule). The contrast looks like a rendering glitch.
- Fix: Override the .rate-card gap background to var(--ink) for the bold skin to unify the grid lines.