Heroes & Top-of-Page Live

sa-hero-trucksun v2026-06-06

Truck Accident Sunset Highway hero, rotating-results variant. Full-bleed split hero with copy + GET STARTED CTA left and a Life-Changing Results rotating card right, over a semi-truck-at-sunset image. H1 leads with the Bigger Share Guarantee.

Source skill: · Updated 2026-06-06 20:55:45

Edit

Live preview

Open ↗

When to use

Top of /practice-areas/truck-accidents/ when you want a results-forward hero tied to trucking cases.

Rules & constraints

1. Full-bleed 100vw, CSS scoped to the element's BEM namespace so styles never leak.
2. Two-column split: copy left (H1 + single GET STARTED CTA), rotating Life-Changing Results card right.
3. Results card cycles 12 amounts on a 72s loop, $14M down to $4M; anchored by a See More Results link to /about-us/our-results/.
4. H1 is a 3-line stack: ALL-CAPS question line + two title-support lines (last line orange).
5. Replace {{HERO_IMAGE_URL}} before publish (or use the pre-wired Media Library URL). Hero image uses eager/no-lazy.
6. Orange #D97706 accent; no banned blues.

Live reference

https://aguiarinjurylawyers.com/practice-areas/truck-accidents/

Deployment notes

WordPress Custom HTML block. Source image: bobtail_truck__no_trailer__driving_down_the_interstate__dusk_34.webp. Replace {{HERO_IMAGE_URL}}.

HTML

<section class="sa-hero-trucksun" aria-labelledby="sa-hero-trucksun-title">
  <img class="sa-hero-trucksun__bg skip-lazy no-lazy" src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/04/family-at-park-hero.webp" alt="Semi-truck on Kentucky interstate at sunset"
       width="1600" height="900" loading="eager" decoding="async" data-no-lazy="1">
  <div class="sa-hero-trucksun__overlay" aria-hidden="true"></div>
  <div class="sa-hero-trucksun__grid">
    <div class="sa-hero-trucksun__copy">
      <h1 id="sa-hero-trucksun-title" class="sa-hero-trucksun__title">
        <span class="sa-hero-trucksun__title-question">INJURED IN A TRUCK ACCIDENT?</span>
        <span class="sa-hero-trucksun__title-support">Get Life Changing Results</span>
        <span class="sa-hero-trucksun__title-support">With Our Bigger Share Guarantee&reg;</span>
      </h1>
      <div class="sa-hero-trucksun__actions">
        <a class="sa-hero-trucksun__cta" href="/contact/">GET STARTED</a>
      </div>
    </div>
    <div class="sa-hero-trucksun__results" aria-label="Recent case results">
      <h3>Life-Changing Results</h3>
      <div class="sa-hero-trucksun__results-wrap">
        <div class="sa-hero-trucksun__res"><div class="sa-hero-trucksun__amount">$14,000,000</div><div class="sa-hero-trucksun__desc">Insurance Dispute</div></div>
        <div class="sa-hero-trucksun__res"><div class="sa-hero-trucksun__amount">$12,000,000</div><div class="sa-hero-trucksun__desc">Wrongful Death</div></div>
        <div class="sa-hero-trucksun__res"><div class="sa-hero-trucksun__amount">$6,800,000</div><div class="sa-hero-trucksun__desc">Car Accident</div></div>
        <div class="sa-hero-trucksun__res"><div class="sa-hero-trucksun__amount">$6,250,000</div><div class="sa-hero-trucksun__desc">Commercial Vehicle</div></div>
        <div class="sa-hero-trucksun__res"><div class="sa-hero-trucksun__amount">$6,100,000</div><div class="sa-hero-trucksun__desc">Box Truck Accident</div></div>
        <div class="sa-hero-trucksun__res"><div class="sa-hero-trucksun__amount">$6,000,000</div><div class="sa-hero-trucksun__desc">Semi-Truck Accident</div></div>
        <div class="sa-hero-trucksun__res"><div class="sa-hero-trucksun__amount">$6,000,000</div><div class="sa-hero-trucksun__desc">Wrongful Death</div></div>
        <div class="sa-hero-trucksun__res"><div class="sa-hero-trucksun__amount">$6,000,000</div><div class="sa-hero-trucksun__desc">Premises Liability</div></div>
        <div class="sa-hero-trucksun__res"><div class="sa-hero-trucksun__amount">$5,600,000</div><div class="sa-hero-trucksun__desc">Wrongful Death</div></div>
        <div class="sa-hero-trucksun__res"><div class="sa-hero-trucksun__amount">$5,200,000</div><div class="sa-hero-trucksun__desc">Trucking Accident</div></div>
        <div class="sa-hero-trucksun__res"><div class="sa-hero-trucksun__amount">$4,100,000</div><div class="sa-hero-trucksun__desc">Car Accident</div></div>
        <div class="sa-hero-trucksun__res"><div class="sa-hero-trucksun__amount">$4,000,000</div><div class="sa-hero-trucksun__desc">Trucking Accident</div></div>
      </div>
      <a class="sa-hero-trucksun__results-link" href="/about-us/our-results/">See More Results</a>
    </div>
  </div>
