Differentiators Live

sa-quick-easy v2026-06-10

Full-bleed 'Quick & Easy to Get Started' stat block. Two-up dark cards on the Visible Depth gradient showing how few rings and minutes it takes to engage the firm. No icons, no animation, no counter script. Numbers are orange, all text is full-opacity white.

Source skill: sa-template-reference · Updated 2026-06-15 13:12:01

Edit

Live preview

Open ↗

When to use

Homepage and high-traffic landing pages where a fast, low-friction proof point belongs above the BSG/UVP block. One per page. Pair with the sidebar Mini 2-up variant only on different pages.

Rules & constraints

1. Two-up grid only. No 3-up, no single-card.
2. Visible Depth gradient background (#000000 -> #0B212D). No flat navy.
3. Numbers are #F89C22 orange. All text is solid #FFFFFF. NO rgba on text, NO opacity property, NO filter:opacity (per sa-brand-decisions v1.1).
4. Card bg rgba(255,255,255,0.04) and border rgba(248,156,34,0.25) are allowed - rule covers text only.
5. Locked copy: '3 Rings - Average to reach a live person' / '10 Minutes - Average to qualify your case.' Do not invent new pairs.
6. Sizing: H2 clamp(28,3.2vw,41), Number clamp(34,3.8vw,48), Unit clamp(22,2.1vw,26), Descriptor clamp(16,1.7vw,20).
7. Mobile (<=600px): 1-col stack.
8. No icons. No counter animation. No SVGs.

Live reference

https://aguiarinjurylawyers.com/

Deployment notes

Lives inside a WordPress HTML block. WP Rocket strips raw <style> blocks - use inline styles with !important for everything except the @media rule (which gets its own <style> tag). Replaced the prior Easy & Fast block on the homepage 2026-05-28.

HTML

<div id="sa-proof-wrap" style="background:linear-gradient(0deg,#000000 0%,#0B212D 100%) !important;padding:48px 4% 56px !important;font-family:'Poppins',sans-serif !important;overflow:hidden !important;">
  <div id="sa-proof-inner" style="max-width:840px !important;margin:0 auto !important;text-align:center !important;">

    <h2 style="font-family:'Poppins',sans-serif !important;font-size:clamp(28px,3.2vw,41px) !important;font-weight:600 !important;color:#FFFFFF !important;margin:0 0 32px !important;line-height:1.2 !important;text-align:center !important;">Quick &amp; Easy to Get Started</h2>

    <div id="sa-quick-cards" style="display:grid !important;grid-template-columns:1fr 1fr !important;gap:20px !important;">

      <div style="background:rgba(255,255,255,0.04) !important;border:1px solid rgba(248,156,34,0.25) !important;border-radius:12px !important;padding:32px 20px 28px !important;text-align:center !important;">
        <div style="font-family:'Poppins',sans-serif !important;font-size:clamp(34px,3.8vw,48px) !important;font-weight:700 !important;color:#D97706 !important;line-height:1 !important;margin:0 0 10px !important;">3</div>
        <div style="font-family:'Poppins',sans-serif !important;font-size:clamp(22px,2.1vw,26px) !important;font-weight:700 !important;color:#FFFFFF !important;text-transform:uppercase !important;letter-spacing:1px !important;line-height:1.1 !important;margin:0 0 12px !important;">Rings</div>
        <div style="font-family:'Poppins',sans-serif !important;font-size:clamp(16px,1.7vw,20px) !important;font-weight:500 !important;color:#FFFFFF !important;line-height:1.4 !important;margin:0 !important;">Average to reach a live person</div>
      </div>

      <div style="background:rgba(255,255,255,0.04) !important;border:1px solid rgba(248,156,34,0.25) !important;border-radius:12px !important;padding:32px 20px 28px !important;text-align:center !important;">
        <div style="font-family:'Poppins',sans-serif !important;font-size:clamp(34px,3.8vw,48px) !important;font-weight:700 !important;color:#D97706 !important;line-height:1 !important;margin:0 0 10px !important;">10</div>
        <div style="font-family:'Poppins',sans-serif !important;font-size:clamp(22px,2.1vw,26px) !important;font-weight:700 !important;color:#FFFFFF !important;text-transform:uppercase !important;letter-spacing:1px !important;line-height:1.1 !important;margin:0 0 12px !important;">Minutes</div>
        <div style="font-family:'Poppins',sans-serif !important;font-size:clamp(16px,1.7vw,20px) !important;font-weight:500 !important;color:#FFFFFF !important;line-height:1.4 !important;margin:0 !important;">Average to qualify your case</div>
      </div>

    </div>
  </div>
</div>

<style>
@media (max-width: 600px) {
  #sa-quick-cards { grid-template-columns: 1fr !important; gap: 16px !important; }
  #sa-proof-wrap { padding: 40px 4% 44px !important; }
}
</style>

CSS

/* All styles are inline on the elements above. Only the @media rule lives in a <style> tag. */
@media (max-width: 600px) {
  #sa-quick-cards { grid-template-columns: 1fr !important; gap: 16px !important; }
  #sa-proof-wrap { padding: 40px 4% 44px !important; }
}

/* === ALL-CAPS + CENTERED (sa-copywriting §2, SCOPED 2026-06-10) === */
#sa-proof-wrap h1,#sa-proof-wrap h2,#sa-proof-wrap h3{text-transform:uppercase !important;text-align:center !important;}
#sa-proof-wrap .cva-btn,#sa-proof-wrap .cva-btn--primary,#sa-proof-wrap .cva-btn--ghost,#sa-proof-wrap .sa-cta-banner-btn,#sa-proof-wrap .sa-sidebar-btn,#sa-proof-wrap .sa-side-btn,#sa-proof-wrap .sa-submit-btn,#sa-proof-wrap .sa-bsg-cta,#sa-proof-wrap .sa-hero-cta,#sa-proof-wrap .sa-partner-btn,#sa-proof-wrap .sa-btn,#sa-proof-wrap .sa-cta,#sa-proof-wrap .sa-cta-btn,#sa-proof-wrap .btn{text-transform:uppercase !important;text-align:center !important;}