← back to Silkwallcoverings
Hamburger always visible on right — propagated from novasuede a815690
76632129ef1d52ae3858c3fc2f0b782a3ca9addd · 2026-05-08 01:32:29 -0700 · Steve
Standing rule in ~/.claude/skills/dw-site-build/SKILL.md (added today): every
DW-family site ships with hamburger ALWAYS visible on the right, inline nav
collapses into drop-panel at all viewports. Premium-minimal pattern (Aesop /
Hermès / Apple Music).
Same edit as novasuede:
- ns-header media-query collapse rules unwrapped to apply at all widths
- second .mobile-toggle block (legacy 'header .mobile-toggle' selector)
also unwrapped from the <760px gate
Reversible: re-wrap both blocks in @media (max-width: 760px) and restore the
@media (min-width: 761px) display:none override.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Files touched
Diff
commit 76632129ef1d52ae3858c3fc2f0b782a3ca9addd
Author: Steve <steve@designerwallcoverings.com>
Date: Fri May 8 01:32:29 2026 -0700
Hamburger always visible on right — propagated from novasuede a815690
Standing rule in ~/.claude/skills/dw-site-build/SKILL.md (added today): every
DW-family site ships with hamburger ALWAYS visible on the right, inline nav
collapses into drop-panel at all viewports. Premium-minimal pattern (Aesop /
Hermès / Apple Music).
Same edit as novasuede:
- ns-header media-query collapse rules unwrapped to apply at all widths
- second .mobile-toggle block (legacy 'header .mobile-toggle' selector)
also unwrapped from the <760px gate
Reversible: re-wrap both blocks in @media (max-width: 760px) and restore the
@media (min-width: 761px) display:none override.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
public/index.html | 377 +++++++++++++++++++++++++++++++++++++++++++++---------
1 file changed, 320 insertions(+), 57 deletions(-)
diff --git a/public/index.html b/public/index.html
index 3c90b14..05525f1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,34 +2,55 @@
<html lang="en">
<head>
<meta charset="utf-8">
+<!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-NMVC4V48LE"></script>
+<script>
+ window.dataLayer = window.dataLayer || [];
+ function gtag(){dataLayer.push(arguments);}
+ gtag('js', new Date());
+ gtag('config', 'G-NMVC4V48LE');
+</script>
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>SILK WALLCOVERINGS — Pure silk</title>
-<meta name="description" content="SILK WALLCOVERINGS · Pure silk. Curated wallcoverings sourced through the Designer Wallcoverings trade channel.">
-<meta name="theme-color" content="#0d0a08">
+<title>Noir Maison — SILK — IN BLACK.</title>
+<meta name="description" content="Noir Maison is a curated atelier dedicated entirely to silk. We do one thing — and we do it carefully.">
+<meta name="theme-color" content="#FFF">
<link rel="canonical" href="https://silkwallcoverings.com/">
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;1,400&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;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": "Noir Maison",
+ "url": "https://silkwallcoverings.com/",
+ "email": "info@silkwallcoverings.com"
+}
+</script>
<script src="/zd-loader.js" defer></script>
<style>
:root {
- --bg: #0d0a08;
- --paper: #ffffff;
- --muted: #a89880;
- --line: rgba(255,255,255,0.10);
- --accent: #c8a060;
- --bg-soft: #1a140e;
- --cols: 6; /* default grid density — slider controls this */
+ --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: #f5e8d4;
- --paper: #0a0905;
- --muted: #6b5f56;
- --line: rgba(10,9,5,0.12);
- --accent: #5a3818;
- --bg-soft: #ebd8b8;
+ --bg: #FFF;
+ --paper: #000;
+ --muted: #666;
+ --line: rgba(0,0,0,0.20);
+ --accent: #000;
+ --bg-soft: #F5F5F5;
}
* { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
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; }
/* ===== 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 }
@@ -94,8 +115,8 @@ header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:s
.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
.card .sample-btn:hover { background:var(--accent); color:#fff }
-@media (max-width:980px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:680px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
+@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
+@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
.sentinel { height:1px }
.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
@@ -138,6 +159,225 @@ textarea:focus-visible,
</script>
</head>
<body>
+<style id="ns-header-modal-styles">
+ .ns-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px 36px; background: rgba(10,10,10,0.92) !important; backdrop-filter: blur(8px); border-bottom: 1px solid rgba(245,241,232,0.06); }
+ .ns-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
+ .ns-dot { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #a98b5b 0%, #5d4c32 60%, #332a1b 100%); box-shadow: 0 0 0 1px rgba(245,241,232,0.10), 0 2px 12px rgba(180,90,60,0.30); flex-shrink: 0; }
+ .ns-name { font-family: -apple-system, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif; font-size: 18px !important; font-weight: 300 !important; letter-spacing: 0.02em !important; color: #f5f1e8 !important; text-transform: none !important; margin: 0 !important; }
+ .ns-name sup { font-size: 0.55em; font-weight: 300; margin-left: 1px; }
+ .ns-nav { display: flex; gap: 32px; align-items: center; list-style: none; padding: 0; margin: 0; }
+ .ns-nav a, .ns-nav button { font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; font-size: 15px !important; font-weight: 400 !important; color: #f5f1e8 !important; text-decoration: none !important; background: none !important; border: 0 !important; cursor: pointer; padding: 0 !important; transition: color 200ms; letter-spacing: 0 !important; text-transform: none !important; }
+ .ns-nav a:hover, .ns-nav button:hover { color: #ffffff !important; }
+ /* Standing UX (2026-05-08 Steve directive): hamburger ALWAYS visible
+ on the right at all viewports. Inline ns-nav collapses into the
+ drop-panel under the header on click. Premium-minimal pattern.
+ Reflected as standing rule in ~/.claude/skills/dw-site-build/SKILL.md. */
+ .ns-header { flex-wrap: wrap; }
+ .ns-nav { display: none !important; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 0 4px; }
+ .ns-nav.open { display: flex !important; }
+ .ns-nav a, .ns-nav button { padding: 10px 0 !important; border-bottom: 1px solid rgba(245,241,232,0.08); width: 100%; text-align: left; }
+ .ns-header .mobile-toggle { display: flex !important; }
+ @media (max-width: 820px) { .ns-header { padding: 14px 18px; } }
+ .ns-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 200; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(6px); }
+ .ns-modal.show { display: flex; }
+ .ns-modal-card { max-width: 460px; width: 100%; background: #141414 !important; border: 1px solid rgba(245,241,232,0.14); border-radius: 6px; padding: 28px 30px 30px; position: relative; }
+ .ns-modal-card .close-x { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; background: none; border: 1px solid rgba(245,241,232,0.18); color: rgba(245,241,232,0.6) !important; border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
+ .ns-modal-card .close-x:hover { color: #ffffff !important; border-color: #ffffff; }
+ .ns-modal-card h3 { font-family: -apple-system, "SF Pro Display", system-ui; font-weight: 300 !important; font-size: 22px !important; margin: 0 0 6px !important; color: #f5f1e8 !important; }
+ .ns-modal-card .sub { color: rgba(245,241,232,0.65) !important; font-size: 13px; margin: 0 0 22px; }
+ .ns-actions { display: flex; flex-direction: column; gap: 10px; }
+ .ns-action { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(245,241,232,0.04) !important; border: 1px solid rgba(245,241,232,0.12) !important; color: #f5f1e8 !important; text-decoration: none !important; cursor: pointer; transition: all 200ms; font: inherit; text-align: left; }
+ .ns-action:hover { background: rgba(245,241,232,0.08) !important; border-color: #d4b683 !important; }
+ .ns-action .ico { width: 32px; height: 32px; border-radius: 50%; background: rgba(212,182,131,0.12); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
+ .ns-action .txt { flex: 1; }
+ .ns-action .txt b { display: block; font-weight: 500; font-size: 14px; color: #f5f1e8 !important; }
+ .ns-action .txt span { font-size: 12px; color: rgba(245,241,232,0.55) !important; }
+
+ /* ─── FINAL CONTRAST PASS — kill remaining gold-solid + white-island defects ─── */
+ /* Replace all gold-fill accents with off-white (Gucci-aesthetic, no DW gold solids) */
+ .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;
+ }
+ /* Gold accents stay only as edge color (links, glyphs) — not fills */
+ a { color: #d4b683; }
+ a:hover { color: #f5d97a; }
+ /* Authorized-dealer footer line — small caps tracked, muted ink, no gold pill */
+ .authorized, .authorized-dealer p {
+ background: transparent !important;
+ color: rgba(245,241,232,0.5) !important;
+ font-size: 10px !important;
+ letter-spacing: 0.22em !important;
+ text-transform: uppercase !important;
+ padding: 0 !important;
+ border: none !important;
+ margin-top: 14px !important;
+ }
+ /* Kill any straggler white bg in info-card / sample-related cards */
+ .info-card, .info-card-link, .care-highlight, .feature-card, .spec-item {
+ background-color: rgba(245,241,232,0.04) !important;
+ border-color: rgba(245,241,232,0.12) !important;
+ }
+ /* Ensure modal content stays readable — Steve's earlier sweep made it #141414 with white text */
+ .modal-content { background: #141414 !important; color: #f5f1e8 !important; }
+ .modal-content * { color: #f5f1e8 !important; }
+ .modal-content input, .modal-content textarea, .modal-content select {
+ background: rgba(245,241,232,0.05) !important;
+ color: #f5f1e8 !important;
+ border-color: rgba(245,241,232,0.2) !important;
+ }
+ .modal-content label { color: rgba(245,241,232,0.6) !important; }
+ /* Force the wide-tracked NOVASUEDE wordmark to stay white */
+ .ns-wordmark, .ns-wordmark sup { color: #f5f1e8 !important; }
+
+ /* ─── Modal-internal contrast (post-QA defects) ─── */
+ /* Backdrop covers full viewport */
+ .modal { width: 100vw !important; height: 100vh !important; left: 0 !important; top: 0 !important; background: rgba(0, 0, 0, 0.78) !important; backdrop-filter: blur(6px); }
+ /* Chip — flip from white-on-white island to dark card */
+ .request-chip {
+ background: rgba(245, 241, 232, 0.06) !important;
+ color: #f5f1e8 !important;
+ border: 1px solid rgba(245, 241, 232, 0.18) !important;
+ border-radius: 4px !important;
+ }
+ .request-chip * { color: #f5f1e8 !important; }
+ .request-chip .chip-swatch {
+ /* swatch dot ALWAYS displays the inline-style hex from JS — fight any sweep */
+ border: 1px solid rgba(0, 0, 0, 0.4) !important;
+ }
+ /* + Add to request — hairline white-border on transparent (no gold) */
+ .add-to-request-btn {
+ background: transparent !important;
+ color: #f5f1e8 !important;
+ border: 1px solid rgba(245, 241, 232, 0.6) !important;
+ border-radius: 0 !important;
+ padding: 12px 22px !important;
+ font-size: 11px !important;
+ letter-spacing: 0.32em !important;
+ text-transform: uppercase !important;
+ font-weight: 400 !important;
+ }
+ .add-to-request-btn:hover {
+ background: #f5f1e8 !important;
+ color: #0a0a0a !important;
+ border-color: #f5f1e8 !important;
+ }
+ /* Hex caption visible */
+ .preview-hex, #colorPreviewHex {
+ display: block !important;
+ color: rgba(245, 241, 232, 0.55) !important;
+ font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
+ font-size: 11px !important;
+ margin-top: 4px !important;
+ letter-spacing: 0.04em !important;
+ text-transform: lowercase !important;
+ }
+ /* Color preview name — stays single, prominent */
+ #colorPreviewName {
+ color: #f5f1e8 !important;
+ font-size: 11px !important;
+ letter-spacing: 0.32em !important;
+ text-transform: uppercase !important;
+ font-weight: 500 !important;
+ display: block !important;
+ margin-top: 12px !important;
+ }
+
+ /* Hamburger button — ALWAYS visible on the right (Steve 2026-05-08). */
+ header .nav-container { flex-wrap: wrap; }
+ header nav { display: none; flex-basis: 100%; flex-direction: column; gap: 6px; padding: 16px 0 6px; }
+ header nav.open { display: flex; }
+ header nav a { padding: 10px 0; border-bottom: 1px solid rgba(245,241,232,0.1); }
+ header .mobile-toggle {
+ display: flex !important;
+ flex-direction: column;
+ gap: 5px;
+ background: transparent;
+ border: 0;
+ cursor: pointer;
+ padding: 8px;
+ }
+ header .mobile-toggle span {
+ width: 22px; height: 1.5px;
+ background: #f5f1e8;
+ display: block;
+ }
+
+ </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="/" class="ns-brand" aria-label="Home">
+ <span class="ns-dot"></span>
+ <span class="ns-name">Noir Maison</span>
+ </a>
+ <nav class="ns-nav" id="nsPrimaryNav" aria-label="Primary">
+ <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>
+ <h3 id="nsContactTitle">How can we help?</h3>
+ <p class="sub">Trade-account replies within one business day.</p>
+ <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@silkwallcoverings.com?subject=Noir%20Maison%20inquiry"><span class="ico">✉️</span><div class="txt"><b>Email Us</b><span>info@silkwallcoverings.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>
+ </div>
+<script>
+ function nsContactOpen() { var m = document.getElementById('nsContactModal'); if (m) m.classList.add('show'); }
+ function nsContactClose() { var m = document.getElementById('nsContactModal'); if (m) m.classList.remove('show'); }
+ function nsToggleNav(btn) {
+ var nav = document.getElementById('nsPrimaryNav');
+ if (!nav) return;
+ var open = nav.classList.toggle('open');
+ btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+ }
+ document.addEventListener('keydown', function(e){ if (e.key === 'Escape') nsContactClose(); });
+</script>
+
+
+
+
+
+
+
+
+
+
<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>
@@ -145,9 +385,9 @@ textarea:focus-visible,
</header>
<section class="cinema">
- <div class="cinema-bg"></div>
+ <div class="cinema-bg" id="heroBg"></div>
<div class="corner-mark">Trade-Grade Silk</div>
- <div class="center-mark">SILK WALLCOVERINGS<span class="tm">.</span><span class="sub">Pure silk</span></div>
+ <div class="center-mark">Noir MaisonS<span class="tm">.</span><span class="sub">Pure silk</span></div>
<div class="meta-line">Silk · Trade · Heritage Mills<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>
@@ -166,6 +406,16 @@ textarea:focus-visible,
</div>
<div class="density">
+ <label>Sort</label>
+ <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
+ <option value="newest">Newest</option>
+ <option value="color">Color</option>
+ <option value="style">Style</option>
+ <option value="sku">SKU A→Z</option>
+ <option value="title">Title A→Z</option>
+ <option value="price-asc">Price ↑</option>
+ <option value="price-desc">Price ↓</option>
+ </select>
<label>Grid</label>
<input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
<span class="ct" id="densityLabel">6 cols</span>
@@ -184,9 +434,9 @@ textarea:focus-visible,
<footer>
<div class="footer-grid">
<div>
- <div class="footer-brand">SILK WALLCOVERINGS</div>
- <p class="footer-text">A specialty archive within the Designer Wallcoverings family. Curated silk · trade · heritage mills from heritage mills, fulfilled through the DW trade channel — memo 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">DesignerWallcoverings.com — Authorized Trade Channel</p>
+ <div class="footer-brand">Noir Maison</div>
+ <p class="footer-text">Noir Maison is a curated atelier dedicated entirely to silk. We do one thing — and we do it carefully.</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">
<h4>Aesthetic</h4>
@@ -199,34 +449,9 @@ textarea:focus-visible,
<button onclick="dwmOpen('Contact')">Contact</button>
</div>
</div>
- <!-- mini-constellation: every storefront shows its position in the family -->
- <div style="max-width:1400px;margin:0 auto 24px;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)">
- <div style="display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:18px">
- <div>
- <div style="font-size:10px;letter-spacing:0.32em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:6px">★ DW FAMILY · 43 niches</div>
- <div style="font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:18px;color:var(--paper);letter-spacing:0.01em">You're on <span style="color:var(--accent);font-weight:500">silkwallcoverings</span>. Hover any star to leap.</div>
- </div>
- <a href="https://retrowalls.com/universe/" target="_blank" rel="noopener" style="font-size:10px;letter-spacing:0.32em;text-transform:uppercase;color:var(--accent);font-weight:600;text-decoration:none;border:1px solid var(--accent);padding:8px 14px">DW Universe →</a>
- </div>
- <svg id="miniConst" viewBox="0 0 1080 200" style="width:100%;height:200px;display:block" role="img" aria-label="DW family constellation: 43 niche sites; current site highlighted">
- <defs>
- <pattern id="dna-mat" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><line x1="0" y1="0" x2="0" y2="5" stroke="#c9b687" stroke-width="0.6"/></pattern>
- <pattern id="dna-dec" width="8" height="5" patternUnits="userSpaceOnUse"><polyline points="0,4 4,1 8,4" stroke="#b86a4a" stroke-width="0.6" fill="none"/></pattern>
- <pattern id="dna-cra" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(-30)"><line x1="0" y1="2.5" x2="5" y2="2.5" stroke="#6b8e6f" stroke-width="0.5" stroke-dasharray="1.4 1.2"/></pattern>
- <pattern id="dna-use" width="4" height="4" patternUnits="userSpaceOnUse"><path d="M0 0 L4 0 M0 0 L0 4" stroke="#4a6b8e" stroke-width="0.4" fill="none"/></pattern>
- </defs>
- </svg>
- <div style="display:flex;justify-content:space-between;font-size:9px;letter-spacing:0.32em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:6px;padding:0 8px">
- <span style="display:flex;align-items:center;gap:5px"><i style="display:inline-block;width:6px;height:6px;background:#c9b687;border-radius:50%"></i>Material</span>
- <span style="display:flex;align-items:center;gap:5px"><i style="display:inline-block;width:6px;height:6px;background:#b86a4a;border-radius:50%"></i>Decade</span>
- <span style="display:flex;align-items:center;gap:5px"><i style="display:inline-block;width:6px;height:6px;background:#6b8e6f;border-radius:50%"></i>Craft</span>
- <span style="display:flex;align-items:center;gap:5px"><i style="display:inline-block;width:6px;height:6px;background:#4a6b8e;border-radius:50%"></i>Use-case</span>
- </div>
- </div>
-
<div class="footer-bottom">
- <span>silkwallcoverings.com · a designer wallcoverings family vertical</span>
- <span><a href="https://retrowalls.com/universe/" target="_blank" rel="noopener" style="color:var(--accent);text-decoration:none;letter-spacing:0.18em">DW Universe — search all 43 niches at once →</a></span>
+ <span>silkwallcoverings.com · Noir Maison</span>
+ <span><a href="mailto:info@silkwallcoverings.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@silkwallcoverings.com</a></span>
<span id="footerStat"></span>
</div>
</footer>
@@ -268,7 +493,7 @@ textarea:focus-visible,
// deterministic jitter per slug
let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 14;
+ const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
const x = cx + jx, y = 28 + t * (H - 56) + jy;
const isCurrent = n[0] === SLUG;
const r = isCurrent ? 8 : 4;
@@ -302,7 +527,8 @@ function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c =>
// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
function cardHTML(p) {
- return '<img loading="lazy" src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
+ const eager = state.page === 1;
+ return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
+ '<div class="overlay">'
+ '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
+ '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
@@ -442,8 +668,9 @@ loadGridPage();
.dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
.dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
.dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:var(--gold);color:#000;border:0;padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:opacity 0.15s}
- .dwm-submit:hover{opacity:0.85}
+ .dwm-submit{background:transparent;color:var(--muted, #c9b89e);border:1px solid var(--muted, #c9b89e);padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:background 0.15s, color 0.15s}
+ .dwm-submit:hover{background:var(--muted, #c9b89e);color:var(--bg, #000)}
+
.dwm-submit:disabled{opacity:0.5;cursor:default}
.dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
.dwm-status.ok{color:var(--sage);display:block}
@@ -472,9 +699,9 @@ loadGridPage();
<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@designerwallcoverings.com">
+ <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@silkwallcoverings.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@designerwallcoverings.com</span></span>
+ <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@silkwallcoverings.com</span></span>
</a>
</div>
</div>
@@ -607,6 +834,42 @@ loadGridPage();
});
}
}, true);
+// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
+// drag-drop / hero-pin updates the live front page on next deploy.
+// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
+// the full-page hero stays sharp.
+(async function hydrateHero() {
+ try {
+ const r = await fetch('/api/products?limit=1');
+ if (!r.ok) return;
+ const d = await r.json();
+ let url = d.items && d.items[0] && d.items[0].image_url;
+ if (!url) return;
+ if (/^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(url)) {
+ url = url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
+ const bg = document.getElementById('heroBg');
+ if (bg) bg.style.backgroundImage = "url('" + url + "')";
+ }
+ } catch(e){}
+})();
+
+
+// DW STANDARD sort-select wire-up (added by fleet patcher)
+(function(){
+ const sortSel = document.getElementById('sortSelect');
+ if (!sortSel) return;
+ const KEY = location.hostname.replace(/\./g, '_') + '_sort';
+ const saved = localStorage.getItem(KEY);
+ if (saved) { try { sortSel.value = saved; } catch(e){} }
+ if (typeof state !== 'undefined') state.sort = sortSel.value;
+ sortSel.addEventListener('change', e => {
+ const v = e.target.value;
+ try { localStorage.setItem(KEY, v); } catch(e){}
+ if (typeof state !== 'undefined') state.sort = v;
+ if (typeof resetGrid === 'function') resetGrid();
+ else location.reload();
+ });
+})();
</script>
</body>
← a4a7511 initial scaffold (gitify-all 2026-05-06)
·
back to Silkwallcoverings
·
sort-skill canonical: add light-dark/dark-light/wheel + help 1fa2a05 →