Bug: Header CTA button invisible (navy on navy) #104

New Issue

Closed

opened 2026-05-17 21:18:21 -05:00 by null · 0 comments

null commented

2026-05-17 21:18:21 -05:00

Owner

Problem

The Request Consultation CTA button in the header uses bg-primary-navy text-white, but the header background is also bg-primary-navy. The button is invisible against its container.

This affects both:

Desktop header (line 80): bg-primary-navy on bg-primary-navy/95 header
Mobile menu footer (line 149): bg-primary-navy on bg-primary-navy SheetContent

The button has no visual distinction from its surroundings. Users cannot see it.

Fix

Change the CTA button style to contrast with the navy header:

Option A: bg-primary-cyan (teal accent) text-primary-navy — matches the 8x8 brand teal
Option B: bg-white text-primary-navy — high contrast, clean
Option C: border-white bg-transparent text-white — outline style

Recommendation: Option A (bg-primary-cyan) — matches the Footer CTA which uses bg-primary-cyan.

Files

src/components/layout/Header.jsx - lines 80, 149

Severity

High - the primary CTA is invisible in the header

## Problem The Request Consultation CTA button in the header uses bg-primary-navy text-white, but the header background is also bg-primary-navy. The button is invisible against its container. This affects both: 1. Desktop header (line 80): bg-primary-navy on bg-primary-navy/95 header 2. Mobile menu footer (line 149): bg-primary-navy on bg-primary-navy SheetContent The button has no visual distinction from its surroundings. Users cannot see it. ## Fix Change the CTA button style to contrast with the navy header: - Option A: bg-primary-cyan (teal accent) text-primary-navy — matches the 8x8 brand teal - Option B: bg-white text-primary-navy — high contrast, clean - Option C: border-white bg-transparent text-white — outline style Recommendation: Option A (bg-primary-cyan) — matches the Footer CTA which uses bg-primary-cyan. ## Files - src/components/layout/Header.jsx - lines 80, 149 ## Severity High - the primary CTA is invisible in the header