sa-pagebreak-bsg v2026-06-16b
Full-bleed Bigger Share Guarantee page-break banner. Dark Visible Depth gradient strip, Poppins, white centered ALL-CAPS headline with BSG registered mark, $0 Out-Of-Pocket Forever subline, approved on-dark depth CALL NOW pill with left phone icon. Sibling of you-focus-pagebreak (36). Scoped CSS.
Source skill: you-focus-pagebreak · Updated 2026-06-16 17:05:24
When to use
Mid-page break on practice-area, location, and post pages where the BSG UVP has not already been used. One UVP per page: do not pair with another BSG block.
Rules & constraints
- Scoped CSS only. Never add unscoped global selectors (h1/h2/h3 or site-wide button lists) to this element.
- Button is the approved sa-depth-button .on-dark spec: white fill, navy text, pill radius; hover flips to navy depth gradient with Foundry-orange text and border. Orange is never a resting fill here.
- CALL NOW with phone icon to the LEFT; label renders ALL CAPS via text-transform.
- Headline is an H2, ALL CAPS via scoped text-transform, centered. No eyebrow/kicker, no compound headers.
- Phone: tel:5028888888 (Louisville). Swap to tel:8598888000 on Lexington pages.
- Full-bleed dark Visible Depth strip; place between content blocks as a page break.
- 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.
- UVP casing standard: use exactly "$0 Out-Of-Pocket Forever" for this benefit label, including title case and hyphens.
Deployment notes
New 2026-06-10; Beta pending Sam approval. Promote to Live once approved. 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. 2026-06-15: Normalized the Out-Of-Pocket Forever UVP casing standard in the registry.
HTML
<section class="sa-pb-bsg" aria-label="With our Bigger Share Guarantee, you always get more.">
<div class="sa-pb-bsg__inner">
<div class="sa-pb-bsg__rule" aria-hidden="true"></div>
<h2 class="sa-pb-bsg__title">With our Bigger Share Guarantee®,<br>you always get more.</h2>
<p class="sa-pb-bsg__sub">$0 Out-Of-Pocket Forever. You only pay if we win.</p>
<a href="tel:5028888888" class="sa-pb-bsg__call" aria-label="Call now"><svg viewBox="0 0 24 24" width="19" height="19" fill="currentColor" aria-hidden="true"><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.3 0 .7-.2 1l-2.4 2.2z"/></svg><span>Call Now</span></a>
</div>
</section>CSS
.sa-pb-bsg{background:radial-gradient(ellipse 900px 420px at 50% 130%,rgba(217,119,6,0.22) 0%,rgba(180,83,9,0.08) 45%,transparent 70%),linear-gradient(0deg,#040A0E 0%,#0B212D 100%);color:#fff;text-align:center;padding:80px 24px;width:100%!important;max-width:none!important;margin:0!important;box-sizing:border-box;position:relative;overflow:hidden}
.sa-pb-bsg::before{content:'BSG';position:absolute;right:-2%;bottom:-12%;font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(160px,20vw,260px);line-height:1;color:rgba(217,119,6,0.06);pointer-events:none;user-select:none;letter-spacing:-4px}
.sa-pb-bsg *{box-sizing:border-box}
.sa-pb-bsg__inner{max-width:820px;margin:0 auto;position:relative;z-index:1}
.sa-pb-bsg__rule{width:56px;height:3px;background:linear-gradient(90deg,#B45309,#D97706,#B45309);margin:0 auto 22px;border-radius:2px}
.sa-pb-bsg__title{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(28px,3.4vw,40px);line-height:1.2;color:#fff!important;text-transform:uppercase;text-align:center;margin:0 auto 16px;max-width:820px;letter-spacing:.3px}
.sa-pb-bsg__sub{font-family:'Poppins',sans-serif;font-size:18px;font-weight:600;color:#D97706!important;text-align:center;margin:0 auto 32px;max-width:640px;letter-spacing:.2px}
.sa-pb-bsg__call{display:inline-flex;align-items:center;gap:10px;font-family:'Poppins',-apple-system,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:17px;line-height:1;text-transform:uppercase;letter-spacing:.4px;text-decoration:none;padding:16px 36px;border-radius:999px;cursor:pointer;background:#FFFFFF!important;color:#0B212D!important;border:2px solid #FFFFFF!important;box-shadow:0 6px 18px rgba(0,0,0,.22);transition:color .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.sa-pb-bsg__call svg{fill:currentColor}
.sa-pb-bsg__call:hover,.sa-pb-bsg__call:focus-visible{background:linear-gradient(0deg,#000000 0%,#0B212D 100%)!important;color:#D97706!important;border-color:#D97706!important;box-shadow:0 10px 26px rgba(11,33,45,.36);transform:translateY(-2px)}
@media (max-width:768px){.sa-pb-bsg{padding:60px 22px}.sa-pb-bsg__call{font-size:16px;padding:14px 30px}}