← back to Corkwallcovering
Hamburger always visible on right — propagated from novasuede a815690
6298f3da28c69ff7e086de18dbd73b064a0135fc · 2026-05-08 07:35:15 -0700 · Steve
Standing rule (~/.claude/skills/dw-site-build/SKILL.md): hamburger ALWAYS
visible on the right, inline nav collapses to drop-panel at all widths.
Same edit as novasuede + silkwallcoverings.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Files touched
Diff
commit 6298f3da28c69ff7e086de18dbd73b064a0135fc
Author: Steve <steve@designerwallcoverings.com>
Date: Fri May 8 07:35:15 2026 -0700
Hamburger always visible on right — propagated from novasuede a815690
Standing rule (~/.claude/skills/dw-site-build/SKILL.md): hamburger ALWAYS
visible on the right, inline nav collapses to drop-panel at all widths.
Same edit as novasuede + silkwallcoverings.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
public/index.html | 104 +++++++++++++++++++++++++++++++-----------------------
1 file changed, 60 insertions(+), 44 deletions(-)
diff --git a/public/index.html b/public/index.html
index a98dba8..8ca5974 100644
--- a/public/index.html
+++ b/public/index.html
@@ -183,18 +183,16 @@ textarea:focus-visible,
.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; }
- }
+ /* Standing UX (2026-05-08 Steve directive): hamburger ALWAYS visible
+ on the right at all viewports. Inline ns-nav collapses into the
+ drop-panel under the header on click. Premium-minimal pattern.
+ Reflected as standing rule in ~/.claude/skills/dw-site-build/SKILL.md. */
+ .ns-header { flex-wrap: wrap; }
+ .ns-nav { display: none !important; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 0 4px; }
+ .ns-nav.open { display: flex !important; }
+ .ns-nav a, .ns-nav button { padding: 10px 0 !important; border-bottom: 1px solid rgba(245,241,232,0.08); width: 100%; text-align: left; }
+ .ns-header .mobile-toggle { display: flex !important; }
+ @media (max-width: 820px) { .ns-header { padding: 14px 18px; } }
.ns-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 200; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(6px); }
.ns-modal.show { display: flex; }
.ns-modal-card { max-width: 460px; width: 100%; background: #141414 !important; border: 1px solid rgba(245,241,232,0.14); border-radius: 6px; padding: 28px 30px 30px; position: relative; }
@@ -309,50 +307,58 @@ textarea:focus-visible,
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;
- }
+ /* Hamburger button — ALWAYS visible on the right (Steve 2026-05-08). */
+ header .nav-container { flex-wrap: wrap; }
+ header nav { display: none; flex-basis: 100%; flex-direction: column; gap: 6px; padding: 16px 0 6px; }
+ header nav.open { display: flex; }
+ header nav a { padding: 10px 0; border-bottom: 1px solid rgba(245,241,232,0.1); }
+ header .mobile-toggle {
+ display: flex !important;
+ flex-direction: column;
+ gap: 5px;
+ background: transparent;
+ border: 0;
+ cursor: pointer;
+ padding: 8px;
}
- @media (min-width: 761px) {
- header .mobile-toggle { display: none !important; }
+ header .mobile-toggle span {
+ width: 22px; height: 1.5px;
+ background: #f5f1e8;
+ display: block;
}
</style>
+<style id="ns-gold-kill">
+ /* novasuede: kill gold-solid fills, off-white instead. Edge color stays gold. */
+ .new-badge, .new-arrivals-pill,
+ .color-filter-btn.active, .drapery-btn,
+ .sample-btn-chip, .cb-cta {
+ background: #f5f1e8 !important;
+ color: #0a0a0a !important;
+ border-color: #f5f1e8 !important;
+ }
+ .new-badge:hover, .new-arrivals-pill:hover,
+ .color-filter-btn.active:hover, .drapery-btn:hover,
+ .sample-btn-chip:hover, .cb-cta:hover {
+ background: #fff !important;
+ color: #0a0a0a !important;
+ }
+ </style>
<header class="ns-header">
- <a href="#home" class="ns-brand" aria-label="Atelier Saddle home">
+ <a href="/" class="ns-brand" aria-label="Home">
<span class="ns-dot"></span>
<span class="ns-name">Atelier Saddle</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>
@@ -361,7 +367,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@corkwallcovering.com?subject=Atelier%20Saddle%20inquiry"><span class="ico">✉️</span><div class="txt"><b>Email Us</b><span>info@corkwallcovering.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>
@@ -380,6 +386,16 @@ 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>
@@ -449,8 +465,8 @@ textarea:focus-visible,
<footer>
<div class="footer-grid">
<div>
- <div class="footer-brand">Cork Wallcovering</div>
- <p class="footer-text">Cork Wallcovering is a specialty cork archive within the Designer Wallcoverings family. Real samples ship free.</p>
+ <div class="footer-brand">Atelier Saddle</div>
+ <p class="footer-text">Atelier Saddle — 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">
← 860fc5a graphic-loop pass 13: real footer brand + Facebook link + OG
·
back to Corkwallcovering
·
sort-skill canonical: add light-dark/dark-light/wheel + help ca2ef3b →