/* The Great House Lavenham theme v20261101h — generated 2026-11-01 18:16 by retheme.py. Do not hand-edit: change the brand JSON / templates and regenerate. */ /* ===== Part 1: recolour of _VoucherThemeDefault.css + UserVoucher.css (generated) ===== */ ::-webkit-scrollbar-thumb { background-color: #d8d4ca; } #alacerHotelSurroundPageBody { background-color: #efede8; } .headerMenu.mob .menuItem.basketIcon .glyphicon { color: #495a58; } .headerMenu.mob .menuItem.userIcon .glyphicon { color: #303636; } .toastMessage { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #ffffff; } voucherbookingapp input, voucherbookingapp input.form-control { border-color: #303636; } voucherbookingapp select { border-color: #303636; } voucherbookingapp textarea { border-color: #303636; } .notIE.fullWidth .inputDropdown, drop-down .inputDropdown { background-color: #efede8; border-color: #303636; } .notIE.fullWidth .counterIcon, drop-down .counterIcon { color: #ffffff; background-color: #5b6563; } .notIE.fullWidth .counterIconMob, drop-down .counterIconMob { color: #ffffff; background-color: #5b6563; } drop-down select.inputDropdown { background-color: #efede8; border-color: #303636; } drop-down .counterIcon { color: #ffffff; background-color: #5b6563; } drop-down .counterIconMob { color: #ffffff; background-color: #5b6563; } .controlIndicator { background-color: #ffffff; } .control:hover input ~ .controlIndicator, .control input:focus ~ .controlIndicator { background-color: #303636; } .control input:checked ~ .controlIndicator { background-color: #efede8; } .control:hover input:not([disabled]):checked ~ .controlIndicator, .control input:checked:focus ~ .controlIndicator { background-color: rgba(48, 54, 54, 0.5); } .control input:disabled ~ .controlIndicator { background-color: rgba(48, 54, 54, 0.5); } .controlCheckbox .controlIndicator:after { border-color: #ffffff; } .loginRegisterLink .loginLink { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } login .loginForm { background-color: #ffffff; border-color: var(--brand-line); } login .loginPopupTitle { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } login .loginPopupEmailLabel { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } login .loginPopupEmailInput { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #efede8; } login .loginPopupEmailInput::-webkit-input-placeholder { color: rgba(48, 54, 54, 0.5); } login .loginPopupEmailInput:-moz-placeholder { color: rgba(48, 54, 54, 0.5); } login .loginPopupEmailInput::-moz-placeholder { color: rgba(48, 54, 54, 0.5); } login .loginPopupEmailInput:-ms-input-placeholder { color: rgba(48, 54, 54, 0.5); } login .loginPopupPasswordLabel { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } login .loginPopupPasswordInput { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #efede8; } login .loginPopupForgotPasswordLabel { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } login .loginPopupForgotPasswordLabel:hover { color: #303636; } login .loginPopupForgotPasswordLabel:focus { color: #303636; } login .loginPopupForgotPasswordLabel:active { color: #303636; } login .loginPopupForgotPasswordLabel:visited { color: #303636; } login .loginPopupInvalidPasswordMessage { color: #bb552b; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } login .loginPopupLoginFailedMessage { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } login .loginPopupForgotPasswordResultMessage { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } login .loginPopupLoginBtn { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } login .loginPopupCancelBtn { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } @media (max-width: 480px) { .loginPopupTitle { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } .loginPopupEmailLabel { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } .loginPopupEmailInput { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; background-color: #efede8; } .loginPopupPasswordLabel { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } .loginPopupPasswordInput { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; background-color: #efede8; } .loginPopupForgotPasswordLabel { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } .loginPopupInvalidPasswordMessage { color: #bb552b; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } .loginPopupLoginFailedMessage { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } .loginPopupForgotPasswordResultMessage { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } .loginPopupLoginBtn { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #e7e4de; } .loginPopupCancelBtn { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #e7e4de; } } voucherpurchaseprocess voucher-bread-crumb .breadCrumbGroup { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } voucherpurchaseprocess voucher-bread-crumb .breadcrumb a { color: #495a58; } voucherpurchaseprocess voucher-bread-crumb .breadcrumb a:before { color: #495a58; } voucherpurchaseprocess voucher-bread-crumb .breadcrumb .current { color: #495a58; } .basketWrapper { background-color: #eae8e2; border-color: var(--brand-line); } .basketWrapper .basket .basketCounts .glyphicon.glyphicon-shopping-cart { color: #495a58; } .basketWrapper .basket .basketCounts .basketTotalItemsCount { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } .basketWrapper .basket .basketTotalItemsPrice { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } .basketWrapper .basketItemsWrapper { box-shadow: none; } .basketWrapper .basketItemsWrapper .basketItems { background-color: #e7e4de; border-color: var(--brand-line); } .basketWrapper .basketItemsWrapper .basketItems .basketItem { border-bottom-color: var(--brand-line); } .basketWrapper .basketItemsWrapper .basketItems .basketItem .basketItemName { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } .basketWrapper .basketItemsWrapper .basketItems .basketItem .basketItemPrice { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } .basketWrapper .basketItemsWrapper .basketCheckOutMenu { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } .basketIcon .basketIconTotalItemsCount { background-color: #e7e4de; color: #303636; } spinner .spinnerIcon { color: #303636; } spinner .spinnerText { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ffffff; } @media (max-width: 480px) { .spinnerIcon { color: #303636; } } .voucherCategoryDisplay .page1NoVoucherText { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #495a58; } .voucherCategoryDisplay .page1NoMenuItemText { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #495a58; } .voucherCategoryDisplay .page1SearchBoxContainer { background-color: #ffffff; border-color: var(--brand-line); } .voucherCategoryDisplay .page1SearchBoxInput { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } .voucherCategoryDisplay .page1SearchBoxIcon { color: #495a58; } .voucherCategoryDisplay .page1TextMenuContainer { background-color: #ffffff; border-color: var(--brand-line); } .voucherCategoryDisplay #page1TextMenuHeader { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #495a58; } .voucherCategoryDisplay .page1TextMenuItem { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } .voucherCategoryDisplay .page1TitlesMenuContainer { background-color: #ffffff; border-color: var(--brand-line); } .voucherCategoryDisplay .page1TitlesMenuItemContainer { background-color: #ffffff; } .voucherCategoryDisplay .page1TilesMenuTitle { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; background-color: #e7e4de; } .voucherCategoryDisplay .page1TilesMenuItem { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #495a58; } .voucherCategoryDisplay .page1SearchBoxInputMob { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; background-color: #e7e4de; } .voucherCategoryDisplay #page1TextMenuHeaderMob { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; background-color: #ffffff; } .voucherCategoryDisplay #page1TextMenuSubHeaderMob { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #495a58; background-color: #efede8; border-bottom-color: var(--brand-line); } .voucherCategoryDisplay .page1TextMenuItemMob { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #495a58; background-color: #efede8; border-bottom-color: var(--brand-line); } .voucherCategoryDisplay .page1TitlesMenuItemContainerMob { background-color: #efede8; border-color: var(--brand-line); } .voucherCategoryDisplay .page1TilesMenuTitleMob { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; background-color: #efede8; } voucher-refine-area .voucherRefineAreaContainer { background-color: #ffffff; border-color: var(--brand-line); } voucher-refine-area .filterSummaryWrapper .filters { border-color: var(--brand-line); } voucher-refine-area .page2HomeIconStyle { color: #495a58; } voucher-refine-area .refineVoucherT { background-color: #e7e4de; border-color: #e7e4de; } voucher-refine-area .refineVoucherT input { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } voucher-refine-area .refineVoucherT input::-webkit-input-placeholder { color: rgba(48, 54, 54, 0.5); } voucher-refine-area .refineVoucherT input:-moz-placeholder { color: rgba(48, 54, 54, 0.5); } voucher-refine-area .refineVoucherT input::-moz-placeholder { color: rgba(48, 54, 54, 0.5); } voucher-refine-area .refineVoucherT input:-ms-input-placeholder { color: rgba(48, 54, 54, 0.5); } voucher-refine-area .refineVoucherT input #page2SearachFieldIcon-search { color: #495a58; } voucher-refine-area #page2SearachFieldIcon { color: #495a58; } voucher-refine-area .sortingContainerLabel { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } voucher-refine-area .page2PriceRangeLabel { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } voucher-refine-area span#page2SortIconTriangleBottom, voucher-refine-area span#page2SortIconTriangleTop { color: #495a58; } voucher-refine-area #page2SortIconTriangleBottom.selectedOrder, voucher-refine-area #page2SortIconTriangleTop.selectedOrder { color: #e7e4de; } voucher-refine-area .slider.slider-horizontal { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; border-color: #303636; color: #303636; } voucher-refine-area .slider.slider-horizontal .slider-track { background-color: #e7e4de; } voucher-refine-area .slider.slider-horizontal .slider-track .slider-track-low, voucher-refine-area .slider.slider-horizontal .slider-track .slider-track-high, voucher-refine-area .slider.slider-horizontal .slider-track .slider-selection { background-color: #e7e4de; } voucher-refine-area .slider.slider-horizontal .slider-track .slider-selection { background-color: #ffffff; } voucher-refine-area .slider.slider-horizontal .tooltip { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } voucher-refine-area .slider.slider-horizontal .tooltip .tooltip-inner { background-color: #ffffff; color: #303636; } vouchercard .voucherCardContainerStyle { background-color: #ffffff; border-color: var(--brand-line); } vouchercard .voucherDetailPaneVoucherTitle { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #495a58; } vouchercard .mobVoucherDetailPaneVoucherTitle { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #495a58; } vouchercard .voucherDetailPaneVoucherPrice { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #495a58; } vouchercard .mobVoucherDetailPaneVoucherPrice { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #495a58; } vouchercard .voucherDetailPaneVoucherInfo { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } vouchercard .mobVoucherDetailPaneVoucherInfo { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } vouchercard .commonButton, vouchercard login .loginPopupLoginBtn, login vouchercard .loginPopupLoginBtn, vouchercard login .loginPopupCancelBtn, login vouchercard .loginPopupCancelBtn { border-color: #303636; } vouchercard .voucherDetailPaneAddToBasketBtnLabel { color: #303636; font-weight: 400; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } vouchercard .voucherDetailPaneMoreInfoBtnLabel { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } vouchercard .mobVoucherDetailPaneMoreInfoBtnLabel { color: #ffffff; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } vouchercard .mobVoucherDetailPaneAddToBasketBtnLabel { color: #ffffff; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .modalHeaderTexTitleLabel { color: #495a58; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .modalHeaderTextPriceLabel { color: #495a58; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .modModalHeaderTextTitleLabel { color: #495a58; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .mobModalHeaderTextPriceLabel { color: #495a58; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .voucherOverviewTitle, voucherdetailsdialog .voucherExpiryDetailTitle, voucherdetailsdialog .voucherTermsTitle, voucherdetailsdialog .voucherOptionsTitle { font-weight: 400; color: #495a58; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .voucherOverviewInfo, voucherdetailsdialog .voucherExpiryDetailInfo, voucherdetailsdialog .voucherExpiryVoucherExpiryFromDate, voucherdetailsdialog .voucherExpiryVoucherDuration, voucherdetailsdialog .voucherTermsInfo, voucherdetailsdialog .voucherOptionsDesc, voucherdetailsdialog .voucherOptionsPrice { font-weight: 400; color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-device-width: 768px) { voucherdetailsdialog .voucherOverviewTitle, voucherdetailsdialog .voucherExpiryDetailTitle, voucherdetailsdialog .voucherTermsTitle { font-weight: 400; color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .voucherOverviewInfo, voucherdetailsdialog .voucherExpiryDetailInfo, voucherdetailsdialog .voucherExpiryVoucherExpiryFromDate, voucherdetailsdialog .voucherExpiryVoucherDuration, voucherdetailsdialog .voucherTermsInfo { font-weight: 400; color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } } voucherdetailsdialog .mobVoucherOptionsTitle { font-weight: 400; color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .mobVoucherOptionsDesc, voucherdetailsdialog .mobVoucherOptionsPrice { font-weight: 400; color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .voucherOptionsAddToBasket { color: #303636; font-weight: 400; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .voucherDetailsDialogCloseBtnFont { color: #303636; font-weight: 400; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .mobVoucherOptionsAddToBasketBtn, voucherdetailsdialog .mobVoucherOptionsAddToBasket { color: #ffffff; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .voucherOptions .info { border-top-color: var(--brand-line) !important; border-bottom-color: var(--brand-line) !important; } voucher-summary .basketheading { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #495a58; } voucher-summary .tableBgColor { background-color: #ffffff; border-color: var(--brand-line); } voucher-summary .item-head { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } voucher-summary .price-head { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } voucher-summary .action-head { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } voucher-summary .item-content { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } voucher-summary .price-content { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } voucher-summary .total-foot { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #495a58; } voucher-summary .table > thead > tr > th { border-bottom-color: var(--brand-line); } voucher-summary .table > tfoot > tr > th { border-top-color: var(--brand-line); } #page3 .intrestedheading { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #495a58; } #page3 vouchercard .voucherCardContainerStyle { background-color: #ffffff; border-color: var(--brand-line); } #page3 vouchercard .voucherTitleItem { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #495a58; } #page3 vouchercard .voucherPriceItem { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #495a58; } #page3 .deskcheckout, #page3 .deskback { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #303636; font-weight: 400; } #page3 .moreBtn, #page3 .addBtn { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #303636; font-weight: 400; } #page3 .mobback, #page3 .mobcheckout { color: #303636; background-color: #e7e4de; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } @media (max-width: 767px) { #summary .item-head { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } #summary .price-head { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } #summary .action-head { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } #summary .item-content { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #ffffff; } #summary .price-content { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #ffffff; } #summary .total-foot { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #303636; } } #yourDetails { background-color: #ffffff; border-color: var(--brand-line); } #yourDetails #YourDetailsHeadingTextLabel { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #495a58; } #yourDetails .yourDetailsFieldLabel { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } #yourDetails .yourDetailsFieldInput { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; background-color: #efede8; } #yourDetails .yourDetailsFieldInputDropdown { background-color: #efede8; } #yourDetails .yourDetailsFieldInputDropdown .fancyArrow { color: #ffffff; background-color: #5b6563; } #yourDetails .yourDetailsFieldInputDropdown select { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #yourDetails #marketingCheckBoxLabel { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } #yourDetails #marketingCheckBoxTick { background-color: #ffffff; } #yourDetails #marketingCheckBoxTick::after { border-color: #ffffff; } #yourDetails #marketingCheckBoxInput:checked ~ #marketingCheckBoxTick { background-color: #303636; } #yourDetails #marketingCheckBoxInputMob:checked ~ #marketingCheckBoxTick { background-color: #303636; } #yourDetails .checkOutGuestFont, #yourDetails .createWebAccountFont { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } #page45ContinueBtn { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } #page45MethodBtn { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } #page45MethodBtn:disabled { color: rgba(48, 54, 54, 0.5); } @media (max-width: 480px) { #yourDetails #YourDetailsHeadingTextLabel { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #495a58; } #yourDetails .yourDetailsFieldLabel { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } #yourDetails .yourDetailsFieldInput { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } #yourDetails .yourDetailsFieldInputDropdown select { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #yourDetails #marketingCheckBoxLabel { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } #yourDetails .checkOutGuestFont, #yourDetails .createWebAccountFont { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } } #mobPage45ContinueBtn { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #303636; background-color: #e7e4de; } #mobPage45MethodBtn { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #303636; background-color: #e7e4de; } #mobPage45MethodBtn:disabled { color: rgba(48, 54, 54, 0.5); } #page4 .deliveryTitle { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #495a58; } delivery-details .errorfont { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } delivery-details .visible-lg .delivery-container { background-color: #ffffff; border-color: var(--brand-line); } delivery-details .visible-lg .delivery-container table tr { border-bottom-color: var(--brand-line); } delivery-details .visible-lg .promobtn { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } delivery-details .visible-lg .header { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } delivery-details .visible-lg .voucherDeliveryAddress select, delivery-details .visible-lg .inputDropdown { background-color: #efede8; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #303636; } delivery-details .visible-lg .vouchertext { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } delivery-details .visible-lg .deliverytext { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } delivery-details .visible-lg .pointer { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } delivery-details .visible-lg .total { border-bottom-color: var(--brand-line); } delivery-details .visible-lg .voucherinput { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #303636; background-color: #e7e4de; } delivery-details .visible-lg .hr-mobile { border-bottom-color: var(--brand-line); } delivery-details .visible-lg .pricetext { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } delivery-details .visible-lg .totallabel { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #495a58; } delivery-details .visible-lg #combineCheckBoxLabel { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } delivery-details .visible-lg .combineCheckBoxTick { background-color: #ffffff; } delivery-details .visible-lg .combineCheckBoxTick::after { border-color: #ffffff; } delivery-details .visible-lg .combineCheckBoxTick:hover { background-color: #ffffff; } delivery-details .visible-lg #combineCheckboxInput:checked ~ #combineCheckBoxTick { background-color: #303636; } delivery-details .visible-lg .inputTextarea { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } delivery-details .visible-lg textarea { background-color: #e7e4de; } delivery-details .visible-lg .counterIcon { color: #303636; background-color: #efede8; } delivery-details .visible-xs .voucherDeliveryAddress select { background-color: #efede8; } delivery-details .visible-xs .voucherContainer { background-color: #ffffff; } delivery-details .visible-xs .voucherContainer .voucherNamePriceContainer .deliveryDetailsPrice, delivery-details .visible-xs .voucherContainer .voucherNamePriceContainer .deliveryDetailsVoucherTypeName { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #495a58; } delivery-details .visible-xs .voucherContainer .personlizeMessageMobile { background-color: #e7e4de; } delivery-details .visible-xs .voucherContainer .deliveryAddressContainer { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #495a58; background-color: #efede8; } delivery-details .visible-xs .voucherContainer .deliveryMethodContainer { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #495a58; } delivery-details .visible-xs .voucherContainer textarea { background-color: #efede8; } delivery-details .visible-xs .voucherContainer .PMCReadOnly { border-top-color: var(--brand-line); border-bottom-color: var(--brand-line); } delivery-details .visible-xs .voucherContainer .PMCReadOnly div:first-child { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } delivery-details .visible-xs .voucherContainer .personlizeMessageContainer { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; background-color: #e7e4de; } delivery-details .visible-xs .voucherContainer .DMDEContainer { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } delivery-details .visible-xs .promoContainer { background-color: #ffffff; } delivery-details .visible-xs .promoContainer .promoHeader { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } delivery-details .visible-xs .promoContainer .promoInput input { background-color: #e7e4de; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } delivery-details .visible-xs .promoContainer .promoInput button { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ffffff; } delivery-details .visible-xs .CAPAInputContainer { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #303636; font-weight: 400; } delivery-details .visible-xs .ammountSummaryContainer tr .seprator { border-top-color: var(--brand-line); } delivery-details .visible-xs .ammountSummaryContainer tr td { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } delivery-details .visible-xs .deleteVoucherContainer { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } delivery-address .VDSDContainer { background-color: #ffffff; } delivery-address .visible-lg .addDeliveryAddressEmailHeading, delivery-address .visible-lg .addDeliveryAddressPostHeading { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #495a58; } delivery-address .visible-lg legend { border-bottom-color: var(--brand-line); } delivery-address .visible-lg hr { border-top-color: var(--brand-line); } delivery-address .visible-lg .addDeliveryAddressLabelText { color: #303636; font-weight: 400; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } delivery-address .visible-lg .phoneInput, delivery-address .visible-lg .postInput, delivery-address .visible-lg .townInput, delivery-address .visible-lg .address2Input, delivery-address .visible-lg .address1Input, delivery-address .visible-lg .emailInput, delivery-address .visible-lg .surnameInput, delivery-address .visible-lg .forenameInput { background-color: #efede8; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } delivery-address .visible-lg .titleDropdown .inputdropdown, delivery-address .visible-lg .countyDropdown .inputdropdown { color: #303636; background-color: #efede8; font-weight: 400; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } delivery-address .visible-lg .titleDropdown .counterIcon, delivery-address .visible-lg .countyDropdown .counterIcon { color: #ffffff; background-color: #5b6563; } delivery-address .visible-lg .cancleButton, delivery-address .visible-lg .addButton { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #303636; font-weight: 400; } delivery-address .visible-sm .addDeliveryAddressEmailHeading, delivery-address .visible-sm .addDeliveryAddressPostHeading { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #495a58; } delivery-address .visible-sm legend { border-bottom-color: var(--brand-line); } delivery-address .visible-sm hr { border-top-color: var(--brand-line); } delivery-address .visible-sm .addDeliveryAddressLabelText { color: #303636; font-weight: 400; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } delivery-address .visible-sm .phoneInput, delivery-address .visible-sm .postInput, delivery-address .visible-sm .townInput, delivery-address .visible-sm .address2Input, delivery-address .visible-sm .address1Input, delivery-address .visible-sm .emailInput, delivery-address .visible-sm .surnameInput, delivery-address .visible-sm .forenameInput { background-color: #efede8; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } delivery-address .visible-sm .titleDropdown .inputdropdown, delivery-address .visible-sm .countyDropdown .inputdropdown { color: #303636; background-color: #efede8; font-weight: 400; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } delivery-address .visible-sm .titleDropdown .counterIcon, delivery-address .visible-sm .countyDropdown .counterIcon { color: #ffffff; background-color: #5b6563; } delivery-address .visible-sm .cancleButton, delivery-address .visible-sm .addButton { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #303636; background-color: #e7e4de; } voucherdeliveryshippingdate #VDSD .calendarLoading .glyphicon-refresh { color: #303636; } voucherdeliveryshippingdate .loading { color: #ffffff; } voucherdeliveryshippingdate .VDSDPopUpOpacity { background-color: #303636; } voucherdeliveryshippingdate .VDSDContainer { background-color: #ffffff; } voucherdeliveryshippingdate .VDSDHeader { font-weight: 400; color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdeliveryshippingdate .VDSDDetailSection { border-bottom-color: var(--brand-line); border-top-color: var(--brand-line); } voucherdeliveryshippingdate .yearMonthContainer { font-weight: 400; color: #495a58; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdeliveryshippingdate .VDSDDetailSection .calendar table caption { background-color: #efede8; border-color: #ffffff; } voucherdeliveryshippingdate .VDSDDetailSection .calendar table caption .prevMonthIcon { color: #5b6563; } voucherdeliveryshippingdate .VDSDDetailSection .calendar table caption .nextMonthIcon { color: #5b6563; } voucherdeliveryshippingdate .VDSDDetailSection .calendar table thead tr th { border-color: #ffffff; } voucherdeliveryshippingdate .calendar table thead tr th { color: #303636; background-color: #ffffff; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } voucherdeliveryshippingdate #VDSD .VDSDContainer .VDSDDetailSection .calendar table tbody tr td { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdeliveryshippingdate .VDSDContainer .VDSDDetailSection .calendar table tbody tr td { border-color: #ffffff; } voucherdeliveryshippingdate .calendar .calendarSelectedDayStyle { background-color: #bb552b; color: #ffffff; } voucherdeliveryshippingdate .calendar .calendarDisableDayStyle { background-color: #e7e4de; color: #5b6563; } voucherdeliveryshippingdate .calendar .calendarDefaultDayStyle { background-color: #efede8; color: #303636; } voucherdeliveryshippingdate .VDSDContainer .VDSDDetailSection .deliveryMethod label { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #303636; font-weight: 400; } voucherdeliveryshippingdate .notIE.fullWidth .inputDropdown, voucherdeliveryshippingdate drop-down .inputDropdown, voucherdeliveryshippingdate drop-down .inputDropdown { background-color: #e7e4de; color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } voucherdeliveryshippingdate .VDSDContainer .VDSDDetailSection .EDDContainer { background-color: #efede8; } voucherdeliveryshippingdate .VDSDContainer .VDSDDetailSection .EDDContainer .EDDHeader { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #303636; font-weight: 400; } voucherdeliveryshippingdate #VDSD .VDSDContainer .VDSDDetailSection .EDDContainer .EDDValue { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #303636; font-weight: 400; } voucherdeliveryshippingdate .VDSDContainer .VDSDFooter .commonButton, voucherdeliveryshippingdate .VDSDContainer .VDSDFooter login .loginPopupLoginBtn, login voucherdeliveryshippingdate .VDSDContainer .VDSDFooter .loginPopupLoginBtn, voucherdeliveryshippingdate .VDSDContainer .VDSDFooter login .loginPopupCancelBtn, login voucherdeliveryshippingdate .VDSDContainer .VDSDFooter .loginPopupCancelBtn { font-weight: 400; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #303636; background-color: #e7e4de; } @media only screen and (max-device-width: 768px) { voucherdeliveryshippingdate .VDSDDetailSection .calendar table caption { background-color: #ffffff; border-color: #ffffff; } voucherdeliveryshippingdate .VDSDContainer { background-color: #efede8; } voucherdeliveryshippingdate .VDSDContainer .VDSDDetailSection .EDDContainer { background-color: #ffffff; } voucherdeliveryshippingdate .VDSDHeader { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdeliveryshippingdate .VDSDContainer .VDSDDetailSection .deliveryMethod label { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #303636; font-weight: 400; } voucherdeliveryshippingdate .VDSDContainer .VDSDDetailSection .EDDContainer .EDDHeader { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #303636; font-weight: 400; } voucherdeliveryshippingdate #VDSD .VDSDContainer .VDSDDetailSection .EDDContainer .EDDValue { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #303636; font-weight: 400; } } #page4 .mobcheckout, #page4 .mobback, #page4 .deskback, #page4 .deskcheckout { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } #paymentBillingAddressSurround #PaymentBillingAddressHeading { color: #495a58; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #ffffff; border-color: var(--brand-line); } #paymentBillingAddressSurround .billingBgColor { background-color: #ffffff; border-color: var(--brand-line); } #paymentBillingAddressSurround .postLabel, #paymentBillingAddressSurround .countryLabel, #paymentBillingAddressSurround .countyLabel, #paymentBillingAddressSurround .townLabel, #paymentBillingAddressSurround .address2Label, #paymentBillingAddressSurround .address1Label { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #paymentBillingAddressSurround #Postcode, #paymentBillingAddressSurround #Town, #paymentBillingAddressSurround #Address1, #paymentBillingAddressSurround #Address2 { background-color: #efede8; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } #paymentBillingAddressSurround .countryDropdown, #paymentBillingAddressSurround .countyDropdown { color: #303636; background-color: #efede8; font-weight: 400; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } #paymentBillingAddressSurround .countryDropdown .counterIcon, #paymentBillingAddressSurround .countyDropdown .counterIcon { color: #ffffff; background-color: #5b6563; } #paymentBillingAddressSurround .sameAsLeadGuestCheckboxLabel { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #paymentBillingAddressSurround .sameAsLeadGuestCheckbox { background-color: #ffffff; } #paymentBillingAddressSurround .control input:checked ~ .sameAsLeadGuestCheckbox { background-color: #303636; } #paymentBillingAddressSurround .controlCheckbox .sameAsLeadGuestCheckbox:after { border-color: #ffffff; } page5 #PaymentCardDetailHeading { color: #495a58; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #ffffff; border-color: var(--brand-line); } page5 termsandconditions .dailogBg { background-color: #ffffff; } page5 termsandconditions .tncTitle { color: #303636; font-weight: 400; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } page5 termsandconditions .crossIcon { color: #303636; } page5 termsandconditions .modal-header { border-bottom-color: var(--brand-line) !important; } page5 termsandconditions .voucherfont { color: #495a58; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } page5 termsandconditions .termsdescfont { color: #495a58; font-weight: 400; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } page5 termsandconditions .tncCloseBtn { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #303636; font-weight: 400; } page5 .termsCheckboxWrapper { background-color: #ffffff; border-color: #303636; } page5 .termsCheckboxWrapper .agreementfont { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } page5 .termsCheckboxWrapper .termsfont { color: #303636; font-weight: 400; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } page5 .termsCheckboxWrapper .control input:checked ~ .custoCheckbox { background-color: #303636; } page5 .termsCheckboxWrapper .controlCheckbox .custoCheckbox:after { border-color: #ffffff; } page5 .cardDetailsBgColor { background-color: #ffffff; } page5 .page5ButtonSurround .deskcheckout, page5 .page5ButtonSurround .deskback { color: #303636; font-weight: 400; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } page5 .page5ButtonSurround .mobcheckout, page5 .page5ButtonSurround .mobback { background-color: #e7e4de; color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } form[name=verifonePaymentForm] #rowFor_cardholdername .labelDiv { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } form[name=verifonePaymentForm] #rowFor_cardholdername #cardholdername { background-color: #efede8; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } form[name=verifonePaymentForm] #rowFor_pan .labelDiv { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } form[name=verifonePaymentForm] #rowFor_pan #pan { background-color: #efede8; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } form[name=verifonePaymentForm] #rowFor_cardType .labelDiv { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } form[name=verifonePaymentForm] #rowFor_cardType #cardTypeDropDown { color: #303636; background-color: #efede8; font-weight: 400; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } form[name=verifonePaymentForm] #rowFor_cardType .counterIcon { color: #ffffff; background-color: #5b6563; } form[name=verifonePaymentForm] #rowFor_startdateArea .labelDiv { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } form[name=verifonePaymentForm] #rowFor_startdateArea .yearSelectID #startYearDropDown { color: #303636; background-color: #efede8; font-weight: 400; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } form[name=verifonePaymentForm] #rowFor_startdateArea .yearSelectID .counterIcon { color: #ffffff; background-color: #5b6563; } form[name=verifonePaymentForm] #rowFor_startdateArea .monthSelectID #startMonthDropDown { color: #303636; background-color: #efede8; font-weight: 400; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } form[name=verifonePaymentForm] #rowFor_startdateArea .monthSelectID .counterIcon { color: #ffffff; background-color: #5b6563; } form[name=verifonePaymentForm] #rowFor_expirydateArea .labelDiv { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } form[name=verifonePaymentForm] #rowFor_expirydateArea .yearSelectID #expiryYearDropDown { color: #303636; background-color: #efede8; font-weight: 400; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } form[name=verifonePaymentForm] #rowFor_expirydateArea .yearSelectID .counterIcon { color: #ffffff; background-color: #5b6563; } form[name=verifonePaymentForm] #rowFor_expirydateArea .monthSelectID #expiryMonthDropDown { color: #303636; background-color: #efede8; font-weight: 400; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } form[name=verifonePaymentForm] #rowFor_expirydateArea .monthSelectID .counterIcon { color: #ffffff; background-color: #5b6563; } form[name=verifonePaymentForm] #rowFor_csc .labelDiv { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } form[name=verifonePaymentForm] #rowFor_csc #csc { background-color: #efede8; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } #CardDetailsSurround #CardTypeRow #CardTypeLabel { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #CardDetailsSurround #CardTypeRow #DropDownCardType { color: #303636; background-color: #efede8; font-weight: 400; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } #CardDetailsSurround #CardNumberRow #CardNumberLabel { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #CardDetailsSurround #CardNumberRow #CardNumberPaymentDetails { background-color: #efede8; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } #CardDetailsSurround #CardHoldersNameRow #CardHoldersNameLabel { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #CardDetailsSurround #CardHoldersNameRow #CardHoldersNamePaymentDetails { background-color: #efede8; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } #CardDetailsSurround #ValidToRow #ValidToLabel { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #CardDetailsSurround #ValidToRow #ValidToPaymentDetails { background-color: #efede8; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } #CardDetailsSurround #CardSecurityCodeRow #CardSecurityCodeLabel { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #CardDetailsSurround #CardSecurityCodeRow #CardSecurityCodePaymentDetails { background-color: #efede8; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } #page6 .heading { color: #495a58; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } #page6 .subHeading { color: #495a58; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #page6 .deliveryDetailsHeading { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #page6 .deskBackBtn, #page6 .mobBackBtn { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #page6 .delivery-details .visible-lg .delivery-container { background-color: #ffffff; border-bottom-color: var(--brand-line); } #page6 .delivery-details .visible-lg .header { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } #page6 .delivery-details .visible-lg .pricetext, #page6 .delivery-details .visible-lg .vouchertext { color: #303636; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #page6 .delivery-details .visible-lg .deliverytext { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } #page6 .delivery-details .visible-lg .inputTextarea { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #303636; } #page6 .delivery-details .visible-lg .totallabel { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #495a58; } #page6 .delivery-details .visible-lg .total { border-color: var(--brand-line) !important; } #page6 .delivery-details .visible-lg .delivery-container table tr { border-bottom-color: var(--brand-line); } /* ===== Part 2: brand layer ===== */ /* ===================================================================== The Great House Lavenham — engine theme brand layer (generated by retheme.py) Palette: page #e5e3dc, ink #303636, dark #495a58, accent #bb552b, sand #d8d4ca, linen #efede8, paper #ffffff. Font: Montserrat Loaded last (from the wrapper), after any shared frame stylesheet. ===================================================================== */ :root { --brand-cream: #e5e3dc; --brand-ink: #303636; --brand-corten: #495a58; --brand-bronze: #bb552b; --brand-sand: #d8d4ca; --brand-linen: #efede8; --brand-cal-avail: #e1ddd4; --brand-cal-limited: #c4beaf; --brand-slider-handle: #303636; --brand-paper: #ffffff; --brand-muted: #5b6563; --brand-line: rgba(48, 54, 54, 0.12); --brand-line-strong: rgba(48, 54, 54, 0.25); --brand-font: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; --brand-texture: none; --brand-heading-font: "Bebas Neue", Impact, "Arial Narrow", sans-serif; /* variables consumed by UserVoucher.css */ --buttonBackgroundColor: #303636; --buttonTextColor: #e5e3dc; --buttonBackgroundColorHover: #495a58; --buttonTextColorHover: #e5e3dc; --buttonBorder: 1px solid #303636; --buttonBorderHover: 1px solid #495a58; --checkboxBackgroundColor: #ffffff; --checkboxTickColor: #303636; } /* ---------- Page ---------- */ html body#alacerHotelSurroundPageBody { 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; } #alacerHotelSurroundPageBody main, #alacerHotelSurroundPageBody 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 */ #alacerHotelSurroundPageBody #engineAreaContainer, #alacerHotelSurroundPageBody #engineAreaContainer *:not(.fa):not(.glyphicon):not([class*="fa-"]):not([class*="glyphicon-"]):not(i), #alacerHotelSurroundPageBody #headerBar, #alacerHotelSurroundPageBody #headerBar *:not(.fa):not(.glyphicon):not([class*="fa-"]):not([class*="glyphicon-"]):not(i), #alacerHotelSurroundPageBody .modal, #alacerHotelSurroundPageBody .modal *:not(.fa):not(.glyphicon):not([class*="fa-"]):not([class*="glyphicon-"]):not(i), #alacerHotelSurroundPageBody .bootstrap-dialog *:not(.fa):not(.glyphicon):not([class*="fa-"]):not([class*="glyphicon-"]):not(i) { font-family: var(--brand-font) !important; } #alacerHotelSurroundPageBody #engineAreaContainer h1, #alacerHotelSurroundPageBody #engineAreaContainer h2, #alacerHotelSurroundPageBody #engineAreaContainer h3, #alacerHotelSurroundPageBody #engineAreaContainer h4, #alacerHotelSurroundPageBody .modal h1, #alacerHotelSurroundPageBody .modal h2, #alacerHotelSurroundPageBody .modal h3, #alacerHotelSurroundPageBody .modal h4 { font-weight: 500 !important; letter-spacing: -0.02em; color: #495a58; } #alacerHotelSurroundPageBody #engineAreaContainer a:not(.btn):not([class*="Btn"]):not([class*="btn"]):not([class*="Button"]) { color: var(--brand-bronze); } #alacerHotelSurroundPageBody #engineAreaContainer a:not(.btn):not([class*="Btn"]):not([class*="btn"]):not([class*="Button"]):hover { color: var(--brand-corten); } /* ---------- Header (replaces old site nav) ---------- */ #alacerHotelSurroundPageBody .brand-header { background: var(--brand-cream); border-bottom: 1px solid rgba(48, 54, 54, 0.12); color: #303636; margin: 0 0 2.5rem 0; padding: 0; position: relative; } #alacerHotelSurroundPageBody .brand-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 110px; padding: 0 50px; box-sizing: border-box; } #alacerHotelSurroundPageBody .brand-logo { display: flex; align-items: center; gap: 18px; text-decoration: none; border: 0; background: none; color: #303636; } #alacerHotelSurroundPageBody .brand-logo svg { display: block; width: 80px; height: auto; } #alacerHotelSurroundPageBody .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; } #alacerHotelSurroundPageBody .brand-wordmark { font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif !important; font-size: 28px; line-height: 1; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; color: #303636; } #alacerHotelSurroundPageBody .brand-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #alacerHotelSurroundPageBody .brand-header-side { display: flex; align-items: center; gap: 22px; } #alacerHotelSurroundPageBody .brand-accolade, #alacerHotelSurroundPageBody .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: #d8d4ca; line-height: 1; text-decoration: none; } #alacerHotelSurroundPageBody .brand-back::before { content: "\2190"; font-size: 14px; letter-spacing: 0; transition: transform .2s ease; } #alacerHotelSurroundPageBody .brand-back:hover::before { transform: translateX(-3px); } #alacerHotelSurroundPageBody .brand-accolade img { display: inline-block; height: 12px; width: auto; } /* light header: page-coloured band, ink logo, quiet grey labels */ #alacerHotelSurroundPageBody .brand-header--light .brand-accolade, #alacerHotelSurroundPageBody .brand-header--light .brand-back { color: var(--brand-muted); } #alacerHotelSurroundPageBody .brand-header--light .brand-back:hover { color: var(--brand-ink); } /* centred header: back link | logo | accolade */ #alacerHotelSurroundPageBody .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; } #alacerHotelSurroundPageBody .brand-header--centred .brand-header-left { justify-content: flex-start; } #alacerHotelSurroundPageBody .brand-header--centred .brand-header-right { justify-content: flex-end; } #alacerHotelSurroundPageBody .brand-header--centred.brand-header--wordmark .brand-logo { flex-direction: column; gap: 14px; } @media (max-width: 767.98px) { #alacerHotelSurroundPageBody .brand-header { margin-bottom: 1.5rem; } #alacerHotelSurroundPageBody .brand-header-inner { height: 76px; padding: 0 20px; } #alacerHotelSurroundPageBody .brand-logo svg { width: 60px; } #alacerHotelSurroundPageBody .brand-wordmark { font-size: 20px; } #alacerHotelSurroundPageBody .brand-accolade, #alacerHotelSurroundPageBody .brand-back { font-size: 10px; letter-spacing: 1.1px; } #alacerHotelSurroundPageBody .brand-accolade img { height: 11px; } #alacerHotelSurroundPageBody .brand-header--centred .brand-header-inner { grid-template-columns: 1fr; justify-items: center; row-gap: 12px; height: auto; padding: 18px 20px; } #alacerHotelSurroundPageBody .brand-header--centred .brand-header-left { order: 2; justify-content: center; } #alacerHotelSurroundPageBody .brand-header--centred .brand-logo { order: 1; } #alacerHotelSurroundPageBody .brand-header--centred .brand-header-right { display: none; } #alacerHotelSurroundPageBody .brand-header--centred.brand-header--wordmark .brand-logo { gap: 10px; } } /* ---------- Notices carried over from the old wrapper (e.g. dietary / waiting-list notes) ---------- */ #alacerHotelSurroundPageBody #note, #alacerHotelSurroundPageBody #waitlist, #alacerHotelSurroundPageBody #termsandconditions, #alacerHotelSurroundPageBody .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; } #alacerHotelSurroundPageBody #note { font-family: "Bebas Neue", Impact, "Arial Narrow", sans-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: none; } #alacerHotelSurroundPageBody #waitlist b, #alacerHotelSurroundPageBody #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; } #alacerHotelSurroundPageBody #termsandconditions { font-size: 13px !important; margin-bottom: 2rem !important; } #alacerHotelSurroundPageBody #waitlist a, #alacerHotelSurroundPageBody #termsandconditions a, #alacerHotelSurroundPageBody .brand-notice a { color: var(--brand-ink) !important; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 767.98px) { #alacerHotelSurroundPageBody #note { font-size: 19px !important; margin-bottom: 12px !important; } #alacerHotelSurroundPageBody #waitlist, #alacerHotelSurroundPageBody .brand-notice { font-size: 13px !important; line-height: 1.5; } #alacerHotelSurroundPageBody #termsandconditions { font-size: 12px !important; margin-bottom: 1rem !important; } #alacerHotelSurroundPageBody #waitlist b, #alacerHotelSurroundPageBody #waitlist strong { padding: 10px 0; } } #alacerHotelSurroundPageBody #waitlist a:hover, #alacerHotelSurroundPageBody #termsandconditions a:hover { color: var(--brand-corten) !important; } /* ---------- Headings in the heading font (only emitted when heading_font_family is set) ---------- */ html body#alacerHotelSurroundPageBody: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#alacerHotelSurroundPageBody: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#alacerHotelSurroundPageBody:not(#brand-heading-boost) .bootstrap-dialog-title:not(.fa):not(.glyphicon):not([class*="fa-"]):not([class*="glyphicon-"]):not(i), html body#alacerHotelSurroundPageBody: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: "Bebas Neue", Impact, "Arial Narrow", sans-serif !important; font-weight: 400 !important; letter-spacing: 0.01em !important; font-size-adjust: none; text-transform: uppercase !important; } /* ---------- Footer ---------- */ #alacerHotelSurroundPageBody .brand-footer { font-family: var(--brand-font); color: var(--brand-cream); margin: 3rem 0 0 0; clear: both; } #alacerHotelSurroundPageBody .brand-footer a { text-decoration: none; color: var(--brand-cream); } #alacerHotelSurroundPageBody .brand-footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; padding: 56px 50px; background: #495a58 var(--brand-texture) repeat; } #alacerHotelSurroundPageBody .brand-contact { display: flex; flex-direction: column; gap: 18px; } #alacerHotelSurroundPageBody .brand-footer-title { font-size: 32px; line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; color: var(--brand-paper); margin-bottom: 6px; } #alacerHotelSurroundPageBody .brand-contact-item { font-size: 14px; line-height: 1.5; } #alacerHotelSurroundPageBody .brand-label { font-size: 13px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brand-cream); margin-bottom: 2px; } #alacerHotelSurroundPageBody .brand-links { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; } #alacerHotelSurroundPageBody .brand-strap-name { display: block; font-size: 16px; letter-spacing: 2px; color: #ffffff; margin-bottom: 4px; } #alacerHotelSurroundPageBody .brand-strap { font-size: 14px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: #d8d4ca; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid rgba(216, 212, 202, 0.6); } #alacerHotelSurroundPageBody .brand-links a { font-size: 13px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; } #alacerHotelSurroundPageBody .brand-links a:hover { color: var(--brand-sand); } #alacerHotelSurroundPageBody .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); } #alacerHotelSurroundPageBody .brand-affiliations { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; min-width: 0; } #alacerHotelSurroundPageBody .brand-affiliations img { display: block; height: 30px; width: auto; } #alacerHotelSurroundPageBody .brand-copy { font-size: 12px; color: var(--brand-ink); } @media (max-width: 767.98px) { #alacerHotelSurroundPageBody .brand-footer-top { flex-direction: column; align-items: flex-start; padding: 40px 20px; } #alacerHotelSurroundPageBody .brand-links { align-items: flex-start; text-align: left; } #alacerHotelSurroundPageBody .brand-footer-under { padding: 18px 20px; flex-direction: column; align-items: flex-start; } #alacerHotelSurroundPageBody .brand-affiliations { gap: 14px; max-width: 100%; } } /* ---------- Header bar (login / basket) ---------- */ #alacerHotelSurroundPageBody #headerBar, #alacerHotelSurroundPageBody #headerBar .headerBanner, #alacerHotelSurroundPageBody #headerBar [style*="background-color:white"], #alacerHotelSurroundPageBody #headerBar [style*="background-color: white"] { background-color: transparent !important; } #alacerHotelSurroundPageBody .loginLink, #alacerHotelSurroundPageBody .loginLinkmobile, #alacerHotelSurroundPageBody #headerBar .loginLink, #alacerHotelSurroundPageBody #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; } #alacerHotelSurroundPageBody .loginLink:empty, #alacerHotelSurroundPageBody .loginLinkmobile:empty { display: none; } #alacerHotelSurroundPageBody .loginLink:hover, #alacerHotelSurroundPageBody .loginLinkmobile:hover, #alacerHotelSurroundPageBody #headerBar .loginLink:hover, #alacerHotelSurroundPageBody #headerBar .loginLinkmobile:hover { background: var(--brand-corten) !important; border-color: var(--brand-corten) !important; color: var(--brand-cream) !important; } #alacerHotelSurroundPageBody .logoutButton { color: var(--brand-ink); } /* ---------- Buttons ---------- */ #alacerHotelSurroundPageBody #engineAreaContainer .btn, #alacerHotelSurroundPageBody #engineAreaContainer .commonButton, #alacerHotelSurroundPageBody #engineAreaContainer .commonNavButton, #alacerHotelSurroundPageBody .modal .btn, #alacerHotelSurroundPageBody .modal .commonButton, #alacerHotelSurroundPageBody .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. */ #alacerHotelSurroundPageBody #engineAreaContainer .btn, #alacerHotelSurroundPageBody #engineAreaContainer .commonButton, #alacerHotelSurroundPageBody #engineAreaContainer .commonNavButton, #alacerHotelSurroundPageBody .modal .btn, #alacerHotelSurroundPageBody .modal .commonButton, #alacerHotelSurroundPageBody .bootstrap-dialog .btn, #alacerHotelSurroundPageBody .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; } #alacerHotelSurroundPageBody #engineAreaContainer .btn-block { display: flex; width: 100%; } #alacerHotelSurroundPageBody #engineAreaContainer .hidden, #alacerHotelSurroundPageBody .loginLink.hidden { display: none !important; } #alacerHotelSurroundPageBody .btn-breadcrumb .btn, #alacerHotelSurroundPageBody #alacerBreadcrumbContainer .btn, #alacerHotelSurroundPageBody .input-group-addon, #alacerHotelSurroundPageBody .btn-xs { min-height: 0 !important; display: inline-block; } /* Brand button colours (button_bg etc.): main actions solid, secondary (Login) soft */ #alacerHotelSurroundPageBody #engineAreaContainer .commonNavButton:not(.brand-btn-secondary), #alacerHotelSurroundPageBody #engineAreaContainer .commonButton:not(.loginLink):not(.logoutButton):not(.brand-btn-secondary), #alacerHotelSurroundPageBody #engineAreaContainer .input-group-bookBtn, #alacerHotelSurroundPageBody #engineAreaContainer .roomsPageBookBtn, #alacerHotelSurroundPageBody #engineAreaContainer label.btn:not(.brand-btn-secondary), #alacerHotelSurroundPageBody #page6 .page6NextNavButton, #alacerHotelSurroundPageBody .modal .commonButton:not(.brand-btn-secondary), #alacerHotelSurroundPageBody .bootstrap-dialog .btn-primary { background: #bb552b !important; border-color: #bb552b !important; color: #ffffff !important; font-weight: 700 !important; } #alacerHotelSurroundPageBody #engineAreaContainer .commonNavButton:not(.brand-btn-secondary):hover, #alacerHotelSurroundPageBody #engineAreaContainer .commonButton:not(.loginLink):not(.logoutButton):not(.brand-btn-secondary):hover, #alacerHotelSurroundPageBody #engineAreaContainer .input-group-bookBtn:not(.disabled):hover, #alacerHotelSurroundPageBody #engineAreaContainer label.btn:not(.brand-btn-secondary):hover, #alacerHotelSurroundPageBody #page6 .page6NextNavButton:hover, #alacerHotelSurroundPageBody .modal .commonButton:not(.brand-btn-secondary):hover { background: #9e4522 !important; border-color: #9e4522 !important; color: #ffffff !important; } #alacerHotelSurroundPageBody #engineAreaContainer .commonNavButton:not(.brand-btn-secondary) *, #alacerHotelSurroundPageBody #engineAreaContainer .commonButton:not(.loginLink) * { color: inherit !important; } #alacerHotelSurroundPageBody #engineAreaContainer .input-group-bookBtn.disabled { opacity: .45; } #alacerHotelSurroundPageBody #engineAreaContainer .brand-btn-secondary, #alacerHotelSurroundPageBody #page6 .page6PrevNavButton, #alacerHotelSurroundPageBody .modal .brand-btn-secondary, #alacerHotelSurroundPageBody .loginLink, #alacerHotelSurroundPageBody .loginLinkmobile, #alacerHotelSurroundPageBody #headerBar .loginLink, #alacerHotelSurroundPageBody #headerBar .loginLinkmobile { background: #ffffff !important; border-color: #ffffff !important; color: #bb552b !important; font-weight: 700 !important; } #alacerHotelSurroundPageBody #engineAreaContainer .brand-btn-secondary:hover, #alacerHotelSurroundPageBody #page6 .page6PrevNavButton:hover, #alacerHotelSurroundPageBody .modal .brand-btn-secondary:hover, #alacerHotelSurroundPageBody .loginLink:hover, #alacerHotelSurroundPageBody .loginLinkmobile:hover, #alacerHotelSurroundPageBody #headerBar .loginLink:hover, #alacerHotelSurroundPageBody #headerBar .loginLinkmobile:hover { background: #bb552b !important; border-color: #bb552b !important; color: #ffffff !important; } /* ---------- Form fields ---------- */ #alacerHotelSurroundPageBody #engineAreaContainer input.form-control, #alacerHotelSurroundPageBody #engineAreaContainer select.form-control, #alacerHotelSurroundPageBody #engineAreaContainer textarea.form-control, #alacerHotelSurroundPageBody #engineAreaContainer input[type="text"], #alacerHotelSurroundPageBody #engineAreaContainer input[type="email"], #alacerHotelSurroundPageBody #engineAreaContainer input[type="tel"], #alacerHotelSurroundPageBody #engineAreaContainer input[type="password"], #alacerHotelSurroundPageBody #engineAreaContainer select, #alacerHotelSurroundPageBody #engineAreaContainer textarea, #alacerHotelSurroundPageBody .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); } #alacerHotelSurroundPageBody #engineAreaContainer input:focus, #alacerHotelSurroundPageBody #engineAreaContainer select:focus, #alacerHotelSurroundPageBody #engineAreaContainer textarea:focus, #alacerHotelSurroundPageBody .modal input:focus { border-color: var(--brand-bronze) !important; box-shadow: 0 0 0 1px var(--brand-bronze) !important; outline: none !important; } #alacerHotelSurroundPageBody #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". */ #alacerHotelSurroundPageBody #engineAreaContainer input.invalid, #alacerHotelSurroundPageBody #engineAreaContainer select.invalid, #alacerHotelSurroundPageBody #engineAreaContainer textarea.invalid, #alacerHotelSurroundPageBody #engineAreaContainer .invalid > select, #alacerHotelSurroundPageBody #engineAreaContainer .invalid > .fancyArrow, #alacerHotelSurroundPageBody #engineAreaContainer .invalid select, #alacerHotelSurroundPageBody #engineAreaContainer .invalid span.fancyArrow, #alacerHotelSurroundPageBody #engineAreaContainer .invalidinput { border-color: #b3261e !important; } /* ---------- Dialogs ---------- */ #alacerHotelSurroundPageBody .modal-content, #alacerHotelSurroundPageBody .bootstrap-dialog .modal-content { border-radius: 0 !important; border: 1px solid var(--brand-line) !important; box-shadow: 0 10px 40px rgba(48, 54, 54, 0.18) !important; background: var(--brand-paper); } #alacerHotelSurroundPageBody .modal-header { border-bottom-color: var(--brand-line) !important; background: var(--brand-paper) !important; color: var(--brand-ink) !important; } #alacerHotelSurroundPageBody .modal-footer { border-top-color: var(--brand-line) !important; } #alacerHotelSurroundPageBody .modal-backdrop.in { opacity: .6; background: var(--brand-ink); } /* Checkbox indicators */ #alacerHotelSurroundPageBody .controlIndicator { background-color: var(--brand-paper) !important; border: 1px solid var(--brand-line-strong) !important; border-radius: 0 !important; } #alacerHotelSurroundPageBody .control input:checked ~ .controlIndicator { background-color: var(--brand-linen) !important; border-color: var(--brand-ink) !important; } #alacerHotelSurroundPageBody .controlCheckbox .controlIndicator:after { border-color: var(--brand-ink) !important; } /* ---------- Disabled buttons ---------- */ #alacerHotelSurroundPageBody #engineAreaContainer .btn:disabled, #alacerHotelSurroundPageBody #engineAreaContainer .btn[disabled], #alacerHotelSurroundPageBody #engineAreaContainer .btn.disabled, #alacerHotelSurroundPageBody #engineAreaContainer button:disabled { background-color: var(--brand-linen) !important; border-color: var(--brand-linen) !important; color: rgba(48, 54, 54, 0.45) !important; opacity: 1 !important; cursor: not-allowed; } /* image logos (when a logo image URL is used instead of inline SVG) */ #alacerHotelSurroundPageBody .brand-logo img { display: block; height: 73px; width: auto; } @media (max-width: 767.98px) { #alacerHotelSurroundPageBody .brand-logo img { height: 52px; } } /* ---------- Icon fonts: always win over the brand font ---------- */ #alacerHotelSurroundPageBody .fa, #alacerHotelSurroundPageBody .fa::before, #alacerHotelSurroundPageBody [class^="fa-"], #alacerHotelSurroundPageBody [class*=" fa-"] { font-family: FontAwesome, "Font Awesome 5 Free", "Font Awesome 6 Free" !important; } #alacerHotelSurroundPageBody .glyphicon:not(.glyphicon-shopping-cart), #alacerHotelSurroundPageBody .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: #495a58; --brand-accent: #bb552b; } /* Login button: identical size on both engines */ #alacerHotelSurroundPageBody #headerBar .loginLink { display: inline-flex !important; align-items: center; height: 40px; padding: 0 18px !important; font-size: 13px !important; line-height: 1 !important; } #alacerHotelSurroundPageBody #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 */ #alacerHotelSurroundPageBody .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; } #alacerHotelSurroundPageBody .fancyArrow .fa, #alacerHotelSurroundPageBody .fancyArrow i { color: var(--brand-ink) !important; } /* ---------- Accessibility layer (a11y.js): only visible to keyboard users ---------- */ #alacerHotelSurroundPageBody .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; } #alacerHotelSurroundPageBody .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; } #alacerHotelSurroundPageBody .brand-skip:focus { top: 12px; } /* a clear focus ring, shown for keyboard focus only (:focus-visible), never for mouse clicks */ #alacerHotelSurroundPageBody a:focus-visible, #alacerHotelSurroundPageBody button:focus-visible, #alacerHotelSurroundPageBody input:focus-visible, #alacerHotelSurroundPageBody select:focus-visible, #alacerHotelSurroundPageBody textarea:focus-visible, #alacerHotelSurroundPageBody [tabindex]:focus-visible, #alacerHotelSurroundPageBody [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; } #alacerHotelSurroundPageBody .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 */ #alacerHotelSurroundPageBody [data-a11y-btn]:focus:not(:focus-visible), #alacerHotelSurroundPageBody .alacerCalendarBody tbody td:focus:not(:focus-visible), #alacerHotelSurroundPageBody 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) { #alacerHotelSurroundPageBody input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]), #alacerHotelSurroundPageBody select, #alacerHotelSurroundPageBody textarea { font-size: 16px !important; } } #alacerHotelSurroundPageBody .brand-step-heading:focus, #alacerHotelSurroundPageBody [aria-modal="true"]:focus { outline: none !important; } /* SVG logos that set words in the brand fonts keep them */ #alacerHotelSurroundPageBody .brand-logo svg .logo-serif { font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif !important; } #alacerHotelSurroundPageBody .brand-logo svg .logo-sans { font-family: Montserrat, "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. */ #alacerHotelSurroundPageBody .editButton, #alacerHotelSurroundPageBody .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; } #alacerHotelSurroundPageBody .editButton .fa, #alacerHotelSurroundPageBody .deleteButton .fa { color: inherit !important; font-size: 14px !important; } #alacerHotelSurroundPageBody .editButton:hover, #alacerHotelSurroundPageBody .editButton:focus-visible { background: var(--brand-ink) !important; border-color: var(--brand-ink) !important; color: #fff !important; } #alacerHotelSurroundPageBody .deleteButton:hover, #alacerHotelSurroundPageBody .deleteButton:focus-visible { background: #b3261e !important; border-color: #b3261e !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. */ #alacerHotelSurroundPageBody drop-down.invalid, #alacerHotelSurroundPageBody .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 */ #alacerHotelSurroundPageBody .guestDetailsFieldInput, #alacerHotelSurroundPageBody .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#alacerHotelSurroundPageBody: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#alacerHotelSurroundPageBody :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#alacerHotelSurroundPageBody: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. */ #alacerHotelSurroundPageBody { min-height: 100vh; min-height: 100dvh; display: flex !important; flex-direction: column; } #alacerHotelSurroundPageBody > * { flex-shrink: 0; } #alacerHotelSurroundPageBody > [role="contentinfo"], #alacerHotelSurroundPageBody > footer, #alacerHotelSurroundPageBody > .brand-footer { margin-top: auto !important; } #alacerHotelSurroundPageBody > :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) */ #alacerHotelSurroundPageBody > :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 ===================================================================== */ #alacerHotelSurroundPageBody voucherbookingapp, #alacerHotelSurroundPageBody #engineArea, #alacerHotelSurroundPageBody #engineAreaContainer { background-color: transparent !important; color: var(--brand-ink); } /* Top bar (search + category menu) */ #alacerHotelSurroundPageBody .page1TopBar, #alacerHotelSurroundPageBody .page1SearchBoxContainer, #alacerHotelSurroundPageBody .page1TextMenuContainer, #alacerHotelSurroundPageBody .page1TitlesMenuContainer { background-color: var(--brand-paper) !important; box-shadow: none !important; } #alacerHotelSurroundPageBody .page1TopBar { border: 1px solid var(--brand-line) !important; } #alacerHotelSurroundPageBody .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) */ } #alacerHotelSurroundPageBody .voucherCategoryDisplay .page1SearchBoxInput, #alacerHotelSurroundPageBody .voucherCategoryDisplay .page1SearchBoxIcon, #alacerHotelSurroundPageBody .voucherCategoryDisplay .page1SearchBoxInputMob, #alacerHotelSurroundPageBody .voucherCategoryDisplay .page1SearchBoxIconMob, #alacerHotelSurroundPageBody .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 */ #alacerHotelSurroundPageBody .filterVoucherCategoryImageContainer, #alacerHotelSurroundPageBody .page1TitlesMenuItemContainer { border-radius: 0 !important; box-shadow: none !important; background-color: var(--brand-linen) !important; overflow: hidden; } #alacerHotelSurroundPageBody .page1TitlesMenuItemContainer { transition: opacity .25s ease; } #alacerHotelSurroundPageBody .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 */ #alacerHotelSurroundPageBody .filterVoucherCategoryImageContainer, #alacerHotelSurroundPageBody .page1TitlesMenuItemContainer { position: relative; } #alacerHotelSurroundPageBody .filterVoucherCategoryImageContainer img, #alacerHotelSurroundPageBody .page1TitlesMenuItemContainer img { transition: transform .6s ease; } #alacerHotelSurroundPageBody .filterVoucherCategoryImageContainer:hover img, #alacerHotelSurroundPageBody .page1TitlesMenuItemContainer:hover img { transform: scale(1.03); } html body#alacerHotelSurroundPageBody: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(48, 54, 54, 0), rgba(48, 54, 54, .82)) !important; color: #fff !important; padding: 56px 22px 18px !important; margin: 0 !important; text-align: left !important; text-transform: uppercase !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: none; } @media (max-width: 767px) { html body#alacerHotelSurroundPageBody: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 */ #alacerHotelSurroundPageBody .voucherCategoryDisplay .page1TitlesMenuContainer { background-color: transparent !important; } /* Category dropdown items (mobile + desktop text menu) */ #alacerHotelSurroundPageBody .voucherCategoryDisplay .page1TextMenuItemMob, #alacerHotelSurroundPageBody .voucherCategoryDisplay #page1TextMenuSubHeaderMob { background-color: var(--brand-ink) !important; color: var(--brand-cream) !important; } #alacerHotelSurroundPageBody .voucherCategoryDisplay .page1TextMenuItemMob:hover, #alacerHotelSurroundPageBody .voucherCategoryDisplay #page1TextMenuSubHeaderMob:hover { background-color: var(--brand-corten) !important; color: var(--brand-cream) !important; } /* Voucher cards */ #alacerHotelSurroundPageBody vouchercard .card-shadow, #alacerHotelSurroundPageBody .card-shadow { box-shadow: none !important; border: 1px solid var(--brand-line) !important; border-radius: 0 !important; } #alacerHotelSurroundPageBody vouchercard img { border-radius: 0 !important; } /* Buttons (UserVoucher.css uses the --button* variables set in :root) */ #alacerHotelSurroundPageBody .btn.commonButton, #alacerHotelSurroundPageBody .commonButton, #alacerHotelSurroundPageBody vouchercard .voucherDetailPaneAddToBasketBtnLabel, #alacerHotelSurroundPageBody vouchercard .mobVoucherDetailPaneAddToBasketBtnLabel, #alacerHotelSurroundPageBody voucherdetailsdialog .voucherOptionsAddToBasket, #alacerHotelSurroundPageBody .basketWrapper .basketItemsWrapper .basketCheckOutMenu, #alacerHotelSurroundPageBody #page3 .deskcheckout, #alacerHotelSurroundPageBody #page3 .deskback, #alacerHotelSurroundPageBody #page3 .mobback, #alacerHotelSurroundPageBody #page3 .mobcheckout, #alacerHotelSurroundPageBody #page4 .deskcheckout, #alacerHotelSurroundPageBody #page4 .deskback, #alacerHotelSurroundPageBody #page4 .mobcheckout, #alacerHotelSurroundPageBody #page4 .mobback, #alacerHotelSurroundPageBody #page45ContinueBtn, #alacerHotelSurroundPageBody #page45MethodBtn, #alacerHotelSurroundPageBody #mobPage45MethodBtn, #alacerHotelSurroundPageBody #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; } #alacerHotelSurroundPageBody .btn.commonButton:hover, #alacerHotelSurroundPageBody .commonButton:hover, #alacerHotelSurroundPageBody vouchercard .voucherDetailPaneAddToBasketBtnLabel:hover, #alacerHotelSurroundPageBody vouchercard .mobVoucherDetailPaneAddToBasketBtnLabel:hover, #alacerHotelSurroundPageBody voucherdetailsdialog .voucherOptionsAddToBasket:hover, #alacerHotelSurroundPageBody .basketWrapper .basketItemsWrapper .basketCheckOutMenu:hover, #alacerHotelSurroundPageBody #page3 .deskcheckout:hover, #alacerHotelSurroundPageBody #page3 .deskback:hover, #alacerHotelSurroundPageBody #page3 .mobback:hover, #alacerHotelSurroundPageBody #page3 .mobcheckout:hover, #alacerHotelSurroundPageBody #page4 .deskcheckout:hover, #alacerHotelSurroundPageBody #page4 .deskback:hover, #alacerHotelSurroundPageBody #page4 .mobcheckout:hover, #alacerHotelSurroundPageBody #page4 .mobback:hover, #alacerHotelSurroundPageBody #page45ContinueBtn:hover, #alacerHotelSurroundPageBody #page45MethodBtn:hover, #alacerHotelSurroundPageBody #mobPage45MethodBtn:hover, #alacerHotelSurroundPageBody #mobPage45ContinueBtn:hover { background-color: var(--brand-corten) !important; border-color: var(--brand-corten) !important; color: var(--brand-cream) !important; } /* Basket / header icons */ #alacerHotelSurroundPageBody #headerBar .glyphicon, #alacerHotelSurroundPageBody .basketIcon, #alacerHotelSurroundPageBody .menuIcon, #alacerHotelSurroundPageBody .userIcon { color: var(--brand-ink) !important; } #alacerHotelSurroundPageBody .basketIconTotalItemsCount { background: var(--brand-bronze) !important; color: #ffffff !important; } /* Toast */ #alacerHotelSurroundPageBody #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) */ #alacerHotelSurroundPageBody vouchercard .voucherDetailPaneMoreInfoBtnLabel, #alacerHotelSurroundPageBody 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: #bb552b !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; } #alacerHotelSurroundPageBody vouchercard .voucherDetailPaneMoreInfoBtnLabel:hover, #alacerHotelSurroundPageBody vouchercard .mobVoucherDetailPaneMoreInfoBtnLabel:hover { background: var(--brand-ink) !important; color: var(--brand-cream) !important; border-color: var(--brand-ink) !important; } #alacerHotelSurroundPageBody vouchercard .voucherDetailPaneMoreInfoBtnLabel .fa, #alacerHotelSurroundPageBody vouchercard .mobVoucherDetailPaneMoreInfoBtnLabel .fa { font-size: 10px !important; margin-left: 6px; color: inherit !important; } /* Voucher card */ #alacerHotelSurroundPageBody .voucherImg, #alacerHotelSurroundPageBody .voucherImg img { border-radius: 0 !important; } #alacerHotelSurroundPageBody .voucherDetailPaneVoucherTitle, #alacerHotelSurroundPageBody .voucherDetailPaneVoucherPrice { font-weight: 500 !important; letter-spacing: -0.01em; color: #495a58 !important; } /* Refine bar (search, sort, budget) */ #alacerHotelSurroundPageBody .refineVoucherT, #alacerHotelSurroundPageBody #page2SearachFieldInput { border-radius: 0 !important; } #alacerHotelSurroundPageBody .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; } #alacerHotelSurroundPageBody .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. */ #alacerHotelSurroundPageBody .slider.slider-horizontal { height: 32px !important; background: transparent !important; box-shadow: none !important; top: 0 !important; vertical-align: middle; } #alacerHotelSurroundPageBody .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; } #alacerHotelSurroundPageBody .slider .slider-selection { background: var(--brand-sand) !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; } #alacerHotelSurroundPageBody .slider .slider-track-high, #alacerHotelSurroundPageBody .slider .slider-track-low { background: transparent !important; border: 0 !important; } #alacerHotelSurroundPageBody .slider .slider-selection, #alacerHotelSurroundPageBody .slider .slider-track-low, #alacerHotelSurroundPageBody .slider .slider-track-high { top: 0 !important; height: 100% !important; border: 0 !important; } #alacerHotelSurroundPageBody .slider .slider-handle, #alacerHotelSurroundPageBody .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-slider-handle) !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; cursor: ew-resize; } #alacerHotelSurroundPageBody .slider .slider-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -12px; right: -12px; } #alacerHotelSurroundPageBody .slider .tooltip.bottom { top: 100% !important; margin-top: 8px !important; } #alacerHotelSurroundPageBody .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; } #alacerHotelSurroundPageBody .slider .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--brand-ink) !important; } #alacerHotelSurroundPageBody .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 */ #alacerHotelSurroundPageBody .slider .stats { display: none !important; } /* Checkout breadcrumb: refined text steps (same design as the rooms engine) */ #alacerHotelSurroundPageBody .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; } #alacerHotelSurroundPageBody .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; } #alacerHotelSurroundPageBody .breadCrumbGroup .breadcrumb a:not(.current):not(.inactive):hover { color: var(--brand-accent) !important; } #alacerHotelSurroundPageBody .breadCrumbGroup .breadcrumb a.current { color: var(--brand-dark) !important; box-shadow: inset 0 -1px 0 var(--brand-dark); } #alacerHotelSurroundPageBody .breadCrumbGroup .breadcrumb a.inactive { color: #5b6563 !important; /* muted, not muted_light: future steps still need 4.5:1 contrast (as the rooms engine, 29 Oct) */ cursor: default; } #alacerHotelSurroundPageBody .breadCrumbGroup .breadcrumb a + a { margin-left: 34px !important; } #alacerHotelSurroundPageBody .breadCrumbGroup .breadcrumb a::before { content: none !important; } #alacerHotelSurroundPageBody .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) */ #alacerHotelSurroundPageBody #headerBar .headerDesktop .loginRegisterLink, #alacerHotelSurroundPageBody #headerBar .headerTabTop .loginRegisterLink { float: left !important; margin-left: 0 !important; } /* Voucher "More information" dialog */ #alacerHotelSurroundPageBody voucherdetailsdialog .modal-content { border-top: 4px solid var(--brand-corten) !important; } #alacerHotelSurroundPageBody voucherdetailsdialog .modalHeaderTexTitleLabel, #alacerHotelSurroundPageBody voucherdetailsdialog .modalHeaderTextPriceLabel { font-weight: 500 !important; font-size: 22px !important; letter-spacing: -0.01em; color: #495a58 !important; } #alacerHotelSurroundPageBody voucherdetailsdialog .voucherOverviewTitle, #alacerHotelSurroundPageBody voucherdetailsdialog .voucherOptionsTitle, #alacerHotelSurroundPageBody voucherdetailsdialog label.title { font-weight: 500 !important; font-size: 12px !important; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brand-bronze) !important; } #alacerHotelSurroundPageBody voucherdetailsdialog .voucherOverviewInfo, #alacerHotelSurroundPageBody voucherdetailsdialog .voucherOptionsDesc { font-size: 15px !important; line-height: 1.5 !important; } /* ---------- Basket (header) ---------- */ #alacerHotelSurroundPageBody .basketModule.basketWrapper { background: transparent !important; line-height: normal !important; height: auto !important; margin: 0 0 0 16px !important; } #alacerHotelSurroundPageBody .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; } #alacerHotelSurroundPageBody .basketModule .basket.basketDropdown:hover { border-color: var(--brand-ink) !important; } #alacerHotelSurroundPageBody .basketModule .basketCounts, #alacerHotelSurroundPageBody .basketModule .basketPrice { display: inline-flex !important; align-items: center; gap: 8px; padding: 0 !important; line-height: 1 !important; float: none !important; } #alacerHotelSurroundPageBody .basketModule .basketPrice { padding-left: 14px !important; border-left: 1px solid var(--brand-line-strong); height: 18px; } #alacerHotelSurroundPageBody .basketModule .basketTotalItemsCount, #alacerHotelSurroundPageBody .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) */ #alacerHotelSurroundPageBody .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; } #alacerHotelSurroundPageBody .glyphicon-shopping-cart::before { content: none !important; } /* line Login and basket up on one row, same 40px height */ #alacerHotelSurroundPageBody .basketModule.basketWrapper, #alacerHotelSurroundPageBody #headerBar .loginRegisterLink { height: 77px !important; display: flex !important; align-items: center; line-height: normal !important; } #alacerHotelSurroundPageBody #headerBar .loginRegisterLink .loginLink { display: inline-flex !important; align-items: center; height: 40px; padding: 0 18px !important; line-height: 1 !important; } #alacerHotelSurroundPageBody #headerBar .loginRegisterLink .loginLink:empty { display: none !important; } /* high-end treatment: no box, nav-style type, hairline underline on hover */ #alacerHotelSurroundPageBody .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; } #alacerHotelSurroundPageBody .basketModule .basket.basketDropdown:hover { border-bottom-color: var(--brand-ink) !important; } #alacerHotelSurroundPageBody .basketModule .basketCounts { gap: 10px; } #alacerHotelSurroundPageBody .basketModule .basketTotalItemsCount, #alacerHotelSurroundPageBody .basketModule .basketTotalItemsPrice { font-size: 12px !important; letter-spacing: 1.6px; } #alacerHotelSurroundPageBody .basketModule .basketTotalItemsPrice { color: var(--brand-bronze) !important; } #alacerHotelSurroundPageBody .basketModule .basketPrice { border-left-color: rgba(48, 54, 54, 0.2); padding-left: 16px !important; height: 14px; } #alacerHotelSurroundPageBody .basketModule .glyphicon-shopping-cart { width: 19px !important; height: 19px !important; } /* basket dropdown: paper panel below the basket, hairline + soft shadow */ #alacerHotelSurroundPageBody .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(48, 54, 54, 0.14) !important; text-align: left !important; line-height: 1.4 !important; } #alacerHotelSurroundPageBody .basketModule .basketItems { background: transparent !important; margin: 0 !important; padding: 6px 18px !important; list-style: none; } #alacerHotelSurroundPageBody .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; } #alacerHotelSurroundPageBody .basketModule .basketItem:last-child { border-bottom: 0; } #alacerHotelSurroundPageBody .basketModule .basketItem > div { float: none !important; width: auto !important; padding: 0 !important; line-height: 1.4 !important; } #alacerHotelSurroundPageBody .basketModule .basketItem::before, #alacerHotelSurroundPageBody .basketModule .basketItem::after { display: none !important; } #alacerHotelSurroundPageBody .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 */ #alacerHotelSurroundPageBody .basketModule.basketWrapper { justify-content: flex-end; width: auto !important; min-width: 0 !important; } #alacerHotelSurroundPageBody .basketWrapper .basketItemsWrapper .basketCheckOutMenu { width: auto !important; box-sizing: border-box !important; } /* line Login / basket up with the content edges below */ #alacerHotelSurroundPageBody #headerBar .headerDesktop .headerMenu, #alacerHotelSurroundPageBody #headerBar .headerTabTop .headerMenu { padding-left: 45px !important; padding-right: 45px !important; } /* Voucher cards: clean 5-line description with ellipsis, titles can wrap */ #alacerHotelSurroundPageBody 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; } #alacerHotelSurroundPageBody vouchercard .voucherDetailPaneVoucherInfo * { font-size: 15px !important; line-height: 1.5 !important; display: inline; } #alacerHotelSurroundPageBody vouchercard article.voucherTitle { height: auto !important; overflow: visible !important; margin-bottom: 8px !important; } #alacerHotelSurroundPageBody vouchercard .voucherDetailPaneVoucherTitle { float: none !important; width: auto !important; font-size: 19px !important; line-height: 1.3 !important; } #alacerHotelSurroundPageBody vouchercard .voucherDetailPaneVoucherPrice { font-size: 18px !important; margin-bottom: 4px; } #alacerHotelSurroundPageBody vouchercard article.voucherTitle, #alacerHotelSurroundPageBody vouchercard .voucherDetailPaneVoucherTitle { text-align: left !important; } /* Checkbox ticks: UserVoucher.css draws a full square border on the marketing tick; keep it a proper tick */ #alacerHotelSurroundPageBody #yourDetails #marketingCheckBoxTick::after, #alacerHotelSurroundPageBody 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 */ #alacerHotelSurroundPageBody .glyphicon.content-editIcon, #alacerHotelSurroundPageBody .glyphicon.content-deleteIcon, #alacerHotelSurroundPageBody .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; } #alacerHotelSurroundPageBody .glyphicon.content-editIcon:is(:hover, :focus-visible) { background: var(--brand-ink) !important; border-color: var(--brand-ink) !important; color: #fff !important; } #alacerHotelSurroundPageBody .glyphicon:is(.content-deleteIcon, .foot-deleteIcon):is(:hover, :focus-visible) { background: #b3261e !important; border-color: #b3261e !important; color: #fff !important; } #alacerHotelSurroundPageBody .glyphicon.content-editIcon::before, #alacerHotelSurroundPageBody .glyphicon.content-deleteIcon::before, #alacerHotelSurroundPageBody .glyphicon.foot-deleteIcon::before { font-family: FontAwesome, "Font Awesome 5 Free" !important; font-size: 14px; font-weight: normal; line-height: 1; color: inherit !important; } #alacerHotelSurroundPageBody .glyphicon.content-editIcon::before { content: "\f040" !important; } #alacerHotelSurroundPageBody .glyphicon.content-deleteIcon::before, #alacerHotelSurroundPageBody .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 */ #alacerHotelSurroundPageBody #headerBar .headerBanner > div:not(.headerMenu) { display: none !important; } #alacerHotelSurroundPageBody #headerBar .headerBanner > .headerMenu { width: 100% !important; float: none !important; } /* More information dialog: terms text at the same size as the overview */ #alacerHotelSurroundPageBody voucherdetailsdialog .voucherTermsInfo, #alacerHotelSurroundPageBody voucherdetailsdialog .voucherTermsInfo * { font-size: 14px !important; line-height: 1.55 !important; } /* Your Details: labels line up with their input boxes */ #alacerHotelSurroundPageBody .yourDetailsFieldLabel { padding-left: 0 !important; } /* Brand button colours on the voucher-only buttons: add to basket / checkout / continue solid, back soft */ #alacerHotelSurroundPageBody vouchercard .voucherDetailPaneAddToBasketBtnLabel, #alacerHotelSurroundPageBody vouchercard .mobVoucherDetailPaneAddToBasketBtnLabel, #alacerHotelSurroundPageBody voucherdetailsdialog .voucherOptionsAddToBasket, #alacerHotelSurroundPageBody .basketWrapper .basketItemsWrapper .basketCheckOutMenu, #alacerHotelSurroundPageBody #page3 .deskcheckout, #alacerHotelSurroundPageBody #page3 .mobcheckout, #alacerHotelSurroundPageBody #page4 .deskcheckout, #alacerHotelSurroundPageBody #page4 .mobcheckout, #alacerHotelSurroundPageBody #page45ContinueBtn, #alacerHotelSurroundPageBody #page45MethodBtn, #alacerHotelSurroundPageBody #mobPage45MethodBtn, #alacerHotelSurroundPageBody #mobPage45ContinueBtn { background-color: #bb552b !important; border-color: #bb552b !important; color: #ffffff !important; font-weight: 700 !important; } #alacerHotelSurroundPageBody vouchercard .voucherDetailPaneAddToBasketBtnLabel:hover, #alacerHotelSurroundPageBody vouchercard .mobVoucherDetailPaneAddToBasketBtnLabel:hover, #alacerHotelSurroundPageBody voucherdetailsdialog .voucherOptionsAddToBasket:hover, #alacerHotelSurroundPageBody .basketWrapper .basketItemsWrapper .basketCheckOutMenu:hover, #alacerHotelSurroundPageBody #page3 .deskcheckout:hover, #alacerHotelSurroundPageBody #page3 .mobcheckout:hover, #alacerHotelSurroundPageBody #page4 .deskcheckout:hover, #alacerHotelSurroundPageBody #page4 .mobcheckout:hover, #alacerHotelSurroundPageBody #page45ContinueBtn:hover, #alacerHotelSurroundPageBody #page45MethodBtn:hover, #alacerHotelSurroundPageBody #mobPage45MethodBtn:hover, #alacerHotelSurroundPageBody #mobPage45ContinueBtn:hover { background-color: #9e4522 !important; border-color: #9e4522 !important; color: #ffffff !important; } #alacerHotelSurroundPageBody #page3 .deskback, #alacerHotelSurroundPageBody #page3 .mobback, #alacerHotelSurroundPageBody #page4 .deskback, #alacerHotelSurroundPageBody #page4 .mobback { background-color: #ffffff !important; border-color: #ffffff !important; color: #bb552b !important; font-weight: 700 !important; } #alacerHotelSurroundPageBody #page3 .deskback:hover, #alacerHotelSurroundPageBody #page3 .mobback:hover, #alacerHotelSurroundPageBody #page4 .deskback:hover, #alacerHotelSurroundPageBody #page4 .mobback:hover { background-color: #bb552b !important; border-color: #bb552b !important; color: #ffffff !important; } /* voucher cards always on paper (some sites' own CSS tinted them) */ #alacerHotelSurroundPageBody 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. */ #alacerHotelSurroundPageBody vouchercard .voucherImg { background-color: var(--brand-sand) !important; } #alacerHotelSurroundPageBody :is(vouchercard .voucherImg, .filterVoucherCategoryImage, .TicketCategoryCard, .eventImage, .eventImageMobile, .eventDetailsImage, .modalEventImage):is(:not([style*="url("]), [style*="null"], [style*="undefined"]) { background: #d8d4ca url("https://images.squarespace-cdn.com/content/v1/6864393a2f104b7d7d632783/8fed8f38-911d-4635-a41e-fb0ff3212fb6/Horizontal+Logo+Lockup.png?format=750w") center / auto 42% no-repeat !important; } /* The voucher engine writes a picture address for every category even when it has no picture (.../VoucherCategories//1.jpg returns 404), so the rule above never matches and the tile showed blank (Manor Greasby "Afternoon Tea", 30 Oct). The holding picture sits on the container behind the picture instead: a real picture covers it, a missing one lets it show through. */ html body#alacerHotelSurroundPageBody:not(#ph1):not(#ph2) .filterVoucherCategoryImageContainer { background: #d8d4ca url("https://images.squarespace-cdn.com/content/v1/6864393a2f104b7d7d632783/8fed8f38-911d-4635-a41e-fb0ff3212fb6/Horizontal+Logo+Lockup.png?format=750w") center / auto 42% no-repeat !important; } html body#alacerHotelSurroundPageBody:not(#ph1):not(#ph2) .filterVoucherCategoryImage[style*="url("] { background-color: transparent !important; } /* Events the same way (31 Oct, Inn On The Lake "A Salute to Elvis"): the tickets engine writes an Img/Event address for every event, and one with no picture returns a page instead of an image, so the event showed an empty panel. The holding picture sits on .eventImageContainer behind the event's own picture. */ html body#alacerHotelSurroundPageBody:not(#ph1):not(#ph2) .eventImageContainer { background: #d8d4ca url("https://images.squarespace-cdn.com/content/v1/6864393a2f104b7d7d632783/8fed8f38-911d-4635-a41e-fb0ff3212fb6/Horizontal+Logo+Lockup.png?format=750w") center / auto 42% no-repeat !important; background-clip: content-box !important; background-origin: content-box !important; } html body#alacerHotelSurroundPageBody:not(#ph1):not(#ph2) .eventImageContainer > :is(.eventImage, .eventImageMobile)[style*="url("] { background-color: transparent !important; } /* ---------- checkout forms (vouchers and tickets share them) ---------- */ #alacerHotelSurroundPageBody [class*="yourDetailsField"] input:not([type=checkbox]):not([type=radio]), #alacerHotelSurroundPageBody [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; } #alacerHotelSurroundPageBody [class*="yourDetailsField"] input:focus, #alacerHotelSurroundPageBody [class*="yourDetailsField"] select:focus { border-color: var(--brand-ink) !important; outline: 2px solid rgba(48, 54, 54, .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#alacerHotelSurroundPageBody: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#alacerHotelSurroundPageBody:not(#x):not(#y) .pageHeading:not(.fa) { font-family: var(--brand-heading-font) !important; font-size: 32px !important; font-weight: 400 !important; color: #495a58 !important; text-transform: uppercase !important; letter-spacing: 0 !important; margin: 10px 0 18px !important; font-size-adjust: none; } /* buttons at the foot of the checkout steps: one height, a gap between them */ #alacerHotelSurroundPageBody .continueShoppingTextTransitionButton, #alacerHotelSurroundPageBody .deliveryMethodsTextTransitionButton, #alacerHotelSurroundPageBody [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(48, 54, 54, .55); } 100% { box-shadow: 0 0 0 18px rgba(48, 54, 54, 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 */ #alacerHotelSurroundPageBody .voucherCardContainerStyle > .voucherDetailPaneParent { flex: 1 1 auto; display: flex; flex-direction: column; } #alacerHotelSurroundPageBody .voucherDetailPaneParent > .voucherDetailPane { flex: 1 1 auto; display: flex; flex-direction: column; } #alacerHotelSurroundPageBody .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) { #alacerHotelSurroundPageBody .voucherDetailsDialog article.voucherTitle { display: flex !important; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 14px; } #alacerHotelSurroundPageBody .voucherDetailsDialog article.voucherTitle .voucherTitleItem { float: none !important; width: auto !important; max-width: 100%; text-align: left !important; } #alacerHotelSurroundPageBody .voucherDetailsDialog article.voucherTitle .mobModalHeaderTextPriceLabel { display: inline-flex !important; align-items: baseline; gap: 6px; } #alacerHotelSurroundPageBody .voucherDetailsDialog article.voucherTitle .mobModalHeaderTextFromLabel { display: inline !important; } #alacerHotelSurroundPageBody .voucherDetailsDialog .modal-body > article { clear: both; } #alacerHotelSurroundPageBody .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) */ #alacerHotelSurroundPageBody .voucherCategoryTitle { min-height: 44px !important; display: inline-flex !important; align-items: center; gap: 6px; cursor: pointer; } #alacerHotelSurroundPageBody #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. */ html body#alacerHotelSurroundPageBody #headerBar .headerDesktop.sticky, html body#alacerHotelSurroundPageBody #headerBar .headerBanner.sticky, html body#alacerHotelSurroundPageBody #headerBar .sticky { position: relative !important; top: auto !important; left: auto; right: auto; } /* phone search box on the voucher landing page was 35px (house standard 44px; St Michael's audit 29 Oct 2026) */ #alacerHotelSurroundPageBody .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. */ #alacerHotelSurroundPageBody 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(48, 54, 54, 0.12) !important; border-bottom: 1px solid rgba(48, 54, 54, 0.12) !important; box-shadow: none !important; } #alacerHotelSurroundPageBody section.leftSection:not(.page1TopBar) > .page1SearchBoxContainer, #alacerHotelSurroundPageBody 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; } #alacerHotelSurroundPageBody section.leftSection:not(.page1TopBar) > .page1SearchBoxContainer { flex: 0 1 300px; } #alacerHotelSurroundPageBody section.leftSection:not(.page1TopBar) > .page1TextMenuContainer { display: flex !important; align-items: center; flex-wrap: wrap; gap: 4px 28px; } #alacerHotelSurroundPageBody section.leftSection:not(.page1TopBar) #page1TextMenuHeader { display: none !important; } #alacerHotelSurroundPageBody section.leftSection:not(.page1TopBar) > .page1TextMenuContainer > div { width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; } #alacerHotelSurroundPageBody 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; } #alacerHotelSurroundPageBody section.leftSection:not(.page1TopBar) .page1TextMenuItem:hover { border-bottom-color: var(--brand-ink); } #alacerHotelSurroundPageBody 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; } #alacerHotelSurroundPageBody 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 */ #alacerHotelSurroundPageBody article.voucherCategoryDisplay:has(> section.leftSection:not(.page1TopBar)) .page1TitlesMenuContainer::before, #alacerHotelSurroundPageBody article.voucherCategoryDisplay:has(> section.leftSection:not(.page1TopBar)) .page1TitlesMenuContainer::after, #alacerHotelSurroundPageBody section.voucherCardBook:has(.voucherTile)::before, #alacerHotelSurroundPageBody section.voucherCardBook:has(.voucherTile)::after { display: none !important; } #alacerHotelSurroundPageBody article.voucherCategoryDisplay:has(> section.leftSection:not(.page1TopBar)) .filterVoucherCategoryImageContainer { width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; } #alacerHotelSurroundPageBody 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) { #alacerHotelSurroundPageBody article.voucherCategoryDisplay:has(> section.leftSection:not(.page1TopBar)) .page1TitlesMenuContainer { grid-template-columns: repeat(2, minmax(0, 1fr)); } } #alacerHotelSurroundPageBody section.voucherCardBook:has(.voucherTile) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; margin-top: 24px; } #alacerHotelSurroundPageBody section.voucherCardBook:has(.voucherTile) > div { width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; } #alacerHotelSurroundPageBody section.voucherCardBook:has(.voucherTile) vouchercard, #alacerHotelSurroundPageBody section.voucherCardBook:has(.voucherTile) vouchercard > section, #alacerHotelSurroundPageBody section.voucherCardBook:has(.voucherTile) vouchercard > section > div { display: block; height: 100%; } #alacerHotelSurroundPageBody: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(48, 54, 54, 0.12) !important; box-shadow: none !important; border-radius: 0 !important; } #alacerHotelSurroundPageBody: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; } #alacerHotelSurroundPageBody:not(#x):not(#y) .voucherTile .voucherImg .glass { height: 100% !important; } #alacerHotelSurroundPageBody: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; } #alacerHotelSurroundPageBody: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; } #alacerHotelSurroundPageBody: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; } #alacerHotelSurroundPageBody: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; } #alacerHotelSurroundPageBody:not(#x):not(#y) .voucherTile .voucherMenu .btn { width: 100% !important; margin: 0 !important; float: none !important; } #alacerHotelSurroundPageBody: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; } #alacerHotelSurroundPageBody:not(#x):not(#y) .voucherTile .voucherMenu .moreBtn:hover, #alacerHotelSurroundPageBody:not(#x):not(#y) .voucherTile .voucherMenu .moreBtn:focus-visible { background: var(--brand-ink) !important; color: #fff !important; } @media (max-width: 991.98px) { #alacerHotelSurroundPageBody section.voucherCardBook:has(.voucherTile) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { #alacerHotelSurroundPageBody 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. */ #alacerHotelSurroundPageBody .page1TopBar { position: relative; z-index: 30; } #alacerHotelSurroundPageBody .page1TextMenuContainer { position: relative; } #alacerHotelSurroundPageBody .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) */ /* the engine's own arrow is there: no second chevron (raised 1 Nov 2026 - brand input rules with 4 ids were re-adding it, The Elm) */ html body#alacerHotelSurroundPageBody:not(#brand-dd):not(#brand-dd2):not(#brand-dd3):not(#brand-dd4):not(#brand-dd5) .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#alacerHotelSurroundPageBody: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) { #alacerHotelSurroundPageBody:not(#brand-ttb) [class*="TextTransitionButton"] { margin-left: 0 !important; margin-right: 0 !important; } } /* button_secondary_style: outline */ #alacerHotelSurroundPageBody #engineAreaContainer .brand-btn-secondary, #alacerHotelSurroundPageBody #page6 .page6PrevNavButton, #alacerHotelSurroundPageBody .modal .brand-btn-secondary, #alacerHotelSurroundPageBody .loginLink, #alacerHotelSurroundPageBody .loginLinkmobile, #alacerHotelSurroundPageBody #headerBar .loginLink, #alacerHotelSurroundPageBody #headerBar .loginLinkmobile, #alacerHotelSurroundPageBody #page3 .deskback, #alacerHotelSurroundPageBody #page3 .mobback, #alacerHotelSurroundPageBody #page4 .deskback, #alacerHotelSurroundPageBody #page4 .mobback, #alacerHotelSurroundPageBody vouchercard .voucherDetailPaneMoreInfoBtnLabel, #alacerHotelSurroundPageBody vouchercard .mobVoucherDetailPaneMoreInfoBtnLabel { background: #ffffff !important; color: #bb552b !important; border: 1px solid #bb552b !important; border-color: #bb552b !important; } #alacerHotelSurroundPageBody .loginLink:hover, #alacerHotelSurroundPageBody .loginLinkmobile:hover, #alacerHotelSurroundPageBody #engineAreaContainer .brand-btn-secondary:hover, #alacerHotelSurroundPageBody .modal .brand-btn-secondary:hover, #alacerHotelSurroundPageBody #page6 .page6PrevNavButton:hover, #alacerHotelSurroundPageBody #page3 .deskback:hover, #alacerHotelSurroundPageBody #page3 .mobback:hover, #alacerHotelSurroundPageBody #page4 .deskback:hover, #alacerHotelSurroundPageBody #page4 .mobback:hover { background: #bb552b !important; color: #ffffff !important; border-color: #bb552b !important; } /* ===== Part 3: site-specific extra CSS (brand JSON extra_css_*) ===== */ /* Great House footer (custom_footer_html): plain on purpose (no onward links out of the booking journey); the website's slate-green band with its orange top rule */ html body .gh-footer { background: #495a58 !important; color: #ffffff !important; border-top: 4px solid #bb552b; font-family: var(--brand-font, Montserrat, sans-serif) !important; margin: 3rem 0 0 !important; clear: both; text-align: left; } html body .gh-footer .gh-f-top { max-width: 1180px; margin: 0 auto; padding: 40px 24px 28px; display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; flex-wrap: wrap; } html body .gh-footer .gh-f-name { font-family: var(--brand-heading-font, 'Bebas Neue', Impact, sans-serif) !important; font-size: 34px !important; line-height: 1 !important; letter-spacing: .01em; text-transform: uppercase; margin: 0 0 6px !important; color: #ffffff !important; } html body .gh-footer .gh-f-tag { font-size: 11px !important; letter-spacing: .24em; text-transform: uppercase; margin: 0 !important; color: #eef0ef !important; } html body .gh-footer .gh-f-contact p { font-size: 15px !important; line-height: 1.6 !important; margin: 0 0 4px !important; color: #ffffff !important; text-align: right; } html body .gh-footer a { color: #ffffff !important; text-decoration: underline !important; text-underline-offset: 2px; } html body .gh-footer a:hover, html body .gh-footer a:focus-visible { color: #f3d4c4 !important; } html body .gh-footer .gh-f-bottom { max-width: 1180px; margin: 0 auto; padding: 14px 24px 22px; border-top: 1px solid rgba(255,255,255,.2); display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; flex-wrap: wrap; font-size: 13px !important; color: #eef0ef !important; } html body .gh-footer .gh-f-bottom a { color: #eef0ef !important; } @media (max-width: 767.98px) { html body .gh-footer .gh-f-top { padding: 32px 20px 22px; flex-direction: column; align-items: flex-start; } html body .gh-footer .gh-f-contact p { text-align: left; } html body .gh-footer .gh-f-bottom { padding: 14px 20px 22px; flex-direction: column; align-items: flex-start; } } /* the website's pill buttons (fully rounded); entry fields stay square (house standard) */ html body:not(#gh):not(#gh2):not(#gh3) :is(.btn, button.btn, .commonButton, .commonNavButton, .accordionCardBtn2, .brand-basket-go, [class*=TextTransitionButton], .voucherDetailPaneMoreInfoBtnLabel, .mobVoucherDetailPaneMoreInfoBtnLabel, .voucherDetailPaneAddToBasketBtnLabel, .loginLink):not(.editButton):not(.deleteButton):not(.btn-xs) { border-radius: 999px !important; } /* carried over from the retired UserVoucher.css: no sort/budget bar on the voucher list, no empty 'no result' text */ page2 > section.voucherRefine > voucher-refine-area > div.root { display: none; } .noResultFoundText.page1NoVoucherText { display: none; } /* grid voucher cards: the compiled theme pinned the title block absolutely with the price 110px down, so the price sat under More information (29 Oct): title, price, text, buttons in order */ html body:not(#gh):not(#gh2) vouchercard .voucherCardContainerStyle .voucherDetailPane > article.voucherTitle { position: static !important; height: auto !important; margin: 0 0 6px !important; display: flex !important; flex-direction: column; align-items: flex-start; gap: 2px; } html body:not(#gh):not(#gh2) vouchercard .voucherCardContainerStyle .voucherDetailPane > article.voucherTitle > .voucherTitleItem { margin: 0 !important; height: auto !important; min-height: 0 !important; } /* no grey drop shadow on the cards and the sort/search bar (as on the rooms pages); the basket total in ink (orange on linen was 3.7:1) */ html body:not(#gh):not(#gh2) :is(.voucherCardContainerStyle, .refineInputContainers, .tableOuter, your-details > div, delivery-details > div) { box-shadow: none !important; } html body:not(#gh):not(#gh2) .basketTotalItemsPrice { color: #303636 !important; } /* grid cards: description straight under the price (the compiled theme left 55px for the old pinned title), buttons pinned to the foot */ html body:not(#gh):not(#gh2) vouchercard .voucherCardContainerStyle .voucherDetailPane { display: flex !important; flex-direction: column; height: 100%; } html body:not(#gh):not(#gh2) vouchercard .voucherCardContainerStyle .voucherDetailPane > .voucherDetailPaneVoucherInfo { margin-top: 6px !important; } html body:not(#gh):not(#gh2) vouchercard .voucherCardContainerStyle .voucherDetailPane > article.voucherMenu { margin-top: auto !important; padding-top: 16px; } /* search / sort icons in the heading colour (were the old sage) */ html body:not(#gh):not(#gh2) :is(#page2SearachFieldIcon, #page2SortIconTriangleBottom, #page2SortIconTriangleTop) { color: #495a58 !important; } /* the compiled theme left 80px above the Sign in / basket row (room for an old fixed header) */ html body:not(#gh):not(#gh2) .container:has(> .headerPhone, > .headerTabTop) { margin-top: 24px !important; } /* phones: category tile at full width with the picture filling it (it was a 113px picture in a 350px box), voucher cards square-cornered with the name in Bebas Neue as on desktop */ @media (max-width: 767px) { html body:not(#gh):not(#gh2) .filterVoucherCategoryImageContainer { width: 100% !important; height: auto !important; float: none !important; margin: 0 0 16px !important; } html body:not(#gh):not(#gh2) .filterVoucherCategoryImageContainer > .filterVoucherCategoryImage { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; } } @media (max-width: 480px) { html body:not(#gh):not(#gh2) .filterVoucherCategoryContainer .page1TitlesMenuContainer { grid-template-columns: 1fr !important; } } html body:not(#gh):not(#gh2) .voucherMobile.voucherCardContainerStyle { border-radius: 0 !important; } html body:not(#gh):not(#gh2) :is(.mobVoucherDetailPaneVoucherTitle, .modModalHeaderTextTitleLabel) { font-family: 'Bebas Neue', 'Arial Narrow', sans-serif !important; font-weight: 400 !important; font-size: 24px !important; letter-spacing: .01em !important; text-transform: uppercase !important; } /* ===== DR-1101 (design review 1 Nov 2026, Rob approved): The Great House Lavenham ===== */ html body:not(#dr1):not(#dr2):not(#dr3) .btn.commonButton:not(.moreBtn):not(.brand-btn-secondary):not(.loginLink):not(.logoutButton):not([disabled]):not(.disabled):not(:disabled), html body:not(#dr1):not(#dr2):not(#dr3) .commonNavButton:not([disabled]):not(.disabled):not(:disabled), html body:not(#dr1):not(#dr2):not(#dr3) .SearchButton:not([disabled]):not(.disabled):not(:disabled) {font-weight:500 !important; font-size:14px !important;} html body:not(#dr1):not(#dr2):not(#dr3) .btn.commonButton.moreBtn, html body:not(#dr1):not(#dr2):not(#dr3) .btn.commonButton.brand-btn-secondary, html body:not(#dr1):not(#dr2):not(#dr3) .loginLink.btn {font-weight:500 !important;} html body:not(#dr1):not(#dr2):not(#dr3):not(#dr4):not(#dr5):not(#dr6) :is(h2,h3,.h2,.h3) {color:#bb552b !important; letter-spacing:-0.02em !important;} html body:not(#dr1):not(#dr2):not(#dr3):not(#dr4):not(#dr5):not(#dr6) :is(.voucherDetailPaneMoreInfoBtnLabel,.moreBtn,.moreBtn label,.brand-btn-secondary) {font-size:14px !important;}