Differentiators Live

sa-bsg-banner v2026-06-10

Full-bleed Visible Depth section emphasizing Bigger Share Guarantee(R) as standalone payoff moment. Foundry-orange BSG(R) heading and phone icon, white payoff line, single Call Now CTA with a 2px Foundry-orange border and regional tel: href.

Source skill: sa-bsg-banner · Updated 2026-06-15 12:32:40

Edit

Live preview

Open ↗

When to use

Once per page, between social-proof and next section.

Rules & constraints

1. Always uses the registered-mark symbol: `Bigger Share Guarantee®` (rendered via `<sup>®</sup>`). Never write "BSG" in user-facing copy on this banner.
2. Visible Depth gradient background: No flat `#0B212D`. No deprecated colors (`#003D54`, `#142130`, `rgba(11,33,45,0.85)`).
3. Heading + registered-mark in Foundry orange (#D97706); payoff line stays white.
4. No icons inside the banner body: The only icon is the inline phone-icon SVG in the CTA button.
5. No stock imagery: This is a flat-overlay treatment, not an image-background block.
6. Do not mention the 35% fee number here: Comparison context belongs in the fee calculators (`sa-fee-calc-interactive` / `sa-fee-calc-static`), not the banner.
7. One CTA button only: Copy reads `Call Now` — never `Call Sam Aguiar`, never `Talk to Sam Aguiar`, never `Free Consultation`, never the phone number as visible text. The phone goes in the `tel:` href only (`firm-briefing` §8).
8. Regional phone in the `tel:` href: - Louisville pages → `tel:5028888888`
9. Mobile centering: applies to the H2 per the sitewide rule.
10. No CTA sublabel: below the button. No "Phone:" / "Tel:" prefix anywhere.
11. Payoff line is exactly one short paragraph: Approved copy: `You always walk away with more than us. If your share is ever less, we cut our fee. No upfront costs. No fees unless we win.` Sam may approve a regional variant — confirm before deviating.
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/locations/lexington/

Deployment notes

Tel href must use the regional office number for the page. 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

<section class="sa-bsg-banner">
  <div class="sa-bsg-inner">
    <h2>Bigger Share Guarantee<sup>&reg;</sup></h2>
    <p class="sa-bsg-sub">You always walk away with more than us. If your share is ever less, we cut our fee. No upfront costs. No fees unless we win.</p>
    <a href="tel:5028888888" class="sa-bsg-cta">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.2c.27-.27.35-.67.24-1.02C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/></svg>
      Call Now
    </a>
  </div>
</section>

CSS

/* ============== sa-bsg-banner - standalone payoff banner ============== */
.sa-bsg-banner{
  background:linear-gradient(0deg, #000000 0%, #0B212D 100%);
  color:#fff;
  padding:56px 24px;
  text-align:center;
}
.sa-bsg-inner{
  max-width:880px;
  margin:0 auto;
}
.sa-bsg-banner h2{
  font-family:Poppins,sans-serif;
  font-weight:700;
  font-size:clamp(28px,4vw,40px);
  color:#D97706;
  text-align:center;
  margin:0 0 16px;
  letter-spacing:.5px;
}
.sa-bsg-banner h2 sup{
  font-size:0.5em;
  vertical-align:top;
  margin-left:2px;
  font-weight:500;
}
.sa-bsg-sub{
  font-family:Poppins,sans-serif;
  font-weight:400;
  font-size:clamp(16px,1.8vw,18px);
  line-height:1.55;
  color:#E6ECF1;
  text-align:center;
  margin:0 auto 28px;
  max-width:720px;
}
.sa-bsg-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  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 28px;
  border-radius:8px;
  border:2px solid #D97706;
  letter-spacing:.3px;
  transition:background-color .15s ease;
}
.sa-bsg-cta:hover{ background:#FFB04A; color:#0B212D; }
.sa-bsg-cta:hover svg{ fill:#0B212D; }
.sa-bsg-cta svg{
  width:18px;
  height:18px;
  fill:#D97706;
  flex-shrink:0;
}

@media (max-width:640px){
  .sa-bsg-banner{ padding:44px 16px; }
  .sa-bsg-banner h2{ text-align:center; }
  .sa-bsg-sub{ text-align:center; }
}

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