/* Theme Name: Ciclismo en México v2026 Theme URI: https://ciclismoenmexico.com/ Author: Ciclismo en México Author URI: https://ciclismoenmexico.com/ Description: Tema del sitio Ciclismo en México. Portada tipo revista con eventos, resultados y rutas; construido sobre el sistema de diseño Organic. Todo el contenido (menús, enlaces, módulos y fichas) se administra desde WordPress. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: cem-v2026 Tags: blog, news, magazine, custom-logo, custom-menu, featured-images, translation-ready, two-columns, right-sidebar */ /* ========================================================================== ÍNDICE ========================================================================== 01. Modo oscuro y colores de marca fijos 02. Utilidades base 03. Barra superior 04. Cabecera del sitio 05. Navegación principal 06. Menú móvil 07. Medios (imágenes destacadas y patrones de respaldo) 08. Portada — destacado 09. Portada — módulos laterales 10. Secciones, rejillas y tarjetas 11. Franja de rutas 12. Artículo (single) 13. Página (page) 14. Archivo, búsqueda y 404 15. Comentarios 16. Pie de página 17. Clases que WordPress espera Este archivo SOLO tiene maquetación. Los tokens y los componentes básicos (.btn, .input, .table, .tag…) viven en assets/css/organic.css, que es el sistema de diseño vendorizado y no se toca. Todas las medidas salen de la maqueta original (`Tema Ciclismo en Mexico.dc.html`). Allá estaban en atributos `style=` en línea; aquí son clases, porque `wp_nav_menu()` y `the_content()` generan su propio HTML y no se les puede inyectar estilos en línea sin un walker. ========================================================================== */ /* ========================================================================== 01. Modo oscuro y colores de marca fijos ========================================================================== */ /* Superficies que son verde oscuro en los DOS temas: la barra superior, la barra de navegación, la franja de rutas y el pie. Como nunca cambian de fondo, sus acentos tampoco deben voltearse con el tema — por eso van en variables propias y no en los tokens de Organic. */ :root { --cem-marca-verde: #272e1b; --cem-marca-verde-claro: #3d472b; --cem-marca-tinta: #14130f; --cem-marca-crema: #e6e2d3; --cem-marca-crema-suave: #cfd3c1; --cem-nav-activo: #d67f48; /* subrayado del elemento actual del menú */ --cem-ruta-hover: #f6a06b; /* hover dentro de la franja de rutas */ --cem-pie-hover: #f6a06b; --cem-ancho: 1240px; --cem-gutter: clamp(14px, 3vw, 28px); } /* Sobrescritura de tokens para el tema oscuro. `data-theme` lo pone assets/js/tema.js sobre . La maqueta solo redefinía una parte de las rampas; aquí se completan los pasos que faltaban (neutral 400/500/900, accent 400/500/900, accent-2 400/500/600/900). Sin ellos, esos pasos se quedaban con el valor del tema claro y se colaban colores claros en el tema oscuro. */ :root[data-theme="dark"] { --color-bg: #191714; --color-surface: #262219; --color-text: #f4ece0; --color-accent: #f6a06b; --color-accent-2: #aebf92; --color-divider: color-mix(in srgb, #f4ece0 16%, transparent); --color-neutral-100: #2f2a23; --color-neutral-200: #393328; --color-neutral-300: #494234; --color-neutral-400: #82796a; /* completado */ --color-neutral-500: #a19786; /* completado */ --color-neutral-600: #c0b6a5; --color-neutral-700: #dcd3c4; --color-neutral-800: #eee7db; --color-neutral-900: #f9f4ed; /* completado */ --color-accent-100: #3c2517; --color-accent-200: #4d2e1b; --color-accent-300: #653c22; --color-accent-400: #8c491a; /* completado */ --color-accent-500: #9e5624; /* completado */ --color-accent-600: #b2622d; --color-accent-700: #ffc6a5; --color-accent-800: #ffe1d0; --color-accent-900: #fff2eb; /* completado */ --color-accent-2-100: #262c1c; --color-accent-2-200: #313823; --color-accent-2-300: #3f4a2c; --color-accent-2-400: #728157; /* completado */ --color-accent-2-500: #8fa073; /* completado */ --color-accent-2-600: #aebf92; /* completado */ --color-accent-2-700: #ccdbb2; --color-accent-2-800: #e1eecc; --color-accent-2-900: #f0fae1; /* completado */ } /* Primera visita sin preferencia guardada: se respeta la del sistema. El `:not([data-theme="light"])` deja que la elección manual gane. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #191714; --color-surface: #262219; --color-text: #f4ece0; --color-accent: #f6a06b; --color-accent-2: #aebf92; --color-divider: color-mix(in srgb, #f4ece0 16%, transparent); --color-neutral-100: #2f2a23; --color-neutral-200: #393328; --color-neutral-300: #494234; --color-neutral-400: #82796a; --color-neutral-500: #a19786; --color-neutral-600: #c0b6a5; --color-neutral-700: #dcd3c4; --color-neutral-800: #eee7db; --color-neutral-900: #f9f4ed; --color-accent-100: #3c2517; --color-accent-200: #4d2e1b; --color-accent-300: #653c22; --color-accent-400: #8c491a; --color-accent-500: #9e5624; --color-accent-600: #b2622d; --color-accent-700: #ffc6a5; --color-accent-800: #ffe1d0; --color-accent-900: #fff2eb; --color-accent-2-100: #262c1c; --color-accent-2-200: #313823; --color-accent-2-300: #3f4a2c; --color-accent-2-400: #728157; --color-accent-2-500: #8fa073; --color-accent-2-600: #aebf92; --color-accent-2-700: #ccdbb2; --color-accent-2-800: #e1eecc; --color-accent-2-900: #f0fae1; } } /* ========================================================================== 02. Utilidades base ========================================================================== */ html, body { margin: 0; padding: 0; } body { min-height: 100vh; } /* Los enlaces de Organic usan --color-accent; en el cuerpo del sitio se ven mejor un paso más oscuro (igual que hacía la maqueta). */ a:not(.btn) { color: var(--color-accent-700); } a:not(.btn):hover { color: var(--color-accent-600); } /* Caja centrada de 1240px. Se repetía seis veces en la maqueta. */ .cem-contenedor { max-width: var(--cem-ancho); margin: 0 auto; padding-left: var(--cem-gutter); padding-right: var(--cem-gutter); } /* Enlace/tarjeta que no debe verse como enlace. */ .cem-enlace-limpio { text-decoration: none; color: inherit; display: block; } /* Listas de menú sin viñetas: `wp_nav_menu()` siempre devuelve