/* ============================================================ Integrazione con Woodmart. Questo file si scrive a mano: tg-base.css e' generato da build-css.py e viene sovrascritto. Serve perche' le sezioni del template sono disegnate a tutta larghezza, mentre Woodmart le infila nel suo container centrato con padding laterale. ============================================================ */ /* Senza JS le sezioni resterebbero a opacity 0 (le rivela tg-main.js). La classe tg-js viene messa nel : se manca, mostriamo tutto. */ html:not(.tg-js) .tg-page [data-reveal] { opacity: 1 !important; transform: none !important; } /* Inter come font delle nostre sezioni anche dove Woodmart imporrebbe il suo. */ .tg-page h1, .tg-page h2, .tg-page h3, .tg-page h4, .tg-page h5, .tg-page p, .tg-page a, .tg-page span, .tg-page li, .tg-page div { font-family: var(--font); } /* Woodmart mette text-transform e letter-spacing sui titoli: le nostre sezioni hanno la loro scala tipografica. Il tracking dei titoli e' NEGATIVO, come nella company profile: piu' il corpo cresce, piu' le lettere vanno avvicinate, se no un titolo grande sembra sparpagliato. Misurato sulla copertina del profilo: la riga "alla valutazione del" sta in 1920 px con un'altezza d'inchiostro di 197 px, rapporto 9,75; Inter allo stesso rapporto d'inchiostro sta in 11,60. La differenza, spalmata sulle lettere, e' circa -0,06em - cioe' i "5 px" a occhio sul titolo della hero, che a 68 px fanno 4,1 px. A quel valore il titolo della home va a capo esattamente come nel profilo. Sotto, i corpi piccoli: la stessa frazione stringerebbe troppo, quindi la scala scende con la dimensione. */ .tg-page h1, .tg-page h2, .tg-page h3, .tg-page h4 { text-transform: none; letter-spacing: -0.02em; } /* I titoli grandi. Quelli dei moduli del tema (`.tg-title .title`) hanno la loro riga in tg-modules.css, che si carica dopo: il valore e' lo stesso. */ .tg-page h1, .tg-page h2, .tg-schede-sezione__tit, .tg-storia__titolo { letter-spacing: -0.035em; } /* Il corpo display - la testata di pagina - e' il piu' stretto di tutti. */ .tg-headline.tg-headline--display, .tg-title--band .title { letter-spacing: -0.06em; } /* ---------- Split text sui titoli ---------- Ogni parola e' una maschera con dentro il pezzo che scorre. L'overflow taglierebbe i discendenti (g, p, q): il padding sotto lascia spazio e il margine negativo lo riassorbe, cosi' l'interlinea resta quella di prima. */ /* Senza il prefisso `.tg-page`: dal 24/08 lo split si applica anche ai titoli dei moduli del tema (`.tg-title .title`), che vivono fuori da quello scope. La classe `.tg-split` la mette solo il nostro JS, quindi non prende altro. */ .tg-split .tg-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.2em; margin-bottom: -0.2em; } .tg-split .tg-word-in { display: inline-block; will-change: transform; } /* Il marquee passa sotto controllo di GSAP: via l'animazione CSS. */ .tg-page .marquee-track.tg-marquee-js { animation: none !important; } /* ---------- Modulo titolo animato ---------- La sfumatura sta sul contenitore .tg-grad e viene ritagliata sul testo, cosi' attraversa tutte le parole marcate invece di ricominciare a ogni parola. Il background e' piu' largo dell'elemento (250%) e scorre: e' quello che da' il movimento senza animare colori uno a uno. Blu e arancio sono quasi complementari: qualunque sfumatura diretta fra i due passa da un neutro slavato, e con le tinte distribuite in modo uniforme il titolo ci restava dentro per meta' del tempo (provato anche passando per le due tinte chiare del brand: a quella chiarezza il punto di mezzo sbiadisce uguale). Quindi la rampa e' fatta di ripiani: quasi tutto il percorso e' tinta piena del brand, e il passaggio da una all'altra e' una banda stretta che attraversa il titolo. E' quella banda il movimento che si vede. La rampa comincia e finisce sullo stesso colore perche' il fondo e' largo 250% e si ripete: con estremi diversi si vedeva uno stacco netto a ogni giro, nel punto dove una piastrella incontra la successiva. */ .tg-page .tg-grad, .tg-headline .tg-grad, .tg-page .tg-grad .tg-word-in, .tg-headline .tg-grad .tg-word-in { background-image: linear-gradient( 100deg, var(--tg-g1, #4CC7FF) 0%, var(--tg-g1, #4CC7FF) 38%, var(--orange-soft, #FFB185) 45%, var(--tg-g2, #FF8845) 50%, var(--tg-g2, #FF8845) 88%, var(--blue-soft, #9CE0FF) 95%, var(--tg-g1, #4CC7FF) 100% ); background-size: 250% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-style: normal; } /* Le discendenti restavano SENZA COLORE (la "g" di "progetto" sembrava tagliata, segnalato il 18/09). Non e' la maschera dello split: e' `background-clip: text`, che dipinge solo dentro al riquadro dello sfondo. Con `line-height` sotto l'uno il riquadro e' piu' basso del disegno delle lettere e l'inchiostro che sporge sotto non riceve nessun fondo, quindi sparisce. Si allarga il riquadro con un padding, riassorbito da un margine uguale e contrario perche' l'interlinea non cambi. */ .tg-page .tg-grad .tg-word-in, .tg-headline .tg-grad .tg-word-in, .tg-page .tg-grad, .tg-headline .tg-grad { padding-bottom: 0.16em; margin-bottom: -0.16em; } /* Ciclo continuo: e' il modo predefinito (24/08). Il fondo scorre senza fine di una piastrella intera, cosi' il giro si chiude dove era partito. Le tre misure (larghezza del fondo e i due estremi della corsa) le scrive tgLoopMetrics in tg-main.js, in pixel e uguali per tutte le parole: e' quello che tiene la banda di colore unita sulla frase invece di farla comparire dentro ogni parola per conto suo. I valori qui sotto sono il ripiego di quando il JS non gira. */ .tg-page .tg-headline--gradloop .tg-grad, .tg-headline--gradloop .tg-grad, .tg-page .tg-headline--gradloop .tg-grad .tg-word-in, .tg-headline--gradloop .tg-grad .tg-word-in { background-size: var(--tg-lw, 250%) 100%; animation: tg-grad-shift var(--tg-g-speed, 20s) linear infinite; } /* ---------- Una passata sola, quando il titolo entra a schermo ---------- Tre problemi risolti insieme. 1) Dopo lo split ogni parola e' un box a se' e dipinge il proprio fondo: con la sfumatura "per elemento" il titolo diventava una fila di mini-sfumature invece di una sola che lo attraversa. Qui il fondo e' grande quanto TUTTO il titolo e ogni parola lo sposta della propria distanza dal bordo sinistro. Le misure le calcola tg-main.js, l'unico a conoscere dove finiscono le parole dopo il ritorno a capo. 2) Blu e arancio sono quasi complementari: una sfumatura diretta fra i due passa da un grigio slavato, e il titolo si fermava proprio li'. Per questo il fondo e' largo il doppio del titolo e la seconda meta' e' tinta unita: la passata attraversa la parte sfumata e si posa sul colore pieno. 3) A riposo, quindi, ogni frase marcata torna alla sua tinta piatta del brand - blu la prima, arancio la seconda - che e' come il titolo era disegnato prima di diventare un modulo. Il movimento resta solo nell'ingresso, che e' quello che serviva. La classe tg-sweep la mette il JS all'ingresso: nel PHP l'animazione partirebbe al caricamento, cioe' prima che l'utente veda il titolo. */ .tg-page.tg-headline--gradonce .tg-grad, .tg-headline--gradonce .tg-grad, .tg-page.tg-headline--gradonce .tg-grad .tg-word-in, .tg-headline--gradonce .tg-grad .tg-word-in { background-image: linear-gradient( 100deg, var(--tg-from, #FF8845) 0%, var(--tg-own, #4CC7FF) 42%, var(--tg-own, #4CC7FF) 100% ); background-size: var(--tg-gw, 200%) 100%; background-position: var(--tg-xr, 100%) 50%; } .tg-page.tg-headline--gradonce.tg-sweep .tg-grad, .tg-headline--gradonce.tg-sweep .tg-grad, .tg-page.tg-headline--gradonce.tg-sweep .tg-grad .tg-word-in, .tg-headline--gradonce.tg-sweep .tg-grad .tg-word-in { /* Curva quasi diagonale, non ease-out. Con cubic-bezier(.22,1,.36,1) il 90% del movimento stava nel primo mezzo secondo: allungare la durata non serviva a niente, la passata restava impercettibile. Cosi' il colore attraversa il titolo a velocita' quasi costante e la transizione si vede davvero. L'ultimo tratto del percorso e' gia' dentro la tinta piena, quindi non c'e' nessuno scatto alla fine nonostante la curva quasi lineare. */ animation: tg-grad-sweep var(--tg-g-speed, 8s) cubic-bezier(.35, .25, .4, .9) 1 both; } @keyframes tg-grad-sweep { from { background-position: var(--tg-x0, 0%) 50%; } to { background-position: var(--tg-xr, 100%) 50%; } } /* Da sinistra a destra: la posizione del fondo CRESCE, quindi il disegno scorre verso destra e la banda di colore attraversa il titolo nel verso in cui lo si legge. Partendo da --tg-lx1 e arrivando a --tg-lx0 si percorre esattamente una piastrella, quindi il giro si chiude dove era cominciato. Invertire i due estremi e' tutto quello che serve per cambiare verso. */ @keyframes tg-grad-shift { from { background-position: var(--tg-lx1, -250%) 50%; } to { background-position: var(--tg-lx0, 0%) 50%; } } /* La maschera dello split non deve dipingere nulla: il ritaglio del gradiente sta sulla parola interna, che e' l'elemento che porta il testo. */ .tg-page .tg-grad .tg-word, .tg-headline .tg-grad .tg-word { background: none; } .tg-headline { margin: 0; text-transform: none; letter-spacing: -0.035em; font-family: var(--font); } /* Doppia classe (non una sola) perche' una regola del tema sui titoli ha specificita' 0,1,1 e vincerebbe: il modulo rendeva 76,8px dentro le sezioni vecchie e 115,2px dentro una colonna del builder, cioe' misure diverse a seconda di dove veniva messo. La misura qui e' quella gia' approvata. */ /* Misurato sul titolo della home ("Dalla misura del vento alla valutazione del potenziale eolico."), che è il più lungo del sito: a 76,8px andava a 5 righe su qualunque larghezza di colonna, a 68px sta in 4 sia a 1440 che a 1280. Il minimo scende a 38,4px per la stessa ragione sul telefono: a 41,6px il titolo occupava 5 righe già sotto i 400px di colonna. */ .tg-headline.tg-headline--display { font-size: clamp(2.4rem, 4.8vw, 4.25rem); line-height: 0.94; } .tg-headline--h2 { font-size: clamp(2.1rem, 4.6vw, 4rem); line-height: 1.04; } .tg-headline--h3 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.15; } .tg-align-left { text-align: left; } .tg-align-center { text-align: center; } .tg-align-right { text-align: right; } @media (prefers-reduced-motion: reduce) { .tg-page .tg-grad, .tg-headline .tg-grad, .tg-page .tg-grad .tg-word-in, .tg-headline .tg-grad .tg-word-in { animation: none !important; } } /* ---------- Testo che si colora allo scroll ---------- La classe .tg-fill la mette tg-main.js: se il JS non gira (o manca GSAP) il paragrafo resta del suo colore normale invece di restare grigio. I due colori sono variabili: si regolano da qui, senza toccare il JS. */ .tg-page .tg-fill { --tg-fill-from: #C3BCB3; /* grigio caldo, coerente con --gray */ --tg-fill-to: var(--ink); /* nero del brand */ } .tg-page .tg-fill .tg-fw { color: var(--tg-fill-from); } /* Le parole d'accento tengono il colore che avevano. */ .tg-page .tg-fill .tg-fw.tg-fw-keep { color: inherit; } @media (prefers-reduced-motion: reduce) { .tg-page .tg-fill .tg-fw { color: var(--tg-fill-to); } } /* ---------- Larghezza della griglia ---------- 1240px faceva sembrare le sezioni strette, anche perche' erano piu' strette del container di Woodmart intorno (1300px): il confronto si vedeva. --maxw vive in tg-base.css, che e' generato da build-css.py: si sovrascrive qui, che invece si edita a mano, altrimenti una rigenerazione lo cancella. A 1440px la griglia tocca i bordi su un portatile da 1440px, quindi il padding laterale sale da 28 a 40px: e' quello a tenere il respiro. */ .tg-page { --maxw: 1440px; } .tg-page .wrap { padding-left: 40px; padding-right: 40px; } /* Header e footer seguono da soli: la larghezza del sito e' un'impostazione del tema (Woodmart > Site width = custom, 1440px), portata da 1300 a 1440 il 18/08. Forzarla da CSS qui sarebbe stato un doppione che prima o poi litiga con il pannello. Backup dell'opzione in ~/backups sul server. */ @media (max-width: 560px) { .tg-page .wrap { padding-left: 22px; padding-right: 22px; } } /* ============================================================ Il menu: contorno invece della sottolineatura ============================================================ Richiesta dell'utente (16/09). La larghezza del sottomenu si imposta dal pannello dei menu, non da qui: ogni voce con figli ha il campo "tipo". */ /* ---------- le voci di menu: contorno, non sottolineatura ---------- Il tema segna hover e pagina attiva con una riga di 2px sotto al testo (`wd-style-underline`). L'utente la vuole via, e al suo posto il contorno - lo stesso segno dei pulsanti e delle targhe del sito. Il bordo c'e' sempre, trasparente: se comparisse solo al passaggio del mouse la voce si allargherebbe di 2px e il menu ballerebbe. */ .whb-main-header .wd-nav[class*="wd-style-underline"] .nav-link-text::after { content: none; } .whb-main-header .wd-nav-main > li > a { padding-inline: 14px; border: 1px solid transparent; border-radius: 999px; transition: border-color .28s var(--ease, ease), color .28s var(--ease, ease); } /* Il tema, oltre alla riga, riempie la voce di colore (`--nav-bg-hover` e `--nav-bg-active`). L'utente vuole SOLO il contorno: il fondo va spento in tutti e due gli stati, se no la pillola si vede piena. */ .whb-main-header .wd-nav-main > li > a, .whb-main-header .wd-nav-main > li:hover > a, .whb-main-header .wd-nav-main > li.wd-opened > a, .whb-main-header .wd-nav-main > li.current-menu-item > a, .whb-main-header .wd-nav-main > li.current-menu-ancestor > a, .whb-main-header .wd-nav-main > li.current-page-ancestor > a { background-color: transparent; box-shadow: none; } .whb-main-header .wd-nav-main > li:hover > a, .whb-main-header .wd-nav-main > li.wd-opened > a { border-color: rgba(25, 24, 23, .22); } /* La pagina in cui ci si trova: bordo arancione, come lo era la riga. Le classi sono tre perche' WordPress ne usa una diversa per la voce stessa, per la madre di una voce e per la pagina che fa da genitore. */ .whb-main-header .wd-nav-main > li.current-menu-item > a, .whb-main-header .wd-nav-main > li.current-menu-ancestor > a, .whb-main-header .wd-nav-main > li.current-page-ancestor > a { border-color: var(--orange, #FF8845); color: var(--orange, #FF8845); } /* Le voci con il sottomenu hanno la freccina dentro alla `a`: con il bordo tondo va ripresa un filo, se no tocca la curva. */ .whb-main-header .wd-nav-main > li.menu-item-has-children > a { padding-inline-end: 11px; } /* ---------- la pagina si sfoca quando si apre un sottomenu ---------- Richiesta dell'utente (18/09): aprendo una voce con figli, quello che sta sotto si vede sfocato, su base chiara. Due pezzi: · un velo fisso che copre la finestra, chiaro e con `backdrop-filter`. Il velo sta SOTTO alla tendina (che il tema mette a z-index 380) e sotto alla riga della testata, cosi' il menu resta nitido e a sfocarsi e' solo la pagina; · la tendina stessa diventa appena translucida, cosi' si legge che sopra e sotto sono due piani diversi. Il velo e' un pseudo-elemento della testata: non serve aggiungere niente al markup. `pointer-events: none` perche' non deve rubare il mouse - se no uscendo dalla voce il sottomenu si chiude subito. */ .whb-main-header::after { content: ""; position: fixed; inset: 0; z-index: 300; background-color: rgba(253, 250, 247, .42); -webkit-backdrop-filter: blur(9px) saturate(1.05); backdrop-filter: blur(9px) saturate(1.05); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .32s var(--ease, ease), visibility .32s; } .whb-main-header:has(.wd-nav-main > li.menu-item-has-children:hover)::after, .whb-main-header:has(.wd-nav-main > li.wd-opened)::after { opacity: 1; visibility: visible; } /* La riga della testata sopra al velo, se no si sfocano anche il menu e il marchio. ATTENZIONE al selettore: il figlio diretto di `.whb-main-header` NON e' il `.container` ma la `.whb-row` - scritto male, la regola non prendeva e il velo copriva tutta la testata (segnalato il 18/09). */ .whb-main-header > .whb-row { position: relative; z-index: 320; } .whb-main-header .wd-dropdown-menu { background-color: rgba(253, 250, 247, .86); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); border: 1px solid rgba(25, 24, 23, .07); box-shadow: 0 20px 48px rgba(25, 24, 23, .12); } /* Chi non ha `backdrop-filter` deve comunque leggere la tendina: fondo pieno. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .whb-main-header .wd-dropdown-menu { background-color: var(--paper, #FDFAF7); } .whb-main-header::after { background-color: rgba(253, 250, 247, .72); } }