@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap'); @import url('https://cdn.projectpro.pl/juicedupmotorcycles.pl/scandia/stylesheet.css'); @import url('https://cdn.projectpro.pl/juicedupmotorcycles.pl/Bebas-Neue-Pro/stylesheet.css'); $cTxtWhite: #dadadc; $cGold: #b8a982; $cGolden: #b79e5f; $cBlackLight: #141417; $cBlackDark: #09090a; $cBlack: #000; $cGreen: #22c55e; $cRed: #d16067; $cBordo: #9d343b; $cOnyx: #0a0a0b; $fScandia: 'Scandia', sans-serif; $fPlayfair: 'Playfair Display', sans-serif; $fBebasNeuePro: 'Bebas Neue Pro', sans-serif; $fBebasNeueProExpanded: 'Bebas Neue Pro Expanded', sans-serif; $fLato: 'Lato', sans-serif; html, body { height: 100%; margin: 0; padding: 0; } body { color: $cTxtWhite !important; background-color: $cOnyx !important; font-family: 'Scandia', 'Poppins', sans-serif !important; @media (min-width: 768px) { > .wrap { overflow: hidden; } } } p { margin-top: 0; &:last-child { margin-bottom: 0 !important; } } ._sub_title { color: $cGolden; font-size: 16px; font-weight: 500; text-transform: uppercase; margin: 0 0 8px 0; } ._title { position: relative; color: $cTxtWhite; font-size: 51px; font-family: $fPlayfair; font-weight: 500; @media (max-width: 980px) { font-size: 40px; } } ._btn { display: inline-block; color: $cBlack; font-size: 20px; font-weight: 500; padding: 16px 36px; background: linear-gradient(119deg, #d0bf95 0%, #a48446 100%); border-radius: 100px; transition: all 250ms ease; &:hover { background: linear-gradient(119deg, #a48446 0%, #d0bf95 100%); } @media (max-width: 767px) { font-size: 16px; padding: 12px 30px; } } ._btn2 { display: inline-block; color: $cBlack; padding: 10px 26px; background: linear-gradient(119deg, #d0bf95 0%, #a48446 100%); border-radius: 100px; transition: all 250ms ease; border: none; &:hover { background: linear-gradient(119deg, #a48446 0%, #d0bf95 100%); } span { color: $cBlackDark; font-size: 20px; font-family: $fBebasNeuePro; font-weight: 500; text-transform: uppercase; } } ._btn3 { margin: 0 !important; // padding: 0 !important; padding: 14px !important; border: none !important; background: #c1994c !important; border-radius: 10px; transition: all 250ms ease-in-out; &:hover { background: #a2803e !important; } span { display: inline-block; color: #fff !important; font-family: $fLato !important; font-size: 14px !important; font-weight: 700 !important; line-height: 21px !important; text-transform: capitalize; padding: 0; } } ._input1 { margin: 0; border: 1px solid $cGolden; border-radius: 8px; background: #28282e; height: 40px; min-height: 40px; color: $cTxtWhite; font-family: $fLato; font-size: 16px; line-height: 1; padding: 5px 10px; } ._select1 { margin: 0; border: 1px solid $cGolden; border-radius: 8px; background-color: #28282e; height: 40px; min-height: 40px; color: $cTxtWhite; font-family: $fLato; font-size: 16px; line-height: 1; padding: 5px 10px; } .checkbox-wrap { margin: 0 5px 0 0 !important; padding: 0 !important; width: 18px !important; min-width: 18px; height: 18px !important; border-radius: 4px !important; border: 1px solid #545454 !important; background: #28282e !important; overflow: hidden !important; input[type='checkbox'] { &:checked + label { &::before { top: 7px !important; left: 5px !important; } &::after { top: 9px !important; left: 3px !important; } } } label { position: relative !important; margin: 0 !important; padding: 0 !important; width: 18px !important; min-width: 18px !important; height: 18px !important; &::before { content: '' !important; position: absolute !important; top: -6px !important; left: 18px !important; width: 9px !important; height: 2px !important; background: $cGolden !important; transform: rotate(-45deg) !important; transition: all 250ms ease-in-out !important; } &::after { content: '' !important; position: absolute !important; top: -4px !important; left: -10px !important; width: 5px !important; height: 2px !important; border: none !important; background: $cGolden !important; transform: rotate(45deg) !important; transition: all 250ms ease-in-out !important; } } } .radio-wrap { display: inline-block !important; height: 15px !important; width: 15px !important; min-width: 15px !important; margin: 0 !important; padding: 0 !important; inset: 0 !important; border: 1px solid #545454 !important; background: #28282e !important; border-radius: 100% !important; input[type='radio'] { height: 15px !important; min-height: 15px !important; width: 15px !important; min-width: 15px !important; margin: 0 !important; padding: 0 !important; &:checked + label::after { background: $cGolden !important; } } label { &::after { width: 10px !important; height: 10px !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } } } .alert { border-width: 1px !important; border-radius: 10px !important; padding: 10px 15px !important; background-color: $cGolden !important; border-color: $cGolden !important; // &.alert-info { // p { // color: $cBlack; // } // button.close { // color: $cBlack; // } // } p, span { color: #fff !important; } button.close { color: #fff; top: 50% !important; transform: translateY(-50%) !important; } } body table.table { border-top: 1px solid #545454; border-left: 1px solid #545454; border-right: 1px solid #545454; tbody { border-bottom: 1px solid #545454; } td { border-bottom: 1px solid #545454; border-right: 1px solid #545454; } tbody { td.name { a { color: $cTxtWhite; font-family: $fLato; font-size: 14px; font-weight: 400; text-decoration: none; &:hover { color: $cGold; } } } td.quantity { input[type='number'] { color: $cTxtWhite; margin: 0; border-radius: 5px; border-color: #505050; background: #28282e; } } td.sum { em.color { color: $cTxtWhite; } } } &.zebra tbody tr:nth-child(even) { background-color: transparent !important; } } div.up { a { background: $cGolden; border-radius: 5px; } } .breadcrumbs { padding-top: 8px; padding-bottom: 8px; .innerbreadcrumbs { .breadcrumb-home { display: none; } ul.path { li { &.bred-1 { display: inline-block; padding-left: 0; } span { color: #8d8d99; font-size: 12px; font-family: $fScandia; text-transform: uppercase; transition: all 250ms ease; } > a { &:hover { span[itemprop='name'] { color: $cGold; } } } .itemListElement { } } } } } .tags { top: 15px !important; left: 15px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; row-gap: 5px !important; li { color: $cBlack !important; font-size: 12px !important; font-family: $fScandia !important; font-weight: 600 !important; text-transform: uppercase !important; padding: 6px 8px 4px !important; border-radius: 50px !important; line-height: 1 !important; &.promo { background: linear-gradient(119deg, #d1777d 0%, #9d343b 100%) !important; } &.new { background: linear-gradient(119deg, #5da88d 0%, #21654c 100%) !important; } } } #box_slider_39 { ul.slides { min-height: 600px; @media (max-width: 767px) { min-height: 500px; } > li { background-size: cover !important; } } .slider-text { margin-left: 20vw; @media (max-width: 980px) { margin-left: 13vw; } @media (max-width: 767px) { margin-left: 40px; margin-right: 40px; } @media (max-width: 500px) { margin-left: 20px; margin-right: 20px; } h2 { color: $cTxtWhite; font-size: 60px; line-height: 1.1; font-weight: 700; margin: 0; display: inline-block; background-color: $cBlackDark; border-radius: 2.375rem; padding: 15px 25px; @media (max-width: 767px) { font-size: 44px; } } h3 { color: $cTxtWhite; font-size: 16px; line-height: 1.1; font-weight: 500; display: inline-block; background-color: $cBlackDark; border-radius: 2.375rem; padding: 4px 12px; text-transform: uppercase; margin: 0 0 15px 0; @media (max-width: 767px) { font-size: 14px; } } p { color: $cTxtWhite; font-size: 18px; line-height: 1.1; font-weight: 400; margin: 10px 0 20px; &:last-child { margin: 0; } &:not(:last-child) { display: inline-block; background-color: $cBlackDark; border-radius: 2.375rem; padding: 4px 12px; } @media (max-width: 767px) { font-size: 16px; } } a { @extend ._btn; } } } .box_custom#box-1 { height: 600px; // background-image: url('https://sklep214936.shoparena.pl/skins/user/rwd_shoper_2/images/user/beard-quiz-home-hero-desktop.jpg'); // background-position: center; // background-repeat: no-repeat; // background-size: cover; align-content: center; margin-bottom: 0; @media (max-width: 767px) { height: 500px; } .box_wrapper { position: relative; margin-left: 20vw; z-index: 1; @media (max-width: 980px) { margin-left: 13vw; } @media (max-width: 767px) { margin-left: 40px; margin-right: 40px; } @media (max-width: 500px) { margin-left: 20px; margin-right: 20px; } } h2 { color: $cTxtWhite; font-size: 60px; font-weight: 700; margin: 0; @media (max-width: 767px) { font-size: 44px; } } h3 { color: $cTxtWhite; font-size: 16px; font-weight: 500; display: inline-block; background-color: $cBlackDark; border-radius: 2.375rem; padding: 4px 12px; text-transform: uppercase; margin: 0 0 15px 0; @media (max-width: 767px) { font-size: 14px; } } p { color: $cTxtWhite; font-size: 18px; font-weight: 400; margin: 10px 0 20px; &:last-child { margin: 0; } @media (max-width: 767px) { font-size: 16px; } } a { @extend ._btn; } img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } } .box_custom#box-2 { padding: 16px; margin-bottom: 0; background-color: #0f0f11; opacity: 0.6; ul { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 20px; li { img { height: 30px; width: auto; object-fit: contain; } } } } .box_custom#box-3 { position: relative; padding: 100px 0; &::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; right: auto; height: 100%; width: 100vw; background: #141417; transform: translateX(-50%); z-index: 1; } @media (min-width: 768px) and (max-width: 980px) { padding: 20px 0; } @media screen and (min-width: 481px) and (max-width: 767px) { overflow: initial; } .c-row { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; column-gap: 30px; z-index: 2; @media (max-width: 767px) { flex-direction: column-reverse; row-gap: 40px; } .c-col { width: 50%; @media (max-width: 767px) { width: 100%; text-align: center; } &.c-col-1 { h2 { @extend ._title; position: relative; margin: 0 0 40px 0; &::after { content: url('https://sklep214936.shoparena.pl/skins/user/rwd_shoper_2/images/user/Vector_1.png'); position: absolute; left: 105px; bottom: -30px; } @media (max-width: 767px) { &::after { left: 40%; } } } h3 { @extend ._sub_title; } p { color: $cTxtWhite; font-size: 22px; font-weight: 400; line-height: 1.4; max-width: 400px; @media (max-width: 767px) { font-size: 20px; margin: 0 auto; } } } &.c-col-2 { img { border-radius: 20px; object-fit: contain; height: auto; } } } } } .box_custom#box-4 { position: relative; padding: 100px 0; @media (max-width: 980px) { padding: 20px 0; } @media screen and (min-width: 481px) and (max-width: 767px) { overflow: initial; } &::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; right: auto; height: 100%; width: 100vw; background: #141417; transform: translateX(-50%); z-index: 1; } .c-row { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; z-index: 2; @media (max-width: 767px) { flex-direction: column-reverse; row-gap: 40px; } .c-col { width: 50%; @media (max-width: 767px) { width: 100%; text-align: center; } &.c-col-1 { h2 { @extend ._title; position: relative; margin: 0 0 30px 0; } h3 { @extend ._sub_title; } ul { padding: 0; margin: 0; list-style: none; max-width: 400px; @media (max-width: 767px) { margin: 0 auto; } li { &:not(:last-child) { margin-bottom: 20px; } p { color: $cTxtWhite; font-size: 16px; font-weight: 400; line-height: 1.4; margin: 0; strong { font-weight: 500; } } } } } &.c-col-2 { img { border-radius: 20px; object-fit: contain; height: auto; } } } } } .box_custom#box-5 { position: relative; padding: 100px 0 0 0; @media (max-width: 767px) { padding: 70px 0 0 0; } .tiles { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; @media (max-width: 980px) { grid-template-columns: repeat(2, 1fr); } @media (max-width: 500px) { grid-template-columns: 1fr; } .tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 370px; padding: 20px 20px 32px; border: 1px solid #28282e; border-radius: 1rem; overflow: hidden; &::before { content: ''; position: absolute; inset: 0; background: linear-gradient(#0000001a, #000); z-index: 1; } .title__image { position: absolute; inset: 0; img { width: 100%; height: 100%; border-radius: 1rem; object-fit: cover; } } .tile__content { position: relative; z-index: 1; text-align: center; } h2 { color: $cTxtWhite; font-size: 25px; font-weight: 500; margin: 0 0 10px 0; } p { color: $cTxtWhite; font-size: 16px; font-weight: 400; margin: 0 0 20px 0; } a { @extend ._btn; } } } } .box_custom#box-faq { width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; // margin-top: 100px; margin-bottom: 0; .boxhead { margin-bottom: 30px; border: none; span { color: $cTxtWhite; font-size: 40px; font-weight: 700; font-family: $fPlayfair; text-align: center; } } #faq { ul { padding: 0; margin: 0; list-style: none; li { &:not(:last-child) { border-bottom: 1px solid #60606b; } &:first-child { border-top: 1px solid #60606b; } &.active { h3 { &::after { height: 0; } } } h3 { position: relative; color: $cTxtWhite; font-size: 16px; font-weight: 500; padding: 16px 30px 16px 0; margin: 0; cursor: pointer; &::before { content: ''; position: absolute; right: 2px; top: 50%; width: 15px; height: 2px; background: $cTxtWhite; transform: translate(-50%, -50%); } &::after { content: ''; position: absolute; right: 15px; top: 50%; height: 15px; width: 2px; background: $cTxtWhite; transform: translate(-50%, -50%); transition: all 250ms ease; } } > div { display: none; p { color: #a3a3a3; font-size: 16px; font-weight: 400; &:first-child { margin-top: 0; } &:last-child { margin-bottom: 20px !important; } } } } } } } .bottom-footer { background-color: $cOnyx; } .box.slider { .boxhead { margin: 0 0 40px 0; border: none; span { margin: 0; color: $cTxtWhite; font-size: 51px; font-family: $fPlayfair; font-weight: 700; line-height: 1; } } .innerbox { .product { @media (min-width: 1201px) { max-width: 300px; } @media (min-width: 981px) { max-width: 315px; } @media (min-width: 768px) { max-width: 350px; } @media (max-width: 611px) { padding-right: 0; } } } .slider-nav-left, .slider-nav-right { z-index: 1; @media (max-width: 767px) { visibility: visible !important; } } } footer.footer { padding-top: 40px; margin-bottom: 0; background-color: $cOnyx; border-top: 1px solid #545454; .innerfooter { ul { margin: 15px 0; li { font-size: 14px; font-weight: 400; border: none !important; &.head { color: $cTxtWhite; font-weight: 600; background-color: transparent; } a { color: $cTxtWhite; &:hover { color: $cGold; } } &.custom-li-content { ul { display: flex; flex-direction: row; align-items: center; gap: 15px; li { padding: 0; line-height: 1; a { display: block; line-height: 1; } img { display: inline-block; max-width: 25px; } } } } } } } } #shoper-foot { background-color: $cOnyx !important; a { color: $cTxtWhite; } } #box_lastadded, #box_specialoffer, #box_bestsellers { position: relative; padding-top: 80px; padding-bottom: 80px; @media (max-width: 767px) { padding-top: 50px; padding-bottom: 50px; } &::after { content: ''; display: block; position: absolute; inset: 0 0 0 50%; width: 100svw; background: $cOnyx; transform: translateX(-50%); } .boxhead { position: relative; z-index: 1; margin-bottom: 50px; border: none !important; span { @extend ._title; line-height: 1; } } .innerbox { position: relative; z-index: 1; } .product { .product__basket { .price_extended { em.color { color: #9d343b; } } .price__regular { font-size: 0; del { font-size: 20px; } } } } } header { border-top: none !important; .login-bar { } .logo-bar-spacer { flex-grow: 1; } .logo-bar { display: flex; flex-direction: row; align-items: center; @media (max-width: 767px) { flex-direction: column; } .link-logo-img { min-width: 100px; img { width: 100%; max-width: 130px; } } .search__container { margin-left: 20px; margin-right: 20px; min-width: unset !important; @media screen and (max-width: 979px) { margin-top: 0 !important; } form.search-form { } } .menu-basket-btn { @media (max-width: 767px) { display: none; } a { position: relative; display: inline-block; img { width: 100%; max-width: 20px; filter: invert(0.9); } span { position: absolute; background-color: #b79e5f; color: #000; font-family: $fScandia; justify-content: center; align-content: center; top: -5px; left: 14px; font-size: 12px; border-radius: 100px; padding: 4px 6px 3px 6px; line-height: 10px; font-weight: bold; } } } } .menu-account { margin-right: 20px; @media (max-width: 767px) { display: none; } a.myaccount { img { display: inline-block; width: 100%; max-width: 20px; height: 20px; filter: invert(0.9); } } } } div.menu { padding: 0; background: #28282e; &.fixed { position: fixed; top: 0; left: 0; right: 0; } @media (max-width: 767px) { position: sticky; top: 0; } nav.innermenu { height: 46px; line-height: 46px; border: none !important; @media (max-width: 767px) { border-color: #28282e; height: 40px !important; min-height: 40px !important; line-height: 40px !important; margin: 0 !important; } ul.menu-list { border: none; display: flex; align-items: center; justify-content: space-between; li { &:nth-child(2) { a { padding-left: 0; } } &:last-child { a { padding-right: 0; } } &.current { a { color: $cGold; } } h3 { margin: 0; } a { color: $cGold; font-size: 20px; font-family: $fBebasNeuePro; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1px; text-decoration: none !important; transition: all 250ms ease; &:hover { color: #f9f8f5; } } } } ul.menu-mobile { max-width: 100svw; li.menu-mobile-li { a { &:hover { &::before { color: $cGolden; } } } > a { // font-size: 60px; font-size: 20px !important; line-height: 1 !important; padding: 7px 0 !important; } &.small-menu { img { display: inline-block; width: 100%; max-width: 25px; height: 25px; filter: invert(0.9); } a { padding: 0.18em 0; &::before { display: none !important; } } } &.small-panel { img { display: inline-block; width: 100%; max-width: 20px; height: 20px; filter: invert(0.9); } } &.small-search { a { &::before { display: none !important; } } } &.small-cart { img { display: inline-block; width: 100%; max-width: 20px; height: 20px; filter: invert(0.9); } a { &::after { display: none !important; } } span { position: absolute; background-color: #b79e5f; color: #000; font-family: $fScandia; justify-content: center; align-content: center; // top: -5px; // left: 14px; top: 5px; left: 56%; font-size: 12px; border-radius: 100px; padding: 4px 6px 3px 6px; line-height: 10px; font-weight: bold; } } } } } } // Product card body .products.viewphot .product { border: none; padding: 0; margin-top: 40px; &:hover { .product-inner-wrap { .prodimage { border-color: #60606b; } .product__basket { .buttons { .quickview { top: 10px; right: 10px; opacity: 1; visibility: visible; transition: all 250ms ease; } } } } } &.product_sale_price { .product-inner-wrap { .product__basket { .price { > p { em { color: $cBordo; } } } } } } .prodimage { border: 1px solid #28282e; border-radius: 15px; margin-bottom: 16px; transition: all 250ms ease; img { } } .prodname { text-align: left; .productname { color: $cTxtWhite; font-family: $fBebasNeuePro; font-size: 20px; font-weight: 600; margin: 0 0 5px 0; padding-top: 0; letter-spacing: 0.1px; text-transform: uppercase; } } .manufacturer { .brand { } } .product__basket { .price { text-align: left; padding-top: 0; display: flex; flex-direction: row; // Price > span { } > p { em { // color: $cBordo; color: $cTxtWhite; font-size: 20px; font-family: $fBebasNeuePro; font-weight: 600; line-height: 1; margin-right: 10px; } } p.price__regular { margin: 0; del { color: $cTxtWhite; font-size: 20px; font-family: $fBebasNeuePro; font-weight: 600; line-height: 1; } } .price__omnibus { display: none; } .price__additional-info { } } .buttons { form.basket { button.addtobasket { display: inline-block; color: $cBlack; padding: 10px 26px; background: linear-gradient(119deg, #d0bf95 0%, #a48446 100%); border-radius: 100px; transition: all 250ms ease; border: none; &:hover { background: linear-gradient(119deg, #a48446 0%, #d0bf95 100%); } span { color: $cBlackDark; font-size: 20px; font-family: $fBebasNeuePro; font-weight: 500; text-transform: uppercase; } } } .quickview { position: absolute; top: 0px; right: 0px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: #141417; font-size: 12px; min-width: 20px; margin: 0; border-color: #60606b; opacity: 0; visibility: none; transition: all 250ms ease; &::before { opacity: 0.7; } } } } } // Product in box body .box .product { &:hover { .boximgsize { border-color: #60606b; } } &:not(:last-child) { padding-right: 20px; } &.product_sale_price { .price { > p { em { color: $cBordo; } } } } .boximgsize { border: 1px solid #28282e; border-radius: 15px; margin-bottom: 16px; transition: all 250ms ease; overflow: hidden; img { } } .productnamewrap { text-align: left; height: 20px !important; .productname { color: $cTxtWhite; font-family: $fBebasNeuePro; font-size: 20px; font-weight: 600; margin: 0 0 5px 0; padding-top: 0; letter-spacing: 0.1px; text-transform: uppercase; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } .price { text-align: left; padding-top: 0; display: flex; flex-direction: row; // Price > span { } > p { em { // color: $cBordo; color: $cTxtWhite; font-size: 20px; font-family: $fBebasNeuePro; font-weight: 600; line-height: 1; margin-right: 10px; } } p.price__regular { margin: 0; del { color: $cTxtWhite; font-size: 20px; font-family: $fBebasNeuePro; font-weight: 600; line-height: 1; } } .price__omnibus { display: none; } .price__additional-info { } } form.basket { button.addtobasket { display: inline-block; color: $cBlack; padding: 10px 26px; background: linear-gradient(119deg, #d0bf95 0%, #a48446 100%); border-radius: 100px; transition: all 250ms ease; border: none; &:hover { background: linear-gradient(119deg, #a48446 0%, #d0bf95 100%); } span { color: $cBlackDark; font-size: 20px; font-family: $fBebasNeuePro; font-weight: 500; text-transform: uppercase; } } } } body .search__container { form.js__search { margin-bottom: 0; &.search_focused { div.search-input.search__input-area { border-color: $cGold; } } .search__input { height: 36px; } div.search-input.search__input-area { height: 36px; min-height: 36px; border: none; flex-direction: row-reverse; padding-left: 0; padding-right: 10px; border-radius: 50px; border: 1px solid #b3b3bd; background: transparent; box-shadow: none !important; .search__input-area-item { line-height: 0; } input.search__input { height: 36px; padding: 10px; background: transparent; color: $cTxtWhite; font-size: 16px; font-weight: 400; &::placeholder { color: #60606b; } } .js__search-clear-btn { color: $cTxtWhite; font-size: 8px; } button.js__search-submit-btn { height: 36px; width: 36px; background: transparent; border: none; &::before { display: none !important; } img { width: 16px; } } } div.search__content { border-radius: 5px; .search__item_content { } } } } // Product card body.shop_product { div.wrap { background: rgb(10, 10, 11); div.main { #box_productfull { margin-top: 40px; margin-bottom: 60px; .maininfo { .productimg { .mainimg { border-radius: 12px; border-color: #28282e; } .smallgallery { .innersmallgallery { ul { li { border-radius: 6px; border-color: #28282e; } } } } } .product-main-box__info { .productdetails-more { float: initial; display: block; width: 100%; .evaluation { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; .vote-message { color: #747480; font-size: 12px; margin: 0; } } } .maininfo-name { margin-bottom: 32px; .name { color: $cTxtWhite; font-family: $fBebasNeuePro; font-size: 33px; font-weight: 600; margin-top: 8px; margin-bottom: 8px; line-height: 1; text-transform: uppercase; } } .availability { .availability { } .delivery { } .shipping-costs { .showShippingCost { display: none; } } } .bottomborder { .basket { margin-top: 32px; .price { .price__container { .price-name { display: none; } .price-wrapper, > em.main-price { display: flex; flex-direction: row; gap: 10px; // color: $cRed; color: $cTxtWhite; font-size: 20px; font-family: $fScandia; font-weight: 500; text-transform: uppercase; line-height: 1; .main-price { margin: 0; color: $cRed; font-size: inherit; } .price__regular { margin: 0; font-size: inherit; .price__inactive { color: $cTxtWhite; font-size: inherit; } } } .price__regular { > span { display: none; } } .js__omnibus-price-container { margin-top: 7px; display: flex; align-items: center; line-height: 1; .price__inactive { color: $cTxtWhite; font-size: 15px; margin-left: 7px; } } } } form.form-basket { .addtobasket-container { display: flex; flex-direction: row; } .quantity_wrap { min-width: 90px; .number-wrap { input[name='quantity'] { margin: 0; border: 1px solid #b79e5f; border-radius: 8px; background: transparent; height: 47px; min-height: 47px; color: $cTxtWhite; font-family: $fBebasNeuePro; font-size: 20px; line-height: 1; text-transform: uppercase; padding: 5px 10px; } } .unit { color: $cTxtWhite; } } .button_wrap { .addtobasket { display: inline-block; padding: 10px 30px; background: linear-gradient( 119deg, #d0bf95 0%, #a48446 100% ); border-radius: 100px; transition: all 250ms ease; border: none; &:hover { background: linear-gradient( 119deg, #a48446 0%, #d0bf95 100% ); } span { color: $cBlackLight; font-size: 20px; font-family: $fBebasNeueProExpanded; font-weight: 500; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 10px; img { width: 100%; max-width: 24px; } } } } } .addtofav { display: none; } } .productdetails-more-details { border-color: #28282e; ul { display: flex; flex-direction: row; column-gap: 40px; &::before, &::after { display: none; } li { a { &:hover { span { color: $cTxtWhite; &::before { color: $cTxtWhite; } } } span { color: $cGolden; font-size: 16px; font-family: $fBebasNeuePro; font-weight: 500; text-transform: uppercase; transition: all 250ms ease; &::before { color: $cGolden; transition: all 250ms ease; } } } } } } } } } } .product-modules { #box_description { .boxhead { padding: 0 0 15px 0; border-color: #60606b; h3 { color: $cTxtWhite; font-family: $fScandia; font-size: 20px; font-weight: 500; line-height: 1; // text-transform: uppercase; } } .innerbox { * { color: #a3a3a3; margin-bottom: 1rem; font-size: 16px; line-height: 150%; } strong { } ul { padding-left: 20px; li { margin-bottom: 0; } } } img { height: auto !important; width: 100% !important; max-width: fit-content; object-fit: contain; } } } #box_productrelated { margin-top: 50px; } } div.bottom-footer { #box_recent { padding-top: 70px; } } } } .js__gallery_new { > .js__gallery-images-container { background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(3px); } } // .storefront-search { // .search__bar { // border: 0 !important; // border-radius: 0 !important; // padding: 0 !important; // .search__submit { // background-color: $cGold !important; // border: 0; // border-radius: 0 !important; // display: inline-flex; // height: 44px; // width: 45px; // align-items: center; // justify-content: center; // cursor: pointer; // margin-top: -1px !important; // } // input { // font-family: 'Poppins', sans-serif !important; // &::placeholder { // color: rgb(171, 171, 171) !important; // } // } // } // } // .module { // .favourites-button, // .labeled-icon { // display: inline-flex; // height: 45px; // width: fit-content; // align-items: center; // justify-content: center; // gap: 5px; // margin-top: 5px; // &:hover { // .favourites-button__signature, // .labeled-icon__signature { // text-decoration: none !important; // } // } // svg { // stroke: #fff; // } // .favourites-button__signature, // .labeled-icon__signature { // color: #a8a8a8 !important; // font-weight: 400 !important; // font-size: 13px; // } // .indicator { // &::after { // background-color: $cGold !important; // border: 0 !important; // } // } // } // } // .storefront-search .search .search_outline { // outline: none !important; // border: 1px solid $cGold !important; // } // .menu { // background: transparent !important; // .menu-content_root { // background: transparent !important; // li { // a { // font-weight: 500; // font-size: 14px; // color: $cGold !important; // font-family: 'Poppins', sans-serif !important; // &:hover { // color: #fff !important; // } // } // } // } // } // header { // > .grid:last-child { // border-top: 1px solid rgba(255, 255, 255, 0.1); // max-width: 100vw; // margin-top: 25px; // } // } #box_mainproducts { .boxhead { border-bottom: none; margin-bottom: 0; .category-name { color: $cGolden; font-size: 16px; font-family: $fScandia; font-weight: 500; text-transform: uppercase; } .sort-and-view { .sortlinks { margin: 0; select { color: $cTxtWhite; font-size: 14px; font-weight: 400; font-family: $fScandia; border-radius: 100px; border-color: #28282e; background-color: #0f0f11; padding: 12px 20px; } } } } .products { .product { @media (min-width: 500px) and (max-width: 767px) { width: 50%; } } } } #box_productrelated { margin-bottom: 0; .boxhead { margin: 0 0 40px 0; border: none; h3 { margin: 0; color: $cTxtWhite; font-size: 51px; font-family: $fPlayfair; font-weight: 700; line-height: 1; } } .innerbox { .product { border: 1px solid #28282e; border-radius: 15px; padding: 15px; &:last-child { margin-bottom: 0; } .f-row { } .productname { color: $cTxtWhite; font-family: $fBebasNeuePro; font-size: 20px; font-weight: 600; margin: 0 0 20px 0; padding-top: 0; letter-spacing: 0.1px; text-transform: uppercase; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .js__prodcut-short-desc { margin: 0; p { color: $cTxtWhite; font-size: 14px; font-family: $fScandia; font-weight: 400; line-height: 1.2; margin-top: 0; } ul { color: $cTxtWhite; font-size: 14px; font-family: $fScandia; font-weight: 400; line-height: 1.2; padding-left: 15px; margin-bottom: 0; } } .price { justify-content: flex-end; margin-bottom: 20px; em { color: $cRed; font-size: 20px; font-family: $fScandia; font-weight: 500; text-transform: uppercase; line-height: 1; } } .basket { .addtobasket { @extend ._btn2; } } } } } // Koszyk body.shop_basket { #box_basketlist { margin-top: 60px; .boxhead { margin-bottom: 40px; border-bottom: none; h3 { position: relative; color: $cTxtWhite; font-size: 28px; font-family: $fLato; font-weight: 700; } } .buttons { margin-top: 20px; .btn { @extend ._btn3; } } #cart-options { margin-top: 30px; h5 { color: $cTxtWhite; font-size: 21px; font-family: $fLato; line-height: 1; font-weight: 700; margin-bottom: 20px; } .delivery, .payment { padding: 10px; background: #28282e; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; &:not(:last-child) { margin-bottom: 5px; } .name { display: flex; flex-direction: row; align-items: center; column-gap: 10px; } } .payment-container { padding-right: 4%; } .summary-container { .summary-container--wrapper { border: 1px solid #505050; border-radius: 5px; padding: 10px; > .sum { .desc { color: $cTxtWhite; font-size: 18px; font-family: $fLato; font-weight: 400; line-height: 1; } .value { color: $cGold; font-size: 18px; font-family: $fLato; font-weight: 800; line-height: 1; } } } .promo-container { margin-bottom: 20px; .promocode { .checkbox-input { display: flex; flex-direction: row; align-items: center; .input { width: 100%; .shaded_inputwrap { width: 100%; input { width: 100%; margin: 0; top: 0; min-height: unset; background: #28282e; border-color: $cGolden; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } } } .action { .btn { margin: 0; padding: 10px 20px; border: none; background: $cGolden; display: inline-block; color: #fff; font-family: $fLato; font-size: 14px; font-weight: 700; line-height: 21px; text-transform: capitalize; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } } } } } .recount, .deliveryhead { margin-bottom: 10px; .desc { em { color: $cTxtWhite; font-size: 14px; font-family: $fLato; font-weight: 400; line-height: 1; } } .sum { .color { color: $cTxtWhite; font-size: 14px; font-family: $fLato; font-weight: 400; line-height: 1; } } } } } } } .basket-steps { ol { li { &::before { border: 1px solid $cGolden; width: 20px; height: 20px; padding: 12px !important; background: #111 !important; line-height: 1; } &.mark-green { } &.active-step { &::before { color: $cBlack; background: $cGolden !important; } } span { color: $cTxtWhite !important; font-size: 14px; font-family: $fLato; font-weight: 400; line-height: 1; } } } } #box_basketstep2 { .basket-step-border { border: 1px solid #505050; border-radius: 5px; padding: 30px; h3 { color: #fff; font-size: 21px; font-family: $fLato; font-weight: 400; line-height: 1; margin-bottom: 20px; } .innerbox { > div { &:not(:last-child) { border-right: 1px solid #505050; } } } } button.btn { @extend ._btn3; span { text-transform: initial; } } input { @extend ._input1; } .form-line { margin-bottom: 10px; } a { color: $cGolden; } } #box_basketaddress { .basket-step-border { border: 1px solid #505050; border-radius: 5px; padding: 30px; h4 { color: #fff; font-size: 21px; font-family: $fLato; font-weight: 400; line-height: 1; margin-bottom: 20px; } .innerbox { > div { &:not(:last-child) { border-right: 1px solid #505050; } } } } button.btn { @extend ._btn3; span { text-transform: initial; } } input { @extend ._input1; } select { @extend ._select1; } textarea { margin: 0; border: 1px solid $cGolden; border-radius: 8px; background-color: #28282e; width: 100%; color: $cTxtWhite; font-family: $fLato; font-size: 16px; line-height: 1; padding: 5px 10px; margin-bottom: 10px; } a { color: $cGolden; } .address_type { td { padding-bottom: 5px; } } } body.shop_basket_step3 { #box_basketsummary { table { tbody { tr { td { &.sum { .color { color: $cTxtWhite; } } } } } } .address { &.delivery, &.invoice { border-right: 1px solid #545454; } h4 { color: #fff; font-size: 21px; font-family: $fLato; font-weight: 400; line-height: 1; margin-bottom: 20px; } a { color: $cGolden; } } button.btn { @extend ._btn3; span { text-transform: initial; } } } } #box_basketfinal { .boxhead { margin-bottom: 40px; border-bottom: none; span { position: relative; color: $cTxtWhite; font-size: 28px; font-family: $fLato; font-weight: 700; } } a.btn { @extend ._btn3; span { text-transform: initial; } } } #box_login { h3 { margin-bottom: 40px; span { position: relative; color: $cTxtWhite; font-size: 28px; font-family: $fLato; font-weight: 700; } } input { @extend ._input1; } button.btn { @extend ._btn3; margin: 20px 0 !important; span { text-transform: initial; } } a { color: $cGolden; } } #box_register { h3 { margin-bottom: 40px; position: relative; color: $cTxtWhite; font-size: 28px; font-family: $fLato; font-weight: 700; } h4 { position: relative; color: $cTxtWhite; font-size: 18px; font-family: $fLato; font-weight: 700; } input { @extend ._input1; margin-bottom: 5px; } button.btn { @extend ._btn3; margin: 20px 0 !important; span { text-transform: initial; } } a { color: $cGolden; } } #box_passchange { .boxhead { margin-bottom: 40px; border-bottom: none; span { position: relative; color: $cTxtWhite; font-size: 28px; font-family: $fLato; font-weight: 700; } } input { @extend ._input1; margin-bottom: 5px; } button.btn { @extend ._btn3; margin: 20px 0 !important; span { text-transform: initial; } } a { color: $cGolden; } } #box_mailfriend { .boxhead { margin-bottom: 40px; border-bottom: none; h3 { position: relative; color: $cTxtWhite; font-size: 28px; font-family: $fLato; font-weight: 700; } } input { @extend ._input1; margin-bottom: 5px; } button.btn { @extend ._btn3; margin: 20px 0 !important; span { text-transform: initial; } } a { color: $cGolden; } } #box_panel { .boxhead { margin-bottom: 40px; border-bottom: none; span { position: relative; color: $cTxtWhite; font-size: 28px; font-family: $fLato; font-weight: 700; } } h4 { position: relative; color: $cTxtWhite; font-size: 18px; font-family: $fLato; font-weight: 700; } input { @extend ._input1; margin-bottom: 5px; } .btn { @extend ._btn3; margin: 20px 0 !important; span { text-transform: initial; } } .address { display: flex; flex-direction: row; flex-wrap: wrap; gap: 20px; &::before, &::after { display: none; } li { border-radius: 12px; border: 1px solid #28282e; padding: 13px; margin: 0; min-width: 300px; width: 100%; max-width: calc(100% / 2 - 20px - 18px); .title { border-color: #28282e !important; } } } } #box_addresses { .boxhead { margin-bottom: 40px; border-bottom: none; span { position: relative; color: $cTxtWhite; font-size: 28px; font-family: $fLato; font-weight: 700; } } .btn { @extend ._btn3; span { text-transform: initial; } } .links { display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 10px; row-gap: 5px; } em { width: 100%; } ul.addresses { li { border-radius: 12px; border: 1px solid #28282e; padding: 13px; } } } #box_address { .boxhead { margin-bottom: 40px; border-bottom: none; span { position: relative; color: $cTxtWhite; font-size: 28px; font-family: $fLato; font-weight: 700; } } input { @extend ._input1; width: 100%; margin-bottom: 5px; } select { @extend ._select1; } .btn { @extend ._btn3; margin: 20px 0 !important; span { text-transform: initial; } } } body .mask { backdrop-filter: blur(5px); } body .modal { .modal-header { background: #0a0a0b; margin-bottom: 0; h3 { color: $cTxtWhite; font-size: 21px; font-family: $fLato; line-height: 1; font-weight: 700; } .modal-close { .modal-close-txt { } } } .modal-body { background: #28282e; padding: 2em; input { @extend ._input1; margin-bottom: 5px; } textarea { margin: 0; border: 1px solid $cGolden; border-radius: 8px; background-color: #28282e; width: 100%; color: $cTxtWhite; font-family: $fLato; font-size: 16px; line-height: 1; padding: 5px 10px; margin-bottom: 10px; } button.btn { @extend ._btn3; margin-top: 10px, im !important; span { text-transform: initial; } } } } body .consents { .consents__wrapper { .consents__modal { background: #28282e; .consents__content { .consents__heading { color: $cTxtWhite; font-size: 21px; font-family: $fLato; line-height: 1; font-weight: 700; } p { &:not(.consents__heading) { color: $cTxtWhite; font-size: 14px; font-family: $fLato; line-height: 1.5; font-weight: 400; } a { color: $cGolden; } } } .consents__buttons { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; .btn { margin: 0; padding: 14px; border: none; background: #c1994c; border-radius: 10px; transition: all 250ms ease-in-out; display: inline-block; color: #fff; font-family: $fLato; font-size: 14px; font-weight: 700; line-height: 21px; text-transform: capitalize; &:hover { background: #a2803e !important; } } } } } .consents__mask { backdrop-filter: blur(3px); } } .top, .footer { } body.shop_infopage { .box.box_infopage { a { color: $cGolden; } } } #rwd-menu { width: 100% !important; margin-top: 40px !important; > li { &:nth-child(1) { display: none !important; } &:nth-child(2) { display: none !important; } } li { a { display: block !important; } } } .js__search-mobile-btn { display: none !important; }