fix css for SAFARI - cmon APPLE

css/style.css

@@ -7,13 +7,21 @@
     font-style: normal;
 }
 
+html, body {
+    margin: 0;
+    padding: 0;
+    background: none;
+    min-height: 100vh;
+}
+
 body {
+    background-color: #0b0f2b; /* Explicit fallback */
+    background: -webkit-linear-gradient(135deg, #0b0f2b, #1a2249);
     background: linear-gradient(135deg, #0b0f2b, #1a2249);
     font-family: 'Roboto', 'Verdana', sans-serif;
     color: #e0e7ff;
     overflow-x: hidden;
     position: relative;
-    margin: 0;
     min-height: 100vh;
     scroll-behavior: smooth;
 }
@@ -24,6 +32,7 @@ body {
     text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    background: -webkit-linear-gradient(to right, #14b8a6, #3b82f6);
     background: linear-gradient(to right, #14b8a6, #3b82f6);
     -webkit-background-clip: text;
     background-clip: text;
@@ -69,6 +78,7 @@ body {
 }
 
 .btn-minecraft {
+    background: -webkit-linear-gradient(45deg, #14b8a6, #3b82f6);
     background: linear-gradient(45deg, #14b8a6, #3b82f6);
     background-size: 300% 300%;
     border: none;
@@ -90,6 +100,7 @@ body {
     left: -100%;
     width: 100%;
     height: 100%;
+    background: -webkit-linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
     transition: left 0.5s;
 }
@@ -179,6 +190,7 @@ body {
     left: 0;
     width: 100%;
     height: 100%;
+    background: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
     z-index: 2;
 }
@@ -273,6 +285,7 @@ body {
     position: absolute;
     width: 8px;
     height: 8px;
+    background: -webkit-linear-gradient(45deg, #14b8a6, #3b82f6);
     background: linear-gradient(45deg, #14b8a6, #3b82f6);
     border-radius: 50%;
     opacity: 0;
@@ -280,6 +293,8 @@ body {
     z-index: -1;
     pointer-events: none;
     box-shadow: 0 0 15px rgba(20, 184, 166, 0.9);
+    mix-blend-mode: screen; /* Blend with background */
+    will-change: transform, opacity; /* Optimize rendering */
 }
 
 .particle.large {
@@ -307,6 +322,7 @@ body {
 }
 
 .header-bg {
+    background: -webkit-linear-gradient(180deg, rgba(10, 17, 40, 0.95), rgba(5, 15, 35, 0.95));
     background: linear-gradient(180deg, rgba(10, 17, 40, 0.95), rgba(5, 15, 35, 0.95));
     border-bottom: 1px solid rgba(255, 255, 255, 0.12);
     position: relative;
@@ -315,8 +331,10 @@ body {
 }
 
 footer {
-    z-index: 2;
     background: rgba(10, 17, 40, 0.75);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    z-index: 2;
 }
 
 footer a {
@@ -332,6 +350,7 @@ footer a:hover {
 .nav-btn {
     display: inline-block;
     padding: 0.5rem 1rem;
+    background: -webkit-linear-gradient(to right, #14b8a6, #3b82f6);
     background: linear-gradient(to right, #14b8a6, #3b82f6);
     color: white;
     text-decoration: none;
@@ -374,7 +393,9 @@ footer a:hover {
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease, visibility 0.3s ease;
+    background: -webkit-linear-gradient(135deg, rgba(10, 17, 40, 0.98), rgba(5, 15, 35, 0.98));
     background: linear-gradient(135deg, rgba(10, 17, 40, 0.98), rgba(5, 15, 35, 0.98));
+    -webkit-backdrop-filter: blur(5px);
     backdrop-filter: blur(5px);
     z-index: 20000;
     padding: 4rem 2rem;
@@ -401,6 +422,14 @@ footer a:hover {
     transform: translateX(10px);
 }
 
+/* Safari-specific fix for particle rendering */
+@media not all and (min-resolution:.001dpcm) { /* Targets Safari */
+    .particle {
+        z-index: -2; /* Lower z-index to ensure background visibility */
+        backface-visibility: hidden; /* Prevent rendering glitches */
+    }
+}
+
 @media (max-width: 768px) {
     .hero-bg {
         min-height: 500px;

css/style.min.css

@@ -9,7 +9,6 @@
       "Courier New", monospace;
     --color-teal-300: oklch(85.5% 0.138 181.071);
     --color-teal-400: oklch(77.7% 0.152 181.912);
-    --color-teal-500: oklch(70.4% 0.14 182.503);
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -752,13 +751,20 @@
   font-weight: normal;
   font-style: normal;
 }
+html, body {
+  margin: 0;
+  padding: 0;
+  background: none;
+  min-height: 100vh;
+}
 body {
+  background-color: #0b0f2b;
+  background: -webkit-linear-gradient(135deg, #0b0f2b, #1a2249);
   background: linear-gradient(135deg, #0b0f2b, #1a2249);
   font-family: 'Roboto', 'Verdana', sans-serif;
   color: #e0e7ff;
   overflow-x: hidden;
   position: relative;
-  margin: 0;
   min-height: 100vh;
   scroll-behavior: smooth;
 }
@@ -768,6 +774,7 @@ body {
   text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background: -webkit-linear-gradient(to right, #14b8a6, #3b82f6);
   background: linear-gradient(to right, #14b8a6, #3b82f6);
   -webkit-background-clip: text;
   background-clip: text;
@@ -803,6 +810,7 @@ body {
   }
 }
 .btn-minecraft {
+  background: -webkit-linear-gradient(45deg, #14b8a6, #3b82f6);
   background: linear-gradient(45deg, #14b8a6, #3b82f6);
   background-size: 300% 300%;
   border: none;
@@ -823,6 +831,7 @@ body {
   left: -100%;
   width: 100%;
   height: 100%;
+  background: -webkit-linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
   transition: left 0.5s;
 }
@@ -903,6 +912,7 @@ body {
   left: 0;
   width: 100%;
   height: 100%;
+  background: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
   z-index: 2;
 }
@@ -982,6 +992,7 @@ body {
   position: absolute;
   width: 8px;
   height: 8px;
+  background: -webkit-linear-gradient(45deg, #14b8a6, #3b82f6);
   background: linear-gradient(45deg, #14b8a6, #3b82f6);
   border-radius: 50%;
   opacity: 0;
@@ -989,6 +1000,8 @@ body {
   z-index: -1;
   pointer-events: none;
   box-shadow: 0 0 15px rgba(20, 184, 166, 0.9);
+  mix-blend-mode: screen;
+  will-change: transform, opacity;
 }
 .particle.large {
   width: 12px;
@@ -1022,6 +1035,7 @@ body {
   }
 }
 .header-bg {
+  background: -webkit-linear-gradient(180deg, rgba(10, 17, 40, 0.95), rgba(5, 15, 35, 0.95));
   background: linear-gradient(180deg, rgba(10, 17, 40, 0.95), rgba(5, 15, 35, 0.95));
   border-bottom: 1px solid rgba(255, 255, 255, 0.12);
   position: relative;
@@ -1029,8 +1043,10 @@ body {
   z-index: 2;
 }
 footer {
-  z-index: 2;
   background: rgba(10, 17, 40, 0.75);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  z-index: 2;
 }
 footer a {
   color: #2dd4bf;
@@ -1043,6 +1059,7 @@ footer a:hover {
 .nav-btn {
   display: inline-block;
   padding: 0.5rem 1rem;
+  background: -webkit-linear-gradient(to right, #14b8a6, #3b82f6);
   background: linear-gradient(to right, #14b8a6, #3b82f6);
   color: white;
   text-decoration: none;
@@ -1078,7 +1095,9 @@ footer a:hover {
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
+  background: -webkit-linear-gradient(135deg, rgba(10, 17, 40, 0.98), rgba(5, 15, 35, 0.98));
   background: linear-gradient(135deg, rgba(10, 17, 40, 0.98), rgba(5, 15, 35, 0.98));
+  -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
   z-index: 20000;
   padding: 4rem 2rem;
@@ -1101,6 +1120,12 @@ footer a:hover {
 .mobile-nav-container ul li a:hover {
   transform: translateX(10px);
 }
+@media not all and (min-resolution:.001dpcm) {
+  .particle {
+    z-index: -2;
+    backface-visibility: hidden;
+  }
+}
 @media (max-width: 768px) {
   .hero-bg {
     min-height: 500px;

js/main.js

@@ -50,8 +50,11 @@ function createParticle() {
     }, 14000);
 }
 
-// Create particles frequently
+// Delay particle creation to ensure background renders
-setInterval(createParticle, 75);
+setTimeout(() => {
+    // Create particles frequently
+    setInterval(createParticle, 75);
+}, 500); // 500ms delay
 
 function throttle(fn, wait) {
     let lastTime = 0;