/* ============================================================ Site-wide Promo Bar Behavior: - Visible at scrollY === 0; collapses on any scroll (scrollY > 0) - "X" dismisses for 3 days via cookie promoBar_ - Bar opacity, transform, body padding-top, and nav top all transition together over 220ms cubic-bezier(0.4,0,0.2,1) - prefers-reduced-motion: state changes happen instantly - Anti-FOUC: inline script in sets html.promo-bar-dismissed before paint when cookie exists ============================================================ */ :root { --promo-bar-height: 40px; } /* Bar itself — fixed at the very top of the viewport, sitting above the floating site nav. */ .promo-bar { position: fixed; top: 0; left: 0; right: 0; height: var(--promo-bar-height); background: var(--color-grey-100); color: var(--color-grey-500); font-family: var(--font-heading); font-size: var(--text-body); line-height: 1.4; z-index: 200; transform: translateY(0); opacity: 1; transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1), transform 220ms cubic-bezier(0.4, 0, 0.2, 1); } .promo-bar__inner { max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 24px; } .promo-bar__message { margin: 0; color: inherit; /* Don't grow — message takes its natural width so the links sit right after it. Do shrink (with ellipsis) when narrow. margin-left: auto on the close button pushes it to the far right and creates the visual gap between [links] and [X]. */ flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .promo-bar__message strong { font-weight: var(--weight-bold); margin-right: 4px; } .promo-bar__link { color: var(--color-accent-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: color 150ms ease; white-space: nowrap; flex-shrink: 0; } .promo-bar__link:hover, .promo-bar__link:focus-visible { color: var(--color-accent-primary-hover); outline: none; } .promo-bar__chevron { display: inline-block; font-size: 12px; line-height: 1; transition: transform 150ms ease; } .promo-bar__link:hover .promo-bar__chevron, .promo-bar__link:focus-visible .promo-bar__chevron { transform: translateX(4px); } .promo-bar__close { margin-left: auto; background: transparent; border: 0; color: var(--color-text-secondary); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 10px; border-radius: var(--radius-sm); transition: color 150ms ease, background 150ms ease; flex-shrink: 0; } .promo-bar__close:hover, .promo-bar__close:focus-visible { color: var(--color-text-primary); background: rgba(0, 0, 0, 0.06); outline: none; } /* Page push — body's padding tracks the bar height so content never sits under the bar. */ body { padding-top: var(--promo-bar-height); transition: padding-top 220ms cubic-bezier(0.4, 0, 0.2, 1); } /* Site header — preserve the existing 12px floating gap; the calc adds the bar height on top of that. When the bar collapses (var → 0), the header transitions back to its original 12px floating position. */ .header { top: calc(var(--promo-bar-height) + 12px); } /* Collapsed state — flips the variable to 0px so body and nav transition simultaneously with the bar's slide-out. The bar's own opacity/transform animate it off the top edge. */ html.promo-bar-collapsed { --promo-bar-height: 0px; } html.promo-bar-collapsed .promo-bar { opacity: 0; transform: translateY(-100%); pointer-events: none; } /* Dismissed state — set by the anti-FOUC inline script in when the dismissal cookie is present, and by JS ~240ms after the X is clicked (so the slide-out transition completes first). Bar is removed from layout entirely. */ html.promo-bar-dismissed { --promo-bar-height: 0px; } html.promo-bar-dismissed .promo-bar { display: none; } /* Mobile breakpoints */ @media (max-width: 768px) { .promo-bar__link--secondary { display: none; } .promo-bar__inner { gap: 16px; padding: 0 16px; } } /* Reduced motion — disable transitions on bar, body, and nav so state changes happen instantly. Behavior unchanged. */ @media (prefers-reduced-motion: reduce) { .promo-bar, .promo-bar__chevron, body, .header { transition: none !important; } }