gpu acceleration

public/css/base.css

@@ -5,8 +5,9 @@
 }
 
 html {
+    height: 100%;
     transition: color var(--transition-speed) ease,
-                background-color var(--transition-speed) ease;
+    background-color var(--transition-speed) ease;
 }
 
 body {
@@ -15,6 +16,8 @@ body {
     color: var(--text);
     line-height: 1.6;
     min-height: 100vh;
+    transition: var(--theme-transition);
+    will-change: background-color, color;
 }
 
 h1 {
@@ -23,17 +26,20 @@ h1 {
     color: var(--text);
     opacity: 0.85;
     font-weight: 600;
+    transition: var(--theme-transition);
 }
 
 h2 {
     font-size: 2rem;
     margin-bottom: var(--spacing-lg);
     color: var(--text);
+    transition: var(--theme-transition);
 }
 
 h3 {
     color: var(--text);
     margin-bottom: var(--spacing-md);
+    transition: var(--theme-transition);
 }
 
 h1.h1-hero {
@@ -48,12 +54,13 @@ h1.h1-hero {
 
 p {
     margin-bottom: var(--spacing-md);
+    transition: var(--theme-transition);
 }
 
 a {
     color: var(--primary);
     text-decoration: none;
-    transition: opacity var(--transition-speed) ease;
+    transition: var(--theme-transition), opacity var(--transition-speed) ease;
 }
 
 a:hover {

public/css/header.css

@@ -10,8 +10,9 @@ header {
     left: 0;
     right: 0;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    transition: background-color 0.7s ease, transform 0.7s ease, box-shadow 0.7s ease;
+    transition: var(--theme-transition), transform 0.7s ease, box-shadow 0.7s ease;
     max-height: var(--header-height);
+    transform: var(--gpu-accelerated);
 }
 
 .header-content {
@@ -45,13 +46,14 @@ header {
     display: flex;
     gap: var(--spacing-lg);
     align-items: center;
+    padding-top: 16px;
 }
 
 .nav-menu a {
     color: var(--text);
     text-decoration: none;
     font-size: 1rem;
-    transition: color var(--transition-speed) ease;
+    transition: var(--theme-transition);
 }
 
 .nav-menu a:hover {
@@ -67,13 +69,20 @@ header {
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: color var(--transition-speed) ease;
+    transition: var(--theme-transition);
+    border-radius: var(--border-radius);
 }
 
 .theme-toggle:hover {
     color: var(--primary);
 }
 
+.theme-toggle:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+    border-radius: var(--border-radius);
+}
+
 .mobile-menu-toggle {
     display: none;
     background: none;
@@ -82,4 +91,3 @@ header {
     cursor: pointer;
     padding: var(--spacing-sm);
 }
-

public/css/variables.css

@@ -33,4 +33,9 @@
     --border-radius: 8px;
     --transition-speed: 0.3s;
     --header-height: 140px;
+    
+    /* Theme transition with GPU acceleration */
+    --theme-transition: color var(--transition-speed) ease,
+                       background-color var(--transition-speed) ease;
+    --gpu-accelerated: translate3d(0, 0, 0);
 }