Refactor background bubbles for mobile: hide bubbles on desktop and implement new animated bubbles for mobile devices with adjusted styles and animations for improved visual appeal.

Author: tomups

style.css

@@ -40,44 +40,10 @@ body {
     -webkit-text-size-adjust: 100%;
 }
 
-body::before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 120%;
-    background: 
-        radial-gradient(circle 60px at 15% 20%, rgba(78, 205, 196, 0.6) 0%, transparent 70%),
-        radial-gradient(circle 80px at 85% 40%, rgba(255, 215, 0, 0.5) 0%, transparent 70%),
-        radial-gradient(circle 40px at 50% 15%, rgba(255, 107, 107, 0.5) 0%, transparent 70%),
-        radial-gradient(circle 70px at 75% 35%, rgba(149, 225, 211, 0.5) 0%, transparent 70%),
-        radial-gradient(circle 50px at 25% 60%, rgba(255, 182, 193, 0.4) 0%, transparent 70%),
-        radial-gradient(circle 45px at 60% 80%, rgba(78, 205, 196, 0.4) 0%, transparent 70%),
-        radial-gradient(circle 55px at 35% 100%, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
-    animation: bubblesFloat 15s linear infinite;
-    z-index: -1;
-    pointer-events: none;
-}
-
+/* Hide bubbles on desktop */
+body::before,
 body::after {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 120%;
-    background: 
-        radial-gradient(circle 90px at 30% 10%, rgba(78, 205, 196, 0.4) 0%, transparent 70%),
-        radial-gradient(circle 45px at 70% 25%, rgba(255, 215, 0, 0.4) 0%, transparent 70%),
-        radial-gradient(circle 65px at 10% 45%, rgba(255, 107, 107, 0.4) 0%, transparent 70%),
-        radial-gradient(circle 55px at 90% 65%, rgba(149, 225, 211, 0.4) 0%, transparent 70%),
-        radial-gradient(circle 40px at 80% 85%, rgba(255, 182, 193, 0.3) 0%, transparent 70%),
-        radial-gradient(circle 60px at 20% 110%, rgba(255, 107, 107, 0.3) 0%, transparent 70%);
-    animation: bubblesFloat 20s linear infinite;
-    animation-delay: -10s;
-    z-index: -2;
-    pointer-events: none;
+    display: none;
 }
 
 @keyframes bubblesFloat {
@@ -86,11 +52,41 @@ body::after {
         opacity: 0;
     }
     10% { 
+        transform: translateY(15%);
         opacity: 1;
     }
-    90% { 
+    20% { 
+        transform: translateY(10%);
+        opacity: 1;
+    }
+    30% { 
+        transform: translateY(5%);
+        opacity: 1;
+    }
+    40% { 
+        transform: translateY(0%);
         opacity: 1;
     }
+    50% { 
+        transform: translateY(-5%);
+        opacity: 1;
+    }
+    60% { 
+        transform: translateY(-10%);
+        opacity: 1;
+    }
+    70% { 
+        transform: translateY(-15%);
+        opacity: 1;
+    }
+    80% { 
+        transform: translateY(-20%);
+        opacity: 1;
+    }
+    90% { 
+        transform: translateY(-25%);
+        opacity: 0.8;
+    }
     100% { 
         transform: translateY(-30%);
         opacity: 0;
@@ -1146,6 +1142,42 @@ body::after {
 
 /* Mobile devices */
 @media (max-width: 480px) {
+    /* Cartoony mobile bubbles */
+    body::before {
+        display: block;
+        content: '';
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 120%;
+        background: 
+            radial-gradient(circle 40px at 20% 30%, rgba(78, 205, 196, 0.4) 0%, rgba(78, 205, 196, 0.2) 50%, rgba(0, 0, 0, 0.08) 55%, transparent 60%),
+            radial-gradient(circle 50px at 80% 20%, rgba(255, 215, 0, 0.35) 0%, rgba(255, 215, 0, 0.18) 50%, rgba(0, 0, 0, 0.08) 55%, transparent 60%),
+            radial-gradient(circle 30px at 60% 70%, rgba(255, 107, 107, 0.4) 0%, rgba(255, 107, 107, 0.2) 50%, rgba(0, 0, 0, 0.08) 55%, transparent 60%),
+            radial-gradient(circle 35px at 25% 80%, rgba(149, 225, 211, 0.35) 0%, rgba(149, 225, 211, 0.18) 50%, rgba(0, 0, 0, 0.08) 55%, transparent 60%);
+        animation: bubblesFloat 25s linear infinite;
+        z-index: -1;
+        pointer-events: none;
+    }
+    
+    body::after {
+        display: block;
+        content: '';
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 120%;
+        background: 
+            radial-gradient(circle 45px at 70% 50%, rgba(255, 182, 193, 0.3) 0%, rgba(255, 182, 193, 0.15) 50%, rgba(0, 0, 0, 0.06) 55%, transparent 60%),
+            radial-gradient(circle 30px at 15% 60%, rgba(138, 43, 226, 0.25) 0%, rgba(138, 43, 226, 0.12) 50%, rgba(0, 0, 0, 0.06) 55%, transparent 60%);
+        animation: bubblesFloat 30s linear infinite;
+        animation-delay: -15s;
+        z-index: -2;
+        pointer-events: none;
+    }
+
     .header {
         padding: 2rem 0.75rem 1.5rem;
     }