← back to Wallpapercontractor
polish: editorial hero + 3-step matching explainer section
e043f6cdbf721c87ca7e74a28288cc294aa331c0 · 2026-05-13 15:21:15 -0700 · Steve Abrams
Files touched
M public/css/styles.cssM views/index.ejsM views/partials/head.ejs
Diff
commit e043f6cdbf721c87ca7e74a28288cc294aa331c0
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Wed May 13 15:21:15 2026 -0700
polish: editorial hero + 3-step matching explainer section
---
public/css/styles.css | 128 ++++++++++++++++++++++++++++++++++++++++++++++++
views/index.ejs | 57 +++++++++++++++++----
views/partials/head.ejs | 3 ++
3 files changed, 179 insertions(+), 9 deletions(-)
diff --git a/public/css/styles.css b/public/css/styles.css
index 84b7e33..27529b3 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -83,6 +83,134 @@ a:hover { text-decoration: underline; }
.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; }
+/* ─── Editorial hero — wallpapercontractor.com distinct treatment ─── */
+.hero-editorial {
+ padding: 56px 0 36px;
+ border-bottom: 1px solid var(--border);
+ margin-bottom: 36px;
+}
+.hero-editorial .hero-eyebrow {
+ font-size: 11px; text-transform: uppercase; letter-spacing: .18em;
+ color: var(--accent); font-weight: 600;
+ margin-bottom: 18px;
+}
+.hero-editorial .hero-h1 {
+ font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
+ font-weight: 500;
+ font-size: clamp(34px, 5.4vw, 60px);
+ line-height: 1.04; letter-spacing: -0.015em;
+ margin: 0 0 22px; color: var(--fg);
+ max-width: 920px;
+}
+.hero-editorial .hero-h1 .hero-line-1 {
+ display: block;
+ color: var(--fg);
+}
+.hero-editorial .hero-h1 .hero-line-2 {
+ display: block;
+ font-style: italic;
+ color: var(--accent);
+}
+.hero-editorial .hero-sub {
+ color: var(--fg);
+ font-size: 18px;
+ font-weight: 500;
+ max-width: 720px;
+ margin: 0 0 18px;
+ line-height: 1.45;
+}
+.hero-editorial .hero-meta {
+ font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
+ color: var(--fg-muted);
+ margin-bottom: 22px;
+ display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
+}
+.hero-editorial .hero-meta .dot { opacity: .5; padding: 0 2px; }
+.hero-editorial .hero-foot {
+ font-size: 13px;
+ max-width: 780px;
+ margin: 0;
+ border-top: 1px solid var(--border);
+ padding-top: 18px;
+}
+
+/* ─── How matching works (3-step) ─── */
+.how-it-works {
+ background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-card) 100%);
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+ padding: 32px 30px;
+ margin: 0 0 36px;
+ position: relative;
+}
+.how-it-works::before {
+ content: "";
+ position: absolute; top: 0; left: 30px; right: 30px;
+ height: 2px;
+ background: linear-gradient(90deg, var(--accent) 0%, transparent 80%);
+ border-radius: 2px;
+}
+.how-head { margin-bottom: 22px; }
+.how-eyebrow {
+ display: block;
+ font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
+ color: var(--fg-muted); font-weight: 600;
+ margin-bottom: 6px;
+}
+.how-h2 {
+ font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
+ font-weight: 500;
+ font-size: 28px;
+ margin: 0; color: var(--fg);
+ letter-spacing: -0.01em;
+}
+.how-steps {
+ list-style: none; padding: 0; margin: 0 0 22px;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+ gap: 22px;
+}
+.how-step {
+ display: flex; gap: 14px; align-items: flex-start;
+ padding: 0;
+}
+.how-num {
+ font-family: "Cormorant Garamond", Georgia, serif;
+ font-weight: 500;
+ font-size: 32px; line-height: 1;
+ color: var(--accent);
+ letter-spacing: -0.02em;
+ flex-shrink: 0;
+ padding-top: 2px;
+ min-width: 44px;
+}
+.how-step-body h3 {
+ font-size: 15px;
+ margin: 0 0 6px;
+ color: var(--fg);
+ letter-spacing: -0.005em;
+ font-weight: 600;
+}
+.how-step-body p {
+ margin: 0;
+ font-size: 13.5px;
+ color: var(--fg-muted);
+ line-height: 1.55;
+}
+.how-cta {
+ display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
+ padding-top: 18px;
+ border-top: 1px solid var(--border);
+}
+.how-cta .muted { font-size: 12.5px; }
+
+@media (max-width: 600px) {
+ .hero-editorial { padding: 36px 0 24px; margin-bottom: 24px; }
+ .hero-editorial .hero-h1 { font-size: clamp(28px, 8vw, 40px); }
+ .how-it-works { padding: 24px 20px; }
+ .how-it-works::before { left: 20px; right: 20px; }
+}
+
.filter-bar {
display: grid;
grid-template-columns: minmax(220px,1.4fr) repeat(3, 1fr) auto auto auto auto;
diff --git a/views/index.ejs b/views/index.ejs
index 23b0921..2ac015e 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -3,18 +3,57 @@
<main class="wrap main">
- <!-- ─── Consumer funnel CTA strip ────────────────────────────────── -->
- <section class="cta-strip" style="margin:0 0 28px;padding:24px 28px;background:linear-gradient(135deg,#0e1c26,#1a3142);border:1px solid #2a4453;border-radius:6px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#f1ece2;">
- <div style="flex:1;min-width:280px;">
- <div style="font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:24px;line-height:1.15;margin-bottom:6px;">Need a wallpaper installer for your project?</div>
- <div style="font-size:13px;color:#a8b6c1;line-height:1.5;">Tell us about your job — we match you with vetted, bonded, insured installers in your area in 24 hours. Free.</div>
+ <section class="hero hero-editorial">
+ <div class="hero-eyebrow">An industry directory · est. 2026</div>
+ <h1 class="hero-h1">
+ <span class="hero-line-1">Wallpaper at commercial scale</span>
+ <span class="hero-line-2">takes more than a paperhanger.</span>
+ </h1>
+ <p class="lead hero-sub"><%= total %> bonded, insured wallcovering installation contractors — vetted for the 30,000-square-foot job.</p>
+ <div class="hero-meta">
+ <span>Hospitality</span><span class="dot">·</span>
+ <span>Healthcare</span><span class="dot">·</span>
+ <span>Multifamily</span><span class="dot">·</span>
+ <span>Retail</span><span class="dot">·</span>
+ <span>Corporate</span><span class="dot">·</span>
+ <span>Government</span>
</div>
- <a href="/find-installer" style="display:inline-flex;align-items:center;gap:8px;padding:14px 26px;background:#c9a14b;color:#14161a;font-weight:600;font-size:14px;letter-spacing:.04em;border-radius:4px;text-decoration:none;white-space:nowrap;transition:all .15s ease;" onmouseover="this.style.background='#e2b65c';this.style.transform='translateY(-1px)';" onmouseout="this.style.background='#c9a14b';this.style.transform='none';">Get matched →</a>
+ <p class="hero-foot muted">Smaller residential or single-installer job? <a href="/find-installer">Tell us about it</a> — free matching, 24-hour turnaround. Or browse single-installer paperhangers at <a href="https://nationalpaperhangers.com">NationalPaperHangers</a>.</p>
</section>
- <section class="hero">
- <h1>Bonded, insured, commercial-scale wallpaper contractors.</h1>
- <p class="lead">A working directory of commercial wallcovering installation contractors — companies that carry general liability insurance, surety bonding, and crews of 8–30+ for hospitality, retail, corporate, healthcare, multifamily, and government projects. <%= total %> contractors indexed. This is not a paperhanger directory; for single-installer residential paperhangers see <a href="https://nationalpaperhangers.com">NationalPaperHangers</a> — or <a href="/find-installer">tell us about your job and we'll match you</a>.</p>
+ <!-- ─── How matching works (3-step) ─────────────────────────────── -->
+ <section class="how-it-works" aria-label="How matching works">
+ <div class="how-head">
+ <span class="how-eyebrow">For consumers & smaller jobs</span>
+ <h2 class="how-h2">How matching works</h2>
+ </div>
+ <ol class="how-steps">
+ <li class="how-step">
+ <div class="how-num">01</div>
+ <div class="how-step-body">
+ <h3>Tell us the project</h3>
+ <p>Wall area, project type, timeline, ZIP. Two minutes.</p>
+ </div>
+ </li>
+ <li class="how-step">
+ <div class="how-num">02</div>
+ <div class="how-step-body">
+ <h3>We route to the right installer</h3>
+ <p>Single-paperhanger residential goes to NationalPaperHangers; bonded crew work routes to a directory contractor in your region.</p>
+ </div>
+ </li>
+ <li class="how-step">
+ <div class="how-num">03</div>
+ <div class="how-step-body">
+ <h3>You hear back in 24 hours</h3>
+ <p>Direct contact from the installer — not a call-center. No fee to you, no auction, no resold leads.</p>
+ </div>
+ </li>
+ </ol>
+ <div class="how-cta">
+ <a href="/find-installer" class="btn-primary">Get matched →</a>
+ <span class="muted">or scroll for the contractor index ↓</span>
+ </div>
</section>
<form class="filter-bar" method="get" action="/">
diff --git a/views/partials/head.ejs b/views/partials/head.ejs
index fbde87e..6a13158 100644
--- a/views/partials/head.ejs
+++ b/views/partials/head.ejs
@@ -7,6 +7,9 @@
<meta name="description" content="<%= description || site.description %>">
<meta name="theme-color" content="#0e1c26">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&display=swap">
<link rel="stylesheet" href="/css/styles.css">
<script>
(function(){
← be8d927 fleet-grid refine: cache_control_todo applied (wallpapercont
·
back to Wallpapercontractor
·
polish: distinct tagline + meta + Wc wordmark + procurement 98e6513 →