/* Theme Name: Holnix Theme URI: https://iberpixel.com Author: IberPixel Author URI: https://iberpixel.dev Description: Tema personalizado para Holnix. Desarrollado con bloques Gutenberg nativos y ACF Pro para opciones globales. Requiere: ACF Pro (opciones del tema). Desarrollado por IberPixel. Version: 1.4.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: holnix-site-v2 Tags: custom-logo, custom-menu, featured-images, block-editor, accessibility-ready, translation-ready, one-column, wide-blocks Desarrollado por IberPixel. */ /* ================================== RESET & BASE STYLES ================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; scroll-padding-top: 80px; /* * clip, no hidden: cualquier overflow-x no-visible en Y a la * vez fuerza (spec CSS Overflow) que el overflow-y implícito de ambos pase * de "visible" a "auto" — los dos quedan como scroll containers anidados y * separados del scroll real del viewport, y position:sticky dentro (el * header) deja de pegarse (se computa contra un scrollport que nunca se * mueve). "clip" evita el overflow horizontal sin activar ese upgrade. */ overflow-x: clip; /* 100vw incluye el scrollbar y genera overflow horizontal */ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--wp--preset--font-family--inter); font-size: var(--wp--preset--font-size--normal); line-height: 1.6; color: var(--wp--preset--color--foreground); background-color: var(--wp--preset--color--background); /* * overflow-x:hidden en (arriba) no alcanza: en mobile real, cuando * un elemento fuera de pantalla queda con un transform horizontal (ej. un * translateX negativo/positivo aplicado por algún bloque) el motor de * layout de viewport mobile (width=device-width) igual lo cuenta al * calcular el ancho de la layout viewport, aunque esté clippeado * visualmente por el overflow:hidden de su sección — infla la layout * viewport más allá de device-width y con eso el header (position:fixed; * width:100%) se estira más ancho que la pantalla real, viéndose * corrido/con hueco a la derecha en mobile (ver STG en 390x844). Repetir * overflow-x:hidden acá en sí lo evita. "clip" en vez de "hidden" * por la misma razón que en arriba — ver ese comentario. */ overflow-x: clip; } /* ================================== TYPOGRAPHY ================================== */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; margin-bottom: var(--wp--preset--spacing--md); } h1 { font-size: var(--wp--preset--font-size--huge); } h2 { font-size: var(--wp--preset--font-size--extra-large); } h3 { font-size: var(--wp--preset--font-size--large); } h4 { font-size: var(--wp--preset--font-size--medium); } h5 { font-size: var(--wp--preset--font-size--normal); } h6 { font-size: var(--wp--preset--font-size--small); } p { margin-bottom: var(--wp--preset--spacing--md); } a { color: var(--wp--preset--color--magenta); text-decoration: none; transition: color 0.3s ease; } a:hover { color: var(--wp--preset--color--purple); } /* ================================== LAYOUT ================================== */ .site { display: flex; flex-direction: column; min-height: 100vh; } .site-content { flex: 1; padding: 0; width: 100%; } ul, ol { list-style-position: inside; } /* ================================== POSTS & CONTENT ================================== */ .entry-header { margin-bottom: var(--wp--preset--spacing--xl); } .entry-title { margin-bottom: var(--wp--preset--spacing--xs); } .entry-meta { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--text-light); margin-bottom: var(--wp--preset--spacing--md); } .entry-content { line-height: 1.8; } .entry-content img { max-width: 100%; height: auto; } .entry-footer { margin-top: var(--wp--preset--spacing--xl); padding-top: var(--wp--preset--spacing--md); border-top: 1px solid var(--wp--preset--color--light-gray); font-size: var(--wp--preset--font-size--small); } /* ================================== COMMENTS ================================== */ .comments-area { margin-top: var(--wp--preset--spacing--2xl); } .comment-list { list-style: none; } .comment { margin-bottom: var(--wp--preset--spacing--xl); padding: var(--wp--preset--spacing--md); background-color: var(--wp--preset--color--neutral-light); border-radius: var(--wp--custom--border-radius--sm); } /* ================================== WIDGETS ================================== */ .widget { margin-bottom: var(--wp--preset--spacing--xl); } .widget-title { font-size: var(--wp--preset--font-size--medium); margin-bottom: var(--wp--preset--spacing--md); } /* ================================== PAGE TEMPLATE (page.php) ================================== */ .holnix-page__content { font-size: var(--wp--preset--font-size--body-large); color: var(--wp--preset--color--foreground); } .holnix-page__content > * + * { margin-top: var(--wp--preset--spacing--xl); } .holnix-page__content h1, .holnix-page__content h2, .holnix-page__content h3, .holnix-page__content h4, .holnix-page__content h5, .holnix-page__content h6 { color: var(--wp--preset--color--foreground); margin-bottom: var(--wp--preset--spacing--md); } .holnix-page__content ul, .holnix-page__content ol { padding-left: var(--wp--preset--spacing--xl); margin-bottom: var(--wp--preset--spacing--md); } /* ================================== 404 TEMPLATE (404.php) ================================== */ .holnix-404__container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50vh; } .holnix-404__eyebrow { font-size: var(--wp--preset--font-size--small); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--primary); margin-bottom: var(--wp--preset--spacing--xs); } .holnix-404__title { color: var(--wp--preset--color--foreground); margin-bottom: var(--wp--preset--spacing--md); } .holnix-404__description { max-width: 560px; font-size: var(--wp--preset--font-size--body-large); color: var(--wp--preset--color--foreground); margin-bottom: 0; } .holnix-404__actions { margin-top: var(--wp--preset--spacing--xl); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wp--preset--spacing--md); } /* ================================== CUSTOM UTILITIES ================================== */ /* * Sin padding-top de compensación acá — el header es sticky (ver header.css), * reserva su propio espacio real en el flujo por defecto. */ .theme-container { max-width: 1440px; margin: 0 auto; padding: 0 16px; width: 100%; } @media (min-width: 1024px) { .theme-container { padding: 0 64px; } } /* * Páginas de detalle (single.php: blog, evento/webinar, help center, * caso de éxito) en tablet: el padding-x general pasa a 40px (igual que * el navbar, ver header.css) en vez de heredar el valor mobile de 16px. * Escopado a .holnix-single para no afectar el resto del sitio. */ @media (min-width: 768px) { .theme-container.holnix-single { padding: 0 40px; } } @media (min-width: 1024px) { .theme-container.holnix-single { padding: 0 64px; } } /* * Overlap genérico header transparente: en páginas donde el primer bloque * real es "ancho completo" (align:full — cualquiera de los ~30 bloques del * tema, no una lista fija, ver holnix_page_has_overlay_hero() en * inc/theme-setup.php), ese bloque sube detrás del header transparente con * un margin-top negativo igual a su alto real (--holnix-header-height, * sincronizado por el script inline de header.php). .has-transparent-header * en el es lo que gatea esto — en cualquier otra página el header * queda sólido y ningún bloque necesita este margen. */ body.has-transparent-header .entry-content > .alignfull:first-child, body.has-transparent-header .site-content > .alignfull:first-child { margin-top: calc(-1 * var(--holnix-header-height, 100px)); } /* Clases de espaciado y tipografía: ver assets/css/main.css */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal; } .alignleft { float: left; margin-right: var(--wp--preset--spacing--xl); } .alignright { float: right; margin-left: var(--wp--preset--spacing--xl); } .aligncenter { display: block; margin-left: auto; margin-right: auto; } /* ================================== BUTTONS — Variantes Gutenberg ================================== */ .is-style-outline .wp-block-button__link { background-color: transparent; color: var(--wp--preset--color--primary); border: 2px solid var(--wp--preset--color--primary); } .is-style-outline .wp-block-button__link:hover { background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); } /* ================================== FORMS ================================== */ input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], textarea, select { width: 100%; padding: 8px 16px; font-family: var(--wp--preset--font-family--inter); font-size: var(--wp--preset--font-size--small, 14px); font-weight: 400; line-height: 1.21; color: var(--wp--preset--color--text-dark); background-color: var(--wp--preset--color--light-gray); border: 1px solid transparent; border-radius: var(--wp--custom--border-radius--lg, 16px); box-shadow: none; appearance: none; -webkit-appearance: none; transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } select { padding-right: 40px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23727980' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px 16px; cursor: pointer; } textarea { min-height: 120px; line-height: 1.5; resize: vertical; } input::placeholder, textarea::placeholder { color: var(--wp--preset--color--text-light); opacity: 0.64; } input:focus, textarea:focus, select:focus { color: var(--wp--preset--color--text-dark); background-color: var(--wp--preset--color--light-gray); border-color: var(--wp--preset--color--primary); outline: 0; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); } .wpcf7-form label, form label { display: inline-block; margin-bottom: 4px; font-family: var(--wp--preset--font-family--inter); font-size: var(--wp--preset--font-size--small, 14px); font-weight: 500; line-height: 1.21; color: var(--wp--preset--color--text-light); } input[type="checkbox"], input[type="radio"] { accent-color: var(--wp--preset--color--magenta); } /* ================================== WORDPRESS BLOCKS ================================== */ .wp-block-image { margin-bottom: var(--wp--preset--spacing--xl); } .wp-block-image img { max-width: 100%; height: auto; } .wp-block-quote { border-left: 4px solid var(--wp--preset--color--primary); padding-left: var(--wp--preset--spacing--md); margin-left: 0; font-style: italic; } .alignwide { margin-left: 0; margin-right: 0; max-width: 100vw; width: auto; } .alignfull { margin-left: 0; margin-right: 0; max-width: 100vw; width: auto; } .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--wp--preset--spacing--md); margin-bottom: var(--wp--preset--spacing--xl); } .gallery-item { margin: 0; } /* ================================== PAGINATION ================================== */ .navigation { margin: var(--wp--preset--spacing--xl) 0; } .nav-links { display: flex; justify-content: space-between; gap: var(--wp--preset--spacing--md); } .nav-previous, .nav-next { flex: 1; } .nav-previous a, .nav-next a { display: block; padding: 0.75rem var(--wp--preset--spacing--md); background-color: var(--wp--preset--color--neutral-light); border-radius: var(--wp--custom--border-radius--sm); transition: background-color 0.3s ease; } .nav-previous a:hover, .nav-next a:hover { background-color: var(--wp--preset--color--light-gray); } /* ================================== ACCESSIBILITY ================================== */ .skip-link:focus { background-color: var(--wp--preset--color--neutral-light); box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto; clip-path: none; color: var(--wp--preset--color--primary); display: block; font-size: var(--wp--preset--font-size--small); font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* ================================== RESPONSIVE ================================== */ @media (max-width: 768px) { } /* ================================== PRINT STYLES ================================== */ @media print { .holnix-header, .holnix-footer, .comments-area { display: none; } .site-content { max-width: 100%; padding: 0; } }