/* ============================================================================= WorkHard — Marquee de marca (barra con loop infinito de texto) ============================================================================= Se usa en 2 lugares, ambos sitewide: 1) .wh-marquee--top: insertada vía PHP en wp_body_open (ver mu-plugin), literalmente lo primero dentro de , arriba de todo el sitio. 2) .wh-marquee--nav: insertada vía JS (wh-marquee.js) como fila extra dentro de la barra de navegación (#masthead .menu-container), justo debajo del menú. Loop lento (60s) y continuo: el contenido se duplica y se anima con translateX(-50%), así nunca se ve un "salto" al reiniciar el ciclo. ============================================================================= */ .wh-marquee{ --wh-green:#00eb00; --wh-ink:#0a0a0a; position:relative; width:100%; overflow:hidden; background:var(--wh-ink); border-bottom:1px solid rgba(0,235,0,.18); white-space:nowrap; } .wh-marquee--nav{ border-bottom:none; border-top:1px solid rgba(0,235,0,.18); } .wh-marquee-track{ display:inline-flex; align-items:center; width:max-content; animation:wh-marquee-scroll 60s linear infinite; will-change:transform; } .wh-marquee:hover .wh-marquee-track{ animation-play-state:paused; } .wh-marquee-item{ display:inline-flex; align-items:center; gap:14px; padding:10px 0; font-family:'Nunito', sans-serif; font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--wh-green); white-space:nowrap; } .wh-marquee-item .wh-marquee-sep{ color:rgba(255,255,255,.35); font-weight:400; } .wh-marquee-item + .wh-marquee-item{ margin-left:36px; } @keyframes wh-marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @media (max-width:600px){ .wh-marquee-item{ font-size:11px; } .wh-marquee-track{ animation-duration:42s; } } @media (prefers-reduced-motion: reduce){ .wh-marquee-track{ animation:none; } }