Social Proof Live

sa-life-changing-results-bokeh v2026-06-15

Bokeh-background variant of sa-life-changing-results: the rotating Life-Changing Results ticker over a CSS-generated bokeh light field beneath a very dark overlay block (no external image dependency, so it always renders). 16 amounts on a 48-second loop, anchored by a More Results link. Pick this OR sa-life-changing-results, not both.

Source skill: sa-life-changing-results · Updated 2026-06-15 13:06:05

Edit

Live preview

Open ↗

When to use

Once per page on pages with strong hero images (location pages, practice areas). Pick this OR the flat-dark rotating ticker (3.3), never both. Use near the top of the content flow on pages/posts, after the first proof snippet or TOC when present.

Rules & constraints

1. Overlay gradient MUST match the hero overlay: — same colors, same opacity. If the hero uses a different overlay, do not deploy this element on that page.
2. Photo background must be a real, firm-owned image: No stock imagery. The Lexington reference uses the downtown street photo at `https://aguiarinjurylawyers.com/wp-content/uploads/2026/02/lexington-downtown-street-scaled.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 →": with the right-arrow character (`→`). 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

https://aguiarinjurylawyers.com/locations/lexington/

Deployment notes

Use canonical photo URL. Coordinate gradient stops with hero on same page. 2026-06-15: Added uppercase headline/case-type casing standard and high-placement rule for pages and posts.

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;
  padding:48px 24px;
  margin:0 -24px;
  background-color:#06121a;
  background-image:
    linear-gradient(180deg, rgba(3,9,13,0.85) 0%, rgba(3,9,13,0.92) 100%),
    radial-gradient(70px 70px at 12% 30%, rgba(217,119,6,.55), transparent 70%),
    radial-gradient(48px 48px at 24% 72%, rgba(255,255,255,.22), transparent 70%),
    radial-gradient(95px 95px at 42% 18%, rgba(217,119,6,.30), transparent 70%),
    radial-gradient(72px 72px at 63% 78%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(58px 58px at 80% 34%, rgba(217,119,6,.45), transparent 70%),
    radial-gradient(85px 85px at 90% 66%, rgba(255,255,255,.18), transparent 70%),
    radial-gradient(130px 130px at 50% 50%, rgba(217,119,6,.20), transparent 70%);
  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; margin:0 -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;
}