/* ---------------------------------------------------------------- FONTS -----------------------------------------------------------------*/ body, input, .input { font-family: Helvetica, Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: Helvetica, Arial, Helvetica, sans-serif; } /* ---------------------------------------------------------------- COLORS -----------------------------------------------------------------*/ a, header.bookingSiteHeader .logo a:hover, header.bookingSiteHeader nav.mainMenu ul li a:hover, nav.mobileMenu ul li a:hover, section.bookingWidgetHeader nav.mainMenu ul li a:hover, section.bookingSteps ul li .bookingStepWrapper.bookingStepWrapperLink:hover .bookingStepLabel, .timezoneNotice p strong, .timezoneNotice select.input, .checkoutCountdown p span, section.filtersMenu a.button:hover, section.filtersMenu a.button.active, nav.inventoryItemTabsNavigation ul li a:hover, .inventoryItemInformation .inventoryItemPricing h5, .card .cardContent .cardDescriptionPricingWrapper .cardPricing h5, .card .cardContent .cardTicketPurchaseContainer .cardTicketFooterSubtotal h5, .card .cardActions a:hover, footer nav.footerMenu ul li a:hover, .menu li a:hover { color: #ffd900; } body, input, .input, .button.rescheduleDate, nav.mainMenu ul li a, nav.mainMenu ul li .selectWrapper:after, nav.mainMenu ul li select.input, section.filtersMenu a.button, section.filtersMenu .filtersMenuDateSelect a, section.resovaCalendar table td.bookingSelectReveal a.bookingSelectRevealClose, .card .cardContent .cardEventMetaGoBackContainer a.cardEventMetaGoBackButton, .card .cardContent .cardTimesContainer .showMoreTimesContainer a.showMoreTimesButton, .card .cardContent .cardTimesContainer .showMoreTimesContainer a.seeMoreDatesButton, .inventoryItemInformation .inventoryItemSharing ul li a, .card .cardContent .cardTimesContainer .cardTimeSlotWrapper .cardTimeSlot.cardTimeSlotUnavailable:hover, .card .cardActions a, .card .cardShare ul li a, .infoRibbon:before, .infoRibbon p, .infoRibbon a, .infoRibbon a.button.buttonRaised, nav.inventoryItemTabsNavigation ul li a, aside .bookingAsideWrapper .bookingAsideAddNewBooking .button, aside .bookingAsideWrapper .basketBooking .basketBookingItem .basketBookingItemDetails ul.basketActions li a, footer nav.footerMenu ul li a, footer .footerLogo a, .inputSpinnerWrapper .button.buttonRaised.inputSpinnerButton, .articleBox .infoRibbon p, .menu li a { color: #4b5b67; } .intl-tel-input .country-list .country { color: #4b5b67!important; } /*--DATEPICKER STYLES--*/ .mydp .btnclear, .mydp .btndecrease, .mydp .btnincrease, .mydp .btnpicker, .mydp .headerbtn, .mydp .monthlabel, .mydp .yearlabel, .mydp .headermonthtxt, .mydp .headermonthtxt button, .mydp .headertodaybtn, .mydp .headeryeartxt, .mydp .yearchangebtn, .mydp .weekdaytitle, .mydp .daycell.disabled, .mydp .caltable, .mydp .daycell, .mydp .monthcell, .mydp .monthtable, .mydp .weekdaytitle, .mydp .yearcell, .mydp .yeartable, .mydp .highlight { color: #4b5b67!important; } .checkbox label:after { border-color: #4b5b67; } .inputSpinnerWrapper input.inputSpinnerInput:disabled { -webkit-text-fill-color: #4b5b67; } /*--DATEPICKER STYLES--*/ h1, h2, h3, h4, h5, h6, .bookingManagerMenu ul li a { color: #1b2125; } .textDanger, .inputContainer.requiredInput label:after, span.inputCaption.inputCaptionError { color: #ed344e!important; } .textSuccess { color: #52B266!important; } /* ---------------------------------------------------------------- BACKGROUND COLORS -----------------------------------------------------------------*/ body, .full-preloader, .preloaderContainer, figure.featuredImage, section.bookingSteps ul li span.step, section.bookingSteps ul li span.bookingStepLabel, section.bookingSteps ul li span.step:after, .card, .card .cardContent .cardEventMetaGoBackContainer a.cardEventMetaGoBackButton, .card .cardContent .cardTimesContainer .showMoreTimesContainer a.showMoreTimesButton, .card .cardContent .cardTimesContainer .cardTimeSlotWrapper .cardTimeSlot.cardTimeSlotUnavailable:hover, aside .bookingAsideWrapper .taxFeeBreakdown, aside .bookingAsideWrapper .taxFeeBreakdown:before, span.orTag, .expressCheckoutOrLine span, .dialogBackdrop .dialogWrapper .dialogContainer, .bookingManagerMenu, .menu { background-color: #ffffff; } .intl-tel-input .country-list { background-color: #ffffff!important; } /*--DATEPICKER STYLES--*/ .mydp .header, .mydp .headerbtn, .mydp .headerlabelbtn, .mydp .yearchangebtn, .mydp .headerbtncell, .mydp .btnclear, .mydp .btndecrease, .mydp .btnincrease, .mydp .btnpicker, .mydp .headertodaybtn, .mydp .selector thead, .mydp .caltable, .mydp .monthtable, .mydp .yeartable, .mydp .daycell.disabled { background: #ffffff!important; } /*--DATEPICKER STYLES--*/ section.resovaCalendar table td.activeTimeSlot:after { border-bottom-color: #ffffff; } /*--DATEPICKER STYLES--*/ .mydp .selector:after, .mydp .selectorarrow:after { border-bottom-color: #ffffff!important; } /*--DATEPICKER STYLES--*/ .full-preloader .three-bounce > div, section.bookingSteps ul li span.step.bookingStepActive:before, section.bookingSteps ul li span.step.bookingStepComplete, article .articleBox .articleBoxInner.articleBoxWSelect .checkboxContainer .checkbox label:after, .giftVoucherPlaceholderBG { background: #ffd900; } @media (max-width: 959px) { header.bookingSiteHeader, header.bookingSiteHeader.transparentHeader { background: #302a29; } } /* ---------------------------------------------------------------- BUTTON COLORS -----------------------------------------------------------------*/ .buttonRaised, .iconButtonRaised, nav.mainMenu a.shoppingBasketButton span, .inventoryItemDateBadge, .card .cardContent .cardTimesContainer .cardTimeSlotWrapper .cardTimeSlot:hover, .messageState i, table.confirmationBookingsBreakdown td.confirmationBookingsBreakdownInformation i, .bookingManagerMenu ul li a:hover, .bookingManagerMenu ul li a.active, .menu .menuContent .button.buttonBlock:hover { background: #ffd900; } /*--DATEPICKER STYLES--*/ .mydp .selectedday, .mydp .daycell.selectedday, .mydp .selectedday, .mydp .selectedmonth, .mydp .selectedyear, .mydp .tablesingleday:hover, .mydp .tablesinglemonth:hover, .mydp .tablesingleyear:hover, .mydp .monthcell.selectedmonth:hover { background: #ffd900!important; } /*--DATEPICKER STYLES--*/ @media (max-width: 959px) { section.resovaCalendarList table td .resovaCalendarListItemTime { background: #ffd900; } } .button, .button.buttonRaised, .inventoryItemDateBadge, .inventoryItemDateBadge h6, .card .cardContent .cardTimesContainer .cardTimeSlotWrapper .cardTimeSlot:hover, .messageState i, table.confirmationBookingsBreakdown td.confirmationBookingsBreakdownInformation i, .bookingManagerMenu ul li a:hover, .bookingManagerMenu ul li a.active, .menu .menuContent .button.buttonBlock:hover { color: #000000; } /*--DATEPICKER STYLES--*/ .mydp .selectedday, .mydp .daycell.selectedday, .mydp .selectedday, .mydp .selectedmonth, .mydp .selectedyear, .mydp .tablesingleday:hover, .mydp .tablesinglemonth:hover, .mydp .tablesingleyear:hover, .mydp .monthcell.selectedmonth:hover { color: #000000!important; } /*--DATEPICKER STYLES--*/ @media (max-width: 959px) { section.resovaCalendarList table td .resovaCalendarListItemTime h6, section.resovaCalendarList table td .resovaCalendarListItemTime span { color: #000000; } } /* ---------------------------------------------------------------- BORDERS -----------------------------------------------------------------*/ section.bookingSteps ul li:before, section.bookingSteps ul li span.step:before, .menu li.menu-separator { background: #dadada; } input, .input, section.bookingSteps ul li span.step, section.filtersMenu a.button.filterSort, section.filtersMenu .filtersMenuDateSelect a.button, aside.basketDropdown .bookingAsideWrapper .basketBooking, .timezoneNotice, .checkoutCountdown, .inventoryItemInformation .inventoryInformationSectionBreak, .inventoryItemInformation .inventoryItemSharing ul li.inventoryItemInfoIcon, .inventoryItemInformation .inventoryItemSharing ul li a, .inventoryItemInformation .inventoryItemSharing ul li input, .card, .card .cardContent .cardDescriptionPricingWrapper .cardDescription, .card .cardContent .cardCounterWrapper .cardPricing, .card .cardContent .cardTimesContainer:before, .card .cardContent .cardTicketPurchaseContainer:before, .card .cardContent .cardTimesContainer .cardTimeSlotWrapper .cardTimeSlot, .card .cardContent .cardTimesContainer .cardTimeSlotWrapper .cardTimeSlot.cardTimeSlotUnavailable:hover, .card .cardContent .cardEventMetaGoBackContainer:before, .card .cardContent .cardEventMetaGoBackContainer a.cardEventMetaGoBackButton, .card .cardContent .cardTimesContainer .showMoreTimesContainer a.showMoreTimesButton, .card .cardContent .cardTicketPurchaseContainer .cardTicketFooter, .card .cardActions a, .card .cardActions a:nth-of-type(2), .card .cardShare, .card .cardShare ul li, .inventoryListItem, .infoRibbon a.button.buttonRaised, nav.inventoryItemTabsNavigation:after, .eventSearchItem, .eventSearchContainer .eventSearchNoResults, article .waiverSignature .waiverSignatureBox, article .articleBox, article .articleBox .articleBoxInner .checkoutLoginRegisterBox, aside .bookingAsideWrapper, aside .bookingAsideWrapper .bookingAsideAddNewBooking, aside .bookingAsideWrapper .bookingAsideHeading, aside .bookingAsideWrapper .basketBookings, aside .bookingAsideWrapper .basketBookings .basketBooking, aside .bookingAsideWrapper .basketBooking .singleBookingTotal, aside .bookingAsideWrapper .bookingAsideTransactionBreakdownWrapper table.transactionTotals, aside .bookingAsideWrapper .bookingAsideTransactionMetaWrapper, aside .bookingAsideWrapper .bookingAsidePromoWrapper, aside .bookingAsideWrapper .basketBookings .basketBooking .basketBookingItem.basketBookingItemWExtra:before, aside .bookingAsideWrapper .basketBookings .basketBooking .basketBookingItem.basketBookingItemExtra:before, aside .bookingAsideWrapper .bookingAsidePasswordProtectWrapper, aside .bookingAsideWrapper .payFullAmountWrapper, aside .bookingAsideWrapper .taxFeeBreakdown, .inventoryItemReviews .inventoryItemReview, section.resovaCalendar table th, section.resovaCalendar table td, section.resovaCalendarList table td, table td.bookingSelectReveal, table.confirmationBookingsBreakdown td, table.confirmationBookingsBreakdown tr.bookingWExtra td.confirmationBookingsBreakdownInformation:before, .itemExtraListItemContainer, .itemExtraListItem, .loginRegisterBox, .loginRegisterBox .socialLoginRegisterWrapper, footer section.footerInner:before, .checkbox label:before, .inputSpinnerWrapper .button.buttonRaised.inputSpinnerButton, .inputSpinnerWrapper input.inputSpinnerInput, .dialogBackdrop .dialogWrapper .dialogContainer .dialogHeader, .dialogBackdrop .dialogWrapper.bookingSupportModal .dialogContainer .dialogBody .supportModalItem, .continueButtonSection, .menu, .menu li.seperator:after, .expressCheckoutOrLine, .stripeElement, .bookingManagerMenu:after, .bookingManagerMenu ul.bookingManagerMainMenu, .bookingManagerMenu ul li a { border-color: #dadada; } .inventoryItemInformation .inventoryInformationSectionBreak.inventoryPrivateOption { border-color: #ffffff; } .intl-tel-input .country-list { border-color: #dadada!important; } /*--DATEPICKER STYLES--*/ .mydp .selector, .mydp .headertodaybtn, .mydp .caltable, .mydp .daycell, .mydp .monthcell, .mydp .monthtable, .mydp .weekdaytitle, .mydp .yearcell, .mydp .yeartable { border-color: #dadada!important; } /*--DATEPICKER STYLES--*/ /*--DATEPICKER STYLES--*/ .mydp .selector:before, .mydp .selectorarrow:before, .mydp .selectorarrow:before { border-bottom-color: #dadada!important; } /*--DATEPICKER STYLES--*/ section.bookingSteps ul li span.step.bookingStepActive, section.bookingSteps ul li span.step.bookingStepComplete, nav.inventoryItemTabsNavigation ul li.active a { border-color: #ffd900; } article .waiverSignature .waiverSignatureBox { background: #ffffff } /* ---------------------------------------------------------------- BOOKING SITE MENU -----------------------------------------------------------------*/ header.bookingSiteHeader .logo a h1, header.bookingSiteHeader nav.mainMenu ul li a, header.bookingSiteHeader nav.mainMenu ul li .selectWrapper:after, header.bookingSiteHeader nav.mainMenu ul li select.input, nav.mobileMenu ul li a, aside.mobileMenuPopUp header.mobileMenuHeader h6 { color: #ffffff; } header.bookingSiteHeader nav.mainMenu a.shoppingBasketButton span { color: #000000; } header,aside.mobileMenuPopUp { background: #302a29; } header.bookingSiteHeader.transparentHeader { background: transparent; } @media (max-width: 959px) { header.bookingSiteHeader, header.bookingSiteHeader.transparentHeader { background: #302a29; } } /* ---------------------------------------------------------------- CALENDAR COLOURS -----------------------------------------------------------------*/ .closedTimeSlot, .button.closedTimeSlot { color: #ffffff; background: #ed344e; } .availableTimeSlot, .button.availableTimeSlot { color: #ffffff; background: #52b266; } .partiallyBookedTimeSlot, .button.partiallyBookedTimeSlot { color: #ffffff; background: #0015b3; } .blockedTimeSlot, .button.blockedTimeSlot { color: #ffffff; background: #ed344e; } .soldOutimeSlot, .button.soldOutimeSlot { color: #ffffff; background: #ed344e; } .callToBookTimeSlot, .button.callToBookTimeSlot { color: #ffffff; background: #ed344e; } /* ---------------------------------------------------------------- CUSTOMER -----------------------------------------------------------------*/ /* ═══════════════════════════════════════════════════════════════ ESCAPE THE ROOM NYC — RESOVA CUSTOM CSS (v4) Full visual overhaul — badges, urgency, polished UI PASTE THIS INTO: Resova → Settings → Booking Site Settings → Advanced Customization (CSS) Brand: #e85d26 (orange), #0d0d1a (dark), Inter IMPORTANT: Resova injects .clearfix divs after every 3 cards. The actual nth-child positions in the grid are: 1 = Jurassic 2 = Clocktower 3 = Quiz Boxing 4 = .clearfix 5 = Agency 6 = Submarine 7 = Dig 8 = .clearfix 9 = Home 10 = Office 11 = Outbreak 12 = .clearfix 13 = Gift Cards If room order changes in Resova, update the nth-child numbers. ═══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════ 1. GLOBAL / TYPOGRAPHY / PAGE ══════════════════════════════════ */ body { font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif !important; -webkit-font-smoothing: antialiased; background: #f5f5f8 !important; color: #1a1a2e !important; } input, .input, select, textarea, button { font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif !important; } h1, h2, h3, h4, h5, h6 { font-family: Inter, -apple-system, sans-serif !important; } a { color: inherit !important; } /* ══════════════════════════════════ 2. HEADER ══════════════════════════════════ */ header.bookingSiteHeader { background: #0d0d1a !important; box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important; border-bottom: none !important; } header.bookingSiteHeader nav.mainMenu ul li a { color: rgba(255,255,255,0.65) !important; font-weight: 500 !important; font-size: 0.85rem !important; letter-spacing: 0.01em !important; transition: color 0.2s !important; } header.bookingSiteHeader nav.mainMenu ul li a:hover { color: #fff !important; } /* "BACK TO HOME" link — style as a subtle pill button */ header.bookingSiteHeader nav.mainMenu ul li:last-child a { background: rgba(232,93,38,0.12) !important; color: #e85d26 !important; padding: 6px 16px !important; border-radius: 50px !important; font-weight: 700 !important; transition: background 0.2s, color 0.2s !important; } header.bookingSiteHeader nav.mainMenu ul li:last-child a:hover { background: #e85d26 !important; color: #fff !important; } a.mobileMenuButton, a.mobileMenuButton i { color: #fff !important; } a.iconButtonRaised.shoppingBasketButton { background: #e85d26 !important; color: #fff !important; border: none !important; border-radius: 50% !important; box-shadow: 0 2px 8px rgba(232,93,38,0.3) !important; transition: transform 0.2s, box-shadow 0.2s !important; } a.iconButtonRaised.shoppingBasketButton:hover { transform: scale(1.08) !important; box-shadow: 0 4px 14px rgba(232,93,38,0.4) !important; } a.iconButtonRaised.shoppingBasketButton i { color: #fff !important; } .mobileMenuPopUp { background: #0d0d1a !important; } nav.mobileMenu ul li a { color: rgba(255,255,255,0.7) !important; font-weight: 500 !important; border-bottom-color: rgba(255,255,255,0.06) !important; } nav.mobileMenu ul li a:hover { color: #fff !important; } /* ══════════════════════════════════ 3. BOOKING STEPS PROGRESS BAR ══════════════════════════════════ */ section.bookingSteps { background: #fff !important; border-bottom: 1px solid #eee !important; padding: 12px 0 !important; } section.bookingSteps .bookingStepLabel { font-family: Inter, sans-serif !important; color: #bbb !important; font-weight: 500 !important; font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; } section.bookingSteps ul li .bookingStepWrapper.bookingStepWrapperLink:hover .bookingStepLabel, section.bookingSteps ul li .bookingStepWrapper.active .bookingStepLabel { color: #e85d26 !important; font-weight: 700 !important; } section.bookingSteps .bookingStepIcon { color: #ddd !important; } section.bookingSteps .bookingStepWrapper.active .bookingStepIcon { color: #e85d26 !important; } .bookingStepComplete { color: #16a34a !important; } /* ══════════════════════════════════ 4. FILTERS BAR ══════════════════════════════════ */ section.filtersMenu { background: #fff !important; border-bottom: 1px solid #eee !important; padding: 14px 16px !important; margin-bottom: 8px !important; } section.filtersMenu a.button { color: #1a1a2e !important; font-family: Inter, sans-serif !important; font-weight: 600 !important; font-size: 0.82rem !important; border-color: #e0e0e0 !important; border-radius: 50px !important; padding: 8px 18px !important; transition: border-color 0.2s, background 0.2s !important; } section.filtersMenu a.button:hover { border-color: #e85d26 !important; background: #fef7f4 !important; } section.filtersMenu a.button.active { border-color: #e85d26 !important; background: #e85d26 !important; color: #fff !important; } section.filtersMenu .prevNextGroup a { color: #1a1a2e !important; font-family: Inter, sans-serif !important; font-weight: 600 !important; font-size: 0.82rem !important; border-radius: 50px !important; padding: 8px 18px !important; border: 1px solid #e0e0e0 !important; transition: border-color 0.2s, background 0.2s !important; } section.filtersMenu .prevNextGroup a:hover { border-color: #e85d26 !important; background: #fef7f4 !important; } /* ══════════════════════════════════ 5. ROOM CARDS ══════════════════════════════════ */ .inventoryGridLayout { padding: 16px !important; } .card { border: 1px solid rgba(0,0,0,0.06) !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 20px rgba(0,0,0,0.04) !important; overflow: hidden !important; transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s !important; } .card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important; transform: translateY(-4px) !important; border-color: rgba(232,93,38,0.15) !important; } /* ── Card Image ── */ .card .cardMediaContainer { overflow: hidden !important; } .card .cardMediaContainer img { transition: transform 0.5s ease !important; } .card:hover .cardMediaContainer img { transform: scale(1.05) !important; } /* ── HIDE the "60 minutes" badge on the image ── Every room is 60 min so this is redundant. */ .card .cardMetaWrapper { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; } /* ══════════════════════════════════ 6. CARD BODY / CONTENT ══════════════════════════════════ */ .card .cardContent { padding: 20px 22px !important; } .card .cardContent h3 { font-family: Inter, sans-serif !important; font-weight: 800 !important; font-size: 1.08rem !important; color: #1a1a2e !important; margin-bottom: 6px !important; letter-spacing: -0.01em !important; } /* ══════════════════════════════════ 7. BADGE + DIFFICULTY LABELS Sits ABOVE room name via h3::before Photo → Badge line → Room Name → Desc ══════════════════════════════════ */ /* Shared badge base style — colored pill chip */ .inventoryGridLayout .cardContainer .card .cardContent h3::before { display: block !important; width: fit-content !important; font-family: Inter, sans-serif !important; font-size: 0.65rem !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: #fff !important; background: #e85d26 !important; padding: 3px 10px !important; border-radius: 20px !important; margin-bottom: 8px !important; white-space: nowrap !important; line-height: 1.5 !important; } /* 1 = Jurassic Escape — green (family-friendly) */ section.inventoryGridLayout .cardContainer:nth-child(1) .card .cardContent h3::before { content: "\1F995 Great for Families \00B7 Difficulty 4/5" !important; background: #16a34a !important; } /* 2 = The Clocktower — gold (award-winning) */ section.inventoryGridLayout .cardContainer:nth-child(2) .card .cardContent h3::before { content: "\1F3C6 Award-Winning \00B7 Difficulty 5/5" !important; background: #b8860b !important; } /* 3 = Quiz Boxing — ETR orange (party game) */ section.inventoryGridLayout .cardContainer:nth-child(3) .card .cardContent h3::before { content: "\1F94A Party Game \00B7 Player vs Player" !important; background: #e85d26 !important; } /* 4 = .clearfix — skip */ /* 5 = The Agency — red (fan favorite) */ section.inventoryGridLayout > :nth-child(5) .card .cardContent h3::before { content: "\2764\FE0F Fan Favorite \00B7 Difficulty 4/5" !important; background: #dc2626 !important; } /* 6 = The Submarine — deep blue (immersive) */ section.inventoryGridLayout > :nth-child(6) .card .cardContent h3::before { content: "\1F30A Immersive \00B7 Difficulty 4/5" !important; background: #1d4ed8 !important; } /* 7 = The Dig — earth brown (underground) */ section.inventoryGridLayout > :nth-child(7) .card .cardContent h3::before { content: "\26CF\FE0F Underground \00B7 Difficulty 4/5" !important; background: #92400e !important; } /* 8 = .clearfix — skip */ /* 9 = The Home — dark purple (gothic mystery) */ section.inventoryGridLayout > :nth-child(9) .card .cardContent h3::before { content: "\1F3DA\FE0F Gothic Mystery \00B7 Difficulty 3/5" !important; background: #6b21a8 !important; } /* 10 = The Office — dark slate (the original) */ section.inventoryGridLayout > :nth-child(10) .card .cardContent h3::before { content: "\1F5DD\FE0F The Original \00B7 Difficulty 3/5" !important; background: #1a1a2e !important; } /* 11 = Outbreak — crimson (high stakes) */ section.inventoryGridLayout > :nth-child(11) .card .cardContent h3::before { content: "\1F6A8 High Stakes \00B7 Difficulty 5/5" !important; background: #b91c1c !important; } /* 12 = .clearfix — skip */ /* 13 = Gift Cards — no badge */ section.inventoryGridLayout > :nth-child(13) .card .cardContent h3::before { content: none !important; display: none !important; } /* ══════════════════════════════════ 8. ROOM DESCRIPTIONS ══════════════════════════════════ */ .card .cardContent .cardDescriptionPricingWrapper .cardDescription p, .card .cardContent .cardDescription p { font-family: Inter, sans-serif !important; font-size: 0.82rem !important; color: #666 !important; font-weight: 400 !important; line-height: 1.5 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* ══════════════════════════════════ 9. TIME SLOTS ══════════════════════════════════ */ .card .cardTimeSlot { border: 1.5px solid #e5e5e5 !important; border-radius: 10px !important; padding: 10px 14px !important; background: #fff !important; transition: all 0.2s ease !important; cursor: pointer !important; } .card .cardTimeSlot:hover { border-color: #e85d26 !important; background: #fef7f4 !important; box-shadow: 0 2px 8px rgba(232,93,38,0.12) !important; transform: translateY(-1px) !important; } .card .cardTimeSlotTime { font-family: Inter, sans-serif !important; font-weight: 700 !important; font-size: 0.9rem !important; color: #1a1a2e !important; } /* ── Hide "X/X available" when slot is fully open (no urgency) ── */ .card .cardTimeSlotSpaces { font-family: Inter, sans-serif !important; font-size: 0.68rem !important; color: #c0c0c0 !important; font-weight: 500 !important; } /* ── Partially sold time slots — urgency styling ── */ .card .cardTimeSlot.cardTimeSlotPartiallyAvailable { border-color: #e8a070 !important; background: #fff8f3 !important; } .card .cardTimeSlot.cardTimeSlotPartiallyAvailable:hover { border-color: #e85d26 !important; background: #fff1e8 !important; box-shadow: 0 2px 10px rgba(232,93,38,0.18) !important; } .card .cardTimeSlot.cardTimeSlotPartiallyAvailable .cardTimeSlotSpaces { color: #c65d1a !important; font-weight: 700 !important; } .card .cardTimeSlot.cardTimeSlotPartiallyAvailable .cardTimeSlotTime { color: #c65d1a !important; } /* ══════════════════════════════════ 10. CARD FOOTER / "information" LINK ══════════════════════════════════ */ .card .cardActions { border-top: 1px solid #f0f0f0 !important; background: #fafafa !important; } .card .cardActions a { color: #999 !important; font-size: 0.8rem !important; font-weight: 600 !important; letter-spacing: 0.02em !important; transition: color 0.2s !important; } .card .cardActions a:hover { color: #e85d26 !important; } .card .cardActions i { color: #ccc !important; transition: color 0.2s !important; } .card .cardActions a:hover i { color: #e85d26 !important; } /* ══════════════════════════════════ 11. BUTTONS ══════════════════════════════════ */ .button.buttonRaised, .button.buttonBlock.buttonRaised, a.button.buttonRaised { background: #e85d26 !important; color: #fff !important; font-family: Inter, sans-serif !important; font-weight: 700 !important; border: none !important; border-radius: 10px !important; transition: background 0.2s, box-shadow 0.2s, transform 0.2s !important; box-shadow: 0 2px 8px rgba(232,93,38,0.2) !important; } .button.buttonRaised:hover { background: #d14f1e !important; box-shadow: 0 4px 16px rgba(232,93,38,0.3) !important; transform: translateY(-1px) !important; } .seeMoreDatesButton { background: #e85d26 !important; color: #fff !important; border-radius: 50px !important; font-family: Inter, sans-serif !important; font-weight: 700 !important; font-size: 0.82rem !important; border: none !important; padding: 10px 24px !important; transition: background 0.2s, box-shadow 0.2s !important; box-shadow: 0 2px 8px rgba(232,93,38,0.2) !important; } .seeMoreDatesButton:hover { background: #d14f1e !important; box-shadow: 0 4px 14px rgba(232,93,38,0.3) !important; } .showMoreTimesButton, .showMoreTimesContainer a { color: #e85d26 !important; font-family: Inter, sans-serif !important; font-weight: 600 !important; font-size: 0.82rem !important; } .card .cardContent .cardTicketPurchaseContainer .cardTicketFooterSubtotal h5 { color: #e85d26 !important; font-family: Inter, sans-serif !important; font-weight: 800 !important; } /* ══════════════════════════════════ 12. IMAGE SLIDER CONTROLS ══════════════════════════════════ */ .card .slider .btn-prev, .card .slider .btn-next { background: rgba(255,255,255,0.9) !important; color: #333 !important; border-radius: 50% !important; box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important; border: none !important; padding: 0 !important; width: 32px !important; height: 32px !important; transition: background 0.2s, box-shadow 0.2s !important; } .card .slider .btn-prev:hover, .card .slider .btn-next:hover { background: #fff !important; box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important; transform: none !important; } /* ══════════════════════════════════ 13. GIFT CARDS CARD ══════════════════════════════════ */ section.inventoryGridLayout > :nth-child(13) .card { border: 2px dashed #e85d26 !important; background: linear-gradient(135deg, #fff9f5 0%, #fff 100%) !important; } section.inventoryGridLayout > :nth-child(13) .card:hover { border-color: #d14f1e !important; background: linear-gradient(135deg, #fff5ee 0%, #fff 100%) !important; } section.inventoryGridLayout > :nth-child(13) .card h3 { color: #e85d26 !important; font-weight: 800 !important; } section.inventoryGridLayout > :nth-child(13) .card .button.buttonRaised { border-radius: 50px !important; padding: 12px 32px !important; font-size: 0.9rem !important; letter-spacing: 0.03em !important; } /* ══════════════════════════════════ 14. ITEM DETAIL PAGE ══════════════════════════════════ */ .inventoryInformationMediaContainer img { border-radius: 16px !important; object-fit: cover !important; } .inventoryItemInformation h3 { font-family: Inter, sans-serif !important; font-size: 1.6rem !important; font-weight: 800 !important; color: #1a1a2e !important; margin-bottom: 10px !important; } .inventoryItemMetaList { list-style: none !important; padding: 0 !important; display: flex !important; gap: 16px !important; flex-wrap: wrap !important; } .inventoryItemMetaList li { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-family: Inter, sans-serif !important; font-size: 0.85rem !important; color: #555 !important; font-weight: 500 !important; background: #f5f5f8 !important; padding: 6px 14px !important; border-radius: 50px !important; } .inventoryItemMetaList .icon-stopwatch, .inventoryItemMetaList .icon-mappin { color: #e85d26 !important; } .inventoryItemDescription, .inventoryItemDescription p { font-family: Inter, sans-serif !important; font-size: 0.92rem !important; color: #555 !important; line-height: 1.65 !important; } nav.inventoryItemTabsNavigation ul li a { font-family: Inter, sans-serif !important; font-weight: 600 !important; color: #888 !important; font-size: 0.88rem !important; transition: color 0.2s !important; } nav.inventoryItemTabsNavigation ul li a:hover, nav.inventoryItemTabsNavigation ul li.active a { color: #e85d26 !important; } .inventoryItemTabContent { font-family: Inter, sans-serif !important; font-size: 0.88rem !important; color: #555 !important; line-height: 1.65 !important; } /* ══════════════════════════════════ 15. BOOKING SIDEBAR ══════════════════════════════════ */ .bookingAsideWrapper { background: #fff !important; border-radius: 16px !important; box-shadow: 0 2px 20px rgba(0,0,0,0.06) !important; overflow: hidden !important; border: 1px solid rgba(0,0,0,0.06) !important; } .bookingAsideHeading { background: #0d0d1a !important; color: #fff !important; font-family: Inter, sans-serif !important; font-weight: 700 !important; padding: 16px 20px !important; } .bookingAsideWrapper input, .bookingAsideWrapper select { font-family: Inter, sans-serif !important; border-radius: 10px !important; border: 1px solid #e5e7eb !important; transition: border-color 0.2s, box-shadow 0.2s !important; } .bookingAsideWrapper input:focus, .bookingAsideWrapper select:focus { border-color: #e85d26 !important; outline: none !important; box-shadow: 0 0 0 3px rgba(232,93,38,0.12) !important; } /* ══════════════════════════════════ 16. BASKET / CART ══════════════════════════════════ */ .basketDropdown { background: #fff !important; border-radius: 14px !important; box-shadow: 0 8px 40px rgba(0,0,0,0.14) !important; border: 1px solid rgba(0,0,0,0.06) !important; font-family: Inter, sans-serif !important; } /* ══════════════════════════════════ 17. DATE PICKER ══════════════════════════════════ */ .mydp { font-family: Inter, sans-serif !important; border-radius: 12px !important; border: 1px solid #e5e7eb !important; box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important; } .mydp .btnpicker, .mydp .btnclear { color: #e85d26 !important; } .mydp .selectedday, .mydp .daycell.selectedday { background: #e85d26 !important; color: #fff !important; border-radius: 50% !important; } .mydp .daycell:hover { background: #fef7f4 !important; border-radius: 50% !important; } /* ══════════════════════════════════ 18. FORMS / CHECKOUT ══════════════════════════════════ */ .checkbox, .checkboxContainer { font-family: Inter, sans-serif !important; } .checkbox input:checked + label::before, input[type="checkbox"]:checked { background-color: #e85d26 !important; border-color: #e85d26 !important; } /* Form inputs on checkout */ input.formField, input[type="text"], input[type="email"], input[type="tel"], select { border-radius: 10px !important; border: 1px solid #e0e0e0 !important; padding: 12px 16px !important; font-size: 0.9rem !important; transition: border-color 0.2s, box-shadow 0.2s !important; } input.formField:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus { border-color: #e85d26 !important; box-shadow: 0 0 0 3px rgba(232,93,38,0.1) !important; outline: none !important; } /* ══════════════════════════════════ 19. FOOTER ══════════════════════════════════ */ footer { background: #0d0d1a !important; border-top: none !important; padding: 24px 16px !important; } footer, [class*="footer"] { font-family: Inter, sans-serif !important; } .footerMenu a { color: #888 !important; font-size: 0.82rem !important; transition: color 0.2s !important; } .footerMenu a:hover { color: #fff !important; } .cardPaymentLogos img { opacity: 0.4 !important; transition: opacity 0.2s !important; } .cardPaymentLogos img:hover { opacity: 1 !important; } /* "Powered by Resova" — tone it down */ footer a[href*="resova"] { opacity: 0.4 !important; transition: opacity 0.2s !important; } footer a[href*="resova"]:hover { opacity: 0.7 !important; } /* ══════════════════════════════════ 20. LOADING / SPINNER ══════════════════════════════════ */ .spinner, .loading-spinner { color: #e85d26 !important; } /* ══════════════════════════════════ 21. SCROLLBAR (webkit) ══════════════════════════════════ */ ::-webkit-scrollbar { width: 8px !important; } ::-webkit-scrollbar-track { background: #f5f5f8 !important; } ::-webkit-scrollbar-thumb { background: #ccc !important; border-radius: 4px !important; } ::-webkit-scrollbar-thumb:hover { background: #aaa !important; } /* ══════════════════════════════════ 22. RESPONSIVE ══════════════════════════════════ */ @media (max-width: 768px) { .card { border-radius: 14px !important; } .card .cardContent { padding: 16px 18px !important; } .card .cardContent h3 { font-size: 0.98rem !important; } .inventoryGridLayout .cardContainer .card .cardContent h3::before { font-size: 0.58rem !important; padding: 2px 8px !important; } /* Bigger touch targets for time slots on mobile */ .card .cardTimeSlot { padding: 14px 16px !important; min-height: 52px !important; } .card .cardTimeSlotTime { font-size: 0.95rem !important; } /* Filter bar — horizontal scroll on mobile */ section.filtersMenu { padding: 10px 12px !important; } section.filtersMenu a.button { font-size: 0.78rem !important; padding: 7px 14px !important; } /* Progress bar — compact on mobile */ section.bookingSteps .bookingStepLabel { font-size: 0.65rem !important; } } /* ═══════════════════════════════════════════════════════════════ NOTES FOR DEVELOPER 1. Paste this entire CSS into Resova: Settings → Booking Site Settings → Advanced Customization (CSS) 2. If Resova strips @import for Google Fonts, add via Settings → Booking Site Settings → Custom Code (Head): 3. Badge labels use h3::before pseudo-elements to display badge + difficulty BELOW the photo and ABOVE the room name. The default "60 minutes" meta badge is hidden since every room is 60 minutes. 4. Resova injects .clearfix divs after every 3 cards: nth-child(1) = Jurassic Escape nth-child(2) = The Clocktower nth-child(3) = Quiz Boxing nth-child(4) = .clearfix (skip) nth-child(5) = The Agency nth-child(6) = The Submarine nth-child(7) = The Dig nth-child(8) = .clearfix (skip) nth-child(9) = The Home nth-child(10) = The Office nth-child(11) = Outbreak nth-child(12) = .clearfix (skip) nth-child(13) = Gift Cards If room order changes in Resova admin, update these numbers. 5. v4 CHANGES (from v3): - Page background: #f5f5f8 (light gray) so white cards pop - Filter bar: white background, pill-shaped buttons, hover states - Progress bar: styled with uppercase labels, branded colors - "BACK TO HOME": styled as a pill button in header - Cart button: circular with shadow, scale on hover - Card borders: subtle border + stronger hover glow - Room names: bolder (800 weight) - Descriptions: 2-line clamp to prevent overflow/duplication - Time slots: bigger border-radius, micro-lift on hover - "information" links: better styled footer with background - Gift Cards: gradient background, pill-shaped CTA - Detail page meta: pill-chip layout for duration/location - Date picker: rounded day cells, shadow - Checkout inputs: bigger, rounded, branded focus states - Mobile: bigger time slot touch targets (52px min-height) - Custom scrollbar (webkit) - Toned-down "Powered by Resova" branding ═══════════════════════════════════════════════════════════════ */;