/** * eCommerce Shop CSS * * color scheme * ------------ * @white = #fff rgba(255,255,255, 1) * @light = #e3e3e3 * @medium = #d5d5d5 * @color1 = #036 * @color2 = #e10000 * @grey = #999 * @dark = #333 * */ /* define colors */ @font-color: #505050; @msg-color: #c00; @white: #fff; @light: #efefef; @medium: d5d5d5; @grey: #505050; @dark: #333; @color1: #036; @color2: #e10000; .stock-status { font-weight: bold; display: block; } .color-available { color: #5cb85c; } .color-outofstock { color: #c00; } .loading { display: block; width: 40px; height: auto; margin: 30px auto; } .main-content-wrapper { background: @white; padding: 2rem 1rem; } /* shop */ .shop { min-height: 400px; } .shop, .shop-padding { padding-top: 0rem; padding-bottom: 2rem; } @media (min-width:1200px) { .shop, .shop-padding { padding-top: 2rem; padding-bottom: 4rem; } } /* shop message */ .shop-message { padding: 1rem 1rem; text-align: center; background: @light; color: @msg-color; } .shop-message.info, .shop-message > .info { background-color: rgba(107,232,137,1) !important; color: #222; } .shop-message.error, .shop-message > .error { background-color: rgba(246,163,179,1) !important; } .set-cart-qty, .updatecart-bttn, .clear-cart-item { background: @color1; color: @white; border: none; width: 30px; } .set-cart-qty.incrQty { background: @color1 url('../img/shop/arrow_up.png') center no-repeat; } .set-cart-qty.decrQty { background: @color1 url('../img/shop/arrow_dn.png') center no-repeat; } .product-btn-back > a { display: inline-block; background: @color1; color: @white !important; font-size: 1em; padding: 4px 8px; margin-bottom: 15px; border-radius: 0; } /* product search */ .navbar-search-toggler { display: inline-block; position: absolute; top: 1.85rem; right: 100px; font-size: 120%; color: @grey; cursor: pointer; } .navbar-search { position: fixed; z-index: 9999; top: 100px; left: 0; right: 0; background: @white; padding: .5rem 1rem; border-bottom: solid 1px @light; display: none; } .navbar-search .mobile-search-input { width: 80px; } .shop-search-wrapper { position: relative; } @media (min-width:576px) { .navbar-search-toggler { right: 110px; } .navbar-search { padding: .5rem 2rem; } } @media (min-width:1200px) { .navbar-search-toggler { display: none; } .shop-padding { padding-top: 200px; } .shop-search-wrapper { max-width: 100%; position: absolute; top: 20px; right: 0px; } } .shop-search-wrapper #search-term { width: 80%; padding: .5rem .5rem; } .shop-search-wrapper #search-button { width: 17%; margin-left: 1%; padding: .5rem .5rem; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px; } /* categories breadcrumbs */ .shop-breadcrumbs-wrapper { margin-top: 1rem; margin-bottom: 1rem; } .categories-breadcrumbs { width: 100%; list-style-type: none; margin-left: -30px; } .categories-breadcrumbs .breadcrumbs-item { font-size: .7em; color: @grey; display: inline-block; margin-right: .5rem; } .categories-breadcrumbs .breadcrumbs-item a, .categories-breadcrumbs .breadcrumbs-item a:link, .categories-breadcrumbs .breadcrumbs-item a:visited { color: @grey; } @media (min-width:1200px) { .shop-breadcrumbs-wrapper { margin-top: 2rem; margin-bottom: 3rem; } } /* sidebar */ .sidebar { background: @grey; } /* categories menu */ .categories-menu-layer { display: none; position: fixed; z-index: 9995; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0, .8); padding: 1rem; } .categories-menu-layer .menu-layer-content { position: relative; background: @grey; color: @white; padding: 1rem; height: 100%; overflow-y: auto; } .categories-menu-layer .layer-header { font-size: 2rem; } .categories-menu-layer .close-layer { position: fixed; z-index: 9999; top: 2rem; right: 2rem; display: block-inline; width: 32px; height: 32px; border-radius: 50%; background: @color1 !important; color: @white !important; font-size: 120%; text-align: center; padding: 0; line-height: 28px; transform: rotate(-45deg); cursor: pointer; } .categories-menu-wrapper, .filter-options-wrapper, .customer-navigation-wrapper, .sidebar-search-wrapper { display: block; /* width: 200px; */ padding: 0; margin-bottom: 1rem; background-color: none; border: none; } .categories-menu-header, .filter-options-header, .customer-navigation-header, .sidebar-search-header { background: none; padding: 1rem 1rem; font-size: 1.25rem; margin-bottom: 0; } .categories-menu-header, .sidebar-search-header { padding: .5rem 1rem; color: @white; cursor: pointer; } .categories-menu-header .lsf { font-size: 110%; } /* menu data container | hidden on mobile */ .sidebar-search-data { padding: 15px 15px; } .categories-menu-data { display: none; } @media (min-width:768px) { .categories-menu-layer .menu-layer-content { padding: 2rem; } } @media (min-width:992px) { .categories-menu-wrapper { padding: 0 0 1rem; } .categories-menu-data { display: block; } } @media (min-width:1200px) { .categories-menu-header, .sidebar-search-header { font-size: 2rem; padding: 1rem 1rem; } } /* 1st level */ .categories-menu, .customer-navigation { list-style-type: none; list-style-image: url('../img/icons/arrow_list-style.png'); list-style-position: inside; margin-left: 0px; } .categories-menu > li, .customer-navigation > li { border-top: solid 1px @light; margin-left: -18px; padding-left: 18px; } .categories-menu > li:first-child, .customer-navigation > li:first-child { border-top: none; } /* 2nd level */ .categories-menu ul { list-style-type: none; list-style-image: none; margin-left: -20px; margin-bottom: 5px; } .categories-menu li a, .categories-menu li a:link, .categories-menu li a:visited { display: block; color: @white !important; padding: 0.25rem .5rem .5rem; margin-left: -15px; } .categories-menu .main-category.active { border-left: solid 4px @color1; } .categories-menu .active > a { font-weight: 600; } /* Set only active category submenues block = visible */ .categories-menu > .main-category ul, .categories-menu > .main-category.active li ul, .categories-menu > .main-category .level1-category ul { display: none; } .categories-menu > .main-category.active ul, .categories-menu > .main-category.active li.active ul, .categories-menu > .main-category.active li .level1-category.active ul { display: block; } /* 3rd level */ .categories-menu .level2-category {} /* Categories mobile menue (select) ########### DELETE ############ */ .categories-mobile-menu { width: 100%; background: @color1; color: @white; border: none; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 1rem .5rem; margin-bottom: 30px; } .categories-mobile-menu option { border: none; background: @color1; color: @white; line-height: 1.35em; padding: .5rem .5rem; } @media (min-width:1400px) { .categories-menu-wrapper, .filter-options-wrapper, .sidebar-search-wrapper { width: 375px; } } /* Categories */ .category-image-wrapper { height: 220px; overflow: hidden; } .category-image-wrapper > a {} .category-image-wrapper > a > img {} .category-title { margin: 0 0 20px; } .category-description { margin-bottom: 2rem; } @media only screen and (max-width:480px) { .category-title { font-size: 2em; } } /* category listing layout */ .product-listing-layout { float: right; } .product-listing-layout .layout-option { display: inline-block; border: solid 4px @grey; padding: 5px; font-size: .9em; font-weight: bold; color: @grey; } .product-listing-layout .layout-option.active { border: solid 4px @color1; color: @color1; } /* category listing */ .category-listing .product { overflow: hidden; } .category-listing .category, .category-listing .product { position: relative; min-height: 365px; /* Set min-height to keep optic */ border: solid 1px @grey; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px; padding: 10px; text-align: center; transition: all linear .3s; margin-bottom: 30px; } .category-listing .product.list { /* Products in list view */ min-height: 80px; margin-bottom: 15px; } .category-listing .category { min-height: 300px; } .category-listing .category:hover, .category-listing .product:hover { border: solid 1px @color1; box-shadow: 1px 1px 4px #ccc; } .category-listing .category a, .category-listing .product a { color: @font-color; text-decoration: none; } .category-listing .category a:hover, .category-listing .product a:hover { color: @color1; } .category-listing .product-image { display: block; overflow: hidden; height: 200px; } .category-listing .product.list .product-image { height: 100px; } .category-listing .product-image .preview-image { height: 200px; width: auto; max-width: 200%; } .category-listing .product.list .preview-image { height: 100px; } .category-listing .product-name { height: 3em; overflow: hidden; font-size: 1.1em; padding-top: .5em; } .category-listing .product.list .product-name { text-align: left; padding-top: 0; height: auto; } .category .category-name { font-size: 1.1em; text-align: center; height: 60px; overflow: hidden; margin-top: 10px; } .category-listing .product-image .badge-manufacturer { display: block; max-width: 100px; } .category-listing .product-image .badge-manufacturer img { max-width: 100%; } .category-listing .product-image .badge-special-price { position: absolute; top: 15px; right: -55px; transform: rotate(45deg); background: @color1; color: @white; text-align: center; font-size: .75em; display: inline-block; min-width: 180px; padding: 3px 30px; box-shadow: 2px 2px 5px rgba(0,0,0,.25); } .category-listing .product-short-description { min-height: 2.25em; font-size: .8em; text-align: center; } .category-listing .product-price { display: block; color: @color1; font-weight: bold; text-align: center; } .category-listing .product-tax-info { margin-bottom: .5rem; line-height: 1.5em !important; } .category-listing .product.list .product-tax-info, .category-listing .product.list .stock-status { font-size: .85rem; } .category-listing .product-actions { text-align: right; } .category-listing .product.list .product-actions .into-cart .btn-icon { display: inline-block; font-size: 130%; } .category-listing .product.list .product-actions .into-cart .btn-text { display: none; } @media (min-width:1200px) { .category-listing .product-actions { text-align: center; } .category-listing .product.list .product-actions .into-cart .btn-icon { display: none; } .category-listing .product.list .product-actions .into-cart .btn-text { display: inline-block; } } @media (min-width:1400px) { .category-listing .product .product-actions .into-cart .btn-icon { display: none; } } .load-more-products { display: block; width: 100%; max-width: 240px; margin: 0 auto; } .extended-category-listing { display: block; text-align: center; } .no-products-available { margin: 10% 0 20%; } @media only screen and (max-width:1400px) { .category-listing .category .category-name { font-size: 1.25em; } } @media only screen and (max-width:1024px) { .shop-search-wrapper { /** display: none; */ } .category-listing .category, .category-listing .product { min-height: 340px; background: @white; } } /* category / description */ .category .category-description { margin-bottom: 20px; margin-bottom: 40px; } /* product / product details */ .product-infobox {} .product-details {} .product-details .product-name { margin: 30px 0 30px; font-size: 2.5rem; font-weight: bold; } @media (min-width:1200px) { .product-details .product-name { margin: 10px 0 30px; } } .product-details .product-image { position: relative; border: solid 1px #ddd; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; overflow: hidden; padding: 15px; text-align: center; transition: all linear .3s; } .product-details .product-image:hover { opacity: .8; -moz-opacity: .8; -webkit-opacity: .8; -o-opacity: .8; } .product-details .product-image .magnifier { width: 36px; height: 36px; opacity: .5; position: absolute; top: 10px; right: 10px; } .product-details .product-thumbnails { width: 100%; max-width: 100%; margin-top: 10px; overflow: hidden; overflow-x: auto; } .product-details .thumbnails-slider { width: 100%; } .product-details .thumbnail { width: 23%; max-width: 23%; height: 100px; overflow: hidden; border-radius: 4px; display: inline-block; background-color: #f0f0f0; text-align: center; margin-right: 1%; margin-bottom: 10px; cursor: pointer; opacity: 1; transition: all linear .3s; } .product-details .thumbnail:hover { opacity: .6; } .product-details .product-price { text-align: left; font-size: 1.2em; font-weight: bold; } .product-details .regular-price { text-decoration: line-through; color: #666; font-size: .9em; line-height: 2em; } .product-details .tax-info { margin-bottom: .5rem; font-size: .8em; line-height: 1.5em !important; } .product-details .tax-info a { color: #343434; } .product-details .tax-info .stock-status { display: block; padding: 1rem 0; } .product-details .tax-info .delivery-time {} .product-details .tax-info .tax-and-shipping {} .product-details .product-description { margin-top: 40px; font-size: 1.1em; } /* Product description elements */ .product-details .product-description ul { list-style-image: url('../img/icons/list_style_plus.png'); margin-left: -20px; } .product-details .product-description table { border-color: #999; } .product-details .product-description table td { padding: 5px; vertical-align: top; border-color: #999; font-size: .9em; } .product-details .details-section { padding-top: 40px; padding-bottom: 40px; border-bottom: solid 1px #9A9A9A; font-size: 1.1em; } .product-details .product-manuafacturer { margin-bottom: 10px; height: 50px; } .product-details .product-manuafacturer .manufacturer-logo { width: auto; max-width: 120px; height: auto; } .product-details .product-cart-options { display: inline-block; width: 100%; text-align: left; background: #f0f0f0; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; padding: 20px 20px; } .product-details .product-cart-options .product-name { margin-bottom: 6px; font-size: 1.2em; } .product-details .product-cart-options .product-options-box { padding: .25em 0 1em; } .product-details .product-cart-options .product-options-box .product-options-name { font-weight: bold; } .product-details .product-cart-options .product-options-box select { width: auto; min-width: 150px; max-width: 100%; border-radius: 5px; border: solid 1px #ddd; padding: .5em; } .product-details .product-cart-options .product-options-box option { padding: .5em .5em; } .product-details .into-cart { background: @color1; border: none; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; color: @white; padding: 10px; transition: all linear .3s; } .product-details .into-cart:hover { background: #24222D; } .product-details .product-additional-box { background: #ececec; padding: 2rem 2rem; border: solid 1px #ddd; margin: 2rem 0; } .product-details .product-additional-header { font-weight: bold; font-size: 1.25rem; } .product-details .product-downloads {} .product-details .product-downloads-inner { min-height: 150px; padding: 20px 20px; } .product-details .product-downloads h2 { margin-top: 0; } .product-details .product-downloads .downloads-list { list-style-type: none; margin-left: -36px; width: 100%; } .product-details .product-downloads .downloads-list li { margin-bottom: 8px; background: @color1; transition: all linear .3s; } .product-details .product-downloads .downloads-list li:hover { background: #343434; } .product-details .product-downloads .downloads-list li a { color: @white; display: block; text-decoration: none; position: relative; padding: .5rem 2rem; } .product-details .product-downloads .downloads-list .pdf-icon { width: 23px; height: 23px; background: transparent url('../img/icon_pdf_s.png') no-repeat; position: absolute; top: 6px; left: 12px; } @media (max-width:768px) { .product-details .product-name { margin-top: 10px; } .product-details .product-price { } .product-details .product-cart-options { display: block; padding: 10px 20px; } .product-details .into-cart { width: 100%; } .product-details .product-downloads-inner { background: transparent url(); padding: 20px; } } /* cross selling + up selling*/ .crossselling-upselling { padding-top: 3em; } .crossselling-upselling .product-crossselling-header, .crossselling-upselling .product-upselling-header { font-weight: bold; } .crossselling-upselling .product { background-color: @white; height: 180px; } .crossselling-upselling .product-image img { max-width: 100%; } .crossselling-upselling .product-name { font-size: 1rem; font-weight: 600; line-height: 1.25rem; height: 3.25rem !important; margin-bottom: 1rem !important; } .crossselling-upselling .product-price { text-align: center; } .carousel-control-next, .carousel-control-prev { width: 8%; z-index: 9; } .carousel-control-next { right: -15px; } .carousel-control-prev { left: -15px; } /* product quick-contact form */ .quick-contact-form { background: #ececec; border: solid 1px #ddd; margin-top: 60px; padding: 10px 15px 10px; } .quick-contact-form form[name="contactform"] { margin-top: 30px; padding-left: 0px; padding-right: 0px; } .quick-contact-form form[name="contactform"] .form-control { margin-bottom: 1rem; } .quick-contact-form input[name="email"] { display: none; } /* cart */ .nav-cart-status { display: inline-block; width: 24px; height: 24px; border-radius: 50%; padding: 5px; line-height: 14px; text-align: center; background: @color1; color: @white; font-size: .7em; position: relative; z-index: 5; top: -10px; right: 3px; } .cart-backlink {} .cart-wrapper {} .cart-wrapper table {} .cart-wrapper table td.cart-item-quantity, .cart-wrapper table th.cart-item-quantity { width: 30px; } .cart-wrapper table td.cart-item-quantity .cart-item-quantity-update { width: 50px; } .cart-wrapper table td.cart-item-image, .cart-wrapper table th.cart-item-image { width: 15%; text-align: center; } @media (max-width:576px) { .cart-item-image { width: 0px !important; overflow: hidden; } } .cart-wrapper table td.cart-item-image img, .cart-wrapper table th.cart-item-image img { height: 100px; max-height: 100px; width: auto; } .cart-wrapper table td.cart-item-name, .cart-wrapper table th.cart-item-name { width: 40%; } .cart-wrapper table td.cart-item-name .cart-product-sku { font-size: .9em; display: block; } .cart-wrapper table td.cart-item-name .cart-item-options { font-size: .9em; font-style: italic; display: block; } .cart-wrapper table td.cart-item-price, .cart-wrapper table th.cart-item-price { width: 14%; text-align: right; } .cart-wrapper table td.cart-item-total, .cart-wrapper table th.cart-item-total { width: 15%; text-align: right; } .cart-wrapper table td.cart-totals { text-align: right; } .cart-wrapper table td.cart-total-name { font-weight: bold; } .cart-wrapper table td.cart-total-value { font-weight: bold; text-decoration: underline; } .cart-product-image { width: 160px; height: auto; max-width: 100%; } .cart-info-digitals { background: #e0e0e0; padding: 15px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; margin-bottom: 2em; } .cart-digital-marker { font-size: .8em; padding: 3px; border: solid 1px #666; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; display: inline-block; transform: rotate(-3deg); margin: 0 6px; } .cart-link { position: relative; /* background: @color1; ##orange## */ background: #ececec; margin-right: -15px; } .cart-link .number-cart-items { position: absolute; z-index: 999; right: 15px; top: 15px; background: @color1; color: @white; width: 24px; height: 24px; border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; -o-border-radius: 12px; box-shadow: 1px 1px 4px rgba(0,0,0,.7); line-height: 22px; text-align: center; font-size: .9em; } @media only screen and (min-width:769px) { .cart-link { margin-right: -15px; } } @media only screen and (max-width:768px) { .cart-link .number-cart-items { position: relative; float: right; right: 6px; top: 0; } } /* checkout btn */ .cart-checkout-bttn { text-align: right; } .btn-checkout, .btn-checkout:link, .btn-checkout:visited { background-color: @color1; color: @white; transition: all linear .3s; } .btn-checkout:hover, .btn-checkout:active, .btn-checkout:focus { background-color: @color2; color: @white; text-decoration: none; } .checkout-btn-name { display: inline-block; margin-right: 0.5rem; } /* checkout steps */ .checkout-step {} .checkout-step-header { border-bottom: solid 1px @light; padding-bottom: 1rem; margin-bottom: 1rem; } /* checkout elements */ .checkout-status-msg { display: none; width: 100%; text-align: center; color: @msg-color; padding: 1rem 1rem; } .checkout-navigation { list-style-type: none; margin-left: -40px; margin-bottom: 3rem; } .checkout-navigation > li { display: inline-block; background: @white url('../img/icons/arrow_list-style.png') left center no-repeat; padding-left: 15px; margin-right: 10px; } .checkout-navigation > li.checkout-status { background-image: none; padding-left: 0; display: block; /* forcing new line */ margin-bottom: .35em; font-weight: bold; } .checkout-navigation > li.active { font-weight: 600; } .checkout-navigation > li > a { display: inline-block; } .checkout-navigation .lsf { font-size: 130%; margin-right: 5px; } .checkout-navigation .checkout-step { background: @color1; color: @white; padding: .5rem 1rem; margin-right: 5px; } .checkout-navigation .step-done { background: @grey; } .checkout-navigation .checkout-step.active { background: @color2 !important; } .checkout-navigation .checkout-step a { color: white !important; } /* create account fields */ .create-account-wrapper, .checkout-account-wrapper, .checkout-form-wrapper { position: relative; min-height: 360px; padding: 15px; background: @light; border-radius: 5px; margin-bottom: 1em; } .create-account-wrapper .account-header, .checkout-account-wrapper .account-header { margin-bottom: 1em; } .checkout-account-action { position: absolute; bottom: 2rem; left: 15px; right: 15px; text-align: center; } /* checkout field group */ .checkout-field-group { min-height: 300px; background: @light; padding: 15px; border-radius: 5px; margin-bottom: 1em; } /* checkout forms */ .checkout-form {} .checkout-form .form-group { margin-bottom: 1rem; } #shipToBillingAddress { float: left; display: inline-block; margin-right: 10px; } table#payment-method {} table#payment-method td { vertical-align: top; } table#payment-method .payment-option { padding-top: 15px; padding-bottom: 15px; } table#payment-method .payment-method-description { font-size: .9em; margin: 5px; padding: 10px; border: solid 1px #ccc; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .customer-note, .checkout-subscribe-newsletter, .revocation, .terms-accepted { margin-top: 10px; margin-bottom: 10px; } .customer-note strong, .checkout-subscribe-newsletter strong, .revocation strong, .terms-accepted strong { display: inline-block; margin-bottom: 10px; } textarea[name="customer-note"] { display: block; width: 100%; height: 160px; } @media only screen and (max-width:768px) { textarea[name="customer-note"] { width: 100%; } } .revocation, .terms-accepted { background: #e0e0e0; padding: 10px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .revocation { font-size: .9em; margin-top: 20px; } .terms-accepted { text-align: right; margin-top: 20px; } .textbox-scrollable { height: 300px; overflow-y: auto; } /* PAYPAL checkout CSS */ .pp_pmt_integration { float: right; width: auto; } #pp_pmt_received { display: none; } /* customer area */ .customer-navigation { list-style-type: none; padding-top: 20px; } .customer-navigation > li { padding: .5rem 0; } .customer-content {} .customer-orders {} .customer-orders .customer-order { background: @light; padding: 1rem 1rem; margin-bottom: 1em; } .customer-order .toggle-order-details { display: inline-block; cursor: pointer; } .customer-orders .customer-order .order-details { display: none; margin: .5rem 0; padding: .5rem 0; border-top: solid 1px @grey; } .customer-orders .customer-order .order-row { margin-bottom: .5rem; } .customer-orders .customer-order .order-row i { font-size: .9em; } .customer-orders .customer-order .tax-row { padding-top: .5rem; border-top: solid 1px @grey; } .customer-orders .customer-order .order-total { border-top: solid 1px @grey; font-weight: bold; }