SA Element Registry
← Back to catalog
CTA / Footer Beta

sa-results-final-cta v2026-06-04

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.

Source skill: sa-results-final-cta · Updated 2026-06-15 12:32:42

Edit

Live preview

Open ↗

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).

Rules & constraints

Live reference

https://previews.aguiarinjurylawyers.com/our-results-enhanced

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&reg; 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&reg; 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}