claudetools/projects/acg-website-showcase/multipage/design/review-gemini-radical.md

[INFO] INDEPENDENT DESIGN & CODE REVIEW Verdict: The 'Blowout' concept effectively shatters boring MSP templates, but heavily overshoots "trust" into "retail clearance" territory. It requires strategic dialing back to balance radical boldness with B2B stability.

---

1. DIAL-BACK STRATEGY (Ranked)

1. [ERROR] Overshoot: 13rem poster-typography (radical.css:54). Screams "event poster", refuting stability.

   Alternative: Cap clamp at ~5-6rem. Keep Anton, but size it for authority, not alarm.

2. [ERROR] Overshoot: Drenched signal-orange background blocks (radical.css:80, radical.css:143). Triggers urgency/warning semantics.

   Alternative: Restrict orange exclusively to interactive elements/accents. Use --ink for section backgrounds.

3. [WARN] Overshoot: 8.5rem blowout price numerals (radical.css:128). Reads as a discount warehouse.

   Alternative: Scale down to 3-4rem. Keep the transparent grid, but refine the typography.

4. [WARN] Overshoot: Infinite scrolling marquee (radical.html:36). Associated with aggressive retail.

   Alternative: Replace with a static, horizontal trust bar (logos or key features) below the hero.

5. [INFO] Overshoot: 16rem transparent ghost numerals (radical.css:102). Adds meaningless visual noise.

   Alternative: Remove entirely. Rely on the stark grid and whitespace.

2. WHAT TO KEEP

[OK] The --ink and --bone palette foundation: highly premium and tech-forward. [OK] The brutalist structural borders (2px solid var(--bone)): communicates transparency and zero-BS. [OK] Direct, no-fluff copywriting ("Everything, handled", "No games"). [OK] JetBrains Mono for metadata: adds legitimate engineering credibility.

3. WCAG AA CONTRAST

[ERROR] Orange text on --ink: #FF5A1F on #0C0A09 yields ~4.3:1. Fails AA for body text.

Corrected hex: Use --hot-2 (#FF8A4D) for all orange text on dark backgrounds. Confidence: High. [ERROR] Black on #FF5A1F (rx-price--pop unit text): #0C0A09 on #FF5A1F at opacity: 0.7 (radical.css:131). Fails functional contrast. Corrected hex: Remove opacity. Use solid #0C0A09. Confidence: High. [ERROR] Stroke headline (radical.css:57): Transparent fill with 2px stroke fails functional contrast for low-vision users. Shape is lost. Corrected hex: Replace color: transparent; with solid color: #F4EDE1; (var(--bone)). Confidence: High. [WARN] Bone-2 on --ink: #B8AE9E on #0C0A09. Technically passes (~7.3:1), but thin font (radical.css:13) makes it functionally weak. Corrected hex: Lighten to #C9C1B5 or increase font-weight to 500. Confidence: Medium.

4. ACCESSIBILITY

[ERROR] Marquee data loss (radical.html:35): Claim: aria-hidden="true" is fine for decorative elements. Refutation: The values ("Since 2001", "No offshore") are not exposed to screen readers anywhere else in the DOM. Core value propositions are completely lost. Confidence: High. [WARN] Focus management (radical.css:76): Claim: Global :focus-visible outline is visible. Refutation: Uses --hot. For .rx-btn--hot placed on a --hot background (like the CTA section), the outline relies entirely on outline-offset, becoming invisible. Confidence: High. [OK] prefers-reduced-motion (radical.css:21): Correctly zeroes out animations. [OK] Decorative image (radical.html:26): alt="" and aria-hidden="true" correctly implemented.

5. RESPONSIVE RISKS

[ERROR] Layout break (radical.css:122): 3-column pricing grid persists down to 761px. At ~761px-950px, 8.5rem text will overflow column bounds. [WARN] Hover reflow (radical.css:112): .rx-svc:hover increases padding-left: 1rem; without initial padding compensation, causing text to abruptly jump right. [WARN] Viewport overflow (radical.css:54): clamp(3.5rem, ...) sets a 56px minimum. The word "picks" may exceed a 320px width viewport, triggering horizontal scroll.

6. REAL CODE / MARKUP BUGS

[ERROR] Negative margin clip (radical.css:55): margin-left: -0.06em; on h1 risks clipping the first letter ("I") outside the scrollable area. [WARN] Inline styles (radical.html:46): <div class="rx-svc-list" style="margin-top:2.5rem;"> violates structural separation. [INFO] Legacy prefixing (radical.css:58): text-stroke is non-standard. -webkit-text-stroke is sufficient for all modern engines.