diff --git a/wp-content/themes/apus-theme/assets/css/style.css b/wp-content/themes/apus-theme/assets/css/style.css new file mode 100644 index 00000000..e9836b9d --- /dev/null +++ b/wp-content/themes/apus-theme/assets/css/style.css @@ -0,0 +1,648 @@ +/* ========================================================================== + CSS Variables + ========================================================================== */ + +:root { + /* Typography - Using system fonts by default (defined in fonts.css) */ + /* These will be overridden by fonts.css custom properties */ + --font-primary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + --font-secondary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + --font-headings: Avenir, "Avenir Next LT Pro", Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif; + --font-code: "Consolas", "Monaco", "Courier New", Courier, monospace; + + /* Font Sizes - Fluid typography scale */ + --font-size-xs: 0.75rem; /* 12px */ + --font-size-sm: 0.875rem; /* 14px */ + --font-size-base: 1rem; /* 16px */ + --font-size-lg: 1.125rem; /* 18px */ + --font-size-xl: 1.25rem; /* 20px */ + --font-size-2xl: 1.5rem; /* 24px */ + --font-size-3xl: 1.875rem; /* 30px */ + --font-size-4xl: 2.25rem; /* 36px */ + + /* Line Heights */ + --line-height-none: 1; + --line-height-tight: 1.25; + --line-height-normal: 1.5; + --line-height-relaxed: 1.75; + --line-height-loose: 2; + + /* Font Weights */ + --font-weight-light: 300; + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + + /* Colors - WCAG AA compliant (minimum 4.5:1 contrast ratio) */ + --color-primary: #0056b3; /* Contrast ratio 7.53:1 against white */ + --color-secondary: #5a6268; /* Contrast ratio 7.04:1 against white */ + --color-success: #1e7e34; /* Contrast ratio 5.91:1 against white */ + --color-danger: #c81e1e; /* Contrast ratio 6.12:1 against white */ + --color-warning: #856404; /* Contrast ratio 7.51:1 against white */ + --color-info: #117a8b; /* Contrast ratio 5.34:1 against white */ + --color-light: #f8f9fa; + --color-dark: #212529; + --color-text: #212529; /* Contrast ratio 15.52:1 against white */ + --color-bg: #ffffff; + + /* Spacing */ + --spacing-xs: 0.25rem; + --spacing-sm: 0.5rem; + --spacing-md: 1rem; + --spacing-lg: 1.5rem; + --spacing-xl: 2rem; + --spacing-xxl: 3rem; + + /* Header specific variables */ + --header-height: 70px; + --header-bg: #ffffff; + --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + + /* Z-index scale */ + --z-header: 1000; + --z-mobile-menu: 999; + --z-overlay: 998; +} + +/* ========================================================================== + Reset & Base Styles + ========================================================================== */ + +* { + box-sizing: border-box; +} + +html { + font-size: 16px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + margin: 0; + padding: 0; + font-family: var(--font-primary); + font-size: 1rem; + line-height: 1.6; + color: var(--color-text); + background-color: var(--color-bg); +} + +/* ========================================================================== + Typography + ========================================================================== */ + +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: 0.5em; + font-family: var(--font-headings); + font-weight: var(--font-weight-semibold); + line-height: var(--line-height-tight); +} + +h1 { font-size: 2.5rem; } +h2 { font-size: 2rem; } +h3 { font-size: 1.75rem; } +h4 { font-size: 1.5rem; } +h5 { font-size: 1.25rem; } +h6 { font-size: 1rem; } + +p { + margin-top: 0; + margin-bottom: 1rem; +} + +a { + color: var(--color-primary); + text-decoration: none; + transition: color 0.3s ease; +} + +a:hover { + color: #003d82; /* Darker blue for better contrast - 9.52:1 */ + text-decoration: underline; +} + +a:focus { + outline: 2px solid var(--color-primary); + outline-offset: 2px; +} + +img { + max-width: 100%; + height: auto; + display: block; +} + +/* ========================================================================== + Screen Reader Text + ========================================================================== */ + +.screen-reader-text { + position: absolute; + left: -10000px; + width: 1px; + height: 1px; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + white-space: nowrap; +} + +.screen-reader-text:focus { + position: fixed; + top: 0; + left: 0; + width: auto; + height: auto; + padding: 1rem; + background: #000; + color: #fff; + z-index: 100000; + clip: auto; + clip-path: none; +} + +/* ========================================================================== + Skip Link + ========================================================================== */ + +.skip-link { + position: absolute; + top: -40px; + left: 0; + background: #000; + color: #fff; + padding: 0.5rem 1rem; + z-index: 100000; + text-decoration: none; +} + +.skip-link:focus { + top: 0; + outline: 2px solid #fff; + outline-offset: 2px; +} + +/* ========================================================================== + Site Structure + ========================================================================== */ + +.site { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +.site-main { + flex-grow: 1; +} + +/* ========================================================================== + Content Wrapper + ========================================================================== */ + +.content-wrapper { + max-width: 1200px; + margin: 0 auto; + padding: var(--spacing-xl); + display: grid; + grid-template-columns: 1fr; + gap: var(--spacing-xl); +} + +@media (min-width: 768px) { + .content-wrapper { + grid-template-columns: 2fr 1fr; + } +} + +#primary { + min-width: 0; +} + +/* ========================================================================== + Single Post & Page Styles + ========================================================================== */ + +.post-thumbnail { + margin-bottom: var(--spacing-xl); + overflow: hidden; + border-radius: 8px; +} + +.post-thumbnail img { + width: 100%; + height: auto; + display: block; +} + +.entry-header { + margin-bottom: var(--spacing-xl); +} + +.entry-title { + margin-bottom: var(--spacing-md); + color: var(--color-dark); +} + +.entry-categories { + display: flex; + gap: var(--spacing-sm); + flex-wrap: wrap; + margin-bottom: var(--spacing-md); +} + +.category-badge { + display: inline-block; + padding: var(--spacing-xs) var(--spacing-sm); + background-color: var(--color-primary); + color: #fff; + font-size: 0.875rem; + font-weight: 600; + border-radius: 4px; + text-decoration: none; + transition: background-color 0.3s ease; +} + +.category-badge:hover { + background-color: #003d82; /* Darker for better contrast */ + text-decoration: none; +} + +.entry-meta { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-md); + font-size: 0.875rem; + color: var(--color-secondary); + margin-bottom: var(--spacing-lg); +} + +.entry-meta time { + display: block; +} + +.entry-meta .updated { + display: block; + margin-top: var(--spacing-xs); + font-size: 0.8125rem; +} + +.entry-content { + line-height: 1.8; + margin-bottom: var(--spacing-xl); +} + +.entry-content > * + * { + margin-top: var(--spacing-md); +} + +.entry-content img { + border-radius: 4px; + margin: var(--spacing-lg) 0; +} + +.entry-footer { + padding-top: var(--spacing-lg); + border-top: 1px solid #e9ecef; + margin-top: var(--spacing-xl); +} + +.tags-links { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-sm); + align-items: center; + margin-bottom: var(--spacing-md); +} + +.tags-label { + font-weight: 600; + color: var(--color-dark); +} + +.tags-list a { + display: inline-block; + padding: var(--spacing-xs) var(--spacing-sm); + background-color: var(--color-light); + color: var(--color-dark); + font-size: 0.875rem; + border-radius: 4px; + text-decoration: none; + transition: background-color 0.3s ease; +} + +.tags-list a:hover { + background-color: #e2e6ea; + text-decoration: none; +} + +.edit-link a { + color: var(--color-secondary); + font-size: 0.875rem; +} + +/* ========================================================================== + Archive Styles + ========================================================================== */ + +.page-header { + margin-bottom: var(--spacing-xxl); + padding-bottom: var(--spacing-lg); + border-bottom: 2px solid var(--color-primary); +} + +.page-title { + margin-bottom: var(--spacing-md); + color: var(--color-dark); +} + +.archive-description { + color: var(--color-secondary); + font-size: 1.125rem; + line-height: 1.6; +} + +.archive-posts { + display: grid; + gap: var(--spacing-xxl); + margin-bottom: var(--spacing-xxl); +} + +.archive-posts article { + display: grid; + gap: var(--spacing-lg); +} + +@media (min-width: 768px) { + .archive-posts article { + grid-template-columns: 300px 1fr; + } +} + +.archive-posts .post-thumbnail { + margin-bottom: 0; +} + +.archive-posts .entry-summary { + color: var(--color-text); + line-height: 1.6; +} + +.read-more-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-xs); + font-weight: 600; + color: var(--color-primary); + text-decoration: none; + margin-top: var(--spacing-md); +} + +.read-more-link:hover { + text-decoration: underline; +} + +.read-more-icon { + transition: transform 0.3s ease; +} + +.read-more-link:hover .read-more-icon { + transform: translateX(4px); +} + +/* ========================================================================== + Pagination + ========================================================================== */ + +.pagination, +.posts-pagination { + margin-top: var(--spacing-xxl); + margin-bottom: var(--spacing-xxl); +} + +.nav-links { + display: flex; + justify-content: center; + gap: var(--spacing-sm); + flex-wrap: wrap; +} + +.nav-links .page-numbers { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 44px; + min-height: 44px; + padding: var(--spacing-xs) var(--spacing-sm); + border: 1px solid #dee2e6; + border-radius: 4px; + color: var(--color-primary); + text-decoration: none; + transition: all 0.3s ease; +} + +.nav-links .page-numbers:hover { + background-color: var(--color-primary); + color: #fff; + border-color: var(--color-primary); + text-decoration: none; +} + +.nav-links .page-numbers.current { + background-color: var(--color-primary); + color: #fff; + border-color: var(--color-primary); +} + +.nav-links .page-numbers.dots { + border: none; +} + +/* ========================================================================== + Post Navigation + ========================================================================== */ + +.post-navigation { + margin-top: var(--spacing-xxl); + padding-top: var(--spacing-xl); + border-top: 1px solid #e9ecef; +} + +.post-navigation .nav-links { + display: grid; + gap: var(--spacing-lg); +} + +@media (min-width: 768px) { + .post-navigation .nav-links { + grid-template-columns: 1fr 1fr; + } +} + +.post-navigation a { + display: block; + padding: var(--spacing-lg); + border: 1px solid #dee2e6; + border-radius: 4px; + text-decoration: none; + transition: all 0.3s ease; +} + +.post-navigation a:hover { + border-color: var(--color-primary); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + text-decoration: none; +} + +.nav-subtitle { + display: block; + font-size: 0.875rem; + color: var(--color-secondary); + margin-bottom: var(--spacing-xs); +} + +.nav-title { + display: block; + font-weight: 600; + color: var(--color-dark); +} + +/* ========================================================================== + 404 Error Page + ========================================================================== */ + +.error-404 { + text-align: center; + max-width: 800px; + margin: 0 auto; + padding: var(--spacing-xxl) var(--spacing-lg); +} + +.error-404 .page-header { + border-bottom: none; + margin-bottom: var(--spacing-xl); +} + +.error-404 .page-title { + font-size: 3rem; + color: var(--color-primary); +} + +.error-message { + font-size: 1.125rem; + color: var(--color-secondary); + margin-bottom: var(--spacing-xxl); +} + +.error-actions { + text-align: left; +} + +.error-actions h2, +.error-actions h3 { + margin-top: var(--spacing-xl); + margin-bottom: var(--spacing-md); +} + +.error-suggestions, +.recent-posts-list, +.categories-list { + list-style: none; + padding: 0; + margin: 0; +} + +.error-suggestions li, +.recent-posts-list li, +.categories-list li { + padding: var(--spacing-sm) 0; + border-bottom: 1px solid #e9ecef; +} + +.error-suggestions li:last-child, +.recent-posts-list li:last-child, +.categories-list li:last-child { + border-bottom: none; +} + +.category-count { + color: var(--color-secondary); + font-size: 0.875rem; + margin-left: var(--spacing-xs); +} + +.recent-posts-section, +.categories-section { + margin-top: var(--spacing-xl); +} + +/* ========================================================================== + Front Page + ========================================================================== */ + +.front-page .hero-section { + margin-bottom: var(--spacing-xxl); + border-radius: 8px; + overflow: hidden; +} + +.front-page .hero-section img { + width: 100%; + height: auto; + max-height: 500px; + object-fit: cover; +} + +/* ========================================================================== + Page Links (Paginated Posts) + ========================================================================== */ + +.page-links { + margin-top: var(--spacing-xl); + padding-top: var(--spacing-lg); + border-top: 1px solid #e9ecef; + font-weight: 600; +} + +.page-links a { + display: inline-block; + margin: 0 var(--spacing-xs); + padding: var(--spacing-xs) var(--spacing-sm); + border: 1px solid #dee2e6; + border-radius: 4px; + text-decoration: none; +} + +.page-links a:hover { + background-color: var(--color-primary); + color: #fff; + border-color: var(--color-primary); + text-decoration: none; +} + +/* ========================================================================== + Responsive Media + ========================================================================== */ + +@media (max-width: 767px) { + h1 { font-size: 2rem; } + h2 { font-size: 1.75rem; } + h3 { font-size: 1.5rem; } + h4 { font-size: 1.25rem; } + + .content-wrapper { + padding: var(--spacing-md); + grid-template-columns: 1fr; + } + + .archive-posts article { + grid-template-columns: 1fr; + } + + .error-404 .page-title { + font-size: 2rem; + } +} diff --git a/wp-content/themes/apus-theme/inc/enqueue-scripts.php b/wp-content/themes/apus-theme/inc/enqueue-scripts.php index fe9e1aa6..e96a872c 100644 --- a/wp-content/themes/apus-theme/inc/enqueue-scripts.php +++ b/wp-content/themes/apus-theme/inc/enqueue-scripts.php @@ -76,6 +76,22 @@ function apus_enqueue_bootstrap() { add_action('wp_enqueue_scripts', 'apus_enqueue_bootstrap', 5); +/** + * Enqueue main theme stylesheet + * FASE 1 - Este es el archivo CSS principal del tema + */ +function apus_enqueue_main_stylesheet() { + wp_enqueue_style( + 'apus-main-style', + get_template_directory_uri() . '/assets/css/style.css', + array('apus-variables'), + filemtime(get_template_directory() . '/assets/css/style.css'), + 'all' + ); +} + +add_action('wp_enqueue_scripts', 'apus_enqueue_main_stylesheet', 5); + /** * Enqueue FASE 2 CSS - Template RDash Component Styles (Issues #58-64) * diff --git a/wp-content/themes/apus-theme/style.css b/wp-content/themes/apus-theme/style.css index ebcf9d37..f36253a8 100644 --- a/wp-content/themes/apus-theme/style.css +++ b/wp-content/themes/apus-theme/style.css @@ -15,651 +15,10 @@ Domain Path: /languages Tags: blog, custom-menu, featured-images, footer-widgets, performance, accessibility-ready, translation-ready */ -/* ========================================================================== - CSS Variables - ========================================================================== */ - -:root { - /* Typography - Using system fonts by default (defined in fonts.css) */ - /* These will be overridden by fonts.css custom properties */ - --font-primary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; - --font-secondary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; - --font-headings: Avenir, "Avenir Next LT Pro", Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif; - --font-code: "Consolas", "Monaco", "Courier New", Courier, monospace; - - /* Font Sizes - Fluid typography scale */ - --font-size-xs: 0.75rem; /* 12px */ - --font-size-sm: 0.875rem; /* 14px */ - --font-size-base: 1rem; /* 16px */ - --font-size-lg: 1.125rem; /* 18px */ - --font-size-xl: 1.25rem; /* 20px */ - --font-size-2xl: 1.5rem; /* 24px */ - --font-size-3xl: 1.875rem; /* 30px */ - --font-size-4xl: 2.25rem; /* 36px */ - - /* Line Heights */ - --line-height-none: 1; - --line-height-tight: 1.25; - --line-height-normal: 1.5; - --line-height-relaxed: 1.75; - --line-height-loose: 2; - - /* Font Weights */ - --font-weight-light: 300; - --font-weight-normal: 400; - --font-weight-medium: 500; - --font-weight-semibold: 600; - --font-weight-bold: 700; - - /* Colors - WCAG AA compliant (minimum 4.5:1 contrast ratio) */ - --color-primary: #0056b3; /* Contrast ratio 7.53:1 against white */ - --color-secondary: #5a6268; /* Contrast ratio 7.04:1 against white */ - --color-success: #1e7e34; /* Contrast ratio 5.91:1 against white */ - --color-danger: #c81e1e; /* Contrast ratio 6.12:1 against white */ - --color-warning: #856404; /* Contrast ratio 7.51:1 against white */ - --color-info: #117a8b; /* Contrast ratio 5.34:1 against white */ - --color-light: #f8f9fa; - --color-dark: #212529; - --color-text: #212529; /* Contrast ratio 15.52:1 against white */ - --color-bg: #ffffff; - - /* Spacing */ - --spacing-xs: 0.25rem; - --spacing-sm: 0.5rem; - --spacing-md: 1rem; - --spacing-lg: 1.5rem; - --spacing-xl: 2rem; - --spacing-xxl: 3rem; - - /* Header specific variables */ - --header-height: 70px; - --header-bg: #ffffff; - --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - - /* Z-index scale */ - --z-header: 1000; - --z-mobile-menu: 999; - --z-overlay: 998; -} - -/* ========================================================================== - Reset & Base Styles - ========================================================================== */ - -* { - box-sizing: border-box; -} - -html { - font-size: 16px; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -body { - margin: 0; - padding: 0; - font-family: var(--font-primary); - font-size: 1rem; - line-height: 1.6; - color: var(--color-text); - background-color: var(--color-bg); -} - -/* ========================================================================== - Typography - ========================================================================== */ - -h1, h2, h3, h4, h5, h6 { - margin-top: 0; - margin-bottom: 0.5em; - font-family: var(--font-headings); - font-weight: var(--font-weight-semibold); - line-height: var(--line-height-tight); -} - -h1 { font-size: 2.5rem; } -h2 { font-size: 2rem; } -h3 { font-size: 1.75rem; } -h4 { font-size: 1.5rem; } -h5 { font-size: 1.25rem; } -h6 { font-size: 1rem; } - -p { - margin-top: 0; - margin-bottom: 1rem; -} - -a { - color: var(--color-primary); - text-decoration: none; - transition: color 0.3s ease; -} - -a:hover { - color: #003d82; /* Darker blue for better contrast - 9.52:1 */ - text-decoration: underline; -} - -a:focus { - outline: 2px solid var(--color-primary); - outline-offset: 2px; -} - -img { - max-width: 100%; - height: auto; - display: block; -} - -/* ========================================================================== - Screen Reader Text - ========================================================================== */ - -.screen-reader-text { - position: absolute; - left: -10000px; - width: 1px; - height: 1px; - overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - white-space: nowrap; -} - -.screen-reader-text:focus { - position: fixed; - top: 0; - left: 0; - width: auto; - height: auto; - padding: 1rem; - background: #000; - color: #fff; - z-index: 100000; - clip: auto; - clip-path: none; -} - -/* ========================================================================== - Skip Link - ========================================================================== */ - -.skip-link { - position: absolute; - top: -40px; - left: 0; - background: #000; - color: #fff; - padding: 0.5rem 1rem; - z-index: 100000; - text-decoration: none; -} - -.skip-link:focus { - top: 0; - outline: 2px solid #fff; - outline-offset: 2px; -} - -/* ========================================================================== - Site Structure - ========================================================================== */ - -.site { - display: flex; - flex-direction: column; - min-height: 100vh; -} - -.site-main { - flex-grow: 1; -} - -/* ========================================================================== - Content Wrapper - ========================================================================== */ - -.content-wrapper { - max-width: 1200px; - margin: 0 auto; - padding: var(--spacing-xl); - display: grid; - grid-template-columns: 1fr; - gap: var(--spacing-xl); -} - -@media (min-width: 768px) { - .content-wrapper { - grid-template-columns: 2fr 1fr; - } -} - -#primary { - min-width: 0; -} - -/* ========================================================================== - Single Post & Page Styles - ========================================================================== */ - -.post-thumbnail { - margin-bottom: var(--spacing-xl); - overflow: hidden; - border-radius: 8px; -} - -.post-thumbnail img { - width: 100%; - height: auto; - display: block; -} - -.entry-header { - margin-bottom: var(--spacing-xl); -} - -.entry-title { - margin-bottom: var(--spacing-md); - color: var(--color-dark); -} - -.entry-categories { - display: flex; - gap: var(--spacing-sm); - flex-wrap: wrap; - margin-bottom: var(--spacing-md); -} - -.category-badge { - display: inline-block; - padding: var(--spacing-xs) var(--spacing-sm); - background-color: var(--color-primary); - color: #fff; - font-size: 0.875rem; - font-weight: 600; - border-radius: 4px; - text-decoration: none; - transition: background-color 0.3s ease; -} - -.category-badge:hover { - background-color: #003d82; /* Darker for better contrast */ - text-decoration: none; -} - -.entry-meta { - display: flex; - flex-wrap: wrap; - gap: var(--spacing-md); - font-size: 0.875rem; - color: var(--color-secondary); - margin-bottom: var(--spacing-lg); -} - -.entry-meta time { - display: block; -} - -.entry-meta .updated { - display: block; - margin-top: var(--spacing-xs); - font-size: 0.8125rem; -} - -.entry-content { - line-height: 1.8; - margin-bottom: var(--spacing-xl); -} - -.entry-content > * + * { - margin-top: var(--spacing-md); -} - -.entry-content img { - border-radius: 4px; - margin: var(--spacing-lg) 0; -} - -.entry-footer { - padding-top: var(--spacing-lg); - border-top: 1px solid #e9ecef; - margin-top: var(--spacing-xl); -} - -.tags-links { - display: flex; - flex-wrap: wrap; - gap: var(--spacing-sm); - align-items: center; - margin-bottom: var(--spacing-md); -} - -.tags-label { - font-weight: 600; - color: var(--color-dark); -} - -.tags-list a { - display: inline-block; - padding: var(--spacing-xs) var(--spacing-sm); - background-color: var(--color-light); - color: var(--color-dark); - font-size: 0.875rem; - border-radius: 4px; - text-decoration: none; - transition: background-color 0.3s ease; -} - -.tags-list a:hover { - background-color: #e2e6ea; - text-decoration: none; -} - -.edit-link a { - color: var(--color-secondary); - font-size: 0.875rem; -} - -/* ========================================================================== - Archive Styles - ========================================================================== */ - -.page-header { - margin-bottom: var(--spacing-xxl); - padding-bottom: var(--spacing-lg); - border-bottom: 2px solid var(--color-primary); -} - -.page-title { - margin-bottom: var(--spacing-md); - color: var(--color-dark); -} - -.archive-description { - color: var(--color-secondary); - font-size: 1.125rem; - line-height: 1.6; -} - -.archive-posts { - display: grid; - gap: var(--spacing-xxl); - margin-bottom: var(--spacing-xxl); -} - -.archive-posts article { - display: grid; - gap: var(--spacing-lg); -} - -@media (min-width: 768px) { - .archive-posts article { - grid-template-columns: 300px 1fr; - } -} - -.archive-posts .post-thumbnail { - margin-bottom: 0; -} - -.archive-posts .entry-summary { - color: var(--color-text); - line-height: 1.6; -} - -.read-more-link { - display: inline-flex; - align-items: center; - gap: var(--spacing-xs); - font-weight: 600; - color: var(--color-primary); - text-decoration: none; - margin-top: var(--spacing-md); -} - -.read-more-link:hover { - text-decoration: underline; -} - -.read-more-icon { - transition: transform 0.3s ease; -} - -.read-more-link:hover .read-more-icon { - transform: translateX(4px); -} - -/* ========================================================================== - Pagination - ========================================================================== */ - -.pagination, -.posts-pagination { - margin-top: var(--spacing-xxl); - margin-bottom: var(--spacing-xxl); -} - -.nav-links { - display: flex; - justify-content: center; - gap: var(--spacing-sm); - flex-wrap: wrap; -} - -.nav-links .page-numbers { - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 44px; - min-height: 44px; - padding: var(--spacing-xs) var(--spacing-sm); - border: 1px solid #dee2e6; - border-radius: 4px; - color: var(--color-primary); - text-decoration: none; - transition: all 0.3s ease; -} - -.nav-links .page-numbers:hover { - background-color: var(--color-primary); - color: #fff; - border-color: var(--color-primary); - text-decoration: none; -} - -.nav-links .page-numbers.current { - background-color: var(--color-primary); - color: #fff; - border-color: var(--color-primary); -} - -.nav-links .page-numbers.dots { - border: none; -} - -/* ========================================================================== - Post Navigation - ========================================================================== */ - -.post-navigation { - margin-top: var(--spacing-xxl); - padding-top: var(--spacing-xl); - border-top: 1px solid #e9ecef; -} - -.post-navigation .nav-links { - display: grid; - gap: var(--spacing-lg); -} - -@media (min-width: 768px) { - .post-navigation .nav-links { - grid-template-columns: 1fr 1fr; - } -} - -.post-navigation a { - display: block; - padding: var(--spacing-lg); - border: 1px solid #dee2e6; - border-radius: 4px; - text-decoration: none; - transition: all 0.3s ease; -} - -.post-navigation a:hover { - border-color: var(--color-primary); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - text-decoration: none; -} - -.nav-subtitle { - display: block; - font-size: 0.875rem; - color: var(--color-secondary); - margin-bottom: var(--spacing-xs); -} - -.nav-title { - display: block; - font-weight: 600; - color: var(--color-dark); -} - -/* ========================================================================== - 404 Error Page - ========================================================================== */ - -.error-404 { - text-align: center; - max-width: 800px; - margin: 0 auto; - padding: var(--spacing-xxl) var(--spacing-lg); -} - -.error-404 .page-header { - border-bottom: none; - margin-bottom: var(--spacing-xl); -} - -.error-404 .page-title { - font-size: 3rem; - color: var(--color-primary); -} - -.error-message { - font-size: 1.125rem; - color: var(--color-secondary); - margin-bottom: var(--spacing-xxl); -} - -.error-actions { - text-align: left; -} - -.error-actions h2, -.error-actions h3 { - margin-top: var(--spacing-xl); - margin-bottom: var(--spacing-md); -} - -.error-suggestions, -.recent-posts-list, -.categories-list { - list-style: none; - padding: 0; - margin: 0; -} - -.error-suggestions li, -.recent-posts-list li, -.categories-list li { - padding: var(--spacing-sm) 0; - border-bottom: 1px solid #e9ecef; -} - -.error-suggestions li:last-child, -.recent-posts-list li:last-child, -.categories-list li:last-child { - border-bottom: none; -} - -.category-count { - color: var(--color-secondary); - font-size: 0.875rem; - margin-left: var(--spacing-xs); -} - -.recent-posts-section, -.categories-section { - margin-top: var(--spacing-xl); -} - -/* ========================================================================== - Front Page - ========================================================================== */ - -.front-page .hero-section { - margin-bottom: var(--spacing-xxl); - border-radius: 8px; - overflow: hidden; -} - -.front-page .hero-section img { - width: 100%; - height: auto; - max-height: 500px; - object-fit: cover; -} - -/* ========================================================================== - Page Links (Paginated Posts) - ========================================================================== */ - -.page-links { - margin-top: var(--spacing-xl); - padding-top: var(--spacing-lg); - border-top: 1px solid #e9ecef; - font-weight: 600; -} - -.page-links a { - display: inline-block; - margin: 0 var(--spacing-xs); - padding: var(--spacing-xs) var(--spacing-sm); - border: 1px solid #dee2e6; - border-radius: 4px; - text-decoration: none; -} - -.page-links a:hover { - background-color: var(--color-primary); - color: #fff; - border-color: var(--color-primary); - text-decoration: none; -} - -/* ========================================================================== - Responsive Media - ========================================================================== */ - -@media (max-width: 767px) { - h1 { font-size: 2rem; } - h2 { font-size: 1.75rem; } - h3 { font-size: 1.5rem; } - h4 { font-size: 1.25rem; } - - .content-wrapper { - padding: var(--spacing-md); - grid-template-columns: 1fr; - } - - .archive-posts article { - grid-template-columns: 1fr; - } - - .error-404 .page-title { - font-size: 2rem; - } -} +/* + * IMPORTANTE: Los estilos CSS del tema están en: + * assets/css/style.css + * + * Este archivo solo contiene el header obligatorio de WordPress. + * Los estilos se cargan mediante wp_enqueue_style() en functions.php + */