FrankZamora ab41eb6be8 [NIVEL 3] Issue #56 - Related Posts Background Gris con Borde Lateral Animado ...

Implementación completa de estilos relacionados posts según diseño RDash.

**Cambios en related-posts.css:**
- Background: #f7fafc (normal) → #ffffff (hover)
- Border: 1px solid #e2e8f0
- Border-left animado con ::before pseudo-element
- Gradiente border-left: linear-gradient(180deg, #1e3a5f → #1a73e8)
- Opacity border: 0 (normal) → 1 (hover)
- Hover transform: translateY(-8px) (antes -4px)
- Shadow hover: 0 12px 32px rgba(26, 115, 232, 0.15)
- Transición: cubic-bezier(0.4, 0, 0.2, 1) mantiene
- Agregado soporte prefers-reduced-motion para ::before

**Características:**
✅ Background gris #f7fafc con transición a blanco
✅ Borde lateral 4px gradiente animado (opacity)
✅ Hover elevación -8px con shadow profesional
✅ Gradiente azul (#1e3a5f → #1a73e8) vertical
✅ Transición cubic-bezier suave
✅ Accessibility: reduced motion support

Closes #56

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

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

2025-11-04 20:11:29 -06:00

9.7 KiB

Raw Blame History

View Raw