add missing .ns-modal CSS — modal HTML existed but had no styles

00e237890ad9ac80d9c7dbae312b592b437908f7 · 2026-05-19 22:10:26 -0700 · Steve Abrams

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Files touched

M index.html

Diff

commit 00e237890ad9ac80d9c7dbae312b592b437908f7
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue May 19 22:10:26 2026 -0700

    add missing .ns-modal CSS — modal HTML existed but had no styles
    
    Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 index.html | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 82 insertions(+)

diff --git a/index.html b/index.html
index 8cde191..4e322cb 100644
--- a/index.html
+++ b/index.html
@@ -85,6 +85,88 @@
 .sample-btn:hover, .cta:hover, .submit-btn:hover { background: var(--muted, var(--accent)) !important; color: var(--paper, #fff) !important; }
 </style>
   <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>
 <style id="ns-header-modal-styles">

← f4bc87c add corner-nav.js — universal top-right nav per _shared/corn · back to Glassbeadedwallpaper · add: pre-stage Meta Pixel snippet (placeholder; flip via _dw fea16fb →