← back to Lawyer Directory Builder
Iter 28: /directory — champagne tiers + monogram + Volume strip + critical compliance decoupling
afcb5d7ad8a528a5e13647203a6063c1f3f51978 · 2026-05-04 02:23:48 -0700 · SteveStudio2
Visual:
- Monogram added to brand header (was bare text)
- Volume strip 'Edition 2026 · Attorney Self-Service'
- Italic-metal display 'Find your firm. Audit your site. Reserve an EZ Upgrade.'
- Score colors traffic-light → champagne tiers (tier-a/b/c/d/x), tabular-nums
- 'Marketing health score' → 'Site signals · methodology v1.0' (matches /audit.html)
- Lede: 'twelve published signals'; 'typical go-live: seven business days from content intake'
Debate-team-fast caught CRITICAL pay-to-play §6155 risk that I fixed before commit:
1. SCORE-UPGRADE DECOUPLING — old layout: low-score panel → directly into
$499 EZ Upgrade pitch with copy 'designed to close the gap your audit
just exposed.' That's a textbook §6155 implication: directory shows a
score, then sells you a fix for the score. Replaced with:
a. <details> disclosure 'See what an EZ Upgrade looks like for this
firm' between score and pitch — pitch is now collapsed by default
so a low score doesn't auto-render a paid-product offer next to it
b. 'Designed to close the gap your audit just exposed' copy DELETED.
Replaced with neutral 'An independent site-build service offered
by Counsel & Bar. Available to any California-licensed attorney
whether or not they're audited; the directory listing remains
free either way.'
c. Price card adds line 'Site-build service. NOT a directory
placement fee.'
2. 'WHAT THIS SCORE IS AND ISN'T' aside between score and upgrade — Rule
7.1 substantiation block: 'measures twelve technical/presentation
attributes... it is not a measure of legal skill, client outcomes, or
professional reputation.' Plus 'audit is independent of and not
contingent on the upgrade purchase' explicit decoupling.
3. PRICE FONT WEIGHT REDUCED — was 72px metal-glow $499 directly under
96px metal score, reading like 'big number → big number → buy.' Price
now 48px ink-soft. Score remains the dominant numeral on the page.
4. NO-AUDIT FALLBACK COPY rewritten — removed 'we'll run a full audit as
part of the upgrade' (bundles audit into paid product). Now: 'Site
not yet audited. Methodology v1.0 covers twelve published signals.
We'll add this firm to the audit queue if you claim the listing.'
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Files touched
M src/server/directory.ts
Diff
commit afcb5d7ad8a528a5e13647203a6063c1f3f51978
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date: Mon May 4 02:23:48 2026 -0700
Iter 28: /directory — champagne tiers + monogram + Volume strip + critical compliance decoupling
Visual:
- Monogram added to brand header (was bare text)
- Volume strip 'Edition 2026 · Attorney Self-Service'
- Italic-metal display 'Find your firm. Audit your site. Reserve an EZ Upgrade.'
- Score colors traffic-light → champagne tiers (tier-a/b/c/d/x), tabular-nums
- 'Marketing health score' → 'Site signals · methodology v1.0' (matches /audit.html)
- Lede: 'twelve published signals'; 'typical go-live: seven business days from content intake'
Debate-team-fast caught CRITICAL pay-to-play §6155 risk that I fixed before commit:
1. SCORE-UPGRADE DECOUPLING — old layout: low-score panel → directly into
$499 EZ Upgrade pitch with copy 'designed to close the gap your audit
just exposed.' That's a textbook §6155 implication: directory shows a
score, then sells you a fix for the score. Replaced with:
a. <details> disclosure 'See what an EZ Upgrade looks like for this
firm' between score and pitch — pitch is now collapsed by default
so a low score doesn't auto-render a paid-product offer next to it
b. 'Designed to close the gap your audit just exposed' copy DELETED.
Replaced with neutral 'An independent site-build service offered
by Counsel & Bar. Available to any California-licensed attorney
whether or not they're audited; the directory listing remains
free either way.'
c. Price card adds line 'Site-build service. NOT a directory
placement fee.'
2. 'WHAT THIS SCORE IS AND ISN'T' aside between score and upgrade — Rule
7.1 substantiation block: 'measures twelve technical/presentation
attributes... it is not a measure of legal skill, client outcomes, or
professional reputation.' Plus 'audit is independent of and not
contingent on the upgrade purchase' explicit decoupling.
3. PRICE FONT WEIGHT REDUCED — was 72px metal-glow $499 directly under
96px metal score, reading like 'big number → big number → buy.' Price
now 48px ink-soft. Score remains the dominant numeral on the page.
4. NO-AUDIT FALLBACK COPY rewritten — removed 'we'll run a full audit as
part of the upgrade' (bundles audit into paid product). Now: 'Site
not yet audited. Methodology v1.0 covers twelve published signals.
We'll add this firm to the audit queue if you claim the listing.'
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
src/server/directory.ts | 100 +++++++++++++++++++++++++++++++++---------------
1 file changed, 69 insertions(+), 31 deletions(-)
diff --git a/src/server/directory.ts b/src/server/directory.ts
index 212144b..ba297f5 100644
--- a/src/server/directory.ts
+++ b/src/server/directory.ts
@@ -126,11 +126,18 @@ header.brand h1 .amp{color:var(--metal);font-style:italic;padding:0 4px}
.panel .field span{color:var(--ink);text-align:right;word-break:break-word}
.score-display{display:flex;align-items:baseline;gap:18px;margin-bottom:24px}
-.score-display .num{font-family:var(--serif);font-weight:300;font-size:96px;line-height:1;color:var(--metal);letter-spacing:-.02em}
-.score-display .num.low{color:var(--bad)}
-.score-display .num.mid{color:var(--warn)}
-.score-display .num.high{color:var(--good)}
+.score-display .num{font-family:var(--serif);font-weight:300;font-size:96px;line-height:1;color:var(--metal);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
+.score-display .num.tier-a{color:var(--metal-glow)}
+.score-display .num.tier-b{color:var(--metal)}
+.score-display .num.tier-c{color:#a07a40}
+.score-display .num.tier-d{color:#5a4220;font-weight:400}
+.score-display .num.tier-x{color:var(--ink-mute);font-style:italic;font-size:42px}
.score-display .of{font-size:20px;color:var(--ink-mute);font-weight:300}
+.dir-vol{display:flex;align-items:center;gap:18px;margin:0 0 26px;color:var(--metal)}
+.dir-vol .v-rule{flex:0 0 56px;height:1px;background:linear-gradient(90deg,transparent,var(--metal) 50%,transparent)}
+.dir-vol .v-text{font-family:var(--serif);font-style:italic;font-weight:400;font-size:14px;letter-spacing:.02em}
+.dir-vol .v-meta{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-mute);font-weight:500}
+.brand-mono{display:inline-flex;align-items:center;gap:14px;text-decoration:none}
.score-label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:18px}
.suggestions{list-style:none;padding:0;margin:18px 0 0}
.suggestions li{padding:10px 0;border-bottom:1px solid var(--rule-faint);font-size:14px;color:var(--ink-soft);display:flex;gap:12px;align-items:flex-start}
@@ -150,12 +157,25 @@ header.brand h1 .amp{color:var(--metal);font-style:italic;padding:0 4px}
.upgrade ul li{padding:6px 0;font-size:13px;color:var(--ink-soft)}
.upgrade ul li:before{content:'✓';color:var(--metal);margin-right:10px;font-weight:600}
.upgrade .price-card{background:var(--noir-deep);border:1px solid var(--rule);padding:32px;text-align:center}
-.upgrade .price-card .amount{font-family:var(--serif);font-weight:300;font-size:72px;line-height:1;color:var(--metal);letter-spacing:-.02em;margin:0}
+.upgrade .price-card .amount{font-family:var(--serif);font-weight:300;font-size:48px;line-height:1;color:var(--ink-soft);letter-spacing:-.01em;margin:0}
.upgrade .price-card .one-time{font-size:11px;color:var(--ink-mute);letter-spacing:.22em;text-transform:uppercase;margin:10px 0 0}
.upgrade .price-card .turnaround{font-size:13px;color:var(--ink-soft);margin:18px 0 24px;font-style:italic}
.cta-claim{display:block;width:100%;padding:18px 24px;background:var(--metal);color:var(--noir);border:1px solid var(--metal);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;text-align:center;text-decoration:none;cursor:pointer;transition:background 220ms ease}
.cta-claim:hover{background:var(--metal-glow);color:var(--noir)}
+/* Score-vs-upgrade decoupling — Rule 7.1 / §6155 surface */
+.score-disclaimer{max-width:1200px;margin:32px auto 0;padding:24px 32px;border:1px solid var(--rule);background:linear-gradient(180deg,rgba(184,153,104,.018),transparent)}
+.score-disclaimer .sd-eyebrow{font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--metal);font-weight:500;margin:0 0 12px}
+.score-disclaimer p{font-size:13px;line-height:1.7;color:var(--ink-soft);margin:0;max-width:none}
+.score-disclaimer p strong{color:var(--ink);font-weight:500}
+.upgrade-disclosure{max-width:1200px;margin:32px auto 0}
+.upgrade-disclosure[open] .up-chev{transform:rotate(90deg)}
+.upgrade-summary{cursor:pointer;list-style:none;padding:18px 24px;border:1px solid var(--rule);background:transparent;color:var(--metal);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;display:flex;justify-content:space-between;align-items:center;transition:border-color 200ms ease,color 200ms ease}
+.upgrade-summary::-webkit-details-marker{display:none}
+.upgrade-summary:hover{border-color:var(--metal);color:var(--metal-glow)}
+.up-chev{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1;transition:transform 280ms ease;color:var(--metal)}
+.upgrade-disclosure .upgrade{margin-top:0;border-top:none}
+
/* ── Map (browse the registry) ── */
.browse{padding:80px 48px;border-bottom:1px solid var(--rule)}
.browse-head{max-width:1200px;margin:0 auto 32px}
@@ -197,7 +217,7 @@ footer{padding:48px;border-top:1px solid var(--rule);background:var(--noir);colo
</head><body>
<header class="brand">
- <h1><a href="/">Counsel <span class="amp">&</span> Bar</a></h1>
+ <a class="brand-mono" href="/"><svg viewBox="0 0 28 28" width="28" height="28" aria-hidden="true" style="flex:0 0 28px"><defs><linearGradient id="cb-dir" 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" fill="none" stroke="url(#cb-dir)" stroke-width="1"/><path fill="url(#cb-dir)" 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><h1 style="margin:0"><span style="color:var(--ink)">Counsel</span> <span class="amp">&</span> <span style="color:var(--ink)">Bar</span></h1></a>
<nav class="topnav">
<a href="/find-a-lawyer">Find counsel</a>
<a href="/directory">Directory</a>
@@ -207,9 +227,13 @@ footer{padding:48px;border-top:1px solid var(--rule);background:var(--noir);colo
</header>
<section class="hero">
- <p class="eyebrow">For attorneys · find yourself, claim, upgrade</p>
- <h1>Find your firm.<br>Audit your site.<br>Get a personalized <em>upgrade.</em></h1>
- <p class="lede">Type your name. We pull your CalBar listing, audit your current site for the twelve marketing signals that move conversions, and show you exactly what an EZ Upgrade — same domain, dramatically better presentation — would look like. Live in seven days.</p>
+ <div class="dir-vol">
+ <span class="v-rule"></span>
+ <span class="v-text">Volume I</span>
+ <span class="v-meta">Edition 2026 · Attorney Self-Service</span>
+ </div>
+ <h1>Find your firm.<br>Audit your site.<br>Reserve an <em>EZ Upgrade.</em></h1>
+ <p class="lede">Type your name. We pull your State Bar listing, audit your current site against twelve published signals, and show you what the EZ Upgrade — same domain, dramatically better presentation — would look like. Typical go-live: seven business days from content intake.</p>
<div class="search-wrap">
<input class="search-input" id="search" placeholder="Type your name to find your firm in the registry" autocomplete="off">
@@ -239,38 +263,46 @@ footer{padding:48px;border-top:1px solid var(--rule);background:var(--noir);colo
<h3>Site audit</h3>
<div id="r-audit-loading" class="no-audit">Loading audit…</div>
<div id="r-audit" style="display:none">
- <div class="score-label">Marketing health score</div>
+ <div class="score-label">Site signals · methodology v1.0</div>
<div class="score-display"><div class="num" id="r-score">—</div><div class="of">/ 100</div></div>
<div class="score-label" style="margin-top:18px">Top fixes the EZ Upgrade addresses</div>
<ul class="suggestions" id="r-suggestions"></ul>
</div>
<div id="r-no-audit" class="no-audit" style="display:none">
- We haven't audited your site yet — we'll run a full audit as part of the upgrade.
+ Site not yet audited. Methodology v1.0 covers twelve published signals (HTTPS, mobile viewport, schema markup, social card image, etc.) — we'll add this firm to the audit queue if you claim the listing.
</div>
</div>
</div>
- <div class="upgrade">
- <div class="upgrade-grid">
- <div>
- <h2>The <em>EZ Upgrade.</em></h2>
- <p>We rebuild your website on the same domain. Same content, same firm — dramatically better presentation. Designed to close the gap your audit just exposed.</p>
- <ul>
- <li>Cinematic homepage rewrite, mobile-first</li>
- <li>30-min Zoom-consult booking page (Stripe payouts go to you)</li>
- <li>HTTPS, OG image, schema markup, GA4 — every audit signal fixed</li>
- <li>Live in 7 days · 14-day revision window</li>
- <li>No subscription · pay once · keep the site forever</li>
- </ul>
- </div>
- <div class="price-card">
- <p class="amount">$499</p>
- <p class="one-time">One-time</p>
- <p class="turnaround">Live in 7 days · revisions through day 14</p>
- <a class="cta-claim" id="cta-claim" href="/signup">Claim & Upgrade →</a>
+ <aside class="score-disclaimer">
+ <p class="sd-eyebrow">— What this score is and isn't —</p>
+ <p>The <strong>site signals</strong> figure measures twelve technical and presentation attributes of the firm's website (HTTPS, mobile viewport, schema markup, page weight, etc.) against published methodology v1.0. <strong>It is not a measure of legal skill, client outcomes, or professional reputation</strong> — those are not within the scope of any independent web audit. The audit is published independently of any commercial offering; <strong>purchasing the EZ Upgrade is in no way required to receive, view, or correct your score</strong>. To request removal or correction, email the address in the footer.</p>
+ </aside>
+
+ <details class="upgrade-disclosure">
+ <summary class="upgrade-summary">See what an EZ Upgrade looks like for this firm <span class="up-chev">›</span></summary>
+ <div class="upgrade">
+ <div class="upgrade-grid">
+ <div>
+ <h2>The <em>EZ Upgrade.</em></h2>
+ <p>An independent site-build service offered by Counsel & Bar. Same domain, dramatically better presentation. Available to any California-licensed attorney whether or not they're audited; the directory listing remains free either way.</p>
+ <ul>
+ <li>Editorial homepage rewrite, mobile-first</li>
+ <li>30-min Zoom-consult booking page (Stripe payouts go to you)</li>
+ <li>HTTPS, social card, schema markup, analytics — current standards</li>
+ <li>Typical go-live: seven business days from content intake</li>
+ <li>14-day revision window from first proof · no subscription · pay once</li>
+ </ul>
+ </div>
+ <div class="price-card">
+ <p class="amount">$499</p>
+ <p class="one-time">USD · one-time</p>
+ <p class="turnaround">Site-build service. <strong>Not</strong> a directory placement fee.</p>
+ <a class="cta-claim" id="cta-claim" href="/signup">Claim listing & reserve →</a>
+ </div>
</div>
</div>
- </div>
+ </details>
</section>
<section class="browse">
@@ -321,7 +353,13 @@ footer{padding:48px;border-top:1px solid var(--rule);background:var(--noir);colo
<script>
(function(){
function esc(s){ return String(s == null ? '' : s).replace(/[&<>"']/g, function(c){ return ({'&':'&','<':'<','>':'>','"':'"',"'":'''})[c]; }); }
- function scoreClass(s){ if (s == null) return ''; if (s >= 70) return 'high'; if (s >= 45) return 'mid'; return 'low'; }
+ function scoreClass(s){
+ if (s == null) return 'tier-x';
+ if (s >= 90) return 'tier-a';
+ if (s >= 70) return 'tier-b';
+ if (s >= 50) return 'tier-c';
+ return 'tier-d';
+ }
// ── Autocomplete + selection
var inp = document.getElementById('search');
← 50c720e Iter 27: /find-a-lawyer submit-disable + loading state + 'cu
·
back to Lawyer Directory Builder
·
Iter 29: /methodology page — closes the Rule 7.1 substantiat c9f2fae →