Edit element

sa-bsg-banner

Name (slug) Version

Category Status

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

1. Always uses the registered-mark symbol: `Bigger Share Guarantee®` (rendered via `<sup>&reg;</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 URL Deployment notes HTML 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;}

Cancel