Differentiators Beta

sa-us-vs-them-bokeh-comparison v2026-06-15

Approved Us vs. Them Concept 2B bokeh variant from the local mockup board, corrected per Sam so Sam Aguiar appears on the left and Other PI Firms appears on the right. Dark bokeh comparison table with gradient-style check and X marks.

Source skill: registry-screenshot-intake; source mockup: C:\Users\SAguiar\Documents\Web Elements\collected-local-html-2026-05-27_134940\Downloads\Us vs Them Mockups.html; approved by Sam 2026-06-15 · Updated 2026-06-15 23:37:42

Edit

Live preview

Open ↗

When to use

Use as a stronger dark mid-page break or hero-secondary differentiation block where the page needs a more dramatic Us vs. Them comparison than the white two-card version.

Rules & constraints

1. Sam Aguiar Injury Lawyers must stay left and Other PI Firms must stay right on desktop.
2. On mobile, Sam Aguiar rows must read before the corresponding competition rows.
3. Do not reintroduce strikethroughs; this approved 2B variant uses check and X marks only.
4. Keep the dark bokeh treatment controlled and readable; no flat navy replacement unless a page-specific QA pass requires it.
5. Status remains Beta until deployed on a live page and verified in desktop/mobile context.

Deployment notes

Standalone scoped snippet generated from Concept 2B of the 2026-05-27 Us vs. Them mockup board. This saved version intentionally reverses the original board order so the firm is on the left. Add to WordPress as a custom HTML block with paired CSS, then run desktop/mobile visual QA before promoting to Live.

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