PROBLEMA:
- footer.php faltaba clase bg-dark (mostraba color incorrecto)
- footer-contact.css tenía estilos que duplicaban Bootstrap nativas
SOLUCIÓN:
1. footer.php (línea 14):
- Agregado bg-dark a clases del footer
- Ahora usa Bootstrap nativo: bg-dark, text-white, py-5
2. footer-contact.css:
- Eliminado bloque footer {} con background-color, color, padding
- Mantenidos estilos custom (hover naranja, btn overrides)
- Agregada nota explicativa sobre Bootstrap nativas
RESULTADO:
- Footer ahora muestra bg-dark correcto (rgb(33,37,41))
- CSS más limpio: solo estilos custom, no duplicados Bootstrap
- Sigue principio: componente tiene CSS propio SOLO para custom styles
Fixes #129
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
99 lines
2.1 KiB
CSS
99 lines
2.1 KiB
CSS
/**
|
|
* Footer Contact Form Styles
|
|
*
|
|
* Styles for the footer section including the contact form
|
|
* and contact information.
|
|
*
|
|
* @package Apus_Theme
|
|
* @since 1.0.0
|
|
*/
|
|
|
|
/* ========================================
|
|
Contact Form Styles
|
|
======================================== */
|
|
|
|
.form-control {
|
|
border: 2px solid var(--color-neutral-100);
|
|
border-radius: 6px;
|
|
padding: 0.625rem 1rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: var(--color-orange-primary);
|
|
outline: none;
|
|
}
|
|
|
|
.btn-contact-submit {
|
|
background-color: var(--color-orange-primary);
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
padding: 0.75rem 2rem;
|
|
border: none;
|
|
border-radius: 6px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-contact-submit:hover {
|
|
background-color: var(--color-orange-hover);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.btn-submit-form {
|
|
background-color: var(--color-orange-primary);
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
padding: 0.75rem;
|
|
border: none;
|
|
border-radius: 6px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-submit-form:hover {
|
|
background-color: var(--color-orange-hover);
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* ========================================
|
|
Footer Styles
|
|
======================================== */
|
|
|
|
/* NOTA: background-color, color y padding usan clases Bootstrap nativas:
|
|
bg-dark, text-white, py-5 - NO sobrescribir */
|
|
|
|
footer h5 {
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
footer a {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
text-decoration: none;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
footer a:hover {
|
|
color: var(--color-orange-primary);
|
|
}
|
|
|
|
footer .btn-primary {
|
|
background-color: var(--color-orange-primary);
|
|
border-color: var(--color-orange-primary);
|
|
}
|
|
|
|
footer .btn-primary:hover {
|
|
background-color: var(--color-orange-hover);
|
|
border-color: var(--color-orange-hover);
|
|
}
|
|
|
|
/* ========================================
|
|
Contact Info Styles
|
|
======================================== */
|
|
|
|
.contact-info i {
|
|
color: var(--color-orange-primary);
|
|
}
|
|
|
|
/* NOTA: NO sobrescribir estilos Bootstrap h6 - Template usa defaults */
|