Refine Tooltip and Theme Transition Mechanics

- Enhance feature card tooltip with dynamic mouse-tracking parallax effect
- Optimize theme transition logic with more precise state management
- Adjust dark mode color palette and shadow styles for improved visual depth
- Streamline notification animation with more dynamic keyframe transformations
- Improve theme change performance with nested requestAnimationFrame

Author: TMHSDigital

css/style.css

@@ -52,8 +52,8 @@
 [data-theme="dark"] {
     /* Dark theme with sci-fi feel */
     --primary-color: #f8fafc;
-    --text-color: #f1f5f9;
-    --bg-color: #030712;
+    --text-color: #e2e8f0;
+    --bg-color: #0f172a;
     --gray-50: #1e293b;
     --gray-100: #334155;
     --gray-200: #475569;
@@ -64,16 +64,16 @@
     --gray-700: #f1f5f9;
     --gray-800: #f8fafc;
     --gray-900: #ffffff;
-    --card-bg: #0f172a;
+    --card-bg: #1e293b;
 
     /* Dark theme glass effect */
-    --glass-bg: rgba(15, 23, 42, 0.85);
-    --glass-border: rgba(255, 255, 255, 0.1);
+    --glass-bg: rgba(15, 23, 42, 0.9);
+    --glass-border: rgba(255, 255, 255, 0.15);
 
     /* Enhanced dark shadows */
-    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(8, 145, 178, 0.1);
-    --shadow: 0 4px 6px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(37, 99, 235, 0.1);
-    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(8, 145, 178, 0.1);
+    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
+    --shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
     --footer-bg: var(--primary-color);
     --footer-text: var(--bg-color);
     color-scheme: dark;
@@ -1634,61 +1634,29 @@ textarea.is-invalid:focus-visible {
     position: absolute;
     bottom: 100%;
     left: 50%;
-    transform: translateX(-50%) translateY(10px);
+    transform: 
+        translateX(calc(-50% + var(--mouse-x, 0) * 0.02px)) 
+        translateY(calc(-10px + var(--mouse-y, 0) * -0.02px));
     background: var(--glass-bg);
-    -webkit-backdrop-filter: blur(8px);
     backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
     padding: 0.75rem 1rem;
     border-radius: 0.75rem;
     width: max-content;
     max-width: min(300px, 90vw);
     opacity: 0;
     visibility: hidden;
-    transition: 
-        transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28),
-        opacity 0.2s ease;
+    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
     will-change: transform, opacity;
     z-index: 1000;
     box-shadow: var(--shadow-lg);
     border: 1px solid var(--glass-border);
-    color: var(--text-color);
-    font-size: 0.875rem;
-    pointer-events: none;
-    text-align: center;
 }
 
 .learning-mode .feature-card:hover .feature-tooltip,
 .learning-mode .feature-card:focus .feature-tooltip {
     opacity: 1;
     visibility: visible;
-    transform: 
-        translateX(calc(-50% + var(--mouse-x, 0) * 0.5px)) 
-        translateY(calc(var(--mouse-y, 0) * -0.5px));
-}
-
-@keyframes notificationSlideIn {
-    from {
-        opacity: 0;
-        transform: translateX(100%) scale(0.9) rotate(2deg);
-    }
-    70% {
-        transform: translateX(-5%) scale(1.02) rotate(-1deg);
-    }
-    to {
-        opacity: 1;
-        transform: translateX(0) scale(1) rotate(0);
-    }
-}
-
-@keyframes notificationSlideOut {
-    from {
-        opacity: 1;
-        transform: translateX(0) scale(1) rotate(0);
-    }
-    to {
-        opacity: 0;
-        transform: translateX(100%) scale(0.9) rotate(2deg);
-    }
 }
 
 /* Notifications */
@@ -1737,22 +1705,25 @@ textarea.is-invalid:focus-visible {
 @keyframes notificationSlideIn {
     from {
         opacity: 0;
-        transform: translateX(100%) scale(0.9);
+        transform: translateX(120%) scale(0.8) rotate(3deg);
+    }
+    60% {
+        transform: translateX(-10%) scale(1.05) rotate(-1deg);
     }
     to {
         opacity: 1;
-        transform: translateX(0) scale(1);
+        transform: translateX(0) scale(1) rotate(0);
     }
 }
 
 @keyframes notificationSlideOut {
     from {
         opacity: 1;
-        transform: translateX(0) scale(1);
+        transform: translateX(0) scale(1) rotate(0);
     }
     to {
         opacity: 0;
-        transform: translateX(100%) scale(0.9);
+        transform: translateX(120%) scale(0.8) rotate(3deg);
     }
 }
 

js/main.js

@@ -444,41 +444,41 @@ const app = {
     },
 
     updateTheme(isDark, enableTransition = true) {
-        // Clear any pending transitions
-        if (this.themeState.transitionTimeout) {
-            clearTimeout(this.themeState.transitionTimeout);
-        }
-        if (this.themeState.rafHandle) {
-            cancelAnimationFrame(this.themeState.rafHandle);
-        }
-        
+        // Clear existing transitions
+        if (this.themeState.transitionTimeout) clearTimeout(this.themeState.transitionTimeout);
+        if (this.themeState.rafHandle) cancelAnimationFrame(this.themeState.rafHandle);
+
         const root = document.documentElement;
         const newTheme = isDark ? 'dark' : 'light';
-        
-        // Skip if theme hasn't changed
         if (newTheme === this.themeState.currentTheme) return;
-        
-        // Update state immediately
+
+        // Immediate state update
         this.themeState.currentTheme = newTheme;
         localStorage.setItem('theme', newTheme);
-        
+
+        const applyTheme = () => {
+            root.setAttribute('data-theme', newTheme);
+            if (this.darkModeToggle) this.darkModeToggle.checked = isDark;
+            
+            // Update notification container theme if it exists
+            const notificationContainer = document.querySelector('.notifications-container');
+            if (notificationContainer) {
+                notificationContainer.setAttribute('data-theme', newTheme);
+            }
+        };
+
         if (enableTransition) {
             root.classList.add('theme-transitioning');
-            requestAnimationFrame(() => {
-                root.setAttribute('data-theme', newTheme);
-                
-                this.themeState.transitionTimeout = setTimeout(() => {
-                    root.classList.remove('theme-transitioning');
-                    this.announceMessage(`Theme changed to ${newTheme} mode`);
-                }, 300);
+            this.themeState.rafHandle = requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    applyTheme();
+                    this.themeState.transitionTimeout = setTimeout(() => {
+                        root.classList.remove('theme-transitioning');
+                    }, 300);
+                });
             });
         } else {
-            root.setAttribute('data-theme', newTheme);
-        }
-        
-        // Update toggle state
-        if (this.darkModeToggle) {
-            this.darkModeToggle.checked = isDark;
+            applyTheme();
         }
     },