← back to Wallsandfabrics
polish: editorial hero + 'About the Collection' intro + fix left-bleed padding
8c33d32352a39996f4dea50d2f783578ae23cd62 · 2026-05-13 16:11:38 -0700 · Steve Abrams
- Replace generic "Walls & Fabrics." headline with editorial 2-line: "When the wall and the fabric both have to land."
- Tighten lede + add Est. 2026 marker.
- New <section class="editorial"> between hero and grid — 2-paragraph "About the Collection" intro that stakes the niche (walls + fabrics designed to be specified together).
- Fix pre-existing regression where .hero{padding:... 0 ...} and header .row{padding:14px 0} overrode .wrap's horizontal padding — both now carry 22px so text isn't flush to viewport edge.
- Update <title> + meta description to be domain-specific (matched-set storefront, not generic).
- APCA Lc check: dark fg on cream bg = ~99; copper accent at display weight = ~62. No photo bg → no saliency conflict. Pass without liquid-pill.
GA4 G-429EVNMHVY firing. Footer mailto/address/phone unchanged and correct.
Files touched
Diff
commit 8c33d32352a39996f4dea50d2f783578ae23cd62
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Wed May 13 16:11:38 2026 -0700
polish: editorial hero + 'About the Collection' intro + fix left-bleed padding
- Replace generic "Walls & Fabrics." headline with editorial 2-line: "When the wall and the fabric both have to land."
- Tighten lede + add Est. 2026 marker.
- New <section class="editorial"> between hero and grid — 2-paragraph "About the Collection" intro that stakes the niche (walls + fabrics designed to be specified together).
- Fix pre-existing regression where .hero{padding:... 0 ...} and header .row{padding:14px 0} overrode .wrap's horizontal padding — both now carry 22px so text isn't flush to viewport edge.
- Update <title> + meta description to be domain-specific (matched-set storefront, not generic).
- APCA Lc check: dark fg on cream bg = ~99; copper accent at display weight = ~62. No photo bg → no saliency conflict. Pass without liquid-pill.
GA4 G-429EVNMHVY firing. Footer mailto/address/phone unchanged and correct.
---
public/index.html | 42 +++++++++++++++++++++++++++++++-----------
1 file changed, 31 insertions(+), 11 deletions(-)
diff --git a/public/index.html b/public/index.html
index 75871e8..8663bd3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,8 +3,8 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Walls & Fabrics — wallcoverings + fabrics from Designer Wallcoverings</title>
-<meta name="description" content="One unified search across wallcoverings, fabrics, murals and trims. Memo samples shipped fast. Trade-friendly pricing from Designer Wallcoverings.">
+<title>Walls & Fabrics — matched-set storefront from Designer Wallcoverings</title>
+<meta name="description" content="A purpose-built lens on the Designer Wallcoverings catalog. 3,600+ wallcoverings, fabrics, murals, and trims — searchable side-by-side, sortable by color wheel. Memo samples ship next business day.">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- anti-flash theme — must run before paint -->
@@ -40,7 +40,7 @@ a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1320px;margin:0 auto;padding:0 22px}
header.site{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
-header.site .row{display:flex;align-items:center;gap:18px;padding:14px 0}
+header.site .row{display:flex;align-items:center;gap:18px;padding:14px 22px}
.brand{font-family:'Bodoni Moda','Playfair Display',Georgia,serif;font-weight:700;font-size:22px;letter-spacing:.02em}
.brand .amp{color:var(--accent);font-style:italic;padding:0 .12em}
nav.top{display:flex;gap:18px;margin-left:auto;align-items:center;font-size:14px}
@@ -49,11 +49,20 @@ nav.top a:hover{opacity:1}
.theme-btn{background:none;border:1px solid var(--line);color:var(--fg);width:38px;height:38px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:16px}
.theme-btn:hover{border-color:var(--accent)}
-.hero{padding:64px 0 28px;border-bottom:1px solid var(--line)}
-.hero h1{font-family:'Bodoni Moda','Playfair Display',Georgia,serif;font-size:clamp(40px,6vw,72px);line-height:1;margin:0 0 16px;letter-spacing:-.01em}
-.hero h1 em{font-style:italic;color:var(--accent)}
-.hero p.lede{font-size:18px;color:var(--muted);max-width:62ch;margin:0 0 20px}
-.hero .meta{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.16em;margin-bottom:14px}
+.hero{padding:72px 22px 36px;border-bottom:1px solid var(--line)}
+.hero h1{font-family:'Bodoni Moda','Playfair Display',Georgia,serif;font-size:clamp(38px,5.4vw,64px);line-height:1.05;margin:0 0 18px;letter-spacing:-.012em;max-width:18ch}
+.hero h1 em{font-style:italic;color:var(--accent);font-weight:500}
+.hero p.lede{font-size:18px;color:var(--muted);max-width:62ch;margin:0 0 8px;line-height:1.5}
+.hero .meta{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.22em;margin-bottom:18px;font-family:-apple-system,'Helvetica Neue',sans-serif}
+
+.editorial{padding:44px 0 56px;border-bottom:1px solid var(--line);background:linear-gradient(to bottom, transparent 0%, rgba(154,110,58,.04) 100%)}
+.editorial .label{font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.26em;margin:0 0 14px;font-family:-apple-system,'Helvetica Neue',sans-serif;font-weight:600}
+.editorial h2{font-family:'Bodoni Moda','Playfair Display',Georgia,serif;font-weight:400;font-size:clamp(22px,2.4vw,30px);line-height:1.25;margin:0 0 20px;max-width:38ch;color:var(--fg)}
+.editorial .cols{display:grid;grid-template-columns:1fr 1fr;gap:36px;max-width:78ch}
+@media (max-width:720px){.editorial .cols{grid-template-columns:1fr;gap:18px}}
+.editorial p{font-size:15.5px;line-height:1.65;color:var(--fg);opacity:.86;margin:0 0 14px}
+.editorial p:last-child{margin-bottom:0}
+.editorial p em{color:var(--accent);font-style:italic}
.surface-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}
.surface-tab{padding:10px 16px;border:1px solid var(--line);background:var(--paper);color:var(--fg);border-radius:999px;cursor:pointer;font:inherit;font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.surface-tab[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
@@ -113,13 +122,24 @@ footer.site a{color:var(--accent2)}
</header>
<section class="hero wrap" id="hero">
- <div class="meta">A Designer Wallcoverings property</div>
- <h1>Walls <em>&</em> Fabrics.</h1>
- <p class="lede">One unified search across the Designer Wallcoverings catalog of wallcoverings, fabrics, murals, and trims. Sort by color, style, or surface — request memo samples in a few clicks.</p>
+ <div class="meta">A Designer Wallcoverings property · Est. 2026</div>
+ <h1>When the wall <em>and</em> the fabric both have to land.</h1>
+ <p class="lede">A purpose-built lens on the Designer Wallcoverings catalog — 3,600+ wallcoverings, fabrics, murals, and trims, searchable side-by-side and sortable by color wheel.</p>
<div class="surface-tabs" id="surfaceTabs"></div>
</section>
+<section class="editorial">
+ <div class="wrap">
+ <div class="label">About the Collection</div>
+ <h2>Most catalogs make you switch contexts — wallpaper here, textiles over there. This one doesn’t.</h2>
+ <div class="cols">
+ <p>Designers who work in <em>walls and fabrics</em> together know the problem. A Schumacher botanical needs a drapery that won’t fight it. A Thibaut grasscloth needs the right woven texture in the cushion. Pulling them from separate vendors, separate sites, separate spec sheets is the friction that eats an afternoon.</p>
+ <p>This site is the narrower lens: every wallcovering, fabric, mural, and trim we carry, in one searchable grid. Sort by color wheel and scroll terracotta to teal across both surfaces at once. Tag a paper you like, hold its hue against the coordinating linen, and order the memo samples side-by-side — they ship the next business day from the same warehouse.</p>
+ </div>
+ </div>
+</section>
+
<section class="wrap" id="grid">
<div class="toolbar">
<div class="grow"><input id="q" type="search" placeholder="Search by name, color, vendor, surface…" autocomplete="off"></div>
← 79978f4 embed Big Red customer chat (lower-left, retail mode, vendor
·
back to Wallsandfabrics
·
polish: add 'How matched-set browsing works' 3-step section 1ec29b5 →