From d77d3ffd24311742d52adb6aacc6a2ce6f5ee53c Mon Sep 17 00:00:00 2001
From: PEDZEO <vitali.gavrikov@yandex.ru>
Date: Tue, 20 Jan 2026 01:39:20 +0300
Subject: [PATCH] Optimize CSS for mobile and desktop: implement smooth
 scrolling for desktop only, enhance card and glass component styles for
 better performance on mobile, and ensure backdrop-blur effects are applied
 conditionally based on screen size.

---
 src/styles/globals.css | 44 +++++++++++++++++++++++++++++++++++++-----
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/styles/globals.css b/src/styles/globals.css
index 2deee88..6aca2cc 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -102,19 +102,34 @@
 
   html {
     overflow-x: hidden;
-    scroll-behavior: smooth;
+  }
+
+  /* Smooth scroll only on desktop - mobile uses native */
+  @media (min-width: 1024px) {
+    html {
+      scroll-behavior: smooth;
+    }
   }
 
   /* Dark theme (default) */
   body, .dark body {
     @apply bg-dark-950 text-dark-100 font-sans antialiased;
     overscroll-behavior-y: contain;
+    /* iOS smooth scrolling */
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Optimize main scrollable content */
+  main {
+    /* Prevent layout shifts during scroll */
+    contain: layout style;
   }
 
   /* Light theme - Champagne */
   .light body {
     @apply bg-champagne-200 text-champagne-900 font-sans antialiased;
     overscroll-behavior-y: contain;
+    -webkit-overflow-scrolling: touch;
   }
 
   /* Light theme text color overrides - convert dark-* text colors to readable colors */
@@ -310,10 +325,19 @@
 @layer components {
   /* ========== DARK THEME COMPONENTS (default) ========== */
 
-  /* Cards - Dark */
+  /* Cards - Dark (optimized for mobile) */
   .card {
-    @apply bg-dark-900/50 backdrop-blur-sm rounded-2xl border border-dark-800/50 p-5 sm:p-6
+    @apply bg-dark-900/70 rounded-2xl border border-dark-800/50 p-5 sm:p-6
            transition-all duration-300 ease-smooth;
+    /* GPU acceleration for smooth scroll */
+    transform: translateZ(0);
+  }
+
+  /* Enable backdrop-blur only on desktop */
+  @media (min-width: 1024px) {
+    .card {
+      @apply bg-dark-900/50 backdrop-blur-sm;
+    }
   }
 
   .card-hover {
@@ -329,9 +353,19 @@
     @apply card animate-slide-up;
   }
 
-  /* Glass effect - Dark */
+  /* Glass effect - Dark (optimized for mobile) */
   .glass {
-    @apply bg-dark-900/30 backdrop-blur-xl border border-dark-700/30;
+    @apply bg-dark-900/80 border border-dark-700/30;
+    /* GPU acceleration */
+    transform: translateZ(0);
+    will-change: transform;
+  }
+
+  /* Enable backdrop-blur only on desktop where it's performant */
+  @media (min-width: 1024px) {
+    .glass {
+      @apply bg-dark-900/30 backdrop-blur-xl;
+    }
   }
 
   /* Buttons - Dark */