/* ============================================================ TigerMan Museum — Tour Alert Bar Prefix: tour-alert- File: tour-alert-bar.css ============================================================ */ #tour-alert-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; background: #d4a843; color: #0a0a0a; display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.6rem 3rem 0.6rem 1rem; font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: clamp(0.8rem, 0.75rem + 0.5vw, 1rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3; cursor: pointer; box-shadow: 0 0 18px rgba(212, 168, 67, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4); animation: tour-alert-pulse 2s ease-in-out infinite; /* Hidden by default — JS shows it if dates are available */ display: none; } #tour-alert-bar.tour-alert-visible { display: flex; } @keyframes tour-alert-pulse { 0%, 100% { box-shadow: 0 0 12px rgba(212, 168, 67, 0.4), 0 2px 8px rgba(0, 0, 0, 0.4); background: #d4a843; } 50% { box-shadow: 0 0 32px rgba(212, 168, 67, 0.9), 0 0 60px rgba(212, 168, 67, 0.35), 0 2px 8px rgba(0, 0, 0, 0.4); background: #e0b84e; } } .tour-alert-bar__text { flex: 1; text-align: center; cursor: pointer; user-select: none; -webkit-user-select: none; /* Ensure text wraps nicely on small screens */ word-break: break-word; } .tour-alert-bar__text:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .tour-alert-bar__dismiss { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.15); border: none; border-radius: 50%; width: 28px; height: 28px; min-width: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; line-height: 1; color: #0a0a0a; padding: 0; transition: background 0.15s ease; flex-shrink: 0; } .tour-alert-bar__dismiss:hover { background: rgba(0, 0, 0, 0.28); } .tour-alert-bar__dismiss:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 2px; } /* Push page content down so alert bar doesn't cover it. Add this class to via JS when bar is visible. */ body.tour-alert-active { padding-top: 42px; } @media (max-width: 480px) { #tour-alert-bar { padding: 0.5rem 2.75rem 0.5rem 0.75rem; font-size: 0.78rem; letter-spacing: 0.02em; } .tour-alert-bar__dismiss { width: 26px; height: 26px; right: 0.5rem; font-size: 0.9rem; } body.tour-alert-active { padding-top: 56px; /* More room when text wraps */ } }