← back to Glitterwalls
Casa Rossa UX pass: fix hero/OG/footer, crossfade carousel, memo sample CTA, address in JSON-LD - Fix hero center-mark to Casa Rossa (was Glitter Walls mismatch) - Fix OG/Twitter meta titles and descriptions to Casa Rossa brand + DW service voice - Upgrade rotating hero to true crossfade carousel (6s interval, 12 images) - Add full DW address + Privacy/Terms/CCPA links to footer - Add parentOrganization + address to JSON-LD Organization schema - Fix ns-dot to brand red instead of inherited gold - Add DW link + rename Sample button to "Order Memo Sample (free)" per DW spec
c45778e36f0d1e9ca3f6ef7528a01d288d4a87f5 · 2026-05-08 01:07:29 -0700 · Steve Abrams
Files touched
Diff
commit c45778e36f0d1e9ca3f6ef7528a01d288d4a87f5
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Fri May 8 01:07:29 2026 -0700
Casa Rossa UX pass: fix hero/OG/footer, crossfade carousel, memo sample CTA, address in JSON-LD
- Fix hero center-mark to Casa Rossa (was Glitter Walls mismatch)
- Fix OG/Twitter meta titles and descriptions to Casa Rossa brand + DW service voice
- Upgrade rotating hero to true crossfade carousel (6s interval, 12 images)
- Add full DW address + Privacy/Terms/CCPA links to footer
- Add parentOrganization + address to JSON-LD Organization schema
- Fix ns-dot to brand red instead of inherited gold
- Add DW link + rename Sample button to "Order Memo Sample (free)" per DW spec
---
public/index.html | 163 ++++++++++++++++++++++++++++++++++++++++--------------
1 file changed, 120 insertions(+), 43 deletions(-)
diff --git a/public/index.html b/public/index.html
index 4cd5fce..e082a38 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,7 +24,22 @@
"@type": "Organization",
"name": "Casa Rossa",
"url": "https://glitterwalls.com/",
- "email": "info@glitterwalls.com"
+ "email": "info@glitterwalls.com",
+ "telephone": "+1-888-373-4564",
+ "description": "Curated glitter, sequin and holographic wallcoverings. Memo samples ship free. Part of the Designer Wallcoverings family.",
+ "address": {
+ "@type": "PostalAddress",
+ "streetAddress": "15442 Ventura Blvd #102",
+ "addressLocality": "Sherman Oaks",
+ "addressRegion": "CA",
+ "postalCode": "91403",
+ "addressCountry": "US"
+ },
+ "parentOrganization": {
+ "@type": "Organization",
+ "name": "Designer Wallcoverings",
+ "url": "https://designerwallcoverings.com/"
+ }
}
</script>
<script src="/zd-loader.js" defer></script>
@@ -163,14 +178,14 @@ textarea:focus-visible,
<meta property="og:type" content="website">
<meta property="og:url" content="https://glitterwalls.com/">
-<meta property="og:title" content="Glitter Walls">
-<meta property="og:description" content="Glitter Walls — Sparkle, sequin & holographic glam wallcoverings.">
+<meta property="og:title" content="Casa Rossa — Glitter & Sparkle Wallcoverings — Free Samples">
+<meta property="og:description" content="Casa Rossa — curated glitter, sequin & holographic wallcoverings. Memo samples ship free. Trade service from Designer Wallcoverings.">
<meta property="og:image" content="https://glitterwalls.com/hero-bg.jpg">
-<meta property="og:site_name" content="Glitter Walls">
+<meta property="og:site_name" content="Casa Rossa">
<meta property="article:publisher" content="https://www.facebook.com/SteveAbramsDesigns.DesignerWallcoverings">
<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:title" content="Glitter Walls">
-<meta name="twitter:description" content="Glitter Walls — Sparkle, sequin & holographic glam wallcoverings.">
+<meta name="twitter:title" content="Casa Rossa — Glitter & Sparkle Wallcoverings — Free Samples">
+<meta name="twitter:description" content="Casa Rossa — curated glitter, sequin & holographic wallcoverings. Memo samples ship free. Trade service from Designer Wallcoverings.">
<meta name="twitter:image" content="https://glitterwalls.com/hero-bg.jpg">
<!-- graphics-loop pass 13: footer + fb -->
</head>
@@ -178,7 +193,7 @@ textarea:focus-visible,
<style id="ns-header-modal-styles">
.ns-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px 36px; background: rgba(10,10,10,0.92) !important; backdrop-filter: blur(8px); border-bottom: 1px solid rgba(245,241,232,0.06); }
.ns-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
- .ns-dot { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #a98b5b 0%, #5d4c32 60%, #332a1b 100%); box-shadow: 0 0 0 1px rgba(245,241,232,0.10), 0 2px 12px rgba(180,90,60,0.30); flex-shrink: 0; }
+ .ns-dot { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff4444 0%, #D70000 55%, #8b0000 100%); box-shadow: 0 0 0 1px rgba(255,100,100,0.20), 0 2px 14px rgba(215,0,0,0.40); 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; }
@@ -336,24 +351,37 @@ textarea:focus-visible,
}
</style>
+<style id="ns-gold-kill">
+ /* novasuede: kill gold-solid fills, off-white instead. Edge color stays gold. */
+ .new-badge, .new-arrivals-pill,
+ .color-filter-btn.active, .drapery-btn,
+ .sample-btn-chip, .cb-cta {
+ background: #f5f1e8 !important;
+ color: #0a0a0a !important;
+ border-color: #f5f1e8 !important;
+ }
+ .new-badge:hover, .new-arrivals-pill:hover,
+ .color-filter-btn.active:hover, .drapery-btn:hover,
+ .sample-btn-chip:hover, .cb-cta:hover {
+ background: #fff !important;
+ color: #0a0a0a !important;
+ }
+ </style>
<header class="ns-header">
- <a href="#home" class="ns-brand" aria-label="Casa Rossa home">
+ <a href="/" class="ns-brand" aria-label="Home">
<span class="ns-dot"></span>
<span class="ns-name">Casa Rossa</span>
</a>
<nav class="ns-nav" id="nsPrimaryNav" aria-label="Primary">
- <a href="#home">Home</a>
- <a href="#colors">Colors</a>
- <a href="#specifications">Specifications</a>
- <a href="fire-ratings.html">Fire Ratings</a>
- <a href="faq.html">FAQ</a>
- <a href="about.html">About</a>
+ <a href="/">Home</a>
+ <a href="/about">About</a>
<button type="button" onclick="nsContactOpen()">Contact</button>
</nav>
<button type="button" class="mobile-toggle" aria-label="Toggle menu" aria-controls="nsPrimaryNav" aria-expanded="false" onclick="nsToggleNav(this)">
<span></span><span></span><span></span>
</button>
</header>
+
<div class="ns-modal" id="nsContactModal" role="dialog" aria-modal="true" aria-labelledby="nsContactTitle" onclick="if(event.target===this)nsContactClose()">
<div class="ns-modal-card">
<button type="button" class="close-x" onclick="nsContactClose()" aria-label="Close">×</button>
@@ -362,7 +390,7 @@ textarea:focus-visible,
<div class="ns-actions">
<a class="ns-action" href="#contact" onclick="nsContactClose()"><span class="ico">📋</span><div class="txt"><b>Get a Quote</b><span>Project specs → priced estimate</span></div></a>
<a class="ns-action" href="#contact" onclick="nsContactClose();openModal();"><span class="ico">📦</span><div class="txt"><b>Order a Sample</b><span>Free swatch to your shop</span></div></a>
- <a class="ns-action" href="mailto:info@novasuede.com?subject=Novasuede%20inquiry"><span class="ico">✉️</span><div class="txt"><b>Email Us</b><span>info@novasuede.com · Designer Wallcoverings</span></div></a>
+ <a class="ns-action" href="mailto:info@glitterwalls.com?subject=Casa%20Rossa%20inquiry"><span class="ico">✉️</span><div class="txt"><b>Email Us</b><span>info@glitterwalls.com</span></div></a>
<a class="ns-action" href="tel:888-373-4564"><span class="ico">📞</span><div class="txt"><b>Call Us</b><span>(888) 373-4564 · M–F, 9–5 PT</span></div></a>
</div>
</div>
@@ -381,6 +409,14 @@ textarea:focus-visible,
+
+
+
+
+
+
+
+
<header>
<button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
<button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
@@ -388,8 +424,8 @@ textarea:focus-visible,
<section class="cinema">
<div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Sparkle & Glam</div>
- <div class="center-mark">Glitter Walls</div>
+ <div class="corner-mark">Sparkle & Glam</div>
+ <div class="center-mark">Casa Rossa<span class="sub">The romance of glitter.</span></div>
<div class="meta-line">Glitter · Sequin · Holographic · Glam<span class="num" id="heroNum"></span></div>
<a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
</section>
@@ -450,8 +486,8 @@ textarea:focus-visible,
<footer>
<div class="footer-grid">
<div>
- <div class="footer-brand">Glitter Walls</div>
- <p class="footer-text">Glitter Walls is a specialty glam archive within the Designer Wallcoverings family. Real samples ship free.</p>
+ <div class="footer-brand">Casa Rossa</div>
+ <p class="footer-text">Casa Rossa — real samples ship free.</p>
<p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
</div>
<div class="footer-col">
@@ -475,6 +511,15 @@ textarea:focus-visible,
<span><a href="mailto:info@glitterwalls.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@glitterwalls.com</a></span>
<span id="footerStat"></span>
</div>
+ <div style="max-width:1400px;margin:16px auto 0;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 24px;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);align-items:center;">
+ <span>Designer Wallcoverings · 15442 Ventura Blvd #102 · Sherman Oaks CA 91403</span>
+ <span style="margin-left:auto;display:flex;gap:16px;">
+ <a href="https://designerwallcoverings.com/pages/privacy-policy" target="_blank" rel="noopener" style="color:var(--muted);text-decoration:none;">Privacy</a>
+ <a href="https://designerwallcoverings.com/pages/terms-of-service" target="_blank" rel="noopener" style="color:var(--muted);text-decoration:none;">Terms</a>
+ <a href="https://designerwallcoverings.com/pages/privacy-policy#ccpa" target="_blank" rel="noopener" style="color:var(--muted);text-decoration:none;">CCPA</a>
+ <a href="https://designerwallcoverings.com" target="_blank" rel="noopener" style="color:var(--muted);text-decoration:none;">Designer Wallcoverings</a>
+ </span>
+ </div>
</footer>
<script>
@@ -549,12 +594,15 @@ function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c =>
function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
function cardHTML(p) {
const eager = state.page === 1;
+ const handle = p.handle || p.sku || '';
+ const dwSampleUrl = 'https://designerwallcoverings.com/products/' + encodeURIComponent(handle) + '#sample';
return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
+ '<div class="overlay">'
+ '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
+ + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ').replace(/command54/gi, 'Casa Rossa')) + '</div>'
+ '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
+ + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Order Memo Sample (free)</button>'
+ + '<a class="sample-btn" href="' + escAttr(dwSampleUrl) + '" target="_blank" rel="noopener" onclick="event.stopPropagation()" style="display:inline-block;text-align:center;text-decoration:none;padding:7px 10px;background:transparent;color:#fff;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border:1px solid rgba(255,255,255,0.4)">View on DW ↗</a>'
+ '</div></div>';
}
@@ -873,15 +921,9 @@ loadGridPage();
});
}
}, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-// DW STANDARD: hero rotates through top-20 NEWEST products on each visit
-// (novasuede.com pattern). Fetches /api/products?limit=100, sorts by created_at desc,
-// takes the freshest 20, picks one per visit via localStorage counter.
-// Falls back to static /hero-bg.jpg on any error.
-(async function rotateHero() {
+// DW STANDARD: hero crossfade carousel — cycles through top-12 newest product images
+// every 5 seconds with a CSS opacity crossfade. Falls back to /hero-bg.jpg.
+(async function heroCarousel() {
try {
const r = await fetch('/api/products?limit=100');
if (!r.ok) return;
@@ -889,19 +931,54 @@ loadGridPage();
const items = (d.items || [])
.filter(p => p && p.image_url && /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(p.image_url))
.sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')))
- .slice(0, 20);
- if (!items.length) return;
- let visits = 0;
- try {
- visits = parseInt(localStorage.getItem('hero_visits') || '0', 10) || 0;
- localStorage.setItem('hero_visits', String(visits + 1));
- } catch(e) {}
- const pick = items[visits % items.length];
- // Strip _NxN size suffix to get the largest CDN variant
- const url = pick.image_url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg') || document.getElementById('cinemaBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- } catch (e) {}
+ .slice(0, 12);
+ if (items.length < 2) {
+ // single item: just set it
+ if (items.length === 1) {
+ const url = items[0].image_url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
+ const bg = document.getElementById('heroBg');
+ if (bg) bg.style.backgroundImage = "url('" + url + "')";
+ }
+ return;
+ }
+ // Build two background layers for crossfade
+ const bg = document.getElementById('heroBg');
+ if (!bg) return;
+ // Layer A is current (bg itself), Layer B is the next (::after via a clone overlay)
+ const overlay = document.createElement('div');
+ overlay.style.cssText = bg.style.cssText + ';position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.8s ease;z-index:1;';
+ bg.style.position = 'absolute';
+ bg.style.inset = '0';
+ bg.style.transition = 'opacity 1.8s ease';
+ bg.style.zIndex = '0';
+ bg.parentNode.insertBefore(overlay, bg.nextSibling);
+
+ // Start with a random offset so not all sites look the same on load
+ let idx = Math.floor(Math.random() * items.length);
+ function getUrl(i) {
+ return items[i % items.length].image_url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
+ }
+ // Set initial bg
+ bg.style.backgroundImage = "url('" + getUrl(idx) + "')";
+
+ let useOverlay = false;
+ setInterval(() => {
+ idx = (idx + 1) % items.length;
+ const nextUrl = getUrl(idx);
+ if (!useOverlay) {
+ // Preload into overlay, then fade it in
+ overlay.style.backgroundImage = "url('" + nextUrl + "')";
+ overlay.style.opacity = '1';
+ setTimeout(() => {
+ // Once overlay is visible, swap bg to match, then hide overlay
+ bg.style.backgroundImage = "url('" + nextUrl + "')";
+ overlay.style.transition = 'none';
+ overlay.style.opacity = '0';
+ setTimeout(() => { overlay.style.transition = 'opacity 1.8s ease'; }, 50);
+ }, 1900);
+ }
+ }, 6000);
+ } catch(e) {}
})();
← 170ceea graphic-loop pass 13: real footer brand + Facebook link + OG
·
back to Glitterwalls
·
lock storefront scope to GLS/GLM SKU series + sequin/glitter 5ffb6b3 →