refactor(styles): streamline transition properties and enhance accessibility support

dist/css/styles.css

@@ -137,7 +137,6 @@
     box-shadow: 0 0 0 6px rgba(99, 102, 241, .25);
   }
   
-  .nav-link,
   .btn,
   .status-card,
   .benefit-card {
@@ -145,18 +144,6 @@
   }
 }
 
-/* ===== REDUCED MOTION SUPPORT ===== */
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important
-  }
-}
-
 @supports (content-visibility:auto) {
 
   .section,
@@ -337,7 +324,7 @@ button:focus-visible {
   backdrop-filter: blur(12px) saturate(140%);
   -webkit-backdrop-filter: blur(12px) saturate(140%);
   border-bottom: 1px solid var(--border-primary);
-  transition: all var(--transition-normal);
+  transition: background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), backdrop-filter var(--transition-normal), -webkit-backdrop-filter var(--transition-normal);
   z-index: -1;
   will-change: backdrop-filter, background, border-bottom;
 }
@@ -578,7 +565,7 @@ button:focus-visible {
   color: var(--text-secondary);
   border-radius: var(--radius-lg);
   white-space: nowrap;
-  transition: all var(--transition-fast);
+  transition: color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
   text-decoration: none;
   overflow: hidden;
 }
@@ -670,7 +657,7 @@ button:focus-visible {
   color: var(--text-primary);
   flex-shrink: 0;
   cursor: pointer;
-  transition: all var(--transition-fast);
+  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
   position: relative;
   overflow: hidden;
   box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
@@ -707,7 +694,7 @@ button:focus-visible {
   width: 24px;
   height: 24px;
   position: absolute;
-  transition: all var(--transition-normal);
+  transition: opacity var(--transition-normal), transform var(--transition-normal);
 }
 
 .sun-icon {
@@ -740,7 +727,7 @@ button:focus-visible {
   border-radius: var(--radius-full);
   background: var(--bg-primary);
   cursor: pointer;
-  transition: all var(--transition-fast);
+  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
   flex-shrink: 0;
   box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
 }
@@ -776,7 +763,7 @@ button:focus-visible {
   height: 2px;
   background: var(--text-primary);
   border-radius: var(--radius-full);
-  transition: all var(--transition-fast);
+  transition: transform var(--transition-fast), opacity var(--transition-fast), background-color var(--transition-fast);
   transform-origin: center;
 }
 
@@ -902,7 +889,7 @@ button:focus-visible {
   color: var(--text-secondary);
   text-decoration: none;
   border-radius: var(--radius-md);
-  transition: all var(--transition-fast);
+  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
   white-space: nowrap;
@@ -2557,7 +2544,7 @@ th {
   font-weight: var(--font-semibold);
   font-size: var(--text-sm);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
   margin-top: var(--space-sm);
 }
 
@@ -2737,7 +2724,7 @@ select:hover {
   color: var(--text-secondary)
 }
 
-.loading-spinner {
+.loading-state .loading-spinner {
   width: 32px;
   height: 32px;
   border: 3px solid var(--border-primary);
@@ -3291,7 +3278,7 @@ select:hover {
   font-size: var(--text-xs);
   font-weight: var(--font-semibold);
   color: var(--text-secondary);
-  transition: all var(--transition-fast);
+  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
 }
 
 .footer-stat:hover {
@@ -3340,7 +3327,7 @@ select:hover {
   font-size: var(--text-sm);
   line-height: 1.5;
   padding: var(--space-xs) 0;
-  transition: all var(--transition-fast);
+  transition: color var(--transition-fast), transform var(--transition-fast);
   position: relative;
 }
 
@@ -3481,7 +3468,7 @@ select:hover {
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
   color: var(--text-secondary);
-  transition: all var(--transition-fast);
+  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
 }
 
 .github-link:hover {
@@ -3588,10 +3575,6 @@ select:hover {
   }
 
   @media (max-width:768px) {
-    .header-nav {
-      display:flex
-    }
-
     .hero-actions {
       flex-direction:column; align-items:center
     }
@@ -3764,14 +3747,6 @@ select:hover {
       min-width:auto
     }
 
-    .header-nav .nav-link.active {
-      color:var(--primary)
-    }
-
-    .header-nav .nav-link.active::after {
-      content:''; display:block; height:2px; background:currentColor; border-radius:2px; margin-top:6px
-    }
-
     .comparison-header {
       padding:var(--space-md)
     }
@@ -3997,10 +3972,6 @@ select:hover {
       font-size:var(--text-lg); padding:var(--space-xs) var(--space-md)
     }
 
-    .nav-link {
-      padding:var(--space-sm) var(--space-md); font-size:.75rem
-    }
-
     .dark-mode-toggle {
       width:38px; height:38px
     }
@@ -4112,22 +4083,12 @@ select:hover {
   }
 
   @media (pointer:coarse) {
-    .nav-link:hover, .btn:hover, .status-card:hover, .benefit-card:hover, .speed-card:hover, .referral-card:hover, .note-card:hover, .resource-item:hover {
+    .btn:hover, .status-card:hover, .benefit-card:hover, .speed-card:hover, .referral-card:hover, .note-card:hover, .resource-item:hover {
       transform:none
     }
-  }/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
+  }
-.visually-hidden {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
-}
 
+/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
 #a11y-announcer {
   position: absolute;
   left: -10000px;
@@ -4136,24 +4097,6 @@ select:hover {
   overflow: hidden;
 }
 
-/* Enhanced focus styles for keyboard navigation */
-*:focus-visible {
-  outline: 3px solid var(--primary);
-  outline-offset: 2px;
-  border-radius: var(--radius-sm);
-  transition: outline-offset 0.15s ease;
-}
-
-button:focus-visible,
-a:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible {
-  outline: 3px solid var(--primary);
-  outline-offset: 3px;
-  box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.15);
-}
-
 /* Keyboard navigation for tables */
 table tbody tr:focus {
   outline: 3px solid var(--primary);
@@ -4247,6 +4190,25 @@ table tbody tr[tabindex="0"] {
   .table-wrapper.mobile-view .status-indicator {
     font-size: var(--text-xl);
   }
+
+  .comparison-table {
+    font-size: var(--text-sm);
+  }
+
+  .comparison-header {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .comparison-stats {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .stat {
+    width: 100%;
+    padding: var(--space-md);
+  }
 }
 
 /* Tablet optimizations */
@@ -4276,10 +4238,6 @@ table tbody tr[tabindex="0"] {
     min-width: 44px;
   }
   
-  .nav-link {
-    padding: var(--space-lg) var(--space-xl);
-  }
-  
   .btn {
     padding: var(--space-lg) var(--space-2xl);
   }
@@ -4363,24 +4321,3 @@ table tbody tr[tabindex="0"] {
   margin-top: var(--space-lg);
 }
 
-/* ===== COMPARISON TABLE MOBILE IMPROVEMENTS ===== */
-@media (max-width: 767px) {
-  .comparison-table {
-    font-size: var(--text-sm);
-  }
-  
-  .comparison-header {
-    flex-direction: column;
-    text-align: center;
-  }
-  
-  .comparison-stats {
-    flex-direction: column;
-    width: 100%;
-  }
-  
-  .stat {
-    width: 100%;
-    padding: var(--space-md);
-  }
-}