[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`): `
` violates structural separation. [INFO] Legacy prefixing (`radical.css:58`): `text-stroke` is non-standard. `-webkit-text-stroke` is sufficient for all modern engines.