sa-cva-evidence-checklist v2026-06-10
2-up evidence checklist cards with circular check badges, orange left border, and a centered, larger, Title-Cased orange meta subheader per card.
Source skill: sa-cva-evidence-checklist · Updated 2026-06-10 16:47:55
When to use
Show a checklist of evidence types or features in a 2-column card grid.
Rules & constraints
- Foundry orange `#D97706` is for text, borders (up to 4px), dividers, and icon strokes only -- never a background fill. The 3px left border and check badge background (`#FFF4E5`) with orange icon follow this rule correctly.
- No em dashes in body copy. This snippet uses `—` HTML entities as the visual truth source; 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 (section title 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`
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.
HTML
<!-- ==================== EVIDENCE CHECKLIST ==================== -->
<section class="sa-feature-section sa-feature-white">
<div class="sa-feature-inner">
<h2 class="sa-feature-title">Evidence Preservation Checklist</h2>
<p class="sa-feature-lede">Commercial crashes generate evidence that a company can lawfully overwrite or recycle on a schedule. The sooner a spoliation letter goes out, the more of it survives.</p>
<div class="sa-evidence-grid">
<div class="sa-evidence-card"><div class="sa-evidence-check">✓</div><div><h3>Driver Logs & Hours of Service</h3><p class="sa-evidence-meta"><a href="https://www.fmcsa.dot.gov/regulations/hours-of-service" target="_blank" rel="noopener">FMCSA</a> · ELD Records</p><p>Electronic logging data showing how long the driver had been on duty and whether the carrier pushed past federal limits.</p></div></div>
<div class="sa-evidence-card"><div class="sa-evidence-check">✓</div><div><h3>Vehicle Black-Box (ECM/EDR) Data</h3><p class="sa-evidence-meta">Preserve Before Repair</p><p>Speed, braking, and throttle in the seconds before impact, pulled before the vehicle is fixed, sold, or scrapped.</p></div></div>
<div class="sa-evidence-card"><div class="sa-evidence-check">✓</div><div><h3>Maintenance & Inspection Records</h3><p class="sa-evidence-meta">Carrier Files</p><p>Brake, tire, and repair history that shows whether the company kept the vehicle road-safe or deferred known problems.</p></div></div>
<div class="sa-evidence-card"><div class="sa-evidence-check">✓</div><div><h3>Employment & Hiring File</h3><p class="sa-evidence-meta">Scope-Of-Employment Proof</p><p>Driver qualification, training, prior violations, and the records that tie the company to the crash.</p></div></div>
<div class="sa-evidence-card"><div class="sa-evidence-check">✓</div><div><h3>Dashcam & Telematics</h3><p class="sa-evidence-meta">Spoliation Letter Required</p><p>In-cab and fleet camera footage plus GPS telematics, subpoenaed before the retention window closes.</p></div></div>
<div class="sa-evidence-card"><div class="sa-evidence-check">✓</div><div><h3>Full Insurance Disclosures</h3><p class="sa-evidence-meta">Primary, Excess & Umbrella</p><p>Disclosure of the commercial primary, excess, and umbrella layers, not only the policy the adjuster volunteers.</p></div></div>
</div>
</div>
</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;
}
/* ---------- Feature / evidence checklist (block) ---------- */
.sa-feature-section{background:var(--sail-ink-light);padding:64px 24px;}
.sa-feature-section.sa-feature-white{background:#fff;}
.sa-feature-inner{max-width:var(--container);margin:0 auto;}
.sa-feature-title{text-align:center;font-family:var(--font-display);font-weight:600;font-size:clamp(28px,3.4vw,38px);margin:0 0 8px;line-height:1.15;}
.sa-feature-lede{text-align:center;max-width:820px;margin:0 auto 36px;font-size:17px;line-height:1.6;}
.sa-evidence-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.sa-evidence-card{background:#fff;border-left:3px solid var(--sail-orange);border-radius:4px;padding:18px 22px;display:grid;grid-template-columns:36px 1fr;gap:16px;align-items:start;box-shadow:0 1px 2px rgba(11,33,45,.06);}
.sa-evidence-check{width:34px;height:34px;border-radius:50%;background:#FFF4E5;color:var(--sail-orange);font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;}
.sa-evidence-card h3{margin:0 0 4px;font-size:17px;font-weight:700;}
.sa-evidence-card p{font-size:14px;margin:0;line-height:1.5;}
.sa-evidence-card p.sa-evidence-meta{color:var(--sail-orange-deep);font-weight:700;font-size:15px;text-align:center;letter-spacing:.02em;margin:0 0 8px;}
@media(max-width:900px){.sa-evidence-grid{grid-template-columns:1fr;}}
/* === ALL-CAPS + CENTERED (sa-copywriting §2, SCOPED 2026-06-10) === */
.sa-feature-section h1,.sa-feature-section h2,.sa-feature-section h3{text-transform:uppercase !important;text-align:center !important;}
.sa-feature-section .cva-btn,.sa-feature-section .cva-btn--primary,.sa-feature-section .cva-btn--ghost,.sa-feature-section .sa-cta-banner-btn,.sa-feature-section .sa-sidebar-btn,.sa-feature-section .sa-side-btn,.sa-feature-section .sa-submit-btn,.sa-feature-section .sa-bsg-cta,.sa-feature-section .sa-hero-cta,.sa-feature-section .sa-partner-btn,.sa-feature-section .sa-btn,.sa-feature-section .sa-cta,.sa-feature-section .sa-cta-btn,.sa-feature-section .btn{text-transform:uppercase !important;text-align:center !important;}