[NIVEL 3] Issue #54 - Navbar Underline Animado Turquesa

Implementación de underline animado en navbar según diseño RDash.

**Cambios en header.css:**
- Agregado position: relative a .primary-menu a
- Implementado ::after pseudo-element con gradiente turquesa
- Animation scaleX(0) → scaleX(1) en hover
- Underline permanente en links activos (.current-menu-item)
- Soporte prefers-reduced-motion

**Características:**
 Gradiente: #61c7cd → #4db8c4 (CSS variables)
 Width: 80%, height: 2px
 Transición: 0.3s ease (CSS variable --transition-base)
 Transform origin: center
 Active links: underline permanente
 Accessibility: reduced motion support

Closes #54

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-11-04 20:05:53 -06:00
parent ea38a12055
commit 470ef0c14f

View File

@@ -135,6 +135,7 @@
font-size: 1rem; font-size: 1rem;
border-radius: 4px; border-radius: 4px;
transition: background-color 0.3s ease, color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease;
position: relative;
} }
.primary-menu a:hover, .primary-menu a:hover,
@@ -149,6 +150,24 @@
outline-offset: 2px; outline-offset: 2px;
} }
/* Underline animation - Issue #54 */
.primary-menu a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 80%;
height: 2px;
background: linear-gradient(90deg, var(--color-cyan-primary, #61c7cd) 0%, var(--color-cyan-dark, #4db8c4) 100%);
transition: transform var(--transition-base, 0.3s ease);
transform-origin: center;
}
.primary-menu a:hover::after {
transform: translateX(-50%) scaleX(1);
}
/* Current menu item */ /* Current menu item */
.primary-menu .current-menu-item > a, .primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a { .primary-menu .current_page_item > a {
@@ -156,6 +175,12 @@
background-color: rgba(0, 123, 255, 0.1); background-color: rgba(0, 123, 255, 0.1);
} }
/* Active link permanent underline */
.primary-menu .current-menu-item > a::after,
.primary-menu .current_page_item > a::after {
transform: translateX(-50%) scaleX(1);
}
/* Submenu styles (if needed) */ /* Submenu styles (if needed) */
.primary-menu .sub-menu { .primary-menu .sub-menu {
position: absolute; position: absolute;
@@ -471,6 +496,7 @@ body.mobile-menu-open {
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.site-header, .site-header,
.primary-menu a, .primary-menu a,
.primary-menu a::after,
.mobile-menu, .mobile-menu,
.mobile-menu-overlay, .mobile-menu-overlay,
.hamburger-icon .line, .hamburger-icon .line,