/* * Primevil storefront skin. * * Every selector is gated by the server-resolved storefront code on . * ROARR! keeps the existing globals.css cascade unchanged, while Primevil * continues to use the same ticket, upsell, basket and payment components. */ @font-face { font-family: "Primevil Special Elite"; src: url("/fonts/primevil-special-elite.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 400; } body[data-storefront="primevil"] .group-catering { margin-bottom: 24px; padding: 24px; border: 1px solid rgba(216, 15, 27, 0.55); border-radius: 16px; background: linear-gradient(135deg, #211315, #100c0d); color: #f7f3ef; } body[data-storefront="primevil"] .group-catering__eyebrow { color: #ff626b; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; } body[data-storefront="primevil"] .group-catering h2 { margin: 8px 0 12px; color: var(--roarr-accent-orange); font-family: var(--font-heading); font-size: clamp(24px, 3vw, 32px); line-height: 1.25; } body[data-storefront="primevil"] .group-catering__title-art { display: block; width: 44%; height: auto; transform: rotate(-3deg); transform-origin: left center; } @container (max-width: 559px) { body[data-storefront="primevil"] .group-catering__title-art { width: 56%; max-width: 300px; } } body[data-storefront="primevil"] .group-catering__intro > p { max-width: 65ch; color: #ded6d1; font-size: 14px; } body[data-storefront="primevil"] .group-catering__brochure { display: inline-block; margin: 16px 0 20px; color: #fff; text-decoration: underline; text-underline-offset: 4px; font-size: 14px; } body[data-storefront="primevil"] .group-catering__brochure span { color: #b9afaa; font-size: 12px; } body[data-storefront="primevil"] .group-catering__choices { margin: 0; padding: 0; border: 0; } body[data-storefront="primevil"] .group-catering__choices legend { margin-bottom: 12px; font-size: 13px; color: #ded6d1; } body[data-storefront="primevil"] .group-catering__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } body[data-storefront="primevil"] .group-catering__card { display: flex; align-items: flex-start; gap: 12px; padding: 18px; border: 1px solid #5b4144; border-radius: 12px; background: #21191a; cursor: pointer; } body[data-storefront="primevil"] .group-catering__card.is-selected { border-color: #ff5660; box-shadow: inset 0 0 0 1px #ff5660; background: #321719; } body[data-storefront="primevil"] .group-catering input { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; accent-color: #d80f1b; } body[data-storefront="primevil"] .group-catering__card h3 { margin: 0 0 var(--space-12); font-family: var(--font-heading); font-size: 20px; font-weight: 400; line-height: 1.3; } body[data-storefront="primevil"] .group-catering__card p { margin: 8px 0; color: #ded6d1; font-size: 13px; line-height: 1.55; } body[data-storefront="primevil"] .group-catering__card .group-catering__price { margin: var(--space-16) 0 var(--space-12); line-height: 1.2; } body[data-storefront="primevil"] .group-catering__card .group-catering__price strong { display: inline-block; margin-right: var(--space-4); color: var(--roarr-accent-orange); font-family: var(--font-heading); font-size: 32px; font-weight: 400; line-height: 1.2; white-space: nowrap; } body[data-storefront="primevil"] .group-catering__card .group-catering__total { color: #fff; font-weight: 700; } body[data-storefront="primevil"] .group-catering__reserved { display: block; margin-top: 12px; color: #fff; font-size: 12px; } body[data-storefront="primevil"] .group-catering__skip { display: flex; align-items: center; gap: 12px; min-height: 48px; margin-top: 12px; cursor: pointer; font-size: 14px; } body[data-storefront="primevil"] .group-catering__note { margin-top: 12px; color: #b9afaa; font-size: 12px; } body[data-storefront="primevil"] .group-catering__error { color: #ff8f96; font-size: 14px; } body[data-storefront="primevil"] .group-catering a:focus-visible, body[data-storefront="primevil"] .group-catering input:focus-visible { outline: 3px solid #fff; outline-offset: 4px; } body[data-storefront="primevil"] .group-business-invoice { margin: 20px 0; padding: 18px; border: 1px solid var(--bk-border, #d8c8c9); border-radius: 12px; background: var(--bk-bg-card, #fffdfb); color: var(--bk-fg, #1e1415); } body[data-storefront="primevil"] .group-business-invoice__toggle { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 14px; cursor: pointer; } body[data-storefront="primevil"] .group-business-invoice__toggle input { width: 20px; height: 20px; accent-color: #d80f1b; } body[data-storefront="primevil"] .group-business-invoice__fields { display: grid; gap: 14px; padding: 16px 0 0; border: 0; } body[data-storefront="primevil"] .group-business-invoice__fields legend { padding-top: 20px; font-weight: 700; } body[data-storefront="primevil"] .group-business-invoice__fields p { font-size: 13px; color: var(--bk-fg-muted, #66575a); } body[data-storefront="primevil"] .group-business-invoice__fields label { display: grid; gap: 6px; font-size: 13px; } body[data-storefront="primevil"] .group-business-invoice__fields input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--bk-input-border, #c6b1b4); border-radius: 8px; background: #fff; color: #1e1415; font-size: 16px; } @media (max-width: 767px) { body[data-storefront="primevil"] .group-catering { padding: 18px; } body[data-storefront="primevil"] .group-catering__grid { grid-template-columns: 1fr; } } body[data-storefront="primevil"] { /* globals.css scopes the 8px spacing scale to `.book-flow-footer`, so every `var(--space-*)` below resolves to nothing on the booking page unless the tokens are bound here too. */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-56: 56px; --font-heading: "Primevil Special Elite", Georgia, serif; --font-body: var(--font-booking-sans), system-ui, -apple-system, sans-serif; --roarr-font-heading: "Primevil Special Elite", Georgia, serif; --roarr-font-body: var(--font-booking-sans), system-ui, -apple-system, sans-serif; --roarr-accent-green: #e30613; --roarr-accent-green-dark: #a9050e; --roarr-accent-orange: #ff303b; --roarr-bg-base: #070707; --roarr-bg-header: #050505; --roarr-bg-surface: #171112; --roarr-text-primary: #f7f3ef; --roarr-text-secondary: #ded6d1; --roarr-text-muted: #b9afaa; --green-light: #ff5660; --green: #d80f1b; --green-dark: #940610; --orange-dark: #a9050e; --orange-light: #ff626b; /* Checkout stays deliberately light and calm for payment readability. */ --bk-fg: #1e1415; --bk-fg-strong: #120b0c; --bk-fg-muted: rgba(30, 20, 21, 0.68); --bk-fg-subtle: rgba(30, 20, 21, 0.5); --bk-fg-soft: rgba(30, 20, 21, 0.34); --bk-fg-trace: rgba(30, 20, 21, 0.13); --bk-bg-card: #fffdfb; --bk-bg-input: #ffffff; --bk-bg-input-hover: #fffdfb; --bk-bg-soft: rgba(68, 13, 18, 0.05); --bk-bg-softer: rgba(68, 13, 18, 0.025); --bk-border: rgba(58, 20, 23, 0.16); --bk-border-strong: rgba(58, 20, 23, 0.25); --bk-input-border: rgba(58, 20, 23, 0.22); --bk-input-border-hover: rgba(58, 20, 23, 0.36); --bk-accent: #d80f1b; --bk-accent-deep: #940610; --bk-accent-soft: rgba(216, 15, 27, 0.16); --bk-accent-faint: rgba(216, 15, 27, 0.065); --bk-accent-tint: rgba(216, 15, 27, 0.11); --bk-accent-border: rgba(216, 15, 27, 0.32); --bk-accent-focus: rgba(216, 15, 27, 0.24); --bk-accent-valid: rgba(216, 15, 27, 0.52); --bk-shadow-card: 0 1px 3px rgba(35, 7, 9, 0.08), 0 18px 42px -26px rgba(113, 5, 14, 0.42); background: #070707; } body[data-storefront="primevil"] .bookcheck { --bk-fg: #1e1415; --bk-fg-strong: #120b0c; --bk-fg-muted: rgba(30, 20, 21, 0.68); --bk-fg-subtle: rgba(30, 20, 21, 0.5); --bk-fg-soft: rgba(30, 20, 21, 0.34); --bk-fg-trace: rgba(30, 20, 21, 0.13); --bk-bg-card: #fffdfb; --bk-bg-input: #fff; --bk-bg-input-hover: #fffdfb; --bk-bg-soft: rgba(68, 13, 18, 0.05); --bk-bg-softer: rgba(68, 13, 18, 0.025); --bk-border: rgba(58, 20, 23, 0.16); --bk-border-strong: rgba(58, 20, 23, 0.25); --bk-input-border: rgba(58, 20, 23, 0.22); --bk-input-border-hover: rgba(58, 20, 23, 0.36); --bk-accent: #d80f1b; --bk-accent-deep: #940610; --bk-accent-soft: rgba(216, 15, 27, 0.16); --bk-accent-faint: rgba(216, 15, 27, 0.065); --bk-accent-tint: rgba(216, 15, 27, 0.11); --bk-accent-border: rgba(216, 15, 27, 0.32); --bk-accent-focus: rgba(216, 15, 27, 0.24); --bk-accent-valid: rgba(216, 15, 27, 0.52); --bk-shadow-card: 0 1px 3px rgba(35, 7, 9, 0.08), 0 18px 42px -26px rgba(113, 5, 14, 0.42); } body[data-storefront="primevil"] .site-header.book-flow-header { position: relative; z-index: 20; min-height: 92px; background: linear-gradient(90deg, rgba(227, 6, 19, 0.12), transparent 28%), #050505; border-bottom: 2px solid #e30613; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); } body[data-storefront="primevil"] .book-flow-header .header-inner { min-height: 92px; padding-block: 12px; } body[data-storefront="primevil"] .header-logo { display: inline-flex; min-width: 132px; min-height: 64px; align-items: center; justify-content: flex-start; border-radius: 4px; } body[data-storefront="primevil"] .header-logo img, body[data-storefront="primevil"] .book-legal-footer__logo, body[data-storefront="primevil"] .site-footer__mini-logo { width: auto; max-width: 168px; height: 64px; object-fit: contain; content: url("/images/primevil/primevil-logo-red.png"); } body[data-storefront="primevil"] .header-logo:focus-visible { outline: 3px solid #ff303b; outline-offset: 5px; } body[data-storefront="primevil"] .tickets-page.book-flow-page { position: relative; min-height: calc(100vh - 92px); color: #f7f3ef; background: radial-gradient( circle at 75% 8%, rgba(227, 6, 19, 0.11), transparent 30rem ), linear-gradient(180deg, rgba(5, 5, 5, 0.14), rgba(5, 5, 5, 0.88)), #050404; isolation: isolate; } body[data-storefront="primevil"] .tickets-page.book-flow-page::before { position: fixed; z-index: -2; inset: 82px -5vw -5vh; content: ""; pointer-events: none; background: linear-gradient( 90deg, rgba(5, 4, 4, 0.52) 0%, rgba(5, 4, 4, 0.68) 32%, rgba(5, 4, 4, 0.78) 50%, rgba(5, 4, 4, 0.62) 68%, rgba(5, 4, 4, 0.44) 100% ), linear-gradient( 180deg, rgba(2, 2, 2, 0.12) 0%, rgba(2, 2, 2, 0.28) 58%, rgba(2, 2, 2, 0.72) 100% ), url("/images/primevil/primevil-gateway-bg.webp") center / cover no-repeat; opacity: 0.34; transform: translate3d(-0.8%, -0.45%, 0) scale(1.035); transform-origin: center; animation: primevil-gateway-drift 22s ease-in-out infinite alternate; } /* Drifting smoke. * * Deliberately gradients-only. The previous version blurred this layer with * `filter: blur(24px)` while animating it, which makes the compositor * re-blur a full-viewport buffer every frame — by far the most expensive * thing on the page, and worst on the phones most of this audience books on. * Wide, low-alpha radial stops are already soft, so the blur bought nothing. * Both layers animate transform/opacity only, which stays on the compositor. */ body[data-storefront="primevil"] .tickets-page.book-flow-page::after { position: fixed; z-index: -1; inset: -30vh -30vw; content: ""; pointer-events: none; background: radial-gradient( 42% 26% at 22% 58%, rgba(228, 226, 222, 0.09), transparent 70% ), radial-gradient( 38% 22% at 74% 44%, rgba(199, 204, 201, 0.075), transparent 72% ), radial-gradient( 52% 30% at 48% 82%, rgba(146, 26, 34, 0.11), transparent 74% ), radial-gradient( 30% 20% at 62% 20%, rgba(227, 6, 19, 0.07), transparent 76% ); opacity: 0.85; transform: translate3d(-4%, 1%, 0) scale(1.05); animation: primevil-fog-drift 26s ease-in-out infinite alternate; } /* Second, slower smoke pass at a different scale so the movement never reads as one sheet sliding. */ body[data-storefront="primevil"] .book-flow-container::before { position: fixed; z-index: -1; inset: -25vh -35vw; content: ""; pointer-events: none; background: radial-gradient( 46% 24% at 68% 70%, rgba(224, 222, 218, 0.06), transparent 72% ), radial-gradient( 34% 20% at 30% 26%, rgba(210, 212, 210, 0.05), transparent 74% ); opacity: 0.9; transform: translate3d(3%, -2%, 0) scale(1.12); animation: primevil-fog-drift-slow 41s ease-in-out infinite alternate; } body[data-storefront="primevil"] .book-flow-container { position: relative; z-index: 1; } /* Grain and vignette. Both static — the movement on this page comes from the two smoke layers, and a third animated layer would cost more than it adds. The grain is an inline SVG turbulence, so it is a few hundred bytes and needs no network request. */ body[data-storefront="primevil"] .tickets-page.book-flow-page .book-flow-container::after { position: fixed; z-index: -1; inset: 0; content: ""; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } body[data-storefront="primevil"] .tickets-page.book-flow-page::after { box-shadow: inset 0 0 clamp(140px, 22vw, 300px) clamp(40px, 7vw, 110px) rgba(0, 0, 0, 0.72); } body[data-storefront="primevil"] .event-buy-banner { display: none; } /* PrimEvil events carry `landing_theme = 'night'`, so the page also gets ROARR's `.event-buy-page--night` chrome. Its teal moonlight gradient sits behind the skin and shows through any gutter, so neutralise it here; the matching moon/stars layer is not rendered at all (see page.tsx). */ body[data-storefront="primevil"].event-buy-page--night, body[data-storefront="primevil"] .event-buy-page--night { background: #050404; } body[data-storefront="primevil"] .event-sky-fx { display: none; } /* --------------------------------------------------------------------------- Booking progress. Numbered markers joined by a rule rather than the ROARR pills — the step row is chrome here, not a card. ------------------------------------------------------------------------ */ body[data-storefront="primevil"] .event-buy-progress { margin: 0; padding-bottom: 0; border-bottom: 0; } body[data-storefront="primevil"] .event-buy-progress ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); } body[data-storefront="primevil"] .event-buy-progress--two-step ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } body[data-storefront="primevil"] .event-buy-progress li { min-width: 0; color: #a99e99; border: 1px solid rgba(255, 48, 59, 0.32); border-radius: 999px; background: rgba(255, 255, 255, 0.025); box-shadow: none; } body[data-storefront="primevil"] .event-buy-progress .event-buy-step { width: 100%; min-height: 44px; gap: var(--space-8); padding: var(--space-8) var(--space-16); font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; } body[data-storefront="primevil"] .event-buy-progress li.is-locked .event-buy-step { color: #a99e99; } body[data-storefront="primevil"] .event-buy-step:not(:disabled):hover { color: #fff; background: rgba(227, 6, 19, 0.12); } body[data-storefront="primevil"] .event-buy-progress .event-buy-step > span { display: grid; flex: 0 0 var(--space-24); width: var(--space-24); height: var(--space-24); padding: 0; color: #b9afaa; font-size: 12px; font-weight: 800; line-height: 1; place-items: center; text-align: center; border: 1px solid rgba(247, 243, 239, 0.26); background: transparent; } body[data-storefront="primevil"] .event-buy-progress li.is-current, body[data-storefront="primevil"] .event-buy-progress li.is-complete, body[data-storefront="primevil"] .event-buy-progress li.is-locked { color: #fff; /* `.event-buy-page--night` runs `roarr-neon-pulse` on the active step, and a running animation's keyframes outrank any normal `box-shadow` we set — so the green glow survived every override until the animation itself was cancelled. Do not remove this line without checking the pills again. */ animation: none; box-shadow: none; } body[data-storefront="primevil"] .event-buy-progress li.is-locked { color: #a99e99; border-color: rgba(247, 243, 239, 0.16); } body[data-storefront="primevil"] .event-buy-progress li.is-current, body[data-storefront="primevil"] .event-buy-progress li.is-complete { border-color: #ff303b; background: rgba(227, 6, 19, 0.1); } body[data-storefront="primevil"] .event-buy-progress li.is-current .event-buy-step > span, body[data-storefront="primevil"] .event-buy-progress li.is-complete .event-buy-step > span { color: #fff; border-color: #ff303b; background: #d80f1b; box-shadow: 0 0 0 4px rgba(216, 15, 27, 0.16), 0 0 18px rgba(227, 6, 19, 0.5); } body[data-storefront="primevil"] .event-buy-progress li small { color: #a99e99; letter-spacing: 0.08em; } @media (max-width: 639px) { /* The button owns the tap target; shared mobile li padding doubles it. */ body[data-storefront="primevil"] .event-buy-progress li { padding: 0; } body[data-storefront="primevil"] .event-buy-progress .event-buy-step { gap: 4px; padding: 8px 6px; font-size: 10px; letter-spacing: 0.04em; justify-content: center; } body[data-storefront="primevil"] .event-buy-progress .event-buy-step > span { flex-basis: 20px; width: 20px; height: 20px; font-size: 11px; } } /* Checkout stays on the light payment surface; only the ticket-selection journey goes dark. */ body[data-storefront="primevil"] .bookcheck-card, body[data-storefront="primevil"] .checkout-panel, body[data-storefront="primevil"] .checkout-handoff-loading { color: var(--bk-fg); border-color: rgba(216, 15, 27, 0.28) !important; background: #fffdfb !important; box-shadow: inset 0 -18px 42px rgba(148, 6, 16, 0.04), 0 22px 48px -30px rgba(61, 3, 8, 0.78) !important; } body[data-storefront="primevil"] .bookcheck h1, body[data-storefront="primevil"] .bookcheck h2 { color: #160b0c; font-family: var(--font-heading); letter-spacing: 0.015em; } /* --------------------------------------------------------------------------- Purchase stage. The stage itself is transparent so the calendar, session and ticket blocks read as separate objects on the page; the standalone empty/error placeholder keeps a card so its message stays legible. ------------------------------------------------------------------------ */ body[data-storefront="primevil"] .event-ticket-placeholder { color: #f7f3ef; border-color: rgba(255, 48, 59, 0.3); background: rgba(12, 8, 9, 0.88); box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6), 0 22px 48px -30px rgba(0, 0, 0, 0.82); } body[data-storefront="primevil"] .event-ticket-placeholder.event-buy-stage { gap: var(--space-32); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } body[data-storefront="primevil"] .event-ticket-placeholder__head { gap: var(--space-8); } body[data-storefront="primevil"] .event-ticket-placeholder__head h2 { color: #fff; font-family: var(--font-heading); font-size: 48px; font-weight: 400; line-height: 0.98; letter-spacing: 0.02em; text-wrap: balance; text-shadow: 0 3px 0 #000, 0 0 30px rgba(227, 6, 19, 0.28); } body[data-storefront="primevil"] .event-ticket-placeholder__head h2 small { display: block; margin-bottom: var(--space-8); color: #ded6d1; font-size: 20px; letter-spacing: 0.06em; } body[data-storefront="primevil"] .event-ticket-placeholder__head span { color: #b9afaa; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; } body[data-storefront="primevil"] .event-ticket-placeholder__head p, body[data-storefront="primevil"] .upsell-add-all__eyebrow { color: #ff5660 !important; background: rgba(227, 6, 19, 0.14); } body[data-storefront="primevil"] .event-ticket-placeholder__state { color: #ded6d1; } body[data-storefront="primevil"] .event-ticket-placeholder p a { color: #ff5660; } body[data-storefront="primevil"] .tickets-heading { color: #f7f3ef; text-shadow: 0 2px 18px rgba(227, 6, 19, 0.42); } /* Section labels above the session chips and the ticket rows. */ body[data-storefront="primevil"] .event-session-picker legend, body[data-storefront="primevil"] .event-ticket-selection__heading { color: #f7f3ef; font-family: var(--font-body); font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } /* Keep the existing ticket cards in place while a new night is resolved. The live status sits over the section label instead of entering the grid flow, while the cards soften by a couple of pixels and return once the authoritative inventory arrives. */ body[data-storefront="primevil"] .event-ticket-selection { position: relative; } body[data-storefront="primevil"] .event-ticket-selection__body { transition: opacity 180ms ease-out, transform 180ms ease-out; } body[data-storefront="primevil"] .event-ticket-selection--updating .event-ticket-selection__body { opacity: 0.58; transform: translateY(2px); } body[data-storefront="primevil"] .event-ticket-selection__updating { position: absolute; z-index: 2; top: -5px; right: 0; display: inline-flex; gap: 6px; align-items: center; margin: 0; padding: 4px 8px; color: #ff8a92; font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; border: 1px solid rgba(255, 48, 59, 0.36); border-radius: 999px; background: rgba(23, 8, 10, 0.96); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.34); animation: primevil-ticket-status-in 180ms ease-out both; } body[data-storefront="primevil"] .event-ticket-selection__updating .event-buy-action-spinner { width: 12px; height: 12px; border-width: 1.5px; } body[data-storefront="primevil"] .event-ticket-background-status { min-height: 0; margin: 0; color: #b9afaa; font-size: 13px; line-height: 1.5; opacity: 0; transition: opacity 180ms ease-out; } body[data-storefront="primevil"] .event-ticket-background-status.is-visible { opacity: 1; } /* --------------------------------------------------------------------------- Session chips. ------------------------------------------------------------------------ */ body[data-storefront="primevil"] .event-session-picker__options--times { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-8); } body[data-storefront="primevil"] .event-session-picker__options button { color: #ded6d1; border-color: rgba(247, 243, 239, 0.13); border-radius: 5px; background: rgba(255, 255, 255, 0.025); } body[data-storefront="primevil"] .event-session-picker__options--times button { min-height: 66px; } body[data-storefront="primevil"] .event-session-picker__options--times button strong { font-size: 16px; } body[data-storefront="primevil"] .event-session-picker__options--times button span:not(.sr-only) { font-size: 12px; } body[data-storefront="primevil"] .event-session-picker__options button span { color: #a99e99; } body[data-storefront="primevil"] .event-session-picker__options button:hover:not(:disabled) { color: #fff; border-color: rgba(255, 48, 59, 0.6); background: rgba(227, 6, 19, 0.12); } body[data-storefront="primevil"] .event-session-picker__options button.is-selected { color: #fff; outline: none; border-color: #ff303b; background: rgba(103, 7, 14, 0.42); box-shadow: inset 0 0 22px rgba(227, 6, 19, 0.2), 0 0 24px rgba(227, 6, 19, 0.32); } body[data-storefront="primevil"] .event-session-picker__options button.is-selected span { color: #f2d9da; } body[data-storefront="primevil"] .event-session-picker__options button.is-sold-out { color: rgba(222, 214, 209, 0.42); border-color: rgba(148, 6, 16, 0.24); background: rgba(31, 11, 13, 0.28); } body[data-storefront="primevil"] .event-exclusive-time-groups { border-color: rgba(247, 243, 239, 0.12); background: rgba(255, 255, 255, 0.02); } body[data-storefront="primevil"] .event-exclusive-time-group h3 { color: #f7f3ef; } /* --------------------------------------------------------------------------- Ticket rows. Each row is its own compact card. ------------------------------------------------------------------------ */ body[data-storefront="primevil"] .event-ticket-row { grid-template-columns: minmax(0, 1fr) 108px auto; grid-template-areas: "name price qty"; gap: var(--space-24); align-items: center; padding: var(--space-24); border: 1px solid rgba(255, 48, 59, 0.52); border-radius: 6px; background: rgba(255, 255, 255, 0.022); box-shadow: inset 0 0 18px rgba(227, 6, 19, 0.06), 0 0 16px rgba(227, 6, 19, 0.18); } body[data-storefront="primevil"] .event-ticket-row > div:first-of-type { grid-area: name; } body[data-storefront="primevil"] .event-ticket-row > strong { grid-area: price; color: #ff2230; font-family: var(--font-body); font-size: 20px; } body[data-storefront="primevil"] .event-ticket-row__qty { grid-area: qty; } body[data-storefront="primevil"] .event-ticket-row h3 { color: #f7f3ef; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; } body[data-storefront="primevil"] .event-ticket-row p, body[data-storefront="primevil"] .event-ticket-row .data-capture-checkbox { color: #a99e99; font-size: 14px; } body[data-storefront="primevil"] .event-ticket-row__qty button, body[data-storefront="primevil"] .ticket-qty-btn, body[data-storefront="primevil"] .upsell-product-card__step { color: #ff5660; border: 1px solid rgba(255, 48, 59, 0.44); border-radius: 4px; background: rgba(227, 6, 19, 0.08); } body[data-storefront="primevil"] .event-ticket-row__qty span { color: #f7f3ef; } body[data-storefront="primevil"] .event-ticket-row__qty button:not(:disabled):hover, body[data-storefront="primevil"] .event-ticket-row__qty button:not(:disabled):focus-visible, body[data-storefront="primevil"] .ticket-qty-btn:hover:not(:disabled), body[data-storefront="primevil"] .upsell-product-card__step:not(:disabled):hover, body[data-storefront="primevil"] .upsell-product-card__step:not(:disabled):focus-visible { color: #fff; border-color: #ff303b; background: rgba(227, 6, 19, 0.3); } body[data-storefront="primevil"] .event-ticket-offer, body[data-storefront="primevil"] .child-ticket-ages { color: #ded6d1; border-color: rgba(255, 48, 59, 0.34); background: rgba(227, 6, 19, 0.09); } body[data-storefront="primevil"] .event-ticket-offer strong, body[data-storefront="primevil"] .child-ticket-ages legend { color: #fff; } /* The native select kept its light UA styling and sat on the dark page as a white slab. */ body[data-storefront="primevil"] .child-ticket-age-field select, body[data-storefront="primevil"] .event-ticket-row .data-capture-control { color: #f7f3ef; border: 1px solid rgba(255, 48, 59, 0.4); border-radius: 4px; background: rgba(10, 7, 8, 0.92); } body[data-storefront="primevil"] .child-ticket-age-field select option, body[data-storefront="primevil"] .event-ticket-row .data-capture-control option { color: #f7f3ef; background: #120b0c; } body[data-storefront="primevil"] .child-ticket-age-field select:hover, body[data-storefront="primevil"] .child-ticket-age-field select:focus-visible { border-color: #ff303b; } body[data-storefront="primevil"] .child-ticket-age-field > span, body[data-storefront="primevil"] .event-ticket-row .data-capture-label { color: #ded6d1; } body[data-storefront="primevil"] .child-ticket-ages p { color: #a99e99; } body[data-storefront="primevil"] .event-ticket-offer span { color: #c9bfba; } /* --------------------------------------------------------------------------- Extras. Kept on the same dark surface as the tickets step — the order summary sits beside both, so a white card here would read as a stray. ------------------------------------------------------------------------ */ body[data-storefront="primevil"] .ticket-type-card, body[data-storefront="primevil"] .upsell-product-card, body[data-storefront="primevil"] .upsell-add-all { color: #f7f3ef; border-color: rgba(247, 243, 239, 0.1) !important; background: rgba(255, 255, 255, 0.025) !important; box-shadow: none !important; } body[data-storefront="primevil"] .upsell-add-all__copy strong, body[data-storefront="primevil"] .upsell-product-card__details h3 { color: #f7f3ef; } body[data-storefront="primevil"] .upsell-add-all { gap: 24px; padding: 24px; border-color: rgba(255, 48, 59, 0.35) !important; background: radial-gradient(ellipse at top left, rgba(139, 4, 13, 0.3), transparent 65%), #100b0c !important; } body[data-storefront="primevil"] .upsell-add-all__art { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; } body[data-storefront="primevil"] .upsell-add-all__art > img, body[data-storefront="primevil"] .upsell-add-all__art > span { width: 100%; height: auto; aspect-ratio: 1; margin: 0; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; object-fit: contain; background: #fff; } body[data-storefront="primevil"] .upsell-add-all__copy { width: 100%; text-align: left; } body[data-storefront="primevil"] .upsell-add-all__eyebrow { background: transparent; } body[data-storefront="primevil"] .upsell-add-all__copy strong { margin: 12px 0; font-family: var(--font-heading); font-size: clamp(28px, 4.5cqi, 44px); line-height: 1.1; } body[data-storefront="primevil"] .upsell-add-all__copy > span:last-child { font-size: 16px; line-height: 1.6; } body[data-storefront="primevil"] .upsell-add-all > button { min-height: 56px; min-width: 0; max-width: 100%; padding: 12px 18px; font-size: 17px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; flex-shrink: 0; flex-wrap: wrap; gap: 4px 8px; } body[data-storefront="primevil"] .upsell-add-all--hero > button > span { max-width: 100%; font-size: inherit; } body[data-storefront="primevil"] .upsell-price, body[data-storefront="primevil"] .upsell-product-card__price strong { font-family: var(--font-heading); font-weight: 400; white-space: nowrap; } body[data-storefront="primevil"] .upsell-add-all--hero > button .upsell-price { font-size: 22px; line-height: 1.2; } @container (min-width: 560px) { body[data-storefront="primevil"] .upsell-add-all { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; column-gap: 32px; padding: 32px; } body[data-storefront="primevil"] .upsell-add-all__art { grid-row: 1 / 3; } body[data-storefront="primevil"] .upsell-add-all > button { grid-column: 2; align-self: start; } body[data-storefront="primevil"] .upsell-add-all__copy { align-self: end; } } body[data-storefront="primevil"] .upsell-add-all.upsell-add-all--hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 22px; min-height: 500px; aspect-ratio: auto; padding: clamp(24px, 4cqi, 48px); background: #0b0809 url('/images/primevil/souvenir-collection-shirt.webp') left center / auto 100% no-repeat !important; } body[data-storefront="primevil"] .upsell-add-all--hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent 25%, rgba(12, 7, 9, 0.25) 45%, rgba(12, 7, 9, 0.94) 67%, #0c0709 100%); } body[data-storefront="primevil"] .upsell-add-all--hero .upsell-add-all__art { display: none; } body[data-storefront="primevil"] .upsell-add-all--hero .upsell-add-all__copy > span { color: #eee6e2; } body[data-storefront="primevil"] .upsell-add-all--hero .upsell-add-all__eyebrow { display: inline-block; font-family: var(--font-heading); font-size: clamp(18px, 2.2cqi, 24px) !important; line-height: 1.3 !important; letter-spacing: 0.015em; transform: rotate(-3deg); transform-origin: left center; } body[data-storefront="primevil"] .upsell-add-all--hero .upsell-add-all__eyebrow img { display: block; width: 100%; height: auto; } body[data-storefront="primevil"] .upsell-add-all--hero .upsell-add-all__copy, body[data-storefront="primevil"] .upsell-add-all--hero > button { width: 44%; align-self: flex-end; } @container (max-width: 559px) { body[data-storefront="primevil"] .upsell-add-all.upsell-add-all--hero { aspect-ratio: auto; min-height: 700px; justify-content: flex-end; background-size: auto 350px !important; background-position: left top !important; } body[data-storefront="primevil"] .upsell-add-all--hero::before { background: linear-gradient(180deg, transparent 30%, rgba(12, 7, 9, 0.55) 48%, #0c0709 65%); } body[data-storefront="primevil"] .upsell-add-all--hero .upsell-add-all__eyebrow { position: static; width: 100%; max-width: 300px; margin-bottom: 18px; transform: rotate(-3deg); transform-origin: left center; filter: drop-shadow(0 3px 8px #080506); } body[data-storefront="primevil"] .upsell-add-all--hero .upsell-add-all__copy, body[data-storefront="primevil"] .upsell-add-all--hero > button { width: 100%; } } body[data-storefront="primevil"] .upsell-collection-sizes { width: 100%; margin-top: 18px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } body[data-storefront="primevil"] .upsell-collection-sizes button { min-width: 0; min-height: 44px; padding: 8px 2px; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; box-shadow: none !important; overflow: visible; } body[data-storefront="primevil"] .upsell-section > h2 { color: var(--roarr-text-primary) !important; } body[data-storefront="primevil"] .upsell-section > p { color: var(--roarr-text-secondary) !important; margin-bottom: 18px; } body[data-storefront="primevil"] .upsell-add-all__copy > span:last-child, body[data-storefront="primevil"] .upsell-product-card__description, body[data-storefront="primevil"] .upsell-product-card__price span { color: #a99e99; } body[data-storefront="primevil"] .upsell-product-card__price strong { color: #ff2230; } body[data-storefront="primevil"] .upsell-product-card__details { display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: 16px; row-gap: 8px; padding: 22px 20px 18px; } body[data-storefront="primevil"] .upsell-product-card__details > h3, body[data-storefront="primevil"] .upsell-product-card__description { grid-column: 1; margin: 0; } body[data-storefront="primevil"] .upsell-product-card__details > h3 { font-size: 20px; line-height: 1.3; } body[data-storefront="primevil"] .upsell-product-card__description { font-size: 14px; line-height: 1.5; } body[data-storefront="primevil"] .upsell-product-card__price { grid-column: 2; grid-row: 1 / span 4; align-self: start; flex-direction: column; align-items: flex-end; gap: 6px; margin: 0; } body[data-storefront="primevil"] .upsell-product-card__price strong { font-size: clamp(30px, 3.5cqi, 42px); letter-spacing: -0.04em; text-shadow: 0 3px 22px rgba(227, 6, 19, 0.25); } body[data-storefront="primevil"] .upsell-product-card__price span { font-size: 14px; } body[data-storefront="primevil"] .upsell-product-card__variant, body[data-storefront="primevil"] .upsell-product-card__stock { grid-column: 1 / -1; } body[data-storefront="primevil"] .upsell-product-card__sizes { gap: 12px; padding-bottom: 4px; } body[data-storefront="primevil"] .upsell-product-card__sizes button { position: relative; isolation: isolate; flex: 1 0 44px; min-height: 52px; border-color: rgba(255, 255, 255, 0.35); font-size: 16px; } body[data-storefront="primevil"] .upsell-product-card__sizes button[aria-pressed="true"] { z-index: 1; color: #fff; border-color: #ff303b; box-shadow: 0 0 18px rgba(227, 6, 19, 0.2); } body[data-storefront="primevil"] .upsell-product-card__sizes .primevil-calendar__blood { inset: -40% -28%; z-index: -1; } body[data-storefront="primevil"] .upsell-product-card__selected-badge { color: #fff; border-color: rgba(255, 255, 255, 0.44); background: rgba(139, 4, 13, 0.94); } body[data-storefront="primevil"] .upsell-product-card__quantity:not(.is-empty) { border-color: rgba(255, 48, 59, 0.52); background: rgba(227, 6, 19, 0.12); } body[data-storefront="primevil"] .upsell-product-card__quantity-value, body[data-storefront="primevil"] .upsell-product-card__variants, body[data-storefront="primevil"] .upsell-product-card__quantity-value output { color: #f7f3ef; } /* --------------------------------------------------------------------------- Order summary. ------------------------------------------------------------------------ */ body[data-storefront="primevil"] .event-buy-summary { gap: var(--space-16); padding: var(--space-24); color: #f7f3ef; border: 1px solid rgba(255, 48, 59, 0.4); border-radius: 8px; background: linear-gradient(160deg, rgba(18, 11, 12, 0.96), rgba(9, 6, 7, 0.96)), #070606; box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.6), 0 24px 54px -28px rgba(0, 0, 0, 0.9); } body[data-storefront="primevil"] .event-buy-summary h2 { color: #e30613; font-family: var(--font-heading); font-size: 24px; font-weight: 400; letter-spacing: 0.055em; text-shadow: 0 0 18px rgba(227, 6, 19, 0.45); } body[data-storefront="primevil"] .event-buy-summary__line { padding-top: 0; border-top-color: transparent; } body[data-storefront="primevil"] .event-buy-summary__line span { color: #ded6d1; } body[data-storefront="primevil"] .event-buy-summary__line strong { color: #f7f3ef; } body[data-storefront="primevil"] .event-buy-summary__line--saving span, body[data-storefront="primevil"] .event-buy-summary__line--saving strong { color: #ff8a92; } body[data-storefront="primevil"] .event-buy-summary__line--total { align-items: baseline; padding-top: var(--space-16); border-top-color: rgba(247, 243, 239, 0.2); } body[data-storefront="primevil"] .event-buy-summary__line--total span { color: #f7f3ef; font-size: 14px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; } body[data-storefront="primevil"] .event-buy-summary__line--total strong { color: #ff2230; font-family: var(--font-heading); font-size: 36px; font-weight: 400; line-height: 1; text-shadow: 0 0 26px rgba(227, 6, 19, 0.55); } body[data-storefront="primevil"] .event-buy-summary p { color: #a99e99; font-size: 14px; } body[data-storefront="primevil"] .event-buy-summary__error { color: #ff8a92; } /* Reassurance line under the CTA. Rendered for PrimEvil only. */ body[data-storefront="primevil"] .event-buy-summary__secure { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 var(--space-8); align-items: center; margin: 0; } body[data-storefront="primevil"] .event-buy-summary__secure svg { grid-row: 1 / 3; width: 22px; height: 22px; color: #b9afaa; } body[data-storefront="primevil"] .event-buy-summary__secure strong { color: #f7f3ef; font-size: 14px; font-weight: 800; } body[data-storefront="primevil"] .event-buy-summary__secure span { color: #a99e99; font-size: 12px; line-height: 1.4; } body[data-storefront="primevil"] .event-buy-summary__cta, body[data-storefront="primevil"] .event-buy-stage__mobile-continue, body[data-storefront="primevil"] .upsell-add-all button, body[data-storefront="primevil"] .upsell-product-card__add, body[data-storefront="primevil"] .checkout-card-pay-button, body[data-storefront="primevil"] .checkout-card-pay { color: #fff; background: linear-gradient(180deg, #f2101d 0%, #b6060f 100%); border: 1px solid #ff5660; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(255, 48, 59, 0.3), 0 0 32px rgba(227, 6, 19, 0.42), 0 10px 26px -12px rgba(227, 6, 19, 0.7); } body[data-storefront="primevil"] .event-buy-summary__cta { position: relative; min-height: 58px; /* Symmetric so the label stays optically centred while the arrow sits in the right-hand gutter. Sized to keep "Proceed to checkout" on one line inside the 320px summary column. */ padding-inline: 38px; border-radius: 6px; font-size: 12px; font-weight: 900; letter-spacing: 0.04em; } /* Absolute rather than a flex sibling so the label stays optically centred in the button while the arrow sits out on the right edge, as in the reference. */ body[data-storefront="primevil"] .event-buy-summary__cta:disabled:not([aria-busy="true"]) { cursor: not-allowed; opacity: 1; color: rgba(247, 243, 239, 0.55); border-color: rgba(255, 48, 59, 0.22); background: linear-gradient(180deg, #4a1418 0%, #340d11 100%); box-shadow: none; } body[data-storefront="primevil"] .event-buy-summary__cta::after { position: absolute; right: 18px; width: 18px; height: 18px; content: ""; background: currentcolor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; } body[data-storefront="primevil"] .event-buy-summary__cta:disabled::after { display: none; } body[data-storefront="primevil"] .event-buy-summary__cta:not(:disabled):hover, body[data-storefront="primevil"] .event-buy-summary__cta:not(:disabled):focus-visible, body[data-storefront="primevil"] .event-buy-stage__mobile-continue:not(:disabled):hover, body[data-storefront="primevil"] .event-buy-stage__mobile-continue:not(:disabled):focus-visible, body[data-storefront="primevil"] .upsell-add-all button:not(:disabled):hover, body[data-storefront="primevil"] .upsell-add-all button:not(:disabled):focus-visible, body[data-storefront="primevil"] .upsell-product-card__add:not(:disabled):hover, body[data-storefront="primevil"] .upsell-product-card__add:not(:disabled):focus-visible, body[data-storefront="primevil"] .checkout-card-pay-button:not(:disabled):hover, body[data-storefront="primevil"] .checkout-card-pay-button:not(:disabled):focus-visible { color: #fff; background: linear-gradient(135deg, #ff303b 0%, #c10a15 100%); border-color: #ff303b; } body[data-storefront="primevil"] .event-buy-summary__back, body[data-storefront="primevil"] .event-buy-stage__mobile-back { color: #ffb3b8; border-color: rgba(255, 48, 59, 0.36); } body[data-storefront="primevil"] .event-buy-summary__back:not(:disabled):hover, body[data-storefront="primevil"] .event-buy-summary__back:not(:disabled):focus-visible { color: #fff; border-color: #ff303b; background: rgba(227, 6, 19, 0.14); } body[data-storefront="primevil"] .ticket-type-card--selected { border-color: #ff303b !important; background: linear-gradient(135deg, rgba(227, 6, 19, 0.16), rgba(227, 6, 19, 0.05)), rgba(255, 255, 255, 0.03) !important; box-shadow: inset 6px 0 0 #d80f1b, 0 0 24px rgba(227, 6, 19, 0.26) !important; } body[data-storefront="primevil"] .upsell-product-grid { align-items: start; padding: 1px; } body[data-storefront="primevil"] .upsell-product-card { position: relative; isolation: isolate; grid-template-rows: auto auto auto; border-color: #000 !important; transform: none; transition: border-color 360ms ease, box-shadow 360ms ease; } body[data-storefront="primevil"] .upsell-product-card::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: inset 0 0 0 1px #000; pointer-events: none; transition: box-shadow 360ms ease; } body[data-storefront="primevil"] .upsell-product-card.is-selected::after { box-shadow: inset 0 0 0 1px #ff303b; } body[data-storefront="primevil"] .upsell-product-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(145deg, rgba(227, 6, 19, 0.2), rgba(227, 6, 19, 0.035)); opacity: 0; transition: opacity 420ms ease; } body[data-storefront="primevil"] .upsell-product-card.is-selected { border-color: #ff303b !important; box-shadow: 0 8px 28px rgba(227, 6, 19, 0.12) !important; animation: none; } body[data-storefront="primevil"] .upsell-product-card.is-selected::before { opacity: 1; } @media (prefers-reduced-motion: reduce) { body[data-storefront="primevil"] .upsell-product-card, body[data-storefront="primevil"] .upsell-product-card::before, body[data-storefront="primevil"] .upsell-product-card::after { transition: none; } } body[data-storefront="primevil"] .upsell-product-card__image { background: radial-gradient(circle at center, rgba(227, 6, 19, 0.18), transparent 62%), #0a0808; } body[data-storefront="primevil"] .upsell-product-card__image img { padding: 12px; mask-image: linear-gradient(to bottom, #000 88%, transparent 100%); } body[data-storefront="primevil"] .bookcheck-card-pill--total { display: none; } body[data-storefront="primevil"] .bookcheck-summary-visit { width: 100%; box-sizing: border-box; } body[data-storefront="primevil"] .event-checkout-back { color: #d80f1b; } body[data-storefront="primevil"] .event-checkout-back:hover, body[data-storefront="primevil"] .event-checkout-back:focus-visible { color: #ff303b; } body[data-storefront="primevil"] .bookcheck-continue-payment { color: #fff; background: linear-gradient(135deg, #e30613, #8d030c); } body[data-storefront="primevil"] .bookcheck-summary-foot svg { color: rgba(216, 15, 27, 0.62); } body[data-storefront="primevil"] .book-legal-footer { margin-top: 0; color: #ded6d1; background: linear-gradient(rgba(5, 5, 5, 0.9), rgba(5, 5, 5, 0.94)), url("/images/primevil/primevil-blood-texture.png") center top / cover no-repeat, #050505; border-top: 2px solid #e30613; } body[data-storefront="primevil"] .book-legal-footer__logo { height: auto; max-height: 70px; } body[data-storefront="primevil"] .book-legal-footer__contact, body[data-storefront="primevil"] .book-legal-footer__copy { color: #b9afaa; } body[data-storefront="primevil"] .book-legal-footer__contact a, body[data-storefront="primevil"] .book-legal-footer__links a { color: #f7f3ef; } body[data-storefront="primevil"] :where(button, a, input, select, textarea):focus-visible { outline-color: #ff303b; } /* =========================================================================== Post-payment surfaces: /book/thank-you and /book/confirmation/[ref]. Both ship ROARR's green-and-orange palette. They stay light — these are receipts, read in daylight and printed — but every accent becomes PrimEvil red. Christmas and DITD are untouched: they run on the ROARR storefront, so nothing here can reach them. ========================================================================= */ /* `.confirm-page` and `.ty-processing-page` redeclare the whole `--bk-*` scale on themselves, which beats inheritance from no matter the specificity. Retinting the tokens here is what recolours most of both pages; the hardcoded hexes below are what the tokens could not reach. */ body[data-storefront="primevil"] .confirm-page, body[data-storefront="primevil"] .ty-processing-page { --bk-fg: #1e1415; --bk-fg-strong: #120b0c; --bk-fg-muted: rgba(30, 20, 21, 0.68); --bk-fg-subtle: rgba(30, 20, 21, 0.5); --bk-fg-soft: rgba(30, 20, 21, 0.34); --bk-fg-trace: rgba(30, 20, 21, 0.13); --bk-bg-soft: rgba(68, 13, 18, 0.05); --bk-bg-softer: rgba(68, 13, 18, 0.025); --bk-border: rgba(58, 20, 23, 0.16); --bk-border-strong: rgba(58, 20, 23, 0.25); --bk-input-border: rgba(58, 20, 23, 0.22); --bk-input-border-hover: rgba(58, 20, 23, 0.36); --bk-accent: #d80f1b; --bk-accent-deep: #940610; --bk-accent-soft: rgba(216, 15, 27, 0.18); --bk-accent-faint: rgba(216, 15, 27, 0.06); --bk-accent-tint: rgba(216, 15, 27, 0.1); --bk-accent-border: rgba(216, 15, 27, 0.3); --bk-accent-focus: rgba(216, 15, 27, 0.22); --bk-accent-valid: rgba(216, 15, 27, 0.5); } /* --- Processing ("we're registering your booking") ---------------------- */ /* Every word on this page lives inside `.ty-processing-card`, so the backdrop is free to go dark: same drifting smoke as the ticket page. ROARR's green dot-grid and concentric rings are the two pseudo-elements below — repurposed rather than hidden, so nothing is left painting green underneath. */ body[data-storefront="primevil"] .ty-processing-page { color: #f7f3ef; background: radial-gradient(circle at 50% -6%, rgba(227, 6, 19, 0.2), transparent 38%), linear-gradient(180deg, #0a0708 0%, #050404 58%, #0c0607 100%); } body[data-storefront="primevil"] .ty-processing-page::before { inset: -20vh -20vw; opacity: 0.9; background-image: radial-gradient( 42% 26% at 24% 56%, rgba(228, 226, 222, 0.1), transparent 70% ), radial-gradient( 38% 22% at 76% 42%, rgba(199, 204, 201, 0.08), transparent 72% ), radial-gradient( 52% 30% at 50% 84%, rgba(146, 26, 34, 0.13), transparent 74% ); background-size: auto; mask-image: none; -webkit-mask-image: none; animation: primevil-fog-drift 26s ease-in-out infinite alternate; } body[data-storefront="primevil"] .ty-processing-page::after { inset: -25vh -30vw; width: auto; height: auto; border: 0; border-radius: 0; box-shadow: none; background-image: radial-gradient( 46% 24% at 68% 68%, rgba(224, 222, 218, 0.07), transparent 72% ), radial-gradient( 34% 20% at 30% 26%, rgba(210, 212, 210, 0.055), transparent 74% ); animation: primevil-fog-drift-slow 41s ease-in-out infinite alternate; } /* Card lifts off the dark backdrop; its own tint was ROARR lime. */ body[data-storefront="primevil"] .ty-processing-card { background: radial-gradient(circle at 50% 0%, rgba(227, 6, 19, 0.1), transparent 32%), rgba(255, 253, 251, 0.96); border-color: rgba(255, 48, 59, 0.28); box-shadow: 0 35px 90px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9); /* 24px backdrop blur behind a nearly opaque card buys nothing and costs a full-size readback on the slowest moment of the journey. */ -webkit-backdrop-filter: none; backdrop-filter: none; } body[data-storefront="primevil"] .ty-processing-card::before { background: linear-gradient(90deg, transparent, #e30613 34%, #ff5660 70%, transparent); box-shadow: 0 2px 18px rgba(227, 6, 19, 0.55); } /* The loader orb is hardcoded to the ROARR wordmark. */ body[data-storefront="primevil"] .ty-signal-loader__logo { content: url("/images/primevil/primevil-logo-red.png"); } body[data-storefront="primevil"] .ty-signal-loader__core { color: #ff5660; border-color: rgba(255, 86, 96, 0.24); background: radial-gradient(circle at 50% 34%, #2a0c0f 0%, #140708 70%); } body[data-storefront="primevil"] .ty-signal-loader__ring { background: conic-gradient( from 12deg, transparent 0 12%, rgba(227, 6, 19, 0.3) 18%, #e30613 31%, transparent 43% 66%, rgba(255, 86, 96, 0.9) 73%, transparent 82% ); filter: drop-shadow(0 0 7px rgba(227, 6, 19, 0.38)); } body[data-storefront="primevil"] .ty-signal-loader__glow { background: rgba(227, 6, 19, 0.24); } body[data-storefront="primevil"] .ty-signal-loader__particle { --particle-color: #e30613; --particle-glow: rgba(227, 6, 19, 0.75); } body[data-storefront="primevil"] .ty-signal-loader__particle--one, body[data-storefront="primevil"] .ty-signal-loader__particle--three, body[data-storefront="primevil"] .ty-signal-loader__particle--five { --particle-color: #ff5660; --particle-glow: rgba(255, 86, 96, 0.72); } body[data-storefront="primevil"] .ty-processing-step--complete .ty-processing-step__marker { color: #fff; border-color: #b6060f; background: #b6060f; } body[data-storefront="primevil"] .ty-processing-step--active .ty-processing-step__marker > span { background: #b6060f; box-shadow: 0 0 0 0 rgba(216, 15, 27, 0.5); } body[data-storefront="primevil"] .ty-processing-eyebrow::before { background: #b6060f; box-shadow: 0 0 0 3px rgba(216, 15, 27, 0.12); } body[data-storefront="primevil"] .ty-stay-card { background: linear-gradient( 135deg, rgba(227, 6, 19, 0.11), rgba(227, 6, 19, 0.045) ); border-color: rgba(148, 6, 16, 0.24); } body[data-storefront="primevil"] .ty-retry-button { color: #fff; border-color: #ff5660; background: linear-gradient(180deg, #f2101d 0%, #b6060f 100%); } /* --- Confirmation (the customer's entry pass + receipt) ----------------- */ body[data-storefront="primevil"] .confirm-hero-check { color: #ffd7da; background: #6b040d; box-shadow: 0 12px 30px rgba(107, 4, 13, 0.26); } body[data-storefront="primevil"] .confirm-order-total { color: #fff; background: #1b0e0f; } body[data-storefront="primevil"] .confirm-order-total > strong { color: #ff5660; } body[data-storefront="primevil"] .confirm-btn--primary { color: #fff; background: linear-gradient(180deg, #f2101d 0%, #940610 100%); } body[data-storefront="primevil"] .confirm-order-icon { background: linear-gradient(145deg, #fff4f4 0%, var(--bk-accent-tint) 100%); box-shadow: 0 5px 14px rgba(117, 11, 18, 0.1); } body[data-storefront="primevil"] .confirm-cta-arrow { background: rgba(216, 15, 27, 0.12); } body[data-storefront="primevil"] .confirm-btn--wallet { border-color: #1b0e0f; background: #1b0e0f; } body[data-storefront="primevil"] .confirm-ref:focus-visible { outline-color: #d80f1b; border-color: #d80f1b; } body[data-storefront="primevil"] .confirm-tips-list li a:hover { color: #940610; } body[data-storefront="primevil"] .confirm-qr { box-shadow: 0 8px 24px -18px rgba(58, 20, 23, 0.7); } body[data-storefront="primevil"] .confirm-pass-ref { color: var(--bk-fg-muted); } /* Cookie/consent prompt, which can appear over either page. */ body[data-storefront="primevil"] .ty-consent-card { border-color: rgba(216, 15, 27, 0.45); background: rgba(216, 15, 27, 0.06); } body[data-storefront="primevil"] .ty-consent-card__title { color: #1e1415; } body[data-storefront="primevil"] .ty-consent-card__button { color: #fff; } body[data-storefront="primevil"] .ty-signal-loader__particle--four { --particle-color: #ff8a92; --particle-glow: rgba(255, 86, 96, 0.6); } /* Muted copy on both pages is a very dark ROARR green rather than a token. */ body[data-storefront="primevil"] .ty-processing-lead, body[data-storefront="primevil"] .ty-processing-note, body[data-storefront="primevil"] .ty-support-copy, body[data-storefront="primevil"] .ty-basket-reference, body[data-storefront="primevil"] .ty-consent-card__body, body[data-storefront="primevil"] .ty-stay-card__copy > span { color: rgba(30, 20, 21, 0.72); } /* The night chooser is one framed object: the atmosphere plate sits beside the invitation copy, with the month grid spanning the full card beneath both. */ body[data-storefront="primevil"] .primevil-calendar { position: relative; display: grid; grid-template-areas: "intro" "cal"; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); align-items: center; overflow: hidden; margin: 0; padding: var(--space-24); color: #f7f3ef; border: 1px solid rgba(255, 48, 59, 0.45); border-radius: 16px; background: radial-gradient( circle at 88% 16%, rgba(227, 6, 19, 0.18), transparent 25rem ), linear-gradient(135deg, rgba(11, 8, 9, 0.98), rgba(19, 8, 10, 0.94)), #080606; box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.72), 0 28px 74px rgba(0, 0, 0, 0.48); isolation: isolate; } /* The wide artwork is composed for this header: both figures remain visible on the left while the dark half supports the copy. Fade its lower edge into the calendar rather than presenting it as a separate banner. */ body[data-storefront="primevil"] .primevil-calendar::before { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 192px; content: ""; pointer-events: none; background: linear-gradient(90deg, transparent 0 42%, rgba(7, 4, 5, 0.64) 62%, #070405 100%), linear-gradient(rgba(104, 8, 14, 0.08), rgba(58, 4, 8, 0.2)), url("/images/primevil/primevil-chooser-girls-wide.webp") -80px -8px / auto 256px no-repeat; mask-image: radial-gradient( ellipse 320px 160px at 152px 40px, #000 0%, #000 34%, rgba(0, 0, 0, 0.76) 52%, rgba(0, 0, 0, 0.28) 74%, transparent 100% ); } body[data-storefront="primevil"] .primevil-calendar::after { position: absolute; z-index: -1; top: -42px; right: -34px; width: 260px; height: 190px; content: ""; pointer-events: none; background: url("/images/primevil/primevil-logo-red.png") center / contain no-repeat; filter: grayscale(1) contrast(1.35); opacity: 0.045; transform: rotate(8deg); } body[data-storefront="primevil"] .primevil-calendar__intro { position: relative; z-index: 1; grid-area: intro; width: min(58%, 430px); min-width: 0; margin-bottom: 0; justify-self: end; } body[data-storefront="primevil"] .primevil-calendar__intro > p { display: flex; gap: var(--space-8); align-items: center; margin: 0 0 var(--space-8); color: #ff5660; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; } body[data-storefront="primevil"] .primevil-calendar__intro > p svg { width: 18px; height: 18px; stroke-width: 1.8; } body[data-storefront="primevil"] .primevil-calendar__intro h2 { margin: 0; color: #fff; font-family: var(--font-heading); font-size: 48px; font-weight: 400; line-height: 0.95; letter-spacing: 0.012em; text-wrap: balance; text-shadow: 0 3px 0 #000, 0 0 34px rgba(227, 6, 19, 0.28); } body[data-storefront="primevil"] .primevil-calendar__intro > span { display: block; max-width: 620px; margin-top: 14px; color: #c9bfba; font-size: 16px; line-height: 1.65; } body[data-storefront="primevil"] .primevil-calendar__picker { position: relative; z-index: 1; grid-area: cal; min-width: 0; padding: var(--space-24); border: 1px solid rgba(247, 243, 239, 0.12); border-radius: 7px; background: linear-gradient(rgba(5, 5, 5, 0.92), rgba(13, 8, 9, 0.92)), repeating-linear-gradient( 102deg, transparent 0 34px, rgba(255, 255, 255, 0.02) 35px, transparent 36px 68px ); box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.56), 0 16px 34px rgba(0, 0, 0, 0.24); } body[data-storefront="primevil"] .primevil-calendar__month-nav { display: grid; grid-template-columns: 48px 1fr 48px; gap: var(--space-8); align-items: center; margin-bottom: 16px; } body[data-storefront="primevil"] .primevil-calendar__month-nav h3 { margin: 0; color: #fff; font-family: var(--font-heading); font-size: 32px; font-weight: 400; line-height: 1; text-align: center; letter-spacing: 0.035em; } body[data-storefront="primevil"] .primevil-calendar__month-nav h3 span { color: #ff5660; } body[data-storefront="primevil"] .primevil-calendar__month-nav button { display: inline-grid; width: 48px; height: 48px; padding: 0; color: #f7f3ef; cursor: pointer; place-items: center; border: 1px solid rgba(255, 48, 59, 0.36); border-radius: 4px; background: rgba(227, 6, 19, 0.08); transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease; } body[data-storefront="primevil"] .primevil-calendar__month-nav button:not(:disabled):hover { color: #fff; border-color: #ff303b; background: rgba(227, 6, 19, 0.26); } body[data-storefront="primevil"] .primevil-calendar__month-nav button:disabled { cursor: not-allowed; opacity: 0.28; } body[data-storefront="primevil"] .primevil-calendar__month-nav svg { width: 21px; height: 21px; } body[data-storefront="primevil"] .primevil-calendar__weekdays, body[data-storefront="primevil"] .primevil-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-8); } body[data-storefront="primevil"] .primevil-calendar__weekdays { margin: 0 0 var(--space-8); } body[data-storefront="primevil"] .primevil-calendar__weekdays span { padding: var(--space-8) 0; color: #a99e99; font-size: 12px; font-weight: 800; text-align: center; letter-spacing: 0.14em; text-transform: uppercase; } body[data-storefront="primevil"] .primevil-calendar__grid { animation: primevil-month-enter 260ms ease-out both; } body[data-storefront="primevil"] .primevil-calendar__cell { position: relative; display: grid; min-width: 0; min-height: 56px; padding: 0; overflow: visible; color: #ded6d1; font: inherit; cursor: pointer; place-items: center; border: 1px solid rgba(247, 243, 239, 0.1); border-radius: 4px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent), rgba(255, 255, 255, 0.018); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } body[data-storefront="primevil"] .primevil-calendar__cell.is-empty { cursor: default; border-color: transparent; background: transparent; box-shadow: none; } body[data-storefront="primevil"] .primevil-calendar__cell:not(:disabled):hover { color: #fff; border-color: rgba(247, 243, 239, 0.16); background-color: rgba(227, 6, 19, 0.14); box-shadow: inset 0 0 16px rgba(227, 6, 19, 0.09), 0 0 18px rgba(227, 6, 19, 0.12); transform: translateY(-1px); } body[data-storefront="primevil"] .primevil-calendar__cell:focus-visible { z-index: 8; outline: 3px solid #fff; outline-offset: 3px; border-color: #ff303b; } body[data-storefront="primevil"] .primevil-calendar__cell:disabled { cursor: not-allowed; } body[data-storefront="primevil"] .primevil-calendar__cell.is-closed, body[data-storefront="primevil"] .primevil-calendar__cell.is-past { color: rgba(201, 191, 186, 0.32); border-color: rgba(247, 243, 239, 0.045); background: linear-gradient( 147deg, transparent 0 47%, rgba(247, 243, 239, 0.06) 48% 50%, transparent 51% ), rgba(0, 0, 0, 0.16); } body[data-storefront="primevil"] .primevil-calendar__cell.is-sold-out { color: rgba(222, 214, 209, 0.42); border-color: rgba(148, 6, 16, 0.2); background: linear-gradient( 27deg, transparent 0 45%, rgba(227, 6, 19, 0.18) 46% 49%, transparent 50% ), rgba(31, 11, 13, 0.2); } body[data-storefront="primevil"] .primevil-calendar__cell.is-available { color: #fff; border-color: rgba(247, 243, 239, 0.1); background: radial-gradient(circle at 50% 85%, rgba(227, 6, 19, 0.12), transparent 50%), rgba(255, 255, 255, 0.025); } body[data-storefront="primevil"] .primevil-calendar__cell.is-low { color: #fff; border-color: rgba(247, 243, 239, 0.1); background: radial-gradient(circle, rgba(227, 6, 19, 0.19), transparent 72%), rgba(59, 9, 14, 0.34); animation: primevil-low-warning 1.1s ease-out 1 both; } body[data-storefront="primevil"] .primevil-calendar__cell.is-selected { z-index: 4; color: #fff; border-color: transparent; background: rgba(81, 5, 12, 0.5); box-shadow: inset 0 0 18px rgba(255, 48, 59, 0.22), 0 0 25px rgba(227, 6, 19, 0.35); } body[data-storefront="primevil"] .primevil-calendar__cell.is-selected .primevil-calendar__availability { display: none; } body[data-storefront="primevil"] .primevil-calendar__number { position: relative; z-index: 3; font-size: 16px; font-weight: 800; line-height: 1; text-shadow: 0 1px 2px #000; } body[data-storefront="primevil"] .primevil-calendar__availability { position: absolute; z-index: 3; right: 5px; bottom: 5px; display: grid; width: 13px; height: 13px; color: #ff727b; place-items: center; } body[data-storefront="primevil"] .primevil-calendar__availability > span { width: 6px; height: 6px; border-radius: 50%; background: #ef2d39; box-shadow: 0 0 8px rgba(239, 45, 57, 0.8); } body[data-storefront="primevil"] .primevil-calendar__availability svg { width: 12px; height: 12px; stroke-width: 2; } body[data-storefront="primevil"] .primevil-calendar__blood { --primevil-splat-rotation: 0deg; --primevil-splat-x: 1; --primevil-splat-y: 1; position: absolute; z-index: 2; inset: -16%; display: block; color: #cc0612; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.48)); } body[data-storefront="primevil"] .primevil-calendar__blood svg { width: 100%; height: 100%; overflow: visible; fill: currentColor; animation: primevil-blood-splat 420ms cubic-bezier(0.2, 0.9, 0.25, 1.25) both; transform-origin: center; } body[data-storefront="primevil"] .primevil-calendar__blood[data-variant="1"] svg { --primevil-splat-rotation: 21deg; } body[data-storefront="primevil"] .primevil-calendar__blood[data-variant="2"] svg { --primevil-splat-rotation: -18deg; --primevil-splat-x: 0.94; } body[data-storefront="primevil"] .primevil-calendar__blood[data-variant="3"] svg { --primevil-splat-rotation: 37deg; --primevil-splat-y: 0.92; } body[data-storefront="primevil"] .primevil-calendar__drop { position: absolute; z-index: 2; top: 63%; width: 5px; height: 11px; border-radius: 60% 40% 55% 45%; background: #c80713; opacity: 0; animation: primevil-blood-drop 1800ms 260ms ease-in-out infinite; } body[data-storefront="primevil"] .primevil-calendar__drop--one { left: 32%; } body[data-storefront="primevil"] .primevil-calendar__drop--two { right: 24%; width: 3px; height: 8px; animation-delay: 1160ms; } body[data-storefront="primevil"] .primevil-calendar__loading { position: absolute; z-index: 10; inset: 80px 14px 62px; display: grid; color: #f7f3ef; font-family: var(--font-heading); font-size: 16px; letter-spacing: 0.04em; place-items: center; border-radius: 5px; background: rgba(5, 5, 5, 0.92); } body[data-storefront="primevil"] .primevil-calendar__error, body[data-storefront="primevil"] .primevil-calendar__selection-error { margin: var(--space-16) 0 0; padding: var(--space-8) var(--space-16); color: #ffe9e9; font-size: 14px; line-height: 1.5; border-left: 3px solid #ff303b; background: rgba(227, 6, 19, 0.16); } body[data-storefront="primevil"] .primevil-calendar__legend { display: flex; flex-wrap: wrap; gap: var(--space-16) var(--space-24); margin-top: 18px; color: #b9afaa; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; } body[data-storefront="primevil"] .primevil-calendar__legend span { display: inline-flex; gap: var(--space-8); align-items: center; } body[data-storefront="primevil"] .primevil-calendar__legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ef2d39; box-shadow: 0 0 8px rgba(239, 45, 57, 0.66); } body[data-storefront="primevil"] .primevil-calendar__legend svg { width: 13px; height: 13px; color: #ff727b; } /* Chosen night: an atmosphere plate beside the date, then a full-width strip of the three facts a customer checks before committing. */ body[data-storefront="primevil"] .primevil-calendar__selected { position: relative; display: grid; grid-template-areas: "eyebrow" "title" "brand" "meta"; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-24); align-content: start; min-height: 0; padding: var(--space-24); overflow: hidden; color: #f7f3ef; border: 1px solid rgba(255, 48, 59, 0.42); border-radius: 16px; background: radial-gradient( ellipse at 78% 18%, rgba(255, 48, 59, 0.2), transparent 38% ), radial-gradient( ellipse at 56% 115%, rgba(126, 118, 122, 0.2), transparent 54% ), radial-gradient( ellipse at 18% 70%, rgba(89, 17, 23, 0.22), transparent 48% ), linear-gradient(118deg, #080607 0%, #1c0a0d 48%, #070506 100%), #0a0708; box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.62), 0 18px 40px rgba(0, 0, 0, 0.42); animation: primevil-selected-panel 320ms ease-out both; } body[data-storefront="primevil"] .primevil-calendar__selected::before { display: none; } body[data-storefront="primevil"] .primevil-calendar__selected > p:first-child { grid-area: eyebrow; margin: 0 0 var(--space-8); color: #ff5660; font-size: 12px; font-weight: 900; letter-spacing: 0.17em; text-transform: uppercase; } body[data-storefront="primevil"] .primevil-calendar__selected h3 { grid-area: title; margin: 0; color: #fff; font-family: var(--font-heading); font-size: 56px; font-weight: 400; line-height: 1.02; letter-spacing: 0.02em; text-shadow: 0 2px 0 #000, 0 0 26px rgba(227, 6, 19, 0.24); } body[data-storefront="primevil"] .primevil-calendar__selected > strong { grid-area: brand; display: block; margin-top: var(--space-8); color: #ff5660; font-size: 16px; font-weight: 700; letter-spacing: 0.02em; } body[data-storefront="primevil"] .primevil-calendar__selected dl { grid-area: meta; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); margin: var(--space-24) 0 0; padding-top: clamp(var(--space-16), 2.5vw, var(--space-20)); border-top: 1px solid rgba(247, 243, 239, 0.12); } body[data-storefront="primevil"] .primevil-calendar__selected dl > div { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: start; } body[data-storefront="primevil"] .primevil-calendar__selected dl > div + div { padding-left: var(--space-24); border-left: 1px solid rgba(247, 243, 239, 0.12); } body[data-storefront="primevil"] .primevil-calendar__selected dt { display: flex; gap: var(--space-8); align-items: center; color: #a99e99; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } body[data-storefront="primevil"] .primevil-calendar__selected dt svg { width: 15px; height: 15px; color: #ff2230; } body[data-storefront="primevil"] .primevil-calendar__selected dd { margin: 0; color: #f7f3ef; font-size: 16px; font-weight: 700; text-align: left; } body[data-storefront="primevil"] .primevil-calendar__selected dd.is-low { color: #ff5660; } body[data-storefront="primevil"] .primevil-calendar__selected dd.is-sold-out { color: #8d8482; text-decoration: line-through; } body[data-storefront="primevil"] .primevil-calendar__selected .primevil-calendar__selection-error { grid-column: 1 / -1; } body[data-storefront="primevil"] .primevil-calendar__summoning { position: absolute; z-index: 8; inset: 0; display: grid; gap: var(--space-16); color: #fff; font-family: var(--font-heading); font-size: 16px; letter-spacing: 0.035em; place-content: center; place-items: center; background: rgba(18, 5, 7, 0.95); } body[data-storefront="primevil"] .primevil-calendar__summoning span { width: 32px; height: 32px; border: 3px solid rgba(255, 255, 255, 0.18); border-top-color: #ff303b; border-radius: 50%; animation: primevil-calendar-spin 700ms linear infinite; } @keyframes primevil-gateway-drift { 0% { transform: translate3d(-0.8%, -0.45%, 0) scale(1.035); } 100% { transform: translate3d(0.8%, 0.45%, 0) scale(1.07); } } @keyframes primevil-fog-drift { 0% { opacity: 0.72; transform: translate3d(-4%, 1%, 0) scale(1.05); } 55% { opacity: 1; } 100% { opacity: 0.8; transform: translate3d(5%, -3%, 0) scale(1.14); } } @keyframes primevil-fog-drift-slow { 0% { opacity: 0.62; transform: translate3d(3%, -2%, 0) scale(1.12); } 100% { opacity: 0.95; transform: translate3d(-4%, 3%, 0) scale(1.02); } } @keyframes primevil-month-enter { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } } @keyframes primevil-blood-splat { 0% { opacity: 0; transform: rotate(calc(var(--primevil-splat-rotation) - 9deg)) scale(0.42) scaleX(var(--primevil-splat-x)) scaleY(var(--primevil-splat-y)); } 70% { opacity: 1; transform: rotate(calc(var(--primevil-splat-rotation) + 2deg)) scale(1.12) scaleX(var(--primevil-splat-x)) scaleY(var(--primevil-splat-y)); } 100% { opacity: 0.92; transform: rotate(var(--primevil-splat-rotation)) scale(1) scaleX(var(--primevil-splat-x)) scaleY(var(--primevil-splat-y)); } } @keyframes primevil-blood-drop { 0% { opacity: 0; transform: translateY(-4px) scaleY(0.4); } 22% { opacity: 1; } 72% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(24px) scaleY(1.1); } } @keyframes primevil-low-warning { 0% { box-shadow: 0 0 0 0 rgba(255, 48, 59, 0.52); } 100% { box-shadow: 0 0 0 9px rgba(255, 48, 59, 0); } } @keyframes primevil-selected-panel { from { opacity: 0; transform: translateX(13px); } to { opacity: 1; transform: translateX(0); } } @keyframes primevil-ticket-status-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } @keyframes primevil-step-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(216, 15, 27, 0.16), 0 0 18px rgba(227, 6, 19, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(216, 15, 27, 0.1), 0 0 26px rgba(227, 6, 19, 0.75); } } @keyframes primevil-calendar-spin { to { transform: rotate(360deg); } } body[data-storefront="primevil"] .event-buy-summary--awaiting { display: grid; gap: var(--space-8); align-content: start; } body[data-storefront="primevil"] .event-buy-summary--awaiting p { margin: 0; color: #a99e99; font-size: 14px; line-height: 1.5; } /* Desktop: line the order summary's top edge up with the top of the night chooser rather than the page heading, then let it stick there. The heading sits inside the ticket column, so there is no grid row to share. Instead the heading block reserves a fixed height and bottom-aligns its content, which fixes where the chooser starts; the summary offsets by that same height plus the stage gap. Keep the two in step if either changes. */ @media (min-width: 768px) { body[data-storefront="primevil"] { --primevil-head-block: calc( var(--space-40) + var(--space-40) + var(--space-32) ); --primevil-stage-gap: var(--space-32); --primevil-progress-height: calc(var(--space-24) + var(--space-16)); } body[data-storefront="primevil"] .event-ticket-placeholder__head { min-height: var(--primevil-head-block); align-content: end; } body[data-storefront="primevil"] .event-buy-summary { margin-top: calc( var(--primevil-head-block) + var(--primevil-stage-gap) ); } body[data-storefront="primevil"] .event-buy-layout:has(.event-buy-progress) .event-buy-summary { margin-top: calc( var(--primevil-head-block) + var(--primevil-progress-height) + var(--primevil-stage-gap) + var(--primevil-stage-gap) ); } } @media (min-width: 1024px) { body[data-storefront="primevil"] .event-buy-layout:has(.event-buy-stage--extras) .event-buy-summary { margin-top: var(--primevil-extras-summary-offset, 0px); } } /* The shared event journey switches to a 320px sticky summary at 768px. That leaves the ticket column too narrow for its icon, copy, price and quantity controls on a portrait tablet. Keep the approved two-column desktop composition from 1024px, and let tablet use the readable stacked order already present in the DOM. Scoped here so other storefronts retain their existing breakpoint. */ @media (min-width: 768px) and (max-width: 1023px) { body[data-storefront="primevil"] .event-buy-layout { grid-template-columns: minmax(0, 1fr); } body[data-storefront="primevil"] .event-buy-summary, body[data-storefront="primevil"] .event-buy-layout:has(.event-buy-progress) .event-buy-summary { position: static !important; top: auto; margin-top: 0; } } @media (max-width: 767px) { /* Stacked below the tickets on phones, where an empty summary above the ticket rows would just push the real content off-screen. */ body[data-storefront="primevil"] .event-buy-summary--awaiting { display: none; } /* Reserve the optional-extras status line so it can appear and clear without moving the order summary below the ticket list. */ body[data-storefront="primevil"] .event-ticket-background-status { min-height: 20px; } body[data-storefront="primevil"] .site-header.book-flow-header, body[data-storefront="primevil"] .book-flow-header .header-inner { min-height: 78px; } body[data-storefront="primevil"] .header-logo img { max-width: 132px; height: 54px; } body[data-storefront="primevil"] .tickets-page.book-flow-page::before { inset: 70px -12vw -8vh; background-position: center, center, 76% center; background-size: cover, cover, auto 100%; opacity: 0.3; } body[data-storefront="primevil"] .tickets-page.book-flow-page::after { inset: 48% -45vw -18vh; opacity: 0.23; } /* One column on phones, and the atmosphere plate steps aside: the month grid needs the whole width, and the page backdrop already carries the mood. */ body[data-storefront="primevil"] .primevil-calendar { grid-template-areas: "intro" "cal"; grid-template-columns: minmax(0, 1fr); margin-inline: calc(-1 * var(--space-16)); padding: var(--space-24) var(--space-8); border-radius: 6px; } body[data-storefront="primevil"] .primevil-calendar::before { display: none; } body[data-storefront="primevil"] .primevil-calendar__intro { width: 100%; padding-inline: 5px; justify-self: stretch; } body[data-storefront="primevil"] .primevil-calendar__intro h2 { font-size: 40px; } body[data-storefront="primevil"] .event-ticket-row { grid-template-areas: "name name" "price qty"; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8) var(--space-16); } body[data-storefront="primevil"] .primevil-calendar__picker { padding: var(--space-16) 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; } body[data-storefront="primevil"] .primevil-calendar__month-nav { position: sticky; left: 0; grid-template-columns: 44px 1fr 44px; gap: var(--space-8); } body[data-storefront="primevil"] .primevil-calendar__month-nav button { width: 44px; height: 44px; } body[data-storefront="primevil"] .primevil-calendar__weekdays, body[data-storefront="primevil"] .primevil-calendar__grid { grid-template-columns: repeat(7, 44px); width: max-content; min-width: 100%; gap: var(--space-4); justify-content: center; } body[data-storefront="primevil"] .primevil-calendar__cell { min-width: 44px; min-height: 44px; touch-action: manipulation; } body[data-storefront="primevil"] .primevil-calendar__availability { right: 3px; bottom: 3px; } body[data-storefront="primevil"] .primevil-calendar__legend { position: sticky; left: 0; gap: var(--space-8) var(--space-16); font-size: 12px; } body[data-storefront="primevil"] .primevil-calendar__selected { padding: var(--space-16); animation: none; } body[data-storefront="primevil"] .primevil-calendar__selected h3 { display: flex; min-height: 2.04em; align-items: center; font-size: clamp(23px, 7.4vw, 40px); overflow-wrap: break-word; text-wrap: balance; } body[data-storefront="primevil"] .primevil-calendar__selected dl { grid-template-columns: 1fr; gap: var(--space-8); } body[data-storefront="primevil"] .primevil-calendar__selected dl > div { grid-template-columns: minmax(90px, 0.75fr) 1fr; gap: var(--space-8); align-items: center; } body[data-storefront="primevil"] .primevil-calendar__selected dl > div + div { padding-left: 0; border-left: 0; } body[data-storefront="primevil"] .primevil-calendar__selected dd { text-align: right; } } @media (prefers-reduced-motion: reduce) { body[data-storefront="primevil"] *, body[data-storefront="primevil"] *::before, body[data-storefront="primevil"] *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }