/** * Framework: Super-Fast * File: style-variabili.css * Incluso da: css-lista-common.php * Aggiornato al 24-07-2024 * Funzione: contiene le variabili di tutto il tema. * Risorse online per la conversione delle variabili root: * https://css-variables.github.io/ * https://madlittlemods.github.io/postcss-css-variables/playground/ */ @import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap'); /* Moltiplicatori viewport */ @media only screen and (min-width: 320px) and (max-width: 599px) { :root { --vpx: 0.8; } } @media only screen and (min-width: 600px) and (max-width: 991px) { :root { --vpx: 0.9; } } @media only screen and (min-width: 992px) { :root { --vpx: 1; } } :root { /** * SETTAGGI BASE */ /* Moltiplicatori font-size S-M-L-XL */ --mp-fss: 0.7; --mp-fsm: 1; --mp-fsl: 1.4; --mp-fsxl: 1.8; --col1: #FE0000; /* Rosso */ --col2: #666666; /* Grigio */ --col1-Hov: black; --col2-Hov: black; --nero: black; --grigioscurissimo: #222; --grigioscuro: #333; --grigiomedio: #666; --grigiochiaro: #999; --grigiomoltochiaro: #ccc; --grigiochiarissimo: #eee; --bianco: white; --colbor: var(--grigiomoltochiaro); --colbor2: var(--grigiomoltochiaro); --testobase-color: var(--grigioscurissimo); --testobase-color-hover: var(--col2); --anchorbase-color: var(--col1); --trasp: transparent; --rosso: red; --giallo: yellow; --verde: green; --blu: blue; --arancio: orange; --Radius-S: 3px; --W-intera: 100%; --W-normale: 1200px; /* Impostare nel CSS le classi costanti ww_normale / wnowm / w_normale */ --lineheight-base: 1.3; --testobase-fontsize: 16px; --testobase-fontweight: 300; --testobase-fontfamily: "Roboto", arial, sans-serif; --ff1: "PT Sans Narrow", arial, sans-serif;/*Font deco 1*/ --ff2: "Roboto", sans-serif;/*Font testo*/ --ff-ptt: "PT Sans Narrow", sans-serif;/*Font pretitolo*/ --ff-stt: "Roboto", sans-serif;/*Font sottotitolo*/ --menu-fontfamily: "Roboto", sans-serif; --menu-topheader-fontfamily: "Roboto", arial, sans-serif; --firma-fontsize: 14px; /*/*--testobase-fontsize*/ --firma-margintop: 20px; --titoli-h1h6-fontfamily: var(--ff1); --topheader-altezza: 40px; --topheader-icona-altezza: 24px; --topheader-link-fontsize: 14px; --header-altezza: 80px; --header-altezza_MB: 60px; /*/*100 | 50*/ --header-spazio-sopra-su-menu-unito: 0px; --header-logo-larghezza: 200px; --header-logo-larghezza_MB: 165px; /*/*125*/ --header-logo-larghezza_MB0: 100px; --header-logo-larghezza_MB1: 100px; --header-logo-larghezza_MB2: 100px; --header-logo-larghezza_MB3: 100px; --header-icona-altezza: 24px; --header-icona-altezza_MB: 27px; /*/*20*/ --header-link-fontsize: 16px; --header-padding_MB0: 5px; --header-padding_MB1: 10px; --header-padding_MB2: 10px 20px 10px 20px; --header-padding_MB3: 10px 40px 10px 40px; --header-backgroundcolor-onscroll_MB: var(--bianco); --header-icona-colore-notonscroll_MB: var(--nero); --header-logo-colore-notonscroll_MB: var(--col1); --header-hamburger-colore-notonscroll_MB: var(--nero); --header-icona-colore-onscroll_MB: var(--nero); --header-logo-colore-onscroll_MB: var(--col1); --header-hamburger-colore-onscroll_MB: var(--nero); --menu-altezza: 50px; --menu-icona-altezza: 24px; --menu-icona-altezza_MB: 10px; --menu-link-fontsize: 16px; --menu-tendina-link-fontsize: 16px; --menu-tendina-link-lineheight: 2.2; --menu-tendinanormale-larghezza: 360px; --menu-tendina-linksottolineati: 1px var(--grigiochiaro) dashed; /*Testata solida*/ --ts-topheader-link-colore: black; --ts-header-link-colore: black; --ts-menu-link-colore: black; --ts-header-logo-colore: var(--col1); /*/*black*/ --ts-topheader-icona-colore: black; --ts-header-icona-colore: var(--col1); /*/*black*/ --ts-menu-icona-colore: black; --ts-topheader-solido-sfondo-colore: white; --ts-header-solido-sfondo-colore: white; --ts-menu-solido-sfondo-colore: white; --ts-topheader-bordo-colore: var(--colbor); --ts-header-bordo-colore: var(--colbor); --ts-menu-bordo-colore: var(--colbor); /*Testata trasparente*/ --tt-topheader-link-colore: white; --tt-header-link-colore: white; --tt-menu-link-colore: white; --tt-header-logo-colore: white; --tt-topheader-icona-colore: white; --tt-header-icona-colore: white; --tt-menu-icona-colore: white; --tt-topheader-bordo-colore: transparent; --tt-header-bordo-colore: transparent; --tt-menu-bordo-colore: transparent; /** * PAGETITLE ALTEZZA */ --pagetitle-dt-altezza-basso: 150px; --pagetitle-dt-altezza-normale: 300px; --pagetitle-dt-altezza-alto: 600px; --pagetitle-dt-altezza-moltoalto: 800px; --pagetitle-dt-altezza-altissimo: 100vh; /** * CONTENUTO */ --main-sfondo-colore: var(--trasp); /*/*var(--bianco)*/ --sidebar-unica-larghezza: 30%; --sidebar-doppia-dx-larghezza: 250px; --sidebar-doppia-sx-larghezza: 250px; --layout-due-colonne-gap: 120px; --layout-tre-colonne-gap: 30px; /*Margini*/ --main-paddingtop: 30px; --main-paddingtop_MB: 20px; --main-paddingbottom: 30px; --main-paddingbottom_MB: 20px; --main-paddingleftright: 30px; --main-paddingleftright_MB: 20px; /** * SIDEBAR */ --sidebar-backgroundcolor: var(--grigiochiarissimo); --sidebar-bordercolor: 1px var(--colbor) solid; --sidebar-padding: 20px; --sidebar-padding_MB: 30px; --sidebar-titolo-fontsize: var(--h3-fontsize); --sidebar-titolo-margintop: 0px; --sidebar-titolo-marginbottom: 20px; --sidebar-titolo-margintop_MB: 0px; --sidebar-titolo-marginbottom_MB: 15px; --sidebar-blocco-marginbottom_MB: 30px; --marginilaterali: 20px !important; /** * PULSANTEBASE */ --pulsantebase-fontsize: 16px; --pulsantebase-small-fontsize: 15px; --pulsantebase-fontfamily: var(--ff1); --pulsantebase-fontweight: normal; --pulsantebase-textransform: uppercase; --pulsantebase-color: yellow; --pulsantebase-background: red; --pulsantebase-borderradius: 999px; --pulsantebase-padding: 10px 20px 10px 20px; --pulsantebase-small-padding: 5px 10px; --pulsantebase-small-padding_MB: 5px 10px; --pulsantebase-border: 2px var(--col1) solid; --pulsantebase-color: var(--col1); --pulsantebase-background-color: transparent; --pulsantebase-radius: 99px; /** * PULSANTEBASE DUE */ --pulsantebase-due-color: var(--col2); --pulsantebase-due-background: transparent; --pulsantebase-due-border: 2px var(--col2) solid; /** * BREADCRUMBS */ --breadcrumbs-titolopagina-color: var(--grigiomedio); --breadcrumbs-titolopagina-color-hover: var(--col2); --breadcrumbs-titolopagina-separatore-color: var(--grigioscuro); --breadcrumbs-titoloprodotto-marginbottom: 10px; --breadcrumbs-titoloprodotto-marginbottom-MB: 10px; --breadcrumbs-lineheight: 1.25; --breadcrumbs-lineheight-MB: 1.25; /** * MENU SCORREVOLE MOBILE */ --menumobile-scorrevole-backgroundcolor: var(--bianco); /** * ARCHIVE * * Larghezza: nei settings */ --titoloarchivio-allineamento: center; --titoloarchivio-margintop: 0px; /*/*30pc*/ --titoloarchivio-margintop_MB: 10px; --titoloarchivio-marginbottom: 60px; --titoloarchivio-marginbottom_MB: 30px; --archivio-colonne-numero: 4; --archivio-colonne-numero_MB_small: 2; --archivio-colonne-numero_MB_medium: 3; --archivio-colonne-numero_MB_large: 4; --archivio-colonne-gap: 20px; --archivio-colonne-gap_MB: 20px; --archivio-righe-gap: 20px; --archivio-righe-gap_MB: 20px; --archivio-pulsante-margin: 20px auto 10px auto; /* Autore */ --autore-data-fontsize: 13px; --autore-data-fontsize_MB: 11px; --autore-data-color: var(--testobase-color); --autore-data-texttransform: uppercase; --autore-data-margin: 10px 0 10px 0; --autore-data-margin_MB: 0px 0 10px 0; /** * TOPTEXTSLIDER */ --toptextslider-fontsize: 12px; --toptextslider-altezza: 20px; --toptextslider-altezza_MB: 30px; --toptextslider-larghezza: 1200px; --toptextslider-fontweight: normal; --toptextslider-texttransform: uppercase; --toptextslider-background: var(--col1); --toptextslider-color: var(--bianco); /** * CONTENUTO */ --content-h1h6-margintop_MB: 30px; /** * CUSTOM POST TYPES */ --cpt-archivio-categoria-fontsize: 13px; --cpt-archivio-categoria-fontweight: normal; --cpt-archivio-categoria-color: var(--testobase-color); --cpt-archivio-categoria-texttransform: uppercase; --cpt-archivio-categoria-margin: 10px 0 10px 0; --cpt-archivio-categoria-textalign: left; /** * BOXBASE POST E PRODOTTI */ --boxbase-background: var(--bianco); --boxbase-border: 0px var(--colbor) solid; --boxbase-textalign: left; --boxbase-stars-margin: 0 auto 5px 0; /* centro: 0 auto 0 auto | sinistra: 0 auto 5px 0 */ --boxbase-shop-categoria-color: var(--col1); --boxbase-shop-categoria-color-hover: var(--col2); --boxbase-padding: 0px 0px 0px 0px; /*/***10px 20px*/ --boxbase-padding_MB: 0px; /*/***10-10-20-10*/ --boxbase-marginbottom: 0px; --boxbase-marginbottom_MB: 0px; --boxbase-search-marginbottom_MB: 20px; --boxbase-contenitore-marginbottom: 30px; --boxbase-titolo-color: var(--col1); --boxbase-titolo-color-hover: var(--col1); --boxbase-titolo-fontsize: 19px; --boxbase-sottotitolo-fontsize: 14px; --boxbase-sottotitolo-fontsize_MB: 12px; --boxbase-titolo-fontweight: normal; --boxbase-titolo-texttransform: none; --boxbase-titolo-margintop: 0px; --boxbase-titolo-margintop_MB: 0px; --boxbase-titolo-marginbottom: 10px; --boxbase-titolo-marginbottom_MB: 3px; --boxbase-sottotitolo-fontweight: normal; --boxbase-sottotitolo-texttransform: uppercase; --boxbase-sottotitolo-color: var(--col2); --boxbase-sottotitolo-marginbottom: 10px; --boxbase-sottotitolo-marginbottom_MB: 3px; --boxbase-shop-titolocategoria-margintop: 5px; --boxbase-shop-titolocategoria-marginbottom: 5px; --boxbase-estrattotesto-fontsize: var(--testobase-fontsize); --boxbase-estrattotesto-fontsize_MB: 13px; --boxbase-estrattotesto-lineheight: 1.25; --boxbase-testi-lineheight: 1; --boxbase-foto-marginbottom: 15px; --boxbase-foto-marginbottom_MB: 10px; /** * MENU MOBILE */ /* Altezza menu */ --menumobile-link-color_MB: var(--col1); --menumobile-link-fontsize_MB: 16px; --menumobile-link-padding_MB: 15px 15px 15px 15px; --menumobile-link-texttransform_MB: none; --menumobile-link-backgroundcolor_MB: var(--bianco); --menumobile-link-borderbottom_MB: 1px var(--grigiomoltochiaro) solid; --menumobile-link-icona-color_MB: var(--col2); --menumobile-link-icona-width_MB: 30px; --menumobile-chiudi-icona-color_MB: var(--col1); --menumobile-avanti-icona-color_MB: var(--col1); --menumobile-indietro-icona-color_MB: var(--bianco); --menumobile-seiin-backgroundcolor_MB: var(--col2); --menumobile-seiin-color_MB: var(--bianco); --menumobile-indietro-backgroundcolor_MB: var(--col1); --menumobile-indietro-color_MB: var(--bianco); --menumobile-cerca-backgroundcolor_MB: var(--grigiochiarissimo); --menumobile-level-backgroundcolor_MB: var(--grigiochiarissimo); /** * VARIE DA SISTEMARE */ --breadcrumbs-fontsize: 14px; --breadcrumbs-fontsize_MB: 12px; --foto-bordo: 1px var(--colbor) solid; --titolosezione-fontsize: 24px; --titolosezione-fontsize_MB: 20px; /* Ancora da usare */ --titolo-moltogrande-fontsize: 56px; --titolo-grande-fontsize: 44px; --titolo-sezione-fontsize: 24px; /**********************/ /* INIZIO WOOCOMMERCE */ /**********************/ --titoloprodotto-fontsize: 34px; --titoloprodotto-fontsize_MB: 24px; --sottotitoloprodotto-fontsize: 16px; --sottotitoloprodotto-fontsize_MB: 15px; --sottotitoloprodotto-texttransform: uppercase; --sottotitoloprodotto-semplice-padding-bottom: 20px; --sottotitoloprodotto-semplice-padding-bottom_MB: 20px; --sottotitoloprodotto-variabile-padding-bottom: 10px; --sottotitoloprodotto-variabile-padding-bottom_MB: 20px; --wc-titoletti-color: #555; --titoloprodotto-semplice-marginbottom: 10px; --titoloprodotto-variabile-marginbottom: 10px; --titoloprodotto-semplice-prezzo-margintop: 0px; --titoloprodotto-semplice-prezzo-marginbottom: 0px; /** * WOO SHOP */ --wc-shop-numerocolonne: 4; --wc-shop-columngap: 20px; --wc-shop-rowgap: 20px; /** * WOO ARCHIVE * * Larghezza: nei settings */ --wc-archive-numerocolonne: 4; --wc-archive-larghezzacolonne: 25%; /* 33.3% | 25% | 20% | 16.5% */ --wc-archive-columngap: 20px; --wc-archive-rowgap: 20px; /** * PRODOTTO */ --Product-Simple-PulCart-mrgT: 25px; --Product-Simple-PulCart-mrgB: 10px; --Product-Variable-PulCart-mrgT: 25px; --Product-Variable-PulCart-mrgB: 10px; --TitPag-ProdCorr-Fs: var(--titolosezione-fontsize); --TitPag-ProdCorr-Fs_MB: var(--titolosezione-fontsize_MB); --prodotto-sottotitolo-marginbottom_MB: 10px; --prodotto-variabile-label-tendine-mrgR: 0px; --prodotto-variabile-tendine-all: block; /* inline | block */ --prodotto-variabile-tendine-larghezza: 100%; /* auto | 100% */ /** * PREZZI */ --prezzo-fontsize: 18px; /*18*/ --Prezzo-Col: var(--nero); --Prezzo-Sconto-Bgcol: #339900; --Prezzo-Sconto-Col: var(--bianco); --Prezzo-Intero-Tdc-Clr: var(--nero); --Product-Simple-Prezzo-mrgT: 0px; --Product-Simple-Prezzo-mrgB: 20px; --Prezzo-Fw: normal; --Prezzo-Boxbase-mrgB: 15px; --Prezzo-Boxpiccolo-mrgB: 15px; --Prezzo-Boxbase-mrgB_MB: 15px; --Prezzo-Boxpiccolo-mrgB_MB: 15px; --Prezzo-Sconto-PDD: 3px 10px 3px 8px; --Prezzo-Sconto-PDD_MB: 2px 4px 2px 4px; --Prezzo-Sconto-PDD_MB0: 2px 4px 2px 4px; --Prezzo-Sconto-PDD_MB1: 2px 4px 2px 4px; --Prezzo-Sconto-PDD_MB2: 2px 4px 2px 4px; --Prezzo-Sconto-PDD_MB3: 4px 8px 4px 8px; --Prezzo-Sconto-PDD_MB4: 4px 8px 4px 8px; --Prezzo-Sconto-PDD_MB5: 4px 8px 4px 8px; --Prezzo-Sconto-PDD_MB6: 4px 8px 4px 8px; --Prezzo-Sconto-Tdc: none; --Prezzo-Intero-Tdc: line-through; --Prezzo-Archivio-mrgB: 10px; --Prezzo-Archivio-mrgB_MB: 10px; --Prezzo-SuRichiesta-Boxbase-mrgB_MB: 15px; --Prezzo-SuRichiesta-Boxpiccolo-mrgB_MB: 15px; /** * BADGE */ --badge-fontsize: 13px; --badge-Testo-Col: var(--bianco); --badge-Off-Bgcol: #339900; --badge-Spe-Bgcol: #ff6600; --badge-PDD: 3px 6px 3px 6px; /********************/ /* FINE WOOCOMMERCE */ /********************/ /** * ADVANCED TABS GUTENBERG BLOCK (atgb) */ --atgb-tabs-titolo-backgroundcolor: var(--bianco) !important; /*/*e5e5e5*/ --atgb-tabs-titolo-color: black; /*/*black*/ --atgb-tabs-titolo-active-backgroundcolor: var(--col1); /*/*col1*/ --atgb-tabs-titolo-active-color: var(--bianco); /*/*bianco*/ --atgb-tabs-titolo-active-fontweight: normal; /*/*normal*/ --atgb-tabs-titolo-active-texttransform: none; /*/*none*/ --atgb-tabs-titolo-backgroundcolor-hover: var(--grigiochiarissimo); /*/*col2*/ --atgb-tabs-titolo-color-hover: var(--nero); /*/*bianco*/ --atgb-tabs-box-padding: 30px 0px 0px 0px; /*/*30px*/ --atgb-tabs-box-backgroundcolor: transparent; /*/*f5f5f5*/ --atgb-tabs-nav-borderbottom: 1px black solid; }