/* alerts.css - sticky dismissible alerts bar (WI-7). #alerts-bar is the first thing in . The IIFE populates it from the API ("Next live: ...", "New episode shipped: EP.NNN") and each alert is dismissable, remembered per-session in sessionStorage (key hitl-alert-{key}). */ #alerts-bar { position: sticky; top: 0; z-index: 200; display: flex; flex-direction: column; } #alerts-bar:empty { display: none; } .alert { display: flex; align-items: center; gap: var(--space-12); padding: 0.6rem clamp(1rem, 4vw, 2rem); font-size: 0.875rem; border-bottom: 1px solid rgba(0, 0, 0, 0.25); background: var(--surface); color: var(--white); } .alert--live { background: linear-gradient(90deg, #DC2626, #b81d1d); color: #fff; } .alert--shipped { background: linear-gradient(90deg, rgba(224,90,43,0.18), rgba(224,90,43,0.06)); } .alert--next { background: linear-gradient(90deg, rgba(139,92,246,0.16), rgba(139,92,246,0.04)); } .alert__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--ember); } .alert--live .alert__dot { background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,0.7); animation: alert-ping 1.6s ease-out infinite; } .alert--next .alert__dot { background: var(--violet); } @keyframes alert-ping { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); } 70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } } .alert__tag { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.25); flex-shrink: 0; } .alert__msg { flex: 1; min-width: 0; line-height: 1.35; } .alert__msg a { text-decoration: underline; font-weight: 600; } .alert__msg strong { font-weight: 700; } .alert__close { flex-shrink: 0; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border: none; background: transparent; color: inherit; opacity: 0.7; cursor: pointer; border-radius: var(--radius-sm); font-size: 1.1rem; line-height: 1; transition: opacity var(--transition-base), background var(--transition-base); } .alert__close:hover { opacity: 1; background: rgba(0, 0, 0, 0.25); } @media (max-width: 560px) { .alert { font-size: 0.8125rem; } .alert__tag { display: none; } }