/* Hotel Alacer theme v20261029zl — generated 2026-10-29 22:17 by retheme.py. Do not hand-edit: change the brand JSON / templates and regenerate. */ /* ===== Part 1: recolour of _TicketThemeDefault.css + UserTicket.css (generated) ===== */ #alacerTicketSurroundPageBody { background-color: #ffffff; } .alacer-bootstrap .btn, .alacer-bootstrap .btn .btn-default, .alacer-bootstrap .btn .btn-primary, .alacer-bootstrap .basketCheckOutMenu { background-color: #a68a5b; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } .alacer-bootstrap .btn:hover, .alacer-bootstrap .btn .btn-default:hover, .alacer-bootstrap .btn .btn-primary:hover, .alacer-bootstrap .basketCheckOutMenu:hover { background-color: #2b2925; color: #2b2925; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } .alacer-bootstrap input[type='email'], .alacer-bootstrap input[type='password'], .alacer-bootstrap input[type='text'], .alacer-bootstrap select { background-color: #f4f1ec; border-color: #2b2925; } .alacer-bootstrap .controlIndicator { background-color: #ffffff; } .alacer-bootstrap .control:hover input ~ .controlIndicator, .alacer-bootstrap .control input:focus ~ .controlIndicator { background-color: #ffffff; } .alacer-bootstrap .control input:checked ~ .controlIndicator { background-color: #f4f1ec; } .alacer-bootstrap .control:hover input:not([disabled]):checked ~ .controlIndicator, .alacer-bootstrap .control input:checked:focus ~ .controlIndicator { background-color: #f4f1ec; } .alacer-bootstrap .control input:disabled ~ .controlIndicator { background-color: #ffffff; } .alacer-bootstrap .controlCheckbox .controlIndicator:after { border-color: #2b2925; } .card-shadow { box-shadow: none; } .page1TopBar { background-color: #f8f5f0; } .basketWrapper .basketItemsWrapper .basketCheckOutMenu { background-color: #a68a5b !important; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 400 !important; } .basketWrapper .basketItemsWrapper .basketCheckOutMenu:hover { background-color: #2b2925 !important; color: #2b2925 !important; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 400 !important; } .alacer-bootstrap .eventCardsGenerated .modal-content { background-color: #f8f5f0; } home .SearchBoxContainer { background-color: #efeae2; border-color: #efeae2; } home .SearchBoxContainer input[type='text'] { background-color: #efeae2; } home .SearchBoxContainer i { color: #a68a5b; } home h3.TicketCategoriesListHeader { color: #a68a5b; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } home #TicketCategoriesList { background-color: #f8f5f0; } home a.TicketCategoriesListItem, home a.TicketCategoriesListItem:hover { color: #2b2925; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } home .TicketCategoryCard { background-color: #f8f5f0; } home .TicketCategoryCardTitle { background-color: #ffffff; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #2b2925; font-weight: 400; } home .TicketCategoryCard span { background-color: #f8f5f0; color: #2b2925; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } tickettype .navbarContainer { background-color: #f8f5f0; border-color: #2b2925; } tickettype .navbar { background-color: #f4f1ec; } tickettype .navbar .searchBoxWrapper { background-color: #efeae2; } tickettype .navbar .searchBoxWrapper input[type='text'] { background-color: #efeae2; } tickettype .navbar .searchBoxWrapper i { color: #a68a5b; } tickettype .navbar .homeIconDiv { border-right-color: #2b2925; } tickettype .navbar .searchDiv { border-right-color: #2b2925; } tickettype .navbar #sortingContainer { border-right-color: #2b2925; } tickettype .navbar .iconHome { color: #a68a5b; } tickettype .navbar .page2SortIconTriangleBottom { color: #a68a5b; } tickettype .navbar .page2SortIconTriangleTop { color: #a68a5b; } tickettype .navbar .iconShoppingCart { color: #a68a5b; } tickettype a.readMoreLink { color: #a68a5b; } tickettype a.readMoreLink:hover { color: #a68a5b; } tickettype .refineInputsContainer { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #2b2925; } tickettype h3.eventsNameHeader { color: #a68a5b; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } tickettype p.eventsNameDescription, tickettype p.eventsNameDescriptionSliced { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #2b2925; font-weight: 400; } tickettype .navbar { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #2b2925; } tickettype span#pricesFromLabel { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #2b2925; font-weight: 400; } tickettype span#pricesFromValue { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #2b2925; } tickettype div.tooltip div.tooltip-inner { background-color: #ffffff; color: #2b2925; } tickettype div.slider-horizontal { background-color: #f8f5f0; } tickettype div.slider-track-low, tickettype div.slider-track-high { border-color: #2b2925; background-color: #efeae2; } tickettype div.slider-selection { border-top-color: #2b2925; border-bottom-color: #2b2925; } tickettype div.slider-track { background-color: #f8f5f0; } tickettype .tooltip-arrow { border-top-color: #a68a5b !important; border-bottom-color: #a68a5b !important; } tickettype #page2SearchField { background-color: #efeae2; } tickettype .eventCardsGenerated { background-color: #f8f5f0; border-color: #2b2925; } tickettype ticketcard > div { background-color: #f8f5f0; } tickettype button.page2DetailsDialogBtn { background-color: #a68a5b; } tickettype button.page2DetailsDialogBtn:hover { background-color: #2b2925; color: #2b2925; } tickettype label.readMoreLink { border-top-color: #2b2925; color: #a68a5b; } ticketdetailsdialog button.ticketOptionsAddToBasket { background-color: #a68a5b; } ticketdetailsdialog button.ticketOptionsAddToBasket:hover { background-color: #2b2925; color: #2b2925; } ticketdetailsdialog button.ticketDetailsDialogClose { background-color: #a68a5b; } ticketdetailsdialog button.ticketDetailsDialogClose:hover { background-color: #2b2925; color: #2b2925; } ticketdetailsdialog .eventNameHeader { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #a68a5b; } ticketdetailsdialog .ticketOverviewHeader { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #a68a5b; } ticketdetailsdialog .ticketOverviewInfo { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #2b2925; } ticketdetailsdialog .eventDatesHeader { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #a68a5b; } ticketdetailsdialog .eventDate { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #2b2925; } ticketdetailsdialog .eventTermsTitle { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #a68a5b; } ticketdetailsdialog .eventTermsInfo { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #2b2925; } ticketdetailsdialog .ticketsAvailable { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #2b2925; } ticketdetailsdialog div.displayFlex { border-bottom-color: #2b2925 !important; } ticketdetailsdialog .ticketQuantityInput input[type=number] { border-color: #2b2925 !important; } basketdropdown .modal-body { color: #2b2925; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } basketdropdown .modal-body a { color: #2b2925; } basketdropdown .modal-body a:visited { color: #2b2925; } basketdropdown .modal-body a:hover { color: #2b2925; } basketdropdown .modal-footer { background-color: #f4f1ec; color: #2b2925; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } basketdropdown .modal-footer button.btn { background-color: #a68a5b; } basketdropdown .modal-footer button.btn:hover { background-color: #2b2925; color: #2b2925; } basketdropdown label.title { color: #2b2925; } basket .pageHeader { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #a68a5b; } basket span.glyphicon { color: #a68a5b; } basket .basketContent { background-color: #f8f5f0; border-color: #2b2925; } basket table tbody td, basket table thead th { border-bottom-color: #2b2925 !important; } basket table thead th { color: #a68a5b; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } basket table tbody td { color: #2b2925; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } basket table tfoot th { color: #a68a5b; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } basket .editQuantityInput { border-color: #2b2925 !important; } basket table.table, basket div.mobTotalCounts { background-color: #f8f5f0; } userDetails your-details div#yourDetails { background-color: #f8f5f0; border-color: #2b2925; } userDetails your-details .pageHeading { color: #a68a5b; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } userDetails section.loginForm { background-color: #f8f5f0; } userDetails .deliveryMethodsTextTransitionButton { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } userDetails .continueShoppingTextTransitionButton { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } ticket-delivery-details .page5Container { background-color: #f8f5f0; border-color: #2b2925; } ticket-delivery-details table thead th { color: #2b2925; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; } ticket-delivery-details table tbody td { color: #2b2925; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } ticket-delivery-details table tfoot th { color: #2b2925; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; } ticket-delivery-details .text-warning { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; } ticket-delivery-details .deleteIcon { color: #2b2925; } paymentpage #PaymentBillingAddressHeading { background-color: #f8f5f0; } paymentpage .billingBgColor { background-color: #f8f5f0; } paymentpage #PaymentBillingAddressHeading { color: #a68a5b; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } paymentpage #PaymentCardDetailHeading { background-color: #f8f5f0; } paymentpage .cardDetailsBgColor { background-color: #f8f5f0; } paymentpage #PaymentCardDetailHeading { color: #a68a5b; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } paymentpage .TotalPriceAmount { color: #2b2925; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } paymentpage button.btn.deskback { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } paymentpage button.btn.deskcheckout { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } paymentpage .modal-header { color: #a68a5b; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } paymentpage .modal-body div.title { color: #a68a5b; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } paymentpage .modal-body div.description { color: #2b2925; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } confirmationpage .pageHeader { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #a68a5b; } confirmationpage .pageContent { background-color: #f8f5f0; border-color: #2b2925; } confirmationpage table thead th { color: #a68a5b; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } confirmationpage table tbody td, confirmationpage table thead th { border-bottom-color: #2b2925 !important; } confirmationpage table tbody td { color: #2b2925; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } confirmationpage table tfoot th { color: #a68a5b; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } confirmationpage .text-thanks { color: #a68a5b; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } breadcrumb #breadcrumbBar { background-color: #f8f5f0; border-color: #2b2925; } breadcrumb a.breadcrumbLink:hover { color: #a68a5b; } breadcrumb a.breadcrumbLink { border-top-color: #2b2925; border-bottom-color: #2b2925; background-color: #f8f5f0; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #a68a5b; font-weight: 400; } breadcrumb a.disabled { background-color: #f8f5f0; font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #f4f1ec; font-weight: 400; } breadcrumb a.breadcrumbLink:visited { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; background-color: #f8f5f0; color: #a68a5b; } breadcrumb a.breadcrumbLink:focus { color: #a68a5b; } breadcrumb a.breadcrumbLink:first-of-type { border-left-color: #2b2925; } breadcrumb a.breadcrumbLink:last-of-type { border-right-color: #2b2925; } breadcrumb i.glyphicon { font-weight: 400; color: #a68a5b; } .basketWrapper .basketItemsWrapper { box-shadow: none; } .basketWrapper .basketItemsWrapper ul.basketItems { background-color: #efeae2; } .basketWrapper .basketItemsWrapper ul.basketItems li { border-bottom-color: #2b2925; } :root { --buttonMainColor: #2b2925; } #page4 .deliveryTitle { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } .loginRegisterLink .loginLink:hover { background-color: #2b2925; } home .TicketCategoryCardTitle { color: #ffffff; } .btn.commonButton { color: #ffffff; } .btn.commonButton:hover { background-color: #2b2925; } .basketWrapper .basketItemsWrapper .basketCheckOutMenu:hover { background-color: #2b2925 !important; } .basketWrapper .basketItemsWrapper .basketCheckOutMenu { color: #ffffff; } .basketWrapper .basketItemsWrapper .basketCheckOutMenu:hover { background-color: #2b2925; } .alacer-bootstrap .btn-default:hover, .alacer-bootstrap .btn-default:focus { background-color: #2b2925; } .alacer-bootstrap input[type='email'], .alacer-bootstrap input[type='password'], .alacer-bootstrap input[type='text'], .alacer-bootstrap select { background-color: #ffffff !important; font-weight: 400; } .SearchBoxContainer { background-color: #ffffff !important; } tickettype .navbar .searchBoxWrapper { background-color: #ffffff !important; } #yourDetails #marketingCheckBoxTick { background-color: #ffffff; border-color: #2b2925; } #yourDetails #marketingCheckBoxInput:checked ~ #marketingCheckBoxTick, #yourDetails #marketingCheckBoxInputMob:checked ~ #marketingCheckBoxTick { background-color: #ffffff; } #paymentBillingAddressSurround .control input:checked ~ .sameAsLeadGuestCheckbox, #paymentBillingAddressSurround .sameAsLeadGuestCheckbox { background-color: #ffffff; } .controlIndicator { background-color: #ffffff !important; border-color: #2b2925; } /* ===== Part 2: brand layer ===== */ /* ===================================================================== Hotel Alacer — engine theme brand layer (generated by retheme.py) Palette: page #f8f5f0, ink #2b2925, dark #2b2925, accent #a68a5b, sand #e6ddcf, linen #f4f1ec, paper #ffffff. Font: Jost Loaded last (from the wrapper), after any shared frame stylesheet. ===================================================================== */ :root { --brand-cream: #f8f5f0; --brand-ink: #2b2925; --brand-corten: #2b2925; --brand-bronze: #a68a5b; --brand-sand: #e6ddcf; --brand-linen: #f4f1ec; --brand-paper: #ffffff; --brand-muted: #5c5750; --brand-line: rgba(43, 41, 37, 0.12); --brand-line-strong: rgba(43, 41, 37, 0.25); --brand-font: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; --brand-texture: none; --brand-heading-font: "Cormorant Garamond", Georgia, "Times New Roman", serif; /* variables consumed by UserVoucher.css */ --buttonBackgroundColor: #2b2925; --buttonTextColor: #f8f5f0; --buttonBackgroundColorHover: #2b2925; --buttonTextColorHover: #f8f5f0; --buttonBorder: 1px solid #2b2925; --buttonBorderHover: 1px solid #2b2925; --checkboxBackgroundColor: #ffffff; --checkboxTickColor: #2b2925; } /* ---------- Page ---------- */ html body#ticketHomepageBody { background: var(--brand-cream) !important; color: var(--brand-ink); font-family: var(--brand-font) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; } #ticketHomepageBody main, #ticketHomepageBody main.uneven { background: transparent !important; padding: 0 0 3rem 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; float: none !important; } /* Global type inside the engine — keep icon fonts intact */ #ticketHomepageBody #engineAreaContainer, #ticketHomepageBody #engineAreaContainer *:not(.fa):not(.glyphicon):not([class*="fa-"]):not([class*="glyphicon-"]):not(i), #ticketHomepageBody #headerBar, #ticketHomepageBody #headerBar *:not(.fa):not(.glyphicon):not([class*="fa-"]):not([class*="glyphicon-"]):not(i), #ticketHomepageBody .modal, #ticketHomepageBody .modal *:not(.fa):not(.glyphicon):not([class*="fa-"]):not([class*="glyphicon-"]):not(i), #ticketHomepageBody .bootstrap-dialog *:not(.fa):not(.glyphicon):not([class*="fa-"]):not([class*="glyphicon-"]):not(i) { font-family: var(--brand-font) !important; } #ticketHomepageBody #engineAreaContainer h1, #ticketHomepageBody #engineAreaContainer h2, #ticketHomepageBody #engineAreaContainer h3, #ticketHomepageBody #engineAreaContainer h4, #ticketHomepageBody .modal h1, #ticketHomepageBody .modal h2, #ticketHomepageBody .modal h3, #ticketHomepageBody .modal h4 { font-weight: 500 !important; letter-spacing: -0.02em; color: #2b2925; } #ticketHomepageBody #engineAreaContainer a:not(.btn):not([class*="Btn"]):not([class*="btn"]):not([class*="Button"]) { color: var(--brand-bronze); } #ticketHomepageBody #engineAreaContainer a:not(.btn):not([class*="Btn"]):not([class*="btn"]):not([class*="Button"]):hover { color: var(--brand-corten); } /* ---------- Header (replaces old site nav) ---------- */ #ticketHomepageBody .brand-header { background: #2b2925 var(--brand-texture) repeat; border-bottom: 0; color: #f8f5f0; margin: 0 0 2.5rem 0; padding: 0; position: relative; } #ticketHomepageBody .brand-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 110px; padding: 0 50px; box-sizing: border-box; } #ticketHomepageBody .brand-logo { display: flex; align-items: center; gap: 18px; text-decoration: none; border: 0; background: none; color: #f8f5f0; } #ticketHomepageBody .brand-logo svg { display: block; width: 230px; height: auto; } #ticketHomepageBody .brand-logo svg path:not([fill]) { /* paths that set their own fill (e.g. a mask or a two-colour mark) keep it */ fill: currentColor; } #ticketHomepageBody .brand-wordmark { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important; font-size: 28px; line-height: 1; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; color: #f8f5f0; } #ticketHomepageBody .brand-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #ticketHomepageBody .brand-header-side { display: flex; align-items: center; gap: 22px; } #ticketHomepageBody .brand-accolade, #ticketHomepageBody .brand-back { display: flex; align-items: center; gap: 8px; font-family: var(--brand-font); font-weight: 500; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: #e6ddcf; line-height: 1; text-decoration: none; } #ticketHomepageBody .brand-back::before { content: "\2190"; font-size: 14px; letter-spacing: 0; transition: transform .2s ease; } #ticketHomepageBody .brand-back:hover::before { transform: translateX(-3px); } #ticketHomepageBody .brand-accolade img { display: inline-block; height: 12px; width: auto; } /* light header: page-coloured band, ink logo, quiet grey labels */ #ticketHomepageBody .brand-header--light .brand-accolade, #ticketHomepageBody .brand-header--light .brand-back { color: var(--brand-muted); } #ticketHomepageBody .brand-header--light .brand-back:hover { color: var(--brand-ink); } /* centred header: back link | logo | accolade */ #ticketHomepageBody .brand-header--centred .brand-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; height: auto; min-height: 110px; padding-top: 22px; padding-bottom: 22px; } #ticketHomepageBody .brand-header--centred .brand-header-left { justify-content: flex-start; } #ticketHomepageBody .brand-header--centred .brand-header-right { justify-content: flex-end; } #ticketHomepageBody .brand-header--centred.brand-header--wordmark .brand-logo { flex-direction: column; gap: 14px; } @media (max-width: 767.98px) { #ticketHomepageBody .brand-header { margin-bottom: 1.5rem; } #ticketHomepageBody .brand-header-inner { height: 76px; padding: 0 20px; } #ticketHomepageBody .brand-logo svg { width: 170px; } #ticketHomepageBody .brand-wordmark { font-size: 20px; } #ticketHomepageBody .brand-accolade, #ticketHomepageBody .brand-back { font-size: 10px; letter-spacing: 1.1px; } #ticketHomepageBody .brand-accolade img { height: 11px; } #ticketHomepageBody .brand-header--centred .brand-header-inner { grid-template-columns: 1fr; justify-items: center; row-gap: 12px; height: auto; padding: 18px 20px; } #ticketHomepageBody .brand-header--centred .brand-header-left { order: 2; justify-content: center; } #ticketHomepageBody .brand-header--centred .brand-logo { order: 1; } #ticketHomepageBody .brand-header--centred .brand-header-right { display: none; } #ticketHomepageBody .brand-header--centred.brand-header--wordmark .brand-logo { gap: 10px; } } /* ---------- Notices carried over from the old wrapper (e.g. dietary / waiting-list notes) ---------- */ #ticketHomepageBody #note, #ticketHomepageBody #waitlist, #ticketHomepageBody #termsandconditions, #ticketHomepageBody .brand-notice { max-width: 820px; margin: 0 auto 10px auto !important; padding: 0 20px; text-align: center; font-family: var(--brand-font) !important; font-size: 15px !important; line-height: 1.6; font-weight: 400; color: var(--brand-muted) !important; background: none !important; } #ticketHomepageBody #note { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important; font-size: 22px !important; line-height: 1.35; font-style: italic; color: var(--brand-ink) !important; margin-bottom: 18px !important; font-size-adjust: 0.5; } #ticketHomepageBody #waitlist b, #ticketHomepageBody #waitlist strong { display: block; font-weight: 500; color: var(--brand-ink); border-top: 1px solid var(--brand-line); border-bottom: 1px solid var(--brand-line); padding: 14px 0; margin-bottom: 8px; } #ticketHomepageBody #termsandconditions { font-size: 13px !important; margin-bottom: 2rem !important; } #ticketHomepageBody #waitlist a, #ticketHomepageBody #termsandconditions a, #ticketHomepageBody .brand-notice a { color: var(--brand-ink) !important; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 767.98px) { #ticketHomepageBody #note { font-size: 19px !important; margin-bottom: 12px !important; } #ticketHomepageBody #waitlist, #ticketHomepageBody .brand-notice { font-size: 13px !important; line-height: 1.5; } #ticketHomepageBody #termsandconditions { font-size: 12px !important; margin-bottom: 1rem !important; } #ticketHomepageBody #waitlist b, #ticketHomepageBody #waitlist strong { padding: 10px 0; } } #ticketHomepageBody #waitlist a:hover, #ticketHomepageBody #termsandconditions a:hover { color: var(--brand-corten) !important; } /* ---------- Headings in the heading font (only emitted when heading_font_family is set) ---------- */ html body#ticketHomepageBody:not(#brand-heading-boost) #engineAreaContainer :is(h1, h2, h3, h4):not(.upsellDescriptionLong):not(.summaryPageSubTotalLabelText):not(.summaryPageSubTotalAmount):not(.fa):not(.glyphicon):not([class*="fa-"]):not([class*="glyphicon-"]):not(i), html body#ticketHomepageBody:not(#brand-heading-boost) .modal :is(h1, h2, h3, h4, .modal-title):not(.fa):not(.glyphicon):not([class*="fa-"]):not([class*="glyphicon-"]):not(i), html body#ticketHomepageBody:not(#brand-heading-boost) .bootstrap-dialog-title:not(.fa):not(.glyphicon):not([class*="fa-"]):not([class*="glyphicon-"]):not(i), html body#ticketHomepageBody:not(#brand-heading-boost) :is(.roomsPageRoomName, .galleryRoomRatesName, .searchLabel > label, h2.upsellMainTile label, .stayLabel > label, .pageHeading, .page1TilesMenuTitle, .voucherDetailPaneVoucherTitle, article.voucherTitle, .modalHeaderTexTitleLabel, .brand-footer-title):not(.fa):not(.glyphicon):not([class*="fa-"]):not([class*="glyphicon-"]):not(i) { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important; font-weight: 500 !important; letter-spacing: 0.01em !important; font-size-adjust: 0.5; text-transform: none !important; } /* ---------- Footer ---------- */ #ticketHomepageBody .brand-footer { font-family: var(--brand-font); color: var(--brand-cream); margin: 3rem 0 0 0; clear: both; } #ticketHomepageBody .brand-footer a { text-decoration: none; color: var(--brand-cream); } #ticketHomepageBody .brand-footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; padding: 56px 50px; background: #2b2925 var(--brand-texture) repeat; } #ticketHomepageBody .brand-contact { display: flex; flex-direction: column; gap: 18px; } #ticketHomepageBody .brand-footer-title { font-size: 32px; line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; color: var(--brand-paper); margin-bottom: 6px; } #ticketHomepageBody .brand-contact-item { font-size: 14px; line-height: 1.5; } #ticketHomepageBody .brand-label { font-size: 13px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brand-cream); margin-bottom: 2px; } #ticketHomepageBody .brand-links { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; } #ticketHomepageBody .brand-strap-name { display: block; font-size: 16px; letter-spacing: 2px; color: #f8f5f0; margin-bottom: 4px; } #ticketHomepageBody .brand-strap { font-size: 14px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: #e6ddcf; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid rgba(230, 221, 207, 0.6); } #ticketHomepageBody .brand-links a { font-size: 13px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; } #ticketHomepageBody .brand-links a:hover { color: var(--brand-sand); } #ticketHomepageBody .brand-footer-under { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 50px; background: var(--brand-cream); color: var(--brand-ink); } #ticketHomepageBody .brand-affiliations { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; min-width: 0; } #ticketHomepageBody .brand-affiliations img { display: block; height: 40px; width: auto; } #ticketHomepageBody .brand-copy { font-size: 12px; color: var(--brand-ink); } @media (max-width: 767.98px) { #ticketHomepageBody .brand-footer-top { flex-direction: column; align-items: flex-start; padding: 40px 20px; } #ticketHomepageBody .brand-links { align-items: flex-start; text-align: left; } #ticketHomepageBody .brand-footer-under { padding: 18px 20px; flex-direction: column; align-items: flex-start; } #ticketHomepageBody .brand-affiliations { gap: 14px; max-width: 100%; } } /* ---------- Header bar (login / basket) ---------- */ #ticketHomepageBody #headerBar, #ticketHomepageBody #headerBar .headerBanner, #ticketHomepageBody #headerBar [style*="background-color:white"], #ticketHomepageBody #headerBar [style*="background-color: white"] { background-color: transparent !important; } #ticketHomepageBody .loginLink, #ticketHomepageBody .loginLinkmobile, #ticketHomepageBody #headerBar .loginLink, #ticketHomepageBody #headerBar .loginLinkmobile { display: inline-block; font-size: 13px !important; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brand-cream) !important; background: var(--brand-ink) !important; border: 1px solid var(--brand-ink) !important; padding: 10px 18px; line-height: 1.2; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; } #ticketHomepageBody .loginLink:empty, #ticketHomepageBody .loginLinkmobile:empty { display: none; } #ticketHomepageBody .loginLink:hover, #ticketHomepageBody .loginLinkmobile:hover, #ticketHomepageBody #headerBar .loginLink:hover, #ticketHomepageBody #headerBar .loginLinkmobile:hover { background: var(--brand-corten) !important; border-color: var(--brand-corten) !important; color: var(--brand-cream) !important; } #ticketHomepageBody .logoutButton { color: var(--brand-ink); } /* ---------- Buttons ---------- */ #ticketHomepageBody #engineAreaContainer .btn, #ticketHomepageBody #engineAreaContainer .commonButton, #ticketHomepageBody #engineAreaContainer .commonNavButton, #ticketHomepageBody .modal .btn, #ticketHomepageBody .modal .commonButton, #ticketHomepageBody .bootstrap-dialog .btn { border-radius: 0 !important; box-shadow: none !important; font-weight: 500 !important; letter-spacing: 1.4px; text-transform: uppercase; font-size: 13px !important; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } /* Button height standard (2026 refresh): one 44px height for primary and secondary actions, label centred. Breadcrumb steps, input-group addons and calendar arrows keep their own size. */ #ticketHomepageBody #engineAreaContainer .btn, #ticketHomepageBody #engineAreaContainer .commonButton, #ticketHomepageBody #engineAreaContainer .commonNavButton, #ticketHomepageBody .modal .btn, #ticketHomepageBody .modal .commonButton, #ticketHomepageBody .bootstrap-dialog .btn, #ticketHomepageBody .loginLink { min-height: 44px !important; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; line-height: 1.2 !important; box-sizing: border-box; } #ticketHomepageBody #engineAreaContainer .btn-block { display: flex; width: 100%; } #ticketHomepageBody #engineAreaContainer .hidden, #ticketHomepageBody .loginLink.hidden { display: none !important; } #ticketHomepageBody .btn-breadcrumb .btn, #ticketHomepageBody #alacerBreadcrumbContainer .btn, #ticketHomepageBody .input-group-addon, #ticketHomepageBody .btn-xs { min-height: 0 !important; display: inline-block; } /* Brand button colours (button_bg etc.): main actions solid, secondary (Login) soft */ #ticketHomepageBody #engineAreaContainer .commonNavButton:not(.brand-btn-secondary), #ticketHomepageBody #engineAreaContainer .commonButton:not(.loginLink):not(.logoutButton):not(.brand-btn-secondary), #ticketHomepageBody #engineAreaContainer .input-group-bookBtn, #ticketHomepageBody #engineAreaContainer .roomsPageBookBtn, #ticketHomepageBody #engineAreaContainer label.btn:not(.brand-btn-secondary), #ticketHomepageBody #page6 .page6NextNavButton, #ticketHomepageBody .modal .commonButton:not(.brand-btn-secondary), #ticketHomepageBody .bootstrap-dialog .btn-primary { background: #2b2925 !important; border-color: #2b2925 !important; color: #ffffff !important; font-weight: 700 !important; } #ticketHomepageBody #engineAreaContainer .commonNavButton:not(.brand-btn-secondary):hover, #ticketHomepageBody #engineAreaContainer .commonButton:not(.loginLink):not(.logoutButton):not(.brand-btn-secondary):hover, #ticketHomepageBody #engineAreaContainer .input-group-bookBtn:not(.disabled):hover, #ticketHomepageBody #engineAreaContainer label.btn:not(.brand-btn-secondary):hover, #ticketHomepageBody #page6 .page6NextNavButton:hover, #ticketHomepageBody .modal .commonButton:not(.brand-btn-secondary):hover { background: #a68a5b !important; border-color: #a68a5b !important; color: #ffffff !important; } #ticketHomepageBody #engineAreaContainer .commonNavButton:not(.brand-btn-secondary) *, #ticketHomepageBody #engineAreaContainer .commonButton:not(.loginLink) * { color: inherit !important; } #ticketHomepageBody #engineAreaContainer .input-group-bookBtn.disabled { opacity: .45; } #ticketHomepageBody #engineAreaContainer .brand-btn-secondary, #ticketHomepageBody #page6 .page6PrevNavButton, #ticketHomepageBody .modal .brand-btn-secondary, #ticketHomepageBody .loginLink, #ticketHomepageBody .loginLinkmobile, #ticketHomepageBody #headerBar .loginLink, #ticketHomepageBody #headerBar .loginLinkmobile { background: #ffffff !important; border-color: #ffffff !important; color: #2b2925 !important; font-weight: 700 !important; } #ticketHomepageBody #engineAreaContainer .brand-btn-secondary:hover, #ticketHomepageBody #page6 .page6PrevNavButton:hover, #ticketHomepageBody .modal .brand-btn-secondary:hover, #ticketHomepageBody .loginLink:hover, #ticketHomepageBody .loginLinkmobile:hover, #ticketHomepageBody #headerBar .loginLink:hover, #ticketHomepageBody #headerBar .loginLinkmobile:hover { background: #2b2925 !important; border-color: #2b2925 !important; color: #ffffff !important; } /* ---------- Form fields ---------- */ #ticketHomepageBody #engineAreaContainer input.form-control, #ticketHomepageBody #engineAreaContainer select.form-control, #ticketHomepageBody #engineAreaContainer textarea.form-control, #ticketHomepageBody #engineAreaContainer input[type="text"], #ticketHomepageBody #engineAreaContainer input[type="email"], #ticketHomepageBody #engineAreaContainer input[type="tel"], #ticketHomepageBody #engineAreaContainer input[type="password"], #ticketHomepageBody #engineAreaContainer select, #ticketHomepageBody #engineAreaContainer textarea, #ticketHomepageBody .modal input.form-control { border-radius: 0 !important; border-color: var(--brand-line-strong) !important; background-color: var(--brand-paper) !important; box-shadow: none !important; color: var(--brand-ink); } #ticketHomepageBody #engineAreaContainer input:focus, #ticketHomepageBody #engineAreaContainer select:focus, #ticketHomepageBody #engineAreaContainer textarea:focus, #ticketHomepageBody .modal input:focus { border-color: var(--brand-bronze) !important; box-shadow: 0 0 0 1px var(--brand-bronze) !important; outline: none !important; } #ticketHomepageBody #engineAreaContainer .input-group-addon { border-radius: 0 !important; background-color: var(--brand-linen) !important; border-color: var(--brand-line-strong) !important; color: var(--brand-ink) !important; } /* Mandatory fields: the engine marks them with a red border (class "invalid") until they are filled in. That red-from-the-start border is DELIBERATE (it tells the guest which fields are mandatory): keep it, in the brand's required colour, over the brand form-field border above. Do not hide it until "touched". */ #ticketHomepageBody #engineAreaContainer input.invalid, #ticketHomepageBody #engineAreaContainer select.invalid, #ticketHomepageBody #engineAreaContainer textarea.invalid, #ticketHomepageBody #engineAreaContainer .invalid > select, #ticketHomepageBody #engineAreaContainer .invalid > .fancyArrow, #ticketHomepageBody #engineAreaContainer .invalid select, #ticketHomepageBody #engineAreaContainer .invalid span.fancyArrow, #ticketHomepageBody #engineAreaContainer .invalidinput { border-color: #a3242b !important; } /* ---------- Dialogs ---------- */ #ticketHomepageBody .modal-content, #ticketHomepageBody .bootstrap-dialog .modal-content { border-radius: 0 !important; border: 1px solid var(--brand-line) !important; box-shadow: 0 10px 40px rgba(43, 41, 37, 0.18) !important; background: var(--brand-paper); } #ticketHomepageBody .modal-header { border-bottom-color: var(--brand-line) !important; background: var(--brand-paper) !important; color: var(--brand-ink) !important; } #ticketHomepageBody .modal-footer { border-top-color: var(--brand-line) !important; } #ticketHomepageBody .modal-backdrop.in { opacity: .6; background: var(--brand-ink); } /* Checkbox indicators */ #ticketHomepageBody .controlIndicator { background-color: var(--brand-paper) !important; border: 1px solid var(--brand-line-strong) !important; border-radius: 0 !important; } #ticketHomepageBody .control input:checked ~ .controlIndicator { background-color: var(--brand-linen) !important; border-color: var(--brand-ink) !important; } #ticketHomepageBody .controlCheckbox .controlIndicator:after { border-color: var(--brand-ink) !important; } /* ---------- Disabled buttons ---------- */ #ticketHomepageBody #engineAreaContainer .btn:disabled, #ticketHomepageBody #engineAreaContainer .btn[disabled], #ticketHomepageBody #engineAreaContainer .btn.disabled, #ticketHomepageBody #engineAreaContainer button:disabled { background-color: var(--brand-linen) !important; border-color: var(--brand-linen) !important; color: rgba(43, 41, 37, 0.45) !important; opacity: 1 !important; cursor: not-allowed; } /* image logos (when a logo image URL is used instead of inline SVG) */ #ticketHomepageBody .brand-logo img { display: block; height: 88px; width: auto; } @media (max-width: 767.98px) { #ticketHomepageBody .brand-logo img { height: 60px; } } /* ---------- Icon fonts: always win over the brand font ---------- */ #ticketHomepageBody .fa, #ticketHomepageBody .fa::before, #ticketHomepageBody [class^="fa-"], #ticketHomepageBody [class*=" fa-"] { font-family: FontAwesome, "Font Awesome 5 Free", "Font Awesome 6 Free" !important; } #ticketHomepageBody .glyphicon:not(.glyphicon-shopping-cart), #ticketHomepageBody .glyphicon:not(.glyphicon-shopping-cart)::before { font-family: "Glyphicons Halflings" !important; } /* ---------- Step indicator (shared design for rooms + vouchers) ---------- */ :root { --brand-steps-height: 48px; --brand-dark: #2b2925; --brand-accent: #a68a5b; } /* Login button: identical size on both engines */ #ticketHomepageBody #headerBar .loginLink { display: inline-flex !important; align-items: center; height: 40px; padding: 0 18px !important; font-size: 13px !important; line-height: 1 !important; } #ticketHomepageBody #headerBar .loginLink:empty { display: none !important; } /* Select arrows ("fancy" dropdown carets): a paper box that closes the select's border, ink caret, never the old grey */ #ticketHomepageBody .fancyArrow { background-color: var(--brand-paper) !important; color: var(--brand-ink) !important; border: 1px solid var(--brand-line-strong) !important; border-left: 0 !important; box-sizing: border-box !important; pointer-events: none; } #ticketHomepageBody .fancyArrow .fa, #ticketHomepageBody .fancyArrow i { color: var(--brand-ink) !important; } /* ---------- Accessibility layer (a11y.js): only visible to keyboard users ---------- */ #ticketHomepageBody .brand-sr { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } #ticketHomepageBody .brand-skip { position: absolute; left: 16px; top: -100px; z-index: 10000; padding: 10px 18px; background: var(--brand-ink); color: var(--brand-cream) !important; font-family: var(--brand-font); font-size: 14px; text-decoration: none; } #ticketHomepageBody .brand-skip:focus { top: 12px; } /* a clear focus ring, shown for keyboard focus only (:focus-visible), never for mouse clicks */ #ticketHomepageBody a:focus-visible, #ticketHomepageBody button:focus-visible, #ticketHomepageBody input:focus-visible, #ticketHomepageBody select:focus-visible, #ticketHomepageBody textarea:focus-visible, #ticketHomepageBody [tabindex]:focus-visible, #ticketHomepageBody [role="button"]:focus-visible { outline: 2px solid var(--brand-ink) !important; outline-offset: 2px !important; box-shadow: 0 0 0 4px var(--brand-paper) !important; } #ticketHomepageBody .alacerCalendarBody tbody td:focus-visible { outline-offset: -3px !important; box-shadow: inset 0 0 0 4px var(--brand-paper) !important; } /* elements the layer made focusable must look exactly as before when clicked with a mouse */ #ticketHomepageBody [data-a11y-btn]:focus:not(:focus-visible), #ticketHomepageBody .alacerCalendarBody tbody td:focus:not(:focus-visible), #ticketHomepageBody a:not([href]):focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } /* zoom is allowed again, so phones must not auto-zoom into small form fields when tapped (iOS zooms below 16px) */ @media (max-width: 767.98px) { #ticketHomepageBody input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]), #ticketHomepageBody select, #ticketHomepageBody textarea { font-size: 16px !important; } } #ticketHomepageBody .brand-step-heading:focus, #ticketHomepageBody [aria-modal="true"]:focus { outline: none !important; } /* SVG logos that set words in the brand fonts keep them */ #ticketHomepageBody .brand-logo svg .logo-serif { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important; } #ticketHomepageBody .brand-logo svg .logo-sans { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif !important; } /* Summary: the small Edit (pencil) and Delete (bin) buttons were dark squares with dark icons. Outlined squares with an ink icon, ink fill and white icon on hover; delete turns the mandatory red on hover. */ #ticketHomepageBody .editButton, #ticketHomepageBody .deleteButton { background: var(--brand-paper) !important; border: 1px solid var(--brand-line-strong) !important; color: var(--brand-ink) !important; width: 40px; min-width: 40px; height: 40px !important; min-height: 40px !important; padding: 0 !important; margin: 0 2px; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 0 !important; box-shadow: none !important; } #ticketHomepageBody .editButton .fa, #ticketHomepageBody .deleteButton .fa { color: inherit !important; font-size: 14px !important; } #ticketHomepageBody .editButton:hover, #ticketHomepageBody .editButton:focus-visible { background: var(--brand-ink) !important; border-color: var(--brand-ink) !important; color: #fff !important; } #ticketHomepageBody .deleteButton:hover, #ticketHomepageBody .deleteButton:focus-visible { background: #a3242b !important; border-color: #a3242b !important; color: #fff !important; } /* Your details: a required dropdown (County) got the engine's bright red #f00 border on its wrapper AND the brand red on the select itself, so it looked thicker and a different red. Only the select keeps the (deliberate) red. */ #ticketHomepageBody drop-down.invalid, #ticketHomepageBody .yourDetailsFieldInputDropdown.invalid { border: 0 !important; outline: 0 !important; } /* Additional guest names: the engine sets 10px text in these boxes; same size as the other fields */ #ticketHomepageBody .guestDetailsFieldInput, #ticketHomepageBody .guestDetailsFieldInput::placeholder { font-size: 16px !important; } /* Drop-downs (review 24 Oct): Safari draws native selects with rounded corners, its own arrows and its own height, so on the voucher / ticket details pages Title and County looked different from the text boxes. Plain selects drop the native look and get the text-box style with a simple chevron (the engine's own styled drop-downs with a .fancyArrow, the rooms occupancy drop-downs and the calendar month picker keep theirs). Autofill keeps the paper colour instead of yellow. */ html body#ticketHomepageBody:not(#brand-sel) :is(#engineAreaContainer, #content, .modal) select:not([multiple]):not(availability-rooms-details select):not(#singleCalendar select):not(:has(+ .fancyArrow)) { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; border-radius: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 12px 8px !important; padding-right: 38px !important; cursor: pointer; } html body#ticketHomepageBody :is(#engineAreaContainer, #content, .modal) :is(input, select, textarea):-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--brand-paper) inset !important; -webkit-text-fill-color: var(--brand-ink) !important; } /* Entry fields one height everywhere (review 24 Oct): text boxes and drop-downs 44px, like the buttons. Search boxes that sit inside their own bordered box, the rooms occupancy counters and the calendar pickers keep their own sizing. */ html body#ticketHomepageBody:not(#brand-fh) :is(#engineAreaContainer, #content, .modal) :is(input:is([type=text], [type=email], [type=tel], [type=password], :not([type])), select:not([multiple])):not(availability-rooms-details *):not(.ui-datepicker *):not([class*=SearchBox] *):not([class*=searchBox] *) { height: 44px !important; min-height: 44px !important; box-sizing: border-box !important; } /* Engine demo leftovers in the clean *BootstrapWrapperTemplate wrappers (St Michael's Manor, 29 Oct 2026): the 'Welcome to the Alacer' Cambridge banner, the spacer blocks under the floating header bar and the 'Phone Footer' social-icons bar. */ #headerBar .headerLogoArea, #headerBar > .row-fluid:has(> .headerLogoArea), #headerBar > div[style*="height:"]:empty, #footerBar:has(img[src*="Social_Icons"]) { display: none !important; } /* Footer sits at the bottom of the screen when the page is short (Rob 29 Oct 2026: Safari showed it floating mid-screen with white below). The page is a full-height column and the footer takes the spare space above it; the gap above the footer on normal pages comes from the content's bottom padding instead of the footer's top margin. */ #ticketHomepageBody { min-height: 100vh; min-height: 100dvh; display: flex !important; flex-direction: column; } #ticketHomepageBody > * { flex-shrink: 0; } #ticketHomepageBody > [role="contentinfo"], #ticketHomepageBody > footer, #ticketHomepageBody > .brand-footer { margin-top: auto !important; } #ticketHomepageBody > :is(div, main, section):has(#engineAreaContainer, #engineArea) { padding-bottom: 3rem; } /* the engine column takes the spare height, so any footer (custom footers such as Rothay's .rm-footer have no footer tag or .brand-footer class) sits on the bottom of the screen on short pages (Rothay 29 Oct) */ #ticketHomepageBody > :is(div, main, section):has(#engineAreaContainer, #engineArea) { flex: 1 0 auto; } /* (build z) also
/
: Moddershall's clean wrapper puts the engine in
, so nothing grew and the footer wasn't pinned on short pages */ /* ===================================================================== Engine theme — Voucher / shop engine specifics ===================================================================== */ #ticketHomepageBody voucherbookingapp, #ticketHomepageBody #engineArea, #ticketHomepageBody #engineAreaContainer { background-color: transparent !important; color: var(--brand-ink); } /* Top bar (search + category menu) */ #ticketHomepageBody .page1TopBar, #ticketHomepageBody .page1SearchBoxContainer, #ticketHomepageBody .page1TextMenuContainer, #ticketHomepageBody .page1TitlesMenuContainer { background-color: var(--brand-paper) !important; box-shadow: none !important; } #ticketHomepageBody .page1TopBar { border: 1px solid var(--brand-line) !important; } #ticketHomepageBody .voucherCategoryDisplay .page1SearchBoxInputWrapper { border: 1px solid var(--brand-line-strong) !important; border-radius: 0 !important; background: var(--brand-paper) !important; min-height: 44px; display: flex !important; align-items: center; /* 44px like every other field (review 24 Oct) */ } #ticketHomepageBody .voucherCategoryDisplay .page1SearchBoxInput, #ticketHomepageBody .voucherCategoryDisplay .page1SearchBoxIcon, #ticketHomepageBody .voucherCategoryDisplay .page1SearchBoxInputMob, #ticketHomepageBody .voucherCategoryDisplay .page1SearchBoxIconMob, #ticketHomepageBody .page1SearchBoxInputWrapper .glyphicon { border-radius: 0 !important; background: var(--brand-paper) !important; border: 0 !important; box-shadow: none !important; color: var(--brand-ink) !important; } /* Category tiles */ #ticketHomepageBody .filterVoucherCategoryImageContainer, #ticketHomepageBody .page1TitlesMenuItemContainer { border-radius: 0 !important; box-shadow: none !important; background-color: var(--brand-linen) !important; overflow: hidden; } #ticketHomepageBody .page1TitlesMenuItemContainer { transition: opacity .25s ease; } #ticketHomepageBody .page1TitlesMenuItemContainer:hover { opacity: .92; } /* category name: the same treatment as the tickets engine's category cards (review 24 Oct): heading font in white over a soft dark fade along the bottom of the picture, instead of a small dark tag */ #ticketHomepageBody .filterVoucherCategoryImageContainer, #ticketHomepageBody .page1TitlesMenuItemContainer { position: relative; } #ticketHomepageBody .filterVoucherCategoryImageContainer img, #ticketHomepageBody .page1TitlesMenuItemContainer img { transition: transform .6s ease; } #ticketHomepageBody .filterVoucherCategoryImageContainer:hover img, #ticketHomepageBody .page1TitlesMenuItemContainer:hover img { transform: scale(1.03); } html body#ticketHomepageBody:not(#x):not(#y) .page1TilesMenuTitle { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: auto !important; max-width: none !important; border-radius: 0 !important; background: linear-gradient(to bottom, rgba(43, 41, 37, 0), rgba(43, 41, 37, .82)) !important; color: #fff !important; padding: 56px 22px 18px !important; margin: 0 !important; text-align: left !important; text-transform: none !important; font-family: var(--brand-heading-font) !important; font-size: 26px !important; font-weight: 400 !important; line-height: 1.15 !important; letter-spacing: .01em !important; font-size-adjust: 0.5; } @media (max-width: 767px) { html body#ticketHomepageBody:not(#x):not(#y) .page1TilesMenuTitle { font-size: 22px !important; padding: 44px 16px 14px !important; } } /* the tiles sit on the page like the tickets engine's, not inside a white panel */ #ticketHomepageBody .voucherCategoryDisplay .page1TitlesMenuContainer { background-color: transparent !important; } /* Category dropdown items (mobile + desktop text menu) */ #ticketHomepageBody .voucherCategoryDisplay .page1TextMenuItemMob, #ticketHomepageBody .voucherCategoryDisplay #page1TextMenuSubHeaderMob { background-color: var(--brand-ink) !important; color: var(--brand-cream) !important; } #ticketHomepageBody .voucherCategoryDisplay .page1TextMenuItemMob:hover, #ticketHomepageBody .voucherCategoryDisplay #page1TextMenuSubHeaderMob:hover { background-color: var(--brand-corten) !important; color: var(--brand-cream) !important; } /* Voucher cards */ #ticketHomepageBody vouchercard .card-shadow, #ticketHomepageBody .card-shadow { box-shadow: none !important; border: 1px solid var(--brand-line) !important; border-radius: 0 !important; } #ticketHomepageBody vouchercard img { border-radius: 0 !important; } /* Buttons (UserVoucher.css uses the --button* variables set in :root) */ #ticketHomepageBody .btn.commonButton, #ticketHomepageBody .commonButton, #ticketHomepageBody vouchercard .voucherDetailPaneAddToBasketBtnLabel, #ticketHomepageBody vouchercard .mobVoucherDetailPaneAddToBasketBtnLabel, #ticketHomepageBody voucherdetailsdialog .voucherOptionsAddToBasket, #ticketHomepageBody .basketWrapper .basketItemsWrapper .basketCheckOutMenu, #ticketHomepageBody #page3 .deskcheckout, #ticketHomepageBody #page3 .deskback, #ticketHomepageBody #page3 .mobback, #ticketHomepageBody #page3 .mobcheckout, #ticketHomepageBody #page4 .deskcheckout, #ticketHomepageBody #page4 .deskback, #ticketHomepageBody #page4 .mobcheckout, #ticketHomepageBody #page4 .mobback, #ticketHomepageBody #page45ContinueBtn, #ticketHomepageBody #page45MethodBtn, #ticketHomepageBody #mobPage45MethodBtn, #ticketHomepageBody #mobPage45ContinueBtn { background-color: var(--brand-ink) !important; color: var(--brand-cream) !important; border: 1px solid var(--brand-ink) !important; border-radius: 0 !important; box-shadow: none !important; font-weight: 500 !important; letter-spacing: 1.4px; text-transform: uppercase; } #ticketHomepageBody .btn.commonButton:hover, #ticketHomepageBody .commonButton:hover, #ticketHomepageBody vouchercard .voucherDetailPaneAddToBasketBtnLabel:hover, #ticketHomepageBody vouchercard .mobVoucherDetailPaneAddToBasketBtnLabel:hover, #ticketHomepageBody voucherdetailsdialog .voucherOptionsAddToBasket:hover, #ticketHomepageBody .basketWrapper .basketItemsWrapper .basketCheckOutMenu:hover, #ticketHomepageBody #page3 .deskcheckout:hover, #ticketHomepageBody #page3 .deskback:hover, #ticketHomepageBody #page3 .mobback:hover, #ticketHomepageBody #page3 .mobcheckout:hover, #ticketHomepageBody #page4 .deskcheckout:hover, #ticketHomepageBody #page4 .deskback:hover, #ticketHomepageBody #page4 .mobcheckout:hover, #ticketHomepageBody #page4 .mobback:hover, #ticketHomepageBody #page45ContinueBtn:hover, #ticketHomepageBody #page45MethodBtn:hover, #ticketHomepageBody #mobPage45MethodBtn:hover, #ticketHomepageBody #mobPage45ContinueBtn:hover { background-color: var(--brand-corten) !important; border-color: var(--brand-corten) !important; color: var(--brand-cream) !important; } /* Basket / header icons */ #ticketHomepageBody #headerBar .glyphicon, #ticketHomepageBody .basketIcon, #ticketHomepageBody .menuIcon, #ticketHomepageBody .userIcon { color: var(--brand-ink) !important; } #ticketHomepageBody .basketIconTotalItemsCount { background: var(--brand-bronze) !important; color: #ffffff !important; } /* Toast */ #ticketHomepageBody #basketInfoMessage { background: var(--brand-ink) !important; color: var(--brand-cream) !important; border-radius: 0 !important; letter-spacing: 0.5px; } /* "More information" — a secondary button at every width (it was a small text link on desktop and a button on phones; Moddershall review 27 Oct: the button reads as clickable, the link was easy to miss) */ #ticketHomepageBody vouchercard .voucherDetailPaneMoreInfoBtnLabel, #ticketHomepageBody vouchercard .mobVoucherDetailPaneMoreInfoBtnLabel { display: inline-flex !important; align-items: center; justify-content: center; min-height: 44px; /* house 44px (was 40; Washingborough audit 29 Oct) */ background: #ffffff !important; color: #2b2925 !important; border: 1px solid #ffffff !important; border-radius: 0 !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 1.4px; text-transform: uppercase; padding: 8px 18px !important; margin: 4px 0 0 !important; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } #ticketHomepageBody vouchercard .voucherDetailPaneMoreInfoBtnLabel:hover, #ticketHomepageBody vouchercard .mobVoucherDetailPaneMoreInfoBtnLabel:hover { background: var(--brand-ink) !important; color: var(--brand-cream) !important; border-color: var(--brand-ink) !important; } #ticketHomepageBody vouchercard .voucherDetailPaneMoreInfoBtnLabel .fa, #ticketHomepageBody vouchercard .mobVoucherDetailPaneMoreInfoBtnLabel .fa { font-size: 10px !important; margin-left: 6px; color: inherit !important; } /* Voucher card */ #ticketHomepageBody .voucherImg, #ticketHomepageBody .voucherImg img { border-radius: 0 !important; } #ticketHomepageBody .voucherDetailPaneVoucherTitle, #ticketHomepageBody .voucherDetailPaneVoucherPrice { font-weight: 500 !important; letter-spacing: -0.01em; color: #2b2925 !important; } /* Refine bar (search, sort, budget) */ #ticketHomepageBody .refineVoucherT, #ticketHomepageBody #page2SearachFieldInput { border-radius: 0 !important; } #ticketHomepageBody .refineVoucherT { border-color: var(--brand-line-strong) !important; /* the 44px house field must sit inside its box (Manor House's old theme fixed the box at 38px: the field spilled out, 29 Oct) */ height: auto !important; min-height: 44px; overflow: hidden; background: var(--brand-paper, #fff) !important; } #ticketHomepageBody .refineVoucherT #page2SearachFieldInput { background: transparent !important; } /* Budget slider: ONE design in every engine (26 Oct, Rob) — a linen band, the chosen range in sand, the two ends as thin ink bars (no circles), prices in ink tags. The spa/treatment/class engines' jQuery UI slider matches (brand_leisure.css). Some engine versions draw round handles; these rules set the shape, not just the colours. */ #ticketHomepageBody .slider.slider-horizontal { height: 32px !important; background: transparent !important; box-shadow: none !important; top: 0 !important; vertical-align: middle; } #ticketHomepageBody .slider .slider-track { height: 32px !important; top: 0 !important; margin-top: 0 !important; background: var(--brand-linen) !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; border: 0 !important; } #ticketHomepageBody .slider .slider-selection { background: var(--brand-sand) !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; } #ticketHomepageBody .slider .slider-track-high, #ticketHomepageBody .slider .slider-track-low { background: transparent !important; border: 0 !important; } #ticketHomepageBody .slider .slider-selection, #ticketHomepageBody .slider .slider-track-low, #ticketHomepageBody .slider .slider-track-high { top: 0 !important; height: 100% !important; border: 0 !important; } #ticketHomepageBody .slider .slider-handle, #ticketHomepageBody .slider.slider-horizontal .slider-handle { width: 4px !important; height: 42px !important; top: -5px !important; margin-top: 0 !important; margin-left: -2px !important; background: var(--brand-ink) !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; cursor: ew-resize; } #ticketHomepageBody .slider .slider-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -12px; right: -12px; } #ticketHomepageBody .slider .tooltip.bottom { top: 100% !important; margin-top: 8px !important; } #ticketHomepageBody .slider .tooltip-inner { border-radius: 0 !important; background: var(--brand-ink) !important; color: var(--brand-cream) !important; font-size: 12px !important; letter-spacing: 0.5px; } #ticketHomepageBody .slider .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--brand-ink) !important; } #ticketHomepageBody .slider .tooltip { font-size: 12px !important; opacity: 1 !important; } /* The overall min/max labels sit under the handles and clash with them; the tags below show the chosen range */ #ticketHomepageBody .slider .stats { display: none !important; } /* Checkout breadcrumb: refined text steps (same design as the rooms engine) */ #ticketHomepageBody .breadCrumbGroup .breadcrumb { display: flex !important; align-items: center; flex-wrap: wrap; height: var(--brand-steps-height); margin: 0 !important; padding: 0 22px !important; background: var(--brand-paper) !important; border: 1px solid var(--brand-line) !important; border-radius: 0 !important; box-shadow: none !important; } #ticketHomepageBody .breadCrumbGroup .breadcrumb a { position: relative; padding: 4px 0 !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 1.4px !important; line-height: 1.2 !important; text-transform: uppercase; text-decoration: none !important; color: var(--brand-ink) !important; } #ticketHomepageBody .breadCrumbGroup .breadcrumb a:not(.current):not(.inactive):hover { color: var(--brand-accent) !important; } #ticketHomepageBody .breadCrumbGroup .breadcrumb a.current { color: var(--brand-dark) !important; box-shadow: inset 0 -1px 0 var(--brand-dark); } #ticketHomepageBody .breadCrumbGroup .breadcrumb a.inactive { color: #5c5750 !important; /* muted, not muted_light: future steps still need 4.5:1 contrast (as the rooms engine, 29 Oct) */ cursor: default; } #ticketHomepageBody .breadCrumbGroup .breadcrumb a + a { margin-left: 34px !important; } #ticketHomepageBody .breadCrumbGroup .breadcrumb a::before { content: none !important; } #ticketHomepageBody .breadCrumbGroup .breadcrumb a + a::before { content: "\203A" !important; position: absolute; left: -21px; top: 50%; transform: translateY(-55%); padding: 0 !important; font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--brand-sand) !important; pointer-events: none; } /* Login sits on the left, basket on the right (rooms engine matches) */ #ticketHomepageBody #headerBar .headerDesktop .loginRegisterLink, #ticketHomepageBody #headerBar .headerTabTop .loginRegisterLink { float: left !important; margin-left: 0 !important; } /* Voucher "More information" dialog */ #ticketHomepageBody voucherdetailsdialog .modal-content { border-top: 4px solid var(--brand-corten) !important; } #ticketHomepageBody voucherdetailsdialog .modalHeaderTexTitleLabel, #ticketHomepageBody voucherdetailsdialog .modalHeaderTextPriceLabel { font-weight: 500 !important; font-size: 22px !important; letter-spacing: -0.01em; color: #2b2925 !important; } #ticketHomepageBody voucherdetailsdialog .voucherOverviewTitle, #ticketHomepageBody voucherdetailsdialog .voucherOptionsTitle, #ticketHomepageBody voucherdetailsdialog label.title { font-weight: 500 !important; font-size: 12px !important; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brand-bronze) !important; } #ticketHomepageBody voucherdetailsdialog .voucherOverviewInfo, #ticketHomepageBody voucherdetailsdialog .voucherOptionsDesc { font-size: 15px !important; line-height: 1.5 !important; } /* ---------- Basket (header) ---------- */ #ticketHomepageBody .basketModule.basketWrapper { background: transparent !important; line-height: normal !important; height: auto !important; margin: 0 0 0 16px !important; } #ticketHomepageBody .basketModule .basket.basketDropdown { display: inline-flex !important; align-items: center; gap: 14px; height: 40px; padding: 0 16px !important; line-height: 1 !important; background: var(--brand-paper) !important; border: 1px solid var(--brand-line-strong) !important; cursor: pointer; transition: border-color .2s ease; } #ticketHomepageBody .basketModule .basket.basketDropdown:hover { border-color: var(--brand-ink) !important; } #ticketHomepageBody .basketModule .basketCounts, #ticketHomepageBody .basketModule .basketPrice { display: inline-flex !important; align-items: center; gap: 8px; padding: 0 !important; line-height: 1 !important; float: none !important; } #ticketHomepageBody .basketModule .basketPrice { padding-left: 14px !important; border-left: 1px solid var(--brand-line-strong); height: 18px; } #ticketHomepageBody .basketModule .basketTotalItemsCount, #ticketHomepageBody .basketModule .basketTotalItemsPrice { display: inline !important; float: none !important; margin: 0 !important; line-height: 1 !important; height: auto !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brand-ink) !important; background: transparent !important; } /* line-art bag replaces the Bootstrap trolley glyph (header + mobile icons) */ #ticketHomepageBody .glyphicon-shopping-cart { width: 20px !important; height: 20px !important; font-size: 0 !important; line-height: 0 !important; top: 0 !important; vertical-align: middle; background-color: var(--brand-ink) !important; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%208h14l-1%2012.5a1%201%200%200%201-1%20.9H7a1%201%200%200%201-1-.9L5%208z%22/%3E%3Cpath%20d%3D%22M9%2010V6.5a3%203%200%200%201%206%200V10%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%208h14l-1%2012.5a1%201%200%200%201-1%20.9H7a1%201%200%200%201-1-.9L5%208z%22/%3E%3Cpath%20d%3D%22M9%2010V6.5a3%203%200%200%201%206%200V10%22/%3E%3C/svg%3E") center / contain no-repeat; } #ticketHomepageBody .glyphicon-shopping-cart::before { content: none !important; } /* line Login and basket up on one row, same 40px height */ #ticketHomepageBody .basketModule.basketWrapper, #ticketHomepageBody #headerBar .loginRegisterLink { height: 77px !important; display: flex !important; align-items: center; line-height: normal !important; } #ticketHomepageBody #headerBar .loginRegisterLink .loginLink { display: inline-flex !important; align-items: center; height: 40px; padding: 0 18px !important; line-height: 1 !important; } #ticketHomepageBody #headerBar .loginRegisterLink .loginLink:empty { display: none !important; } /* high-end treatment: no box, nav-style type, hairline underline on hover */ #ticketHomepageBody .basketModule .basket.basketDropdown { background: transparent !important; border: 0 !important; border-bottom: 1px solid transparent !important; padding: 0 2px !important; height: 32px; gap: 16px; transition: border-color .25s ease; } #ticketHomepageBody .basketModule .basket.basketDropdown:hover { border-bottom-color: var(--brand-ink) !important; } #ticketHomepageBody .basketModule .basketCounts { gap: 10px; } #ticketHomepageBody .basketModule .basketTotalItemsCount, #ticketHomepageBody .basketModule .basketTotalItemsPrice { font-size: 12px !important; letter-spacing: 1.6px; } #ticketHomepageBody .basketModule .basketTotalItemsPrice { color: var(--brand-bronze) !important; } #ticketHomepageBody .basketModule .basketPrice { border-left-color: rgba(43, 41, 37, 0.2); padding-left: 16px !important; height: 14px; } #ticketHomepageBody .basketModule .glyphicon-shopping-cart { width: 19px !important; height: 19px !important; } /* basket dropdown: paper panel below the basket, hairline + soft shadow */ #ticketHomepageBody .basketModule .basketItemsWrapper { top: 62px !important; right: 0 !important; left: auto !important; width: 320px !important; background: var(--brand-paper) !important; border: 1px solid var(--brand-line) !important; border-top: 2px solid var(--brand-corten) !important; box-shadow: 0 14px 40px rgba(43, 41, 37, 0.14) !important; text-align: left !important; line-height: 1.4 !important; } #ticketHomepageBody .basketModule .basketItems { background: transparent !important; margin: 0 !important; padding: 6px 18px !important; list-style: none; } #ticketHomepageBody .basketModule .basketItem { display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0 !important; border-bottom: 1px solid var(--brand-line); font-size: 14px !important; line-height: 1.4 !important; color: var(--brand-ink) !important; } #ticketHomepageBody .basketModule .basketItem:last-child { border-bottom: 0; } #ticketHomepageBody .basketModule .basketItem > div { float: none !important; width: auto !important; padding: 0 !important; line-height: 1.4 !important; } #ticketHomepageBody .basketModule .basketItem::before, #ticketHomepageBody .basketModule .basketItem::after { display: none !important; } #ticketHomepageBody .basketWrapper .basketItemsWrapper .basketCheckOutMenu { display: block !important; margin: 0 18px 18px !important; padding: 12px 18px !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 1.6px !important; line-height: 1.2 !important; text-align: center !important; } /* basket sits flush right, no dead space on the left; button stays inside panel */ #ticketHomepageBody .basketModule.basketWrapper { justify-content: flex-end; width: auto !important; min-width: 0 !important; } #ticketHomepageBody .basketWrapper .basketItemsWrapper .basketCheckOutMenu { width: auto !important; box-sizing: border-box !important; } /* line Login / basket up with the content edges below */ #ticketHomepageBody #headerBar .headerDesktop .headerMenu, #ticketHomepageBody #headerBar .headerTabTop .headerMenu { padding-left: 45px !important; padding-right: 45px !important; } /* Voucher cards: clean 5-line description with ellipsis, titles can wrap */ #ticketHomepageBody vouchercard .voucherDetailPaneVoucherInfo { height: auto !important; max-height: none !important; overflow: hidden !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; font-size: 15px !important; line-height: 1.5 !important; margin-bottom: 14px !important; color: var(--brand-ink) !important; } #ticketHomepageBody vouchercard .voucherDetailPaneVoucherInfo * { font-size: 15px !important; line-height: 1.5 !important; display: inline; } #ticketHomepageBody vouchercard article.voucherTitle { height: auto !important; overflow: visible !important; margin-bottom: 8px !important; } #ticketHomepageBody vouchercard .voucherDetailPaneVoucherTitle { float: none !important; width: auto !important; font-size: 19px !important; line-height: 1.3 !important; } #ticketHomepageBody vouchercard .voucherDetailPaneVoucherPrice { font-size: 18px !important; margin-bottom: 4px; } #ticketHomepageBody vouchercard article.voucherTitle, #ticketHomepageBody vouchercard .voucherDetailPaneVoucherTitle { text-align: left !important; } /* Checkbox ticks: UserVoucher.css draws a full square border on the marketing tick; keep it a proper tick */ #ticketHomepageBody #yourDetails #marketingCheckBoxTick::after, #ticketHomepageBody delivery-details .combineCheckBoxTick::after { border-style: solid !important; border-color: var(--brand-ink) !important; border-width: 0 2px 2px 0 !important; } /* Basket edit / delete (review 24 Oct): the same outlined squares as the rooms summary (ink icon; ink fill on hover for edit, the mandatory red for delete) instead of solid dark blocks */ #ticketHomepageBody .glyphicon.content-editIcon, #ticketHomepageBody .glyphicon.content-deleteIcon, #ticketHomepageBody .glyphicon.foot-deleteIcon { display: inline-flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 2px; top: 0 !important; vertical-align: middle; background: transparent !important; border: 1px solid var(--brand-line-strong) !important; border-radius: 0 !important; color: var(--brand-ink) !important; font-size: 0 !important; line-height: 1 !important; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } #ticketHomepageBody .glyphicon.content-editIcon:is(:hover, :focus-visible) { background: var(--brand-ink) !important; border-color: var(--brand-ink) !important; color: #fff !important; } #ticketHomepageBody .glyphicon:is(.content-deleteIcon, .foot-deleteIcon):is(:hover, :focus-visible) { background: #a3242b !important; border-color: #a3242b !important; color: #fff !important; } #ticketHomepageBody .glyphicon.content-editIcon::before, #ticketHomepageBody .glyphicon.content-deleteIcon::before, #ticketHomepageBody .glyphicon.foot-deleteIcon::before { font-family: FontAwesome, "Font Awesome 5 Free" !important; font-size: 14px; font-weight: normal; line-height: 1; color: inherit !important; } #ticketHomepageBody .glyphicon.content-editIcon::before { content: "\f040" !important; } #ticketHomepageBody .glyphicon.content-deleteIcon::before, #ticketHomepageBody .glyphicon.foot-deleteIcon::before { content: "\f1f8" !important; } /* Some wrappers split the header bar into an empty half + a half holding login/basket: drop the empty half so Login can sit on the content's left edge and the basket on its right */ #ticketHomepageBody #headerBar .headerBanner > div:not(.headerMenu) { display: none !important; } #ticketHomepageBody #headerBar .headerBanner > .headerMenu { width: 100% !important; float: none !important; } /* More information dialog: terms text at the same size as the overview */ #ticketHomepageBody voucherdetailsdialog .voucherTermsInfo, #ticketHomepageBody voucherdetailsdialog .voucherTermsInfo * { font-size: 14px !important; line-height: 1.55 !important; } /* Your Details: labels line up with their input boxes */ #ticketHomepageBody .yourDetailsFieldLabel { padding-left: 0 !important; } /* Brand button colours on the voucher-only buttons: add to basket / checkout / continue solid, back soft */ #ticketHomepageBody vouchercard .voucherDetailPaneAddToBasketBtnLabel, #ticketHomepageBody vouchercard .mobVoucherDetailPaneAddToBasketBtnLabel, #ticketHomepageBody voucherdetailsdialog .voucherOptionsAddToBasket, #ticketHomepageBody .basketWrapper .basketItemsWrapper .basketCheckOutMenu, #ticketHomepageBody #page3 .deskcheckout, #ticketHomepageBody #page3 .mobcheckout, #ticketHomepageBody #page4 .deskcheckout, #ticketHomepageBody #page4 .mobcheckout, #ticketHomepageBody #page45ContinueBtn, #ticketHomepageBody #page45MethodBtn, #ticketHomepageBody #mobPage45MethodBtn, #ticketHomepageBody #mobPage45ContinueBtn { background-color: #2b2925 !important; border-color: #2b2925 !important; color: #ffffff !important; font-weight: 700 !important; } #ticketHomepageBody vouchercard .voucherDetailPaneAddToBasketBtnLabel:hover, #ticketHomepageBody vouchercard .mobVoucherDetailPaneAddToBasketBtnLabel:hover, #ticketHomepageBody voucherdetailsdialog .voucherOptionsAddToBasket:hover, #ticketHomepageBody .basketWrapper .basketItemsWrapper .basketCheckOutMenu:hover, #ticketHomepageBody #page3 .deskcheckout:hover, #ticketHomepageBody #page3 .mobcheckout:hover, #ticketHomepageBody #page4 .deskcheckout:hover, #ticketHomepageBody #page4 .mobcheckout:hover, #ticketHomepageBody #page45ContinueBtn:hover, #ticketHomepageBody #page45MethodBtn:hover, #ticketHomepageBody #mobPage45MethodBtn:hover, #ticketHomepageBody #mobPage45ContinueBtn:hover { background-color: #a68a5b !important; border-color: #a68a5b !important; color: #ffffff !important; } #ticketHomepageBody #page3 .deskback, #ticketHomepageBody #page3 .mobback, #ticketHomepageBody #page4 .deskback, #ticketHomepageBody #page4 .mobback { background-color: #ffffff !important; border-color: #ffffff !important; color: #2b2925 !important; font-weight: 700 !important; } #ticketHomepageBody #page3 .deskback:hover, #ticketHomepageBody #page3 .mobback:hover, #ticketHomepageBody #page4 .deskback:hover, #ticketHomepageBody #page4 .mobback:hover { background-color: #2b2925 !important; border-color: #2b2925 !important; color: #ffffff !important; } /* voucher cards always on paper (some sites' own CSS tinted them) */ #ticketHomepageBody vouchercard .voucherCardContainerStyle { background-color: var(--brand-paper) !important; } /* Holding picture wherever a picture is missing (toolkit default): vouchers, voucher categories, ticket categories and events. The engines set pictures as an inline background-image; elements with no url (or a "null" one) get the brand placeholder, so real pictures always show and replace it as soon as the site adds one. While a picture loads the panel shows the soft colour. */ #ticketHomepageBody vouchercard .voucherImg { background-color: var(--brand-sand) !important; } #ticketHomepageBody :is(vouchercard .voucherImg, .filterVoucherCategoryImage, .TicketCategoryCard, .eventImage, .eventImageMobile, .eventDetailsImage, .modalEventImage):is(:not([style*="url("]), [style*="null"], [style*="undefined"]) { background: #2b2925 url("../../BrandTheme/img/HA2026_placeholder.svg") center / cover no-repeat !important; } /* ---------- checkout forms (vouchers and tickets share them) ---------- */ #ticketHomepageBody [class*="yourDetailsField"] input:not([type=checkbox]):not([type=radio]), #ticketHomepageBody [class*="yourDetailsField"] select { height: 44px !important; border-radius: 0 !important; background: #fff !important; padding: 0 12px !important; font-size: 15px !important; color: var(--brand-ink) !important; box-shadow: none !important; } #ticketHomepageBody [class*="yourDetailsField"] input:focus, #ticketHomepageBody [class*="yourDetailsField"] select:focus { border-color: var(--brand-ink) !important; outline: 2px solid rgba(43, 41, 37, .12); outline-offset: 0; } /* checkout steps: the progress links in small capitals, the page heading in the serif (in the heading colour, as on the other pages; it was ink - Washingborough 29 Oct) */ html body#ticketHomepageBody:not(#x):not(#y) a.breadcrumbLink:not(.fa) { font-family: var(--brand-font) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .16em !important; text-transform: uppercase !important; text-decoration: none !important; color: var(--brand-muted) !important; } html body#ticketHomepageBody:not(#x):not(#y) .pageHeading:not(.fa) { font-family: var(--brand-heading-font) !important; font-size: 32px !important; font-weight: 400 !important; color: #2b2925 !important; text-transform: none !important; letter-spacing: 0 !important; margin: 10px 0 18px !important; font-size-adjust: 0.5; } /* buttons at the foot of the checkout steps: one height, a gap between them */ #ticketHomepageBody .continueShoppingTextTransitionButton, #ticketHomepageBody .deliveryMethodsTextTransitionButton, #ticketHomepageBody [class*="TextTransitionButton"] { min-height: 44px !important; padding: 0 24px !important; border-radius: 0 !important; margin-left: 10px !important; font-size: 12px !important; letter-spacing: .14em !important; text-transform: uppercase !important; line-height: 44px !important; } /* Basket bar (basket_bar.js, vouchers + tickets): fixed to the bottom once the header basket is out of sight */ html body .brand-basket-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: var(--brand-ink); color: #fff; box-shadow: 0 -8px 24px rgba(0,0,0,.18); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); animation: brand-basket-in .25s ease-out; } html body .brand-basket-bar[hidden] { display: none !important; } html body .brand-basket-inner { max-width: 1140px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; } html body .brand-basket-title { font-size: 16px; letter-spacing: .04em; color: #fff; line-height: 1.3; } html body .brand-basket-sub { font-size: 13px; color: rgba(255,255,255,.72); line-height: 1.4; margin-top: 2px; } html body .brand-basket-go { font-family: var(--brand-font) !important; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; min-height: 44px; padding: 0 26px; border-radius: 0; cursor: pointer; flex: 0 0 auto; background: var(--brand-paper); color: var(--brand-ink); border: 1px solid var(--brand-paper); } html body .brand-basket-go:hover { background: var(--brand-sand); border-color: var(--brand-sand); } html body .brand-basket-bar.is-pulse { animation: brand-basket-pulse .9s ease-out; } @keyframes brand-basket-in { from { transform: translateY(100%); } to { transform: none; } } @keyframes brand-basket-pulse { 0% { box-shadow: 0 0 0 0 rgba(43, 41, 37, .55); } 100% { box-shadow: 0 0 0 18px rgba(43, 41, 37, 0); } } html.brand-basket-bar-on body { padding-bottom: 76px !important; } @media (max-width: 600px) { html body .brand-basket-title { font-size: 14px; } html body .brand-basket-go { padding: 0 16px; letter-spacing: .1em; } } @media (prefers-reduced-motion: reduce) { html body .brand-basket-bar, html body .brand-basket-bar.is-pulse { animation: none; } } /* Voucher cards: price, Add to basket and More information pinned to the bottom of each card, so they line up across a row whatever the length of the name and description */ #ticketHomepageBody .voucherCardContainerStyle > .voucherDetailPaneParent { flex: 1 1 auto; display: flex; flex-direction: column; } #ticketHomepageBody .voucherDetailPaneParent > .voucherDetailPane { flex: 1 1 auto; display: flex; flex-direction: column; } #ticketHomepageBody .voucherDetailPane > .voucherDetailPaneVoucherInfo + article { margin-top: auto; } /* Voucher pop-up on phones: the title and the price were floated (left / right) and never cleared, so the overview text ran down beside the price in a narrow column with white space on the right (Moddershall review 27 Oct). Title, then price, then the full-width text. */ @media (max-width: 767px) { #ticketHomepageBody .voucherDetailsDialog article.voucherTitle { display: flex !important; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 14px; } #ticketHomepageBody .voucherDetailsDialog article.voucherTitle .voucherTitleItem { float: none !important; width: auto !important; max-width: 100%; text-align: left !important; } #ticketHomepageBody .voucherDetailsDialog article.voucherTitle .mobModalHeaderTextPriceLabel { display: inline-flex !important; align-items: baseline; gap: 6px; } #ticketHomepageBody .voucherDetailsDialog article.voucherTitle .mobModalHeaderTextFromLabel { display: inline !important; } #ticketHomepageBody .voucherDetailsDialog .modal-body > article { clear: both; } #ticketHomepageBody .voucherDetailsDialog .modal-body .info { width: auto !important; } } /* category picker in the search bar ("Gift Vouchers" + chevron): was a 29px tap target; 44px like every other control (audit 28 Oct, Douneside) */ #ticketHomepageBody .voucherCategoryTitle { min-height: 44px !important; display: inline-flex !important; align-items: center; gap: 6px; cursor: pointer; } #ticketHomepageBody #engineAreaContainer { min-height: clamp(160px, calc(100vh - 520px), 380px); } /* laptop screens: never more than the room left by the header and footer (Manor House tickets 29 Oct); footer stays put while the vouchers load (audit 28 Oct: layout shift 0.3); capped at 520px (bar + a row of tiles) so short pages don't leave a gap above the footer on big screens (St Michael's 29 Oct) */ /* Dark header only (generated; empty for light headers): login/basket row stays in the band and takes the band colours. Rooms and vouchers only: the ticket wrapper keeps its row below the band, on the page colour. */ /* phone search box on the voucher landing page was 35px (house standard 44px; St Michael's audit 29 Oct 2026) */ #ticketHomepageBody .page1SearchBoxInputMob { height: 44px !important; min-height: 44px !important; } /* ---------- Older voucher engine (St Michael's 29 Oct 2026) ---------- Landing page: categories in a boxed left sidebar (no .page1TopBar) -> a slim top bar like the newer engine, photo tiles in a grid. List page ("tall" display size): .voucherTile cards stacked full width -> a 3/2/1-column grid of cards matching the newer engine. */ #ticketHomepageBody article.voucherCategoryDisplay > section.leftSection:not(.page1TopBar) { float: none !important; width: 100% !important; display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 32px; padding: 10px 0 !important; margin: 0 0 28px !important; background: transparent !important; border: 0 !important; border-top: 1px solid rgba(43, 41, 37, 0.12) !important; border-bottom: 1px solid rgba(43, 41, 37, 0.12) !important; box-shadow: none !important; } #ticketHomepageBody section.leftSection:not(.page1TopBar) > .page1SearchBoxContainer, #ticketHomepageBody section.leftSection:not(.page1TopBar) > .page1TextMenuContainer { width: auto !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; float: none !important; } #ticketHomepageBody section.leftSection:not(.page1TopBar) > .page1SearchBoxContainer { flex: 0 1 300px; } #ticketHomepageBody section.leftSection:not(.page1TopBar) > .page1TextMenuContainer { display: flex !important; align-items: center; flex-wrap: wrap; gap: 4px 28px; } #ticketHomepageBody section.leftSection:not(.page1TopBar) #page1TextMenuHeader { display: none !important; } #ticketHomepageBody section.leftSection:not(.page1TopBar) > .page1TextMenuContainer > div { width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; } #ticketHomepageBody section.leftSection:not(.page1TopBar) .page1TextMenuItem { display: inline-block; padding: 13px 0 !important; font-size: 12px !important; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; color: var(--brand-ink) !important; border-bottom: 1px solid transparent; } #ticketHomepageBody section.leftSection:not(.page1TopBar) .page1TextMenuItem:hover { border-bottom-color: var(--brand-ink); } #ticketHomepageBody article.voucherCategoryDisplay:has(> section.leftSection:not(.page1TopBar)) > section.rightSection { float: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; } #ticketHomepageBody article.voucherCategoryDisplay:has(> section.leftSection:not(.page1TopBar)) .page1TitlesMenuContainer { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; } /* the clearfix ::before/::after would take the first grid cells */ #ticketHomepageBody article.voucherCategoryDisplay:has(> section.leftSection:not(.page1TopBar)) .page1TitlesMenuContainer::before, #ticketHomepageBody article.voucherCategoryDisplay:has(> section.leftSection:not(.page1TopBar)) .page1TitlesMenuContainer::after, #ticketHomepageBody section.voucherCardBook:has(.voucherTile)::before, #ticketHomepageBody section.voucherCardBook:has(.voucherTile)::after { display: none !important; } #ticketHomepageBody article.voucherCategoryDisplay:has(> section.leftSection:not(.page1TopBar)) .filterVoucherCategoryImageContainer { width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; } #ticketHomepageBody article.voucherCategoryDisplay:has(> section.leftSection:not(.page1TopBar)) .page1TitlesMenuItemContainer { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; padding: 0 !important; } @media (max-width: 991.98px) { #ticketHomepageBody article.voucherCategoryDisplay:has(> section.leftSection:not(.page1TopBar)) .page1TitlesMenuContainer { grid-template-columns: repeat(2, minmax(0, 1fr)); } } #ticketHomepageBody section.voucherCardBook:has(.voucherTile) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; margin-top: 24px; } #ticketHomepageBody section.voucherCardBook:has(.voucherTile) > div { width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; } #ticketHomepageBody section.voucherCardBook:has(.voucherTile) vouchercard, #ticketHomepageBody section.voucherCardBook:has(.voucherTile) vouchercard > section, #ticketHomepageBody section.voucherCardBook:has(.voucherTile) vouchercard > section > div { display: block; height: 100%; } #ticketHomepageBody:not(#x):not(#y) .voucherTile { width: 100% !important; height: 100% !important; margin: 0 !important; display: flex !important; flex-direction: column; padding: 0 !important; background: var(--brand-paper, #fff) !important; border: 1px solid rgba(43, 41, 37, 0.12) !important; box-shadow: none !important; border-radius: 0 !important; } #ticketHomepageBody:not(#x):not(#y) .voucherTile .voucherImg { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; background-size: cover !important; background-position: center !important; border-radius: 0 !important; } #ticketHomepageBody:not(#x):not(#y) .voucherTile .voucherImg .glass { height: 100% !important; } #ticketHomepageBody:not(#x):not(#y) .voucherTile .voucherTitle { display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; padding: 20px 22px 4px !important; height: auto !important; margin: 0 !important; } #ticketHomepageBody:not(#x):not(#y) .voucherTile .voucherTitleItem { height: auto !important; width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; line-height: 1.3 !important; font-family: var(--brand-heading-font) !important; font-size: 19px !important; font-weight: 400 !important; letter-spacing: .01em !important; text-transform: none !important; color: var(--brand-ink) !important; text-align: left !important; } #ticketHomepageBody:not(#x):not(#y) .voucherTile .voucherTitleItem.voucherPriceItem { font-family: var(--brand-font) !important; font-size: 16px !important; font-weight: 500 !important; white-space: nowrap; text-align: right !important; } #ticketHomepageBody:not(#x):not(#y) .voucherTile .voucherMenu { margin-top: auto !important; padding: 18px 22px 22px !important; display: flex !important; flex-direction: column-reverse; gap: 10px; height: auto !important; } #ticketHomepageBody:not(#x):not(#y) .voucherTile .voucherMenu .btn { width: 100% !important; margin: 0 !important; float: none !important; } #ticketHomepageBody:not(#x):not(#y) .voucherTile .voucherMenu .moreBtn { background: var(--brand-paper, #fff) !important; color: var(--brand-ink) !important; border: 1px solid var(--brand-ink) !important; } #ticketHomepageBody:not(#x):not(#y) .voucherTile .voucherMenu .moreBtn:hover, #ticketHomepageBody:not(#x):not(#y) .voucherTile .voucherMenu .moreBtn:focus-visible { background: var(--brand-ink) !important; color: #fff !important; } @media (max-width: 991.98px) { #ticketHomepageBody section.voucherCardBook:has(.voucherTile) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { #ticketHomepageBody section.voucherCardBook:has(.voucherTile) { grid-template-columns: 1fr; } } /* Category picker in the top bar ("Gift Vouchers ˅"): its list (.card-shadow, absolute) opened BEHIND the category photos, which come later in the page and are positioned (Penventon 29 Oct). Lift the bar above the grid and give the list a proper panel. */ #ticketHomepageBody .page1TopBar { position: relative; z-index: 30; } #ticketHomepageBody .page1TextMenuContainer { position: relative; } #ticketHomepageBody .page1TextMenuContainer .card-shadow { z-index: 31; min-width: 220px; right: 0; left: auto; background: var(--brand-paper, #fff); border: 1px solid var(--brand-line); box-shadow: 0 12px 28px rgba(0, 0, 0, .12); } /* drop-downs with the engine's own arrow (.fancyArrow): drop our drawn arrow, or two show (a stray dot beside the caret; Hampton, Washingborough 29 Oct) */ html body#ticketHomepageBody:not(#brand-dd) .notIE:has(> .fancyArrow) select.inputDropdown { background-image: none !important; } /* categories page: the tile grid takes the full row (Great House's compiled theme held it at 50%, so three 170px columns squeezed the tiles; 29 Oct) */ html body#ticketHomepageBody:not(#brand-cat) .filterVoucherCategory.page1TitlesMenuContainer { width: 100% !important; max-width: none !important; float: none !important; } /* phones: the checkout buttons are full width, so the 10px gap on their left pushed them 10px past the panel's right edge (Great House 29 Oct); stacked with the gap underneath instead */ @media (max-width: 767px) { #ticketHomepageBody:not(#brand-ttb) [class*="TextTransitionButton"] { margin-left: 0 !important; margin-right: 0 !important; } } /* button_secondary_style: outline */ #ticketHomepageBody #engineAreaContainer .brand-btn-secondary, #ticketHomepageBody #page6 .page6PrevNavButton, #ticketHomepageBody .modal .brand-btn-secondary, #ticketHomepageBody .loginLink, #ticketHomepageBody .loginLinkmobile, #ticketHomepageBody #headerBar .loginLink, #ticketHomepageBody #headerBar .loginLinkmobile, #ticketHomepageBody #page3 .deskback, #ticketHomepageBody #page3 .mobback, #ticketHomepageBody #page4 .deskback, #ticketHomepageBody #page4 .mobback, #ticketHomepageBody vouchercard .voucherDetailPaneMoreInfoBtnLabel, #ticketHomepageBody vouchercard .mobVoucherDetailPaneMoreInfoBtnLabel { background: #ffffff !important; color: #2b2925 !important; border: 1px solid #2b2925 !important; border-color: #2b2925 !important; } #ticketHomepageBody .loginLink:hover, #ticketHomepageBody .loginLinkmobile:hover, #ticketHomepageBody #engineAreaContainer .brand-btn-secondary:hover, #ticketHomepageBody .modal .brand-btn-secondary:hover, #ticketHomepageBody #page6 .page6PrevNavButton:hover, #ticketHomepageBody #page3 .deskback:hover, #ticketHomepageBody #page3 .mobback:hover, #ticketHomepageBody #page4 .deskback:hover, #ticketHomepageBody #page4 .mobback:hover { background: #2b2925 !important; color: #ffffff !important; border-color: #2b2925 !important; } /* ===== Ticketed events (TicketBooking) — added after the voucher layer, which the ticket engine shares. Written against #ticketHomepageBody like the other layers; retheme.py rescopes it to the ticket page body. ===== */ /* category tiles: name over a soft gradient on the photo, square corners, a slow zoom on hover */ #ticketHomepageBody .TicketCategoriesContainer::before { content: "What's on"; display: block; margin: 6px 0 18px; color: var(--brand-ink); font-family: var(--brand-heading-font) !important; font-size: 38px; line-height: 1.1; font-weight: 400; font-size-adjust: 0.5; text-transform: none; } #ticketHomepageBody .TicketCategoriesContainerGrid { gap: 20px !important; } #ticketHomepageBody .HomepageTicketCategoriesCards { position: relative !important; border-radius: 0 !important; overflow: hidden; box-shadow: none !important; cursor: pointer; } #ticketHomepageBody .HomepageTicketCategoriesCards, #ticketHomepageBody .HomepageTicketCategoriesCards * { border-radius: 0 !important; } #ticketHomepageBody .HomepageTicketCategoriesCards img { transition: transform .6s ease; } #ticketHomepageBody .HomepageTicketCategoriesCards:hover img { transform: scale(1.03); } html body#ticketHomepageBody:not(#x):not(#y) .TicketCategoryCardTitle { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: auto !important; max-width: none !important; background: linear-gradient(to bottom, rgba(43, 41, 37, 0), rgba(43, 41, 37, .82)) !important; color: #fff !important; padding: 56px 22px 18px !important; margin: 0 !important; text-align: left !important; text-transform: none !important; font-family: var(--brand-heading-font) !important; font-size: 26px !important; font-weight: 400 !important; line-height: 1.15 !important; letter-spacing: .01em !important; font-size-adjust: 0.5; } @media (max-width: 767px) { #ticketHomepageBody .TicketCategoriesContainer::before { font-size: 30px; } } /* event details pop-up */ #ticketHomepageBody .modal-content { border-radius: 0 !important; border: 0 !important; box-shadow: 0 30px 80px rgba(43, 41, 37, .28) !important; background: var(--brand-paper) !important; } #ticketHomepageBody .modal-header { border-bottom: 1px solid var(--brand-line) !important; padding: 26px 32px 18px !important; background: transparent !important; } html body#ticketHomepageBody:not(#x):not(#y) .modal-header .eventNameHeader { font-family: var(--brand-heading-font) !important; font-size: 32px !important; font-weight: 400 !important; line-height: 1.15 !important; color: var(--brand-ink) !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important; font-size-adjust: 0.5; } #ticketHomepageBody .modal-body { padding: 8px 32px 4px !important; } #ticketHomepageBody .modal-body .modal-body { padding: 0 !important; } #ticketHomepageBody .modal-body > br { display: none; } html body#ticketHomepageBody:not(#x):not(#y) .modal-body label.title, html body#ticketHomepageBody:not(#x):not(#y) .modal-body .eventDatesHeader { display: block; margin: 20px 0 6px !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--brand-bronze) !important; font-family: var(--brand-font) !important; } #ticketHomepageBody .modal-body .info, #ticketHomepageBody .modal-body .eventDate { font-size: 14px; line-height: 1.65; color: var(--brand-muted) !important; margin: 0 !important; } #ticketHomepageBody .modal-body .eventDate { padding: 0 15px; } #ticketHomepageBody .ticketOptions { border-top: 1px solid var(--brand-line); margin-top: 22px; padding-top: 4px; } #ticketHomepageBody .ticketOptionsInfo .row.displayFlex { align-items: center; padding: 12px 0; border-bottom: 1px solid var(--brand-line); margin: 0 !important; } #ticketHomepageBody .ticketsAvailableName { font-size: 15px; color: var(--brand-ink); font-weight: 500; padding-left: 0 !important; } #ticketHomepageBody .ticketsAvailablePrice { font-size: 16px; color: var(--brand-ink); } #ticketHomepageBody .ticketQuantityInput .qtyInputBox { height: 44px !important; border: 1px solid var(--brand-line-strong) !important; border-radius: 0 !important; background: #fff !important; padding: 0 12px !important; font-size: 15px !important; text-align: center; color: var(--brand-ink) !important; float: none !important; } #ticketHomepageBody .addButtonContainer { padding-right: 0 !important; } #ticketHomepageBody .modal-footer { border-top: 0 !important; padding: 18px 32px 28px !important; } /* buttons in the ticket engine: one height and style */ #ticketHomepageBody .commonButton { min-height: 44px; border-radius: 0 !important; letter-spacing: .14em; text-transform: uppercase; font-size: 12px !important; padding: 0 22px !important; } /* budget slider: the same as the vouchers engine (a linen band, the chosen range in sand, ink end bars, prices in ink tags) */ #ticketHomepageBody .slider, #ticketHomepageBody .slider.slider-horizontal { width: 220px !important; height: 32px !important; background: transparent !important; box-shadow: none !important; } #ticketHomepageBody .slider .slider-track { height: 32px !important; top: 0 !important; margin-top: 0 !important; background: var(--brand-linen) !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; } #ticketHomepageBody .slider .slider-selection { background: var(--brand-sand) !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; } #ticketHomepageBody .slider .slider-track-high, #ticketHomepageBody .slider .slider-track-low { background: transparent !important; border: 0 !important; } #ticketHomepageBody .slider .slider-selection, #ticketHomepageBody .slider .slider-track-low, #ticketHomepageBody .slider .slider-track-high { top: 0 !important; height: 100% !important; border: 0 !important; } #ticketHomepageBody .slider .slider-handle, #ticketHomepageBody .slider.slider-horizontal .slider-handle { width: 4px !important; height: 42px !important; top: -5px !important; margin-left: -1px !important; background: var(--brand-ink) !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } #ticketHomepageBody .slider .tooltip { opacity: 1 !important; font-size: 12px !important; } #ticketHomepageBody .slider.slider-horizontal { top: 0 !important; vertical-align: middle; } #ticketHomepageBody .slider.slider-horizontal .slider-handle { margin-top: 0 !important; } #ticketHomepageBody .slider .tooltip.bottom { top: 100% !important; margin-top: 8px !important; } #ticketHomepageBody .page2PriceRangeSlider .rangeSlider { padding-left: 14px; } #ticketHomepageBody .slider .tooltip-inner { background: var(--brand-ink) !important; color: var(--brand-cream) !important; border-radius: 0 !important; font-size: 12px !important; padding: 3px 8px !important; letter-spacing: .5px; box-shadow: none !important; } #ticketHomepageBody .slider .tooltip.bottom .tooltip-arrow { display: block !important; border-bottom-color: var(--brand-ink) !important; } /* ---- 2026 polish ---- */ /* reserve room while the Angular app draws, so the footer doesn't jump up and down (layout shift) */ #ticketHomepageBody #content, #ticketHomepageBody #engineArea { min-height: clamp(160px, calc(100vh - 520px), 420px); } /* footer stays put while the app loads (no layout shift), without making a short page scroll on a laptop screen (Manor House 29 Oct: 55vh left 350px of empty space under a tall footer) */ /* top bar (search, sort, budget): hairlines on the page colour rather than a white box */ #ticketHomepageBody .page1TopBar { background: transparent !important; box-shadow: none !important; border: 0 !important; border-top: 1px solid var(--brand-line) !important; border-bottom: 1px solid var(--brand-line) !important; margin-bottom: 26px !important; } #ticketHomepageBody .page1TopBar .SearchBoxContainer { background: var(--brand-paper) !important; border: 1px solid var(--brand-line-strong) !important; border-radius: 0 !important; min-height: 44px; display: flex; align-items: center; padding: 0 10px !important; } #ticketHomepageBody .page1TopBar .SearchBoxContainer input { border: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 40px; font-size: 15px !important; } /* event cards: picture, then name, words, price and button; no white box behind the grid */ #ticketHomepageBody .alacer-bootstrap, #ticketHomepageBody .alacer-bootstrap > div { background: transparent !important; } #ticketHomepageBody .refineInputContainers, #ticketHomepageBody .refineInputContainer { background: transparent !important; box-shadow: none !important; border: 0 !important; } /* event list filter bar (search, sort, budget): no linen band around it */ #ticketHomepageBody .navbar.row { background: transparent !important; min-height: 0 !important; height: auto !important; margin-bottom: 24px !important; border: 0 !important; } #ticketHomepageBody .navbarContainer.card-shadow { /* the same white bar as the vouchers engine's search / sort / budget bar */ background: #fff !important; box-shadow: none !important; border: 1px solid var(--brand-line) !important; border-radius: 0 !important; } #ticketHomepageBody .searchBoxWrapper { background: var(--brand-paper) !important; border: 1px solid var(--brand-line-strong) !important; border-radius: 0 !important; } #ticketHomepageBody .searchBoxWrapper input { border: 0 !important; box-shadow: none !important; } #ticketHomepageBody ticketcard .card-shadow { background: var(--brand-paper) !important; border: 1px solid var(--brand-line) !important; box-shadow: none !important; } #ticketHomepageBody .eventCardsWrapper, #ticketHomepageBody .eventCardsMobWrapper { background: transparent !important; } #ticketHomepageBody .eventCardContent { padding: 0 20px !important; } /* long descriptions (several lines with
) ran under the price and button: keep them inside the card's fixed height */ #ticketHomepageBody .eventCardContent { display: flex; flex-direction: column; overflow: hidden; } #ticketHomepageBody .eventCardContent .descriptionWrapper { flex: 1 1 auto; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); } /* a part-cut last line fades out (two-line names leave less room) */ #ticketHomepageBody .eventCardContent .eventsNameDescription { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; margin-bottom: 0 !important; } #ticketHomepageBody .eventCardPriceAndInfo { padding: 0 20px 20px !important; } /* event pictures are usually square promo graphics with words on them: show them whole (a 240px band cut the words off) */ #ticketHomepageBody .eventImageContainer { width: 100% !important; max-width: none !important; height: auto !important; aspect-ratio: 1 / 1; min-height: 0 !important; } #ticketHomepageBody .eventImageContainer .eventImage { width: 100% !important; height: 100% !important; min-height: 0 !important; background-size: cover !important; background-position: center !important; } #ticketHomepageBody .eventImage { background-color: var(--brand-sand) !important; background-size: cover !important; background-position: center !important; } html body#ticketHomepageBody:not(#x):not(#y) .eventsNameHeader { font-family: var(--brand-heading-font) !important; font-size: 24px !important; font-weight: 500 !important; line-height: 1.2 !important; color: var(--brand-ink) !important; text-transform: none !important; letter-spacing: .01em !important; margin: 18px 0 8px !important; font-size-adjust: 0.5; } #ticketHomepageBody .eventsNameDescription { color: var(--brand-muted) !important; font-size: 14px !important; line-height: 1.6 !important; } #ticketHomepageBody .priceLabelsGroup span { color: var(--brand-ink) !important; } #ticketHomepageBody .priceLabelsGroup span:first-child { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-muted) !important; } /* basket link in the header: readable price */ #ticketHomepageBody .basketTotalItemsPrice, #ticketHomepageBody .basketWrapper .basketTotalItemsPrice { color: var(--brand-ink) !important; font-weight: 500; } /* basket and details pages: page headings in the brand serif, labels in small caps, full-width fields */ html body#ticketHomepageBody:not(#x):not(#y) #content h1, html body#ticketHomepageBody:not(#x):not(#y) #content h2, html body#ticketHomepageBody:not(#x):not(#y) .basketHeader, html body#ticketHomepageBody:not(#x):not(#y) .yourBasketHeader { font-family: var(--brand-heading-font) !important; font-weight: 400 !important; color: var(--brand-ink) !important; text-transform: none !important; letter-spacing: .01em !important; font-size-adjust: 0.5; } #ticketHomepageBody #content form label, #ticketHomepageBody #content .control-label { font-size: 11px !important; font-weight: 500 !important; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-muted) !important; margin-bottom: 6px; } #ticketHomepageBody #content form .form-control, #ticketHomepageBody #content form input[type=text], #ticketHomepageBody #content form input[type=email], #ticketHomepageBody #content form input[type=tel], #ticketHomepageBody #content form select { width: 100% !important; max-width: none !important; min-height: 44px; } /* note: the red border on empty fields at the start is deliberate (it marks them mandatory): leave it alone */ #ticketHomepageBody #content select.inputDropdown { min-width: 120px; height: 44px; } /* steps bar (Your basket · Your details · Payment · Confirmation): hairlines, no white box */ #ticketHomepageBody breadcrumb .breadcrumb.card-shadow { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; border-top: 1px solid var(--brand-line) !important; border-bottom: 1px solid var(--brand-line) !important; padding: 14px 0 !important; margin-bottom: 30px !important; } #ticketHomepageBody breadcrumb .breadcrumbLink { background: transparent !important; color: var(--brand-ink) !important; letter-spacing: .16em; } #ticketHomepageBody breadcrumb .breadcrumbLink.disabled { color: var(--brand-muted) !important; opacity: 1 !important; } /* page headings: "Your Basket", "Your Details" */ html body#ticketHomepageBody:not(#x):not(#y) #content h3.pageHeader { font-family: var(--brand-heading-font) !important; font-size: 38px !important; font-weight: 400 !important; line-height: 1.1 !important; color: var(--brand-ink) !important; text-transform: none !important; letter-spacing: .01em !important; margin: 0 0 22px !important; padding: 0 !important; font-size-adjust: 0.5; } /* basket table: paper card, small-caps column labels in muted ink, totals in the serif */ #ticketHomepageBody #content .deskBasketWrapper table.table { background: var(--brand-paper) !important; border: 1px solid var(--brand-line) !important; } #ticketHomepageBody #content table.table > thead > tr > th, #ticketHomepageBody #content table.table th.col-head { color: var(--brand-muted) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .16em !important; text-transform: uppercase !important; border-bottom: 1px solid var(--brand-line-strong) !important; padding: 16px 14px !important; } #ticketHomepageBody #content table.table td { color: var(--brand-ink) !important; font-size: 15px; padding: 16px 14px !important; border-top: 1px solid var(--brand-line) !important; vertical-align: middle !important; } #ticketHomepageBody #content table.table tfoot th, #ticketHomepageBody #content table.table tfoot th span { color: var(--brand-ink) !important; font-family: var(--brand-heading-font) !important; font-size: 24px !important; font-weight: 500 !important; border-top: 1px solid var(--brand-line-strong) !important; text-transform: none; } /* basket actions: Checkout is the main action (ink), Continue shopping secondary, with a gap between */ #ticketHomepageBody #content .actionButtons { display: flex; justify-content: flex-start; gap: 12px; flex-direction: row-reverse; } /* row-reverse: DOM order is Checkout, Continue; flex-start packs them to the right */ #ticketHomepageBody #content .actionButtons .btn { float: none !important; margin: 0 !important; padding: 0 26px !important; } #ticketHomepageBody #content .actionButtons .btn:not(.brand-btn-secondary) { background: var(--brand-ink) !important; border-color: var(--brand-ink) !important; color: #fff !important; } #ticketHomepageBody #content .actionButtons .btn:not(.brand-btn-secondary):hover { background: var(--brand-bronze) !important; border-color: var(--brand-bronze) !important; } /* Events list tool bar: back arrow and sort arrows. A site's old user CSS can make them white (they sat on a dark bar); on the paper bar they vanished. Ink, with the active/hover state in the accent. */ #ticketHomepageBody .iconHome, #ticketHomepageBody #page2HomeIcon, #ticketHomepageBody .page2SortIconTriangleTop, #ticketHomepageBody .page2SortIconTriangleBottom, #ticketHomepageBody .glyphicon-triangle-top, #ticketHomepageBody .glyphicon-triangle-bottom { color: var(--brand-ink) !important; opacity: .75; cursor: pointer; } #ticketHomepageBody .iconHome:hover, #ticketHomepageBody #page2HomeIcon:hover, #ticketHomepageBody .page2SortIconTriangleTop:hover, #ticketHomepageBody .page2SortIconTriangleBottom:hover { opacity: 1; color: var(--brand-bronze) !important; } #ticketHomepageBody .iconHome, #ticketHomepageBody #page2HomeIcon { font-size: 18px; padding: 0 6px; line-height: 24px; } /* level with the search box */ /* Event cards: the engine fixes each card at 750px (and the row at 350px) with 7px rounded corners. Square corners like everything else, and the card ends just below its More information button. */ #ticketHomepageBody ticketcard .card-shadow { height: auto !important; border-radius: 0 !important; overflow: hidden; } #ticketHomepageBody .eventCardsWrapper, #ticketHomepageBody .eventCardsMobWrapper { height: auto !important; } #ticketHomepageBody .eventImage, #ticketHomepageBody .eventImageMobile, #ticketHomepageBody .eventImageContainer { border-radius: 0 !important; } #ticketHomepageBody .eventCardPriceAndInfo { height: auto !important; display: flow-root; } /* Event cards: price and More information pinned to the bottom of the card (lines up across a row) */ #ticketHomepageBody ticketcard .card-shadow { display: flex !important; flex-direction: column; } #ticketHomepageBody ticketcard .card-shadow > .eventCardsWrapper:not(.hidden) { flex: 1 1 auto; display: flex; flex-direction: column; } #ticketHomepageBody ticketcard .eventCardsWrapper > .eventCardPriceAndInfo { margin-top: auto; } /* details page (review 24 Oct): the text boxes were 34px (bootstrap) next to 44px drop-downs; everything 44px */ #ticketHomepageBody #content :is(input.form-control, input[type=text], input[type=email], input[type=tel]):not([type=checkbox]):not([type=radio]):not(.SearchBoxContainer input) { height: 44px !important; } /* Phones (review 26 Oct, Moddershall): the engine fixes the mobile event card at 260px with overflow hidden, and our square picture filled all of it, so the event name, description and button were cut off. On phones the card grows to fit. */ @media (max-width: 767px) { html body#ticketHomepageBody:not(#x):not(#y) .eventCardsMobWrapper .eventCardContent { height: auto !important; overflow: visible !important; padding-bottom: 18px !important; } html body#ticketHomepageBody:not(#x):not(#y) .eventCardsMobWrapper .eventsNameHeader { margin: 14px 0 6px !important; } html body#ticketHomepageBody:not(#x):not(#y) .eventCardsMobWrapper .eventImageMobile { height: 100% !important; width: 100% !important; padding: 0 !important; background-size: cover !important; background-position: center !important; } html body#ticketHomepageBody:not(#x):not(#y) .eventCardsMobWrapper .eventInfoGroup { margin-top: 14px !important; } } /* Ticket type names match voucher type names (body font, spaced capitals), never the heading font; category tiles unchanged (26 Oct 2026). */ html body#ticketHomepageBody:not(#brand-heading-boost):not(#tt-names):not(#x) .eventCardContent .eventsNameHeader { font-family: var(--brand-font) !important; text-transform: uppercase !important; letter-spacing: .08em !important; font-weight: 500 !important; font-size: 19px !important; line-height: 1.3 !important; font-size-adjust: none !important; } /* Event pop-up (Moddershall review 27 Oct): the Terms & Conditions heading showed with nothing under it when an event has no terms text set in the back office; hide the empty section. On phones the Sold out / Book button sat in a quarter-width column and squeezed its own label; it now takes the width it needs and the ticket name takes the rest. */ #ticketHomepageBody .modal-body .eventTerms:has(.eventTermsInfo:empty) { display: none !important; } #ticketHomepageBody .ticketOptionsInfo .row.displayFlex .commonButton { white-space: nowrap; } @media (max-width: 767px) { #ticketHomepageBody .ticketOptionsInfo .row.displayFlex { gap: 12px; } #ticketHomepageBody .ticketOptionsInfo .row.displayFlex > [class*="col-"]:first-child { flex: 1 1 auto; width: auto !important; min-width: 0; } #ticketHomepageBody .ticketOptionsInfo .row.displayFlex > [class*="col-"]:not(:first-child) { flex: none; width: auto !important; padding-left: 0 !important; padding-right: 0 !important; } #ticketHomepageBody .ticketOptionsInfo .row.displayFlex .commonButton { min-width: 116px; padding: 10px 16px !important; } } /* Older ticket engine (sidebar layout, e.g. St Michael's 29 Oct 2026): the search box is a floated container that collapsed to 0px with a 25px input inside; make it a proper 44px field with the icon inside on the right. */ #ticketHomepageBody .SearchBoxContainer { display: flex !important; align-items: center; min-height: 44px; padding: 0 12px !important; border: 1px solid rgba(43, 41, 37, 0.25) !important; background: #fff !important; border-radius: 0 !important; } #ticketHomepageBody .SearchBoxContainer input { flex: 1 1 auto; height: 42px !important; border: 0 !important; background: transparent !important; padding: 0 !important; outline-offset: 2px; } #ticketHomepageBody .SearchBoxContainer .glyphicon { float: none !important; color: var(--brand-ink) !important; } /* ticket layouts that put the whole page (header and footer too) inside a fixed-width .container (Great House 29 Oct; most sites' _TicketLayout don't): header and footer run the full width like on the other engines. overflow-x: clip stops the 100vw (which includes the scrollbar) from making the page scroll sideways */ html, body { overflow-x: clip; } html body:not(#brand-bleed) .container .brand-header, html body:not(#brand-bleed) .container [role="contentinfo"] { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; box-sizing: border-box; } /* PAY-1103: payment step - 'Same as Lead Guest' beside the Billing Address heading, so it is seen before the fields, and the billing and card panels the same height on desktop. Works whichever order the engine renders the tick box in (Rob, 3 Nov 2026). */ html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround > .card-shadow { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; padding-bottom: 20px !important; background: var(--brand-paper, #fff) !important; } html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround > .card-shadow > #PaymentBillingAddressHeading { grid-column: 1; grid-row: 1; align-self: last baseline; } html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround > .card-shadow > .accordionCard { display: contents !important; } html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround > .card-shadow > .accordionCard > * { grid-column: 1 / -1; padding-left: 20px; padding-right: 20px; } html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround #sameAsLeadGuestArea { grid-column: 2 !important; grid-row: 1 !important; align-self: last baseline; margin: 0 !important; padding: 0 20px 0 0 !important; width: auto !important; white-space: nowrap; } @media (max-width: 479.98px) { html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround #sameAsLeadGuestArea { grid-column: 1 / -1 !important; grid-row: 2 !important; padding: 0 20px 10px !important; white-space: normal; } } @media (min-width: 992px) { html body:not(#py1):not(#py2):not(#py3) .row:has(> #paymentBillingAddressSurround):has(> #paymentDetailsSurroundSurround) { display: flex; flex-wrap: wrap; } html body:not(#py1):not(#py2):not(#py3) .row:has(> #paymentBillingAddressSurround)::before, html body:not(#py1):not(#py2):not(#py3) .row:has(> #paymentBillingAddressSurround)::after { display: none; } html body:not(#py1):not(#py2):not(#py3) :is(#paymentBillingAddressSurround, #paymentDetailsSurroundSurround) { float: none; display: flex; } html body:not(#py1):not(#py2):not(#py3) :is(#paymentBillingAddressSurround, #paymentDetailsSurroundSurround) > .card-shadow { flex: 1 1 auto; } } /* PAY-1103b: card panel's white inner box fills the equal-height panel; the engine's loose 'Your Card Details' line under the panel's own heading is hidden */ @media (min-width: 992px) { html body:not(#py1):not(#py2):not(#py3) #paymentDetailsSurroundSurround > .card-shadow { display: flex; flex-direction: column; } html body:not(#py1):not(#py2):not(#py3) #paymentDetailsSurroundSurround > .card-shadow > .accordionCard { flex: 1 1 auto; } } html body:not(#py1):not(#py2):not(#py3) #PaymentDetailsArea { visibility: visible !important; font-size: 0 !important; line-height: 0 !important; } html body:not(#py1):not(#py2):not(#py3) #PaymentDetailsArea > * { font-size: 14px; line-height: normal; } /* ALIGN-1103: the billing column and the card frame use the same explicit spacing, so their rows line up on every site whatever the label size (Lovat / Elveden, Rob 3 Nov 2026): both headings 20px top / 12px bottom; each label 4px above its field; 12px between rows (drop-down wrappers included); billing rows packed at the top when the equal-height panel is taller. */ html body:not(#py1):not(#py2):not(#py3) :is(#PaymentBillingAddressHeading, #PaymentCardDetailHeading) { padding: 20px 20px 12px !important; margin: 0 !important; line-height: 1.25 !important; } html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround > .card-shadow { row-gap: 0 !important; align-items: start !important; align-content: start !important; } html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround > .card-shadow > #PaymentBillingAddressHeading { align-self: start !important; } html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround #sameAsLeadGuestArea { align-self: center !important; margin-top: 8px !important; } html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround > .card-shadow > .accordionCard > div:not(#sameAsLeadGuestArea) { margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround > .card-shadow > .accordionCard > div:not(#sameAsLeadGuestArea) > label { display: block !important; margin: 0 !important; padding: 0 0 4px !important; line-height: normal !important; } html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround > .card-shadow > .accordionCard > div:not(#sameAsLeadGuestArea) > :is(input, select, div, drop-down) { display: block !important; margin: 0 0 12px !important; height: auto; } html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround > .card-shadow > .accordionCard > div:not(#sameAsLeadGuestArea) > :is(div, drop-down) :is(select, input) { margin: 0 !important; } html body:not(#py1):not(#py2):not(#py3) #paymentDetailsSurroundSurround #PaymentDetailsArea, html body:not(#py1):not(#py2):not(#py3) #paymentDetailsSurroundSurround #CardDetailsSurround { margin: 0 !important; padding: 0 !important; } /* CVH-1103: the card frame is fixed at 350px by the engine (inline style). With 44px fields an engine that also shows a Start Date row (Dundonald) pushed the Card Verification Number below the bottom of the frame, so it was cut off and the guest couldn't pay. Give the frame room for five rows with large labels (Rob, 3 Nov 2026). */ html body:not(#py1):not(#py2):not(#py3) #paymentDetailsSurroundSurround #CardDetailsIframe { height: 460px !important; } /* PAY-1103c: (1) the box round the card frame carries jQuery UI's ui-state-highlight class, which some base themes colour (Crown: grey): keep it clear. (2) Older engines (Dundonald) have no .card-shadow in the payment columns: the heading and the fields are two separate boxes straight in the column. Stack them and join them into one panel (no border between), keep 'Same as Lead Guest' beside the heading, and use the same field spacing as newer engines so the card rows line up (Rob, 3 Nov 2026). */ html body:not(#py1):not(#py2):not(#py3) #paymentDetailsSurroundSurround #CardDetailsSurround { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } html body:not(#py1):not(#py2):not(#py3) :is(#paymentBillingAddressSurround, #paymentDetailsSurroundSurround):not(:has(> .card-shadow)) { flex-direction: column; position: relative; } html body:not(#py1):not(#py2):not(#py3) :is(#paymentBillingAddressSurround, #paymentDetailsSurroundSurround):not(:has(> .card-shadow)) > .accordionCard { flex: 1 1 auto; margin: 0 !important; padding: 0 20px 20px !important; border-top: 0 !important; } html body:not(#py1):not(#py2):not(#py3) :is(#paymentBillingAddressSurround, #paymentDetailsSurroundSurround):not(:has(> .card-shadow)) > :is(#PaymentBillingAddressHeading, #PaymentCardDetailHeading) { border-bottom: 0 !important; padding-right: 210px !important; } html body:not(#py1):not(#py2):not(#py3) #paymentDetailsSurroundSurround:not(:has(> .card-shadow)) > #PaymentCardDetailHeading { padding-right: 20px !important; } html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround:not(:has(> .card-shadow)) #sameAsLeadGuestArea { position: absolute !important; top: 22px; right: 35px; margin: 0 !important; padding: 0 !important; width: auto !important; white-space: nowrap; } @media (max-width: 479.98px) { html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround:not(:has(> .card-shadow)) > #PaymentBillingAddressHeading { padding-right: 20px !important; } html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround:not(:has(> .card-shadow)) #sameAsLeadGuestArea { position: static !important; padding: 0 0 10px !important; } } html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround:not(:has(> .card-shadow)) > .accordionCard > div:not(#sameAsLeadGuestArea) { margin: 0 !important; padding: 0 !important; } html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround:not(:has(> .card-shadow)) > .accordionCard > div:not(#sameAsLeadGuestArea) > label { display: block !important; margin: 0 !important; padding: 0 0 4px !important; line-height: normal !important; } html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround:not(:has(> .card-shadow)) > .accordionCard > div:not(#sameAsLeadGuestArea) > :is(input, select, div, drop-down) { display: block !important; margin: 0 0 12px !important; height: auto; } html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround:not(:has(> .card-shadow)) > .accordionCard > div:not(#sameAsLeadGuestArea) > :is(div, drop-down) :is(select, input) { margin: 0 !important; } /* PAY-1103d: the hidden tick input carries .form-control, so the 44px field height stretched the 'Same as Lead Guest' row and left the visible tick at its top (Crown): size the row to its content and centre it */ html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround #sameAsLeadGuestArea { align-items: center !important; height: auto !important; min-height: 0 !important; } html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround #sameAsLeadGuestArea :is(label, input) { height: auto !important; min-height: 0 !important; } /* PAY-1103e: the tick box is a 20px square level with its text (Crown: the label had collapsed to 0px, so the box sat 8px low), and the tick mark is centred in the box (the engine draws it 6x16px from 3px down, so it sat low; demo) */ html body#alacerHotelSurroundPageBody:not(#ck1):not(#ck2) .controlIndicator::after { top: 2px !important; left: 6px !important; width: 6px !important; height: 11px !important; box-sizing: border-box !important; } html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround #sameAsLeadGuestArea > label.control { position: relative !important; display: block !important; flex: 0 0 20px; width: 20px !important; height: 20px !important; min-height: 20px !important; margin: 0 10px 0 0 !important; padding: 0 !important; } html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround #sameAsLeadGuestArea > label.control > .controlIndicator { top: 0 !important; left: 0 !important; } html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround #sameAsLeadGuestArea > span { margin: 0 !important; line-height: 20px !important; }