← back to Silkwallpaper
apply R1+R2+R4 hero standing rules — strip Atelier Couture, lowercase serif wordmark below photo, add data-hero-mode huge default + four-square hydration
8d6a8f42acac9cb8d5472c715cbdcff9e40609ca · 2026-05-10 08:53:10 -0700 · Steve
Files touched
M public/index.htmlM server.jsM site.config.json
Diff
commit 8d6a8f42acac9cb8d5472c715cbdcff9e40609ca
Author: Steve <steve@designerwallcoverings.com>
Date: Sun May 10 08:53:10 2026 -0700
apply R1+R2+R4 hero standing rules — strip Atelier Couture, lowercase serif wordmark below photo, add data-hero-mode huge default + four-square hydration
---
public/index.html | 140 +++++++++++++++++++++++++++++++++++++++++++-----------
server.js | 2 +-
site.config.json | 2 +-
3 files changed, 114 insertions(+), 30 deletions(-)
diff --git a/public/index.html b/public/index.html
index 81e1d6f..601a790 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,6 +1,8 @@
<!doctype html>
-<html lang="en">
+<html lang="en" data-hero-mode="huge">
<head>
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+
<meta charset="utf-8">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CNTJNLTEW8"></script>
@@ -12,8 +14,8 @@
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Atelier Couture — SILK — IN BLACK.</title>
-<meta name="description" content="Atelier Couture is a curated atelier dedicated entirely to silk. We do one thing — and we do it carefully.">
+<title>silkwallpaper — curated wallcoverings, real samples ship free.</title>
+<meta name="description" content="silkwallpaper — a curated wallcovering atelier. Free memo samples. Trade service.">
<meta name="theme-color" content="#FFF">
<link rel="canonical" href="https://silkwallpaper.com/">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
@@ -22,14 +24,14 @@
{
"@context": "https://schema.org",
"@type": "Organization",
- "name": "Atelier Couture",
+ "name": "silkwallpaper",
"url": "https://silkwallpaper.com/",
"email": "info@silkwallpaper.com"
}
</script>
<script src="/zd-loader.js" defer></script>
<style>
-/* Atelier Couture · Saint Laurent template — pure monochrome, sharp uppercase, zero ornament */
+/* silkwallpaper · Saint Laurent template — pure monochrome, sharp uppercase, zero ornament */
:root {
--bg: #000;
--paper: #FFF;
@@ -61,13 +63,25 @@ header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:s
.h-link:hover { opacity:0.7 }
.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
+/* ===== Cinema hero (R2: huge full-bleed photo + top-bar logo + below-photo wordmark) ===== */
+.cinema { position:relative; min-height:clamp(560px, 90vh, 1080px); width:100%; overflow:hidden }
.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
+.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.55) 100%) }
+/* Hero-mode hooks (R4): both modes share the same min-height — CLS-free */
+[data-hero-mode="four-square"] .cinema-bg { display:none }
+[data-hero-mode="four-square"] .cinema-grid { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; position:absolute; inset:0 }
+[data-hero-mode="four-square"] .cinema-grid .cell { background-size:cover; background-position:center; border:1px solid rgba(0,0,0,0.4) }
+.cinema-grid { display:none }
+.cinema-logo { position:absolute; top:22px; left:32px; font-family: ui-serif, Georgia, serif; font-size:18px; font-weight:500; letter-spacing:0.02em; color:#fff; text-decoration:none; z-index:6; text-shadow:0 1px 4px rgba(0,0,0,0.5) }
+/* Below-photo wordmark (R2): brand display lives below the hero, not painted on it */
+.hero-wordmark-block { position:relative; padding:38px 32px 24px; text-align:center; background:var(--bg) }
+.hero-wordmark { font-family: ui-serif, Georgia, 'Cormorant Garamond', serif; font-weight:400; font-size:clamp(48px, 9vw, 128px); letter-spacing:-0.01em; line-height:1; color:var(--paper); margin:0; text-transform:none }
+.hero-wordmark-sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:clamp(13px, 1.4vw, 17px); letter-spacing:0.04em; text-transform:none; margin-top:14px; color:var(--muted) }
+@media (max-width:760px) { .hero-wordmark { font-size:clamp(32px, 12vw, 64px) } }
.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:clamp(80px,12vh,140px); left:50%; transform:translateX(-50%); font-size:clamp(28px,4vw,56px); font-weight:500; letter-spacing:0.18em; text-transform:uppercase; text-align:center; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.5); z-index:5 }
+/* center-mark deprecated 2026-05-10 per R2 — hidden */
+.center-mark { display:none !important; position:absolute; top:clamp(80px,12vh,140px); left:50%; transform:translateX(-50%); font-size:clamp(28px,4vw,56px); font-weight:500; letter-spacing:0.18em; text-transform:uppercase; text-align:center; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.5); z-index:5 }
.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
@@ -166,14 +180,14 @@ textarea:focus-visible,
<meta property="og:type" content="website">
<meta property="og:url" content="https://silkwallpaper.com/">
-<meta property="og:title" content="Silk Wallpaper">
-<meta property="og:description" content="Silk Wallpaper — Pure silk wallcoverings — luxe and lustrous.">
+<meta property="og:title" content="silkwallpaper — curated wallcoverings, real samples ship free.">
+<meta property="og:description" content="silkwallpaper — a curated wallcovering atelier. Free memo samples. Trade service.">
<meta property="og:image" content="https://silkwallpaper.com/hero-bg.jpg">
-<meta property="og:site_name" content="Silk Wallpaper">
+<meta property="og:site_name" content="silkwallpaper">
<meta property="article:publisher" content="https://www.facebook.com/SteveAbramsDesigns.DesignerWallcoverings">
<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:title" content="Silk Wallpaper">
-<meta name="twitter:description" content="Silk Wallpaper — Pure silk wallcoverings — luxe and lustrous.">
+<meta name="twitter:title" content="silkwallpaper — curated wallcoverings, real samples ship free.">
+<meta name="twitter:description" content="silkwallpaper — a curated wallcovering atelier. Free memo samples. Trade service.">
<meta name="twitter:image" content="https://silkwallpaper.com/hero-bg.jpg">
<!-- graphics-loop pass 13: footer + fb -->
</head>
@@ -339,24 +353,37 @@ textarea:focus-visible,
}
</style>
+<style id="ns-gold-kill">
+ /* novasuede: kill gold-solid fills, off-white instead. Edge color stays gold. */
+ .new-badge, .new-arrivals-pill,
+ .color-filter-btn.active, .drapery-btn,
+ .sample-btn-chip, .cb-cta {
+ background: #f5f1e8 !important;
+ color: #0a0a0a !important;
+ border-color: #f5f1e8 !important;
+ }
+ .new-badge:hover, .new-arrivals-pill:hover,
+ .color-filter-btn.active:hover, .drapery-btn:hover,
+ .sample-btn-chip:hover, .cb-cta:hover {
+ background: #fff !important;
+ color: #0a0a0a !important;
+ }
+ </style>
<header class="ns-header">
- <a href="#home" class="ns-brand" aria-label="Atelier Couture home">
+ <a href="/" class="ns-brand" aria-label="Home">
<span class="ns-dot"></span>
- <span class="ns-name">Atelier Couture</span>
+ <span class="ns-name">silkwallpaper</span>
</a>
<nav class="ns-nav" id="nsPrimaryNav" aria-label="Primary">
- <a href="#home">Home</a>
- <a href="#colors">Colors</a>
- <a href="#specifications">Specifications</a>
- <a href="fire-ratings.html">Fire Ratings</a>
- <a href="faq.html">FAQ</a>
- <a href="about.html">About</a>
+ <a href="/">Home</a>
+ <a href="/about">About</a>
<button type="button" onclick="nsContactOpen()">Contact</button>
</nav>
<button type="button" class="mobile-toggle" aria-label="Toggle menu" aria-controls="nsPrimaryNav" aria-expanded="false" onclick="nsToggleNav(this)">
<span></span><span></span><span></span>
</button>
</header>
+
<div class="ns-modal" id="nsContactModal" role="dialog" aria-modal="true" aria-labelledby="nsContactTitle" onclick="if(event.target===this)nsContactClose()">
<div class="ns-modal-card">
<button type="button" class="close-x" onclick="nsContactClose()" aria-label="Close">×</button>
@@ -365,7 +392,7 @@ textarea:focus-visible,
<div class="ns-actions">
<a class="ns-action" href="#contact" onclick="nsContactClose()"><span class="ico">📋</span><div class="txt"><b>Get a Quote</b><span>Project specs → priced estimate</span></div></a>
<a class="ns-action" href="#contact" onclick="nsContactClose();openModal();"><span class="ico">📦</span><div class="txt"><b>Order a Sample</b><span>Free swatch to your shop</span></div></a>
- <a class="ns-action" href="mailto:info@novasuede.com?subject=Novasuede%20inquiry"><span class="ico">✉️</span><div class="txt"><b>Email Us</b><span>info@novasuede.com · Designer Wallcoverings</span></div></a>
+ <a class="ns-action" href="mailto:info@silkwallpaper.com?subject=silkwallpaper%20inquiry"><span class="ico">✉️</span><div class="txt"><b>Email Us</b><span>info@silkwallpaper.com</span></div></a>
<a class="ns-action" href="tel:888-373-4564"><span class="ico">📞</span><div class="txt"><b>Call Us</b><span>(888) 373-4564 · M–F, 9–5 PT</span></div></a>
</div>
</div>
@@ -384,18 +411,31 @@ textarea:focus-visible,
+
+
+
+
+
+
+
+
<header>
<button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
<button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
</header>
-<section class="cinema">
+<section class="cinema" id="hero">
+ <a class="cinema-logo" href="/" aria-label="silkwallpaper home">silkwallpaper</a>
<div class="cinema-bg" id="heroBg"></div>
+ <div class="cinema-grid" id="heroGrid" aria-hidden="true"></div>
<div class="corner-mark">Silken Sheen</div>
- <div class="center-mark">Silk Wallpaper</div>
<div class="meta-line">Silk · Luxe · Sheen · Jacquard<span class="num" id="heroNum"></span></div>
<a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
</section>
+<div class="hero-wordmark-block">
+ <h1 class="hero-wordmark">silkwallpaper</h1>
+ <span class="hero-wordmark-sub" id="heroWordmarkSub"></span>
+</div>
<section class="section" id="ideas">
@@ -453,8 +493,8 @@ textarea:focus-visible,
<footer>
<div class="footer-grid">
<div>
- <div class="footer-brand">Silk Wallpaper</div>
- <p class="footer-text">Silk Wallpaper is a specialty silk archive within the Designer Wallcoverings family. Real samples ship free.</p>
+ <div class="footer-brand">silkwallpaper</div>
+ <p class="footer-text">silkwallpaper — real samples ship free.</p>
<p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
</div>
<div class="footer-col">
@@ -474,7 +514,7 @@ textarea:focus-visible,
</div>
</div>
<div class="footer-bottom">
- <span>silkwallpaper.com · Atelier Couture</span>
+ <span>silkwallpaper.com · silkwallpaper</span>
<span><a href="mailto:info@silkwallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent)">info@silkwallpaper.com</a></span>
<span id="footerStat"></span>
</div>
@@ -804,6 +844,7 @@ loadGridPage();
function dwmOpen(name, opts){
document.getElementById('dwm' + name).classList.add('open');
document.body.style.overflow = 'hidden';
+ try { if (typeof gtag === 'function') gtag('event', 'modal_open', { modal_name: name, sku: (opts && opts.sku) || '' }); } catch(_){}
if (name === 'Sample' && opts) {
document.getElementById('dwmSamplePreview').style.display = 'flex';
document.getElementById('dwmSampleImg').src = opts.image_url || '';
@@ -834,6 +875,12 @@ loadGridPage();
const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
if (!r.ok) throw new Error('HTTP '+r.status);
const j = await r.json();
+ try {
+ if (typeof gtag === 'function') {
+ if (kind === 'sample') gtag('event', 'memo_request', { sku: data.sku || '', title: data.title || '' });
+ else gtag('event', 'lead', { form_type: kind });
+ }
+ } catch(_){}
status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
status.className = 'dwm-status ok';
btn.textContent = 'Sent ✓';
@@ -953,5 +1000,42 @@ loadGridPage();
})();
</script>
+<script>
+/* R4 — Alternating hero modes (huge / four-square). Server-side default is huge (HTML attr).
+ Client-only flip starts on visit 2. Both modes share the same .cinema min-height (CLS-free).
+ Crawlers without JS always see huge. */
+(function(){
+ try {
+ var k='dw-hero-mode';
+ var prev=parseInt(localStorage.getItem(k)||'0',10);
+ var next=(prev+1)%2;
+ localStorage.setItem(k,String(next));
+ if (prev>0) {
+ var mode = next===0 ? 'huge' : 'four-square';
+ document.documentElement.dataset.heroMode = mode;
+ if (mode === 'four-square') {
+ fetch('/api/products?limit=4&page=1').then(r=>r.ok?r.json():null).then(j=>{
+ if (!j || !j.items || j.items.length < 4) {
+ document.documentElement.dataset.heroMode = 'huge';
+ console.warn('dw-hero-stale: insufficient items for four-square, falling back to huge');
+ return;
+ }
+ var grid = document.getElementById('heroGrid');
+ if (!grid) return;
+ j.items.slice(0,4).forEach(function(it){
+ var d = document.createElement('div');
+ d.className = 'cell';
+ var img = (it.image_url || it.image || '/hero-bg.jpg');
+ d.style.backgroundImage = "url('" + img + "')";
+ grid.appendChild(d);
+ });
+ }).catch(function(){
+ document.documentElement.dataset.heroMode = 'huge';
+ });
+ }
+ }
+ } catch(e) { /* no-op: keep server default */ }
+})();
+</script>
</body>
</html>
diff --git a/server.js b/server.js
index b9e4fa0..9340723 100644
--- a/server.js
+++ b/server.js
@@ -89,7 +89,7 @@ function sortProducts(list, mode) {
app.use(helmet({ contentSecurityPolicy: false }));
app.use(express.json({ limit: '256kb' }));
// Universal contact module — modals, /api/send-inquiry, /api/send-sample, /zd-loader.js
-require('./_universal-contact')(app, { siteName: "Silk Wallpaper", zdColor: "#c8a060", zdPosition: 'right' });
+require('./_universal-contact')(app, { siteName: "silkwallpaper", zdColor: "#c8a060", zdPosition: 'right' });
require('./_universal-auth')(app, { siteName: "silkwallpaper" });
app.use(express.static(path.join(__dirname, 'public')));
diff --git a/site.config.json b/site.config.json
index ee7e718..ffe63d5 100644
--- a/site.config.json
+++ b/site.config.json
@@ -1,6 +1,6 @@
{
"slug": "silkwallpaper",
- "siteName": "Silk Wallpaper",
+ "siteName": "silkwallpaper",
"domain": "silkwallpaper.com",
"nicheKeyword": "silk",
"tagline": "Pure silk, on the wall.",
← 11a7724 graphic-loop pass 13: real footer brand + Facebook link + OG
·
back to Silkwallpaper
·
sort-skill canonical: add light-dark/dark-light/wheel + help 2bd54e0 →