Edit element

sa-us-vs-them-bokeh-comparison

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-uvt-bokeh" aria-labelledby="sa-uvt-bokeh-title">
  <div class="sa-uvt-bokeh__lights" aria-hidden="true"></div>
  <div class="sa-uvt-bokeh__inner">
    <h2 id="sa-uvt-bokeh-title" class="sa-uvt-bokeh__title">Why Choose Sam Aguiar?</h2>
    <div class="sa-uvt-bokeh__grid">
      <div class="sa-uvt-bokeh__head sa-uvt-bokeh__head--us"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/sal-logo-full-horizontal.webp" alt="Sam Aguiar Injury Lawyers" loading="lazy" decoding="async"></div>
      <div class="sa-uvt-bokeh__head-spacer" aria-hidden="true"></div>
      <div class="sa-uvt-bokeh__head sa-uvt-bokeh__head--them">Other PI Firms</div>

<div class="sa-uvt-bokeh__cell sa-uvt-bokeh__cell--us"><span class="sa-uvt-bokeh__mark sa-uvt-bokeh__mark--check" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4.5 12.5l5 5L20 7"/></svg></span><span>Smaller Caseloads, Teams Of Three</span></div>
      <div class="sa-uvt-bokeh__vs">VS.</div>
      <div class="sa-uvt-bokeh__cell sa-uvt-bokeh__cell--them"><span class="sa-uvt-bokeh__mark sa-uvt-bokeh__mark--x" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></span><span>Lawyer And Assistant With 200+ Cases</span></div>

<div class="sa-uvt-bokeh__cell sa-uvt-bokeh__cell--us"><span class="sa-uvt-bokeh__mark sa-uvt-bokeh__mark--check" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4.5 12.5l5 5L20 7"/></svg></span><span>Flat Fee, Never Increases</span></div>
      <div class="sa-uvt-bokeh__vs">VS.</div>
      <div class="sa-uvt-bokeh__cell sa-uvt-bokeh__cell--them"><span class="sa-uvt-bokeh__mark sa-uvt-bokeh__mark--x" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></span><span>Higher Fee Percent For Litigation</span></div>

<div class="sa-uvt-bokeh__cell sa-uvt-bokeh__cell--us"><span class="sa-uvt-bokeh__mark sa-uvt-bokeh__mark--check" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4.5 12.5l5 5L20 7"/></svg></span><span>Bigger Share Guarantee&reg;</span></div>
      <div class="sa-uvt-bokeh__vs">VS.</div>
      <div class="sa-uvt-bokeh__cell sa-uvt-bokeh__cell--them"><span class="sa-uvt-bokeh__mark sa-uvt-bokeh__mark--x" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></span><span>Lawyer Walks With More Money Than You</span></div>

<div class="sa-uvt-bokeh__cell sa-uvt-bokeh__cell--us"><span class="sa-uvt-bokeh__mark sa-uvt-bokeh__mark--check" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4.5 12.5l5 5L20 7"/></svg></span><span>In-House Team Of Three</span></div>
      <div class="sa-uvt-bokeh__vs">VS.</div>
      <div class="sa-uvt-bokeh__cell sa-uvt-bokeh__cell--them"><span class="sa-uvt-bokeh__mark sa-uvt-bokeh__mark--x" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></span><span>Outsourced Support</span></div>

<div class="sa-uvt-bokeh__cell sa-uvt-bokeh__cell--us"><span class="sa-uvt-bokeh__mark sa-uvt-bokeh__mark--check" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4.5 12.5l5 5L20 7"/></svg></span><span>Direct Line To Your Team</span></div>
      <div class="sa-uvt-bokeh__vs">VS.</div>
      <div class="sa-uvt-bokeh__cell sa-uvt-bokeh__cell--them"><span class="sa-uvt-bokeh__mark sa-uvt-bokeh__mark--x" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></span><span>Unreturned Calls</span></div>
    </div>
  </div>
</section>

CSS

