$base-font-size: 1.1rem; $base-font-family: 'Open Sans', sans-serif; $base-font-weight: 300; $base-font-color: #4c4b42; $site-max-width: 97rem; $step-size-heading: 0.25; $side: 1px; $logo-max-width: 342px; $page-header-height: 90px; $head-image-height: 120px; $loading-field: rgba(255,255,255,1); $main-design-color: #15c6bb; $main-design-text-color: #fff; $main-design-sec-color : #3d3733; $main-design-border-weight: 1px; $main-design-radius: 6px; $main-design-small-radius: 3px; $base-text-color: #000; $base-active-color: #df1023; $top-bar-bg-color: #f3f3f3; $top-bar-text-color: #9a9a9a; $red: #df1023; $error-color: #f14125; $error-text-color: #fff; $header-bg-color: #fff; $header-text-color: #fff; $nav-bg-color: #fff; $nav-text-color: #656565; $nav-active-color: #31a2a4; $nav-active-bg-color: #fff; $price-color: #000; $old-price-color: #7b7b7b; $promo-price-color: #df1023; $news-page-bg: #f1f1f1; $gallery-bg: #373538; $footer-bg-color: #fff; $footer-text-color: #333333; $sfooter-bg-color: #af0c12; $sfooter-text-color: #949494; $light-gray: #efefef; $dark-gray: #313131; $owl-controls-color: #313131; $gallery-bg-color: #efefeff0; .gallery-head-image{ background: url( ../img/gallery_header.jpg ) center center; } .contacts-head-image{ background: url( ../img/contacts_header.jpg ) center center; } .news-head-image{ background: url( ../img/news_header.jpg ) center center; } .pages-head-image{ background: url( ../img/pages_header.jpg ) center center; } .basket-head-image{ background: url( ../img/basket_header.jpg ) center center; } .account-head-image{ background: url( ../img/account_header.jpg ) center center; } .categories-head-image{ background: url( ../img/categories_header.jpg ) center center; } .not-found-page{ background: url( ../img/404_header.jpg ) center center; } .slider-container{ background:#2bb9ba; background-position: center center; background-repeat:no-repeat; background-size: 100% auto; border-bottom: 1px solid #019ee3 !important;} .gallery-head-image, .contacts-head-image, .news-head-image, .pages-head-image, .basket-head-image, .account-head-image, .categories-head-image, .not-found-page{ box-shadow: inset 0 0 10px rgba(99,99,99,.57); } body { h1 { font-size: 2rem; } table { font-size: 0.9em; } p { line-height: 1.6; font-size: 0.9rem; } strong, b { font-weight: 600 !important; } .loading-fld{ span{ width: 70px; height: 70px; background: url( ../img/loader_bar2.gif ) center center no-repeat; background-size: 100% auto; } } .pages-head-image span { display: block; color: #fff; } .breadcrumbs li { font-size: .7em; a { color: #595959; font-size: 1.1em; } } .title-fix { margin: -4px 0 0 34px; } .input-group-label { border: none; } label { font-size: 14px; } .messageOnIndex { background: rgba(230, 228, 228, 0.99); color: #000; border: 5px solid #c7c4bf; box-shadow: 0 0 22px rgba(0, 0, 0, 0.37); text-align: center; a { border: none; } } .button, button { .closeBtn { } .btn-default.cart.btn_ask_fix { background-color: red; } } .know-how-button { background: #2eb2b8; color: #fff; padding: 3px 15px; border-radius: 14px; &:hover { background: #2d465b; color: #fff; padding: 3px 15px; border-radius: 14px; } } .more-accents a { background: #2d465b; padding: 10px 30px; color: #fff; border-radius: 20px; &:hover { background: #2eb2b8; color: #fff; } } .breadcrumbs-container { background: #f3f3f3; } .sort-list-by { font-size: .9em; } .share-in-socials { a { @include radius( 50% ); i { vertical-align: baseline; } } } .button.add-to-cart:hover{ background-color: #fdb32e !important; filter: none; } .panel-default{ .panel-body>img{ height: 225px; } } .header { .head { border-bottom: 3px solid #e7e7e7; } .cart-wrap .cart .badge { border: 2px solid #fff; background: #fa5d58; } .search { background: #f8f8f8; border: 1px solid #c2c2c2; input { height: 42px; width: 100%; @include radius(20px); } } .is-dropdown-submenu { min-width: 380px; } .is-dropdown-submenu-item { a { font-size: .85rem !important; &:hover { color: $nav-active-color !important; } } } .my-account { background: transparent url(../img/prodavam/profile.png) top center no-repeat; background-size: 33px; .user-icon { content: none; } } .cart-wrap { background: transparent url(../img/prodavam/cart_icon.png) top center no-repeat; background-position-x: 84%; background-size: 33px; } #slider { .item { .textBox { padding: 2rem; strong { color:#fff; font-size: 2em; line-height: 1.2em !important; } p { font-size: 1rem; } } } .owl-buttons { .owl-prev, .owl-next{ @include radius(50%); background: #ffffff; } } .owl-pagination { margin-top: 15px; .owl-page { span { opacity: 1; @include radius(50%); } } @media only screen and (max-width: 64em) { display: none; } } .item .textBox { background: transparent; @media only screen and (max-width: 1440px) { @include background-opacity(#30b9b9, 0.93); border-radius: 20px; } h2 { color:#ee1b25; } p { color: #fff; } @media only screen and (max-width: 1440px) { p { font-weight: normal; font-size: 1rem; } } .button { @include radius(20px); background: #ffbc2d; } @media only screen and (max-width: 64em) { display: none; } } } #slider .item img { margin:0; } .message-wrap { strong { @media print, screen and (max-width: 64em) { font-size: .9em; } } } .shrink .message-wrap { visibility: visible; strong { font-size: 0.8em; } } div.head > div > div > div.message-wrap > p:nth-child(1){ margin-bottom: 5px; font-size: 22px; font-weight: 600; text-align: center; } div.head > div > div > div.message-wrap > p:nth-child(2){ font-size: 12px; } .shrink .logo-wrap { padding-left: 15px; img.logo { height: initial; } } .logo { border-bottom: none; @media only screen and (min-width: 64.063em) and (max-width: 90em) { max-height: 65px; } } .mobile-search-button, .user-wrap, .message-wrap, .cart-wrap { border-left: none; } .user-wrap i, .cart-wrap i { color: #171717; opacity: 0; } .user-wrap i { opacity: 0; } .button.login i{ opacity: 1; } #menumain > div > div > ul > li > ul > li > a::before { font: normal normal normal 14px/1 FontAwesome; width:40px; text-align: center; margin:0 auto; display: inline-block; } #menumain > div > div > ul > li > ul > li:nth-child(1) > a::before { content: "\f108"; } #menumain > div > div > ul > li > ul > li:nth-child(2) > a::before { content: "\f109"; } #menumain > div > div > ul > li > ul > li:nth-child(3) > a::before { content: "\f10a"; } #menumain > div > div > ul > li > ul > li:nth-child(4) > a::before { content: "\f1e3"; } #menumain > div > div > ul > li > ul > li:nth-child(5) > a::before { content: "\f008"; } #menumain > div > div > ul > li > ul > li:nth-child(6) > a::before { content: "\f0eb"; } #menumain > div > div > ul > li > ul > li:nth-child(7) > a::before { content: "\f02f"; } #menumain > div > div > ul > li > ul > li:nth-child(8) > a::before { content: "\f025"; } #menumain > div > div > ul > li > ul > li:nth-child(9) > a::before { content: "\f096"; } #menumain > div > div > ul > li > ul > li:nth-child(10) > a::before { content: "\f124"; } #menumain > div > div > ul > li > ul > li:nth-child(11) > a::before { content: "\f135"; } #menumain{ ul { margin-left:0; &.submenu{ } } ul li.main-list{ a { font-size: 0.9em; font-weight: 600; } } ul li.main-list > a.active{ border-bottom: 3px solid #ffc750; } ul li.main-list > a:hover { border-bottom: 3px solid #ffc750; } background: $nav-bg-color; } .search { border-radius: 24px; } .search button { background: -moz-linear-gradient(268deg, #16c5bb 0%, #4c9cb4 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16c5bb), color-stop(100%, #4c9cb4)); /* safari4+,chrome */ background: -webkit-linear-gradient(268deg, #16c5bb 0%, #4c9cb4 100%); /* safari5.1+,chrome10+ */ background: -o-linear-gradient(268deg, #16c5bb 0%, #4c9cb4 100%); /* opera 11.10+ */ background: -ms-linear-gradient(268deg, #16c5bb 0%, #4c9cb4 100%); /* ie10+ */ background: linear-gradient(182deg, #16c5bb 0%, #4c9cb4 100%); /* w3c */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#16c5bb', endColorstr='#4c9cb4',GradientType=0 ); /* ie6-9 */ width: 38px; height: 38px; margin: 2px; @include radius( 50% ); } .search input { border: none; background: transparent; padding-left: 20px; } .slider-container { background: #2bb9ba url(../img/prodavam/main-bg.jpg) center center no-repeat; background-size: cover auto; border-bottom: 1px solid #c7c7c7 !important; } } article { .additional_pictograms { bottom: 8rem; } &.product-head { .additional_pictograms div img { width: 30px; } h1 { font-weight: 400; } } .show-all { background: #2cb9b9; } &.content { .page_item.page_list { margin-top: 30px; margin-bottom: 60px; h2 { text-align: center; font-size: 2rem; font-weight: 300; } } } } .tabs-title > a[aria-selected='true'] { font-weight: 200; font-size: 1em; } section.product-info { .product-info .table-product-type th { color: #299e9b; } .button { background: #1dbeba; i { vertical-align: unset; } } border-top: 1px solid #efefef; .price-wrap { span { display: none; } .price nobr b { font-size: 1.8rem; font-weight: 500 !important; vertical-align: baseline; } } .quantity_basket_fld label input { border: 1px solid #d4d4d4; } .variant-price { .newPriceColor { color: red; } } } .product-wrapper { a { h3 { min-height: 5em; font-size: .9em; } .pictograms { top: 10px; right: 10px; } } } section { h1 { font-size: 3rem; span.line::after { background: #ffc74f; } } &.home-page-text { margin: 0 0 0 0; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='1666.7' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.07'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/svg%3E"); background-attachment: fixed; h2>span{ font-weight: 600; font-size: 1.2em; } } &.special-offers { padding-top: 0; .special-offers-outer { background: #efefef; padding: 15px; } } &.pages { h1 { display:none; } } &.news { background: #f3f3f3; .newsThumb .news_info .button { background: #e2e2e2; border-radius: 15px; } } &.news.latest_news_bg{ background: #e9e9e9 url(../img/prodavam/chair_bg.jpg) -600px no-repeat; background-attachment: fixed; .news_info{ background:transparent; .news_short_text { color: #313131; } .button { border-radius: 13px; } } } .left .search-box #slider-range .ui-widget-header { background: #595959; &.ui-corner-all { } } span.ui-slider-handle.ui-corner-all.ui-state-default { border-radius: 50% !important; } &.news .newsThumb .imgNews a { background-size: auto 150%; } article{ .price-label { background: url(../img/prodavam/promo_label.png) no-repeat center center/100% auto; width: 70px; height: 70px; @media print, screen and (max-width: 64em) { width: 55px; height: 55px; } span{ display: block; font-size: 16px; line-height: 60px; letter-spacing: -.8px; color: #000; text-shadow: none; } &.new { background: url(../img/prodavam/new_icon.png) no-repeat center center/80% auto; span{ display: none; } } &.promo { width: 55px; height: 55px; @include radius(50%); background: #fa5860; margin-bottom: 0; margin-left: 7px; span{ color: #fff !important; font-weight: 600; font-size: 18px; line-height: 55px; } } } } &.categories { padding-top: 5rem; padding-bottom: 5rem; .content { @media print, screen and (min-width: 48em) { .large-4 { width: 33.333%; } } @media print, screen and (min-width: 64em) { .large-4 { width: 25%; } } @media print, screen and (min-width: 82em) { .large-4 { width: 20%; } } a:nth-child(1) { img { background: #add4a2; } } a:nth-child(2) { img { background: #d8caaf; } } a:nth-child(3) { img { background: #2cb9b9; } } a:nth-child(4) { img { background: #d1ced8; } } a:nth-child(5) { img { background: #ef745d; } } a:nth-child(6) { img { background: #dc9fa6; } } a:nth-child(7) { img { background: #d6d6dc; } } a:nth-child(8) { img { background: #2cb9b9; } } a:nth-child(9) { img { background: #aedaef; } } a:nth-child(10) { img { background: #ef745d; } } } background: #f3f3f3; } .basket { .empty-cart h3 i { color: #ccd018; } } } .top-banners a{ background-color: initial !important; height: 150px; background-size: 100% !important; img { width: 100%; height: auto; display: block; margin: 0 auto; text-align: center; } } .accents { .single_accent { width: 16%; } p{ font-weight: 300; color: #2f2f2f; } } .short-description { line-height: 1.6rem; font-size: .9em; iframe { display: none; } } .feature-text-data { background: #fff; a { border-radius: 20px; background: #bfbfbf; margin-top: 15px; padding: 9px 0.8em; font-size: 14px; } } .feature-text-data .imgThumb img { height: 300px; margin: 0 auto 30px auto; display: block; } .cookies_message { background: #ffbc2d; i { font-size: 1.2em; color: #000; } div.cnt { p { font-size: 1em; color:#000; } p>a { text-decoration: none; color: #fff; vertical-align: unset; background: #299d9a; padding: 2px 10px; border-radius: 21px; } } } .cookies_message > div.cnt div.b_cnt { background: #299e9b; a.btn { color: #fff; text-transform: uppercase; } } .footer{ background: $footer-bg-color; .f-footer { h5 { color:#333; span.line { background: #16c7bc; height: 2px; } } ul li a{ color: $footer-text-color; &:hover{ color:#3badb6; } } p { color:#333; } } .h-footer{ background:#fbfbfb; h5{ color:#333; } i{ color:#333; } } .s-footer{ background:#fff; a{ color:#4c4c4c; } .text-copy{ color:#a2a2a2; } } } #mainDeliveryForm > div.declaration-personal-fld > div > label > a:nth-child(3) { background: #fff0c5; padding: 0 10px; @include radius(12px); } #mainDeliveryForm > div.declaration-personal-fld > div > label > a:nth-child(5) { margin-left: .2rem; background: #d8f3f9; padding: 0 10px; @include radius(12px); } @media only screen and (min-width: 1441px) { .row { max-width: $site-max-width; } .sider-outer { width: 100%; float: none; } .top-fld-xl-resolution { display: none; width: calc(25% - 30px); float: right; background: #efefef; margin-top: 30px; margin-bottom: 30px; height: 300px; @include radius($main-design-radius); } .top-fld-xl-resolution { width: calc(25% - 30px); float: right; background: #efefef; margin-top: 30px; margin-bottom: 30px; height: 300px; @include radius($main-design-radius); } article.promotion .large-3 { width: 20%; } #article-container .large-4 { width: 25%; } .search-wrap { width: calc( 60% - 390px ); } .categories-list { .panel-body { img { margin:0; } } } .categories-list h2 { min-height: 4rem; font-size: 1.1rem; } .categories-list .large-4 { width: 20%; } } &#page-index .panel-default { background: #transparent; box-shadow: none; .panel-body { img { @include radius(50%); margin: 5px 0; } } .panel-header { h3{ min-height: 4rem; @media (max-width: 40.2em) and (min-width: 30em) { font-size: .8em; min-height: 3rem; } } } &:hover { border:3px solid transparent; background: #fff; } } @media only screen and (max-width: 1440px) { .header { #menumain ul li.main-list > a { font-size: .75rem; padding: 1rem .6rem; text-transform: uppercase; font-weight: 600; font-size: .8em; } .slider-container div.row { max-width: 95%; } .message-wrap { } } .top-banners a { height: 180px; } } @media only screen and (min-width: 46em) { #categories-menu { display: block !important; } } @media only screen and (max-width: 50em) { .header { #menumain ul li.main-list > a { font-size: 1rem; } #slider .item { img { width: 100%; margin: 5px 0 !important; } .textBox { padding: 1.7rem; } } } #menumain .dropdown.menu > li.opens-right > .is-dropdown-submenu { border: none; margin-left: -15px; } section .left .search-box h2 .fa { top: 0; } footer .social-icons ul.menu { margin: 0 auto 0 auto; } .title-bar { background: #fff; } } @media (max-width: 40.2em) and (min-width: 30em) { .search.is-open { margin-top: 53px; } .header .search input { border-top-left-radius: 0; border-bottom-left-radius: 0; } section.home-page-text { background-size: cover; } section article .price-label span { line-height: 52px; } section.categories { padding-bottom: 2rem; } section.categories { padding-top: 2rem; padding-bottom: 2rem; } } @media only screen and (max-width: 90em) and (min-width: 64.063em) { .header .search input { width: 25rem !important; } } @media only screen and (max-width: 64em) and (min-width: 40.063em) { .header .search input { /* width: 14rem !important; */ font-size: .7rem; } } @media only screen and (max-width: 40em) and (min-width: 20.063em) { .header .search { border: none; input { width: 12rem !important; font-size: .7rem; } } } }