sa-sigquote-pagebreak v2026-06-10
Slim full-width signature-quote divider band. Thin lines run out to both edges so the quote reads as a page break. Foundry-orange lines by default; add .sq-blue for navy lines. Light surface, payoff on its own line, lowercase '- sam aguiar' sized to the quote. Add .sq-poppins for the sans version.
Source skill: sa-signature-quote (refined 2026-06-09; lowercase founder signature, payoff on own line) · Updated 2026-06-15 12:32:43
When to use
A divider between two content sections that doubles as a brand beat. Use on top trafficked pages, one per page.
Rules & constraints
- Tokens only: Foundry orange #D97706, Foundry Deep #B45309, Navy #0B212D. Orange is text/rule/glyph only, never a fill.
- Quote wording is fixed: Our job isn't done until clients leave saying, 'Wow, that was an amazing experience.' Do not paraphrase.
- The payoff phrase 'Wow, that was an amazing experience.' always breaks onto its own line.
- Author line is intentionally lowercase '- sam aguiar' (founder signature, NOT a Google reviewer, so the ALL-CAPS reviewer-name rule does not apply here).
- Author line is set to the same font-size as the quote.
- One font family per instance. Default shown; swap with the .sq-poppins or .sq-georgia modifier. Never mix two families in one element.
- 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.
Deployment notes
Drop-in block. Orange lines by default; add 'sq-blue' to .sq-break for navy lines; add 'sq-poppins' for Poppins. Lines hide and the layout stacks centered below 680px. Run pre-publish-qa + 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
<div class="sq-break">
<span class="sq-break__ln"></span>
<div class="sq-break__mid">
<blockquote>Our job isn’t done until clients say,<br><em>‘Wow, that was an amazing experience.’</em></blockquote>
<div class="sq-break__by">- Sam Aguiar</div>
</div>
<span class="sq-break__ln"></span>
</div>CSS
.sq-break{--nv:#0B212D;--or:#D97706;--ord:#B45309;font-family:Georgia,'Times New Roman',serif;max-width:1100px;margin:0 auto;background:#fafafa;border-top:1px solid #e7eaed;border-bottom:1px solid #e7eaed;padding:32px 44px;display:flex;align-items:center;gap:26px;}
.sq-break.sq-poppins{font-family:'Poppins',system-ui,sans-serif;}
.sq-break__ln{flex:1;height:2px;background:var(--or);}
.sq-break.sq-blue .sq-break__ln{background:var(--nv);}
.sq-break__mid{text-align:center;flex:0 1 auto;}
.sq-break blockquote{font-weight:500;font-size:clamp(18px,2vw,25px);line-height:1.3;letter-spacing:-.01em;color:var(--nv);border:0;margin:0;}
.sq-break em{font-style:italic;color:var(--ord);}
.sq-break__by{margin-top:12px;font-weight:500;font-size:clamp(18px,2vw,25px);line-height:1.1;color:var(--nv);}
@media(max-width:680px){.sq-break__ln{display:none;}.sq-break{flex-direction:column;gap:0;text-align:center;}}