sa-claim-number-statement-set v2026-06-15-image-corrected
Claim Number Statement mockup set corrected to use the actual website-library boardroom/silhouette assets from Sam's screenshot, not substitute truck/headshot images. Preserves the visible variants: Corporate Reps - Right-Aligned Dark Panel, Boardroom Symmetry - Cinematic Centered, and Silhouette Standoff - Bottom Band.
Source skill: registry-screenshot-intake; corrected from session 019eccb8-f1a6-7c73-ba9f-5a6ff337bf32. Website media library URLs: Boardroom.webp and Boardroom-2.webp. Local copies: C:\Users\SAguiar\Downloads\Website Image Library\Boardroom.webp and C:\Users\SAguiar\Downloads\Website Image Library\Boardroom-2.webp. · Updated 2026-06-16 02:03:20
When to use
Use as a mid-page adversary/trust statement where the page needs to contrast insurance-company treatment with the firm's client-first position. These are image-background statement cards, not truck heroes, attorney cards, or generic CTA assets.
Rules & constraints
- 1. Do not substitute unrelated images. This element uses the website-library boardroom/silhouette assets that match Sam's screenshot.
- 2. Corporate Reps uses Boardroom.webp. Boardroom Symmetry and Silhouette Standoff use Boardroom-2.webp with different overlay/crop treatments.
- 3. Copy is locked: "To insurance companies, you're just a claim number. To us, you're a future success story."
- 4. In these screenshot variants, both "a claim number" and "future success story" are highlighted in Foundry orange #D97706.
- 5. Keep overlays dark enough for white Poppins text to read clearly.
- 6. Keep orange as text/accent only. No orange background fill.
- 7. Keep the variant labels in the registry row so future agents can map screenshots to the exact design option.
Deployment notes
Corrected 2026-06-15 after Sam flagged the prior row for using agent-selected substitute images. The row now uses only Boardroom.webp and Boardroom-2.webp from the WordPress media library, with local copies saved under Downloads\Website Image Library. Verified through Playwright request API; browser screenshot pass attempted separately because Render detail navigation was slow.
HTML
<section class="sa-cn-mockups" aria-label="Claim number statement mockups">
<article class="sa-cn-option">
<p class="sa-cn-option__kind">Image Background</p>
<h3>Corporate Reps - Right-Aligned Dark Panel</h3>
<p class="sa-cn-option__note">Silhouetted reps against bright windows; centered statement.</p>
<div class="sa-cn-card sa-cn-card--corporate">
<p>To insurance companies, you're<br>just <strong>a claim number</strong>.</p>
<p>To us, you're a<br><strong>future success story</strong></p>
</div>
</article>
<article class="sa-cn-option">
<p class="sa-cn-option__kind">Image Background</p>
<h3>Boardroom Symmetry - Cinematic Centered</h3>
<p class="sa-cn-option__note">Symmetrical silhouettes facing a lone figure; centered statement.</p>
<div class="sa-cn-card sa-cn-card--symmetry">
<p>To insurance companies, you're<br>just <strong>a claim number</strong>.</p>
<p>To us, you're a<br><strong>future success story</strong></p>
</div>
</article>
<article class="sa-cn-option">
<p class="sa-cn-option__kind">Image Background</p>
<h3>Silhouette Standoff - Bottom Band</h3>
<p class="sa-cn-option__note">High-contrast B/W standoff; centered statement, uniform overlay.</p>
<div class="sa-cn-card sa-cn-card--standoff">
<p>To insurance companies, you're<br>just <strong>a claim number</strong></p>
<p>To us, you're a<br><strong>future success story</strong></p>
</div>
</article>
</section>CSS
.sa-cn-mockups{display:grid;gap:28px;font-family:Poppins,system-ui,sans-serif;color:#0B212D;background:#eef3f6;padding:24px;}.sa-cn-option{margin:0;}.sa-cn-option__kind{margin:0 0 4px;color:#D97706!important;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.14em;}.sa-cn-option h3{margin:0;color:#0B212D!important;font-size:14px;line-height:1.2;font-weight:900;}.sa-cn-option__note{margin:3px 0 10px;color:#344955!important;font-size:11px;font-weight:600;}.sa-cn-card{position:relative;min-height:260px;border-radius:7px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:36px 24px;background-size:cover;background-position:center;box-shadow:0 12px 26px rgba(11,33,45,.22);}.sa-cn-card p{margin:0;color:#fff!important;font-size:clamp(18px,3vw,30px);line-height:1.22;font-weight:900;text-transform:uppercase;letter-spacing:.01em;text-shadow:0 2px 12px rgba(0,0,0,.68);}.sa-cn-card p+p{margin-top:18px;}.sa-cn-card strong{color:#D97706!important;font-weight:900;}.sa-cn-card--corporate{background-image:linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,.64)),url('https://aguiarinjurylawyers.com/wp-content/uploads/2026/02/Boardroom.webp');background-position:center center;}.sa-cn-card--symmetry{background-image:linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,.72)),url('https://aguiarinjurylawyers.com/wp-content/uploads/2026/02/Boardroom-2.webp');background-position:center center;}.sa-cn-card--standoff{background-image:linear-gradient(rgba(0,0,0,.52),rgba(0,0,0,.82)),url('https://aguiarinjurylawyers.com/wp-content/uploads/2026/02/Boardroom-2.webp');background-position:center 54%;filter:grayscale(1);}@media(max-width:640px){.sa-cn-mockups{padding:18px}.sa-cn-card{min-height:210px;padding:28px 18px}.sa-cn-card p{font-size:clamp(16px,5vw,22px)}}