per togliere il salto di
gerarchia (h4 -> h2 senza h1). Corretto sul piano semantico, ma il
paragrafo si è portato dietro margini e interlinea del corpo testo:
misurato a 1600x900, la scatola passava da 30px a 44px e cominciava
20px più in basso. Risultato: tutto il blocco della hero scendeva di
34px e la CTA restava a 9px dal bordo invece dei 43 di Antra.
Qui la scatola torna quella dell'h4: stessa semantica corretta,
stessa geometria del tema. */
.slider-content .sub-heading,
.section-heading .sub-heading{
margin: 0 0 20px;
line-height: 1.2;
}
/* ---------- 3. HERO: scrim di leggibilità ----------
La foto del tema aveva una parete scura a sinistra, con il titolo
che ci cadeva dentro. Le nostre foto non lo garantiscono, quindi
il contrasto va garantito dal layout e non dall'immagine:
pavimento di opacità sotto il blocco di testo, indipendente
dallo scatto. Misurato senza scrim: bianco su borgo illuminato
sotto il 3:1 richiesto per il testo grande. */
.slider-item{ position: relative; }
.slider-item .bg-img::after{
content: "";
position: absolute; inset: 0;
pointer-events: none;
background:
linear-gradient(to bottom, rgba(12,18,26,.55) 0%, rgba(12,18,26,.18) 18%, transparent 34%),
linear-gradient(100deg, rgba(12,18,26,.86) 0%, rgba(12,18,26,.66) 38%, rgba(12,18,26,.28) 62%, transparent 82%);
}
.slider-item .slider-container{ position: relative; z-index: 2; }
/* il pannello sovrapposto resta sopra lo scrim */
.slider-element-wrap{ z-index: 3; }
/* Il testo della hero sta SOPRA una fotografia: e' bianco per
costruzione, non perche' una classe del tema glielo concede.
Misurato: senza questo il titolo risultava nero (rgb(0,0,0)) pur
essendo dentro .white-content, quindi la regola del tema non
vinceva. Su una foto un titolo nero non e' un difetto estetico:
e' illeggibile. */
.slider-item .section-heading .section-title,
.slider-item .section-heading .sub-heading,
.slider-item .bottom-content .antra-desc p{
color: #FFFFFF;
}
.slider-item .slider-element .element-title,
.slider-item .slider-element span,
.slider-item .slider-element p{ color: #FFFFFF; }
/* ---------- 4. LOGO ----------
I PNG forniti sono 455x138. In header vanno contenuti in altezza,
non in larghezza, altrimenti su schermi stretti sfondano.
ALTEZZA: 50px. Ricavata misurando l'INCHIOSTRO dei due loghi, non le
scatole — ed e' il motivo per cui i tentativi precedenti sbagliavano:
Antra 124x138 -> lettere alte 24px, l'83% dell'altezza del file
nostro 455x138 -> lettere alte 66px, il 48%
Il logo di Antra e' quasi tutto wordmark; il nostro ha il marchio piu'
alto del testo e aria attorno. Quindi a parita' di altezza del file le
nostre lettere risultano meta'. Per pareggiare il corpo delle lettere
(24px come le sue): 24 / 0,48 = 50px.
Larghezza risultante ~165px, piu' del suo (124px): corretto, perche'
"edilgetica" ha dieci lettere contro cinque di "antra". */
.header-logo img,
.side-menu-logo img{ height: 50px; width: auto; }
@media (max-width: 767px){
.header-logo img, .side-menu-logo img{ height: 40px; }
}
/* ---------- 5. il payoff non è un nome proprio ----------
La filigrana decorativa del tema stampa il nome del brand: in
minuscolo, come vuole la regola di marca. */
.about-text span{ text-transform: lowercase; }
/* ---------- 6. blocchi di segnaposto dichiarati ----------
Finché i dati non sono reali, chi guarda deve poterlo capire.
Non è decorazione: è la lezione della review UX, dove statistiche
inventate venivano lette come impegni presi. */
.eg-draft-note{
display: block;
margin-top: 14px;
font-size: 13px;
line-height: 1.5;
/* era var(--tl-color-grey-2, #9f9fa4): 2,5:1 su bianco, sotto AA.
#5F5F66 sta a 6,1:1 su paper e 5,7:1 sul grigio del process. */
color: #5F5F66;
max-width: 62ch;
}
.eg-draft-note::before{
content: "bozza — ";
color: var(--eg-blue-strong);
}
.white-content .eg-draft-note,
.footer-section .eg-draft-note{ color: #C9C6BF; }
.white-content .eg-draft-note::before,
.footer-section .eg-draft-note::before{ color: var(--eg-blue-on-dark); }
/* ---------- 7. FOCUS VISIBILE ----------
Il tema si affida all'outline di default e in più punti lo azzera.
Requisito AA: ogni elemento attivabile deve mostrarsi quando ha il
fuoco, anche sopra le foto. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible{
outline: 2px solid var(--eg-blue-strong);
outline-offset: 2px;
}
.slider-section a:focus-visible,
.about-section a:focus-visible,
.footer-section a:focus-visible,
.footer-section button:focus-visible,
.newsletter-section button:focus-visible,
.newsletter-section input:focus-visible{
outline-color: #FFFFFF;
}
/* ---------- 8. PLACEHOLDER FOTOGRAFICI ----------
Il tema porta 282 PNG di arredamento che non sono nostri e non
entrano in repo: al loro posto un placeholder disegnato in CSS
(zero byte scaricati) con l'aspect-ratio del riquadro che occupa.
Ogni placeholder dichiara nel markup, in un commento, il soggetto
da fotografare, e nell'aria-label la stessa descrizione per chi
naviga con lo screen reader. */
.eg-ph{
position: relative;
width: 100%;
height: 100%;
min-height: 120px;
border-radius: 24px;
overflow: hidden;
background-color: #DED8CD;
background-image:
repeating-linear-gradient(135deg, rgba(255,255,255,.42) 0 2px, rgba(255,255,255,0) 2px 14px),
linear-gradient(158deg, #EFEAE2 0%, #DAD3C6 58%, #C7C0B1 100%);
}
/* NIENTE filigrana: qui c'era un chevron "due tetti impilati", ma il
motivo e' stato ABOLITO dal committente (2026-07-31: "non deve
comparire da nessuna parte"). Il placeholder resta materico e muto:
la trama diagonale basta a dire "qui va una fotografia". */
/* Quando il riquadro ha una foto (data-background, applicata dal JS del
tema o inlinata dall'anteprima) deve coprire senza deformare. Il JS
scrive solo background-image: size e position li mette il CSS.
[data-bg-inlined] e' lo stesso riquadro dopo il passaggio di
inline-preview/bundle-demo, che rinominano l'attributo: i tool NON
devono piu' iniettare cover/center inline (inline batteva anche il
`contain` voluto dal tema sui .bg-shape decorativi): il taglio lo
decide sempre e solo questo foglio. */
.eg-ph[data-background],
.eg-ph[data-bg-inlined]{
background-size: cover;
background-position: center;
}
/* il logo nel preloader: era una scritta a 40px, il logo tiene la
stessa presenza; il fondo del preloader e' #111 (variante dark) */
.site-name img{ height: 64px; width: auto; }
/* tre tinte per non avere otto riquadri identici in colonna */
.eg-ph--warm{ background-image:
repeating-linear-gradient(135deg, rgba(255,255,255,.40) 0 2px, rgba(255,255,255,0) 2px 14px),
linear-gradient(158deg, #F2E9DE 0%, #E0CFBC 60%, #CBB79F 100%); }
.eg-ph--cool{ background-image:
repeating-linear-gradient(135deg, rgba(255,255,255,.40) 0 2px, rgba(255,255,255,0) 2px 14px),
linear-gradient(158deg, #E8EDF1 0%, #D2DAE1 60%, #B9C4CD 100%); }
.eg-ph--ink{ background-image:
repeating-linear-gradient(135deg, rgba(255,255,255,.20) 0 2px, rgba(255,255,255,0) 2px 14px),
linear-gradient(158deg, #6E6E72 0%, #55555A 60%, #3E3E42 100%); }
/* i riquadri del tema hanno raggi diversi: si adeguano qui */
/* le tessere della fascia sono 100x50 su mobile: il min-height di 120px
le faceva sfondare */
.gallery-scroll-wrap .eg-ph{ border-radius: 10px; min-height: 0; }
.process-item .process-thumb .eg-ph{ border-radius: 9px; min-height: 0; }
.project-item .project-img .eg-ph{ border-radius: 0; }
/* ---------- 8a. LA HERO SENZA FOTOGRAFIA ----------
Qui c'era hero-borgo.jpg: il castello di GRADARA, che sta nelle
Marche — una falsita' geografica per un gruppo di Faenza e Ravenna
(rilievo del committente, 2026-08-01: "non ha senso"). Finche' non
c'e' lo scatto giusto — casolare romagnolo in mattoni, tetto in
coppi — la hero e' una superficie scura di marca: i neutri del tema
piu' un respiro del blu edilgetica in alto a destra, dove il tema
appoggia il riquadro. Il velo .46 del tema le sta sopra senza danno.
Quando arriva la fotografia: rimettere data-background e togliere
la classe (il punto e' UNO, nel generatore build-portal.mjs). */
.slider-item .bg-img.eg-hero-dark{
background-color: var(--tl-color-bg-1);
background-image:
radial-gradient(ellipse 90% 70% at 78% 12%, rgba(15,112,183,.28) 0%, rgba(15,112,183,0) 62%),
repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, rgba(255,255,255,0) 2px 18px),
linear-gradient(165deg, #232325 0%, #1C1C1D 55%, #141415 100%);
}
/* ---------- 8b. LE DUE SUPERFICI SCURE ----------
about-bg.png e footer-bg.png erano due segnaposto identici col
testo "1920X950" stampato dentro: comparivano a tutta larghezza
dietro "Il gruppo" e dietro il footer. Finché non c'è la fotografia
la superficie scura la dipinge il CSS, con i neutri di marca.
Il velo nero del tema (about .46 / footer .75) si ritara: serviva a
scurire una foto, qui scurirebbe un colore già scuro.
`!important` non è un vezzo: il tema legge `data-background` in JS e
scrive `background-image:url(...)` INLINE, che batte qualunque
foglio di stile. Serve anche alle altre pagine del portale, che nel
footer puntano ancora a quel PNG. Quando arriva la fotografia vera
si toglie l'!important e si rimette il data-background. */
.about-section .about-bg{
background-image: linear-gradient(118deg, #16283A 0%, #0A568D 54%, #12283C 100%) !important;
}
.about-section .about-bg:before{ opacity: .42; }
.footer-section .footer-bg{
background-image: linear-gradient(168deg, #20272E 0%, #171C22 62%, #0F1319 100%) !important;
}
.footer-section .footer-bg:before{ opacity: .35; }
/* ---------- 9. LE CINQUE REALTÀ ----------
Il tema ha una griglia da 4 card. Le realtà sono 5: griglia propria
a 6 colonne, 3+2 con l'ultima fila centrata. La card resta quella
del tema (.service-item), così ombre e raggi restano di sistema. */
.eg-realta-grid{
display: grid;
gap: 24px;
grid-template-columns: 1fr;
}
@media (min-width: 576px){
.eg-realta-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px){
.eg-realta-grid{ grid-template-columns: repeat(6, 1fr); }
.eg-realta-grid > *{ grid-column: span 2; }
.eg-realta-grid > *:nth-child(4){ grid-column: 2 / span 2; }
.eg-realta-grid > *:nth-child(5){ grid-column: 4 / span 2; }
}
.eg-realta{
position: relative;
display: flex;
flex-direction: column;
transition: transform .18s cubic-bezier(.22,.9,.3,1), box-shadow .18s ease;
}
.eg-realta:hover{
transform: translateY(-4px);
box-shadow: 0 14px 34px rgba(0,0,0,.09);
}
/* la barra di ramo: il filo identificativo delle 5 aziende, mai una
campitura (regola del design system) */
.eg-realta-ramo{
display: block;
width: 40px;
height: 3px;
border-radius: 2px;
background-color: var(--eg-ramo);
margin-bottom: 20px;
}
.eg-realta .service-top{
flex-direction: row;
align-items: flex-start;
padding-bottom: 20px;
margin-bottom: 18px;
}
.eg-realta .service-top .title{
font-size: 24px;
line-height: 1.15;
}
/* il link ha comunque l'altezza di un bersaglio anche misurato da solo
(l'harness misura il box dell', non lo pseudo-elemento steso) */
.eg-realta .service-top .title a{
display: inline-block;
padding: 9px 0;
}
/* tutta la card è il bersaglio del link: un solo link per card
(niente doppioni per lo screen reader) e tap target pieno.
`inset: 0` si riferisce a .eg-realta, che è l'unico antenato
posizionato: l' NON deve essere position:relative. */
.eg-realta .service-top .title a::after{
content: "";
position: absolute;
inset: 0;
border-radius: 24px;
}
.eg-realta:focus-within{
outline: 2px solid var(--eg-blue-strong);
outline-offset: 3px;
}
.eg-realta .service-top .title a:focus-visible{ outline: none; }
.eg-realta-role{
font-family: var(--tl-ff-heading);
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
color: #5F5F66;
margin-bottom: 10px;
}
.eg-realta-go{
font-family: var(--tl-ff-heading);
font-size: 15px;
color: var(--eg-blue-strong);
margin-top: auto;
padding-top: 20px;
}
.eg-realta-go .icon{ margin-left: 6px; }
/* il marchio-chevron al posto delle icone PNG del tema */
.eg-mark{
position: relative;
flex: 0 0 auto;
width: 26px;
height: 30px;
margin-top: 4px;
}
.eg-mark::before,
.eg-mark::after{
content: "";
position: absolute;
left: 3px;
width: 17px;
height: 17px;
border-top: 3px solid var(--eg-ramo, var(--tl-color-theme-primary));
border-left: 3px solid var(--eg-ramo, var(--tl-color-theme-primary));
transform: rotate(45deg);
}
.eg-mark::before{ top: 2px; }
.eg-mark::after{ top: 11px; opacity: .45; }
/* bullet-chevron al posto delle iconcine PNG dell'elenco "about" */
.eg-bullet{
position: relative;
flex: 0 0 auto;
width: 14px;
height: 16px;
}
.eg-bullet::before{
content: "";
position: absolute;
top: 3px;
left: 0;
width: 9px;
height: 9px;
border-top: 2px solid var(--eg-blue-on-dark);
border-left: 2px solid var(--eg-blue-on-dark);
transform: rotate(45deg);
}
/* ---------- 10. I QUATTRO PILASTRI ----------
Nel tema la descrizione compare solo sull'immagine al passaggio del
mouse: chi naviga da tastiera o con lo screen reader non la legge
mai. La riportiamo nel testo della voce, e lasciamo l'effetto come
sovrappiù. */
.feature-item{ flex-wrap: wrap; cursor: default; }
.eg-pillar-desc{
flex: 0 0 100%;
margin: 12px 0 0 44px;
max-width: 520px;
font-size: 16px;
}
@media (max-width: 575px){
.eg-pillar-desc{ margin-left: 0; }
}
/* ---------- 11. FILIERA ----------
Cinque fasi, tutte visibili: griglia al posto del carosello del tema
(che ne mostrava tre e teneva le altre dietro un trascinamento).
L'immagine perde l'altezza fissa di 540px — a un quinto di larghezza
sarebbe una torre — e prende un aspect-ratio. */
.eg-filiera-grid{
display: grid;
gap: 24px;
grid-template-columns: 1fr;
}
@media (min-width: 576px){
.eg-filiera-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px){
.eg-filiera-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px){
.eg-filiera-grid{ grid-template-columns: repeat(5, 1fr); gap: 18px; }
}
.eg-filiera-grid .project-img{
height: auto !important;
aspect-ratio: 3 / 4;
}
.eg-filiera-grid .project-content .title{
font-size: 22px;
line-height: 1.2;
}
@media (min-width: 1200px){
.eg-filiera-grid .project-content .title{ font-size: 19px; }
}
.eg-filiera-meta{
display: block;
font-size: 15px;
color: #5F5F66;
}
/* Le fasi non hanno una pagina di destinazione: i tag restano
etichette, non link. Il tema stilava solo `li a` (bianco su foto
scura): sopra un placeholder chiaro il bianco spariva, quindi la
pillola diventa scura con testo bianco — leggibile su qualunque
scatto ci finisca sotto. */
.project-item .project-img ul li span{
font-family: var(--tl-ff-heading);
color: var(--tl-color-common-white);
background-color: rgba(16, 20, 26, .86);
font-size: 13px;
letter-spacing: .5px;
padding: 6px 15px;
text-transform: uppercase;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
}
/* il chevron in filigrana cresce con il riquadro: dentro un box da
500px quello da 34px era un puntino */
.eg-filiera-grid .eg-ph::before,
.eg-filiera-grid .eg-ph::after,
.about-img .eg-ph::before,
.about-img .eg-ph::after,
.feature-img .eg-ph::before,
.feature-img .eg-ph::after{
width: 52px;
height: 52px;
border-width: 5px;
}
.eg-filiera-grid .eg-ph::before,
.about-img .eg-ph::before,
.feature-img .eg-ph::before{ top: calc(50% - 30px); }
.eg-filiera-grid .eg-ph::after,
.about-img .eg-ph::after,
.feature-img .eg-ph::after{ top: calc(50% + 2px); }
/* ---------- 12. BLOG: contrasto della categoria ----------
Bianco su #0F70B7 sta a 4,0:1: sotto AA per un testo di 14px.
Sul blu scuro sale a 7,5:1. */
.post-thumb .category{ background-color: var(--eg-blue-strong); }
/* ---------- 13. NEWSLETTER ----------
Il bottone del tema è 40×40 (sotto i 44px di tap target) e l'input
non ha etichetta. */
.newsletter-form .form-control{
min-height: 44px;
padding-right: 60px;
}
/* stessa specificità del tema (.newsletter-wrap .newsletter-form button):
con il solo `.newsletter-form button` l'override non passava */
.newsletter-wrap .newsletter-form button{
background-color: var(--eg-blue-strong);
height: 44px;
width: 44px;
bottom: 4px;
}
.eg-form-note{
font-size: 14px;
margin: 18px auto 0;
max-width: 450px;
}
/* ---------- 14. FOOTER DI GRUPPO ---------- */
.eg-footer-title{
font-family: var(--tl-ff-heading);
color: #D5D2CB;
font-size: 13px;
letter-spacing: 1.2px;
text-transform: uppercase;
margin-bottom: 22px;
}
/* tap target: le voci di elenco erano alte 20px */
.footer-list li a,
.footer-section .social-list li a,
.footer-address .number,
.footer-address .mail{
display: inline-block;
padding: 14px 0;
line-height: 1.2;
}
.footer-list li:not(:last-of-type){ margin-bottom: 0; }
.eg-endorse{
display: block;
font-size: 14px;
color: #C9C6BF;
margin-top: 4px;
}
/* ---------- 15. TAP TARGET DEI LOGHI E DEL MENU LATERALE ----------
Misurato con l'harness: il link del logo (header e footer) e' alto
20px perche' l' resta inline attorno al PNG; le voci del menu
off-canvas e i recapiti del pannello stanno fra i 16 e i 20px.
Sono i punti piu' battuti da dito su mobile. */
.header-logo a,
.footer-widget .widget-header .footer-logo a,
.side-menu-logo a,
.mobile-side-menu .side-menu-head a{
display: inline-block;
padding: 9px 0;
}
.header-logo img,
.footer-widget .widget-header .footer-logo img,
.mobile-side-menu .side-menu-head img{ display: block; }
/* il menu clonato dal plugin meanmenu azzera il padding con una
specificita' alta (.mean-bar .mean-nav.mean-nav>ul li a): va
ripresa, altrimenti le voci restano alte 16px.
ATTENZIONE: il tema monta meanmenu DUE volte, in due pannelli con due
contenitori diversi — #sidebar-area (quello che apre l'hamburger
visibile: .sidebar-trigger) e .mobile-side-menu. La regola copriva solo
il secondo. MISURATO il 2026-08-01 a 390px col pannello APERTO (le voci
chiuse sono fuori schermo, quindi l'harness non le vede e il report
restava verde): le cinque voci del menu erano alte 20px, larghe 35-73.
Con 14px per lato: 48px. Il selettore ora prende entrambi i pannelli. */
.sidebar-area .mean-bar .mean-nav.mean-nav > ul li a,
.mobile-side-menu .mean-bar .mean-nav.mean-nav > ul li a{
padding: 14px 0;
}
.mobile-side-menu .side-menu-list a{
display: inline-block;
padding: 14px 0;
line-height: 1.2;
}
/* le icone social sono larghe 11-15px: sotto i 24px minimi */
.side-menu-social li a{
display: inline-block;
padding: 14px 9px;
line-height: 1;
}
.mobile-side-menu .side-menu-head .mobile-side-menu-close{
height: 44px;
width: 44px;
}
.mobile-side-menu .side-menu-list li{ align-items: center; }
/* "Parla con noi" nel pannello: era un e si riprende a mano la misura che aveva. */
.eg-side-title{
font-family: var(--tl-ff-heading);
font-size: 24px;
line-height: 1.2;
margin-bottom: 0;
color: var(--tl-color-heading-primary);
}
/* ---------- 15. CTA di sezione e link in linea ----------
Un link alto 20px non è un bersaglio: dove il link chiude una
sezione gli si dà l'area di un bottone. */
.eg-section-cta{ margin-top: 26px; }
.process-text .bottom-text a,
.eg-inline-cta{
display: inline-block;
padding: 11px 2px;
}
/* dentro un paragrafo il tema non distingue il link dal testo: senza
colore né sottolineatura "Vedi chi fa cosa" sembrava una riga a capo */
.eg-inline-cta{
color: var(--eg-blue-strong);
text-decoration: underline;
text-underline-offset: 3px;
}
.eg-inline-cta:hover{ text-decoration-thickness: 2px; }
/* ---------- 16. OCCHIELLI: la pillola tagliava l'ultima lettera ----------
Misurato sullo screenshot: "LE CINQUE REALTÀ" appariva
"LE CINQUE REALT", "I QUATTRO PILASTRI" senza la I finale. Il tema
aveva occhielli corti in inglese ("WHO We Are") e non se ne accorge:
`overflow:hidden` + i caratteri spezzati dall'animazione + 1px di
letter-spacing su ognuno mandano l'ultimo glifo oltre il bordo. */
.sub-heading{
overflow: visible;
padding-right: 26px;
}
/* ---------- 17. DIDASCALIA SULL'IMMAGINE DEI PILASTRI ----------
Il tema usa rgba(21,24,31,.46): nato per stare sopra una foto scura.
Sopra un placeholder chiaro il bianco su quel velo scende sotto 3:1.
Alzando l'opacità il testo torna leggibile su qualunque scatto. */
.feature-img .img-content{
background: rgba(16, 20, 26, .78);
}
/* ---------- 17b. CHI CHIEDE MENO MOVIMENTO NON DEVE PERDERE TESTO ----------
Il tema rivela le sezioni con GSAP: scrive INLINE `opacity:0` e una
traslazione su .fade-top / .slide-anim, e le riporta a posto quando lo
ScrollTrigger scatta. Misurato a 390x900: 31 blocchi stanno a opacity 0
anche con `prefers-reduced-motion: reduce` — la richiesta dell'utente
viene ignorata, e se un trigger non scatta quel contenuto non compare
mai (già visto sugli occhielli: 7 caratteri di "Dal blog" invisibili).
Qui, per chi ha chiesto meno movimento, il contenuto è semplicemente
già al suo posto. `!important` batte lo stile inline di GSAP: è l'unico
modo di intervenire senza riscrivere il livello di animazione del tema. */
@media (prefers-reduced-motion: reduce){
.fade-top,
.slide-anim,
.fade-wrapper .fade-top,
.sub-heading .char,
.sub-heading .word,
.sub-heading .line{
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
}
/* ---------- 18. META DEGLI ARTICOLI ----------
Due difetti del tema, entrambi visibili nello screenshot del blog:
1. `text-transform: capitalize` trasformava "24 luglio 2026" in
"24 Luglio 2026" e "4 min di lettura" in "4 Min Di Lettura":
in italiano le maiuscole di mezzo sono un errore, non uno stile;
2. il colore era --tl-color-grey-2 (#9F9FA4) a 12px sul fondo
#F6F6F6: 2,4:1, molto sotto AA. #5F5F66 sta a 6:1.
La pillola di categoria: la specificità del tema è
`.post-card .post-thumb .category`, quindi va pareggiata o
l'override sul blu scuro non passa (misurato: restava #0F70B7,
bianco su blu 4,0:1, sotto AA per un testo di 14px). */
.post-meta li{
text-transform: none;
color: #5F5F66;
font-size: 13px;
}
.post-card .post-thumb .category{
background-color: var(--eg-blue-strong);
text-transform: none;
}
/* ---------- 19. LA PILL "PARLIAMONE" NELL'HEADER MOBILE ----------
Perché esiste (docs/funnel-audit.md, "attriti mobile"): sul telefono,
dopo lo scroll, nella barra sticky restavano solo il logo e l'hamburger,
e ogni contatto costava due tap (apri il menu, cerca la voce).
MISURATO sull'header sticky di metodo.html dopo 1500px di scroll:
390px → logo 132×65 + hamburger 56×56. Il bottone del tema
(.header-btn) è display:none.
800px → .header-btn c'è: 143×54, #0F70B7, testo bianco.
991px → identico.
Quindi la soglia vera non è 992 ma 767: main.css la scrive in
`@media only screen and (max-width:767px){… .header-btn{display:none}}`.
La pill compare esattamente lì, dove il bottone del tema sparisce: da
768px in su ci sarebbero DUE CTA identiche nella stessa barra.
Contrasti calcolati (WCAG 2.x, formula ufficiale):
bianco su #0F70B7 5,22:1 → AA per testo normale
#0F70B7 su #191919 (sticky) 3,37:1 → ≥3:1, componente riconoscibile
Il fondo dell'header sticky è #191919 (.header .primary-header.fixed).
Nella barra trasparente sopra la testata scura il rapporto è migliore.
Tap target: 44px di altezza minima, dichiarati qui e non sperati. */
.eg-pill-wrap{ display: none; }
@media (max-width: 767px){
.eg-pill-wrap{ display: block; }
/* LO SPAZIO PER LA PILL, misurato. .primary-header-inner e' un flex con
flex-wrap:wrap: appena il contenuto supera la larghezza utile, l'header
va a capo su due righe e la barra sticky passa da 105px a 161px
(misurato a 320, 360 e 390px con la pill dentro). I 56px che mancavano
non sono della pill: sono il column-gap di .header-left-wrap, che resta
anche quando il menu orizzontale accanto al logo e' nascosto
(main.css: .header-menu-wrap ul{display:none} sotto i 992px), e i 15px
di gap sprecati da .header-btn-wrap, che sotto i 768px e' un contenitore
largo 0 con il bottone dentro a display:none.
Recuperati quelli: 390px -> 132 (logo) + 12 + 114 (pill) + 12 + 56
(hamburger) = 326 su 366 utili, una riga sola. */
.header .primary-header-inner{ flex-wrap: nowrap; }
.header .primary-header-inner .header-left-wrap{ column-gap: 0; }
.header .primary-header-inner .header-right-wrap{ column-gap: 12px; }
.header .primary-header-inner .header-right-wrap .header-btn-wrap{ display: none; }
}
.eg-pill{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 18px;
border-radius: 100px;
background-color: var(--tl-color-theme-primary);
color: #FFFFFF;
font-family: var(--tl-ff-heading);
font-size: 15px;
line-height: 1;
white-space: nowrap; /* "Parliamone" su una riga anche a 320px */
}
/* sul fondo scuro dell'header il blu scuro perderebbe il bordo (2,28:1):
il filo bianco tiene la sagoma leggibile in ogni stato */
.eg-pill:hover,
.eg-pill:focus-visible{
background-color: var(--eg-blue-strong);
color: #FFFFFF;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
@media (max-width: 359px){
/* a 320px lo spazio utile e' 296px: la pill stringe i fianchi (e non
l'altezza, che resta il bersaglio da 44px) per stare in una riga sola
accanto al logo e all'hamburger. Misurato: 132 + 10 + 92 + 10 + 56 = 300
-> con flex-shrink sul contenitore ci sta senza andare a capo. */
.eg-pill{ padding: 0 10px; font-size: 14px; }
.header .primary-header-inner .header-right-wrap{ column-gap: 10px; }
}
/* ---------- 20. REALTÀ E APPROFONDIMENTI (realta.html R2/R4, metodo.html M4) ----------
Le classi usate dal markup di realta.html erano rimaste senza regole:
MISURATO a 390 e a 1280, `.eg-realta-anchor` risultava alto 26px —
cinque tap target sotto i 44px, uno per card. Qui le regole che mancavano. */
.eg-realta-anchor{
/* position+z-index: la card ha un link steso su tutta la superficie
(.eg-realta .service-top .title a::after, inset:0). Senza questo,
l'ancora interna sta SOTTO quel link e il tocco porta al satellite. */
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 0; /* 26 + 22 = 48px di bersaglio */
font-family: var(--tl-ff-heading);
font-size: 15px;
color: var(--eg-blue-strong);
text-decoration: underline;
text-underline-offset: 3px;
}
.eg-realta-anchor:hover{ text-decoration-thickness: 2px; }
/* la barra di ramo serve anche alle quattro fasi di metodo.html, che non
hanno un --eg-ramo: senza fallback la var vuota rende la barra invisibile */
.eg-realta-ramo{ background-color: var(--eg-ramo, var(--tl-color-theme-primary)); }
/* l'elenco "Chiamala quando" (realta) e "Che cosa ricevi" (metodo): stesso
elenco, stesso bullet-chevron degli altri elenchi del portale, nel colore
del ramo dove c'è */
.eg-when-list{
list-style: none;
margin: 0 0 18px;
padding: 0;
}
.eg-when-list li{
display: flex;
gap: 12px;
margin-bottom: 10px;
}
.eg-when-bullet{
position: relative;
flex: 0 0 auto;
width: 14px;
height: 16px;
margin-top: 5px;
}
.eg-when-bullet::before{
content: "";
position: absolute;
top: 2px; left: 0;
width: 9px; height: 9px;
border-top: 2px solid var(--eg-ramo, var(--tl-color-theme-primary));
border-left: 2px solid var(--eg-ramo, var(--tl-color-theme-primary));
/* 135deg e non 45: e' lo stesso chevron di marca, ma girato a destra fa
da segno di elenco. A 45deg (come .eg-bullet, che sta in verticale
accanto a una riga sola) davanti a tre righe di testo sembra una punta
verso l'alto senza motivo. */
transform: rotate(135deg);
}
/* CTA di sezione: il bottone primario e il link secondario stanno sulla
stessa riga e allineati in mezzo. Prima era solo un margine, e con due
voci il link finiva sotto il bottone disallineato di 12px. */
.eg-section-cta{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 22px;
}
.eg-cta-secondaria{ font-size: 15px; }
/* i cinque approfondimenti e le quattro fasi: un filo di separazione (sono
sezioni consecutive con lo stesso fondo) e l'accento di ramo portato
sull'icona della CTA, che è l'unico punto dove il colore ci sta senza
diventare campitura (regola del design system). */
.eg-approfondimento{ border-top: 1px solid var(--tl-color-border-1); }
.eg-approfondimento .eg-section-cta .tl-primary-btn .icon{
background-color: var(--eg-ramo, var(--tl-color-theme-primary));
}
/* ---------- 21. METODO: FASI, DOMANDE, PATTI CHIARI ----------
"Ti stai chiedendo": è l'obiezione del cliente, non una nota a margine.
Un filo verticale la stacca dal resto senza aggiungere un colore. */
.eg-domanda{
border-left: 3px solid var(--eg-ramo, var(--tl-color-theme-primary));
padding-left: 18px;
}
/* i titoli dei quattro passi portano all'approfondimento della fase:
MISURATO che senza padding l' resta alto 29px (title 24px × 1.2),
sotto il bersaglio minimo. Con 9px per lato: 47px. */
.process-item .process-content .title a{
display: inline-block;
padding: 9px 0;
color: inherit;
text-decoration: underline;
text-decoration-color: rgba(15,112,183,.45);
text-underline-offset: 4px;
}
.process-item .process-content .title a:hover{
color: var(--tl-color-theme-primary);
text-decoration-color: currentColor;
}
/* "Quattro cose che non facciamo": stessa geometria della card delle realtà.
Il tema porta .service-item .service-top{padding-bottom:80px}, pensato per
una card con l'icona lontana a destra: con un titolo solo lascia 80px di
vuoto in mezzo alla scheda. */
.eg-patto .service-top{
padding-bottom: 18px;
margin-bottom: 18px;
}
.eg-patto .service-top .title{
font-size: 24px;
line-height: 1.2;
}
.eg-patto p{ max-width: 52ch; }
/* le FAQ: il tema scrive `color: var(--lt-color-heading-primary)` e
`var(--lt-color-text-body)` — con "lt" invece di "tl". Sono 13 occorrenze
di variabili che NON esistono da nessuna parte (nemmeno nel tema
originale): la dichiarazione è invalida e il colore cade sull'ereditato.
Domanda e risposta finivano nel grigio del corpo testo. Qui le due
varianti sbagliate vengono definite come alias di quelle giuste: una
riga, e tornano a funzionare tutte le regole che le usano. */
:root{
--lt-color-heading-primary: #191919;
--lt-color-text-body: #4D4D52;
}
/* il bersaglio della domanda: il bottone del tema è alto quanto il testo
più 23px di padding per lato — già oltre i 44px — ma su due righe il "+"
restava in mezzo alla frase. Lo tiene in colonna la regola del tema per
i 767px; sopra quella soglia lo allineo in alto invece che al centro. */
.faq-content-2 .faq-accordion .accordion-item .accordion-button{
align-items: flex-start;
text-align: left;
gap: 4px;
}
/* ---------- 22. IL MODULO DI CONTATTI ----------
1. Il testo digitato. Il tema dà `.request-form-wrap .form-item
.form-control{color:#9f9fa4}` perché nel suo layout il modulo sta su
fondo scuro; su contatti.html il fondo del campo è bianco
(.contact-page-area … {background-color:white}) e quel grigio scende a
2,5:1 — quello che scrivi lo leggi male. #191919 su bianco: 17,6:1.
2. Il segnaposto: #5F5F66 su bianco è 6,1:1 (era 2,5:1).
3. La select nativa (data-eg-native, vedi la patch a main.js nel
generatore) va vestita come gli altri campi: l'aspetto di sistema è
un rettangolo grigio in mezzo a campi con raggio 24px. */
.contact-page-area .request-form-wrap .form-item .form-control{
color: #191919;
}
.contact-page-area .request-form-wrap .form-item .form-control::placeholder{
color: #5F5F66;
font-size: 16px; /* 16px: sotto questa misura iOS ingrandisce da solo */
}
.request-form-wrap .form-item .eg-select{
appearance: none;
-webkit-appearance: none;
min-height: 58px; /* pari agli input: 17px+17px di padding + 24px di riga */
padding-right: 52px;
font-size: 16px;
color: #191919;
cursor: pointer;
/* la freccia: SVG inline, nessun file in più da scaricare */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230A568D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 22px center;
}
/* ---------- 23. L'INDICE INTERNO DI gruppo.html (fusione realta+gruppo) ----------
La pagina unita e' lunga (MISURATA: 16.646px a 390, 9.982px a 1280): senza
un indice le sei ancore erano raggiungibili solo dalle card, cioe' da meta'
pagina in giu'. Sta subito sotto il page-header scuro, prima
dell'identita': un blocco di servizio, non una sezione editoriale, quindi
niente titolo di livello e niente fondo colorato.
Le chip sono l'unico caso in cui il colore di ramo compare in un elenco:
resta il filo di 3px della card, mai una campitura. */
.eg-index{ padding: 56px 0 6px; }
/* le chip stanno in colonna di testo, non larghe quanto il container: a 1600px
il container-2 fa 1400px e sei chip lasciavano mezza riga vuota a destra */
.eg-index-nav{ max-width: 1000px; }
.eg-index-title{
font-family: var(--tl-ff-heading);
font-size: 15px;
letter-spacing: .12em;
text-transform: uppercase;
color: #5F5F66;
margin-bottom: 14px;
}
.eg-index-list{
display: flex;
flex-wrap: wrap;
gap: 12px;
list-style: none;
margin: 0;
padding: 0;
}
/* 46px di bersaglio: 15px di riga (×1.2 = 18) + 14px di padding per lato.
MISURATO a 360, 390, 768 e 1280: nessuna chip sotto i 44px. */
.eg-chip{
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 46px;
padding: 12px 18px;
border: 1px solid var(--tl-color-border-1);
border-radius: 24px;
background-color: #fff;
font-family: var(--tl-ff-heading);
font-size: 15px;
line-height: 1.2;
color: var(--tl-color-heading-primary);
white-space: nowrap; /* il nome e il ramo non si spezzano dentro il bersaglio */
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.eg-chip:hover{
border-color: var(--eg-ramo, var(--tl-color-theme-primary));
box-shadow: 0 6px 16px rgba(0,0,0,.07);
transform: translateY(-2px);
color: var(--tl-color-heading-primary);
}
.eg-chip-ramo{
display: block;
flex: 0 0 auto;
width: 18px;
height: 3px;
border-radius: 2px;
background-color: var(--eg-ramo, var(--tl-color-theme-primary));
}
/* il ramo dentro la chip: 14px e #5F5F66 fanno 6,1:1 su bianco (AA anche
per il testo piccolo); sotto i 12px il report di shoot.mjs lo segnerebbe */
.eg-chip-role{
font-family: var(--tl-ff-body);
font-size: 14px;
color: #5F5F66;
}
.eg-chip--neutro{
/* la chip delle situazioni non appartiene a un ramo: la freccia in giu'
al posto del filo di colore, cosi' non sembra una sesta societa' */
border-style: dashed;
}
.eg-chip--neutro::before{
content: "\2193"; /* freccia in giu': e' un salto, non una societa' */
font-family: var(--tl-ff-body);
color: var(--eg-blue-strong);
}
@media (max-width: 575px){
/* a 360px cinque chip su una riga sola diventavano cinque righe da una
chip: il ramo va sotto il nome e la chip resta larga meno di mezzo
schermo, due per riga. */
.eg-chip{ padding: 11px 14px; }
.eg-chip-role{ display: none; }
}
/* ---------- 24. IL BLOCCO DELLA REGIA (l'argomento, una volta sola) ----------
Sotto il testo stanno i tre punti (le .process-item del tema) e poi la CTA:
senza questi due margini le tre card toccavano il paragrafo e il bottone
restava appiccicato alle card. */
.eg-regia .row + .row{ margin-top: 60px; }
.eg-regia .eg-section-cta{ margin-top: 40px; }
/* la CTA che chiude la griglia delle cinque card: 26px (la misura di §15)
la lasciavano appesa all'ultima card, che ha 30px di padding interno */
.eg-realta-grid + .eg-section-cta{ margin-top: 44px; }
/* le tre card qui stanno su fondo chiaro (#f6f6f6 del body) e non sul grigio
della .process-section: senza bordo perderebbero il perimetro. */
.eg-regia .process-item{ border: 1px solid var(--tl-color-border-1); }
/* le note del modulo: tempo di risposta, privacy, regola del recapito.
Non sono "bozza" (quelle hanno il loro stile): sono informazioni. */
.eg-form-hint{
font-size: 15px;
line-height: 1.5;
color: #5F5F66;
max-width: 58ch;
margin-top: 10px;
}
.request-form-wrap .eg-form-hint strong{ color: #191919; }
prima dell'h1 di pagina.
Ora è un