Social Proof Live

sa-cva-results-ticker v2026-06-15

Photo-backed rotating results ticker cycling 18 settlement amounts on a 72-second CSS loop.

Source skill: sa-cva-results-ticker · Updated 2026-06-15 13:06:05

Live preview

Open ↗

When to use

Add animated settlement proof on a page that already has a strong hero image. Use near the top of the content flow on pages/posts, after the first proof snippet or TOC when present.

Rules & constraints

Foundry orange `#D97706` is for text, borders (up to 4px), dividers, and icon strokes only -- never a background fill. The `.pa-ticker-amount` uses orange as text color, which is correct.
No em dashes in body copy. Production copy should follow the firm's em-dash style guide.
Phone number lives in `tel:` href only. Button label is text, never the phone number itself.
Fonts: Poppins (UI) + Georgia/Times New Roman (display). The host page must load the Google Fonts link below.
Text always full opacity per sa-brand-decisions §3.
This is the VISUAL TRUTH SOURCE for SAIL Design Foundation v1 -- do not redesign or recolor.
**Google Fonts (host page must load):**
`https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap`
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/practice-areas/commercial-vehicle-accidents/

Deployment notes

Packaged from the commercial-vehicle-accidents page. Host page must load the Poppins Google Fonts link. VISUAL TRUTH SOURCE for SAIL Design Foundation v1 — do not redesign or recolor. 2026-06-15: Added uppercase headline/case-type casing standard and high-placement rule for pages and posts.

HTML

<!-- ==================== RESULTS TICKER ==================== -->
<section class="pa-results-ticker">
  <div class="pa-ticker-title">Real Clients. Real 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">Premises Liability</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,400,000</div><div class="pa-ticker-desc">Pedestrian 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">$3,000,000</div><div class="pa-ticker-desc">School Supervision</div></div>
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$2,200,000</div><div class="pa-ticker-desc">Truck Accident</div></div>
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$1,800,000</div><div class="pa-ticker-desc">Underinsured Motorist</div></div>
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$1,500,000</div><div class="pa-ticker-desc">Motorcycle Accident</div></div>
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$1,500,000</div><div class="pa-ticker-desc">Civil Rights</div></div>
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$1,100,000</div><div class="pa-ticker-desc">UM Claim</div></div>
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$1,000,000</div><div class="pa-ticker-desc">Dram Shop</div></div>
    <div class="pa-ticker-item"><div class="pa-ticker-amount">$1,000,000</div><div class="pa-ticker-desc">Police Chase</div></div>
  </div>
  <a class="pa-ticker-link" href="https://aguiarinjurylawyers.com/about-us/our-results/">More Results &rarr;</a>
</section>

CSS

:root{
  --sail-navy:#0B212D; --sail-navy-deep:#0a1520;
  --sail-orange:#D97706; --sail-orange-deep:#B45309;
  --sail-white:#fff; --sail-ink-light:#f7f9fa; --sail-mute:#5a6770;
  --sail-rule:rgba(11,33,45,.12); --card-border:#E5E9EC;
  --font-display:Georgia,'Times New Roman',serif; --font-ui:'Poppins',system-ui,sans-serif;
  --container:1180px;
}
/* ---------- Results ticker (block) ---------- */
.pa-results-ticker{position:relative;background-color:#0B212D;background-image:linear-gradient(rgba(11,33,45,.82),rgba(11,33,45,.9)),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;padding:56px 30px;text-align:center;overflow:hidden;}
.pa-ticker-title{font-size:30px;font-weight:700;color:#fff;margin-bottom:40px;}
.pa-ticker-wrap{position:relative;height:110px;margin-bottom:32px;overflow:hidden;}
.pa-ticker-item{position:absolute;top:0;left:0;right:0;text-align:center;opacity:0;animation:pa-ticker-fade 72s infinite;}
.pa-ticker-amount{font-size:48px;font-weight:700;color:var(--sail-orange);line-height:1.2;}
.pa-ticker-desc{font-size:18px;font-weight:600;color:#fff;margin-top:8px;}
.pa-ticker-item:nth-child(1){animation-delay:0s}.pa-ticker-item:nth-child(2){animation-delay:4s}.pa-ticker-item:nth-child(3){animation-delay:8s}.pa-ticker-item:nth-child(4){animation-delay:12s}.pa-ticker-item:nth-child(5){animation-delay:16s}.pa-ticker-item:nth-child(6){animation-delay:20s}.pa-ticker-item:nth-child(7){animation-delay:24s}.pa-ticker-item:nth-child(8){animation-delay:28s}.pa-ticker-item:nth-child(9){animation-delay:32s}.pa-ticker-item:nth-child(10){animation-delay:36s}.pa-ticker-item:nth-child(11){animation-delay:40s}.pa-ticker-item:nth-child(12){animation-delay:44s}.pa-ticker-item:nth-child(13){animation-delay:48s}.pa-ticker-item:nth-child(14){animation-delay:52s}.pa-ticker-item:nth-child(15){animation-delay:56s}.pa-ticker-item:nth-child(16){animation-delay:60s}.pa-ticker-item:nth-child(17){animation-delay:64s}.pa-ticker-item:nth-child(18){animation-delay:68s}
@keyframes pa-ticker-fade{0%{opacity:0;transform:translateY(12px)}.7%{opacity:1;transform:translateY(0)}4.456%{opacity:1;transform:translateY(0)}5.556%{opacity:0;transform:translateY(-12px)}100%{opacity:0}}
.pa-ticker-link{color:var(--sail-orange);font-size:16px;font-weight:700;text-decoration:none;}
.pa-ticker-link:hover{text-decoration:underline;color:#fff;}

/* 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;
}