/* Maintenance banner — global page chrome, like cookie-banner.css and notice-modal.css. These rules used to live in gallery.css, which meant the banner only looked right on pages that happened to load that stylesheet. /board loads landing.css + board.css instead, so its banner rendered as unstyled text pushed into the document flow rather than the fixed overlay every other page shows. Component styles travel with the component: any template that ships {{MAINTENANCE_BANNER}} links this file, and tests/test_page_chrome.py enforces it. */ .maintenance-banner { /* Sticky, not fixed. Every template puts the banner first inside , and no page compensates with top padding — `fixed` therefore covered whatever sat at the top of the page (on /board, the whole header). Sticky keeps it pinned while scrolling but leaves its height in the flow. */ position: sticky; top: 0; z-index: 55; padding: 0.6rem 2.5rem; text-align: center; font-family: var(--font-body); font-size: 0.9rem; line-height: 1.35; background: var(--err-bg); color: var(--err-fg); box-shadow: var(--shadow-sm); } .maintenance-banner[hidden] { display: none; } .maintenance-banner__close { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); } .maintenance-banner__close:hover { background: color-mix(in srgb, var(--err-fg) 12%, transparent); } @media (max-width: 768px) { .maintenance-banner { font-size: 0.8rem; padding: 0.5rem 2.25rem; } }