[Issue #105] Implementar CSS del Hero Section con glassmorphism

HTML ya estaba implementado en single.php (líneas 17-44).
Solo faltaba agregar el CSS en style.css.

CAMBIOS:
- Agregado CSS del Hero Section (42 líneas)
- Comentario separador /* === HERO SECTION === */
- .hero-title con gradiente navy diagonal (135deg)
- .hero-title con box-shadow para profundidad
- .hero-title h1 con text-shadow para legibilidad
- .category-badge con efecto glassmorphism (backdrop-filter: blur)
- .category-badge con semi-transparencia rgba(255, 255, 255, 0.15)
- .category-badge:hover cambia a naranja semi-transparente
- .category-badge i con color naranja claro

ESTILOS GLASSMORPHISM:
- backdrop-filter: blur(10px) - efecto vidrio esmerilado
- background: rgba(255, 255, 255, 0.15) - semi-transparente
- border: 1px solid rgba(255, 255, 255, 0.2)
- Compatible con Chrome 76+, Safari 9+, Edge 79+

GRADIENTE NAVY:
- linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%)
- Diagonal arriba-izquierda → abajo-derecha
- Transición suave entre navy primary y light

Código fuente: CSS-ESPECIFICO.md líneas 58-98

Fixes #105

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-11-06 20:53:45 -06:00
parent 54a0c4fbd5
commit a21cd33d6f

View File

@@ -806,3 +806,43 @@ img {
.btn-lets-talk i {
color: #ffffff;
}
/* === HERO SECTION === */
.hero-title {
background: linear-gradient(135deg, var(--color-navy-primary) 0%, var(--color-navy-light) 100%);
box-shadow: 0 4px 16px rgba(30, 58, 95, 0.25);
padding: 3rem 0;
}
.hero-title h1 {
color: #ffffff !important;
font-weight: 700;
line-height: 1.4;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 0;
}
.category-badge {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.95);
padding: 0.375rem 0.875rem;
border-radius: 20px;
font-size: 0.813rem;
font-weight: 500;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.category-badge:hover {
background: rgba(255, 133, 0, 0.2);
border-color: rgba(255, 133, 0, 0.4);
color: #ffffff;
}
.category-badge i {
color: var(--color-orange-light);
}