Sidebar Live

sa-cva-sidebar-stack v2026-06-15c

Modular sidebar stack: navy CTA card, partner attorney headshot card with orange top border, and a checkmark trust list.

Source skill: sa-cva-sidebar-stack · Updated 2026-06-15 16:50:15

Edit

Live preview

Open ↗

When to use

Sidebar content for practice-area/location pages needing CTA + partner + trust list.

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 on `.sa-partner-inner` and 4px left border on `.sa-sidebar-trust` are approved structural border usages per SAIL v1 spec.
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 ("Call Now"), never the phone number itself.
Fonts: Poppins (UI) + Georgia/Times New Roman (not used in this block). 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`
2026-06-15c: Sidebar trust-list rows must use a fixed grid marker column; do not absolute-position .ck or li::before markers.

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. 2026-06-15c: Repaired sidebar trust-list marker overlap guardrails in the registry source.

HTML

<!-- ==================== SIDEBAR STACK ==================== -->
<aside class="sa-sidebar" role="complementary">
  <div class="sa-sidebar-cta">
    <h3>Free Case Review</h3>
    <p>Talk to our team 24/7. Most commercial vehicle cases can be qualified in under 10 minutes.</p>
    <!-- Firm main line 502-933-6545; swap a DNI tracking number on deploy if needed -->
    <a class="sa-sidebar-btn" href="tel:+15029336545"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>Call Now</a>
    <a class="sa-sidebar-btn" href="https://aguiarinjurylawyers.com/contact-us/">Start Online</a>
  </div>
  <div class="sa-partner-inner">
    <div class="sa-partner-headshot"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/sam-aguiar-headshot-current.webp" alt="Sam Aguiar, Founder"></div>
    <p class="sa-partner-name">Sam Aguiar</p>
    <p class="sa-partner-role">Founder</p>
    <p class="sa-partner-area">Serving Louisville, Lexington, and<br>all of Kentucky.</p>
  </div>
  <aside class="sa-sidebar-trust">
    <h4>Why Clients Choose<br>Sam Aguiar Injury Lawyers</h4>
    <ul>
      <li><span style="color:#D97706;font-weight:700;margin-right:8px;">&#10003;</span>Forbes Best-In-State Top Lawyer</li>
      <li><span style="color:#D97706;font-weight:700;margin-right:8px;">&#10003;</span>Super Lawyers 2017&ndash;2026</li>
      <li><span style="color:#D97706;font-weight:700;margin-right:8px;">&#10003;</span>Bigger Share Guarantee&reg;</li>
      <li><span style="color:#D97706;font-weight:700;margin-right:8px;">&#10003;</span>1,000+ Five-Star Reviews</li>
      <li><span style="color:#D97706;font-weight:700;margin-right:8px;">&#10003;</span>$0 Out-Of-Pocket Forever</li>
    </ul>
  </aside>
</aside>

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;
}
/* ---------- Sidebar stack (block) ---------- */
.sa-sidebar{display:flex;flex-direction:column;gap:20px;}
.sa-sidebar-cta{background:linear-gradient(0deg,#000 0%,var(--sail-navy) 100%);padding:28px 22px;border-radius:8px;text-align:center;}
.sa-sidebar-cta h3{font-weight:700;font-size:22px;line-height:1.25;color:var(--sail-orange);margin:0 0 6px;}
.sa-sidebar-cta p{font-weight:500;font-size:14px;line-height:1.45;color:#fff;margin:0 0 16px;}
.sa-sidebar-btn{display:block;width:100%;padding:12px 16px;border:1.5px solid #fff;border-radius:6px;background:transparent;color:#fff;font-weight:700;font-size:16px;text-align:center;text-decoration:none;transition:color .15s,border-color .15s;margin-bottom:10px;}
.sa-sidebar-btn:last-child{margin-bottom:0;}
.sa-sidebar-btn:hover{color:var(--sail-orange);border-color:var(--sail-orange);}
.sa-sidebar-btn svg{vertical-align:-3px;margin-right:8px;}
.sa-partner-inner{background:#fff;border-top:4px solid var(--sail-orange);box-shadow:0 4px 14px rgba(0,0,0,.06);border-radius:0 0 10px 10px;padding:28px 22px;text-align:center;}
.sa-partner-headshot{width:90px;height:90px;border-radius:50%;overflow:hidden;margin:0 auto 14px;border:3px solid var(--sail-orange);}
.sa-partner-headshot img{width:100%;height:100%;object-fit:cover;}
.sa-partner-name{font-size:18px;font-weight:700;margin:0 0 2px;}
.sa-partner-role{font-size:12px;font-weight:600;color:var(--sail-orange-deep);text-transform:uppercase;letter-spacing:.1em;margin:0 0 12px;}
.sa-partner-area{font-size:13px;font-weight:500;opacity:1;margin:0 0 16px;}
.sa-sidebar-trust{background:var(--sail-ink-light);border-left:4px solid var(--sail-orange);border-radius:0 8px 8px 0;padding:22px;}
.sa-sidebar-trust h4{font-weight:700;font-size:18px;line-height:1.3;margin:0 0 14px;text-align:center;text-transform:uppercase;letter-spacing:.02em;}
.sa-sidebar-trust ul{list-style:none;margin:0;padding:0;}
.sa-sidebar-trust li{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:10px;align-items:start;font-weight:500;font-size:15px;line-height:1.4;padding:10px 0;border-bottom:1px solid rgba(11,33,45,.08);}
.sa-sidebar-trust li:last-child{border-bottom:0;}
.sa-sidebar-trust li::before{position:static;color:var(--sail-orange);font-weight:700;line-height:1.4;}

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