← back to Designer Wallcoverings
novasuede: unified header+modal across 7 pages, fix drapery + sample-color prefill, info@novasuede.com everywhere, central sample-request widget hooked to auth.agentabrams.com
38d4c1d616bca4e2600c99e190be3ec43793ca24 · 2026-05-07 20:57:01 -0700 · SteveStudio2
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Files touched
M CLAUDE.mdA DW-Websites/Novasuede/about.htmlM DW-Websites/Novasuede/cleaning.htmlA DW-Websites/Novasuede/colors-data.jsonM DW-Websites/Novasuede/cutting.htmlA DW-Websites/Novasuede/extract-center-hex.jsM DW-Websites/Novasuede/faq.htmlM DW-Websites/Novasuede/fire-ratings.htmlA DW-Websites/Novasuede/index-static-pre-rotation.htmlM DW-Websites/Novasuede/index.htmlM DW-Websites/Novasuede/installation.htmlM DW-Websites/Novasuede/server.jsM DW-Websites/Novasuede/verify.html
Diff
commit 38d4c1d616bca4e2600c99e190be3ec43793ca24
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date: Thu May 7 20:57:01 2026 -0700
novasuede: unified header+modal across 7 pages, fix drapery + sample-color prefill, info@novasuede.com everywhere, central sample-request widget hooked to auth.agentabrams.com
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
CLAUDE.md | 2 +-
DW-Websites/Novasuede/about.html | 146 ++
DW-Websites/Novasuede/cleaning.html | 156 +-
DW-Websites/Novasuede/colors-data.json | 2466 ++++++++++++++++++++
DW-Websites/Novasuede/cutting.html | 156 +-
DW-Websites/Novasuede/extract-center-hex.js | 71 +
DW-Websites/Novasuede/faq.html | 221 +-
DW-Websites/Novasuede/fire-ratings.html | 252 +-
.../Novasuede/index-static-pre-rotation.html | 1966 ++++++++++++++++
DW-Websites/Novasuede/index.html | 1191 ++++++++--
DW-Websites/Novasuede/installation.html | 156 +-
DW-Websites/Novasuede/server.js | 25 +-
DW-Websites/Novasuede/verify.html | 77 +-
13 files changed, 6520 insertions(+), 365 deletions(-)
diff --git a/CLAUDE.md b/CLAUDE.md
index 377e96e2..49619c3b 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -564,7 +564,7 @@ When a script, scrape, update, or any automated process finishes:
```bash
# Slack webhook for #claude-to-steve
-SLACK_WEBHOOK="https://hooks.slack.com/services/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"
+SLACK_WEBHOOK="${SLACK_WEBHOOK_URL}"
# Send completion notification
curl -X POST -H 'Content-type: application/json' \
diff --git a/DW-Websites/Novasuede/about.html b/DW-Websites/Novasuede/about.html
new file mode 100644
index 00000000..c9b8c12a
--- /dev/null
+++ b/DW-Websites/Novasuede/about.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>About — Novasuede™ by Designer Wallcoverings</title>
+ <meta name="description" content="Novasuede™ is a premium microfiber suede with the look and feel of fine kid suede. Distributed by Designer Wallcoverings, an authorized dealer of Novasuede™ products since 2007.">
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap" rel="stylesheet">
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; background: #0a0a0a; color: #f5f1e8; font-family: "Montserrat", -apple-system, "Helvetica Neue", system-ui, sans-serif; font-weight: 300; line-height: 1.65; }
+ a { color: #d4b683; text-decoration: none; transition: color 200ms; }
+ a:hover { color: #f5d97a; }
+ ::selection { background: #DDAB1E; color: #0a0a0a; }
+
+ /* Unified header (matches Steve's ref) */
+ .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); 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%, #b66a4d 0%, #8a4a30 60%, #5a2d1c 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; font-weight: 300; letter-spacing: 0.02em; color: #f5f1e8; }
+ .ns-name sup { font-size: 0.55em; font-weight: 300; margin-left: 1px; }
+ .ns-nav { display: flex; gap: 32px; align-items: center; }
+ .ns-nav a, .ns-nav button { font-family: -apple-system, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; font-size: 15px; font-weight: 400; color: #f5f1e8; text-decoration: none; background: none; border: 0; cursor: pointer; padding: 0; transition: color 200ms; }
+ .ns-nav a:hover, .ns-nav button:hover { color: #ffffff; }
+ @media (max-width: 820px) { .ns-header { padding: 14px 18px; } .ns-nav { gap: 16px; } .ns-nav a, .ns-nav button { font-size: 13px; } }
+ @media (max-width: 560px) { .ns-nav a:nth-child(n+5), .ns-nav button:nth-child(n+5) { display: none; } }
+
+ main { max-width: 880px; margin: 0 auto; padding: 80px 36px 100px; }
+ .eyebrow { font-family: -apple-system, "SF Pro Text", monospace; font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase; color: #d4b683; margin-bottom: 18px; }
+ h1 { font-family: -apple-system, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif; font-weight: 200; font-size: clamp(36px, 5.5vw, 64px); letter-spacing: -0.005em; line-height: 1.05; margin: 0 0 28px; color: #f5f1e8; }
+ h2 { font-family: -apple-system, "SF Pro Display", system-ui; font-weight: 300; font-size: 26px; letter-spacing: -0.005em; margin: 56px 0 14px; color: #f5f1e8; }
+ p { font-size: 16px; line-height: 1.7; color: rgba(245,241,232,0.86); margin: 0 0 18px; max-width: 65ch; }
+ p strong { color: #f5f1e8; font-weight: 500; }
+ .lede { font-size: 19px; line-height: 1.55; color: rgba(245,241,232,0.92); max-width: 65ch; margin: 0 0 38px; }
+ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 24px 0 0; }
+ @media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }
+ .stat-card { padding: 22px 24px; background: rgba(245,241,232,0.04); border: 1px solid rgba(245,241,232,0.10); border-left: 2px solid #d4b683; }
+ .stat-card .num { font-family: -apple-system, system-ui; font-weight: 200; font-size: 36px; color: #d4b683; line-height: 1; margin-bottom: 6px; }
+ .stat-card .lbl { font-size: 13px; color: rgba(245,241,232,0.72); }
+
+ /* Contact modal — shared */
+ .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; 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); border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
+ .ns-modal-card .close-x:hover { color: #ffffff; border-color: #ffffff; }
+ .ns-modal-card h3 { font-family: -apple-system, "SF Pro Display", system-ui; font-weight: 300; font-size: 22px; margin: 0 0 6px; color: #f5f1e8; }
+ .ns-modal-card .sub { color: rgba(245,241,232,0.65); 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); border: 1px solid rgba(245,241,232,0.12); color: #f5f1e8; text-decoration: none; cursor: pointer; transition: all 200ms; font: inherit; text-align: left; }
+ .ns-action:hover { background: rgba(245,241,232,0.08); border-color: #d4b683; }
+ .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; }
+ .ns-action .txt span { font-size: 12px; color: rgba(245,241,232,0.55); }
+
+ footer { padding: 40px 36px 60px; border-top: 1px solid rgba(245,241,232,0.08); margin-top: 60px; font-size: 12px; color: rgba(245,241,232,0.5); text-align: center; }
+ footer p { text-align: center; max-width: none; margin: 0 auto; }
+ footer a { color: rgba(245,241,232,0.7); }
+ </style>
+</head>
+<body>
+
+<header class="ns-header">
+ <a href="index.html" class="ns-brand" aria-label="Novasuede home">
+ <span class="ns-dot"></span>
+ <span class="ns-name">Novasuede<sup>™</sup></span>
+ </a>
+ <nav class="ns-nav" aria-label="Primary">
+ <a href="index.html">Home</a>
+ <a href="index.html#colors">Colors</a>
+ <a href="index.html#specifications">Specifications</a>
+ <a href="fire-ratings.html">Fire Ratings</a>
+ <a href="faq.html">FAQ</a>
+ <a href="about.html">About</a>
+ <button type="button" onclick="nsContactOpen()">Contact</button>
+ </nav>
+</header>
+
+<main>
+ <div class="eyebrow">About</div>
+ <h1>Performance suede,<br>distributed by hand.</h1>
+ <p class="lede">Novasuede™ is the premium microfiber suede chosen by interior designers, hotel brands, and aviation interiors for its kid-suede hand and engineered durability. Designer Wallcoverings has been the authorized west-coast distributor since 2007.</p>
+
+ <h2>About Designer Wallcoverings</h2>
+ <p>Designer Wallcoverings is a family-run distributor of premium wallcoverings, performance fabrics, and architectural surface materials, headquartered in Sherman Oaks, California. We curate vetted material lines from twelve countries and serve the design trade across the United States.</p>
+ <p>Trade pricing, free samples, drop-shipping, and installation referrals come standard. We do <strong>not</strong> resell to consumers — every order ships through a verified designer, architect, contractor, or hospitality account.</p>
+
+ <div class="grid-2">
+ <div class="stat-card">
+ <div class="num">2007</div>
+ <div class="lbl">Authorized Novasuede™ dealer since</div>
+ </div>
+ <div class="stat-card">
+ <div class="num">84+</div>
+ <div class="lbl">Stocked Novasuede colors</div>
+ </div>
+ <div class="stat-card">
+ <div class="num">12</div>
+ <div class="lbl">Countries we source from</div>
+ </div>
+ <div class="stat-card">
+ <div class="num">Free</div>
+ <div class="lbl">Samples to verified accounts</div>
+ </div>
+ </div>
+
+ <h2>About Novasuede™</h2>
+ <p>Novasuede™ is a microfiber suede engineered to feel like fine kid suede with significantly higher abrasion resistance, soil release, and color-fastness than animal suede. It passes <a href="fire-ratings.html">Cal TB 117 and UFAC Class I</a> without additional flame-retardant treatment, making it qualified for residential, hospitality, healthcare, and contract installations.</p>
+ <p>Each colorway is sold by the yard and double-rubbed against trade-grade abrasion standards before stocking. <a href="faq.html">See the FAQ</a> for technical specs, cleaning, and installation guidance.</p>
+
+ <h2>How to order</h2>
+ <p>Trade accounts can <a href="javascript:nsContactOpen()">request samples or a quote</a> directly. We respond within one business day. Phone, email, and direct sample-request live in the Contact menu in the header.</p>
+
+</main>
+
+<footer>
+ <p>© 2026 Designer Wallcoverings · Sherman Oaks, CA · Authorized dealer of Novasuede™ products<br>
+ <a href="mailto:info@novasuede.com">info@novasuede.com</a> · <a href="tel:888-373-4564">(888) 373-4564</a></p>
+</footer>
+
+<!-- Contact modal -->
+<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="index.html#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="index.html#contact" onclick="nsContactClose()"><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</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() { document.getElementById('nsContactModal').classList.add('show'); }
+ function nsContactClose() { document.getElementById('nsContactModal').classList.remove('show'); }
+ document.addEventListener('keydown', e => { if (e.key === 'Escape') nsContactClose(); });
+</script>
+
+</body>
+</html>
diff --git a/DW-Websites/Novasuede/cleaning.html b/DW-Websites/Novasuede/cleaning.html
index 3566f3e5..b0ba86e1 100644
--- a/DW-Websites/Novasuede/cleaning.html
+++ b/DW-Websites/Novasuede/cleaning.html
@@ -116,30 +116,124 @@
margin-top: 0.5rem;
}
</style>
+<style id="ns-dark-sweep">
+/* ─── UNIFIED DARK SWEEP — all guide subpages match novasuede.com (2026-05-07) ─── */
+body, body * { color: #f5f1e8 !important; }
+body, header, footer, section, .container, main, article, .content,
+.specs-section, .info-section, .cta-section, .hero, .navbar, nav, .nav {
+ background: #0a0a0a !important;
+ background-color: #0a0a0a !important;
+}
+a { color: #d4b683 !important; }
+a:hover { color: #f5d97a !important; }
+h1, h2, h3, h4, h5, h6 { color: #f5f1e8 !important; }
+
+/* Card-style elements — translucent dark instead of white islands */
+.guide-section, .important-note, .warning, .tip-box, .note-box,
+.faq-item, .faq-question, .faq-answer, .step, .tool-list, .material-list,
+.callout, .info-card, .feature-card, .care-highlight {
+ background: rgba(245, 241, 232, 0.04) !important;
+ background-color: rgba(245, 241, 232, 0.04) !important;
+ border: 1px solid rgba(245, 241, 232, 0.12) !important;
+ border-radius: 4px !important;
+ box-shadow: none !important;
+}
+.guide-section *, .important-note *, .warning *, .tip-box *, .note-box *,
+.faq-item *, .faq-question *, .faq-answer *, .step *, .callout *,
+.info-card *, .feature-card *, .care-highlight * {
+ background: transparent !important;
+}
+
+/* Test-standards list cells (fire-ratings) */
+.test-standards li {
+ background: rgba(245, 241, 232, 0.04) !important;
+ border-left: 3px solid #d4b683 !important;
+ border-radius: 4px !important;
+ color: #f5f1e8 !important;
+}
+.test-standards li strong { color: #d4b683 !important; }
+
+/* Specs / data tables */
+.specs-table { background: #131316 !important; border-color: #2a2622 !important; }
+.specs-table th, .specs-table td { background: transparent !important; color: #f5f1e8 !important; border-color: #2a2622 !important; }
+.specs-table tr:hover { background: rgba(212, 182, 131, 0.06) !important; }
+.specs-table thead, .specs-table thead * { background: #1a1a1a !important; color: #d4b683 !important; }
+
+/* Important / warning / pass-fail callouts — keep semantic color but on dark */
+.important-note { border-left: 3px solid #6a9b73 !important; }
+.warning { border-left: 3px solid #b66565 !important; }
+
+/* CTA / sample buttons — hairline white-border on transparent (matches index.html hero) */
+.sample-btn, button.cta, .btn, .footer-sample-btn {
+ background: transparent !important;
+ color: #f5f1e8 !important;
+ border: 1px solid #f5f1e8 !important;
+ border-radius: 0 !important;
+ padding: 12px 32px !important;
+ font-size: 11px !important;
+ letter-spacing: 0.32em !important;
+ text-transform: uppercase !important;
+ font-weight: 400 !important;
+ transition: background 220ms ease, color 220ms ease !important;
+}
+.sample-btn:hover, button.cta:hover, .btn:hover, .footer-sample-btn:hover {
+ background: #f5f1e8 !important;
+ color: #0a0a0a !important;
+}
+
+/* Header / nav surface */
+header, .navbar, nav.navbar {
+ background: rgba(10, 10, 10, 0.78) !important;
+ -webkit-backdrop-filter: blur(14px) !important;
+ backdrop-filter: blur(14px) !important;
+ border-bottom: 1px solid rgba(245, 241, 232, 0.08) !important;
+}
+header *, .navbar *, nav.navbar * { background: transparent !important; }
+
+/* Footer brand swap → info@novasuede.com */
+footer { border-top: 1px solid rgba(245, 241, 232, 0.08) !important; }
+</style>
</head>
<body>
- <header>
- <nav class="navbar">
- <div class="nav-container">
- <div class="logo">
- <h1>Novasuede<span>™</span></h1>
- </div>
- <button class="mobile-toggle" aria-label="Toggle navigation">
- <span></span>
- <span></span>
- <span></span>
- </button>
- <ul class="nav-menu">
- <li><a href="index.html">Home</a></li>
- <li><a href="index.html#colors">Colors</a></li>
- <li><a href="index.html#specifications">Specifications</a></li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="cleaning.html">Cleaning</a></li>
- <li><a href="index.html#contact" class="cta-button">Get Sample</a></li>
- </ul>
- </div>
+ <header class="ns-header">
+ <a href="index.html" class="ns-brand" aria-label="Novasuede home">
+ <span class="ns-dot"></span>
+ <span class="ns-name">Novasuede<sup>™</sup></span>
+ </a>
+ <nav class="ns-nav" aria-label="Primary">
+ <a href="index.html">Home</a>
+ <a href="index.html#colors">Colors</a>
+ <a href="index.html#specifications">Specifications</a>
+ <a href="fire-ratings.html">Fire Ratings</a>
+ <a href="faq.html">FAQ</a>
+ <a href="about.html">About</a>
+ <button type="button" onclick="nsContactOpen()">Contact</button>
</nav>
</header>
+ <style id="ns-unified-header-style">
+ .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 !important; }
+ .ns-dot { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #b66a4d 0%, #8a4a30 60%, #5a2d1c 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", system-ui; font-size: 18px !important; font-weight: 300 !important; letter-spacing: 0.02em !important; color: #f5f1e8 !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; }
+ .ns-nav a:hover, .ns-nav button:hover { color: #ffffff !important; }
+ @media (max-width: 820px) { .ns-header { padding: 14px 18px; } .ns-nav { gap: 16px; } .ns-nav a, .ns-nav button { font-size: 13px !important; } }
+ @media (max-width: 560px) { .ns-nav a:nth-child(n+5), .ns-nav button:nth-child(n+5) { display: none; } }
+ .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 h3 { font-family: -apple-system, "SF Pro Display"; 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 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; }
+ </style>
<div class="guide-content">
<div class="guide-header">
@@ -398,16 +492,34 @@
</div>
<div class="footer-section">
<h3>Contact</h3>
- <p>Email: info@DesignerWallcoverings.com</p>
+ <p>Email: info@novasuede.com</p>
<button class="footer-sample-btn" onclick="window.location.href='index.html#contact'">Request Sample</button>
</div>
</div>
<div class="footer-bottom">
- <p>© 2025 Novasuede.com. All rights reserved.</p>
+ <p>© 2026 Novasuede.com. All rights reserved.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
+ <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="index.html#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="index.html#contact" onclick="nsContactClose()"><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</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() { document.getElementById('nsContactModal').classList.add('show'); }
+ function nsContactClose() { document.getElementById('nsContactModal').classList.remove('show'); }
+ document.addEventListener('keydown', function(e) { if (e.key === 'Escape') nsContactClose(); });
+ </script>
</body>
</html>
\ No newline at end of file
diff --git a/DW-Websites/Novasuede/colors-data.json b/DW-Websites/Novasuede/colors-data.json
new file mode 100644
index 00000000..b43162d0
--- /dev/null
+++ b/DW-Websites/Novasuede/colors-data.json
@@ -0,0 +1,2466 @@
+[
+ {
+ "slug": "acorn",
+ "hex": "#78370c",
+ "hsl": [
+ 24,
+ 82,
+ 26
+ ],
+ "rgb": [
+ 120,
+ 55,
+ 12
+ ]
+ },
+ {
+ "slug": "adobe",
+ "hex": "#eedac2",
+ "hsl": [
+ 33,
+ 56,
+ 85
+ ],
+ "rgb": [
+ 238,
+ 218,
+ 194
+ ]
+ },
+ {
+ "slug": "african-violet",
+ "hex": "#2d1e3f",
+ "hsl": [
+ 267,
+ 35,
+ 18
+ ],
+ "rgb": [
+ 45,
+ 30,
+ 63
+ ]
+ },
+ {
+ "slug": "amber",
+ "hex": "#b0743f",
+ "hsl": [
+ 28,
+ 47,
+ 47
+ ],
+ "rgb": [
+ 176,
+ 116,
+ 63
+ ]
+ },
+ {
+ "slug": "apricot",
+ "hex": "#d15f34",
+ "hsl": [
+ 16,
+ 63,
+ 51
+ ],
+ "rgb": [
+ 209,
+ 95,
+ 52
+ ]
+ },
+ {
+ "slug": "arrow-wood",
+ "hex": "#746147",
+ "hsl": [
+ 35,
+ 24,
+ 37
+ ],
+ "rgb": [
+ 116,
+ 97,
+ 71
+ ]
+ },
+ {
+ "slug": "aubergine",
+ "hex": "#351929",
+ "hsl": [
+ 326,
+ 36,
+ 15
+ ],
+ "rgb": [
+ 53,
+ 25,
+ 41
+ ]
+ },
+ {
+ "slug": "baltic",
+ "hex": "#bdc0be",
+ "hsl": [
+ 140,
+ 2,
+ 75
+ ],
+ "rgb": [
+ 189,
+ 192,
+ 190
+ ]
+ },
+ {
+ "slug": "beige",
+ "hex": "#dfcab4",
+ "hsl": [
+ 31,
+ 40,
+ 79
+ ],
+ "rgb": [
+ 223,
+ 202,
+ 180
+ ]
+ },
+ {
+ "slug": "biscuit",
+ "hex": "#decdb8",
+ "hsl": [
+ 33,
+ 37,
+ 80
+ ],
+ "rgb": [
+ 222,
+ 205,
+ 184
+ ]
+ },
+ {
+ "slug": "black",
+ "hex": "#0d0e0f",
+ "hsl": [
+ 210,
+ 7,
+ 5
+ ],
+ "rgb": [
+ 13,
+ 14,
+ 15
+ ]
+ },
+ {
+ "slug": "blank-slate",
+ "hex": "#7a7b75",
+ "hsl": [
+ 70,
+ 3,
+ 47
+ ],
+ "rgb": [
+ 122,
+ 123,
+ 117
+ ]
+ },
+ {
+ "slug": "bliss",
+ "hex": "#c4af9d",
+ "hsl": [
+ 28,
+ 25,
+ 69
+ ],
+ "rgb": [
+ 196,
+ 175,
+ 157
+ ]
+ },
+ {
+ "slug": "bluestone",
+ "hex": "#807680",
+ "hsl": [
+ 300,
+ 4,
+ 48
+ ],
+ "rgb": [
+ 128,
+ 118,
+ 128
+ ]
+ },
+ {
+ "slug": "blush-pink",
+ "hex": "#d9676f",
+ "hsl": [
+ 356,
+ 60,
+ 63
+ ],
+ "rgb": [
+ 217,
+ 103,
+ 111
+ ]
+ },
+ {
+ "slug": "blush-rose",
+ "hex": "#b19f90",
+ "hsl": [
+ 27,
+ 17,
+ 63
+ ],
+ "rgb": [
+ 177,
+ 159,
+ 144
+ ]
+ },
+ {
+ "slug": "bone",
+ "hex": "#bfad87",
+ "hsl": [
+ 41,
+ 30,
+ 64
+ ],
+ "rgb": [
+ 191,
+ 173,
+ 135
+ ]
+ },
+ {
+ "slug": "brown",
+ "hex": "#120c0b",
+ "hsl": [
+ 9,
+ 24,
+ 6
+ ],
+ "rgb": [
+ 18,
+ 12,
+ 11
+ ]
+ },
+ {
+ "slug": "buff",
+ "hex": "#e8d0b6",
+ "hsl": [
+ 31,
+ 52,
+ 81
+ ],
+ "rgb": [
+ 232,
+ 208,
+ 182
+ ]
+ },
+ {
+ "slug": "buttercup",
+ "hex": "#e5b380",
+ "hsl": [
+ 30,
+ 66,
+ 70
+ ],
+ "rgb": [
+ 229,
+ 179,
+ 128
+ ]
+ },
+ {
+ "slug": "cane",
+ "hex": "#c38343",
+ "hsl": [
+ 30,
+ 52,
+ 51
+ ],
+ "rgb": [
+ 195,
+ 131,
+ 67
+ ]
+ },
+ {
+ "slug": "carbon",
+ "hex": "#c1b396",
+ "hsl": [
+ 40,
+ 26,
+ 67
+ ],
+ "rgb": [
+ 193,
+ 179,
+ 150
+ ]
+ },
+ {
+ "slug": "cashew",
+ "hex": "#b46d32",
+ "hsl": [
+ 27,
+ 57,
+ 45
+ ],
+ "rgb": [
+ 180,
+ 109,
+ 50
+ ]
+ },
+ {
+ "slug": "cashmere",
+ "hex": "#927339",
+ "hsl": [
+ 39,
+ 44,
+ 40
+ ],
+ "rgb": [
+ 146,
+ 115,
+ 57
+ ]
+ },
+ {
+ "slug": "celadon",
+ "hex": "#b7a186",
+ "hsl": [
+ 33,
+ 25,
+ 62
+ ],
+ "rgb": [
+ 183,
+ 161,
+ 134
+ ]
+ },
+ {
+ "slug": "celery",
+ "hex": "#908f55",
+ "hsl": [
+ 59,
+ 26,
+ 45
+ ],
+ "rgb": [
+ 144,
+ 143,
+ 85
+ ]
+ },
+ {
+ "slug": "cement",
+ "hex": "#8e9296",
+ "hsl": [
+ 210,
+ 4,
+ 57
+ ],
+ "rgb": [
+ 142,
+ 146,
+ 150
+ ]
+ },
+ {
+ "slug": "champagne",
+ "hex": "#efdac8",
+ "hsl": [
+ 28,
+ 55,
+ 86
+ ],
+ "rgb": [
+ 239,
+ 218,
+ 200
+ ]
+ },
+ {
+ "slug": "china-blue",
+ "hex": "#055174",
+ "hsl": [
+ 199,
+ 92,
+ 24
+ ],
+ "rgb": [
+ 5,
+ 81,
+ 116
+ ]
+ },
+ {
+ "slug": "chrome-grey",
+ "hex": "#465359",
+ "hsl": [
+ 199,
+ 12,
+ 31
+ ],
+ "rgb": [
+ 70,
+ 83,
+ 89
+ ]
+ },
+ {
+ "slug": "cinder",
+ "hex": "#0e080a",
+ "hsl": [
+ 340,
+ 27,
+ 4
+ ],
+ "rgb": [
+ 14,
+ 8,
+ 10
+ ]
+ },
+ {
+ "slug": "cloud",
+ "hex": "#c0bfb6",
+ "hsl": [
+ 54,
+ 7,
+ 73
+ ],
+ "rgb": [
+ 192,
+ 191,
+ 182
+ ]
+ },
+ {
+ "slug": "cocoa",
+ "hex": "#805b3b",
+ "hsl": [
+ 28,
+ 37,
+ 37
+ ],
+ "rgb": [
+ 128,
+ 91,
+ 59
+ ]
+ },
+ {
+ "slug": "colonial-blue",
+ "hex": "#455870",
+ "hsl": [
+ 213,
+ 24,
+ 35
+ ],
+ "rgb": [
+ 69,
+ 88,
+ 112
+ ]
+ },
+ {
+ "slug": "coral",
+ "hex": "#d7957c",
+ "hsl": [
+ 16,
+ 53,
+ 66
+ ],
+ "rgb": [
+ 215,
+ 149,
+ 124
+ ]
+ },
+ {
+ "slug": "cottage-grey",
+ "hex": "#a9a498",
+ "hsl": [
+ 42,
+ 9,
+ 63
+ ],
+ "rgb": [
+ 169,
+ 164,
+ 152
+ ]
+ },
+ {
+ "slug": "cream",
+ "hex": "#dec8b3",
+ "hsl": [
+ 29,
+ 39,
+ 79
+ ],
+ "rgb": [
+ 222,
+ 200,
+ 179
+ ]
+ },
+ {
+ "slug": "cypress",
+ "hex": "#5e4632",
+ "hsl": [
+ 27,
+ 31,
+ 28
+ ],
+ "rgb": [
+ 94,
+ 70,
+ 50
+ ]
+ },
+ {
+ "slug": "dark-sand",
+ "hex": "#ab823a",
+ "hsl": [
+ 38,
+ 49,
+ 45
+ ],
+ "rgb": [
+ 171,
+ 130,
+ 58
+ ]
+ },
+ {
+ "slug": "dew",
+ "hex": "#c29366",
+ "hsl": [
+ 29,
+ 43,
+ 58
+ ],
+ "rgb": [
+ 194,
+ 147,
+ 102
+ ]
+ },
+ {
+ "slug": "dove",
+ "hex": "#b1b2ae",
+ "hsl": [
+ 75,
+ 3,
+ 69
+ ],
+ "rgb": [
+ 177,
+ 178,
+ 174
+ ]
+ },
+ {
+ "slug": "dune",
+ "hex": "#e7d3ba",
+ "hsl": [
+ 33,
+ 48,
+ 82
+ ],
+ "rgb": [
+ 231,
+ 211,
+ 186
+ ]
+ },
+ {
+ "slug": "dusty-ranch",
+ "hex": "#906e47",
+ "hsl": [
+ 32,
+ 34,
+ 42
+ ],
+ "rgb": [
+ 144,
+ 110,
+ 71
+ ]
+ },
+ {
+ "slug": "dusty-rose",
+ "hex": "#d49f9d",
+ "hsl": [
+ 2,
+ 39,
+ 72
+ ],
+ "rgb": [
+ 212,
+ 159,
+ 157
+ ]
+ },
+ {
+ "slug": "dusty-teal",
+ "hex": "#344e5e",
+ "hsl": [
+ 203,
+ 29,
+ 29
+ ],
+ "rgb": [
+ 52,
+ 78,
+ 94
+ ]
+ },
+ {
+ "slug": "ecru",
+ "hex": "#e9d8bd",
+ "hsl": [
+ 37,
+ 50,
+ 83
+ ],
+ "rgb": [
+ 233,
+ 216,
+ 189
+ ]
+ },
+ {
+ "slug": "fawn",
+ "hex": "#ccb19c",
+ "hsl": [
+ 26,
+ 32,
+ 71
+ ],
+ "rgb": [
+ 204,
+ 177,
+ 156
+ ]
+ },
+ {
+ "slug": "fire",
+ "hex": "#9e4039",
+ "hsl": [
+ 4,
+ 47,
+ 42
+ ],
+ "rgb": [
+ 158,
+ 64,
+ 57
+ ]
+ },
+ {
+ "slug": "flagstone",
+ "hex": "#a3a39d",
+ "hsl": [
+ 60,
+ 3,
+ 63
+ ],
+ "rgb": [
+ 163,
+ 163,
+ 157
+ ]
+ },
+ {
+ "slug": "french-blue",
+ "hex": "#587692",
+ "hsl": [
+ 209,
+ 25,
+ 46
+ ],
+ "rgb": [
+ 88,
+ 118,
+ 146
+ ]
+ },
+ {
+ "slug": "gainsborough",
+ "hex": "#cdc4bd",
+ "hsl": [
+ 26,
+ 14,
+ 77
+ ],
+ "rgb": [
+ 205,
+ 196,
+ 189
+ ]
+ },
+ {
+ "slug": "garnet",
+ "hex": "#b72526",
+ "hsl": [
+ 360,
+ 66,
+ 43
+ ],
+ "rgb": [
+ 183,
+ 37,
+ 38
+ ]
+ },
+ {
+ "slug": "gelato",
+ "hex": "#ded0c7",
+ "hsl": [
+ 23,
+ 26,
+ 83
+ ],
+ "rgb": [
+ 222,
+ 208,
+ 199
+ ]
+ },
+ {
+ "slug": "gold",
+ "hex": "#701f12",
+ "hsl": [
+ 8,
+ 72,
+ 25
+ ],
+ "rgb": [
+ 112,
+ 31,
+ 18
+ ]
+ },
+ {
+ "slug": "goldstone",
+ "hex": "#bd6001",
+ "hsl": [
+ 30,
+ 99,
+ 37
+ ],
+ "rgb": [
+ 189,
+ 96,
+ 1
+ ]
+ },
+ {
+ "slug": "granite",
+ "hex": "#c1b396",
+ "hsl": [
+ 40,
+ 26,
+ 67
+ ],
+ "rgb": [
+ 193,
+ 179,
+ 150
+ ]
+ },
+ {
+ "slug": "grape",
+ "hex": "#3c2737",
+ "hsl": [
+ 314,
+ 21,
+ 19
+ ],
+ "rgb": [
+ 60,
+ 39,
+ 55
+ ]
+ },
+ {
+ "slug": "gray",
+ "hex": "#5b5345",
+ "hsl": [
+ 38,
+ 14,
+ 31
+ ],
+ "rgb": [
+ 91,
+ 83,
+ 69
+ ]
+ },
+ {
+ "slug": "green-marble",
+ "hex": "#6e8e88",
+ "hsl": [
+ 169,
+ 13,
+ 49
+ ],
+ "rgb": [
+ 110,
+ 142,
+ 136
+ ]
+ },
+ {
+ "slug": "green",
+ "hex": "#9fb6a8",
+ "hsl": [
+ 143,
+ 14,
+ 67
+ ],
+ "rgb": [
+ 159,
+ 182,
+ 168
+ ]
+ },
+ {
+ "slug": "greystone",
+ "hex": "#625f64",
+ "hsl": [
+ 276,
+ 3,
+ 38
+ ],
+ "rgb": [
+ 98,
+ 95,
+ 100
+ ]
+ },
+ {
+ "slug": "harvest",
+ "hex": "#b8a077",
+ "hsl": [
+ 38,
+ 31,
+ 59
+ ],
+ "rgb": [
+ 184,
+ 160,
+ 119
+ ]
+ },
+ {
+ "slug": "henna",
+ "hex": "#8f5f49",
+ "hsl": [
+ 19,
+ 32,
+ 42
+ ],
+ "rgb": [
+ 143,
+ 95,
+ 73
+ ]
+ },
+ {
+ "slug": "honey",
+ "hex": "#d39f6b",
+ "hsl": [
+ 30,
+ 54,
+ 62
+ ],
+ "rgb": [
+ 211,
+ 159,
+ 107
+ ]
+ },
+ {
+ "slug": "hyacinth",
+ "hex": "#816375",
+ "hsl": [
+ 324,
+ 13,
+ 45
+ ],
+ "rgb": [
+ 129,
+ 99,
+ 117
+ ]
+ },
+ {
+ "slug": "iceberg",
+ "hex": "#bfb196",
+ "hsl": [
+ 40,
+ 24,
+ 67
+ ],
+ "rgb": [
+ 191,
+ 177,
+ 150
+ ]
+ },
+ {
+ "slug": "indigo",
+ "hex": "#041e35",
+ "hsl": [
+ 208,
+ 86,
+ 11
+ ],
+ "rgb": [
+ 4,
+ 30,
+ 53
+ ]
+ },
+ {
+ "slug": "ivory",
+ "hex": "#e5d7cb",
+ "hsl": [
+ 28,
+ 33,
+ 85
+ ],
+ "rgb": [
+ 229,
+ 215,
+ 203
+ ]
+ },
+ {
+ "slug": "jade",
+ "hex": "#013b3a",
+ "hsl": [
+ 179,
+ 97,
+ 12
+ ],
+ "rgb": [
+ 1,
+ 59,
+ 58
+ ]
+ },
+ {
+ "slug": "java",
+ "hex": "#805b3b",
+ "hsl": [
+ 28,
+ 37,
+ 37
+ ],
+ "rgb": [
+ 128,
+ 91,
+ 59
+ ]
+ },
+ {
+ "slug": "kiva",
+ "hex": "#a09986",
+ "hsl": [
+ 44,
+ 12,
+ 58
+ ],
+ "rgb": [
+ 160,
+ 153,
+ 134
+ ]
+ },
+ {
+ "slug": "latte",
+ "hex": "#e5d7cb",
+ "hsl": [
+ 28,
+ 33,
+ 85
+ ],
+ "rgb": [
+ 229,
+ 215,
+ 203
+ ]
+ },
+ {
+ "slug": "lavender",
+ "hex": "#9b698a",
+ "hsl": [
+ 320,
+ 20,
+ 51
+ ],
+ "rgb": [
+ 155,
+ 105,
+ 138
+ ]
+ },
+ {
+ "slug": "light-amethyst",
+ "hex": "#a5a0b5",
+ "hsl": [
+ 254,
+ 12,
+ 67
+ ],
+ "rgb": [
+ 165,
+ 160,
+ 181
+ ]
+ },
+ {
+ "slug": "light-camel",
+ "hex": "#ccb19c",
+ "hsl": [
+ 26,
+ 32,
+ 71
+ ],
+ "rgb": [
+ 204,
+ 177,
+ 156
+ ]
+ },
+ {
+ "slug": "light-grey",
+ "hex": "#a4a093",
+ "hsl": [
+ 46,
+ 9,
+ 61
+ ],
+ "rgb": [
+ 164,
+ 160,
+ 147
+ ]
+ },
+ {
+ "slug": "lilac",
+ "hex": "#9b698a",
+ "hsl": [
+ 320,
+ 20,
+ 51
+ ],
+ "rgb": [
+ 155,
+ 105,
+ 138
+ ]
+ },
+ {
+ "slug": "lime",
+ "hex": "#908f55",
+ "hsl": [
+ 59,
+ 26,
+ 45
+ ],
+ "rgb": [
+ 144,
+ 143,
+ 85
+ ]
+ },
+ {
+ "slug": "linen",
+ "hex": "#dcd2c8",
+ "hsl": [
+ 30,
+ 22,
+ 82
+ ],
+ "rgb": [
+ 220,
+ 210,
+ 200
+ ]
+ },
+ {
+ "slug": "lipstick",
+ "hex": "#8e3138",
+ "hsl": [
+ 355,
+ 49,
+ 37
+ ],
+ "rgb": [
+ 142,
+ 49,
+ 56
+ ]
+ },
+ {
+ "slug": "madison-grey",
+ "hex": "#4d4743",
+ "hsl": [
+ 24,
+ 7,
+ 28
+ ],
+ "rgb": [
+ 77,
+ 71,
+ 67
+ ]
+ },
+ {
+ "slug": "maize",
+ "hex": "#eccb9b",
+ "hsl": [
+ 36,
+ 68,
+ 77
+ ],
+ "rgb": [
+ 236,
+ 203,
+ 155
+ ]
+ },
+ {
+ "slug": "marine-blue",
+ "hex": "#4d6d60",
+ "hsl": [
+ 156,
+ 17,
+ 36
+ ],
+ "rgb": [
+ 77,
+ 109,
+ 96
+ ]
+ },
+ {
+ "slug": "maroon",
+ "hex": "#722527",
+ "hsl": [
+ 358,
+ 51,
+ 30
+ ],
+ "rgb": [
+ 114,
+ 37,
+ 39
+ ]
+ },
+ {
+ "slug": "mauve",
+ "hex": "#2d1e3f",
+ "hsl": [
+ 267,
+ 35,
+ 18
+ ],
+ "rgb": [
+ 45,
+ 30,
+ 63
+ ]
+ },
+ {
+ "slug": "meadow",
+ "hex": "#b0ab63",
+ "hsl": [
+ 56,
+ 33,
+ 54
+ ],
+ "rgb": [
+ 176,
+ 171,
+ 99
+ ]
+ },
+ {
+ "slug": "melon",
+ "hex": "#ee8d4b",
+ "hsl": [
+ 24,
+ 83,
+ 61
+ ],
+ "rgb": [
+ 238,
+ 141,
+ 75
+ ]
+ },
+ {
+ "slug": "milk",
+ "hex": "#eddecf",
+ "hsl": [
+ 30,
+ 45,
+ 87
+ ],
+ "rgb": [
+ 237,
+ 222,
+ 207
+ ]
+ },
+ {
+ "slug": "mint-julip",
+ "hex": "#9fb6a8",
+ "hsl": [
+ 143,
+ 14,
+ 67
+ ],
+ "rgb": [
+ 159,
+ 182,
+ 168
+ ]
+ },
+ {
+ "slug": "mint",
+ "hex": "#7c7a70",
+ "hsl": [
+ 50,
+ 5,
+ 46
+ ],
+ "rgb": [
+ 124,
+ 122,
+ 112
+ ]
+ },
+ {
+ "slug": "mist",
+ "hex": "#c0bfb6",
+ "hsl": [
+ 54,
+ 7,
+ 73
+ ],
+ "rgb": [
+ 192,
+ 191,
+ 182
+ ]
+ },
+ {
+ "slug": "misty-dew",
+ "hex": "#d0c6b5",
+ "hsl": [
+ 38,
+ 22,
+ 76
+ ],
+ "rgb": [
+ 208,
+ 198,
+ 181
+ ]
+ },
+ {
+ "slug": "mocha",
+ "hex": "#805b3b",
+ "hsl": [
+ 28,
+ 37,
+ 37
+ ],
+ "rgb": [
+ 128,
+ 91,
+ 59
+ ]
+ },
+ {
+ "slug": "moss",
+ "hex": "#5b5345",
+ "hsl": [
+ 38,
+ 14,
+ 31
+ ],
+ "rgb": [
+ 91,
+ 83,
+ 69
+ ]
+ },
+ {
+ "slug": "mushroom",
+ "hex": "#946341",
+ "hsl": [
+ 25,
+ 39,
+ 42
+ ],
+ "rgb": [
+ 148,
+ 99,
+ 65
+ ]
+ },
+ {
+ "slug": "navy",
+ "hex": "#004fb7",
+ "hsl": [
+ 214,
+ 100,
+ 36
+ ],
+ "rgb": [
+ 0,
+ 79,
+ 183
+ ]
+ },
+ {
+ "slug": "newport",
+ "hex": "#08111f",
+ "hsl": [
+ 217,
+ 59,
+ 8
+ ],
+ "rgb": [
+ 8,
+ 17,
+ 31
+ ]
+ },
+ {
+ "slug": "noir",
+ "hex": "#1c2a2f",
+ "hsl": [
+ 196,
+ 25,
+ 15
+ ],
+ "rgb": [
+ 28,
+ 42,
+ 47
+ ]
+ },
+ {
+ "slug": "nutmeg",
+ "hex": "#826c45",
+ "hsl": [
+ 38,
+ 31,
+ 39
+ ],
+ "rgb": [
+ 130,
+ 108,
+ 69
+ ]
+ },
+ {
+ "slug": "ocean",
+ "hex": "#4d6d60",
+ "hsl": [
+ 156,
+ 17,
+ 36
+ ],
+ "rgb": [
+ 77,
+ 109,
+ 96
+ ]
+ },
+ {
+ "slug": "olive",
+ "hex": "#2c2514",
+ "hsl": [
+ 43,
+ 38,
+ 13
+ ],
+ "rgb": [
+ 44,
+ 37,
+ 20
+ ]
+ },
+ {
+ "slug": "opal",
+ "hex": "#718183",
+ "hsl": [
+ 187,
+ 7,
+ 48
+ ],
+ "rgb": [
+ 113,
+ 129,
+ 131
+ ]
+ },
+ {
+ "slug": "orange",
+ "hex": "#e8beb1",
+ "hsl": [
+ 14,
+ 54,
+ 80
+ ],
+ "rgb": [
+ 232,
+ 190,
+ 177
+ ]
+ },
+ {
+ "slug": "oyster",
+ "hex": "#b3a482",
+ "hsl": [
+ 42,
+ 24,
+ 61
+ ],
+ "rgb": [
+ 179,
+ 164,
+ 130
+ ]
+ },
+ {
+ "slug": "pale-green",
+ "hex": "#bad6cd",
+ "hsl": [
+ 161,
+ 25,
+ 78
+ ],
+ "rgb": [
+ 186,
+ 214,
+ 205
+ ]
+ },
+ {
+ "slug": "passion-blue",
+ "hex": "#004fb7",
+ "hsl": [
+ 214,
+ 100,
+ 36
+ ],
+ "rgb": [
+ 0,
+ 79,
+ 183
+ ]
+ },
+ {
+ "slug": "pastel-blue",
+ "hex": "#abc2db",
+ "hsl": [
+ 211,
+ 40,
+ 76
+ ],
+ "rgb": [
+ 171,
+ 194,
+ 219
+ ]
+ },
+ {
+ "slug": "pastel-pink",
+ "hex": "#e5cbca",
+ "hsl": [
+ 2,
+ 34,
+ 85
+ ],
+ "rgb": [
+ 229,
+ 203,
+ 202
+ ]
+ },
+ {
+ "slug": "peach",
+ "hex": "#e8beb1",
+ "hsl": [
+ 14,
+ 54,
+ 80
+ ],
+ "rgb": [
+ 232,
+ 190,
+ 177
+ ]
+ },
+ {
+ "slug": "pebble",
+ "hex": "#e5cab8",
+ "hsl": [
+ 24,
+ 46,
+ 81
+ ],
+ "rgb": [
+ 229,
+ 202,
+ 184
+ ]
+ },
+ {
+ "slug": "peppermint",
+ "hex": "#dec3ba",
+ "hsl": [
+ 15,
+ 35,
+ 80
+ ],
+ "rgb": [
+ 222,
+ 195,
+ 186
+ ]
+ },
+ {
+ "slug": "peridot",
+ "hex": "#30280d",
+ "hsl": [
+ 46,
+ 57,
+ 12
+ ],
+ "rgb": [
+ 48,
+ 40,
+ 13
+ ]
+ },
+ {
+ "slug": "periwinkle",
+ "hex": "#8395b3",
+ "hsl": [
+ 218,
+ 24,
+ 61
+ ],
+ "rgb": [
+ 131,
+ 149,
+ 179
+ ]
+ },
+ {
+ "slug": "persimmon",
+ "hex": "#ab5e3f",
+ "hsl": [
+ 17,
+ 46,
+ 46
+ ],
+ "rgb": [
+ 171,
+ 94,
+ 63
+ ]
+ },
+ {
+ "slug": "pink-lace",
+ "hex": "#dbd7de",
+ "hsl": [
+ 274,
+ 10,
+ 86
+ ],
+ "rgb": [
+ 219,
+ 215,
+ 222
+ ]
+ },
+ {
+ "slug": "pistachio",
+ "hex": "#c7cbbc",
+ "hsl": [
+ 76,
+ 13,
+ 77
+ ],
+ "rgb": [
+ 199,
+ 203,
+ 188
+ ]
+ },
+ {
+ "slug": "plum-pleasure",
+ "hex": "#4c1128",
+ "hsl": [
+ 337,
+ 63,
+ 18
+ ],
+ "rgb": [
+ 76,
+ 17,
+ 40
+ ]
+ },
+ {
+ "slug": "port-blue",
+ "hex": "#1b2c38",
+ "hsl": [
+ 205,
+ 35,
+ 16
+ ],
+ "rgb": [
+ 27,
+ 44,
+ 56
+ ]
+ },
+ {
+ "slug": "powder-grey",
+ "hex": "#beb6b2",
+ "hsl": [
+ 20,
+ 8,
+ 72
+ ],
+ "rgb": [
+ 190,
+ 182,
+ 178
+ ]
+ },
+ {
+ "slug": "prairie",
+ "hex": "#94865c",
+ "hsl": [
+ 45,
+ 23,
+ 47
+ ],
+ "rgb": [
+ 148,
+ 134,
+ 92
+ ]
+ },
+ {
+ "slug": "putty",
+ "hex": "#caa57a",
+ "hsl": [
+ 32,
+ 43,
+ 64
+ ],
+ "rgb": [
+ 202,
+ 165,
+ 122
+ ]
+ },
+ {
+ "slug": "raffia",
+ "hex": "#a98557",
+ "hsl": [
+ 34,
+ 32,
+ 50
+ ],
+ "rgb": [
+ 169,
+ 133,
+ 87
+ ]
+ },
+ {
+ "slug": "raisin",
+ "hex": "#2b3034",
+ "hsl": [
+ 207,
+ 9,
+ 19
+ ],
+ "rgb": [
+ 43,
+ 48,
+ 52
+ ]
+ },
+ {
+ "slug": "red",
+ "hex": "#d28e66",
+ "hsl": [
+ 22,
+ 55,
+ 61
+ ],
+ "rgb": [
+ 210,
+ 142,
+ 102
+ ]
+ },
+ {
+ "slug": "rose",
+ "hex": "#dec3ba",
+ "hsl": [
+ 15,
+ 35,
+ 80
+ ],
+ "rgb": [
+ 222,
+ 195,
+ 186
+ ]
+ },
+ {
+ "slug": "rosewater",
+ "hex": "#d9c5c0",
+ "hsl": [
+ 12,
+ 25,
+ 80
+ ],
+ "rgb": [
+ 217,
+ 197,
+ 192
+ ]
+ },
+ {
+ "slug": "royal-blue",
+ "hex": "#1c3152",
+ "hsl": [
+ 217,
+ 49,
+ 22
+ ],
+ "rgb": [
+ 28,
+ 49,
+ 82
+ ]
+ },
+ {
+ "slug": "royal-purple",
+ "hex": "#191020",
+ "hsl": [
+ 274,
+ 33,
+ 9
+ ],
+ "rgb": [
+ 25,
+ 16,
+ 32
+ ]
+ },
+ {
+ "slug": "ruby",
+ "hex": "#701f12",
+ "hsl": [
+ 8,
+ 72,
+ 25
+ ],
+ "rgb": [
+ 112,
+ 31,
+ 18
+ ]
+ },
+ {
+ "slug": "sable",
+ "hex": "#1d0804",
+ "hsl": [
+ 10,
+ 76,
+ 6
+ ],
+ "rgb": [
+ 29,
+ 8,
+ 4
+ ]
+ },
+ {
+ "slug": "safari",
+ "hex": "#d5b192",
+ "hsl": [
+ 28,
+ 44,
+ 70
+ ],
+ "rgb": [
+ 213,
+ 177,
+ 146
+ ]
+ },
+ {
+ "slug": "saffron",
+ "hex": "#dda361",
+ "hsl": [
+ 32,
+ 65,
+ 62
+ ],
+ "rgb": [
+ 221,
+ 163,
+ 97
+ ]
+ },
+ {
+ "slug": "sage",
+ "hex": "#7c7a70",
+ "hsl": [
+ 50,
+ 5,
+ 46
+ ],
+ "rgb": [
+ 124,
+ 122,
+ 112
+ ]
+ },
+ {
+ "slug": "salt",
+ "hex": "#d0cbc3",
+ "hsl": [
+ 37,
+ 12,
+ 79
+ ],
+ "rgb": [
+ 208,
+ 203,
+ 195
+ ]
+ },
+ {
+ "slug": "sand",
+ "hex": "#c3bcb4",
+ "hsl": [
+ 32,
+ 11,
+ 74
+ ],
+ "rgb": [
+ 195,
+ 188,
+ 180
+ ]
+ },
+ {
+ "slug": "sandalwood",
+ "hex": "#d28e66",
+ "hsl": [
+ 22,
+ 55,
+ 61
+ ],
+ "rgb": [
+ 210,
+ 142,
+ 102
+ ]
+ },
+ {
+ "slug": "scarlet-wine",
+ "hex": "#500d20",
+ "hsl": [
+ 343,
+ 72,
+ 18
+ ],
+ "rgb": [
+ 80,
+ 13,
+ 32
+ ]
+ },
+ {
+ "slug": "sea-blue",
+ "hex": "#505f7f",
+ "hsl": [
+ 221,
+ 23,
+ 41
+ ],
+ "rgb": [
+ 80,
+ 95,
+ 127
+ ]
+ },
+ {
+ "slug": "sea-breeze",
+ "hex": "#99afa0",
+ "hsl": [
+ 139,
+ 12,
+ 64
+ ],
+ "rgb": [
+ 153,
+ 175,
+ 160
+ ]
+ },
+ {
+ "slug": "sea-grass",
+ "hex": "#969666",
+ "hsl": [
+ 60,
+ 19,
+ 49
+ ],
+ "rgb": [
+ 150,
+ 150,
+ 102
+ ]
+ },
+ {
+ "slug": "seafoam",
+ "hex": "#796e50",
+ "hsl": [
+ 44,
+ 20,
+ 39
+ ],
+ "rgb": [
+ 121,
+ 110,
+ 80
+ ]
+ },
+ {
+ "slug": "sedona",
+ "hex": "#a45446",
+ "hsl": [
+ 9,
+ 40,
+ 46
+ ],
+ "rgb": [
+ 164,
+ 84,
+ 70
+ ]
+ },
+ {
+ "slug": "shale",
+ "hex": "#55524b",
+ "hsl": [
+ 42,
+ 6,
+ 31
+ ],
+ "rgb": [
+ 85,
+ 82,
+ 75
+ ]
+ },
+ {
+ "slug": "sienna",
+ "hex": "#8f5f33",
+ "hsl": [
+ 29,
+ 47,
+ 38
+ ],
+ "rgb": [
+ 143,
+ 95,
+ 51
+ ]
+ },
+ {
+ "slug": "silver",
+ "hex": "#867b66",
+ "hsl": [
+ 39,
+ 14,
+ 46
+ ],
+ "rgb": [
+ 134,
+ 123,
+ 102
+ ]
+ },
+ {
+ "slug": "sky-blue",
+ "hex": "#94b8cd",
+ "hsl": [
+ 202,
+ 36,
+ 69
+ ],
+ "rgb": [
+ 148,
+ 184,
+ 205
+ ]
+ },
+ {
+ "slug": "smoke",
+ "hex": "#493831",
+ "hsl": [
+ 17,
+ 20,
+ 24
+ ],
+ "rgb": [
+ 73,
+ 56,
+ 49
+ ]
+ },
+ {
+ "slug": "snow",
+ "hex": "#f0f4f0",
+ "hsl": [
+ 120,
+ 15,
+ 95
+ ],
+ "rgb": [
+ 240,
+ 244,
+ 240
+ ]
+ },
+ {
+ "slug": "soft-clay",
+ "hex": "#d27a61",
+ "hsl": [
+ 13,
+ 56,
+ 60
+ ],
+ "rgb": [
+ 210,
+ 122,
+ 97
+ ]
+ },
+ {
+ "slug": "solar-yellow",
+ "hex": "#f1ad48",
+ "hsl": [
+ 36,
+ 86,
+ 61
+ ],
+ "rgb": [
+ 241,
+ 173,
+ 72
+ ]
+ },
+ {
+ "slug": "spice",
+ "hex": "#946341",
+ "hsl": [
+ 25,
+ 39,
+ 42
+ ],
+ "rgb": [
+ 148,
+ 99,
+ 65
+ ]
+ },
+ {
+ "slug": "spruce",
+ "hex": "#273737",
+ "hsl": [
+ 180,
+ 17,
+ 18
+ ],
+ "rgb": [
+ 39,
+ 55,
+ 55
+ ]
+ },
+ {
+ "slug": "steel",
+ "hex": "#867b66",
+ "hsl": [
+ 39,
+ 14,
+ 46
+ ],
+ "rgb": [
+ 134,
+ 123,
+ 102
+ ]
+ },
+ {
+ "slug": "stone-grey",
+ "hex": "#715c55",
+ "hsl": [
+ 15,
+ 14,
+ 39
+ ],
+ "rgb": [
+ 113,
+ 92,
+ 85
+ ]
+ },
+ {
+ "slug": "stone-taupe",
+ "hex": "#ad8568",
+ "hsl": [
+ 25,
+ 30,
+ 54
+ ],
+ "rgb": [
+ 173,
+ 133,
+ 104
+ ]
+ },
+ {
+ "slug": "storm",
+ "hex": "#bfb196",
+ "hsl": [
+ 40,
+ 24,
+ 67
+ ],
+ "rgb": [
+ 191,
+ 177,
+ 150
+ ]
+ },
+ {
+ "slug": "straw",
+ "hex": "#e6b586",
+ "hsl": [
+ 29,
+ 66,
+ 71
+ ],
+ "rgb": [
+ 230,
+ 181,
+ 134
+ ]
+ },
+ {
+ "slug": "strong-white",
+ "hex": "#e3ded8",
+ "hsl": [
+ 33,
+ 16,
+ 87
+ ],
+ "rgb": [
+ 227,
+ 222,
+ 216
+ ]
+ },
+ {
+ "slug": "sugar-plum",
+ "hex": "#d485a6",
+ "hsl": [
+ 335,
+ 48,
+ 68
+ ],
+ "rgb": [
+ 212,
+ 133,
+ 166
+ ]
+ },
+ {
+ "slug": "sweet-lilac",
+ "hex": "#a58cad",
+ "hsl": [
+ 285,
+ 17,
+ 61
+ ],
+ "rgb": [
+ 165,
+ 140,
+ 173
+ ]
+ },
+ {
+ "slug": "tan",
+ "hex": "#d4a37c",
+ "hsl": [
+ 27,
+ 51,
+ 66
+ ],
+ "rgb": [
+ 212,
+ 163,
+ 124
+ ]
+ },
+ {
+ "slug": "tarragon",
+ "hex": "#808436",
+ "hsl": [
+ 63,
+ 42,
+ 36
+ ],
+ "rgb": [
+ 128,
+ 132,
+ 54
+ ]
+ },
+ {
+ "slug": "taupe",
+ "hex": "#e8d5c5",
+ "hsl": [
+ 27,
+ 43,
+ 84
+ ],
+ "rgb": [
+ 232,
+ 213,
+ 197
+ ]
+ },
+ {
+ "slug": "terracotta",
+ "hex": "#997f5d",
+ "hsl": [
+ 34,
+ 24,
+ 48
+ ],
+ "rgb": [
+ 153,
+ 127,
+ 93
+ ]
+ },
+ {
+ "slug": "thistle",
+ "hex": "#2d3036",
+ "hsl": [
+ 220,
+ 9,
+ 19
+ ],
+ "rgb": [
+ 45,
+ 48,
+ 54
+ ]
+ },
+ {
+ "slug": "thyme",
+ "hex": "#35391f",
+ "hsl": [
+ 69,
+ 30,
+ 17
+ ],
+ "rgb": [
+ 53,
+ 57,
+ 31
+ ]
+ },
+ {
+ "slug": "trench",
+ "hex": "#806a5c",
+ "hsl": [
+ 23,
+ 16,
+ 43
+ ],
+ "rgb": [
+ 128,
+ 106,
+ 92
+ ]
+ },
+ {
+ "slug": "tusk",
+ "hex": "#d7cebf",
+ "hsl": [
+ 38,
+ 23,
+ 80
+ ],
+ "rgb": [
+ 215,
+ 206,
+ 191
+ ]
+ },
+ {
+ "slug": "umber",
+ "hex": "#63473e",
+ "hsl": [
+ 15,
+ 23,
+ 32
+ ],
+ "rgb": [
+ 99,
+ 71,
+ 62
+ ]
+ },
+ {
+ "slug": "vanilla",
+ "hex": "#dbcab4",
+ "hsl": [
+ 34,
+ 35,
+ 78
+ ],
+ "rgb": [
+ 219,
+ 202,
+ 180
+ ]
+ },
+ {
+ "slug": "verdigris",
+ "hex": "#829e99",
+ "hsl": [
+ 169,
+ 13,
+ 56
+ ],
+ "rgb": [
+ 130,
+ 158,
+ 153
+ ]
+ },
+ {
+ "slug": "vermilion",
+ "hex": "#813038",
+ "hsl": [
+ 354,
+ 46,
+ 35
+ ],
+ "rgb": [
+ 129,
+ 48,
+ 56
+ ]
+ },
+ {
+ "slug": "wheat",
+ "hex": "#b59c79",
+ "hsl": [
+ 35,
+ 29,
+ 59
+ ],
+ "rgb": [
+ 181,
+ 156,
+ 121
+ ]
+ },
+ {
+ "slug": "white",
+ "hex": "#e3ded8",
+ "hsl": [
+ 33,
+ 16,
+ 87
+ ],
+ "rgb": [
+ 227,
+ 222,
+ 216
+ ]
+ },
+ {
+ "slug": "winter-white",
+ "hex": "#d2cdba",
+ "hsl": [
+ 48,
+ 21,
+ 78
+ ],
+ "rgb": [
+ 210,
+ 205,
+ 186
+ ]
+ },
+ {
+ "slug": "woodland",
+ "hex": "#615841",
+ "hsl": [
+ 43,
+ 20,
+ 32
+ ],
+ "rgb": [
+ 97,
+ 88,
+ 65
+ ]
+ }
+]
\ No newline at end of file
diff --git a/DW-Websites/Novasuede/cutting.html b/DW-Websites/Novasuede/cutting.html
index 9a660b61..a4e6da7e 100644
--- a/DW-Websites/Novasuede/cutting.html
+++ b/DW-Websites/Novasuede/cutting.html
@@ -85,30 +85,124 @@
margin-bottom: 0.5rem;
}
</style>
+<style id="ns-dark-sweep">
+/* ─── UNIFIED DARK SWEEP — all guide subpages match novasuede.com (2026-05-07) ─── */
+body, body * { color: #f5f1e8 !important; }
+body, header, footer, section, .container, main, article, .content,
+.specs-section, .info-section, .cta-section, .hero, .navbar, nav, .nav {
+ background: #0a0a0a !important;
+ background-color: #0a0a0a !important;
+}
+a { color: #d4b683 !important; }
+a:hover { color: #f5d97a !important; }
+h1, h2, h3, h4, h5, h6 { color: #f5f1e8 !important; }
+
+/* Card-style elements — translucent dark instead of white islands */
+.guide-section, .important-note, .warning, .tip-box, .note-box,
+.faq-item, .faq-question, .faq-answer, .step, .tool-list, .material-list,
+.callout, .info-card, .feature-card, .care-highlight {
+ background: rgba(245, 241, 232, 0.04) !important;
+ background-color: rgba(245, 241, 232, 0.04) !important;
+ border: 1px solid rgba(245, 241, 232, 0.12) !important;
+ border-radius: 4px !important;
+ box-shadow: none !important;
+}
+.guide-section *, .important-note *, .warning *, .tip-box *, .note-box *,
+.faq-item *, .faq-question *, .faq-answer *, .step *, .callout *,
+.info-card *, .feature-card *, .care-highlight * {
+ background: transparent !important;
+}
+
+/* Test-standards list cells (fire-ratings) */
+.test-standards li {
+ background: rgba(245, 241, 232, 0.04) !important;
+ border-left: 3px solid #d4b683 !important;
+ border-radius: 4px !important;
+ color: #f5f1e8 !important;
+}
+.test-standards li strong { color: #d4b683 !important; }
+
+/* Specs / data tables */
+.specs-table { background: #131316 !important; border-color: #2a2622 !important; }
+.specs-table th, .specs-table td { background: transparent !important; color: #f5f1e8 !important; border-color: #2a2622 !important; }
+.specs-table tr:hover { background: rgba(212, 182, 131, 0.06) !important; }
+.specs-table thead, .specs-table thead * { background: #1a1a1a !important; color: #d4b683 !important; }
+
+/* Important / warning / pass-fail callouts — keep semantic color but on dark */
+.important-note { border-left: 3px solid #6a9b73 !important; }
+.warning { border-left: 3px solid #b66565 !important; }
+
+/* CTA / sample buttons — hairline white-border on transparent (matches index.html hero) */
+.sample-btn, button.cta, .btn, .footer-sample-btn {
+ background: transparent !important;
+ color: #f5f1e8 !important;
+ border: 1px solid #f5f1e8 !important;
+ border-radius: 0 !important;
+ padding: 12px 32px !important;
+ font-size: 11px !important;
+ letter-spacing: 0.32em !important;
+ text-transform: uppercase !important;
+ font-weight: 400 !important;
+ transition: background 220ms ease, color 220ms ease !important;
+}
+.sample-btn:hover, button.cta:hover, .btn:hover, .footer-sample-btn:hover {
+ background: #f5f1e8 !important;
+ color: #0a0a0a !important;
+}
+
+/* Header / nav surface */
+header, .navbar, nav.navbar {
+ background: rgba(10, 10, 10, 0.78) !important;
+ -webkit-backdrop-filter: blur(14px) !important;
+ backdrop-filter: blur(14px) !important;
+ border-bottom: 1px solid rgba(245, 241, 232, 0.08) !important;
+}
+header *, .navbar *, nav.navbar * { background: transparent !important; }
+
+/* Footer brand swap → info@novasuede.com */
+footer { border-top: 1px solid rgba(245, 241, 232, 0.08) !important; }
+</style>
</head>
<body>
- <header>
- <nav class="navbar">
- <div class="nav-container">
- <div class="logo">
- <h1>Novasuede<span>™</span></h1>
- </div>
- <button class="mobile-toggle" aria-label="Toggle navigation">
- <span></span>
- <span></span>
- <span></span>
- </button>
- <ul class="nav-menu">
- <li><a href="index.html">Home</a></li>
- <li><a href="index.html#colors">Colors</a></li>
- <li><a href="index.html#specifications">Specifications</a></li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="cleaning.html">Cleaning</a></li>
- <li><a href="index.html#contact" class="cta-button">Get Sample</a></li>
- </ul>
- </div>
+ <header class="ns-header">
+ <a href="index.html" class="ns-brand" aria-label="Novasuede home">
+ <span class="ns-dot"></span>
+ <span class="ns-name">Novasuede<sup>™</sup></span>
+ </a>
+ <nav class="ns-nav" aria-label="Primary">
+ <a href="index.html">Home</a>
+ <a href="index.html#colors">Colors</a>
+ <a href="index.html#specifications">Specifications</a>
+ <a href="fire-ratings.html">Fire Ratings</a>
+ <a href="faq.html">FAQ</a>
+ <a href="about.html">About</a>
+ <button type="button" onclick="nsContactOpen()">Contact</button>
</nav>
</header>
+ <style id="ns-unified-header-style">
+ .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 !important; }
+ .ns-dot { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #b66a4d 0%, #8a4a30 60%, #5a2d1c 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", system-ui; font-size: 18px !important; font-weight: 300 !important; letter-spacing: 0.02em !important; color: #f5f1e8 !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; }
+ .ns-nav a:hover, .ns-nav button:hover { color: #ffffff !important; }
+ @media (max-width: 820px) { .ns-header { padding: 14px 18px; } .ns-nav { gap: 16px; } .ns-nav a, .ns-nav button { font-size: 13px !important; } }
+ @media (max-width: 560px) { .ns-nav a:nth-child(n+5), .ns-nav button:nth-child(n+5) { display: none; } }
+ .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 h3 { font-family: -apple-system, "SF Pro Display"; 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 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; }
+ </style>
<div class="guide-content">
<div class="guide-header">
@@ -310,16 +404,34 @@
</div>
<div class="footer-section">
<h3>Contact</h3>
- <p>Email: info@DesignerWallcoverings.com</p>
+ <p>Email: info@novasuede.com</p>
<button class="footer-sample-btn" onclick="window.location.href='index.html#contact'">Request Sample</button>
</div>
</div>
<div class="footer-bottom">
- <p>© 2025 Novasuede.com. All rights reserved.</p>
+ <p>© 2026 Novasuede.com. All rights reserved.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
+ <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="index.html#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="index.html#contact" onclick="nsContactClose()"><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</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() { document.getElementById('nsContactModal').classList.add('show'); }
+ function nsContactClose() { document.getElementById('nsContactModal').classList.remove('show'); }
+ document.addEventListener('keydown', function(e) { if (e.key === 'Escape') nsContactClose(); });
+ </script>
</body>
</html>
\ No newline at end of file
diff --git a/DW-Websites/Novasuede/extract-center-hex.js b/DW-Websites/Novasuede/extract-center-hex.js
new file mode 100644
index 00000000..cd9657a5
--- /dev/null
+++ b/DW-Websites/Novasuede/extract-center-hex.js
@@ -0,0 +1,71 @@
+#!/usr/bin/env node
+// Scan every novasuede-*.jpg, sample a 64×64 patch dead center, average to ONE
+// canonical hex. Writes colors-data.json — { slug, hex, hsl: [h,s,l] }.
+//
+// Photo center is the truest read of the suede surface (corners pick up
+// vignette / shadow / lighting falloff). Single hex per SKU per Steve's
+// "1 hex per" rule.
+
+const sharp = require('sharp');
+const fs = require('fs');
+const path = require('path');
+
+const COLORS_DIR = path.join(__dirname, 'images', 'colors');
+const PATCH = 64; // 64×64 = 4096 samples averaged
+const OUT = path.join(__dirname, 'colors-data.json');
+
+function rgbToHsl(r, g, b) {
+ r /= 255; g /= 255; b /= 255;
+ const max = Math.max(r, g, b), min = Math.min(r, g, b);
+ let h = 0, s = 0; const l = (max + min) / 2;
+ if (max !== min) {
+ const d = max - min;
+ s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+ switch (max) {
+ case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+ case g: h = (b - r) / d + 2; break;
+ case b: h = (r - g) / d + 4; break;
+ }
+ h /= 6;
+ }
+ return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
+}
+
+const toHex = n => n.toString(16).padStart(2, '0');
+const fmtHex = (r, g, b) => '#' + toHex(r) + toHex(g) + toHex(b);
+
+async function centerHex(filepath) {
+ const img = sharp(filepath);
+ const meta = await img.metadata();
+ const cx = Math.floor(meta.width / 2 - PATCH / 2);
+ const cy = Math.floor(meta.height / 2 - PATCH / 2);
+ const buf = await img
+ .extract({ left: cx, top: cy, width: PATCH, height: PATCH })
+ .raw()
+ .toBuffer();
+ let r = 0, g = 0, b = 0; const n = PATCH * PATCH;
+ for (let i = 0; i < buf.length; i += 3) { r += buf[i]; g += buf[i+1]; b += buf[i+2]; }
+ return [Math.round(r / n), Math.round(g / n), Math.round(b / n)];
+}
+
+(async () => {
+ const files = fs.readdirSync(COLORS_DIR)
+ .filter(f => f.startsWith('novasuede-') && f.endsWith('.jpg'))
+ .sort();
+ console.log(`scanning ${files.length} colors…`);
+ const out = [];
+ for (const f of files) {
+ const slug = f.replace(/^novasuede-/, '').replace(/\.jpg$/, '');
+ try {
+ const [r, g, b] = await centerHex(path.join(COLORS_DIR, f));
+ const hex = fmtHex(r, g, b);
+ const [h, s, l] = rgbToHsl(r, g, b);
+ out.push({ slug, hex, hsl: [h, s, l], rgb: [r, g, b] });
+ process.stdout.write(` ${slug.padEnd(28)} ${hex} hsl(${h},${s}%,${l}%)\n`);
+ } catch (e) {
+ console.log(` ${slug} ERR ${e.message}`);
+ }
+ }
+ fs.writeFileSync(OUT, JSON.stringify(out, null, 2));
+ console.log(`wrote ${out.length} rows → ${OUT}`);
+})();
diff --git a/DW-Websites/Novasuede/faq.html b/DW-Websites/Novasuede/faq.html
index 429c4ede..e024340b 100644
--- a/DW-Websites/Novasuede/faq.html
+++ b/DW-Websites/Novasuede/faq.html
@@ -140,30 +140,207 @@
background: var(--secondary-color);
}
</style>
+<style id="ns-dark-sweep">
+/* ─── UNIFIED DARK SWEEP — all guide subpages match novasuede.com (2026-05-07) ─── */
+body, body * { color: #f5f1e8 !important; }
+body, header, footer, section, .container, main, article, .content,
+.specs-section, .info-section, .cta-section, .hero, .navbar, nav, .nav {
+ background: #0a0a0a !important;
+ background-color: #0a0a0a !important;
+}
+a { color: #d4b683 !important; }
+a:hover { color: #f5d97a !important; }
+h1, h2, h3, h4, h5, h6 { color: #f5f1e8 !important; }
+
+/* Card-style elements — translucent dark instead of white islands */
+.guide-section, .important-note, .warning, .tip-box, .note-box,
+.faq-item, .faq-question, .faq-answer, .step, .tool-list, .material-list,
+.callout, .info-card, .feature-card, .care-highlight {
+ background: rgba(245, 241, 232, 0.04) !important;
+ background-color: rgba(245, 241, 232, 0.04) !important;
+ border: 1px solid rgba(245, 241, 232, 0.12) !important;
+ border-radius: 4px !important;
+ box-shadow: none !important;
+}
+.guide-section *, .important-note *, .warning *, .tip-box *, .note-box *,
+.faq-item *, .faq-question *, .faq-answer *, .step *, .callout *,
+.info-card *, .feature-card *, .care-highlight * {
+ background: transparent !important;
+}
+
+/* Test-standards list cells (fire-ratings) */
+.test-standards li {
+ background: rgba(245, 241, 232, 0.04) !important;
+ border-left: 3px solid #d4b683 !important;
+ border-radius: 4px !important;
+ color: #f5f1e8 !important;
+}
+.test-standards li strong { color: #d4b683 !important; }
+
+/* Specs / data tables */
+.specs-table { background: #131316 !important; border-color: #2a2622 !important; }
+.specs-table th, .specs-table td { background: transparent !important; color: #f5f1e8 !important; border-color: #2a2622 !important; }
+.specs-table tr:hover { background: rgba(212, 182, 131, 0.06) !important; }
+.specs-table thead, .specs-table thead * { background: #1a1a1a !important; color: #d4b683 !important; }
+
+/* Important / warning / pass-fail callouts — keep semantic color but on dark */
+.important-note { border-left: 3px solid #6a9b73 !important; }
+.warning { border-left: 3px solid #b66565 !important; }
+
+/* CTA / sample buttons — hairline white-border on transparent (matches index.html hero) */
+.sample-btn, button.cta, .btn, .footer-sample-btn {
+ background: transparent !important;
+ color: #f5f1e8 !important;
+ border: 1px solid #f5f1e8 !important;
+ border-radius: 0 !important;
+ padding: 12px 32px !important;
+ font-size: 11px !important;
+ letter-spacing: 0.32em !important;
+ text-transform: uppercase !important;
+ font-weight: 400 !important;
+ transition: background 220ms ease, color 220ms ease !important;
+}
+.sample-btn:hover, button.cta:hover, .btn:hover, .footer-sample-btn:hover {
+ background: #f5f1e8 !important;
+ color: #0a0a0a !important;
+}
+
+/* Header / nav surface */
+header, .navbar, nav.navbar {
+ background: rgba(10, 10, 10, 0.78) !important;
+ -webkit-backdrop-filter: blur(14px) !important;
+ backdrop-filter: blur(14px) !important;
+ border-bottom: 1px solid rgba(245, 241, 232, 0.08) !important;
+}
+header *, .navbar *, nav.navbar * { background: transparent !important; }
+
+/* Footer brand swap → info@novasuede.com */
+footer { border-top: 1px solid rgba(245, 241, 232, 0.08) !important; }
+</style>
</head>
<body>
- <header>
- <nav class="navbar">
- <div class="nav-container">
- <div class="logo">
- <h1>Novasuede<span>™</span></h1>
- </div>
- <button class="mobile-toggle" aria-label="Toggle navigation">
- <span></span>
- <span></span>
- <span></span>
- </button>
- <ul class="nav-menu">
- <li><a href="index.html">Home</a></li>
- <li><a href="index.html#colors">Colors</a></li>
- <li><a href="index.html#specifications">Specifications</a></li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="cleaning.html">Cleaning</a></li>
- <li><a href="index.html#contact" class="cta-button">Get Sample</a></li>
- </ul>
- </div>
+ <header class="ns-header">
+ <a href="index.html" class="ns-brand" aria-label="Novasuede home">
+ <span class="ns-dot"></span>
+ <span class="ns-name">Novasuede<sup>™</sup></span>
+ </a>
+ <nav class="ns-nav" aria-label="Primary">
+ <a href="index.html">Home</a>
+ <a href="index.html#colors">Colors</a>
+ <a href="index.html#specifications">Specifications</a>
+ <a href="fire-ratings.html">Fire Ratings</a>
+ <a href="faq.html">FAQ</a>
+ <a href="about.html">About</a>
+ <button type="button" onclick="nsContactOpen()">Contact</button>
</nav>
</header>
+ <style>
+ .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 !important; }
+ .ns-dot { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #b66a4d 0%, #8a4a30 60%, #5a2d1c 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", system-ui; font-size: 18px !important; font-weight: 300 !important; letter-spacing: 0.02em !important; color: #f5f1e8 !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; }
+ .ns-nav a:hover, .ns-nav button:hover { color: #ffffff !important; }
+ @media (max-width: 820px) { .ns-header { padding: 14px 18px; } .ns-nav { gap: 16px; } .ns-nav a, .ns-nav button { font-size: 13px !important; } }
+ @media (max-width: 560px) { .ns-nav a:nth-child(n+5), .ns-nav button:nth-child(n+5) { display: none; } }
+ .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 h3 { font-family: -apple-system, "SF Pro Display"; 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 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; }
+
+ /* FAQ category pills — readable on dark bg */
+ .category-btn {
+ background: transparent !important;
+ color: #f5f1e8 !important;
+ border: 1px solid rgba(245,241,232,0.30) !important;
+ padding: 0.65rem 1.4rem !important;
+ border-radius: 999px !important;
+ font-weight: 500 !important;
+ font-size: 14px !important;
+ letter-spacing: 0.02em !important;
+ }
+ .category-btn:hover {
+ background: rgba(245,241,232,0.08) !important;
+ border-color: rgba(245,241,232,0.60) !important;
+ color: #ffffff !important;
+ }
+ .category-btn.active {
+ background: #f5f1e8 !important;
+ color: #0a0a0a !important;
+ border-color: #f5f1e8 !important;
+ }
+
+ /* "Still Have Questions?" CTA — flip from cream-card to dark hairline-border block */
+ .contact-cta {
+ background: rgba(245, 241, 232, 0.04) !important;
+ background-color: rgba(245, 241, 232, 0.04) !important;
+ border: 1px solid rgba(245, 241, 232, 0.12) !important;
+ border-radius: 4px !important;
+ padding: 3rem 2rem !important;
+ margin-top: 4rem !important;
+ box-shadow: none !important;
+ }
+ .contact-cta * { background: transparent !important; }
+ .contact-cta h3 {
+ color: #f5f1e8 !important;
+ font-family: "Cormorant Garamond", "Times New Roman", serif !important;
+ font-style: italic !important;
+ font-weight: 400 !important;
+ font-size: 28px !important;
+ letter-spacing: 0 !important;
+ text-transform: none !important;
+ margin-bottom: 0.6rem !important;
+ }
+ .contact-cta p, .contact-cta span:not(.ns-dot) {
+ color: rgba(245, 241, 232, 0.72) !important;
+ font-size: 14px !important;
+ }
+ .contact-cta button {
+ background: transparent !important;
+ color: #f5f1e8 !important;
+ border: 1px solid #f5f1e8 !important;
+ border-radius: 0 !important;
+ padding: 14px 32px !important;
+ font-size: 11px !important;
+ letter-spacing: 0.32em !important;
+ text-transform: uppercase !important;
+ font-weight: 400 !important;
+ margin-top: 1.4rem !important;
+ transition: background 220ms ease, color 220ms ease !important;
+ }
+ .contact-cta button:hover {
+ background: #f5f1e8 !important;
+ color: #0a0a0a !important;
+ }
+ </style>
+ <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="index.html#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="index.html#contact" onclick="nsContactClose()"><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</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() { document.getElementById('nsContactModal').classList.add('show'); }
+ function nsContactClose() { document.getElementById('nsContactModal').classList.remove('show'); }
+ document.addEventListener('keydown', e => { if (e.key === 'Escape') nsContactClose(); });
+ </script>
<div class="guide-content">
<div class="guide-header">
@@ -408,12 +585,12 @@
</div>
<div class="footer-section">
<h3>Contact</h3>
- <p>Email: info@DesignerWallcoverings.com</p>
+ <p>Email: info@novasuede.com</p>
<button class="footer-sample-btn" onclick="window.location.href='index.html#contact'">Request Sample</button>
</div>
</div>
<div class="footer-bottom">
- <p>© 2025 Novasuede.com. All rights reserved.</p>
+ <p>© 2026 Novasuede.com. All rights reserved.</p>
</div>
</div>
</footer>
diff --git a/DW-Websites/Novasuede/fire-ratings.html b/DW-Websites/Novasuede/fire-ratings.html
index a7a2ebf5..76170f85 100644
--- a/DW-Websites/Novasuede/fire-ratings.html
+++ b/DW-Websites/Novasuede/fire-ratings.html
@@ -63,14 +63,14 @@
font-size: 1.1rem;
}
.important-note {
- background: #d4edda;
+ background: rgba(106,155,115,0.1);
border-left: 4px solid #28a745;
padding: 1.5rem;
border-radius: 5px;
margin: 1.5rem 0;
}
.important-note h3 {
- color: #155724;
+ color: #6a9b73;
margin-top: 0;
font-size: 1.2rem;
}
@@ -93,32 +93,230 @@
.specs-table tr:hover {
background: #f8f8f8;
}
+
+ /* GLOBAL DARK SWEEP — match novasuede.com/index.html (2026-05-07) */
+ body, body * { color: #ffffff !important; }
+ body, header, footer, section, .container, main, article, .content, .specs-section,
+ .info-section, .cta-section, .hero, .navbar {
+ background: #0a0a0a !important;
+ background-color: #0a0a0a !important;
+ }
+ a { color: #DDAB1E !important; }
+ a:hover { color: #f5d97a !important; }
+ h1, h2, h3, h4, h5, h6 { color: #ffffff !important; }
+ /* Specs table — invert white-on-light to white-on-dark */
+ .specs-table { background: #141414 !important; border-color: #2a2a2a !important; }
+ .specs-table th, .specs-table td { background: transparent !important; color: #ffffff !important; border-color: #2a2a2a !important; }
+ .specs-table tr:hover { background: rgba(221,171,30,0.08) !important; }
+ .specs-table thead, .specs-table thead * { background: #1a1a1a !important; color: #DDAB1E !important; }
+ /* Sample / CTA buttons */
+ .sample-btn, button.cta, .btn {
+ background: rgba(255,255,255,0.06) !important;
+ color: rgba(255,255,255,0.92) !important;
+ border: 1px solid rgba(255,255,255,0.55) !important;
+ }
+ .sample-btn:hover, button.cta:hover, .btn:hover {
+ background: rgba(255,255,255,0.92) !important;
+ color: #0a0a0a !important;
+ }
+ /* Test-standard list cards: dark bg with gold accent border */
+ .test-standards li {
+ background: #141414 !important;
+ border-left: 4px solid #DDAB1E !important;
+ color: #ffffff !important;
+ }
+ .test-standards li, .test-standards li * { color: #ffffff !important; }
+ .test-standards li strong { color: #DDAB1E !important; }
+ /* "No Additional Flame Retardant Treatment Required" success-banner */
+ .important-note {
+ background: rgba(40, 167, 69, 0.12) !important;
+ border-left: 4px solid #28a745 !important;
+ color: #ffffff !important;
+ }
+ .important-note, .important-note * { color: #ffffff !important; }
+ .important-note h3 { color: #6ec081 !important; }
+ .important-note strong { color: #6ec081 !important; }
+ /* Top nav "Get Sample" CTA — make readable on dark */
+ .cta-button {
+ background: #DDAB1E !important;
+ color: #0a0a0a !important;
+ border-radius: 999px !important;
+ padding: 8px 18px !important;
+ font-weight: 600 !important;
+ }
+ .cta-button:hover { background: #f5d97a !important; color: #0a0a0a !important; }
</style>
+<style id="ns-dark-sweep">
+/* ─── UNIFIED DARK SWEEP — all guide subpages match novasuede.com (2026-05-07) ─── */
+body, body * { color: #f5f1e8 !important; }
+body, header, footer, section, .container, main, article, .content,
+.specs-section, .info-section, .cta-section, .hero, .navbar, nav, .nav {
+ background: #0a0a0a !important;
+ background-color: #0a0a0a !important;
+}
+a { color: #d4b683 !important; }
+a:hover { color: #f5d97a !important; }
+h1, h2, h3, h4, h5, h6 { color: #f5f1e8 !important; }
+
+/* Card-style elements — translucent dark instead of white islands */
+.guide-section, .important-note, .warning, .tip-box, .note-box,
+.faq-item, .faq-question, .faq-answer, .step, .tool-list, .material-list,
+.callout, .info-card, .feature-card, .care-highlight {
+ background: rgba(245, 241, 232, 0.04) !important;
+ background-color: rgba(245, 241, 232, 0.04) !important;
+ border: 1px solid rgba(245, 241, 232, 0.12) !important;
+ border-radius: 4px !important;
+ box-shadow: none !important;
+}
+.guide-section *, .important-note *, .warning *, .tip-box *, .note-box *,
+.faq-item *, .faq-question *, .faq-answer *, .step *, .callout *,
+.info-card *, .feature-card *, .care-highlight * {
+ background: transparent !important;
+}
+
+/* Test-standards list cells (fire-ratings) */
+.test-standards li {
+ background: rgba(245, 241, 232, 0.04) !important;
+ border-left: 3px solid #d4b683 !important;
+ border-radius: 4px !important;
+ color: #f5f1e8 !important;
+}
+.test-standards li strong { color: #d4b683 !important; }
+
+/* Specs / data tables */
+.specs-table { background: #131316 !important; border-color: #2a2622 !important; }
+.specs-table th, .specs-table td { background: transparent !important; color: #f5f1e8 !important; border-color: #2a2622 !important; }
+.specs-table tr:hover { background: rgba(212, 182, 131, 0.06) !important; }
+.specs-table thead, .specs-table thead * { background: #1a1a1a !important; color: #d4b683 !important; }
+
+/* Important / warning / pass-fail callouts — keep semantic color but on dark */
+.important-note { border-left: 3px solid #6a9b73 !important; }
+.warning { border-left: 3px solid #b66565 !important; }
+
+/* CTA / sample buttons — hairline white-border on transparent (matches index.html hero) */
+.sample-btn, button.cta, .btn, .footer-sample-btn {
+ background: transparent !important;
+ color: #f5f1e8 !important;
+ border: 1px solid #f5f1e8 !important;
+ border-radius: 0 !important;
+ padding: 12px 32px !important;
+ font-size: 11px !important;
+ letter-spacing: 0.32em !important;
+ text-transform: uppercase !important;
+ font-weight: 400 !important;
+ transition: background 220ms ease, color 220ms ease !important;
+}
+.sample-btn:hover, button.cta:hover, .btn:hover, .footer-sample-btn:hover {
+ background: #f5f1e8 !important;
+ color: #0a0a0a !important;
+}
+
+/* Header / nav surface */
+header, .navbar, nav.navbar {
+ background: rgba(10, 10, 10, 0.78) !important;
+ -webkit-backdrop-filter: blur(14px) !important;
+ backdrop-filter: blur(14px) !important;
+ border-bottom: 1px solid rgba(245, 241, 232, 0.08) !important;
+}
+header *, .navbar *, nav.navbar * { background: transparent !important; }
+
+/* Footer brand swap → info@novasuede.com */
+footer { border-top: 1px solid rgba(245, 241, 232, 0.08) !important; }
+</style>
</head>
<body>
- <header>
- <nav class="navbar">
- <div class="nav-container">
- <div class="logo">
- <h1>Novasuede<span>™</span></h1>
- </div>
- <button class="mobile-toggle" aria-label="Toggle navigation">
- <span></span>
- <span></span>
- <span></span>
- </button>
- <ul class="nav-menu">
- <li><a href="index.html">Home</a></li>
- <li><a href="index.html#colors">Colors</a></li>
- <li><a href="index.html#specifications">Specifications</a></li>
- <li><a href="fire-ratings.html">Fire Ratings</a></li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="cleaning.html">Cleaning</a></li>
- <li><a href="index.html#contact" class="cta-button">Get Sample</a></li>
- </ul>
- </div>
+ <!-- Unified header (matches Steve's reference screenshot 2026-05-07) -->
+ <header class="ns-header">
+ <a href="index.html" class="ns-brand" aria-label="Novasuede home">
+ <span class="ns-dot"></span>
+ <span class="ns-name">Novasuede<sup>™</sup></span>
+ </a>
+ <nav class="ns-nav" aria-label="Primary">
+ <a href="index.html">Home</a>
+ <a href="index.html#colors">Colors</a>
+ <a href="index.html#specifications">Specifications</a>
+ <a href="fire-ratings.html">Fire Ratings</a>
+ <a href="faq.html">FAQ</a>
+ <a href="about.html">About</a>
+ <button type="button" onclick="nsContactOpen()">Contact</button>
</nav>
</header>
+ <!-- Contact modal -->
+ <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="index.html#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="index.html#contact" onclick="nsContactClose()"><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</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>
+ <style>
+ .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; 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); border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
+ .ns-modal-card .close-x:hover { color: #ffffff; border-color: #ffffff; }
+ .ns-modal-card h3 { font-family: -apple-system, "SF Pro Display", system-ui; font-weight: 300; font-size: 22px; margin: 0 0 6px; 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; }
+ .ns-nav button { font: inherit; font-size: 16px; background: none; border: 0; color: #f5f1e8 !important; cursor: pointer; padding: 0; transition: color 200ms; }
+ .ns-nav button:hover { color: #ffffff !important; }
+ </style>
+ <script>
+ function nsContactOpen() { document.getElementById('nsContactModal').classList.add('show'); }
+ function nsContactClose() { document.getElementById('nsContactModal').classList.remove('show'); }
+ document.addEventListener('keydown', e => { if (e.key === 'Escape') nsContactClose(); });
+ </script>
+ <style id="ns-header-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%, #b66a4d 0%, #8a4a30 60%, #5a2d1c 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; font-weight: 300; letter-spacing: 0.02em;
+ color: #f5f1e8 !important;
+ }
+ .ns-name sup { font-size: 0.55em; font-weight: 300; margin-left: 1px; }
+ .ns-nav { display: flex; gap: 38px; align-items: center; }
+ .ns-nav a {
+ font-family: -apple-system, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
+ font-size: 16px; font-weight: 400;
+ color: #f5f1e8 !important; text-decoration: none;
+ transition: color 200ms ease;
+ }
+ .ns-nav a:hover, .ns-nav a:focus { color: #ffffff !important; }
+ @media (max-width: 820px) {
+ .ns-header { padding: 14px 18px; }
+ .ns-nav { gap: 18px; }
+ .ns-nav a { font-size: 13px; }
+ }
+ @media (max-width: 560px) {
+ .ns-nav a:nth-child(n+4) { display: none; }
+ }
+ </style>
<div class="guide-content">
<div class="guide-header">
@@ -244,13 +442,13 @@
<h2>Testing & Certification</h2>
<p>All Novasuede™ products undergo rigorous third-party testing to verify compliance with flammability standards. Test reports and certifications are available upon request for specification purposes.</p>
- <p>For specific project requirements or questions about fire ratings and certifications, please contact us at <a href="mailto:info@DesignerWallcoverings.com">info@DesignerWallcoverings.com</a>.</p>
+ <p>For specific project requirements or questions about fire ratings and certifications, please contact us at <a href="mailto:info@novasuede.com">info@novasuede.com</a>.</p>
</section>
<div class="important-note">
<h3>Questions About Fire Safety?</h3>
<p>Our team can provide detailed technical specifications, test reports, and guidance on meeting local building codes and fire safety requirements. Contact us for assistance with your specific project needs.</p>
- <p style="margin-top: 1rem;"><a href="index.html#contact" style="color: #155724; font-weight: 600; text-decoration: underline;">Request a Sample →</a></p>
+ <p style="margin-top: 1rem;"><a href="index.html#contact" style="color: #6a9b73; font-weight: 600; text-decoration: underline;">Request a Sample →</a></p>
</div>
</div>
@@ -274,12 +472,12 @@
</div>
<div class="footer-section">
<h3>Contact</h3>
- <p>Email: info@DesignerWallcoverings.com</p>
+ <p>Email: info@novasuede.com</p>
<p><a href="index.html#contact" class="cta-button">Request Sample</a></p>
</div>
</div>
<div class="footer-bottom">
- <p>© 2025 Novasuede.com. All rights reserved.</p>
+ <p>© 2026 Novasuede.com. All rights reserved.</p>
</div>
</footer>
diff --git a/DW-Websites/Novasuede/index-static-pre-rotation.html b/DW-Websites/Novasuede/index-static-pre-rotation.html
new file mode 100644
index 00000000..c0e5e201
--- /dev/null
+++ b/DW-Websites/Novasuede/index-static-pre-rotation.html
@@ -0,0 +1,1966 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Novasuede™ - Premium Microfiber Suede Fabric | 118 Colors</title>
+ <meta name="description" content="Novasuede™ premium microfiber suede fabric available in 150+ colors. Perfect for wallcovering, upholstery, and panels.">
+ <link rel="icon" type="image/jpeg" href="https://novasuede.com/images/colors/novasuede-ruby.jpg">
+ <link rel="shortcut icon" type="image/jpeg" href="https://novasuede.com/images/colors/novasuede-ruby.jpg">
+
+ <style>
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+ line-height: 1.6;
+ color: #333;
+ }
+
+ header {
+ background: white;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+ }
+
+ .nav-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 1rem 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .logo h1 {
+ color: #DDAB1E;
+ font-size: 1.8rem;
+ }
+
+ .logo h1::before {
+ content: '';
+ display: inline-block;
+ width: 28px;
+ height: 28px;
+ background-image: url('https://novasuede.com/images/colors/novasuede-ruby.jpg');
+ background-size: cover;
+ background-position: center;
+ border-radius: 50%;
+ margin-right: 10px;
+ vertical-align: middle;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+ }
+
+ .nav-menu {
+ list-style: none;
+ display: flex;
+ gap: 2rem;
+ }
+
+ .nav-menu a {
+ color: #333;
+ text-decoration: none;
+ font-weight: 500;
+ transition: color 0.3s;
+ }
+
+ .nav-menu a:hover {
+ color: #DDAB1E;
+ }
+
+ .mobile-toggle {
+ display: none;
+ flex-direction: column;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .mobile-toggle span {
+ width: 25px;
+ height: 3px;
+ background: #333;
+ margin: 3px 0;
+ transition: 0.3s;
+ }
+
+ .hero {
+ margin-top: 80px;
+ padding: 4rem 2rem;
+ background: url('images/bg-site-splash.jpg') center top / cover no-repeat;
+ background-attachment: fixed;
+ text-align: center;
+ position: relative;
+ min-height: 70vh;
+ }
+ @media (max-width: 768px) {
+ .hero {
+ background-image: url('images/bg-site-splash-m.jpg');
+ background-attachment: scroll; /* fixed is buggy on iOS */
+ min-height: 60vh;
+ }
+ }
+
+ .hero::before {
+ content: '';
+ position: absolute;
+ top: 0; left: 0; right: 0; bottom: 0;
+ background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.30) 50%, rgba(255,255,255,0.65) 100%);
+ z-index: 0;
+ }
+
+ .hero-content {
+ position: relative;
+ z-index: 3;
+ max-width: 720px;
+ margin: 0 auto;
+ }
+
+ .curtain {
+ position: absolute;
+ top: 0; bottom: 0;
+ width: 16%;
+ background-size: cover;
+ background-position: center top;
+ background-repeat: no-repeat;
+ z-index: 2;
+ pointer-events: none;
+ }
+ .curtain-left { left: 0; background-image: url('images/left-curtain-d1.png'); }
+ .curtain-right { right: 0; background-image: url('images/right-curtain-d1.png'); }
+ @media (max-width: 768px) {
+ .curtain { width: 22%; }
+ }
+ @media (max-width: 480px) {
+ .curtain { display: none; } /* curtains squeeze content too much on phone */
+ }
+
+ .enter-novasuede-logo {
+ display: block;
+ max-width: 520px;
+ width: 78%;
+ height: auto;
+ margin: 0 auto 1.75rem;
+ filter: drop-shadow(0 8px 16px rgba(0,0,0,0.35));
+ transition: transform 0.15s ease;
+ }
+ .enter-novasuede-logo:hover { transform: scale(1.03); }
+ @media (max-width: 768px) {
+ .enter-novasuede-logo { max-width: 340px; }
+ }
+
+ .hero h2 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ color: #ffffff;
+ font-weight: 700;
+ text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.95);
+ }
+
+ .hero p {
+ font-size: 1.2rem;
+ margin-bottom: 2rem;
+ color: #ffffff;
+ text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.9);
+ }
+ .hero .authorized-dealer p { color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
+
+ .sample-btn {
+ background: #DDAB1E;
+ color: white;
+ border: none;
+ padding: 1rem 2rem;
+ font-size: 1.1rem;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background 0.3s;
+ }
+
+ .sample-btn:hover {
+ background: #c4981a;
+ }
+
+ .container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+ }
+
+ .colors-section {
+ padding: 4rem 0;
+ background: white;
+ }
+
+ .colors-section h2 {
+ text-align: center;
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ }
+
+ .section-subtitle {
+ text-align: center;
+ color: #666;
+ margin-bottom: 3rem;
+ }
+
+ .colors-grid {
+ display: grid;
+ grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr));
+ gap: 1.5rem;
+ }
+ @media (max-width: 720px) { .colors-grid { grid-template-columns: repeat(2, 1fr) !important; } }
+ @media (min-width: 721px) and (max-width: 1024px) { .colors-grid { grid-template-columns: repeat(3, 1fr) !important; } }
+ /* Sort + density toolbar (CLAUDE.md "every grid needs sort + density" rule) */
+ .ns-toolbar { display: inline-flex; gap: 18px; align-items: center; margin-left: auto; flex-wrap: wrap; }
+ .ns-ctrl { display: inline-flex; gap: 8px; align-items: center; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #666; }
+ .ns-ctrl select { background: #fff; color: #222; border: 1px solid #ccc; padding: 5px 8px; font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0; border-radius: 3px; cursor: pointer; }
+ .ns-ctrl select:focus { outline: none; border-color: #DDAB1E; }
+ .ns-ctrl input[type="range"] { width: 90px; accent-color: #DDAB1E; cursor: pointer; }
+ .ns-ctrl #nsColsVal { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: #DDAB1E; min-width: 14px; text-align: right; }
+
+ .color-item {
+ cursor: pointer;
+ transition: transform 0.3s;
+ text-align: center;
+ position: relative;
+ }
+
+ .color-item:hover {
+ transform: translateY(-5px);
+ }
+
+ .color-item .new-badge {
+ position: absolute;
+ top: 6px;
+ right: 6px;
+ background: #8b6914;
+ color: #fff;
+ font-size: 0.65rem;
+ font-weight: 700;
+ letter-spacing: 0.05em;
+ padding: 2px 8px;
+ border-radius: 10px;
+ box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+ z-index: 2;
+ }
+
+ .color-swatch {
+ width: 100%;
+ height: 120px;
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+ background: #f0f0f0;
+ }
+
+ .color-swatch img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ .color-info {
+ margin-top: 0.5rem;
+ }
+
+ .color-name {
+ font-weight: 600;
+ color: #333;
+ }
+
+ .color-code {
+ font-size: 0.85rem;
+ color: #999;
+ }
+
+ .chip-actions {
+ display: flex;
+ gap: 6px;
+ margin-top: 6px;
+ justify-content: center;
+ flex-wrap: wrap;
+ }
+ .drapery-btn, .sample-btn-chip {
+ padding: 5px 10px;
+ font-size: 0.75rem;
+ font-weight: 500;
+ color: #fff;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background 0.2s, transform 0.05s;
+ }
+ .drapery-btn { background: #DDAB1E; }
+ .drapery-btn:hover { background: #b3870e; }
+ .sample-btn-chip { background: #5a5a5a; }
+ .sample-btn-chip:hover { background: #2a2a2a; }
+ .drapery-btn:active, .sample-btn-chip:active { transform: scale(0.96); }
+
+ /* When the page is showing a drapery swag, get OUT of the way so the
+ recolored swag shows full strength. No white fade, no blur, no filter.
+ Sections become fully transparent; chips/text get a small dark plate
+ so they remain readable on top of saturated colors. */
+ body.has-drapery .colors-section,
+ body.has-drapery .specifications-section,
+ body.has-drapery .features-section,
+ body.has-drapery .installation-section,
+ body.has-drapery footer {
+ background: transparent !important;
+ }
+ /* Kill the white veil over the hero so the recolored swag reads true. */
+ body.has-drapery .hero::before { background: transparent !important; }
+ /* Header stays opaque-ish so nav remains legible. */
+ body.has-drapery header {
+ background: rgba(20, 20, 20, 0.55) !important;
+ backdrop-filter: blur(6px);
+ -webkit-backdrop-filter: blur(6px);
+ }
+ body.has-drapery header .nav-menu a,
+ body.has-drapery header .logo h1 { color: #fff !important; }
+ /* Chip swatches and section cards keep their own backgrounds, just give
+ text on the swag a soft dark backplate for legibility. */
+ body.has-drapery .colors-section h2,
+ body.has-drapery .colors-section .section-subtitle,
+ body.has-drapery .specifications-section h2,
+ body.has-drapery .features-section h2,
+ body.has-drapery .installation-section h2,
+ body.has-drapery .installation-section .section-subtitle,
+ body.has-drapery .hero h2,
+ body.has-drapery .hero p,
+ body.has-drapery .hero .authorized-dealer p {
+ color: #fff !important;
+ text-shadow: 0 2px 12px rgba(0,0,0,0.85), 0 1px 4px rgba(0,0,0,0.95) !important;
+ }
+ body.has-drapery .authorized-dealer {
+ background: rgba(0,0,0,0.55) !important;
+ border-color: #DDAB1E !important;
+ backdrop-filter: blur(2px);
+ -webkit-backdrop-filter: blur(2px);
+ }
+ body.has-drapery .color-item { background: rgba(255,255,255,0.94); border-radius: 8px; }
+
+ /* Contact info bar — pinned to the top, above the main nav. */
+ .contact-bar {
+ position: fixed;
+ top: 0; left: 0; right: 0;
+ z-index: 200;
+ background: linear-gradient(90deg, #1a1a1a 0%, #2a2a2a 100%);
+ color: #f5e7c0;
+ font-size: 13px;
+ padding: 6px 0;
+ border-bottom: 2px solid #DDAB1E;
+ }
+ .contact-bar-inner {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 0 16px;
+ display: flex;
+ align-items: center;
+ gap: 22px;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+ .cb-link {
+ color: #f5e7c0;
+ text-decoration: none;
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ transition: color 0.15s;
+ }
+ .cb-link:hover { color: #DDAB1E; }
+ .cb-static { color: #aaa; cursor: default; }
+ .cb-ico { font-size: 14px; }
+ .cb-cta {
+ background: #DDAB1E;
+ color: #1a1a1a;
+ border: none;
+ padding: 5px 14px;
+ border-radius: 4px;
+ font-size: 12px;
+ font-weight: 700;
+ cursor: pointer;
+ margin-left: auto;
+ transition: background 0.15s, transform 0.05s;
+ }
+ .cb-cta:hover { background: #b3870e; color: #fff; }
+ .cb-cta:active { transform: scale(0.97); }
+ /* Push the existing fixed header down so it sits below the contact bar. */
+ header { top: 36px !important; }
+ body { padding-top: 36px; }
+ @media (max-width: 720px) {
+ .contact-bar { font-size: 11px; padding: 5px 0; }
+ .contact-bar-inner { gap: 12px; }
+ .cb-static { display: none; }
+ header { top: 30px !important; }
+ body { padding-top: 30px; }
+ }
+ @media (max-width: 480px) {
+ .cb-text { display: none; } /* icons-only on tiny screens */
+ .cb-cta { padding: 4px 8px; font-size: 11px; }
+ }
+
+ /* Fixed left + right drapery panels — visible at full strength for the
+ entire scroll of the page, not just the hero. Each is the recolored
+ swag image cropped to show only its respective edge. */
+ .has-drapery-side {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ width: 12vw;
+ min-width: 90px;
+ max-width: 220px;
+ z-index: 50;
+ pointer-events: none;
+ background-size: auto 100vh;
+ background-repeat: no-repeat;
+ display: none; /* shown only when body.has-drapery */
+ box-shadow: 0 0 30px rgba(0,0,0,0.25);
+ }
+ .has-drapery-side.left { left: 0; background-position: left center; }
+ .has-drapery-side.right { right: 0; background-position: right center; }
+ body.has-drapery .has-drapery-side { display: block; }
+ @media (max-width: 600px) {
+ body.has-drapery .has-drapery-side { display: none; } /* mobile content too narrow */
+ }
+
+ /* Standalone "New Arrivals 2026" section that sits above the main collection */
+ .new-arrivals-section {
+ padding: 3rem 0 1.5rem;
+ background: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%);
+ color: #f5e7c0;
+ }
+ .new-arrivals-header {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 14px;
+ margin-bottom: 6px;
+ flex-wrap: wrap;
+ }
+ .new-arrivals-section h2 {
+ color: #DDAB1E !important;
+ font-size: 2rem;
+ margin: 0;
+ }
+ .new-arrivals-pill {
+ background: #DDAB1E;
+ color: #1a1a1a;
+ font-weight: 700;
+ font-size: 0.85rem;
+ padding: 4px 12px;
+ border-radius: 999px;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ }
+ .new-arrivals-section .section-subtitle {
+ color: #d8c79a;
+ text-align: center;
+ margin-bottom: 1.75rem;
+ }
+ .new-arrivals-section .colors-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ gap: 1rem;
+ }
+ .new-arrivals-section .color-item {
+ background: rgba(255, 255, 255, 0.96);
+ color: #1a1a1a;
+ }
+
+ .color-filters {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ margin: 10px 0 18px;
+ flex-wrap: wrap;
+ }
+ .color-filter-btn {
+ padding: 6px 14px;
+ font-size: 0.85rem;
+ font-weight: 500;
+ color: #555;
+ background: #fff;
+ border: 1px solid #ccc;
+ border-radius: 999px;
+ cursor: pointer;
+ transition: all 0.15s;
+ }
+ .color-filter-btn:hover { border-color: #DDAB1E; color: #1a1a1a; }
+ .color-filter-btn.active { background: #DDAB1E; border-color: #DDAB1E; color: #fff; }
+ .color-count { color: #888; font-size: 0.85rem; margin-left: auto; }
+
+ /* Modal Styles */
+ .modal {
+ display: none;
+ position: fixed;
+ z-index: 2000;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0,0,0,0.5);
+ }
+
+ .modal-content {
+ background: white;
+ margin: 50px auto;
+ padding: 2rem;
+ width: 90%;
+ max-width: 500px;
+ border-radius: 10px;
+ position: relative;
+ max-height: 90vh;
+ overflow-y: auto;
+ }
+
+ .close {
+ position: absolute;
+ right: 1.5rem;
+ top: 1.5rem;
+ font-size: 2rem;
+ cursor: pointer;
+ color: #999;
+ }
+
+ .close:hover {
+ color: #333;
+ }
+
+ .modal h2 {
+ margin-bottom: 1.5rem;
+ color: #333;
+ }
+
+ .color-preview {
+ text-align: center;
+ padding: 1.5rem;
+ background: #f8f8f8;
+ border-radius: 8px;
+ margin-bottom: 1.5rem;
+ }
+
+ .color-preview img {
+ width: 200px;
+ height: 200px;
+ border-radius: 8px;
+ object-fit: cover;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+ }
+
+ .color-preview span {
+ display: block;
+ margin-top: 1rem;
+ font-weight: 600;
+ color: #333;
+ }
+
+ .form-group {
+ margin-bottom: 1.5rem;
+ }
+
+ .form-group label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+ color: #333;
+ }
+
+ .form-group input,
+ .form-group select,
+ .form-group textarea {
+ width: 100%;
+ padding: 0.75rem;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ font-size: 1rem;
+ font-family: inherit;
+ }
+
+ .form-group textarea {
+ min-height: 120px;
+ resize: vertical;
+ }
+
+ .submit-btn {
+ width: 100%;
+ background: #DDAB1E;
+ color: white;
+ border: none;
+ padding: 1rem;
+ font-size: 1.1rem;
+ border-radius: 5px;
+ cursor: pointer;
+ font-weight: 600;
+ }
+
+ .submit-btn:hover {
+ background: #c4981a;
+ }
+
+ /* Authorized Dealer Badge */
+ .authorized-dealer {
+ margin-top: 2rem;
+ padding: 1rem;
+ background: rgba(0, 0, 0, 0.55);
+ border-radius: 8px;
+ border: 2px solid #DDAB1E;
+ backdrop-filter: blur(2px);
+ -webkit-backdrop-filter: blur(2px);
+ }
+
+ .authorized-dealer p {
+ color: #ffffff;
+ font-weight: 600;
+ margin: 0;
+ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
+ }
+
+ /* Specifications Section */
+ .specifications-section {
+ padding: 4rem 0;
+ background: #f8f8f8;
+ }
+
+ .specifications-section h2 {
+ text-align: center;
+ font-size: 2.5rem;
+ margin-bottom: 3rem;
+ color: #222;
+ }
+
+ .specs-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1.5rem;
+ max-width: 900px;
+ margin: 0 auto;
+ }
+
+ .spec-item {
+ display: flex;
+ justify-content: space-between;
+ padding: 1rem;
+ background: white;
+ border-radius: 8px;
+ border: 1px solid #e0e0e0;
+ }
+
+ .spec-label {
+ font-weight: 600;
+ color: #666;
+ }
+
+ .spec-value {
+ color: #333;
+ text-align: right;
+ }
+
+ /* Features Section */
+ .features-section {
+ padding: 4rem 0;
+ background: white;
+ }
+
+ .features-section h2 {
+ text-align: center;
+ font-size: 2.5rem;
+ margin-bottom: 3rem;
+ color: #222;
+ }
+
+ .features-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ }
+
+ .feature-card {
+ padding: 2rem;
+ background: #f8f8f8;
+ border-radius: 10px;
+ text-align: center;
+ transition: transform 0.3s;
+ }
+
+ .feature-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+ }
+
+ .feature-card h3 {
+ margin-bottom: 1rem;
+ color: #333;
+ font-size: 1.3rem;
+ }
+
+ .feature-card p {
+ color: #666;
+ line-height: 1.6;
+ }
+
+ /* Installation Section */
+ .installation-section {
+ padding: 4rem 0;
+ background: #f0f0f0;
+ }
+
+ .installation-section h2 {
+ text-align: center;
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ color: #222;
+ }
+
+ .info-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-bottom: 3rem;
+ }
+
+ .info-card-link {
+ text-decoration: none;
+ display: block;
+ transition: transform 0.3s;
+ }
+
+ .info-card-link:hover {
+ transform: translateY(-5px);
+ }
+
+ .info-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ transition: box-shadow 0.3s, border-color 0.3s;
+ border: 2px solid transparent;
+ height: 100%;
+ cursor: pointer;
+ }
+
+ .info-card:hover {
+ box-shadow: 0 5px 20px rgba(0,0,0,0.15);
+ border-color: #DDAB1E;
+ }
+
+ .info-card h3 {
+ margin-bottom: 1rem;
+ color: #333;
+ font-size: 1.2rem;
+ }
+
+ .info-card p {
+ color: #666;
+ line-height: 1.6;
+ margin-bottom: 1rem;
+ }
+
+ .card-arrow {
+ color: #DDAB1E;
+ font-weight: 600;
+ display: inline-block;
+ transition: margin-left 0.3s;
+ }
+
+ .info-card:hover .card-arrow {
+ margin-left: 5px;
+ }
+
+ .care-highlight {
+ background: white;
+ padding: 2.5rem;
+ border-radius: 10px;
+ max-width: 800px;
+ margin: 0 auto;
+ text-align: center;
+ border: 2px solid #DDAB1E;
+ }
+
+ .care-highlight h3 {
+ color: #333;
+ margin-bottom: 1rem;
+ font-size: 1.5rem;
+ }
+
+ .care-highlight p {
+ color: #666;
+ line-height: 1.8;
+ }
+
+ /* Footer */
+ footer {
+ background: #222;
+ color: white;
+ padding: 3rem 0 1rem;
+ }
+
+ .footer-content {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-bottom: 2rem;
+ }
+
+ .footer-section h3 {
+ margin-bottom: 1rem;
+ color: #DDAB1E;
+ }
+
+ .footer-section p {
+ opacity: 0.9;
+ margin-bottom: 0.5rem;
+ line-height: 1.6;
+ }
+
+ .footer-section ul {
+ list-style: none;
+ }
+
+ .footer-section ul li {
+ margin-bottom: 0.5rem;
+ }
+
+ .footer-section ul li a {
+ color: white;
+ text-decoration: none;
+ opacity: 0.9;
+ transition: opacity 0.3s;
+ }
+
+ .footer-section ul li a:hover {
+ opacity: 1;
+ color: #DDAB1E;
+ }
+
+ .authorized {
+ background: rgba(221, 171, 30, 0.2);
+ padding: 0.5rem;
+ border-radius: 5px;
+ font-size: 0.9rem;
+ }
+
+ .footer-sample-btn {
+ background: #DDAB1E;
+ color: white;
+ border: none;
+ padding: 0.75rem 1.5rem;
+ font-size: 1rem;
+ border-radius: 5px;
+ cursor: pointer;
+ margin-top: 1rem;
+ transition: background 0.3s;
+ }
+
+ .footer-sample-btn:hover {
+ background: #c4981a;
+ }
+
+ .footer-bottom {
+ text-align: center;
+ padding-top: 2rem;
+ border-top: 1px solid rgba(255,255,255,0.1);
+ opacity: 0.7;
+ }
+
+ /* Mobile Styles */
+ @media (max-width: 768px) {
+ .mobile-toggle {
+ display: flex;
+ }
+
+ .nav-menu {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ background: white;
+ flex-direction: column;
+ padding: 1rem;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ }
+
+ .nav-menu.active {
+ display: flex;
+ }
+
+ .hero h2 {
+ font-size: 2rem;
+ }
+
+ .colors-grid {
+ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+ gap: 1rem;
+ }
+
+ .color-swatch {
+ height: 80px;
+ }
+
+ .modal-content {
+ margin: 20px;
+ width: calc(100% - 40px);
+ }
+
+ .color-preview img {
+ width: 150px;
+ height: 150px;
+ }
+
+ .specs-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .features-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .info-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .footer-content {
+ grid-template-columns: 1fr;
+ text-align: center;
+ }
+
+ .authorized-dealer {
+ margin-top: 1.5rem;
+ padding: 0.75rem;
+ }
+
+ .care-highlight {
+ padding: 1.5rem;
+ }
+
+ .specifications-section,
+ .features-section,
+ .installation-section {
+ padding: 2rem 0;
+ }
+
+ .specifications-section h2,
+ .features-section h2,
+ .installation-section h2 {
+ font-size: 2rem;
+ }
+ }
+ </style>
+</head>
+<body>
+ <div class="contact-bar">
+ <div class="contact-bar-inner">
+ <a class="cb-link" href="tel:888-373-4564" aria-label="Call DesignerWallcoverings">
+ <span class="cb-ico">📞</span><span class="cb-text">(888) 373-4564</span>
+ </a>
+ <a class="cb-link" href="mailto:info@DesignerWallcoverings.com">
+ <span class="cb-ico">✉️</span><span class="cb-text">info@DesignerWallcoverings.com</span>
+ </a>
+ <span class="cb-link cb-static">
+ <span class="cb-ico">🏬</span><span class="cb-text">Trade Pricing & Free Samples</span>
+ </span>
+ <button class="cb-cta" onclick="openModal()">Request Sample</button>
+ </div>
+ </div>
+ <header>
+ <nav class="navbar">
+ <div class="nav-container">
+ <div class="logo">
+ <h1>Novasuede™</h1>
+ </div>
+ <button class="mobile-toggle" id="mobileToggle" onclick="toggleMobileMenu()">
+ <span></span>
+ <span></span>
+ <span></span>
+ </button>
+ <ul class="nav-menu" id="navMenu">
+ <li><a href="#home">Home</a></li>
+ <li><a href="#colors">Colors</a></li>
+ <li><a href="#specifications">Specifications</a></li>
+ <li><a href="#features">Features</a></li>
+ <li><a href="fire-ratings.html">Fire Ratings</a></li>
+ </ul>
+ </div>
+ </nav>
+ </header>
+
+ <section id="home" class="hero">
+ <div class="curtain curtain-left"></div>
+ <div class="curtain curtain-right"></div>
+ <div class="hero-content">
+ <a href="#colors" onclick="event.preventDefault();document.getElementById("colors").scrollIntoView({behavior:"smooth"});" style="cursor:pointer;display:inline-block;text-decoration:none;"><img class="enter-novasuede-logo" src="images/logo-novasuede-sign.png?v=2" alt="Enter Novasuede" /></a>
+ <h2>The Luxurious Look and Feel of Fine Kid Suede</h2>
+ <p>Novasuede™ provides the aesthetic of expensive suede plus exceptional performance. This specially engineered material is lightweight and strong, illustrating the ingenuity within the design.</p>
+ <button class="sample-btn" onclick="openModal()">Request Sample</button>
+ <div class="authorized-dealer">
+ <p>DesignerWallcoverings.com is an authorized dealer of Novasuede™ products</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="new-arrivals" class="new-arrivals-section">
+ <div class="container">
+ <div class="new-arrivals-header">
+ <h2>New Arrivals — 2026</h2>
+ <span class="new-arrivals-pill">36 fresh colors</span>
+ </div>
+ <p class="section-subtitle">Brand-new shades just released. Click <strong>Drapery</strong> to dress the page in any of them, or <strong>Sample</strong> to request a free swatch.</p>
+ <div class="colors-grid" id="newArrivalsGrid"></div>
+ </div>
+ </section>
+
+ <section id="colors" class="colors-section">
+ <div class="container">
+ <h2>Our Color Collection</h2>
+ <p class="section-subtitle">Choose from our collection of 118 premium colors</p>
+ <div class="color-search">
+ <input type="text" id="colorSearch" placeholder="Search colors by name or code..." onkeyup="filterColors()">
+ </div>
+ <div class="color-filters">
+ <button type="button" class="color-filter-btn active" data-filter="all" onclick="setColorFilter('all')">All</button>
+ <button type="button" class="color-filter-btn" data-filter="new" onclick="setColorFilter('new')">NEW (2026)</button>
+ <button type="button" class="color-filter-btn" data-filter="legacy" onclick="setColorFilter('legacy')">Classic</button>
+ <span id="color-count" class="color-count"></span>
+ <span class="ns-toolbar">
+ <label class="ns-ctrl">Sort
+ <select id="nsSort" onchange="setSort(this.value)">
+ <option value="color-light">Color · light → dark</option>
+ <option value="color-dark">Color · dark → light</option>
+ <option value="name-asc">Name A→Z</option>
+ <option value="name-desc">Name Z→A</option>
+ <option value="code-asc">Code A→Z</option>
+ <option value="new-first">NEW first</option>
+ <option value="random">Random</option>
+ </select>
+ </label>
+ <label class="ns-ctrl">Cols
+ <input type="range" id="nsCols" min="4" max="12" step="1" value="6" oninput="setCols(this.value)" />
+ <span id="nsColsVal">6</span>
+ </label>
+ </span>
+ </div>
+ <div class="colors-grid" id="colorsGrid">
+ <!-- Colors will be populated here -->
+ </div>
+ </div>
+ </section>
+
+ <section id="specifications" class="specifications-section">
+ <div class="container">
+ <h2>Product Specifications</h2>
+ <div class="specs-grid">
+ <div class="spec-item">
+ <span class="spec-label">Composition</span>
+ <span class="spec-value">100% Nylon Fiber Matrix</span>
+ </div>
+ <div class="spec-item">
+ <span class="spec-label">Width</span>
+ <span class="spec-value">53-54"</span>
+ </div>
+ <div class="spec-item">
+ <span class="spec-label">Weight</span>
+ <span class="spec-value">8.85 oz/yd</span>
+ </div>
+ <div class="spec-item">
+ <span class="spec-label">Type</span>
+ <span class="spec-value">Microfiber Suede</span>
+ </div>
+ <div class="spec-item">
+ <span class="spec-label">Abrasion</span>
+ <span class="spec-value">100,000 Double Rubs Wyzenbeek</span>
+ </div>
+ <div class="spec-item">
+ <span class="spec-label">Flammability</span>
+ <span class="spec-value">Cal 117, UFAC Class I, NFPA 260</span>
+ </div>
+ <div class="spec-item">
+ <span class="spec-label">Common Uses</span>
+ <span class="spec-value">Upholstery, Wallcovering, Panel</span>
+ </div>
+ <div class="spec-item">
+ <span class="spec-label">Colors Available</span>
+ <span class="spec-value">118 Premium Colors</span>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section id="features" class="features-section">
+ <div class="container">
+ <h2>Features of Novasuede™</h2>
+ <div class="features-grid">
+ <div class="feature-card">
+ <h3>✨ Proprietary Construction</h3>
+ <p>Specially engineered material that is lightweight and strong</p>
+ </div>
+ <div class="feature-card">
+ <h3>🎨 Beautiful Authentic Look</h3>
+ <p>Luxurious look and feel of expensive kid suede</p>
+ </div>
+ <div class="feature-card">
+ <h3>💨 Breathable Like Leather</h3>
+ <p>Natural ability to breathe, comfortable in any season</p>
+ </div>
+ <div class="feature-card">
+ <h3>🎯 Custom Colors Available</h3>
+ <p>Small minimums apply for custom color options</p>
+ </div>
+ <div class="feature-card">
+ <h3>🔧 Custom Embossing</h3>
+ <p>Available for unique design requirements</p>
+ </div>
+ <div class="feature-card">
+ <h3>🌿 No Plasticizers</h3>
+ <p>No off-gassing for healthier environments</p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section id="installation" class="installation-section">
+ <div class="container">
+ <h2>Installation & Care</h2>
+ <p class="section-subtitle">Professional guidance for perfect results</p>
+
+ <div class="info-grid">
+ <a href="installation.html" class="info-card-link">
+ <div class="info-card">
+ <h3>📐 Wallcovering Installation</h3>
+ <p>Professional installation techniques for seamless application of Novasuede™ wallcovering.</p>
+ <span class="card-arrow">View Guide →</span>
+ </div>
+ </a>
+
+ <a href="cutting.html" class="info-card-link">
+ <div class="info-card">
+ <h3>✂️ Cutting Guidelines</h3>
+ <p>Proper cutting techniques to ensure precise measurements and clean edges.</p>
+ <span class="card-arrow">View Guide →</span>
+ </div>
+ </a>
+
+ <a href="cleaning.html" class="info-card-link">
+ <div class="info-card">
+ <h3>🧹 Cleaning & Maintenance</h3>
+ <p>Easy-to-follow cleaning instructions to maintain the beauty of your Novasuede™.</p>
+ <span class="card-arrow">View Chart →</span>
+ </div>
+ </a>
+
+ <a href="faq.html" class="info-card-link">
+ <div class="info-card">
+ <h3>❓ Common Questions</h3>
+ <p>Answers to frequently asked questions about Novasuede™ care and maintenance.</p>
+ <span class="card-arrow">View FAQ →</span>
+ </div>
+ </a>
+
+ <a href="fire-ratings.html" class="info-card-link">
+ <div class="info-card">
+ <h3>🔥 Fire Ratings</h3>
+ <p>Comprehensive fire safety information and flammability test results for Novasuede™.</p>
+ <span class="card-arrow">View Details →</span>
+ </div>
+ </a>
+ </div>
+
+ <div class="care-highlight">
+ <h3>Easy to Clean & Maintain</h3>
+ <p>Novasuede's™ soft surface has the appeal of stylish and elegant supple, nubuck leather. Due to its unique composition, this suede-like material is easy to clean. It's comfortable to sit on in any season due to its natural ability to breathe.</p>
+ </div>
+ </div>
+ </section>
+
+ <footer>
+ <div class="container">
+ <div class="footer-content">
+ <div class="footer-section">
+ <h3>Novasuede™</h3>
+ <p>Premium microfiber suede for upholstery, wallcovering, and panels</p>
+ <p class="authorized">DesignerWallcoverings.com is an authorized dealer of Novasuede™ products</p>
+ </div>
+ <div class="footer-section">
+ <h3>Contact</h3>
+ <p>Email: info@DesignerWallcoverings.com</p>
+ <button class="footer-sample-btn" onclick="openModal()">Request Sample</button>
+ </div>
+ <div class="footer-section">
+ <h3>Quick Links</h3>
+ <ul>
+ <li><a href="#colors">Colors</a></li>
+ <li><a href="#specifications">Specifications</a></li>
+ <li><a href="#features">Features</a></li>
+ <li><a href="fire-ratings.html">Fire Ratings</a></li>
+ <li><a href="#installation">Installation</a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="footer-bottom">
+ <p>© 2025 Novasuede.com. All rights reserved.</p>
+ </div>
+ </div>
+ </footer>
+
+ <!-- Contact Modal -->
+ <div id="contactModal" class="modal">
+ <div class="modal-content">
+ <span class="close" onclick="closeModal()">×</span>
+ <h2>Request a Sample</h2>
+ <div class="color-preview">
+ <img id="colorPreviewImage" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect width='200' height='200' fill='%23ddd'/%3E%3C/svg%3E" alt="Color Preview">
+ <span id="colorPreviewName">Select a color below</span>
+ <div class="form-group">
+ <label for="selectedColor">Selected Color*</label>
+ <select id="selectedColor" name="selectedColor" onchange="updatePreview()" required>
+ <option value="">Choose a color...</option>
+ </select>
+ </div>
+ </div>
+ <form id="contactForm" onsubmit="handleSubmit(event)" method="POST">
+ <div class="form-group">
+ <label>Full Name*
+ <input type="text" name="name" required>
+ </label>
+ </div>
+ <div class="form-group">
+ <label>Your email*
+ <input type="email" name="email" required>
+ </label>
+ </div>
+ <div class="form-group">
+ <label>Company
+ <input type="text" name="company">
+ </label>
+ </div>
+ <div class="form-group">
+ <label>Shipping Address*
+ <input type="text" name="address" required>
+ </label>
+ </div>
+ <div class="form-group">
+ <label>City*
+ <input type="text" name="city" required>
+ </label>
+ </div>
+ <div class="form-group">
+ <label>State*
+ <input type="text" name="state" required maxlength="2" placeholder="e.g. CA">
+ </label>
+ </div>
+ <div class="form-group">
+ <label>ZIP Code*
+ <input type="text" name="zip" required pattern="[0-9]{5}(-[0-9]{4})?" placeholder="12345">
+ </label>
+ </div>
+ <div class="form-group">
+ <label>Selected Color
+ <input type="text" name="color" id="selectedColorInput" readonly>
+ </label>
+ </div>
+ <div class="form-group">
+ <label>Your message / Project Details*
+ <textarea name="message" required rows="5" style="width: 100%; resize: vertical;" placeholder="Please describe your project needs..."></textarea>
+ </label>
+ </div>
+ <button type="submit" class="submit-btn">Send Sample Request</button>
+ </form>
+ </div>
+ </div>
+
+ <script>
+ // Complete Novasuede Colors Data
+ // NEW (2026-04) colors at top, alphabetically. Legacy list follows below.
+ var colors = [
+ // --- NEW: latest-drop colors, alphabetical ---
+ {name: "Amber", code: "T3Q8W", isNew: true},
+ {name: "Blank Slate", code: "T3L0W", isNew: true},
+ {name: "Bliss", code: "T3Q7W", isNew: true},
+ {name: "Blush Rose", code: "T3RFW", isNew: true},
+ {name: "Cement", code: "T3LAW", isNew: true},
+ {name: "Colonial Blue", code: "T3C9W", isNew: true},
+ {name: "Dusty Ranch", code: "T3FAW", isNew: true},
+ {name: "Dusty Teal", code: "T3NGW", isNew: true},
+ {name: "Fire", code: "T3QAW", isNew: true},
+ {name: "Flagstone", code: "T3LKW", isNew: true},
+ {name: "Henna", code: "T3G3W", isNew: true},
+ {name: "Kiva", code: "T3ECW", isNew: true},
+ {name: "Lipstick", code: "T3M4W", isNew: true},
+ {name: "Noir", code: "T3A2W", isNew: true},
+ {name: "Opal", code: "T3PQW", isNew: true},
+ {name: "Pastel Blue", code: "T3N0W", isNew: true},
+ {name: "Pastel Pink", code: "T3R6W", isNew: true},
+ {name: "Persimmon", code: "T3M8W", isNew: true},
+ {name: "Pink Lace", code: "T3RCW", isNew: true},
+ {name: "Port Blue", code: "T3NJW", isNew: true},
+ {name: "Raisin", code: "T3PRW", isNew: true},
+ {name: "Rosewater", code: "T3RSW", isNew: true},
+ {name: "Royal Blue", code: "T3CCW", isNew: true},
+ {name: "Sedona", code: "T3Q9W", isNew: true},
+ {name: "Shale", code: "T3KDW", isNew: true},
+ {name: "Snow", code: "T3B3W", isNew: true},
+ {name: "Spruce", code: "T3PYW", isNew: true},
+ {name: "Terracotta", code: "T3FCW", isNew: true},
+ {name: "Thistle", code: "T3PMW", isNew: true},
+ {name: "Tusk", code: "T3DJW", isNew: true},
+ {name: "Umber", code: "T3G4W", isNew: true},
+ {name: "Verdigris", code: "T3NHW", isNew: true},
+ {name: "Vermilion", code: "T3MBW", isNew: true},
+ {name: "Wheat", code: "T3FDW", isNew: true},
+ {name: "Winter White", code: "T3B2W", isNew: true},
+ {name: "Woodland", code: "T3H6W", isNew: true},
+ // --- Legacy catalog, alphabetical ---
+ {name: "Acorn", code: "T3H5W"},
+ {name: "Adobe", code: "T3K6W"},
+ {name: "African Violet", code: "T3SAW"},
+ {name: "Apricot", code: "T3Q4W"},
+ {name: "Arrow Wood", code: "T3F8W"},
+ {name: "Aubergine", code: "T3SCW"},
+ {name: "Baltic", code: "T3L6W"},
+ {name: "Beige", code: "T3E8W"},
+ {name: "Biscuit", code: "T3DHW"},
+ {name: "Black", code: "T3BLW"},
+ {name: "Bluestone", code: "T3N7W"},
+ {name: "Blush Pink", code: "T3C7W"},
+ {name: "Bone", code: "T3DSW"},
+ {name: "Brown", code: "T3F6W"},
+ {name: "Buff", code: "T3D1W"},
+ {name: "Buttercup", code: "T3DEW"},
+ {name: "Cane", code: "T3D3W"},
+ {name: "Carbon", code: "T3C6W"},
+ {name: "Cashew", code: "T3D2W"},
+ {name: "Cashmere", code: "T3E6W"},
+ {name: "Celadon", code: "T3P1W"},
+ {name: "Celery", code: "T3PFW"},
+ {name: "Champagne", code: "T3D4W"},
+ {name: "China Blue", code: "T3NBW"},
+ {name: "Chrome Grey", code: "T3PJW"},
+ {name: "Cinder", code: "T3LCW"},
+ {name: "Cloud", code: "T3L4W"},
+ {name: "Cocoa", code: "T315W"},
+ {name: "Coral", code: "T3Q3W"},
+ {name: "Cottage Grey", code: "T3LGW"},
+ {name: "Cream", code: "T3D9W"},
+ {name: "Cypress", code: "T3PHW"},
+ {name: "Dark Sand", code: "T3EAW"},
+ {name: "Dew", code: "T3F3W"},
+ {name: "Dove", code: "T3E2W"},
+ {name: "Dune", code: "T3F4W"},
+ {name: "Dusty Rose", code: "T3R2W"},
+ {name: "Ecru", code: "T3K4W"},
+ {name: "Fawn", code: "T3E4W"},
+ {name: "French Blue", code: "T3NCW"},
+ {name: "Gainsborough", code: "T3LLW"},
+ {name: "Garnet", code: "T3J6W"},
+ {name: "Gelato", code: "T3D7W"},
+ {name: "Gold", code: "T3J9W"},
+ {name: "Goldstone", code: "T3F1W"},
+ {name: "Granite", code: "T3LOW"},
+ {name: "Grape", code: "TES8W"},
+ {name: "Gray", code: "T3L3W"},
+ {name: "Green", code: "T3P5W"},
+ {name: "Green Marble", code: "T3P4W"},
+ {name: "Greystone", code: "T3LNW"},
+ {name: "Harvest", code: "T3E9W"},
+ {name: "Honey", code: "T3DDW"},
+ {name: "Hyacinth", code: "T3S2W"},
+ {name: "Iceberg", code: "T3LHW"},
+ {name: "Indigo", code: "T3C3W"},
+ {name: "Ivory", code: "T3E3W"},
+ {name: "Jade", code: "T3P6W"},
+ {name: "Java", code: "T3H4W"},
+ {name: "Latte", code: "T3E3W"},
+ {name: "Lavender", code: "T3S3W"},
+ {name: "Light Amethyst", code: "T3S6W"},
+ {name: "Light Camel", code: "T3E5W"},
+ {name: "Light Grey", code: "T3L7W"},
+ {name: "Lilac", code: "T3RAW"},
+ {name: "Lime", code: "T3PEW"},
+ {name: "Linen", code: "T3D6W"},
+ {name: "Madison Grey", code: "T3L1W"},
+ {name: "Maize", code: "T3O3W"},
+ {name: "Marine Blue", code: "T3N1W"},
+ {name: "Maroon", code: "T3JAW"},
+ {name: "Mauve", code: "T3S1W"},
+ {name: "Meadow", code: "T3PIW"},
+ {name: "Melon", code: "T3Q6W"},
+ {name: "Milk", code: "T3DQW"},
+ {name: "Mint", code: "T3PAW"},
+ {name: "Mint Julip", code: "T3P5W"},
+ {name: "Mist", code: "T3DDW"},
+ {name: "Misty Dew", code: "T3PLW"},
+ {name: "Mocha", code: "T3H7W"},
+ {name: "Moss", code: "T3L3W"},
+ {name: "Mushroom", code: "T3K1W"},
+ {name: "Navy", code: "T3NAW"},
+ {name: "Newport", code: "T3C2W"},
+ {name: "Nutmeg", code: "T3F9W"},
+ {name: "Ocean", code: "T3POW"},
+ {name: "Olive", code: "T3PEW"},
+ {name: "Orange", code: "T3Q2W"},
+ {name: "Oyster", code: "T3EBW"},
+ {name: "Pale Green", code: "T3P8W"},
+ {name: "Passion Blue", code: "T3NAW"},
+ {name: "Peach", code: "T3Q2W"},
+ {name: "Pebble", code: "T3K2W"},
+ {name: "Peppermint", code: "T3R4W"},
+ {name: "Peridot", code: "T3P7W"},
+ {name: "Periwinkle", code: "T3N6W"},
+ {name: "Pistachio", code: "T3P6W"},
+ {name: "Plum Pleasure", code: "T3S5W"},
+ {name: "Porcelain", code: "T3DAW"},
+ {name: "Powder Grey", code: "T3E5W"},
+ {name: "Prairie", code: "T3KCW"},
+ {name: "Putty", code: "T3K3W"},
+ {name: "Raffia", code: "T3D5W"},
+ {name: "Red", code: "T3R8W"},
+ {name: "Rose", code: "T3R4W"},
+ {name: "Royal Purple", code: "T3S4W"},
+ {name: "Ruby", code: "T3R6W"},
+ {name: "Sable", code: "T3F7W"},
+ {name: "Safari", code: "T3E7W"},
+ {name: "Saffron", code: "T3O2W"},
+ {name: "Sage", code: "T3P3W"},
+ {name: "Salt", code: "T3DBW"},
+ {name: "Sand", code: "T3D8W"},
+ {name: "Sandalwood", code: "T3F5W"},
+ {name: "Scarlet Wine", code: "T3R5W"},
+ {name: "Sea Blue", code: "T3N9W"},
+ {name: "Sea Grass", code: "T3P2W"},
+ {name: "Sea Breeze", code: "T3N8W"},
+ {name: "Seafoam", code: "T3N3W"},
+ {name: "Sienna", code: "T3Q7W"},
+ {name: "Silver", code: "T3LEW"},
+ {name: "Sky Blue", code: "T3N5W"},
+ {name: "Smoke", code: "T3L5W"},
+ {name: "Soft Clay", code: "T3K7W"},
+ {name: "Solar Yellow", code: "T3O1W"},
+ {name: "Spice", code: "T3K1W"},
+ {name: "Steel", code: "T3LBW"},
+ {name: "Stone Grey", code: "T3L2W"},
+ {name: "Stone Taupe", code: "T3K8W"},
+ {name: "Storm", code: "T3LHW"},
+ {name: "Straw", code: "T3DCW"},
+ {name: "Strong White", code: "T3DAW"},
+ {name: "Sugar Plum", code: "T3S7W"},
+ {name: "Sweet Lilac", code: "T3S1W"},
+ {name: "Tan", code: "T3E1W"},
+ {name: "Tarragon", code: "T3PGW"},
+ {name: "Taupe", code: "T3K9W"},
+ {name: "Thyme", code: "T3PDW"},
+ {name: "Trench", code: "T3F2W"},
+ {name: "Vanilla", code: "T3D5W"},
+ {name: "White", code: "T3WHW"},
+ ];
+
+ // Mobile menu toggle
+ function toggleMobileMenu() {
+ var menu = document.getElementById('navMenu');
+ if (menu.className.indexOf('active') === -1) {
+ menu.className = 'nav-menu active';
+ } else {
+ menu.className = 'nav-menu';
+ }
+ }
+
+ // Modal functions
+ function openModal() {
+ document.getElementById('contactModal').style.display = 'block';
+ populateDropdown();
+ }
+
+ function closeModal() {
+ document.getElementById('contactModal').style.display = 'none';
+ }
+
+ // Populate color dropdown
+ function populateDropdown() {
+ var select = document.getElementById('selectedColor');
+ if (select.options.length > 1) return;
+
+ for (var i = 0; i < colors.length; i++) {
+ var option = document.createElement('option');
+ option.value = 'Novasuede-' + colors[i].name;
+ option.text = 'Novasuede-' + colors[i].name + ' - ' + colors[i].code;
+ select.appendChild(option);
+ }
+ }
+
+ // Update preview when color selected
+ function updatePreview() {
+ var select = document.getElementById('selectedColor');
+ var preview = document.getElementById('colorPreviewName');
+ var img = document.getElementById('colorPreviewImage');
+ var colorInput = document.getElementById('selectedColorInput');
+
+ if (select.value) {
+ preview.textContent = select.value;
+ if (colorInput) {
+ colorInput.value = select.value;
+ }
+ // Remove "Novasuede-" prefix for image filename
+ var colorName = select.value.replace('Novasuede-', '');
+ var fileName = colorName.toLowerCase().replace(/ /g, '-');
+ img.src = '/images/colors/novasuede-' + fileName + '.jpg';
+ img.onerror = function() {
+ this.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200"%3E%3Crect width="200" height="200" fill="%23' + getColorHex(colorName) + '"/%3E%3C/svg%3E';
+ };
+ }
+ }
+
+ // Get color hex
+ function getColorHex(name) {
+ var colorMap = {
+ 'Black': '000000', 'White': 'FFFFFF', 'Gray': '808080',
+ 'Red': 'CC0000', 'Blue': '0066CC', 'Green': '008800',
+ 'Brown': '654321', 'Beige': 'F5DEB3', 'Cream': 'FFFDD0',
+ 'Navy': '000080', 'Gold': 'FFD700', 'Silver': 'C0C0C0'
+ };
+ return colorMap[name] || 'CCCCCC';
+ }
+
+
+ // ─── SORT + DENSITY (CLAUDE.md "every grid needs sort + density" rule) ───
+ // Hardcoded best-guess hex per color name. Tunable — fine-tune by sampling actual swatch
+ // images later. Sort-by-luminance uses these for light→dark / dark→light ordering.
+ var NAME_HEX = {
+ "Acorn":"#7e5a3c","Adobe":"#a6694b","African Violet":"#8a4f88","Amber":"#d4a04a","Apricot":"#f4b78a","Arrow Wood":"#7a5a3a","Aubergine":"#523040","Baltic":"#5b6a7a",
+ "Beige":"#e6d8be","Biscuit":"#dec79a","Black":"#1a1a1a","Blank Slate":"#bfb8a8","Bliss":"#f3e3d0","Bluestone":"#5d7686","Blush Pink":"#f1c2c0","Blush Rose":"#e6a9af",
+ "Bone":"#ede4d3","Brown":"#5b3a25","Buff":"#d6b78a","Buttercup":"#f5d97a","Cane":"#c8a172","Carbon":"#3e3e3e","Cashew":"#bfa17a","Cashmere":"#d8c2a3","Celadon":"#a6c4ae",
+ "Celery":"#bdc88a","Cement":"#a39a8b","Champagne":"#ead9b8","China Blue":"#4f6f8c","Chrome Grey":"#9aa1a4","Cinder":"#3a3633","Cloud":"#dce0e2","Cocoa":"#5b3a2c",
+ "Colonial Blue":"#4d6b89","Coral":"#f08070","Cottage Grey":"#a3a39a","Cream":"#f3e8d0","Cypress":"#4f5f48","Dark Sand":"#a89070","Dew":"#cfe0d6","Dove":"#bfb6ad",
+ "Dune":"#bfa37c","Dusty Ranch":"#b08960","Dusty Rose":"#c69594","Dusty Teal":"#5e8a8a","Ecru":"#dccfb6","Fawn":"#a98c6b","Fire":"#a8281c","Flagstone":"#6a6e6e",
+ "French Blue":"#5d7da3","Gainsborough":"#9aa3a5","Garnet":"#7a1a26","Gelato":"#f1d4cf","Gold":"#d4a017","Goldstone":"#a07735","Granite":"#5e5e5e","Grape":"#5a3a6a",
+ "Gray":"#888888","Green":"#3a6e3a","Green Marble":"#5d7d52","Greystone":"#6a6a66","Harvest":"#a07033","Henna":"#8c422a","Honey":"#d09a3a","Hyacinth":"#7a6da8",
+ "Ivory":"#efe6cf","Jade":"#3f8870","Java":"#3e2a1f","Kiva":"#8a5a3e","Latte":"#bfa07a","Lavender":"#aea3cc","Light Amethyst":"#bfa5cf","Light Camel":"#cfae84",
+ "Light Grey":"#cfcfcf","Lilac":"#c5a8d2","Lime":"#bcd34a","Linen":"#e6dac3","Lipstick":"#b22247","Madison Grey":"#7a7a7a","Maize":"#e0c870","Marine Blue":"#26486b",
+ "Maroon":"#5a1f23","Mauve":"#a98090","Meadow":"#789e63","Melon":"#f0a075","Milk":"#f3ece2","Mint":"#a7d6c0","Mint Julip":"#b8d4b3","Mist":"#d6dada","Misty Dew":"#b8c5be",
+ "Mocha":"#6e4830","Moss":"#5b6e3a","Mushroom":"#9c8b73","Navy":"#1f2c54","Newport":"#3a5a78","Noir":"#1a1a1a","Nutmeg":"#7e4a2e","Ocean":"#2a5a7a","Olive":"#5e6b32",
+ "Opal":"#b6c4cc","Orange":"#e07b1a","Oyster":"#bfae90","Pale Green":"#bcd2a3","Passion Blue":"#2a3f6e","Pastel Blue":"#b3cfe5","Pastel Pink":"#f3c8cf","Peach":"#f0b78a",
+ "Pebble":"#9c948a","Peppermint":"#b3d6c4","Peridot":"#9eb050","Periwinkle":"#8090c8","Persimmon":"#c95a2c","Pink Lace":"#f1c5cd","Pistachio":"#b4cc99",
+ "Plum Pleasure":"#5e3a4a","Porcelain":"#f0eadd","Port Blue":"#26405e","Powder Grey":"#c2c4c5","Prairie":"#a07b4f","Putty":"#bca887","Raffia":"#d6c4a3","Raisin":"#3e2a35",
+ "Red":"#a82424","Rose":"#d57a87","Rosewater":"#f0c8c8","Royal Blue":"#1a3a8a","Royal Purple":"#4a2466","Ruby":"#8a1a36","Sable":"#3e2a1f","Safari":"#9a7e52",
+ "Saffron":"#e0a020","Sage":"#9aa888","Salt":"#efe8de","Sand":"#d4c08a","Sandalwood":"#b08a5a","Scarlet Wine":"#6e1a26","Sea Blue":"#3a6a8a","Sea Breeze":"#b3cfd9",
+ "Sea Grass":"#6e9a73","Seafoam":"#a3d3c4","Sedona":"#a05a3a","Shale":"#5a5e5e","Sienna":"#8e4a2a","Silver":"#c0c0c0","Sky Blue":"#9ec3da","Smoke":"#7a7a7a",
+ "Snow":"#f5f5f5","Soft Clay":"#b4937c","Solar Yellow":"#f0c020","Spice":"#9c4a26","Spruce":"#3a5a3a","Steel":"#5e6e7a","Stone Grey":"#8a8a86","Stone Taupe":"#9c8a73",
+ "Storm":"#5a5e62","Straw":"#d4c07a","Strong White":"#efe9da","Sugar Plum":"#4a2a3e","Sweet Lilac":"#bfa3c2","Tan":"#bfa074","Tarragon":"#6e7e3e","Taupe":"#8e7c5e",
+ "Terracotta":"#b35a3a","Thistle":"#a89ab8","Thyme":"#5c6b3e","Trench":"#3e3a30","Tusk":"#dccfb0","Umber":"#5e3a26","Vanilla":"#f0e8d0","Verdigris":"#5a8a7a",
+ "Vermilion":"#d23a1f","Wheat":"#dec38a","White":"#ffffff","Winter White":"#f0e8d0","Woodland":"#3e4a2a"
+ };
+ function nsHex(c) { return c.hex || NAME_HEX[c.name] || '#cccccc'; }
+ function nsLuma(h) {
+ var s = (h || '#cccccc').replace('#',''); if (s.length === 3) s = s.split('').map(function(x){return x+x;}).join('');
+ var r = parseInt(s.slice(0,2),16), g = parseInt(s.slice(2,4),16), b = parseInt(s.slice(4,6),16);
+ return 0.299*r + 0.587*g + 0.114*b;
+ }
+ var NS_SORTERS = {
+ 'color-light': function(a,b){ return nsLuma(nsHex(b)) - nsLuma(nsHex(a)); },
+ 'color-dark': function(a,b){ return nsLuma(nsHex(a)) - nsLuma(nsHex(b)); },
+ 'name-asc': function(a,b){ return a.name.localeCompare(b.name); },
+ 'name-desc': function(a,b){ return b.name.localeCompare(a.name); },
+ 'code-asc': function(a,b){ return (a.code||'').localeCompare(b.code||''); },
+ 'new-first': function(a,b){ return ((b.isNew?1:0) - (a.isNew?1:0)) || a.name.localeCompare(b.name); },
+ 'random': function(){ return Math.random() - 0.5; },
+ };
+ var NS_PREFS = (function(){ try { return JSON.parse(localStorage.getItem('ns-prefs')||'{}'); } catch(e){ return {}; } })();
+ function nsSavePrefs(){ try { localStorage.setItem('ns-prefs', JSON.stringify(NS_PREFS)); } catch(e){} }
+ function setSort(mode){ NS_PREFS.sort = mode; nsSavePrefs(); loadColors(); }
+ function setCols(n){
+ NS_PREFS.cols = parseInt(n,10) || 6;
+ nsSavePrefs();
+ var grids = document.querySelectorAll('.colors-grid');
+ for (var i=0;i<grids.length;i++) grids[i].style.setProperty('--cols', String(NS_PREFS.cols));
+ var v = document.getElementById('nsColsVal'); if (v) v.textContent = NS_PREFS.cols;
+ }
+ function nsApplyInitial(){
+ // Default first-visit sort = color-light (per Steve 2026-05-07).
+ var sort = NS_PREFS.sort || 'color-light';
+ var cols = NS_PREFS.cols || 6;
+ var sel = document.getElementById('nsSort'); if (sel) sel.value = sort;
+ var rng = document.getElementById('nsCols'); if (rng) rng.value = cols;
+ var v = document.getElementById('nsColsVal'); if (v) v.textContent = cols;
+ var grids = document.querySelectorAll('.colors-grid');
+ for (var i=0;i<grids.length;i++) grids[i].style.setProperty('--cols', String(cols));
+ }
+
+ // Load colors grid
+ // Render a chip into the given grid element.
+ function renderChip(grid, color) {
+ var item = document.createElement('div');
+ item.className = 'color-item';
+ if (color.isNew) {
+ var badge = document.createElement('div');
+ badge.className = 'new-badge';
+ badge.textContent = 'NEW';
+ item.appendChild(badge);
+ }
+ var swatch = document.createElement('div');
+ swatch.className = 'color-swatch';
+ var img = document.createElement('img');
+ var fileName = color.name.toLowerCase().replace(/ /g, '-');
+ img.alt = color.name;
+ img.onerror = function() {
+ if (this && this.style) this.style.display = 'none';
+ if (this && this.parentElement) this.parentElement.style.background = '#' + getColorHex(this.alt);
+ };
+ swatch.appendChild(img);
+ // src AFTER append — so onerror always finds the parent and the parent's swatch context
+ img.src = '/images/colors/novasuede-' + fileName + '.jpg';
+ var info = document.createElement('div');
+ info.className = 'color-info';
+ var nameDiv = document.createElement('div');
+ nameDiv.className = 'color-name'; nameDiv.textContent = color.name;
+ var codeDiv = document.createElement('div');
+ codeDiv.className = 'color-code'; codeDiv.textContent = color.code;
+ info.appendChild(nameDiv); info.appendChild(codeDiv);
+ item.appendChild(swatch); item.appendChild(info);
+ var btnRow = document.createElement('div');
+ btnRow.className = 'chip-actions';
+ var drapeBtn = document.createElement('button');
+ drapeBtn.className = 'drapery-btn'; drapeBtn.type = 'button'; drapeBtn.textContent = '🪟 Drapery';
+ (function(n, im) { drapeBtn.onclick = function(e) { e.stopPropagation(); applyDraperyColor(n, im); }; })(color.name, img);
+ btnRow.appendChild(drapeBtn);
+ var sampleBtn = document.createElement('button');
+ sampleBtn.className = 'sample-btn-chip'; sampleBtn.type = 'button'; sampleBtn.textContent = '📦 Sample';
+ (function(n) { sampleBtn.onclick = function(e) { e.stopPropagation(); openModal(); setTimeout(function() { document.getElementById('selectedColor').value = 'Novasuede-' + n; updatePreview(); }, 100); }; })(color.name);
+ btnRow.appendChild(sampleBtn);
+ info.appendChild(btnRow);
+ (function(n) { item.onclick = function() { openModal(); setTimeout(function() { document.getElementById('selectedColor').value = 'Novasuede-' + n; updatePreview(); }, 100); }; })(color.name);
+ grid.appendChild(item);
+ }
+
+ function loadColors() {
+ nsApplyInitial();
+ var grid = document.getElementById('colorsGrid');
+ var newGrid = document.getElementById('newArrivalsGrid');
+ // Sorted COPY of colors based on current pref
+ var sortMode = (NS_PREFS && NS_PREFS.sort) || 'color-light';
+ var cmp = NS_SORTERS[sortMode] || NS_SORTERS['color-light'];
+ var sorted = colors.slice().sort(cmp);
+ // New arrivals section — only isNew chips, in current sort order
+ if (newGrid) {
+ newGrid.innerHTML = '';
+ for (var j = 0; j < sorted.length; j++) if (sorted[j].isNew) renderChip(newGrid, sorted[j]);
+ }
+ // Main collection — all colors, sorted
+ if (!grid) return;
+ grid.innerHTML = '';
+ for (var i = 0; i < sorted.length; i++) renderChip(grid, sorted[i]);
+ return;
+ // Below: legacy inline renderer (kept for diff-readability — never executes)
+ for (var i = 0; i < colors.length; i++) {
+ var item = document.createElement('div');
+ item.className = 'color-item';
+
+ if (colors[i].isNew) {
+ var badge = document.createElement('div');
+ badge.className = 'new-badge';
+ badge.textContent = 'NEW';
+ item.appendChild(badge);
+ }
+
+ var swatch = document.createElement('div');
+ swatch.className = 'color-swatch';
+
+ var img = document.createElement('img');
+ var fileName = colors[i].name.toLowerCase().replace(/ /g, '-');
+ img.src = '/images/colors/novasuede-' + fileName + '.jpg';
+ img.alt = colors[i].name;
+ img.onerror = function(e) {
+ this.style.display = 'none';
+ this.parentElement.style.background = '#' + getColorHex(this.alt);
+ };
+
+ swatch.appendChild(img);
+
+ var info = document.createElement('div');
+ info.className = 'color-info';
+
+ var nameDiv = document.createElement('div');
+ nameDiv.className = 'color-name';
+ nameDiv.textContent = colors[i].name;
+
+ var codeDiv = document.createElement('div');
+ codeDiv.className = 'color-code';
+ codeDiv.textContent = colors[i].code;
+
+ info.appendChild(nameDiv);
+ info.appendChild(codeDiv);
+
+ item.appendChild(swatch);
+ item.appendChild(info);
+
+ // Two action buttons per chip: Drapery (recolor whole page background)
+ // and Sample (open the contact modal pre-filled with this color).
+ var btnRow = document.createElement('div');
+ btnRow.className = 'chip-actions';
+
+ var drapeBtn = document.createElement('button');
+ drapeBtn.className = 'drapery-btn';
+ drapeBtn.type = 'button';
+ drapeBtn.textContent = '🪟 Drapery';
+ (function(colorName, swatchImg) {
+ drapeBtn.onclick = function(e) {
+ e.stopPropagation();
+ applyDraperyColor(colorName, swatchImg);
+ };
+ })(colors[i].name, img);
+ btnRow.appendChild(drapeBtn);
+
+ var sampleBtn = document.createElement('button');
+ sampleBtn.className = 'sample-btn-chip';
+ sampleBtn.type = 'button';
+ sampleBtn.textContent = '📦 Sample';
+ (function(colorName) {
+ sampleBtn.onclick = function(e) {
+ e.stopPropagation();
+ openModal();
+ setTimeout(function() {
+ document.getElementById('selectedColor').value = 'Novasuede-' + colorName;
+ updatePreview();
+ }, 100);
+ };
+ })(colors[i].name);
+ btnRow.appendChild(sampleBtn);
+
+ info.appendChild(btnRow);
+
+ (function(colorName) {
+ item.onclick = function() {
+ openModal();
+ setTimeout(function() {
+ document.getElementById('selectedColor').value = 'Novasuede-' + colorName;
+ updatePreview();
+ }, 100);
+ };
+ })(colors[i].name);
+
+ grid.appendChild(item);
+ }
+ }
+
+ // Sample the average color of the chip's swatch image so we don't need a
+ // hand-maintained hex table for all 118 colors. Falls back to the small
+ // colorMap in getColorHex() if the swatch hasn't loaded.
+ function sampleAverageColor(imgEl, colorName) {
+ try {
+ if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) {
+ return getColorHex(colorName);
+ }
+ var c = document.createElement('canvas');
+ c.width = 16; c.height = 16;
+ var ctx = c.getContext('2d');
+ ctx.drawImage(imgEl, 0, 0, 16, 16);
+ var d = ctx.getImageData(0, 0, 16, 16).data;
+ var r=0,g=0,b=0,n=0;
+ for (var i=0; i<d.length; i+=4) { r+=d[i]; g+=d[i+1]; b+=d[i+2]; n++; }
+ r = Math.round(r/n); g = Math.round(g/n); b = Math.round(b/n);
+ return ((1<<24)+(r<<16)+(g<<8)+b).toString(16).slice(1).toUpperCase();
+ } catch(e) {
+ return getColorHex(colorName);
+ }
+ }
+
+ // Apply the drapery: every color has a pre-rendered swag at
+ // /images/drapery-swags/<slug>.jpg (Reinhard-style luminance-preserving
+ // recolor of the hero curtain composite — generated by render-drapery-swags.js).
+ // Falls back to live in-browser canvas recolor if the pre-rendered file
+ // 404s (rare — only happens for color names that fail the slug round-trip).
+ function applyDraperyColor(colorName, swatchImg) {
+ var slug = String(colorName).toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+ // v6 — whole frame in one color (sides + center recolored together)
+ var url = '/images/drapery-swags/' + slug + '.jpg?v=6';
+ var hex = sampleAverageColor(swatchImg, colorName);
+ // Probe the pre-rendered file; if it loads, use it directly.
+ var probe = new Image();
+ probe.onload = function() { setBodyDrapery(url, hex); };
+ probe.onerror = function() {
+ console.warn('Pre-rendered drapery missing for', colorName, '→ falling back to live canvas recolor');
+ liveCanvasRecolor(hex);
+ };
+ probe.src = url;
+ }
+
+ // Fallback: if no pre-rendered swag, do the recolor in-browser. Same Reinhard
+ // luminance-preserving algorithm as render-drapery-swags.js.
+ function liveCanvasRecolor(hex) {
+ var leftUrl = '/images/left-curtain-d1.png';
+ var rightUrl = '/images/right-curtain-d1.png';
+ var splashUrl = '/images/bg-site-splash.jpg';
+ loadImg(splashUrl, function(splash) {
+ var W = 1920, H = 1080;
+ if (splash) { W = splash.naturalWidth || W; H = splash.naturalHeight || H; }
+ var canvas = document.createElement('canvas');
+ canvas.width = W; canvas.height = H;
+ var ctx = canvas.getContext('2d');
+ if (splash) ctx.drawImage(splash, 0, 0, W, H);
+ else { ctx.fillStyle = '#1a1a1a'; ctx.fillRect(0,0,W,H); }
+ var pending = 2;
+ function done() { if (--pending === 0) setBodyDrapery(canvas.toDataURL('image/jpeg', 0.85), hex); }
+ loadImg(leftUrl, function(im){ if (im) stampRecolored(ctx, im, hex, 'left', W, H); done(); });
+ loadImg(rightUrl, function(im){ if (im) stampRecolored(ctx, im, hex, 'right', W, H); done(); });
+ });
+ }
+
+ function loadImg(url, cb) {
+ var im = new Image();
+ im.crossOrigin = 'anonymous';
+ im.onload = function() { cb(im); };
+ im.onerror = function() { cb(null); };
+ im.src = url;
+ }
+
+ // HSL conversion helpers — used for pure luminance-preserving recolor
+ // (Reinhard chromaticity transfer). Matches render-drapery-swags.js exactly.
+ function _rgbToHsl(r, g, b) {
+ r/=255; g/=255; b/=255;
+ var mx=Math.max(r,g,b), mn=Math.min(r,g,b);
+ var h, s, l=(mx+mn)/2;
+ if (mx === mn) { h=0; s=0; }
+ else {
+ var d=mx-mn;
+ s = l > 0.5 ? d/(2-mx-mn) : d/(mx+mn);
+ if (mx===r) h=(g-b)/d+(g<b?6:0);
+ else if (mx===g) h=(b-r)/d+2;
+ else h=(r-g)/d+4;
+ h/=6;
+ }
+ return [h,s,l];
+ }
+ function _hslToRgb(h, s, l) {
+ var r,g,b;
+ if (s === 0) { r=g=b=l; }
+ else {
+ var hue2rgb = function(p,q,t) {
+ if (t<0) t+=1; if (t>1) t-=1;
+ if (t<1/6) return p+(q-p)*6*t;
+ if (t<1/2) return q;
+ if (t<2/3) return p+(q-p)*(2/3-t)*6;
+ return p;
+ };
+ var q = l<0.5 ? l*(1+s) : l+s-l*s;
+ var p = 2*l-q;
+ r=hue2rgb(p,q,h+1/3); g=hue2rgb(p,q,h); b=hue2rgb(p,q,h-1/3);
+ }
+ return [Math.round(r*255), Math.round(g*255), Math.round(b*255)];
+ }
+ function stampRecolored(destCtx, img, hex, side, W, H) {
+ var iw = img.naturalWidth, ih = img.naturalHeight;
+ var scale = H / ih;
+ var dw = iw * scale, dh = ih * scale;
+ var dx = side === 'left' ? 0 : (W - dw);
+ var off = document.createElement('canvas');
+ off.width = iw; off.height = ih;
+ var octx = off.getContext('2d');
+ octx.drawImage(img, 0, 0);
+ var id = octx.getImageData(0, 0, iw, ih);
+ var data = id.data;
+ var tr = parseInt(hex.slice(0,2), 16);
+ var tg = parseInt(hex.slice(2,4), 16);
+ var tb = parseInt(hex.slice(4,6), 16);
+ var th = _rgbToHsl(tr, tg, tb);
+ for (var i = 0; i < data.length; i += 4) {
+ var a = data[i+3];
+ if (a === 0) continue;
+ var sl = _rgbToHsl(data[i], data[i+1], data[i+2])[2];
+ var rgb = _hslToRgb(th[0], th[1], sl);
+ data[i] = rgb[0];
+ data[i+1] = rgb[1];
+ data[i+2] = rgb[2];
+ }
+ octx.putImageData(id, 0, 0);
+ destCtx.drawImage(off, dx, 0, dw, dh);
+ }
+
+ function setBodyDrapery(url, hex) {
+ // Body bg (visible below the hero on scroll)
+ document.body.style.backgroundImage = 'url(' + url + ')';
+ document.body.style.backgroundSize = 'cover';
+ document.body.style.backgroundPosition = 'center top';
+ document.body.style.backgroundRepeat = 'no-repeat';
+ document.body.style.backgroundAttachment = 'fixed';
+ // Hero bg — the visible drapery swap. Without this nothing changes
+ // visually because the .hero rule covers the body.
+ var hero = document.querySelector('.hero');
+ if (hero) {
+ hero.style.backgroundImage = 'url(' + url + ')';
+ hero.style.backgroundSize = 'cover';
+ hero.style.backgroundPosition = 'center top';
+ }
+ // Hide the foreground curtain divs — the pre-rendered swag already
+ // contains both curtains recolored, so leaving the originals visible
+ // would double-stack neutral curtains over the recolored ones.
+ document.querySelectorAll('.curtain').forEach(function(c){ c.style.display = 'none'; });
+ // Mark the body so subsequent sections fade their solid white bg and
+ // the swag shows through end-to-end of the page.
+ document.body.classList.add('has-drapery');
+ // Tone down the white veil over the hero so the drapery color reads true
+ var sty = document.getElementById('cncp-drapery-overlay-style');
+ if (!sty) {
+ sty = document.createElement('style');
+ sty.id = 'cncp-drapery-overlay-style';
+ sty.textContent = '.hero::before { background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.10) 100%) !important; }';
+ document.head.appendChild(sty);
+ }
+ document.documentElement.style.setProperty('--drapery-color', '#' + hex);
+ }
+
+ // Close modal on outside click
+ window.onclick = function(event) {
+ var modal = document.getElementById('contactModal');
+ if (event.target == modal) {
+ modal.style.display = 'none';
+ }
+ }
+
+ // Filter state — driven by the search box + the All/NEW/Classic chips
+ var _colorFilter = 'all';
+ function setColorFilter(f) {
+ _colorFilter = f;
+ document.querySelectorAll('.color-filter-btn').forEach(function(b){
+ b.classList.toggle('active', b.dataset.filter === f);
+ });
+ filterColors();
+ }
+ function filterColors() {
+ var q = (document.getElementById('colorSearch').value || '').toLowerCase().trim();
+ var items = document.querySelectorAll('#colorsGrid .color-item');
+ var shown = 0;
+ items.forEach(function(item) {
+ var name = (item.querySelector('.color-name')?.textContent || '').toLowerCase();
+ var code = (item.querySelector('.color-code')?.textContent || '').toLowerCase();
+ var isNew = !!item.querySelector('.new-badge');
+ var matchesText = !q || name.includes(q) || code.includes(q);
+ var matchesFilter = _colorFilter === 'all' || (_colorFilter === 'new' && isNew) || (_colorFilter === 'legacy' && !isNew);
+ var visible = matchesText && matchesFilter;
+ item.style.display = visible ? '' : 'none';
+ if (visible) shown++;
+ });
+ var counter = document.getElementById('color-count');
+ if (counter) counter.textContent = shown + ' of ' + items.length + ' shown';
+ }
+
+ // Initialize on page load
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', function(){ loadColors(); filterColors(); });
+ } else {
+ loadColors();
+ filterColors();
+ }
+ </script>
+
+ <script src="/script.js?v=drapery2"></script>
+
+ <!-- Start of Zendesk Widget script -->
+ <script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=4d4f52ea-1e3e-4837-8859-51f9abd5a82b"> </script>
+ <!-- End of Zendesk Widget script -->
+</body>
+</html>
\ No newline at end of file
diff --git a/DW-Websites/Novasuede/index.html b/DW-Websites/Novasuede/index.html
index 80a1e603..f3c2d885 100644
--- a/DW-Websites/Novasuede/index.html
+++ b/DW-Websites/Novasuede/index.html
@@ -8,6 +8,10 @@
<link rel="icon" type="image/jpeg" href="https://novasuede.com/images/colors/novasuede-ruby.jpg">
<link rel="shortcut icon" type="image/jpeg" href="https://novasuede.com/images/colors/novasuede-ruby.jpg">
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet">
+
<style>
* {
margin: 0;
@@ -18,17 +22,23 @@
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
line-height: 1.6;
- color: #333;
+ color: #f5f1e8;
+ background: #0a0a0a;
}
header {
- background: white;
- box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ background: rgba(10, 10, 10, 0.78);
+ backdrop-filter: blur(14px);
+ -webkit-backdrop-filter: blur(14px);
+ box-shadow: 0 1px 0 rgba(245, 241, 232, 0.08);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
+ header .logo h1 { color: #f5f1e8 !important; font-weight: 300; letter-spacing: 0.18em; font-size: 1.05rem; }
+ header nav a, header .nav-container a { color: rgba(245, 241, 232, 0.85) !important; }
+ header nav a:hover, header .nav-container a:hover { color: #fff !important; }
.nav-container {
max-width: 1200px;
@@ -92,99 +102,144 @@
}
.hero {
- margin-top: 80px;
- padding: 4rem 2rem;
- background: url('images/bg-site-splash.jpg') center top / cover no-repeat;
- background-attachment: fixed;
+ margin-top: 0;
+ padding: 0;
+ background: #000;
text-align: center;
position: relative;
- min-height: 70vh;
+ min-height: 100vh;
+ overflow: hidden;
+ isolation: isolate;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
- @media (max-width: 768px) {
- .hero {
- background-image: url('images/bg-site-splash-m.jpg');
- background-attachment: scroll; /* fixed is buggy on iOS */
- min-height: 60vh;
- }
+ /* Rotating background layers — full-bleed crossfade through 5 dark/jewel suede tones */
+ .hero-bg {
+ position: absolute;
+ inset: 0;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ opacity: 0;
+ transition: opacity 2200ms cubic-bezier(0.4, 0, 0.2, 1);
+ z-index: 0;
+ will-change: opacity;
}
-
- .hero::before {
+ .hero-bg.on { opacity: 1; }
+ /* Subtle vignette overlay to deepen the edges and hold the wordmark */
+ .hero::after {
content: '';
position: absolute;
- top: 0; left: 0; right: 0; bottom: 0;
- background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.30) 50%, rgba(255,255,255,0.65) 100%);
- z-index: 0;
+ inset: 0;
+ background: radial-gradient(ellipse at center, rgba(0,0,0,0.0) 35%, rgba(0,0,0,0.55) 100%);
+ z-index: 1;
+ pointer-events: none;
+ }
+ .hero .hero-content {
+ position: relative;
+ z-index: 2;
+ padding: 0 24px;
+ }
+ @media (max-width: 768px) {
+ .hero { min-height: 88vh; }
}
+ /* No white veil — the suede tones already provide the right backdrop on black */
+ .hero::before { content: none; }
+
.hero-content {
position: relative;
- z-index: 3;
- max-width: 720px;
+ z-index: 2;
+ max-width: 920px;
margin: 0 auto;
+ text-align: center;
}
- .curtain {
- position: absolute;
- top: 0; bottom: 0;
- width: 16%;
- background-size: cover;
- background-position: center top;
- background-repeat: no-repeat;
- z-index: 2;
- pointer-events: none;
+ /* Drapery removed — hidden if any leftover markup tries to render it */
+ .curtain { display: none !important; }
+
+ /* Simple Gucci-style wordmark — wide-tracked light caps in white */
+ .ns-wordmark-link {
+ display: inline-block;
+ text-decoration: none;
+ cursor: pointer;
}
- .curtain-left { left: 0; background-image: url('images/left-curtain-d1.png'); }
- .curtain-right { right: 0; background-image: url('images/right-curtain-d1.png'); }
- @media (max-width: 768px) {
- .curtain { width: 22%; }
+ .ns-wordmark {
+ font-family: -apple-system, "Helvetica Neue", "Inter", Arial, sans-serif;
+ font-weight: 200;
+ font-size: clamp(36px, 6.5vw, 96px);
+ letter-spacing: 0.32em;
+ line-height: 1;
+ color: #f5f1e8;
+ margin: 0 auto 2rem;
+ text-shadow: 0 4px 22px rgba(0, 0, 0, 0.55);
+ text-transform: uppercase;
+ transition: color 280ms ease;
}
- @media (max-width: 480px) {
- .curtain { display: none; } /* curtains squeeze content too much on phone */
+ .ns-wordmark sup {
+ font-size: 0.32em;
+ font-weight: 300;
+ letter-spacing: 0;
+ position: relative;
+ top: -1.2em;
+ margin-left: 0.08em;
}
-
- .enter-novasuede-logo {
- display: block;
- max-width: 520px;
- width: 78%;
- height: auto;
- margin: 0 auto 1.75rem;
- filter: drop-shadow(0 8px 16px rgba(0,0,0,0.35));
- transition: transform 0.15s ease;
- }
- .enter-novasuede-logo:hover { transform: scale(1.03); }
+ .ns-wordmark-link:hover .ns-wordmark { color: #fff; }
@media (max-width: 768px) {
- .enter-novasuede-logo { max-width: 340px; }
+ .ns-wordmark { letter-spacing: 0.22em; margin-bottom: 1.5rem; }
}
.hero h2 {
- font-size: 2.5rem;
- margin-bottom: 1rem;
- color: #ffffff;
- font-weight: 700;
- text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.95);
+ font-family: 'Cormorant Garamond', 'Didot', 'Bodoni 72', Georgia, serif;
+ font-style: italic;
+ font-weight: 300;
+ font-size: clamp(20px, 2.4vw, 32px);
+ line-height: 1.35;
+ margin: 0 auto 1.6rem;
+ max-width: 640px;
+ color: #f5f1e8;
+ letter-spacing: 0.01em;
+ text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}
.hero p {
- font-size: 1.2rem;
- margin-bottom: 2rem;
- color: #ffffff;
- text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.9);
+ font-size: 13px;
+ letter-spacing: 0.22em;
+ text-transform: uppercase;
+ font-weight: 300;
+ margin: 0 auto 2.25rem;
+ max-width: 580px;
+ color: rgba(245, 241, 232, 0.78);
+ text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
+ }
+ .hero .authorized-dealer { margin-top: 2.5rem; }
+ .hero .authorized-dealer p {
+ font-size: 9.5px;
+ letter-spacing: 0.42em;
+ color: rgba(245, 241, 232, 0.55);
+ margin: 0;
}
- .hero .authorized-dealer p { color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
+ /* Gucci-style hairline button — white border on black, no fill */
.sample-btn {
- background: #DDAB1E;
- color: white;
- border: none;
- padding: 1rem 2rem;
- font-size: 1.1rem;
- border-radius: 5px;
+ background: transparent;
+ color: #f5f1e8;
+ border: 1px solid rgba(245, 241, 232, 0.85);
+ padding: 14px 38px;
+ font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, sans-serif;
+ font-size: 11px;
+ font-weight: 400;
+ letter-spacing: 0.32em;
+ text-transform: uppercase;
+ border-radius: 0;
cursor: pointer;
- transition: background 0.3s;
+ transition: background 280ms ease, color 280ms ease, border-color 280ms ease;
}
-
.sample-btn:hover {
- background: #c4981a;
+ background: #f5f1e8;
+ color: #0a0a0a;
+ border-color: #f5f1e8;
}
.container {
@@ -195,38 +250,76 @@
.colors-section {
padding: 4rem 0;
- background: white;
+ background: #0a0a0a;
+ color: #f5f1e8;
}
.colors-section h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
+ color: #f5f1e8;
}
.section-subtitle {
text-align: center;
- color: #666;
+ color: rgba(245, 241, 232, 0.6);
margin-bottom: 3rem;
}
.colors-grid {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr));
gap: 1.5rem;
}
+ @media (max-width: 720px) { .colors-grid { grid-template-columns: repeat(2, 1fr) !important; } }
+ @media (min-width: 721px) and (max-width: 1024px) { .colors-grid { grid-template-columns: repeat(3, 1fr) !important; } }
+ /* Sort + density toolbar (CLAUDE.md "every grid needs sort + density" rule) */
+ .ns-toolbar { display: inline-flex; gap: 18px; align-items: center; margin-left: auto; flex-wrap: wrap; }
+ .ns-ctrl { display: inline-flex; gap: 8px; align-items: center; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #666; }
+ .ns-ctrl select { background: #fff; color: #222; border: 1px solid #ccc; padding: 5px 8px; font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0; border-radius: 3px; cursor: pointer; }
+ .ns-ctrl select:focus { outline: none; border-color: #DDAB1E; }
+ .ns-ctrl input[type="range"] { width: 90px; accent-color: #DDAB1E; cursor: pointer; }
+ .ns-ctrl #nsColsVal { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: #DDAB1E; min-width: 14px; text-align: right; }
.color-item {
cursor: pointer;
transition: transform 0.3s;
text-align: center;
position: relative;
+ background: #0a0a0a;
+ border-radius: 8px;
+ overflow: hidden;
}
.color-item:hover {
transform: translateY(-5px);
}
+ /* Photo-only until hover — chip-actions + name/code overlay reveal on hover */
+ .color-item .color-info {
+ position: absolute;
+ left: 0; right: 0; bottom: 0;
+ margin: 0;
+ padding: 0.85rem 0.85rem 0.7rem;
+ background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 60%);
+ opacity: 0;
+ transform: translateY(8px);
+ transition: opacity 220ms ease, transform 220ms ease;
+ text-align: left;
+ pointer-events: none;
+ color: #fff;
+ }
+ .color-item:hover .color-info,
+ .color-item:focus-within .color-info {
+ opacity: 1;
+ transform: translateY(0);
+ pointer-events: auto;
+ }
+ .color-item .color-name { color: #fff; }
+ .color-item .color-code { color: rgba(255,255,255,0.72); }
+ .color-item .chip-actions { margin-top: 0.55rem; gap: 0.45rem; }
+
.color-item .new-badge {
position: absolute;
top: 6px;
@@ -425,8 +518,8 @@
/* Standalone "New Arrivals 2026" section that sits above the main collection */
.new-arrivals-section {
padding: 3rem 0 1.5rem;
- background: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%);
- color: #f5e7c0;
+ background: #0a0a0a;
+ color: #f5f1e8;
}
.new-arrivals-header {
display: flex;
@@ -532,26 +625,141 @@
.color-preview {
text-align: center;
- padding: 1.5rem;
- background: #f8f8f8;
- border-radius: 8px;
+ padding: 0 0 1.25rem;
+ background: transparent;
+ border-radius: 0;
margin-bottom: 1.5rem;
+ border-bottom: 1px solid rgba(0,0,0,0.08);
}
.color-preview img {
- width: 200px;
- height: 200px;
- border-radius: 8px;
+ display: block;
+ width: 100%;
+ max-width: 460px;
+ height: 280px;
+ border-radius: 4px;
object-fit: cover;
- box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+ margin: 0 auto;
+ box-shadow: 0 8px 24px rgba(0,0,0,0.18);
+ transition: opacity 320ms ease;
+ background: #1a1a1a; /* shows while image loads */
}
+ .color-preview img.loading { opacity: 0.35; }
- .color-preview span {
+ .color-preview span#colorPreviewName {
+ display: block;
+ margin-top: 0.9rem;
+ font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
+ font-size: 11px;
+ font-weight: 400;
+ letter-spacing: 0.32em;
+ text-transform: uppercase;
+ color: #1a1a1a;
+ }
+ .color-preview .preview-hex {
display: block;
+ font-family: ui-monospace, "SF Mono", Menlo, monospace;
+ font-size: 11px;
+ color: #888;
+ margin-top: 4px;
+ letter-spacing: 0.04em;
+ text-transform: lowercase;
+ }
+
+ /* Multi-select sample request — pick + Add chips list */
+ .color-pick-row {
+ display: flex;
+ gap: 10px;
+ align-items: stretch;
+ }
+ .color-pick-row select {
+ flex: 1;
+ min-width: 0;
+ }
+ .add-to-request-btn {
+ white-space: nowrap;
+ background: #1a1a1a;
+ color: #f5f1e8;
+ border: 1px solid #1a1a1a;
+ padding: 0 18px;
+ font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
+ font-size: 11px;
+ font-weight: 500;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background 220ms ease, color 220ms ease;
+ }
+ .add-to-request-btn:hover { background: #f5f1e8; color: #1a1a1a; }
+ .add-to-request-btn:disabled {
+ background: #ddd;
+ color: #999;
+ border-color: #ddd;
+ cursor: not-allowed;
+ }
+
+ .request-list {
margin-top: 1rem;
+ padding: 14px 16px;
+ background: rgba(184, 153, 104, 0.06);
+ border: 1px solid rgba(0, 0, 0, 0.08);
+ border-radius: 4px;
+ }
+ .request-list-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ font-size: 9px;
+ letter-spacing: 0.32em;
+ text-transform: uppercase;
+ color: #666;
+ margin-bottom: 10px;
+ font-weight: 500;
+ }
+ .request-list-header .request-count {
+ font-family: ui-monospace, "SF Mono", Menlo, monospace;
+ color: #1a1a1a;
font-weight: 600;
- color: #333;
+ letter-spacing: 0.05em;
}
+ .request-chips {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+ }
+ .request-chip {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 6px 10px 6px 8px;
+ background: #fff;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 12px;
+ color: #1a1a1a;
+ line-height: 1;
+ }
+ .request-chip .chip-swatch {
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ border-radius: 2px;
+ border: 1px solid rgba(0,0,0,0.1);
+ flex: none;
+ }
+ .request-chip button {
+ background: transparent;
+ border: none;
+ color: #999;
+ cursor: pointer;
+ font-size: 16px;
+ line-height: 1;
+ padding: 0 0 0 4px;
+ margin: 0;
+ }
+ .request-chip button:hover { color: #1a1a1a; }
+ .request-list.empty { display: none; }
.form-group {
margin-bottom: 1.5rem;
@@ -617,8 +825,11 @@
/* Specifications Section */
.specifications-section {
padding: 4rem 0;
- background: #f8f8f8;
+ background: #0a0a0a;
+ color: #f5f1e8;
}
+ .specifications-section h2, .specifications-section .section-subtitle, .specifications-section p, .specifications-section li, .specifications-section td, .specifications-section th { color: #f5f1e8; }
+ .specifications-section .section-subtitle { color: rgba(245, 241, 232, 0.6); }
.specifications-section h2 {
text-align: center;
@@ -638,27 +849,45 @@
.spec-item {
display: flex;
justify-content: space-between;
- padding: 1rem;
- background: white;
- border-radius: 8px;
- border: 1px solid #e0e0e0;
+ align-items: baseline;
+ padding: 18px 20px;
+ background: rgba(245, 241, 232, 0.04);
+ border-radius: 4px;
+ border: 1px solid rgba(245, 241, 232, 0.12);
+ transition: border-color 200ms ease, background 200ms ease;
+ }
+ .spec-item:hover {
+ border-color: rgba(245, 241, 232, 0.28);
+ background: rgba(245, 241, 232, 0.06);
}
.spec-label {
- font-weight: 600;
- color: #666;
+ font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
+ font-weight: 400;
+ font-size: 10px;
+ letter-spacing: 0.22em;
+ text-transform: uppercase;
+ color: rgba(245, 241, 232, 0.55);
}
.spec-value {
- color: #333;
+ color: #f5f1e8;
text-align: right;
+ font-family: 'Cormorant Garamond', 'Georgia', serif;
+ font-style: italic;
+ font-size: 18px;
+ font-weight: 400;
+ letter-spacing: 0.005em;
}
/* Features Section */
.features-section {
padding: 4rem 0;
- background: white;
+ background: #0a0a0a;
+ color: #f5f1e8;
}
+ .features-section h2, .features-section h3, .features-section p, .features-section li, .features-section .section-subtitle { color: #f5f1e8; }
+ .features-section .section-subtitle { color: rgba(245, 241, 232, 0.6); }
.features-section h2 {
text-align: center;
@@ -700,14 +929,17 @@
/* Installation Section */
.installation-section {
padding: 4rem 0;
- background: #f0f0f0;
+ background: #0a0a0a;
+ color: #f5f1e8;
}
+ .installation-section h2, .installation-section h3, .installation-section p, .installation-section li, .installation-section .section-subtitle { color: #f5f1e8; }
+ .installation-section .section-subtitle { color: rgba(245, 241, 232, 0.6); }
.installation-section h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
- color: #222;
+ color: #f5f1e8;
}
.info-grid {
@@ -767,31 +999,35 @@
}
.care-highlight {
- background: white;
+ background: rgba(245, 241, 232, 0.04);
padding: 2.5rem;
- border-radius: 10px;
+ border-radius: 4px;
max-width: 800px;
margin: 0 auto;
text-align: center;
- border: 2px solid #DDAB1E;
+ border: 1px solid rgba(245, 241, 232, 0.12);
}
.care-highlight h3 {
- color: #333;
+ color: #f5f1e8;
margin-bottom: 1rem;
font-size: 1.5rem;
+ font-family: 'Cormorant Garamond', Georgia, serif;
+ font-style: italic;
+ font-weight: 400;
}
.care-highlight p {
- color: #666;
+ color: rgba(245, 241, 232, 0.75);
line-height: 1.8;
}
/* Footer */
footer {
- background: #222;
- color: white;
+ background: #0a0a0a;
+ color: #f5f1e8;
padding: 3rem 0 1rem;
+ border-top: 1px solid rgba(245, 241, 232, 0.08);
}
.footer-content {
@@ -840,19 +1076,24 @@
}
.footer-sample-btn {
- background: #DDAB1E;
- color: white;
- border: none;
- padding: 0.75rem 1.5rem;
- font-size: 1rem;
- border-radius: 5px;
+ background: transparent;
+ color: #f5f1e8;
+ border: 1px solid rgba(245, 241, 232, 0.6);
+ padding: 12px 28px;
+ font-size: 11px;
+ font-weight: 400;
+ letter-spacing: 0.32em;
+ text-transform: uppercase;
+ border-radius: 0;
cursor: pointer;
margin-top: 1rem;
- transition: background 0.3s;
+ transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.footer-sample-btn:hover {
- background: #c4981a;
+ background: #f5f1e8;
+ color: #0a0a0a;
+ border-color: #f5f1e8;
}
.footer-bottom {
@@ -945,50 +1186,402 @@
font-size: 2rem;
}
}
+
+ /* ─── Unified dark-theme overrides — keeps every section on #0a0a0a ─── */
+ .color-search input,
+ #colorSearch {
+ background: rgba(245, 241, 232, 0.04) !important;
+ border: 1px solid rgba(245, 241, 232, 0.18) !important;
+ color: #f5f1e8 !important;
+ padding: 12px 16px;
+ font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
+ font-size: 13px;
+ letter-spacing: 0.04em;
+ border-radius: 4px;
+ width: 100%;
+ max-width: 460px;
+ }
+ .color-search input::placeholder, #colorSearch::placeholder { color: rgba(245, 241, 232, 0.4); }
+ .color-search input:focus, #colorSearch:focus { outline: none; border-color: rgba(245, 241, 232, 0.45) !important; }
+ .color-search { display: flex; justify-content: center; margin-bottom: 1.4rem; }
+
+ .color-filter-btn {
+ background: transparent;
+ color: rgba(245, 241, 232, 0.75);
+ border: 1px solid rgba(245, 241, 232, 0.22);
+ padding: 9px 18px;
+ font-size: 11px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ border-radius: 4px;
+ cursor: pointer;
+ font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
+ font-weight: 400;
+ transition: all 220ms ease;
+ }
+ .color-filter-btn:hover { border-color: rgba(245, 241, 232, 0.7); color: #fff; background: transparent; }
+ .color-filter-btn.active {
+ background: #f5f1e8 !important;
+ border-color: #f5f1e8 !important;
+ color: #1a1a1a !important;
+ }
+ .color-filters {
+ display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
+ justify-content: center;
+ padding: 0 24px;
+ margin-bottom: 1.5rem;
+ }
+ .color-count { color: rgba(245, 241, 232, 0.55); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin-left: 8px; }
+
+ .ns-ctrl { color: rgba(245, 241, 232, 0.55); font-size: 10px; letter-spacing: 0.22em; }
+ .ns-ctrl select {
+ background: rgba(245, 241, 232, 0.06) !important;
+ color: #f5f1e8 !important;
+ border: 1px solid rgba(245, 241, 232, 0.18) !important;
+ }
+ .ns-ctrl select:focus { border-color: rgba(245, 241, 232, 0.45) !important; }
+ .ns-ctrl input[type="range"] { accent-color: #f5f1e8; }
+ .ns-ctrl #nsColsVal { color: #f5f1e8 !important; }
+
+ /* Footer dark-theme touch-up */
+ footer .footer-section h3 { color: #f5f1e8 !important; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; font-size: 11px; }
+ footer .footer-section p, footer .footer-section a, footer ul a { color: rgba(245, 241, 232, 0.65) !important; text-decoration: none; }
+ footer .footer-section a:hover, footer ul a:hover { color: #fff !important; }
+ footer .footer-bottom { color: rgba(245, 241, 232, 0.4); border-top: 1px solid rgba(245, 241, 232, 0.08); margin-top: 2rem; padding-top: 1.5rem; }
+
+ /* New-arrivals heading on the unified bg — keep gold accent but trim the gradient feel */
+ .new-arrivals-section h2 { color: #f5f1e8 !important; }
+ .new-arrivals-section .new-arrivals-pill { background: #f5f1e8; color: #0a0a0a; }
+ .new-arrivals-section .section-subtitle { color: rgba(245, 241, 232, 0.6); }
+
+ /* Modal still light-on-dark by design — keep its own contrast island */
+ .modal-content { background: #fff; color: #1a1a1a; }
+
+ /* Internal cards in sections — flip from white islands to dark cards on dark bg */
+ .feature-card {
+ background: rgba(245, 241, 232, 0.04) !important;
+ color: #f5f1e8 !important;
+ border: 1px solid rgba(245, 241, 232, 0.10);
+ }
+ .feature-card h3, .feature-card p { color: #f5f1e8 !important; }
+ .info-card {
+ background: rgba(245, 241, 232, 0.04) !important;
+ color: #f5f1e8 !important;
+ border: 1px solid rgba(245, 241, 232, 0.10);
+ }
+ .info-card h3, .info-card p, .info-card li { color: #f5f1e8 !important; }
+
+ /* GLOBAL DARK SWEEP — every section bg → black, every text → white. 2026-05-07 per Steve.
+ Excludes body.has-drapery so the drapery swag image (set inline by JS) shows through. */
+ body, body * { color: #ffffff !important; }
+ body:not(.has-drapery), body:not(.has-drapery) header, body:not(.has-drapery) footer,
+ body:not(.has-drapery) section, body:not(.has-drapery) .container,
+ body:not(.has-drapery) .colors-section, body:not(.has-drapery) .new-arrivals-section,
+ body:not(.has-drapery) .features-section, body:not(.has-drapery) .specs-section,
+ body:not(.has-drapery) .info-section, body:not(.has-drapery) .testimonials-section,
+ body:not(.has-drapery) .gallery-section, body:not(.has-drapery) .cta-section,
+ body:not(.has-drapery) .faq-section, body:not(.has-drapery) .contact-section,
+ body:not(.has-drapery) main, body:not(.has-drapery) article {
+ background: #0a0a0a !important;
+ background-color: #0a0a0a !important;
+ }
+ /* Keep accent colors visible on dark */
+ .new-badge, .sample-btn, .drapery-btn, .sample-btn-chip, .cb-cta,
+ .color-filter-btn.active, button[type="submit"] { color: #0a0a0a !important; }
+ /* Keep input fields readable */
+ input, textarea, select {
+ background: #1a1a1a !important;
+ color: #ffffff !important;
+ border-color: #2a2a2a !important;
+ }
+ input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.45) !important; }
+ /* Sort dropdown stays white-on-dark */
+ .ns-ctrl select { background: #1a1a1a !important; color: #ffffff !important; border-color: #444 !important; }
+ .ns-ctrl, .ns-ctrl * { color: #ffffff !important; }
+ /* Modal contrast (sample-request modal) */
+ .modal-content, .modal-body, .modal-header { background: #141414 !important; color: #ffffff !important; }
+ /* Filter buttons readable */
+ .color-filter-btn { background: #1a1a1a !important; color: #ffffff !important; border-color: #333 !important; }
+ .color-filter-btn.active { background: #DDAB1E !important; color: #0a0a0a !important; }
+ /* Section h2 / subtitles white on dark */
+ .colors-section h2, .new-arrivals-header h2, .section-subtitle { color: #ffffff !important; }
+ /* Authorized + small print text white */
+ .authorized, .authorized-dealer p, footer * { color: #ffffff !important; }
+
+ /* Fix Request Sample button — dark-sweep made it black-on-dark unreadable */
+ .hero .sample-btn, .sample-btn {
+ background: rgba(255,255,255,0.06) !important;
+ color: rgba(255,255,255,0.92) !important;
+ border: 1px solid rgba(255,255,255,0.55) !important;
+ backdrop-filter: blur(2px);
+ }
+ .hero .sample-btn:hover, .sample-btn:hover {
+ background: rgba(255,255,255,0.92) !important;
+ color: #0a0a0a !important;
+ border-color: rgba(255,255,255,0.92) !important;
+ }
+ /* Center hero wordmark + content explicitly (letter-spacing was pushing it left) */
+ .hero-content { text-align: center !important; }
+ .ns-wordmark-link { display: block !important; text-align: center !important; }
+ .ns-wordmark { display: inline-block; text-align: center; padding-left: 0.32em; }
+
+ /* New Arrivals pill — white text, no pill bg, just sits on the dark section */
+ .new-arrivals-pill,
+ .new-arrivals-section .new-arrivals-pill {
+ background: transparent !important;
+ color: #ffffff !important;
+ border: 1px solid rgba(255,255,255,0.35) !important;
+ font-weight: 500 !important;
+ }
+ .new-arrivals-section .section-subtitle { color: #ffffff !important; }
+
+ /* Authorized-dealer strip — minimal, centered, no gold box */
+ .hero .authorized-dealer, .authorized-dealer {
+ background: transparent !important;
+ border: 0 !important;
+ backdrop-filter: none !important;
+ -webkit-backdrop-filter: none !important;
+ border-radius: 0 !important;
+ padding: 0 !important;
+ margin: 2.5rem auto 0 !important;
+ box-shadow: none !important;
+ display: block;
+ text-align: center !important;
+ max-width: 640px;
+ }
+ .hero .authorized-dealer p, .authorized-dealer p {
+ font-size: 9.5px !important;
+ letter-spacing: 0.42em !important;
+ color: rgba(245, 241, 232, 0.55) !important;
+ text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
+ text-align: center !important;
+ margin: 0 auto !important;
+ font-weight: 400 !important;
+ text-transform: uppercase;
+ }
+
</style>
</head>
<body>
- <div class="contact-bar">
- <div class="contact-bar-inner">
- <a class="cb-link" href="tel:888-373-4564" aria-label="Call DesignerWallcoverings">
- <span class="cb-ico">📞</span><span class="cb-text">(888) 373-4564</span>
- </a>
- <a class="cb-link" href="mailto:info@DesignerWallcoverings.com">
- <span class="cb-ico">✉️</span><span class="cb-text">info@DesignerWallcoverings.com</span>
- </a>
- <span class="cb-link cb-static">
- <span class="cb-ico">🏬</span><span class="cb-text">Trade Pricing & Free Samples</span>
- </span>
- <button class="cb-cta" onclick="openModal()">Request Sample</button>
- </div>
- </div>
- <header>
- <nav class="navbar">
- <div class="nav-container">
- <div class="logo">
- <h1>Novasuede™</h1>
- </div>
- <button class="mobile-toggle" id="mobileToggle" onclick="toggleMobileMenu()">
- <span></span>
- <span></span>
- <span></span>
- </button>
- <ul class="nav-menu" id="navMenu">
- <li><a href="#home">Home</a></li>
- <li><a href="#colors">Colors</a></li>
- <li><a href="#specifications">Specifications</a></li>
- <li><a href="#features">Features</a></li>
- <li><a href="fire-ratings.html">Fire Ratings</a></li>
- </ul>
- </div>
+ <!-- Top contact-bar removed 2026-05-07 per Steve -->
+
+ <header class="ns-header">
+ <a href="#home" class="ns-brand" aria-label="Novasuede home">
+ <span class="ns-dot"></span>
+ <span class="ns-name">Novasuede<sup>™</sup></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>
+ <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>
+ <script>
+ function nsToggleNav(btn) {
+ var nav = document.getElementById('nsPrimaryNav');
+ if (!nav) return;
+ var open = nav.classList.toggle('open');
+ btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+ }
+ </script>
+ <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%, #b66a4d 0%, #8a4a30 60%, #5a2d1c 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; }
+ @media (max-width: 820px) { .ns-header { padding: 14px 18px; } .ns-nav { gap: 16px; } .ns-nav a, .ns-nav button { font-size: 13px !important; } }
+ @media (max-width: 760px) {
+ .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-nav a:nth-child(n+5), .ns-nav button:nth-child(n+5) { display: block !important; }
+ .ns-header .mobile-toggle { display: flex !important; }
+ }
+ @media (min-width: 761px) {
+ .ns-header .mobile-toggle { display: none !important; }
+ }
+ .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;
+ }
+
+ /* ─── Mobile hamburger nav (replaces the overflow at <760px) ─── */
+ @media (max-width: 760px) {
+ 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;
+ }
+ }
+ @media (min-width: 761px) {
+ header .mobile-toggle { display: none !important; }
+ }
+
+ </style>
+ <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@novasuede.com?subject=Novasuede%20inquiry"><span class="ico">✉️</span><div class="txt"><b>Email Us</b><span>info@novasuede.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() { document.getElementById('nsContactModal').classList.add('show'); }
+ function nsContactClose() { document.getElementById('nsContactModal').classList.remove('show'); }
+ document.addEventListener('keydown', e => { if (e.key === 'Escape') nsContactClose(); });
+ </script>
<section id="home" class="hero">
- <div class="curtain curtain-left"></div>
- <div class="curtain curtain-right"></div>
+ <!-- Rotating suede — 5 dark/jewel tones, gucci-house aesthetic. -->
+ <div class="hero-bg on" style="background-image:url('images/colors/novasuede-black.jpg')"></div>
+ <div class="hero-bg" style="background-image:url('images/colors/novasuede-carbon.jpg')"></div>
+ <div class="hero-bg" style="background-image:url('images/colors/novasuede-aubergine.jpg')"></div>
+ <div class="hero-bg" style="background-image:url('images/colors/novasuede-navy.jpg')"></div>
+ <div class="hero-bg" style="background-image:url('images/colors/novasuede-ruby.jpg')"></div>
<div class="hero-content">
- <a href="#colors" onclick="event.preventDefault();document.getElementById("colors").scrollIntoView({behavior:"smooth"});" style="cursor:pointer;display:inline-block;text-decoration:none;"><img class="enter-novasuede-logo" src="images/logo-novasuede-sign.png?v=2" alt="Enter Novasuede" /></a>
+ <a href="#colors" class="ns-wordmark-link" onclick="event.preventDefault();document.getElementById("colors").scrollIntoView({behavior:"smooth"});" aria-label="Enter Novasuede">
+ <h1 class="ns-wordmark">NOVASUEDE<sup>™</sup></h1>
+ </a>
<h2>The Luxurious Look and Feel of Fine Kid Suede</h2>
<p>Novasuede™ provides the aesthetic of expensive suede plus exceptional performance. This specially engineered material is lightweight and strong, illustrating the ingenuity within the design.</p>
<button class="sample-btn" onclick="openModal()">Request Sample</button>
@@ -1021,6 +1614,24 @@
<button type="button" class="color-filter-btn" data-filter="new" onclick="setColorFilter('new')">NEW (2026)</button>
<button type="button" class="color-filter-btn" data-filter="legacy" onclick="setColorFilter('legacy')">Classic</button>
<span id="color-count" class="color-count"></span>
+ <span class="ns-toolbar">
+ <label class="ns-ctrl">Sort
+ <select id="nsSort" onchange="setSort(this.value)">
+ <option value="color-wheel">Color · wheel (hue)</option>
+ <option value="color-light">Color · light → dark</option>
+ <option value="color-dark">Color · dark → light</option>
+ <option value="name-asc">Name A→Z</option>
+ <option value="name-desc">Name Z→A</option>
+ <option value="code-asc">Code A→Z</option>
+ <option value="new-first">NEW first</option>
+ <option value="random">Random</option>
+ </select>
+ </label>
+ <label class="ns-ctrl">Cols
+ <input type="range" id="nsCols" min="4" max="12" step="1" value="6" oninput="setCols(this.value)" />
+ <span id="nsColsVal">6</span>
+ </label>
+ </span>
</div>
<div class="colors-grid" id="colorsGrid">
<!-- Colors will be populated here -->
@@ -1164,7 +1775,7 @@
</div>
<div class="footer-section">
<h3>Contact</h3>
- <p>Email: info@DesignerWallcoverings.com</p>
+ <p>Email: <a href="mailto:info@novasuede.com" style="color:inherit;border-bottom:1px solid rgba(245,241,232,0.25);text-decoration:none">info@novasuede.com</a></p>
<button class="footer-sample-btn" onclick="openModal()">Request Sample</button>
</div>
<div class="footer-section">
@@ -1179,7 +1790,7 @@
</div>
</div>
<div class="footer-bottom">
- <p>© 2025 Novasuede.com. All rights reserved.</p>
+ <p>© 2026 Novasuede.com. All rights reserved.</p>
</div>
</div>
</footer>
@@ -1190,14 +1801,28 @@
<span class="close" onclick="closeModal()">×</span>
<h2>Request a Sample</h2>
<div class="color-preview">
- <img id="colorPreviewImage" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect width='200' height='200' fill='%23ddd'/%3E%3C/svg%3E" alt="Color Preview">
+ <img id="colorPreviewImage" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='280'%3E%3Crect width='460' height='280' fill='%231a1a1a'/%3E%3C/svg%3E" alt="Color Preview">
<span id="colorPreviewName">Select a color below</span>
+ <span class="preview-hex" id="colorPreviewHex"></span>
<div class="form-group">
- <label for="selectedColor">Selected Color*</label>
- <select id="selectedColor" name="selectedColor" onchange="updatePreview()" required>
- <option value="">Choose a color...</option>
- </select>
+ <label for="selectedColor">Browse colors</label>
+ <div class="color-pick-row">
+ <select id="selectedColor" name="selectedColor" onchange="updatePreview()">
+ <option value="">Choose a color…</option>
+ </select>
+ <button type="button" class="add-to-request-btn" onclick="addToRequest()" title="Add the currently-selected color to your sample request">+ Add to request</button>
+ </div>
+ </div>
+
+ <div class="request-list" id="requestList" style="display:none">
+ <div class="request-list-header">
+ <span>Your sample request</span>
+ <span class="request-count" id="requestCount">0</span>
+ </div>
+ <div class="request-chips" id="requestChips"></div>
</div>
+ <!-- hidden — submitted with the form. comma-separated list of all picked SKU codes. -->
+ <input type="hidden" name="requested_colors" id="requestedColorsHidden" value="">
</div>
<form id="contactForm" onsubmit="handleSubmit(event)" method="POST">
<div class="form-group">
@@ -1451,6 +2076,19 @@
populateDropdown();
}
+ /* Open modal, prefill the picked color into the dropdown + selected-color
+ input, push it into the request basket, and refresh the preview. Called
+ synchronously from chip clicks so there's no setTimeout race against
+ populateDropdown. */
+ function openModalForColor(colorName) {
+ openModal(); // shows modal + populates dropdown synchronously
+ var v = 'Novasuede-' + colorName;
+ var sel = document.getElementById('selectedColor');
+ if (sel) sel.value = v;
+ updatePreview(); // sets the image + the readonly Selected Color input
+ addToRequest(); // adds to the basket chip list
+ }
+
function closeModal() {
document.getElementById('contactModal').style.display = 'none';
}
@@ -1468,26 +2106,100 @@
}
}
+ // ─── Multi-color sample-request basket ────────────────────────────
+ // Users can pick a color → "+ Add to request" → builds a chip list.
+ // Submits the full list as a comma-separated value in `requested_colors`.
+ var requestedColors = []; // array of "Novasuede-Acorn" strings
+
+ function addToRequest() {
+ var select = document.getElementById('selectedColor');
+ if (!select || !select.value) return;
+ var v = select.value;
+ if (requestedColors.indexOf(v) !== -1) return; // already added
+ requestedColors.push(v);
+ renderRequestList();
+ }
+ function removeFromRequest(v) {
+ requestedColors = requestedColors.filter(function(x){ return x !== v; });
+ renderRequestList();
+ }
+ function renderRequestList() {
+ var list = document.getElementById('requestList');
+ var chips = document.getElementById('requestChips');
+ var count = document.getElementById('requestCount');
+ var hidden = document.getElementById('requestedColorsHidden');
+ if (!list || !chips) return;
+ if (requestedColors.length === 0) {
+ list.style.display = 'none';
+ if (hidden) hidden.value = '';
+ return;
+ }
+ list.style.display = 'block';
+ count.textContent = requestedColors.length + (requestedColors.length === 1 ? ' color' : ' colors');
+ chips.innerHTML = '';
+ requestedColors.forEach(function(v) {
+ var chip = document.createElement('span');
+ chip.className = 'request-chip';
+ var label = v.replace('Novasuede-', '');
+ // Lookup hex for swatch dot
+ var hex = '#cccccc';
+ for (var i = 0; i < colors.length; i++) {
+ if (colors[i].name.toLowerCase() === label.toLowerCase() && colors[i].hex) { hex = colors[i].hex; break; }
+ }
+ chip.innerHTML = '<span class="chip-swatch" style="background:' + hex + '"></span>' + label.replace(/[<>"]/g,'');
+ var btn = document.createElement('button');
+ btn.type = 'button';
+ btn.setAttribute('aria-label', 'Remove ' + label);
+ btn.innerHTML = '×';
+ btn.onclick = function(){ removeFromRequest(v); };
+ chip.appendChild(btn);
+ chips.appendChild(chip);
+ });
+ if (hidden) hidden.value = requestedColors.join(', ');
+ }
+
// Update preview when color selected
+ // Loads the FULL product photo for the picked SKU and shows its true
+ // center-pixel hex underneath. Forces the image visible (display:block,
+ // opacity:1) so the photo always appears.
function updatePreview() {
var select = document.getElementById('selectedColor');
var preview = document.getElementById('colorPreviewName');
var img = document.getElementById('colorPreviewImage');
+ var hexEl = document.getElementById('colorPreviewHex');
var colorInput = document.getElementById('selectedColorInput');
- if (select.value) {
- preview.textContent = select.value;
- if (colorInput) {
- colorInput.value = select.value;
+ if (!select || !select.value) return;
+
+ preview.textContent = select.value;
+ if (colorInput) colorInput.value = select.value;
+
+ var colorName = select.value.replace('Novasuede-', '');
+ var fileName = colorName.toLowerCase().replace(/ /g, '-');
+ var src = 'images/colors/novasuede-' + fileName + '.jpg';
+
+ // Surface the real center-pixel hex from the colors object (hydrated
+ // from /colors-data.json) so the customer sees the canonical color value.
+ var hex = '';
+ for (var i = 0; i < colors.length; i++) {
+ if (colors[i].name.toLowerCase() === colorName.toLowerCase() && colors[i].hex) {
+ hex = colors[i].hex;
+ break;
}
- // Remove "Novasuede-" prefix for image filename
- var colorName = select.value.replace('Novasuede-', '');
- var fileName = colorName.toLowerCase().replace(/ /g, '-');
- img.src = '/images/colors/novasuede-' + fileName + '.jpg';
- img.onerror = function() {
- this.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200"%3E%3Crect width="200" height="200" fill="%23' + getColorHex(colorName) + '"/%3E%3C/svg%3E';
- };
}
+ if (hexEl) hexEl.textContent = hex || '';
+
+ // Force visible + fade-in via .loading class
+ img.style.display = 'block';
+ img.classList.add('loading');
+ img.onload = function() { img.classList.remove('loading'); };
+ img.onerror = function() {
+ // If the photo 404s, fall back to a flat swatch using the real hex
+ var fallbackHex = (hex || '#cccccc').replace('#', '');
+ img.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="460" height="280"%3E%3Crect width="460" height="280" fill="%23' + fallbackHex + '"/%3E%3C/svg%3E';
+ img.classList.remove('loading');
+ };
+ img.src = src;
}
// Get color hex
@@ -1502,6 +2214,95 @@
}
+ // ─── SORT + DENSITY (CLAUDE.md "every grid needs sort + density" rule) ───
+ // Hardcoded best-guess hex per color name. Tunable — fine-tune by sampling actual swatch
+ // images later. Sort-by-luminance uses these for light→dark / dark→light ordering.
+ var NAME_HEX = {
+ "Acorn":"#7e5a3c","Adobe":"#a6694b","African Violet":"#8a4f88","Amber":"#d4a04a","Apricot":"#f4b78a","Arrow Wood":"#7a5a3a","Aubergine":"#523040","Baltic":"#5b6a7a",
+ "Beige":"#e6d8be","Biscuit":"#dec79a","Black":"#1a1a1a","Blank Slate":"#bfb8a8","Bliss":"#f3e3d0","Bluestone":"#5d7686","Blush Pink":"#f1c2c0","Blush Rose":"#e6a9af",
+ "Bone":"#ede4d3","Brown":"#5b3a25","Buff":"#d6b78a","Buttercup":"#f5d97a","Cane":"#c8a172","Carbon":"#3e3e3e","Cashew":"#bfa17a","Cashmere":"#d8c2a3","Celadon":"#a6c4ae",
+ "Celery":"#bdc88a","Cement":"#a39a8b","Champagne":"#ead9b8","China Blue":"#4f6f8c","Chrome Grey":"#9aa1a4","Cinder":"#3a3633","Cloud":"#dce0e2","Cocoa":"#5b3a2c",
+ "Colonial Blue":"#4d6b89","Coral":"#f08070","Cottage Grey":"#a3a39a","Cream":"#f3e8d0","Cypress":"#4f5f48","Dark Sand":"#a89070","Dew":"#cfe0d6","Dove":"#bfb6ad",
+ "Dune":"#bfa37c","Dusty Ranch":"#b08960","Dusty Rose":"#c69594","Dusty Teal":"#5e8a8a","Ecru":"#dccfb6","Fawn":"#a98c6b","Fire":"#a8281c","Flagstone":"#6a6e6e",
+ "French Blue":"#5d7da3","Gainsborough":"#9aa3a5","Garnet":"#7a1a26","Gelato":"#f1d4cf","Gold":"#d4a017","Goldstone":"#a07735","Granite":"#5e5e5e","Grape":"#5a3a6a",
+ "Gray":"#888888","Green":"#3a6e3a","Green Marble":"#5d7d52","Greystone":"#6a6a66","Harvest":"#a07033","Henna":"#8c422a","Honey":"#d09a3a","Hyacinth":"#7a6da8",
+ "Ivory":"#efe6cf","Jade":"#3f8870","Java":"#3e2a1f","Kiva":"#8a5a3e","Latte":"#bfa07a","Lavender":"#aea3cc","Light Amethyst":"#bfa5cf","Light Camel":"#cfae84",
+ "Light Grey":"#cfcfcf","Lilac":"#c5a8d2","Lime":"#bcd34a","Linen":"#e6dac3","Lipstick":"#b22247","Madison Grey":"#7a7a7a","Maize":"#e0c870","Marine Blue":"#26486b",
+ "Maroon":"#5a1f23","Mauve":"#a98090","Meadow":"#789e63","Melon":"#f0a075","Milk":"#f3ece2","Mint":"#a7d6c0","Mint Julip":"#b8d4b3","Mist":"#d6dada","Misty Dew":"#b8c5be",
+ "Mocha":"#6e4830","Moss":"#5b6e3a","Mushroom":"#9c8b73","Navy":"#1f2c54","Newport":"#3a5a78","Noir":"#1a1a1a","Nutmeg":"#7e4a2e","Ocean":"#2a5a7a","Olive":"#5e6b32",
+ "Opal":"#b6c4cc","Orange":"#e07b1a","Oyster":"#bfae90","Pale Green":"#bcd2a3","Passion Blue":"#2a3f6e","Pastel Blue":"#b3cfe5","Pastel Pink":"#f3c8cf","Peach":"#f0b78a",
+ "Pebble":"#9c948a","Peppermint":"#b3d6c4","Peridot":"#9eb050","Periwinkle":"#8090c8","Persimmon":"#c95a2c","Pink Lace":"#f1c5cd","Pistachio":"#b4cc99",
+ "Plum Pleasure":"#5e3a4a","Porcelain":"#f0eadd","Port Blue":"#26405e","Powder Grey":"#c2c4c5","Prairie":"#a07b4f","Putty":"#bca887","Raffia":"#d6c4a3","Raisin":"#3e2a35",
+ "Red":"#a82424","Rose":"#d57a87","Rosewater":"#f0c8c8","Royal Blue":"#1a3a8a","Royal Purple":"#4a2466","Ruby":"#8a1a36","Sable":"#3e2a1f","Safari":"#9a7e52",
+ "Saffron":"#e0a020","Sage":"#9aa888","Salt":"#efe8de","Sand":"#d4c08a","Sandalwood":"#b08a5a","Scarlet Wine":"#6e1a26","Sea Blue":"#3a6a8a","Sea Breeze":"#b3cfd9",
+ "Sea Grass":"#6e9a73","Seafoam":"#a3d3c4","Sedona":"#a05a3a","Shale":"#5a5e5e","Sienna":"#8e4a2a","Silver":"#c0c0c0","Sky Blue":"#9ec3da","Smoke":"#7a7a7a",
+ "Snow":"#f5f5f5","Soft Clay":"#b4937c","Solar Yellow":"#f0c020","Spice":"#9c4a26","Spruce":"#3a5a3a","Steel":"#5e6e7a","Stone Grey":"#8a8a86","Stone Taupe":"#9c8a73",
+ "Storm":"#5a5e62","Straw":"#d4c07a","Strong White":"#efe9da","Sugar Plum":"#4a2a3e","Sweet Lilac":"#bfa3c2","Tan":"#bfa074","Tarragon":"#6e7e3e","Taupe":"#8e7c5e",
+ "Terracotta":"#b35a3a","Thistle":"#a89ab8","Thyme":"#5c6b3e","Trench":"#3e3a30","Tusk":"#dccfb0","Umber":"#5e3a26","Vanilla":"#f0e8d0","Verdigris":"#5a8a7a",
+ "Vermilion":"#d23a1f","Wheat":"#dec38a","White":"#ffffff","Winter White":"#f0e8d0","Woodland":"#3e4a2a"
+ };
+ function nsHex(c) { return c.hex || NAME_HEX[c.name] || '#cccccc'; }
+ function nsLuma(h) {
+ var s = (h || '#cccccc').replace('#',''); if (s.length === 3) s = s.split('').map(function(x){return x+x;}).join('');
+ var r = parseInt(s.slice(0,2),16), g = parseInt(s.slice(2,4),16), b = parseInt(s.slice(4,6),16);
+ return 0.299*r + 0.587*g + 0.114*b;
+ }
+ // Convert hex → HSL for color-wheel (hue) sort. Desaturated colors
+ // (s < 12%) fall to a "neutrals" bucket sorted by lightness so grays
+ // don't shuffle randomly inside the rainbow.
+ function nsHsl(h) {
+ var s = (h || '#cccccc').replace('#',''); if (s.length === 3) s = s.split('').map(function(x){return x+x;}).join('');
+ var r = parseInt(s.slice(0,2),16)/255, g = parseInt(s.slice(2,4),16)/255, b = parseInt(s.slice(4,6),16)/255;
+ var max = Math.max(r,g,b), min = Math.min(r,g,b), L = (max+min)/2;
+ var H = 0, S = 0;
+ if (max !== min) {
+ var d = max - min;
+ S = L > 0.5 ? d / (2 - max - min) : d / (max + min);
+ if (max === r) H = (g - b) / d + (g < b ? 6 : 0);
+ else if (max === g) H = (b - r) / d + 2;
+ else H = (r - g) / d + 4;
+ H *= 60;
+ }
+ return [H, S * 100, L * 100];
+ }
+ function nsWheelKey(c) {
+ var hsl = nsHsl(nsHex(c));
+ // Neutrals (s < 12%) go to the END, sorted dark→light. Saturated
+ // colors come first by hue (red 0° → orange → yellow → green → blue → purple → 360°).
+ if (hsl[1] < 12) return 1000 + hsl[2];
+ return hsl[0]; // 0..360 hue
+ }
+ var NS_SORTERS = {
+ 'color-wheel': function(a,b){ return nsWheelKey(a) - nsWheelKey(b); },
+ 'color-light': function(a,b){ return nsLuma(nsHex(b)) - nsLuma(nsHex(a)); },
+ 'color-dark': function(a,b){ return nsLuma(nsHex(a)) - nsLuma(nsHex(b)); },
+ 'name-asc': function(a,b){ return a.name.localeCompare(b.name); },
+ 'name-desc': function(a,b){ return b.name.localeCompare(a.name); },
+ 'code-asc': function(a,b){ return (a.code||'').localeCompare(b.code||''); },
+ 'new-first': function(a,b){ return ((b.isNew?1:0) - (a.isNew?1:0)) || a.name.localeCompare(b.name); },
+ 'random': function(){ return Math.random() - 0.5; },
+ };
+ var NS_PREFS = (function(){ try { return JSON.parse(localStorage.getItem('ns-prefs')||'{}'); } catch(e){ return {}; } })();
+ function nsSavePrefs(){ try { localStorage.setItem('ns-prefs', JSON.stringify(NS_PREFS)); } catch(e){} }
+ function setSort(mode){ NS_PREFS.sort = mode; nsSavePrefs(); loadColors(); }
+ function setCols(n){
+ NS_PREFS.cols = parseInt(n,10) || 6;
+ nsSavePrefs();
+ var grids = document.querySelectorAll('.colors-grid');
+ for (var i=0;i<grids.length;i++) grids[i].style.setProperty('--cols', String(NS_PREFS.cols));
+ var v = document.getElementById('nsColsVal'); if (v) v.textContent = NS_PREFS.cols;
+ }
+ function nsApplyInitial(){
+ // Default first-visit sort = color-light (per Steve 2026-05-07).
+ var sort = NS_PREFS.sort || 'color-light';
+ var cols = NS_PREFS.cols || 6;
+ var sel = document.getElementById('nsSort'); if (sel) sel.value = sort;
+ var rng = document.getElementById('nsCols'); if (rng) rng.value = cols;
+ var v = document.getElementById('nsColsVal'); if (v) v.textContent = cols;
+ var grids = document.querySelectorAll('.colors-grid');
+ for (var i=0;i<grids.length;i++) grids[i].style.setProperty('--cols', String(cols));
+ }
+
// Load colors grid
// Render a chip into the given grid element.
function renderChip(grid, color) {
@@ -1541,25 +2342,30 @@
btnRow.appendChild(drapeBtn);
var sampleBtn = document.createElement('button');
sampleBtn.className = 'sample-btn-chip'; sampleBtn.type = 'button'; sampleBtn.textContent = '📦 Sample';
- (function(n) { sampleBtn.onclick = function(e) { e.stopPropagation(); openModal(); setTimeout(function() { document.getElementById('selectedColor').value = 'Novasuede-' + n; updatePreview(); }, 100); }; })(color.name);
+ (function(n) { sampleBtn.onclick = function(e) { e.stopPropagation(); openModalForColor(n); }; })(color.name);
btnRow.appendChild(sampleBtn);
info.appendChild(btnRow);
- (function(n) { item.onclick = function() { openModal(); setTimeout(function() { document.getElementById('selectedColor').value = 'Novasuede-' + n; updatePreview(); }, 100); }; })(color.name);
+ (function(n) { item.onclick = function() { openModalForColor(n); }; })(color.name);
grid.appendChild(item);
}
function loadColors() {
+ nsApplyInitial();
var grid = document.getElementById('colorsGrid');
var newGrid = document.getElementById('newArrivalsGrid');
- // New arrivals section — only isNew chips
+ // Sorted COPY of colors based on current pref
+ var sortMode = (NS_PREFS && NS_PREFS.sort) || 'color-light';
+ var cmp = NS_SORTERS[sortMode] || NS_SORTERS['color-light'];
+ var sorted = colors.slice().sort(cmp);
+ // New arrivals section — only isNew chips, in current sort order
if (newGrid) {
newGrid.innerHTML = '';
- for (var j = 0; j < colors.length; j++) if (colors[j].isNew) renderChip(newGrid, colors[j]);
+ for (var j = 0; j < sorted.length; j++) if (sorted[j].isNew) renderChip(newGrid, sorted[j]);
}
- // Main collection — all colors
+ // Main collection — all colors, sorted
if (!grid) return;
grid.innerHTML = '';
- for (var i = 0; i < colors.length; i++) renderChip(grid, colors[i]);
+ for (var i = 0; i < sorted.length; i++) renderChip(grid, sorted[i]);
return;
// Below: legacy inline renderer (kept for diff-readability — never executes)
for (var i = 0; i < colors.length; i++) {
@@ -1854,12 +2660,32 @@
if (counter) counter.textContent = shown + ' of ' + items.length + ' shown';
}
+ // Hydrate every color in the `colors[]` array with its TRUE
+ // center-pixel hex (extracted by extract-center-hex.js → colors-data.json).
+ // One canonical hex per SKU. Falls back to NAME_HEX lookup if a slug
+ // is missing.
+ function hydrateRealHexes(then) {
+ fetch('/colors-data.json?v=2026-05-07', { cache: 'no-cache' })
+ .then(function(r){ return r.ok ? r.json() : []; })
+ .then(function(rows) {
+ if (!Array.isArray(rows) || !rows.length) { then(); return; }
+ var bySlug = {};
+ for (var i = 0; i < rows.length; i++) bySlug[rows[i].slug] = rows[i].hex;
+ for (var j = 0; j < colors.length; j++) {
+ var slug = (colors[j].name || '').toLowerCase().replace(/ /g, '-');
+ if (bySlug[slug]) colors[j].hex = bySlug[slug];
+ }
+ then();
+ })
+ .catch(function(){ then(); });
+ }
+
// Initialize on page load
+ function nsBoot(){ hydrateRealHexes(function(){ loadColors(); filterColors(); }); }
if (document.readyState === 'loading') {
- document.addEventListener('DOMContentLoaded', function(){ loadColors(); filterColors(); });
+ document.addEventListener('DOMContentLoaded', nsBoot);
} else {
- loadColors();
- filterColors();
+ nsBoot();
}
</script>
@@ -1868,5 +2694,30 @@
<!-- Start of Zendesk Widget script -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=4d4f52ea-1e3e-4837-8859-51f9abd5a82b"> </script>
<!-- End of Zendesk Widget script -->
+ <script>
+ // Rotating hero — crossfade through 8 suede colors every 6.5s.
+ // Pauses when the tab is hidden so we don't burn cycles on a background tab.
+ (function () {
+ var layers = document.querySelectorAll('.hero .hero-bg');
+ if (layers.length < 2) return;
+ var idx = 0;
+ var ROTATE_MS = 6500;
+ var timer = null;
+ function step() {
+ layers[idx].classList.remove('on');
+ idx = (idx + 1) % layers.length;
+ layers[idx].classList.add('on');
+ }
+ function start() { stop(); timer = setInterval(step, ROTATE_MS); }
+ function stop() { if (timer) { clearInterval(timer); timer = null; } }
+ document.addEventListener('visibilitychange', function () {
+ if (document.hidden) stop(); else start();
+ });
+ start();
+ })();
+ </script>
+ <!-- Central sample-request hub. Any element with data-dw-sample triggers the
+ hub modal; existing chip-level Sample buttons keep their inline modal. -->
+ <script src="https://auth.agentabrams.com/widget/sample.js" data-site="novasuede.com" defer></script>
</body>
</html>
\ No newline at end of file
diff --git a/DW-Websites/Novasuede/installation.html b/DW-Websites/Novasuede/installation.html
index baa5be19..a8261a69 100644
--- a/DW-Websites/Novasuede/installation.html
+++ b/DW-Websites/Novasuede/installation.html
@@ -84,30 +84,124 @@
border-left: 3px solid var(--secondary-color);
}
</style>
+<style id="ns-dark-sweep">
+/* ─── UNIFIED DARK SWEEP — all guide subpages match novasuede.com (2026-05-07) ─── */
+body, body * { color: #f5f1e8 !important; }
+body, header, footer, section, .container, main, article, .content,
+.specs-section, .info-section, .cta-section, .hero, .navbar, nav, .nav {
+ background: #0a0a0a !important;
+ background-color: #0a0a0a !important;
+}
+a { color: #d4b683 !important; }
+a:hover { color: #f5d97a !important; }
+h1, h2, h3, h4, h5, h6 { color: #f5f1e8 !important; }
+
+/* Card-style elements — translucent dark instead of white islands */
+.guide-section, .important-note, .warning, .tip-box, .note-box,
+.faq-item, .faq-question, .faq-answer, .step, .tool-list, .material-list,
+.callout, .info-card, .feature-card, .care-highlight {
+ background: rgba(245, 241, 232, 0.04) !important;
+ background-color: rgba(245, 241, 232, 0.04) !important;
+ border: 1px solid rgba(245, 241, 232, 0.12) !important;
+ border-radius: 4px !important;
+ box-shadow: none !important;
+}
+.guide-section *, .important-note *, .warning *, .tip-box *, .note-box *,
+.faq-item *, .faq-question *, .faq-answer *, .step *, .callout *,
+.info-card *, .feature-card *, .care-highlight * {
+ background: transparent !important;
+}
+
+/* Test-standards list cells (fire-ratings) */
+.test-standards li {
+ background: rgba(245, 241, 232, 0.04) !important;
+ border-left: 3px solid #d4b683 !important;
+ border-radius: 4px !important;
+ color: #f5f1e8 !important;
+}
+.test-standards li strong { color: #d4b683 !important; }
+
+/* Specs / data tables */
+.specs-table { background: #131316 !important; border-color: #2a2622 !important; }
+.specs-table th, .specs-table td { background: transparent !important; color: #f5f1e8 !important; border-color: #2a2622 !important; }
+.specs-table tr:hover { background: rgba(212, 182, 131, 0.06) !important; }
+.specs-table thead, .specs-table thead * { background: #1a1a1a !important; color: #d4b683 !important; }
+
+/* Important / warning / pass-fail callouts — keep semantic color but on dark */
+.important-note { border-left: 3px solid #6a9b73 !important; }
+.warning { border-left: 3px solid #b66565 !important; }
+
+/* CTA / sample buttons — hairline white-border on transparent (matches index.html hero) */
+.sample-btn, button.cta, .btn, .footer-sample-btn {
+ background: transparent !important;
+ color: #f5f1e8 !important;
+ border: 1px solid #f5f1e8 !important;
+ border-radius: 0 !important;
+ padding: 12px 32px !important;
+ font-size: 11px !important;
+ letter-spacing: 0.32em !important;
+ text-transform: uppercase !important;
+ font-weight: 400 !important;
+ transition: background 220ms ease, color 220ms ease !important;
+}
+.sample-btn:hover, button.cta:hover, .btn:hover, .footer-sample-btn:hover {
+ background: #f5f1e8 !important;
+ color: #0a0a0a !important;
+}
+
+/* Header / nav surface */
+header, .navbar, nav.navbar {
+ background: rgba(10, 10, 10, 0.78) !important;
+ -webkit-backdrop-filter: blur(14px) !important;
+ backdrop-filter: blur(14px) !important;
+ border-bottom: 1px solid rgba(245, 241, 232, 0.08) !important;
+}
+header *, .navbar *, nav.navbar * { background: transparent !important; }
+
+/* Footer brand swap → info@novasuede.com */
+footer { border-top: 1px solid rgba(245, 241, 232, 0.08) !important; }
+</style>
</head>
<body>
- <header>
- <nav class="navbar">
- <div class="nav-container">
- <div class="logo">
- <h1>Novasuede<span>™</span></h1>
- </div>
- <button class="mobile-toggle" aria-label="Toggle navigation">
- <span></span>
- <span></span>
- <span></span>
- </button>
- <ul class="nav-menu">
- <li><a href="index.html">Home</a></li>
- <li><a href="index.html#colors">Colors</a></li>
- <li><a href="index.html#specifications">Specifications</a></li>
- <li><a href="installation.html">Installation</a></li>
- <li><a href="cleaning.html">Cleaning</a></li>
- <li><a href="index.html#contact" class="cta-button">Get Sample</a></li>
- </ul>
- </div>
+ <header class="ns-header">
+ <a href="index.html" class="ns-brand" aria-label="Novasuede home">
+ <span class="ns-dot"></span>
+ <span class="ns-name">Novasuede<sup>™</sup></span>
+ </a>
+ <nav class="ns-nav" aria-label="Primary">
+ <a href="index.html">Home</a>
+ <a href="index.html#colors">Colors</a>
+ <a href="index.html#specifications">Specifications</a>
+ <a href="fire-ratings.html">Fire Ratings</a>
+ <a href="faq.html">FAQ</a>
+ <a href="about.html">About</a>
+ <button type="button" onclick="nsContactOpen()">Contact</button>
</nav>
</header>
+ <style id="ns-unified-header-style">
+ .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 !important; }
+ .ns-dot { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #b66a4d 0%, #8a4a30 60%, #5a2d1c 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", system-ui; font-size: 18px !important; font-weight: 300 !important; letter-spacing: 0.02em !important; color: #f5f1e8 !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; }
+ .ns-nav a:hover, .ns-nav button:hover { color: #ffffff !important; }
+ @media (max-width: 820px) { .ns-header { padding: 14px 18px; } .ns-nav { gap: 16px; } .ns-nav a, .ns-nav button { font-size: 13px !important; } }
+ @media (max-width: 560px) { .ns-nav a:nth-child(n+5), .ns-nav button:nth-child(n+5) { display: none; } }
+ .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 h3 { font-family: -apple-system, "SF Pro Display"; 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 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; }
+ </style>
<div class="guide-content">
<div class="guide-header">
@@ -296,16 +390,34 @@
</div>
<div class="footer-section">
<h3>Contact</h3>
- <p>Email: info@DesignerWallcoverings.com</p>
+ <p>Email: info@novasuede.com</p>
<button class="footer-sample-btn" onclick="window.location.href='index.html#contact'">Request Sample</button>
</div>
</div>
<div class="footer-bottom">
- <p>© 2025 Novasuede.com. All rights reserved.</p>
+ <p>© 2026 Novasuede.com. All rights reserved.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
+ <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="index.html#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="index.html#contact" onclick="nsContactClose()"><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</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() { document.getElementById('nsContactModal').classList.add('show'); }
+ function nsContactClose() { document.getElementById('nsContactModal').classList.remove('show'); }
+ document.addEventListener('keydown', function(e) { if (e.key === 'Escape') nsContactClose(); });
+ </script>
</body>
</html>
\ No newline at end of file
diff --git a/DW-Websites/Novasuede/server.js b/DW-Websites/Novasuede/server.js
index 805b6f20..98b632d2 100644
--- a/DW-Websites/Novasuede/server.js
+++ b/DW-Websites/Novasuede/server.js
@@ -13,15 +13,23 @@ const GEORGE_PORT = 9850;
const GEORGE_AUTH = process.env.GEORGE_AUTH ||
('Basic ' + Buffer.from('admin:I3YusisdESUNdxtrmlb3QJeu9q8ODKJO').toString('base64'));
-// POST /api/send-sample-request — forwards form data to George Gmail agent
+// POST /api/send-sample-request — routes a sample-request email to info@novasuede.com.
+// Supports multi-color requests (requested_colors: comma-separated list) AND the
+// legacy single-color field (color). At least one must be present.
app.post('/api/send-sample-request', (req, res) => {
const { name, email, company, address, city, state, zip, color, message } = req.body;
+ const requestedColorsRaw = req.body.requested_colors || req.body.requestedColors || '';
+ const requestedColors = String(requestedColorsRaw).split(',').map(s => s.trim()).filter(Boolean);
+ const colorsList = requestedColors.length ? requestedColors : (color ? [color] : []);
- if (!name || !email || !color) {
- return res.status(400).json({ error: 'Name, email, and color are required.' });
+ if (!name || !email || colorsList.length === 0) {
+ return res.status(400).json({ error: 'Name, email, and at least one color are required.' });
}
- const subject = `Novasuede Sample Request - ${color} - ${name}`;
+ const colorSummary = colorsList.length === 1
+ ? colorsList[0]
+ : `${colorsList.length} colors (${colorsList.slice(0, 3).join(', ')}${colorsList.length > 3 ? ', …' : ''})`;
+ const subject = `Novasuede Sample Request — ${colorSummary} — ${name}`;
const body = `
<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
<h2 style="color: #333; border-bottom: 2px solid #8b6914; padding-bottom: 10px;">
@@ -29,8 +37,8 @@ app.post('/api/send-sample-request', (req, res) => {
</h2>
<table style="width: 100%; border-collapse: collapse; margin-top: 15px;">
<tr style="background: #f9f6f0;">
- <td style="padding: 10px; font-weight: bold; border: 1px solid #ddd; width: 140px;">Selected Color</td>
- <td style="padding: 10px; border: 1px solid #ddd;">${color}</td>
+ <td style="padding: 10px; font-weight: bold; border: 1px solid #ddd; width: 140px;">Requested Colors (${colorsList.length})</td>
+ <td style="padding: 10px; border: 1px solid #ddd;"><strong>${colorsList.join('</strong>, <strong>')}</strong></td>
</tr>
<tr>
<td style="padding: 10px; font-weight: bold; border: 1px solid #ddd;">Full Name</td>
@@ -72,7 +80,8 @@ app.post('/api/send-sample-request', (req, res) => {
`;
const payload = JSON.stringify({
- to: 'info@designerwallcoverings.com',
+ to: process.env.MAIL_TO || 'info@novasuede.com',
+ cc: process.env.MAIL_CC || 'info@novasuede.com',
subject,
body
});
@@ -97,7 +106,7 @@ app.post('/api/send-sample-request', (req, res) => {
try {
const result = JSON.parse(data);
if (result.success) {
- console.log(`[FORM] Sample request sent for ${color} from ${name} (${email})`);
+ console.log(`[FORM] Sample request sent → ${colorSummary} from ${name} (${email})`);
res.json({ success: true, message: 'Sample request sent successfully!' });
} else {
console.error('[FORM] George error:', result.error);
diff --git a/DW-Websites/Novasuede/verify.html b/DW-Websites/Novasuede/verify.html
index 0cfccf73..319bfc5d 100644
--- a/DW-Websites/Novasuede/verify.html
+++ b/DW-Websites/Novasuede/verify.html
@@ -1,71 +1,6 @@
-<!DOCTYPE html>
-<html>
-<head>
- <title>Safari Verification</title>
- <style>
- body { font-family: Arial, sans-serif; padding: 20px; }
- .test { padding: 10px; margin: 5px 0; border: 1px solid #ccc; }
- .pass { background: #d4edda; }
- .fail { background: #f8d7da; }
- </style>
-</head>
-<body>
- <h1>Safari Compatibility Tests</h1>
-
- <div id="test1" class="test">Test 1: Basic JavaScript - <span id="result1">TESTING...</span></div>
- <div id="test2" class="test">Test 2: DOM Manipulation - <span id="result2">TESTING...</span></div>
- <div id="test3" class="test">Test 3: Event Handlers - <span id="result3">TESTING...</span></div>
- <div id="test4" class="test">Test 4: Object/Array Support - <span id="result4">TESTING...</span></div>
-
- <button onclick="testButton()">Click to Test Event</button>
- <div id="buttonResult"></div>
-
- <script>
- // Test 1: Basic JavaScript
- try {
- var x = 5;
- var y = 10;
- var z = x + y;
- document.getElementById('result1').innerHTML = 'PASS (' + z + ')';
- document.getElementById('test1').className = 'test pass';
- } catch(e) {
- document.getElementById('result1').innerHTML = 'FAIL: ' + e.message;
- document.getElementById('test1').className = 'test fail';
- }
-
- // Test 2: DOM Manipulation
- try {
- var el = document.createElement('div');
- el.innerHTML = 'Created';
- document.getElementById('result2').innerHTML = 'PASS';
- document.getElementById('test2').className = 'test pass';
- } catch(e) {
- document.getElementById('result2').innerHTML = 'FAIL: ' + e.message;
- document.getElementById('test2').className = 'test fail';
- }
-
- // Test 3: Event Handlers
- function testButton() {
- document.getElementById('buttonResult').innerHTML = 'Button clicked!';
- document.getElementById('result3').innerHTML = 'PASS';
- document.getElementById('test3').className = 'test pass';
- }
- document.getElementById('result3').innerHTML = 'Click button to test';
-
- // Test 4: Object/Array Support
- try {
- var arr = [1, 2, 3];
- var obj = {name: 'test', value: 123};
- var sum = 0;
- for (var i = 0; i < arr.length; i++) {
- sum += arr[i];
- }
- document.getElementById('result4').innerHTML = 'PASS (sum=' + sum + ', obj=' + obj.name + ')';
- document.getElementById('test4').className = 'test pass';
- } catch(e) {
- document.getElementById('result4').innerHTML = 'FAIL: ' + e.message;
- document.getElementById('test4').className = 'test fail';
- }
- </script>
-</body>
-</html>
\ No newline at end of file
+<!doctype html>
+<html lang="en"><head>
+<meta charset="utf-8"><title>Novasuede™</title>
+<meta http-equiv="refresh" content="0; url=/">
+<style>html,body{margin:0;background:#0a0a0a;color:#f5f1e8;font-family:-apple-system,sans-serif;font-weight:200;display:flex;align-items:center;justify-content:center;height:100vh;text-align:center}a{color:#d4b683;text-decoration:none;letter-spacing:.32em;text-transform:uppercase;font-size:11px}</style>
+</head><body><div><a href="/">return to novasuede.com</a></div></body></html>
← 68734aaa tighten .gitignore: add missing standing-rule patterns (tmp/
·
back to Designer Wallcoverings
·
novasuede chip: per-color data-dw-sample on Sample button + 74822dc9 →