polish: add 'How matched-set browsing works' 3-step section between editorial intro and product grid

1ec29b5d3055666e629e4b6a1ec4ab64d1056e0e · 2026-05-13 16:39:31 -0700 · Steve
Files touched

M public/index.html
Diff

commit 1ec29b5d3055666e629e4b6a1ec4ab64d1056e0e
Author: Steve <steve@designerwallcoverings.com>
Date:   Wed May 13 16:39:31 2026 -0700

    polish: add 'How matched-set browsing works' 3-step section between editorial intro and product grid
---
 public/index.html | 39 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 8663bd3..7dde713 100644
--- a/public/index.html
+++ b/public/index.html
@@ -63,6 +63,18 @@ nav.top a:hover{opacity:1}
 .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}
+
+.howto{padding:54px 0 60px;border-bottom:1px solid var(--line)}
+.howto .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}
+.howto 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 32px;max-width:34ch;color:var(--fg)}
+.howto .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
+@media (max-width:820px){.howto .steps{grid-template-columns:1fr;gap:22px}}
+.howto .step{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:1px solid var(--line)}
+.howto .num{font-family:'Bodoni Moda',Georgia,serif;font-size:13px;letter-spacing:.22em;color:var(--accent);font-style:italic}
+.howto .step h3{font-family:-apple-system,'Helvetica Neue',sans-serif;font-weight:600;font-size:15px;margin:0;color:var(--fg);letter-spacing:.01em}
+.howto .step p{font-size:14.5px;line-height:1.6;color:var(--fg);opacity:.78;margin:0}
+.howto .footnote{margin:28px 0 0;font-size:13px;color:var(--muted);font-style:italic;max-width:62ch}
+
 .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)}
@@ -140,6 +152,31 @@ footer.site a{color:var(--accent2)}
   </div>
 </section>
 
+<section class="howto">
+  <div class="wrap">
+    <div class="label">How matched-set browsing works</div>
+    <h2>Three small moves that turn a 3,600-SKU catalog into a paired set in an afternoon.</h2>
+    <div class="steps">
+      <div class="step">
+        <div class="num">01 — Filter</div>
+        <h3>Pick a surface, then narrow.</h3>
+        <p>Start with Walls or Fabrics, search a vendor or color word (&ldquo;Schumacher botanical,&rdquo; &ldquo;putty linen&rdquo;), and let the grid prune to the working shortlist. Color-wheel sort puts adjacent hues next to each other so a near-match jumps the eye.</p>
+      </div>
+      <div class="step">
+        <div class="num">02 — Pair</div>
+        <h3>Hold a wall against a fabric in the same hue band.</h3>
+        <p>Switch the surface filter to the other side without losing your color sort. The grid keeps you in the same chromatic range &mdash; terracotta walls next to terracotta wovens &mdash; so coordinating picks read together instead of fighting.</p>
+      </div>
+      <div class="step">
+        <div class="num">03 — Memo</div>
+        <h3>Order both samples in one pass.</h3>
+        <p>Tap <em>Request memo</em> on each card. Memos for walls and fabrics ship the next business day from the same Sherman Oaks warehouse on a single packing slip &mdash; no hunting two vendor portals to reconcile arrival dates.</p>
+      </div>
+    </div>
+    <p class="footnote">Trade pricing, quantity quotes, and CFA cuttings available on request &mdash; reach out to <a href="mailto:info@wallsandfabrics.com">info@wallsandfabrics.com</a> or call 888-373-4564.</p>
+  </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>
@@ -176,7 +213,7 @@ footer.site a{color:var(--accent2)}
     <div>
       <h4>Walls &amp; Fabrics</h4>
       <p>A Designer Wallcoverings sister site. Trade orders, memo samples, and quantity quotes available — same catalog, narrower lens.</p>
-      <p class="legal">© <span id="yr"></span> Designer Wallcoverings · 15442 Ventura Bl #102, Sherman Oaks CA 91403</p>
+      <p class="legal">© <span id="yr">2026</span> Designer Wallcoverings · 15442 Ventura Bl #102, Sherman Oaks CA 91403</p>
     </div>
     <div>
       <h4>Contact</h4>
← 8c33d32 polish: editorial hero + 'About the Collection' intro + fix · back to Wallsandfabrics · fix env wiring — add __dirname-anchored dotenv + dotenv dep 8dbba67 →