← back to Wallpaperestimator
Polish hero copy and add wallpaper-yardage FAQ accordion
4ec793b2420d7b2d822b10c70236c19f1ff2471b · 2026-05-13 15:57:39 -0700 · Steve
Files touched
Diff
commit 4ec793b2420d7b2d822b10c70236c19f1ff2471b
Author: Steve <steve@designerwallcoverings.com>
Date: Wed May 13 15:57:39 2026 -0700
Polish hero copy and add wallpaper-yardage FAQ accordion
---
public/index.html | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++----
1 file changed, 61 insertions(+), 4 deletions(-)
diff --git a/public/index.html b/public/index.html
index df722e3..2b16cee 100644
--- a/public/index.html
+++ b/public/index.html
@@ -54,8 +54,10 @@ header{padding:18px 24px;border-bottom:1px solid var(--line);display:flex;align-
.theme-toggle:hover{background:var(--accent-soft)}
.hero{max-width:980px;margin:0 auto;padding:48px 24px 16px;text-align:center}
-.hero h1{font-family:var(--serif);font-size:clamp(36px,5vw,56px);font-weight:500;margin:0 0 12px;line-height:1.1}
-.hero p.lede{font-size:18px;color:var(--muted);max-width:640px;margin:0 auto}
+.hero .eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.22em;color:var(--muted);margin:0 0 14px;font-weight:500}
+.hero h1{font-family:var(--serif);font-size:clamp(42px,6vw,68px);font-weight:500;margin:0 0 18px;line-height:1.02;letter-spacing:-.01em}
+.hero h1 em{font-style:italic;color:var(--accent);font-weight:500}
+.hero p.lede{font-size:18px;color:var(--muted);max-width:660px;margin:0 auto;line-height:1.6}
main{max-width:980px;margin:0 auto;padding:24px;display:grid;gap:32px}
@@ -117,11 +119,30 @@ footer .links{margin-bottom:10px}
footer .links a{margin:0 10px;color:var(--ink)}
footer address{font-style:normal;margin-top:8px;line-height:1.7}
+/* FAQ accordion — editorial card list */
+.faq{padding:8px 0 4px}
+.faq h2{font-family:var(--serif);font-size:32px;font-weight:500;margin:0 0 4px;text-align:center;letter-spacing:-.01em}
+.faq p.sub{text-align:center;color:var(--muted);margin:0 0 24px;font-size:15px}
+.faq-list{display:grid;gap:10px;max-width:780px;margin:0 auto}
+.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:border-color .15s ease}
+.faq-item[open]{border-color:var(--accent)}
+.faq-item summary{padding:18px 22px;cursor:pointer;font-family:var(--serif);font-size:19px;font-weight:500;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;line-height:1.35}
+.faq-item summary::-webkit-details-marker{display:none}
+.faq-item summary::after{content:'+';font-family:var(--sans);font-size:22px;font-weight:300;color:var(--accent);transition:transform .2s ease;flex-shrink:0;line-height:1}
+.faq-item[open] summary::after{transform:rotate(45deg)}
+.faq-item summary:hover{background:var(--accent-soft)}
+.faq-body{padding:0 22px 20px;color:var(--ink);font-size:15px;line-height:1.65}
+.faq-body p{margin:0 0 10px}
+.faq-body p:last-child{margin-bottom:0}
+.faq-body strong{color:var(--accent);font-weight:600}
+
@media (max-width: 640px){
.product-grid{grid-template-columns:repeat(2,1fr)!important}
.hero{padding:32px 16px 8px}
main{padding:16px}
.calc{padding:20px}
+ .faq-item summary{font-size:17px;padding:16px 18px}
+ .faq-body{padding:0 18px 18px}
}
</style>
</head>
@@ -136,8 +157,9 @@ footer address{font-style:normal;margin-top:8px;line-height:1.7}
</header>
<section class="hero">
- <h1>How much wallpaper do I need?</h1>
- <p class="lede">Enter your room's dimensions and the pattern repeat. We'll work out the exact bolts, square footage, and waste factor — then suggest six wallpapers from our catalog that suit the size you measured.</p>
+ <p class="eyebrow">How much wallpaper do I need?</p>
+ <h1>Measure twice.<br><em>Order once.</em></h1>
+ <p class="lede">Pattern repeat, bolt size, and waste factor — the three variables most online calculators quietly skip, and the reason most DIY rooms come up half a roll short.</p>
</section>
<main>
@@ -230,6 +252,41 @@ footer address{font-style:normal;margin-top:8px;line-height:1.7}
</div>
</div>
+ <section class="faq" id="faq">
+ <h2>Questions installers hear most</h2>
+ <p class="sub">Four things worth understanding before you place an order.</p>
+ <div class="faq-list">
+ <details class="faq-item">
+ <summary>Why does the pattern repeat add to my total?</summary>
+ <div class="faq-body">
+ <p>Every strip of wallpaper has to <strong>line up horizontally</strong> with the strip next to it. If a pattern repeats every 21 inches, the installer has to slide the next strip up or down within that 21-inch window until the motif matches.</p>
+ <p>That slid-off length becomes cut waste at the top or bottom. A wall with a 21" repeat can lose a foot of usable material per strip — which is why our calculator adds the repeat into the strip-length calc, not just sticks a flat 15% on at the end.</p>
+ </div>
+ </details>
+ <details class="faq-item">
+ <summary>What's the difference between a single and a double roll?</summary>
+ <div class="faq-body">
+ <p>In the US, almost everything is <strong>sold as a double roll</strong> — a single bolt that's roughly 27" wide × 27 ft long, or about 56 square feet of usable paper. A "single roll" is half of that, and was the old standard before wider rolls became common.</p>
+ <p>European rolls run narrower and shorter (about 20.5" × 33 ft). Commercial Type II vinyl runs 36"–54" wide and is sold by the yard. The calculator handles all five common sizes — pick whatever your specific pattern lists on its product page.</p>
+ </div>
+ </details>
+ <details class="faq-item">
+ <summary>Should I order all of my bolts from the same dye lot?</summary>
+ <div class="faq-body">
+ <p><strong>Yes — without exception.</strong> Each production run of wallpaper goes through the printer as a single "dye lot" or "run number." Different lots can have subtle but visible color shifts that show up as a vertical seam line on your wall.</p>
+ <p>Always order one or two extra bolts up front, all from the same lot. Re-orders placed a week later almost always ship from a different lot and can't be matched. The estimate above already factors a 15% buffer — but order another bolt anyway if the room is large.</p>
+ </div>
+ </details>
+ <details class="faq-item">
+ <summary>How much waste should I budget for?</summary>
+ <div class="faq-body">
+ <p>The default <strong>15%</strong> is the right number for most rooms with a standard repeat and a competent installer. It covers trim at the ceiling and baseboard, mistakes around outlets, and one or two unusable strips.</p>
+ <p>Bump it to <strong>20%</strong> if the pattern repeat is over 21", if you're a first-time DIYer, or if the room has lots of angles and built-ins. Drop it to <strong>10%</strong> only for plain or random-match papers (grasscloth, solid linens) where strips don't have to align.</p>
+ </div>
+ </details>
+ </div>
+ </section>
+
<section class="closing" id="closing">
<h2>Wallpapers we'd suggest at this size</h2>
<p class="sub">Curated from our catalog of 11,000+ patterns. Click any one to see the full collection.</p>
← ce7a2ac embed Big Red customer chat (lower-left, retail mode, vendor
·
back to Wallpaperestimator
·
Add noreferrer to target=_blank external product links 355fbad →