Edit element

Sidebar Option B — Long (CTA → Form → Trust)

Name (slug) Version

Category Status

Description When to use Source skill Rules (one per line, leading dash optional)

All sidebar cards are white (#fff, 1px rgba(11,33,45,.12) border, 8px radius). Trust card uses a 4px Foundry #D97706 left border (radius 0 8px 8px 0). The only dark gradient left in the sidebar is the form Submit button. Orange is ONLY Foundry #D97706 — legacy #F89C22 is banned. CTA headline (frozen): 'Focus On Healing.' / 'We'll Handle The Rest.' Subline: 'Get Back To Living Your Best Life'. Button text 'CALL NOW' (phone in tel: href only). Form submit 'GET STARTED'. Trust item 3 reads 'Average Settlement Timeline Under 7 Months'. Checkmarks are &#10003; entities. Two font variants ship in the same skill: Poppins (default, 22px CTA headline) and Georgia/Times serif (19px CTA headline) — serif is the approved exception to sa-copywriting §12 no-serif rule for this component family only.
Second-line CTA span (.cta-l2) must keep an explicit color:#0B212D !important so it stays navy even on legacy pages that still ship the deprecated .sa-sidebar-cta *{color:#fff !important} rule (white-on-white guard, 2026-06-09).
Hardened 2026-06-10: CTA card h3/p/a colors carry !important so the deprecated sitewide '.sa-sidebar-cta * {color:#fff !important}' page-id rule cannot blank them (white-on-white guard extended from .cta-l2 to the full CTA card after a live incident on page 61371). When deploying inside a page grid, add '.sa-content-grid aside.sa-sidebar{position:sticky;top:24px;align-self:start;}' so the rail stays present on long pages.
Card background armor (2026-06-10): the sitewide normalization CSS forces .sa-sidebar-cta to a dark gradient with !important. The element now pins background:#fff !important at chained-class specificity (.sa-sidebar.sa-sidebar-optb-poppins .sa-sidebar-cta), which outranks it. Do not remove the ARMOR block; without it the CTA card renders dark and the navy text disappears.
Hardened 2026-06-15: suppress legacy sitewide CALL NOW ::before/::after pseudo content for .sa-sidebar-optb-poppins because the approved CTA already carries its own inline phone SVG and CALL NOW text. This prevents duplicate phone icons on page-id scoped legacy CSS.
2026-06-15c: Sidebar trust-list rows must use a fixed grid marker column; the .ck span must remain static/inline-flex, never absolute-positioned.

Live reference URL Deployment notes HTML

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap');
.sa-sidebar-optb-poppins *{box-sizing:border-box;font-family:Poppins, sans-serif;}
.sa-sidebar-optb-poppins{display:flex;flex-direction:column;gap:20px;}

/* CTA card (white, navy text) */
.sa-sidebar-optb-poppins .sa-sidebar-cta{background:#fff;border:1px solid rgba(11,33,45,.12);border-radius:8px;padding:28px 22px;text-align:center;}
.sa-sidebar-optb-poppins .sa-sidebar-cta h3{font-weight:700;font-size:22px;letter-spacing:normal;line-height:1.25;color:#0B212D !important;margin:0 0 12px;text-align:center;text-transform:uppercase;}
.sa-sidebar-optb-poppins .sa-sidebar-cta h3 .cta-l2{display:block;color:#0B212D !important;}
.sa-sidebar-optb-poppins .sa-sidebar-cta p{font-weight:600;font-size:16px;line-height:1.5;color:#0B212D !important;margin:0 0 18px;text-align:center;}
.sa-sidebar-optb-poppins .sa-sidebar-cta a{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;background:transparent;color:#0B212D !important;font-size:18px;font-weight:700;padding:11px 16px;border-radius:6px;text-decoration:none;border:1.5px solid #0B212D;}

/* Trust card (white, orange left border) */
.sa-sidebar-optb-poppins .sa-sidebar-trust{background:#fff;border:1px solid rgba(11,33,45,.12);border-left:4px solid #D97706;border-radius:0 8px 8px 0;padding:22px;}
.sa-sidebar-optb-poppins .sa-sidebar-trust h4{font-weight:700;font-size:18px;line-height:1.3;color:#0B212D;margin:0 0 14px;text-align:center;text-transform:uppercase;}
.sa-sidebar-optb-poppins .sa-sidebar-trust ul{list-style:none;margin:0;padding:0;}
.sa-sidebar.sa-sidebar-optb-poppins .sa-sidebar-trust li{display:grid !important;grid-template-columns:24px minmax(0,1fr) !important;column-gap:10px !important;align-items:start !important;font-weight:500;font-size:16px;line-height:1.4;color:#0B212D;padding:10px 0 !important;border-bottom:1px solid rgba(11,33,45,.08);}
.sa-sidebar-optb-poppins .sa-sidebar-trust li:last-child{border-bottom:0;}
.sa-sidebar.sa-sidebar-optb-poppins .sa-sidebar-trust li .ck{position:static !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;width:24px !important;min-width:24px !important;color:#D97706 !important;font-weight:700;line-height:1.4 !important;}

/* Approved custom intake form (maps to Litify) */
.sa-sidebar-optb-poppins .sa-custom-contact-intake-form{background:#fff;border:1px solid rgba(11,33,45,.12);border-radius:8px;padding:24px 22px;}
.sa-sidebar-optb-poppins .sa-custom-contact-intake-form h4{font-weight:700;font-size:18px;color:#0B212D;margin:0 0 16px;text-align:center;text-transform:uppercase;}
.sa-sidebar-optb-poppins .sa-custom-contact-intake-form label{display:block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#0B212D;margin:0 0 5px;}
.sa-sidebar-optb-poppins .sa-custom-contact-intake-form .fld,.sa-sidebar-optb-poppins .sa-custom-contact-intake-form input,.sa-sidebar-optb-poppins .sa-custom-contact-intake-form select{width:100%;height:42px;border:2px solid #C7D4E3;border-radius:10px;background:#fff;margin:0 0 14px;padding:0 14px;font-size:14px;color:#0B212D;font-weight:500;font-family:inherit;}
.sa-sidebar-optb-poppins .sa-custom-contact-intake-form .consent{display:flex;align-items:flex-start;gap:8px;margin:0 0 16px;text-align:left;}
.sa-sidebar-optb-poppins .sa-custom-contact-intake-form .consent input{width:18px;height:18px;margin:2px 0 0;flex:none;}
.sa-sidebar-optb-poppins .sa-custom-contact-intake-form .consent span{font-size:12px;font-weight:500;color:#0B212D;line-height:1.4;}
.sa-sidebar-optb-poppins .sa-custom-contact-intake-form .submit{width:100%;height:46px;background:linear-gradient(0deg,#000 0%,#0B212D 100%);border-radius:8px;color:#fff;font-weight:700;font-size:16px;letter-spacing:0.6px;text-transform:uppercase;border:2px solid #0B212D;cursor:pointer;font-family:inherit;}

/* Video card (white, matches other cards) */
.sa-sidebar-optb-poppins .sa-sidebar-rvid{background:#fff;border:1px solid rgba(11,33,45,.12);border-radius:8px;padding:24px 22px;box-shadow:0 4px 14px rgba(0,0,0,0.06);}
.sa-sidebar-optb-poppins .sa-sidebar-rvid .rvid-thumb{position:relative;display:block;width:100%;aspect-ratio:1/1;border-radius:6px;overflow:hidden;background:#13303f;text-decoration:none;}
.sa-sidebar-optb-poppins .sa-sidebar-rvid .rvid-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.sa-sidebar-optb-poppins .sa-sidebar-rvid .rvid-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:48px;border-radius:14px;background:#FF0000;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.35);transition:background .2s ease;} .sa-sidebar-optb-poppins .sa-sidebar-rvid .rvid-thumb:hover .rvid-play{background:#CC0000;}
.sa-sidebar-optb-poppins .sa-sidebar-rvid .rvid-play svg{width:30px;height:30px;}
.sa-sidebar-optb-poppins .sa-sidebar-rvid .rvid-title{font-weight:700;font-size:18px;line-height:1.3;color:#0B212D;text-align:center;margin:16px 0 6px;text-transform:uppercase;}
.sa-sidebar-optb-poppins .sa-sidebar-rvid .rvid-meta{font-weight:500;font-size:15px;color:#0B212D;opacity:.7;text-align:center;margin:0;}

/* Founder/partner card (white, Foundry orange top border) */
.sa-sidebar-optb-poppins .sa-partner-inner{background:#fff;border:1px solid rgba(11,33,45,.12);border-top:4px solid #D97706;border-radius:8px;padding:28px 22px;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,0.06);}
.sa-sidebar-optb-poppins .sa-partner-headshot{width:90px;height:90px;border-radius:50%;overflow:hidden;margin:0 auto 14px;border:3px solid #D97706;}
.sa-sidebar-optb-poppins .sa-partner-headshot img{width:100%;height:100%;object-fit:cover;display:block;}
.sa-sidebar-optb-poppins .sa-partner-name{font-size:18px;font-weight:700;color:#0B212D;margin:0 0 2px;}
.sa-sidebar-optb-poppins .sa-partner-role{font-size:15px;font-weight:600;color:#D97706;text-transform:uppercase;letter-spacing:1.5px;margin:0 0 12px;}
.sa-sidebar-optb-poppins .sa-partner-area{font-size:14px;color:#0B212D;font-weight:500;line-height:1.45;margin:0 auto 18px;max-width:200px;}
.sa-sidebar-optb-poppins .sa-partner-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;background:transparent;color:#0B212D;font-weight:700;font-size:18px;padding:11px 16px;border-radius:6px;text-decoration:none;border:1.5px solid #0B212D;}

/* ARMOR 2026-06-10: sitewide normalization forces .sa-sidebar-cta dark with !important; pin the approved white card at higher specificity */
.sa-sidebar.sa-sidebar-optb-poppins .sa-sidebar-cta{background:#fff !important;background-image:none !important;background-color:#fff !important;border:1px solid rgba(11,33,45,.12) !important;backdrop-filter:none !important;}
.sa-sidebar.sa-sidebar-optb-poppins .sa-sidebar-cta h3,
.sa-sidebar.sa-sidebar-optb-poppins .sa-sidebar-cta h3 .cta-l2,
.sa-sidebar.sa-sidebar-optb-poppins .sa-sidebar-cta p{color:#0B212D !important;}
.sa-sidebar.sa-sidebar-optb-poppins .sa-sidebar-cta a,
.sa-sidebar.sa-sidebar-optb-poppins .sa-sidebar-cta a[href^="tel:"]{color:#0B212D !important;background:transparent !important;border:1.5px solid #0B212D !important;}
/* ARMOR 2026-06-11: sitewide snippet 60656 + legacy page CSS inject ::before checks on .sa-sidebar-trust li; this element carries its own span.ck checkmarks -> kill the injected one */
.sa-sidebar.sa-sidebar-optb-poppins .sa-sidebar-trust li::before{content:none !important;}
/* ARMOR 2026-06-15: old sitewide CALL NOW normalization injects ::before/::after pseudo-icons on page-id scopes. This sidebar ships its own inline SVG and text, so suppress the pseudo content at higher specificity. */
.sa-sidebar.sa-sidebar-optb-poppins .sa-sidebar-cta a[href^="tel:"]::before,
.sa-sidebar.sa-sidebar-optb-poppins .sa-sidebar-cta a[href^="tel:"]::after{content:none !important;display:none !important;background:none !important;}
.sa-sidebar.sa-sidebar-optb-poppins .sa-sidebar-cta a[href^="tel:"]{font-size:18px !important;line-height:1.2 !important;}

#sa-intake-form{scroll-margin-top:90px;}

</style>

<style id="sa-form-label-submit-guard-2026-06-15">
.sa-custom-contact-intake-form .sa-field-control{display:flex!important;flex-direction:column;gap:5px;width:100%;min-width:0;margin:0 0 14px;color:inherit;box-sizing:border-box;}
.sa-custom-contact-intake-form .sa-field-control .sa-form-label{display:block!important;font-size:13px!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.5px;color:inherit!important;margin:0!important;line-height:1.25!important;}
.sa-custom-contact-intake-form .sa-field-control > input,
.sa-custom-contact-intake-form .sa-field-control > select,
.sa-custom-contact-intake-form .sa-field-control > textarea{width:100%!important;margin:0!important;box-sizing:border-box;}
.sa-custom-contact-intake-form textarea.sa-form-field{height:auto!important;min-height:84px;resize:vertical;}
.sa-custom-contact-intake-form button[type="submit"],
.sa-custom-contact-intake-form .submit,
.sa-custom-contact-intake-form input[type="submit"]{display:flex!important;align-items:center;justify-content:center;width:100%;min-height:46px;color:#fff!important;-webkit-text-fill-color:#fff!important;background:linear-gradient(0deg,#000 0%,#0B212D 100%)!important;border:2px solid #0B212D!important;border-radius:8px;opacity:1!important;visibility:visible!important;text-shadow:none!important;font-weight:700;text-transform:uppercase;cursor:pointer;}
</style>

<aside class="sa-sidebar sa-sidebar-optb-poppins">
<div class="sa-sidebar-cta">
<h3>Focus On Healing.<span class="cta-l2">We’ll Handle The Rest.</span></h3>
<p>Get Back To Living Your Best Life</p>
<a href="tel:5028888888"><svg style="width:18px;height:18px;fill:#D97706;vertical-align:middle;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1.003 1.003 0 011.01-.24c1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.1.31.03.66-.25 1.01l-2.2 2.2z"></path></svg> CALL NOW</a>
</div>
<form action="/wp-json/sal/v1/contact-intake" class="sa-custom-contact-intake-form" data-rest-endpoint="https://aguiarinjurylawyers.com/?rest_route=/sal/v1/contact-intake" id="sa-intake-form" method="post">
<h4>Get Started</h4>
<label for="sa-sb-name">Full Name</label>
<input id="sa-sb-name" name="full_name" placeholder="Your name" required="" type="text"/>
<label for="sa-sb-phone">Phone Number</label>
<input id="sa-sb-phone" name="phone" placeholder="(502) 000-0000" required="" type="tel"/>
<label for="sa-sb-case">Case Type</label>
<select id="sa-sb-case" name="case_type" required="">
<option value="">Select case type</option>
<option>Car Accident</option>
<option>Truck Accident</option>
<option>Motorcycle Accident</option>
<option>Other</option>
</select>
<label for="sa-sb-injured">Were You Injured?</label>
<select id="sa-sb-injured" name="injured" required="">
<option value="">Select one</option>
<option>Yes</option>
<option>No</option>
</select>
<div class="consent"><input name="consent" required="" type="checkbox"/><span>I agree to be contacted about my case.</span></div>
<input aria-hidden="true" autocomplete="off" name="company" style="position:absolute;left:-9999px;" tabindex="-1" type="text"/>
<input name="gclid" type="hidden" value=""/>
<input name="utm_source" type="hidden" value=""/>
<input name="utm_medium" type="hidden" value=""/>
<input name="utm_campaign" type="hidden" value=""/>
<input name="referrer" type="hidden" value=""/>
<label class="sa-field-control" for="sa-form-1-email"><span class="sa-form-label">Email</span><input class="sa-form-field" id="sa-form-1-email" name="email" placeholder="Email" type="email"/></label>
<input name="injured_status" type="hidden" value="Not sure yet"/>
<label class="sa-field-control" for="sa-form-1-message"><span class="sa-form-label">Tell Us What Happened</span><textarea class="sa-form-field" id="sa-form-1-message" name="message" placeholder="Tell us what happened." rows="3"></textarea></label>
<input name="page_url" type="hidden" value=""/>
<input name="page_title" type="hidden" value=""/>
<input name="success_redirect" type="hidden" value="https://aguiarinjurylawyers.com/?sa_intake=success"/>
<input name="error_redirect" type="hidden" value="https://aguiarinjurylawyers.com/?sa_intake=error"/>
<input name="sal_contact_intake_submit" type="hidden" value="1"/>
<button class="submit" type="submit">GET STARTED</button>
</form>
<aside class="sa-sidebar-trust">
<h4>Why Clients Choose<br/>Sam Aguiar</h4>
<ul>
<li><span class="ck">✓</span>Bigger Share Guarantee®</li>
<li><span class="ck">✓</span>Forbes Best-In-State<br/>(1 Of 16 Nationwide In PI)</li>
<li><span class="ck">✓</span>Average Settlement Timeline Under 7 Months</li>
<li><span class="ck">✓</span>Camera Database Access</li>
<li><span class="ck">✓</span>$0 Out-Of-Pocket Forever</li>
<li><span class="ck">✓</span>No Increased Charges For Litigation</li>
<li><span class="ck">✓</span>Smaller Caseloads</li>
<li><span class="ck">✓</span>More Personal Attention</li>
<li><span class="ck">✓</span>1,000+ Five-Star Google Reviews</li>
</ul>
</aside>
</aside>

CSS

Cancel