/* Park House Hotel & Spa theme v20261029zc — generated 2026-10-29 11:18 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: #e8e2db; } #alacerHotelSurroundPageBody { background-color: #faf9f5; } .headerMenu.mob .menuItem.userIcon .glyphicon { color: #4a4a48; } .toastMessage { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #ffffff; } voucherbookingapp input, voucherbookingapp input.form-control { border-color: #4a4a48; } voucherbookingapp select { border-color: #4a4a48; } voucherbookingapp textarea { border-color: #4a4a48; } .notIE.fullWidth .inputDropdown, drop-down .inputDropdown { background-color: #faf9f5; border-color: #4a4a48; } .notIE.fullWidth .counterIcon, drop-down .counterIcon { color: #ffffff; background-color: #666666; } .notIE.fullWidth .counterIconMob, drop-down .counterIconMob { color: #ffffff; background-color: #666666; } drop-down select.inputDropdown { background-color: #faf9f5; border-color: #4a4a48; } drop-down .counterIcon { color: #ffffff; background-color: #666666; } drop-down .counterIconMob { color: #ffffff; background-color: #666666; } .controlIndicator { background-color: #ffffff; } .control:hover input ~ .controlIndicator, .control input:focus ~ .controlIndicator { background-color: #ffffff; } .control input:checked ~ .controlIndicator { background-color: #faf9f5; } .control:hover input:not([disabled]):checked ~ .controlIndicator, .control input:checked:focus ~ .controlIndicator { background-color: #faf9f5; } .control input:disabled ~ .controlIndicator { background-color: #ffffff; } .controlCheckbox .controlIndicator:after { border-color: #4a4a48; } .loginRegisterLink .loginLink { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ffffff; } .card-shadow { box-shadow: none; } login .loginForm { background-color: #ffffff; border-color: var(--brand-line); } login .loginPopupTitle { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } login .loginPopupEmailLabel { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } login .loginPopupEmailInput { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #faf9f5; } login .loginPopupEmailInput::-webkit-input-placeholder { color: rgba(74, 74, 72, 0.5); } login .loginPopupEmailInput:-moz-placeholder { color: rgba(74, 74, 72, 0.5); } login .loginPopupEmailInput::-moz-placeholder { color: rgba(74, 74, 72, 0.5); } login .loginPopupEmailInput:-ms-input-placeholder { color: rgba(74, 74, 72, 0.5); } login .loginPopupPasswordLabel { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } login .loginPopupPasswordInput { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #faf9f5; } login .loginPopupForgotPasswordLabel { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } login .loginPopupForgotPasswordLabel:hover { color: #4a4a48; } login .loginPopupForgotPasswordLabel:focus { color: #4a4a48; } login .loginPopupForgotPasswordLabel:active { color: #4a4a48; } login .loginPopupForgotPasswordLabel:visited { color: #4a4a48; } login .loginPopupInvalidPasswordMessage { color: #6f7558; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } login .loginPopupLoginFailedMessage { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } login .loginPopupForgotPasswordResultMessage { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } login .loginPopupLoginBtn { color: #ffffff; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } login .loginPopupCancelBtn { color: #ffffff; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media (max-width: 480px) { .loginPopupTitle { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } .loginPopupEmailLabel { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } .loginPopupEmailInput { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; background-color: #faf9f5; } .loginPopupPasswordLabel { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } .loginPopupPasswordInput { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; background-color: #faf9f5; } .loginPopupForgotPasswordLabel { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } .loginPopupInvalidPasswordMessage { color: #6f7558; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } .loginPopupLoginFailedMessage { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } .loginPopupForgotPasswordResultMessage { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } .loginPopupLoginBtn { color: #ffffff; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #f4f1ec; } .loginPopupCancelBtn { color: #ffffff; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #f4f1ec; } } voucherpurchaseprocess voucher-bread-crumb .breadCrumbGroup { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } .basketWrapper { background-color: #fcfcfa; border-color: var(--brand-line); } .basketWrapper .basket .basketCounts .basketTotalItemsCount { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } .basketWrapper .basket .basketTotalItemsPrice { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } .basketWrapper .basketItemsWrapper { box-shadow: none; } .basketWrapper .basketItemsWrapper .basketItems { background-color: #f4f1ec; border-color: var(--brand-line); } .basketWrapper .basketItemsWrapper .basketItems .basketItem { border-bottom-color: var(--brand-line); } .basketWrapper .basketItemsWrapper .basketItems .basketItem .basketItemName { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } .basketWrapper .basketItemsWrapper .basketItems .basketItem .basketItemPrice { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } .basketWrapper .basketItemsWrapper .basketCheckOutMenu { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ffffff; } .basketIcon .basketIconTotalItemsCount { background-color: #f4f1ec; } spinner .spinnerIcon { color: #4a4a48; } spinner .spinnerText { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ffffff; } @media (max-width: 480px) { .spinnerIcon { color: #4a4a48; } } .voucherCategoryDisplay .page1NoVoucherText { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } .voucherCategoryDisplay .page1NoMenuItemText { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } .voucherCategoryDisplay .page1TopBar { background-color: #ffffff; } .voucherCategoryDisplay #page1TextMenuHeaderList { background-color: #ffffff; } .voucherCategoryDisplay .page1SearchBoxInputWrapper { border-color: #f4f1ec; background-color: #f4f1ec; } .voucherCategoryDisplay .page1SearchBoxInput { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; background-color: #f4f1ec; } .voucherCategoryDisplay .page1SearchBoxIcon { background-color: #f4f1ec; } .voucherCategoryDisplay #page1TextMenuHeader { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } .voucherCategoryDisplay .page1TextMenuItem { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } .voucherCategoryDisplay .page1TitlesMenuItemContainer { background-color: #ffffff; } .voucherCategoryDisplay .page1TilesMenuTitle { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; background-color: #f4f1ec; } .voucherCategoryDisplay .page1TilesMenuItem { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } .voucherCategoryDisplay .page1SearchBoxInputMob { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; background-color: #f4f1ec; } .voucherCategoryDisplay .page1SearchBoxIconMob { background-color: #f4f1ec; } .voucherCategoryDisplay #page1TextMenuHeaderMob { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; background-color: #ffffff; } .voucherCategoryDisplay #page1TextMenuSubHeaderMob { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; background-color: #faf9f5; border-bottom-color: var(--brand-line); } .voucherCategoryDisplay .page1TextMenuItemMob { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; background-color: #faf9f5; border-bottom-color: var(--brand-line); } .voucherCategoryDisplay .page1TitlesMenuItemContainerMob { background-color: #faf9f5; border-color: var(--brand-line); } .voucherCategoryDisplay .page1TilesMenuTitleMob { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; background-color: #faf9f5; } 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 .refineVoucherT { background-color: #f4f1ec; border-color: var(--brand-line); } voucher-refine-area .refineVoucherT input { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; background-color: #f4f1ec; } voucher-refine-area .refineVoucherT input::-webkit-input-placeholder { color: rgba(74, 74, 72, 0.5); } voucher-refine-area .refineVoucherT input:-moz-placeholder { color: rgba(74, 74, 72, 0.5); } voucher-refine-area .refineVoucherT input::-moz-placeholder { color: rgba(74, 74, 72, 0.5); } voucher-refine-area .refineVoucherT input:-ms-input-placeholder { color: rgba(74, 74, 72, 0.5); } voucher-refine-area .sortingContainerLabel { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } voucher-refine-area .page2PriceRangeLabel { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } voucher-refine-area #page2SortIconTriangleBottom.selectedOrder, voucher-refine-area #page2SortIconTriangleTop.selectedOrder { color: #f4f1ec; } voucher-refine-area .slider.slider-horizontal { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; border-color: #4a4a48; color: #4a4a48; } voucher-refine-area .slider.slider-horizontal .slider-track { background-color: #f4f1ec; } 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: #f4f1ec; } voucher-refine-area .slider.slider-horizontal .slider-track .slider-selection { background-color: #ffffff; } voucher-refine-area .slider.slider-horizontal .tooltip { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } voucher-refine-area .slider.slider-horizontal .tooltip .tooltip-inner { background-color: #ffffff; color: #4a4a48; } vouchercard .voucherCardContainerStyle { background-color: #ffffff; border-color: var(--brand-line); } vouchercard .voucherDetailPaneVoucherTitle { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } vouchercard .mobVoucherDetailPaneVoucherTitle { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } vouchercard .voucherDetailPaneVoucherPrice { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } vouchercard .mobVoucherDetailPaneVoucherPrice { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } vouchercard .voucherDetailPaneVoucherInfo { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } vouchercard .mobVoucherDetailPaneVoucherInfo { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } vouchercard .commonButton, vouchercard login .loginPopupLoginBtn, login vouchercard .loginPopupLoginBtn, vouchercard login .loginPopupCancelBtn, login vouchercard .loginPopupCancelBtn { border-color: #4a4a48; } vouchercard .voucherDetailPaneAddToBasketBtnLabel { color: #ffffff; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } vouchercard .voucherDetailPaneMoreInfoBtnLabel { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } vouchercard .mobVoucherDetailPaneMoreInfoBtnLabel { color: #4a4a48; font-weight: 400; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } vouchercard .mobVoucherDetailPaneAddToBasketBtnLabel { color: #ffffff; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .modalHeaderTexTitleLabel { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .modalHeaderTextPriceLabel { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .modModalHeaderTextTitleLabel { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .mobModalHeaderTextPriceLabel { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .voucherOverviewTitle, voucherdetailsdialog .voucherExpiryDetailTitle, voucherdetailsdialog .voucherTermsTitle, voucherdetailsdialog .voucherOptionsTitle { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .voucherOverviewInfo, voucherdetailsdialog .voucherExpiryDetailInfo, voucherdetailsdialog .voucherExpiryVoucherExpiryFromDate, voucherdetailsdialog .voucherExpiryVoucherDuration, voucherdetailsdialog .voucherTermsInfo, voucherdetailsdialog .voucherOptionsDesc, voucherdetailsdialog .voucherOptionsPrice { font-weight: 400; color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-device-width: 768px) { voucherdetailsdialog .voucherOverviewTitle, voucherdetailsdialog .voucherExpiryDetailTitle, voucherdetailsdialog .voucherTermsTitle { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .voucherOverviewInfo, voucherdetailsdialog .voucherExpiryDetailInfo, voucherdetailsdialog .voucherExpiryVoucherExpiryFromDate, voucherdetailsdialog .voucherExpiryVoucherDuration, voucherdetailsdialog .voucherTermsInfo { font-weight: 400; color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } } voucherdetailsdialog .mobVoucherOptionsTitle { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .mobVoucherOptionsDesc, voucherdetailsdialog .mobVoucherOptionsPrice { font-weight: 400; color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .voucherOptionsAddToBasket { color: #ffffff; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .voucherDetailsDialogCloseBtnFont { color: #ffffff; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdetailsdialog .mobVoucherOptionsAddToBasketBtn, voucherdetailsdialog .mobVoucherOptionsAddToBasket { color: #ffffff; font-family: "Open Sans", "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: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } voucher-summary .tableBgColor { background-color: #ffffff; border-color: var(--brand-line); } voucher-summary .item-head { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } voucher-summary .price-head { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } voucher-summary .action-head { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } voucher-summary .item-content { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } voucher-summary .price-content { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } voucher-summary .total-foot { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } 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: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } #page3 vouchercard .voucherCardContainerStyle { background-color: #ffffff; border-color: var(--brand-line); } #page3 vouchercard .voucherTitleItem { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } #page3 vouchercard .voucherPriceItem { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } #page3 .deskcheckout, #page3 .deskback { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ffffff; } #page3 .moreBtn, #page3 .addBtn { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ffffff; } #page3 .mobback, #page3 .mobcheckout { color: #ffffff; background-color: #f4f1ec; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media (max-width: 767px) { #summary .item-head { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } #summary .price-head { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } #summary .action-head { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } #summary .item-content { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #ffffff; } #summary .price-content { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #ffffff; } #summary .total-foot { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } } #yourDetails { background-color: #ffffff; border-color: var(--brand-line); } #yourDetails #YourDetailsHeadingTextLabel { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } #yourDetails .yourDetailsFieldLabel { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } #yourDetails .yourDetailsFieldInput { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; background-color: #faf9f5; } #yourDetails .yourDetailsFieldInputDropdown { background-color: #faf9f5; } #yourDetails .yourDetailsFieldInputDropdown .fancyArrow { color: #ffffff; background-color: #666666; } #yourDetails .yourDetailsFieldInputDropdown select { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #yourDetails #marketingCheckBoxLabel { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } #yourDetails #marketingCheckBoxTick { background-color: #ffffff; } #yourDetails #marketingCheckBoxTick::after { border-color: #4a4a48; } #yourDetails #marketingCheckBoxInput:checked ~ #marketingCheckBoxTick { background-color: #faf9f5; } #yourDetails #marketingCheckBoxInputMob:checked ~ #marketingCheckBoxTick { background-color: #faf9f5; } #yourDetails .checkOutGuestFont, #yourDetails .createWebAccountFont { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } #page45ContinueBtn { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ffffff; } #page45MethodBtn { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ffffff; } #page45MethodBtn:disabled { color: rgba(74, 74, 72, 0.5); } @media (max-width: 480px) { #yourDetails #YourDetailsHeadingTextLabel { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } #yourDetails .yourDetailsFieldLabel { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } #yourDetails .yourDetailsFieldInput { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } #yourDetails .yourDetailsFieldInputDropdown select { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #yourDetails #marketingCheckBoxLabel { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } #yourDetails .checkOutGuestFont, #yourDetails .createWebAccountFont { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } } #mobPage45ContinueBtn { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ffffff; background-color: #f4f1ec; } #mobPage45MethodBtn { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ffffff; background-color: #f4f1ec; } #mobPage45MethodBtn:disabled { color: rgba(74, 74, 72, 0.5); } #page4 .deliveryTitle { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } delivery-details .errorfont { font-family: "Open Sans", "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: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ffffff; } delivery-details .visible-lg .header { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } delivery-details .visible-lg .voucherDeliveryAddress select, delivery-details .visible-lg .inputDropdown { background-color: #faf9f5; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } delivery-details .visible-lg .vouchertext { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } delivery-details .visible-lg .deliverytext { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } delivery-details .visible-lg .pointer { font-family: "Open Sans", "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: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; background-color: #f4f1ec; } delivery-details .visible-lg .hr-mobile { border-bottom-color: var(--brand-line); } delivery-details .visible-lg .pricetext { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } delivery-details .visible-lg .totallabel { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } delivery-details .visible-lg #combineCheckBoxLabel { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } delivery-details .visible-lg .combineCheckBoxTick { background-color: #ffffff; } delivery-details .visible-lg .combineCheckBoxTick::after { border-color: #4a4a48; } delivery-details .visible-lg .combineCheckBoxTick:hover { background-color: #ffffff; } delivery-details .visible-lg #combineCheckboxInput:checked ~ #combineCheckBoxTick { background-color: #faf9f5; } delivery-details .visible-lg .inputTextarea { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } delivery-details .visible-lg textarea { background-color: #f4f1ec; } delivery-details .visible-lg .counterIcon { color: #4a4a48; background-color: #faf9f5; } delivery-details .visible-xs .voucherDeliveryAddress select { background-color: #faf9f5; } delivery-details .visible-xs .voucherContainer { background-color: #ffffff; } delivery-details .visible-xs .voucherContainer .voucherNamePriceContainer .deliveryDetailsPrice, delivery-details .visible-xs .voucherContainer .voucherNamePriceContainer .deliveryDetailsVoucherTypeName { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } delivery-details .visible-xs .voucherContainer .personlizeMessageMobile { background-color: #f4f1ec; } delivery-details .visible-xs .voucherContainer .deliveryAddressContainer { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; background-color: #faf9f5; } delivery-details .visible-xs .voucherContainer .deliveryMethodContainer { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } delivery-details .visible-xs .voucherContainer textarea { background-color: #faf9f5; } 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: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } delivery-details .visible-xs .voucherContainer .personlizeMessageContainer { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; background-color: #f4f1ec; } delivery-details .visible-xs .voucherContainer .DMDEContainer { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } delivery-details .visible-xs .promoContainer { background-color: #ffffff; } delivery-details .visible-xs .promoContainer .promoHeader { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } delivery-details .visible-xs .promoContainer .promoInput input { background-color: #f4f1ec; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } delivery-details .visible-xs .promoContainer .promoInput button { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ffffff; } delivery-details .visible-xs .CAPAInputContainer { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; 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: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } delivery-details .visible-xs .deleteVoucherContainer { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } delivery-address .VDSDContainer { background-color: #ffffff; } delivery-address .visible-lg .addDeliveryAddressEmailHeading, delivery-address .visible-lg .addDeliveryAddressPostHeading { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } 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: #4a4a48; font-weight: 400; font-family: "Open Sans", "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: #faf9f5; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } delivery-address .visible-lg .titleDropdown .inputdropdown, delivery-address .visible-lg .countyDropdown .inputdropdown { color: #4a4a48; background-color: #faf9f5; font-weight: 400; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } delivery-address .visible-lg .titleDropdown .counterIcon, delivery-address .visible-lg .countyDropdown .counterIcon { color: #ffffff; background-color: #666666; } delivery-address .visible-lg .cancleButton, delivery-address .visible-lg .addButton { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ffffff; } delivery-address .visible-sm .addDeliveryAddressEmailHeading, delivery-address .visible-sm .addDeliveryAddressPostHeading { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } 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: #4a4a48; font-weight: 400; font-family: "Open Sans", "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: #faf9f5; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } delivery-address .visible-sm .titleDropdown .inputdropdown, delivery-address .visible-sm .countyDropdown .inputdropdown { color: #4a4a48; background-color: #faf9f5; font-weight: 400; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } delivery-address .visible-sm .titleDropdown .counterIcon, delivery-address .visible-sm .countyDropdown .counterIcon { color: #ffffff; background-color: #666666; } delivery-address .visible-sm .cancleButton, delivery-address .visible-sm .addButton { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ffffff; background-color: #f4f1ec; } voucherdeliveryshippingdate #VDSD .calendarLoading .glyphicon-refresh { color: #4a4a48; } voucherdeliveryshippingdate .loading { color: #ffffff; } voucherdeliveryshippingdate .VDSDPopUpOpacity { background-color: #4a4a48; } voucherdeliveryshippingdate .VDSDContainer { background-color: #ffffff; } voucherdeliveryshippingdate .VDSDHeader { font-weight: 400; color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdeliveryshippingdate .VDSDDetailSection { border-bottom-color: var(--brand-line); border-top-color: var(--brand-line); } voucherdeliveryshippingdate .yearMonthContainer { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdeliveryshippingdate .VDSDDetailSection .calendar table caption { background-color: #faf9f5; border-color: #ffffff; } voucherdeliveryshippingdate .VDSDDetailSection .calendar table caption .prevMonthIcon { color: #666666; } voucherdeliveryshippingdate .VDSDDetailSection .calendar table caption .nextMonthIcon { color: #666666; } voucherdeliveryshippingdate .VDSDDetailSection .calendar table thead tr th { border-color: #ffffff; } voucherdeliveryshippingdate .calendar table thead tr th { color: #4a4a48; background-color: #ffffff; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } voucherdeliveryshippingdate #VDSD .VDSDContainer .VDSDDetailSection .calendar table tbody tr td { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdeliveryshippingdate .VDSDContainer .VDSDDetailSection .calendar table tbody tr td { border-color: #ffffff; } voucherdeliveryshippingdate .calendar .calendarSelectedDayStyle { background-color: #6f7558; color: #4a4a48; } voucherdeliveryshippingdate .calendar .calendarDisableDayStyle { background-color: #f4f1ec; color: #666666; } voucherdeliveryshippingdate .calendar .calendarDefaultDayStyle { background-color: #faf9f5; color: #4a4a48; } voucherdeliveryshippingdate .VDSDContainer .VDSDDetailSection .deliveryMethod label { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; font-weight: 400; } voucherdeliveryshippingdate .notIE.fullWidth .inputDropdown, voucherdeliveryshippingdate drop-down .inputDropdown, voucherdeliveryshippingdate drop-down .inputDropdown { background-color: #f4f1ec; color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } voucherdeliveryshippingdate .VDSDContainer .VDSDDetailSection .EDDContainer { background-color: #faf9f5; } voucherdeliveryshippingdate .VDSDContainer .VDSDDetailSection .EDDContainer .EDDHeader { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; font-weight: 400; } voucherdeliveryshippingdate #VDSD .VDSDContainer .VDSDDetailSection .EDDContainer .EDDValue { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; 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: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; background-color: #f4f1ec; } @media only screen and (max-device-width: 768px) { voucherdeliveryshippingdate .VDSDDetailSection .calendar table caption { background-color: #ffffff; border-color: #ffffff; } voucherdeliveryshippingdate .VDSDContainer { background-color: #faf9f5; } voucherdeliveryshippingdate .VDSDContainer .VDSDDetailSection .EDDContainer { background-color: #ffffff; } voucherdeliveryshippingdate .VDSDHeader { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } voucherdeliveryshippingdate .VDSDContainer .VDSDDetailSection .deliveryMethod label { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; font-weight: 400; } voucherdeliveryshippingdate .VDSDContainer .VDSDDetailSection .EDDContainer .EDDHeader { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; font-weight: 400; } voucherdeliveryshippingdate #VDSD .VDSDContainer .VDSDDetailSection .EDDContainer .EDDValue { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; font-weight: 400; } } #page4 .mobcheckout, #page4 .mobback, #page4 .deskback, #page4 .deskcheckout { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ffffff; } #paymentBillingAddressSurround #PaymentBillingAddressHeading { color: #4a4a48; font-family: "Open Sans", "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: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #paymentBillingAddressSurround #Postcode, #paymentBillingAddressSurround #Town, #paymentBillingAddressSurround #Address1, #paymentBillingAddressSurround #Address2 { background-color: #faf9f5; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } #paymentBillingAddressSurround .countryDropdown, #paymentBillingAddressSurround .countyDropdown { color: #4a4a48; background-color: #faf9f5; font-weight: 400; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } #paymentBillingAddressSurround .countryDropdown .counterIcon, #paymentBillingAddressSurround .countyDropdown .counterIcon { color: #ffffff; background-color: #666666; } #paymentBillingAddressSurround .sameAsLeadGuestCheckboxLabel { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #paymentBillingAddressSurround .sameAsLeadGuestCheckbox { background-color: #ffffff; } #paymentBillingAddressSurround .control input:checked ~ .sameAsLeadGuestCheckbox { background-color: #faf9f5; } #paymentBillingAddressSurround .controlCheckbox .sameAsLeadGuestCheckbox:after { border-color: #4a4a48; } page5 #PaymentCardDetailHeading { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #ffffff; border-color: var(--brand-line); } page5 termsandconditions .dailogBg { background-color: #ffffff; } page5 termsandconditions .tncTitle { color: #4a4a48; font-weight: 400; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } page5 termsandconditions .crossIcon { color: #4a4a48; } page5 termsandconditions .modal-header { border-bottom-color: var(--brand-line) !important; } page5 termsandconditions .voucherfont { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } page5 termsandconditions .termsdescfont { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } page5 termsandconditions .tncCloseBtn { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ffffff; } page5 .termsCheckboxWrapper { background-color: #ffffff; border-color: #4a4a48; } page5 .termsCheckboxWrapper .agreementfont { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } page5 .termsCheckboxWrapper .termsfont { color: #4a4a48; font-weight: 400; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } page5 .termsCheckboxWrapper .control input:checked ~ .custoCheckbox { background-color: #faf9f5; } page5 .termsCheckboxWrapper .controlCheckbox .custoCheckbox:after { border-color: #4a4a48; } page5 .cardDetailsBgColor { background-color: #ffffff; border-color: var(--brand-line); } page5 .page5ButtonSurround .deskcheckout, page5 .page5ButtonSurround .deskback { color: #ffffff; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } page5 .page5ButtonSurround .mobcheckout, page5 .page5ButtonSurround .mobback { background-color: #f4f1ec; color: #ffffff; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } form[name=verifonePaymentForm] #rowFor_cardholdername .labelDiv { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } form[name=verifonePaymentForm] #rowFor_cardholdername #cardholdername { background-color: #faf9f5; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } form[name=verifonePaymentForm] #rowFor_pan .labelDiv { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } form[name=verifonePaymentForm] #rowFor_pan #pan { background-color: #faf9f5; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } form[name=verifonePaymentForm] #rowFor_cardType .labelDiv { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } form[name=verifonePaymentForm] #rowFor_cardType #cardTypeDropDown { color: #4a4a48; background-color: #faf9f5; font-weight: 400; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } form[name=verifonePaymentForm] #rowFor_cardType .counterIcon { color: #ffffff; background-color: #666666; } form[name=verifonePaymentForm] #rowFor_startdateArea .labelDiv { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } form[name=verifonePaymentForm] #rowFor_startdateArea .yearSelectID #startYearDropDown { color: #4a4a48; background-color: #faf9f5; font-weight: 400; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } form[name=verifonePaymentForm] #rowFor_startdateArea .yearSelectID .counterIcon { color: #ffffff; background-color: #666666; } form[name=verifonePaymentForm] #rowFor_startdateArea .monthSelectID #startMonthDropDown { color: #4a4a48; background-color: #faf9f5; font-weight: 400; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } form[name=verifonePaymentForm] #rowFor_startdateArea .monthSelectID .counterIcon { color: #ffffff; background-color: #666666; } form[name=verifonePaymentForm] #rowFor_expirydateArea .labelDiv { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } form[name=verifonePaymentForm] #rowFor_expirydateArea .yearSelectID #expiryYearDropDown { color: #4a4a48; background-color: #faf9f5; font-weight: 400; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } form[name=verifonePaymentForm] #rowFor_expirydateArea .yearSelectID .counterIcon { color: #ffffff; background-color: #666666; } form[name=verifonePaymentForm] #rowFor_expirydateArea .monthSelectID #expiryMonthDropDown { color: #4a4a48; background-color: #faf9f5; font-weight: 400; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } form[name=verifonePaymentForm] #rowFor_expirydateArea .monthSelectID .counterIcon { color: #ffffff; background-color: #666666; } form[name=verifonePaymentForm] #rowFor_csc .labelDiv { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } form[name=verifonePaymentForm] #rowFor_csc #csc { background-color: #faf9f5; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } #CardDetailsSurround #CardTypeRow #CardTypeLabel { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #CardDetailsSurround #CardTypeRow #DropDownCardType { color: #4a4a48; background-color: #faf9f5; font-weight: 400; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; border-color: #4a4a48; } #CardDetailsSurround #CardNumberRow #CardNumberLabel { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #CardDetailsSurround #CardNumberRow #CardNumberPaymentDetails { background-color: #faf9f5; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } #CardDetailsSurround #CardHoldersNameRow #CardHoldersNameLabel { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #CardDetailsSurround #CardHoldersNameRow #CardHoldersNamePaymentDetails { background-color: #faf9f5; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } #CardDetailsSurround #ValidToRow #ValidToLabel { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #CardDetailsSurround #ValidToRow #ValidToPaymentDetails { background-color: #faf9f5; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } #CardDetailsSurround #CardSecurityCodeRow #CardSecurityCodeLabel { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #CardDetailsSurround #CardSecurityCodeRow #CardSecurityCodePaymentDetails { background-color: #faf9f5; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } #CardDetailsSurround #NoCardDetailsRequiredRow #NoCardDetailsRequiredLabel { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #page6 .heading { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } #page6 .subHeading { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } #page6 .deliveryDetailsHeading { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #page6 .deskBackBtn, #page6 .mobBackBtn { color: #ffffff; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } #page6 .delivery-details .visible-lg .delivery-container { background-color: #ffffff; border-bottom-color: var(--brand-line); } #page6 .delivery-details .visible-lg .header { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } #page6 .delivery-details .visible-lg .pricetext, #page6 .delivery-details .visible-lg .vouchertext { color: #4a4a48; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } #page6 .delivery-details .visible-lg .deliverytext { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } #page6 .delivery-details .visible-lg .inputTextarea { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #4a4a48; } #page6 .delivery-details .visible-lg .totallabel { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4a4a48; } #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 ===== */ /* ===================================================================== Park House Hotel & Spa — engine theme brand layer (generated by retheme.py) Palette: page #ffffff, ink #4a4a48, dark #6b7155, accent #6f7558, sand #e8e2db, linen #faf9f5, paper #ffffff. Font: Open Sans Loaded last (from the wrapper), after any shared frame stylesheet. ===================================================================== */ :root { --brand-cream: #ffffff; --brand-ink: #4a4a48; --brand-corten: #6b7155; --brand-bronze: #6f7558; --brand-sand: #e8e2db; --brand-linen: #faf9f5; --brand-paper: #ffffff; --brand-muted: #666666; --brand-line: rgba(74, 74, 72, 0.12); --brand-line-strong: rgba(74, 74, 72, 0.25); --brand-font: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --brand-texture: none; --brand-heading-font: "Playfair Display", Georgia, "Times New Roman", serif; /* variables consumed by UserVoucher.css */ --buttonBackgroundColor: #4a4a48; --buttonTextColor: #ffffff; --buttonBackgroundColorHover: #6b7155; --buttonTextColorHover: #ffffff; --buttonBorder: 1px solid #4a4a48; --buttonBorderHover: 1px solid #6b7155; --checkboxBackgroundColor: #ffffff; --checkboxTickColor: #4a4a48; } /* ---------- 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: #848a6a; } #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(74, 74, 72, 0.12); color: #4a4a48; 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: #4a4a48; } #alacerHotelSurroundPageBody .brand-logo svg { display: block; width: 270px; 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: #676767; } #alacerHotelSurroundPageBody .brand-wordmark { font-family: "Playfair Display", Georgia, "Times New Roman", serif !important; font-size: 28px; line-height: 1; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; color: #4a4a48; } #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: #e8e2db; 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: 190px; } #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: "Playfair Display", Georgia, "Times New Roman", serif !important; font-size: 22px !important; line-height: 1.35; font-style: italic; color: var(--brand-ink) !important; margin-bottom: 18px !important; font-size-adjust: 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: "Playfair Display", Georgia, "Times New Roman", serif !important; font-weight: 500 !important; letter-spacing: 0.01em !important; font-size-adjust: none; text-transform: none !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: #6b7155 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: #e8e2db; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid rgba(232, 226, 219, 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: #6f7558 !important; border-color: #6f7558 !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: #5f654b !important; border-color: #5f654b !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: #6f7558 !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: #6f7558 !important; border-color: #6f7558 !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(74, 74, 72, 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(74, 74, 72, 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: 42px; width: auto; } @media (max-width: 767.98px) { #alacerHotelSurroundPageBody .brand-logo img { height: 32px; } } /* ---------- 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: #6b7155; --brand-accent: #6f7558; } /* 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: "Playfair Display", Georgia, "Times New Roman", serif !important; } #alacerHotelSurroundPageBody .brand-logo svg .logo-sans { font-family: "Open Sans", "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(74, 74, 72, 0), rgba(74, 74, 72, .82)) !important; color: #fff !important; padding: 56px 22px 18px !important; margin: 0 !important; text-align: left !important; text-transform: none !important; font-family: var(--brand-heading-font) !important; font-size: 26px !important; font-weight: 400 !important; line-height: 1.15 !important; letter-spacing: .01em !important; font-size-adjust: 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: 40px; background: #ffffff !important; color: #6f7558 !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: #848a6a !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-ink) !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: #666666 !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: #848a6a !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(74, 74, 72, 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(74, 74, 72, 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: #6f7558 !important; border-color: #6f7558 !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: #5f654b !important; border-color: #5f654b !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: #6f7558 !important; font-weight: 700 !important; } #alacerHotelSurroundPageBody #page3 .deskback:hover, #alacerHotelSurroundPageBody #page3 .mobback:hover, #alacerHotelSurroundPageBody #page4 .deskback:hover, #alacerHotelSurroundPageBody #page4 .mobback:hover { background-color: #6f7558 !important; border-color: #6f7558 !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: #e8e2db url("https://onlinebookings.alacer.co.uk/ParkHouseHotel/OnlineBookings/Content/BrandTheme/img/parkhouse-logo.svg") center / auto 42% no-repeat !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(74, 74, 72, .12); outline-offset: 0; } /* checkout steps: the progress links in small capitals, the page heading in the serif */ 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: var(--brand-ink) !important; text-transform: none !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(74, 74, 72, .55); } 100% { box-shadow: 0 0 0 18px rgba(74, 74, 72, 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(74, 74, 72, 0.12) !important; border-bottom: 1px solid rgba(74, 74, 72, 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(74, 74, 72, 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); } /* 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: #6f7558 !important; border: 1px solid #6f7558 !important; border-color: #6f7558 !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: #6f7558 !important; color: #ffffff !important; border-color: #6f7558 !important; } /* ===== Part 3: site-specific extra CSS (brand JSON extra_css_*) ===== */ /* Park House footer (custom_footer_html): the website's sage footer, a shade deeper so white text passes AA */ body .ph-footer { background: #6b7155 !important; color: #ffffff; font-family: "Open Sans", Arial, sans-serif; font-weight: 300; font-size: 14px; padding: 44px 24px 26px; margin-top: 0; } body .ph-footer .ph-f-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 28px; align-items: start; } body .ph-footer .ph-f-col + .ph-f-col { border-left: 1px solid rgba(255,255,255,.35); padding-left: 28px; } body .ph-footer p { margin: 0 0 6px; color: #ffffff !important; line-height: 1.6; } body .ph-footer .ph-f-title { font-family: "Playfair Display", Georgia, serif; font-size: 20px; font-weight: 500; margin-bottom: 4px; } body .ph-footer a { color: #ffffff !important; text-decoration: none; } body .ph-footer a:hover, body .ph-footer a:focus-visible { text-decoration: underline; } body .ph-footer .ph-f-links a { display: inline-block; margin: 0 14px 6px 0; } body .ph-footer .ph-f-copy { text-align: center; font-style: italic; font-size: 13px; margin: 34px 0 0; } @media (max-width: 767.98px) { body .ph-footer .ph-f-inner { grid-template-columns: 1fr; gap: 16px; } body .ph-footer .ph-f-col + .ph-f-col { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.35); padding-top: 16px; } }