← back to Retrowalls
apply R1+R2+R4 hero standing rules — strip Studio Castel, lowercase serif wordmark below photo, add data-hero-mode huge default + four-square hydration
76c1d3156d44521a3a1848261db0e4ab2612db21 · 2026-05-10 08:53:00 -0700 · Steve
Files touched
M public/index.htmlM server.jsM site.config.json
Diff
commit 76c1d3156d44521a3a1848261db0e4ab2612db21
Author: Steve <steve@designerwallcoverings.com>
Date: Sun May 10 08:53:00 2026 -0700
apply R1+R2+R4 hero standing rules — strip Studio Castel, lowercase serif wordmark below photo, add data-hero-mode huge default + four-square hydration
---
public/index.html | 136 ++++++++++++++++++++++++++++++++++++++++++++----------
server.js | 4 +-
site.config.json | 8 ++--
3 files changed, 117 insertions(+), 31 deletions(-)
diff --git a/public/index.html b/public/index.html
index 0faee0a..a5131d8 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-CWZ4ZSQF3T"></script>
@@ -12,8 +14,8 @@
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Studio Castel — RETRO.</title>
-<meta name="description" content="Studio Castel is a curated atelier dedicated entirely to retro. We do one thing — and we do it carefully.">
+<title>retrowalls — vintage to midcentury, real samples ship free.</title>
+<meta name="description" content="retrowalls — a curated wallcovering atelier dedicated to vintage, midcentury, deco, and damask. Free memo samples. Trade service.">
<meta name="theme-color" content="#F5F2EB">
<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">
@@ -22,9 +24,11 @@
{
"@context": "https://schema.org",
"@type": "Organization",
- "name": "Studio Castel",
+ "name": "retrowalls",
"url": "https://retrowalls.com/",
- "email": "info@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>
@@ -58,15 +62,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 ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
+/* ===== 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.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%) }
.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 .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 }
+/* 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) } }
+/* 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 }
@@ -336,24 +351,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="Studio Castel home">
+ <a href="/" class="ns-brand" aria-label="Home">
<span class="ns-dot"></span>
- <span class="ns-name">Studio Castel</span>
+ <span class="ns-name">retrowalls</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>
@@ -362,7 +390,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@retrowalls.com?subject=retrowalls%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>
@@ -381,18 +409,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="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">Vintage to Midcentury</div>
- <div class="center-mark">Retro Walls</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">retrowalls</h1>
+ <span class="hero-wordmark-sub">Vintage · Midcentury · Deco · Damask</span>
+</div>
<section class="section" id="ideas">
@@ -450,8 +491,8 @@ textarea:focus-visible,
<footer>
<div class="footer-grid">
<div>
- <div class="footer-brand">Retro Walls</div>
- <p class="footer-text">Retro Walls is a specialty vintage archive within the Designer Wallcoverings family. 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">
@@ -471,7 +512,7 @@ textarea:focus-visible,
</div>
</div>
<div class="footer-bottom">
- <span>retrowalls.com · Studio Castel</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 id="footerStat"></span>
</div>
@@ -801,6 +842,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 || '';
@@ -831,6 +873,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 ✓';
@@ -950,5 +998,43 @@ loadGridPage();
})();
</script>
+<script>
+/* 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';
+ 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') {
+ // 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';
+ 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) { /* localStorage disabled — keep server default (huge) */ }
+})();
+</script>
</body>
</html>
diff --git a/server.js b/server.js
index bc81625..78db42d 100644
--- a/server.js
+++ b/server.js
@@ -80,10 +80,10 @@ 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: "Retro Walls", zdColor: "#C9A14B", zdPosition: 'right' });
+require('./_universal-contact')(app, { siteName: "retrowalls", zdColor: "#C9A14B", zdPosition: 'right' });
require('./_universal-auth')(app, { siteName: "retrowalls" });
-app.use(express.static(path.join(__dirname, 'public')));
+app.use(express.static(path.join(__dirname, 'public'), { extensions: ['html'] }));
app.get('/api/products', (req, res) => {
const { q, aesthetic, vendor, page = 1, limit = 24, sort = 'newest'} = req.query;
diff --git a/site.config.json b/site.config.json
index dacd950..f3cb5dc 100644
--- a/site.config.json
+++ b/site.config.json
@@ -1,11 +1,11 @@
{
"slug": "retrowalls",
- "siteName": "Retro Walls",
+ "siteName": "retrowalls",
"domain": "retrowalls.com",
"nicheKeyword": "retro",
- "tagline": "The room you remember.",
- "heroHeadline": "RETRO WALLS",
- "heroSub": "The room you remember.",
+ "tagline": "Vintage · Midcentury · Deco · Damask",
+ "heroHeadline": "retrowalls",
+ "heroSub": "Vintage · Midcentury · Deco · Damask",
"theme": {
"accent": "#C9A14B"
},
← 1ad1285 Scrub Designer Wallcoverings from products.json (vendor/imag
·
back to Retrowalls
·
sort-skill canonical: add light-dark/dark-light/wheel + help 17996f8 →