/* * 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; left: 0; right: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; gap: 0.65rem; padding: 0.5rem 2.5rem 0.5rem 1rem; background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #6B00FF) 92%, #000), var(--accent, #6B00FF) 50%, color-mix(in srgb, var(--accent, #6B00FF) 92%, #000)); color: #ffffff; font-size: 0.82rem; line-height: 1.35; letter-spacing: 0.005em; } .aed-announcement[hidden] { display: none; } /* Position variants */ .aed-announcement--top { top: 0; box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.12); } .aed-announcement--bottom { bottom: 0; box-shadow: 0 -2px 10px -4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); } /* 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.95; } .aed-announcement-icon svg { width: 15px; height: 15px; } .aed-announcement-text { flex: 0 1 auto; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .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.22rem 0.7rem 0.22rem 0.8rem; background: rgba(255, 255, 255, 0.14); color: inherit; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .aed-announcement-cta::after { content: '→'; display: inline-block; margin-left: 0.05rem; font-size: 0.82rem; transition: transform 0.2s ease; } .aed-announcement-cta:hover { background: rgba(255, 255, 255, 0.26); border-color: rgba(255, 255, 255, 0.48); color: inherit; } .aed-announcement-cta:hover::after { transform: translateX(3px); } .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 (top variant) */ body.aed-has-announcement--top { padding-top: var(--aed-announcement-h, 0px); } /* Common nav patterns — !important to override hardcoded top:0 in host CSS */ body.aed-has-announcement--top nav.nav, body.aed-has-announcement--top header.nav, body.aed-has-announcement--top header[role="banner"], body.aed-has-announcement--top .site-nav { top: var(--aed-announcement-h, 0px) !important; } /* Bottom variant: pad body bottom so footer/content clears the bar */ body.aed-has-announcement--bottom { padding-bottom: var(--aed-announcement-bottom-h, 0px); } /* Tablet: gentle compact — slightly smaller type, tighter CTA */ @media (max-width: 768px) { .aed-announcement { padding: 0.4rem 2.15rem 0.4rem 0.9rem; gap: 0.55rem; font-size: 0.78rem; } .aed-announcement-cta { font-size: 0.7rem; padding: 0.18rem 0.6rem; } } /* Mobile: sleek one-line bar — flatter CTA, tighter everything */ @media (max-width: 560px) { .aed-announcement { padding: 0.35rem 1.9rem 0.35rem 0.65rem; gap: 0.45rem; font-size: 0.72rem; line-height: 1.3; letter-spacing: 0; justify-content: flex-start; flex-wrap: nowrap; } .aed-announcement-icon { opacity: 0.85 } .aed-announcement-icon svg { width: 12px; height: 12px } .aed-announcement-text { text-align: left; flex: 1 1 auto; min-width: 0; } /* Minimal underlined CTA — no pill, no border, just a link */ .aed-announcement-cta { background: transparent; border: 0; padding: 0 0 0 0.1rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; text-transform: none; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; opacity: 0.95; white-space: nowrap; } .aed-announcement-cta:hover { background: transparent; border: 0; opacity: 1; text-decoration-thickness: 2px; } .aed-announcement-cta::after { display: none } .aed-announcement[data-aed-kind="info"] .aed-announcement-cta { background: transparent; border: 0; } /* Smaller, less prominent close */ .aed-announcement-close { right: 0.25rem; width: 22px; height: 22px; opacity: 0.55; } .aed-announcement-close svg { width: 12px; height: 12px } } /* Small phones: ultra-compact */ @media (max-width: 380px) { .aed-announcement { padding: 0.32rem 1.7rem 0.32rem 0.55rem; gap: 0.35rem; font-size: 0.68rem; } .aed-announcement-icon svg { width: 11px; height: 11px } .aed-announcement-cta { font-size: 0.66rem; } .aed-announcement-close { right: 0.2rem; width: 20px; height: 20px; } .aed-announcement-close svg { width: 11px; height: 11px } } @media print { .aed-announcement { display: none !important; } body.aed-has-announcement--top { padding-top: 0 !important; } body.aed-has-announcement--bottom { padding-bottom: 0 !important; } }