/* Sticky sale-announcement bar shared across marketing pages. Markup is injected by /js/sale-bar.js at the top of ; this stylesheet only defines the look. Rotate the campaign by editing the constants in sale-bar.js (no CSS change needed). */ .announcement-bar { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; justify-content: center; gap: 14px; background: #111; color: #f5d57a; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; padding: 9px 48px 9px 16px; text-align: center; border-bottom: 1px solid #2a2a2a; } .announcement-bar.dismissed { display: none; } /* When the sale bar is shown, push the sticky navbar down by the bar's height so the two stack instead of overlapping at top:0. JS clears this class on dismissal so the navbar snaps back to top:0. */ body.sale-bar-visible .navbar { top: 41px; } .announcement-bar-link { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; flex-wrap: wrap; justify-content: center; } .announcement-bar-link:hover .announcement-bar-cta { text-decoration: underline; } .announcement-bar-tag { background: linear-gradient(135deg, #f7d97a 0%, #e9b94a 100%); color: #1a1208; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; } .announcement-bar-tag-limited { display: inline-block; background: #e5563a; color: #fff; font-size: 8px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 5px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); vertical-align: 2px; margin-right: 4px; } .announcement-bar-text strong { color: #ff6b4a; font-weight: 700; } .announcement-bar-text .js-sale-countdown, .announcement-bar-text .js-sale-claimed-count { color: #ff6b4a; font-weight: 700; font-variant-numeric: tabular-nums; } .announcement-bar-text .sale-soldout { display: inline-block; background: #c9402a; color: #fff; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 1px 7px; border-radius: 4px; font-size: 11px; } .announcement-bar-cta { color: #fff; font-weight: 600; } .announcement-bar-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: #888; font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 4px; } .announcement-bar-close:hover { color: #f5d57a; background: rgba(255, 255, 255, 0.05); } /* Countdown unit letters (d/h/m/s) — muted variant of the parent color so the numbers stay the visual focus. Used inside any .js-sale-countdown element. */ .js-sale-countdown .ct-u { color: inherit; opacity: 0.55; font-weight: 500; margin-left: 1px; } /* Hourglass emoji shown before the countdown to reinforce the "time-left" cue. */ .ct-emoji { margin-right: 4px; font-size: 0.95em; } /* Responsive copy swap — used by the bar (and any other sale UI) to drop wordy parts on mobile and substitute compact alternatives. */ .bar-compact { display: none; } @media (max-width: 600px) { .announcement-bar { font-size: 12px; padding: 8px 40px 8px 12px; gap: 8px; } .announcement-bar-cta { display: none; } .bar-verbose { display: none; } .bar-compact { display: inline; } /* On mobile the "X of 100 claimed" widget is too cryptic without its label, so we hide it and let the Limited tag carry the scarcity signal alone. */ .announcement-bar .js-sale-claimed { display: none; } /* Drop minutes + seconds on mobile in the announcement bar only — days + hours convey enough urgency and saves ~50px so the bar fits one line. The pricing-pill countdown has more horizontal room, so it keeps the full precision. */ .announcement-bar .js-sale-countdown .ct-fine { display: none; } }