tweaked ui

index.html

@@ -612,7 +612,7 @@
                         </a>
                     </div>
                 </div>
-                <img src="https://app.greenweb.org/api/v3/greencheckimage/vyla.cc?nocache=true"
+                <img src="https://app.greenweb.org/api/v3/greencheckimage/vyla.cc"
                     alt="This website runs on green hosting - verified by thegreenwebfoundation.org" width="200"
                     height="95" loading="lazy" decoding="async">
             </div>

src/scripts/animations/light-rays.js

@@ -36,14 +36,21 @@ export function initLightRays(container, options = {}) {
     const blend = options.blend ?? 0.65;
     const raysSpeed = options.raysSpeed ?? 1.8;
     const lightSpread = options.lightSpread ?? 0.7;
-    const rayLength = options.rayLength ?? 0.6;
+    const isMobile = window.innerWidth < 768;
+    console.log('Mobile detection:', isMobile, 'window.innerWidth:', window.innerWidth);
+    const baseRayLength = options.rayLength ?? 0.6;
+    const rayLength = isMobile ? baseRayLength * 3.0 : baseRayLength * 1.8;
     const pulsating = Boolean(options.pulsating);
-    const fadeDistance = options.fadeDistance ?? 0.4;
+    const baseFadeDistance = options.fadeDistance ?? 0.4;
+    const fadeDistance = isMobile ? baseFadeDistance * 3.0 : baseFadeDistance * 1.8;
+    const baseGlowFalloffFactor = 4.9;
+    const glowFalloffFactor = isMobile ? baseGlowFalloffFactor / 3.0 : baseGlowFalloffFactor / 1.8;
     const saturation = options.saturation ?? 1.4;
     const followMouse = options.followMouse !== false;
     const mouseInfluence = options.mouseInfluence ?? 0.12;
     const noiseAmount = options.noiseAmount ?? 0.08;
     const distortion = options.distortion ?? 0.04;
+    console.log('Ray length:', rayLength, 'Fade distance:', fadeDistance, 'Glow falloff factor:', glowFalloffFactor);
 
     const mouse = { x: 0.5, y: 0.5 };
     const smoothMouse = { x: 0.5, y: 0.5 };
@@ -96,6 +103,7 @@ export function initLightRays(container, options = {}) {
         uniform float mouseInfluence;
         uniform float noiseAmount;
         uniform float distortion;
+        uniform float glowFalloffFactor;
 
         float noise(vec2 st) {
             return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
@@ -149,7 +157,7 @@ export function initLightRays(container, options = {}) {
 
             float maxDim = max(iResolution.x, iResolution.y);
             float distFromSource = length(coord - rayPos) / maxDim;
-            float glowFalloff = clamp(1.3 - distFromSource * 2.5, 0.4, 1.6);
+            float glowFalloff = clamp(1.01 - distFromSource * glowFalloffFactor, 0.01, 1.6);
             color.rgb *= glowFalloff;
 
             if (saturation != 1.0) {
@@ -179,7 +187,8 @@ export function initLightRays(container, options = {}) {
         mousePos: { value: [0.5, 0.5] },
         mouseInfluence: { value: mouseInfluence },
         noiseAmount: { value: noiseAmount },
-        distortion: { value: distortion }
+        distortion: { value: distortion },
+        glowFalloffFactor: { value: glowFalloffFactor }
     };
 
     const geometry = new Triangle(gl);

src/styles/components/buttons.css

@@ -55,7 +55,7 @@
 }
 
 .hero-cta:hover {
-    transform: scale(0.97);
+    transform: scale(0.99);
 }
 
 .hero-cta:active {
@@ -84,10 +84,6 @@
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
-.hero-cta-light:hover {
-    transform: translateY(-1px);
-}
-
 @media (hover: none) and (pointer: coarse) {
     .btn {
         min-height: 48px;

src/styles/components/glass-surface.css

@@ -41,12 +41,4 @@
     white-space: nowrap;
     border-radius: inherit;
     pointer-events: auto;
-}
-
-.glass-surface:hover .glass-surface__backdrop {
-    border-color: rgba(255, 255, 255, 0.45);
-    box-shadow:
-        inset 0 1px 2px 0 rgba(255, 255, 255, 0.6),
-        inset 0 -1px 1px 0 rgba(255, 255, 255, 0.15),
-        0 6px 20px 0 rgba(0, 0, 0, 0.35);
 }

src/styles/components/marquee.css

@@ -24,7 +24,7 @@
 }
 
 .marquee-row {
-    overflow: hidden;
+    overflow: visible;
     width: 100%;
     transform: translateZ(0);
 }
@@ -74,4 +74,4 @@
         animation: none !important;
         transform: none !important;
     }
-}
+}

src/styles/sections/cta-banner.css

@@ -1,6 +1,6 @@
 .cta-footer-wrap {
     position: relative;
-    overflow: hidden;
+    overflow: visible;
     isolation: isolate;
     background: #000000;
     width: 100%;
@@ -9,9 +9,9 @@
 
 .cta-rays-container {
     position: absolute;
-    inset: 0;
+    inset: -50vh 0 0 0;
     width: 100%;
-    height: 100%;
+    height: calc(100% + 50vh);
     pointer-events: none;
     z-index: 1;
 }