diff --git a/wp-content/themes/apus-theme/assets/css/badges.css b/wp-content/themes/apus-theme/assets/css/badges.css new file mode 100644 index 00000000..275e0362 --- /dev/null +++ b/wp-content/themes/apus-theme/assets/css/badges.css @@ -0,0 +1,68 @@ +/** + * Badges Styles + * + * Estilos para badges de categorías + * Template ref: css/style.css líneas 459-490 + * + * @package Apus_Theme + * @since 1.0.0 + */ + +/* ============================================ + CATEGORY BADGE GENÉRICA + ============================================ */ + +.category-badge { + display: inline-flex; + align-items: center; + padding: 0.375rem 0.875rem; + background: #e9ecef; + border-radius: 20px; + color: #6c757d; + text-decoration: none; + font-size: 0.813rem; + font-weight: 500; + transition: all 0.3s ease; +} + +.category-badge:hover { + background: #dee2e6; + color: #495057; + text-decoration: none; +} + +.category-badge i { + font-size: 0.7rem; + color: #6c757d; + opacity: 0.7; +} + +/* Variante para Hero (fondo oscuro) */ +.category-badge-hero { + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); + color: rgba(255, 255, 255, 0.95); +} + +.category-badge-hero:hover { + background: rgba(255, 255, 255, 0.25); + color: #ffffff; +} + +.category-badge-hero i { + color: rgba(255, 255, 255, 0.85); + opacity: 0.8; +} + +/* Responsive */ +@media (max-width: 767.98px) { + .category-badge { + font-size: 0.75rem; + padding: 0.25rem 0.75rem; + } + + .category-badge i { + font-size: 0.65rem; + } +} diff --git a/wp-content/themes/apus-theme/assets/css/buttons.css b/wp-content/themes/apus-theme/assets/css/buttons.css new file mode 100644 index 00000000..fa57b3fa --- /dev/null +++ b/wp-content/themes/apus-theme/assets/css/buttons.css @@ -0,0 +1,48 @@ +/** + * Buttons Styles + * + * Estilos de botones personalizados del tema + * Template ref: css/style.css líneas 527-552 + * + * @package Apus_Theme + * @since 1.0.0 + */ + +/* ============================================ + BOTÓN "LET'S TALK" EN NAVBAR + ============================================ */ + +.btn-lets-talk { + background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%); + color: #ffffff; + font-weight: 600; + padding: 0.5rem 1.5rem; + border: none; + border-radius: 6px; + transition: all 0.3s ease; + box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3); +} + +.btn-lets-talk:hover { + background: linear-gradient(135deg, #FF5722 0%, #FF6B35 100%); + color: #ffffff; + transform: translateY(-2px); + box-shadow: 0 6px 18px rgba(255, 107, 53, 0.45); +} + +.btn-lets-talk:active { + transform: translateY(0); + box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3); +} + +.btn-lets-talk i { + font-size: 1.1rem; +} + +/* Responsive */ +@media (max-width: 991.98px) { + .btn-lets-talk { + width: 100%; + margin-top: 1rem; + } +} diff --git a/wp-content/themes/apus-theme/assets/css/hero.css b/wp-content/themes/apus-theme/assets/css/hero.css new file mode 100644 index 00000000..d27b9c0e --- /dev/null +++ b/wp-content/themes/apus-theme/assets/css/hero.css @@ -0,0 +1,70 @@ +/** + * Hero Section Styles + * + * Estilos para la sección hero con gradiente azul + * Template ref: css/style.css líneas 122-129 + * + * @package Apus_Theme + * @since 1.0.0 + */ + +/* ============================================ + HERO SECTION - GRADIENTE AZUL + ============================================ */ + +.hero-title { + background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%); + box-shadow: 0 4px 16px rgba(30, 58, 95, 0.25); +} + +.hero-title h1 { + color: #ffffff !important; + font-weight: 700; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +/* Category Badges en Hero */ +.category-badge-hero { + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); + color: #ffffff; + padding: 6px 16px; + border-radius: 20px; + font-size: 14px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + text-decoration: none; + display: inline-flex; + align-items: center; + transition: all 0.3s ease; +} + +.category-badge-hero:hover { + background: rgba(255, 255, 255, 0.25); + color: #ffffff; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +.category-badge-hero i { + font-size: 12px; +} + +/* Responsive */ +@media (max-width: 767.98px) { + .hero-title { + padding-top: 3rem !important; + padding-bottom: 3rem !important; + } + + .hero-title h1 { + font-size: 1.75rem !important; + } + + .category-badge-hero { + font-size: 12px; + padding: 4px 12px; + } +} diff --git a/wp-content/themes/apus-theme/assets/css/pagination.css b/wp-content/themes/apus-theme/assets/css/pagination.css new file mode 100644 index 00000000..9c3ec00b --- /dev/null +++ b/wp-content/themes/apus-theme/assets/css/pagination.css @@ -0,0 +1,197 @@ +/** + * Pagination Styles + * + * Estilos personalizados para paginación + * Template ref: css/style.css líneas 180-207 + * + * @package Apus_Theme + * @since 1.0.0 + */ + +/* ============================================ + PAGINATION PERSONALIZADA + ============================================ */ + +.pagination { + margin-top: 3rem; + margin-bottom: 2rem; +} + +.page-item { + margin: 0 0.25rem; +} + +.page-link { + color: #495057; + background-color: #ffffff; + border: 1px solid #dee2e6; + border-radius: 6px; + padding: 0.5rem 0.875rem; + font-weight: 500; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.page-link:hover { + color: #0d6efd; + background-color: #f8f9fa; + border-color: #0d6efd; + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(13, 110, 253, 0.15); + z-index: 2; +} + +.page-link:focus { + color: #0d6efd; + background-color: #e9ecef; + border-color: #0d6efd; + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); +} + +/* Active page */ +.page-item.active .page-link { + color: #ffffff; + background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%); + border-color: #0d6efd; + font-weight: 600; + box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3); + z-index: 3; +} + +.page-item.active .page-link:hover { + background: linear-gradient(135deg, #0a58ca 0%, #084298 100%); + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(13, 110, 253, 0.4); +} + +/* Disabled state */ +.page-item.disabled .page-link { + color: #adb5bd; + background-color: #ffffff; + border-color: #dee2e6; + cursor: not-allowed; + opacity: 0.5; +} + +.page-item.disabled .page-link:hover { + transform: none; + box-shadow: none; +} + +/* First and Last */ +.page-item:first-child .page-link { + border-radius: 6px; +} + +.page-item:last-child .page-link { + border-radius: 6px; +} + +/* Prev and Next */ +.page-item .page-link[rel="prev"], +.page-item .page-link[rel="next"] { + font-weight: 600; + padding: 0.5rem 1.125rem; +} + +/* Ellipsis */ +.page-item .page-link.dots { + border: none; + background: transparent; + cursor: default; +} + +.page-item .page-link.dots:hover { + background: transparent; + transform: none; + box-shadow: none; +} + +/* Responsive */ +@media (max-width: 767.98px) { + .pagination { + margin-top: 2rem; + margin-bottom: 1.5rem; + font-size: 0.875rem; + } + + .page-item { + margin: 0 0.15rem; + } + + .page-link { + padding: 0.375rem 0.625rem; + border-radius: 4px; + } + + .page-item .page-link[rel="prev"], + .page-item .page-link[rel="next"] { + padding: 0.375rem 0.75rem; + } + + /* Hide some page numbers on mobile, keep only current +/- 1 */ + .page-item:not(.active):not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2)) { + display: none; + } +} + +@media (max-width: 575.98px) { + .pagination { + font-size: 0.813rem; + } + + .page-link { + padding: 0.3rem 0.5rem; + } + + .page-item .page-link[rel="prev"], + .page-item .page-link[rel="next"] { + padding: 0.3rem 0.6rem; + } +} + +/* Print */ +@media print { + .pagination { + display: none; + } +} + +/* Accessibility */ +@media (prefers-reduced-motion: reduce) { + .page-link { + transition: none; + } + + .page-link:hover, + .page-item.active .page-link:hover { + transform: none; + } +} + +/* Dark mode */ +@media (prefers-color-scheme: dark) { + .page-link { + color: #f8f9fa; + background-color: #212529; + border-color: #495057; + } + + .page-link:hover { + color: #ffffff; + background-color: #343a40; + border-color: #0d6efd; + } + + .page-item.active .page-link { + background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%); + } + + .page-item.disabled .page-link { + color: #6c757d; + background-color: #212529; + border-color: #495057; + } +} diff --git a/wp-content/themes/apus-theme/assets/css/post-content.css b/wp-content/themes/apus-theme/assets/css/post-content.css new file mode 100644 index 00000000..dfababdb --- /dev/null +++ b/wp-content/themes/apus-theme/assets/css/post-content.css @@ -0,0 +1,119 @@ +/** + * Post Content Typography + * + * Estilos de tipografía para contenido de posts + * Template ref: css/style.css líneas 208-227 + * + * @package Apus_Theme + * @since 1.0.0 + */ + +/* ============================================ + POST CONTENT TYPOGRAPHY + ============================================ */ + +.post-content h2 { + font-size: 2rem; + font-weight: 600; + margin-top: 2.5rem; + margin-bottom: 1.5rem; + border-bottom: 1px solid #eee; + padding-bottom: 0.5rem; + color: #1e3a5f; +} + +.post-content h3 { + font-size: 1.5rem; + font-weight: 600; + margin-top: 2rem; + margin-bottom: 1rem; + color: #2c5282; +} + +.post-content h4 { + font-size: 1.25rem; + font-weight: 600; + margin-top: 1.5rem; + margin-bottom: 0.75rem; + color: #495057; +} + +.post-content p, +.post-content li { + line-height: 1.8; + font-size: 1.1rem; + color: #4a5568; + margin-bottom: 1.5rem; +} + +.post-content ul, +.post-content ol { + padding-left: 2rem; + margin-bottom: 1.5rem; +} + +.post-content li { + margin-bottom: 0.75rem; +} + +.post-content a { + color: #0d6efd; + text-decoration: underline; + font-weight: 500; +} + +.post-content a:hover { + color: #0a58ca; +} + +.post-content strong { + font-weight: 700; + color: #212529; +} + +.post-content blockquote { + border-left: 4px solid #0d6efd; + padding-left: 1.5rem; + margin: 2rem 0; + font-style: italic; + color: #6c757d; +} + +.post-content code { + background: #f8f9fa; + padding: 0.2rem 0.4rem; + border-radius: 4px; + font-family: 'Courier New', monospace; + font-size: 0.95rem; + color: #e83e8c; +} + +.post-content pre { + background: #f8f9fa; + padding: 1rem; + border-radius: 8px; + overflow-x: auto; + margin: 1.5rem 0; +} + +.post-content pre code { + background: transparent; + padding: 0; + color: #212529; +} + +/* Responsive */ +@media (max-width: 767.98px) { + .post-content h2 { + font-size: 1.5rem; + } + + .post-content h3 { + font-size: 1.25rem; + } + + .post-content p, + .post-content li { + font-size: 1rem; + } +} diff --git a/wp-content/themes/apus-theme/assets/css/related-posts.css b/wp-content/themes/apus-theme/assets/css/related-posts.css index c8004483..8b5615b2 100644 --- a/wp-content/themes/apus-theme/assets/css/related-posts.css +++ b/wp-content/themes/apus-theme/assets/css/related-posts.css @@ -52,7 +52,7 @@ display: flex; flex-direction: column; height: 100%; - background: #f7fafc; + background: #f8f9fa; /* Template línea 230 */ border: 1px solid #e2e8f0; border-left: 4px solid transparent; border-left-color: transparent; diff --git a/wp-content/themes/apus-theme/inc/enqueue-scripts.php b/wp-content/themes/apus-theme/inc/enqueue-scripts.php index 9299dff6..30da6fff 100644 --- a/wp-content/themes/apus-theme/inc/enqueue-scripts.php +++ b/wp-content/themes/apus-theme/inc/enqueue-scripts.php @@ -76,6 +76,71 @@ function apus_enqueue_bootstrap() { add_action('wp_enqueue_scripts', 'apus_enqueue_bootstrap', 5); +/** + * Enqueue FASE 2 CSS - Template RDash Component Styles (Issues #58-64) + * + * Estilos que replican componentes del template RDash + */ +function apus_enqueue_fase2_styles() { + // Buttons CSS - Let's Talk button (Issue #58) + wp_enqueue_style( + 'apus-buttons', + get_template_directory_uri() . '/assets/css/buttons.css', + array('apus-bootstrap'), + APUS_VERSION, + 'all' + ); + + // Hero Section CSS - Gradiente azul (Issue #59) + wp_enqueue_style( + 'apus-hero', + get_template_directory_uri() . '/assets/css/hero.css', + array('apus-bootstrap'), + APUS_VERSION, + 'all' + ); + + // Category Badges CSS - Clase genérica (Issue #62) + wp_enqueue_style( + 'apus-badges', + get_template_directory_uri() . '/assets/css/badges.css', + array('apus-bootstrap'), + APUS_VERSION, + 'all' + ); + + // Pagination CSS - Estilos personalizados (Issue #64) + wp_enqueue_style( + 'apus-pagination', + get_template_directory_uri() . '/assets/css/pagination.css', + array('apus-bootstrap'), + APUS_VERSION, + 'all' + ); + + // Post Content Typography - Solo en posts individuales (Issue #63) + if (is_single()) { + wp_enqueue_style( + 'apus-post-content', + get_template_directory_uri() . '/assets/css/post-content.css', + array('apus-bootstrap'), + APUS_VERSION, + 'all' + ); + + // Related Posts CSS - Background gris (Issue #60) + wp_enqueue_style( + 'apus-related-posts', + get_template_directory_uri() . '/assets/css/related-posts.css', + array('apus-bootstrap'), + APUS_VERSION, + 'all' + ); + } +} + +add_action('wp_enqueue_scripts', 'apus_enqueue_fase2_styles', 6); + /** * Enqueue header styles and scripts */