/* ---------------------------------------------------------------- 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: #eb612a; } 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: #eb612a; } @media (max-width: 959px) { header.bookingSiteHeader, header.bookingSiteHeader.transparentHeader { background: #000000; } } /* ---------------------------------------------------------------- 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: #eb612a; } /*--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: #eb612a!important; } /*--DATEPICKER STYLES--*/ @media (max-width: 959px) { section.resovaCalendarList table td .resovaCalendarListItemTime { background: #eb612a; } } .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: #eb612a; } 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: #000000; } header.bookingSiteHeader.transparentHeader { background: transparent; } @media (max-width: 959px) { header.bookingSiteHeader, header.bookingSiteHeader.transparentHeader { background: #000000; } } /* ---------------------------------------------------------------- CALENDAR COLOURS -----------------------------------------------------------------*/ .closedTimeSlot, .button.closedTimeSlot { color: #fd6c6c; background: #fec4c5; } .availableTimeSlot, .button.availableTimeSlot { color: #ffffff; background: #22b35c; } .partiallyBookedTimeSlot, .button.partiallyBookedTimeSlot { color: #fd6c6c; background: #2318a1; } .blockedTimeSlot, .button.blockedTimeSlot { color: #fd6c6c; background: #e81219; } .soldOutimeSlot, .button.soldOutimeSlot { color: #fd6c6c; background: #eb121a; } .callToBookTimeSlot, .button.callToBookTimeSlot { color: #ffffff; background: #ed344e; } /* ---------------------------------------------------------------- CUSTOMER -----------------------------------------------------------------*/ /* ============================================================ ESCAPE THE ROOM - DC Midtown Custom Resova CSS Target: escapetheroomdc-midtown.resova.us DOM Order (verified from live Resova - May 07 2026): nth-child(1): Quiz Boxing (60 min) - CARD nth-child(2): The Agency (60 min) - CARD nth-child(3): Outbreak (60 min) - CARD nth-child(4): CLEARFIX nth-child(5): Western Bank Heist (60 min) - CARD nth-child(6): The Submarine (60 min) - CARD nth-child(7): Gift voucher - CARD ============================================================ */ /* ============================================================ 1. TYPOGRAPHY ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); body, .card, .cardTitle, .cardDescription, .btn, input, select, textarea, label, p, h1, h2, h3, h4, h5, h6, span, a, li, div { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; } /* ============================================================ 2. HEADER ============================================================ */ .bookingStepLabel, .step::after { background-color: #f5f5f8 !important; } nav.mainMenu ul li a { font-size: 14px } .icon-stopwatch, nav.inventoryItemTabsNavigation ul li a:hover, nav.inventoryItemTabsNavigation ul li.active a { color: #e85d26 !important; } .icon-stopwatch, .ng-tns-c0-0, { color: #e85d26 !important; font-weight: 500 !important; font-size: 0.85rem !important; } .logo img, header img, .header img { max-height: 45px !important; } .slider .btn { z-index: 3 !important; } /* realign container to remove whitespace */ app-container { padding-top: 88px !important; } /* ============================================================ 3. FOOTER ============================================================ */ footer, .footer { background-color: #0d0d1a !important; background: #0d0d1a !important; color: #ffffff !important; } footer *, .footer * { color: rgba(255,255,255,0.8) !important; } footer section.footerInner:before { border-top-width: 0 !important; } footer a:hover, .footer a:hover { color: #e85d26 !important; } /* ============================================================ 4. MOBILE MENU ============================================================ */ .mobile-menu, .hamburger, .menu-toggle, [class*="burger"] { color: #ffffff !important; } .mobile-menu-overlay, .mobile-nav, .side-menu { background-color: #0d0d1a !important; } /* ============================================================ 5. BOOKING STEPS INDICATOR ============================================================ */ .bookingSteps { padding: 15px 0 !important; } .bookingSteps .step { color: rgba(255,255,255,0.5) !important; } .bookingSteps .step.active, .bookingSteps .step.completed { color: #ffffff !important; } .bookingSteps .step.active::after, .bookingSteps .step.completed::after { background-color: #e85d26 !important; } /* ============================================================ 6. FILTERS BAR ============================================================ */ .filterBar, .filters { background: #ffffff !important; border-bottom: 1px solid #e5e5e5 !important; padding: 12px 20px !important; } /* Reset Resova's own filter menu elements so they don't get white backgrounds / borders / padding from the above */ .filtersMenu, .filtersMenuLeft, .filtersMenuRight, .filtersMenuDateSelect { background: transparent !important; border-bottom: none !important; padding: initial !important; } .filterBar select, .filters select, .filterBar input, .filters input { border: 1px solid #ddd !important; border-radius: 8px !important; padding: 8px 12px !important; font-size: 0.9rem !important; background: #f9f9f9 !important; } /* ============================================================ 7. PAGE BACKGROUND ============================================================ */ .main-content, .content-wrapper, main, [class*="content"] { background-color: #f5f5f8 !important; } /* ============================================================ 8. ROOM CARDS - structure & hover ============================================================ */ .card { border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important; border: none !important; background: #ffffff !important; } .card:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important; } .card .cardImage, .card .cardImg { border-radius: 14px 14px 0 0 !important; overflow: hidden !important; } .card .cardImage img, .card .cardImg img { transition: transform 0.4s ease !important; } .card:hover .cardImage img, .card:hover .cardImg img { transform: scale(1.05) !important; } .card .cardContent { padding: 16px !important; } .card .cardTitle { font-weight: 700 !important; font-size: 1.15rem !important; color: #1a1a2e !important; margin-bottom: 6px !important; } /* ============================================================ 8A. ROOM BADGES - hide defaults, inject custom ============================================================ */ /* Future-proof: Hide bottom meta overlay (address bar on image) Some Resova instances render TWO .cardMetaWrapper per card - top (duration) and bottom (address). Hide the bottom one so badge injection only appears once. */ .cardMetaWrapperBottom { display: none !important; } /* Badge overlay stays at TOP-LEFT (default Resova position). Albuquerque room artwork has titles at bottom, so top placement works. */ /* Hide original meta text (e.g. "60 MINUTES") */ .card .cardMeta { font-size: 0 !important; color: transparent !important; line-height: 1.4 !important; margin-bottom: 8px !important; display: block !important; } .card .cardMeta i { display: none !important; } .card .cardMeta strong { font-size: 0 !important; } /* Base badge style via ::after */ .card .cardMeta::after { font-size: 0.68rem !important; color: #fff !important; font-weight: 700 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; background: linear-gradient(135deg, #e85d26, #ff7b47) !important; padding: 4px 10px !important; border-radius: 20px !important; display: inline-block !important; line-height: normal !important; vertical-align: middle !important; } /* - nth-child(1): Quiz Boxing - */ section.inventoryGridLayout .cardContainer:nth-child(1) .cardMeta::after { content: '\1F195 New Experience \00B7 Competitive Trivia' !important; } /* - nth-child(2): The Agency - */ section.inventoryGridLayout .cardContainer:nth-child(2) .cardMeta::after { content: '\1F496 Fan Favorite \00B7 Difficulty 4/5' !important; } /* - nth-child(3): Outbreak - */ section.inventoryGridLayout .cardContainer:nth-child(3) .cardMeta::after { content: '\1F6A8 Most Intense \00B7 Difficulty 4/5' !important; } /* - nth-child(4): CLEARFIX - no badge needed */ /* - nth-child(5): Western Bank Heist - */ section.inventoryGridLayout .cardContainer:nth-child(5) .cardMeta::after { content: '\1F46A Great for Families \00B7 Difficulty 3/5' !important; } /* - nth-child(6): The Submarine - */ section.inventoryGridLayout .cardContainer:nth-child(6) .cardMeta::after { content: '\1F30A Immersive \00B7 Difficulty 4/5' !important; } /* ============================================================ 8C. VIBES ============================================================ */ .cardDescription.cardDescriptionFullWidth::after { display: inline-block; border-radius: 10px; margin-top: 4px; padding: 3px; font-weight: 700; font-family: Inter, -apple-system, sans-serif; font-size: 11px; letter-spacing: 0.5px line-height: 18px content: "Party Mode"; color: #9d174d; background-color: #fce7f3; } .cardDescription.cardDescriptionFullWidth::after { } /* ============================================================ 8B. ROOM DESCRIPTIONS - hide defaults, inject custom ============================================================ */ /* Hide original description text */ .card .cardContent .cardDescription p { font-size: 0 !important; color: transparent !important; position: relative !important; min-height: 2.5em !important; } /* Base description style */ .card .cardContent .cardDescription p::after { font-size: 0.88rem !important; color: #555 !important; line-height: 1.5 !important; display: block !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: normal !important; background: none !important; padding: 0 !important; } /* - nth-child(1): Quiz Boxing - */ section.inventoryGridLayout .cardContainer:nth-child(1) .cardDescription p::after { content: 'This isn\0027t an escape room — it\0027s a head-to-head trivia showdown in a custom arena. Teams compete across rounds of TV, music, sports, history, and more. Choose themed rounds like Best of the 80\0027s or even Taylor Swift. The crowd goes wild.' !important; } /* - nth-child(2): The Agency - */ section.inventoryGridLayout .cardContainer:nth-child(2) .cardDescription p::after { content: 'Also available at our I Street location. You\0027ve been recruited for a classified mission — mix up a martini, crack a safe, and complete the assignment before time runs out. The spy thriller everyone asks about.' !important; margin-bottom: 21px; } /* - nth-child(3): Outbreak - */ section.inventoryGridLayout .cardContainer:nth-child(3) .cardDescription p::after { content: 'A rogue scientist is plotting to contaminate the US water supply with a deadly virus. Your team has 60 minutes to infiltrate the lab, find the antidote, and stop the outbreak before it\0027s too late. This one keeps people up at night — in a good way.' !important; } /* - nth-child(4): CLEARFIX - no description needed */ /* - nth-child(5): Western Bank Heist - */ section.inventoryGridLayout .cardContainer:nth-child(5) .cardDescription p::after { content: 'Saddle up. You and your band of outlaws have 60 minutes to rob the bank, grab the loot, and get out before the sheriff catches up. It\0027s fun, it\0027s approachable, and kids go absolutely wild for it.' !important; margin-bottom: 21px; } /* - nth-child(6): The Submarine - */ section.inventoryGridLayout .cardContainer:nth-child(6) .cardDescription p::after { content: 'You and your fellow crew are trapped at the bottom of the ocean. The captain\0027s lost it, oxygen is running low, and the only way out is up. It\0027s claustrophobic, it\0027s intense, and it\0027s an absolute blast if you can keep your cool under pressure.' !important; } @media (max-width: 767px) or (min-width: 1025px) { /* - nth-child(7): Gift voucher - restore original text */ section.inventoryGridLayout .cardContainer:nth-child(7) .cardDescription p { font-size: 0.88rem !important; color: #555 !important; } section.inventoryGridLayout .cardContainer:nth-child(7) .cardDescription p::after { display: none !important; } /* - nth-child(7): Gift voucher - restore original text */ section.inventoryGridLayout .cardContainer:nth-child(7) .cardMeta { font-size: 0.85rem !important; color: #666 !important; } section.inventoryGridLayout .cardContainer:nth-child(7) .cardMeta strong { font-size: 0.85rem !important; color: #666 !important; } section.inventoryGridLayout .cardContainer:nth-child(7) .cardMeta::after { display: none !important; } } @media (min-width: 768px) and (max-width: 1024px) { /* - nth-child(1): Quiz Boxing - */ section.inventoryGridLayout .cardContainer:nth-child(1) .cardMeta::after { content: '\1F195 New Experience \00B7 Competitive Trivia' !important; } /* - nth-child(2): The Agency - */ section.inventoryGridLayout .cardContainer:nth-child(2) .cardMeta::after { content: '\1F496 Fan Favorite \00B7 Difficulty 4/5' !important; } /* - nth-child(3): CLEARFIX - no badge needed */ /* - nth-child(4): Outbreak - */ section.inventoryGridLayout .cardContainer:nth-child(4) .cardMeta::after { content: '\1F6A8 Most Intense \00B7 Difficulty 4/5' !important; } /* - nth-child(5): Western Bank Heist - */ section.inventoryGridLayout .cardContainer:nth-child(5) .cardMeta::after { content: '1F46A Great for Families \00B7 Difficulty 3/5' !important; } /* - nth-child(6): CLEARFIX - no badge needed */ /* - nth-child(7): The Submarine - */ section.inventoryGridLayout .cardContainer:nth-child(7) .cardMeta::after { content: '\1F30A Immersive \00B7 Difficulty 4/5' !important; } /* - nth-child(1): Quiz Boxing - */ section.inventoryGridLayout .cardContainer:nth-child(1) .cardDescription p::after { content: 'This isn\0027t an escape room — it\0027s a head-to-head trivia showdown in a custom arena. Teams compete across rounds of TV, music, sports, history, and more. Choose themed rounds like Best of the 80\0027s or even Taylor Swift. The crowd goes wild.' !important; } /* - nth-child(2): The Agency - */ section.inventoryGridLayout .cardContainer:nth-child(2) .cardDescription p::after { content: 'Also available at our I Street location. You\0027ve been recruited for a classified mission — mix up a martini, crack a safe, and complete the assignment before time runs out. The spy thriller everyone asks about.' !important; margin-bottom: 21px; } /* - nth-child(3): CLEARFIX - no description needed */ /* - nth-child(4): Outbreak - */ section.inventoryGridLayout .cardContainer:nth-child(4) .cardDescription p::after { content: 'A rogue scientist is plotting to contaminate the US water supply with a deadly virus. Your team has 60 minutes to infiltrate the lab, find the antidote, and stop the outbreak before it\0027s too late. This one keeps people up at night — in a good way.' !important; } /* - nth-child(5): Western Bank Heist - */ section.inventoryGridLayout .cardContainer:nth-child(5) .cardDescription p::after { content: 'Saddle up. You and your band of outlaws have 60 minutes to rob the bank, grab the loot, and get out before the sheriff catches up. It\0027s fun, it\0027s approachable, and kids go absolutely wild for it.' !important; margin-bottom: 21px; } /* - nth-child(6): CLEARFIX - no description needed */ /* - nth-child(7): The Submarine - */ section.inventoryGridLayout .cardContainer:nth-child(7) .cardDescription p::after { content: 'You and your fellow crew are trapped at the bottom of the ocean. The captain\0027s lost it, oxygen is running low, and the only way out is up. It\0027s claustrophobic, it\0027s intense, and it\0027s an absolute blast if you can keep your cool under pressure.' !important; } /* - nth-child(8): Gift voucher - restore original text */ section.inventoryGridLayout .cardContainer:nth-child(8) .cardDescription p { font-size: 0.88rem !important; color: #555 !important; } section.inventoryGridLayout .cardContainer:nth-child(8) .cardDescription p::after { display: none !important; } } /* ============================================================ 9. TIME SLOTS ============================================================ */ .timeSlot, .time-slot, [class*="timeSlot"], [class*="time-slot"] { border: 2px solid #e0e0e0 !important; border-radius: 10px !important; padding: 10px 16px !important; margin: 4px !important; transition: all 0.2s ease !important; background: #fff !important; cursor: pointer !important; } .timeSlot:hover, .time-slot:hover { border-color: #e85d26 !important; background: #fff5f0 !important; } .timeSlot.selected, .time-slot.selected, .timeSlot.active, .time-slot.active { border-color: #e85d26 !important; background: #e85d26 !important; color: #fff !important; } /* ============================================================ 10. BUTTONS ============================================================ */ .btn-primary, .btn-main, .btn-book, [class*="btn-primary"], [class*="btnPrimary"], button[type="submit"], .btn-action { background: #e85d26 !important; background-color: #e85d26 !important; border: none !important; border-radius: 10px !important; padding: 12px 28px !important; font-weight: 700 !important; font-size: 1rem !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; transition: all 0.25s ease !important; color: #fff !important; } .btn-primary:hover, .btn-main:hover, .btn-book:hover, button[type="submit"]:hover { background: #d04f1c !important; background-color: #d04f1c !important; transform: translateY(-1px) !important; box-shadow: 0 4px 15px rgba(232, 93, 38, 0.3) !important; } .btn-secondary, .btn-outline { border: 2px solid #e85d26 !important; color: #e85d26 !important; background: transparent !important; border-radius: 10px !important; padding: 10px 24px !important; font-weight: 600 !important; } .btn-secondary:hover, .btn-outline:hover { background: #e85d26 !important; color: #fff !important; } /* ============================================================ 12. DROPDOWNS & OVERLAYS ============================================================ */ .dropdown-menu, .dropdown, [class*="dropdown"] { border-radius: 10px !important; box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important; border: 1px solid #eee !important; overflow: hidden !important; } .modal, .overlay, [class*="modal"], [class*="overlay"] { backdrop-filter: blur(4px) !important; } .modal-content, [class*="modalContent"] { border-radius: 16px !important; box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important; } /* ============================================================ 13. CHECKOUT & FORMS ============================================================ */ .articleBox input.ng-untouched, .articleBox input.ng-touched, textarea, select, #ccnumfield { border: 1px solid #ddd !important; border-radius: 10px !important; padding: 12px 16px !important; font-size: 0.95rem !important; transition: border-color 0.2s ease !important; } .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; transition: background 0.2s, box-shadow 0.2s, transform 0.2s !important; box-shadow: 0 2px 8px rgba(232, 93, 38, 0.2) !important; } nav.inventoryItemTabsNavigation ul li a { font-size: 14px; font-weight: 700; } .showMoreTimesContainer .buttonRaised { padding: 0 20px !important; } input:focus, textarea:focus, select:focus { border-color: #e85d26 !important; outline: none !important; box-shadow: 0 0 0 3px rgba(232, 93, 38, 0.1) !important; } label { font-weight: 600 !important; font-size: 0.9rem !important; color: #333 !important; margin-bottom: 4px !important; } .checkout-summary, .order-summary, [class*="summary"] { background: #ffffff !important; border-radius: 14px !important; padding: 20px !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; } .price, .total, [class*="price"], [class*="total"] { font-weight: 700 !important; color: #1a1a2e !important; } /* ============================================================ 14. MOBILE RESPONSIVE ============================================================ */ @media (max-width: 768px) { .card { border-radius: 12px !important; margin-bottom: 16px !important; } .card .cardContent { padding: 14px !important; } .card .cardTitle { font-size: 1.05rem !important; } .card .cardMeta::after { font-size: 0.62rem !important; } .btn-primary, .btn-main, .btn-book, button[type="submit"] { padding: 12px 20px !important; font-size: 0.95rem !important; width: 100% !important; } .timeSlot, .time-slot { padding: 8px 12px !important; font-size: 0.85rem !important; } .filterBar, .filters { padding: 10px 12px !important; } .checkout-summary, .order-summary { padding: 16px !important; } } @media (max-width: 480px) { .card .cardMeta::after { font-size: 0.58rem !important; padding: 3px 8px !important; } .card .cardContent .cardDescription p::after { font-size: 0.82rem !important; } };