Social Proof Beta

sa-client-culture-video-band v2026-06-16

Client Culture / Community two-column video band. Dark Visible Depth left-copy band, smaller all-caps "Clients. Culture. Community." headline with Community in Foundry orange, concise supporting copy, and a right-side 16:9 video thumbnail with a YouTube-red play button.

Source skill: sa-design-elements; source screenshot from current Codex thread; added via registry screenshot intake 2026-06-15 · Updated 2026-06-16 13:56:45

Edit

Live preview

Open ↗

When to use

Use as a trust-building firm-culture video band on homepage, about, attorney, or high-intent practice pages where visitors need to see the people and values behind the case team. Best below the hero or after the first proof section, not as the final CTA.

Rules & constraints

1. Keep the headline text "Clients. Culture. Community." unless Sam approves a page-specific variant; Community should render in Foundry orange.
2. Left panel uses Visible Depth navy/black background with full-opacity white text.
3. No eyebrow/kicker or Louisville attribution in this element.
4. Video card is 16:9 with a dark thumbnail treatment and no text overlay.
5. Use a real YouTube or nocookie embed in production. Static thumbnail fallback must not show broken-image icons.
6. Mobile stacks copy above video with text still left-aligned unless the host page is fully centered.
Video play affordances must use YouTube red (#FF0000 resting, #CC0000 hover) with a rounded-rectangle YouTube-style button, not a large orange circle.

Deployment notes

Production needs the approved firm-culture video URL and thumbnail. If no final video exists, keep this row Beta and use the thumbnail-only preview. QA at 1280 desktop and 390 mobile before promoting to Live. 2026-06-16: removed eyebrow, removed Louisville attribution, shortened copy, made Community orange, removed video text overlays, and standardized the play affordance to YouTube red. 2026-06-16 follow-up: added mobile overflow guard after local Chrome screenshot QA showed the copy/thumbnail needed stricter viewport containment. 2026-06-16 follow-up: centered the culture-band heading to match sa-copywrite-design header alignment.

HTML

<section class="sa-culture-band" aria-labelledby="sa-culture-band-title">
  <div class="sa-culture-band__inner">
    <div class="sa-culture-band__copy">
      <h2 id="sa-culture-band-title">Clients. Culture. <span>Community.</span></h2>
      <p>Hear from our team about the way we do things for our clients and community.</p>
    </div>
    <a class="sa-culture-band__video" href="https://www.youtube.com/" aria-label="Play firm culture video">
      <span class="sa-culture-band__play" aria-hidden="true"></span>
    </a>
  </div>
</section>

CSS

.sa-culture-band{background:linear-gradient(0deg,#000 0%,#0B212D 100%);color:#fff;font-family:Poppins,system-ui,sans-serif;padding:52px 24px;overflow:hidden;}.sa-culture-band *{box-sizing:border-box;}
.sa-culture-band__inner{max-width:1180px;width:100%;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,520px);gap:56px;align-items:center;}
.sa-culture-band__copy{min-width:0;}
.sa-culture-band h2{font-size:clamp(28px,4vw,44px);line-height:1.05;font-weight:900;text-transform:uppercase;letter-spacing:0;text-align:center;color:#fff!important;margin:0 0 18px;max-width:520px;}.sa-culture-band h2 span{color:#D97706!important;}
.sa-culture-band__copy>p{font-size:16px;line-height:1.55;font-weight:600;color:#fff!important;max-width:610px;margin:0;}
.sa-culture-band__video{position:relative;display:block;width:100%;max-width:100%;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:linear-gradient(135deg,#222 0%,#59534d 55%,#0B212D 100%);box-shadow:0 16px 34px rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.10);text-decoration:none;color:#fff;}.sa-culture-band__video::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.08));}
.sa-culture-band__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:48px;border-radius:14px;background:#FF0000;box-shadow:0 8px 24px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;}.sa-culture-band__video:hover .sa-culture-band__play{background:#CC0000;}.sa-culture-band__play::after{content:"";display:block;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;margin-left:4px;}
@media(max-width:860px){.sa-culture-band__inner{grid-template-columns:minmax(0,1fr);gap:28px}.sa-culture-band{padding:44px 20px}.sa-culture-band h2{font-size:34px;max-width:100%;}.sa-culture-band__copy>p{max-width:100%;overflow-wrap:break-word}.sa-culture-band__video{width:100%;min-width:0}}