/** * ARCHIVO: assets/css/ux.css — Estilos del "kit de experiencia de uso" (UX). * ================================================================== * Aquí viven los estilos de las piezas que hacen el sitio más cómodo de usar: * el modo oscuro, el botón de subir, la barra de progreso de lectura, los * botones con sus estados, las ventanas de confirmación, el boletín y la hoja * de impresión. * * ¿Por qué un archivo aparte y no dentro de style.css? * Porque style.css ya tiene 50 KB y lo mantiene otra gente. Separando esto: * 1. Si algo de aquí falla, se desactiva quitando UN archivo (inc/ux.php deja * de cargarlo) y el sitio vuelve exactamente a como estaba. * 2. Se puede leer entero de una sentada. * * ORDEN DE CARGA: este archivo se carga DESPUÉS de style.css, así que puede * sobrescribir lo que necesite sin recurrir a "!important". * * @package White_Hat_News */ /* ================================================================== 1) MODO OSCURO ================================================================== Cómo funciona, en una frase: el tema ya define sus colores como "variables CSS" (esas cosas que empiezan por --whn-) en :root, y aquí sencillamente les damos OTRO valor cuando el sitio está en oscuro. Nada más. Ningún componente necesita saber que existe el modo oscuro: todos leen las mismas variables. Hay TRES estados posibles, y esto es importante: - "auto" -> hacemos caso a lo que el visitante tenga puesto en su sistema operativo (es lo que hace la consulta prefers-color-scheme). - "light" -> claro a la fuerza, aunque su sistema esté en oscuro. - "dark" -> oscuro a la fuerza, aunque su sistema esté en claro. El estado elegido se escribe en la etiqueta como data-theme="dark" o data-theme="light". Si no hay atributo, estamos en "auto". OJO CON EL ORDEN DE ESTOS DOS BLOQUES: primero el automático y después el forzado. Si se invirtieran, un visitante con el sistema en oscuro no podría forzar el modo claro, porque la regla del sistema ganaría por ir después. */ /* 1.a) AUTOMÁTICO: su sistema está en oscuro y no ha elegido nada a mano. El :not([data-theme="light"]) es la parte que respeta su elección: si pulsó "claro" a propósito, este bloque entero se desactiva. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --whn-text: #e7e9ea; /* tinta clara sobre fondo oscuro */ --whn-text-soft: #a6adb4; --whn-bg: #14181b; /* el fondo pasa a ser el color oscuro del tema */ --whn-bg-alt: #1d2226; /* fondos suaves: un escalón por encima del fondo */ --whn-border: #2e353b; --whn-accent: #ef4a55; /* el rojo de marca, ACLARADO: ver nota de contraste */ --whn-accent-ink: #ff6b74; --whn-accent-2: #ef4a55; --whn-dark: #0d1013; /* las barras oscuras se oscurecen aún más */ --whn-dark-2: #1d2226; color-scheme: dark; } } /* 1.b) FORZADO: el visitante pulsó el botón y eligió oscuro. */ :root[data-theme="dark"] { --whn-text: #e7e9ea; --whn-text-soft: #a6adb4; --whn-bg: #14181b; --whn-bg-alt: #1d2226; --whn-border: #2e353b; --whn-accent: #ef4a55; --whn-accent-ink: #ff6b74; --whn-accent-2: #ef4a55; --whn-dark: #0d1013; --whn-dark-2: #1d2226; color-scheme: dark; } /* Y el camino de vuelta: forzar el modo claro. Sin este bloque, el visitante con el sistema en oscuro podría pulsar "claro" y no pasaría nada visible. */ :root[data-theme="light"] { color-scheme: light; } /* POR QUÉ SE ACLARA EL ROJO DE MARCA EN OSCURO (no es un capricho de diseño): el rojo #c1121f sobre el fondo blanco tiene contraste de sobra, pero ese MISMO rojo sobre el fondo oscuro #14181b se queda en 3,3:1 — por debajo del 4,5:1 que exige la norma de accesibilidad WCAG para texto normal. Los enlaces quedarían legalmente ilegibles. El #ef4a55 sube a 5,6:1 y conserva la identidad de marca. Si alguien cambia el rojo del Personalizador, este valor NO se recalcula solo: hay que revisarlo a mano. "color-scheme" es la otra mitad del trabajo y se olvida siempre: le dice al NAVEGADOR que la página es oscura, y entonces él pinta en oscuro las cosas que nosotros no controlamos — las barras de desplazamiento, los desplegables nativos, los campos de formulario y el fondo que se ve al rebotar el scroll. Sin esta línea aparecen barras blancas brillantes en una página negra. */ /* --- UN COLOR NO PUEDE SERVIR PARA LAS DOS COSAS A LA VEZ ---------------- Aclarar el rojo de marca (arriba) hace que los ENLACES se lean sobre el fondo oscuro. Pero ese mismo rojo se usa también como FONDO de botones con texto blanco encima, y ahí el efecto es el contrario: cuanto más claro es el fondo, menos se lee el blanco. Medido: blanco sobre el rojo aclarado #ef4a55 da **3,63**, por debajo del 4,5 que exige la norma. Se veía en el botón «Buscar» de la cabecera. Es una tensión real y no se resuelve eligiendo mejor el color: hacen falta DOS tonos. Uno claro para texto, uno más profundo para fondos. #ef4a55 texto sobre fondo oscuro -> 5,6 sobre #14181b ✔ #d32030 fondo con texto blanco -> 5,2 con el blanco ✔ -> 3,4 sobre el fondo ✔ (se distingue) Los tres sitios del tema donde el acento es fondo CON TEXTO ENCIMA están listados abajo. Los demás usos (barras, puntos del carrusel, degradados) son decoración sin texto y no necesitan corrección. */ :root[data-theme="dark"] { --whn-accent-solid: #d32030; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --whn-accent-solid: #d32030; } } :root[data-theme="dark"] .whn-search button, :root[data-theme="dark"] .whn-pagination .current, :root[data-theme="dark"] .whn-share a:hover, :root[data-theme="dark"] .whn-btn:not(.whn-btn--ghost), :root[data-theme="dark"] .whn-float-btn--contact { background: var(--whn-accent-solid); border-color: var(--whn-accent-solid); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .whn-search button, :root:not([data-theme="light"]) .whn-pagination .current, :root:not([data-theme="light"]) .whn-share a:hover, :root:not([data-theme="light"]) .whn-btn:not(.whn-btn--ghost), :root:not([data-theme="light"]) .whn-float-btn--contact { background: var(--whn-accent-solid); border-color: var(--whn-accent-solid); } } /* --- Componentes de PLUGINS que traen su propia paleta ------------------- EL PROBLEMA, Y POR QUÉ NO SE ARREGLA SOLO: el modo oscuro de arriba funciona redefiniendo las variables del TEMA (--whn-*). Cualquier componente que use variables PROPIAS —o colores escritos a pelo— se queda exactamente como estaba, y nadie avisa. Caso medido en producción: el banner de titulares (el plugin que pinta .banner-notices) define las suyas, --bn-notice-*. Su fondo era «none», así que al pasar a oscuro se volvió transparente y dejó ver el fondo oscuro de la página... pero su texto seguía clavado en #222222. Resultado: titulares en gris casi negro sobre fondo casi negro, con un contraste de 1,12 cuando el mínimo legible es 4,5. Ilegibles del todo. Y no daba ningún error: el banner estaba ahí, ocupaba su sitio y se desplazaba. Se arregla enganchando SU variable a la del tema, para que a partir de ahora siga al modo oscuro sin más mantenimiento. No se toca el plugin: sus ajustes siguen mandando en el modo claro. OJO SI ALGUIEN PONE UN FONDO FIJO AL BANNER en los ajustes del plugin: esto da por hecho que el fondo es transparente («none»), que es como está hoy. Con un fondo claro fijo, un texto claro volvería a ser ilegible — al revés. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bn-notice-banner-text-color: var(--whn-text); } } :root[data-theme="dark"] { --bn-notice-banner-text-color: var(--whn-text); } /* El separador entre titulares lleva el color escrito a pelo (rgba(0,0,0,.3)) dentro del CSS del plugin, así que no hay variable que redefinir: se sobrescribe la regla. currentColor lo ata al color del texto, y así vale para los dos modos de una vez. */ :root[data-theme="dark"] .banner-container .banner-notices.swiper-container .swiper-slide::after { color: currentColor; opacity: .35; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .banner-container .banner-notices.swiper-container .swiper-slide::after { color: currentColor; opacity: .35; } } /* Las imágenes y los vídeos deslumbran en una página oscura. Bajarles un punto el brillo los integra sin desvirtuarlos. No se toca el logotipo del sitio ni nada marcado como .whn-no-dim: una marca con el brillo alterado es una marca mal reproducida. */ :root[data-theme="dark"] img:not(.whn-no-dim):not(.custom-logo), :root[data-theme="dark"] video:not(.whn-no-dim) { filter: brightness(.92); } /* --- El botón que cambia de modo --- */ .whn-theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 38px; height: 38px; padding: 0; border: 1px solid transparent; border-radius: var(--whn-radius); background: transparent; color: inherit; /* hereda el color de la barra donde esté */ cursor: pointer; line-height: 0; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .whn-theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; /* el icono se pinta del color del texto */ stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Sólo UNO de los dos iconos se ve a la vez. El truco: por defecto enseñamos el sol; cuando el sitio está en oscuro, enseñamos la luna. Los dos viven en el HTML para que el cambio sea instantáneo y no haya que dibujar nada al vuelo. */ .whn-theme-toggle__moon { display: none; } :root[data-theme="dark"] .whn-theme-toggle__sun { display: none; } :root[data-theme="dark"] .whn-theme-toggle__moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .whn-theme-toggle__sun { display: none; } :root:not([data-theme="light"]) .whn-theme-toggle__moon { display: block; } } /* ================================================================== 2) BOTONES Y SUS ESTADOS (hover, foco, pulsado, desactivado) ================================================================== Un botón tiene que contestar. Si al pasar el ratón por encima no cambia nada, la gente duda de si es un botón siquiera. Definimos aquí los CUATRO estados que debe tener cualquier botón del sitio. */ .whn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; /* ver nota del área táctil, más abajo */ padding: 10px 18px; border: 1px solid var(--whn-accent); border-radius: var(--whn-radius); background: var(--whn-accent); color: #fff; font-family: var(--whn-font-head); font-size: .95rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; /* Sólo animamos color, fondo, borde y transform. Animar "all" obliga al navegador a vigilar decenas de propiedades y se nota en móviles lentos. */ transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; } /* EL ALTO MÍNIMO DE 44 PÍXELES NO ES ESTÉTICO. Es la medida que recomiendan las guías de accesibilidad (y las de Apple y Google) para que un dedo acierte sin pelear. Un botón de 30 px se falla constantemente en un móvil en movimiento, que es justo cómo se lee un periódico. */ /* El hover va DENTRO de @media (hover: hover) y esto es lo que más se olvida. En una pantalla táctil no hay ratón: el navegador simula un "hover" al tocar y NO LO QUITA hasta que tocas en otro sitio. Resultado sin esta protección: el último botón pulsado se queda encendido, como si siguiera seleccionado, y la gente cree que la página se ha colgado. */ @media (hover: hover) { .whn-btn:hover { background: var(--whn-accent-ink); border-color: var(--whn-accent-ink); color: #fff; text-decoration: none; } } /* :focus-visible = "tiene el foco Y el navegador cree que conviene enseñarlo". Es la diferencia con :focus a secas: con :focus, al hacer clic con el ratón salía un recuadro que la gente pedía quitar, y al quitarlo se dejaba ciego a quien navega con el tabulador. Con :focus-visible, el recuadro aparece para el teclado y no para el ratón. Nadie pierde. */ .whn-btn:focus-visible { outline: 3px solid var(--whn-accent-2); outline-offset: 2px; } /* :active es el instante en que el botón está pulsado. Ese hundimiento de 1 px es la confirmación física de que el clic se registró. */ .whn-btn:active { transform: translateY(1px); } .whn-btn[disabled], .whn-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; } /* Variante secundaria: mismo comportamiento, menos peso visual. Dos botones con la misma fuerza compiten y ninguno gana. */ .whn-btn--ghost { background: transparent; color: var(--whn-accent); } @media (hover: hover) { .whn-btn--ghost:hover { background: var(--whn-accent); color: #fff; } } /* Quien pide "menos movimiento" en su sistema (por mareos o migrañas) recibe los mismos cambios de color, pero sin desplazamientos ni transiciones. */ @media (prefers-reduced-motion: reduce) { .whn-btn { transition: none; } .whn-btn:active { transform: none; } } /* ================================================================== 3) SALTAR AL CONTENIDO (y la trampa del menú fijo) ================================================================== El enlace "Saltar al contenido" ya existía en el tema. Lo que se arregla aquí es que DE VERDAD se vea al enfocarlo, y el destino al que salta. */ .whn-skip-link:focus { position: fixed; left: 8px; top: 8px; z-index: 1000; /* por encima del menú fijo, o queda debajo */ width: auto; height: auto; clip: auto; clip-path: none; padding: 12px 18px; background: var(--whn-accent); color: #fff; font-weight: 700; text-decoration: none; outline: 3px solid #fff; outline-offset: 2px; } /* LA TRAMPA DEL MENÚ FIJO, que afecta a TODAS las anclas del sitio y no sólo a este enlace: cuando la barra de navegación se queda pegada arriba, el navegador lleva el destino al borde superior de la ventana... que es justo donde está la barra. Resultado: saltas y el título al que ibas queda TAPADO. Parece que el enlace no funciona. scroll-margin-top le dice al navegador "deja este hueco libre por encima al desplazarte hasta aquí". Se aplica a todo lo que pueda ser destino de un ancla: el contenido principal, los titulares y los comentarios. */ html { scroll-behavior: smooth; } #whn-main, .whn-article h2[id], .whn-article h3[id], #comments { scroll-margin-top: calc(var(--whn-sticky-offset, 0px) + 16px); } /* El desplazamiento suave también se desactiva a quien pide menos movimiento: para algunas personas ese deslizamiento produce mareo real. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ================================================================== 4) BARRA DE PROGRESO DE LECTURA ================================================================== La franja fina de arriba que se va llenando según bajas por el artículo. Dice cuánto queda, que en una noticia larga es información útil. Se hace de DOS maneras a la vez, y conviene entender por qué: - Con CSS puro ("scroll-driven animations"), que es la forma moderna: la animación la mueve el propio navegador, sin JavaScript, y por tanto va perfectamente fluida. - Con JavaScript, para los navegadores donde lo anterior todavía no existe. La función @supports de abajo es la que decide cuál se usa. */ .whn-progress { position: fixed; left: 0; top: 0; z-index: 120; /* por encima del menú fijo */ width: 100%; height: 3px; background: transparent; pointer-events: none; /* que no intercepte clics: es decorativa */ } .whn-progress__bar { height: 100%; width: 100%; background: var(--whn-accent); transform: scaleX(0); /* empieza vacía */ transform-origin: 0 50%; /* y crece desde la IZQUIERDA */ } /* Cuando la barra la mueve JavaScript, le ponemos una transición cortita para que el avance no vaya a tirones en pantallas de refresco lento. */ .whn-progress--js .whn-progress__bar { transition: transform .1s linear; } /* La versión moderna: el navegador ata la animación al scroll de la página. scaleX(0) al principio del documento y scaleX(1) al final. Cero JavaScript. */ @supports (animation-timeline: scroll()) { .whn-progress--css .whn-progress__bar { transition: none; animation: whn-progress-grow linear; animation-timeline: scroll(root block); } @keyframes whn-progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } } /* Es puramente decorativa, así que a quien pide menos movimiento se la escondemos del todo en vez de dejarla temblando. */ @media (prefers-reduced-motion: reduce) { .whn-progress { display: none; } } /* ================================================================== 5) BOTONES FLOTANTES (subir arriba y contacto) ================================================================== ¡ATENCIÓN! ESTA ES LA ZONA MÁS PELIGROSA DE TODO EL ARCHIVO, y no por motivos técnicos sino de DINERO. En la esquina inferior de la pantalla, en móvil, ya hay un banner de publicidad pegado abajo (el que pinta inc/ad-manager.php). Las políticas de AdSense prohíben expresamente que un anuncio quede tapado, pegado o "demasiado cerca" de un elemento de navegación, porque provoca clics accidentales. Un clic accidental no es un error menor: el tráfico inválido es de las causas que CIERRAN una cuenta de AdSense, y una cuenta cerrada se lleva por delante los ingresos de todas las webs y apps que cuelguen de ella. Por eso los botones flotantes: - se apartan del banner con --whn-ad-offset, que mide inc/ux.php en vivo; - guardan 16 px de aire por encima de él (nunca se tocan); - y DESAPARECEN en pantallas estrechas si el banner está presente. No se toca ninguna de estas tres cosas sin leer antes la política. */ .whn-floaters { position: fixed; right: 16px; /* El suelo de los botones es el MAYOR de dos estorbos, más 16 px de aire: --whn-ad-offset lo que mide el banner de publicidad de abajo; --whn-esquina-ocupada lo que ocupan los botones flotantes de OTROS plugins (chat, selector de idioma...). Las dos las mide ux.js en vivo, porque ninguna se puede escribir aquí: el banner cambia de alto según el anuncio, y los widgets ajenos aparecen cuando les contesta su servidor. El segundo valor se añadió después de medir el sitio ya publicado, donde el botón de chat (z-index 999999) se comía entero el de subir. Sin esto, el botón existe, se ve en el HTML, pasa todas las comprobaciones... y el clic se lo lleva el chat. */ bottom: calc(max(var(--whn-ad-offset, 0px), var(--whn-esquina-ocupada, 0px)) + 16px); z-index: 90; /* por DEBAJO de las ventanas modales (1000) */ display: flex; flex-direction: column; gap: 10px; pointer-events: none; /* el contenedor no intercepta nada... */ } .whn-floaters > * { pointer-events: auto; } /* ...pero sus botones sí. */ .whn-float-btn { display: flex; align-items: center; justify-content: center; width: 48px; /* 48 px: cómodo para el pulgar */ height: 48px; border: 1px solid var(--whn-border); border-radius: 999px; background: var(--whn-bg); color: var(--whn-text); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); cursor: pointer; transition: opacity .2s ease, visibility .2s ease, transform .15s ease, background-color .15s ease, color .15s ease; } .whn-float-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @media (hover: hover) { .whn-float-btn:hover { background: var(--whn-accent); color: #fff; border-color: var(--whn-accent); } } .whn-float-btn:focus-visible { outline: 3px solid var(--whn-accent-2); outline-offset: 2px; } /* El botón de subir no existe hasta que hay algo que subir. Se oculta con opacity + visibility (y NO con display:none) para que pueda aparecer y desaparecer con una transición suave; display no se puede animar. */ .whn-float-btn--top { opacity: 0; visibility: hidden; transform: translateY(8px); } .whn-float-btn--top.is-visible { opacity: 1; visibility: visible; transform: none; } /* El de contacto es el que más llama, así que lleva el color de marca. */ .whn-float-btn--contact { background: var(--whn-accent); border-color: var(--whn-accent); color: #fff; } @media (hover: hover) { .whn-float-btn--contact:hover { background: var(--whn-accent-ink); border-color: var(--whn-accent-ink); } } /* La regla de seguridad citada arriba: en móvil, con banner presente, los botones flotantes se van. Es preferible perder un botón cómodo a arriesgar la cuenta de publicidad de toda la empresa. */ @media (max-width: 600px) { body.whn-has-sticky-ad .whn-floaters { display: none; } } /* Con el menú abierto, los flotantes se quitan de en medio. Se vio al revisar la captura del móvil: el botón de contacto quedaba flotando sobre el menú desplegado, compitiendo con él por el pulgar. Mientras alguien está eligiendo sección, el botón de contacto no pinta nada. */ body.whn-menu-open .whn-floaters { display: none; } @media (prefers-reduced-motion: reduce) { .whn-float-btn { transition: opacity .01ms; transform: none; } } /* ================================================================== 6) COPIAR AL PORTAPAPELES ================================================================== */ .whn-copy { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--whn-border); border-radius: var(--whn-radius); background: var(--whn-bg); color: var(--whn-text-soft); font-size: .85rem; font-weight: 600; cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease; } .whn-copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @media (hover: hover) { .whn-copy:hover { color: var(--whn-accent); border-color: var(--whn-accent); } } .whn-copy:focus-visible { outline: 3px solid var(--whn-accent-2); outline-offset: 2px; } /* Estado "copiado": verde y con el texto cambiado. Dura dos segundos y vuelve. Sin esta confirmación la gente pulsa tres veces, porque copiar es una acción que no se ve por ningún lado. */ .whn-copy.is-done { color: #0a7d37; border-color: #0a7d37; } .whn-copy.is-done .whn-copy__icon--copy { display: none; } .whn-copy__icon--done { display: none; } .whn-copy.is-done .whn-copy__icon--done { display: block; } /* ================================================================== 7) VENTANAS DE CONFIRMACIÓN () ================================================================== Usamos el elemento del propio HTML en vez de montar una ventana con divs. Al abrirlo con showModal(), el navegador regala cuatro cosas que hacerlas a mano sale mal casi siempre: - lleva el foco dentro de la ventana, - deja INERTE todo el resto de la página (no se puede tabular ni clicar), - cierra con la tecla Escape, - y pinta el fondo oscurecido, que se estiliza con ::backdrop. */ .whn-dialog { width: min(92vw, 460px); padding: 0; border: 1px solid var(--whn-border); border-radius: var(--whn-radius); background: var(--whn-bg); color: var(--whn-text); } .whn-dialog::backdrop { background: rgba(0, 0, 0, .55); } .whn-dialog__body { padding: 24px; } .whn-dialog__title { margin: 0 0 8px; font-family: var(--whn-font-head); font-size: 1.15rem; line-height: 1.3; } .whn-dialog__text { margin: 0 0 20px; color: var(--whn-text-soft); } .whn-dialog__text strong { color: var(--whn-text); word-break: break-all; } .whn-dialog__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } /* ================================================================== 8) BOLETÍN (newsletter) ================================================================== */ .whn-newsletter { padding: 24px; border: 1px solid var(--whn-border); border-left: 4px solid var(--whn-accent); background: var(--whn-bg-alt); } .whn-newsletter__title { margin: 0 0 6px; font-family: var(--whn-font-head); font-size: 1.1rem; } .whn-newsletter__text { margin: 0 0 16px; color: var(--whn-text-soft); font-size: .92rem; } .whn-newsletter__row { display: flex; flex-wrap: wrap; gap: 10px; } .whn-newsletter__row input[type="email"] { flex: 1 1 200px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--whn-border); border-radius: var(--whn-radius); background: var(--whn-bg); color: var(--whn-text); font-size: 1rem; /* ver nota: menos de 16 px hace ZUMBAR a iOS */ } .whn-newsletter__row input[type="email"]:focus-visible { outline: 3px solid var(--whn-accent-2); outline-offset: 1px; } /* LOS 16 PÍXELES DEL CAMPO NO SON NEGOCIABLES: Safari de iPhone hace ZOOM automático sobre cualquier campo con letra menor de 16 px al tocarlo, y deja la página descuadrada y al visitante buscando cómo volver. */ .whn-newsletter__consent { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: .82rem; line-height: 1.5; color: var(--whn-text-soft); } .whn-newsletter__consent input { margin-top: 3px; flex: 0 0 auto; } .whn-newsletter__msg { margin-top: 12px; font-size: .9rem; font-weight: 600; } .whn-newsletter__msg--ok { color: #0a7d37; } .whn-newsletter__msg--error { color: var(--whn-accent); } /* El "tarro de miel": un campo invisible que las personas nunca ven y que los robots de correo basura rellenan. Si llega con algo escrito, es un robot. Se esconde con estas tres propiedades y NO con display:none, porque algunos robots ya saben saltarse lo que está en display:none. El aria-hidden y el tabindex="-1" del HTML evitan que un lector de pantalla lo anuncie. */ .whn-hp { position: absolute !important; left: -9999px !important; opacity: 0 !important; } /* ================================================================== 9) ANIMACIONES DE CARGA ================================================================== Los "esqueletos": rectángulos grises que laten mientras llegan las noticias. Se usan en lugar de una rueda girando porque muestran de antemano la FORMA de lo que va a llegar, y eso hace que la espera se perciba más corta. */ .whn-skeleton { position: relative; overflow: hidden; background: var(--whn-bg-alt); border-radius: var(--whn-radius); } .whn-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: whn-shimmer 1.3s infinite; } :root[data-theme="dark"] .whn-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent); } @keyframes whn-shimmer { 100% { transform: translateX(100%); } } .whn-skeleton__card { height: 120px; margin-bottom: var(--whn-gap); } /* El aviso de "trabajando" para botones que tardan. aria-busy lo pone el JS. */ .whn-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: whn-spin .7s linear infinite; } @keyframes whn-spin { to { transform: rotate(360deg); } } /* Sin movimiento: se congelan el brillo y la rueda. El esqueleto sigue ahí (sigue informando de que algo viene), pero quieto. */ @media (prefers-reduced-motion: reduce) { .whn-skeleton::after { animation: none; } .whn-spinner { animation-duration: 3s; } } /* ================================================================== 10) FECHA DE ACTUALIZACIÓN ================================================================== */ .whn-updated { display: inline-flex; align-items: center; gap: 5px; font-size: .84rem; font-weight: 600; color: var(--whn-text-soft); } .whn-updated::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--whn-accent); flex: 0 0 auto; } /* ================================================================== 11) PÁGINA 404 ================================================================== */ .whn-404 { padding: 48px 0 64px; text-align: center; } .whn-404__code { margin: 0; font-family: var(--whn-font-head); font-size: clamp(64px, 14vw, 132px); font-weight: 800; line-height: .9; color: var(--whn-accent); letter-spacing: -.03em; } .whn-404__title { margin: 12px 0 6px; font-family: var(--whn-font-head); font-size: clamp(20px, 4vw, 28px); } .whn-404__text { margin: 0 auto 24px; max-width: 52ch; color: var(--whn-text-soft); } .whn-404__search { margin: 0 auto 28px; max-width: 520px; } .whn-404__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; } .whn-404__section { margin-top: 40px; text-align: left; } .whn-404__section > h2 { margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--whn-accent); font-family: var(--whn-font-head); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; } .whn-404__cats { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .whn-404__cats a { display: inline-block; padding: 6px 14px; border: 1px solid var(--whn-border); color: var(--whn-text-soft); font-size: .88rem; text-decoration: none; transition: color .15s ease, border-color .15s ease; } @media (hover: hover) { .whn-404__cats a:hover { color: var(--whn-accent); border-color: var(--whn-accent); text-decoration: none; } } /* ================================================================== 12) BUSCADOR: resultados y "no hay nada" ================================================================== */ .whn-search-head { margin-bottom: 28px; padding-bottom: 16px; border-bottom: 2px solid var(--whn-accent); } .whn-search-head__count { margin: 6px 0 0; color: var(--whn-text-soft); font-size: .92rem; } .whn-search-empty { padding: 32px 0; } .whn-search-empty__tips { margin: 16px 0 0; padding-left: 20px; color: var(--whn-text-soft); } .whn-search-empty__tips li { margin-bottom: 6px; } /* La palabra buscada, resaltada dentro de cada resultado. Se marca con , que es la etiqueta que el propio HTML tiene para esto y que los lectores de pantalla saben anunciar. */ /* El selector cuelga de body.search, que es una clase que pone el propio WordPress en las páginas de resultados. Así el resaltado no puede escaparse a un artículo que use por motivos editoriales. */ body.search .whn-primary mark { padding: 0 2px; background: rgba(193, 18, 31, .14); color: inherit; font-weight: 700; } :root[data-theme="dark"] body.search .whn-primary mark { background: rgba(239, 74, 85, .22); } /* ================================================================== 13) VER LA CONTRASEÑA ================================================================== */ .whn-pw { position: relative; display: flex; align-items: center; } .whn-pw input[type="password"], .whn-pw input[type="text"] { flex: 1; min-height: 44px; padding: 10px 46px 10px 12px; /* hueco a la derecha para el ojo */ border: 1px solid var(--whn-border); background: var(--whn-bg); color: var(--whn-text); font-size: 1rem; } .whn-pw__eye { position: absolute; right: 4px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; background: transparent; color: var(--whn-text-soft); cursor: pointer; } .whn-pw__eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .whn-pw__eye:focus-visible { outline: 3px solid var(--whn-accent-2); outline-offset: 1px; } .whn-pw__eye .whn-pw__icon--off { display: none; } .whn-pw__eye[aria-pressed="true"] .whn-pw__icon--on { display: none; } .whn-pw__eye[aria-pressed="true"] .whn-pw__icon--off { display: block; } /* ================================================================== 14) MENÚ MÓVIL: bloqueo del fondo ================================================================== Cuando el menú se abre a pantalla completa en el móvil, el fondo NO debe poder desplazarse. Si se desplaza, al cerrar el menú apareces en otro sitio de la página sin saber por qué. */ body.whn-menu-open { overflow: hidden; /* Reservamos el hueco de la barra de desplazamiento que acabamos de quitar. Sin esto, en escritorio la página entera DA UN SALTO lateral al abrir el menú, porque de golpe hay 15 px más de ancho disponible. */ padding-right: var(--whn-scrollbar-width, 0px); } /* ================================================================== 15) HOJA DE IMPRESIÓN ================================================================== Un periódico se imprime. Y por defecto, imprimir una web es un desastre: se gastan cuatro hojas en menús, anuncios y cajas de suscripción, el texto sale en gris claro que casi no se ve, y los enlaces quedan sin destino en el papel. Regla general: se imprime EL ARTÍCULO. Todo lo demás se va. */ @media print { /* Fuera todo lo que no es el contenido. */ .whn-header, .whn-footer, .whn-navbar, .whn-topbar, .whn-sidebar, .whn-floaters, .whn-progress, .whn-newsletter, .whn-share, .whn-copy, .whn-theme-toggle, .whn-skip-link, .whn-pagination, .whn-post-nav, .whn-related, .whn-breadcrumbs, #comments, .whn-ad, .whn-ad-sticky-shell, [class*="whn-float"], [class*="adsbygoogle"], iframe, video { display: none !important; } /* Negro sobre blanco y sin fondos: las tintas de color son caras y muchos navegadores ni siquiera imprimen los fondos por defecto — con lo que un texto blanco sobre caja oscura saldría BLANCO SOBRE BLANCO, o sea, en blanco. Por eso se fuerza el color aquí y no se confía en el diseño. */ :root { --whn-text: #000; --whn-text-soft: #333; --whn-bg: #fff; --whn-bg-alt: #fff; --whn-accent: #000; --whn-border: #999; } body { background: #fff !important; color: #000 !important; font-size: 11.5pt; /* en papel se mide en puntos, no en píxeles */ line-height: 1.45; } .whn-layout, .whn-container { display: block !important; max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; } .whn-main { padding: 0 !important; } /* EL ENLACE EN PAPEL: en pantalla, "pincha aquí" funciona; en papel es un callejón sin salida. Imprimimos el destino entre paréntesis detrás. */ .whn-article a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; word-break: break-all; } /* Pero NO detrás de los enlaces internos de ancla ni de los que ya muestran su dirección: ahí sólo sería ruido repetido. */ .whn-article a[href^="#"]::after, .whn-article a.whn-no-print-url::after { content: ""; } /* Huérfanas y viudas: impide que un titular se quede solo al final de una hoja con su texto en la siguiente, y que una línea suelta cruce de página. */ h1, h2, h3, h4 { page-break-after: avoid; break-after: avoid; } p, li, blockquote { orphans: 3; widows: 3; } img { max-width: 100% !important; page-break-inside: avoid; break-inside: avoid; } /* La dirección de la noticia, impresa una vez al final. Quien lea el papel puede volver a la fuente. Lo rellena inc/ux.php con la URL real. */ .whn-print-source { display: block !important; margin-top: 18pt; padding-top: 8pt; border-top: 1px solid #999; font-size: 9pt; color: #333; } } /* Fuera de la impresión, ese pie no se ve. */ .whn-print-source { display: none; }