From afb6cf39da16c33a7b0e9d577e11f29f31c618d0 Mon Sep 17 00:00:00 2001
From: Alexander Schmidt <alexander@schmidt.eco>
Date: Sat, 31 Jan 2026 16:11:11 +0100
Subject: [PATCH] add some ui improvements

---
 css/components.css          | 18 +++++++++++++++++-
 js/components/app-header.js |  7 +++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/css/components.css b/css/components.css
index 7401f7e..5ac8765 100644
--- a/css/components.css
+++ b/css/components.css
@@ -11,6 +11,10 @@
     transition: all var(--transition-fast);
 }
 
+.btn:active {
+    transform: scale(0.97);
+}
+
 .btn-primary {
     background-color: var(--color-primary);
     color: var(--color-bg);
@@ -64,6 +68,12 @@
     box-shadow: 0 0 0 3px var(--color-primary-light);
 }
 
+.input:focus-visible,
+.btn:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
 .input::placeholder {
     color: var(--color-text-muted);
 }
@@ -86,11 +96,12 @@
     border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
     overflow: hidden;
-    transition: box-shadow var(--transition-fast);
+    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
 }
 
 .card:hover {
     box-shadow: var(--shadow-md);
+    transform: translateY(-2px);
 }
 
 .card-image {
@@ -200,6 +211,11 @@ app-header {
     z-index: var(--z-sticky);
     background-color: var(--color-bg);
     border-bottom: 1px solid var(--color-border);
+    transition: box-shadow var(--transition-fast);
+}
+
+app-header.scrolled {
+    box-shadow: var(--shadow-sm);
 }
 
 app-header .header-inner {
diff --git a/js/components/app-header.js b/js/components/app-header.js
index ff8c6ca..4c36f15 100644
--- a/js/components/app-header.js
+++ b/js/components/app-header.js
@@ -8,6 +8,7 @@ class AppHeader extends HTMLElement {
         this.langDropdownOpen = false
         this.handleOutsideClick = this.handleOutsideClick.bind(this)
         this.handleKeydown = this.handleKeydown.bind(this)
+        this.handleScroll = this.handleScroll.bind(this)
     }
 
     connectedCallback() {
@@ -15,6 +16,7 @@ class AppHeader extends HTMLElement {
         this.setupEventListeners()
         document.addEventListener('click', this.handleOutsideClick)
         document.addEventListener('keydown', this.handleKeydown)
+        window.addEventListener('scroll', this.handleScroll, { passive: true })
         
         // Subscribe to auth changes (only once!)
         this.authUnsubscribe = auth.subscribe(() => {
@@ -26,9 +28,14 @@ class AppHeader extends HTMLElement {
     disconnectedCallback() {
         document.removeEventListener('click', this.handleOutsideClick)
         document.removeEventListener('keydown', this.handleKeydown)
+        window.removeEventListener('scroll', this.handleScroll)
         if (this.authUnsubscribe) this.authUnsubscribe()
     }
 
+    handleScroll() {
+        this.classList.toggle('scrolled', window.scrollY > 10)
+    }
+
     handleOutsideClick() {
         if (this.langDropdownOpen) {
             this.closeDropdown()