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

VERDICT
[INFO] Radical "Blowout" poster concept (Anton 13rem, #FF5A1F drench, marquee, stroke outline, giant pricing) succeeds at raw visual arrest and hierarchy but oversteps for a Tucson MSP selling long-term trust and concierge reliability. It reads like a one-day sale flyer more than a stable partner. radical.html + radical.css reviewed in full. No modifications performed.

(1) DIAL-BACK list (ranked 1 = most damaging for trust sale)

1. [HIGH] Hero headline scale + Anton ultra-condensed at clamp(3.5rem, 16vw, 13rem) (radical.html:36, radical.css:70). 13rem on desktop and still 7-9rem on tablets feels like carnival signage, not enterprise IT. Tamer: cap at clamp(2.75rem, 7vw, 5.75rem); keep Anton for one word only or add 0.03-0.04em tracking and switch subheads to Hanken Grotesk 700.

2. [HIGH] Full-bleed #FF5A1F CTA section + multiple hot buttons and pop pricing tier (radical.html:112, radical.css:175, 148, 96). Orange overload + "Talk to a human" at 10rem screams urgency/deal, erodes calm authority. Tamer: limit full-bleed hot to one primary CTA band only; use bone/ink inverted or bone-bordered buttons elsewhere; reserve solid hot for the single highest-value action.

3. [MED] 26s continuous marquee on full #FF5A1F bar (radical.html:46-50, radical.css:104, 107). Perpetual motion + saturated strip reads gimmicky for a 2001-established MSP. Tamer: 48-60s duration or convert to static centered pills row; keep hot only for text if bar must remain.

4. [MED] Transparent-fill -webkit-text-stroke headline on "up." (radical.html:36, radical.css:73-75). 2px bone outline with no interior fill creates thin, haloed, low-density letters that feel unfinished and hard to parse at speed. Tamer: solid bone or hot fill + 1px hot or bone underline/shadow; drop stroke entirely for body copy sizes.

5. [MED] Volume and placement of hot / hot-2 accents (kickers, eyebrow, svc__n, svc__meta, price pop, cta) (radical.css:42, 67, 117, 136, 148, 175). Too many saturated hits dilute focus and hierarchy. Tamer: restrict #FF5A1F to 1-2 CTAs + one price highlight; use bone-2 or ink-2 for meta; replace most hot-2 with bone or a darker orange variant.

6. [LOW] Giant ghost section numerals (16rem clamp) + 8.5rem pricing numerals (radical.css:121, 151). Poster numerals compete with actual content and make pricing feel theatrical. Tamer: ghost max 5-6rem; pricing bigs to clamp(2.5rem, 5vw, 4rem) or switch to weighted Hanken Grotesk for numerals while keeping Anton for true headlines.

(2) KEEP (moves that are genuinely strong)

• Direct "no email wall" calculator teaser and published per-endpoint grid with clear tiering and "most chosen" callout (radical.html:100-107, 76-95). Honest pricing posture is the single biggest trust signal here.
• Service row hover + IntersectionObserver reveal (radical.html:134-140, radical.css:194-195, 131). Subtle progressive disclosure without heavy JS.
• Mono + poster font pairing for scannability and brand lockup in header (radical.css:18-20, 51-56).
• Sticky header, phone CTA, and immediate human contact paths without friction.
• Self-contained file, proper lang/meta, skip link, and existing reduced-motion rule (radical.html:15, 8-12, radical.css:26-30).

(3) WCAG AA contrast failures

• Black #0C0A09 on #FF5A1F (rx-btn--hot, marquee text, rx-cta hot buttons, price pop): estimated 8-10:1+. Passes AA/AAA for large text and UI components. [OK]
• #FF5A1F on #0C0A09 (.hot, rx-kicker, rx-hero__eyebrow, rx-svc__n): ~3.6-4.0:1. FAILS AA for normal text (needs 4.5:1). Passes only if treated strictly as large text. Corrected hex for reliable AA: #FF7A4D or #FF8F60 (brighter) or switch accent text to #F4EDE1 bone on dark.
• #FF8A4D on #0C0A09 (svc__meta, some price units): ~2.8-3.2:1. FAILS AA. Corrected: #FFB57A or replace with #F4EDE1 / #CFC6B4.
• #B8AE9E (bone-2) on #0C0A09 (rx-hero__sub, rx-svc__d, rx-price__list, footer, calc p): ~4.1-4.4:1. FAILS AA 4.5:1 for body text under ~18pt/14pt bold. Corrected: #CFC6B4 or #D8D0C0 (lighten ~10-12%).
• -webkit-text-stroke headline (transparent fill + 2px bone): effective contrast fails. Thin outline only allows background bleed between strokes; no solid interior. Not reliably readable per WCAG for text. Fails even large-text criteria in practice. Corrected approach: solid #F4EDE1 fill + optional 1px #FF5A1F stroke or 2-3px text-shadow; never rely on stroke-only for critical headlines.

(4) Accessibility

• Marquee: aria-hidden="true" present (radical.html:46). Reduced-motion rule already kills the animation (radical.css:29). [OK] Gaps: hover-only pause (css:108) is useless on touch; content is duplicated for seamlessness but animation still runs for keyboard/screen-reader users who do not use hover. Recommend static fallback or prefers-reduced-motion + aria-hidden already good; add role="presentation" or convert to non-animated row for production.
• focus-visible: global rule exists (radical.css:101) with 3px hot outline. [OK] Risk: hot outline on #FF5A1F backgrounds has insufficient contrast. No legacy :focus fallback. Test on hot CTAs; consider conditional darker/bone outline for hot elements.
• Decorative hero image: container aria-hidden="true", img alt="", masked/grayscale + overlay (radical.html:33, radical.css:79-88). [OK] Correct for pure decoration. Mid-width (760-900px) absolute positioning could cause visual layering surprises if image ever gains meaning.

(5) Responsive risks (ranked)

• [CRITICAL] Nav collapse at 760px hides all links except phone CTA with no mobile menu or fallback (radical.css:61, radical.html:20-26). On phones/tablets users lose Work/Pricing/Estimate/Contact access.
• [HIGH] 16vw hero type + 13vw CTA type still produce 6-9rem sizes on 700-900px widths; risk of clipping, tall first fold, and poor line wrapping (radical.css:70, 177).
• [MED] Marquee text 1.4rem only shrinks at 480px; separators and long phrases can overflow or crowd on 320-360px (radical.css:204, 110).
• [MED] Pricing 3-col grid + service grid changes at 760/640px are clean but the orange pop tier loses visual weight when stacked.
• [LOW] Absolute hero art (42vw) + mask can cause text overlap or empty right gutter on 900-1100px before hiding (radical.css:90, 80-84). Body overflow-x:hidden can mask real scroll bugs.

(6) Real code bugs (severity-tagged, ranked)

• [ERROR] Stroke-only "up." headline uses non-standard text-stroke (radical.css:74). Only -webkit-text-stroke is reliable; other engines leave color:transparent text invisible or barely stroked.
• [ERROR] Marquee relies on exact duplicate span blocks for infinite loop (radical.html:48-49). Any content edit, font timing, or resize breaks the seam.
• [HIGH] .marquee:hover .marquee__track pause (radical.css:108) has no keyboard, focus, or touch equivalent. Animation cannot be stopped on mobile or by non-mouse users.
• [MED] Service hover applies padding-left:1rem (radical.css:131). Causes layout shift on every hover; better to use transform or background change only.
• [MED] Global * { margin:0 } + late :focus-visible (radical.css:24, 101) + reduced-motion rules are broad; some transitions on .rx-up and .rx-svc may still leak on older reduced-motion implementations.
• [LOW] rx-ghost and stroke elements use pointer-events:none + user-select:none but remain in tab order or selection edge cases in some engines (radical.css:123, 74).
• [LOW] Year script and IO observer are safe (radical.html:132-140). No console errors obvious from static source. Assets path and missing calculator.html are out-of-scope for this file pair.

[OK] End of review. All analysis derived strictly from the two read files.