feat: add glassmorphism effect to all content panels on nthpartyfinder page

Replace solid opaque backgrounds with translucent backdrop-blur glass
panels so the 3D sphere animation is visible (blurred) behind all text
sections as users scroll. Applies to section containers, feature cards,
install cards, terminal, crasher tags, and step numbers.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>

Author: 3 people

docs/projects/nthpartyfinder/index.html

@@ -54,7 +54,7 @@
   font-size: 16px;
   line-height: 1.65;
   color: var(--text);
-  background: var(--bg-deep);
+  background: transparent;
   -webkit-font-smoothing: antialiased;
   padding-top: 68px;
 }
@@ -471,8 +471,10 @@
   gap: 20px;
 }
 .feature-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
+  background: rgba(17, 17, 40, 0.45);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 6px;
   padding: 32px;
   transition: all .3s ease;
@@ -534,7 +536,9 @@
 }
 .step-num {
   min-width: 48px; height: 48px;
-  background: var(--bg-card);
+  background: rgba(17, 17, 40, 0.5);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
   border: 1px solid var(--neon-pink);
   border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
@@ -559,19 +563,21 @@
 
 /* ── TERMINAL ── */
 .terminal {
-  background: var(--bg);
-  border: 1px solid var(--border);
+  background: rgba(11, 11, 26, 0.5);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 8px;
   max-width: 720px;
   margin: 48px auto 0;
   overflow: hidden;
   box-shadow: 0 0 60px rgba(255,168,79,.06);
 }
 .terminal-bar {
-  background: var(--bg-card);
+  background: rgba(17, 17, 40, 0.5);
   padding: 12px 16px;
   display: flex; gap: 8px; align-items: center;
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }
 .terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
 .terminal-title {
@@ -606,8 +612,10 @@
   font-family: var(--font-mono);
   font-size: 0.8rem;
   padding: 8px 20px;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
+  background: rgba(17, 17, 40, 0.4);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 2px;
   color: var(--text-dim);
   letter-spacing: 1px;
@@ -626,8 +634,10 @@
   gap: 20px;
 }
 .install-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
+  background: rgba(17, 17, 40, 0.45);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 6px;
   padding: 28px;
   transition: all .3s;
@@ -657,12 +667,14 @@
   margin: 8px 0;
 }
 .install-card pre {
-  background: var(--bg);
+  background: rgba(6, 6, 15, 0.5);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   padding: 16px;
   border-radius: 4px;
   overflow-x: auto;
   margin-top: 12px;
-  border: 1px solid rgba(255,255,255,.04);
+  border: 1px solid rgba(255,255,255,.06);
 }
 .install-card pre code {
   font-family: var(--font-mono);
@@ -701,7 +713,7 @@
 
 /* ── FOOTER ── */
 .footer {
-  border-top: 1px solid var(--border);
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
   padding: 24px 0;
   text-align: center;
 }
@@ -769,16 +781,20 @@
   z-index: -2;
   pointer-events: none;
 }
-body::after {
-  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100vh;
-  background: rgba(0, 0, 0, 0.50);
-  z-index: -1;
-  pointer-events: none;
+/* body::after overlay removed — each section uses glass panels instead */
+
+/* ── GLASS PANELS ── */
+section > .container,
+.hero > .container,
+.bottom-cta > .container,
+.footer > .container {
+  background: rgba(6, 6, 15, 0.55);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 16px;
+  padding-top: 40px;
+  padding-bottom: 40px;
 }
 </style>
 <script type="importmap">