// ****************************************************** // variabili sito $altezza-barra-mobile: 50px; // colori $viola: #463A84; $rosa: #D83F84; $rosa-chiaro: #F9E3EC; $viola-text: #2C2659; $violettino-chiaro-di-sfondo: #F8F5FA; $lavanda: #EDE6F0; $grigio: #DCDCDC; $viola-bottoni: #A680B7; $blu: #2E2659; $pulsanti-menu: #AB86BA; // colori pastello $color-crea: #E6F7FB; $color-decora: $rosa-chiaro; $color-assembla: $lavanda; $color-confeziona: #E4FCF2; // font $font-standard: 'Poppins', sans-serif; $font-alternative: 'Montserrat', sans-serif; // ****************************************************** // variabili catalog $catalog-button-primary-color: $viola-bottoni; $catalog-button-outline-color: $viola-bottoni; // ****************************************************** // BOOTSTRAP // variabili bootstrap $primary: $rosa; $font-family-sans-serif: $font-standard; //$font-size-base: 16px; $body-color: $viola-text; $link-color: $viola-text; $border-radius: 0; $border-radius-lg: 0; $border-radius-sm: 0; $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px ); $container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1860px ); $nav-tabs-link-active-bg: transparent; // inclusione bootstrap @import "bootstrap4.3.1/scss/functions"; @import "bootstrap4.3.1/scss/variables"; @import "bootstrap4.3.1/scss/mixins"; @import "bootstrap4.3.1/scss/root"; @import "bootstrap4.3.1/scss/reboot"; @import "bootstrap4.3.1/scss/type"; @import "bootstrap4.3.1/scss/images"; //@import "bootstrap4.3.1/scss/code"; @import "bootstrap4.3.1/scss/grid"; @import "bootstrap4.3.1/scss/tables"; @import "bootstrap4.3.1/scss/forms"; @import "bootstrap4.3.1/scss/buttons"; @import "bootstrap4.3.1/scss/transitions"; @import "bootstrap4.3.1/scss/dropdown"; //@import "bootstrap4.3.1/scss/button-group"; //@import "bootstrap4.3.1/scss/input-group"; //@import "bootstrap4.3.1/scss/custom-forms"; @import "bootstrap4.3.1/scss/nav"; @import "bootstrap4.3.1/scss/navbar"; @import "bootstrap4.3.1/scss/card"; //@import "bootstrap4.3.1/scss/breadcrumb"; @import "bootstrap4.3.1/scss/pagination"; //@import "bootstrap4.3.1/scss/badge"; //@import "bootstrap4.3.1/scss/jumbotron"; @import "bootstrap4.3.1/scss/alert"; //@import "bootstrap4.3.1/scss/progress"; @import "bootstrap4.3.1/scss/media"; @import "bootstrap4.3.1/scss/list-group"; @import "bootstrap4.3.1/scss/close"; //@import "bootstrap4.3.1/scss/toasts"; //@import "bootstrap4.3.1/scss/modal"; //@import "bootstrap4.3.1/scss/tooltip"; //@import "bootstrap4.3.1/scss/popover"; //@import "bootstrap4.3.1/scss/carousel"; //@import "bootstrap4.3.1/scss/spinners"; @import "bootstrap4.3.1/scss/utilities"; //@import "bootstrap4.3.1/scss/print"; // @import "bootstrap4.3.1/scss/glyphicons"; // ****************************************************** // LIBRERIE @import "libs/icomoon/style.css"; @import "libs/swiper/swiper-bundle"; // catalog @import "scss/mixin"; @import "scss/catalog_bs4"; @import "scss/checkout"; @import "scss/newsletter"; // ****************************************************** // LAYOUT body { @include media-breakpoint-down(md) { padding-top: $altezza-barra-mobile; } } .top-sf { background-color: $viola; color: #D2BFDB; border-bottom: 1px solid #D2BFDB; display: none; @include media-breakpoint-up(lg) { display: block; } a { color: inherit; } .top { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; } .catalog_search_value { @include input-placeholder(#D2BFDB); height: auto; padding: 5px 10px; background-color: transparent; border: 0 none; color: $body-bg; &:focus { box-shadow: none; } } .cat-formsearch { .btn-link { color: $body-bg; padding: 5px 10px; } } } .menu-xs-nav { height: 100%; width: 0; position: fixed; z-index: 700; top: $altezza-barra-mobile; left: 0; overflow-x: hidden; /* Disable horizontal scroll */ transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ background-color: $body-bg; &.open { width: 100%; } > div { // imposto larghezza fissa per togliere effetto stretch width: 100vw; } ul { padding-left: $spacer; margin: 0; } li { list-style: none; } .cat-nav { font-size: 0.7rem; font-family: $font-alternative; ul { display: none; } .livello_0 { display: flex; padding: 0; > li { flex: 1; border-width: 0 1px 1px 0; border-style: solid; border-color: $grigio; text-align: center; padding: 10px; &:nth-child(4) ~ li { display: none; } } } // crea li[data-id-categoria="31225"] { background-color: $color-crea; } // decora li[data-id-categoria="31226"] { background-color: $color-decora; } // assembla li[data-id-categoria="31227"] { background-color: $color-assembla; } // confeziona li[data-id-categoria="31228"] { background-color: $color-confeziona; } } .cat-list { @include has-subcat; font-size: 0.81rem; li { margin-bottom: 2px; } .livello_0 { padding: 0; > li { display: none; background-color: $violettino-chiaro-di-sfondo; padding: $spacer; > .cat { display: none; } &.active { display: block; } } } .livello_1 { padding: 0; ul { display: none; } } } .extra { font-weight: bold; font-style: italic; font-size: 0.81rem; a { color: $blu; } li { border-bottom: 1px solid $grigio; padding: $spacer; } } .extra-btn { background-color: $viola; padding: $spacer; text-align: center; border-bottom: 1px solid $body-bg; color: #D2BFD9; // $body-bg; a { color: inherit; } } } // cerca .search-sf { background-color: $viola; color: $body-bg; display: none; a { color: inherit; } } .menu-desktop { display: flex; justify-content: space-between; } .barra-bloccata { position: fixed; top: 0; width: 100%; background: $body-bg; display: flex; justify-content: space-between; align-items: center; z-index: 700; padding: $spacer / 2 $spacer; border-bottom: 1px solid $grigio; @include media-breakpoint-down(md) { display: none; } &:not(.-show) { display: none; } .logo { max-width: 110px; } } .cat-formsearch { display: flex; justify-content: center; align-items: center; } // barra menu .logo { margin-right: $spacer; img { width: 184px; max-width: 100%; } } .carrello-wrap { position: relative; } .box-carrello-numero { position: absolute; background-color: $rosa; border-radius: 15px; display: inline-block; width: 25px; height: 25px; text-align: center; color: #fff; display: flex; top: -9px; right: -16px; align-items: center; justify-content: center; } .menu-container-desktop { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; padding-bottom: 10px; @include media-breakpoint-down(md) { display: none; } } .menu-container-mobile { display: flex; align-items: stretch; position: fixed; z-index: 600; top: 0; width: 100%; background-color: $body-bg; height: $altezza-barra-mobile; border-bottom: 1px solid $grigio; @include media-breakpoint-up(lg) { display: none; } .menu-mobile-btn { border-right: 1px solid $grigio; display: flex; align-items: center; justify-content: center; width: $altezza-barra-mobile; font-size: 30px; } .logo-mobile { img { height: 39px; } } .mobile-actions { flex-grow: 1; padding: 5px; display: flex; justify-content: space-between; } .mobile-links { display: flex; align-items: center; color: $pulsanti-menu; padding-right: 15px; > .cnt + .cnt { margin-left: $spacer; } a { color: inherit; } } } .menu-actions { display: flex; align-items: center; color: $pulsanti-menu; font-size: 1.25rem; > .cnt + .cnt { margin-left: $spacer; } a { color: inherit; &:hover { text-decoration: none; } } } [id^=menu_] { ul { padding: 0; margin: 0; } } #menu_3538 { font-weight: bold; font-style: italic; ul { display: flex; align-items: center; li + li { margin-left: 5px; } } a { transition: all 400ms ease; padding: 8px; @include media-breakpoint-down(lg) { font-size: 0.9rem; white-space: nowrap; } &:hover { color: #A57FB7; } &.voce_menu_42357, &.voce_menu_42358, &.voce_menu_42359, &.voce_menu_42360 { padding: 10px; border: 1px solid $grigio; border-radius: 5px; text-align: center; @include media-breakpoint-up(xl) { min-width: 120px; } &:hover, &:focus, &:active { transform: scale(1.1) rotate(4deg); } } // crea &.voce_menu_42357 { background-color: $color-crea; } // decora &.voce_menu_42358 { background-color: $color-decora; } // assembla &.voce_menu_42359 { background-color: $color-assembla; } // confeziona &.voce_menu_42360 { background-color: $color-confeziona; } } } .page-title { @include page-title(#463984); font-size: 2.2rem; text-align: center; margin: 25px 0; @include media-breakpoint-up(sm) { margin: 35px 0; } @include media-breakpoint-up(lg) { font-size: 2.8rem; margin: 60px 0; } } .page-subtitle { font-family: $font-alternative; font-size: 1.3; margin-bottom: $spacer * 2; } .page-text-2c { @include media-breakpoint-up(md) { column-count: 2; } } .enfasi { border: 1px solid $grigio; font-size: 1.38rem; line-height: 1.8; padding: 70px 100px; text-align: center; margin: 30px 10px; } .main { padding-top: 1px; background-color: $violettino-chiaro-di-sfondo; } .breadcrumb { color: fade-out(#2D2659, .5); margin: 20px 0; font-size: 0.82rem; a { color: inherit; } } // layout 2 colonne .sidebar-2c { display: none; } .main-2c { @include make-col-ready(); @include make-col(12); } .cat-pg-categoria { .catalog_titolo { display: none; } .sidebar-2c { display: block; @include make-col-ready(); @include make-col(12); @include media-breakpoint-up(md) { @include make-col(4); } @include media-breakpoint-up(lg) { @include make-col(3); } @include media-breakpoint-up(xl) { @include make-col(2); } } .main-2c { @include make-col-ready(); @include make-col(12); @include media-breakpoint-up(md) { @include make-col(8); } @include media-breakpoint-up(lg) { @include make-col(9); } @include media-breakpoint-up(xl) { @include make-col(10); } } } // recensioni .recensioni { margin: $spacer * 3 0; } // newsletter .newsletter-sf { background-color: $rosa-chiaro; border-color: $grigio; border-style: solid; border-width: 1px 0; } .newsletter-container { display: flex; align-items: center; flex-direction: column; margin: $spacer * 3 0; } .newsletter-titolo { @extend .page-title; margin: 0 0 $spacer; @include media-breakpoint-down(xs) { text-align: left; } } .newsletter-info { width: 100%; margin-bottom: $spacer * 2; @include media-breakpoint-up(sm) { text-align: center; } @include media-breakpoint-up(lg) { margin-bottom: $spacer * 4; } } .sitemap-sf, .credits-sf { background-color: $violettino-chiaro-di-sfondo; } .sitemap-sf { border-bottom: 1px solid $grigio; } .sitemap-row { padding-top: $spacer * 2; padding-bottom: $spacer * 2; @include media-breakpoint-up(sm) { padding-top: $spacer * 3; padding-bottom: $spacer * 3; } } .sitemap-logo { @extend .logo; margin-bottom: $spacer * 2; } .brands-sf { margin-top: $spacer * 3; border-top: 1px solid $grigio; padding-top: $spacer * 3; padding-bottom: $spacer * 3; } .brands-slider { .swiper-slide { text-align: center; img { max-width: 100%; } } .brands-buttons { color: $viola-bottoni; text-align: center; margin-top: $spacer; } } .swiper-button-disabled { opacity: 0.6; } // footer #menu_3539, #menu_3540, #menu_3541 { ul li { a { display: inline; &:hover { text-decoration: underline !important; } } } } .credits-container { padding-top: $spacer; padding-bottom: $spacer; @include media-breakpoint-up(md) { display: flex; justify-content: space-between; align-items: center; } } .loghi-pagamento { display: flex; flex-wrap: wrap; @include media-breakpoint-down(sm) { margin-bottom: $spacer; } b { margin-bottom: 0.7rem; width: 100%; } span { color: #AB85B9; margin: 0 1rem 0.7rem 0; } } // homepage .pg-home { .home-categoria-wrap { display: flex; flex-wrap: wrap; @include media-breakpoint-down(xs) { flex-direction: column; } } .home-categoria { display: flex; align-items: center; border-style: solid; border-width: 0 1px 1px 0; border-color: $grigio; padding: 20px; @include transition($btn-transition); @include media-breakpoint-up(sm) { width: 50%; } &:hover { color: $body-bg; background-color: $viola-bottoni; text-decoration: none; border-color: $viola-bottoni; .home-categoria-nome { @include text-stroke($body-bg); } img { display: none; } span { display: inline; } } span { display: none; } } .home-categoria-crea { background-color: $color-crea; } .home-categoria-decora { background-color: $color-decora; } .home-categoria-assembla { background-color: $color-assembla; } .home-categoria-confeziona { background-color: $color-confeziona; } .home-categoria-text { flex: 3; padding-right: 10px; } .home-categoria-nome { font-size: 1.8rem; line-height: 1; font-family: $font-alternative; margin-bottom: 10px; @include media-breakpoint-up(sm) { font-size: 2rem; } @include media-breakpoint-up(md) { font-size: 2.75rem; } @include media-breakpoint-up(lg) { font-size: 3.75rem; } } .home-categoria-img { flex: 1; text-align: center; img { @include media-breakpoint-down(xs) { width: 140px; } @include media-breakpoint-up(sm) { max-width: 100%; } } } .home-ultimi-arrivi-sf { background-color: $body-bg; border-bottom: 1px solid $grigio; padding-top: $spacer *3; padding-bottom: $spacer *3; } .home-ultimi-arrivi { margin-bottom: $spacer; @include media-breakpoint-up(sm) { margin-bottom: $spacer * 3; } .cat_riqProdottoBox { @extend .swiper-slide; } .riquadro { .nome { @include media-breakpoint-down(xs) { font-size: .87rem; } } } } .ultimi-arrivi-buttons { color: $viola-bottoni; text-align: center; margin-bottom: $spacer * 2; } .home-info-wrapper { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .home-info { padding: $spacer $spacer * 2; text-align: center; @include media-breakpoint-up(lg) { padding: $spacer $spacer * 5; } .home-info-icon { font-size: 40px; color: #DA4184; } .home-info-text { color: $blu; line-height: 1.2; font-weight: bold; } } .home-orari { border: 1px solid $grigio; padding: $spacer; margin: $spacer * 3 0; text-align: center; } } .btn-novita { @include catalog-button-outline(); text-transform: uppercase; &:hover { color: $body-bg; } } // pagina chi siamo .chi-sono-footer { @include page-title($body-bg); background-image: url('img/colore.jpg'); font-size: 2.75rem; text-align: center; padding: 70px 10px; @include media-breakpoint-up(md) { font-size: 3.75rem; } } // ****************************************************** // CATALOG .catalog_titolo { @extend .page-title; text-align: left; margin-top: 0; } .cat_prezzo_barrato { font-weight: normal; color: $body-color; font-size: 80%; } .cat_prezzo_offerta { color: $rosa; } // elenco prodotti / categorie .cat-elenco-categorie, .cat-elenco-prodotti { @include make-row(0); } .wrapper_ordinamento_prodotti { margin-bottom: $spacer; } .cat_riqProdotto, .cat_riqCategoria { @include make-col-ready(0); @include make-col(12); @include media-breakpoint-up(sm) { @include make-col(6); } @include media-breakpoint-up(lg) { @include make-col(4); } @include media-breakpoint-up(xl) { @include make-col(3); } @include media-breakpoint-up(xxl) { @include make-col(12/5); } } .flag-new { position: absolute; bottom: -7px; left: calc(50% - 25px); background-color: $lavanda; padding: 0 8px; width: 50px; font-size: 0.8rem; } .flag-esaurito { position: absolute; bottom: -7px; left: calc(50% - 60px); background-color: $lavanda; padding: 0 8px; width: 120px; font-size: 0.8rem; } .riquadro { text-align: center; border: 1px solid transparent; padding: 25px; &:hover { border-color: $grigio; } .foto { position: relative; margin-bottom: 20px; img { width: 100%; height: auto; } } .bottoni { position: absolute; top: 0; right: 0; display: flex; .label { display: none; } .btn_add_cart, .btn_add_wishlist { @include button-variant($body-bg, $body-bg); color: $pulsanti-menu; padding: 4px 5px; line-height: 1; } } .descrizione { min-height: $font-size-base * $line-height-base * 3; margin-bottom: 10px; font-size: 1.1rem; line-height: 1.3; } .nome { font-weight: bold; } .sottotitolo { font-size: 0.9rem; } .prezzo { color: $rosa; font-weight: bold; } } // scheda prodotto .cat-pg-prodotto { .catalog_titolo { display: none; } } .scheda-prodotto { .variants-wrap { .variants { @include make-row(10px); } .variants-campi-aggiuntivi { margin-bottom: 10px; } .variant-col { @include make-col-ready(10px); @include make-col(6); margin-bottom: 10px; display: flex; align-items: stretch; @include media-breakpoint-up(md) { @include make-col(4); } @include media-breakpoint-up(lg) { @include make-col(3); } @include media-breakpoint-up(xl) { @include make-col(12/5); } @include media-breakpoint-up(xxl) { @include make-col(2); } } .variant { border: 1px solid $grigio; padding: 15px; background-color: $body-bg; text-align: center; width: 100%; font-size: 0.75rem; display: flex; flex-direction: column; justify-content: space-between; img { max-width: 100%; } } .variant-qty { margin-top: 5px; .form-control { text-align: center; padding-left: 26px; } } .variant-name { height: 100%; } .variant-price { font-weight: bold; } .variant-add { @include product-detail-button(); @include catalog-button(); } } .nome-box { .nome { font-weight: bold; font-size: 1.35rem; } } .scheda-top { margin-bottom: 60px; } .col-foto { position: sticky; top: $altezza-barra-mobile + 5px; @include media-breakpoint-down(xs) { margin-bottom: $spacer; } @include media-breakpoint-up(lg) { top: 5px; } } .separatore { padding-bottom: 15px; border-bottom: 1px solid $grigio; margin-bottom: 15px; } .foto-grande, .foto-piccole { img { width: 100%; height: auto; } } .foto-grande { position: relative; } .foto-piccole { @include make-row(10px); &:not(:empty) { margin-top: $spacer; } > a { @include make-col-ready(10px); @include make-col(4); margin-bottom: $spacer; @include media-breakpoint-up(lg) { @include make-col(3); } @include media-breakpoint-up(xl) { @include make-col(2); } } } .scheda-prezzo { @include scheda-prezzo(); } .compra-ora { margin-bottom: 20px; .rowForm { display: flex; align-items: center; margin-bottom: 10px; .cat_cb { display: none; } } .labelForm { float: left; margin-right: 20px; margin-bottom: 0; width: 40%; } .fieldForm { float: left; margin-bottom: 0; } .qt_cart_dec, .qt_cart_inc { font-size: 20px; font-weight: bold; } .qt_cart { width: 90px; text-align: center; } .cat-buynow-finalprice { @extend .separatore; } .cat_add_cart_wrap { .labelForm { display: none; } } // importo finale .cat_importoProdotto { @include scheda-prezzo(); } .cat_button { @include product-detail-button(); } .btn_add_cart { @include catalog-button(); @include media-breakpoint-down(md) { margin-bottom: $spacer; } @include media-breakpoint-up(lg) { margin-right: $spacer; } } .btn_add_wishlist { @include catalog-button-outline(); } } .selettori-wrap { @include make-row($spacer); > div { @include make-col-ready($spacer); @include make-col(4); margin-bottom: $spacer; @include media-breakpoint-up(lg) { @include make-col(3); } @include media-breakpoint-up(xl) { @include make-col(2); } @include media-breakpoint-up(xxl) { @include make-col(1); } } img { width: 100%; } } .tab-content { > .tab-pane { padding: $spacer; border: 1px solid $nav-tabs-border-color; border-color: $nav-tabs-border-color; border-style: solid; border-width: 0 1px 1px; } } .correlati { margin-bottom: $spacer; } .correlati-titolo { @include page-title(#463984); font-size: 2.8rem; margin-bottom: $spacer; text-align: center; } .cat-correlati-categoria { @include make-row(); .cat-correlati-categoria-riquadro { @include make-col-ready(); @include make-col(12); margin-bottom: $spacer; @include media-breakpoint-up(sm) { @include make-col(6); } @include media-breakpoint-up(md) { @include make-col(4); } @include media-breakpoint-up(lg) { @include make-col(3); } @include media-breakpoint-up(xxl) { @include make-col(2); } } } .descrizione { font-size: 0.9rem; line-height: 1.3; img { max-width: 100%; } } } // menu categorie .menu-categorie { @include has-subcat; font-size: 0.8rem; .nome { @include page-title(#463984); font-size: 1.5rem; margin-bottom: $spacer; } li { list-style: none; } ul { padding-left: $spacer; } .livello_0 { padding: 0; > li { margin-bottom: 6px; } ul { display: none; } } } // filtri .box-filtro { margin-top: $spacer * 2; .box-filtro-titolo { @include page-title(#463984); font-size: 1.5rem; margin-bottom: $spacer; } .filtri { @include media-breakpoint-up(sm) { margin-top: 15px; } } .filtro { margin-bottom: 10px; border-bottom: 1px solid $grigio; .nome { margin-bottom: 9px; text-transform: uppercase; font-weight: bold; cursor: pointer; } label { margin-bottom: 3px; } .filtro-cont { display: none; } .checkbox { margin-top: 0; margin-bottom: 3px; text-transform: capitalize; label { line-height: 1; } } } .filtro-prezzo { input { width: 50px; } } #fascia_prezzo_inputs { margin-bottom: 10px; } } // ****************************************************** // FORM CONTATTI .titanka_form { .modulo_alt { @extend .form-control; } .bottone_alt { @include catalog-button(); } .txtred_alt { color: $danger; } } // ****************************************************** // VARIE ED EVENTUALI