Edit element

sa-cva-final-cta

Name (slug) Version

Category Status

Description When to use Source skill Rules (one per line, leading dash optional)

- 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 URL Deployment notes HTML 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;}

Cancel