feat: add focus management styles (:focus-visible, button hover, form input focus)

1 files changed, 57 insertions, 0 deletions

diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
index 281c8a9..8d05052 100644
--- a/themes/danix-xyz-hacker/assets/css/main.css
+++ b/themes/danix-xyz-hacker/assets/css/main.css
@@ -11,6 +11,7 @@
   --surface-rgb: 16, 30, 45;
   --border: #182840;
   --accent: #a855f7;
+  --accent-rgb: 168, 85, 247;
   --accent2: #00ff88;
   --accent-glow: rgba(168, 85, 247, 0.12);
   --text: #c4d6e8;
@@ -33,6 +34,7 @@ html.theme-light {
   --surface-rgb: 240, 243, 247;
   --border: #d9dfe8;
   --accent: #9333ea;
+  --accent-rgb: 147, 51, 234;
   --accent2: #10b981;
   --accent-glow: rgba(147, 51, 234, 0.1);
   --text: #1f2937;
@@ -56,6 +58,7 @@ html.theme-light {
     --surface-rgb: 240, 243, 247;
     --border: #d9dfe8;
     --accent: #9333ea;
+    --accent-rgb: 147, 51, 234;
     --accent2: #10b981;
     --accent-glow: rgba(147, 51, 234, 0.1);
     --text: #1f2937;
@@ -780,6 +783,60 @@ html.theme-light .form-select {
 }
 
 /* ============================================
+   FOCUS MANAGEMENT (Week 5)
+   ============================================ */
+
+/* Enhanced :focus-visible with accent color styling */
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Respect motion preferences for focus indicator */
+@media (prefers-reduced-motion: reduce) {
+  :focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+/* Button and link hover/focus transitions */
+button,
+a.btn,
+.btn {
+  transition: all 150ms ease-out;
+}
+
+button:hover,
+a.btn:hover,
+.btn:hover {
+  opacity: 0.8;
+  transform: translateY(-1px);
+}
+
+button:active,
+a.btn:active,
+.btn:active {
+  transform: translateY(0);
+}
+
+/* Form input focus transitions with glow effect */
+input,
+textarea,
+select {
+  transition: all 200ms ease-out;
+}
+
+input:focus,
+textarea:focus,
+select:focus,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
+}
+
+/* ============================================
    MODAL COMPONENTS (Week 4)
    ============================================ */