/* Hot Commons — seasonal announcement banner Sits in normal flow at the very top of , above the site header, so it scrolls away while the sticky nav stays put. Injected by assets/banner.js. Depends on these CSS variables being defined on the page: --accent, --accent-dark, --ink */ .hc-banner { background: var(--accent); color: var(--ink); border-bottom: 1px solid var(--accent-dark); font-family: 'Quicksand', system-ui, sans-serif; font-size: 0.95rem; font-weight: 600; line-height: 1.4; } .hc-banner-inner { max-width: 80rem; margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: 0.7rem 2.5rem; } .hc-banner-text { flex: 1; margin: 0; text-align: center; } .hc-banner a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; white-space: nowrap; } .hc-banner a:hover { color: var(--accent-dark); } .hc-banner-close { flex: none; background: none; border: none; color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; } .hc-banner-close:hover { color: var(--accent-dark); } @media (max-width: 720px) { .hc-banner { font-size: 0.85rem; } .hc-banner-inner { padding: 0.6rem 1.25rem; gap: 0.6rem; } .hc-banner a { white-space: normal; } }