← back to Raffiawalls
fix: contact modal CSS+HTML (was rendering inline as raw emoji/links)
558b9a75b61767025ad612e451c9f73a81769e6c · 2026-05-13 14:46:30 -0700 · Steve Abrams
Files touched
Diff
commit 558b9a75b61767025ad612e451c9f73a81769e6c
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Wed May 13 14:46:30 2026 -0700
fix: contact modal CSS+HTML (was rendering inline as raw emoji/links)
---
public/index.html | 107 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 107 insertions(+)
diff --git a/public/index.html b/public/index.html
index 8796208..1826ec1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -194,6 +194,99 @@ textarea:focus-visible,
.ns-header .mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.ns-header .mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ns-header .mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
+
+ /* ── Contact modal (.ns-modal) ──
+ Was missing on this site — modal rendered inline at top of
+ page with raw emoji icons + default-blue underlined links.
+ Added by ns-contact-modal-fanout.js. */
+ .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;
+ transition: color 160ms;
+ }
+ .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;
+ transition: background 160ms, border-color 160ms, transform 80ms;
+ }
+ .ns-action:hover { background: #fffdf7; border-color: rgba(10,10,10,0.18); }
+ .ns-action:active { transform: scale(.997); }
+ .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;
+ line-height: 1;
+ }
+ .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; letter-spacing: 0; }
+ .ns-action .txt span {
+ font-weight: 400; font-size: 12px; color: #6e6e68;
+ letter-spacing: 0.005em;
+ 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>
<style id="ns-gold-kill">
/* novasuede: kill gold-solid fills, off-white instead. Edge color stays gold. */
@@ -227,6 +320,20 @@ textarea:focus-visible,
</header>
+<!-- Contact modal — invisible until nsContactOpen() adds .show class. -->
+<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();if(typeof openModal==='function')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@raffiawalls.com?subject=Raffia%20Walls%20inquiry"><span class="ico">✉</span><div class="txt"><b>Email Us</b><span>info@raffiawalls.com</span></div></a>
+ <a class="ns-action" href="tel:888-373-4564"><span class="ico">📞</span><div class="txt"><b>Call Us</b><span>(888) 373-4564 · M–F, 9–5 PT</span></div></a>
+ </div>
+ </div>
+</div>
<script>
function nsContactOpen() { var m = document.getElementById('nsContactModal'); if (m) m.classList.add('show'); }
function nsContactClose() { var m = document.getElementById('nsContactModal'); if (m) m.classList.remove('show'); }
← b9bcb6e embed Big Red customer chat (lower-left, retail mode, vendor
·
back to Raffiawalls
·
corner-nav: fix injection — script tag was landing inside HT 70491c7 →