body {margin: 0;background: #fff;font-family: Arial,Helvetica,sans-serif;font-size: 85%;color: #171717;line-height:22px;} /*bof basic elements*/ a img {border: none;} a:link, #navEZPagesTOC ul li a {color:#000;text-decoration:none;} a:visited {text-decoration:none;} a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {color: #444;} a:active {color:#444443;} h1 {text-transform:uppercase;font-weight:normal;font-size:160%;} h2 {text-transform:uppercase;font-weight:normal;color:#444;font-size:140%;font-weight:normal;} h3 {font-size: 120%;font-weight:normal;text-transform:uppercase;} h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{font-weight:normal;} .biggerText {font-size:1.2em;} .clearBoth {clear:both;} HR {margin-top: 0.5em;border:none;border-bottom:1px solid #dbdbce;margin-bottom:30px;margin-top:30px;} /*bof form elements*/ CODE {font-family: arial, verdana, helvetica, sans-serif;font-size: 1em;} FORM, SELECT, INPUT {display: inline;margin: 0.1em;;} TEXTAREA {margin: auto;display: block;width: 95%;border:1px solid #ddd;background:#ddddde;margin-top:10px;margin-bottom:10px;} input:focus, select:focus, textarea:focus {background: #ccc;} input {border:1px solid #ddd;background:#ddddde;height:28px;margin-bottom:10px;padding-left:10px;width:40%;} FIELDSET {padding: 30px;margin: 0.5em 0em;border: 1px solid #dbdbce;margin-bottom:30px;margin-top:30px;} #country{width:42%;} LEGEND {font-weight: normal;padding: 15px;background:#f4f4f4;color:#444;text-transform:uppercase;margin-left:-31px;} LABEL, h4.optionName {line-height: 1.5em;padding: 0.2em;} LABEL.checkboxLabel, LABEL.radioButtonLabel {margin: 0.5em 0.3em;color:#444;} LABEL.inputLabel {width: 11em;float: left;color:#444;} LABEL.inputLabelPayment {width: 15em;float: left;} LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {width: 12em;float: left;} P, ADDRESS {padding: 0.5em;} ADDRESS {font-style: normal;} input[type=hidden]{border:none;} input[type=image], input[type=submit]{border:none;height:auto !important;width:auto !important;} input[type=image]{background:none;} input[type=radio], input[type=checkbox]{width:auto;height:auto;border:none;background:none;padding:0;} input [type=submit], input[type=submit]{ -webkit-appearance: none;-webkit-border-radius: 0;} table{width:100%;} /*bof warnings, errors, messages*/ .messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {padding:0.2em;line-height:1.8em;border:0px solid #dbdbce;padding:15px;} .messageStackWarning, .messageStackError {background-color:#ff6938;color:#fff;} .messageStackSuccess {background-color:#ff6938;color:#fff;} .messageStackCaution {background-color:#ff6938;color:#fff;} .messageStackCaution img{vertical-align:middle;margin-right:10px;} /*bof wrappers - page or section containers*/ #main-container {margin:20px auto 0 auto;background:transparent;text-align:left;vertical-align:top;border:1px solid #dbdbce;} #headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {margin:0;padding:0em;} #mainWrapper {margin:auto;} #logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {float:left;} #tagline {margin:0;color:#171717;font-size:1.45em;text-align:left;text-transform:lowercase;clear:both;} #logo {margin-bottom:10px;} #sendSpendWrapper {margin:0em 0em 1em 1em;border:1px solid #cacaca;float:right;} .floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {margin:0;width:47%;} .wrapperAttribsOptions {margin:0.3em 0em;} #logoWrapper{float:left;width:25%;} #header-right{width:69%;border:1px solid #000;} /*bof navigation*/ .navNextPrevCounter {margin:0;font-size:0.9em;} .navNextPrevList {margin:0;padding:0.5em 0em;display:inline;white-space:nowrap;list-style-type:none;} #navCategoryIcon, .buttonRow, #indexProductListCatDescription {margin:0.5em;} #navBreadCrumb{margin:0 0 0 6px;padding:0.5em;font-size:0.95em;font-weight:normal;color:#a0a0a0;} #navBreadCrumb i{font-size:130%;margin-left:3px;} /*bof header*/ #headerWrapper{margin:0 auto;} #top-wrapper{width:100%;height:30px;background:#242a2d;color:#fff;font-size:130%;text-align:left;padding-top:10px;padding-bottom:5px;} #top-wrapper a{color:#000000;} #top-wrapper:hover{background:#f2c212;} #top-inner{background:none;} .top-specials{text-transform:uppercase;border-radius:3px;letter-spacing:1px;line-height:24px;margin-right:20px;padding:0 10px;font-size:90%;float:left;background:rgb(242 194 18);} #top-middle{width:100%;background:#fff;padding-top:20px;padding-bottom:20px;border-bottom:1px solid #dbdbce;} #navMainWrapper {margin:0 auto;background:transparent;color:#171717;width:25%;border:0px solid #000;float:right;} #navMain ul {margin:0 auto;padding: 0px 0 0.5em 0;list-style-type:none;text-align:right;line-height: 1.5em;float:right;} #navMain ul li {display:inline;} #navMain ul li a {margin:0;padding:0em 1.0em;color: #444;text-decoration:none;white-space:nowrap;font-size:100%;text-transform:uppercase;} #navMain ul li a:hover {color: #ff6938;} #navEZPagesTop {background-color:#444;} #navEZPagesTop {margin:0;padding:0.5em;font-size:0.95em;font-weight:bold;color:#fffffd;} #navEZPagesTop a{color:#fffffd;} #navEZPagesTop a:hover {color:#f99d30;} #navCatTabsWrapper {margin: 0em;background-color: #444;width:100%;height:1%;font-weight: bold;color: #fff;} #navCatTabs ul {margin: 0;padding: 0.5em 0em;list-style-type: none;text-align: center;line-height: 1.5em;} #navCatTabs ul li {display: inline;} #navCatTabs ul li a {text-decoration: none;padding: 0em 0.5em;margin: 0;color: #fffffd;white-space: nowrap;} #navBreadCrumb {margin:18px 0 0 0;} #navMainSearch {margin:0;float:right;} .search-header-box {padding-left:5px;background:#fff;width:160px;height:32px;color:#a0a0a0;border:1px solid #dbdbce;text-transform:lowercase;font-size:75%;} .search-box {padding-left:5px;background:#fff;width:160px;height:40px;color:#a0a0a0;border:1px solid #dbdbce;text-transform:lowercase;font-size:80%;} .search-header-box:focus{background:#fff;} #navMainSearch-mobile{display:none;} .header-cart{font-size:180% !important;text-align:right;margin-top:10px;margin-bottom:10px;margin-right:5px;} /*bof ezpages*/ #navEZPagesTOCWrapper {height:1%;border:1px solid #000;font-weight:bold;float:right;} #navEZPagesTOC ul {margin:0;padding:0.5em 0em;list-style-type:none;line-height:1.5em;} #navEZPagesTOC ul li {white-space: nowrap;} #navEZPagesTOC ul li a {margin:0;padding:0em 0.5em;} /*bof the main content classes*/ #contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {vertical-align:top;} #productDescription, .shippingEstimatorWrapper {padding:0.5em;} .alert {margin-left:0.5em;color:#ff0001;} .important {font-weight:bold;} .gvBal {float:right;} .centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {padding:0.8em;} #bannerTwo { width: 1200px; height: 300px; overflow: hidden; } #bannerTwo img { width: 100%; height: auto; } .smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {font-size: 0.9em;} /*bof shopping cart display*/ #cartContentsDisplay {border:1px solid #dfdfd7;} #cartContentsDisplay td{padding-top:25px;padding-bottom:25px;border-bottom:1px solid #dbdbce;} .cartQuantity input{margin-left:15px;} .rowOdd {background-color:#fff;height:1.5em;vertical-align:top;} .rowEven {background-color:#fff;height:1.5em;vertical-align:top;} .tableHeading TH {background:#171717;height:30px;color:#fff;} .tableHeading{background-color:#171717;color:#fff;} #cartSubTotal {font-weight:normal;text-align:right;line-height:2.2em;background:#f4f4f4;font-size:120%;text-transform:uppercase;margin-bottom:30px;padding-top:20px;padding-bottom:20px;padding-right:10px;border-bottom:1px solid #dbdbce;border-left:1px solid #dbdbce;border-right:1px solid #dbdbce;} .tableRow, .tableHeading, #cartSubTotal {height:2.2em;} .cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {padding:0.5em 0em;} .cartUnitDisplay, .cartTotalDisplay {padding-right:0.2em;text-align:right;} #scUpdateQuantity {width:2em;} .cartQuantity {width:4.7em;} .cartNewItem {color:#444443;position:relative;} .cartOldItem {color:#444443;position:relative;} .cartBoxTotal {text-align:right;font-weight:bold;} .cartRemoveItemDisplay {width:3.5em;} .cartAttribsList {margin-top:10px;margin-left:30px;} .cart-products{margin-left:80px;} #mediaManager {margin:0.2em;padding:0.5em;width: 50%;} .mediaTitle {float:left;} .mediaTypeLink {float:right;} .normalprice, .productSpecialPriceSale {text-decoration:line-through;} .productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {color:#ff0001;} .orderHistList {margin:1em;padding:0.2em 0;} #cartBoxListWrapper ul, #ezPageBoxList ul {list-style-type:none;} #cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {margin:0;padding:0.2em 0;} #cartBoxEmpty, #cartBoxVoucherBalance {font-weight: bold;} .totalBox {padding: 0.2em;width:5.5em;text-align:right;} .lineTitle, .amount {padding:0.2em;text-align:right;} .amount {width:5.5em;} .cart-update{margin:-5px 0 0 20px;} #shoppingCartDefault .buttonRow{margin-bottom:30px;} .mobile-only{display:none;} .cartQuantity-mobile{display:none;} #stateZone{width:300px;margin-top:10px;margin-bottom:10px;} #shippingEstimatorContent h2{font-size:160%;color:#ff6938;margin-bottom:30px;} #shippingEstimatorContent .buttonRow{width:63%;margin-top:-20px;} #shippingEstimatorContent .button_update{float:right;} #shippingEstimatorContent table{margin-top:30px;border-collapse:collapse;} #shippingEstimatorContent table td{border-bottom:1px solid #dbdbce;padding:10px;} #seProductsHeading, #seTotalHeading{display:none;} /*bof image display*/ #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {margin:0 1em 1em 0;} #cartImage {margin:0.5em 1em;} /*bof attributes*/ .attribImg {margin:0.3em 0;width:20%;} /*bof list box contents*/ .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {margin: 1em 0;} /*bof sideboxes*/ #navColumnOne {background-color:#fff;} #navColumnTwo {background-color:#fff;} h3.leftBoxHeading, h3.rightBoxHeading {color:#444;font-weight:normal;font-size:150%;} h3.leftBoxHeading a, h3.rightBoxHeading a{color:#444;font-weight:normal !important;} .leftBoxHeading, .centerBoxHeading, .rightBoxHeading {margin:0;padding:0.5em 0.2em;background:none;text-align:left !important;color:#444;font-size:150%;font-weight:normal;text-transform:uppercase;} .centerBoxHeading{margin:50px 0 20px 0px;padding:10px 0px 10px 20px;background:#fff;color:#171717;font-size:150%;} .leftBoxContainer, .rightBoxContainer {margin:1.5em 0 20px 0;} .rightBoxContainer{margin-right:7px;} .sideBoxContentItem, #reviewsContent{margin:20px 0 20px 0;} .sideBoxContentItem a, #reviewsContent a{font-weight:normal;clear:both;color:#171717;margin-bottom:20px;padding-bottom:10px;} .box-title a{color:#171717;} .box-title{margin:0 auto 10px auto;width:90%;display:block;} .box-price{font-size:130%;color:#171717;margin:0 auto 30px auto;border-bottom:1px solid #dbdbce;padding-bottom:20px;width:90%;} .sideBoxContent img, #reviewsContent img{margin-bottom:10px;} .sideBoxContent {padding:20px 5px 20px 5px;border-bottom:1px solid #dbdbce;background:#f4f4f4;color:#686868;} h3.leftBoxHeading a:hover {color:#ff6938;text-decoration:none;} h3.rightBoxHeading a:hover {color:#ff6938;text-decoration:none;} #catBoxDivider {display:none;} #specialsHeading a:hover, #whatsnewHeading a:hover, #featuredHeading a:hover {color:#444443;} .centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .gvBal, .attribImg {text-align:center;} #bestsellers .wrapper {margin:0 20px 0 20px;} #bestsellers ol {padding:0;margin-left:1.1em;} #bestsellers li {padding:0;margin:0.3em 0 0.3em 0;} #upProductsHeading {text-align:left;} #upDateHeading {text-align:right;} .side-search-box{margin-bottom:5px;width:80%;height:18px;border:1px solid #b5b5b5;} #documentcategoriesContent, #categoriesContent, #informationContent, #moreinformationContent, #bestsellersContent{border:none;} #categories .sideBoxContent{background:none;} select, #musicgenresContent select, #manufacturersContent select{ background: linear-gradient(to bottom, #f8f8f8 0%, #f2f2f2 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);border: 1px solid #ddd;background:#ddddde;border-radius:2px;box-shadow: 0 1px #FFFFFF inset;display: inline-block;height: 30px;min-width: 60px;position: relative;width: 80%;color:#666;} #shoppincartHeading{font-size:170%;} #shoppingcart .cartBoxTotal{font-weight:normal;font-size:130%;color:#171717;} /*bof misc*/ .back {float:left;} .forward, #shoppingCartDefault #PPECbutton {float:right;} .bold {font-weight:bold;} .hiddenField {display:none;} .visibleField {display:inline;} #myAccountGen li, #myAccountNotify li {margin:0;} .accountTotalDisplay, .accountTaxDisplay {width:20%;text-align:right;} .accountQuantityDisplay {width:10%;vertical-align:top;} TR.tableHeading {background-color:#171717;height:35px;font-weight:normal;text-transform:uppercase;} #siteMapList {width:90%;float:right;} .ratingRow {margin:1em 0 1.5em 0;} LABEL#textAreaReviews {font-weight:normal;margin: 1em 0;} #popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {background:none;} .information {padding:10px 3px; line-height:150%;} #shoppingcartBody #shippingEstimatorContent {clear:both;} .seDisplayedAddressLabel {background-color:#171717;text-align:center;color:#fff;} .seDisplayedAddressInfo {text-transform: uppercase;text-align:center;font-weight:bold;} #seShipTo {padding:0.2em;} /*bof center boxes*/ .product_title {margin:20px auto 0 auto;min-height:45px;color:#444;font-size:120%;line-height:18px;} .product_title a{color:#787878;} .product_title a:hover{color:#444;} .product_detail {margin-top:30px;margin-bottom:10px;} .price, .pl-price{font-size:150%;margin-bottom:20px;} .normalprice {margin-right:10px;font-size:80%;color:#ccc;} .productSpecialPrice {font-size:110%;} .productPriceDiscount{display:none;} .box_image{margin:15px 0 20px 0;} /*bof product listing*/ .productListing-even {border:1px dashed #ccc;} .productListing-rowheading {background:none;height:30px;color:#a0a0a0;text-transform:uppercase;} .tabTable th{border-bottom:1px solid #dbdbce;} .productListing-rowheading a{color:#a0a0a0;} .productListing-rowheading a:hover{color:#444443;} #productsListingTopNumber {margin:5px 0 30px 0;} #productsListingBottomNumber {margin-top:15px;margin-bottom:15px;} #productListHeading {margin-bottom:30px;margin-top:25px;} .tabTable {border:1px solid #dfdfe7;border-width:0 0 0 0;} .productListing-data {padding:10px 0 10px 0;border-bottom:1px solid #dbdbce;} #gridSorter {background:#e2e3e8;background: -moz-linear-gradient(top, #f8f8f8, #e2e3e8);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f8f8f8), to(#e2e3e8));background: -o-linear-gradient(top, #f8f8f8, #e2e3e8);margin:10px 0 0 0 ;width:100%;text-align:center;text-transform:uppercase;color:#f99d30;font-weight:bold;} .more-info{float:left;} .more-info a{color:#fff;} .centerBoxContentsAlsoPurch, .centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials{background:#f4f4f4;border:1px solid #dbdbce;padding:20px 0px;width:30% !important;transition:border 2s ease; -webkit-transition:border 2s ease;-moz-transition: border 2s ease; -o-transition:border 2s ease;text-align:center;margin-left:15px;margin-bottom:20px;} .listingProductImage{margin:0 auto;} .centerBoxContentsAlsoPurch:hover, .centerBoxContentsProducts:hover, .centerBoxContentsNew:hover, .centerBoxContentsFeatured:hover, .centerBoxContentsSpecials:hover{border:1px solid #171717;} .itemTitle{font-weight:normal;color:#787878;min-height:50px;padding-left:20px;padding-right:20px;} .itemTitle a{color:#787878;} .listingDescription{font-size:110%;padding-left:20px;padding-right:20px;color:#444;} #sorter select, #indexProductList form select{width:30%;margin-bottom:40px;} #productsListingBottomNumber strong, #productsListingTopNumber strong{font-weight:normal;} #productsListingListingBottomLinks a, #productsListingListingTopLinks a{padding:8px;background:#f4f4f4;border:1px solid #dbdbce;transition:background 2s ease; -webkit-transition:background 2s ease;-moz-transition: background 2s ease; -o-transition:background 2s ease;} #productsListingListingBottomLinks a:hover, #productsListingListingTopLinks a:hover{background:#171717;color:#fff;} .current{padding:8px;background:#171717;color:#fff;border:1px solid #dbdbce;} .pl-details{margin-bottom:0px;} .list-more {display:block;background-color:#222;padding:0.8em 1.2em;width:50%;margin:0 auto;color:#fff !important;text-transform:uppercase;font-weight:normal !important;margin-top:20px;} .list-price{font-size:150%;} /*bof product info*/ #cartAdd {margin:0;padding:0;text-align:center;margin-top:30px;margin-bottom:30px;border-bottom:1px solid #dbdbce;padding-bottom:30px;} #cartAdd input{width:50px;} #product-divider {margin:10px 0 20px 0;border-bottom:1px solid #dbdbce;} .navNextPrevWrapper {text-align:center;margin-bottom:20px;} .navNextPrevCounter {text-align:center;margin-bottom:20px;margin-top:30px;} #productName {font-weight:normal;font-size:160%;color:#444;margin-top:0px;margin-bottom:30px;} #productDetailsList {margin:10px 0 10px 30px;} #attribsOptionsText {font-weight:normal;} #productAttributes{margin:10px 0;color:#444;} .optionName {margin-top:0;} #alsoPurchased {margin-top:20px;} #productPrices{text-align:center;color:#000;border-bottom:1px solid #dbdbce;padding-bottom:30px;margin-bottom:30px;} #pi-left{float:left;margin-bottom:30px;width:45%;background:#f4f4f4;border:1px solid #dbdbce;padding:10px;} #pi-right{float:right;background:#f4f4f4;border:1px solid #dbdbce;width:40%;padding:30px;margin-bottom:30px;} #reviewsWrite .button_reviews{position:relative;top:20px;} #reviewsDefault .button_goto_prod_details{position:relative;top:20px;} #reviewsInfoDefault .button_goto_prod_details{position:relative;top:20px;} #reviewsInfoDefault .button_write_review{position:relative;top:40px;} .additionalImages img{width:50px;} #productInfoLink{margin-top:20px;} .pi-reviews, #productDetailsList, #productDescription{line-height:22px;color:#444;} #productDescription{font-size:110%;} .review-date{margin-top:10px;margin-bottom:10px;} .pi-reviews{font-size:110%;} .review-text{margin-bottom:30px;border-bottom:1px solid #dbdbce;padding-bottom:30px;} #productReviewLink{float:right;margin-right:10px;margin-bottom:30px;} .pi-reviews .button_write_review{font-size:110%;} .pi-reviews-left{float:left;width:20%} .pi-reviews-left .rating{margin-top:20px;} .pi-reviews-right{float:right;width:75%;border-left:1px solid #dbdbce;padding-left:30px;} .pi-reviews-wrapper{border:1px solid #dbdbce;background:#f4f4f4;margin-bottom:30px;padding:30px;} .custom-tab-image{float:left;} #custom-tab-text{color:#444;line-height:22px;font-size:110%;float:right;width:65%;} .review-first{margin-bottom:30px;} .review-first-write{color:#ff6938;} .review-first-write:hover{text-decoration:underline;} #horizontalTab{margin-top:30px !important;clear:both;} /*bof mobile menu*/ .menu-collapser {position:relative;background:transparent;color:#000;text-shadow: 0 1px 0 rgba(0,0,0,0.5);width: 100%;height: 48px;line-height: 48px;font-size: 16px;padding: 0 8px;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;} .collapse-button {position: absolute;right: 8px;top: 50%;width: 40px;background: #171717;box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.075);padding: 7px 10px;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);cursor: pointer;font-size: 14px;text-align: center;transform: translate(0, -50%);-o-transform: translate(0, -50%);-ms-transform: translate(0, -50%);-moz-transform: translate(0, -50%);-webkit-transform: translate(0, -50%);box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box} .collapse-button:hover, .collapse-button:focus {background-image: none;background: #666;color: #fff;} .collapse-button .icon-bar {background-color: #fff;border-radius: 1px 1px 1px 1px;box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);display: block;height: 2px;width: 18px;margin: 3px 0;} #menu{float:left;margin-top:65px;width:42%;} ul.slimmenu, ul.slimmenu1 {list-style-type: none;margin: 0;padding: 0;width: 100%;} ul.slimmenu li, ul.slimmenu1 li {position: relative;display: inline-block;background:transparent;} ul.slimmenu > li, ul.slimmenu1 > li { margin-right: -5px; border-left: 0px solid #999 } ul.slimmenu > li:first-child, ul.slimmenu1 > li:first-child { border-left: 0 } ul.slimmenu > li:last-child, ul.slimmenu1 > li:last-child { margin-right: 0 } ul.slimmenu li a {display: block;color: #444;padding: 12px 34px 12px 6px;font-size: 120%;font-weight: normal;text-shadow: 0 1px 0 rgba(255,255,255,0.2);transition: background-color 0.5s ease-out;-o-transition: background-color 0.5s ease-out;-moz-transition: background-color 0.5s ease-out;-webkit-transition: background-color 0.5s ease-out;} ul.slimmenu1 li a{display: block;color: #444;padding: 12px 34px 12px 6px;font-size: 16px;font-weight: normal;text-shadow: 0 1px 0 rgba(255,255,255,0.2);transition: background-color 0.5s ease-out;-o-transition: background-color 0.5s ease-out;-moz-transition: background-color 0.5s ease-out;-webkit-transition: background-color 0.5s ease-out;} ul.slimmenu li a:hover, ul.slimmenu1 li a:hover {background-color: #fff;text-decoration: none;color:#ff6938;} ul.slimmenu li .sub-collapser, ul.slimmenu1 li .sub-collapser {background: none;position: absolute;right: 0;top: 0;width: 28px;height: 100%;text-align: center;z-index: 999;cursor: pointer;} ul.slimmenu li .sub-collapser:before, ul.slimmenu1 li .sub-collapser:before {content: '';display: inline-block;height: 100%;vertical-align: middle;margin-right: -0.25em;} ul.slimmenu li .sub-collapser > i, ul.slimmenu1 li .sub-collapser > i {color:#f2c212;font-size:11px;display:inline-block;vertical-align:middle;} ul.slimmenu li ul, ul.slimmenu1 li ul {margin: 0;list-style-type: none;} ul.slimmenu li ul li, ul.slimmenu1 li ul li {background:#f4f4f4;width:190px;padding-left:20px;font-size:95%;} ul.slimmenu li ul li a:hover, ul.slimmenu1 li ul li a:hover{color:#f2c212;} ul.slimmenu li > ul, ul.slimmenu1 li > ul {display: none;position: absolute;left: -40px;top: 100%;z-index: 9999;} ul.slimmenu li > ul > li ul, ul.slimmenu1 li > ul > li ul {display: none;position: absolute;left: 75%;top: 0;z-index: 999;} ul.slimmenu.collapsed li, ul.slimmenu1.collapsed li {display: block;width: 99%;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box} ul.slimmenu.collapsed li a, ul.slimmenu1.collapsed li a {display: block;border-bottom: 1px solid rgba(0, 0, 0, 0.075);box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box} ul.slimmenu.collapsed li .sub-collapser, ul.slimmenu1.collapsed li .sub-collapser {height: 40px;width:100px;} ul.slimmenu.collapsed li > ul, ul.slimmenu1.collapsed li > ul {display: none;position: static;} ul.slimmenu.collapsed li ul.level2, ul.slimmenu1.collapsed li ul.level2 {margin-left:-30px;width:99%;} ul.slimmenu.collapsed li ul.level2 li ul, ul.slimmenu1.collapsed li ul.level2 li ul {margin-left:-30px;width:99%;} /*bof expandale/contractable*/ .heading{text-transform:uppercase;font-size:110%;padding-bottom:25px;padding-top:15px;background:#1d1d1d url(../images/title-close.png) no-repeat 15px 50%;height:12px;padding-left:30px;color:#fff;font-family: 'Belleza', sans-serif;} .minus{background:#1d1d1d url(../images/title-open.png) no-repeat 15px 50%;padding-left:30px;} .content1{line-height:20px;} /*bof home page*/ #home-text{margin-top:30px;font-size:100%;word-wrap:break-word;} .home-ad{margin-left:10px;margin-right:10px;} .ad { -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;} .ad:hover { -webkit-transform: scale(1.05);transform: scale(1.05); -moz-transform: scale(1.05);} /*bof category*/ #categoryDescription{margin:15px 0 30px 0;font-size:100%;} .categoryListBoxContents img{margin-bottom:20px;} .categoryListBoxContents a{font-size:110%;color:#171717;} .categoryListBoxContents a:hover{color:#fff;} .categoryListBoxContents {} .categoryListBoxContents:hover{} .categoryListBoxContents:hover a{color:#fff;} .common-wrap{padding-top:20px;padding-bottom:20px;transition:background 2s ease; -webkit-transition:background 2s ease;-moz-transition: background 2s ease; -o-transition:background 2s ease;background:#f4f4f4;border:1px solid #dbdbce;width:90%;margin:0 auto;} .common-wrap:hover{background: #171717;} #categoryImgListing{display:none;} #indexProductListCatDescription, #categoryDescription{line-height:20px;background:#f4f4f4;border:1px solid #dbdbce;padding:25px 15px;} /*bof footer menu*/ #navSuppWrapper {margin: 10px 5px 0;padding: 0;background:none;font-weight: bold;border-top:1px solid #dbdbce;} #navSuppWrapper a{color:#444;font-weight:normal;} #siteinfoLegal, #footer-bottom {padding: .5em 0 0;width:100%;line-height:normal;clear:both;color:#171717;background:#f4f4f4;text-align:center;margin-bottom:30px;font-size:80%;} #siteinfoLegal a, #footer-bottom a {padding: 0 0.5em 0 0.5em;color: #171717;white-space: nowrap;} #siteinfoLegal a:hover, #footer-bottom a:hover {color: #fa6938;} #bannerSix {margin-top:0px;padding-bottom:30px;background:#f4f4f4;} #flex-navSupp ul {margin: 0;padding: 0.5em 0em;list-style-type: none;text-align: center;line-height: 1.5em;} #flex-navSupp ul li {display: inline;} #flex-navSupp ul li a {text-decoration: none;padding: 0em 0.5em;margin: 0;color: #ffffff;white-space: nowrap;} #flex-navSupp { padding-top: 25px; display: table; width: 100%; background: url('/images/woodies.png'); /* Background image with fallback color */ background-size: cover; /* Ensures the image covers the element */ background-repeat: no-repeat; /* Prevents tiling */ background-position: center; /* Centers the image */ color: #171717; } .flexFooterCol {display:table-cell; } *+html .ezpagesFooterCol {float: left;}/*ie7 hack*/ #flex-navSupp .flexFooterCol a { color: #666564; font-weight: normal;font-size:110%;line-height:25px;} .flexFooterCol h4 {color: #171717; text-align: left;text-transform:uppercase;font-weight:600;margin-left:5px;font-size:160%;padding-bottom: 10px;} .ffCcol4 i{font-size:200%;border:1px solid #dbdbce;padding:10px;background:#fff;transition:background 2s ease;-webkit-transition:background 2s ease;-moz-transition:background 2s ease;-o-transition:background 2s ease;min-width:30px;} .ffCcol4 i{color:#fff;font-size:155%;padding:13px;-webkit-transition:background 2s ease;} .ffCcol4 i{font-size:200%;border:1px solid #dbdbce;padding:10px;background:#fff;transition:background 2s ease;-webkit-transition:background 2s ease;-moz-transition:background 2s ease;-o-transition:background 2s ease;min-width:30px;} .ffCcol4 i:hover{background:#171717;color:#fff;} #flex-navSupp .flexFooterCol li {display: block; text-align: left;} #flex-navSupp .flexFooterCol li span {display: block; text-align:center;} #flex-navSupp .flexFooterCol.ffCcol1 li span.flexFooterColImage {text-align:left;} #flex-navSupp .flexFooterCol.ffCcol1 {border:0;} #flex-navSupp a.activePage {} #flex-navSupp a:hover {color: #fa6938;} /*bof css buttons*/ .cssButton, .cssButtonHover, .more-info {background-color:#171717;transition:background 2s ease;-webkit-transition:background 2s ease;-moz-transition:background 2s ease;-o-transition:background 2s ease;color:#fffffd;text-transform:uppercase;text-align:center;white-space:nowrap;text-decoration:none;font-weight:normal;padding:0.8em 1.2em;} .more-info{width:80px;margin:0 auto;} .more-info:hover{background:#111111;} .more-info .icon-circle-arrow-right:before{color:#fff !important;margin-left:5px;vertical-align:middle;} .cssButtonHover {color:#171717;background:#ccc;text-decoration: none;} .small_delete, .button_prev, .button_next, .button_search {width: 7em;} .button_sold_out_sm, .button_sold_out, .button_update_cart, .button_checkout, .button_login {width: 10em;} .button_return_to_product_list, .button_add_selected {width: 22em;} .button_in_cart{width: 19em;} .button_submit {width: 18em;} .button_update_cart {color: red;} .button_update_cartHover {color: #000;} .button_in_cart{width:150px !important;font-size:120% !important;background:#444;height:40px;} .button_in_cartHover{background:#a0a0a0;} .button_add_selected{width:250px !important;height:auto;} .button_search{height:auto !important;width:40px !important;background:#171717;border:none;position:relative;top:1px;left:-3px;} .button_buy_now .icon-circle-arrow-right:before{color:#fff !important;margin-left:5px;vertical-align:middle;} .button_checkout{background:#ff6938;} /*bof better categories*/ .betterCategories, .betterDocuments, .betterEzpages, .betterInformation, .betterMoreinformation, .betterBestsellers {border-top: 0px solid #fffffe;} .betterCategories a, .betterCategories a:visited, .betterDocuments a, .betterDocuments a:visited, .betterEzpages a, .betterEzpages a:visited, .betterInformation a, .betterInformation a:visited, .betterMoreinformation a, .betterMoreinformation a:visited, .betterBestsellers a, .betterBestsellers a:visited {display: block;background-color: #f4f4f4;border-top: 0px solid #ffffff;border-bottom:1px solid #dbdbce;padding: 15px 4px 15px 20px;transition:background 2s ease;-webkit-transition:background 2s ease;-moz-transition:background 2s ease;-o-transition:background 2s ease;} .betterCategories a:hover, .betterCategories a:active, .betterDocuments a:hover, .betterDocuments a:active, .betterEzpages a:hover, .betterEzpages a:active, .betterInformation a:hover, .betterInformation a:active, .betterMoreinformation a:hover, .betterMoreinformation a:active, .betterBestsellers a:hover, .betterBestsellers a:active {background-color: #ff6938;color:#fff;} .betterEzpages a:before, .betterMoreinformation a:before, .betterDocuments a:before, .betterInformation a:before, .betterCategories a:before{position:absolute;font-family: FontAwesome;content: "\f0da";} .betterEzpages img, .betterMoreinformation img, .betterDocuments img, .betterInformation img, .betterCategories img{padding-left:20px;} .cat-count{float:right;margin-right:20px;padding-left:20px;color:#f4f4f4;} #moreinformation .sideBoxContent, #information .sideBoxContent{padding-top:0;padding-bottom:0;} /*bof slide out*/ .slide-out-div {padding: 30px;width: 250px;height:auto !important;background: #f4f4f4;border: 1px solid #29216d;position:relative;z-index:999;border:1px solid #dbdbce;box-shadow: 0 5px 7px -5px #333;-moz-box-shadow:0 5px 7px -5px #333;-webkit-box-shadow:0 5px 7px -5px #333;} /*bof best sellers thumbnails*/ .bs-image{float:left;width:53%;} .bs-name{float:right;width:45%;line-height:22px;} .bs-wrapper{margin-bottom:20px;border-bottom:0px solid #dbdbce;background:#fff;padding:20px;} .bs-price{margin-top:15px;color:#171717;font-size:120%;line-height:25px;} .bs-price .normalprice{font-size:70%;} .bs-price .productSpecialPrice{font-size:95%;} /*bof reviews write*/ .review-write-left{float:left;width:40%;text-align:center;} .review-write-right{float:right;width:55%;border:0px solid #444;} #textAreaReviews{font-size:110%;} #reviewsWritePrice{font-size:200%;color:#171717;} #reviewsWrite .buttonRow{margin-bottom:20px;} #reviews-cart{margin-top:30px;} /*bof product reviews*/ .review-content{background:#f4f4f4;border:1px solid #dbdbce;padding:30px;line-height:22px;} .reviews-left{float:left;width:20%;} .reviews-right{float:right;width:75%;border-left:1px solid #dbdbce;padding-left:30px;} #button-write{margin-top:60px;} .productReviewsDefaultReviewer{margin-bottom:20px;} .navSplitPagesResult strong{font-weight:normal;} /*bof all reviews*/ .all-reviews-left{float:left;width:35%;text-align:center;} .all-reviews-right{float:right;width:55%;border-left:1px solid #dbdbce;padding-left:30px;} .reviews-details{margin:0px auto 30px auto;width:80px;} .reviews-details .button_goto_prod_details{margin:0 auto;font-size:100%;} .smallProductImage{} .all-reviews-right h2{color:#444;} #reviewsDefault .rating{margin-top:20px;margin-bottom:20px;} /*bof my account*/ #myAccountNotify, #myAccountGen{list-style-type:none;font-size:110%;line-height:22px;} /*bof checkout*/ #checkoutConfirmDefault #cartContentsDisplay{margin-top:30px;margin-bottom:30px;} #checkoutConfirmDefault #orderTotals{margin-bottom:30px;} #checkoutSuccessLogoff .buttonRow{margin-bottom:30px;margin-top:30px;} .buttonRow{margin-top:30px;} /*bof contact form*/ .contact-left{float:left;width:48%;} .contact-right{float:right;width:48%;} #contactUsDefault fieldset{border:none;margin:0;} .contact-left input[type=text]{width:90%;} .contact-left .alert{float:right;} #enquiry{height:175px;} #contactUsDefault .buttonRow{margin-top:-30px;margin-right:30px;} #contactUsNoticeContent{margin-bottom:30px;} #contactUsDefault .success-back{margin-top:30px;} /*bof advanced search*/ .floatingBox{width:40%;} #advSearchDefault fieldset, #advSearchDefault legend{border:none;margin:0;} #advSearchResultsDefault select{width:40%;margin-bottom:30px;margin-top:30px;} /* Hide Zen Cart back to top button */ #BackToTop, .BackToTop, #scrollUp { display: none !important; } /* ========================================================================== UPDATED CUSTOM HOMEPAGE SLIDER FIX ========================================================================== */ /* 1. Size the slider container, center it, and pull it UP to remove top white space */ .content-slider { max-width: 1200px !important; margin: 0 auto !important; /* Strips the large top/bottom margin entirely */ padding: 0 15px !important; /* Keeps clean spacing on left/right sides */ box-sizing: border-box !important; background: transparent !important; border: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; } /* 2. Force the images to lock to your native 1200x303 proportions */ .content-slider .flexslider .slides img { width: 100% !important; max-height: 303px !important; height: auto !important; object-fit: contain !important; } /* 3. Hide the unwanted grey text overlay box entirely */ .content-slider .flexslider .slides .banner { display: none !important; } /* 4. Make the navigation dots sit close to the banner image */ .content-slider .wrapper--container { display: block !important; visibility: visible !important; margin-top: 5px !important; /* Brings the dots container up close to the image */ } .flex-control-nav { position: relative !important; bottom: 0 !important; /* Resets the overly low position */ margin: 0 auto !important; text-align: center !important; display: block !important; } /* Center the slider navigation dots perfectly */ .content-slider .wrapper--container, .flex-control-nav { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; text-align: center !important; margin: 10px auto 0 auto !important; /* Centers the container block and adds space on top */ padding: 0 !important; list-style: none !important; /* Removes any accidental bullet points */ } /* Make sure the individual dot items sit horizontally side-by-side */ .flex-control-nav li { display: inline-block !important; margin: 0 6px !important; /* Adds subtle spacing between each dot */ float: none !important; /* Disables any left-floating styling from the theme */ } /* ========================================================================== CITY FLYERS - MODERN HEADER + RESPONSIVE MENU (replaces the old "FINAL COMPREHENSIVE HEADER BALANCER" block) -------------------------------------------------------------------------- READ BEFORE EDITING - the 3 rules that keep the mobile menu working: 1. The menu is a "slimmenu". Its JavaScript adds the class .collapsed when the screen is narrow, and opens/closes the list with INLINE styles. 2. So desktop styles target ul.slimmenu:not(.collapsed) and phone styles target ul.slimmenu.collapsed 3. NEVER put display: ... !important on the plain ul.slimmenu - that is what kept the phone menu stuck open before. Breakpoint: 800px (must match resizeWidth in the slimmenu init script). ========================================================================== */ :root { --cf-accent: #f2c212; /* brand gold */ --cf-accent-dark: #dcae00; --cf-ink: #1f2326; /* main text */ --cf-muted: #5b6166; --cf-line: #e7e8ea; --cf-soft: #f4f5f6; --cf-radius: 12px; --cf-shadow: 0 10px 28px rgba(20, 24, 28, .14); } /* ---------- keep the whole header (and its dropdowns) above the slider ---------- */ #headerWrapper { position: relative; z-index: 1000; } /* ---------- top announcement bar ---------- */ #headerWrapper #top-wrapper { height: auto; min-height: 0; padding: 8px 0; font-size: 13px; line-height: 24px; letter-spacing: .3px; } #headerWrapper #top-wrapper:hover { background: #242a2d; } /* was turning the whole bar gold on hover */ #headerWrapper #top-inner-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; overflow: hidden; } /* ---------- main header row: logo | menu | login + cart ---------- */ #top-middle { background: #fff; padding: 0; border-bottom: 1px solid var(--cf-line); box-shadow: 0 2px 12px rgba(20, 24, 28, .05); } #top-middle .onerow-fluid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 14px 20px; box-sizing: border-box; background: transparent; } #top-middle .onerow-fluid::before, #top-middle .onerow-fluid::after { content: none; display: none; } /* old clearfix would count as flex items */ #top-middle br { display: none; } /* only inside the header (the old rule hid EVERY
on the site) */ #top-middle #logoWrapper { float: none; flex: 0 0 auto; width: auto; height: auto; margin: 0; padding: 0; border: 0; } #top-middle #logo { float: none; margin: 0; } #top-middle #logo img { display: block; width: auto; max-width: 220px; height: auto; } #top-middle #taglineWrapper, #top-middle #tagline { display: none; } /* ---------- right-hand buttons ---------- */ #top-middle #navMainWrapper { float: none; flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: transparent; } #top-middle #navMain { float: none; display: flex; align-items: center; width: auto; margin: 0; padding: 0; } #top-middle #navMain ul { float: none; display: flex; align-items: center; gap: 8px; width: auto; margin: 0; padding: 0; list-style: none; text-align: left; } #top-middle #navMain li { display: block; } /* Log in / My account / Log off pill */ #top-middle #navMain li a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; box-sizing: border-box; padding: 0 16px; white-space: nowrap; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .4px; text-transform: uppercase; color: var(--cf-ink); background: #fff; border: 2px solid var(--cf-line); border-radius: 50px; text-decoration: none; transition: color .2s, background-color .2s, border-color .2s; } #top-middle #navMain li a:hover, #top-middle #navMain li a:focus-visible { color: #fff; background: var(--cf-ink); border-color: var(--cf-ink); } #top-middle #navMain li.h-login a::before, #top-middle #navMain a[href*="main_page=account"]::before { content: "\f007"; font-family: "FontAwesome"; font-size: 13px; } /* Cart pill (used in the desktop bar AND the phone toolbar) */ #top-middle .header-cart { float: none; display: flex; align-items: center; width: auto; margin: 0 !important; padding: 0; font-size: 13px !important; } #top-middle .header-cart a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; box-sizing: border-box; padding: 0 18px; white-space: nowrap; font-size: 13px; font-weight: 700; line-height: 1; color: var(--cf-ink); background: var(--cf-accent); border-radius: 50px; text-decoration: none; /* dark text: white on gold was unreadable */ transition: background-color .2s, transform .2s; } #top-middle .header-cart a:hover, #top-middle .header-cart a:focus-visible { background: var(--cf-accent-dark); color: var(--cf-ink); } #top-middle .header-cart a::before { content: "\f07a"; font-family: "FontAwesome"; font-size: 14px; } /* Header search box */ #top-middle #navMainSearch { float: none; margin: 0; } #top-middle .search-header-box { width: 160px; height: 40px; box-sizing: border-box; padding: 0 16px; margin: 0; font-size: 13px; text-transform: none; color: var(--cf-ink); background: #fff; border: 2px solid var(--cf-line); border-radius: 50px; transition: border-color .2s, box-shadow .2s; } #top-middle .search-header-box:focus { outline: none; border-color: var(--cf-accent); box-shadow: 0 0 0 3px rgba(242, 194, 18, .35); } /* keyboard users get a visible focus ring everywhere in the header */ #top-middle a:focus-visible, #top-middle .collapse-button:focus-visible { outline: 3px solid rgba(242, 194, 18, .8); outline-offset: 2px; } /* The little phone toolbar (account / search / cart) is for phones only */ #top-middle #mobile-nav1 { display: none; } /* ========================================================================== DESKTOP MENU (anything wider than 800px, i.e. NOT .collapsed) ========================================================================== */ #top-middle #menu { float: none; flex: 1 1 auto; display: flex; justify-content: center; width: auto; margin: 0; padding: 0; position: static; } #top-middle ul:is(.slimmenu, .slimmenu1):not(.collapsed) { display: flex !important; /* !important only here: beats leftover inline "display:block" after a resize */ flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 6px; float: none; width: auto; margin: 0; padding: 0; list-style: none; background: transparent; } #top-middle ul:is(.slimmenu, .slimmenu1):not(.collapsed) > li { display: block; float: none; margin: 0; } #top-middle ul:is(.slimmenu, .slimmenu1):not(.collapsed) > li > a { padding: 12px 14px; font-size: 14px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--cf-ink); text-shadow: none; border-radius: 10px; text-decoration: none; transition: color .2s, background-color .2s; } #top-middle ul:is(.slimmenu, .slimmenu1):not(.collapsed) > li:has(> .sub-collapser) > a { padding-right: 26px; } #top-middle ul:is(.slimmenu, .slimmenu1):not(.collapsed) > li > a:hover, #top-middle ul:is(.slimmenu, .slimmenu1):not(.collapsed) > li:hover > a { color: var(--cf-ink); background: rgba(242, 194, 18, .18); } #top-middle ul:is(.slimmenu, .slimmenu1):not(.collapsed) > li > .sub-collapser { width: 22px; } #top-middle ul:is(.slimmenu, .slimmenu1) .sub-collapser > i { color: var(--cf-muted); font-size: 9px; font-style: normal; } /* dropdown panel */ #top-middle ul:is(.slimmenu, .slimmenu1):not(.collapsed) li > ul { left: 0; top: 100%; min-width: 220px; margin: 0; padding: 8px; box-sizing: border-box; background: #fff; border: 1px solid var(--cf-line); border-radius: var(--cf-radius); box-shadow: var(--cf-shadow); } #top-middle ul:is(.slimmenu, .slimmenu1):not(.collapsed) li ul li { display: block; width: auto; margin: 0; padding: 0; background: transparent; font-size: 100%; } #top-middle ul:is(.slimmenu, .slimmenu1):not(.collapsed) li ul li > a { padding: 9px 30px 9px 14px; font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; white-space: nowrap; color: var(--cf-ink); border-radius: 8px; text-decoration: none; } #top-middle ul:is(.slimmenu, .slimmenu1):not(.collapsed) li ul li > a:hover { color: var(--cf-ink); background: rgba(242, 194, 18, .18); } #top-middle ul:is(.slimmenu, .slimmenu1):not(.collapsed) li ul li > .sub-collapser { width: 26px; } /* third level opens sideways */ #top-middle ul:is(.slimmenu, .slimmenu1):not(.collapsed) li ul li > ul { left: calc(100% - 2px); top: -9px; } /* smaller laptops / tablets in landscape */ @media (min-width: 801px) and (max-width: 1024px) { #top-middle .onerow-fluid { gap: 10px 12px; padding: 12px 14px; } #top-middle #logo img { max-width: 170px; } #top-middle ul:is(.slimmenu, .slimmenu1):not(.collapsed) > li > a { padding-left: 9px; padding-right: 9px; font-size: 13px; } #top-middle ul:is(.slimmenu, .slimmenu1):not(.collapsed) > li:has(> .sub-collapser) > a { padding-right: 22px; } #top-middle .search-header-box { width: 120px; } } /* ========================================================================== PHONE / SMALL TABLET MENU (800px and narrower) Row 1: logo + hamburger Row 2: menu list (when opened) Row 3: toolbar ========================================================================== */ @media (max-width: 800px) { /* announcement bar */ #headerWrapper #top-wrapper { text-align: center; font-size: 12px; padding: 6px 0; line-height: 20px; } #headerWrapper #top-inner-wrapper { padding: 0 12px; } #headerWrapper #top-wrapper .top-specials { float: none; display: inline-block; margin: 0 8px 0 0; line-height: 20px; } #top-middle .onerow-fluid { padding: 10px 14px; gap: 0 10px; } #top-middle #logoWrapper { order: 1; flex: 1 1 auto; min-width: 0; } #top-middle #logo img { max-width: 150px; } /* Let the menu's two parts (button + list) take part in the header flex row */ #top-middle #menu { display: contents; } /* hamburger button */ #top-middle .menu-collapser { order: 2; flex: 0 0 auto; float: none; position: relative; width: 44px; height: 44px; margin: 0; padding: 0; background: transparent; font-size: 0; line-height: 0; color: transparent; text-shadow: none; } #top-middle .menu-collapser .collapse-button { float: none; position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 44px; height: 44px; margin: 0; padding: 0; transform: none; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--cf-ink); border-radius: 12px; box-shadow: none; cursor: pointer; transition: background-color .2s; } #top-middle .menu-collapser .collapse-button:hover { background: #000; } #top-middle .menu-collapser .icon-bar { width: 20px; height: 2px; margin: 0; background: #fff; border-radius: 2px; box-shadow: none; } /* safety net: if the menu script ever fails to run on a page, keep the list under the logo row */ #top-middle ul:is(.slimmenu, .slimmenu1):not(.collapsed) { order: 3; flex: 0 0 100%; width: 100%; margin-top: 8px; } /* the opened menu list */ #top-middle ul:is(.slimmenu, .slimmenu1).collapsed { order: 3; flex: 0 0 100%; float: none; width: 100%; box-sizing: border-box; margin: 10px 0 0; padding: 6px; position: relative; z-index: 1000; max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; border: 1px solid var(--cf-line); border-radius: var(--cf-radius); box-shadow: var(--cf-shadow); list-style: none; } #top-middle ul:is(.slimmenu, .slimmenu1).collapsed li { display: block; float: none; width: 100%; margin: 0; padding: 0; background: transparent; border: 0; } #top-middle ul:is(.slimmenu, .slimmenu1).collapsed li + li { border-top: 1px solid var(--cf-line); } #top-middle ul:is(.slimmenu, .slimmenu1).collapsed li > a { display: block; box-sizing: border-box; padding: 14px 60px 14px 14px; font-size: 16px; line-height: 20px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--cf-ink); text-shadow: none; border: 0; border-radius: 8px; } #top-middle ul:is(.slimmenu, .slimmenu1).collapsed li > a:hover, #top-middle ul:is(.slimmenu, .slimmenu1).collapsed li > a:active { background: rgba(242, 194, 18, .18); color: var(--cf-ink); } /* the expand/collapse arrow: big tap target on the right of each row */ #top-middle ul:is(.slimmenu, .slimmenu1).collapsed li > .sub-collapser { top: 0; right: 0; width: 56px; height: 48px; float: none; margin: 0; } #top-middle ul:is(.slimmenu, .slimmenu1).collapsed li > .sub-collapser > i { font-size: 12px; } /* sub-menus: indented, slightly tinted (display is handled by the JS, do not set it here) */ #top-middle ul:is(.slimmenu, .slimmenu1).collapsed li ul, #top-middle ul:is(.slimmenu, .slimmenu1).collapsed li ul.level2, #top-middle ul:is(.slimmenu, .slimmenu1).collapsed li ul.level2 li ul { position: static; float: none; left: auto; top: auto; width: 100%; min-width: 0; box-sizing: border-box; margin: 0; padding: 0; background: var(--cf-soft); border: 0; border-radius: 8px; box-shadow: none; } #top-middle ul:is(.slimmenu, .slimmenu1).collapsed li ul li > a { padding-left: 30px; font-size: 15px; font-weight: 400; } #top-middle ul:is(.slimmenu, .slimmenu1).collapsed li ul li ul li > a { padding-left: 46px; font-size: 14px; } /* phone toolbar: account / search / cart */ #top-middle #mobile-nav1 { order: 4; flex: 0 0 100%; display: flex; align-items: center; gap: 8px; box-sizing: border-box; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--cf-line); background: transparent; text-align: left; } #top-middle #mobile-nav1.hidenav1 { display: none; } /* respects the "desktop view" switch */ #top-middle #mobile-nav1 > a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; border-radius: 50%; color: var(--cf-ink); background: var(--cf-soft); text-decoration: none; } #top-middle #mobile-nav1 > a i { margin: 0; font-size: 18px; color: inherit; } #top-middle #mobile-nav1 .header-cart { margin-left: auto !important; } /* the desktop-style login/cart/search group is replaced by the toolbar above */ #top-middle #navMainWrapper { display: none; } } /* very small phones */ @media (max-width: 360px) { #top-middle #logo img { max-width: 120px; } #top-middle #mobile-nav1 > a { width: 40px; height: 40px; } #top-middle .header-cart a { padding: 0 14px; } } /* respect "reduce motion" accessibility setting */ @media (prefers-reduced-motion: reduce) { #top-middle * { transition: none !important; } } /* ===================================================================== CITY FLYERS HOMEPAGE REDESIGN v2 - START Append at the END of stylesheet.css (delete any older v1 block first). Scoped to .cf-home: header, menu and other pages are untouched. Gold is only used as a background behind charcoal text (AA contrast). ===================================================================== */ .cf-home{--cf-gold:#f2c212;--cf-ink:#1f2326;--cf-grey:#f4f5f6;--cf-mute:#4d555b;--cf-r:12px;--cf-shadow:0 6px 20px rgba(31,35,38,.08);color:var(--cf-ink);font-size:1rem;line-height:1.6;padding:28px 16px 0} .cf-home *,.cf-home *::before,.cf-home *::after{box-sizing:border-box} .cf-home h1,.cf-home h2,.cf-home h3{color:inherit;font-weight:800;line-height:1.15;margin:0;text-align:left;text-transform:none} .cf-home h2{font-size:clamp(1.6rem,5vw,2.2rem);margin-bottom:24px} .cf-home h3{font-size:1.1rem;line-height:1.3} .cf-home p,.cf-home ul,.cf-home ol{margin:0} .cf-home ul,.cf-home ol{padding:0;list-style:none} .cf-home img{max-width:100%;height:auto;display:block} .cf-home .cf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Sections and full-width colour bands */ .cf-home .cf-section{padding:48px 0} .cf-home .cf-band{--bg:#fff;background:var(--bg);box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax)} .cf-home .cf-band--grey{--bg:var(--cf-grey)} .cf-home .cf-band--gold{--bg:var(--cf-gold)} .cf-home .cf-band--ink{--bg:var(--cf-ink);color:#fff} /* Buttons: pill, 48px, colours forced so the theme's link styles can't hide them */ .cf-home .cf-actions{display:flex;flex-wrap:wrap;gap:12px} .cf-home a.cf-btn,.cf-home a.cf-btn:link,.cf-home a.cf-btn:visited{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border:2px solid transparent;border-radius:999px;font-weight:700;font-size:1rem;line-height:1.2;text-align:center;text-decoration:none!important;transition:background-color .2s,color .2s,transform .2s,box-shadow .2s} .cf-home a.cf-btn--gold,.cf-home a.cf-btn--gold:link,.cf-home a.cf-btn--gold:visited{background:#f2c212!important;border-color:#f2c212!important;color:#1f2326!important} .cf-home a.cf-btn--gold:hover,.cf-home a.cf-btn--gold:focus-visible{background:#fff!important;border-color:#fff!important;color:#1f2326!important} .cf-home a.cf-btn--ghost,.cf-home a.cf-btn--ghost:link,.cf-home a.cf-btn--ghost:visited{background:transparent!important;border-color:#fff!important;color:#fff!important} .cf-home a.cf-btn--ghost:hover,.cf-home a.cf-btn--ghost:focus-visible{background:#fff!important;color:#1f2326!important} .cf-home a.cf-btn--dark,.cf-home a.cf-btn--dark:link,.cf-home a.cf-btn--dark:visited{background:#1f2326!important;border-color:#1f2326!important;color:#fff!important} .cf-home a.cf-btn--dark:hover,.cf-home a.cf-btn--dark:focus-visible{background:#3a4147!important;border-color:#3a4147!important} .cf-home a.cf-btn--outline,.cf-home a.cf-btn--outline:link,.cf-home a.cf-btn--outline:visited{background:transparent!important;border-color:#1f2326!important;color:#1f2326!important} .cf-home a.cf-btn--outline:hover,.cf-home a.cf-btn--outline:focus-visible{background:#1f2326!important;color:#fff!important} .cf-home a.cf-btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.18)} .cf-home a:focus-visible,.cf-home summary:focus-visible{outline:3px solid var(--cf-ink);outline-offset:3px;border-radius:8px} .cf-home .cf-band--ink a:focus-visible,.cf-home .cf-hero a:focus-visible,.cf-home .cf-panel--perk a:focus-visible{outline-color:var(--cf-gold)} /* Icons (CSS masks, no images) */ .cf-home .cf-ico{width:52px;height:52px;border-radius:50%;background:var(--cf-gold);display:block;position:relative;flex:none} .cf-home .cf-ico::before{content:"";position:absolute;inset:0;background:var(--cf-ink);-webkit-mask:var(--i) center/26px no-repeat;mask:var(--i) center/26px no-repeat} .cf-home .cf-ico--choose{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 9l2 2 3-3M8 16h8'/%3E%3C/svg%3E")} .cf-home .cf-ico--upload{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 20h16'/%3E%3C/svg%3E")} .cf-home .cf-ico--truck{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h11v10H2zM13 10h4l4 3v3h-8'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E")} .cf-home .cf-ico--star{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z'/%3E%3C/svg%3E")} .cf-home .cf-ico--bolt{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E")} .cf-home .cf-ico--pin{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6 7-11a7 7 0 10-14 0c0 5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E")} .cf-home .cf-ico--chat{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E")} .cf-home .cf-ico--bed{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18V7M3 14h18v4M21 14v-2a3 3 0 00-3-3h-7v5'/%3E%3C/svg%3E")} .cf-home .cf-ico--cup{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h11v6a4 4 0 01-4 4H9a4 4 0 01-4-4zM16 9h2a2 2 0 010 4h-2M8 3v2M12 3v2'/%3E%3C/svg%3E")} /* 1. Hero (one page-load sequence) */ .cf-home .cf-hero{--bg:var(--cf-ink);color:#fff;display:grid;gap:28px;padding:36px 0 40px;align-items:center} .cf-home .cf-hero h1{font-size:clamp(2.2rem,10vw,3.6rem);letter-spacing:-.02em;color:#fff} .cf-home .cf-lead{font-size:1.1rem;margin:16px 0 24px;max-width:34em} .cf-home .cf-trust{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:24px;font-size:.95rem} .cf-home .cf-trust li::before{content:"\2713";color:var(--cf-gold);font-weight:800;margin-right:8px} .cf-home .cf-hero__img img{border-radius:var(--cf-r);box-shadow:0 10px 30px rgba(0,0,0,.35);width:100%;aspect-ratio:4/3;object-fit:cover} @keyframes cf-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes cf-fade{from{opacity:0}to{opacity:1}} .cf-home .cf-hero__text>*{animation:cf-rise .6s ease-out backwards} .cf-home .cf-hero__text>:nth-child(2){animation-delay:.1s} .cf-home .cf-hero__text>:nth-child(3){animation-delay:.2s} .cf-home .cf-hero__text>:nth-child(4){animation-delay:.3s} .cf-home .cf-hero__img{animation:cf-fade .9s .15s ease-out backwards} /* 2. Steps */ .cf-home .cf-steps{display:grid;gap:16px} .cf-home .cf-steps li{background:#fff;border-radius:var(--cf-r);box-shadow:var(--cf-shadow);padding:24px;display:grid;gap:8px;justify-items:start} .cf-home .cf-steps p,.cf-home .cf-tiles p,.cf-home .cf-venues p,.cf-home .cf-panel p,.cf-home .cf-intro{color:var(--cf-mute)} /* 3. Product cards */ .cf-home .cf-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .cf-home .cf-card{background:#fff;border-radius:var(--cf-r);box-shadow:var(--cf-shadow);padding:10px 10px 14px;display:flex;flex-direction:column;gap:8px;transition:transform .25s,box-shadow .25s} .cf-home .cf-card__img{display:block;border-radius:8px;overflow:hidden;background:var(--cf-grey)} .cf-home .cf-card__img img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s} .cf-home .cf-card h3{font-size:1rem} .cf-home .cf-card h3 a{color:inherit;text-decoration:none} .cf-home .cf-price{color:var(--cf-mute);margin-top:auto} .cf-home .cf-price strong{color:var(--cf-ink);font-size:1.15rem} .cf-home .cf-card a.cf-btn{width:100%;padding:0 12px} /* 4. Why City Flyers: gold-bordered flash cards with lift and shine */ .cf-home .cf-tiles{display:grid;gap:16px} .cf-home .cf-tiles li{position:relative;overflow:hidden;background:#fff;border:2px solid var(--cf-gold);border-radius:var(--cf-r);padding:24px;display:grid;gap:8px;justify-items:start;box-shadow:var(--cf-shadow);transition:transform .25s,box-shadow .25s} .cf-home .cf-tiles li::before{content:"";position:absolute;left:0;bottom:0;height:5px;width:100%;background:var(--cf-gold);transform:scaleX(.18);transform-origin:left;transition:transform .35s} .cf-home .cf-tiles li::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(105deg,transparent,rgba(242,194,18,.35),transparent);transform:skewX(-20deg);transition:left .7s} /* 5. Partner perk: thin strip */ .cf-home .cf-perk{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 14px;min-height:44px;padding:0;font-size:.95rem;text-align:center;color:var(--cf-ink)} .cf-home .cf-perk p{padding:6px 0} .cf-home .cf-perk a,.cf-home .cf-perk a:link,.cf-home .cf-perk a:visited{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:#1f2326!important;text-decoration:underline;text-underline-offset:3px} /* 6. Partnership */ .cf-home .cf-intro{max-width:46em;margin:-8px 0 28px;font-size:1.05rem} .cf-home .cf-venues,.cf-home .cf-panels{display:grid;gap:16px} .cf-home .cf-venues{margin-bottom:16px} .cf-home .cf-venues li,.cf-home .cf-panel{background:#fff;border-radius:var(--cf-r);box-shadow:var(--cf-shadow);padding:24px;display:grid;gap:8px;justify-items:start;align-content:start} .cf-home .cf-panel--perk{background:var(--cf-ink);color:#fff} .cf-home .cf-panel--perk p{color:#e6e8ea} /* 7. Reviews with star ratings */ .cf-home .cf-reviews{display:grid;gap:16px} .cf-home .cf-reviews li{border:1px solid #dfe2e5;border-radius:var(--cf-r);padding:22px;box-shadow:var(--cf-shadow);background:#fff} .cf-home .cf-rate{margin-bottom:10px} .cf-home .cf-stars{display:inline-block;font-size:1.6rem;line-height:1;background:linear-gradient(90deg,#f2c212 calc(var(--r)*20%),#d5d9dc 0);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:.8px #1f2326} .cf-home .cf-stars--5{--r:5} .cf-home .cf-stars--45{--r:4.5} .cf-home .cf-stars--4{--r:4} .cf-home blockquote{margin:0 0 12px;padding:0;border:0;font-size:1.05rem} .cf-home .cf-who{color:var(--cf-mute);font-size:.9rem} /* 8. FAQ */ .cf-home .cf-faq{display:grid;gap:10px;max-width:760px} .cf-home .cf-faq details{background:#fff;border-radius:var(--cf-r);box-shadow:var(--cf-shadow)} .cf-home .cf-faq summary{list-style:none;cursor:pointer;min-height:56px;padding:14px 56px 14px 20px;font-weight:700;position:relative;display:flex;align-items:center} .cf-home .cf-faq summary::-webkit-details-marker{display:none} .cf-home .cf-faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--cf-gold);display:grid;place-items:center;font-size:1.2rem;line-height:1} .cf-home .cf-faq details[open] summary::after{content:"\2212"} .cf-home .cf-faq details p{padding:0 20px 18px;color:var(--cf-mute)} .cf-home .cf-faq details[open] p{animation:cf-fade .3s ease-out} /* 9. Ready to print */ .cf-home .cf-cta{padding:52px 0;text-align:center} .cf-home .cf-cta h2{text-align:center;margin-bottom:8px;color:#fff} .cf-home .cf-cta .cf-actions{justify-content:center;margin-top:24px} /* 10. Business for sale */ .cf-home .cf-sale{color:var(--cf-ink);display:grid;gap:28px;padding:52px 0;align-items:center} .cf-home .cf-sale h2{font-size:clamp(2rem,7vw,3rem);margin-bottom:12px} .cf-home .cf-badge{display:inline-flex;align-items:center;gap:10px;background:var(--cf-ink);color:#fff;border-radius:999px;padding:6px 16px;font-weight:700;margin-bottom:16px} .cf-home .cf-dot{width:10px;height:10px;border-radius:50%;background:var(--cf-gold);animation:cf-pulse 2s ease-out infinite} @keyframes cf-pulse{from{box-shadow:0 0 0 0 rgba(242,194,18,.7)}to{box-shadow:0 0 0 10px rgba(242,194,18,0)}} .cf-home .cf-checks{margin-top:16px;display:grid;gap:6px;font-weight:600} .cf-home .cf-checks li::before{content:"\2713";font-weight:800;margin-right:10px} .cf-home .cf-sale__card{background:#fff;border-radius:var(--cf-r);box-shadow:0 14px 34px rgba(31,35,38,.2);padding:28px;display:grid;gap:12px} .cf-home .cf-sale__card p{color:var(--cf-mute)} .cf-home .cf-sale__card a.cf-btn{width:100%} /* Scroll-in for cards: progressive enhancement, no JavaScript */ @supports (animation-timeline:view()){ .cf-home .cf-steps li,.cf-home .cf-cards li,.cf-home .cf-tiles li,.cf-home .cf-venues li,.cf-home .cf-panel,.cf-home .cf-reviews li,.cf-home .cf-faq details,.cf-home .cf-sale__card{animation:cf-rise linear backwards;animation-timeline:view();animation-range:entry 0% entry 40%} } /* Hover effects only where a real pointer exists */ @media (hover:hover){ .cf-home .cf-card:hover,.cf-home .cf-steps li:hover,.cf-home .cf-venues li:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(31,35,38,.14)} .cf-home .cf-card:hover .cf-card__img img{transform:scale(1.05)} .cf-home .cf-tiles li:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(31,35,38,.16)} .cf-home .cf-tiles li:hover::before{transform:scaleX(1)} .cf-home .cf-tiles li:hover::after{left:130%} .cf-home .cf-steps li,.cf-home .cf-venues li{transition:transform .25s,box-shadow .25s} } /* Tablet and up */ @media (min-width:640px){ .cf-home .cf-steps,.cf-home .cf-reviews{grid-template-columns:repeat(3,1fr)} .cf-home .cf-tiles{grid-template-columns:repeat(2,1fr)} .cf-home .cf-cards{gap:20px} } @media (min-width:960px){ .cf-home{padding:36px 24px 0} .cf-home .cf-section{padding:72px 0} .cf-home .cf-hero{grid-template-columns:1.1fr 1fr;gap:48px;padding:64px 0} .cf-home .cf-cards{grid-template-columns:repeat(3,1fr)} .cf-home .cf-tiles{grid-template-columns:repeat(4,1fr)} .cf-home .cf-venues,.cf-home .cf-panels{grid-template-columns:repeat(3,1fr)} .cf-home .cf-card{padding:14px 14px 18px} .cf-home .cf-sale{grid-template-columns:1.3fr 1fr;gap:56px;padding:72px 0} } @media (prefers-reduced-motion:reduce){ .cf-home *,.cf-home *::before,.cf-home *::after{animation:none!important;transition:none!important} } /* CITY FLYERS HOMEPAGE REDESIGN v2 - END */ /* ===================================================================== CITY FLYERS v2.1 PATCH - START Paste at the very END of stylesheet.css, below the v2 END comment. (Perk button, and the new "All categories" page.) ===================================================================== */ /* Partner perk: "Claim it" as a pill button with a round black edge */ .cf-home .cf-perk{padding:6px 0;gap:6px 14px} .cf-home .cf-perk a,.cf-home .cf-perk a:link,.cf-home .cf-perk a:visited{min-height:44px;padding:0 24px;border:2px solid #1f2326;border-radius:999px;background:transparent;color:#1f2326!important;text-decoration:none!important;transition:background-color .2s,color .2s,transform .2s} .cf-home .cf-perk a:hover,.cf-home .cf-perk a:focus-visible{background:#1f2326;color:#fff!important;transform:translateY(-1px)} /* All categories page */ .cf-home .cf-catpage{padding:8px 0 56px} .cf-home .cf-catpage h1{font-size:clamp(2rem,7vw,2.8rem);margin-bottom:8px} .cf-home .cf-catpage .cf-intro{margin:0 0 28px;color:var(--cf-mute)} .cf-home .cf-catgrid{display:grid;gap:16px} .cf-home .cf-cat{background:#fff;border:2px solid var(--cf-gold);border-radius:var(--cf-r);box-shadow:var(--cf-shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s} .cf-home .cf-cat__img{display:block;background:var(--cf-grey)} .cf-home .cf-cat__img img{width:100%;aspect-ratio:16/9;object-fit:cover} .cf-home .cf-cat__ph{display:grid;place-items:center;aspect-ratio:16/9;background:var(--cf-gold);color:var(--cf-ink);font-size:3.5rem;font-weight:800} .cf-home .cf-cat__body{padding:18px 20px 22px;display:grid;gap:14px;flex:1;align-content:start} .cf-home .cf-cat h2{font-size:1.3rem;margin:0} .cf-home .cf-cat h2 a{color:inherit;text-decoration:none} .cf-home .cf-subs{display:flex;flex-wrap:wrap;gap:8px} .cf-home .cf-subs a,.cf-home .cf-subs a:link,.cf-home .cf-subs a:visited{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:var(--cf-grey);color:#1f2326;font-size:.95rem;text-decoration:none} .cf-home .cf-subs a:hover{background:var(--cf-gold)} .cf-home .cf-cat a.cf-btn{align-self:end;margin-top:auto} @media (hover:hover){.cf-home .cf-cat:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(31,35,38,.14)}} @media (min-width:640px){.cf-home .cf-catgrid{grid-template-columns:repeat(2,1fr)}} @media (min-width:960px){.cf-home .cf-catgrid{grid-template-columns:repeat(3,1fr)}} /* CITY FLYERS v2.1 PATCH - END */ /* ========================================================================== My Account dashboard (loads ONLY on main_page=account, after stylesheet.css) Everything is scoped to .acct-dash / #accountBody so nothing leaks elsewhere. Reuses your :root tokens (--cf-*) with fallbacks. ========================================================================== */ .acct-dash{ --a-gold:var(--cf-accent,#f2c212); --a-ink:var(--cf-ink,#1f2326); --a-muted:var(--cf-muted,#5b6166); --a-line:var(--cf-line,#e7e8ea); --a-soft:var(--cf-soft,#f4f5f6); --a-r:var(--cf-radius,12px); color:var(--a-ink); font-size:1rem; line-height:1.5; max-width:1100px; margin:0 auto; padding:8px 0 40px; } .acct-dash *{box-sizing:border-box} /* ---- Breadcrumb (account page only) ---- */ #accountBody #navBreadCrumb{ margin:18px 0 8px; padding:.55em 1em; background:#f4f5f6; border-radius:10px; color:#5b6166; font-size:.9rem; line-height:1.4; } #accountBody #navBreadCrumb a:link, #accountBody #navBreadCrumb a:visited{color:#1f2326;font-weight:600} #accountBody #navBreadCrumb a:hover{color:#dcae00} /* ---- Links inside the dashboard ---- */ .acct-dash a:link,.acct-dash a:visited{color:var(--a-ink);text-decoration:none} .acct-dash a:focus-visible{outline:3px solid var(--a-gold);outline-offset:2px;border-radius:8px} /* ---- Hero ---- */ .acct-hero{ display:flex;align-items:center;gap:18px;flex-wrap:wrap; background:var(--a-ink);color:#fff; border-radius:16px;padding:26px 28px;margin:14px 0 24px; } .acct-avatar{ flex:0 0 auto;width:60px;height:60px;border-radius:50%; background:var(--a-gold);color:var(--a-ink); display:flex;align-items:center;justify-content:center; font-size:1.6rem;font-weight:700;line-height:1; } .acct-hero__text{flex:1 1 220px;min-width:0} .acct-dash .acct-hero h1{ margin:0;color:#fff;text-transform:none;font-weight:700; font-size:clamp(1.35rem,3.4vw,1.9rem);line-height:1.2; } .acct-hero__sub{margin:4px 0 0;padding:0;color:rgba(255,255,255,.72);font-size:.95rem} /* ---- Buttons ---- */ .acct-dash a.acct-btn{ display:inline-block;padding:.6em 1.3em;border-radius:999px; border:2px solid transparent;font-weight:600;font-size:.95rem;line-height:1.3; text-align:center;white-space:nowrap;text-transform:none; transition:background-color .2s,color .2s,border-color .2s; } .acct-dash a.acct-btn--gold:link,.acct-dash a.acct-btn--gold:visited{background:var(--a-gold);border-color:var(--a-gold);color:var(--a-ink)} .acct-dash a.acct-btn--gold:hover{background:#fff;border-color:#fff;color:var(--a-ink)} .acct-dash a.acct-btn--dark:link,.acct-dash a.acct-btn--dark:visited{background:var(--a-ink);border-color:var(--a-ink);color:#fff} .acct-dash a.acct-btn--dark:hover{background:#3a4147;border-color:#3a4147;color:#fff} .acct-dash a.acct-btn--outline:link,.acct-dash a.acct-btn--outline:visited{background:#fff;border-color:var(--a-line);color:var(--a-ink);padding:.4em 1em} .acct-dash a.acct-btn--outline:hover{border-color:var(--a-ink);background:var(--a-ink);color:#fff} /* ---- Section headings (sentence case, overrides global h2 uppercase) ---- */ .acct-dash h2{ margin:0;text-transform:none;font-weight:700;color:var(--a-ink); font-size:1.2rem;line-height:1.3; } .acct-section{margin:0 0 28px} .acct-section__title{margin:0 0 14px} /* ---- Orders table ---- */ .acct-orders{ width:100%;border-collapse:separate;border-spacing:0; border:1px solid var(--a-line);border-radius:var(--a-r);overflow:hidden;background:#fff; } .acct-orders th{ background:var(--a-soft);color:var(--a-muted); text-align:left;font-weight:600;font-size:.85rem;padding:12px 16px; border-bottom:1px solid var(--a-line); } .acct-orders td{padding:14px 16px;vertical-align:middle;border-bottom:1px solid var(--a-line)} .acct-orders tr:last-child td{border-bottom:0} .acct-orders tr:hover td{background:#fafafa} .acct-orders .tableHeading:hover th{background:var(--a-soft)} .acct-orders address{padding:0;margin:0;line-height:1.4} .acct-orders .accountOrderId{font-weight:700} .acct-orders .acct-num{text-align:right;white-space:nowrap} .acct-orders .acct-act{text-align:right} .acct-pill{ display:inline-block;padding:.2em .75em;border-radius:999px; background:rgba(242,194,18,.22);color:var(--a-ink); font-size:.85rem;font-weight:600;white-space:nowrap; } .acct-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .acct-empty{ display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; padding:22px 24px;border:1px dashed #cfd2d5;border-radius:var(--a-r);background:var(--a-soft); } .acct-empty p{margin:0;padding:0;color:var(--a-muted)} /* ---- Cards grid (auto: 3 / 2 / 1 columns depending on width) ---- */ .acct-grid{ display:grid;gap:20px;align-items:start; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); } .acct-card{ background:#fff;border:1px solid var(--a-line);border-radius:var(--a-r); padding:22px;margin:0;float:none;width:auto; } .acct-card--wide{margin-top:20px} .acct-card__head{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px} .acct-card__head p{margin:2px 0 0;padding:0;color:var(--a-muted);font-size:.9rem;line-height:1.4} .acct-tile{ flex:0 0 auto;width:44px;height:44px;border-radius:12px; background:rgba(242,194,18,.2);color:var(--a-ink); display:flex;align-items:center;justify-content:center; } .acct-card--plain > .acct-tile{margin-bottom:12px} .acct-card--plain h2{margin-bottom:10px} /* Link rows (also styles the SNAP referral list we don't control) */ .acct-card ul{list-style:none;margin:0;padding:0} .acct-card li{margin:0;padding:0;list-style:none} .acct-dash .acct-card li a{ display:flex;align-items:center;gap:12px; padding:12px 10px;margin:0 -10px;border-radius:10px; transition:background-color .15s; } .acct-dash .acct-card li a:hover{background:var(--a-soft)} .acct-dash .acct-card li a::after{ content:"";margin-left:auto;flex:0 0 auto;width:16px;height:16px; background:var(--a-muted); -webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat; } .acct-row__text{flex:1 1 auto;min-width:0} /* ---- Icons (CSS masks, same technique as your homepage) ---- */ .acct-ico{ --chev:none; display:inline-block;flex:0 0 auto;width:20px;height:20px;background:currentColor; -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat; } .acct-dash{--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")} .acct-ico--user{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E")} .acct-ico--pin{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6 7-11a7 7 0 10-14 0c0 5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E")} .acct-ico--lock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 018 0v4'/%3E%3C/svg%3E")} .acct-ico--mail{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E")} .acct-ico--bell{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 0112 0v5l2 2H4zM10 21h4'/%3E%3C/svg%3E")} .acct-ico--gift{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h18v4H3zM5 12v9h14v-9M12 8v13M12 8c-3 0-5-1-5-3s3-2 5 3c2-5 5-5 5-3s-2 3-5 3z'/%3E%3C/svg%3E")} .acct-avatar .acct-ico{width:28px;height:28px} /* list rows get their icon coloured, the chevron mask var comes from .acct-dash */ .acct-card li a .acct-ico{color:var(--a-muted)} .acct-card li a:hover .acct-ico{color:var(--a-ink)} /* ---- Gift voucher / send-or-spend block (markup we don't control) ---- */ .acct-card--wide #sendSpendWrapper, .acct-card--wide *[id^="sendSpend"]{float:none;width:auto;margin:0;border:0} /* ---- Tablet / mobile ---- */ @media (max-width:760px){ .acct-hero{padding:20px;gap:14px} .acct-avatar{width:52px;height:52px;font-size:1.4rem} .acct-hero .acct-btn{width:100%} .acct-card{padding:18px} /* orders table -> stacked cards */ .acct-orders,.acct-orders tbody{display:block;border:0;background:transparent;overflow:visible} .acct-orders .tableHeading{display:none} .acct-orders tr{ display:block;margin:0 0 14px;padding:6px 16px; background:#fff;border:1px solid var(--a-line);border-radius:var(--a-r); } .acct-orders tr:hover td{background:transparent} .acct-orders td{ display:flex;justify-content:space-between;align-items:center;gap:16px; padding:10px 0;border-bottom:1px solid var(--a-line);text-align:right!important; } .acct-orders td::before{ content:attr(data-label);flex:0 0 auto;color:var(--a-muted); font-size:.85rem;font-weight:600;text-align:left; } .acct-orders td.acct-act{border-bottom:0;padding:12px 0 8px;display:block} .acct-orders td.acct-act::before{content:none} .acct-orders td.acct-act .acct-btn{display:block;width:100%} .acct-orders .accountAddress address{text-align:right} } @media (prefers-reduced-motion:reduce){ .acct-dash *{transition:none!important} } /* ========================================================== CITY FLYERS: MODERN SHOPPING CART Scoped to #shoppingCartDefault, so no other page is affected. To undo, delete everything from here down. ========================================================== */ #shoppingCartDefault{ --cc-ink:#252B30; --cc-gold:#F2C212; --cc-gold-dark:#D9AC0A; --cc-gold-soft:#FFF8DC; --cc-line:#E4E7EA; --cc-soft:#F5F6F7; --cc-muted:#6A737A; --cc-radius:14px; color:var(--cc-ink); } /* Heading + help link */ #shoppingCartDefault #cartDefaultHeading{ color:var(--cc-ink);font-size:clamp(1.6rem,4vw,2.1rem);font-weight:800;letter-spacing:-.01em; text-transform:none;margin:.2em 0 .7em;padding-bottom:14px;position:relative; } #shoppingCartDefault #cartDefaultHeading::after{ content:"";position:absolute;left:0;bottom:0;width:56px;height:4px;border-radius:4px;background:var(--cc-gold); } #shoppingCartDefault > .forward{margin-top:6px} #shoppingCartDefault > .forward a:link, #shoppingCartDefault > .forward a:visited{font-size:.85em;color:var(--cc-muted)} #shoppingCartDefault > .forward a:hover{color:var(--cc-ink)} /* Instructions + totals bar */ #shoppingCartDefault #cartInstructionsDisplay{color:var(--cc-muted);padding:0 0 14px;line-height:1.6} #shoppingCartDefault .cartTotalsDisplay{ background:var(--cc-gold-soft);border:1px solid #F4DC7A;border-left:5px solid var(--cc-gold); border-radius:10px;padding:12px 16px;text-align:left;font-weight:600;color:var(--cc-ink);margin-bottom:20px; } /* Cart table (desktop) */ #shoppingCartDefault #cartContentsDisplay{ border-collapse:separate;border-spacing:0;background:#fff; border:1px solid var(--cc-line);border-bottom:0;border-radius:var(--cc-radius) var(--cc-radius) 0 0; } #shoppingCartDefault #cartContentsDisplay tr.tableHeading{height:auto;background:var(--cc-ink)} #shoppingCartDefault #cartContentsDisplay .tableHeading th{ background:var(--cc-ink);color:#fff;height:auto;padding:14px 16px; font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; } #shoppingCartDefault #cartContentsDisplay .tableHeading th:first-child{border-top-left-radius:calc(var(--cc-radius) - 1px);text-align:left} #shoppingCartDefault #cartContentsDisplay .tableHeading th:last-child{border-top-right-radius:calc(var(--cc-radius) - 1px)} #shoppingCartDefault #scUnitHeading, #shoppingCartDefault #scTotalHeading{text-align:right} #shoppingCartDefault #cartContentsDisplay tr.rowEven, #shoppingCartDefault #cartContentsDisplay tr.rowOdd{background:#fff;height:auto;transition:background .2s} #shoppingCartDefault #cartContentsDisplay tr.rowEven:hover, #shoppingCartDefault #cartContentsDisplay tr.rowOdd:hover{background:#FAFAFB} #shoppingCartDefault #cartContentsDisplay td{ padding:18px 16px;vertical-align:middle;border-bottom:1px solid var(--cc-line); } #shoppingCartDefault #cartContentsDisplay tr:last-child td{border-bottom:0} /* Product cell */ #shoppingCartDefault #cartContentsDisplay .cartProductDisplay{text-align:left} #shoppingCartDefault .cartProductDisplay > a:link, #shoppingCartDefault .cartProductDisplay > a:visited{ display:flex;align-items:center;gap:14px;color:var(--cc-ink);font-weight:600;line-height:1.35; } #shoppingCartDefault .cartProductDisplay > a:hover{color:var(--cc-gold-dark)} #shoppingCartDefault #cartImage{float:none;margin:0;flex:0 0 auto} #shoppingCartDefault #cartImage img{ width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--cc-line);background:var(--cc-soft);display:block; } #shoppingCartDefault .cartAttribsList{margin:8px 0 0 78px;color:var(--cc-muted);font-size:.9em} #shoppingCartDefault .cartAttribsList ul{margin:0;padding:0;list-style:none} /* Quantity box + update button */ #shoppingCartDefault #cartContentsDisplay .cartQuantity{width:110px;text-align:center} #shoppingCartDefault #cartContentsDisplay .cartQuantity br{display:none} #shoppingCartDefault .cartQuantity input[type="text"]{ width:68px;height:42px;margin:0;padding:0 8px;box-sizing:border-box;text-align:center; font-size:1rem;font-weight:600;color:var(--cc-ink);background:#fff; border:1.5px solid var(--cc-line);border-radius:10px;transition:border-color .2s,box-shadow .2s; } #shoppingCartDefault .cartQuantity input[type="text"]:focus{ outline:0;border-color:var(--cc-gold);box-shadow:0 0 0 3px rgba(242,194,18,.35); } #shoppingCartDefault #cartContentsDisplay .cartQuantityUpdate{width:56px} #shoppingCartDefault .cartQuantityUpdate input[type="image"]{ width:38px;height:38px;padding:7px;box-sizing:border-box;object-fit:contain; background:var(--cc-soft);border-radius:50%;cursor:pointer;transition:background .2s,transform .3s; } #shoppingCartDefault .cartQuantityUpdate input[type="image"]:hover{background:var(--cc-gold);transform:rotate(90deg)} /* Prices */ #shoppingCartDefault #cartContentsDisplay .cartUnitDisplay, #shoppingCartDefault #cartContentsDisplay .cartTotalDisplay{text-align:right;white-space:nowrap;padding-right:16px} #shoppingCartDefault #cartContentsDisplay .cartUnitDisplay{color:var(--cc-muted)} #shoppingCartDefault #cartContentsDisplay .cartTotalDisplay{font-weight:800;font-size:1.05em;color:var(--cc-ink)} /* Remove (trash) */ #shoppingCartDefault #cartContentsDisplay .cartRemoveItemDisplay{width:56px;text-align:center} #shoppingCartDefault .cartRemoveItemDisplay a{ display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;transition:background .2s; } #shoppingCartDefault .cartRemoveItemDisplay a:hover{background:#FDECEA} #shoppingCartDefault .cartRemoveItemDisplay img{opacity:.6;transition:opacity .2s} #shoppingCartDefault .cartRemoveItemDisplay a:hover img{opacity:1} /* Sub-total bar */ #shoppingCartDefault #cartSubTotal{ height:auto;margin:0 0 28px;padding:20px 24px;text-align:right;text-transform:none; font-size:1.2rem;font-weight:800;line-height:1.4;background:var(--cc-soft);color:var(--cc-ink); border:1px solid var(--cc-line);border-radius:0 0 var(--cc-radius) var(--cc-radius); } /* Buttons: Checkout (gold) + Continue Shopping (outline) */ #shoppingCartDefault .buttonRow{margin:0 0 12px} #shoppingCartDefault .button_checkout, #shoppingCartDefault .button_continue_shopping{ display:inline-block;box-sizing:border-box;padding:15px 30px;border-radius:12px; font-size:.95rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap; cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s; } #shoppingCartDefault .button_checkout{ background:var(--cc-gold);color:var(--cc-ink);border:2px solid var(--cc-gold); box-shadow:0 8px 20px rgba(242,194,18,.35); } #shoppingCartDefault .button_checkout::before{ content:"\f023";font-family:FontAwesome;font-weight:normal;margin-right:8px; } #shoppingCartDefault .button_checkout.button_checkoutHover{ background:var(--cc-ink);border-color:var(--cc-ink);color:var(--cc-gold);transform:translateY(-2px); } #shoppingCartDefault .button_continue_shopping{ background:transparent;color:var(--cc-ink);border:2px solid var(--cc-ink); } #shoppingCartDefault .button_continue_shopping::before{ content:"\f060";font-family:FontAwesome;font-weight:normal;margin-right:8px; } #shoppingCartDefault .button_continue_shopping.button_continue_shoppingHover{ background:var(--cc-ink);color:#fff; } /* Shipping estimator card */ #shoppingCartDefault #shippingEstimatorContent{ margin-top:36px;padding:24px;background:#fff;border:1px solid var(--cc-line); border-radius:var(--cc-radius);box-shadow:0 6px 20px rgba(37,43,48,.06); } #shoppingCartDefault #shippingEstimatorContent h2{ color:var(--cc-ink);font-size:1.25rem;font-weight:800;text-transform:none;margin:0 0 18px; } #shoppingCartDefault #shippingEstimatorContent label.inputLabel{ display:block;float:none;width:auto;margin:12px 0 6px;font-weight:600;font-size:.9em; } #shoppingCartDefault #shippingEstimatorContent select, #shoppingCartDefault #shippingEstimatorContent input[type="text"]{ width:100%;max-width:360px;height:42px;margin:0;padding:0 12px;box-sizing:border-box; background:#fff;color:var(--cc-ink);border:1.5px solid var(--cc-line);border-radius:10px; } #shoppingCartDefault #shippingEstimatorContent select:focus, #shoppingCartDefault #shippingEstimatorContent input[type="text"]:focus{ outline:0;border-color:var(--cc-gold);box-shadow:0 0 0 3px rgba(242,194,18,.35); } #shoppingCartDefault #shippingEstimatorContent .buttonRow{width:auto;margin:16px 0 0} #shoppingCartDefault #shippingEstimatorContent input.button_update{ float:none;background:var(--cc-ink);color:#fff;border:0;border-radius:10px; padding:12px 26px;font-weight:700;cursor:pointer;transition:background .2s,color .2s; } #shoppingCartDefault #shippingEstimatorContent input.button_update:hover, #shoppingCartDefault #shippingEstimatorContent input.button_updateHover{ background:var(--cc-gold);color:var(--cc-ink); } #shoppingCartDefault #shippingEstimatorContent table{width:100%;margin-top:22px;border-collapse:collapse} #shoppingCartDefault #shippingEstimatorContent table td{padding:12px 6px;border-bottom:1px solid var(--cc-line)} #shoppingCartDefault #shippingEstimatorContent .seDisplayedAddressLabel{color:var(--cc-muted);font-size:.92em} #shoppingCartDefault #shippingEstimatorContent .seDisplayedAddressInfo{color:var(--cc-ink);font-weight:700} #shoppingCartDefault #shippingEstimatorContent td.cartTotalDisplay{text-align:right;font-weight:700;white-space:nowrap} /* Empty cart */ #shoppingCartDefault #cartEmptyText{ text-align:center;text-transform:none;font-weight:800;color:var(--cc-ink); padding:48px 16px;background:var(--cc-soft);border-radius:var(--cc-radius); } /* Mobile: each product becomes a card */ @media (max-width:800px){ #shoppingCartDefault #cartContentsDisplay, #shoppingCartDefault #cartContentsDisplay tbody{ display:block!important;width:100%!important;border:0!important;background:transparent!important; } #shoppingCartDefault #cartContentsDisplay tr.tableHeading{display:none!important} #shoppingCartDefault #cartContentsDisplay tr.rowEven, #shoppingCartDefault #cartContentsDisplay tr.rowOdd{ display:grid!important;grid-template-columns:1fr auto;gap:10px 12px;position:relative; padding:16px;margin-bottom:14px;background:#fff; border:1px solid var(--cc-line);border-radius:var(--cc-radius);box-shadow:0 6px 18px rgba(37,43,48,.06); } #shoppingCartDefault #cartContentsDisplay td{ display:block!important;width:auto!important;padding:0!important;border:0!important;text-align:left!important; } #shoppingCartDefault #cartContentsDisplay .mobile-only{ display:inline!important;color:var(--cc-muted);font-size:.9em;font-weight:600;margin-right:6px; } #shoppingCartDefault #cartContentsDisplay .cartProductDisplay .mobile-only{display:none!important} #shoppingCartDefault #cartContentsDisplay .cartProductDisplay{grid-column:1/-1;padding-right:40px!important} #shoppingCartDefault .cartAttribsList{margin-left:78px} #shoppingCartDefault #cartContentsDisplay .cartQuantity{grid-column:1;display:flex!important;align-items:center;gap:8px} #shoppingCartDefault #cartContentsDisplay .cartQuantityUpdate{grid-column:2} #shoppingCartDefault #cartContentsDisplay .cartUnitDisplay, #shoppingCartDefault #cartContentsDisplay .cartTotalDisplay{ grid-column:1/-1;display:flex!important;justify-content:space-between;align-items:center; } #shoppingCartDefault #cartContentsDisplay .cartTotalDisplay{ border-top:1px dashed var(--cc-line)!important;padding-top:12px!important;font-size:1.1em; } #shoppingCartDefault #cartContentsDisplay .cartRemoveItemDisplay{position:absolute;top:10px;right:10px;width:auto!important} #shoppingCartDefault #cartSubTotal{border-radius:var(--cc-radius);margin-bottom:20px} #shoppingCartDefault .buttonRow.forward, #shoppingCartDefault .buttonRow.back{float:none!important;margin:0 0 12px!important} #shoppingCartDefault .buttonRow a{display:block} #shoppingCartDefault .button_checkout, #shoppingCartDefault .button_continue_shopping{display:block;width:100%;text-align:center} #shoppingCartDefault #shippingEstimatorContent{padding:18px} } /* ===== END CITY FLYERS SHOPPING CART ===== */ /* ===== FIXES: centered checkout button + shipping estimator readability ===== */ /* Center the lock + text inside Checkout / Continue Shopping */ #shoppingCartDefault .button_checkout, #shoppingCartDefault .button_continue_shopping{ display:inline-flex!important; align-items:center; justify-content:center; gap:8px; width:auto!important; min-width:220px; padding:15px 28px!important; text-align:center!important; text-indent:0!important; box-sizing:border-box; } #shoppingCartDefault .button_checkout::before, #shoppingCartDefault .button_continue_shopping::before{ margin:0!important; } /* Shipping estimator: remove the dark background and make the text readable */ #shoppingCartDefault #shippingEstimatorContent table, #shoppingCartDefault #shippingEstimatorContent table tr, #shoppingCartDefault #shippingEstimatorContent table td, #shoppingCartDefault #shippingEstimatorContent table th{ background:transparent!important; color:var(--cc-ink)!important; } #shoppingCartDefault #shippingEstimatorContent .seDisplayedAddressLabel{ color:var(--cc-muted)!important; text-align:left; font-size:.92em; padding:12px 0!important; } #shoppingCartDefault #shippingEstimatorContent .seDisplayedAddressInfo{ display:inline-block; margin-top:4px; color:var(--cc-ink)!important; font-weight:800; text-transform:uppercase; letter-spacing:.04em; } #shoppingCartDefault #shippingEstimatorContent td.cartTotalDisplay{ color:var(--cc-ink)!important; } /* ========================================================== CITY FLYERS: MODERN LOGIN / CREATE ACCOUNT Scoped to #loginDefault and #createAcctDefault, so no other page is affected. Paste at the very bottom of stylesheet.css. To undo, delete everything from here down. ========================================================== */ #loginDefault, #createAcctDefault{ --lg-ink:#252B30; --lg-gold:#F2C212; --lg-gold-dark:#D9AC0A; --lg-gold-soft:#FFF8DC; --lg-line:#E4E7EA; --lg-soft:#F5F6F7; --lg-muted:#6A737A; --lg-radius:16px; --lg-i-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E"); --lg-i-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); --lg-i-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); --lg-i-briefcase:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E"); --lg-i-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E"); --lg-i-building:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4M8 6h.01M12 6h.01M16 6h.01M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01'/%3E%3C/svg%3E"); --lg-i-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); --lg-i-hash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16M4 15h16M10 3L8 21M16 3l-2 18'/%3E%3C/svg%3E"); --lg-i-globe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); --lg-i-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); --lg-i-printer:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E"); --lg-i-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); --lg-i-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); color:var(--lg-ink); } #loginDefault{max-width:1100px;margin-left:auto;margin-right:auto} #createAcctDefault{max-width:760px;margin-left:auto;margin-right:auto} /* Heading */ #loginDefaultHeading, #createAcctDefaultHeading{ color:var(--lg-ink);font-size:clamp(1.6rem,4vw,2.1rem);font-weight:800;letter-spacing:-.01em; text-transform:none;margin:.2em 0 1em;padding-bottom:14px;position:relative; } #loginDefaultHeading::after, #createAcctDefaultHeading::after{ content:"";position:absolute;left:0;bottom:0;width:56px;height:4px;border-radius:4px;background:var(--lg-gold); } /* Breadcrumb (same look as the account page) */ #loginBody #navBreadCrumb, #createaccountBody #navBreadCrumb{ margin:18px 0 8px;padding:.55em 1em;background:#f4f5f6;border-radius:10px; color:#5b6166;font-size:.9rem;line-height:1.4; } #loginBody #navBreadCrumb a:link,#loginBody #navBreadCrumb a:visited, #createaccountBody #navBreadCrumb a:link,#createaccountBody #navBreadCrumb a:visited{color:#1f2326;font-weight:600} #loginBody #navBreadCrumb a:hover,#createaccountBody #navBreadCrumb a:hover{color:#dcae00} /* Messages (wrong password, errors...) */ #loginDefault .messageStackError, #loginDefault .messageStackWarning, #createAcctDefault .messageStackError, #createAcctDefault .messageStackWarning{ background:#FDECEA;color:#7A1F16;border:1px solid #F5C2BD;border-left:5px solid #C0392B; border-radius:10px;padding:14px 18px;line-height:1.5;margin:0 0 20px; } #loginDefault .messageStackSuccess,#loginDefault .messageStackCaution{ background:var(--lg-gold-soft);color:var(--lg-ink);border:1px solid #F4DC7A;border-left:5px solid var(--lg-gold); border-radius:10px;padding:14px 18px;line-height:1.5;margin:0 0 20px; } #loginDefault .advisory{ background:var(--lg-gold-soft);border:1px solid #F4DC7A;border-left:5px solid var(--lg-gold); border-radius:10px;padding:12px 16px;margin:0 0 20px;color:var(--lg-ink); } /* Two columns: login (left) + register (right) */ .cf-auth{ display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px;align-items:start;margin-top:8px; } /* Card */ .cf-auth__col{ background:#fff;border:1px solid var(--lg-line);border-top:4px solid var(--lg-gold); border-radius:var(--lg-radius);padding:30px 28px;box-sizing:border-box; box-shadow:0 6px 20px rgba(37,43,48,.06); } .cf-auth__col > br.clearBoth{display:none} .cf-auth__col fieldset{border:0;margin:0;padding:0;min-width:0} /* Card headings (legends) with icons */ .cf-auth__col legend{ float:left;width:100%;box-sizing:border-box;margin:0 0 8px;padding:0;background:none; color:var(--lg-ink);font-size:1.25rem;font-weight:800;letter-spacing:-.01em;line-height:1.3;text-transform:none; } .cf-auth__col legend + *{clear:both} .cf-auth__col legend::before{ display:inline-block;width:38px;height:38px;line-height:38px;margin-right:12px;vertical-align:middle; text-align:center;border-radius:10px;background:var(--lg-gold);color:var(--lg-ink); font-family:FontAwesome;font-weight:normal;font-size:1rem; } #loginForm > fieldset > legend::before{content:"\f090"} /* sign-in */ #createAccountForm > fieldset > legend::before{content:"\f234"} /* user-plus */ /* Sub-sections of the register form */ .cf-auth__col fieldset fieldset{margin:28px 0 0;padding:24px 0 0;border-top:1px solid var(--lg-line)} .cf-auth__col fieldset fieldset legend{ font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lg-muted);margin-bottom:2px; } .cf-auth__col fieldset fieldset legend::before{ width:30px;height:30px;line-height:30px;margin-right:10px;border-radius:8px; background:var(--lg-gold-soft);color:var(--lg-ink);font-size:.85rem; } /* icon per section (order: company, address, contact, login, newsletter) */ .cf-auth__col fieldset fieldset:nth-of-type(1) legend::before{content:"\f1ad"} /* building */ .cf-auth__col fieldset fieldset:nth-of-type(2) legend::before{content:"\f041"} /* map-marker */ .cf-auth__col fieldset fieldset:nth-of-type(3) legend::before{content:"\f095"} /* phone */ .cf-auth__col fieldset fieldset:nth-of-type(4) legend::before{content:"\f023"} /* lock */ .cf-auth__col fieldset fieldset:nth-of-type(5) legend::before{content:"\f0e0"} /* envelope */ /* Intro text + "required" note */ .cf-auth__col .information{padding:0;margin:10px 0 6px;color:var(--lg-muted);line-height:1.6;font-size:.95rem} .cf-auth__col .information strong{color:var(--lg-ink)} .cf-auth__col .alert.forward{float:none;display:block;margin:4px 0 0;color:var(--lg-muted);font-size:.85rem;text-align:left} /* Labels: always above the field, never beside it */ .cf-auth__col label.inputLabel{ display:block;float:none;width:auto;margin:16px 0 6px; font-size:.88rem;font-weight:700;line-height:1.3;color:var(--lg-ink); } /* Fields */ .cf-auth__col input[type="text"], .cf-auth__col input[type="email"], .cf-auth__col input[type="password"], .cf-auth__col input[type="tel"], .cf-auth__col input[type="date"], .cf-auth__col select{ display:block;width:100%;max-width:100%;height:48px;margin:0;padding:0 14px 0 46px;box-sizing:border-box; font-family:inherit;font-size:1rem;line-height:normal;color:var(--lg-ink); background-color:#fff;background-repeat:no-repeat;background-position:15px center;background-size:20px 20px; border:1.5px solid var(--lg-line);border-radius:10px;box-shadow:none; -webkit-appearance:none;-moz-appearance:none;appearance:none; transition:border-color .2s,box-shadow .2s; } .cf-auth__col input[type="text"]:hover, .cf-auth__col input[type="email"]:hover, .cf-auth__col input[type="password"]:hover, .cf-auth__col input[type="tel"]:hover, .cf-auth__col select:hover{border-color:#C9CED2} .cf-auth__col input[type="text"]:focus, .cf-auth__col input[type="email"]:focus, .cf-auth__col input[type="password"]:focus, .cf-auth__col input[type="tel"]:focus, .cf-auth__col input[type="date"]:focus, .cf-auth__col select:focus{ outline:0;background-color:#fff;border-color:var(--lg-gold);box-shadow:0 0 0 3px rgba(242,194,18,.35); } .cf-auth__col input::placeholder{color:#9AA3A9;opacity:1} /* Icons inside the fields (matched by field name, so the form code is untouched) */ .cf-auth__col input[name="email_address"]{background-image:var(--lg-i-mail)} .cf-auth__col input[name="password"], .cf-auth__col input[name="confirmation"]{background-image:var(--lg-i-lock)} .cf-auth__col input[name="firstname"], .cf-auth__col input[name="lastname"]{background-image:var(--lg-i-user)} .cf-auth__col input[name="company"]{background-image:var(--lg-i-briefcase)} .cf-auth__col input[name="street_address"], .cf-auth__col input[name="suburb"]{background-image:var(--lg-i-home)} .cf-auth__col input[name="city"]{background-image:var(--lg-i-building)} .cf-auth__col input[name="state"]{background-image:var(--lg-i-pin)} .cf-auth__col input[name="postcode"]{background-image:var(--lg-i-hash)} .cf-auth__col input[name="telephone"]{background-image:var(--lg-i-phone)} .cf-auth__col input[name="fax"]{background-image:var(--lg-i-printer)} .cf-auth__col input[name="dob"]{background-image:var(--lg-i-calendar)} /* Dropdowns: icon on the left, arrow on the right */ .cf-auth__col select{ padding-right:42px;cursor:pointer; background-position:15px center,right 14px center;background-size:20px 20px,18px 18px; } .cf-auth__col select[name="zone_country_id"]{background-image:var(--lg-i-globe),var(--lg-i-chev)} .cf-auth__col select[name="zone_id"]{background-image:var(--lg-i-pin),var(--lg-i-chev)} /* Remove the extra gaps the old line breaks used to create */ .cf-auth__col :is(input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="date"],select) + br.clearBoth, .cf-auth__col :is(input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="date"],select) + .alert + br.clearBoth{display:none!important} /* Inline error text */ .cf-auth__col .alert{display:block;margin:6px 0 0;font-size:.85rem;line-height:1.4;color:#C0392B} .cf-auth__col .alert:empty{display:none} .cf-auth__col select + .alert{display:none} /* the lone red * next to the country list */ /* Newsletter checkbox + radios */ .cf-auth__col input[type="checkbox"], .cf-auth__col input[type="radio"]{ width:18px;height:18px;margin:12px 0 0;vertical-align:-3px;accent-color:var(--lg-gold-dark);cursor:pointer; } .cf-auth__col label.checkboxLabel, .cf-auth__col label.radioButtonLabel{ display:inline;float:none;width:auto;margin:0 14px 0 6px;font-weight:400;color:var(--lg-ink);cursor:pointer; } /* reCAPTCHA */ .cf-auth__col .g-recaptcha{margin:22px 0 0} /* Buttons */ .cf-auth__col .buttonRow{margin:0;float:none} .cf-auth__col .buttonRow.forward{margin:22px 0 0} .cf-auth__col input[type="submit"], .cf-auth__col .cssButton, .cf-auth__col .cssButtonHover{ display:block;width:100%!important;box-sizing:border-box;margin:0;padding:15px 30px; background:var(--lg-gold);color:var(--lg-ink);border:2px solid var(--lg-gold);border-radius:12px; font-family:inherit;font-size:.95rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-align:center; box-shadow:0 8px 20px rgba(242,194,18,.35);cursor:pointer; transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s; } .cf-auth__col input[type="submit"]:hover, .cf-auth__col .cssButton:hover, .cf-auth__col .cssButtonHover{ background:var(--lg-ink);border-color:var(--lg-ink);color:var(--lg-gold);transform:translateY(-2px); } .cf-auth__col input[type="submit"]:focus-visible{outline:3px solid var(--lg-ink);outline-offset:2px} /* "Forgot your password?" */ .cf-auth__col .buttonRow.back{text-align:center;margin:16px 0 0} .cf-auth__col .buttonRow.back a{font-weight:600;color:var(--lg-ink);text-decoration:underline;text-decoration-color:var(--lg-gold);text-underline-offset:4px} .cf-auth__col .buttonRow.back a::before{content:"\f084";font-family:FontAwesome;font-weight:normal;margin-right:8px;color:var(--lg-gold-dark);text-decoration:none;display:inline-block} .cf-auth__col .buttonRow.back a:hover{color:var(--lg-gold-dark)} /* "Already have an account?" line on the create-account page */ #createAcctDefaultLoginLink{margin:0 0 4px;font-size:.95rem;font-weight:400;color:var(--lg-muted)} #createAcctDefaultLoginLink a{font-weight:700;color:var(--lg-ink);text-decoration:underline;text-decoration-color:var(--lg-gold);text-underline-offset:3px} /* Tablet and phone: stack the columns */ @media (max-width:800px){ .cf-auth{grid-template-columns:minmax(0,1fr);gap:22px} .cf-auth__col{padding:24px 20px} } @media (max-width:400px){ .cf-auth__col{padding:22px 16px} .cf-auth__col .g-recaptcha{transform:scale(.88);transform-origin:0 0} } @media (prefers-reduced-motion:reduce){ .cf-auth__col *{transition:none!important} } /* ========================================================== CITY FLYERS: MODERN CONTACT US Scoped to #contactUsDefault, so no other page is affected. Paste at the very bottom of stylesheet.css (below the login block). To undo, delete everything from here down. ========================================================== */ #contactUsDefault{ --lg-ink:#252B30; --lg-gold:#F2C212; --lg-gold-dark:#D9AC0A; --lg-gold-soft:#FFF8DC; --lg-line:#E4E7EA; --lg-soft:#F5F6F7; --lg-muted:#6A737A; --lg-radius:16px; --lg-i-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E"); --lg-i-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); --lg-i-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); --lg-i-briefcase:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E"); --lg-i-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E"); --lg-i-building:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4M8 6h.01M12 6h.01M16 6h.01M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01'/%3E%3C/svg%3E"); --lg-i-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); --lg-i-hash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16M4 15h16M10 3L8 21M16 3l-2 18'/%3E%3C/svg%3E"); --lg-i-globe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); --lg-i-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); --lg-i-printer:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E"); --lg-i-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); --lg-i-tag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cpath d='M7 7h.01'/%3E%3C/svg%3E"); --lg-i-send:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E"); --lg-i-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); color:var(--lg-ink);max-width:960px;margin-left:auto;margin-right:auto; } /* Heading + breadcrumb (same as login) */ #contactUsDefault h1{ color:var(--lg-ink);font-size:clamp(1.6rem,4vw,2.1rem);font-weight:800;letter-spacing:-.01em; text-transform:none;margin:.2em 0 1em;padding-bottom:14px;position:relative; } #contactUsDefault h1::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:4px;border-radius:4px;background:var(--lg-gold)} #contactusBody #navBreadCrumb{ margin:18px 0 8px;padding:.55em 1em;background:#f4f5f6;border-radius:10px;color:#5b6166;font-size:.9rem;line-height:1.4; } #contactusBody #navBreadCrumb a:link,#contactusBody #navBreadCrumb a:visited{color:#1f2326;font-weight:600} #contactusBody #navBreadCrumb a:hover{color:#dcae00} /* Intro text from the Define Pages Editor */ #contactUsNoticeContent{margin:0 0 24px;color:var(--lg-muted);line-height:1.7;font-size:1rem} /* Messages */ #contactUsDefault .messageStackError,#contactUsDefault .messageStackWarning{ background:#FDECEA;color:#7A1F16;border:1px solid #F5C2BD;border-left:5px solid #C0392B; border-radius:10px;padding:14px 18px;line-height:1.5;margin:0 0 20px; } #contactUsDefault .mainContent.success{ background:var(--lg-gold-soft);border:1px solid #F4DC7A;border-left:5px solid var(--lg-gold); border-radius:10px;padding:16px 20px;line-height:1.6;color:var(--lg-ink); } /* Card */ .cf-contact-card{ display:flex;flex-wrap:wrap;align-items:flex-end;gap:22px 24px; background:#fff;border:1px solid var(--lg-line);border-top:4px solid var(--lg-gold); border-radius:var(--lg-radius);padding:30px 28px;box-sizing:border-box; box-shadow:0 6px 20px rgba(37,43,48,.06); } /* Two columns: details left, message right */ #contactUsDefault fieldset#contactUsForm{ flex:1 1 100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 28px; border:0;margin:0;padding:0;min-width:0; } #contactUsDefault .contact-left, #contactUsDefault .contact-right{float:none;width:auto;min-width:0} #contactUsDefault .contact-right{display:flex;flex-direction:column} /* Labels */ #contactUsDefault label{ display:block;float:none;width:auto;margin:16px 0 6px; font-size:.88rem;font-weight:700;line-height:1.3;color:var(--lg-ink); } #contactUsDefault .contact-left > label:first-child, #contactUsDefault .contact-right > label:first-child{margin-top:0} #contactUsDefault .contact-left label.inputLabel::after{content:" *";color:#C0392B} /* Fields */ #contactUsDefault .contact-left input[type="text"], #contactUsDefault .contact-left select, #contactUsDefault textarea{ display:block;width:100%;max-width:100%;margin:0;box-sizing:border-box; font-family:inherit;font-size:1rem;color:var(--lg-ink); background-color:#fff;background-repeat:no-repeat; border:1.5px solid var(--lg-line);border-radius:10px;box-shadow:none; -webkit-appearance:none;-moz-appearance:none;appearance:none; transition:border-color .2s,box-shadow .2s; } #contactUsDefault .contact-left input[type="text"], #contactUsDefault .contact-left select{ height:48px;padding:0 14px 0 46px;line-height:normal;background-position:15px center;background-size:20px 20px; } #contactUsDefault textarea{padding:14px;line-height:1.5;resize:vertical;flex:1 1 auto;min-height:190px} #contactUsDefault #enquiry{height:auto} #contactUsDefault .contact-left input[type="text"]:hover, #contactUsDefault .contact-left select:hover, #contactUsDefault textarea:hover{border-color:#C9CED2} #contactUsDefault .contact-left input[type="text"]:focus, #contactUsDefault .contact-left select:focus, #contactUsDefault textarea:focus{ outline:0;background-color:#fff;border-color:var(--lg-gold);box-shadow:0 0 0 3px rgba(242,194,18,.35); } /* Field icons */ #contactUsDefault input[name="contactname"]{background-image:var(--lg-i-user)} #contactUsDefault input[name="email"]{background-image:var(--lg-i-mail)} #contactUsDefault input[name="subject"]{background-image:var(--lg-i-tag)} #contactUsDefault select[name="send_to"]{ padding-right:42px;cursor:pointer; background-image:var(--lg-i-send),var(--lg-i-chev);background-position:15px center,right 14px center;background-size:20px 20px,18px 18px; } /* Old red stars next to fields: replaced by the * after each label */ #contactUsDefault .contact-left input + .alert, #contactUsDefault .contact-left select + .alert{display:none} #contactUsDefault .contact-left > .alert{float:none;margin:14px 0 0;color:var(--lg-muted);font-size:.85rem} #contactUsDefault .contact-left br.clearBoth{display:none} #contactUsDefault .contact-right label .alert{color:#C0392B;margin-left:2px} /* reCAPTCHA + button on one row */ .cf-contact-card .g-recaptcha{flex:0 0 auto} #contactUsDefault .cf-contact-card .buttonRow{float:none;margin:0 0 0 auto} #contactUsDefault .cf-contact-card input[type="submit"], #contactUsDefault .cf-contact-card .cssButton, #contactUsDefault .cf-contact-card .cssButtonHover{ display:block;width:auto!important;min-width:200px;box-sizing:border-box;margin:0;padding:15px 34px; background:var(--lg-gold);color:var(--lg-ink);border:2px solid var(--lg-gold);border-radius:12px; font-family:inherit;font-size:.95rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-align:center; box-shadow:0 8px 20px rgba(242,194,18,.35);cursor:pointer; transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s; } #contactUsDefault .cf-contact-card input[type="submit"]:hover, #contactUsDefault .cf-contact-card .cssButton:hover, #contactUsDefault .cf-contact-card .cssButtonHover{ background:var(--lg-ink);border-color:var(--lg-ink);color:var(--lg-gold);transform:translateY(-2px); } #contactUsDefault .cf-contact-card input[type="submit"]:focus-visible{outline:3px solid var(--lg-ink);outline-offset:2px} /* Phone / tablet */ @media (max-width:800px){ #contactUsDefault fieldset#contactUsForm{grid-template-columns:minmax(0,1fr)} #contactUsDefault .contact-right{margin-top:4px} #contactUsDefault .contact-right > label:first-child{margin-top:16px} .cf-contact-card{padding:24px 20px} #contactUsDefault .cf-contact-card .buttonRow{margin:0;flex:1 1 100%} #contactUsDefault .cf-contact-card input[type="submit"], #contactUsDefault .cf-contact-card .cssButton{width:100%!important} } @media (max-width:400px){ .cf-contact-card{padding:22px 16px} .cf-contact-card .g-recaptcha{transform:scale(.88);transform-origin:0 0} } @media (prefers-reduced-motion:reduce){.cf-contact-card *{transition:none!important}} /* ========================================================================== City Flyers footer File: includes/templates/winchester_responsive/css/stylesheet_footer.css Brand: ink #252B30, gold #F2C212 ========================================================================== */ .cf-footer { --cf-f-ink: #252B30; --cf-f-gold: #F2C212; --cf-f-gold-dark: #D9AC0A; --cf-f-muted: #5E676E; --cf-f-line: #E4E7EA; clear: both; margin-top: 40px; background: #fff; border-top: 4px solid var(--cf-f-gold); color: var(--cf-f-ink); font-size: 15px; line-height: 1.5; } .cf-footer *, .cf-footer *::before, .cf-footer *::after { box-sizing: border-box; } .cf-footer__inner { max-width: 1200px; margin: 0 auto; padding: 48px 24px 32px; } /* ---------- columns ---------- */ .cf-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 36px 40px; } .cf-footer .cf-footer__title { position: relative; margin: 0 0 22px; padding: 0 0 12px; font-size: 17px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: left; color: var(--cf-f-ink); } .cf-footer .cf-footer__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 2px; background: var(--cf-f-gold); } .cf-footer ul { margin: 0; padding: 0; list-style: none; } /* ---------- links ---------- */ .cf-footer__list li { margin: 0 0 9px; } .cf-footer .cf-footer__list a { color: var(--cf-f-ink); font-size: 15px; text-decoration: none; background-image: linear-gradient(var(--cf-f-gold), var(--cf-f-gold)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px; transition: background-size .25s ease; } .cf-footer .cf-footer__list a:hover, .cf-footer .cf-footer__list a:focus-visible { color: var(--cf-f-ink); background-size: 100% 2px; } .cf-footer .cf-footer__list a.cf-footer__pill { display: inline-block; margin-top: 6px; padding: 7px 16px; border: 2px solid var(--cf-f-gold); border-radius: 999px; font-weight: 700; font-size: 14px; background-image: none; transition: background-color .2s ease; } .cf-footer .cf-footer__list a.cf-footer__pill:hover, .cf-footer .cf-footer__list a.cf-footer__pill:focus-visible { background-color: var(--cf-f-gold); } /* ---------- social icons ---------- */ .cf-footer__social { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px !important; } .cf-footer .cf-footer__social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cf-f-ink); color: var(--cf-f-gold); transition: background-color .2s ease, color .2s ease, transform .2s ease; } .cf-footer .cf-footer__social a:hover, .cf-footer .cf-footer__social a:focus-visible { background: var(--cf-f-gold); color: var(--cf-f-ink); transform: translateY(-2px); } .cf-footer__social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ---------- contact lines ---------- */ .cf-footer__contact li { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; } .cf-footer__contact svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: var(--cf-f-gold-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cf-footer .cf-footer__contact a { color: var(--cf-f-ink); text-decoration: none; word-break: break-word; } .cf-footer .cf-footer__contact a:hover { text-decoration: underline; text-decoration-color: var(--cf-f-gold); text-underline-offset: 3px; text-decoration-thickness: 2px; } /* ---------- newsletter ---------- */ .cf-footer .cf-footer__text { margin: 0 0 14px; color: var(--cf-f-muted); } .cf-footer__form { display: flex; gap: 8px; } .cf-footer__form input[type="email"] { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px; border: 1.5px solid var(--cf-f-line); border-radius: 8px; background: #fff; color: var(--cf-f-ink); font-size: 15px; } .cf-footer__form input[type="email"]:focus { outline: none; border-color: var(--cf-f-gold); box-shadow: 0 0 0 3px rgba(242, 194, 18, .3); } .cf-footer__form button { flex: 0 0 auto; height: 44px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--cf-f-gold); color: var(--cf-f-ink); font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color .2s ease; } .cf-footer__form button:hover, .cf-footer__form button:focus-visible { background: var(--cf-f-gold-dark); } .cf-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- payment + trust ---------- */ .cf-footer__pay { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--cf-f-line); text-align: center; } .cf-footer__pay img { display: block; width: 100%; max-width: 270px; height: auto; margin: 0 auto 12px; } .cf-footer .cf-footer__trust { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--cf-f-muted); font-size: 14px; } .cf-footer__trust svg { width: 16px; height: 16px; fill: none; stroke: var(--cf-f-gold-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ---------- bottom bar ---------- */ .cf-footer__bar { background: var(--cf-f-ink); color: #fff; } .cf-footer__bar-inner { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; font-size: 13px; } /* override old theme rules on #siteinfoLegal */ .cf-footer #siteinfoLegal.cf-footer__copy { width: auto; margin: 0; padding: 0; background: none; color: #fff; font-size: 13px; text-align: left; } .cf-footer #siteinfoLegal a { padding: 0; color: var(--cf-f-gold); text-decoration: none; } .cf-footer #siteinfoLegal a:hover { color: #fff; } .cf-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 22px; } .cf-footer .cf-footer__legal a { color: #fff; text-decoration: none; transition: color .2s ease; } .cf-footer .cf-footer__legal a:hover, .cf-footer .cf-footer__legal a:focus-visible { color: var(--cf-f-gold); } /* ---------- keyboard focus ---------- */ .cf-footer a:focus-visible, .cf-footer button:focus-visible { outline: 2px solid var(--cf-f-gold); outline-offset: 3px; } .cf-footer__bar a:focus-visible { outline-color: #fff; } /* ---------- tablet ---------- */ @media (max-width: 900px) { .cf-footer__inner { padding: 40px 20px 28px; } .cf-footer__grid { grid-template-columns: repeat(2, 1fr); } } /* ---------- mobile ---------- */ @media (max-width: 600px) { .cf-footer { margin-top: 28px; } .cf-footer__inner { padding: 32px 18px 24px; } .cf-footer__grid { grid-template-columns: 1fr; gap: 30px; } /* centered, tidy stacking */ .cf-footer .cf-footer__title { text-align: center; } .cf-footer .cf-footer__title::after { left: 50%; transform: translateX(-50%); } .cf-footer__list { text-align: center; } .cf-footer__list li { margin-bottom: 12px; } .cf-footer__social { justify-content: center; } .cf-footer__contact li { justify-content: center; } .cf-footer .cf-footer__text { text-align: center; } /* bigger tap targets */ .cf-footer .cf-footer__list a { display: inline-block; padding: 4px 0; font-size: 16px; } .cf-footer__bar-inner { flex-direction: column; text-align: center; padding: 18px; } .cf-footer #siteinfoLegal.cf-footer__copy { text-align: center; } .cf-footer__legal { justify-content: center; } } @media (max-width: 380px) { .cf-footer__form { flex-direction: column; } .cf-footer__form button { width: 100%; } } @media (prefers-reduced-motion: reduce) { .cf-footer * { transition: none !important; } }