fix: reduce Three.js shader contrast and increase glass opacity for better readability

- Lower caustic brightness (0.2→0.07) and shadow depth (0.75→0.88) in SandBackground so light-mode caustic flickers don't compete with text
- Reduce WaterBackground specular (0.5→0.18), Fresnel (0.4→0.2), and light intensities (ambient 1.4→1.0, directional 2.0→1.2) for a darker, calmer dark-mode water
- Raise glass card opacity from 0.20→0.72 (light) and 0.40→0.78 (dark) so UI panels have a solid enough backing to read clearly over the animated 3D backgrounds

Author: govargas

frontend/src/components/SandBackground.tsx

@@ -86,7 +86,7 @@ class BeachTextureMaterial extends THREE.ShaderMaterial {
             float shadowMask = smoothstep(0.2, 0.6, shadowN); // Soft shadows
             
             // Darken sand where there are shadows
-            sandBase = mix(sandBase, sandBase * 0.75, shadowMask);
+            sandBase = mix(sandBase, sandBase * 0.88, shadowMask);
 
             // --- Water Hybrid (Silk + Caustics) ---
             // Hybrid approach: 
@@ -123,8 +123,8 @@ class BeachTextureMaterial extends THREE.ShaderMaterial {
             // but keep enough definition to look like water
             float caustic = pow(ridges, 4.0); 
 
-            // Reduced intensity to avoid "burning" white look (was 0.6)
-            float totalLight = caustic * 0.2;
+            // Reduced intensity to avoid "burning" white look (was 0.2)
+            float totalLight = caustic * 0.07;
             
             // --- Refraction ---
             // Distort sand based on water pattern
@@ -142,7 +142,7 @@ class BeachTextureMaterial extends THREE.ShaderMaterial {
             // Re-compose sand with refraction
             vec3 finalSand = uSandColor + vec3(refractedGrain * 0.04);
             // finalSand = mix(finalSand, stoneColor, refractedStones * 0.5);
-            finalSand = mix(finalSand, finalSand * 0.75, refractedShadowMask);
+            finalSand = mix(finalSand, finalSand * 0.88, refractedShadowMask);
             
             // --- Composition ---
             vec3 finalColor = mix(finalSand, uWaterTint, 0.15);

frontend/src/components/WaterBackground.tsx

@@ -146,11 +146,11 @@ class WaterMaterial extends THREE.ShaderMaterial {
           float spec = pow(max(dot(vNormal, halfDir), 0.0), 100.0);
           
           // Add specular highlight
-          color += uColorHighlight * spec * 0.5;
-          
+          color += uColorHighlight * spec * 0.18;
+
           // Fresnel-ish effect (lighter at edges/angles)
           float fresnel = pow(1.0 - dot(vNormal, viewDir), 3.0);
-          color = mix(color, uColorShallow, fresnel * 0.4);
+          color = mix(color, uColorShallow, fresnel * 0.2);
 
           gl_FragColor = vec4(color, 1.0);
         }
@@ -195,8 +195,8 @@ export default function WaterBackground() {
         dpr={[1, 2]}
       >
         <color attach="background" args={["#2A6F97"]} />
-        <ambientLight intensity={1.4} />
-        <directionalLight position={[2, 5, 2]} intensity={2.0} />
+        <ambientLight intensity={1.0} />
+        <directionalLight position={[2, 5, 2]} intensity={1.2} />
         <Water />
       </Canvas>
     </div>

frontend/src/index.css

@@ -13,8 +13,8 @@
   --color-badge: #e6e4dc;
 
   /* Glassmorphism - Light theme */
-  --color-glass: rgba(239, 235, 228, 0.2);
-  --color-glass-border: rgba(205, 200, 192, 0.3);
+  --color-glass: rgba(239, 235, 228, 0.72);
+  --color-glass-border: rgba(205, 200, 192, 0.5);
 
   /* Quality colors */
   --color-quality-excellent: #1f6fb2;
@@ -41,8 +41,8 @@
   --color-badge: #1e4057;
 
   /* Glassmorphism - Dark theme (ocean-tinted) */
-  --color-glass: rgba(20, 60, 90, 0.4);
-  --color-glass-border: rgba(56, 189, 248, 0.2);
+  --color-glass: rgba(20, 60, 90, 0.78);
+  --color-glass-border: rgba(56, 189, 248, 0.25);
 
   /* Quality colors for dark mode - need lighter shades for contrast */
   --color-quality-unknown: #9ca3af;