diff --git a/dist/css/styles.css b/dist/css/styles.css index 12eef41..855c83b 100644 --- a/dist/css/styles.css +++ b/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); - } -}