공지 바

<div class="page">
  <div class="bar" id="bar"><span id="msg">Launch week — 20% off with code LAUNCH20</span><span class="close">&times;</span></div>
  <div class="header"><b class="logo"></b><div class="nav"><i></i><i></i><i></i></div></div>
</div>

.page{width:min(94%,780px);border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.bar{background:var(--fg);color:var(--bg);display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vmin,16px);
  padding:clamp(5px,1.4vmin,10px) clamp(8px,2vmin,16px);font-size:clamp(7px,1.4vmin,11px);font-weight:600;position:relative}
.close{position:absolute;right:clamp(6px,1.6vmin,12px);opacity:.7;font-size:1.2em;line-height:1}
.header{display:flex;align-items:center;justify-content:space-between;padding:clamp(6px,1.6vmin,12px) clamp(8px,2vmin,16px)}
.logo{width:16%;height:clamp(7px,1.5vmin,11px);border-radius:3px;background:var(--accent)}
.nav{display:flex;gap:clamp(6px,1.4vmin,10px)}
.nav i{width:clamp(14px,3vmin,22px);height:clamp(4px,1vmin,7px);border-radius:2px;background:var(--line)}

const MSGS = ['Launch week — 20% off with code LAUNCH20', 'New: team workspaces are here', 'Now available on mobile'];
const msg = document.getElementById('msg');
let i = 0;
setInterval(function () {
  msg.style.opacity = 0;
  setTimeout(function () {
    i = (i + 1) % MSGS.length;
    msg.textContent = MSGS[i];
    msg.style.opacity = 1;
  }, 300);
}, 2600);
msg.style.transition = 'opacity .3s';