← back to Silkwallpaper
Add clean /privacy route (AdSense URL consistency)
923e811d8833b8dab99c288bbb3abe32dc4d5e0a · 2026-09-10 11:51:28 -0700 · Steve Abrams
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Files touched
M public/hero-bg.jpgM public/index.htmlM server.js
Diff
commit 923e811d8833b8dab99c288bbb3abe32dc4d5e0a
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu Sep 10 11:51:28 2026 -0700
Add clean /privacy route (AdSense URL consistency)
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
public/hero-bg.jpg | Bin 330922 -> 79267 bytes
public/index.html | 503 +++++++++++------------------------------------------
server.js | 1 +
3 files changed, 106 insertions(+), 398 deletions(-)
diff --git a/public/hero-bg.jpg b/public/hero-bg.jpg
index 4409ce2..55cc6fd 100644
Binary files a/public/hero-bg.jpg and b/public/hero-bg.jpg differ
diff --git a/public/index.html b/public/index.html
index 04d1758..472a1a1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,57 +6,56 @@
<meta charset="utf-8">
<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-CNTJNLTEW8"></script>
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-CWZ4ZSQF3T"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
- gtag('config', 'G-CNTJNLTEW8');
+ gtag('config', 'G-CWZ4ZSQF3T');
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<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">
+<title>SILK WALLPAPER — Silk Wallcoverings</title>
+<meta name="description" content="Silk wallpaper — luxury silk-finish wallcoverings sourced from heritage mills, fulfilled through Designer Wallcoverings trade.">
+<meta name="theme-color" content="#0d0a08">
+<link rel="canonical" href="https://retrowalls.com/">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
- "name": "silkwallpaper",
- "url": "https://silkwallpaper.com/",
- "email": "info@silkwallpaper.com"
+ "name": "retrowalls",
+ "url": "https://retrowalls.com/",
+ "email": "info@retrowalls.com",
+ "parentOrganization": { "@type": "Organization", "name": "Designer Wallcoverings" },
+ "address": { "@type": "PostalAddress", "streetAddress": "15442 Ventura Bl #102", "addressLocality": "Sherman Oaks", "addressRegion": "CA", "postalCode": "91403", "addressCountry": "US" }
}
</script>
<script src="/zd-loader.js" defer></script>
<style>
-/* silkwallpaper · Saint Laurent template — pure monochrome, sharp uppercase, zero ornament */
:root {
- --bg: #000;
- --paper: #FFF;
- --muted: #888;
- --line: rgba(255,255,255,0.20);
- --accent: #FFF;
- --bg-soft: #0a0a0a;
- --cols: 6;
-}
-html[data-theme="light"] {
- --bg: #FFF;
+ --bg: #F5F2EB;
--paper: #000;
- --muted: #666;
- --line: rgba(0,0,0,0.20);
+ --muted: #8B7866;
+ --line: #000;
--accent: #000;
- --bg-soft: #F5F5F5;
+ --bg-soft: #000;
+ --cols: 6;
+}
+html[data-theme="dark"] {
+ --bg: #1a1410;
+ --paper: #F5F2EB;
+ --muted: #C9B89E;
+ --line: rgba(255,254,250,0.12);
+ --accent: #FF0000;
+ --bg-soft: #2a1f15;
}
* { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
-body { font-family:'Inter', 'Helvetica Neue', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
+body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
/* DW-FASHION-TEMPLATE-OVERRIDE */
-.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Inter', Georgia, serif !important; font-weight:900 !important; text-transform:uppercase !important;letter-spacing:0.04em !important; }
-/* Saint Laurent: heavy uppercase headlines, no italic serif accent */
-.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Inter', 'Helvetica Neue', sans-serif !important; font-weight:900 !important; font-style:normal !important; letter-spacing:0.04em !important; text-transform:uppercase !important }
+.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Helvetica Neue', Georgia, serif !important; font-weight:500 !important; text-transform:uppercase !important;letter-spacing:0.06em !important; }
/* ===== Auto-hide header ===== */
header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
@@ -64,23 +63,26 @@ 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 (R2: huge full-bleed photo + top-bar logo + below-photo wordmark) ===== */
+/* ===== Cinema hero (R2 spec: 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.38) 0%, rgba(0,0,0,0.12) 22%, rgba(0,0,0,0) 42%, rgba(0,0,0,0) 62%, rgba(0,0,0,0.55) 100%) }
-/* Hero-mode hooks (R4): both modes share the same min-height — CLS-free */
-.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 */
+.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%) }
+.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 deprecated 2026-05-10 per R2 — kept hidden for backwards-compat with any straggler markup */
+.center-mark { display:none !important }
+/* Below-photo wordmark (R2): the 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; right: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 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 }
+/* Hero-mode hooks (R4): both modes share the same min-height so swap is 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 var(--bg) }
+.cinema-grid { display:none }
+/* Hero top-bar logo upper-left (sits inside the cinema overlay, paired with header hamburger upper-right) */
+.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) }
.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 }
.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
@@ -233,29 +235,29 @@ html.hf-sample [data-f="sample"] { display:none !important }
</style>
<script>
-(function(){ try { var t = localStorage.getItem('silk_theme') || 'dark'; document.documentElement.dataset.theme = t; } catch(e){} })();
+(function(){ try { var t = localStorage.getItem('silk_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
</script>
<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:wght@400;500;600;700&display=swap">
<meta property="og:type" content="website">
-<meta property="og:url" content="https://silkwallpaper.com/">
-<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="silkwallpaper">
+<meta property="og:url" content="https://retrowalls.com/">
+<meta property="og:title" content="Retro Walls">
+<meta property="og:description" content="Retro Walls — Vintage to midcentury wallcoverings — a curated archive.">
+<meta property="og:image" content="https://retrowalls.com/hero-bg.jpg">
+<meta property="og:site_name" content="Retro Walls">
<meta property="article:publisher" content="https://www.facebook.com/SteveAbramsDesigns.DesignerWallcoverings">
<meta name="twitter:card" content="summary_large_image">
-<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">
+<meta name="twitter:title" content="Retro Walls">
+<meta name="twitter:description" content="Retro Walls — Vintage to midcentury wallcoverings — a curated archive.">
+<meta name="twitter:image" content="https://retrowalls.com/hero-bg.jpg">
<!-- graphics-loop pass 13: footer + fb -->
<style id="hero4-anti-header-crop">
/* Never-show-images-with-headers rule (2026-05-14): every hero image
is cropped to center 12% from the top to defeat vendor watermarks /
scraped-site chrome / banner overlays. */
-.cinema-bg, .cell { background-position: center 12% !important; }
+.cinema-bg, .hero4-cell, .cell { background-position: center 12% !important; }
.card img, .product img { object-position: center 12% !important; }
</style>
<!-- Meta Pixel — INERT until set-fb-pixel.sh is run (does NOT load fbevents.js or hit Meta until flipped) -->
@@ -493,7 +495,7 @@ html.hf-sample [data-f="sample"] { display:none !important }
<header class="ns-header">
<a href="/" class="ns-brand" aria-label="Home">
<span class="ns-dot"></span>
- <span class="ns-name">silkwallpaper</span>
+ <span class="ns-name">retrowalls</span>
</a>
<nav class="ns-nav" id="nsPrimaryNav" aria-label="Primary">
<a href="/">Home</a>
@@ -515,7 +517,7 @@ html.hf-sample [data-f="sample"] { display:none !important }
<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();if(typeof openModal==='function')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@silkwallpaper.com?subject=Silk%20Wallpaper%20inquiry"><span class="ico">✉</span><div class="txt"><b>Email Us</b><span>info@silkwallpaper.com</span></div></a>
+ <a class="ns-action" href="mailto:info@retrowalls.com?subject=Retro%20Walls%20inquiry"><span class="ico">✉</span><div class="txt"><b>Email Us</b><span>info@retrowalls.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>
@@ -548,16 +550,16 @@ html.hf-sample [data-f="sample"] { display:none !important }
</header>
<section class="cinema" id="hero">
- <a class="cinema-logo" href="/" aria-label="silkwallpaper home">silkwallpaper</a>
+ <a class="cinema-logo" href="/" aria-label="retrowalls home">retrowalls</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="meta-line">Silk · Luxe · Sheen · Jacquard<span class="num" id="heroNum"></span></div>
+ <div class="corner-mark">Vintage to Midcentury</div>
+ <div class="meta-line">Vintage · Midcentury · Deco · Damask<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>
+ <h1 class="hero-wordmark">retrowalls</h1>
+ <span class="hero-wordmark-sub">Vintage · Midcentury · Deco · Damask</span>
</div>
@@ -567,7 +569,10 @@ html.hf-sample [data-f="sample"] { display:none !important }
<h2 class="rail-title">New this week</h2>
<div class="rail" id="railNewest"></div>
</div>
-
+ <div class="rail-block">
+ <h2 class="rail-title">Curated picks</h2>
+ <div class="rail" id="railCurated"></div>
+ </div>
</section>
<section class="section" id="shop">
@@ -576,7 +581,7 @@ html.hf-sample [data-f="sample"] { display:none !important }
<div class="section-eyebrow">The Collection</div>
<h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
</div>
- <div class="section-meta">Silk · Luxe · Sheen · Jacquard</div>
+ <div class="section-meta">Vintage · Midcentury · Deco · Damask</div>
</div>
<div class="filters" id="facets">
@@ -628,11 +633,22 @@ html.hf-sample [data-f="sample"] { display:none !important }
<div class="sentinel" id="sentinel"></div>
</section>
+<!-- IG-EMBED:START (TK-11322) -->
+<section class="ig-embed" aria-label="Follow us on Instagram" style="max-width:1120px;margin:44px auto;padding:0 20px">
+ <h2 style="font-family:Georgia,'Times New Roman',serif;font-weight:500;letter-spacing:.02em;text-align:center;margin:0 0 20px">Follow <a href="https://www.instagram.com/retrowalls/" target="_blank" rel="noopener noreferrer">@retrowalls</a> on Instagram</h2>
+ <div class="ig-embed__row" style="display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:flex-start">
+ <blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/DcchrqWnxj9/" data-instgrm-version="14" style="margin:0;min-width:250px;max-width:328px;width:100%"></blockquote>
+ <blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/Dcb33LOgewK/" data-instgrm-version="14" style="margin:0;min-width:250px;max-width:328px;width:100%"></blockquote>
+ <blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/DcWe5rWgaUu/" data-instgrm-version="14" style="margin:0;min-width:250px;max-width:328px;width:100%"></blockquote>
+ </div>
+</section>
+<script async src="//www.instagram.com/embed.js"></script>
+<!-- IG-EMBED:END -->
<footer>
<div class="footer-grid">
<div>
- <div class="footer-brand">silkwallpaper</div>
- <p class="footer-text">silkwallpaper — real samples ship free.</p>
+ <div class="footer-brand">retrowalls</div>
+ <p class="footer-text">retrowalls — 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">
@@ -652,8 +668,8 @@ html.hf-sample [data-f="sample"] { display:none !important }
</div>
</div>
<div class="footer-bottom">
- <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>retrowalls.com</span>
+ <span><a href="mailto:info@retrowalls.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@retrowalls.com</a></span>
<span><a href="/privacy.html" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">Privacy</a></span>
<span id="footerStat"></span>
</div>
@@ -662,7 +678,7 @@ html.hf-sample [data-f="sample"] { display:none !important }
<script>
// mini-constellation — 43 niche-stars, current site highlighted in gold
(function(){
- const SLUG = "silkwallpaper";
+ const SLUG = "retrowalls";
const NICHES = [
['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
@@ -729,15 +745,26 @@ const state = { q:'', facet:'all', sort:'newest', view:'grid', page:1, pages:1,
// Touch device = no hover. Drives tap-to-reveal card behavior.
const TOUCH = window.matchMedia('(hover: none)').matches;
const HOSTKEY = location.hostname.replace(/\./g, '_');
-// DW STANDARD: hydrate saved view BEFORE the first grid load (sort hydrates in the sort-select wire-up below).
+// DW STANDARD: hydrate saved view AND sort BEFORE the first grid load.
+// The change listener for the sort <select> is still attached later in the
+// file; this block just ensures state.sort/state.view are right when
+// loadGridPage() fires for the first time.
(function(){
try {
const savedView = localStorage.getItem(HOSTKEY + '_view');
if (savedView === 'list' || savedView === 'grid') state.view = savedView;
document.documentElement.dataset.view = state.view;
+ const savedSort = localStorage.getItem(HOSTKEY + '_sort');
+ if (savedSort) state.sort = savedSort;
+ // Hydrate density CSS var BEFORE first paint so the grid renders at the
+ // saved column count instead of flashing the default 6 → saved value.
+ const savedDensity = parseInt(localStorage.getItem('rw_theme_density') || '6', 10);
+ if (savedDensity >= 4 && savedDensity <= 12) {
+ document.documentElement.style.setProperty('--cols', savedDensity);
+ }
} catch(e){}
})();
-const LABELS = {"all":"All","contemporary":"Modern Silk","traditional":"Classic Silk","textured":"Textured & Tactile","commercial":"Commercial-Grade","silk":"Pure Silk"};
+const LABELS = {"all":"All","deco":"Art Deco","damask":"Damask","global":"Global & Eclectic","geometric":"Geometric & Abstract"};
// ── href-to-deeper-data (HARD rule) — storefront model: single `aesthetic` facet + q + sort ──
// Mirror the filter state into the URL so any filtered view is a real shareable/deep-linkable
@@ -977,10 +1004,10 @@ const dlabel = document.getElementById('densityLabel');
function setDensity(n) {
document.documentElement.style.setProperty('--cols', n);
dlabel.textContent = n + ' cols';
- try { localStorage.setItem('silk_theme_density', n); } catch(e){}
+ try { localStorage.setItem('rw_theme_density', n); } catch(e){}
}
slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('silk_theme_density') || '6');
+const savedDensity = parseInt(localStorage.getItem('rw_theme_density') || '6');
if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
// ===== Grid / List view toggle =====
@@ -1031,7 +1058,7 @@ syncColHeaders();
// Theme toggle
const tb = document.getElementById('theme-toggle');
function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('silk_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'dark');
+setTheme(document.documentElement.dataset.theme || 'light');
tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
// === RAILS PATCH (DW fleet sweep A4 2026-05-26) ===
@@ -1182,322 +1209,6 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
DW UNIVERSAL CONTACT MODULE — fashion-house UX
Inject before <script src="/hero-4grid.js" defer></script>
<script src="/dw-theme-nav.js" defer></script>
-
-<!-- GRID DENSITY SLIDER (DESKTOP ONLY, 3-12 COLUMNS) -->
-<script>
-(function(){
- const CFG = {
- storageKey: 'dw_grid_cols',
- minCols: 3,
- maxCols: 12,
- defaultCols: 3,
- mobileBreakpoint: 768,
- nameHideThreshold: 5 // Hide names when > 5 columns
- };
-
- const GRID_SEL = [
- '[data-collection-grid]',
- '.collection-grid',
- '.product-grid',
- '[role="region"] .grid',
- 'main .grid',
- '.grid'
- ];
-
- // Common product name selectors
- const NAME_SEL = [
- '.product-name',
- '.card-title',
- '.product-title',
- 'h3',
- 'h2',
- '[data-product-name]',
- '.title'
- ];
-
- function findGrid() {
- for (const sel of GRID_SEL) {
- const el = document.querySelector(sel);
- if (el && el.children.length > 0) return el;
- }
- return null;
- }
-
- function findNameElements(grid) {
- // Look for names within grid items
- const names = [];
- const items = grid.querySelectorAll(':scope > *');
-
- for (const item of items) {
- for (const sel of NAME_SEL) {
- const name = item.querySelector(sel);
- if (name && name.textContent.trim()) {
- names.push(name);
- break; // One name per item
- }
- }
- }
-
- return names;
- }
-
- function init() {
- const grid = findGrid();
- if (!grid || document.getElementById('dw-density-slider')) return;
-
- const html = `
- <div id="dw-density-slider" class="dw-grid-control">
- <div class="dw-grid-label">Columns</div>
- <div class="dw-grid-buttons">
- <button data-cols="3" aria-label="3 columns" title="3" class="active">3</button>
- <button data-cols="4" aria-label="4 columns" title="4">4</button>
- <button data-cols="5" aria-label="5 columns" title="5">5</button>
- <button data-cols="6" aria-label="6 columns" title="6">6</button>
- </div>
- <input type="range" id="dw-col-range" class="dw-slider" min="3" max="12" step="1" value="3" aria-label="Grid columns">
- <span id="dw-col-label" class="dw-col-label">3 cols</span>
- </div>
- `;
-
- const style = document.createElement('style');
- style.textContent = `
- #dw-density-slider {
- display: none;
- }
-
- .dw-grid-label {
- font-size: 11px;
- font-weight: 700;
- letter-spacing: .08em;
- text-transform: uppercase;
- color: #666;
- order: -1;
- flex-basis: 100%;
- }
-
- .dw-grid-buttons {
- display: none;
- }
-
- .dw-grid-buttons button {
- flex: 1;
- min-width: 36px;
- height: 36px;
- border: 1px solid #ddd;
- background: #fff;
- color: #666;
- font-weight: 600;
- font-size: 13px;
- cursor: pointer;
- border-radius: 4px;
- transition: all .15s;
- touch-action: manipulation;
- }
-
- .dw-grid-buttons button:active {
- transform: scale(0.95);
- }
-
- .dw-grid-buttons button.active {
- background: #000;
- color: #fff;
- border-color: #000;
- }
-
- .dw-slider {
- display: none;
- }
-
- #dw-col-label {
- display: none;
- }
-
- /* Smart name hiding: hide names when > 5 columns */
- [data-grid-cols="6"] .product-name,
- [data-grid-cols="6"] .card-title,
- [data-grid-cols="6"] .product-title,
- [data-grid-cols="6"] .title {
- display: none !important;
- }
-
- @media (min-width: 769px) {
- #dw-density-slider {
- display: flex;
- flex-wrap: nowrap;
- gap: 16px;
- background: transparent;
- border: none;
- padding: 12px 0;
- margin: 24px 0;
- width: auto;
- min-width: fit-content;
- flex-shrink: 0;
- position: relative;
- z-index: 10;
- }
-
- .dw-grid-label {
- flex-basis: auto;
- order: 0;
- flex-shrink: 0;
- }
-
- .dw-grid-buttons {
- display: none;
- }
-
- .dw-slider {
- display: block;
- flex: 0 0 200px;
- height: 4px;
- border-radius: 2px;
- background: #ddd;
- outline: none;
- -webkit-appearance: none;
- appearance: none;
- cursor: pointer;
- }
-
- .dw-slider::-webkit-slider-thumb {
- -webkit-appearance: none;
- appearance: none;
- width: 18px;
- height: 18px;
- border-radius: 50%;
- background: #000;
- cursor: pointer;
- box-shadow: 0 1px 3px rgba(0,0,0,.2);
- }
-
- .dw-slider::-moz-range-thumb {
- width: 18px;
- height: 18px;
- border-radius: 50%;
- background: #000;
- cursor: pointer;
- border: 0;
- box-shadow: 0 1px 3px rgba(0,0,0,.2);
- }
-
- .dw-slider::-moz-range-track {
- background: transparent;
- border: 0;
- }
-
- #dw-col-label {
- display: block;
- font-size: 12px;
- color: #666;
- min-width: 60px;
- text-align: right;
- }
- }
- `;
- document.head.appendChild(style);
-
- const div = document.createElement('div');
- div.innerHTML = html;
- grid.parentNode.insertBefore(div.firstElementChild, grid);
-
- let cols = CFG.defaultCols;
- try {
- const saved = localStorage.getItem(CFG.storageKey);
- if (saved) {
- const n = parseInt(saved, 10);
- if (n >= CFG.minCols && n <= CFG.maxCols) cols = n;
- }
- } catch (e) {}
-
- const range = document.getElementById('dw-col-range');
- const label = document.getElementById('dw-col-label');
- const buttons = document.querySelectorAll('.dw-grid-buttons button');
-
- function set(n) {
- // Update grid columns
- grid.style.gridTemplateColumns = `repeat(${n}, 1fr)`;
- grid.setAttribute('data-grid-cols', n);
-
- // Update label
- label.textContent = `${n} col${n === 1 ? '' : 's'}`;
-
- // Update slider
- range.value = n;
-
- // Update active button
- buttons.forEach(btn => {
- btn.classList.toggle('active', parseInt(btn.dataset.cols) === n);
- });
-
- // Smart name hiding: hide names if > 5 columns
- const nameElements = findNameElements(grid);
- nameElements.forEach(name => {
- if (n > CFG.nameHideThreshold) {
- name.style.display = 'none';
- } else {
- name.style.display = '';
- }
- });
-
- // Save preference
- try { localStorage.setItem(CFG.storageKey, String(n)); } catch (e) {}
- }
-
- // Event listeners
- range.addEventListener('input', e => set(parseInt(e.target.value, 10)));
- buttons.forEach(btn => {
- btn.addEventListener('click', e => {
- e.preventDefault();
- set(parseInt(btn.dataset.cols, 10));
- });
- });
-
- // Initial set
- set(cols);
- }
-
- // Init on DOM ready
- if (document.readyState === 'loading') {
- document.addEventListener('DOMContentLoaded', init);
- } else {
- init();
- }
-
- // Retry for slow-loading grids
- setTimeout(() => {
- if (!document.getElementById('dw-density-slider')) init();
- }, 500);
-})();
-
-</script>
-
-<!-- SORT CONTROL PILL STYLING — Complements grid density slider -->
-<script>
-(function() {
- const style = document.createElement('style');
- style.textContent = `
- /* Sort control pill styling — matches grid slider button aesthetic */
- select[data-sort], select[aria-label*="sort" i], .sort-select, .collection-sort-select {
- display: inline-flex; align-items: center; padding: 10px 16px; border: 1px solid #ddd; border-radius: 20px; background: #fff; color: #333;
- font-weight: 500; font-size: 13px; cursor: pointer; transition: all 0.15s ease; appearance: none; -webkit-appearance: none;
- background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
- background-repeat: no-repeat; background-position: right 8px center; background-size: 18px; padding-right: 32px;
- position: relative; z-index: 100; max-width: 100%; min-width: 140px;
- }
- select[data-sort]:hover, select[aria-label*="sort" i]:hover, .sort-select:hover, .collection-sort-select:hover {
- border-color: #333; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
- }
- select[data-sort]:focus, select[aria-label*="sort" i]:focus, .sort-select:focus, .collection-sort-select:focus {
- outline: none; border-color: #000; box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
- }
- .sort-control-wrapper { display: inline-block; position: relative; margin-right: 8px; }
- .collection-controls { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; overflow: visible !important; }
- [data-sort], [aria-label*="sort" i], .sort-select, .collection-sort-select, .filters-toolbar {
- overflow: visible !important;
- }
- `;
- document.head.appendChild(style);
-})();
-</script>
</body> in every DW-family sister site.
Self-contained: CSS + 4 modals + JS submission handlers.
Uses host site's CSS vars (--bg, --fg, --gold, --rule).
@@ -1618,9 +1329,9 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
<svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
<span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
</button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@silkwallpaper.com">
+ <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@retrowalls.com">
<svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@silkwallpaper.com</span></span>
+ <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@retrowalls.com</span></span>
</a>
</div>
</div>
@@ -1785,7 +1496,7 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
if (i >= pool.length) return; // none qualified -> static hero stays
const url = pool[(start + i) % pool.length];
const probe = new Image();
- probe.onload = () => { if (probe.naturalWidth >= 800) bg.style.backgroundImage = "url('" + url + "')"; else tryAt(i + 1); };
+ probe.onload = () => { if (probe.naturalWidth >= 1400) bg.style.backgroundImage = "url('" + url + "')"; else tryAt(i + 1); };
probe.onerror = () => tryAt(i + 1);
probe.src = url;
})(0);
@@ -1840,9 +1551,9 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
</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. */
+/* R4 — Alternating hero modes (huge / four-square). Server-side default is huge.
+ This client-only flip starts on visit 2. Both modes share the same .cinema min-height,
+ so the swap is CLS-free. Crawlers always see huge (server skips this hydration). */
(function(){
try {
var k='dw-hero-mode';
@@ -1853,6 +1564,7 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
var mode = next===0 ? 'huge' : 'four-square';
document.documentElement.dataset.heroMode = mode;
if (mode === 'four-square') {
+ // Try to populate four-square from existing product list (newest 4)
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';
@@ -1873,7 +1585,7 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
});
}
}
- } catch(e) { /* no-op: keep server default */ }
+ } catch(e) { /* localStorage disabled — keep server default (huge) */ }
})();
</script>
@@ -1885,14 +1597,9 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
<!-- corner-nav disabled (UL-hamburger rebuild) -->
<script src="/sku-redact.js" defer></script>
-<!-- hero-4grid grid DISABLED so the single high-res hero shows full-bleed --><!-- <script src="/hero-4grid.js" defer></script> -->
-<script>window.DwHeaderConfig={siteName:"Silk Wallpaper",accent:"#9B7B4F",navLinks:[{name:'Home',url:'/'},{name:'Collections',url:'#shop'},{name:'About',url:'/about'},{name:'Care',url:'/care.html'},{name:'History',url:'/history.html'}],adminLinks:[{name:'Shopify admin',url:'https://admin.shopify.com',external:true},{name:'Edit hero',url:'#'},{name:'Analytics',url:'#'}]};</script>
-<script src="/dw-header.js" defer></script>
+<!-- hero4-fix: activate 2x2 hero (self-contained; was commented placeholder) -->
+<script src="/hero-4grid.js" defer></script>
<!-- DW network ad slot -->
<script src="https://ads.agentabrams.com/embed.js" data-slot="footer-strip"></script>
-
- <!-- fleet corner-nav (corner-nav-fanout.js) -->
- <style>:root{--cnav-drawer-bg:#0d0d0d;--cnav-burger-bg:rgba(13,13,13,.92);--cnav-fg:#f2f2f0;--cnav-muted:#8a8a8a;--cnav-accent:#d9d2c4;--cnav-line:#262626;--cnav-sec-line:#1c1c1c;}</style>
- <script src="/corner-nav-accordion.js" defer></script>
</body>
</html>
diff --git a/server.js b/server.js
index a643fb4..b4a8736 100644
--- a/server.js
+++ b/server.js
@@ -214,6 +214,7 @@ app.get(/^\/(history|vocabulary|sourcing|care|trade|about|index)\.html$/i, (req,
require('../_shared/_universal-promo-banner')(app, {}); // new-arrivals promo strip (Tier B)
app.use(express.static(path.join(__dirname, 'public')));
+app.get('/privacy', (req, res) => res.sendFile(path.join(__dirname, 'public', 'privacy.html')));
app.get('/api/products', (req, res) => {
const { q, aesthetic, vendor, page = 1, limit = 24, sort = 'newest'} = req.query;
← c8f7879 auto-data-snapshot: 2026-09-10T11:43:04 (2 data files) — dat
·
back to Silkwallpaper
·
silkwallpaper: declare helmet + dotenv (undeclared deps woul 2358b77 →