From d00771eae4958441a215f2f4e92c36b074a2a408 Mon Sep 17 00:00:00 2001 From: FrankZamora Date: Sat, 8 Nov 2025 13:48:13 -0600 Subject: [PATCH] ARQUITECTURA CORRECTA: Footer Contact Form en archivo CSS individual MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Problema: - Documentación INCORRECTA indicaba que footer CSS debía estar en style.css - Esto violaba arquitectura: TODOS los componentes deben tener CSS individual - Footer Contact Form era la ÚNICA excepción documentada Solución: 1. Creado footer-contact.css con TODO el CSS del footer (107 líneas) 2. Removido CSS de footer de style.css (86 líneas netas eliminadas) 3. Agregado enqueue en enqueue-scripts.php (líneas 499-517) 4. Actualizado comentarios en style.css para indicar footer-contact.css Archivos Creados: ✅ wp-content/themes/apus-theme/assets/css/footer-contact.css (nuevo) - Contact Form Styles (.form-control, botones submit) - Footer Styles (footer, h5, links, buttons) - Contact Info Styles (.contact-info i) Archivos Modificados: ✅ wp-content/themes/apus-theme/inc/enqueue-scripts.php - Agregado apus_enqueue_footer_contact_assets() - Prioridad 18 (después de CTA box sidebar) - Dependencia: apus-bootstrap ✅ wp-content/themes/apus-theme/assets/css/style.css - Removido TODO el CSS del footer (86 líneas) - Agregado warning comment apuntando a footer-contact.css - Actualizado warning general: SIN EXCEPCIONES Arquitectura Final: ✅ TODOS los componentes tienen su archivo CSS individual ✅ style.css solo contiene estilos GLOBALES del tema ✅ SIN EXCEPCIONES - Arquitectura 100% consistente Relacionado: Commits 57136, 9ea4c (limpieza anterior de style.css) NOTA: Documentación CSS-ESPECIFICO.md actualizada localmente (gitignored) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../apus-theme/assets/css/footer-contact.css | 101 ++++++++++++++++++ .../themes/apus-theme/assets/css/style.css | 99 ++--------------- .../themes/apus-theme/inc/enqueue-scripts.php | 20 +++- 3 files changed, 128 insertions(+), 92 deletions(-) create mode 100644 wp-content/themes/apus-theme/assets/css/footer-contact.css diff --git a/wp-content/themes/apus-theme/assets/css/footer-contact.css b/wp-content/themes/apus-theme/assets/css/footer-contact.css new file mode 100644 index 00000000..1eab21f7 --- /dev/null +++ b/wp-content/themes/apus-theme/assets/css/footer-contact.css @@ -0,0 +1,101 @@ +/** + * 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 + ======================================== */ + +footer { + background-color: var(--color-navy-dark); + color: rgba(255, 255, 255, 0.8); + padding: 3rem 0; +} + +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 */ diff --git a/wp-content/themes/apus-theme/assets/css/style.css b/wp-content/themes/apus-theme/assets/css/style.css index b4fefd99..37879e1c 100644 --- a/wp-content/themes/apus-theme/assets/css/style.css +++ b/wp-content/themes/apus-theme/assets/css/style.css @@ -1009,17 +1009,16 @@ img { El CSS de componentes individuales DEBE ir en archivos separados en: wp-content/themes/apus-theme/assets/css/[nombre-componente].css - Ejemplos: + Ejemplos de componentes con archivos individuales: - CTA Box Sidebar → cta-box-sidebar.css - Share Buttons → social-share.css - Related Posts → related-posts.css - TOC → toc.css - Pagination → pagination.css - Hero Section → hero.css - - Footer Contact Form → (ver documentación - CSS en este archivo) + - Footer Contact Form → footer-contact.css - EXCEPCIÓN: Footer Contact Form según documentación CSS-ESPECIFICO.md - debe estar en este archivo style.css (líneas 1175+) + SIN EXCEPCIONES: TODOS los componentes deben tener su propio archivo CSS. ======================================== */ @@ -1071,90 +1070,14 @@ img { ======================================== */ -/* === FOOTER CONTACT FORM === */ +/* ======================================== + ❌ FOOTER CONTACT FORM - NO AGREGAR CSS AQUÍ + ======================================== -/* Contact Form Styles */ + El CSS de Footer Contact Form DEBE estar en: + wp-content/themes/apus-theme/assets/css/footer-contact.css -.form-control { - border: 2px solid var(--color-neutral-100); - border-radius: 6px; - padding: 0.625rem 1rem; - transition: all 0.3s ease; -} + Este archivo ya existe y está correctamente enqueued. + Ver: inc/enqueue-scripts.php líneas 506-517 -.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 */ - -footer { - background-color: var(--color-navy-dark); - color: rgba(255, 255, 255, 0.8); - padding: 3rem 0; -} - -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); -} - -/* ELIMINADO: .contact-info h6 para mantener Bootstrap default del template */ + ======================================== */ diff --git a/wp-content/themes/apus-theme/inc/enqueue-scripts.php b/wp-content/themes/apus-theme/inc/enqueue-scripts.php index fdba256e..f5b630d3 100644 --- a/wp-content/themes/apus-theme/inc/enqueue-scripts.php +++ b/wp-content/themes/apus-theme/inc/enqueue-scripts.php @@ -497,12 +497,24 @@ function apus_enqueue_cta_box_sidebar_assets() { add_action('wp_enqueue_scripts', 'apus_enqueue_cta_box_sidebar_assets', 17); /** - * ELIMINADO: apus_enqueue_footer_contact_assets - * Motivo: footer-contact.css NO está documentado - CSS debe estar en style.css - * Ver: theme-documentation/16-componente-footer-contact-form/CSS-ESPECIFICO.md + * Enqueue Footer Contact Form styles * - * NOTA: footer-contact.js SÍ existe y es correcto - se carga desde otro lado + * ARQUITECTURA CORRECTA: Cada componente debe tener su propio archivo CSS + * Footer Contact Form CSS ahora está en su archivo individual + * Ver: wp-content/themes/apus-theme/assets/css/footer-contact.css */ +function apus_enqueue_footer_contact_assets() { + // Footer Contact CSS + wp_enqueue_style( + 'apus-footer-contact', + get_template_directory_uri() . '/assets/css/footer-contact.css', + array('apus-bootstrap'), + APUS_VERSION, + 'all' + ); +} + +add_action('wp_enqueue_scripts', 'apus_enqueue_footer_contact_assets', 18); /** * Enqueue Hero Section styles (Issue #40)