Edit element

sa-life-changing-results

Name (slug) Version

Category Status

Description When to use Source skill Rules (one per line, leading dash optional)

1. Overlay gradient must keep the results readable over the bokeh background. Use the dark overlay in this element unless a page-specific design requires a documented adjustment.
2. Background must be a real, firm-owned bokeh image, not stock imagery. Current approved asset: `https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/bokeh_effect_with_plenty_of_blur__highway_seen__not_too_much.webp`.
3. 16 amounts, fixed order, $14M → $2.5M: Do not edit amounts. Same data as `sa-case-results-ticker`.
4. 48-second loop: Do not change timing.
5. Short descriptions only: No trailing modifiers like `, drunk driver` / `, brain injury` / `, head injury`. Just the case type.
6. Mobile centering applies to any visible header: per the sitewide mobile-header rule.
7. Container header is "Life-Changing Results": exact phrasing. Not "Our Results," not "Case Results."
8. Anchor link is "More Results ->": rendered with the right-arrow entity (`&rarr;`). Goes to `/about-us/our-results/`.
9. One per page: Never paired with `sa-case-results-ticker` on the same page.
10. No deprecated colors: (`#003D54`, `#142130`, `rgba(11,33,45,0.85)`).
Title/headline text and case-type labels render in full uppercase via scoped CSS. Place results elements high on pages and posts, ideally after the opening proof snippet or TOC and before deep body sections. Do not park results strips near the footer or bottom proof block.

Live reference URL Deployment notes HTML

<div class="pa-results-ticker">
  <div class="pa-ticker-title">Life-Changing Results</div>
  <div class="pa-ticker-wrap">
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$14,000,000</div><div class="pa-ticker-desc">Insurance Dispute</div></div>
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$12,000,000</div><div class="pa-ticker-desc">Wrongful Death</div></div>
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$6,800,000</div><div class="pa-ticker-desc">Car Accident</div></div>
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$6,250,000</div><div class="pa-ticker-desc">Commercial Vehicle</div></div>
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$6,100,000</div><div class="pa-ticker-desc">Box Truck Accident</div></div>
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$6,000,000</div><div class="pa-ticker-desc">Semi-Truck Accident</div></div>
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$6,000,000</div><div class="pa-ticker-desc">Wrongful Death</div></div>
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$6,000,000</div><div class="pa-ticker-desc">Premises Liability</div></div>
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$5,600,000</div><div class="pa-ticker-desc">Wrongful Death</div></div>
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$5,200,000</div><div class="pa-ticker-desc">Trucking Accident</div></div>
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$4,100,000</div><div class="pa-ticker-desc">Car Accident</div></div>
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$4,000,000</div><div class="pa-ticker-desc">Trucking Accident</div></div>
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$3,600,000</div><div class="pa-ticker-desc">Trucking Accident</div></div>
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$3,300,000</div><div class="pa-ticker-desc">Insurance Dispute</div></div>
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$3,000,000</div><div class="pa-ticker-desc">Trucking Accident</div></div>
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$2,500,000</div><div class="pa-ticker-desc">Motor Vehicle Accident</div></div>
  </div>
  <a href="/about-us/our-results/" class="pa-ticker-link">More Results &rarr;</a>
</div>

CSS

/* ============== sa-life-changing-results - image-overlay ticker ============== */
.pa-results-ticker{
  position:relative;
  box-sizing:border-box;
  width:100vw;
  max-width:100vw;
  padding:48px 24px;
  margin:0 calc(50% - 50vw);
  background-image:linear-gradient(to bottom, rgba(11,33,45,0.72) 0%, rgba(0,0,0,0.86) 100%), url('https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/bokeh_effect_with_plenty_of_blur__highway_seen__not_too_much.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#fff;
  text-align:center;
  overflow:hidden;
}
.pa-results-ticker .pa-ticker-title{
  font-family:Poppins,sans-serif;
  font-weight:700;
  font-size:clamp(26px,3.5vw,34px);
  color:#fff;
  text-align:center;
  margin:0 0 32px;
  letter-spacing:.5px;
}
.pa-results-ticker .pa-ticker-wrap{
  position:relative;
  height:64px;
  margin:0 auto 24px;
  max-width:680px;
}
.pa-results-ticker .pa-ticker-item{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  font-family:Poppins,sans-serif;
  opacity:0;
  animation:pa-ticker-fade 48s infinite;
}
.pa-results-ticker .pa-ticker-amount{
  font-weight:700;
  font-size:clamp(28px,4vw,40px);
  color:#D97706;
  line-height:1.1;
  margin-bottom:4px;
}
.pa-results-ticker .pa-ticker-desc{
  font-weight:500;
  font-size:clamp(14px,1.4vw,16px);
  color:#fff;
  letter-spacing:.4px;
}
.pa-results-ticker .pa-ticker-link{
  display:inline-block;
  color:#D97706;
  font-family:Poppins,sans-serif;
  font-weight:700;
  font-size:16px;
  text-decoration:none;
  margin-top:8px;
}
.pa-results-ticker .pa-ticker-link:hover{ text-decoration:underline; }

/* 16 items × 3s each = 48s loop. Each fades in over its 3s slot. */
.pa-results-ticker .pa-ticker-item:nth-child(1) { animation-delay:0s; }
.pa-results-ticker .pa-ticker-item:nth-child(2) { animation-delay:3s; }
.pa-results-ticker .pa-ticker-item:nth-child(3) { animation-delay:6s; }
.pa-results-ticker .pa-ticker-item:nth-child(4) { animation-delay:9s; }
.pa-results-ticker .pa-ticker-item:nth-child(5) { animation-delay:12s; }
.pa-results-ticker .pa-ticker-item:nth-child(6) { animation-delay:15s; }
.pa-results-ticker .pa-ticker-item:nth-child(7) { animation-delay:18s; }
.pa-results-ticker .pa-ticker-item:nth-child(8) { animation-delay:21s; }
.pa-results-ticker .pa-ticker-item:nth-child(9) { animation-delay:24s; }
.pa-results-ticker .pa-ticker-item:nth-child(10){ animation-delay:27s; }
.pa-results-ticker .pa-ticker-item:nth-child(11){ animation-delay:30s; }
.pa-results-ticker .pa-ticker-item:nth-child(12){ animation-delay:33s; }
.pa-results-ticker .pa-ticker-item:nth-child(13){ animation-delay:36s; }
.pa-results-ticker .pa-ticker-item:nth-child(14){ animation-delay:39s; }
.pa-results-ticker .pa-ticker-item:nth-child(15){ animation-delay:42s; }
.pa-results-ticker .pa-ticker-item:nth-child(16){ animation-delay:45s; }

@keyframes pa-ticker-fade{
  0%        { opacity:0; }
  1%        { opacity:1; }
  6%        { opacity:1; }
  7%        { opacity:0; }
  100%      { opacity:0; }
}

@media (max-width:768px){
  .pa-results-ticker{ padding:36px 16px; }
  .pa-results-ticker .pa-ticker-title{ text-align:center; }
}

/* Results ticker casing and placement standard, 2026-06-15. */
.pa-results-ticker .pa-ticker-title,
.pa-results-ticker .pa-ticker-desc{
  text-transform:uppercase;
}
.pa-results-ticker .pa-ticker-title{
  letter-spacing:.04em;
}
.pa-results-ticker .pa-ticker-desc{
  letter-spacing:.05em;
  font-weight:700;
}

Cancel