polish: editorial hero, distinctive 'How matches work' section, tightened title

bebb97f7f3c64f16809720ec62f13375c6161c58 · 2026-05-13 15:49:18 -0700 · Steve Abrams
Files touched

M public/css/styles.css
M server.js
M views/index.ejs
Diff

commit bebb97f7f3c64f16809720ec62f13375c6161c58
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Wed May 13 15:49:18 2026 -0700

    polish: editorial hero, distinctive 'How matches work' section, tightened title
---
 public/css/styles.css | 86 +++++++++++++++++++++++++++++++++++++++++++++++++--
 server.js             |  4 +--
 views/index.ejs       | 35 ++++++++++++++++-----
 3 files changed, 113 insertions(+), 12 deletions(-)

diff --git a/public/css/styles.css b/public/css/styles.css
index fa1ac7e..77206e4 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -79,9 +79,89 @@ 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 .lead { color: var(--fg-muted); font-size: 17px; max-width: 820px; margin: 0; }
+.hero {
+  padding: 56px 0 36px;
+  position: relative;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 28px;
+}
+.hero::before {
+  content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 3px;
+  background: linear-gradient(90deg, var(--accent), transparent);
+}
+.hero h1 {
+  font-size: clamp(34px, 5.2vw, 60px);
+  margin: 0 0 18px;
+  letter-spacing: -0.025em;
+  line-height: 1.04;
+  font-weight: 700;
+  display: block;
+}
+.hero h1 .hero-line-1 { display: block; color: var(--fg); }
+.hero h1 .hero-line-2 {
+  display: block;
+  color: var(--accent);
+  font-weight: 600;
+  font-style: italic;
+  letter-spacing: -0.02em;
+}
+.hero .lead { color: var(--fg-muted); font-size: 17px; max-width: 760px; margin: 0; line-height: 1.6; }
+.hero .lead strong { color: var(--fg); font-weight: 600; }
+
+.how-it-works {
+  margin-top: 60px;
+  padding-top: 36px;
+  border-top: 1px solid var(--border);
+}
+.hiw-head { max-width: 760px; margin: 0 0 28px; }
+.hiw-eyebrow {
+  display: inline-block; font-size: 11px; text-transform: uppercase;
+  letter-spacing: .14em; color: var(--accent); font-weight: 700;
+  padding: 4px 10px; border: 1px solid var(--accent);
+  border-radius: 4px; margin-bottom: 14px;
+}
+.hiw-head h2 {
+  font-size: clamp(22px, 2.8vw, 30px);
+  margin: 0; letter-spacing: -0.015em;
+  line-height: 1.2; color: var(--fg); font-weight: 600;
+}
+.hiw-steps {
+  list-style: none; padding: 0; margin: 0 0 26px;
+  display: grid; gap: 18px;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+}
+.hiw-steps li {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: 10px;
+  padding: 22px 22px 20px;
+  position: relative;
+}
+.hiw-num {
+  display: block;
+  font-size: 12px; font-weight: 700;
+  color: var(--accent);
+  letter-spacing: .12em;
+  margin-bottom: 10px;
+  font-variant-numeric: tabular-nums;
+}
+.hiw-steps h3 {
+  font-size: 16px; font-weight: 600; margin: 0 0 8px;
+  color: var(--fg); letter-spacing: -0.005em;
+}
+.hiw-steps p {
+  font-size: 14px; color: var(--fg-muted);
+  margin: 0; line-height: 1.55;
+}
+.hiw-note {
+  font-size: 13px; color: var(--fg-muted);
+  margin: 0; padding: 14px 16px;
+  background: var(--bg-elev);
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  line-height: 1.6;
+}
 
 .filter-bar {
   display: grid;
diff --git a/server.js b/server.js
index a8db24f..a45e9d2 100644
--- a/server.js
+++ b/server.js
@@ -37,8 +37,8 @@ const allLines = Array.from(new Set(distributors.flatMap(d => d.lines_carried)))
 const SITE = {
   domain: 'wallpaperdistributors.com',
   name: 'Wallpaper Distributors',
-  tagline: 'Where to source wallpaper — distributors and the lines they carry',
-  description: 'Directory of B2B wallcovering distributors and the vendor lines each one carries. Designers, architects, FF&E purchasing, and trade buyers can find which distributor stocks Schumacher, Thibaut, Phillip Jeffries, Cole & Son, Maya Romanoff, Wolf-Gordon, Designer Wallcoverings, and other major lines for residential, hospitality, healthcare, and commercial projects.',
+  tagline: 'B2B wallcovering distributors, mapped to the lines they carry',
+  description: 'Trade index of B2B wallcovering distributors across the U.S. and Canada — searchable by vendor line, region, and project segment. Find which distributor stocks Schumacher, Thibaut, Phillip Jeffries, Cole & Son, Maya Romanoff, Wolf-Gordon, Kravet, and other lines for residential, hospitality, healthcare, multifamily, and commercial projects.',
   email: 'info@wallpaperdistributors.com',
   phone: '888-373-4564',
   address: 'Designer Wallcoverings, 15442 Ventura Bl #102, Sherman Oaks CA 91403',
diff --git a/views/index.ejs b/views/index.ejs
index dc04eea..df7639f 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -2,8 +2,11 @@
 
 <main class="wrap main">
   <section class="hero">
-    <h1>Find which distributor carries the line you need.</h1>
-    <p class="lead">A working directory of B2B wallcovering distributors and the vendor lines each one stocks. Designers, architects, FF&amp;E purchasing, and trade buyers can use this to find which distributor carries Schumacher, Thibaut, Phillip Jeffries, Cole &amp; Son, Maya Romanoff, Wolf-Gordon, Designer Wallcoverings, and other major lines for residential, hospitality, healthcare, and commercial projects. <%= total %> distributors indexed, covering <%= facets.lines.length %> lines.</p>
+    <h1>
+      <span class="hero-line-1">Every wallcovering line.</span>
+      <span class="hero-line-2">Mapped to who actually stocks it.</span>
+    </h1>
+    <p class="lead">A trade index of B2B wallcovering distributors across the U.S. and Canada &mdash; searchable by vendor line, region, and project segment. <strong><%= total %></strong> distributors indexed, <strong><%= facets.lines.length %></strong> lines mapped, <strong><%= facets.regions.length %></strong> regions covered.</p>
   </section>
 
   <form class="filter-bar" method="get" action="/">
@@ -96,11 +99,29 @@
     </ul>
   <% } %>
 
-  <section class="seo-block">
-    <h2>How this directory works</h2>
-    <p>Wallpaper Distributors is a curated index of B2B wallcovering distributors operating in the United States and Canada. Each listing maps the distributor's regional coverage, the project segments they actively serve (residential trade, residential retail, hospitality FF&amp;E, healthcare, education, commercial, multifamily, government, resort), the vendor lines they carry, whether they sell trade-only or trade-plus-retail, whether they keep a physical showroom, whether they offer a memo / CFA program, and minimum-order thresholds.</p>
-    <p>This directory exists because designers, architects, and purchasing teams routinely need to find which distributor stocks a specific line in their region. The major to-the-trade houses (Kravet, Schumacher, Thibaut, Phillip Jeffries) sell direct in most metros, but many independent regional distributors also carry overlapping lines and can be a faster source for memos, in-stock pickups, and locally-warehoused inventory. Use the filters above to narrow by line, segment, region, or trade status.</p>
-    <p>This directory is operated by <a href="https://designerwallcoverings.com">Designer Wallcoverings</a> as a free industry resource. Listings are not pay-to-play. To list your company, update an existing listing, or correct an entry, email <a href="mailto:<%= site.email %>"><%= site.email %></a>.</p>
+  <section class="how-it-works">
+    <div class="hiw-head">
+      <span class="hiw-eyebrow">How matches work</span>
+      <h2>Three filters. One distributor that actually stocks the line.</h2>
+    </div>
+    <ol class="hiw-steps">
+      <li>
+        <span class="hiw-num">01</span>
+        <h3>Filter by line carried</h3>
+        <p>Pick a specific vendor line &mdash; Schumacher, Thibaut, Phillip Jeffries, Cole &amp; Son, Maya Romanoff &mdash; and see every distributor authorized to carry it.</p>
+      </li>
+      <li>
+        <span class="hiw-num">02</span>
+        <h3>Narrow by region</h3>
+        <p>Each listing maps the metros and states the distributor actively services. Filter by region to find the closest in-region inventory and memo turnaround.</p>
+      </li>
+      <li>
+        <span class="hiw-num">03</span>
+        <h3>Match the project segment</h3>
+        <p>Hospitality FF&amp;E, healthcare, multifamily, residential trade, government &mdash; narrow to distributors who've shipped to your project type.</p>
+      </li>
+    </ol>
+    <p class="hiw-note">Listings reflect distributor-supplied information &mdash; not pay-to-play. To list your company, update an entry, or correct a line authorization, email <a href="mailto:<%= site.email %>"><%= site.email %></a>. Operated by <a href="https://designerwallcoverings.com">Designer Wallcoverings</a> as a free industry resource.</p>
   </section>
 </main>
← 3dc9dee fleet-grid refine: cache_control_todo (wallpaperdistributors · back to Wallpaperdistributors · a11y: add rel=noreferrer to external _blank links on distrib e248367 →