/**/ /**/ /**/ /* *************** Disegnato ed ingegnerizzato da BASSANINI 1926 SRL UNIPERSONALE *************** */ /* ******************** Foglio di Stile rel. 1.0 - Nome in codice TAMAGOTCHI ******************** */ /* ******************* Copyright 1926/2026 -- Tutti i diritti sono riservati. ******************* */ /**/ /**/ /**/ /* -- TEMPLATE STILE -- */ /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ /**/ /**/ /**/ /* *********************************************************************************************** */ /* ************************** CONFIGURAZIONI GLOBALI E VARIABILI (root) ************************** */ /* *********************************************************************************************** */ /**/ :root { /* -- COSTANTI DIMENSIONI PRINCIPALI -- */ --larghezza-L: 1280px; --larghezza-M: 1050px; --larghezza-S: 900px; --larghezza-XS: 700px; --larghezza-XXS: 100%; --larghezza-XXXS: 100%; --larghezza-tamagotchi: 300px; /* -- INIZIALIZZAZIONE MOBILE-FIRST (Tamagotchi base) -- */ --larghezza: var(--larghezza-XXXS); /* -- COSTANTI AGIO PAGINA -- */ --agio-pagina-L: 4rem; --agio-pagina-M: 4rem; --agio-pagina-S: 4rem; --agio-pagina-XS: 4rem; --agio-pagina-XXS: 0; --agio-pagina-XXXS: 0; /* -- INIZIALIZZAZIONE MOBILE-FIRST (Tamagotchi base) -- */ --agio-pagina: var(--agio-pagina-XXXS); /* -- COSTANTI MARGINI MENU -- */ --margine-menu-L: 80px; --margine-menu-M: 70px; --margine-menu-S: 60px; --margine-menu-XS: 60px; --margine-menu-XXS: 50px; --margine-menu-XXXS: 50px; /* -- INIZIALIZZAZIONE MOBILE-FIRST (Tamagotchi base) -- */ --margine-menu: var(--margine-menu-XXXS); /* -- COSTANTI RAGGI DI CURVATURA PAGINA -- */ --border-radius-pagina-L: 4rem; --border-radius-pagina-M: 4rem; --border-radius-pagina-S: 4rem; --border-radius-pagina-XS: 4rem; --border-radius-pagina-XXS: 0; --border-radius-pagina-XXXS: 0; /* -- INIZIALIZZAZIONE MOBILE-FIRST (Tamagotchi base) -- */ --border-radius-pagina: var(--border-radius-pagina-XXXS); /* -- COSTANTI CELLE PIEDE -- */ --width-cella-piede-L: 240px; --width-cella-piede-M: 220px; --width-cella-piede-S: 195px; --width-cella-piede-XS: 175px; --width-cella-piede-XXS: 175px; --width-cella-piede-XXXS: 175px; /* -- INIZIALIZZAZIONE MOBILE-FIRST (Tamagotchi base) -- */ --width-cella-piede: var(--width-cella-piede-XXXS); /* -- MARGINI PAGINA -- */ --margine-pagina-L: 4rem auto 4rem auto; --margine-pagina-M: 4rem auto 4rem auto; --margine-pagina-S: 4rem auto 4rem auto; --margine-pagina-XS: 4rem auto 4rem auto; --margine-pagina-XXS: 4rem 0 4rem 0; --margine-pagina-XXXS: 4rem 0 4rem 0; /* -- INIZIALIZZAZIONE MOBILE-FIRST (Tamagotchi base) -- */ --margine-pagina: var(--margine-pagina-XXXS); /* -- PADDING PAGINA -- */ --padding-pagina-L: 2.5rem 2.5rem 2.5rem 2.5rem; --padding-pagina-M: 2.5rem 2rem 2.5rem 2rem; --padding-pagina-S: 2.5rem 1.5rem 2.5rem 1.5rem; --padding-pagina-XS: 2.5rem 1rem 2.5rem 1rem; --padding-pagina-XXS: 2.5rem 0.5rem 2.5rem 0.5rem; --padding-pagina-XXXS: 2.5rem 0.5rem 2.5rem 0.5rem; /* -- INIZIALIZZAZIONE MOBILE-FIRST (Tamagotchi base) -- */ --padding-pagina: var(--padding-pagina-XXXS); /* -- COSTANTI DIMENSIONI FONT -- */ --dimensione-font-L: 22px; --dimensione-font-M: 20px; --dimensione-font-S: 18px; --dimensione-font-XS: 16px; --dimensione-font-XXS: 16px; --dimensione-font-XXXS: 16px; /* -- INIZIALIZZAZIONE MOBILE-FIRST (Tamagotchi base) -- */ --dimensione-font: var(--dimensione-font-XXXS); /* -- ROTAZIONI -- */ --rotazione-positiva: 3deg; --rotazione-negativa: -3deg; /* -- RAGGI -- */ --raggio-curvatura-btn: 6rem; /* -- PALETTE COLORI PRINCIPALE -- */ --colore-bianco-10: rgba(255, 255, 255, 0.10); --colore-bianco-15: rgba(255, 255, 255, 0.15); --colore-bianco-20: rgba(255, 255, 255, 0.20); --colore-bianco-40: rgba(255, 255, 255, 0.40); --colore-bianco-80: rgba(255, 255, 255, 0.80); --colore-bianco-100: rgba(255, 255, 255, 1); --colore-0-100: rgba(241, 241, 241, 1); --colore-1-100: rgba(229, 229, 229, 1); --colore-2-100: rgba(225, 225, 225, 1); --colore-3-100: rgba(221, 221, 221, 1); --colore-4-100: rgba(200, 200, 200, 1); --colore-5-100: rgba(160, 160, 160, 1); --colore-6-100: rgba(68, 68, 68, 1); --colore-nero-00: rgba(0, 0, 0, 0); --colore-nero-10: rgba(0, 0, 0, 0.10); --colore-nero-15: rgba(0, 0, 0, 0.15); --colore-nero-25: rgba(0, 0, 0, 0.25); --colore-nero-35: rgba(0, 0, 0, 0.35); --colore-nero-45: rgba(0, 0, 0, 0.45); --colore-nero-70: rgba(0, 0, 0, 0.70); --colore-nero-100: rgba(0, 0, 0, 1); --colore-verde-100: rgba(25, 135, 84, 1); --colore-blue-15: rgba(13, 110, 253, 0.15); --colore-blue-45: rgba(13, 110, 253, 0.45); --colore-blue-100: rgba(13, 110, 253, 1); --colore-rosso-05: rgba(153, 0, 0, 0.05); --colore-rosso-15: rgba(153, 0, 0, 0.15); --colore-rosso-25: rgba(153, 0, 0, 0.25); --colore-rosso-45: rgba(153, 0, 0, 0.45); --colore-rosso-50: rgba(153, 0, 0, 0.50); --colore-rosso-100: rgba(153, 0, 0, 1); } /* *********************************************************************************************** */ /* ************************ IMPOSTAZIONI BASE (MOBILE-FIRST / TAMAGOTCHI) ************************ */ /* *********************************************************************************************** */ .container, .row { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ padding-left: 8px !important; padding-right: 8px !important; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } .logo-svg-piede { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ max-width: 140px !important; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } .btn-group a span, .btn-group .btn span, .btn span { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ display: none; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* *********************************************************************************************** */ /* *************************** MEDIA QUERIES DI SISTEMA (PROGRESSIONE) *************************** */ /* *********************************************************************************************** */ /**/ /* 1. BASELINE (< 320px): Gestita in cima al file nel root (Utilizza le variabili XXXS) */ /**/ /* 2. PICCOLI SMARTPHONE (XXS) */ @media (min-width: 320px) { :root { --larghezza: var(--larghezza-XXS); --dimensione-font: var(--dimensione-font-XXS); --margine-menu: var(--margine-menu-XXS); --margine-pagina: var(--margine-pagina-XXS); --padding-pagina: var(--padding-pagina-XXS); --border-radius-pagina: var(--border-radius-pagina-XXS); --width-cella-piede: var(--width-cella-piede-XXS); --agio-pagina: var(--agio-pagina-XXS); } .container, .row { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ padding-left: calc(var(--bs-gutter-x) * .5) !important; padding-right: calc(var(--bs-gutter-x) * .5) !important; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } .logo-svg-piede { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ max-width: 180px !important; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } } /* 3. GRANDI SMARTPHONE / LANDSCAPE (XS) */ @media (min-width: 576px) { :root { --larghezza: var(--larghezza-XS); --dimensione-font: var(--dimensione-font-XS); --margine-menu: var(--margine-menu-XS); --margine-pagina: var(--margine-pagina-XS); --padding-pagina: var(--padding-pagina-XS); --border-radius-pagina: var(--border-radius-pagina-XS); --width-cella-piede: var(--width-cella-piede-XS); --agio-pagina: var(--agio-pagina-XS); } } /* 4. TABLET (S) */ @media (min-width: 768px) { :root { --larghezza: var(--larghezza-S); --dimensione-font: var(--dimensione-font-S); --margine-menu: var(--margine-menu-S); --margine-pagina: var(--margine-pagina-S); --padding-pagina: var(--padding-pagina-S); --border-radius-pagina: var(--border-radius-pagina-S); --width-cella-piede: var(--width-cella-piede-S); --agio-pagina: var(--agio-pagina-S); } } /* 5. DESKTOP (M) */ @media (min-width: 992px) { :root { --larghezza: var(--larghezza-M); --dimensione-font: var(--dimensione-font-M); --margine-menu: var(--margine-menu-M); --margine-pagina: var(--margine-pagina-M); --padding-pagina: var(--padding-pagina-M); --border-radius-pagina: var(--border-radius-pagina-M); --width-cella-piede: var(--width-cella-piede-M); --agio-pagina: var(--agio-pagina-M); } } /* COLLASSO MENU */ @media (min-width: 1020px) { .btn-group a span, .btn-group .btn span, .btn span { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ display: inline-block; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } } /* 6. SCHERMI GRANDI (L) */ @media (min-width: 1200px) { :root { --larghezza: var(--larghezza-L); --dimensione-font: var(--dimensione-font-L); --margine-menu: var(--margine-menu-L); --margine-pagina: var(--margine-pagina-L); --padding-pagina: var(--padding-pagina-L); --border-radius-pagina: var(--border-radius-pagina-L); --width-cella-piede: var(--width-cella-piede-L) } } /* -- FIX GLOBALI E SENSORI -- */ @media (hover: none) and (pointer: coarse) { .pagina { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background-attachment: scroll; background-size: auto, 100% 100%; /* 5. INTERAZIONI E TRASFORMAZIONI */ } } /* *********************************************************************************************** */ /* ********************* TEMA SCURO (GESTITO A PROGETTO IN MODALITÀ MANUALE) ********************* */ /* *********************************************************************************************** */ [data-theme="dark"] #icona-sole { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-bianco-20); /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } [data-theme="dark"] #icona-luna { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-bianco-80); /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } html[data-theme="dark"] { /* Sovrascrittura palette colori */ --colore-0-100: rgba(16, 16, 16, 1); --colore-1-100: rgba(48, 48, 48, 1); --colore-2-100: rgba(80, 80, 80, 1); --colore-3-20: rgba(112, 112, 112, 0.20); --colore-3-100: rgba(112, 112, 112, 1); --colore-4-100: rgba(144, 144, 144, 1); --colore-5-100: rgba(176, 176, 176, 1); --colore-6-100: rgba(208, 208, 208, 1); /* Centralizzo per comodità... */ --colore-testo: var(--colore-6-100); } html[data-theme="dark"] body, html[data-theme="dark"] form, html[data-theme="dark"] div { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-testo); /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } html[data-theme="dark"] body { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background-color: var(--colore-6-100) !important; background-image: url('../images/white-noise.png'), radial-gradient(circle at center, var(--colore-nero-45), var(--colore-nero-100)) !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } html[data-theme="dark"] .pagina { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background-image: url('../images/white-noise.png'), radial-gradient(circle at center, var(--colore-nero-100), var(--colore-nero-45)) !important; border: 3px solid var(--colore-1-100) !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } html[data-theme="dark"] main ul b, html[data-theme="dark"] main ul strong, html[data-theme="dark"] main p b, html[data-theme="dark"] main p strong { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-6-100); /* 4. ESTETICA */ text-shadow: 0 0 5px var(--colore-3-100); /* 5. INTERAZIONI E TRASFORMAZIONI */ } html[data-theme="dark"] main li i, html[data-theme="dark"] main li em, html[data-theme="dark"] main p i, html[data-theme="dark"] main p em { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-6-100); font-style: italic; letter-spacing: 0.5px; /* 4. ESTETICA */ text-shadow: 0 0 5px var(--colore-3-100); /* 5. INTERAZIONI E TRASFORMAZIONI */ } html[data-theme="dark"] main hr { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background: linear-gradient(90deg, transparent 0 5%, var(--colore-bianco-15) 25% 75%, transparent 95% 100% ) !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* BASE BOTTONI E MENU DARK: Vetro scuro istituzionale */ html[data-theme="dark"] .navigazione .btn-group .btn, html[data-theme="dark"] .navigazione .dropdown-menu { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background-color: var(--colore-bianco-10) !important; border: 1px solid var(--colore-bianco-15) !important; box-shadow: inset 0 1px 0 var(--colore-bianco-10), 0 4px 6px var(--colore-nero-45) !important; color: var(--colore-6-100) !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } html[data-theme="dark"] .navigazione .btn-group .btn:hover, html[data-theme="dark"] .navigazione .btn-group .btn.active { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background-color: var(--colore-rosso-45) !important; border-color: var(--colore-rosso-100) !important; color: var(--colore-bianco-100) !important; box-shadow: 0 0 35px var(--colore-rosso-50), inset 0 0 15px var(--colore-rosso-45) !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* HOVER DROPDOWN ITEM DARK */ html[data-theme="dark"] .navigazione .dropdown-item:hover { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-bianco-100) !important; /* 4. ESTETICA */ background-color: var(--colore-rosso-45) !important; box-shadow: 0 0 15px var(--colore-rosso-25) !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } html[data-theme="dark"] .piede hr { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background: linear-gradient(90deg, transparent 0 5%, var(--colore-bianco-15) 25% 75%, transparent 95% 100% ) !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } html[data-theme="dark"] .card-grunge-errore hr { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background: linear-gradient(90deg, transparent 0 5%, var(--colore-rosso-100) 25% 75%, transparent 95% 100% ) !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } html[data-theme="dark"] .card-grunge-bianco, html[data-theme="dark"] .card-grunge-bianco-storto { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ border-color: var(--colore-1-100) !important; background-color: var(--colore-3-20) !important; background-image: radial-gradient(circle at center, var(--colore-nero-70) 0%, var(--colore-nero-35) 100%) !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } html[data-theme="dark"] .card-grunge-rosso, html[data-theme="dark"] .card-grunge-rosso-storto, html[data-theme="dark"] .card-grunge-errore { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ border-color: var(--colore-rosso-100) !important; background-color: var(--colore-rosso-15) !important; background-image: radial-gradient(circle at center, var(--colore-rosso-25) 0%, var(--colore-rosso-45) 100%) !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } html[data-theme="dark"] .card-grunge-bianco::before, html[data-theme="dark"] .card-grunge-bianco-storto::before, html[data-theme="dark"] .card-grunge-rosso::before, html[data-theme="dark"] .card-grunge-rosso-storto::before, html[data-theme="dark"] .card-grunge-errore::before { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background-image: url('/images/white-noise.png') !important; mix-blend-mode: color-dodge !important; /* Regolazione rumore qui: */ opacity: 1 !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } html[data-theme="dark"] .card-grunge-errore .text-rosso-100 { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-rosso-100); /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ filter: brightness(130%); } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-testo); /* 4. ESTETICA */ border: 2px solid var(--colore-1-100); /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* Dropdown list */ html[data-theme="dark"] #selectRuolo:focus, html[data-theme="dark"] #selectImgStyle:focus, html[data-theme="dark"] #selectPriority:focus, html[data-theme="dark"] #selectRobots:focus, html[data-theme="dark"] #selectChangeFreq:focus, html[data-theme="dark"] #selectCategoria:focus, html[data-theme="dark"] #selectDestinatario:focus { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background-color: var(--colore-1-100) !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } html[data-theme="dark"] .tabella-admin { --bs-table-bg: var(--colore-bianco-15); --bs-table-color: var(--colore-nero-100); --bs-table-border-color: var(--colore-bianco-40); --bs-table-striped-bg: var(--colore-bianco-15); --bs-table-hover-bg: var(--colore-rosso-25); } html[data-theme="dark"] .table-responsive.border { border-color: var(--colore-bianco-40) !important; } html[data-theme="dark"] small.small-rosso, html[data-theme="dark"] small.small-blue, html[data-theme="dark"] small.small-verde { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-bianco-100); /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } html[data-theme="dark"] small { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ box-shadow: 0 2px 5px var(--colore-nero-45) !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } html[data-theme="dark"] small.small-chiaro { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background: var(--colore-6-100) !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } html[data-theme="dark"] small.small-scuro { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background: var(--colore-5-100) !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } html[data-theme="dark"] .testata img { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ opacity: 0.7 !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } html[data-theme="dark"] .piede .logo-svg-piede { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-testo) !important; /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } html[data-theme="dark"] .piede .logo-svg-piede:hover { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-rosso-100) !important; /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } html[data-theme="dark"] .debug { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-bianco-20) !important; /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* GESTIONE SWITCH DEI BANNER */ html[data-theme="dark"] .img-tema-chiaro { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ display: none !important; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } html[data-theme="dark"] .img-tema-scuro { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ display: block !important; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* *********************************************************************************************** */ /* ************************************** IMPOSTAZIONI BASE ************************************** */ /* *********************************************************************************************** */ html { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-6-100); font-size: var(--dimensione-font); /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ scroll-behavior: smooth; } body { /* 1. POSIZIONAMENTO */ position: relative; /* 2. DISPLAY E DIMENSIONI */ height: 100%; margin: 0; min-width: var(--larghezza-tamagotchi); /* 3. TIPOGRAFIA */ color: var(--colore-6-100); font-size: var(--dimensione-font); /* 4. ESTETICA */ background-image: url('../images/white-noise.png'), radial-gradient(circle at center, var(--colore-nero-100), var(--colore-6-100)); background-repeat: repeat, no-repeat; background-size: auto, 100% 100%; background-attachment: fixed; /* 5. INTERAZIONI E TRASFORMAZIONI */ -webkit-text-size-adjust: 100%; } /* *********************************************************************************************** */ /* ********************************* IMPOSTAZIONI DEL MIO LAYOUT ********************************* */ /* *********************************************************************************************** */ .pagina { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ width: calc(100% - var(--agio-pagina)); max-width: var(--larghezza); margin: var(--margine-pagina); padding: var(--padding-pagina); /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ border: 1.5px solid var(--colore-0-100); border-radius: var(--border-radius-pagina); background-color: var(--colore-2-100); background-image: url('../images/black-noise.png'), linear-gradient(to bottom, var(--colore-6-100) -30%, var(--colore-1-100) 50%, var(--colore-6-100) 130%); background-repeat: repeat, no-repeat; background-size: auto, 100% 100%; background-attachment: fixed; box-shadow: 0 2px 8px var(--colore-nero-45), 0 16px 32px var(--colore-nero-45); /* 5. INTERAZIONI E TRASFORMAZIONI */ } .testata { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ padding: 0rem 1.5rem 0 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* *********************************************************************************************** */ /* *********************************** NAVIGAZIONE PRINCIPALE *********************************** */ /* *********************************************************************************************** */ .navigazione { /* 1. POSIZIONAMENTO */ position: -webkit-sticky; position: sticky; top: 0; z-index: 1000; /* 2. DISPLAY E DIMENSIONI */ display: flex; justify-content: center; padding: var(--margine-menu) 0; /* 3. TIPOGRAFIA */ text-align: center; /* 4. ESTETICA */ background-color: transparent; /* 5. INTERAZIONI E TRASFORMAZIONI */ pointer-events: none; } .navigazione .btn-group { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ border-radius: var(--raggio-curvatura-btn); /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ box-shadow: 0 4px 6px var(--colore-nero-10), 0 10px 15px var(--colore-nero-25); /* 5. INTERAZIONI E TRASFORMAZIONI */ pointer-events: auto; } .navigazione .btn-group .btn { /* 1. POSIZIONAMENTO */ position: relative; z-index: 1; /* 2. DISPLAY E DIMENSIONI */ border: 1px solid var(--colore-bianco-40) !important; /* 3. TIPOGRAFIA */ color: var(--colore-6-100); font-size: 0.8rem; font-weight: 400; letter-spacing: -0.5px; /* 4. ESTETICA */ background-color: var(--colore-nero-15); -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); box-shadow: 0 4px 6px var(--colore-nero-10), inset 0 1px 0 var(--colore-bianco-80); /* 5. INTERAZIONI E TRASFORMAZIONI */ transition: background-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease, border-color 0.5s ease; } .navigazione .btn-group .btn span { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ margin-left: 0.3rem; /* <-- Distanza icone menu principale */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } .navigazione .btn-group .btn::before { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ display: inline-block; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ transition: transform 0.5s ease; } .navigazione .btn-group .btn:hover::before { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ transform: scale(1.4); } .navigazione .btn-group .btn:hover { /* 1. POSIZIONAMENTO */ z-index: 3; /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-bianco-100); /* 4. ESTETICA */ background-color: var(--colore-rosso-100); border-color: var(--colore-rosso-100) !important; box-shadow: 0 0 15px var(--colore-rosso-100); /* 5. INTERAZIONI E TRASFORMAZIONI */ } .navigazione .btn-group .btn.active { /* 1. POSIZIONAMENTO */ z-index: 2; /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-bianco-100); /* 4. ESTETICA */ background-color: var(--colore-rosso-100); border-color: var(--colore-rosso-100) !important; box-shadow: 0 0 25px var(--colore-rosso-100), inset 0 0 15px var(--colore-rosso-45); /* 5. INTERAZIONI E TRASFORMAZIONI */ } .navigazione .btn-group > .btn:first-child, .navigazione .btn-group > .btn-group:first-child > .btn { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ border-top-left-radius: var(--raggio-curvatura-btn) !important; border-bottom-left-radius: var(--raggio-curvatura-btn) !important; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } .navigazione .btn-group > .btn:last-child, .navigazione .btn-group > .btn-group:last-child > .btn { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ border-top-right-radius: var(--raggio-curvatura-btn) !important; border-bottom-right-radius: var(--raggio-curvatura-btn) !important; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } .navigazione .btn-group > .btn:not(:first-child):not(:last-child), .navigazione .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ border-radius: 0 !important; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } .navigazione .btn-group .btn-group { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ overflow: visible !important; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ box-shadow: none !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } .navigazione .dropdown-menu { /* 1. POSIZIONAMENTO */ z-index: 1; /* 2. DISPLAY E DIMENSIONI */ margin: 0; padding: 0.5rem 0; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background-color: var(--colore-nero-15); border: 1px solid rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8); /* 5. INTERAZIONI E TRASFORMAZIONI */ } .navigazione .dropdown-item { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-6-100); /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .navigazione .dropdown-item:active { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-bianco-100); /* 4. ESTETICA */ background-color: var(--colore-rosso-100); /* 5. INTERAZIONI E TRASFORMAZIONI */ } .navigazione .dropdown-item::before { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ display: inline-block; margin-right: 0.5rem; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ transition: transform 0.5s ease; } .navigazione .dropdown-item:hover::before, .navigazione .dropdown-item:focus::before { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ transform: scale(1.4); } .navigazione .dropdown-item:focus { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-6-100); /* 4. ESTETICA */ background-color: var(--colore-nero-00); outline: none; /* 5. INTERAZIONI E TRASFORMAZIONI */ } .navigazione .dropdown-item:hover { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-bianco-100); /* 4. ESTETICA (Rosso aziendale) */ background-color: var(--colore-rosso-100); box-shadow: none; /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* *********************************************************************************************** */ /* ****************************************** ICONCINE ****************************************** */ /* *********************************************************************************************** */ /* Iconcina rossa nel menu drop down */ .icona-rossa::before { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-rosso-100); /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } .icona-rossa:hover::before { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: inherit; /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* Iconcina verde nel menu drop down */ .icona-verde::before { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-verde-100); /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* Iconcine temi */ #icona-sole { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-bianco-80); /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } #icona-luna { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-bianco-20); /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* *********************************************************************************************** */ /* ******************************************** MAIN ******************************************** */ /* *********************************************************************************************** */ main { /* 1. POSIZIONAMENTO */ position: relative; z-index: 1; /* 2. DISPLAY E DIMENSIONI */ display: flex; flex-direction: column; flex-grow: 1; width: 100%; padding: 0; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } main h1 { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ margin: 2rem 0 2rem 0; /* 3. TIPOGRAFIA */ font-weight: 300; font-size: 1.4rem; line-height: 1.2; text-align: center; letter-spacing: 3px; text-transform: uppercase; /* 4. ESTETICA */ color: inherit; /* 5. INTERAZIONI E TRASFORMAZIONI */ } main h2 { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ margin: 1.5rem 0 1.5rem 0; /* 3. TIPOGRAFIA */ font-weight: 400; font-size: 1.15rem; line-height: 1.3; text-align: center; letter-spacing: 2px; text-transform: uppercase; /* 4. ESTETICA */ color: inherit; opacity: 0.85; /* 5. INTERAZIONI E TRASFORMAZIONI */ } main h3 { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ margin: 1rem 0 1rem 0; /* 3. TIPOGRAFIA */ font-weight: 500; font-size: 1rem; line-height: 1.4; text-align: center; letter-spacing: 1px; text-transform: uppercase; /* 4. ESTETICA */ color: inherit; opacity: 0.70; /* 5. INTERAZIONI E TRASFORMAZIONI */ } main h4 { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ margin: 0.5rem 0 0.5rem 0; /* 3. TIPOGRAFIA */ font-weight: 600; font-size: 0.9rem; line-height: 1.5; text-align: center; letter-spacing: 0; text-transform: uppercase; /* 4. ESTETICA */ color: inherit; opacity: 0.60; /* 5. INTERAZIONI E TRASFORMAZIONI */ } main p { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ margin: 0 1rem 1rem 1rem; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } main b, main strong { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ font-weight: 600; /* 4. ESTETICA */ text-shadow: 0 0 1px var(--colore-nero-35); /* 5. INTERAZIONI E TRASFORMAZIONI */ } main i, main em { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ font-style: italic; letter-spacing: 0.5px; /* 4. ESTETICA */ text-shadow: 0 0 1px var(--colore-nero-35); /* 5. INTERAZIONI E TRASFORMAZIONI */ } main a:not(.btn):not(.dropdown-item) { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ text-decoration: underline; text-underline-offset: 0.15rem; font-weight: 500; color: inherit; /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ cursor: pointer; transition: color 0.7s ease; } main a:not(.btn):not(.dropdown-item):hover, main a:not(.btn):not(.dropdown-item):focus { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ text-decoration: none; color: var(--colore-rosso-100); /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } main a i, section a i { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ display: inline-block; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease, color 0.4s ease; } main a:hover i, main a:focus i, section a:hover i, section a:focus i { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ transform: scale(1.4); } main hr { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ height: 0.125rem; margin: 2rem 0; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ border: 0; opacity: 1; background: linear-gradient(90deg, transparent 0 5%, var(--colore-nero-10) 25% 75%, transparent 95% 100% ); /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* *********************************************************************************************** */ /* ****************************** SECTION E TABLE SCROLL MARGIN TOP ****************************** */ /* *********************************************************************************************** */ section { /* 1. POSIZIONAMENTO */ scroll-margin-top: 10rem; /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } table tr { /* 1. POSIZIONAMENTO */ scroll-margin-top: 20rem; /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* *********************************************************************************************** */ /* ****************************** PREVIEW - VERSIONE SENZA OVERFLOW ****************************** */ /* *********************************************************************************************** */ pre { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ display: block; overflow: hidden; text-overflow: ellipsis; white-space: pre; /* 3. TIPOGRAFIA */ font-family: 'Courier New', Courier, monospace; color: inherit; /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* *********************************************************************************************** */ /* ******************************* PREVIEW - VERSIONE CON OVERFLOW ******************************* */ /* *********************************************************************************************** */ /*pre {*/ /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /*overflow: auto; height: 500px;*/ /* 3. TIPOGRAFIA */ /*font-family: 'Courier New', Courier, monospace; color: inherit;*/ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ /*}*/ /* -- WEBKIT (Chrome, Edge, Safari, Opera) -- */ /* 1. Spessore barra verticale (width) e orizzontale (height) */ /*pre::-webkit-scrollbar { width: 10px; height: 10px; }*/ /* 2. "Pista" su cui scorre la barra */ /*pre::-webkit-scrollbar-track { background: transparent; }*/ /* 3. Quadratino di intersezione in basso a destra */ /*pre::-webkit-scrollbar-corner { background: transparent; }*/ /* 4. "Pollice" (la levetta) */ /*pre::-webkit-scrollbar-thumb { background-color: var(--colore-bianco-40); border-radius: 10px; }*/ /* 5. Effetto Hover */ /*pre::-webkit-scrollbar-thumb:hover { background-color: var(--colore-bianco-80) !important; }*/ /* -- Firefox -- */ @supports (-moz-appearance: none) { pre { scrollbar-width: thin; scrollbar-color: var(--colore-bianco-40) transparent; } } /* *********************************************************************************************** */ /* ****************************************** IMMAGINI ****************************************** */ /* *********************************************************************************************** */ img, svg { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ -webkit-user-drag: none; user-drag: none; user-select: none; -webkit-user-select: none; } .testata img { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ display: block; flex: 0 1 20%; max-width: 20%; min-width: 0; height: auto; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ filter: drop-shadow(0 0.01rem 0.05rem var(--colore-nero-35)); /* 5. INTERAZIONI E TRASFORMAZIONI */ } .logo-svg { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ display: block; width: 45%; height: auto; /* 3. TIPOGRAFIA */ color: var(--colore-rosso-100); /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } .card-grunge-bianco img, .card-grunge-bianco-storto img, .card-grunge-errore img, .card-grunge-rosso img, .card-grunge-rosso-storto img { /* 1. POSIZIONAMENTO */ position: relative; /* 2. DISPLAY E DIMENSIONI */ display: block; margin: 0 auto 1rem auto; max-width: 100%; max-height: 300px; height: auto; width: auto !important; object-fit: contain; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ border: 2px solid var(--colore-2-100); border-radius: 0.75rem; box-shadow: 0 2px 3px var(--colore-nero-10), 0 5px 7.5px var(--colore-nero-25); /* 5. INTERAZIONI E TRASFORMAZIONI */ transform: rotate(0) scale(1); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; } .card-grunge-bianco img:hover, .card-grunge-bianco-storto img:hover, .card-grunge-errore img:hover, .card-grunge-rosso img:hover, .card-grunge-rosso-storto img:hover { /* 1. POSIZIONAMENTO */ z-index: 10; /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ box-shadow: 0 15px 30px var(--colore-nero-45); /* 5. INTERAZIONI E TRASFORMAZIONI */ transform: rotate(var(--rotazione-positiva)) scale(1.2); cursor: default; } main img.neutra { /* 1. POSIZIONAMENTO */ float: none; position: relative; /* 2. DISPLAY E DIMENSIONI */ margin: 1.5rem auto; display: block; width: 100%; max-width: 1000px; height: auto; object-fit: contain; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } main img.circolare { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ margin: 1.5rem auto; display: block; max-width: 100%; max-height: 200px; height: auto; aspect-ratio: 1 / 1; object-fit: cover; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ border: 2px solid var(--colore-2-100); border-radius: 50%; box-shadow: 0 2px 3px var(--colore-nero-10), 0 5px 7.5px var(--colore-nero-25); /* 5. INTERAZIONI E TRASFORMAZIONI */ transform: rotate(0) scale(1); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; } main img.circolare:hover { /* 1. POSIZIONAMENTO */ z-index: 10; /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ box-shadow: 0 15px 30px var(--colore-nero-45); /* 5. INTERAZIONI E TRASFORMAZIONI */ transform: rotate(var(--rotazione-positiva)) scale(1.2); cursor: default; } main img.quadrata { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ margin: 1.5rem auto; display: block; max-width: 100%; max-height: 200px; height: auto; aspect-ratio: 1 / 1; object-fit: cover; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ border: 2px solid var(--colore-2-100); border-radius: 0.75rem; box-shadow: 0 2px 3px var(--colore-nero-10), 0 5px 7.5px var(--colore-nero-25); /* 5. INTERAZIONI E TRASFORMAZIONI */ transform: rotate(0) scale(1); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; } main img.quadrata:hover { /* 1. POSIZIONAMENTO */ z-index: 10; /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ box-shadow: 0 15px 30px var(--colore-nero-45); /* 5. INTERAZIONI E TRASFORMAZIONI */ transform: rotate(var(--rotazione-positiva)) scale(1.2); cursor: default; } main img.rettangolare { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ margin: 1.5rem auto; display: block; max-width: 100%; max-height: 200px; height: auto; object-fit: cover; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ border: 2px solid var(--colore-2-100); border-radius: 0.75rem; box-shadow: 0 2px 3px var(--colore-nero-10), 0 5px 7.5px var(--colore-nero-25); /* 5. INTERAZIONI E TRASFORMAZIONI */ transform: rotate(0) scale(1); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; } main img.rettangolare:hover { /* 1. POSIZIONAMENTO */ z-index: 10; /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ box-shadow: 0 15px 30px var(--colore-nero-45); /* 5. INTERAZIONI E TRASFORMAZIONI */ transform: rotate(var(--rotazione-positiva)) scale(1.2); cursor: default; } main img.storta { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ margin: 1.5rem auto; display: block; max-width: 100%; max-height: 200px; height: auto; aspect-ratio: 1 / 1; object-fit: cover; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ border: 2px solid var(--colore-2-100); border-radius: 0.75rem; box-shadow: 0 2px 3px var(--colore-nero-10), 0 5px 7.5px var(--colore-nero-25); /* 5. INTERAZIONI E TRASFORMAZIONI */ transform: rotate(var(--rotazione-negativa)) scale(1); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; } main img.storta:hover { /* 1. POSIZIONAMENTO */ z-index: 10; /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ box-shadow: 0 15px 30px var(--colore-nero-45); /* 5. INTERAZIONI E TRASFORMAZIONI */ transform: rotate(0) scale(1.2); cursor: default; } main img.timbro { /* 1. POSIZIONAMENTO */ float: none; position: relative; /* 2. DISPLAY E DIMENSIONI */ margin: 0 0 0 70%; display: block; width: 20%; max-width: 20%; object-fit: contain; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ filter: drop-shadow(0 1px 2px var(--colore-nero-45)); /* 5. INTERAZIONI E TRASFORMAZIONI */ } main img.banner { /* 1. POSIZIONAMENTO */ float: none; position: relative; /* 2. DISPLAY E DIMENSIONI */ margin: 1.5rem auto; display: block; width: 100%; max-width: 1000px; height: auto; object-fit: contain; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } .piede .logo-svg-piede { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ margin: 0.5rem auto 0.5rem auto; display: block; flex: 0 1 100%; width: 100%; max-width: 100%; height: auto; /* 3. TIPOGRAFIA */ color: var(--colore-nero-100); /* 4. ESTETICA */ opacity: 0.7; /* 5. INTERAZIONI E TRASFORMAZIONI */ transform: scale(1) rotate(0deg); transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.4s ease, opacity 0.4s ease; } .piede .logo-svg-piede:hover { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-rosso-100); /* 4. ESTETICA */ opacity: 1; /* 5. INTERAZIONI E TRASFORMAZIONI */ transform: scale(1.4) rotate(var(--rotazione-negativa)); cursor: crosshair; } /* *********************************************************************************************** */ /* *********************************** GESTIONE SWITCH BANNER *********************************** */ /* *********************************************************************************************** */ .img-tema-scuro { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ display: none !important; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } .img-tema-chiaro { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ display: block; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* *********************************************************************************************** */ /* ******************************************** SMALL ******************************************** */ /* *********************************************************************************************** */ small { /* 1. POSIZIONAMENTO */ vertical-align: middle; /* 2. DISPLAY E DIMENSIONI */ display: inline-block; padding: 2px 10px; margin: 0 0 1rem 0; border-radius: 0.35rem; /* 3. TIPOGRAFIA */ color: var(--colore-1-100); font-size: .8rem !important; font-weight: 600; text-transform: uppercase; letter-spacing: .15em; /* 4. ESTETICA */ border: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 2px 5px var(--colore-nero-45) !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } small.small-chiaro { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background: var(--colore-5-100); box-shadow: 0 1px 5px var(--colore-nero-45) !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } small.small-scuro { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background: var(--colore-6-100); box-shadow: 0 1px 5px var(--colore-nero-45) !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } small.small-rosso { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background: var(--colore-rosso-100); box-shadow: 0 1px 5px var(--colore-rosso-100) !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } small.small-verde { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background: var(--colore-verde-100); box-shadow: 0 1px 5px var(--colore-verde-100) !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } small.small-blue { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background: var(--colore-blue-100); box-shadow: 0 1px 5px var(--colore-blue-100) !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* *********************************************************************************************** */ /* **************************************** COLORE TESTI **************************************** */ /* *********************************************************************************************** */ .text-rosso-100 { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-rosso-100); /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } .text-verde-100 { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-verde-100); /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } .text-blue-100 { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-blue-100); /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* *********************************************************************************************** */ /* ******************************************** CARD ******************************************** */ /* *********************************************************************************************** */ .card-grunge-bianco, .card-grunge-bianco-storto { /* 1. POSIZIONAMENTO */ position: relative; z-index: 1; /* 2. DISPLAY E DIMENSIONI */ box-sizing: border-box; width: 100%; margin: 2rem auto; padding: 1rem; overflow: visible; border-radius: 1.5rem; /* 3. TIPOGRAFIA */ color: var(--colore-6-100); /* 4. ESTETICA */ background: linear-gradient(135deg, var(--colore-bianco-15), var(--colore-bianco-05)); -webkit-backdrop-filter: blur(12px) saturate(110%); backdrop-filter: blur(12px) saturate(110%); border: 2px solid var(--colore-bianco-20); box-shadow: 0 4px 6px var(--colore-nero-10), 0 10px 15px var(--colore-nero-25); /* 5. INTERAZIONI E TRASFORMAZIONI */ scroll-margin-top: 10rem; transform-style: preserve-3d; } .card-grunge-bianco-storto { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ transform: rotate(var(--rotazione-positiva)); } .card-grunge-bianco::before, .card-grunge-bianco-storto::before { content: ""; /* 1. POSIZIONAMENTO */ position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ border-radius: inherit; background-image: url('/images/black-noise.png'); background-repeat: repeat; /* Regolazione rumore qui: */ opacity: 1; mix-blend-mode: multiply; /* 5. INTERAZIONI E TRASFORMAZIONI */ pointer-events: none; } .card-grunge-rosso, .card-grunge-rosso-storto, .card-grunge-errore { /* 1. POSIZIONAMENTO */ position: relative; z-index: 1; /* 2. DISPLAY E DIMENSIONI */ box-sizing: border-box; width: 100%; margin: 2rem auto; padding: 2rem; overflow: visible; border-radius: 1.5rem; /* 3. TIPOGRAFIA */ color: var(--colore-6-100); /* 4. ESTETICA */ background: linear-gradient(135deg, var(--colore-rosso-15), var(--colore-rosso-05)); -webkit-backdrop-filter: blur(12px) saturate(110%); backdrop-filter: blur(12px) saturate(110%); /* 5. INTERAZIONI E TRASFORMAZIONI */ transform-style: preserve-3d; } .card-grunge-rosso, .card-grunge-rosso-storto { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ border: 2px solid var(--colore-rosso-45); box-shadow: 0 4px 6px var(--colore-nero-10), 0 10px 15px var(--colore-nero-25); /* 5. INTERAZIONI E TRASFORMAZIONI */ } .card-grunge-errore { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ border: 2px solid var(--colore-rosso-25); box-shadow: 0 4px 6px var(--colore-rosso-15), 0 10px 15px var(--colore-rosso-25); /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* -- Gestione Rotazioni -- */ .card-grunge-rosso-storto, .card-grunge-errore { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ transform: rotate(var(--rotazione-positiva)); } .card-grunge-rosso::before, .card-grunge-rosso-storto::before, .card-grunge-errore::before { content: ""; /* 1. POSIZIONAMENTO */ position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ border-radius: inherit; background-image: url('/images/black-noise.png'); background-repeat: repeat; /* Regolazione rumore qui: */ opacity: 1; mix-blend-mode: multiply; /* 5. INTERAZIONI E TRASFORMAZIONI */ pointer-events: none; } .card-grunge-errore hr { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ height: 0.125rem; margin: 2rem 0; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ border: 0; opacity: 1; background: linear-gradient(90deg, transparent 0 5%, var(--colore-rosso-05) 25% 75%, transparent 95% 100% ); /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* *********************************************************************************************** */ /* ************************************* CARD CERTIFICAZIONI ************************************* */ /* *********************************************************************************************** */ .card-grunge-bianco.certificazione { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ display: flex; flex-direction: column; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ -webkit-user-drag: none; user-drag: none; user-select: none; -webkit-user-select: none; /* Ho aggiunto border-color alla transizione per un effetto morbidissimo */ transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .card-grunge-bianco.certificazione:hover { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ box-shadow: 0 4px 6px var(--colore-nero-10) !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ transform: translateY(-10px); } /* Stati Hover Specifici (Solo il colore del bordo!) */ .card-grunge-bianco.certificazione.rosso:hover { /* 4. ESTETICA */ border-color: var(--colore-rosso-100) !important; } .card-grunge-bianco.certificazione.verde:hover { /* 4. ESTETICA */ border-color: var(--colore-verde-100) !important; } .card-grunge-bianco.certificazione.blue:hover { /* 4. ESTETICA */ border-color: var(--colore-blue-100) !important; } /* *********************************************************************************************** */ /* ********************* CAMPI FORM BOOTSTRAP (INPUT, TEXTAREA, SELECT, ...) ********************* */ /* *********************************************************************************************** */ .form-control, .form-select { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background-color: var(--colore-nero-10); border: 2px solid var(--colore-3-100); /* 5. INTERAZIONI E TRASFORMAZIONI */ transition: border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out; } .form-control:focus, .form-select:focus { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-bianco-100); /* 4. ESTETICA */ background-color: var(--colore-nero-35) !important; outline: 0; /* 5. INTERAZIONI E TRASFORMAZIONI */ } .form-control::file-selector-button { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-bianco-100); /* 4. ESTETICA */ background-color: var(--colore-blue-45); border-right: 1px solid var(--colore-2-100); /* 5. INTERAZIONI E TRASFORMAZIONI */ transition: background-color 0.5s ease-in-out; cursor: pointer; } .form-control:hover:not(:disabled):not([readonly])::file-selector-button { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-bianco-100); /* 4. ESTETICA */ background-color: var(--colore-blue-100); /* 5. INTERAZIONI E TRASFORMAZIONI */ } .form-check-input { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background-color: var(--colore-blue-45); border: 1px solid var(--colore-2-100); /* 5. INTERAZIONI E TRASFORMAZIONI */ cursor: pointer; } .form-check-input:checked { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background-color: var(--colore-blue-100); border: 1px solid var(--colore-2-100); /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* *********************************************************************************************** */ /* ************************************ LABEL FORM BOOTSTRAP ************************************ */ /* *********************************************************************************************** */ #formIniziativa .form-floating > label, #formIniziativa .form-floating > label::after, #formJobs .form-floating > label, #formJobs .form-floating > label::after, #formUtenti .form-floating > label, #formUtenti .form-floating > label::after, #formHome .form-floating > label, #formHome .form-floating > label::after, #formTesti .form-floating > label, #formTesti .form-floating > label::after, #formStatistiche .form-floating > label, #formStatistiche .form-floating > label::after, #formReferenza .form-floating > label, #formReferenza .form-floating > label::after, #formLogin .form-floating > label, #formLogin .form-floating > label::after, #formContatti .form-floating > label, #formContatti .form-floating > label::after, #formCandidatura .form-floating > label, #formCandidatura .form-floating > label::after, #formFornitore .form-floating > label, #formFornitore .form-floating > label::after { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-blue-100) !important; /* 4. ESTETICA */ background-color: transparent !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } #formIniziativa .form-floating > .form-control:focus ~ label, #formIniziativa .form-floating > .form-control:not(:placeholder-shown) ~ label, #formJobs .form-floating > .form-control:focus ~ label, #formJobs .form-floating > .form-control:not(:placeholder-shown) ~ label, #formUtenti .form-floating > .form-control:focus ~ label, #formUtenti .form-floating > .form-control:not(:placeholder-shown) ~ label, #formHome .form-floating > .form-control:focus ~ label, #formHome .form-floating > .form-control:not(:placeholder-shown) ~ label, #formTesti .form-floating > .form-control:focus ~ label, #formTesti .form-floating > .form-control:not(:placeholder-shown) ~ label, #formStatistiche .form-floating > .form-control:focus ~ label, #formStatistiche .form-floating > .form-control:not(:placeholder-shown) ~ label, #formReferenza .form-floating > .form-control:focus ~ label, #formReferenza .form-floating > .form-control:not(:placeholder-shown) ~ label, #formLogin .form-floating > .form-control:focus ~ label, #formLogin .form-floating > .form-control:not(:placeholder-shown) ~ label, #formContatti .form-floating > .form-control:focus ~ label, #formContatti .form-floating > .form-control:not(:placeholder-shown) ~ label, #formCandidatura .form-floating > .form-control:focus ~ label, #formCandidatura .form-floating > .form-control:not(:placeholder-shown) ~ label, #formFornitore .form-floating > .form-control:focus ~ label, #formFornitore .form-floating > .form-control:not(:placeholder-shown) ~ label { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-blue-100) !important; /* 4. ESTETICA */ background-color: transparent !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* *********************************************************************************************** */ /* ***************************************** SPIN BUTTON ***************************************** */ /* *********************************************************************************************** */ /* Nascondo le frecce su tutti i browser che faccio prima */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } /* *********************************************************************************************** */ /* *********************************** DROPDOWN LIST BOOTSTRAP *********************************** */ /* *********************************************************************************************** */ #selectRuolo:focus, #selectImgStyle:focus, #selectPriority:focus, #selectRobots:focus, #selectChangeFreq:focus, #selectCategoria:focus, #selectDestinatario:focus { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-6-100) !important; /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } #selectRuolo option:checked, #selectRuolo option:hover, #selectImgStyle option:checked, #selectImgStyle option:hover, #selectPriority option:checked, #selectPriority option:hover, #selectRobots option:checked, #selectRobots option:hover, #selectChangeFreq option:checked, #selectChangeFreq option:hover, #selectCategoria option:checked, #selectCategoria option:hover, #selectDestinatario option:checked, #selectDestinatario option:hover { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-bianco-100) !important; /* 4. ESTETICA */ background-color: var(--colore-rosso-100) !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* *********************************************************************************************** */ /* ************************************** TABELLE BOOTSTRAP ************************************** */ /* *********************************************************************************************** */ .tabella-admin { --bs-table-bg: var(--colore-nero-10); --bs-table-color: var(--colore-nero-100); --bs-table-border-color: var(--colore-nero-25); --bs-table-striped-bg: var(--colore-bianco-15); --bs-table-hover-bg: var(--colore-rosso-25); } .table-responsive.border { border-color: var(--colore-nero-25) !important; } /* *********************************************************************************************** */ /* *************** FIX ALONE CONTROLLI BOOTSTRAP A SEGUITO INNESTO ICONA DI TESTA *************** */ /* *********************************************************************************************** */ /* 1. Spengo l'alone di default */ .input-group .form-floating .form-control:focus, .input-group .form-floating .form-select:focus { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ border-color: var(--bs-border-color); box-shadow: none; /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* 2. Accendo l'alone sull'intero blocco padre */ .input-group:focus-within { /* 1. POSIZIONAMENTO */ z-index: 5; /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ border-radius: var(--bs-border-radius); box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* 3. Coloro il bordo di tutto il blocco in fase di focus */ .input-group:focus-within .form-control, .input-group:focus-within .form-select, .input-group:focus-within .input-group-text { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ border-color: var(--bs-primary-border-subtle, var(--bs-primary)); /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* *********************************************************************************************** */ /* ********** FIX ALTEZZA SPAN VALIDAZIONI (EVITO SALTELLI E COLPI A VUOTO DEL BUTTON) ********** */ /* *********************************************************************************************** */ .messaggio-validazione-fixed { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ min-height: 1.5rem; display: block; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* *********************************************************************************************** */ /* ************************* ANGOLO DEL FETICISMO: FOOTER, GRECA E PIEDE ************************* */ /* *********************************************************************************************** */ .piede .greca { /* 1. POSIZIONAMENTO */ position: relative; /* 2. DISPLAY E DIMENSIONI */ display: flex; justify-content: center; align-items: center; gap: 0.5rem; width: 100%; padding: 1rem 0; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ pointer-events: none; user-select: none; -webkit-user-select: none; } .piede .greca i { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ display: inline-block; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ pointer-events: auto; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease; } .piede .greca .star-xs { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ font-size: 0.4rem; /* 4. ESTETICA */ opacity: 0.4; /* 5. INTERAZIONI E TRASFORMAZIONI */ } .piede .greca .star-sm { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ font-size: 0.6rem; /* 4. ESTETICA */ opacity: 0.6; /* 5. INTERAZIONI E TRASFORMAZIONI */ } .piede .greca .star-md { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ font-size: 0.8rem; /* 4. ESTETICA */ opacity: 0.8; /* 5. INTERAZIONI E TRASFORMAZIONI */ } .piede .greca .star-lg { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ font-size: 1.2rem; /* 4. ESTETICA */ opacity: 1; /* 5. INTERAZIONI E TRASFORMAZIONI */ } .piede .greca i:hover { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ opacity: 1; color: var(--colore-rosso-100); /* 5. INTERAZIONI E TRASFORMAZIONI */ transform: scale(1.7); cursor: crosshair; } .piede { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } .piede .sx { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ display: inline-block; margin: 2rem 0 2.5rem 0; /* 3. TIPOGRAFIA */ text-align: center; /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ user-select: none; -webkit-user-select: none; } .piede .dx { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ display: inline-block; margin: 2rem 0 2.5rem 0; /* 3. TIPOGRAFIA */ text-align: center; /* 4. ESTETICA */ opacity: 0.85; filter: saturate(0.9); /* 5. INTERAZIONI E TRASFORMAZIONI */ user-select: none; -webkit-user-select: none; } .piede .cella { /* 1. POSIZIONAMENTO */ position: relative; z-index: 1; /* 2. DISPLAY E DIMENSIONI */ width: var(--width-cella-piede); margin: 20px auto 20px 0; /* 3. TIPOGRAFIA */ text-wrap-mode: nowrap; /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } .piede ul { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ margin: 0.5rem 0 0 0; padding: 0; padding-left: 10px; /* 3. TIPOGRAFIA */ list-style: none; /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } .piede .cella ul { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ border-left: 10px solid var(--colore-rosso-15); /* 5. INTERAZIONI E TRASFORMAZIONI */ transition: border-left-color 1s ease-in-out; } .piede .cella:hover ul { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ border-left-color: var(--colore-rosso-100); /* 5. INTERAZIONI E TRASFORMAZIONI */ } .piede li { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ display: flex; align-items: flex-start; gap: 0.3rem; margin-bottom: 0.25rem; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } .piede li i { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ display: inline-block; margin-right: 0.2rem; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ opacity: 0.5; /* 5. INTERAZIONI E TRASFORMAZIONI */ transition: opacity 0.4s ease, transform 0.4s ease; } .piede li:hover i { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-rosso-100); /* 4. ESTETICA */ opacity: 1; /* 5. INTERAZIONI E TRASFORMAZIONI */ transform: scale(1.2); } .piede hr { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ height: 0.125rem; margin: 2rem 0; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ border: 0; opacity: 1; background: linear-gradient(90deg, transparent 0 5%, var(--colore-nero-10) 25% 75%, transparent 95% 100% ); /* 5. INTERAZIONI E TRASFORMAZIONI */ } .piede a { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ text-decoration: underline; text-underline-offset: 0.15rem; font-weight: 500; color: inherit; /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ cursor: pointer; transition: color 0.7s ease; } .piede a:hover, .piede a:focus { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ text-decoration: none; color: var(--colore-rosso-100); /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } .piede b, .piede strong { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ font-weight: 600; /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* *********************************************************************************************** */ /* **************************** ANGOLO NERD: DEBUG ED ORPELLI VARI... **************************** */ /* *********************************************************************************************** */ .debug { /* 1. POSIZIONAMENTO */ position: absolute; z-index: 1; bottom: -3rem; left: 50%; /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ white-space: nowrap; font-family: "Courier New", Courier, monospace; color: var(--colore-bianco-20); text-align: center; /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ pointer-events: none; transform: translateX(-50%); } .contenitore-switch-tema { /* 1. POSIZIONAMENTO */ position: absolute; top: -2.8rem; left: 50%; z-index: 1050; /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ white-space: nowrap; /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ transform: translateX(-50%); } .contenitore-switch-tema i { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ color: var(--colore-nero-25); /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ } .switch-tema { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ width: 3em !important; height: 1.5em !important; margin-top: 0 !important; /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background-color: var(--colore-nero-25); border-color: var(--colore-nero-25); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 1%29'/%3e%3c/svg%3e") !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ cursor: pointer; } .switch-tema:checked { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background-color: var(--colore-nero-100); border-color: var(--colore-bianco-100); /* 5. INTERAZIONI E TRASFORMAZIONI */ } .switch-tema:focus { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ border-color: var(--colore-bianco-100); box-shadow: 0 0 0 0.25rem var(--colore-bianco-20); /* 5. INTERAZIONI E TRASFORMAZIONI */ } #switchModifiche { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background-color: var(--colore-bianco-15); border-color: var(--colore-nero-25); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 1%29'/%3e%3c/svg%3e") !important; /* 5. INTERAZIONI E TRASFORMAZIONI */ cursor: pointer; } #switchModifiche:checked { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ background-color: var(--colore-nero-35); border-color: var(--colore-nero-25); /* 5. INTERAZIONI E TRASFORMAZIONI */ } #switchModifiche:focus { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ border-color: var(--colore-nero-25); box-shadow: 0 0 0 0.1rem var(--colore-bianco-20); /* 5. INTERAZIONI E TRASFORMAZIONI */ } /* *********************************************************************************************** */ /* ************************************ TRANSIZIONI DEI TEMI ************************************ */ /* *********************************************************************************************** */ html.theme-transition, html.theme-transition * { /* 1. POSIZIONAMENTO */ /* 2. DISPLAY E DIMENSIONI */ /* 3. TIPOGRAFIA */ /* 4. ESTETICA */ /* 5. INTERAZIONI E TRASFORMAZIONI */ transition: background-color 1s ease, color 1s ease, border-color 1s ease, box-shadow 1s ease !important; }