/* Phoenix Acting - "Reserve your slot" sticky top banner. Shared component. Pair with reserve-banner.js. Layout notes: - The banner is fixed at the very top, so the navbar is pushed down by its height. - Pages that size their own top offset from --fixed-top opt out of the body padding by loading the script with data-offset="fixedtop" (adds .rb-fixedtop to ). - Every layout rule is gated behind body.rb-on, which the script only adds after the banner is actually in the DOM. If the script fails, the page renders exactly as before. */ :root { --rb-height: 60px; } .rb-banner { position: fixed; top: 0; left: 0; width: 100%; min-height: var(--rb-height); background: linear-gradient(45deg, rgba(3, 6, 18, 0.95), rgba(21, 36, 84, 0.95)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--text-primary, #F7D87C); z-index: 2001; display: flex; justify-content: center; align-items: center; padding: 0 2rem; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(229, 185, 78, 0.3); } .rb-content { display: flex; align-items: center; justify-content: center; gap: 1.5rem; max-width: 1200px; width: 100%; } .rb-text { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-secondary, 'Montserrat', sans-serif); font-size: 0.95rem; font-weight: 500; white-space: nowrap; } .rb-timer { display: flex; gap: 0.75rem; } .rb-item { display: flex; flex-direction: column; align-items: center; min-width: 60px; padding: 0.3rem 0.8rem; border-radius: 8px; background: rgba(198, 163, 85, 0.1); border: 1px solid var(--primary, #E5B94E); color: var(--text-primary, #F7D87C); } .rb-item span { font-size: 1.2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .rb-item label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.8; } /* Push the existing fixed chrome down so nothing sits under the banner */ body.rb-on .navbar { top: var(--rb-height) !important; } body.rb-on:not(.rb-fixedtop) { padding-top: var(--rb-height); } @media (max-width: 768px) { .rb-banner { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem; padding: 0.5rem 1rem; } .rb-content { grid-column: 2; flex-wrap: wrap; gap: 0.5rem; padding: 0.25rem 0; } .rb-text { font-size: 0.8rem; } .rb-item { min-width: 45px; padding: 0.2rem 0.4rem; } .rb-item span { font-size: 1rem; } .rb-item label { font-size: 0.6rem; } /* On mobile the hamburger is relocated into the banner so the two don't stack */ body.rb-on .rb-banner .mobile-menu-toggle { position: static !important; top: auto !important; left: auto !important; right: auto !important; display: block !important; grid-column: 1; margin: 0; } }