.sa-uvt-bokeh,.sa-uvt-bokeh *{box-sizing:border-box;}
.sa-uvt-bokeh{font-family:Poppins,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;position:relative;overflow:hidden;background:#050608;color:#fff;padding:58px 24px;border-radius:18px;isolation:isolate;}
.sa-uvt-bokeh:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.76) 0%,rgba(11,33,45,.56) 100%);z-index:-2;}
.sa-uvt-bokeh__lights{position:absolute;inset:-20%;z-index:-3;background:radial-gradient(circle at 18% 28%,rgba(248,156,34,.42) 0 7%,transparent 15%),radial-gradient(circle at 82% 22%,rgba(255,138,130,.28) 0 6%,transparent 14%),radial-gradient(circle at 72% 78%,rgba(93,220,148,.22) 0 7%,transparent 16%),radial-gradient(circle at 32% 72%,rgba(248,156,34,.22) 0 5%,transparent 12%),#050608;filter:blur(16px);transform:scale(1.04);}
.sa-uvt-bokeh__inner{max-width:980px;margin:0 auto;position:relative;}
.sa-uvt-bokeh__title{font-size:clamp(28px,3.3vw,38px);line-height:1.15;font-weight:700;text-align:center;color:#fff;margin:0 0 32px;letter-spacing:0;}
.sa-uvt-bokeh__grid{display:grid;grid-template-columns:1fr 64px 1fr;align-items:stretch;gap:0;margin:0 auto;max-width:900px;}
.sa-uvt-bokeh__head{min-height:62px;padding:6px 18px 18px;border-bottom:2px solid rgba(255,255,255,.22);display:flex;align-items:center;font-size:17px;line-height:1.2;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:#ff8a82;}
.sa-uvt-bokeh__head--us{justify-content:flex-start;color:#fff;}
.sa-uvt-bokeh__head--them{justify-content:flex-start;color:#ff8a82;}
.sa-uvt-bokeh__head img{display:block;max-width:min(230px,100%);height:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));}
.sa-uvt-bokeh__head-spacer{border-bottom:2px solid rgba(255,255,255,.22);}
.sa-uvt-bokeh__cell{min-height:62px;display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.14);font-size:15px;line-height:1.35;font-weight:700;}
.sa-uvt-bokeh__cell--us{justify-content:flex-start;color:#fff;text-transform:uppercase;}
.sa-uvt-bokeh__cell--them{justify-content:flex-start;color:rgba(255,255,255,.84);font-weight:500;}
.sa-uvt-bokeh__vs{display:flex;align-items:center;justify-content:center;min-height:62px;border-bottom:1px solid rgba(255,255,255,.14);font-size:13px;font-weight:700;color:#F89C22;letter-spacing:.06em;}
.sa-uvt-bokeh__mark{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);}
.sa-uvt-bokeh__mark svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;}
.sa-uvt-bokeh__mark--check{color:#5ddc94;box-shadow:0 0 18px rgba(93,220,148,.28);}
.sa-uvt-bokeh__mark--x{color:#ff6b6b;box-shadow:0 0 18px rgba(255,107,107,.22);}
@media(max-width:760px){.sa-uvt-bokeh{padding:42px 16px;border-radius:14px;}.sa-uvt-bokeh__grid{grid-template-columns:1fr;}.sa-uvt-bokeh__head-spacer,.sa-uvt-bokeh__vs{display:none;}.sa-uvt-bokeh__head{justify-content:center;text-align:center;}.sa-uvt-bokeh__head--them{margin-top:18px;border-top:1px solid rgba(255,255,255,.16);padding-top:22px;}.sa-uvt-bokeh__cell{min-height:0;padding:14px 8px;}.sa-uvt-bokeh__cell--us{border-bottom:1px solid rgba(93,220,148,.22);}.sa-uvt-bokeh__cell--them{border-bottom:1px dashed rgba(255,138,130,.28);}.sa-uvt-bokeh__cell--us:nth-of-type(n),.sa-uvt-bokeh__cell--them:nth-of-type(n){font-size:14px;}}

Cancel