fix: hide skip-to-content link with transform instead of top positioning

Replace top: -40px positioning with transform: translateY(-100%) for more robust hiding. The link now:
- Stays hidden by default (translateY(-100%) moves it above viewport)
- Smoothly slides in when focused (on keyboard navigation)
- Uses fixed positioning for reliability

This is a more modern and accessible approach that ensures the skip link is invisible until needed.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

1 files changed, 6 insertions, 4 deletions

diff --git a/assets/css/components/hamburger.css b/assets/css/components/hamburger.css
index 200e81d..2c868d8 100644
--- a/assets/css/components/hamburger.css
+++ b/assets/css/components/hamburger.css
@@ -170,18 +170,20 @@
 
 /* Skip Link */
 .skip-link {
-  position: absolute;
-  top: -40px;
+  position: fixed;
+  top: 0;
   left: 0;
   background: var(--accent);
   color: var(--bg);
-  padding: var(--sp-2) var(--sp-4);
+  padding: var(--sp-3) var(--sp-4);
   z-index: var(--z-modal);
   text-decoration: none;
   font-family: var(--font-mono);
   font-size: 0.9rem;
+  transform: translateY(-100%);
+  transition: transform var(--duration-base) ease;
 }
 
 .skip-link:focus {
-  top: 0;
+  transform: translateY(0);
 }