/* Barra laterale — la colonna di fianco all'articolo. DOVE VALE, misurato e non supposto. Solo su #sidebar1, cioe su sidebar.php. Nel sito pubblico le pagine che lo chiamano sono due: /attivita/ e tutti gli articoli di news. Homepage, /visitare/, /itinerario/, /cartina-virtuale/, /dormire/, /arte-e-artigianato/ e i quattordici archivi per tassonomia hanno un modello proprio e non chiamano get_sidebar(). COSA C'ERA PRIMA. Quattro regole in tutto, tutte ereditate dal tema Joints del 2015 e tutte in library/css/style.css: riga 477 .widget ul { margin: 0 } riga 479 .widget ul li { list-style: none } riga 602 .widget { padding: 0 10px; margin: 2.2em 0 } riga 652 .widget ul li { margin-bottom: 0.75em } Le ultime due stanno dentro @media only screen and (min-width: 40.063em). I titoli dei widget non avevano NESSUNA regola: l'unica che li nomina e "#sidebar-offcanvas .widgettitle" alla riga 483, che riguarda il menu mobile. E c'e una conseguenza che si vede solo su telefono: le due regole di stacco stanno dentro una media query da 641px in su, quindi SOTTO i 640px i riquadri non erano staccati affatto. Questo foglio dichiara lo stacco fuori da ogni media query, cosi vale a tutte le larghezze. COSA NON SI TOCCA, ed e il vincolo piu importante di questo foglio. Le classi di griglia — .sidebar, .large-4, .medium-4, .columns — sono ricostruite in vc-grid.css, sono a float e sono fragili. Qui non compare mai un selettore che le nomini. L'unico punto in cui si tocca il contenitore e la sezione 7, sotto i 640px, e li si dichiarano solo margin-top, padding-top e border-top: niente width, niente float, niente display. Il modello a float resta quello di prima a ogni larghezza. DA DOVE VIENE L'ASPETTO. Non e inventato qui: e il linguaggio che il sito ha preso in F4-F6. - la barretta ambra sopra il titolo e lo stesso segno di .vc-sezione-titolo::before in vc-archivi.css e in vc-home.css, ridotto di un quarto perche qui sta sopra un titolo da 18px e non da 24-34px (sezione 3); - le pastiglie delle categorie sono quelle dei filtri di vc-ricerca.css, stessa altezza, stesso bordo, stesso grigio al passaggio (sezione 5); - le tre porte riprendono il vocabolario di .vc-porta della homepage — icona, titolo, nota, ambra, inversione sul blu — ma NON ne copiano le regole: quelle sono tutte ancorate a #homepage e disegnano tre scatole affiancate, qui serve un elenco in colonna dentro un riquadro solo. Vedi il cappello della sezione 6. CONTACT FORM 7 NON SI RITOCCA QUI. Campi, pulsante di invio, campo non valido e riquadro di risposta li veste gia vc-a11y.css sezione 5.4, su ogni pagina. Questo foglio gli da la cornice, la spaziatura e un'altezza sensata per l'area di testo in una colonna stretta, e nient'altro (sezione 4). CONTRASTI, calcolati con la formula di WCAG 2.x e non stimati. La funzione e stata tarata prima dell'uso su due valori noti: #767676 su bianco da 4.5422 (atteso 4.54) e nero su bianco da 21.0000. #11273d su #ffffff 15.20:1 testo dei titoli e delle voci #5e6b76 su #ffffff 5.47:1 le note sotto i titoli delle porte #ffffff su #374a66 9.00:1 voce con il puntatore sopra o a fuoco #e7e9ed su #374a66 7.40:1 la nota nello stesso stato (bianco all'88%) #11273d su #eef1f5 13.42:1 pastiglia di categoria al passaggio #007095 su #ffffff 5.60:1 contorno di messa a fuoco, contro il 3:1 chiesto dal criterio 1.4.11 #f39207 su #ffffff 2.35:1 solo decorazione: la barretta e il filetto non portano informazione che non sia gia scritta accanto, quindi non ricadono sotto il criterio 1.4.11 ORDINE NELLA CODA. Dopo vc-mobile e vc-nav, e PRIMA di vc-a11y, che deve restare l'ultimo di tutti: e vc-a11y a rimettere i contorni di messa a fuoco che vc-foundation-core.css toglie a ogni campo, compresi quelli del modulo eventi. */ :root { /* Il testo forte: lo stesso blu quasi nero dei titoli di sezione. */ --vc-fianco-testo: var(--vc-colore-blu-scuro, #11273d); /* Il testo accessorio. #999999 darebbe 2.85:1, sotto soglia; questo grigio ardesia e lo stesso sostituto che vc-a11y.css ha gia scelto per tutto il sito. */ --vc-fianco-testo-tenue: var(--vc-colore-ardesia, #5e6b76); --vc-fianco-bordo: var(--vc-colore-bordo, #cecece); --vc-fianco-riga: var(--vc-colore-bordo-tenue, #eeeeee); /* Il segno ambra. La barretta sopra il titolo e il filetto a sinistra del modulo eventi sono lo stesso segno, uno coricato e uno in piedi. */ --vc-fianco-segno: var(--vc-colore-ambra, #f39207); /* Il blu su cui si ribalta una voce al passaggio o a fuoco. */ --vc-fianco-pieno: var(--vc-colore-blu, #374a66); /* Il grigio chiaro della pastiglia sotto il puntatore: lo stesso #eef1f5 dei filtri in vc-ricerca.css. */ --vc-fianco-tenue: #eef1f5; /* Il bordo delle pastiglie. E lo stesso valore di --vc-cerca-bordo-campo, ma scritto qui e non ereditato: vc-ricerca.css oggi e accodato su ogni pagina, e se un domani lo si condizionasse questa colonna resterebbe senza bordi senza che nessuno colleghi le due cose. */ --vc-fianco-bordo-pastiglia: #cfd7e0; /* Il passo interno del riquadro. Dichiarato una volta sola perche la sezione 6 lo riusa col segno meno, per far arrivare l'evidenziazione delle voci fino al bordo interno della cornice: se i due numeri divergessero, le righe sborderebbero o resterebbero corte. */ --vc-fianco-passo: 1.125rem; --vc-fianco-durata: 200ms; --vc-fianco-curva: ease; } /* =============================================================== 1. Azzeramenti Le quattro regole del 2015 elencate in testa non vanno cancellate da style.css — quel file lo tocca un'altra lavorazione — ma vanno neutralizzate qui dentro, dove i riquadri hanno un padding proprio e gli elenchi diventano pastiglie. SPECIFICITA. ".widget" vale (0,1,0), ".widget ul" (0,1,1), ".widget ul li" (0,1,2). Ogni selettore qui sotto porta #sidebar1 davanti, quindi vale almeno (1,1,0) e vince a prescindere dall'ordine di stampa dei fogli. E la ragione per cui in tutto questo file non serve un solo !important. =============================================================== */ #sidebar1 .widget { padding: 0; margin: 0; } #sidebar1 .widget ul { margin: 0; padding: 0; list-style: none; } #sidebar1 .widget ul li { margin: 0; padding: 0; list-style: none; } /* =============================================================== 2. Il riquadro Ogni blocco della colonna e una scheda bianca con cornice: i widget che arrivano dal pannello e il blocco delle tre porte che arriva dal tema (.vc-fianco-blocco) hanno lo stesso identico trattamento, perche a chi legge non deve importare da dove viene ciascuno. PERCHE UNA CORNICE E NON SOLO DELLO SPAZIO. Prima i blocchi erano separati solo da 2.2em di vuoto sopra i 641px e da niente sotto: due elenchi di link uno sopra l'altro sembravano un elenco solo. La cornice dice dove finisce una cosa e dove ne comincia un'altra senza doverlo scrivere. L'ombra e la piu leggera delle tre dei token: qui serve a staccare la scheda dal bianco della pagina, non a sollevarla. =============================================================== */ #sidebar1 .widget, #sidebar1 .vc-fianco-blocco { display: block; padding: var(--vc-fianco-passo, 1.125rem); margin: 0 0 var(--vc-spazio-4, 1.875rem); border: 1px solid var(--vc-fianco-bordo, #cecece); border-radius: var(--vc-raggio-2, 6px); background-color: var(--vc-colore-sfondo, #ffffff); box-shadow: var(--vc-ombra-1, 0 1px 3px rgba(0, 0, 0, 0.12)); } /* L'ultimo blocco non lascia spazio sotto di se: sotto c'e gia lo stacco del piede di pagina, e su telefono quel margine sarebbe l'ultima cosa della pagina. */ #sidebar1 .widget:last-child, #sidebar1 .vc-fianco-blocco:last-child { margin-bottom: 0; } /* =============================================================== 3. Il titolo del blocco DUE BERSAGLI, UN ASPETTO SOLO. ".widgettitle" e la classe che WordPress mette sui titoli dei widget: functions.php righe 149-150 li stampa come

, verificato anche nel sorgente della pagina in produzione. ".vc-fianco-titolo" e il titolo del blocco che il tema stampa da sidebar.php, che invece e un

. Tag diversi, stesso aspetto: e la posizione nella colonna a dire cos'e, non la misura del carattere. PERCHE 18px FISSI E NON LA RAMPA FLUIDA. vc-mobile.css porta gli

a 27-37px e gli

a 18-23px. Ventisette pixel in una colonna larga circa 415px farebbero di questo titolo la cosa piu grande accanto all'articolo, che invece e il contenuto principale. 1.125rem e la stessa misura di .vc-porta-titolo in homepage: una colonna di servizio non compete con il titolo dell'articolo. SPECIFICITA. "h2" e "h4" di vc-mobile.css valgono (0,0,1); i selettori qui valgono (1,1,0). LA BARRETTA AMBRA. E lo stesso segno di .vc-sezione-titolo::before, portato da 3rem x 4px a 2.25rem x 3px, cioe ridotto di un quarto. Non e pignoleria: la misura piena e tarata su un titolo da 24-34px in una colonna larga tutta la pagina; ripetuta identica sopra un titolo da 18px in una colonna da 415px peserebbe piu del titolo che introduce. Resta lo stesso segno, alla scala di questa colonna. =============================================================== */ #sidebar1 .widgettitle, #sidebar1 .vc-fianco-titolo { display: block; margin: 0 0 var(--vc-spazio-2, 0.9375rem); font-family: var(--vc-font-testo, 'Titillium Web', sans-serif); font-size: 1.125rem; /* 18px */ line-height: var(--vc-interlinea-stretta, 1.25); font-weight: var(--vc-peso-grassetto, 700); color: var(--vc-fianco-testo, #11273d); /* 15.20:1 su bianco */ } /* Puramente decorativa: non porta informazione che non sia gia nel titolo accanto, quindi il suo 2.35:1 su bianco non ricade sotto il criterio 1.4.11. */ #sidebar1 .widgettitle::before, #sidebar1 .vc-fianco-titolo::before { content: ""; display: block; width: 2.25rem; height: 3px; margin-bottom: 0.6rem; border-radius: var(--vc-raggio-1, 3px); background-color: var(--vc-fianco-segno, #f39207); } /* =============================================================== 4. Il modulo eventi COS'E. Il widget di testo che contiene il modulo Contact Form 7 «Vuoi rimanere aggiornato con tutti gli eventi?». E l'unico punto di tutto il sito in cui un visitatore puo lasciare un contatto. COSA GLI MANCA, E NON SI PUO DARGLIELO DA QUI. Un titolo. La frase «Vuoi rimanere aggiornato con tutti gli eventi?» non e il titolo del widget: sta DENTRO il modulo, nello stesso

dell'etichetta del primo campo, verificato nel sorgente della pagina in produzione. Nessun selettore la isola senza prendersi anche l'etichetta. Un titolo vero puo arrivare solo dal pannello, e sarebbe in una lingua sola, o spostando il modulo nel tema. COSA SI PUO FARE DA QUI, E SI FA: distinguerlo. Prende il filetto ambra a sinistra — lo stesso segno del titolo, in piedi invece che coricato, ed e il segno che .vc-porta usa in homepage per marcare una via d'ingresso — e un'ombra un gradino piu forte degli altri riquadri. E l'unico blocco della colonna che chiede a chi legge di fare qualcosa, e si vede. IL RESTO DEL MODULO NON SI TOCCA. Bordo dei campi, altezza minima da 44px, pulsante di invio, campo non valido, riquadro di risposta: li fa gia vc-a11y.css sezione 5.4 su ogni pagina, e rifarli qui vorrebbe dire tenere allineate due copie per sempre. =============================================================== */ #sidebar1 .widget_text { border-left: 4px solid var(--vc-fianco-segno, #f39207); box-shadow: var(--vc-ombra-2, 0 4px 12px rgba(0, 0, 0, 0.15)); } /* La spaziatura interna del modulo. Contact Form 7 avvolge ogni campo in un

, e i margini di paragrafo del tema — pensati per il testo di un articolo — dentro un modulo diventano vuoti fra un campo e l'altro. LO STACCO E SOPRA E NON SOTTO, ed e la parte che va spiegata. Il modo ovvio sarebbe "margin-bottom su ogni

, zero sull'ultimo". Non funzionerebbe: l'ultimo

del modulo non e quello del pulsante, e la trappola per gli automi che aggiunge Akismet (p.akismet-fields-container, display:none), verificata nel sorgente della pagina in produzione. Il selettore :last-of-type metterebbe lo zero su un paragrafo invisibile e lascerebbe il margine sotto il pulsante. Con lo stacco dichiarato fra un paragrafo e il successivo il problema non nasce: un elemento display:none non genera nessuna scatola, quindi il suo margine non si vede, e sotto il pulsante non resta niente comunque sia fatto il modulo domani. */ #sidebar1 .widget_text .wpcf7-form p { margin: 0; } #sidebar1 .widget_text .wpcf7-form p + p { margin-top: var(--vc-spazio-2, 0.9375rem); } /* L'area di testo. Il modulo dichiara rows="10", cioe circa 220px di altezza: in una colonna larga 415px il campo facoltativo «Che tipo di Eventi ti piacciono?» diventava la cosa piu grande del riquadro e spingeva il pulsante di invio fuori dalla schermata. height e non max-height, perche l'attributo rows si comporta come height: quattro righe si vedono, e chi scrive di piu fa scorrere il campo o lo allarga dal suo angolo. Il minimo tattile non c'entra: 5.5rem sono 88px, il doppio dei 44 richiesti. SPECIFICITA. vc-foundation-core.css ha "textarea[rows] { height: auto }", che vale (0,1,1); questo selettore vale (1,2,1). */ #sidebar1 .widget_text .wpcf7-form textarea { height: 5.5rem; } /* =============================================================== 5. Le categorie — le pastiglie Tre voci: Eventi, Gallerie, News. Erano un elenco puntato senza punti, tre link di testo uno sotto l'altro alti quanto una riga: circa 21px di area di tocco, contro i 44 del token. Diventano le stesse pastiglie dei filtri di /visitare/ (vc-ricerca.css sezione 4): stessa altezza minima, stesso bordo, stesso raggio pieno, stesso grigio al passaggio del puntatore. Non e citazione per vezzo: sono la stessa cosa — un elenco chiuso di voci che portano a un sottoinsieme del contenuto — e devono avere la stessa forma. IL COLORE DEL TESTO va dichiarato: "a, a:visited { color: #003882 }" di style.css riga 200 le porterebbe al blu dei link. #003882 su bianco da 11.12:1 ed e leggibilissimo, ma dentro una pastiglia con la cornice grigia un link blu sembra un link dentro una frase, non un comando. IL GAP DA 0.5rem tiene separate le aree di tocco: due bersagli da 44px attaccati si toccano e il dito non sa quale ha preso. LIMITE NOTO. Il selettore prende il solo elenco di primo livello. Se un domani le categorie diventassero annidate, il sotto-elenco resterebbe senza pastiglie: oggi le categorie sono tre e tutte allo stesso livello, e una regola per un caso che non esiste sarebbe codice da mantenere a vuoto. =============================================================== */ #sidebar1 .widget_categories > ul { display: flex; flex-wrap: wrap; gap: 0.5rem; } #sidebar1 .widget_categories > ul > li > a { display: inline-flex; align-items: center; min-height: var(--vc-tocco-minimo, 44px); padding: 0 0.85rem; border: 1px solid var(--vc-fianco-bordo-pastiglia, #cfd7e0); border-radius: var(--vc-raggio-pieno, 999px); background-color: var(--vc-colore-sfondo, #ffffff); color: var(--vc-fianco-testo, #11273d); /* 15.20:1 su bianco */ font-size: 0.9375rem; /* 15px */ line-height: 1.2; text-decoration: none; transition: background-color var(--vc-fianco-durata, 200ms) var(--vc-fianco-curva, ease), border-color var(--vc-fianco-durata, 200ms) var(--vc-fianco-curva, ease); } #sidebar1 .widget_categories > ul > li > a:hover, #sidebar1 .widget_categories > ul > li > a:focus { background-color: var(--vc-fianco-tenue, #eef1f5); border-color: var(--vc-fianco-testo-tenue, #5e6b76); color: var(--vc-fianco-testo, #11273d); /* 13.42:1 sul grigio */ text-decoration: none; } /* =============================================================== 6. Le tre porte — .vc-fianco-porte COSA SONO. Cosa vedere, l'itinerario a piedi, la cartina: le stesse vie d'ingresso al contenuto turistico che la homepage offre in cima. Stanno qui perche chi legge una notizia su una sagra e arrivato quasi sempre da un motore di ricerca o da un social, e la homepage non l'ha mai vista. PERCHE NON SI RIUSANO LE REGOLE DELLA HOMEPAGE. Le regole di .vc-porta in vc-home.css sono tutte ancorate a #homepage, quindi qui non avrebbero bersaglio; e vc-home.css non e accodato su queste pagine. Ma soprattutto descrivono una cosa diversa: tre scatole affiancate, ciascuna con la sua cornice e il suo filetto, dentro una .row a dodici colonne. Qui la colonna e una sola e larga circa 415px: tre scatole incorniciate una sotto l'altra dentro un'altra cornice sarebbero tre riquadri dentro un riquadro. Quindi una cornice sola — quella del blocco, sezione 2 — e dentro un elenco di righe separate da un filetto. Restano identici il vocabolario e i due terzi delle parole: icona a sinistra, titolo, nota sotto, inversione sul blu al passaggio. Le etichette «Cosa vedere», «Palazzi, chiese e fontane», «L'itinerario a piedi» e «Le tappe del percorso» sono le stesse stringhe di page-home.php, non copie riscritte: passano dallo stesso msgid e sono gia tradotte nelle altre quattro lingue. L'AREA DI TOCCO e l'intera riga, non il solo testo: min-height 44px piu 0.7rem di padding sopra e sotto. Con due righe di testo la riga misura circa 62px. =============================================================== */ #sidebar1 .vc-fianco-elenco { /* I margini negativi fanno uscire l'elenco dal padding del riquadro, cosi il filetto fra una voce e l'altra e l'evidenziazione al passaggio arrivano fino alla cornice invece di fermarsi 18px prima. I due numeri devono restare uguali e opposti: per questo il passo e un token solo e qui c'e un calc, non un numero riscritto a mano. */ margin: 0 calc(-1 * var(--vc-fianco-passo, 1.125rem)) calc(-1 * var(--vc-fianco-passo, 1.125rem)); padding: 0; list-style: none; } #sidebar1 .vc-fianco-voce { margin: 0; padding: 0; list-style: none; } /* Il filetto sta FRA le voci e non sotto ciascuna: sotto l'ultima raddoppierebbe la cornice del riquadro. */ #sidebar1 .vc-fianco-voce + .vc-fianco-voce { border-top: 1px solid var(--vc-fianco-riga, #eeeeee); } #sidebar1 .vc-fianco-porta { display: flex; align-items: center; gap: 0.7rem; min-height: var(--vc-tocco-minimo, 44px); padding: 0.7rem var(--vc-fianco-passo, 1.125rem); color: var(--vc-fianco-testo, #11273d); /* 15.20:1 su bianco */ text-decoration: none; transition: background-color var(--vc-fianco-durata, 200ms) var(--vc-fianco-curva, ease), color var(--vc-fianco-durata, 200ms) var(--vc-fianco-curva, ease); } /* Il colore va dichiarato sull'ancora e non sui due , cosi i figli lo ereditano e lo stato al passaggio si cambia in un punto solo. "a, a:visited { color: #003882 }" di style.css vale (0,1,1) col :visited: questo selettore vale (1,1,0) e vince a prescindere dall'ordine. */ #sidebar1 .vc-fianco-porta:hover, #sidebar1 .vc-fianco-porta:focus { background-color: var(--vc-fianco-pieno, #374a66); color: var(--vc-colore-sfondo, #ffffff); /* 9.00:1 sul blu */ text-decoration: none; } /* Il contorno di messa a fuoco. Colore e spessore restano quelli di vc-a11y.css, che e e resta la sola autorita in materia: qui cambia SOLO lo stacco, da +2px a -2px. La ragione e la riga a tutta larghezza: con lo stacco positivo il contorno della prima e dell'ultima voce cadrebbe fuori dalla cornice del riquadro, e su una voce di mezzo si sovrapporrebbe al filetto. Con lo stacco negativo il contorno sta dentro la riga, dove si vede sempre e non taglia niente. E lo stesso ribaltamento gia fatto, e motivato, da "#homepage .vc-porta:focus-visible" in vc-home.css. Specificita (1,2,0) contro (0,1,1): vince anche se vc-a11y resta l'ultimo foglio della coda, ed e cio che permette di farlo senza !important. */ #sidebar1 .vc-fianco-porta:focus-visible { outline: var(--vc-a11y-fuoco-spessore, 2px) solid var(--vc-a11y-fuoco, #007095); outline-offset: -2px; } #sidebar1 .vc-fianco-segno { flex: 0 0 auto; line-height: 0; } #sidebar1 .vc-fianco-segno svg { display: block; fill: currentColor; } /* min-width: 0 e obbligatorio su un figlio flex: senza, un titolo lungo non scenderebbe sotto la larghezza della sua parola piu lunga e spingerebbe la riga oltre la colonna. */ #sidebar1 .vc-fianco-testo { min-width: 0; } #sidebar1 .vc-fianco-porta-titolo { display: block; font-size: 1rem; /* 16px */ line-height: var(--vc-interlinea-stretta, 1.25); font-weight: var(--vc-peso-medio, 600); } #sidebar1 .vc-fianco-porta-nota { display: block; margin-top: 0.1rem; font-size: 0.875rem; /* 14px */ line-height: 1.35; color: var(--vc-fianco-testo-tenue, #5e6b76); /* 5.47:1 su bianco */ } /* La nota sul fondo blu. Bianco all'88% da #e7e9ed, cioe 7.40:1 sul blu: resta ben oltre soglia e resta un gradino sotto il titolo, come su fondo chiaro. Il colore non e lasciato ereditare apposta: senza questa regola la nota diventerebbe bianca come il titolo e la gerarchia fra le due righe sparirebbe proprio nello stato in cui si sta per premere. */ #sidebar1 .vc-fianco-porta:hover .vc-fianco-porta-nota, #sidebar1 .vc-fianco-porta:focus .vc-fianco-porta-nota { color: rgba(255, 255, 255, 0.88); } /* =============================================================== 7. Sotto i 640px, dove la colonna si impila E la fascia che conta di piu, e va guardata pensando a dove si trova chi legge: la colonna non e piu di fianco all'articolo, e sotto. Chi ci arriva ha appena finito di leggere una notizia. Senza queste tre righe il primo riquadro comincerebbe attaccato all'ultima riga dell'articolo — le regole di stacco del 2015 stanno tutte dentro una media query da 641px in su — e sembrerebbe parte del testo. Il filetto e la riga che dice: l'articolo finisce qui. SI TOCCA IL CONTENITORE, E SOLO QUI. Sono le uniche tre dichiarazioni di tutto il foglio che cadono su #sidebar1, e sono tutte verticali: nessuna width, nessun float, nessun display, niente che la griglia a float di vc-grid.css possa risentire. Il box-sizing e border-box in tutto il sito (vc-foundation-core.css riga 25), quindi il bordo sta dentro il 100% della larghezza e non fa sbordare la riga. =============================================================== */ @media only screen and (max-width: 40em) { #sidebar1 { margin-top: var(--vc-spazio-6, 2.8125rem); padding-top: var(--vc-spazio-4, 1.875rem); border-top: 1px solid var(--vc-fianco-riga, #eeeeee); } } /* =============================================================== 8. Chi ha chiesto meno movimento Si azzerano le DURATE, non i comportamenti: il cambio di colore delle pastiglie e l'inversione delle voci continuano ad accadere, accadono subito. Nessuno stato diventa irraggiungibile o invisibile, e il contorno di messa a fuoco non ha mai avuto una transizione. Va per ultimo: una media query non aggiunge specificita, quindi queste dichiarazioni vincono sulle precedenti solo perche arrivano dopo. =============================================================== */ @media (prefers-reduced-motion: reduce) { #sidebar1 .widget_categories > ul > li > a, #sidebar1 .vc-fianco-porta { transition-duration: 0.01ms; transition-delay: 0s; animation-duration: 0.01ms; animation-delay: 0s; animation-iteration-count: 1; } }