sa-sigquote-band v2026-06-10
Signature founder-quote band. Full-width Visible Depth navy gradient with a centered Foundry-orange glow, a small top-left quotation mark, the first clause held on one line, the payoff broken beneath it, a short centered orange rule, and a lowercase '- sam aguiar' signature sized to match the quote. Ships with a white modifier (.sq-white) and a Poppins modifier (.sq-poppins).
Source skill: sa-signature-quote (refined 2026-06-09; lowercase founder signature, payoff on own line) · Updated 2026-06-10 14:30:59
When to use
A premium brand 'moment' band between content sections or above the footer. Dark by default; add class sq-white for a light-section context. Max 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.
Deployment notes
Drop-in block. Dark by default. Add 'sq-white' to .sq-band for the light version; add 'sq-poppins' to render in Poppins instead of Georgia/Times. First line uses white-space:nowrap so it stays one line on desktop; allow it to wrap on narrow mobile if needed. Run pre-publish-qa + playwright-visual-qa (1280/390) after deploy.
HTML
<div class="sq-band">
<blockquote><span class="sq-band__l1">Our job isn’t done until clients say,</span><em>‘Wow, that was an amazing experience.’</em></blockquote>
<div class="sq-band__rule"></div>
<div class="sq-band__by">- Sam Aguiar</div>
</div>CSS
.sq-band{--nv:#0B212D;--or:#D97706;--ord:#B45309;font-family:Georgia,'Times New Roman',serif;max-width:980px;margin:0 auto;background:linear-gradient(0deg,#000 0%,var(--nv) 100%);border-radius:28px;padding:60px 50px;text-align:center;position:relative;overflow:hidden;}
.sq-band.sq-poppins{font-family:'Poppins',system-ui,sans-serif;}
.sq-band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 32%,rgba(217,119,6,.22),transparent 58%);pointer-events:none;}
.sq-band__g{position:relative;font-size:74px;line-height:.5;color:var(--or);display:block;height:38px;margin-bottom:10px;text-align:center;}
.sq-band blockquote{position:relative;font-weight:500;font-size:clamp(20px,2.6vw,32px);line-height:1.3;letter-spacing:-.01em;color:#fff;border:0;margin:0;}
.sq-band__l1{display:block;white-space:nowrap;}
.sq-band em{font-style:italic;color:var(--or);}
.sq-band__rule{position:relative;width:54px;height:2px;background:var(--or);margin:24px auto 16px;}
.sq-band__by{position:relative;font-weight:500;font-size:clamp(20px,2.6vw,32px);line-height:1.1;color:#fff;}
.sq-band.sq-white{background:#fff;border:1px solid #e7eaed;}
.sq-band.sq-white::before{background:radial-gradient(circle at 50% 32%,rgba(217,119,6,.08),transparent 60%);}
.sq-band.sq-white blockquote,.sq-band.sq-white .sq-band__by{color:var(--nv);}
.sq-band.sq-white em{color:var(--ord);}