From 94d27a65a59ed045c9821fea6d32b0d4521c54ef Mon Sep 17 00:00:00 2001
From: Jake Shore <jakeshore@Jakes-Mac-mini.local>
Date: Mon, 26 Jan 2026 20:29:34 -0500
Subject: [PATCH] Fix mobile: fallbacks for backdrop-filter, gradient-text,
 z-index

---
 index.html | 49 +++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 39 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index cc1a3c2..3d53046 100644
--- a/index.html
+++ b/index.html
@@ -21,14 +21,20 @@
     
     body {
       font-family: 'Inter', system-ui, -apple-system, sans-serif;
-      background: #030303;
-      color: #fff;
+      background-color: #030303;
+      color: #ffffff;
       line-height: 1.6;
       -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
       overflow-x: hidden;
       min-width: 320px;
     }
     
+    /* Ensure text is always visible */
+    h1, h2, h3, h4, h5, h6, p, span, a, li, div {
+      color: inherit;
+    }
+    
     /* Utility Classes */
     .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
     .container-lg { max-width: 1400px; margin: 0 auto; padding: 0 1rem; }
@@ -94,13 +100,21 @@
     
     /* Components */
     .glass {
-      background: rgba(255, 255, 255, 0.03);
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      border: 1px solid rgba(255, 255, 255, 0.08);
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    
+    @supports (backdrop-filter: blur(20px)) {
+      .glass {
+        background: rgba(255, 255, 255, 0.03);
+        backdrop-filter: blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+      }
     }
     
     .gradient-text {
+      color: #22c55e;
       background: linear-gradient(135deg, #22c55e, #10b981, #06b6d4, #8b5cf6);
       background-size: 200% 200%;
       -webkit-background-clip: text;
@@ -109,6 +123,13 @@
       animation: gradient-shift 6s ease infinite;
     }
     
+    @supports not (-webkit-background-clip: text) {
+      .gradient-text {
+        color: #22c55e;
+        background: none;
+      }
+    }
+    
     @keyframes gradient-shift {
       0%, 100% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
@@ -171,13 +192,19 @@
     }
     
     .navbar.scrolled {
-      background: rgba(3, 3, 3, 0.8);
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
+      background: rgba(3, 3, 3, 0.95);
       padding: 0.75rem 0;
       border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }
     
+    @supports (backdrop-filter: blur(20px)) {
+      .navbar.scrolled {
+        background: rgba(3, 3, 3, 0.8);
+        backdrop-filter: blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+      }
+    }
+    
     .logo {
       display: flex;
       align-items: center;
@@ -245,6 +272,7 @@
     .hero-bg {
       position: absolute;
       inset: 0;
+      z-index: 0;
       background: 
         radial-gradient(ellipse 80% 50% at 50% -20%, rgba(34, 197, 94, 0.12), transparent),
         radial-gradient(ellipse 60% 40% at 80% 50%, rgba(6, 182, 212, 0.08), transparent),
@@ -255,6 +283,7 @@
     .hero-grid {
       position: absolute;
       inset: 0;
+      z-index: 0;
       background-image: 
         linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
         linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
@@ -1153,7 +1182,7 @@
     <div class="hero-bg"></div>
     <div class="hero-grid"></div>
     
-    <div class="container text-center" style="position: relative;">
+    <div class="container text-center" style="position: relative; z-index: 1;">
       <div class="badge glass" style="margin-bottom: 2rem;">
         <span class="badge-dot"></span>
         Now in Early Access — Limited Spots