/* Theme Name: Hello CustomTeak Theme Template: hello-elementor Version: 1.13.0 Author: Custom Teak -------------------------------------------------------------------------- INDICE 1. TOKEN GLOBALI 2. CONTAINER VIRTUALE (primitiva a 2 colonne) 3. GRIGLIA VIRTUALE A 12 COLONNE (primitiva) 3bis. GRIGLIA A DUE FASCE (primitiva) 4. COLONNE E ALLINEAMENTI 5. BLOCCHI A FUORIUSCITA SINGOLA 6. UTILITY 7. MODULO HEADER 8. MODULO HERO 9. MODULO FOOTER 10. MODULO LOOP PROGETTI 11. COMPONENTI UI (migrati dai CSS personalizzati dei widget) REGOLE DI PROGETTO a) I token di layout sono LUNGHEZZE ASSOLUTE, mai percentuali. Una percentuale dentro una custom property viene risolta sull'elemento che la USA, non su quello che la dichiara. b) I token si dichiarano su .e-con, cioe' su ogni container Elementor: e' l'unico scope in cui esiste --container-max-width. c) Le larghezze si impostano via --width, la variabile nativa dei container Elementor. Il campo Larghezza nel pannello deve restare vuoto sui container che usano le classi ct-col-*. d) !important solo dove documentato con il motivo. e) Alcune proprieta' di Elementor (--display, --e-con-grid-template-*) sono scritte con selettori per-elemento a specificita' 0,3,0 e non sono sovrascrivibili da classe: vanno impostate dal pannello. CHANGELOG 1.13.0 Utility di misura per i titoli: ct-measure-* e ct-wmax-*. 1.12.1 Specificita' dei modificatori ct-in-*: senza .e-con perdevano contro i valori base e non avevano alcun effetto. 1.12.0 ct-section-sx torna ad avere --ct-edge come rientro destro base. Aggiunte le classi ct-in-sx-e / ct-in-dx-e. 1.11.0 Rientro dei blocchi a fuoriuscita reso parametrico: --ct-in-sx e --ct-in-dx, con le classi ct-in-sx-N / ct-in-dx-N. 1.10.0 Collocazione del blocco FSC (pagina Tecnologie). 1.9.0 Scala del ritmo verticale (--ct-sp-lg/md/sm) e classi ct-pad-*. Uniformato il padding delle sezioni su home e chi siamo. 1.8.1 Rimossi i moduli aggiunti per la pagina Chi siamo. 1.8.0 Utility ct-balance e ct-pretty per l'andata a capo dei titoli. 1.7.0 Tracce dell'hero spostate nei pannelli, sezione 8 svuotata. 1.6.0 bg-line-under: specificita' corretta. Rientro di ct-section-sx/dx portato a una colonna intera, token --ct-split-section rimosso. 1.5.0 Ripristinati gli !important sul menu a discesa: le regole per-elemento di Elementor hanno specificita' maggiore. 1.4.0 Nuova primitiva ct-vsplit (griglia a due fasce). Header ristrutturato: il blocco logo copre due righe, la colonna destra sparisce. Stacco parametrico via --ct-split-header. 1.3.0 Bordi del footer spostati nei pannelli Elementor. Rientro laterale applicato ai contenitori dei widget e non alle fasce, cosi' i bordi divisori arrivano ai lati della pagina. 1.2.0 ct-vgrid resa funzionante: tracce esposte come --ct-vgrid-tracks e impostate dal pannello, minmax(0,1fr) al posto di 1fr. Modulo footer riscritto sulla griglia virtuale a tre fasce. 1.1.0 Core in lunghezze assolute, token su .e-con, CSS dei widget migrato nel tema. -------------------------------------------------------------------------- */ /* ========================================================================== 1. TOKEN GLOBALI ========================================================================== */ :root{ /* Larghezza della scrollbar, scritta da JS (snippet in ). */ --ct-sbw: 0px; /* Viewport reale, scrollbar esclusa. Base di tutti i calcoli. */ --ct-vw: calc(100dvw - var(--ct-sbw)); /* Rientro laterale del contenuto, per fascia. Desktop: DEVE corrispondere a Kit > Layout > Container padding, perche' entra nel calcolo di --ct-content. Tablet e mobile: e' lo spazio minimo dai bordi pagina. */ --ct-edge-desktop: 20px; /* >= 1025px */ --ct-edge-tablet: 20px; /* 768 - 1024px */ --ct-edge-mobile: 20px; /* <= 767px */ --ct-edge: var(--ct-edge-desktop); /* Scala del ritmo verticale delle sezioni. Tre soli valori, con il responsive gia' incorporato: cambiando qui si regola la spaziatura di tutto il sito. Si applicano con le classi ct-pad-lg / ct-pad-md / ct-pad-sm (sezione 6). */ --ct-sp-lg: 80px; --ct-sp-md: 60px; --ct-sp-sm: 40px; /* Punti di stacco delle colonne, come frazione del contenuto centrato. */ --ct-split-header: .2; --ct-split-hero: .1; --ct-split-footer: .2; /* Spessore del finto grassetto (vedi sezione 11). */ --ct-fauxbold: .3px; } @media (max-width: 1024px){ :root{ --ct-edge: var(--ct-edge-tablet); --ct-sp-lg: 60px; --ct-sp-md: 45px; --ct-sp-sm: 30px; } } @media (max-width: 767px){ :root{ --ct-edge: var(--ct-edge-mobile); --ct-sp-lg: 45px; --ct-sp-md: 35px; --ct-sp-sm: 25px; } } /* Token derivati: disponibili su ogni container e su tutto il sottoalbero. */ .e-con{ --ct-content: min(var(--container-max-width, 1440px), calc(var(--ct-vw) - var(--ct-edge) * 2)); --ct-gutter: calc((var(--ct-vw) - var(--ct-content)) / 2); --ct-col: calc(var(--ct-content) / 12); /* Tracce della griglia virtuale a 12 colonne (vedi sezione 3). */ --ct-vgrid-tracks: var(--ct-gutter) repeat(12, minmax(0, 1fr)) var(--ct-gutter); /* Tracce della griglia a due fasce (vedi sezione 3bis). Prima traccia: gutter + quota --ct-p del contenuto. Seconda: il resto. */ --ct-split-tracks: calc(var(--ct-gutter) + var(--ct-content) * var(--ct-p, .5)) minmax(0, 1fr); } /* ========================================================================== 2. CONTAINER VIRTUALE (primitiva a 2 colonne) Riga full-bleed divisa in due colonne il cui punto di stacco e' definito come frazione del contenuto centrato. Da applicare SOLO a container full-width (content_width: full, padding orizzontale 0). ========================================================================== */ .ct-vcontainer { --ct-p: .5; } .ct-vcontainer.ct-header{ --ct-p: var(--ct-split-header); } .ct-vcontainer.ct-hero { --ct-p: var(--ct-split-hero); } .ct-vcontainer.ct-footer{ --ct-p: var(--ct-split-footer); } /* I flex item hanno min-width:auto e non possono restringersi sotto il loro min-content. Deve valere a OGNI viewport. */ .ct-col-left, .ct-col-right{ min-width: 0; } /* ========================================================================== 3. GRIGLIA VIRTUALE A 12 COLONNE (primitiva) Riga full-bleed con tracce [gutter][12 colonne][gutter]. I figli si collocano con grid-column e possono sconfinare nei gutter restando comunque agganciati alla griglia. COME SI USA Nel pannello Elementor: container su "Griglia", campo Colonne con unita' custom e valore esatto var(--ct-vgrid-tracks) piu' la classe ct-vgrid. Non e' possibile forzare display:grid da CSS: Elementor scrive --display con selettori per-elemento a specificita' maggiore. Verificato in pagina. LINEE DELLA GRIGLIA linea 1 bordo sinistro del viewport linea 2 linea del container (inizio contenuto) linee 2..14 le 12 colonne di contenuto linea 14 linea del container (fine contenuto) linea 15 bordo destro del viewport Quindi la colonna di contenuto N va dalla linea N+1 alla linea N+2. minmax(0, 1fr) e non 1fr: 1fr ha minimo "auto", quindi un figlio piu' largo della traccia la gonfia e sfonda la griglia. Verificato in pagina. Sotto i 1025px la griglia passa a una colonna sola dal pannello (Colonne tablet e mobile = 1fr) e i figli si impilano. ========================================================================== */ @media (min-width: 1025px){ /* I figli diretti non devono poter gonfiare la propria traccia. */ .ct-vgrid > *{ min-width: 0; } /* Ancoraggio pronto: da una linea del container a quella opposta. */ .ct-vgrid > .ct-inside{ grid-column: 2 / 14; } } /* ========================================================================== 3bis. GRIGLIA A DUE FASCE (primitiva) Variante a griglia di ct-vcontainer: due sole tracce, con lo stacco definito da --ct-p come frazione del contenuto centrato. Rispetto alla versione flex permette a un figlio di occupare piu' righe (nell'header il blocco logo copre sia la riga servizio sia la riga menu), e non soffre di flex-shrink. COME SI USA Pannello: container su "Griglia", Colonne con unita' custom e valore esatto var(--ct-split-tracks) piu' la classe ct-vsplit e la classe di sezione che imposta --ct-p. ========================================================================== */ @media (min-width: 1025px){ .ct-vsplit > *{ min-width: 0; } } /* ========================================================================== 4. COLONNE E ALLINEAMENTI ========================================================================== */ @media (min-width: 1025px){ .e-con.ct-col-left { --width: calc(var(--ct-gutter) + var(--ct-content) * var(--ct-p)); } .e-con.ct-col-right{ --width: calc(var(--ct-gutter) + var(--ct-content) * (1 - var(--ct-p))); } .ct-vcontainer > .ct-col-left, .ct-vcontainer > .ct-col-right{ flex: 0 0 auto; } /* Portano il contenuto sulla linea del container, a qualsiasi profondita'. */ .e-con.ct-align-left { padding-left: var(--ct-gutter); } .e-con.ct-align-right{ padding-right: var(--ct-gutter); } } /* ========================================================================== 5. BLOCCHI A FUORIUSCITA SINGOLA ========================================================================== */ /* Blocco che esce da un lato solo. Il bordo esterno arriva al bordo pagina, quello interno si ferma sulla linea del container. Il contenuto interno si posiziona con DUE rientri, misurati sempre dalle linee del container e sempre in senso fisico (sinistra e destra), a prescindere da quale lato fuoriesce: --ct-in-sx quanto il contenuto rientra dalla linea SINISTRA --ct-in-dx quanto rientra dalla linea DESTRA Valori base: una colonna sul lato ancorato al container, e sul lato opposto 0 per ct-section-dx, --ct-edge per ct-section-sx (vedi sotto). Si cambiano con ct-in-sx-N e ct-in-dx-N, dove N e' il numero di colonne (0 1 2 3) oppure "e" per il margine di sicurezza. */ @media (min-width: 1025px){ .e-con.ct-section-sx, .e-con.ct-section-dx{ --width: calc(var(--ct-gutter) + var(--ct-content)); } /* Ancorata alla linea sinistra del container, esce dal bordo destro. A destra il rientro base e' 0: il contenuto finisce esattamente sulla linea del container, allineato al resto del sito, e oltre c'e' comunque tutto il gutter di sfondo. */ .e-con.ct-section-dx{ --ct-in-sx: var(--ct-col); --ct-in-dx: 0px; margin-left: var(--ct-gutter); padding-left: var(--ct-in-sx); padding-right: calc(var(--ct-gutter) + var(--ct-in-dx)); } /* Esce dal bordo sinistro, ancorata alla linea destra del container. A destra il rientro base e' --ct-edge: li' il bordo del blocco coincide con la linea del container, quindi senza respiro il contenuto ci finirebbe addosso. */ .e-con.ct-section-sx{ --ct-in-sx: var(--ct-col); --ct-in-dx: var(--ct-edge); margin-right: var(--ct-gutter); padding-left: calc(var(--ct-gutter) + var(--ct-in-sx)); padding-right: var(--ct-in-dx); } /* Modificatori del rientro, in colonne di griglia. .e-con nel selettore: serve la stessa specificita' 0,2,0 dei valori base qui sopra, altrimenti il modificatore perde e non fa nulla. Vengono dopo nel foglio, quindi a parita' di specificita' vincono loro. */ .e-con.ct-in-sx-0{ --ct-in-sx: 0px; } .e-con.ct-in-sx-1{ --ct-in-sx: var(--ct-col); } .e-con.ct-in-sx-2{ --ct-in-sx: calc(var(--ct-col) * 2); } .e-con.ct-in-sx-3{ --ct-in-sx: calc(var(--ct-col) * 3); } .e-con.ct-in-sx-e{ --ct-in-sx: var(--ct-edge); } .e-con.ct-in-dx-0{ --ct-in-dx: 0px; } .e-con.ct-in-dx-1{ --ct-in-dx: var(--ct-col); } .e-con.ct-in-dx-2{ --ct-in-dx: calc(var(--ct-col) * 2); } .e-con.ct-in-dx-3{ --ct-in-dx: calc(var(--ct-col) * 3); } .e-con.ct-in-dx-e{ --ct-in-dx: var(--ct-edge); } } /* ========================================================================== 6. UTILITY ========================================================================== */ /* Pavimento laterale sotto i 1025px, dove il core non e' attivo. */ @media (max-width: 1024px){ .e-con.ct-safe{ padding-left: var(--ct-edge); padding-right: var(--ct-edge); } } /* --- Ritmo verticale delle sezioni ---------------------------------------- Una classe al posto dei padding ripetuti sezione per sezione: il comportamento responsive arriva dai token, non da override nei pannelli. ct-pad-lg respiro ampio 80 / 60 / 45 ct-pad-md standard 60 / 45 / 35 ct-pad-sm compatto 40 / 30 / 25 Le varianti -top e -bottom servono dove la sezione ha una sovrapposizione su un lato e il padding va solo dall'altro. Il rientro orizzontale e' --ct-edge, cosi' i container boxed non toccano mai i bordi pagina. Per le sezioni full-bleed il cui contenuto e' gia' allineato da ct-section-sx/dx o ct-align-*, aggiungere ct-pad-flush. .e-con nel selettore: serve 0,2,0 per battere lo shorthand padding della regola base .e-con di Elementor, caricata dopo il child theme. -------------------------------------------------------------------------- */ .e-con.ct-pad-lg{ padding: var(--ct-sp-lg) var(--ct-edge); } .e-con.ct-pad-md{ padding: var(--ct-sp-md) var(--ct-edge); } .e-con.ct-pad-sm{ padding: var(--ct-sp-sm) var(--ct-edge); } .e-con.ct-pad-lg-top{ padding: var(--ct-sp-lg) var(--ct-edge) 0; } .e-con.ct-pad-md-top{ padding: var(--ct-sp-md) var(--ct-edge) 0; } .e-con.ct-pad-sm-top{ padding: var(--ct-sp-sm) var(--ct-edge) 0; } .e-con.ct-pad-lg-bottom{ padding: 0 var(--ct-edge) var(--ct-sp-lg); } .e-con.ct-pad-md-bottom{ padding: 0 var(--ct-edge) var(--ct-sp-md); } .e-con.ct-pad-sm-bottom{ padding: 0 var(--ct-edge) var(--ct-sp-sm); } /* Azzera il rientro orizzontale, mantenendo quello verticale. */ .e-con.ct-pad-flush{ padding-inline: 0; } /* Collocazione del blocco certificazione FSC sulla griglia a 12 colonne. Logo alle colonne 4-5, testo alle colonne 6-12 (Figma: x 719 e 975). */ @media (min-width: 1025px){ .ct-fsc-logo{ grid-column: 5 / 7; } .ct-fsc-text{ grid-column: 7 / 13; } } /* Rientri agganciati alla griglia a 12 colonne. */ @media (min-width: 1025px){ .e-con.ct-inset-1{ padding-left: var(--ct-col); } .e-con.ct-inset-2{ padding-left: calc(var(--ct-col) * 2); } } /* Layering delle sezioni sovrapposte. Altezza e transform di ct-underlayer-shift sono scritti da JS. */ @media (min-width: 1025px){ .ct-overlayer-shift { position: relative; z-index: 2; } .ct-underlayer-shift{ position: relative; z-index: 1; width: 100%; } /* .e-con nel selettore: serve 0,2,0 per battere .e-con{width:var(--width)} di Elementor, caricato dopo il foglio del child theme. */ .e-con.ct-bg-line-under, .e-con.bg-line-under{ width: calc(var(--ct-vw) - (var(--ct-col) * 4 - 10px) - var(--ct-gutter)); } } /* IMG header per mobile. */ .ct-img-header-mob img{ aspect-ratio: 1.7; object-fit: cover; } /* --- Andata a capo dei titoli --------------------------------------------- text-wrap: balance pareggia la lunghezza delle righe. Ottimo sui titoli brevi (fino a poche righe), evita la riga orfana corta. text-wrap: pretty non pareggia, ma impedisce che l'ultima riga resti con una sola parola. Adatto a titoli lunghi e ai paragrafi. Si applicano al widget dalla voce Classi CSS, in Avanzate. -------------------------------------------------------------------------- */ .ct-balance, .ct-balance .elementor-heading-title{ text-wrap: balance; } .ct-pretty, .ct-pretty .elementor-heading-title, .ct-pretty p{ text-wrap: pretty; } /* Evita che una parola lunghissima sfondi il suo contenitore. */ .ct-balance, .ct-pretty{ overflow-wrap: break-word; } /* --- Misura: quanto e' lunga la riga ------------------------------------- E' la leva che conta davvero. text-wrap: balance pareggia le righe, ma se il titolo puo' occupare tutta la larghezza le righe restano troppo lunghe e il bilanciamento non si nota. Limitando la misura, balance ha qualcosa su cui lavorare. L'unita' ch e' la larghezza dello zero nel font corrente: la misura scala da sola con la dimensione del testo, anche dentro un clamp(). Indicativamente, un titolo si legge bene fra 20 e 40 caratteri per riga, un paragrafo fra 45 e 75. Si applicano al widget da Avanzate > Classi CSS, insieme a ct-balance. -------------------------------------------------------------------------- */ .ct-measure-xs{ --ct-measure: 16ch; } /* titoli molto corti, due o tre parole */ .ct-measure-sm{ --ct-measure: 24ch; } /* titoli di sezione */ .ct-measure-md{ --ct-measure: 32ch; } /* titoli lunghi */ .ct-measure-lg{ --ct-measure: 48ch; } /* sottotitoli e paragrafi corti */ .ct-measure-xl{ --ct-measure: 65ch; } /* paragrafi */ .ct-measure-xs, .ct-measure-sm, .ct-measure-md, .ct-measure-lg, .ct-measure-xl, .e-con.ct-measure-xs, .e-con.ct-measure-sm, .e-con.ct-measure-md, .e-con.ct-measure-lg, .e-con.ct-measure-xl{ max-width: var(--ct-measure); } /* Misura agganciata alla griglia invece che al font, quando il titolo deve finire su una linea precisa di colonna. */ .ct-wmax-4{ max-width: calc(var(--ct-col) * 4); } .ct-wmax-5{ max-width: calc(var(--ct-col) * 5); } .ct-wmax-6{ max-width: calc(var(--ct-col) * 6); } .ct-wmax-7{ max-width: calc(var(--ct-col) * 7); } .ct-wmax-8{ max-width: calc(var(--ct-col) * 8); } /* Sotto i 1025px il limite di misura si toglie: lo spazio e' gia' poco. */ @media (max-width: 1024px){ .ct-measure-xs, .ct-measure-sm, .ct-measure-md, .ct-measure-lg, .ct-measure-xl, .e-con.ct-measure-xs, .e-con.ct-measure-sm, .e-con.ct-measure-md, .e-con.ct-measure-lg, .e-con.ct-measure-xl, .ct-wmax-4, .ct-wmax-5, .ct-wmax-6, .ct-wmax-7, .ct-wmax-8{ max-width: none; } } /* Sillabazione automatica. Opzionale, utile solo nelle colonne strette su mobile. Richiede lang="it" sull'elemento html, che Polylang imposta. I numeri sono: minimo di lettere nella parola, prima del trattino, dopo. */ .ct-hyphens{ hyphens: auto; hyphenate-limit-chars: 8 4 4; } /* Gli SVG inline ereditano il colore del testo. */ .ct-svgreset svg path, .svgreset svg path{ fill: currentColor; } /* Velo scuro in gradiente sulle sezioni con immagine di sfondo. */ @media (max-width: 1024px){ .ct-fade-top{ position: relative; } .ct-fade-top::after{ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 90%); } } /* ========================================================================== 7. MODULO HEADER Lo stacco del blocco logo si regola da --ct-split-header (sezione 1): .2 = 841px valore storico, fuori griglia .25 = 912,5px linea 3 della griglia a 12 colonne ========================================================================== */ .ct-header-bar{ --ct-p: var(--ct-split-header); } @media (min-width: 1025px){ /* Il blocco logo copre entrambe le righe; servizio e menu stanno nella seconda traccia, una sopra l'altra. */ .ct-header-bar > .ct-header-brand { grid-column: 1; grid-row: 1 / 3; } .ct-header-bar > .ct-header-service{ grid-column: 2; grid-row: 1; } .ct-header-bar > .ct-header-menu { grid-column: 2; grid-row: 2; } } /* Barra del menu principale: trasparente in home, colorata da sticky attivo. */ .ct-menubar{ transition: background-color .4s ease-in-out; } /* !important necessario: Elementor scrive il colore di sfondo del container con un selettore per-elemento a specificita' 0,3,0. */ body.home .ct-menubar{ background-color: transparent !important; } body.home .elementor-sticky--effects .ct-menubar{ background-color: var(--e-global-color-secondary) !important; } /* Menu a discesa: voci a larghezza contenuto, impilate. !important necessario su sfondo e padding: Elementor scrive background_color_dropdown_item e i padding delle voci con selettori per-elemento a specificita' 0,3,0, che battono queste classi. */ .ct-menu-main .elementor-nav-menu--dropdown{ background-color: transparent !important; } .ct-menu-main .elementor-nav-menu--dropdown li{ background-color: var(--e-global-color-primary) !important; margin-bottom: 5px; width: auto !important; /* la voce si stringe sul testo */ display: table !important; /* invece di occupare tutta la larghezza */ clear: both; /* nessun affiancamento */ } .ct-menu-main .elementor-nav-menu--dropdown a{ padding: 10px 15px !important; } /* ========================================================================== 8. MODULO HERO Le tracce delle due colonne (1fr / righe 4fr 1fr) sono impostate direttamente nei pannelli, come tutte le altre griglie del progetto. Qui non serve nulla. ========================================================================== */ /* ========================================================================== 9. MODULO FOOTER I BORDI NON STANNO QUI. Sono impostati nei pannelli Elementor, cosi' restano regolabili per device senza toccare il CSS. Qui restano solo la collocazione sulla griglia e il rientro laterale. ========================================================================== */ @media (min-width: 1025px){ /* Collocazione delle fasce sulla griglia virtuale. E' l'unico punto in cui si regolano le proporzioni del footer. marchio linea 1 -> 4 gutter + colonne 1-2 link linea 4 -> 12 colonne 3-10 cert linea 12 -> 15 colonne 11-12 + gutter info linea 2 -> 8 colonne 1-6 copyright linea 8 -> 14 colonne 7-12 */ .ct-footer-top > .ct-footer-brand{ grid-column: 1 / 4; } .ct-footer-top > .ct-footer-links{ grid-column: 4 / 12; } .ct-footer-top > .ct-footer-cert { grid-column: 12 / -1; } .ct-footer-bottom > .ct-footer-info{ grid-column: 2 / 8; } .ct-footer-bottom > .ct-footer-copy{ grid-column: 8 / 14; } } /* Sotto i 1025px le fasce si impilano (griglia a 1fr dal pannello) e il contenuto rientra di --ct-edge. IMPORTANTE: il rientro va sul contenitore che porta i widget, MAI sulla fascia che porta un bordo. Il border-box include il padding, quindi un bordo resta a tutta larghezza anche con il padding sopra; ma se il padding sta sul genitore, il figlio che porta il bordo parte gia' rientrato e il bordo non tocca i lati della pagina. */ @media (max-width: 1024px){ .ct-footer-brand > .e-con, .e-con.ct-footer-links, .e-con.ct-footer-cert, .ct-footer-bottom > .e-con{ padding-left: var(--ct-edge); padding-right: var(--ct-edge); } } /* ========================================================================== 10. MODULO LOOP PROGETTI La griglia a 12 colonne arriva dal widget (Colonne = 12), non da qui. ========================================================================== */ @media (min-width: 1025px){ .ct-progetti-grid .elementor-loop-container > div:has(> .ct-progetti-cell):nth-of-type(4n+1), .ct-progetti-grid .elementor-loop-container > div:has(> .ct-progetti-cell):nth-of-type(4n){ grid-column: span 7; } .ct-progetti-grid .elementor-loop-container > div:has(> .ct-progetti-cell):nth-of-type(4n+2), .ct-progetti-grid .elementor-loop-container > div:has(> .ct-progetti-cell):nth-of-type(4n+3){ grid-column: span 5; } .ct-progetti-grid div:has(> .ct-progetti-cell):nth-of-type(4n+2) .ct-progetti-cell{ padding-right: var(--ct-col); } .ct-progetti-grid div:has(> .ct-progetti-cell):nth-of-type(4n+3) .ct-progetti-cell{ padding-left: var(--ct-col); } .ct-loop-img-pro img{ max-height: 430px; } } /* Testo delle card sopra l'immagine, solo in home. */ .home .ct-loop-txt-cnt{ color: #fff; text-shadow: 0px 4px 3px rgba(0,0,0,.8), 0px 8px 13px rgba(0,0,0,.4), 0px 18px 23px rgba(0,0,0,.2); } /* ========================================================================== 11. COMPONENTI UI Migrati qui dai CSS personalizzati dei singoli widget. ========================================================================== */ /* --- Finto grassetto ------------------------------------------------------- Simula il grassetto con una text-shadow laterale invece di cambiare font-weight: evita il salto di layout dovuto all'avanzamento diverso del peso bold. Lo spessore si regola con --ct-fauxbold nel contesto. !important necessario: sovrascrive la tipografia hover di Elementor, che ha specificita' maggiore. -------------------------------------------------------------------------- */ .ct-fauxbold a, .ct-fauxbold .elementor-item, .ct-fauxbold .sub-menu a, .ct-btn-text a, .btn-hover a{ transition: text-shadow .2s ease-in-out; } .ct-fauxbold .elementor-item:hover, .ct-fauxbold .elementor-item.elementor-item-active, .ct-fauxbold .sub-menu a:hover, .ct-fauxbold .sub-menu .current-menu-item > a, .ct-fauxbold .sub-menu .current_page_item > a, .ct-fauxbold a:hover, .ct-fauxbold .cpel-switcher__lang--active a, .ct-btn-text a:hover, .btn-hover a:hover{ font-weight: normal !important; text-shadow: var(--ct-fauxbold) 0 0 currentColor, calc(var(--ct-fauxbold) * -1) 0 0 currentColor !important; } /* Taratura per contesto */ .ct-menu-service { --ct-fauxbold: .1px; } .ct-menu-main { --ct-fauxbold: .3px; } .ct-menu-main .sub-menu { --ct-fauxbold: .1px; } .ct-lang { --ct-fauxbold: .4px; } .ct-btn-text, .btn-hover { --ct-fauxbold: .2px; } /* --- Sottolineatura animata (selettore lingua) ---------------------------- */ .ct-underline-anim a{ position: relative; display: inline-block; } .ct-underline-anim a::after{ content: ''; position: absolute; left: 0; bottom: -4px; /* distanza dal testo */ height: 1.5px; /* spessore della linea */ width: 100%; background-color: currentColor; opacity: 0; transform: scaleX(0); transition: transform .25s ease-in-out, opacity .25s ease-in-out; } .ct-underline-anim a:hover::after, .ct-underline-anim .cpel-switcher__lang--active a::after{ opacity: 1; transform: scaleX(1); } /* --- Bottoni testuali con icona ------------------------------------------- */ .ct-btn-text .elementor-button-icon svg, .btn-hover .elementor-button-icon svg{ width: 100%; } .ct-btn-svg-cc { svg path{ fill: currentColor; } }