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; } /* ========================================