From e57a15f73325058c5714740bae056e6b1e3c565f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Fri, 10 Apr 2026 18:45:57 +0200 Subject: [PATCH] polish: CSS-only hover transitions for nav and footer links Adds translateY lift and smoother easing on hover for desktop nav, footer nav, and social links. Active underline gets expo easing. No markup changes. Co-Authored-By: Claude Sonnet 4.6 --- assets/css/main.css | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/assets/css/main.css b/assets/css/main.css index 0a78fe8..67c9381 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -577,6 +577,37 @@ animation: glitch-clip 2.5s steps(1) infinite; } +/* ── Nav & footer link hover polish ─────────────────────────── */ + +/* Desktop nav links — lift + glow on hover */ +header nav a.label { + transition: color 0.2s var(--ease-sharp), transform 0.2s var(--ease-out-expo); +} +header nav a.label:hover { + transform: translateY(-1px); +} + +/* Active underline — smooth width via transition */ +header nav a.label span { + transition: width 0.35s var(--ease-out-expo); +} + +/* Footer links — subtle lift */ +footer nav a.label { + transition: color 0.2s var(--ease-sharp), transform 0.2s var(--ease-out-expo); +} +footer nav a.label:hover { + transform: translateY(-1px); +} + +/* Footer social links — icon nudges on hover */ +footer nav a.label svg { + transition: transform 0.2s var(--ease-out-expo); +} +footer nav a.label:hover svg { + transform: translate(1px, -1px); +} + /* ── View Transitions ────────────────────────────────────────── */ ::view-transition-old(main-content) { animation: 160ms var(--ease-sharp) both page-out;