sa-cva-blog-hero v2026-06-13

When to use

Top-of-page hero on blog posts and editorial/news pages that need a clean, focused, single-action header with a strong cover image. Use when a post warrants a designed hero (e.g. a major firm news story or investigative recap) rather than the default WordPress title block. Pair with sidebar Option B (CTA -> Form -> Trust) so the lead-capture form sits in the rail, not the hero.

Rules & constraints

• 1. Strict palette: section background #0B212D; only Foundry orange #D97706 for the H1 accent span and the CALL NOW button. NO legacy #F89C22, no orange backgrounds.
• 2. Two-column split on desktop via the scoped <style> grid (1fr 1fr); image-left, copy-right.
• 3. Copy column is centered (text-align:center, align-items:center) with the H1, an inline subline span, and a single centered CALL NOW pill.
• 4. H1: Poppins 700, clamp(26px,3.6vw,44px), white, with exactly one orange accent span. Subline: Poppins 500, clamp(15px,1.4vw,18px), white, max-width ~50ch.
• 5. Single CTA only: orange #D97706 pill, tel:5028888888 href (CallRail swaps the displayed digits). No secondary button.
• 6. NO eyebrow/kicker, NO trust strip, NO form, NO results ticker inside the hero - those belong elsewhere on the page.
• 7. Responsive rules MUST live in the scoped <style> block, never inline: at max-width:900px the grid collapses to one column and the image cell moves to order:-1 (stacks first) with min-height:220px. Inline !important would otherwise beat the media query.
• 8. Image cell uses background-image with a linear-gradient navy overlay (rgba(11,33,45,.22) -> .5) over the cover photo; min-height 220px so it never collapses.
• 9. No emoji. Use &rsquo; / &reg; HTML entities in copy.
• **EXEMPT SECTIONS (added 2026-06-13 by Sam) — do NOT auto-apply this hero to these page groups; each gets its own unique hero, not the standard registry library:**
• Attorney/team bios and the Meet Our Team index — /about-us/meet-our-team/* (custom per-attorney hero)
• Truck Talk topic library — /truck-talk/* (custom topic hero)
• Spanish pages — /espanol/, /lesiones-personales/, /abogado-louisville/, /abogado-lexington/, /abogados-*
• Nursing home — /practice-areas/nursing-home/
• Results pages — /about-us/our-results/, /case-results/ (use sa-results-hero / sa-split-results-hero)
• About Us section — /about-us/ and its top-level children
• Contact Us — /contact-us/ and /contact-us/thank-you/
• Bigger Share Guarantee — /about-us/bigger-share-guarantee/
• Hub pages — /practice-areas/ (hub), /locations/, /locations/kentucky/
• Homepage — /
• Legal/utility — /privacy-policy/, /terms-of-use/, /thank-you/
• When designing or rebuilding a page in any of the above groups, route to the section's bespoke hero skill — do not deploy a generic registry hero.

Live reference

https://aguiarinjurylawyers.com/sam-aguiar-and-jon-hollan-on-the-ntsb-hearings-into-the-ups-flight-2976-crash/

Deployment notes

Ships as a single <section class="cva-hero"> immediately followed by a scoped <style> block that holds the grid + media-query rules. On aguiarinjurylawyers.com the page-level <style> block survives WP Rocket on this post, so the scoped grid/media rules render correctly; if deploying to a page where Rocket strips <style>, move the grid rules to a surviving stylesheet. The full-bleed effect uses width:100vw + margin-left:calc(50% - 50vw) on the section, so it must sit inside .sa-page-wrapper. Pair with sidebar Option B. Swatch via Python find/replace (the edit tool fails on large multi-line HTML).