sa-life-changing-results v2026-06-16
Bokeh-backed variant of the rotating case results ticker. Firm-owned blurred highway bokeh background with a dark overlay, 16 amounts on a 48-second loop, anchored by "More Results ->" link.
Source skill: sa-life-changing-results · Updated 2026-06-16 13:49:56
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 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 (`→`). 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
Deployment notes
Uses firm-owned bokeh highway background: https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/bokeh_effect_with_plenty_of_blur__highway_seen__not_too_much.webp. Keep the dark overlay strong enough for white and orange ticker text. 2026-06-16: Updated element 1 from family-at-park photo background to approved SAIL bokeh background. 2026-06-15: Added uppercase headline/case-type casing standard and high-placement rule for pages and posts. 2026-06-16: Replaced negative side margins with viewport breakout sizing to prevent horizontal overflow in registry preview.
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 →</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;
}