</section>

CSS

.sa-hero-trucksun{
  --sa-navy:#0B212D;--sa-black:#000;--sa-orange:#D97706;--sa-orange-deep:#B45309;
  --sa-white:#fff;--sa-soft:#E8EEF2;
  position:relative;width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  min-height:600px;overflow:hidden;isolation:isolate;
  background:#0B212D;font-family:Poppins,system-ui,sans-serif;
}
.sa-hero-trucksun *,.sa-hero-trucksun *::before,.sa-hero-trucksun *::after{box-sizing:border-box;font-family:Poppins,system-ui,sans-serif;}
.sa-hero-trucksun__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.55;}
.sa-hero-trucksun__overlay{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(11,33,45,.92) 0%,rgba(11,33,45,.55) 60%,rgba(0,0,0,.78) 100%);}
.sa-hero-trucksun__grid{position:relative;z-index:1;max-width:1280px;margin:0 auto;
  padding:72px 32px;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;min-height:540px;}
.sa-hero-trucksun__copy{color:#fff;text-align:center;}
.sa-hero-trucksun__title{font-size:clamp(28px,2.8vw,38px);font-weight:700;line-height:1.18;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.45);margin:0 auto;max-width:820px;letter-spacing:0;text-align:center;}
.sa-hero-trucksun__title-question{display:block;text-transform:uppercase;color:#fff;}
.sa-hero-trucksun__title-support{display:block;color:#fff;font-size:.80em;}
.sa-hero-trucksun__title-support:last-child{color:var(--sa-orange);}
.sa-hero-trucksun__actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:24px;}
.sa-hero-trucksun__cta{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:16px 30px;
  border-radius:6px;font-weight:700;text-decoration:none;font-size:16px;letter-spacing:.04em;text-transform:uppercase;
  background:linear-gradient(0deg,#000 0%,#0B212D 100%);color:var(--sa-orange);border:1.5px solid var(--sa-orange);
  box-shadow:0 8px 22px rgba(0,0,0,.4);transition:transform .2s ease,color .2s ease,border-color .2s ease;}
.sa-hero-trucksun__cta:hover{color:#fff;border-color:#fff;transform:translateY(-1px);}
.sa-hero-trucksun__results{background:rgba(11,33,45,.78);border:1px solid rgba(217,119,6,.55);border-radius:14px;
  padding:36px 30px;text-align:center;box-shadow:0 22px 60px rgba(0,0,0,.5);}
.sa-hero-trucksun__results h3{color:#fff;font-size:22px;font-weight:700;margin:0 0 22px;letter-spacing:0;}
.sa-hero-trucksun__results-wrap{position:relative;height:115px;overflow:hidden;}
.sa-hero-trucksun__res{position:absolute;inset:0;opacity:0;animation:sa-hero-trucksun-fade 72s infinite;text-align:center;}
.sa-hero-trucksun__amount{font-size:clamp(40px,4.4vw,58px);font-weight:700;color:var(--sa-orange);line-height:1.05;}
.sa-hero-trucksun__desc{font-size:19px;font-weight:500;color:#fff;margin-top:8px;}
.sa-hero-trucksun__res:nth-child(1){animation-delay:0s}
.sa-hero-trucksun__res:nth-child(2){animation-delay:6s}
.sa-hero-trucksun__res:nth-child(3){animation-delay:12s}
.sa-hero-trucksun__res:nth-child(4){animation-delay:18s}
.sa-hero-trucksun__res:nth-child(5){animation-delay:24s}
.sa-hero-trucksun__res:nth-child(6){animation-delay:30s}
.sa-hero-trucksun__res:nth-child(7){animation-delay:36s}
.sa-hero-trucksun__res:nth-child(8){animation-delay:42s}
.sa-hero-trucksun__res:nth-child(9){animation-delay:48s}
.sa-hero-trucksun__res:nth-child(10){animation-delay:54s}
.sa-hero-trucksun__res:nth-child(11){animation-delay:60s}
.sa-hero-trucksun__res:nth-child(12){animation-delay:66s}
@keyframes sa-hero-trucksun-fade{
  0%{opacity:0;transform:translateY(12px)}2%{opacity:1;transform:translateY(0)}
  7%{opacity:1;transform:translateY(0)}8.5%{opacity:0;transform:translateY(-10px)}100%{opacity:0}}
.sa-hero-trucksun__results-link{display:inline-block;margin-top:8px;color:var(--sa-orange);font-weight:700;font-size:18px;
  text-decoration:none;border-bottom:1px solid rgba(217,119,6,.65);}
.sa-hero-trucksun__results-link:hover{color:#fff;border-color:#fff;}
@media (max-width:900px){
  .sa-hero-trucksun{min-height:0;}
  .sa-hero-trucksun__grid{grid-template-columns:1fr;gap:36px;padding:48px 22px;min-height:0;}
  .sa-hero-trucksun__copy{text-align:center;}
}
@media (max-width:640px){
  .sa-hero-trucksun__title{font-size:clamp(28px,9vw,36px);line-height:1.16;}
  .sa-hero-trucksun__title-support{font-size:.91em;}
}