SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-results-final-cta
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Centered final CTA section for aguiarinjurylawyers.com, in two approved background variants. Variant A: Visible Depth navy-to-black gradient with orange glow, white Georgia/Times New Roman headline (Get More. Get It Faster.) with an italic-orange emphasis line, a Bigger Share Guarantee subline, a Call Now Depth Button, and a prior-results disclaimer. Variant B: the same layout on a white full-width section. Both use the compliant Depth Button (no orange fill). Use as the bottom-of-page CTA on the Case Results page or any page wanting a centered statement CTA rather than the image-background split banner. Triggers on results final CTA, centered final CTA, sa-results-final-cta, Get More Get It Faster CTA, navy final CTA, white final CTA, or any centered two-variant closing CTA. Distinct from sa-cta-image-banner and sa-cva-final-cta; pick one closing CTA per page. Carries the prior-results disclaimer the Case Results page requires.
When to use
Bottom-of-page centered closing CTA (above footer) when a page wants a centered statement CTA rather than an image-background split banner. Two background variants: A (navy Visible Depth) and B (white full-width).
Source skill
Rules (one per line, leading dash optional)
- Headline 'Get More. Get It Faster.' + italic-orange 'Get It With Sam Aguiar.' - Button is the compliant Depth Button — NO orange fill (orange on hover only). - Must carry the prior-results disclaimer. - Phone in tel: href only; orange (#D97706) for text/emphasis only, never background. No emoji. 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
Ship ONE variant — delete the other and its variant-note comment before deploying. Button is the compliant Depth Button (sa-design-elements 3.21, registry id 52) — NO orange fill; navy variant uses .sa-depth-btn.on-dark. Carries the prior-results disclaimer. Distinct from sa-cta-image-banner and sa-cva-final-cta — pick one closing CTA per page. Run pre-publish-qa and playwright-visual-qa after deploy. 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
<!-- SA RESULTS FINAL CTA (centered, two variants) - START --> <!-- Ship ONE variant. Delete the other + its variant-note comment before deploying. --> <!-- Button is the compliant Depth Button (sa-design-elements 3.21) - NO orange fill. --> <!-- ===== Variant A: navy ===== --> <section class="sa-rcta is-navy"> <div class="sa-rcta-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® you always get more.</p> <a class="sa-depth-btn on-dark" href="tel:5028888888"><svg class="sa-depth-ico" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" fill="currentColor"><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> <p class="sa-rcta-disc">Prior results do not guarantee a similar outcome. Each case is different and must be evaluated on its own facts.</p> </div> </section> <!-- ===== Variant B: white full-width ===== --> <section class="sa-rcta is-white"> <div class="sa-rcta-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® you always get more.</p> <a class="sa-depth-btn" href="tel:5028888888"><svg class="sa-depth-ico" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" fill="currentColor"><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> <p class="sa-rcta-disc">Prior results do not guarantee a similar outcome. Each case is different and must be evaluated on its own facts.</p> </div> </section> <!-- SA RESULTS FINAL CTA - END -->
CSS
/* Shared layout */ .sa-rcta{position:relative;text-align:center;padding:96px 24px;overflow:hidden;font-family:'Poppins',system-ui,sans-serif} .sa-rcta .sa-rcta-inner{position:relative;z-index:1;max-width:680px;margin:0 auto} .sa-rcta h2{font-family:Georgia,'Times New Roman',serif;font-weight:500;font-size:clamp(30px,4.6vw,52px);line-height:1.05;margin:0 0 16px} .sa-rcta h2 em{font-style:italic;color:#D97706} .sa-rcta p{font-size:18px;margin:0 0 32px} .sa-rcta .sa-rcta-disc{margin:24px auto 0;font-size:12.5px;font-weight:400;max-width:560px;line-height:1.5} /* Variant A - navy Visible Depth */ .sa-rcta.is-navy{background:linear-gradient(0deg,#000 0%,#0B212D 100%);color:#fff} .sa-rcta.is-navy::after{content:"";position:absolute;inset:0;background:radial-gradient(50% 70% at 50% 50%,rgba(217,119,6,.16),transparent 70%);pointer-events:none} .sa-rcta.is-navy h2{color:#fff} .sa-rcta.is-navy p{font-weight:300;color:#fff} .sa-rcta.is-navy .sa-rcta-disc{color:#cbd5da} /* Variant B - white full-width */ .sa-rcta.is-white{background:#fff;color:#0B212D;border-top:1px solid #e9eef0} .sa-rcta.is-white h2{color:#0B212D} .sa-rcta.is-white p{font-weight:400;color:#3b4b54} .sa-rcta.is-white .sa-rcta-disc{color:#56666f} /* Depth Button (sa-design-elements 3.21, registry id 52) */ .sa-depth-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:16px 32px;border-radius:8px;font-family:Poppins,sans-serif;font-weight:600;font-size:16px;text-transform:uppercase;text-align:center;text-decoration:none;letter-spacing:.02em;cursor:pointer;background:linear-gradient(0deg,#000000 0%,#0B212D 100%);color:#FFFFFF !important;border:2px solid transparent;transition:color .2s ease,border-color .2s ease,background .2s ease} .sa-depth-btn:hover,.sa-depth-btn:focus-visible{color:#D97706 !important;border-color:#D97706} .sa-depth-btn.on-dark{background:#FFFFFF;color:#0B212D !important;border:2px solid #FFFFFF} .sa-depth-btn.on-dark:hover,.sa-depth-btn.on-dark:focus-visible{background:linear-gradient(0deg,#000000 0%,#0B212D 100%);color:#D97706 !important;border-color:#D97706} .sa-depth-btn .sa-depth-ico{flex-shrink:0}
Save changes
Cancel