From 56abe2228c2716fcb1f0b6eb1e79c3533b01a346 Mon Sep 17 00:00:00 2001 From: FrankZamora Date: Tue, 4 Nov 2025 21:33:56 -0600 Subject: [PATCH] =?UTF-8?q?[FASE=203]=20Ajustes=20finos=20de=20estilos=20s?= =?UTF-8?q?eg=C3=BAn=20template=20RDash?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implementación de ajustes visuales finos para que el tema coincida exactamente con el template RDash (style.css líneas 145-700). **Archivos Modificados:** 1. **toc.css** - Ajustes finos TOC - **Container:** - Border-radius: 8px → 12px (template línea 150) - Border: #dee2e6 → #e9ecef (template línea 149) - Box-shadow: 0 2px 4px → 0 4px 16px (template línea 151) - Agregado hover: box-shadow 0 8px 24px (template línea 157) - Agregado transition: all 0.3s ease (template línea 152) - **Title:** - Font-weight: 600 → 700 (template línea 165) - Color: #212529 → #2c3e50 (template línea 161) - Agregado text-align: center (template línea 166) - Agregado flex: 1 para centrado correcto - Agregado font-style: normal (template línea 167) - **Header:** - Border-bottom: 2px → 3px solid #0d6efd (template línea 163) - **Links:** - Color: #212529 → #495057 (template línea 183) - Padding: 0.25rem 0 0.25rem 1rem → 0.375rem 1rem (template línea 182) - Font-size: inherit → 0.95rem (template línea 188) - Agregado border-radius: 4px (template línea 187) - Transition: múltiples → all 0.3s ease (template línea 186) - **Links Hover:** - Agregado background: linear-gradient(90deg, rgba(13, 110, 253, 0.08), transparent) (template línea 193) - Padding-left: sin cambio → 1.5rem (template línea 196) - Removido transform: translateX(4px) - **Links Active:** - Agregado background: linear-gradient(90deg, rgba(13, 110, 253, 0.12), transparent) (template línea 201-202) **Template ref:** css/style.css líneas 145-206 2. **cta-box-sidebar.css** - Ajustes finos CTA Box - **Container:** - Border-radius: 12px → 10px (template línea 603) - Padding: 1.5rem → 1.25rem (template línea 604) - Box-shadow: 0 4px 12px → 0 6px 20px (template línea 606) - Position: sticky → relative (template línea 608) - Agregado overflow: hidden (template línea 609) - Agregado text-align: center (template línea 605) - **Pseudo-element Pulse Animation:** - Agregado .cta-box-sidebar::before (template líneas 612-621) - Radial gradient con opacity animation - Keyframes cta-pulse: 4s ease-in-out infinite (template líneas 623-632) - Scale 1 → 1.05, opacity 0.4 → 0.6 - **Hover:** - Agregado transform: translateY(-3px) (template línea 635) - Box-shadow hover: 0 10px 28px (template línea 636) - **Title:** - Font-size: 1.1rem → 1rem (template línea 642) - Margin-bottom: 0.75rem → 0.65rem (template línea 643) - Line-height: inherit → 1.3 (template línea 646) - Agregado position: relative, z-index: 1 (template líneas 644-645) - **Text:** - Font-size: 0.9rem → 0.85rem (template línea 651) - Line-height: 1.5 → 1.4 (template línea 653) - Agregado position: relative, z-index: 1 (template líneas 654-655) - **Button:** - Padding: 0.75rem → 0.65rem 1.5rem (template línea 662) - Agregado box-shadow: 0 4px 12px (template línea 666) - Agregado position: relative, z-index: 1 (template líneas 667-668) - **Button Hover:** - Background: rgba(255,255,255,0.95) → #f8f9fa (template línea 672) - Transform: translateY(-2px) → scale(1.05) (template línea 674) - Color: #FF8600 → #FF6B35 (template línea 673) - Box-shadow: 0 4px 8px → 0 6px 16px (template línea 675) **Template ref:** css/style.css líneas 600-680 **Verificaciones:** - ✅ **Dropdown styles:** Verificados en custom-style.css - Ya correctos según template (líneas 82-118) - ✅ **Modal styles:** Verificados en modal-contact.css - Ya correctos según template (líneas 682-699) **Estadísticas:** | Métrica | Valor | |---------|-------| | **Archivos CSS modificados** | 2 | | **Líneas modificadas toc.css** | 25 | | **Líneas modificadas cta-box-sidebar.css** | 35 | | **Pseudo-elements nuevos** | 1 (::before con pulse) | | **Keyframes nuevos** | 1 (@keyframes cta-pulse) | | **Gradientes agregados** | 2 (TOC links) | **Resultado:** Tema ahora coincide exactamente con template RDash en todos los detalles visuales: - TOC con gradientes hover/active, border 3px, border-radius 12px - CTA Box con pulse animation, hover translateY, z-index layers - Todos los espaciados, colores y transiciones coinciden con template **Próximo Paso:** Validación visual del usuario para confirmar que tema replica perfectamente el template RDash antes de cerrar Issue #57. Relacionado con: #57 (Issue principal) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../apus-theme/assets/css/cta-box-sidebar.css | 66 +++++++++++++++---- .../themes/apus-theme/assets/css/toc.css | 38 +++++++---- 2 files changed, 77 insertions(+), 27 deletions(-) diff --git a/wp-content/themes/apus-theme/assets/css/cta-box-sidebar.css b/wp-content/themes/apus-theme/assets/css/cta-box-sidebar.css index dd1598e2..1924899d 100644 --- a/wp-content/themes/apus-theme/assets/css/cta-box-sidebar.css +++ b/wp-content/themes/apus-theme/assets/css/cta-box-sidebar.css @@ -14,11 +14,41 @@ .cta-box-sidebar { background: linear-gradient(135deg, #FF8600 0%, #FFB800 100%); - border-radius: 12px; - padding: 1.5rem; - box-shadow: 0 4px 12px rgba(255, 134, 0, 0.3); - position: sticky; - top: 5.5rem; /* Debajo del TOC sticky */ + border-radius: 10px; /* Template: 10px */ + padding: 1.25rem; /* Template: 1.25rem */ + box-shadow: 0 6px 20px rgba(255, 133, 0, 0.3); /* Template: 6px 20px */ + position: relative; /* Template: relative for ::before */ + overflow: hidden; /* Template: overflow hidden */ + transition: all 0.3s ease; /* Template: transition */ + text-align: center; /* Template: center */ +} + +/* Template: Pseudo-element with pulse animation */ +.cta-box-sidebar::before { + content: ''; + position: absolute; + top: -50%; + right: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%); + animation: cta-pulse 4s ease-in-out infinite; +} + +@keyframes cta-pulse { + 0%, 100% { + transform: scale(1); + opacity: 0.4; + } + 50% { + transform: scale(1.05); + opacity: 0.6; + } +} + +.cta-box-sidebar:hover { + transform: translateY(-3px); /* Template: -3px */ + box-shadow: 0 10px 28px rgba(255, 133, 0, 0.4); /* Template hover shadow */ } /* ======================================== @@ -27,16 +57,21 @@ .cta-box-title { color: #ffffff; - font-size: 1.1rem; + font-size: 1rem; /* Template: 1rem */ font-weight: 700; - margin-bottom: 0.75rem; + margin-bottom: 0.65rem; /* Template: 0.65rem */ + position: relative; /* Template: relative */ + z-index: 1; /* Template: z-index 1 */ + line-height: 1.3; /* Template: 1.3 */ } .cta-box-text { color: rgba(255, 255, 255, 0.95); - font-size: 0.9rem; + font-size: 0.85rem; /* Template: 0.85rem */ margin-bottom: 1rem; - line-height: 1.5; + line-height: 1.4; /* Template: 1.4 */ + position: relative; /* Template: relative */ + z-index: 1; /* Template: z-index 1 */ } /* ======================================== @@ -47,17 +82,20 @@ background: #ffffff; color: #FF8600; font-weight: 600; - padding: 0.75rem; + padding: 0.65rem 1.5rem; /* Template: 0.65rem 1.5rem */ border-radius: 8px; border: none; transition: all 0.3s ease; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Template shadow */ + position: relative; /* Template: relative */ + z-index: 1; /* Template: z-index 1 */ } .btn-cta-box:hover { - background: rgba(255, 255, 255, 0.95); - transform: translateY(-2px); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); - color: #FF8600; + background: #f8f9fa; /* Template: #f8f9fa */ + transform: scale(1.05); /* Template: scale(1.05) */ + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); /* Template hover shadow */ + color: #FF6B35; /* Template: #FF6B35 */ } .btn-cta-box:active { diff --git a/wp-content/themes/apus-theme/assets/css/toc.css b/wp-content/themes/apus-theme/assets/css/toc.css index 596e3715..072715d2 100644 --- a/wp-content/themes/apus-theme/assets/css/toc.css +++ b/wp-content/themes/apus-theme/assets/css/toc.css @@ -14,14 +14,19 @@ .apus-toc { background: #f8f9fa; - border: 1px solid #dee2e6; - border-radius: 8px; + border: 1px solid #e9ecef; + border-radius: 12px; /* Template: 12px */ padding: 1.5rem; margin: 2rem 0; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); /* Template shadow */ position: sticky; top: 5.5rem; z-index: 10; + transition: all 0.3s ease; /* Template: hover effect */ +} + +.apus-toc:hover { + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); /* Template hover shadow */ } .apus-toc-header { @@ -30,15 +35,18 @@ align-items: center; margin-bottom: 1rem; padding-bottom: 0.75rem; - border-bottom: 2px solid #dee2e6; + border-bottom: 3px solid #0d6efd; /* Template: 3px solid #0d6efd */ } .apus-toc-title { font-size: 1.25rem; - font-weight: 600; - color: #212529; + font-weight: 700; /* Template: 700 */ + color: #2c3e50; /* Template color */ margin: 0; line-height: 1.2; + text-align: center; /* Template: center */ + flex: 1; /* Para que ocupe todo el espacio disponible */ + font-style: normal; /* Template: normal */ } /* ======================================== @@ -170,20 +178,23 @@ ======================================== */ .apus-toc-link { - color: #212529; + color: #495057; /* Template color */ text-decoration: none; display: block; - transition: color 0.2s ease, transform 0.2s ease, border-color 0.2s ease; + transition: all 0.3s ease; /* Template: all 0.3s ease */ line-height: 1.5; position: relative; - padding: 0.25rem 0 0.25rem 1rem; + padding: 0.375rem 1rem; /* Template: 0.375rem 1rem */ border-left: 3px solid transparent; - margin-left: -1rem; + border-radius: 4px; /* Template: 4px */ + font-size: 0.95rem; /* Template: 0.95rem */ } .apus-toc-link:hover { + background: linear-gradient(90deg, rgba(13, 110, 253, 0.08), transparent); /* Template gradient */ + border-left-color: #0d6efd; color: #0d6efd; - transform: translateX(4px); + padding-left: 1.5rem; /* Template: 1.5rem */ } .apus-toc-link:focus { @@ -192,11 +203,12 @@ border-radius: 2px; } -/* Active link highlighting - Issue #55 */ +/* Active link highlighting - Template styles */ .apus-toc-link.active { + background: linear-gradient(90deg, rgba(13, 110, 253, 0.12), transparent); /* Template gradient */ + border-left-color: #0d6efd; color: #0d6efd; font-weight: 600; - border-left-color: #0d6efd; } /* ========================================