CTA / Footer Live

sa-cva-final-cta v2026-06-10

Final centered white CTA with a Georgia/Times New Roman headline (italic-orange em) and a single Call Now pill button (tel: href, text label).

Source skill: sa-cva-final-cta · Updated 2026-06-15 12:32:41

Edit

Live preview

Open ↗

When to use

The very last content section of a page; clean white centered call-to-action.

Rules & constraints

Foundry orange `#D97706` is for text, borders (up to 4px), dividers, and icon strokes only -- never a background fill. The final CTA button uses orange as a background on this block per the approved SAIL Design Foundation v1 visual-truth source; do not change it.
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 ("Call Now"), never the phone number itself.
One phone number per page. This is the sole dial CTA for the page bottom.
Fonts: Poppins (supporting paragraph) + Georgia/Times New Roman (H2). 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`
Duplicate UVP guard (2026-06-15): Use only one primary UVP/payoff block with this same message on a page or post. Do not pair this element with another Get More, You Focus, BSG always-get-more, sa-fcta-blk, generic white CTA, or sa-bottom-get-more-fw block that repeats the same primary message. During QA, keep the strongest single block and replace any other same-message break with a different visual element or a different UVP angle.

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. Duplicate UVP guard (2026-06-15): Use only one primary UVP/payoff block with this same message on a page or post. Do not pair this element with another Get More, You Focus, BSG always-get-more, sa-fcta-blk, generic white CTA, or sa-bottom-get-more-fw block that repeats the same primary message. During QA, keep the strongest single block and replace any other same-message break with a different visual element or a different UVP angle.

HTML

<!-- ==================== FINAL CTA ==================== -->
<section class="cva-final-cta">
  <div class="cva-final-cta__inner">
    <h2>Get More. Get It Faster.<br><em>Get It With Sam Aguiar.</em></h2>
    <p>$0 Out-Of-Pocket Forever. You only pay if we win, and with the Bigger Share Guarantee&reg; you always get more.</p>
    <a href="tel:+15029336545">
      <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" aria-hidden="true"><path d="M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.6c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .7-.2 1l-2.4 2.2z"/></svg>
      Call Now
    </a>
  </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;
}
/* ---------- Final white CTA (block) ---------- */
.cva-final-cta{background:#fff;text-align:center;padding:96px 24px;border-top:1px solid #e9eef0;}
.cva-final-cta__inner{max-width:680px;margin:0 auto;}
.cva-final-cta h2{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,4.6vw,52px);line-height:1.05;margin:0 0 16px;}
.cva-final-cta h2 em{font-style:italic;color:var(--sail-orange);}
.cva-final-cta p{font-size:18px;color:#3b4b54;margin:0 0 32px;}
.cva-final-cta a{display:inline-flex;align-items:center;gap:10px;background:#0B212D;color:#fff;font-weight:700;font-size:19px;text-decoration:none;padding:18px 40px;border-radius:999px;transition:background .2s,color .2s;}.cva-final-cta a:hover{background:linear-gradient(0deg,#000000 0%,#0B212D 100%);color:#D97706;}

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


/* === COMPLIANT BUTTON (no orange fill) === */
.cva-final-cta a{
  background:linear-gradient(0deg,#000000 0%,#0B212D 100%) !important;
  color:#FFFFFF !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 6px 18px rgba(11,33,45,.28);
  transition:color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cva-final-cta a:hover,
.cva-final-cta a:focus-visible{
  color:#D97706 !important;
  box-shadow:0 10px 26px rgba(11,33,45,.36);
  transform:translateY(-2px);
}
.cva-final-cta a svg{fill:currentColor;}