[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:
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user