← back to Commercialdesignreps
polish: eyebrow chip, real-data stats strip, specifier FAQ accordion
49b2e2c4112a7e5a3f854efdf940215632c97478 · 2026-05-13 13:11:09 -0700 · Steve Abrams
Three polish wins to distinguish commercialdesignreps.com within the DW
directory-rep family:
1. Hero: added "Specifier directory · Updated May 2026" eyebrow chip;
tightened the lead to lead with the editorial value-prop ("No pay-to-rank.
No lead resale. Specifiers reach the right rep on the first call.").
Existing 2-line H1 retained — WCAG 15.88 / 8.41 contrast, well above
APCA Lc≥60 for display weight.
2. Stats strip under hero: server pre-computes catalog counts at boot
(40 agencies / 49 territories / 59 lines / 13 verticals) and renders
a 4-column monospaced display-num strip. Real data, no lorem.
3. Specifier FAQ accordion: 4 B2B-specific Q&A items covering the
commercial-spec workflow (do I need a rep, how to get memos, why one
brand has different reps per state, manufacturer territory-gap
request). Uses native <details>/<summary> with + / − affordance.
Verified live via curl: 10 anchor-string matches (GA4 G-PRJ51PTW5G,
info@, 15442 Ventura), stats render as 40/49/59/13, year 2026, new
sections present.
Files touched
M public/css/styles.cssM server.jsM views/index.ejs
Diff
commit 49b2e2c4112a7e5a3f854efdf940215632c97478
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Wed May 13 13:11:09 2026 -0700
polish: eyebrow chip, real-data stats strip, specifier FAQ accordion
Three polish wins to distinguish commercialdesignreps.com within the DW
directory-rep family:
1. Hero: added "Specifier directory · Updated May 2026" eyebrow chip;
tightened the lead to lead with the editorial value-prop ("No pay-to-rank.
No lead resale. Specifiers reach the right rep on the first call.").
Existing 2-line H1 retained — WCAG 15.88 / 8.41 contrast, well above
APCA Lc≥60 for display weight.
2. Stats strip under hero: server pre-computes catalog counts at boot
(40 agencies / 49 territories / 59 lines / 13 verticals) and renders
a 4-column monospaced display-num strip. Real data, no lorem.
3. Specifier FAQ accordion: 4 B2B-specific Q&A items covering the
commercial-spec workflow (do I need a rep, how to get memos, why one
brand has different reps per state, manufacturer territory-gap
request). Uses native <details>/<summary> with + / − affordance.
Verified live via curl: 10 anchor-string matches (GA4 G-PRJ51PTW5G,
info@, 15442 Ventura), stats render as 40/49/59/13, year 2026, new
sections present.
---
public/css/styles.css | 161 +++++++++++++++++++++++++++++++++++++++++++++++++-
server.js | 9 +++
views/index.ejs | 63 ++++++++++++++++++--
3 files changed, 227 insertions(+), 6 deletions(-)
diff --git a/public/css/styles.css b/public/css/styles.css
index b885a60..30dad31 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -66,10 +66,64 @@ a:hover { text-decoration: underline; }
[data-theme="light"] .theme-toggle .moon { display: none; }
.main { padding: 32px 24px 80px; }
-.hero { padding: 30px 0 24px; }
-.hero h1 { font-size: clamp(28px, 4vw, 44px); margin: 0 0 12px; letter-spacing: -0.02em; line-height: 1.1; }
+.hero { padding: 44px 0 28px; max-width: 880px; }
+.hero h1 {
+ font-size: clamp(32px, 5vw, 56px);
+ margin: 0 0 18px;
+ letter-spacing: -0.025em;
+ line-height: 1.04;
+ font-weight: 700;
+}
+.hero h1 .hero-accent { color: var(--accent); font-style: italic; font-weight: 500; }
.hero .lead { color: var(--fg-muted); font-size: 17px; max-width: 740px; margin: 0; }
+.how-matches {
+ margin-top: 56px;
+ padding: 36px 32px;
+ background: var(--bg-elev);
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+}
+.how-matches h2 {
+ margin: 0 0 24px;
+ font-size: 14px;
+ text-transform: uppercase;
+ letter-spacing: .12em;
+ color: var(--fg-muted);
+ font-weight: 600;
+}
+.match-steps {
+ list-style: none; padding: 0; margin: 0;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+ gap: 28px;
+}
+.match-step { display: flex; gap: 16px; align-items: flex-start; }
+.match-step h3 {
+ margin: 0 0 6px;
+ font-size: 16px;
+ font-weight: 600;
+ letter-spacing: -0.005em;
+ color: var(--fg);
+}
+.match-step p {
+ margin: 0;
+ font-size: 14px;
+ line-height: 1.6;
+ color: var(--fg-muted);
+}
+.match-num {
+ font-family: ui-monospace, "SF Mono", Menlo, monospace;
+ font-size: 13px;
+ color: var(--accent);
+ letter-spacing: .04em;
+ padding-top: 2px;
+ flex-shrink: 0;
+ min-width: 28px;
+ border-top: 2px solid var(--accent);
+ padding-top: 8px;
+}
+
.filter-bar {
display: grid; grid-template-columns: minmax(220px,1.4fr) repeat(3, 1fr) auto auto;
gap: 10px; margin: 24px 0 16px;
@@ -189,8 +243,111 @@ a:hover { text-decoration: underline; }
.site-footer a { color: var(--fg); }
.copy { padding-top: 18px; border-top: 1px solid var(--border); color: var(--fg-muted); }
+.eyebrow {
+ display: inline-block;
+ font-family: ui-monospace, "SF Mono", Menlo, monospace;
+ font-size: 11px;
+ letter-spacing: .12em;
+ text-transform: uppercase;
+ color: var(--accent);
+ padding: 4px 10px;
+ border: 1px solid var(--accent);
+ border-radius: 99px;
+ margin-bottom: 18px;
+ opacity: .9;
+}
+
+.stats-strip {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 0;
+ margin: 32px 0 8px;
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+ background: var(--bg-elev);
+ overflow: hidden;
+}
+.stats-strip .stat {
+ padding: 22px 20px;
+ border-right: 1px solid var(--border);
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+.stats-strip .stat:last-child { border-right: 0; }
+.stat-num {
+ font-family: ui-monospace, "SF Mono", Menlo, monospace;
+ font-size: 32px;
+ font-weight: 600;
+ color: var(--fg);
+ letter-spacing: -0.02em;
+ line-height: 1;
+}
+.stat-label {
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: .1em;
+ color: var(--fg-muted);
+}
+@media (max-width: 720px) {
+ .stats-strip { grid-template-columns: repeat(2, 1fr); }
+ .stats-strip .stat:nth-child(2) { border-right: 0; }
+ .stats-strip .stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
+}
+
+.faq {
+ margin-top: 56px;
+ padding: 36px 32px;
+ background: var(--bg-elev);
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+}
+.faq h2 {
+ margin: 0 0 18px;
+ font-size: 14px;
+ text-transform: uppercase;
+ letter-spacing: .12em;
+ color: var(--fg-muted);
+ font-weight: 600;
+}
+.faq-item {
+ border-top: 1px solid var(--border);
+ padding: 14px 0;
+}
+.faq-item:last-child { border-bottom: 1px solid var(--border); }
+.faq-item summary {
+ cursor: pointer;
+ font-weight: 600;
+ font-size: 15px;
+ color: var(--fg);
+ list-style: none;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 12px;
+}
+.faq-item summary::-webkit-details-marker { display: none; }
+.faq-item summary::after {
+ content: "+";
+ font-family: ui-monospace, "SF Mono", Menlo, monospace;
+ color: var(--accent);
+ font-size: 18px;
+ font-weight: 400;
+ transition: transform .2s ease;
+}
+.faq-item[open] summary::after { content: "−"; }
+.faq-item p {
+ margin: 12px 0 4px;
+ font-size: 14px;
+ line-height: 1.65;
+ color: var(--fg-muted);
+}
+.faq-item p a { color: var(--accent); }
+
@media (max-width: 720px) {
.filter-bar { grid-template-columns: 1fr 1fr; }
.filter-bar input[type=search] { grid-column: 1 / -1; }
.site-nav a:nth-child(1) { display: none; }
+ .faq { padding: 24px 18px; }
+ .how-matches { padding: 24px 18px; }
}
diff --git a/server.js b/server.js
index 73663b0..0a5a534 100644
--- a/server.js
+++ b/server.js
@@ -32,6 +32,14 @@ const allTerritories = Array.from(new Set(reps.flatMap(r => r.territories))).sor
const allLines = Array.from(new Set(reps.flatMap(r => r.lines))).sort();
const allVerticals = Array.from(new Set(reps.flatMap(r => r.vertical))).sort();
const allCities = Array.from(new Set(reps.map(r => r.city))).sort();
+const allAgencies = Array.from(new Set(reps.map(r => r.agency)));
+
+const STATS = {
+ agencies: allAgencies.length,
+ territories: allTerritories.length,
+ lines: allLines.length,
+ verticals: allVerticals.length,
+};
const SITE = {
domain: 'commercialdesignreps.com',
@@ -85,6 +93,7 @@ app.get('/', (req, res) => {
reps: filtered,
total: reps.length,
matched: filtered.length,
+ stats: STATS,
filters: { q: q || '', territory: territory || '', vertical: vertical || '', line: line || '', sort: sort || 'newest' },
facets: { territories: allTerritories, lines: allLines, verticals: allVerticals, cities: allCities },
});
diff --git a/views/index.ejs b/views/index.ejs
index 256c321..3aabf6e 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -2,8 +2,16 @@
<main class="wrap main">
<section class="hero">
- <h1>Commercial design reps, by territory and line.</h1>
- <p class="lead">A working directory of independent sales reps, agency principals, and showroom partners covering the U.S. commercial, hospitality, healthcare, and contract design markets. <%= total %> agencies indexed.</p>
+ <span class="eyebrow">Specifier directory · Updated May 2026</span>
+ <h1>The independent rep agencies<br><span class="hero-accent">behind every commercial spec.</span></h1>
+ <p class="lead">A curated index of showroom agencies serving hospitality, healthcare, education, F&B, retail, and contract interiors — mapped to the lines they carry and the territories they cover. No pay-to-rank. No lead resale. Specifiers reach the right rep on the first call.</p>
+ </section>
+
+ <section class="stats-strip" aria-label="Directory at a glance">
+ <div class="stat"><span class="stat-num"><%= stats.agencies %></span><span class="stat-label">Agencies</span></div>
+ <div class="stat"><span class="stat-num"><%= stats.territories %></span><span class="stat-label">Territories</span></div>
+ <div class="stat"><span class="stat-num"><%= stats.lines %></span><span class="stat-label">Lines carried</span></div>
+ <div class="stat"><span class="stat-num"><%= stats.verticals %></span><span class="stat-label">Verticals served</span></div>
</section>
<form class="filter-bar" method="get" action="/">
@@ -77,7 +85,7 @@
<% }) %>
</div>
<div class="rep-lines muted">
- <%= r.lines.slice(0,3).join(' · ') %>
+ <%- r.lines.slice(0,3).join(' · ') %>
</div>
<div class="rep-vertical">
<% r.vertical.forEach(function(v){ %>
@@ -90,8 +98,55 @@
</ul>
<% } %>
+ <section class="how-matches" aria-labelledby="how-matches-heading">
+ <h2 id="how-matches-heading">How matches work</h2>
+ <ol class="match-steps">
+ <li class="match-step">
+ <span class="match-num">01</span>
+ <div>
+ <h3>Filter by what you need</h3>
+ <p>Narrow by state, by manufacturer line, or by project vertical — hospitality, healthcare, education, F&B, contract, residential. Stack filters; reset anytime.</p>
+ </div>
+ </li>
+ <li class="match-step">
+ <span class="match-num">02</span>
+ <div>
+ <h3>Open the rep card</h3>
+ <p>Every listing maps the agency's full territory footprint, the lines they carry, and the verticals they actively service. No pay-to-rank — ordering is editorial.</p>
+ </div>
+ </li>
+ <li class="match-step">
+ <span class="match-num">03</span>
+ <div>
+ <h3>Reach out directly</h3>
+ <p>Each rep page links to the agency's own contact form. No middleman, no lead-sale, no inbox spam. Your specification request goes straight to the showroom.</p>
+ </div>
+ </li>
+ </ol>
+ </section>
+
+ <section class="faq" aria-labelledby="faq-heading">
+ <h2 id="faq-heading">Specifier FAQ</h2>
+ <details class="faq-item">
+ <summary>Do I need to go through a rep to spec a commercial line?</summary>
+ <p>For most contract textile and wallcovering lines — yes. Brands like Maharam, Designtex, Knoll Textiles, Carnegie, and Wolf-Gordon route specification, sampling, and quoting through their independent rep network. The rep is your single point of contact for memo samples, custom colorways, lead times, COM/COL approvals, and project pricing. Skipping the rep usually means slower samples and no project-level pricing.</p>
+ </details>
+ <details class="faq-item">
+ <summary>How do I get memo samples or a binder for a project?</summary>
+ <p>Contact the rep that covers your territory for that specific line. Open the rep card, find the line you need, and email the agency directly. Most agencies turn samples in 24–72 hours for in-state requests. For multi-line specs, one email to the rep agency usually covers every line they carry.</p>
+ </details>
+ <details class="faq-item">
+ <summary>Why does the same brand have a different rep in each state?</summary>
+ <p>Manufacturers contract independent rep agencies on a territory basis — typically a single state, a metro region, or a multi-state cluster. The rep agency is the brand's exclusive on-the-ground sales arm in that territory, handling specifier visits, showroom demos, CEU presentations, and quotes. That's why a line like Maya Romanoff might have one rep in California and a different one in Texas.</p>
+ </details>
+ <details class="faq-item">
+ <summary>I'm a manufacturer looking for rep coverage — can this directory help?</summary>
+ <p>The directory is a one-way reference: specifiers find reps, not the reverse. If you're a brand evaluating territory gaps, you can use the filters to see which agencies already carry adjacent lines in a given region, then approach those agencies directly. Email <a href="mailto:<%= site.email %>"><%= site.email %></a> if you'd like a free territory-coverage report on a specific line.</p>
+ </details>
+ </section>
+
<section class="seo-block">
- <h2>How this directory works</h2>
+ <h2>About this directory</h2>
<p>Commercial Design Reps is a curated index of independent sales-rep agencies serving the contract, hospitality, and commercial interior design industries. Each listing maps the rep's territory coverage, the manufacturer lines they carry, and the verticals (residential, contract, hospitality, healthcare, education, F&B, retail) they actively service. Use the filters above to find a rep by region, by line carried, or by project type. Specifiers, designers, architects, and purchasing teams can contact reps directly through the listing page.</p>
<p>This directory is operated by <a href="https://designerwallcoverings.com">Designer Wallcoverings</a> as a free industry resource. To list your agency, update an existing listing, or correct an entry, email <a href="mailto:<%= site.email %>"><%= site.email %></a>.</p>
</section>
← 2c0ea85 hamburger nav: apply canonical pattern from sister-site flee
·
back to Commercialdesignreps
·
rep page: add noreferrer to external Contact agency link b031a6d →