CTA / Footer Live

sa-cta-image-banner v2026-06-10

Full-bleed bottom-of-page CTA banner. Two approved variants: split image-left/copy-right (preferred default on desktop and mobile) and image-background with dark overlay (alternate).

Source skill: sa-cta-image-banner · Updated 2026-06-10 16:47:52

Edit

Live preview

Open ↗

When to use

Bottom of every content page as the final CTA moment.

Rules & constraints

1. Split image-left / copy-right (preferred) or image-background + dark overlay (alternate).
2. Real firm-owned imagery only — no stock.
3. Single CTA button — 'Call Now', regional tel: href only.
4. Always last main-column block before the footer.
5. Button MUST be the registry depth button sa-depth-btn (#52), .on-dark variant on dark bands. The legacy .sa-cta-btn (white/orange-outline pill) is banned; pre-publish-qa fails on class="sa-cta-btn".

Live reference

https://aguiarinjurylawyers.com/

Deployment notes

Copy verbatim. Replace bracketed placeholders. Run pre-publish-qa, playwright-visual-qa (desktop 1280 / mobile 390), sa-content-rot-detector, and sa-css-leak-guard after deploy. Log via content-publish-logger and notify search engines via batch-indexnow. See the source skill for full rules.

HTML

<!-- Split image-left / copy-right CTA banner (preferred variant) -->
<section class="sa-cta-image-banner">
  <div class="sa-cta-banner-inner">
    <div class="sa-cta-banner-img"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/office-building.webp" alt="Sam Aguiar Injury Lawyers team" loading="lazy"></div>
    <div class="sa-cta-banner-copy">
      <h2>Ready When You Are</h2>
      <p>No upfront costs. No fees unless we win. Your share is always bigger than ours.</p>
      <a href="tel:5028888888" class="sa-cta-banner-btn">Call Now</a>
    </div>
  </div>
</section>

CSS

.sa-cta-image-banner{background:#0B212D;color:#fff;overflow:hidden}
.sa-cta-banner-inner{display:grid;grid-template-columns:1fr 1fr;max-width:1400px;margin:0 auto;min-height:380px}
.sa-cta-banner-img{position:relative}
.sa-cta-banner-img img{width:100%;height:100%;object-fit:cover;display:block}
.sa-cta-banner-copy{padding:56px 48px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.sa-cta-banner-copy h2{font-family:Poppins,sans-serif;font-weight:700;font-size:clamp(28px,3.6vw,40px);color:#fff;margin:0 0 16px}
.sa-cta-banner-copy p{font-family:Poppins,sans-serif;font-size:17px;line-height:1.55;color:#E6ECF1;margin:0 0 28px;max-width:480px}
.sa-cta-banner-btn{display:inline-block;background:linear-gradient(0deg, #000000 0%, #0B212D 100%);color:#fff;font-family:Poppins,sans-serif;font-weight:700;font-size:17px;text-decoration:none;padding:14px 32px;border-radius:8px;letter-spacing:.3px}
.sa-cta-banner-btn:hover{background:#FFB04A}
@media(max-width:768px){.sa-cta-banner-inner{grid-template-columns:1fr}.sa-cta-banner-img{min-height:240px}.sa-cta-banner-copy{padding:40px 24px;align-items:center;text-align:center}}

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