← back to Lawyer Directory Builder
public/index.html
793 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Counsel & Bar — California attorney directory (independent · not the State Bar)</title>
<meta name="description" content="An indexed directory of every licensed California attorney, drawn from the State Bar public roll. 89,000+ profiles, 42,000+ firms, 1,000+ independently audited sites. Browse, verify, contact directly.">
<link rel="canonical" href="https://lawyers.agentabrams.com/">
<meta name="robots" content="index, follow">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" href="/favicon-32.png">
<meta name="theme-color" content="#0a0a0c">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="Counsel & Bar">
<meta property="og:title" content="Counsel & Bar — California attorney directory (independent · not the State Bar)">
<meta property="og:description" content="Every California-licensed attorney, indexed against the State Bar public roll. Independently audited against twelve published signals. We're a directory — not a referral service, not the State Bar.">
<meta property="og:url" content="https://lawyers.agentabrams.com/">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://lawyers.agentabrams.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Counsel & Bar — every California-licensed attorney, indexed. A directory, not a referral service, not the State Bar.">
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Counsel & Bar — California attorney directory">
<meta name="twitter:description" content="Every CA-licensed attorney, indexed. Independent audit, methodology v1.0 published. Not a referral service, not the State Bar.">
<meta name="twitter:image" content="https://lawyers.agentabrams.com/og.png">
<meta name="twitter:image:alt" content="Counsel & Bar — every California-licensed attorney, indexed.">
<!-- Structured data: Organization + WebSite -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"@id": "https://lawyers.agentabrams.com/#org",
"name": "Counsel & Bar",
"alternateName": "Counsel and Bar",
"url": "https://lawyers.agentabrams.com/",
"description": "An independent directory of California-licensed attorneys, drawn from the State Bar public roll. Not a lawyer referral service under California Business & Professions Code §6155.",
"areaServed": {
"@type": "AdministrativeArea",
"name": "California, United States"
},
"knowsAbout": ["California attorneys", "lawyer directory", "California State Bar"],
"sameAs": [
"https://www.calbar.ca.gov/"
]
},
{
"@type": "WebSite",
"@id": "https://lawyers.agentabrams.com/#website",
"url": "https://lawyers.agentabrams.com/",
"name": "Counsel & Bar",
"publisher": {"@id": "https://lawyers.agentabrams.com/#org"},
"potentialAction": {
"@type": "SearchAction",
"target": "https://lawyers.agentabrams.com/find-a-lawyer?zip={zip}",
"query-input": "required name=zip"
}
}
]
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--noir: #0a0a0c;
--noir-rise: #131316;
--noir-deep: #050507;
--rule: #2a2724;
--rule-faint: #1a1815;
--ink: #f4f1ea;
--ink-soft: #d8d2c5;
--ink-mute: #8b857a;
--metal: #b89968;
--metal-glow: #d4b683;
--metal-deep: #8a7044;
--metal-gradient: linear-gradient(180deg, #d4b683 0%, #b89968 38%, #9c7e4f 100%);
--metal-rule-gradient: linear-gradient(90deg, transparent 0%, #b89968 50%, transparent 100%);
--serif: "Cormorant Garamond", "Cormorant", "Georgia", serif;
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--hairline: 1px solid var(--rule);
--rh: 1.5;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--noir);
color: var(--ink);
font-family: var(--sans);
font-weight: 300;
font-size: 16px;
line-height: var(--rh);
overflow-x: hidden;
}
::selection { background: var(--metal); color: var(--noir); }
/* ─── Top bar ──────────────────────────────────────────────────── */
.topbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
padding: 22px 48px;
display: flex; justify-content: space-between; align-items: center;
background: linear-gradient(180deg, rgba(10,10,12,0.92) 0%, rgba(10,10,12,0.0) 100%);
backdrop-filter: blur(8px);
}
.brand { font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: 0.01em; color: var(--ink); text-decoration: none; }
.brand .ampersand { color: var(--metal); font-style: italic; padding: 0 4px; }
.nav { display: flex; gap: 36px; align-items: center; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.nav a { color: var(--ink-mute); text-decoration: none; transition: color 180ms ease; }
.nav a:hover { color: var(--ink); }
.nav a.cta-mini {
color: var(--metal); border: 1px solid var(--rule); padding: 9px 18px; transition: all 220ms ease;
}
.nav a.cta-mini:hover { color: var(--noir); background: var(--metal); border-color: var(--metal); }
@media (max-width: 720px) { .topbar { padding: 18px 24px; } .nav { gap: 18px; } .nav a:not(.cta-mini) { display: none; } }
/* ─── Hero ─────────────────────────────────────────────────────── */
.hero {
min-height: 100vh;
padding: 180px 48px 96px;
display: flex; flex-direction: column; justify-content: center;
background: radial-gradient(ellipse at 70% 30%, rgba(184,153,104,0.08) 0%, transparent 55%),
linear-gradient(180deg, var(--noir-deep) 0%, var(--noir) 60%);
position: relative; overflow: hidden;
}
.hero::after {
content: ''; position: absolute; bottom: 0; left: 48px; right: 48px;
height: 1px; background: linear-gradient(90deg, transparent, var(--rule) 20%, var(--rule) 80%, transparent);
}
.hero-inner { max-width: 1280px; margin: 0 auto; width: 100%; }
.eyebrow {
font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
color: var(--metal); font-weight: 500; margin: 0 0 32px;
}
.eyebrow .dot { display: inline-block; width: 4px; height: 4px; background: var(--metal); border-radius: 50%; margin: 0 14px; vertical-align: middle; }
h1.display {
font-family: var(--serif); font-weight: 300;
font-size: clamp(48px, 7.5vw, 96px); line-height: 1.02;
letter-spacing: -0.02em; margin: 0 0 28px; max-width: 16ch;
color: var(--ink);
}
h1.display em { font-style: italic; color: var(--metal); font-weight: 400; }
.lede {
font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: var(--ink-soft);
max-width: 56ch; margin: 0 0 56px; font-weight: 300;
}
.cta-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.cta {
display: inline-flex; align-items: center; gap: 14px;
padding: 18px 32px;
font-family: var(--sans); font-size: 12px; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
text-decoration: none; transition: all 260ms cubic-bezier(.2,.7,.2,1);
border: 1px solid transparent; border-radius: 0;
cursor: pointer;
}
.cta-primary {
background: var(--metal-gradient); color: var(--noir); border-color: var(--metal);
box-shadow: inset 0 1px 0 rgba(255,235,200,0.35), 0 1px 0 rgba(0,0,0,0.4);
}
.cta-primary:hover {
background: linear-gradient(180deg, #e3c89a 0%, #c8a674 50%, #a98559 100%);
border-color: var(--metal-glow); transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255,240,210,0.5), 0 4px 18px rgba(184,153,104,0.18);
}
.cta-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.cta-ghost:hover { border-color: var(--ink); }
.cta .arrow { transition: transform 240ms ease; }
.cta:hover .arrow { transform: translateX(4px); }
@media (max-width: 720px) { .hero { padding: 130px 24px 60px; } .hero::after { left: 24px; right: 24px; } }
/* ─── Proof strip: "as listed on the public roll" ──────────────── */
.proof {
margin: 64px 0 0; padding: 28px 0 0;
border-top: 1px solid var(--rule);
display: flex; flex-direction: column; gap: 16px;
}
.proof .p-eyebrow {
font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
color: var(--metal); font-weight: 500; margin: 0;
}
.proof .p-row {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 32px;
}
.proof .p-firm {
font-family: var(--serif); font-weight: 400; font-size: 15px;
color: var(--ink); letter-spacing: 0.06em; text-transform: uppercase;
white-space: nowrap;
}
.proof .p-firm .p-city {
font-family: var(--sans); font-weight: 300; font-style: italic;
font-size: 11px; color: var(--ink-mute); letter-spacing: 0.04em;
text-transform: none; margin-left: 8px;
}
.proof .p-firm + .p-firm::before {
content: ''; display: inline-block; width: 3px; height: 3px;
border-radius: 50%; background: var(--metal);
margin-right: 32px; margin-left: -16px; vertical-align: 4px; opacity: 0.6;
}
.proof .p-meta {
font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink-mute); font-weight: 500; margin: 8px 0 0;
font-style: italic; font-family: var(--serif);
}
@media (max-width: 720px) {
.proof { margin: 40px 0 0; padding: 22px 0 0; }
.proof .p-row { gap: 12px 22px; }
.proof .p-firm { font-size: 13px; }
.proof .p-firm + .p-firm::before { margin-right: 22px; margin-left: -11px; }
}
/* ─── Stat ledger ──────────────────────────────────────────────── */
.ledger { padding: 80px 48px; background: var(--noir); }
.ledger-inner { max-width: 1280px; margin: 0 auto; }
.ledger-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
border-top: var(--hairline); border-bottom: var(--hairline);
}
.stat {
padding: 36px 28px;
border-right: var(--hairline);
}
.stat:last-child { border-right: 0; }
.stat .num {
font-family: var(--serif); font-weight: 300;
font-size: clamp(36px, 4.2vw, 56px); line-height: 1; color: var(--metal);
font-variant-numeric: tabular-nums; margin-bottom: 10px; letter-spacing: -0.01em;
}
.stat .lbl {
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--ink-mute); font-weight: 500;
}
@media (max-width: 720px) {
.ledger { padding: 48px 24px; }
.ledger-grid { grid-template-columns: repeat(2, 1fr); }
.stat { padding: 28px 18px; border-right: 0; border-bottom: var(--hairline); }
.stat:nth-child(odd) { border-right: var(--hairline); }
.stat:nth-last-child(-n+2) { border-bottom: 0; }
}
/* ─── Features ─────────────────────────────────────────────────── */
.features { padding: 120px 48px; background: var(--noir); }
.features-inner { max-width: 1280px; margin: 0 auto; }
.section-eyebrow {
font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
color: var(--metal); font-weight: 500; margin: 0 0 24px;
}
.section-title {
font-family: var(--serif); font-weight: 300;
font-size: clamp(32px, 4vw, 52px); line-height: 1.1;
letter-spacing: -0.015em; margin: 0 0 80px; max-width: 22ch;
color: var(--ink);
}
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.feat {
padding: 44px 36px 44px 0;
border-top: var(--hairline);
position: relative;
}
.feat:nth-child(2n) { padding-left: 36px; padding-right: 0; }
.feat:nth-child(-n+2) { border-top: 0; }
.feat .feat-num {
font-family: var(--serif); font-style: italic; font-weight: 300;
font-size: 18px; color: var(--metal); margin-bottom: 14px; display: block;
}
.feat h3 {
font-family: var(--serif); font-weight: 400;
font-size: 26px; line-height: 1.2; margin: 0 0 14px; color: var(--ink);
letter-spacing: -0.005em;
}
.feat p { margin: 0; color: var(--ink-mute); font-size: 15px; line-height: 1.65; max-width: 38ch; }
@media (max-width: 720px) {
.features { padding: 64px 24px; }
.feature-grid { grid-template-columns: 1fr; }
.feat, .feat:nth-child(2n) { padding: 32px 0; border-top: var(--hairline); }
.feat:first-child { border-top: 0; }
}
/* ─── Colophon (closer) ───────────────────────────────────────── */
.closer {
padding: 120px 48px 96px; background: var(--noir-deep);
border-top: var(--hairline);
}
.colophon {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1.6fr 1fr; gap: 96px;
align-items: end;
}
.colophon-statement {
font-family: var(--serif); font-style: italic; font-weight: 300;
font-size: clamp(28px, 3.6vw, 46px); line-height: 1.18;
color: var(--ink); margin: 0; letter-spacing: -0.012em;
max-width: 22ch;
}
.colophon-statement em { font-style: normal; color: var(--metal); font-weight: 400; }
.colophon-stack { display: flex; flex-direction: column; gap: 22px; align-items: flex-end; text-align: right; }
.colophon-stack-row {
display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
padding-right: 0;
}
.colophon-stack-lbl {
font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase;
color: var(--ink-mute); font-weight: 500;
}
.colophon-stack-val {
font-family: var(--serif); font-style: italic; font-weight: 400;
font-size: 18px; color: var(--metal); letter-spacing: 0.005em;
line-height: 1; font-variant-numeric: tabular-nums;
}
.colophon-stack-val.sans {
font-family: var(--sans); font-style: normal; font-weight: 500;
font-size: 12px; color: var(--ink); letter-spacing: 0.18em;
text-transform: uppercase;
}
.colophon-rule {
max-width: 1280px; margin: 0 auto 56px;
height: 1px; background: var(--metal-rule-gradient);
opacity: 0.5;
}
.colophon-signature {
max-width: 1280px; margin: 56px auto 0;
padding-top: 28px;
border-top: 1px solid var(--rule);
display: flex; justify-content: space-between; align-items: center;
font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
color: var(--ink-mute); font-weight: 500; gap: 24px; flex-wrap: wrap;
}
.colophon-signature .glyph {
font-family: var(--serif); font-style: italic; font-size: 22px;
color: var(--metal); letter-spacing: 0; text-transform: none;
line-height: 1;
}
@media (max-width: 880px) {
.colophon { grid-template-columns: 1fr; gap: 48px; }
.colophon-stack { align-items: flex-start; text-align: left; }
.closer { padding: 64px 24px 48px; }
}
/* ─── Footer ───────────────────────────────────────────────────── */
footer {
padding: 56px 48px 48px;
border-top: var(--hairline);
background: var(--noir);
display: flex; justify-content: space-between; align-items: flex-start;
gap: 40px; flex-wrap: wrap;
font-size: 12px; color: var(--ink-mute);
}
footer .brand-mark { font-family: var(--serif); font-size: 18px; color: var(--ink); margin-bottom: 14px; }
footer .col { min-width: 180px; }
footer .col h4 { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); margin: 0 0 14px; font-weight: 500; }
footer .col a { display: block; color: var(--ink-mute); text-decoration: none; padding: 4px 0; transition: color 180ms ease; }
footer .col a:hover { color: var(--metal); }
footer .legal { font-size: 11px; opacity: 0.6; max-width: 320px; line-height: 1.6; }
@media (max-width: 720px) { footer { padding: 40px 24px 32px; } }
/* ─── Monogram + brand mark ────────────────────────────────────── */
.monogram { width: 28px; height: 28px; flex: 0 0 28px; }
.monogram circle { fill: none; stroke: url(#mg-stroke); stroke-width: 1; }
.monogram path { fill: url(#mg-stroke); }
.brand-row { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
/* ─── Hero folio (top-right editorial mark) ─────────────────────── */
.hero-folio {
position: absolute; top: 36px; right: 48px;
text-align: right; pointer-events: none; z-index: 1;
font-family: var(--serif); font-style: italic; color: var(--metal);
line-height: 1.15;
}
.hero-folio .f-vol { font-size: 14px; font-weight: 400; letter-spacing: 0.02em; }
.hero-folio .f-rule { width: 32px; height: 1px; background: var(--metal); margin: 8px 0 8px auto; opacity: 0.6; }
.hero-folio .f-year { font-size: 11px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-mute); font-style: normal; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.hero-folio .f-no { font-size: 10px; letter-spacing: 0.22em; color: var(--ink-mute); font-style: normal; font-family: var(--sans); font-weight: 500; text-transform: uppercase; margin-top: 4px; font-variant-numeric: tabular-nums; }
@media (max-width: 720px){.hero-folio{top:96px;right:20px}.hero-folio .f-vol{font-size:12px}.hero-folio .f-year{font-size:10px}}
/* Legacy class kept as no-op so older builds don't error if cached */
.hero-watermark { display: none; }
.hero-inner { position: relative; z-index: 1; }
.reg-mark {
position: absolute; width: 18px; height: 18px;
color: var(--metal); opacity: 0.45;
pointer-events: none;
}
.reg-mark.tl { top: 24px; left: 24px; }
.reg-mark.tr { top: 24px; right: 24px; }
.reg-mark.bl { bottom: 24px; left: 24px; }
.reg-mark.br { bottom: 24px; right: 24px; }
.reg-mark::before, .reg-mark::after {
content: ''; position: absolute; background: currentColor;
}
.reg-mark::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.reg-mark::after { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.coord-marker {
position: absolute; top: 36px; right: 64px;
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--ink-mute); font-weight: 500;
font-variant-numeric: tabular-nums;
}
.coord-marker .axis { color: var(--metal); }
@media (max-width: 720px) {
.coord-marker { top: 96px; right: 24px; font-size: 9px; }
.reg-mark { width: 12px; height: 12px; }
.reg-mark.tl, .reg-mark.tr { top: 96px; }
.hero-watermark { font-size: 60vw; opacity: 0.04; }
}
/* ─── Volume indicator strip ───────────────────────────────────── */
.vol-strip {
display: flex; align-items: center; gap: 18px;
margin: 0 0 32px; opacity: 0.78;
}
.vol-strip .v-rule { flex: 0 0 56px; height: 1px; background: var(--metal-rule-gradient); }
.vol-strip .v-text {
font-family: var(--serif); font-style: italic; font-weight: 400;
font-size: 14px; color: var(--metal); letter-spacing: 0.02em;
}
.vol-strip .v-meta {
font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
color: var(--ink-mute); font-weight: 500;
}
/* ─── Stat ledger refinement ───────────────────────────────────── */
.stat .seal {
font-family: var(--serif); font-style: italic; font-weight: 400;
font-size: 11px; color: var(--metal-deep); letter-spacing: 0.06em;
margin-bottom: 18px; display: block;
}
/* ─── Feature outlined numerals ────────────────────────────────── */
.feat .feat-num {
font-family: var(--serif); font-style: italic; font-weight: 300;
font-size: 64px; line-height: 0.9; color: transparent;
-webkit-text-stroke: 1px var(--metal); margin: 0 0 22px; display: block;
letter-spacing: -0.02em;
}
@media (max-width: 720px) { .feat .feat-num { font-size: 48px; } }
/* ─── Section divider ornaments ────────────────────────────────── */
.ornament {
display: flex; align-items: center; justify-content: center; gap: 22px;
margin: 0 0 18px;
}
.ornament .o-rule { width: 64px; height: 1px; background: var(--rule); }
.ornament .o-glyph { color: var(--metal); font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1; }
/* ─── Editorial engravings (decorative SVG art) ────────────────── */
.engraving {
display: flex; flex-direction: column; align-items: center; gap: 14px;
padding: 56px 24px;
background: var(--noir);
position: relative;
}
.engraving::before, .engraving::after {
content: ''; position: absolute; top: 50%; height: 1px;
width: clamp(80px, 18vw, 220px);
background: linear-gradient(90deg, transparent 0%, var(--rule) 100%);
}
.engraving::before { left: 0; }
.engraving::after { right: 0; transform: scaleX(-1); }
.engraving svg { display: block; max-width: 100%; height: auto; }
.engraving .e-label {
font-family: var(--serif); font-style: italic; font-weight: 400;
color: var(--metal-deep); font-size: 12px; letter-spacing: 0.18em;
text-transform: uppercase; opacity: 0.7;
}
.engraving--frieze { padding: 36px 0; overflow: hidden; }
.engraving--frieze::before, .engraving--frieze::after { display: none; }
.closer .rosette { width: 64px; height: 64px; margin: 0 auto 28px; display: block; opacity: 0.72; }
.closer .fleuron {
font-family: var(--serif); font-style: italic; font-weight: 300;
font-size: 56px; line-height: 1; color: var(--metal);
display: block; margin: 0 auto 28px; opacity: 0.7;
text-align: center; letter-spacing: 0;
}
@media (max-width: 720px) {
.engraving { padding: 40px 18px; }
.engraving::before, .engraving::after { width: 24vw; }
}
/* ─── Subtle entrance ──────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
.reveal { opacity: 0; transform: translateY(14px); animation: rise 800ms cubic-bezier(.16,.84,.3,1) forwards; }
.reveal.d1 { animation-delay: 80ms; }
.reveal.d2 { animation-delay: 160ms; }
.reveal.d3 { animation-delay: 260ms; }
.reveal.d4 { animation-delay: 360ms; }
.reveal.d5 { animation-delay: 460ms; }
@keyframes rise { to { opacity: 1; transform: none; } }
.hero-watermark { animation: watermark-fade 1600ms cubic-bezier(.16,.84,.3,1) forwards; opacity: 0; }
@keyframes watermark-fade { to { opacity: 0.045; } }
/* Scroll-triggered reveals for content below the hero */
.scroll-reveal { opacity: 0; transform: translateY(22px); transition: opacity 900ms cubic-bezier(.16,.84,.3,1), transform 900ms cubic-bezier(.16,.84,.3,1); }
.scroll-reveal.in-view { opacity: 1; transform: none; }
.scroll-reveal.s1 { transition-delay: 80ms; }
.scroll-reveal.s2 { transition-delay: 160ms; }
.scroll-reveal.s3 { transition-delay: 240ms; }
.scroll-reveal.s4 { transition-delay: 320ms; }
}
*:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(184,153,104,.45);border-radius:1px}
*:focus:not(:focus-visible){outline:none}
</style>
</head>
<body>
<header class="topbar">
<a class="brand-row" href="/">
<svg class="monogram" viewBox="0 0 28 28" aria-hidden="true">
<defs>
<linearGradient id="mg-stroke" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#d4b683"/>
<stop offset="50%" stop-color="#b89968"/>
<stop offset="100%" stop-color="#8a7044"/>
</linearGradient>
</defs>
<circle cx="14" cy="14" r="13"/>
<path d="M9.6 9.5c-1.6 0-2.7 1.2-2.7 3v3c0 1.8 1.1 3 2.7 3 1.4 0 2.4-.8 2.6-2.1h-1.3c-.1.6-.6 1-1.3 1-.9 0-1.4-.6-1.4-1.7v-2.4c0-1.1.5-1.7 1.4-1.7.7 0 1.2.4 1.3 1h1.3c-.2-1.3-1.2-2.1-2.6-2.1zm5.5.1v8.7h2.7c1.6 0 2.6-.9 2.6-2.4 0-1-.5-1.7-1.3-2 .7-.3 1.1-1 1.1-1.8 0-1.5-1-2.5-2.5-2.5h-2.6zm1.3 1.1h1.2c.8 0 1.4.5 1.4 1.4 0 .9-.5 1.4-1.4 1.4h-1.2v-2.8zm0 3.9h1.4c.9 0 1.4.6 1.4 1.5s-.5 1.5-1.4 1.5h-1.4V14.6z"/>
</svg>
<span class="brand">Counsel <span class="ampersand">&</span> Bar</span>
</a>
<nav class="nav">
<a href="/find-a-lawyer">Find counsel</a>
<a href="/audit.html">Directory</a>
<a href="/data">Data</a>
<a href="/login">Sign in</a>
<a class="cta-mini" href="/signup">Claim your firm</a>
</nav>
</header>
<section class="hero">
<div class="hero-folio" aria-hidden="true">
<span class="f-vol">Vol. I</span>
<span class="f-rule" aria-hidden="true"></span>
<span class="f-year">MMXXVI</span>
<span class="f-no">№ 001</span>
</div>
<div class="hero-inner">
<div class="vol-strip reveal">
<span class="v-rule"></span>
<span class="v-text">Volume I</span>
<span class="v-meta">Edition 2026 · Public Bar Registry</span>
</div>
<p class="eyebrow reveal d1">California<span class="dot"></span>Independent directory<span class="dot"></span>Not the State Bar</p>
<h1 class="display reveal d2">
Every licensed attorney<br>
in California, <em>indexed.</em>
</h1>
<p class="lede reveal d3">
A complete index of the people authorized to practice law in this state — verified against the State Bar's public roll. Browse firms by city and practice area. Contact attorneys directly through their listed channels. We're a directory, not a referral service: we don't accept fees for sending you to a specific attorney, and we don't route your case anywhere on your behalf.
</p>
<div class="cta-row reveal d4">
<a class="cta cta-primary" href="/find-a-lawyer">
Find counsel
<span class="arrow">→</span>
</a>
<a class="cta cta-ghost" href="/signup">
Claim your listing
<span class="arrow">→</span>
</a>
</div>
</div>
</section>
<!-- Editorial engraving I · classical capital -->
<div class="engraving scroll-reveal" role="presentation" aria-label="Classical column capital — decorative section divider">
<svg viewBox="0 0 320 110" width="320" height="110" aria-hidden="true">
<defs>
<linearGradient id="eng-metal-1" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#d4b683"/>
<stop offset="50%" stop-color="#b89968"/>
<stop offset="100%" stop-color="#8a7044"/>
</linearGradient>
</defs>
<g fill="none" stroke="url(#eng-metal-1)" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round">
<!-- Abacus (top slab) -->
<rect x="60" y="14" width="200" height="6"/>
<line x1="62" y1="22" x2="258" y2="22"/>
<!-- Echinus / volute band -->
<path d="M70 28 Q 80 24 96 28"/>
<path d="M96 28 Q 112 32 128 28"/>
<path d="M128 28 Q 144 24 160 28"/>
<path d="M160 28 Q 176 32 192 28"/>
<path d="M192 28 Q 208 24 224 28"/>
<path d="M224 28 Q 240 32 250 28"/>
<!-- Twin volutes -->
<path d="M70 28 Q 56 36 60 50 Q 64 60 76 56 Q 86 52 86 44 Q 86 38 80 38 Q 75 38 75 44"/>
<path d="M250 28 Q 264 36 260 50 Q 256 60 244 56 Q 234 52 234 44 Q 234 38 240 38 Q 245 38 245 44"/>
<!-- Astragal -->
<line x1="84" y1="62" x2="236" y2="62"/>
<line x1="84" y1="66" x2="236" y2="66"/>
<!-- Fluted shaft hint -->
<line x1="100" y1="72" x2="100" y2="100"/>
<line x1="120" y1="72" x2="120" y2="100"/>
<line x1="140" y1="72" x2="140" y2="100"/>
<line x1="160" y1="72" x2="160" y2="100"/>
<line x1="180" y1="72" x2="180" y2="100"/>
<line x1="200" y1="72" x2="200" y2="100"/>
<line x1="220" y1="72" x2="220" y2="100"/>
<!-- Center diamond -->
<path d="M155 38 L 160 33 L 165 38 L 160 43 Z" fill="url(#eng-metal-1)" stroke="none" opacity="0.55"/>
</g>
</svg>
<span class="e-label">Volume I · The Registry</span>
</div>
<section class="ledger scroll-reveal">
<div class="ledger-inner">
<div class="ledger-grid">
<div class="stat reveal">
<span class="seal">i.</span>
<div class="num">~89,000</div>
<div class="lbl">Bar attorneys indexed <span style="font-size:9px;color:var(--ink-mute);font-style:italic;letter-spacing:.04em;text-transform:none;display:block;margin-top:4px">as of 2026-05-04 · State Bar public roll</span></div>
</div>
<div class="stat reveal d1">
<span class="seal">ii.</span>
<div class="num">~42,600</div>
<div class="lbl">Firms statewide <span style="font-size:9px;color:var(--ink-mute);font-style:italic;letter-spacing:.04em;text-transform:none;display:block;margin-top:4px">aggregated from the registry</span></div>
</div>
<div class="stat reveal d2">
<span class="seal">iii.</span>
<div class="num">1,016</div>
<div class="lbl">Sites independently audited <span style="font-size:9px;color:var(--ink-mute);font-style:italic;letter-spacing:.04em;text-transform:none;display:block;margin-top:4px"><a href="/methodology.html" style="color:var(--ink-mute);border-bottom:1px dotted var(--rule);padding-bottom:1px">methodology v1.0 →</a></span></div>
</div>
<div class="stat reveal d3">
<span class="seal">iv.</span>
<div class="num">$0<span style="font-size:0.45em;color:var(--ink-mute);font-style:italic;"> to search</span></div>
<div class="lbl">No fee from you, no fee from firms <span style="font-size:9px;color:var(--ink-mute);font-style:italic;letter-spacing:.04em;text-transform:none;display:block;margin-top:4px">we do not refer cases or split fees · §6155</span></div>
</div>
</div>
<div class="proof reveal" aria-label="Six firms drawn from the State Bar of California public registry, listed for illustration.">
<p class="p-eyebrow">Six of 42,636 firms · drawn from the public registry</p>
<div class="p-row">
<span class="p-firm">Hausfeld LLP<span class="p-city">San Francisco</span></span>
<span class="p-firm">Kabateck LLP<span class="p-city">Los Angeles</span></span>
<span class="p-firm">Nossaman LLP<span class="p-city">San Diego</span></span>
<span class="p-firm">Lagerlof LLP<span class="p-city">Pasadena</span></span>
<span class="p-firm">Buchalter LLP<span class="p-city">Sacramento</span></span>
<span class="p-firm">Lydecker LLP<span class="p-city">San Francisco</span></span>
</div>
<p class="p-meta">Drawn at random from State Bar of California public records. No affiliation, endorsement, or compensation. Counsel & Bar is an independent directory operated by a non-attorney.</p>
</div>
</div>
</section>
<section class="features scroll-reveal">
<div class="features-inner">
<p class="section-eyebrow">A directory worth its name</p>
<h2 class="section-title">Built from the public registry. Held to a standard the registry doesn't enforce.</h2>
<div class="feature-grid">
<div class="feat">
<span class="feat-num">01</span>
<h3>Verified, not listed</h3>
<p>Every attorney is checked against the California State Bar's active roll. No expired licenses. No out-of-state imitators. No bots claiming to practice law.</p>
</div>
<div class="feat">
<span class="feat-num">02</span>
<h3>Consultations on the attorney's terms</h3>
<p>Each firm publishes its own consultation fee, schedule, and booking flow. Counsel & Bar never touches the money — payments and engagement letters run directly between you and the attorney.</p>
</div>
<div class="feat">
<span class="feat-num">03</span>
<h3>Browse by city and practice area</h3>
<p>Filter California-licensed firms by ZIP, practice area, and firm size. View profiles, reviews, and contact details. You decide who to call — we don't route, refer, or accept fees from attorneys for placing your case with them.</p>
</div>
<div class="feat">
<span class="feat-num">04</span>
<h3>For attorneys: a premium directory listing</h3>
<p>A claim-and-edit profile, response-management tools, marketing audit, and Stripe payouts. Subscription-based — never a per-case referral fee.</p>
</div>
</div>
</div>
</section>
<!-- Editorial engraving II · banking-engraving guilloché frieze -->
<div class="engraving engraving--frieze scroll-reveal" role="presentation" aria-label="Engraved guilloché frieze — section ornament">
<svg viewBox="0 0 1200 36" width="100%" height="36" preserveAspectRatio="none" aria-hidden="true">
<defs>
<linearGradient id="eng-metal-2" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="rgba(184,153,104,0)"/>
<stop offset="20%" stop-color="rgba(184,153,104,0.85)"/>
<stop offset="50%" stop-color="rgba(212,182,131,1)"/>
<stop offset="80%" stop-color="rgba(184,153,104,0.85)"/>
<stop offset="100%" stop-color="rgba(184,153,104,0)"/>
</linearGradient>
<pattern id="guilloche" x="0" y="0" width="48" height="36" patternUnits="userSpaceOnUse">
<path d="M0 18 Q 12 4 24 18 T 48 18" fill="none" stroke="url(#eng-metal-2)" stroke-width="0.6"/>
<path d="M0 18 Q 12 32 24 18 T 48 18" fill="none" stroke="url(#eng-metal-2)" stroke-width="0.6"/>
<circle cx="12" cy="11" r="0.7" fill="url(#eng-metal-2)" opacity="0.6"/>
<circle cx="36" cy="25" r="0.7" fill="url(#eng-metal-2)" opacity="0.6"/>
</pattern>
</defs>
<rect x="0" y="0" width="1200" height="36" fill="url(#guilloche)" opacity="0.85"/>
<line x1="0" y1="0.5" x2="1200" y2="0.5" stroke="url(#eng-metal-2)" stroke-width="0.5" opacity="0.5"/>
<line x1="0" y1="35.5" x2="1200" y2="35.5" stroke="url(#eng-metal-2)" stroke-width="0.5" opacity="0.5"/>
</svg>
</div>
<section class="closer scroll-reveal">
<div class="colophon-rule" aria-hidden="true"></div>
<div class="colophon">
<p class="colophon-statement">A directory <em>is what its sources are.</em> Ours is the State Bar of California's public roll — indexed in full.</p>
<div class="colophon-stack">
<div class="colophon-stack-row">
<span class="colophon-stack-lbl">Edition</span>
<span class="colophon-stack-val">Volume I · MMXXVI</span>
</div>
<div class="colophon-stack-row">
<span class="colophon-stack-lbl">Source</span>
<span class="colophon-stack-val">CalBar public roll</span>
</div>
<!-- COLOPHON-DATE: hand-edited; bump on every deploy that re-verifies the State Bar roll. Stale value here is a trust liability. -->
<div class="colophon-stack-row">
<span class="colophon-stack-lbl">Last verified</span>
<span class="colophon-stack-val sans">2026 · 05 · 04</span>
</div>
<div class="colophon-stack-row">
<span class="colophon-stack-lbl">Audit</span>
<span class="colophon-stack-val">No charge to any firm</span>
</div>
<div class="colophon-stack-row">
<span class="colophon-stack-lbl">Operator</span>
<span class="colophon-stack-val sans">Independent · non-attorney</span>
</div>
</div>
</div>
<div class="colophon-signature">
<span>Counsel <span class="glyph">&</span> Bar</span>
<span>An indexed registry — not a referral service · §6155</span>
</div>
</section>
<footer>
<div>
<div class="brand-mark">Counsel <span style="color:var(--metal);font-style:italic;">&</span> Bar</div>
<p class="legal"><strong>A directory and software platform.</strong> Not a law firm, not a lawyer referral service, not legal advice. Built from the public California State Bar registry. Not affiliated with the State Bar of California. Always verify license status with the State Bar before retaining anyone. © 2026.</p>
</div>
<div class="col">
<h4>Public</h4>
<a href="/find-a-lawyer">Find counsel</a>
<a href="/audit.html">Site audit</a>
<a href="/methodology.html">Audit methodology</a>
<a href="/style.html">Visual standard</a>
</div>
<div class="col">
<h4>Attorneys</h4>
<a href="/directory">Find your firm</a>
<a href="/signup">Claim your listing</a>
<a href="/login">Sign in</a>
</div>
<div class="col">
<h4>Legal</h4>
<a href="/privacy.html">Privacy</a>
<a href="/terms.html">Terms</a>
<a href="https://apps.calbar.ca.gov/attorney/Licensee/Search" target="_blank" rel="noopener">State Bar lookup ↗</a>
</div>
</footer>
<script>
// Scroll-triggered reveals: editorial fade-up as sections enter viewport
if ('IntersectionObserver' in window && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('in-view');
io.unobserve(e.target);
}
});
}, { threshold: 0.12, rootMargin: '0px 0px -10% 0px' });
document.querySelectorAll('.scroll-reveal').forEach(el => io.observe(el));
} else {
// No IO or reduced-motion: show everything immediately
document.querySelectorAll('.scroll-reveal').forEach(el => el.classList.add('in-view'));
}
</script>
</body>
</html>