Edit element

sa-cva-media-band

Name (slug) Version

Category Status

Description When to use Source skill Rules (one per line, leading dash optional) Live reference URL Deployment notes HTML

<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">
    
    <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;}

Cancel