Sam wanted to replace the glass/transparent backgrounds on body block elements sitewide with darker, more opaque treatments. The glass effect (originally rgba(11,33,45,0.85)) was not giving the dark, high-contrast look he wanted. The session produced 8 mockup variations, Sam selected 3 treatments for different page contexts, then we began rolling out Option 8 (Deep Navy + Orange Edge) to body blocks across the site.
A 5-page test batch was deployed. The deployment introduced a critical bug: the anti-Kadence text color protection (color: #fff !important) was applied too broadly and injected white text into light-background components (.sa-review-break elements with #fafafa backgrounds), making review quotes invisible. All 5 pages were rolled back to their pre-change WordPress revisions. The batch script needs to be rewritten before retrying.
| Context | Treatment | CSS | Border |
|---|---|---|---|
| Hero overlay | Option 2: Midnight Gradient | linear-gradient(to top, rgba(4,17,26,1.0) 0%, rgba(11,33,45,0.85) 40%, rgba(11,33,45,0.45) 70%, rgba(11,33,45,0.05) 100%) | None |
| Sidebar CTA | Option 5: Radial Spotlight | radial-gradient(ellipse at 50% 30%, #0e2a38 0%, #061018 60%, #030b10 100%) | None |
| Body blocks + CTA banner | Option 8: Deep Navy + Orange Edge | linear-gradient(180deg, #040d14 0%, #0b212d 85%, #0b212d 100%) | border-bottom: 3px solid #f89c22 (4px for banners) |
Removed: Option 3 (teal-navy diagonal). Sam said "not loving teal. toss that from the mix."
Rollout order decided by Sam: Body blocks first, then sidebar, then hero.
Mockups:
Site Audit:
Batch Script: