/** * Promoción de membresía: barra superior y tarjeta lateral. * * Estética terminal del sitio: fondo negro, verde sólo en el acento, borde y * resplandor sutiles, tipografía monoespaciada. Los colores salen de las * variables del tema, así que el modo claro funciona solo. */ /* ---- Barra superior ------------------------------------------------------ Es `fixed`, no parte del flujo: el requisito es que se oculte con una transición a los ~100px y reaparezca al volver arriba, y eso no se puede animar si el elemento simplemente se desplaza con el documento. Para que no tape nada, el reserva su altura con padding-top y el header sticky baja esa misma cantidad. Al ocultarse la barra, el header sube a top:0; el hueco reservado ya quedó fuera de pantalla, así que no hay salto. La altura real la mide el JS y la publica en --hw-promo-h. */ .hw-promo-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1100; /* por encima del header (1000) */ background: var(--color-bg); border-bottom: 1px solid var(--color-green-dim); font-family: var(--font-mono); transform: translateY(0); transition: transform 0.28s ease; } .hw-promo-bar.is-hidden { transform: translateY(-100%); } /* Reserva del espacio y desplazamiento del header. Sólo se aplican cuando el JS confirma que la barra existe, para que una página sin barra no herede un hueco vacío. */ html.hw-has-promo { padding-top: var(--hw-promo-h, 47px); } html.hw-has-promo .site-header { top: var(--hw-promo-h, 47px); transition: top 0.28s ease; } html.hw-has-promo.hw-promo-off .site-header { top: 0; } @media (prefers-reduced-motion: reduce) { .hw-promo-bar, html.hw-has-promo .site-header { transition: none; } } .hw-promo-bar__inner { display: flex; align-items: center; justify-content: center; /* Separación amplia entre el mensaje y el botón: antes quedaban pegados y el botón se leía como parte de la frase. */ gap: var(--space-2xl); max-width: var(--max-width); min-height: 47px; margin: 0 auto; padding: var(--space-xs) var(--space-lg); } .hw-promo-bar__text { display: flex; align-items: baseline; gap: var(--space-sm); margin: 0; font-size: 0.8rem; min-width: 0; } .hw-promo-bar__flag { color: var(--color-green); font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; animation: hw-promo-blink 2.4s ease-in-out infinite; } /* Parpadeo mínimo: baja a 0.45 de opacidad, nunca se apaga del todo. Un parpadeo duro en un elemento fijo cansa la vista y afecta a quien es sensible al movimiento. */ @keyframes hw-promo-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { .hw-promo-bar__flag { animation: none; } } .hw-promo-bar__msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* El titular pesa más que el resto de la frase: es la promesa. */ .hw-promo-bar__headline { color: var(--color-white); font-weight: 700; font-size: 0.88rem; letter-spacing: 0.01em; } /* Antes iba en --color-gray (#888), que sobre negro se leía apagado. Un gris claro mantiene la jerarquía frente al titular sin castigar la lectura. */ .hw-promo-bar__detail { color: #b9b9b9; } [data-theme="light"] .hw-promo-bar__detail { color: #4a4a4a; } .hw-promo-bar__cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 7px var(--space-lg); background: var(--color-green); color: var(--color-bg); border-radius: var(--radius-sm); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-decoration: none; white-space: nowrap; transition: filter var(--transition-fast); } .hw-promo-bar__cta:hover { filter: brightness(1.12); color: var(--color-bg); } @media (max-width: 900px) { /* Versión compacta: se retiran la etiqueta y el detalle, que obligarían a partir la barra en dos líneas y a duplicar su altura. */ .hw-promo-bar__detail, .hw-promo-bar__flag { display: none; } .hw-promo-bar__inner { min-height: 44px; padding: var(--space-xs) var(--space-md); gap: var(--space-md); } .hw-promo-bar__headline { font-size: 0.8rem; } .hw-promo-bar__cta { padding: 6px var(--space-md); font-size: 0.68rem; } } /* ---- Tarjeta en artículos ------------------------------------------------ */ .hw-promo-card { position: fixed; right: var(--space-lg); bottom: var(--space-lg); width: 250px; z-index: 900; /* por debajo del header (1000): nunca tapa la navegación */ background: var(--color-bg-card); border: 1px solid var(--color-green-dim); border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); padding: var(--space-lg) var(--space-md) var(--space-md); font-family: var(--font-mono); } .hw-promo-card[hidden] { display: none; } .hw-promo-card__close { position: absolute; top: 4px; right: 6px; width: 28px; height: 28px; background: none; border: none; color: var(--color-gray); font-size: 1.1rem; line-height: 1; cursor: pointer; border-radius: var(--radius-sm); } .hw-promo-card__close:hover { color: var(--color-green); } .hw-promo-card__lead { margin: 0 0 4px; font-size: 0.82rem; color: var(--color-white); font-weight: 600; } .hw-promo-card__text { margin: 0 0 var(--space-md); font-size: 0.78rem; color: var(--color-gray); } .hw-promo-card__cta { display: block; text-align: center; padding: var(--space-sm); background: var(--color-green); color: var(--color-bg); border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; transition: filter var(--transition-fast); } .hw-promo-card__cta:hover { filter: brightness(1.12); color: var(--color-bg); } /* En pantallas estrechas deja de flotar: pasa a barra bajo el header, a lo ancho, sin cubrir contenido ni navegación. `sticky` y no `fixed` para que no se quede encima del pie de página al final del artículo. */ @media (max-width: 1100px) { .hw-promo-card { position: sticky; top: 56px; /* justo debajo del header */ right: auto; bottom: auto; width: auto; margin: 0 0 var(--space-lg); display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-md); box-shadow: none; } /* Se invierte respecto al escritorio: la pregunta ("¿Te gusta este contenido?") parte en tres líneas y engorda la barra, así que en móvil manda el mensaje corto y la pregunta se retira. */ .hw-promo-card__lead { display: none; } /* Sin recorte con puntos suspensivos: el botón se lleva el ancho y el mensaje quedaba en "Desb…", que no dice nada. Que envuelva en dos líneas cortas es preferible a una barra más baja e ininteligible. */ .hw-promo-card__text { display: block; margin: 0; font-size: 0.78rem; line-height: 1.3; color: var(--color-white); font-weight: 600; } .hw-promo-card__cta { flex-shrink: 0; } .hw-promo-card__text::before { content: "\01F513 "; } .hw-promo-card__cta { margin-left: auto; padding: 6px var(--space-md); font-size: 0.7rem; white-space: nowrap; } .hw-promo-card__close { top: 50%; right: 2px; transform: translateY(-50%); } }