← back to Wallpaperdefinitions
add ns-contact modal (CSS + HTML + JS) — info@wallpaperdefinitions.com
8a7873ccb11f9dca0e3ad60fc9ea78d20359798a · 2026-05-19 22:10:25 -0700 · Steve Abrams
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Files touched
Diff
commit 8a7873ccb11f9dca0e3ad60fc9ea78d20359798a
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Tue May 19 22:10:25 2026 -0700
add ns-contact modal (CSS + HTML + JS) — info@wallpaperdefinitions.com
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
public/index.html | 100 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 100 insertions(+)
diff --git a/public/index.html b/public/index.html
index ef17103..8fe50fa 100644
--- a/public/index.html
+++ b/public/index.html
@@ -269,6 +269,88 @@ body {
})();
</script>
<script src="/corner-nav.js" defer></script>
+<style id="ns-modal-css">
+/* ── Contact modal (.ns-modal) — added by fanout-12 ── */
+.ns-modal {
+ display: none;
+ position: fixed; inset: 0; z-index: 1000;
+ background: rgba(10,10,10,0.78);
+ backdrop-filter: blur(6px);
+ align-items: center; justify-content: center;
+ padding: 24px;
+ font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
+}
+.ns-modal.show { display: flex; }
+.ns-modal-card {
+ position: relative;
+ background: #f5f1e8;
+ color: #0a0a0a;
+ width: 100%; max-width: 480px;
+ padding: 36px 32px 32px;
+ border-radius: 4px;
+ box-shadow: 0 30px 80px rgba(0,0,0,0.55);
+ animation: nsModalIn 220ms cubic-bezier(.2,.7,.2,1);
+}
+@keyframes nsModalIn { from { opacity:0; transform: translateY(8px) scale(.985); } to { opacity:1; transform:none; } }
+.ns-modal-card .close-x {
+ position: absolute; top: 10px; right: 12px;
+ width: 32px; height: 32px;
+ background: transparent; border: 0; cursor: pointer;
+ font-size: 22px; line-height: 1; color: #6e6e68;
+}
+.ns-modal-card .close-x:hover { color: #0a0a0a; }
+.ns-modal-card h3 {
+ margin: 0 0 4px;
+ font: 300 22px/1.2 -apple-system, "SF Pro Display", system-ui, sans-serif;
+ letter-spacing: -0.005em;
+ color: #0a0a0a;
+}
+.ns-modal-card .sub {
+ margin: 0 0 22px;
+ font: 13px/1.45 -apple-system, "SF Pro Text", system-ui, sans-serif;
+ color: #6e6e68;
+ letter-spacing: 0.005em;
+}
+.ns-actions { display: flex; flex-direction: column; gap: 10px; }
+.ns-action {
+ display: flex; align-items: center; gap: 14px;
+ padding: 14px 16px;
+ background: #ffffff;
+ border: 1px solid rgba(10,10,10,0.08);
+ border-radius: 3px;
+ color: #0a0a0a !important;
+ text-decoration: none !important;
+ font: 400 14px/1.3 -apple-system, "SF Pro Text", system-ui, sans-serif;
+ cursor: pointer;
+}
+.ns-action:hover { background: #fffdf7; border-color: rgba(10,10,10,0.18); }
+.ns-action .ico {
+ flex-shrink: 0;
+ width: 38px; height: 38px;
+ display: inline-flex; align-items: center; justify-content: center;
+ background: rgba(10,10,10,0.04);
+ border-radius: 50%;
+ font-size: 18px;
+}
+.ns-action .txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
+.ns-action .txt b { font-weight: 500; font-size: 14px; color: #0a0a0a; }
+.ns-action .txt span {
+ font-weight: 400; font-size: 12px; color: #6e6e68;
+ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+@media (max-width: 480px) {
+ .ns-modal { padding: 14px; }
+ .ns-modal-card { padding: 28px 22px 22px; }
+}
+[data-theme="dark"] .ns-modal-card { background: #14110c; color: #f5f1e8; }
+[data-theme="dark"] .ns-modal-card h3 { color: #f5f1e8; }
+[data-theme="dark"] .ns-modal-card .sub { color: #a39c8b; }
+[data-theme="dark"] .ns-action { background: rgba(245,241,232,0.04); border-color: rgba(245,241,232,0.10); color: #f5f1e8 !important; }
+[data-theme="dark"] .ns-action:hover { background: rgba(245,241,232,0.08); border-color: rgba(245,241,232,0.22); }
+[data-theme="dark"] .ns-action .ico { background: rgba(245,241,232,0.08); }
+[data-theme="dark"] .ns-action .txt b { color: #f5f1e8; }
+[data-theme="dark"] .ns-action .txt span { color: #a39c8b; }
+</style>
</head>
<body>
@@ -631,5 +713,23 @@ toggle.addEventListener('click', () => {
data-mode="retail"
defer onerror="this.remove()"></script>
+<!-- Contact modal — invisible until nsContactOpen() adds .show class. Added by fanout-12. -->
+<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="mailto:info@wallpaperdefinitions.com?subject=Wallpaperdefinitions%20inquiry"><span class="ico">✉</span><div class="txt"><b>Email Us</b><span>info@wallpaperdefinitions.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>
+ if (typeof window.nsContactOpen !== 'function') {
+ window.nsContactOpen = function () { var m = document.getElementById('nsContactModal'); if (m) m.classList.add('show'); };
+ window.nsContactClose = function () { var m = document.getElementById('nsContactModal'); if (m) m.classList.remove('show'); };
+ }
+</script>
</body>
</html>
← 241cf1f add corner-nav.js — universal top-right nav per _shared/corn
·
back to Wallpaperdefinitions
·
scrub residual DW vendor names (Arte International + Lee Jof 7de9c48 →