/* * Announcement Bar — drop-in top-of-page strip. * * Position: fixed top, full-width, above the site nav. Theme-aware. * The addon sets --aed-announcement-h on at runtime; the rules * below use that variable to push body content + sticky/fixed nav down. * * See /announcement-bar/README.md. */ .aed-announcement { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; gap: 0.85rem; padding: 0.55rem 1rem 0.55rem 1.25rem; background: var(--accent, #6B00FF); color: #ffffff; font-size: 0.85rem; line-height: 1.4; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.3); } .aed-announcement[hidden] { display: none; } /* Kind variants */ .aed-announcement[data-aed-kind="info"] { background: var(--bg-card, #18181b); color: var(--text-primary, #fafafa); border-bottom: 1px solid var(--border, #27272a); } .aed-announcement[data-aed-kind="warn"] { background: linear-gradient(135deg, #f59e0b, #d97706); color: #1a1208; } .aed-announcement[data-aed-kind="alert"] { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #ffffff; } .aed-announcement-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; opacity: 0.9; } .aed-announcement-icon svg { width: 16px; height: 16px; } .aed-announcement-text { flex: 0 1 auto; min-width: 0; text-align: center; } .aed-announcement-text strong { font-weight: 700; } .aed-announcement-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.75rem; background: rgba(255, 255, 255, 0.18); color: inherit; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; } .aed-announcement-cta:hover { background: rgba(255, 255, 255, 0.28); border-color: rgba(255, 255, 255, 0.42); color: inherit; } .aed-announcement[data-aed-kind="info"] .aed-announcement-cta { background: var(--bg-secondary, #111113); color: var(--accent, #6B00FF); border-color: var(--border, #27272a); } .aed-announcement[data-aed-kind="info"] .aed-announcement-cta:hover { background: color-mix(in srgb, var(--accent, #6B00FF) 12%, var(--bg-card)); border-color: var(--accent, #6B00FF); } .aed-announcement-close { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: currentColor; opacity: 0.65; cursor: pointer; border-radius: 50%; } .aed-announcement-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.18); } .aed-announcement[data-aed-kind="info"] .aed-announcement-close:hover { background: var(--bg-secondary, #111113); } .aed-announcement-close svg { width: 14px; height: 14px; } /* Push everything else down by the announcement height */ body.aed-has-announcement { padding-top: var(--aed-announcement-h, 0px); } /* Common nav patterns — !important to override hardcoded top:0 in host CSS */ body.aed-has-announcement nav.nav, body.aed-has-announcement header.nav, body.aed-has-announcement header[role="banner"], body.aed-has-announcement .site-nav { top: var(--aed-announcement-h, 0px) !important; } /* Mobile: stack on small viewports if there's a CTA */ @media (max-width: 560px) { .aed-announcement { padding-right: 2.25rem; /* room for X */ flex-wrap: wrap; gap: 0.5rem 0.75rem; font-size: 0.8rem; } .aed-announcement-text { text-align: left; flex: 1 1 100%; } .aed-announcement-cta { font-size: 0.72rem; padding: 0.25rem 0.65rem; } } @media print { .aed-announcement { display: none !important; } body.aed-has-announcement { padding-top: 0 !important; } }