/* Site-wide announcement banner. Content and on/off live in one place: src/_includes/banner.md */ /* Matches .main-content-placeholder's box (base/layout.css) exactly — same max-width, same auto centering — so the banner lines up with the card(s) below it instead of running full-bleed past them. No top margin, and only the bottom corners are rounded, so it reads as one panel that dropped down out of the sticky topnav rather than a separate floating bar. */ .site-banner { /* width:100% is load-bearing, not redundant with max-width. .site-banner is a direct child of the flex-column (base/layout.css), and a flex item with an `auto` cross-axis margin opts out of the default align-items:stretch — without an explicit width it would shrink-wrap to its own text and come out narrower than the card below whenever the banner copy is short. */ width: 100%; max-width: 1280px; margin: 0 auto; background: var(--banner-bg-from); /* Fallback for the gradient below */ background: linear-gradient(135deg, var(--banner-bg-from) 0%, var(--banner-bg-to) 100%); border-bottom: 1px solid var(--banner-border); border-left: 4px solid var(--banner-accent); border-radius: 0 0 var(--radius-card) var(--radius-card); /* Keeps the gradient (and the left accent bar) clipped to the rounded bottom corners instead of squaring them off. */ overflow: hidden; transition: opacity 0.3s ease-out, transform 0.3s ease-out; } .site-banner.site-banner-dismissing { opacity: 0; transform: translateY(-10px); } /* Width/centering now live on .site-banner itself (above); this is purely the inner padding + row layout. */ .site-banner-inner { padding: 1rem 1.5rem; display: flex; align-items: flex-start; gap: 1rem; } .site-banner-text { flex: 1; min-width: 0; color: var(--banner-text); font-size: 1rem; line-height: 1.6; text-align: left; } .site-banner-text p { margin: 0.35rem 0; } .site-banner-text p:first-child { margin-top: 0; } .site-banner-text p:last-child { margin-bottom: 0; } .site-banner-text a, .site-banner-text a:visited { color: var(--banner-text); font-weight: 600; text-decoration: underline; } .site-banner-text a:hover { color: var(--banner-text-hover); } .site-banner-text code { font-family: var(--font-mono); background: var(--banner-chip-bg); padding: 0.1rem 0.35rem; border-radius: 3px; } .site-banner-dismiss { flex-shrink: 0; background: transparent; border: none; font-size: 1.25rem; line-height: 1; cursor: pointer; color: var(--banner-text); padding: 0.25rem 0.5rem; border-radius: 4px; transition: background 0.2s ease; } .site-banner-dismiss:hover { background: var(--banner-chip-bg); } .site-banner-dismiss:active { transform: scale(0.95); } @media (max-width: 768px) { .site-banner-inner { padding: 0.75rem 1rem; gap: 0.5rem; } .site-banner-text { font-size: 0.9rem; } }