SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-signature-quote-georgia
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Signature brand-quote element set for Sam Aguiar Injury Lawyers, rendered entirely in Georgia / Times New Roman serif (no Fraunces). One packaged set of on-brand treatments of the firm's signature line spanning web section formats and ready-to-post social sizes. This revision reworks the V5 light social square and adds an M5 hairline variant. Includes V1 editorial pull-quote, V2 dark full-width band, V3 1:1 social card, V4 9:16 story, V5 light social square (reworked), V6 minimal hairline plus the M1-M5 hairline family, and V7/V8 trust-strip page-break bands.
When to use
When a page or social post needs a signature Sam Aguiar quote moment in the classic Georgia/Times serif treatment. Pick the variant by placement: web bands, sidebars, page-break strips, or social feed/story cards.
Source skill
Rules (one per line, leading dash optional)
- Attribution is always 'Sam Aguiar' / 'SAM AGUIAR' (the signature line). - Orange (#D97706 / #B45309) for glyphs, rules, and italic emphasis only — never as a text fill for the whole quote. - Dark variants use the Visible Depth navy-to-black gradient with a soft orange radial glow. - No Fraunces. No emoji. Full-opacity text. - Variants: V1 editorial pull-quote, V2 dark full-width band, V3 social 1:1, V4 social 9:16, V5 light social square, V6 minimal hairline + M-family, V7/V8 trust-strip page breaks.
Live reference URL
Deployment notes
All variant classes namespaced under .sa-quote-grid. Display font is Georgia,'Times New Roman',Times,serif; Poppins still loaded for UI chrome. Sister entry: sa-signature-quote-poppins. Pick one font treatment per deployment. This version adds the M5 hairline variant and a reworked V5.
HTML
<div class="sa-quote-grid"> <!-- V1 --> <section class="spec"> <div class="spec__bar"><h2>V1 · Editorial pull-quote</h2><span class="tag tag--web">Web · inline</span></div> <p class="spec__note">For About, story, and case-result pages. Drops into a content column between sections. Oversized orange quote glyph, Georgia / Times serif, signature attribution.</p> <div class="spec__stage"> <figure class="q1"> <span class="q1__glyph">“</span> <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote> <figcaption class="q1__by"><span class="q1__sig">- Sam Aguiar</span></figcaption> </figure> </div> </section> <!-- V2 --> <section class="spec"> <div class="spec__bar"><h2>V2 · Full-width dark section</h2><span class="tag tag--web">Web · section band</span></div> <p class="spec__note">Full-bleed band between page sections or above the footer. Visible Depth gradient with a centered radial orange glow. The firm's premium "moment" treatment.</p> <div class="spec__stage"> <figure class="q2"> <span class="q2__glyph">“</span> <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote> <div class="q2__rule"></div> <div class="q2__by">- SAM AGUIAR</div> </figure> </div> </section> <!-- V3 + V4 social row --> <section class="spec"> <div class="spec__bar"><h2>V3 · Square | V4 · Story</h2><span class="tag tag--social">Social · 1:1 + 9:16</span></div> <p class="spec__note">Ready-to-post sizes. V3 is the 1080×1080 feed card (Instagram, Facebook, LinkedIn). V4 is the 1080×1920 vertical for Stories and Reels covers. Same gradient and glow as the web band so feed and site feel like one system.</p> <div class="spec__stage" style="gap:34px;flex-wrap:wrap;"> <figure class="q3"> <span class="q3__glyph">“</span> <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote> <figcaption class="q3__by"><span class="bar"></span><span class="name">- SAM AGUIAR</span></figcaption> </figure> <figure class="q4"> <span class="q4__glyph">“</span> <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote> <div class="q4__rule"></div> <div class="q4__name">- SAM AGUIAR</div> </figure> </div> </section> <!-- V5 --> <section class="spec"> <div class="spec__bar"><h2>V5 · Light square</h2><span class="tag tag--social">Social · 1:1 light</span></div> <p class="spec__note">Light alternate for feeds that skew bright. Exterior quote top left at a modest size, left-aligned serif, payoff inline in orange italic, author line anchored at the bottom.</p> <div class="spec__stage"> <figure class="q5"> <span class="q5__glyph">“</span> <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote> <figcaption class="q5__by"><span class="bar"></span><span class="name">- SAM AGUIAR</span></figcaption> </figure> </div> </section> <!-- V6 --> <section class="spec"> <div class="spec__bar"><h2>V6 · Minimal hairline</h2><span class="tag tag--web">Web · sidebar / footer</span></div> <p class="spec__note">Low-footprint version for a sidebar, email signature block, or above the footer. Orange rule on the left, no background. Use when the page already has a heavy hero.</p> <div class="spec__stage" style="justify-content:flex-start;"> <figure class="q6"> <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote> <div class="q6__by">- SAM AGUIAR</div> </figure> </div> </section> <!-- V6 family --> <section class="spec"> <div class="spec__bar"><h2>More like V6 · minimal hairline family</h2><span class="tag tag--web">Web · inline / sidebar</span></div> <p class="spec__note">Restrained takes on the V6 look for inline body, a sidebar, or an email signature. M1 serif signature, M2 stacked hairlines centered, M3 inverted navy, M4 exterior quote top left, M5 rule plus exterior quote top left.</p> <div class="spec__stage" style="flex-direction:column;gap:36px;align-items:stretch;"> <figure class="m m1"> <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote> <div class="by">- Sam Aguiar</div> </figure> <figure class="m m2"> <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote> <div class="rule"></div> <div class="by">- SAM AGUIAR</div> </figure> <figure class="m m3"> <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote> <div class="by">- SAM AGUIAR</div> </figure> <figure class="m m4"> <span class="glyph">“</span> <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote> <div class="by">- SAM AGUIAR</div> </figure> <figure class="m m5"> <span class="glyph">“</span> <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote> <div class="by">- SAM AGUIAR</div> </figure> </div> </section> <!-- V7 + V8 --> <section class="spec"> <div class="spec__bar"><h2>V7 · Dark | V8 · Light</h2><span class="tag tag--web">Web · trust-strip page break</span></div> <p class="spec__note">Slim full-width band that sits between two content sections as a divider. Hairlines run out to both edges so the quote reads as a page break. Dark version (Visible Depth) for a strong beat; light version for a quiet one. Collapses to a centered stack on mobile.</p> <div class="spec__stage" style="flex-direction:column;gap:26px;"> <figure class="q7"> <span class="q7__line"></span> <div class="q7__mid"> <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote> <div class="q7__by">- SAM AGUIAR</div> </div> <span class="q7__line"></span> </figure> <figure class="q8"> <span class="q8__line"></span> <div class="q8__mid"> <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote> <div class="q8__by">- SAM AGUIAR</div> </div> <span class="q8__line"></span> </figure> </div> </section> </div>
CSS
:root{ --sail-navy:#0B212D; --sail-navy-deep:#0a1520; --sail-navy-mid:#0B212D; --sail-orange:#D97706; --sail-orange-deep:#B45309; --sail-white:#FFFFFF; --sail-ink-light:#f7f9fa; --sail-ink-soft:#fafafa; --font-display:Georgia,'Times New Roman',Times,serif; --font-ui:'Poppins',system-ui,sans-serif; --r-md:12px; --r-lg:14px; --r-xl:20px; --r-2xl:28px; --r-pill:999px; } .sa-quote-grid,.sa-quote-grid *{box-sizing:border-box;margin:0;padding:0;} body{font-family:var(--font-ui);background:#eceef0;color:var(--sail-navy);line-height:1.6;-webkit-font-smoothing:antialiased;} /* ---- page chrome ---- */ .page-head{max-width:1180px;margin:0 auto;padding:56px 32px 8px;} .page-head .kicker{font-family:var(--font-ui);font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--sail-orange-deep);} .page-head h1{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,4.4vw,50px);letter-spacing:-.01em;margin:10px 0 14px;} .page-head p{max-width:680px;font-weight:400;color:#3a4a55;font-size:16px;} .grid{max-width:1180px;margin:0 auto;padding:24px 32px 80px;display:grid;gap:40px;} .spec{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(11,33,45,.10);} .spec__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid #e7eaed;} .spec__bar h2{font-family:var(--font-ui);font-size:15px;font-weight:600;letter-spacing:-.01em;} .spec__bar .tag{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-pill);} .tag--web{background:rgba(11,33,45,.08);color:var(--sail-navy);} .tag--social{background:rgba(217,119,6,.16);color:var(--sail-orange-deep);} .spec__note{padding:12px 20px 0;font-size:13px;color:#5a6770;} .spec__stage{padding:28px;display:flex;justify-content:center;} /* ============ V1 - Web inline editorial pull-quote ============ */ .q1{max-width:820px;background:var(--sail-white);padding:8px 8px 8px 0;position:relative;} .q1__glyph{font-family:var(--font-display);font-weight:400;font-size:120px;line-height:.7;color:var(--sail-orange);height:64px;display:block;} .q1 blockquote{font-family:var(--font-display);font-weight:500;font-size:clamp(26px,3.4vw,40px);line-height:1.22;letter-spacing:-.01em;color:var(--sail-navy);margin:8px 0 22px;} .q1 blockquote em{font-style:italic;color:var(--sail-orange-deep);} .q1__by{display:flex;align-items:center;gap:14px;border-top:1px solid #e1e5e8;padding-top:18px;} .q1__sig{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:26px;color:var(--sail-navy);} /* ============ V2 - Web dark full-width section (Visible Depth + glow) ============ */ .q2{width:100%;max-width:980px;background:linear-gradient(0deg,#000 0%,var(--sail-navy) 100%);border-radius:var(--r-2xl);padding:64px 56px;text-align:center;position:relative;overflow:hidden;} .q2::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 32%,rgba(217,119,6,.22),transparent 58%);pointer-events:none;} .q2__glyph{position:relative;font-family:var(--font-display);font-weight:400;font-size:80px;line-height:.5;color:var(--sail-orange);display:block;height:40px;margin-bottom:12px;text-align:left;} .q2 blockquote{position:relative;font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3.8vw,46px);line-height:1.22;letter-spacing:-.01em;color:#fff;max-width:760px;margin:0 auto;} .q2 blockquote em{font-style:italic;color:var(--sail-orange);} .q2__rule{position:relative;width:54px;height:2px;background:var(--sail-orange);margin:30px auto 18px;} .q2__by{position:relative;font-family:var(--font-display);font-weight:500;font-size:18px;letter-spacing:.02em;color:#fff;} /* ============ V3 - Social square 1:1 ============ */ .q3{width:420px;height:420px;background:linear-gradient(0deg,#000 0%,var(--sail-navy) 100%);border-radius:var(--r-xl);padding:38px 36px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;} .q3::before{content:"";position:absolute;top:-40px;right:-40px;width:240px;height:240px;background:radial-gradient(circle,rgba(217,119,6,.30),transparent 62%);} .q3__glyph{position:relative;font-family:var(--font-display);font-size:80px;line-height:.6;color:var(--sail-orange);height:38px;} .q3 blockquote{position:relative;font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.28;letter-spacing:-.01em;color:#fff;} .q3 blockquote em{font-style:italic;color:var(--sail-orange);} .q3__by{position:relative;display:flex;align-items:center;gap:12px;margin-top:22px;} .q3__by .bar{width:30px;height:2px;background:var(--sail-orange);} .q3__by .name{font-weight:600;font-size:15px;color:#fff;} /* ============ V4 - Social story 9:16 ============ */ .q4{width:260px;height:462px;background:linear-gradient(0deg,#000 0%,var(--sail-navy) 100%);border-radius:var(--r-xl);padding:40px 30px;display:flex;flex-direction:column;justify-content:center;text-align:left;position:relative;overflow:hidden;} .q4::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(217,119,6,.22),transparent 60%);} .q4__glyph{position:relative;font-family:var(--font-display);font-weight:400;font-size:72px;line-height:.5;color:var(--sail-orange);display:block;height:36px;margin-bottom:8px;} .q4 blockquote{position:relative;font-family:var(--font-display);font-weight:500;font-size:25px;line-height:1.25;letter-spacing:-.01em;color:#fff;} .q4 blockquote em{font-style:italic;color:var(--sail-orange);} .q4__rule{position:relative;width:40px;height:2px;background:var(--sail-orange);margin:22px 0 14px;} .q4__name{position:relative;font-family:var(--font-display);font-weight:500;font-size:16px;color:#fff;} /* ============ V5 - Light social square, reimagined ============ */ .q5{width:420px;height:420px;background:var(--sail-ink-light);border-radius:var(--r-xl);padding:42px 40px;display:flex;flex-direction:column;position:relative;border:1px solid #e7eaed;} .q5__glyph{font-family:var(--font-display);font-weight:400;font-size:64px;line-height:.6;color:var(--sail-orange);height:32px;display:block;margin-bottom:16px;} .q5 blockquote{font-family:var(--font-display);font-weight:500;font-size:25px;line-height:1.3;letter-spacing:-.01em;color:var(--sail-navy);} .q5 blockquote em{font-style:italic;color:var(--sail-orange-deep);} .q5__by{margin-top:auto;display:flex;align-items:center;gap:12px;} .q5__by .bar{width:30px;height:2px;background:var(--sail-orange);} .q5__by .name{font-weight:600;font-size:16px;color:var(--sail-navy);} /* ============ V6 - Minimal hairline (sidebar / footer / inline) ============ */ .q6{max-width:760px;border-left:3px solid var(--sail-orange);padding:6px 0 6px 26px;} .q6 blockquote{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,2.4vw,26px);line-height:1.3;letter-spacing:-.01em;color:var(--sail-navy);} .q6 blockquote em{font-style:italic;color:var(--sail-orange-deep);} .q6__by{margin-top:14px;font-size:16px;font-weight:600;letter-spacing:.04em;color:var(--sail-navy);} /* ============ V6 family - minimal hairline variations ============ */ .m{max-width:760px;} .m blockquote{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,2.4vw,26px);line-height:1.3;letter-spacing:-.01em;color:var(--sail-navy);} .m blockquote em{font-style:italic;color:var(--sail-orange-deep);} /* M1 left rule + serif signature */ .m1{border-left:3px solid var(--sail-orange);padding:6px 0 6px 26px;} .m1 .by{margin-top:14px;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:21px;color:var(--sail-navy);} /* M2 stacked hairlines, centered */ .m2{text-align:center;border-top:1px solid #e1e5e8;border-bottom:1px solid #e1e5e8;padding:32px 12px;} .m2 .rule{width:46px;height:2px;background:var(--sail-orange);margin:18px auto 0;} .m2 .by{margin-top:16px;font-size:16px;font-weight:600;letter-spacing:.05em;color:var(--sail-navy);} /* M3 inverted navy minimal */ .m3{background:var(--sail-navy);border-left:3px solid var(--sail-orange);border-radius:0 var(--r-md) var(--r-md) 0;padding:26px 32px;} .m3 blockquote{color:#fff;} .m3 blockquote em{color:var(--sail-orange);} .m3 .by{margin-top:14px;font-size:16px;font-weight:600;letter-spacing:.05em;color:#fff;} /* M4 exterior quote top left, no rule */ .m4{padding:6px 0;} .m4 .glyph{font-family:var(--font-display);font-weight:400;font-size:56px;line-height:.5;color:var(--sail-orange);height:28px;display:block;margin-bottom:10px;} .m4 .by{margin-top:14px;font-size:16px;font-weight:600;letter-spacing:.05em;color:var(--sail-navy);} /* M5 left rule + exterior quote top left */ .m5{border-left:3px solid var(--sail-orange);padding:6px 0 6px 26px;} .m5 .glyph{font-family:var(--font-display);font-weight:400;font-size:56px;line-height:.5;color:var(--sail-orange);height:28px;display:block;margin-bottom:10px;} .m5 .by{margin-top:14px;font-size:16px;font-weight:600;letter-spacing:.05em;color:var(--sail-navy);} /* ============ V7 - Trust strip / page-break band, dark ============ */ .q7{width:100%;max-width:1100px;background:linear-gradient(0deg,#000 0%,var(--sail-navy) 100%);border-radius:var(--r-md);padding:30px 44px;display:flex;align-items:center;gap:26px;position:relative;overflow:hidden;} .q7::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(217,119,6,.16),transparent 60%);pointer-events:none;} .q7__line{position:relative;flex:1;height:1px;background:rgba(255,255,255,.18);} .q7__mid{position:relative;text-align:center;flex:0 1 auto;} .q7 blockquote{font-family:var(--font-display);font-weight:500;font-size:clamp(18px,2vw,25px);line-height:1.3;letter-spacing:-.01em;color:#fff;} .q7 blockquote em{font-style:italic;color:var(--sail-orange);} .q7__by{margin-top:9px;font-weight:600;font-size:15px;letter-spacing:.06em;color:#fff;} /* ============ V8 - Trust strip / page-break band, light ============ */ .q8{width:100%;max-width:1100px;background:var(--sail-ink-soft);border-top:1px solid #e7eaed;border-bottom:1px solid #e7eaed;padding:30px 44px;display:flex;align-items:center;gap:26px;} .q8__line{flex:1;height:1px;background:#e1e5e8;} .q8__mid{text-align:center;flex:0 1 auto;} .q8 blockquote{font-family:var(--font-display);font-weight:500;font-size:clamp(18px,2vw,25px);line-height:1.3;letter-spacing:-.01em;color:var(--sail-navy);} .q8 blockquote em{font-style:italic;color:var(--sail-orange-deep);} .q8__by{margin-top:9px;font-weight:600;font-size:15px;letter-spacing:.06em;color:var(--sail-navy);} @media(max-width:680px){ .q7__line,.q8__line{display:none;} .q7,.q8{flex-direction:column;gap:0;text-align:center;} } @media(max-width:520px){ .q3,.q5{width:100%;height:auto;aspect-ratio:1/1;} .q4{width:100%;max-width:300px;aspect-ratio:9/16;height:auto;margin:0 auto;} }
Save changes
Cancel