/** * Resilient Waitlist – announcement banner. * * Behaviors: * .rcc-banner-static -> sits at top of page, scrolls away * .rcc-banner-sticky -> sticks at top of viewport, IS the topmost element * .rcc-banner-sticky_above_header -> sticks above the theme's sticky header (uses position:fixed + JS to pad ) */ .rcc-banner { background: var(--rcc-banner-bg, #D4A84B); color: var(--rcc-banner-fg, #2A1F3D); font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 0.95rem; font-weight: 500; line-height: 1.4; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 44px 10px 16px; /* right padding leaves room for close button */ z-index: 999999; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); position: relative; } .rcc-banner *, .rcc-banner *::before, .rcc-banner *::after { box-sizing: border-box; } .rcc-banner-inner { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px 14px; max-width: 1200px; width: 100%; text-align: center; } .rcc-banner-text { display: inline; } .rcc-banner-cta { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; white-space: nowrap; transition: opacity 0.15s ease; } .rcc-banner-cta:hover, .rcc-banner-cta:focus { color: inherit; opacity: 0.78; } .rcc-banner-arrow { margin-left: 4px; display: inline-block; transition: transform 0.15s ease; } .rcc-banner-cta:hover .rcc-banner-arrow { transform: translateX(3px); } .rcc-banner-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: inherit; font-size: 24px; line-height: 1; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 4px; opacity: 0.7; transition: opacity 0.15s ease, background 0.15s ease; } .rcc-banner-close:hover, .rcc-banner-close:focus { opacity: 1; background: rgba(0, 0, 0, 0.08); outline: none; } /* --- Behavior: sticky (topmost element on page) --- */ .rcc-banner-sticky { position: sticky; top: 0; } /* --- Behavior: sticky_above_header (always visible, above theme header) --- Fixed-positioned at top of viewport. JS pads the body to compensate. */ .rcc-banner-sticky_above_header { position: fixed; top: 0; left: 0; } /* --- Behavior: static (default in-flow, scrolls away) --- */ .rcc-banner-static { position: relative; } /* Hidden state for dismissal */ .rcc-banner.is-hidden { display: none !important; } /* Mobile: tighten padding, allow CTA to wrap below text */ @media (max-width: 600px) { .rcc-banner { font-size: 0.88rem; padding: 9px 40px 9px 12px; } .rcc-banner-cta { font-size: 0.92rem; } } /* Print: don't waste ink on the banner */ @media print { .rcc-banner { display: none !important; } } /* Reduce motion: kill the arrow nudge */ @media (prefers-reduced-motion: reduce) { .rcc-banner-arrow, .rcc-banner-cta { transition: none; } .rcc-banner-cta:hover .rcc-banner-arrow { transform: none; } } /* ============================================================ * Modal overlay (used when banner_open_mode = "modal"). * ============================================================ */ .rcc-modal[hidden] { display: none !important; } .rcc-modal { position: fixed; inset: 0; z-index: 1000000; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .rcc-modal-backdrop { position: absolute; inset: 0; background: rgba(42, 31, 61, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: rcc-fade-in 0.18s ease; } .rcc-modal-panel { position: relative; background: #FDFBF7; color: #2A1F3D; border-radius: 14px; max-width: 760px; width: 100%; max-height: 92vh; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 28px 28px 24px; box-shadow: 0 20px 60px rgba(42, 31, 61, 0.35); animation: rcc-modal-in 0.22s ease; } @media (max-width: 600px) { .rcc-modal { padding: 0; align-items: stretch; justify-content: stretch; } .rcc-modal-panel { max-width: 100%; max-height: 100vh; max-height: 100dvh; border-radius: 0; padding: 56px 18px 24px; } } .rcc-modal-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: #5E4B7E; font-size: 1.65rem; margin: 0 0 16px; padding-right: 40px; line-height: 1.2; } .rcc-modal-close { position: absolute; top: 12px; right: 12px; background: transparent; border: 0; color: #5E4B7E; font-size: 32px; line-height: 1; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; opacity: 0.75; transition: opacity 0.15s ease, background 0.15s ease; } .rcc-modal-close:hover, .rcc-modal-close:focus { opacity: 1; background: rgba(94, 75, 126, 0.1); outline: none; } /* When the form is rendered inside a modal, drop its outer card chrome — the modal panel already provides the framing. */ .rcc-modal-body .rcc-waitlist-form { border: 0; border-radius: 0; padding: 0; box-shadow: none; background: transparent; } .rcc-modal-body .rcc-waitlist-wrap { max-width: 100%; } /* Lock body scroll while modal is open */ body.rcc-modal-open { overflow: hidden; } @keyframes rcc-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes rcc-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .rcc-modal-backdrop, .rcc-modal-panel { animation: none; } }