Files
roi-theme/wp-content/themes/apus-theme/assets/css/footer-contact.css
FrankZamora d5cbde3d80 Fix Footer Principal: Agregar bg-dark y eliminar CSS duplicado - Issue #129
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>
2025-11-08 14:02:02 -06:00

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 */