sa-cva-media-band v2026-06-16

'In The Media' dark band header plus a 3-up video card grid with placeholder play buttons and a More Videos link.

Source skill: sa-cva-media-band · Updated 2026-06-16 13:47:51

Edit

Live preview

Open ↗

When to use

Showcase press/media coverage as a dark band with a 3-up video grid.

Rules & constraints

Foundry orange `#D97706` is for text, borders (up to 4px), dividers, and icon strokes only -- never a background fill. The 4px top border and the H2 bottom-border use orange correctly.
No em dashes in body copy. Production copy should follow the firm's em-dash style guide.
Phone number lives in `tel:` href only. Button label is text, never the phone number itself.
Fonts: Poppins (UI) + Georgia/Times New Roman (display). The host page must load the Google Fonts link below.
Text always full opacity per sa-brand-decisions §3.
This is the VISUAL TRUTH SOURCE for SAIL Design Foundation v1 -- do not redesign or recolor.
**Google Fonts (host page must load):**
`https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap`
Video play affordances must use YouTube red (#FF0000 resting, #CC0000 hover) with a rounded-rectangle YouTube-style button, not a large orange circle.

Live reference

https://aguiarinjurylawyers.com/practice-areas/commercial-vehicle-accidents/

Deployment notes

Packaged from the commercial-vehicle-accidents page. Host page must load the Poppins Google Fonts link. VISUAL TRUTH SOURCE for SAIL Design Foundation v1 — do not redesign or recolor.

HTML

<!-- ==================== MEDIA BAND ==================== -->
<section class="sa-media-band">
  <div class="sa-media-band-inner">
    <h2>In The Media</h2>
    <p>Our attorneys are recognized voices for Kentucky crash victims, featured across local and national coverage.</p>
  </div>
</section>
<section class="sa-media-cards">
  <div class="sa-media-cards-inner">
    <!-- TODO(deploy): replace each .sa-media-video with a real YouTube iframe -->
    <div class="sa-media-card"><div class="sa-media-video"><span class="sa-media-play"></span></div><div class="sa-media-body"><h3>Video Title Placeholder</h3></div></div>
    <div class="sa-media-card"><div class="sa-media-video"><span class="sa-media-play"></span></div><div class="sa-media-body"><h3>Video Title Placeholder</h3></div></div>
    <div class="sa-media-card"><div class="sa-media-video"><span class="sa-media-play"></span></div><div class="sa-media-body"><h3>Video Title Placeholder</h3></div></div>
  </div>
  <div class="sa-media-seeall"><a href="https://aguiarinjurylawyers.com/resources/">More Videos &rarr;</a></div>
</section>

CSS

:root{
  --sail-navy:#0B212D; --sail-navy-deep:#0a1520;
  --sail-orange:#D97706; --sail-orange-deep:#B45309;
  --sail-white:#fff; --sail-ink-light:#f7f9fa; --sail-mute:#5a6770;
  --sail-rule:rgba(11,33,45,.12); --card-border:#E5E9EC;
  --font-display:Georgia,'Times New Roman',serif; --font-ui:'Poppins',system-ui,sans-serif;
  --container:1180px;
}
/* ---------- Media band (block) ---------- */
.sa-media-band{background:linear-gradient(180deg,#000 0%,var(--sail-navy) 100%);border-top:4px solid var(--sail-orange);padding:60px 24px 44px;color:#fff;text-align:center;}
.sa-media-band-inner{max-width:900px;margin:0 auto;}
.sa-media-band h2{font-size:34px;font-weight:700;margin:0 auto 14px;color:#fff;border-bottom:3px solid var(--sail-orange);display:inline-block;padding-bottom:6px;text-transform:uppercase;letter-spacing:.02em;}
.sa-media-band p{font-size:16px;color:#fff;margin:0 auto;line-height:1.6;max-width:680px;}
.sa-media-cards{background:var(--sail-ink-light);padding:44px 24px 50px;}
.sa-media-cards-inner{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.sa-media-card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(11,33,45,.08);}
.sa-media-video{position:relative;width:100%;aspect-ratio:16/9;background:var(--sail-navy);display:flex;align-items:center;justify-content:center;}
.sa-media-play{width:68px;height:48px;background:#FF0000;border-radius:14px;display:flex;align-items:center;justify-content:center;}
.sa-media-play::after{content:'';border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;margin-left:4px;}
.sa-media-video:hover .sa-media-play{background:#CC0000;}
.sa-media-body{padding:16px 18px;text-align:center;}
.sa-media-body h3{font-size:15px;font-weight:700;color:#5a6b75;margin:0;line-height:1.3;text-transform:uppercase;letter-spacing:.04em;}
.sa-media-seeall{text-align:center;max-width:var(--container);margin:28px auto 0;}
.sa-media-seeall a{color:var(--sail-navy);font-weight:700;font-size:15px;text-decoration:none;border-bottom:2px solid var(--sail-orange);padding-bottom:2px;}
@media(max-width:900px){.sa-media-cards-inner{grid-template-columns:1fr;}}

/* === ALL-CAPS + CENTERED (sa-copywriting §2, SCOPED 2026-06-10) === */
.sa-media-band h1,.sa-media-band h2,.sa-media-band h3{text-transform:uppercase !important;text-align:center !important;}
.sa-media-band .cva-btn,.sa-media-band .cva-btn--primary,.sa-media-band .cva-btn--ghost,.sa-media-band .sa-cta-banner-btn,.sa-media-band .sa-sidebar-btn,.sa-media-band .sa-side-btn,.sa-media-band .sa-submit-btn,.sa-media-band .sa-bsg-cta,.sa-media-band .sa-hero-cta,.sa-media-band .sa-partner-btn,.sa-media-band .sa-btn,.sa-media-band .sa-cta,.sa-media-band .sa-cta-btn,.sa-media-band .btn{text-transform:uppercase !important;text-align:center !important;}