Sam wanted to evaluate design changes for non-specialty page heroes on aguiarinjurylawyers.com, then expanded the scope to a full sitewide replacement of the navy glass treatment with the Visible Depth gradient. The session covered four connected topics: (1) removing the hero subtext on non-specialty pages and testing H1 font sizes, (2) replacing the old rgba(11,33,45,0.85) glass with the Visible Depth gradient (linear-gradient(0deg, #000000 0%, #0B212D 100%)) on all dark-background elements, (3) defining the correct Visible Depth hero overlay with 40/70/100 gradient stops, and (4) discovering and flagging the deprecated #003D54 teal color that is actively overriding the hero overlay from the WordPress Additional CSS.
Sam decided that non-specialty pages should drop the .sa-hero-sub paragraph from the hero, leaving only the H1. A mockup was built showing the same sample headline ("CTE & Car Accidents: What NFL Research Means for Crash Victims") at four font sizes: 46px, 42px, 38px, and 34px. Sam confirmed the current 42px stays. The H1 is positioned lower in the overlay (more top padding, less bottom) to sit closer to the gradient's solid base.
Sam confirmed that the Visible Depth gradient replaces every element currently using rgba(11,33,45,0.85) (navy glass). A full side-by-side comparison mockup was built showing current glass vs Visible Depth on all seven dark-background components:
.sa-callout-dark).sa-highlight-box).sa-review-strip)For non-overlay elements (sidebar, callouts, highlight boxes, review strips, CTA banner), the solid Visible Depth gradient is:
linear-gradient(0deg, #000000 0%, #0B212D 100%)
The hero overlay needed special treatment because it uses transparency stops to let the background image show through. Three versions were mocked up side by side:
rgba(11,33,45) at 0%/50%/100% stops