/* ── Site-wide promo banner ──────────────────────────────────────────────────── The gold strip above the nav on every guest page. Deliberately permanent: no end date, no close button, no saved dismissal — nothing in the site can hide it. To take it down: delete the block from each page. Everything here is scoped to that block, so the pages revert on their own (the nav goes back to top: 0) and this file plus promo-banner.js become inert. Delete both to finish the job. Height feeds the spacer and the nav offset below. These are the pre-JS values — promo-banner.js measures the real height and takes over, because the banner wraps on narrow screens and grows again when the display font finishes loading. */ :root { --promo-h: 73px; } @media (max-width: 720px) { :root { --promo-h: 100px; } } @media (max-width: 560px) { :root { --promo-h: 92px; } } @media (max-width: 360px) { :root { --promo-h: 113px; } } .promo-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 101; background: linear-gradient(100deg, #a8731a 0%, #e8b04a 45%, #f0c163 55%, #a8731a 100%); color: #161412; border-bottom: 1px solid rgba(0,0,0,0.35); box-shadow: 0 2px 18px rgba(0,0,0,0.35); } .promo-inner { max-width: 1240px; margin: 0 auto; padding: 0.8rem 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 1rem; text-align: center; } /* The date is the point of the banner, so it gets the loudest treatment on the bar: a dark pill in gold type, reading against the gold background rather than on it. */ .promo-kicker { font-family: 'DM Sans', sans-serif; font-size: clamp(0.95rem, 1.9vw, 1.25rem); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-light, #e8b04a); background: #161412; border-radius: 999px; padding: 0.45rem 1.15rem; box-shadow: 0 2px 12px rgba(0,0,0,0.3); } .promo-headline { font-family: 'Playfair Display', serif; font-size: clamp(1.5rem, 4vw, 2.15rem); font-weight: 700; font-style: italic; line-height: 1.1; letter-spacing: 0.01em; } @media (max-width: 720px) { .promo-inner { flex-direction: column; align-items: center; padding: 0.7rem 1.25rem; gap: 0.45rem; } } @media (max-width: 560px) { .promo-kicker { font-size: 0.85rem; letter-spacing: 0.06em; padding: 0.4rem 0.9rem; } } /* The banner is pinned, so the spacer stands in for it in the flow — that keeps every page's content starting exactly where it did when the banner scrolled with the page. */ .promo-spacer { height: var(--promo-h); } /* A page with a fixed nav starts that nav below the pinned banner, and both stay put. Sibling selectors on purpose: they only bite where the banner block is actually in the markup, and they out-rank each page's own `.nav { top: 0 }` on specificity, so the link tag's position in doesn't matter. Pages with an in-flow header (rewards, tell-us-more) match nothing here and simply scroll under the banner. */ .promo-banner ~ .nav { top: var(--promo-h); } .promo-banner ~ .mobile-menu { top: calc(var(--promo-h) + 72px); } /* Anchor jumps (#patio, #visit, #specials) have to clear the pinned chrome, or the heading they land on sits behind it. :has() keeps this off pages that drop the banner block. */ html:has(.promo-banner) { scroll-padding-top: calc(var(--promo-h) + 76px); }