:root { /*------------------------------------*\ +Palette Landing Page Sanity \*------------------------------------*/ --color-sanity-orange-300: #fff6f5; --color-sanity-orange: #fdada5; /* Primary */ --color-sanity-orange-700: #f77769; /* --color-sanity-black-300: hsla(0, 1%, 83%, 1); */ --color-sanity-black: #0d0e12; /* Secondary */ /* --color-sanity-black-700: hsl(207, 30%, 24%); */ --color-sanity-cyan-300: #c5fcfc; --color-sanity-cyan: #96f8f8; /* Accent */ --color-sanity-cyan-700: #90ecf9; /*------------------------------------*\ +Colori Main Progetto \*------------------------------------*/ /* --color-primary-100: var(--color-sanity-viola-100); */ --color-primary-300: var(--color-sanity-orange-300); --color-primary: var(--color-sanity-orange); /* */ --color-primary-700: var(--color-sanity-orange-700); /* --color-secondary-100: var(--color-sanity-pink-100); */ --color-secondary-300: var(--color-sanity-black-300); --color-secondary: var(--color-sanity-black); /* */ --color-secondary-700: var(--color-sanity-black-700); --color-accent-300: var(--color-sanity-cyan-300); --color-accent: var(--color-sanity-cyan); --color-accent-700: var(--color-sanity-cyan-700); --color-success-50: var(--color-sanity-success-50); /* */ --color-success-300: var(--color-sanity-success-300); /* */ --color-success: var(--color-sanity-success-400); /* */ --color-warning-50: var(--color-sanity-warning-50); /* */ --color-warning-300: var(--color-sanity-warning-300); /* */ --color-warning: var(--color-sanity-warning-400); /* */ --color-alert-50: var(--color-sanity-alert-50); /* */ --color-alert-300: var(--color-sanity-alert-300); /* */ --color-alert: var(--color-sanity-alert-400); /* */ /* Colori Islight */ --islight-color-soft: var(--color-sanity-gray-500); /* Un po' meno scuro e pieno del full */ --islight-color-medium: var(--color-primary); /* Un po' meno scuro e pieno del full */ --islight-color-full: var(--color-secondary); /* Il più scuro e pieno per gli elementi in evidenza */ --islight-body-color: var(--islight-color-full); --islight-interactive-color: var(--islight-color-medium); /* Colore del link */ --islight-interactive-hov-color: var(--islight-color-full); /* Colore del link hover*/ --islight-disabled-color: #aaa; /* Di solito grigio chiaro del disabilitato */ /* Colori Isdark */ --isdark-color-soft: rgba(255,255,255,.6); /* Colore del link */ --isdark-color-medium: var(--color-primary-700); /* rgba(255,255,255,.8) *//* Un po' meno scuro e pieno del full */ --isdark-color-full: var(--color-white); /* Il più scuro e pieno per far risaltare le cose */ --isdark-body-color: var(--isdark-color-full); --isdark-interactive-color: var(--isdark-color-soft); /* Colore del link */ --isdark-interactive-hov-color: var(--isdark-color-medium); /* Colore del link hover*/ --isdark-disabled-color: var(--islight-disabled-color); /* Di solito grigio chiaro del disabilitato */ /*------------------------------------*\ +Grid Breakpoints \*------------------------------------*/ /* Per definire i breakpoint bisogna andare direttamente nella sezione iniziale di Tailwind.config.js non si possono inserire solo qui e pescarle da tailwind perché verrebbero incluse come variabili css e non come valore e non si possono inserire variabili css in una media query https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries Le inseriamo comunque anche qui per utilizzarle in alcune classi ad es. .max-w-screen-lg-half che servono in alcuni casi di larghezze mezze */ /* I breakpoint vanno riportati in - file tailwind.config.js - typography.css tutte le media query - hero.css screens: { 'xs': '230px', // => @media (max-width: 360px) { ... } Parte da 230 e arriva a 374 => per smartphone supervecchi 320 o nuovi economici 360 'sm': '375px', // => @media (max-width: 640px) { ... } Parte da 375 e arriva a 639 => Parte da 375 e arriva a 639 => per smartphone nuovi o fighi phablet etc... 'md': '640px', // => @media (max-width: 768px) { ... } 'lg': '960px', // => @media (max-width: 1024px) { ... } 'xl': '1280px', // => @media (max-width: 1600px) { ... } 'xxl': '1600px', // Primo - Progetto grafico Serena era 1760px }, */ /* Variabili screen per classi screen-X-half in grid-spacing */ --screen-xs: 230px; --screen-sm: 390px; --screen-md: 640px; --screen-lg: 1024px; --screen-xl: 1440px; --screen-xxl: 1920px; /*------------------------------------*\ +Grid Spacing \*------------------------------------*/ /* Istruzioni sui font-size ------------------------------------ - Il font-size in px del body non viene dichiarato da nessuna parte, viene definito dal browser - impostazioni predefinite del browser = 16px = 1rem - per avere i rem responsive usiamo le % nel html - di base font-size html = 100% = 16px - 16px è quindi font-size di default di qualsiasi testo che non sia parte della tipografia, es. span - in small down font-size = 100%, in questo modo i testi standard su smartphone rispettano buone pratiche - salendo di breakpoint, ingrandiamo il rem con le percentuali html - le percentuali di font-size agiscono sia sui font, sia sulle dimensioni w-X h-X padding margin etc.. */ --html-fs-xs: 100%; --html-fs-sm: 100%; /* 102.5% */ --html-fs-md: 100%; /* 105% */ --html-fs-lg: 100%; /* 107.5% */ --html-fs-xl: 100%; /* 110% */ --html-fs-xxl: 100%; /* 112.5%; */ --gap-default: 1rem; /* Si usa per tutti i margin-bottom dei _main__section e dei wp-block-columns/row */ /* IMPORTANTE >>> gap-default non può essere > 1.5rem con sistemi grid a 12 colonne, se no si rompe layout con schermi sotto i 320px */ --row-max-w: 1440px; /* Da progetto grafico max-w = 1440px; */ /*------------------------------------*\ +Base \*------------------------------------*/ --body-bg: var(--color-white); /*------------------------------------*\ +Typography \*------------------------------------*/ /* Gli import dei font si impostano direttamente dentro Canva, tipicamente tramite url, es. https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200&display=swap */ --primary-ff: "Source Serif 4", system-ui; --secondary-ff: "Manrope", sans-serif; /* --extra-ff: 'StudioFeixenSans-Light', sans-serif; */ /* Basefont */ --body-ff: var(--primary-ff); --body-fs: 1.25rem; /* usato solo per fs-body */ --body-color: var(--islight-body-color); --body-fw: 300; --body-lh: 115%; --body-ls: -.02em; /* Text Selection */ --txt-select-color: var(--color-accent); --txt-select-bg: var(--color-black); /* Bold */ --bold-fw: 700; /* Se i font del tema sono diversi tra loro potrebbe funzionare correttamente solo su un font */ --bold-color: inherit; /* Anchor */ --a-fw: 400; /* Definita in _palette-transitions-shadows etc.. --a-transition: var(--a-transition); */ --a-color: var(--color-black); --a-txtdec: none; --a-hov-color: var(--color-accent); --a-hov-txtdec: none; /* vale solo per gli a dentro un p o dentro uno span */ /* Dimensioni tutte le tipografie */ /* Tutti i valori sopra i 18px sono ridotti a 0.8 per assomigliare al progetto, includendo anche l'aggiunstamento dato dal 105% del font-size html */ --huge-fs-lg: clamp(2rem, 1.3627rem + 2.6144vw, 4.5rem); --h1-fs-lg: clamp(2.25rem, 1.8676rem + 1.5686vw, 3.75rem); --h2-fs-lg: clamp(2.625rem, 2.5294rem + 0.3922vw, 3rem); --h3-fs-lg: clamp(1.625rem, 1.4975rem + 0.5229vw, 2.125rem); --h4-fs-lg: clamp(1.25rem, 1.1225rem + 0.5229vw, 1.75rem); --h5-fs-lg: clamp(1.125rem, 1.0613rem + 0.2614vw, 1.375rem);; --h6-fs-lg: clamp(1rem, 0.9536rem + 0.1905vw, 1.125rem); --h7-fs-lg: .875rem; --toptitle-fs-lg: 1.5rem; --lead-fs-lg: clamp(1.875rem, 2.4228rem + -1.9055vw, 0.13625rem); --p-fs-lg: clamp(1rem, 0.9044rem + 0.3922vw, 1.375rem); --txt-sm-fs-lg: clamp(1.125rem, 1.0931rem + 0.1307vw, 1.25rem); --txt-xs-fs-lg: clamp(0.875rem, 0.8431rem + 0.1307vw, 1rem); --txt-xxs-fs-lg: clamp(0.6875rem, 0.6556rem + 0.1307vw, 0.8125rem); --bquote-fs-lg: clamp(1.5rem, 1.8485rem + -1.4297vw, 0.1328125rem); /* Headings */ --title-ff: var(--secondary-ff); --title-color: var(--color-secondary); --title-fw: 400; --title-lh: 120%; --title-ls: 0; /* Letter spacing */ --title-mb: 2rem; /* Toptitle */ --toptitle-ff: var(--secondary-ff); --toptitle-color: var(--color-primary); --toptitle-fw: 900; --toptitle-lh: 120%; --toptitle-ls: -.01em; /* Letter spacing */ --toptitle-tt: none; --toptitle-mb: .8rem; /* Subtitle */ --subtitle-ff: var(--primary-ff); --subtitle-color: var(--islight-body-color); --subtitle-fw: 500; --subtitle-lh: 120%; --subtitle-font-style: none; /* Paragraph */ --p-ff: var(--primary-ff); --p-color: var(--islight-body-color); --p-lh: 1.33; --p-ls: -.025em; /* Letter spacing */ --p-mb: 2rem; /* Lead */ --lead-ff: var(--title-ff); --lead-color: var(--color-white); --lead-fw: 700; --lead-lh: 120%; --lead-ls: 0; /* Letter spacing */ --lead-mb: 0; /* Blockquote */ --bquote-p: 0 0 0 var(--grid-1fr); --bquote-ff: var(--secondary-ff); --bquote-color: var(--islight-body-color); --bquote-fw: 600; --bquote-lh: 1.4; --bquote-ls: var(--body-ls); /* Letter spacing */ --bquote-mb: 0; --bquote-border-l: none; --bquote-icon: var(--icon-bquote); --bquote-icon-w: calc(var(--grid-1fr) / 3); --bquote-icon-h: calc(var(--grid-1fr) / 3); --bquote-icon-t: 0; --bquote-icon-l: 0; /* Lists */ /* Di default la maggior parte dei valori degli UL valgono anche per gli OL */ --ul-mb: var(--p-mb); --ul-li-ff: var(--p-ff); /* Vale anche per OL */ --ul-li-fs: var(--p-fs-lg); --ul-li-color: var(--color-primary-700); /* va ridichiarato per renderlo esplicito in isdark */ --ul-li-pl: 1.1em; --ul-li-mb: .6em; /*calc(var(--p-mb) / 3) */ --ul-li-lh: var(--p-lh); --ul-li-dot-t: .5em; --ul-li-dot-l: 0; /* Spazio da sinistra del dot in before */ --ul-li-dot-w: .2em; /* Teniamo h e w separate anziché size per permettere forme non quadrate */ --ul-li-dot-h: .2em; /* Teniamo h e w separate anziché size per permettere forme non quadrate */ --ul-li-dot-bg: var(--color-primary-300); --ul-li-dot-radius: 5rem; /* 0 = quadrato */ --ul-li-chk-pl: 2em; --ul-li-chk-mb: 1.5em; /* calc(var(--p-mb) / 3) */ --ul-li-chk-t: 0; --ul-li-chk-l: 0; --ul-li-chk-w: 1.5em; --ul-li-chk-h: 1.5em; /* Inserire immagini codificate in base64 da https://websemantics.uk/tools/svg-to-background-image-conversion/ */ --ul-li-chk-bg-img: var(--icon-triangolo-up); --ol-li-pl: 3em; /* 1em vale tendenzialmente la larghezza di un numero a una cifra */ --ol-li-dot-t: -0.7em; --ol-li-dot-l: 0; /* Spazio da sinistra del dot in before */ --ol-li-dot-w: 1.8em; /* Teniamo h e w separate anziché size per permettere forme non quadrate */ --ol-li-dot-h: 1.8em; /* Teniamo h e w separate anziché size per permettere forme non quadrate */ --ol-li-dot-bg: var(--color-white); /* var(--color-white); */ --ol-li-dot-border: 1px solid var(--color-primary); /* 0 = quadrato */ --ol-li-dot-radius: 5rem; /* 0 = quadrato */ --ol-li-number-ff: var(--secondary-ff); /* 0 = quadrato */ --ol-li-number-fs: .75em; /* 0 = quadrato */ --ol-li-number-fw: 700; /* 0 = quadrato */ --ol-li-number-color: 1px solid var(--color-primary); /* 0 = quadrato */ /*------------------------------------*\ +Buttons \*------------------------------------*/ /* Button regular ----- */ /* Dimensioni */ --btn-py: .75em; /* tenerlo in em per avere la proporzionalità rispetto a font-size */ --btn-px: 1.5em; --btn-icon-ratio: 1.5em; --btn-gap: .75em; --btn-mb: 0; --btn-rounded: 4px; /* border-width di default è 2px e non ha variabile, per cambiarlo usare style */ /* Colori */ --btn-bg: var(--color-secondary); --btn-color: var(--color-white); /* --btn-icon-color: var(--color-white); */ /* Sostituito da fill-current */ --btn-border-color: var(--btn-bg); /* di solito uguale a background color per avere effetto pieno */ /* Tipografia */ --btn-ff: var(--secondary-ff); --btn-fs: .875rem; /* Per i button come per le icone usiamo font-size proporzionale */ --btn-fw: 600; --btn-lh: 120%; --btn-ls: -0.01rem; --btn-tt: none; --btn-txtdec: 0 solid transparent; /* Wrapper testo */ --btn-toptitle-ff: var(--primary-ff); --btn-toptitle-font-ratio: .75em; /* va indicato in em e indica quanto è più piccolo/grande del valore medio */ --btn-toptitle-fw: 300; --btn-toptitle-mb: .25em; /* non c'è il font-family del titolo perché si usa quello del button */ --btn-title-font-ratio: 1em; /* va indicato in em e indica quanto è più piccolo/grande del valore medio */ /* non c'è il font weight del titolo perché si usa quello del button */ --btn-subtitle-ff: var(--secondary-ff); --btn-subtitle-font-ratio: .875em; /* va indicato in em e indica quanto è più piccolo/grande del valore medio */ --btn-subtitle-fw: 300; --btn-subtitle-mt: .25em; /* si usa mt perché se non c'è subtitle il title del button resta senza mb */ /* Misc */ --btn-shadow: none; /* CAPIRE COME GESTIRLA: apply? */ /* Definita in _palette-transitions-shadows etc.. --btn-transition: var(--transition-property-all) var(--trans-timing-bezier) var(--duration-normal); */ /* Button hover */ --btn-hov-bg: var(--btn-bg); --btn-hov-color: var(--color-accent); /* --btn-hov-icon-color: var(--btn-icon-color); */ /* Sostituito da fill-current */ --btn-hov-border-color: var(--btn-bg); --btn-hov-shadow: 0 0 0 4px var(--btn-hov-color); --btn-hov-transformation: none;/*scale(1.05) */ --btn-hov-txtdec: 0 solid transparent; /* Isdark Button */ --isdark-btn-bg: var(--color-primary); --isdark-btn-color: var(--color-secondary); /* Tutte le scritte compresi toptitle e subtitle */ /* --isdark-btn-hollow-icon-color: var(--color-white); */ /* Sostituito da fill-current */ --isdark-btn-border-color: var(--isdark-btn-bg); /* Isdark Button hover*/ --isdark-btn-hov-bg: var(--isdark-btn-bg); --isdark-btn-hov-color: var(--color-white); /* Tutte le scritte compresi toptitle e subtitle */ /* --isdark-btn-hollow-icon-color: var(--color-white); */ /* Sostituito da fill-current */ --isdark-btn-hov-border-color: var(--isdark-btn-hov-bg); /* Button Hollow */ --btn-hollow-bg: transparent; --btn-hollow-color: var(--color-secondary); /* Tutte le scritte compresi toptitle e subtitle */ /* --btn-hollow-icon-color: var(--color-black); */ /* Sostituito da fill-current */ --btn-hollow-border-color: var(--color-primary); /* Button Hollow hover*/ --btn-hollow-hov-bg: var(--btn-hollow-bg); --btn-hollow-hov-color: var(--btn-hollow-color); /* --btn-hollow-hover-icon-color: var(--color-white); */ /* Sostituito da fill-current */ --btn-hollow-hov-border-color: var(--btn-hollow-border-color); /* Isdark Button Hollow */ --isdark-btn-hollow-bg: transparent; --isdark-btn-hollow-color: var(--color-white); /* Tutte le scritte compresi toptitle e subtitle */ /* --isdark-btn-hollow-icon-color: var(--color-white); */ /* Sostituito da fill-current */ --isdark-btn-hollow-border-color: var(--color-sanity-gray-800); /* Isdark Button Hollow hover */ --isdark-btn-hollow-hov-bg: var(--color-sanity-gray-900); --isdark-btn-hollow-hov-color: var(--isdark-btn-hollow-color); /* --isdark-btn-hollow-hover-icon-color: var(--color-primary); */ /* Sostituito da fill-current */ --isdark-btn-hollow-hov-border-color: var(--isdark-btn-hollow-border-color); /*------------------------------------*\ +Close Button \*------------------------------------*/ --x-btn-icon: var(--icon-x-primary); --x-btn-size-xs: 2.5rem; /* default 44px come photoswipe */ --x-btn-size-lg: 2.5rem; /* default 44px come photoswipe */ --x-btn-border-radius: 50%; --x-btn-border: none; --x-btn-bg-color: rgba(255,255,255,1); --x-btn-bg-size: 40%; /* in percentuale, definisce quale area del button deve coprire l'icona in bg */ --x-btn-opacity: 1; --x-btn-transition: var(--btn-transition); /* in percentuale, definisce quale area del button deve coprire l'icona in bg */ --x-btn-hov-transform: none; --x-btn-hov-bg-color: rgba(232,232,232,.75); --x-btn-hov-opacity: 1; /*------------------------------------*\ +Overlay + Overlay loader \*------------------------------------*/ /* Tutte le variabili spostate in overlay.css */ /*------------------------------------*\ +Menu \*------------------------------------*/ /* Regole comuni ----- */ --navs-transition: var(--btn-transition); /* Transizione di tutti i bg e loghi di tutte le nav dsk mob aux... */ --menu-itm-fs: 1rem; --menu-itm-p: .75rem .25rem .75rem; /* definisce l'altezza dell'area di interazione delle voci e l'altezza del separatore verticale se presente */ --menu-itm-ff: var(--secondary-ff); --menu-itm-fw: 400; --menu-itm-lh: 1.3 !important; --menu-itm-color: rgba(67, 67, 67, 1); --menu-itm-tt: none; --menu-itm-txtdec: none; /* es. underline solid red - se non si vuole mettere nessun underline in nessun menu va bene impostarlo come none, se ci sarà qualche underline in giro meglio usare underline solid transparent, se no durante le transizioni possono arrivare dei momenti "fantasma" in cui appare underline e poi scompare di nuovo */ /* --menu-itm-bg: transparent; /* diamo per scontato che il bg non hover sia trasparente */ --menu-itm-transition: var(--a-transition); --menu-itm-hov-color: var(--color-secondary); --menu-itm-hov-txtdec: none; /* es. underline solid red */ --menu-itm-hov-bg: transparent; /* bg completo permette di usare anche gradienti */ --menu-itm-cur-fw: 700; --menu-itm-cur-color: var(--islight-interactive-color); --menu-itm-cur-txtdec: var(--menu-itm-hov-txtdec); /* es. underline solid red */ --menu-itm-cur-bg: var(--menu-itm-hov-bg); --menu-subitm-fs: .935em; --menu-subitm-p: var(--menu-itm-p); --menu-subitm-ff: var(--menu-itm-ff); --menu-subitm-fw: var(--menu-itm-fw); --menu-subitm-color: var(--menu-itm-color); --menu-subitm-tt: var(--menu-itm-tt); --menu-subitm-hov-color: var(--menu-itm-hov-color); --menu-subitm-hov-bg: var(--menu-itm-hov-bg); --menu-itm-icon-svg-size-xs: 1.2rem; /* width e height delle icone svg nel menu, per xs e sm */ --menu-itm-icon-p-xs: 0; /* per xs e sm */ --menu-itm-icon-svg-size-lg: 1rem; /* width e height delle icone svg nel menu, per md up */ --menu-itm-icon-p-lg: 1.3em; /* per md up */ /* GAP --menu-itm-icon-gap: .25rem; non si può usare perché andrebbe attribuito al contenitore padre delle icone nel menu, che però non ha classi specifiche perché le icone potrebbero essere ovunque, la cosa migliore per dare un gap è segnarlo direttamente come classe (es. gap-1) dentro il segmento di menu che contiene le icone */ --menu-itm-icon-border-radius: 0; --menu-itm-icon-color: var(--menu-itm-color); --menu-itm-icon-transition: var(--a-transition); --menu-itm-icon-hov-color: var(--menu-dsk-itm-hov-color); --menu-itm-icon-hov-bg: transparent ;/* rgba(255,255,255,.75) /* var(--menu-itm-hov-bg); */ /* Desktop navigation ----- */ --nav-dsk-position: absolute; /* relative absolute fixed */ --nav-dsk-bg: var(--color-white); --nav-dsk-border-b: 1px solid transparent; /* 1px solid rgba(220,220,220,1) */ --nav-dsk-shadow: none; --nav-dsk-bdrop-filter: none; /* blur(12px); /* Usarlo solo per blur. Se attivo richiede un bg del menu che che abbia una trasparenza almeno minima es rgba(255,255,255,.75) */ --nav-dsk-bg-bdrop-filter: var(--nav-dsk-bg); /* rgba(255,255,255,.9); /* sostituisce --nav-dsk-bg in caso sia attivo backdrop filter */ --nav-dsk-scrl-bg: rgba(255,255,255,.75); --nav-dsk-scrl-bdrop-filter: blur(12px); /* blur(12px); /* Usarlo solo per blur. Se attivo richiede un bg del menu che che abbia una trasparenza almeno minima es rgba(255,255,255,.75) */ --nav-dsk-scrl-bg-bdrop-filter: rgba(255,255,255,.95); /* rgba(255,255,255,.9); /* sostituisce --nav-dsk-bg in caso sia attivo backdrop filter */ --nav-dsk-logo-w: 9rem; --nav-dsk-logo-h: 2.5rem; --nav-dsk-logo-p: 1rem 0; --nav-dsk-scrl-logo-w: 6rem; --nav-dsk-scrl-logo-h: 2rem; --nav-dsk-scrl-logo-p: var(--nav-dsk-logo-p); /* Desktop Navigation > Menu Desktop ----- */ --menu-dsk-bg: transparent /* rgba(255,255,255,.75) */; /* Padding voci qui è granulare (diversamente da voce generica --menu-itm-p) così possono essere pescati i valori singoli per controregole e per aggiungere icone con ::before ::after */ --menu-dsk-itm-pt: 1.5rem; --menu-dsk-itm-pr: 2.3rem; /* min(3vw, 2.5rem)*/ --menu-dsk-itm-pb: 1.5rem; --menu-dsk-itm-pl: 2.3rem; /* 1rem */ --menu-dsk-itm-ff: var(--menu-itm-ff); --menu-dsk-itm-fs: clamp(0.875rem, 1vw, 0.93rem); /* var(--menu-itm-fs) */ --menu-dsk-itm-fw: var(--menu-itm-fw); --menu-dsk-itm-lh: var(--menu-itm-lh); --menu-dsk-itm-color: var(--menu-itm-color); --menu-dsk-itm-tt: var(--menu-itm-tt); --menu-dsk-itm-txtdec: var(--menu-itm-txtdec); /* es. underline solid red */ /* --menu-dsk-itm-transition: var(--menu-itm-transition); */ --menu-dsk-itm-hov-color: var(--islight-interactive-color); /* var(--menu-itm-hov-color); */ --menu-dsk-itm-hov-txtdec: var(--menu-itm-hov-txtdec); /* es. underline solid red */ --menu-dsk-itm-hov-bg: transparent; /* var(--menu-itm-hov-bg); */ --menu-dsk-itm-cur-color: var(--menu-itm-cur-color); --menu-dsk-itm-cur-fw: var(--menu-itm-cur-fw); --menu-dsk-itm-cur-txtdec: var(--menu-itm-cur-txtdec); /* es. underline solid red */ --menu-dsk-itm-cur-bg: var(--menu-itm-cur-bg); /* Voci menu dsk 1 liv che hanno figli */ --menu-dsk-itm-hasc-icon: var(--arrow-down); --menu-dsk-itm-hasc-icon-size: 1.3em; /* valore comodo di partenza .75em; */ --menu-dsk-itm-hasc-icon-opacity: 1; --menu-dsk-itm-hasc-icon-rotate: rotate(0deg); /* permette di usare ad es l'icona X come + */ --menu-dsk-itm-hasc-is-on-icon-rotate: rotate(180deg); /* Menu Desktop - Subitems */ /* Riquadro menu di 2-3° livello */ --menu-dsk-l2-ddown-w: 179px; /* --menu-dsk-l2-ddown-p: 0; I submenu NON devono avere padding, deve essere tutta area di interazione delle voci */ --menu-dsk-l2-ddown-border-radius: 0px 8px 8px 8px; --menu-dsk-l2-ddown-bg: var(--color-white); /* Colore di TUTTO il sottomenu*/ --menu-dsk-l2-ddown-shadow: 0px 2px 8px 0px rgba(37, 37, 37, 0.2); --menu-dsk-l2-ddown-y-offset: -.125rem; /* E' il valore con cui si sposta il sottomenu in alto o in basso per sovrapporsi più o meno alla nav con le voci principali */ --menu-dsk-l2-ddown-x-offset: 1rem; /* -1.675rem E' il valore con cui si sposta il sottomenu a sinistra rispetto alla voce main. Se è uguale a pl delle sottovoci tutto sarà allineato e ben leggibile. Negativo per sx, positivo per dx. */ /* Voci del sottomenu 2-3° livello */ --menu-dsk-l2-itm-p: 1em 0; /* var(--menu-itm-p); */ --menu-dsk-l2-itm-ff: var(--primary-ff); /* var(--menu-dsk-itm-ff); */ --menu-dsk-l2-itm-fs: var(--menu-dsk-itm-fs); --menu-dsk-l2-itm-fw:400; --menu-dsk-l2-itm-color: rgba(67, 67, 67, 1); ; /* var(--menu-dsk-itm-color); */ --menu-dsk-l2-itm-tt: none; --menu-dsk-l2-itm-hov-color: var(--color-primary); /*var(--color-black); */ --menu-dsk-l2-itm-hov-bg: none/* var(--color-primary) */; /* Voci del menu main che hanno sottovoci */ /* la posizione dell'icona nelle voci con figli è di default centrata in verticale e allineata destra con right negativo uguale alla sua dimensione */ --menu-dsk-l2-itm-hasc-icon: var(--icon-v-r); --menu-dsk-l2-itm-hasc-icon-size: 1em; --menu-dsk-l2-itm-hasc-icon-opacity: .75; --menu-dsk-l2-itm-hasc-icon-rotate: rotate(0deg); /* tenere comunque rotate 0 se non vuoi nessuna rotazione, perché viene composto dentro un transform più grande */ --menu-dsk-l2-itm-hasc-is-on-icon-rotate: rotate(0deg); /* tenere comunque rotate 0 se non vuoi nessuna rotazione, perché viene composto dentro un transform più grande */ --menu-dsk-l2-itm-hasc-is-on-color: var(--color-abc-darkest-gray); --menu-dsk-l2-itm-hasc-is-on-bg: var(--color-secondary); /* Riquadro menu dal 3° livello in poi */ --menu-dsk-l3-ddown-t: .25rem; /* Top del menu liv3 rispetto al top della voce madre */ --menu-dsk-l3-ddown-l: calc(100% -.5rem); /* calc(100% -.5rem) Left del menu liv3 rispetto al left della voce madre */ /* Desktop navigation > Menu Aux ----- */ /* Variabili e css in nav-02-dsk-aux.css */ /* Mobile navigation ----- */ /* Qui mettiamo solo le variabili della barra, senza voci menu che vengono definite dentro il menu Off Canvas Mobile */ --nav-mob-position: sticky; /* relative absolute fixed */ --nav-mob-bg: rgba(255, 255, 255, 1); --nav-mob-border-b: var(--nav-dsk-border-b); --nav-mob-shadow: none; --nav-mob-bdrop-filter: none; /* blur(8px) Usarlo solo per blur. Se attivo richiede un bg del menu che che abbia una trasparenza almeno minima es rgba(255,255,255,.75) */ --nav-mob-bg-bdrop-filter: var(--layer-filter-bg); /* var(--nav-dsk-bg); /* sostituisce --nav-mob-bg in caso sia attivo backdrop filter */ --nav-mob-scrl-bg: var(--body-bg); --nav-mob-scrl-bdrop-filter: none; /* blur(12px); /* Usarlo solo per blur. Se attivo richiede un bg del menu che che abbia una trasparenza almeno minima es rgba(255,255,255,.75) */ --nav-mob-scrl-bg-bdrop-filter: var(--nav-mob-scrl-bg); /* sostituisce --nav-mob-bg in caso sia attivo backdrop filter */ --nav-mob-logo-w: 7rem; --nav-mob-logo-h: 3rem; --nav-mob-logo-p: 1rem 0; --nav-mob-scrl-logo-w: 5rem; --nav-mob-scrl-logo-h: 2.5rem; --nav-mob-scrl-logo-p: .5rem 0; /* Hamburger */ /* Questi parametri valgono sia per hamburger in desktop sia in mobile. NOTA Hamburger ha regole su area di interazione diverse da tutte le altre icone nel menu (es. cart, user etc...). Essendo regole separate, è possibile farlo identico alle altre icone, ma anche molto più grande o diverso. */ --hamburger-mob-p: 0 0 0 0; /* Crea spazio (come fosse un margin ma qui serve il padding) tra l'area dell'hamburger e le altre aree o elementi nel menu */ --hamburger-dsk-p: 0 .5rem 0 .5rem; /* Crea spazio tra l'area dell'hamburger e gli altri elementi nel menu */ --hamburger-area-size: 2rem; /* Area di interazione hamburger, sta dentro menu-item-icon-hamburger si applica su ham-bars-container, può essere molto più grande della dimensione effettiva dell'hamburger */ --hamburger-area-border-radius: 5rem; --hamburger-area-bg: transparent; --hamburger-area-transition: var(--btn-transition); --hamburger-area-hov-bg: transparent; /* rgba(245,245,245,1)*/ --hamburger-area-hov-transformation: none; --hamburger-is-on-area-bg: transparent; /* rgba(245,245,245,1) Permette di cambiare colore ad area hamburger quando è aperto */ --ham-bars-w-xs: 1.85rem; --ham-bars-h-xs: .125rem; /* .125rem; */ --ham-bars-distance-xs: .5rem; --ham-bars-w-lg: 1.85rem; --ham-bars-h-lg: .125rem; /* .125rem; */ --ham-bars-distance-lg: .5rem; --ham-bars-border-radius: 0; --ham-bars-bg: var(--color-primary); --ham-bars-transition: var(--transition-property-all) ease-out var(--duration-fast); /* Off Canvas Mobile ----- */ /* Area esterna di tutto il menu Off Canvas Mobile */ --nav-offc-mob-w: 100%; /* clamp(320px, 80%, 480px); */ --nav-offc-mob-h: 100vh; /* --nav-mob-h è l'altezza della nav calcolata in js e inserita nel DOM */ --nav-offc-mob-l: auto; /* Left per definire dove si ancora il menu */ --nav-offc-mob-r: 0; /* Left per definire dove si ancora il menu */ --nav-offc-mob-p: 1rem 0 3rem; --nav-offc-mob-bg: var(--color-white); --nav-offc-mob-shadow: none; --nav-offc-mob-transition: var(--a-transition); /* Voci Menu dentro */ --menu-offc-mob-item-p: .7em 1.1em; /* var(--menu-itm-p); */ --menu-offc-mob-item-ff: var(--menu-itm-ff); --menu-offc-mob-item-fs: 1rem; /* var(--menu-itm-fs); */ --menu-offc-mob-item-fw: 700; /* var(--menu-itm-fw); */ --menu-offc-mob-item-lh: var(--menu-itm-lh); --menu-offc-mob-item-color: var(--menu-itm-color); --menu-offc-mob-item-tt: var(--menu-itm-tt); --menu-offc-mob-item-txtdec: none; /* es. underline solid red */ --menu-offc-mob-item-border-b: none; /* es. Border-bttom solo per voci di primo livello */ --menu-offc-mob-item-hov-color: var(--color-primary); /* var(--menu-itm-hov-color);*/ --menu-offc-mob-item-hov-txtdec: none; /* var(--menu-itm-hov-txtdec);*/ /* es. underline solid red */ --menu-offc-mob-item-hov-bg: var(--color-abc-clear-gray); --menu-offc-mob-item-current-color: var(--menu-itm-cur-color); --menu-offc-mob-item-current-fw: var(--menu-itm-cur-fw); --menu-offc-mob-item-current-txtdec: none; /* var(--menu-itm-cur-txtdec); */ /* es. underline solid red */ --menu-offc-mob-item-current-bg: var(--menu-itm-cur-bg-color); /* Off Canvas Mobile > Menu Subitems */ --menu-offc-mob-has-subitem-icon: var(--icon-v-u); --menu-offc-mob-has-subitem-icon-opacity: .75; --menu-offc-mob-has-subitem-icon-rotate: rotate(0deg); /* permette di usare ad es l'icona X come + */ --menu-offc-mob-has-subitem-is-on-icon-rotate: rotate(180deg); --menu-offc-mob-subitem-menu-dropdown-p: 0 0 0 1rem; --menu-offc-mob-subitem-menu-dropdown-bg: var(--color-abc-clear-gray); --menu-offc-mob-subitem-p: var(--menu-offc-mob-item-p); /* var(--menu-itm-p); */ --menu-offc-mob-subitem-ff: var(--secondary-ff); /* var(--menu-offc-mob-item-ff); */ --menu-offc-mob-subitem-fs: .875em; /* var(--menu-offc-mob-item-fs); */ --menu-offc-mob-subitem-fw: 400; --menu-offc-mob-subitem-color: var(--color-abc-light-gray); /* var(--menu-offc-mob-item-color); */ --menu-offc-mob-subitem-tt: none; --menu-offc-mob-subitem-hov-color: var(--color-black); --menu-offc-mob-subitem-hov-bg: transparent; /* Off Canvas Desktop ----- */ /* Variabili e css in nav-03-offc-dsk.css */ /* Menu H V ----- */ /* Questo menu si crea aggiungendo a ul una classe menu-v oppure menu-h */ --menu-hv-ff: var(--secondary-ff); /* font-size non si mette lo si associa a ul con classi fs-XY */ --menu-hv-fw: 700; --menu-hv-lh: 130%; /* Text-transform: non serve metterlo lo si aggiunge come classe all'ul se serve */ --menu-hv-color: var(--color-white); --menu-hv-txtdec: underline transparent; /* es. underline solid red */ /* --menu-hv-margin-top: Non si indica perché deve essere sempre 0; */ --menu-hv-transition: var(--a-transition); --menu-hv-hov-color: var(--color-white); --menu-hv-hov-txtdec: underline var(--color-white); /* es. underline solid red */ --menu-hv-gap-y: 2em; --menu-hv-gap-x: 4em; /* Distanza orizzontale totale tra le voci (solo menu orizzontale) /* Menu standard Footer ----- */ /* Identico allo standard ma è quello che appare dentro il footer */ --menu-hv-foot-ff: var(--primary-ff); --menu-hv-foot-fw: 700; --menu-hv-foot-lh: 110%; --menu-hv-foot-fs: 0; /* Text-transform: non serve metterlo lo si aggiunge come classe all'ul se serve */ --menu-hv-foot-color: var(--color-white); --menu-hv-foot-txtdec: underline transparent; /* es. underline solid red */ /* --menu-hv-foot-margin-top: Non si indica perché deve essere sempre 0; */ --menu-hv-foot-mb: 1em; --menu-hv-foot-transition: var(--a-transition); --menu-hv-foot-hov-color: var(---menu-hv-foot-color); --menu-hv-foot-hov-txtdec: underline; /* es. underline solid red */ /*------------------------------------*\ +Sticky \*------------------------------------*/ /* --sticky-top: 1px; /* Diamo possibilità di scegliere a quali parametri agganciare il top */ --sticky-offset: 1rem; /* Corregge il top di tutti gli elementi Sticky-wrap nel sito. Di default lo sticky wrap si blocca all'altezza della nav calcolata con --nav-current-h */ /*------------------------------------*\ +Layers \*------------------------------------*/ /* Qui si definiscono globalmente i valori del layer filter che poi vengono applicati su Hero, Card, Photobutton, come avviene per le palette. */ --layer-visual-bg: var(--color-isi-gray-300); /* Background di default che ha il layer visual quando non è ancora caricato nessun asset */ --layer-filter-bg: linear-gradient(78.74deg, #F0F0F0 1.68%, rgba(255, 255, 255, 0) 105.8%); ; /* linear-gradient(20deg, rgba(0,0,0,.55), transparent 65%); */ --layer-filter-opacity: .9; --layer-filter-mixbm: normal; /*------------------------------------*\ +Hero \*------------------------------------*/ /* C'è un sola categoria di _hero che viene data al _layer wrap. Dopo dicheé ci sono tre possibili altezze (sempre espresse come min-height). - hero-short - hero-normal - hero-tall Se uso solo la classe _hero di deafult prende altezza normale, se ho bisogno di un'alatra altezza affinahcerò le classi min-h-hero-short min-h-hero-tall */ /* Hero short min heights */ --hero-short-xs-min-h: 80vw; --hero-short-sm-min-h: 80vw; --hero-short-md-min-h: 35vw; --hero-short-lg-min-h: 35vw; --hero-short-xl-min-h: 35vw; --hero-short-xxl-min-h: 35vw; /* Hero normal min heights */ --hero-normal-xs-min-h: 65vh; --hero-normal-sm-min-h: 65vh; --hero-normal-md-min-h: 35vw; --hero-normal-lg-min-h: 35vw; --hero-normal-xl-min-h: 35vw; --hero-normal-xxl-min-h: 35vw; /* Hero Tall min heights */ --hero-tall-xs-min-h: 60vh; --hero-tall-sm-min-h: 60vh; --hero-tall-md-min-h: 65vh; --hero-tall-lg-min-h: 40vw; --hero-tall-xl-min-h: 40vw; /* 42.5vw; */ --hero-tall-xxl-min-h: 40vw; /* 40vw; */ /*------------------------------------*\ +Card \*------------------------------------*/ --card-border-radius: 0; --card-bg: #ffffff; --card-w-default: 16rem; /* Da fare come Photobutton, ancora tutti da assegnare */ --card-figure-min-h: 600px; --card-filter-bg: var(--layer-filter-bg); --card-filter-opacity: 1; --card-filter-mixbm: var(--layer-filter-mixbm); /*------------------------------------*\ +Photobutton \*------------------------------------*/ /* Tutte le variabili spostate in cima a file photobuttons.css */ /*------------------------------------*\ +Modals \*------------------------------------*/ /* Tutte le variabili spostate in cima a file modals-overlays-tooltips.css */ /*------------------------------------*\ +Swiper \*------------------------------------*/ /* Lo swiper gestisce qualsiasi elenco di oggetti che debba essere trascinabile e sfogliabile: gallery di immagini, liste di card, slides di un hero... Ogni volta che c'è più di un oggetto visualizza i pulsanti prev next e i bullet, che sono definiti qui come aspetto. I pulsanti prev-next sono riscritti per avere area di interazione e bg con le icone coordinate. Le unità di misura di grandezza pulsanti in linea di massima son sempre in rem, ma potrebbero anche essere in % (cioé pulsanti grandi in percentuale a quanto è grande es. div della gallery).e Queste variabili finiscono nel file Swiper-Bundle.css */ --swp-primary-color: red; /* Imposta il colore principale di bullet e altri dettagli, usato dalla versione 8 come --swiper-theme-color, si trova in swiper-bundle.css ed è dichiarato nella root */ --swp-p: 1rem; /* definisce un padding main che tiene i pulsanti lontani dal bordo */ --swp-controls-gap: 1rem; /* definisce la distanza tra frecce e pagination quando sono tutte in unico box */ /* swp gallery btn = pulsanti nello swiper quando è nel corpo del sito. es. gallerie, elenchi card etc...) */ --swp-gallery-btn-size: 2rem; /* default 44px come photoswipe */ --swp-btn-size: var(--swp-gallery-btn-size); --swp-gallery-btn-gap: .5rem; /* ha senso solo in caso di prev next affiancati */ --swp-btn-gap: var(--swp-gallery-btn-gap); /* swp hero btn = pulsanti nello swiper quando è un hero, che magari delle volte richiede dimensioni/spazi maggiori del normale */ --swp-hero-btn-size: 2.75rem; /* default 44px come photoswipe */ --swp-hero-btn-gap: .5rem; /* ha senso solo in caso di prev next affiancati */ --swp-btn-border-radius: 0; --swp-btn-border: 1px solid rgba(67, 67, 67, 1); --swp-btn-bg-color: transparent; /* rgba(255,255,255,.5); */ --swp-btn-bg-size: 60%; /* in percentuale, definisce quale area del button deve coprire l'icona in bg */ --swp-btn-opacity: 1; --swp-btn-transition: var(--btn-transition); /* in percentuale, definisce quale area del button deve coprire l'icona in bg */ --swp-btn-hov-transform: none; --swp-btn-hov-bg-color: rgb(189, 189, 189); /* rgba(248,248,248,.75); */ --swp-btn-hov-opacity: .85; --swp-btn-disabled-opacity: .2; --swp-arrow-icon: var(--icon-arrow-r); --swp-pag-w: 8rem; /* impone larghezza a pagination dynamic */ --swp-pag-h: 1.5rem; /* impone larghezza a pagination dynamic */ --swp-blt-size: .75rem; --swp-blt-gap: .375rem; --swp-blt-border-radius: 50%; --swp-blt-border: 2px solid var(--color-black); --swp-blt-bg-color: transparent; --swp-blt-opacity: 1; --swp-blt-current-size: .75rem; --swp-blt-current-border: 2px solid #444; --swp-blt-current-bg-color: var(--color-primary); --swp-blt-current-opacity: 1; /*------------------------------------*\ +Photoswipe \*------------------------------------*/ /* Queste variabili finiscono nei file photoswipe e photoswipe-default-skin */ /* Lightbox e Pulsanti ------ */ --phswp-bg: rgba(255,255,255,.95); /* Colore del background del lightbox. Per avere un background trasparente impostare un rgba trasparente perché poi opacità è sempre 1 */ --phswp-bg-transition: var(--transition-property-opacity) var(--trans-timing-bezier) var(--duration-slow); --phswp-top-bar-bg-color: transparent; /* Colore topbar del lightbox. Accetta solo colori per il bg */ --phswp-top-bar-p: .25rem; --phswp-btn-size: 2.75rem; /* default 44px, vale per tutti i comandi di photoswipe */ --phswp-btn-gap: .5rem; /* funziona tramite il margin-left perché sono tutti float */ --phswp-btn-border-radius: 50%; --phswp-btn-border: none; --phswp-btn-bg-color: rgba(255,255,255,.5); --phswp-btn-bg-size: 40%; /* in percentuale, definisce quale area del button deve coprire l'icona in bg */ --phswp-btn-opacity: .5; --phswp-btn-transition: var(--btn-transition); --phswp-btn-hov-transform: none; --phswp-btn-hov-bg-color: rgba(248,248,248,.75); --phswp-btn-hov-opacity: 1; --phswp-close-icon: var(--icon-x); --phswp-share-icon: var(--icon-share); --phswp-fullscreen-icon: var(--icon-fullscreen); --phswp-zoom-in-icon: var(--icon-zoom-in); --phswp-zoom-out-icon: var(--icon-zoom-out); /* Frecce in modale ------ */ --phswp-arrow-size: 3rem; --phswp-arrow-bg-size: 60%; --phswp-arrow-bg-color: rgba(255,255,255,.5); --phswp-arrow-opacity: 1; --phswp-arrow-transition: var(--btn-transition); --phswp-arrow-hov-transform: translateX(8px); /* basta una sola transformation per entrambe perché la sinistra è specchiata */ --phswp-arrow-hov-bg-color: rgba(248,248,248,.75); --phswp-btn-hov-opacity: var(--phswp-btn-hov-opacity); --phswp-arrow-icon: var(--icon-v-r); /* Cursori ------ */ /* I cursori possono essere png oppure svg codificate in base64 con attributo width e height (max 128px) se no non vengono accettati */ --phswp-open-lightbox-cursor: var(--icon-zoom-in); /* Cursore che appare sopra l'immagine prima di aprire il lightbox */ --phswp-zoom-allowed-cursor: var(--icon-zoom-in); /* Cursore che appare sopra l'immagine aperta per fare zoom in */ --phswp-zoomed-in-cursor: var(--icon-arrows); /* Cursore che appare sopra l'immagine zoomata per fare pan */ --phswp-dragging-cursor: var(--icon-arrows); /* Cursore che appare qunado fai drag */ --phswp-x-cursor: var(--icon-x); /* Cursore che appare qunado sei nell'area che chiude il lightbox */ /*------------------------------------*\ +Forms \*------------------------------------*/ /* Colore con cui fare il tema degli input: NON è il colore del testo, è di solito il color primary con cui si fanno i bordi, i focus etc... */ --input-primary-color: var(--islight-interactive-color); /* Permette di definire un colore diverso dal primary */ --input-h: 1.5em; /* equivalente di 36px su base 16 */ /* 2.5em è dimensione ideale = font-size + padding sopra e sotto +*/ --input-p: 1.3em; /* serve per centratura in verticale rispetto al campo. spesso un padding top maggiore di quello bottom aiuta a centrare un po' meglio la scritta, che viene centrata rispetto alla baseline e non al sotto delle lettere tipo g,p, q etc.- */ --input-border: 1px solid var(--color-apenet-gray-100); --input-border-radius: 0; --input-bg: var(--color-white); --input-shadow: none; --input-ff: var(--primary-ff); --input-fs: 1rem; /* per iOS <15 deve essere minimo 16px se no fa zoom */ --input-fw: 400; --input-color: var(--color-black); --input-lh: 110%; --input-ls: 0; /* inherit; */ --input-transition: var(--a-transition); --input-hov-color: var(--body-color); --input-hov-border: 1px solid var(--input-primary-color); --input-hov-bg: #fafafa; --input-hov-shadow: 0 0 0 1px var(--input-primary-color); --input-focus-color: var(--body-color); --input-focus-border: 1px solid transparent; --input-focus-bg: #fafafa; --input-focus-shadow: 0 0 0 1px var(--islight-color-soft); --textarea-min-h: 18.125rem; --input-gap: 1em; /* Viene applicato un po' a tutti gli elementi di CF7 e Hubspot per dare un margin-bottom agli elementi e averli tutti separati nello stesso modo senza la necessità di classi aggiuntive */ /* Label input */ /* Sono tutti i testi/label che appaiono sopra gli input. In CF7 li formattiamo dentro il form direttamente con le classi, in Woocommerce sono le label */ --input-label-fs: .675em; /* questo valore se diverso da 1 influisce sui valori del padding sotto */ --input-label-p: 0 1.33em .5em; /* Mantenere lo stesso padding left dell'input. Per farlo si fa il valore del pl desiderato, diviso il font-size del tip. es. se voglio 1em di padding left con font-size .75em devo scrivere 1.33em. */ --input-label-color: var(--body-color); /* colore del bordo dell'input e del messaggio errore */ /* Messaggi di Spiegazione */ /* Sono tutti i messaggi che stanno sotto un input come nota testuale ma che non sono messaggi di errore. es. le note ai campi che appaiono nei form di WooCommerce */ --input-txt-bottom-fs: .75em; /* questo valore se diverso da 1 influisce sui valori del padding sotto */ --input-txt-bottom-p: .5em 1.33em 0; /* Mantenere lo stesso padding left dell'input. Per farlo si fa il valore del pl desiderato diviso il font-size del tip. es. se voglio 1em di padding left con font-size .75em devo scrivere 1.33em */ --input-txt-bottom-color: var(--body-color); /* colore del bordo dell'input e del messaggio errore */ /* Messaggi di Errore */ /* Devono essere applicati come regole a CF7 e anche a hubspot o qualsiasi sistema core che usiamo */ --input-error-tip-fs: .75em; /* questo valore se diverso da 1 influisce sui valori del padding sotto */ --input-error-tip-p: .5em 1.33em 0; /* Mantenere lo stesso padding left dell'input. Per farlo si fa il valore del pl desiderato diviso il font-size del tip. es. se voglio 1em di padding left con font-size .75em devo scrivere 1.33em */ --input-error-tip-color: var(--color-alert); /* colore del bordo dell'input e del messaggio errore */ /* Checkboxes */ /* I checkboxes possono essere fatti sia proporzionali al font (tutte dimensioni in em) sia a dimensioni fisse indipendentemente da tipografia (tutte dimensioni in rem) Le prime misure: padding-y, padding-x, checkbox-size, margin-right, devono avere stessa unità di misura In linea di massima - con categorie tutte allo stesso livello, meglio em - con categorie madri e figlie, e font-size diversi tra madri e figlie, meglio rem */ /* --checkbox-mb: 0; // usato margin-bottom e non ad esempio padding perché è già definito così in facet e perché il padding crea problemi di posizionamento in absolute con i checkbox --checkbox-p-y: 0; // Probabilmente da eliminare --checkbox-p-x: 0; 0; // Probabilmente da eliminare */ --checkbox-checkbox-size: 1em; /* Se usato in em dipende da font-size, se in rem sempre uguale */ --checkbox-checkbox-margin-right: .5em; /* Deve avere stessa unità di misura di size */ --checkbox-checkbox-border-radius: 0rem; --checkbox-checkbox-box-shadow: none; --checkbox-fs: .875em; /* Dimensione default del testo che sta vicino al checkbox, da tenere in em salvo rari casi */ /* Placeholder */ --placeholder-fs: 1rem; --placeholder-ff: var(--primary-ff); --placeholder-color: rgba(67, 67, 67, 1); } } /*------------------------------------*\ UI \*------------------------------------*/ /* Button --------------- */ .button { border-width: 1px; } .button.hollow:hover { box-shadow: 0 0 0 4px var(--color-primary-300); }