/* ══════════════════════════════════════════════════════════ PROMO BAR — site-wide release announcement ══════════════════════════════════════════════════════════ Shared by index.html, broadcast.html and every experiments.css page. Only pages carrying reserve space for it, so a page can opt out by dropping that class. Nav offsets live with each nav: · fixed navs (index, broadcast) → their own inline CSS · sticky navs (experiments, epk) → experiments.css ══════════════════════════════════════════════════════════ */ :root { --promo-h: 2.2rem; } .promo-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 210; height: var(--promo-h); display: flex; align-items: center; justify-content: center; background: rgba(4,5,6,.94); border-bottom: 1px solid rgba(0,255,136,.28); backdrop-filter: blur(10px); } /* Faint phosphor wash so the bar reads as lit, not painted on */ .promo-bar::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(0,255,136,.06), transparent); } body.promo-hidden .promo-bar { display: none; } .promo-main { position: relative; z-index: 1; display: flex; align-items: center; gap: .7rem; max-width: 100%; padding: 0 2.4rem 0 1rem; font-family: 'Share Tech Mono', 'IBM Plex Mono', monospace; text-decoration: none; } .promo-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex-shrink: 0; animation: promo-pulse 2s ease-in-out infinite; } @keyframes promo-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } } .promo-tag { font-size: .42rem; letter-spacing: .22em; text-transform: uppercase; color: var(--green); white-space: nowrap; } .promo-body { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--offwhite); white-space: nowrap; } .promo-body strong { color: var(--white); font-weight: 400; } .promo-sub { font-size: .4rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); white-space: nowrap; } .promo-cta { font-size: .5rem; letter-spacing: .18em; text-transform: uppercase; color: var(--green); white-space: nowrap; border-bottom: 1px solid rgba(0,255,136,.35); transition: color .2s, border-color .2s; } .promo-main:hover .promo-cta, .promo-main:focus-visible .promo-cta { color: var(--white); border-bottom-color: var(--white); } .promo-x { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); z-index: 2; background: none; border: none; cursor: pointer; color: var(--dim); font-size: .5rem; line-height: 1; padding: .5rem .55rem; transition: color .2s; } .promo-x:hover, .promo-x:focus-visible { color: var(--red); } /* Drop the supporting line before the release name has to shrink */ @media (max-width: 820px) { .promo-sub { display: none; } } @media (max-width: 620px) { .promo-tag { display: none; } .promo-main { gap: .55rem; padding: 0 2.2rem 0 .8rem; } .promo-body { font-size: .54rem; letter-spacing: .1em; } .promo-cta { font-size: .48rem; } } /* Very narrow: the release name is the message */ @media (max-width: 400px) { .promo-body { font-size: .5rem; } .promo-cta { font-size: .44rem; letter-spacing: .12em; } }