/* ============================================================
Dolomiti Studio — main.css
Palette e impaginazione fedeli al progetto grafico.
============================================================ */
:root{
--green-lime:#97BE0D;
--green-lime-d:#7CA00A;
--green:#006533; /* verde foresta (titoli, logo text) */
--green-d:#00532a;
--green-pale:#CBDE85;
--green-wash:#eef5dc;
--brown:#7F4909;
--orange:#ED7D11;
--amb:#2E8C3C;
--red:#E1251B;
--text:#006533; /* il testo del progetto è in verde foresta (come nel PDF) */
--muted:#5d6b4b;
--line:#d7e3bc;
--ff-head:"Titillium Web", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--ff-body:"Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Larghezza contenuto: bordi bianchi laterali ridotti (resta ~1/3 del margine
del boxed classico 1140px). calc(67vw + 380px) → a QUALSIASI larghezza il
margine bianco è circa un terzo dell'originale. Cap 96vw su schermi medi. */
--maxw:min(66vw, 1080px);
--gutter:22px;
--header-h:74px;
}
/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
margin:0;font-family:var(--ff-body);color:var(--text);
font-size:1.0625rem;line-height:1.6;background:#fff;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--green-lime-d)}
h1,h2,h3,h4{font-family:var(--ff-head);color:var(--green);line-height:1.15;margin:0 0 .5em}
p{margin:0 0 1em}
ul{margin:0 0 1em}
.ds-container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);width:100%}
/* Allinea le sezioni "boxed" di Elementor (corpo home) alla stessa larghezza del
tema, così header/corpo/footer hanno gli stessi bordi bianchi (ridotti del 50%). */
.elementor-section.elementor-section-boxed > .elementor-container{max-width:var(--maxw) !important;margin-left:auto !important;margin-right:auto !important}
/* ⚠️ TELEFONO E TABLET a PIENA LARGHEZZA (utente 13/08: sul tablet verticale
"togliere del tutto le colonne bianche laterali", più spazioso). Il facsimile
proporzionale (--maxw = 66vw) resta SOLO da 901px in su, per il desktop; sotto
i 900 la colonna diventa piena e il layout impagina per la lettura, con il solo
--gutter come margine di pagina.
(Prima il limite era 600px: il tablet 601-900 restava boxato a 66vw ≈ 507px a
768, con ~130px di bianco per lato — le colonne che l'utente ha chiesto di
togliere. Il motivo originario del full-width era il telefono, dove 66vw=257px
faceva sforare il testo; ora vale per tutto il range sotto il desktop.) */
@media (max-width:900px){ :root{ --maxw:100%; } }
.ds-skip-link{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;padding:10px 16px;z-index:1000}
.ds-skip-link:focus{left:8px;top:8px}
/* ---------- header ---------- */
.ds-header{
position:sticky;top:0;z-index:100;background:#fff;
border-bottom:1px solid #eef0e8;
box-shadow:0 1px 0 rgba(0,0,0,.02);
transition:box-shadow .25s ease;
}
.ds-header.is-scrolled{box-shadow:0 2px 14px rgba(0,0,0,.09)}
.ds-header__inner{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h);gap:18px}
.ds-branding{display:flex;align-items:center}
.ds-branding .custom-logo-link,.ds-branding img{display:block}
.ds-branding img,.custom-logo{height:48px;width:auto}
/* Home: header con solo il menu a destra (il logo grande è nell'hero, come nel PDF). */
.ds-header--home .ds-branding{display:none}
.ds-header--home .ds-header__inner{justify-content:flex-end}
.ds-logo-text{font-family:var(--ff-head);font-weight:700;font-size:1.3rem;color:var(--green);letter-spacing:.02em}
.ds-logo-text .ds-logo-s{color:var(--green-lime)}
.ds-nav .ds-menu{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.ds-menu li{display:flex;align-items:center}
.ds-menu li:not(:last-child)::after{content:"";width:1px;height:16px;background:#c2d894;flex:0 0 auto}
.ds-menu a{
font-family:var(--ff-head);font-weight:600;text-transform:uppercase;
font-size:.82rem;letter-spacing:.05em;color:var(--green);
padding:.5em 1.05em;display:block;white-space:nowrap;
}
.ds-menu a:hover,.ds-menu .current-menu-item>a,.ds-menu .current_page_item>a{color:var(--green-lime-d)}
.ds-menu .current-menu-item>a,.ds-menu .current_page_item>a{position:relative}
.ds-nav-toggle{
display:none;border:0;background:transparent;cursor:pointer;
width:44px;height:44px;padding:9px;flex:0 0 auto;
}
.ds-nav-toggle span{display:block;height:3px;background:var(--green);border-radius:2px;margin:4px 0;transition:.25s}
.ds-nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ds-nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.ds-nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ---------- hero ---------- */
.ds-hero{position:relative;width:100%}
.ds-hero__img{width:100%;height:clamp(320px,56vh,600px);object-fit:cover;object-position:center 42%}
.ds-hero__credit{
position:absolute;right:14px;bottom:12px;color:#fff;
font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
text-shadow:0 1px 3px rgba(0,0,0,.55);opacity:.92;
}
/* ---------- marchio + tessere ---------- */
.ds-brand{background:#fff;padding:38px 0 8px}
.ds-brand__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.ds-brand__logo{width:min(320px,72vw);height:auto}
.ds-brand__rule{display:block;width:min(320px,72vw);height:3px;background:var(--green-lime);margin:14px 0 0;border-radius:2px}
.ds-tiles{display:flex;gap:11px;justify-content:center;margin-top:16px}
.ds-tile{
width:54px;height:54px;display:block;border-radius:3px;overflow:hidden;
box-shadow:0 2px 6px rgba(0,0,0,.12);transition:transform .2s ease, box-shadow .2s ease;
}
.ds-tile svg,.ds-tile__img{width:100%;height:100%;object-fit:cover;display:block}
.ds-tile:hover{transform:translateY(-3px);box-shadow:0 6px 14px rgba(0,0,0,.18)}
/* ---------- intro ---------- */
.ds-intro{background:#fff;padding:30px 0 6px}
.ds-intro__box{max-width:780px;margin:0 auto;text-align:center;color:var(--text)}
.ds-intro__box p{margin:0 0 1.15em;font-size:1.06rem}
.ds-intro__lead{font-size:1.12rem!important}
.ds-intro__box strong{color:var(--green-d);font-weight:700}
.ds-dropcap{
display:inline-block;height:2.15em;width:auto;vertical-align:-0.95em;margin-right:.04em;
}
/* ---------- silhouette (grafica ufficiale: rilievo montano bianco su sfumatura lime) ---------- */
.ds-silhouette{width:100%;line-height:0;margin-top:-1px}
.ds-silhouette__img{display:block;width:100%;height:auto}
/* ---------- barra servizi ---------- */
.ds-services{background:#fff;padding:8px 0 46px}
.ds-services__bar{
display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
list-style:none;margin:0;padding:0;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.ds-service{display:flex;align-items:stretch}
.ds-service:not(:last-child)::after{
content:"";width:2px;align-self:center;height:36px;
background:linear-gradient(var(--green-lime),var(--green));opacity:.55;
}
.ds-service>a{display:flex;align-items:center;justify-content:center;padding:.8em 1.1em}
.ds-service__img{height:1.875rem;width:auto;display:block;transition:transform .2s ease}
.ds-service>a:hover .ds-service__img{transform:scale(1.05)}
/* fallback SVG (se mancano le immagini) */
.ds-service__icon svg{width:30px;height:30px;display:block}
/* ---------- pagine interne ---------- */
.ds-page-hero{
background:var(--svc-color,var(--green));
background-image:linear-gradient(160deg,rgba(255,255,255,.12),rgba(0,0,0,.12));
color:#fff;padding:46px 0;
}
.ds-page-hero--plain{--svc-color:var(--green)}
.ds-page-hero__inner{display:flex;align-items:center;gap:20px}
.ds-page-hero__icon{
flex:0 0 auto;width:74px;height:74px;background:#fff;border-radius:8px;
padding:9px;box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.ds-page-hero__icon svg,.ds-page-hero__img{width:100%;height:100%;object-fit:cover;border-radius:4px;overflow:hidden;display:block}
.ds-page-hero__title{color:#fff;margin:0;font-size:clamp(1.7rem,4vw,2.5rem)}
/* Intestazione pagina con la GRAFICA UFFICIALE (niente fascia colorata) */
.ds-page-hero--lockup{background:#fff;background-image:none;color:var(--text);padding:36px 0 14px;border-bottom:1px solid var(--line)}
.ds-page-hero__h1{margin:0;line-height:0}
.ds-page-hero__lockup{display:block;width:auto;max-width:100%;max-height:64px}
.ds-page__body{max-width:820px;margin:40px auto;padding-top:0}
.ds-page__body h2{color:var(--green);margin-top:1.4em;font-size:1.5rem}
.ds-page__body ul{padding-left:1.1em}
.ds-page__body li{margin:.3em 0;padding-left:.2em}
.ds-page__body li::marker{color:var(--green-lime)}
.ds-edit-note{margin-top:1.6em;padding:.7em 1em;background:var(--green-wash);border-left:3px solid var(--green-lime);font-size:.92rem;color:var(--muted)}
.ds-back a{font-family:var(--ff-head);font-weight:600}
.ds-other-areas{background:var(--green-wash);padding:34px 0;border-top:1px solid var(--line)}
.ds-other-areas__title{text-align:center;font-family:var(--ff-head);font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px}
.ds-services__bar--inner{border:0;background:#fff;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.ds-other-areas .ds-back{text-align:center;margin:18px 0 0}
.ds-postlist__item{padding:18px 0;border-bottom:1px solid var(--line)}
/* ---------- footer ---------- */
.ds-footer{background:#fff;padding-top:34px}
.ds-footer__inner{display:flex;gap:34px;align-items:flex-start;justify-content:center;flex-wrap:wrap;padding-bottom:26px}
.ds-footer__brand{flex:0 0 auto}
.ds-footer__brand img{width:190px;height:auto}
.ds-footer__info{flex:0 1 auto;font-size:.97rem;color:var(--text);padding-top:6px}
.ds-footer__info p{margin:0 0 .5em}
.ds-footer__info a{color:var(--text)}
.ds-footer__info a:hover{color:var(--green-lime-d)}
.ds-lbl{font-family:var(--ff-head);font-weight:700;color:var(--green)}
.ds-social{display:inline-flex;align-items:center;gap:8px;margin-left:12px;vertical-align:middle}
.ds-social a{display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--green);align-items:center;justify-content:center;transition:background .2s}
.ds-social a:hover{background:var(--green-lime-d)}
.ds-social svg{width:15px;height:15px;fill:#fff}
/* LinkedIn/Instagram senza pagina reale: stessa icona, ma inerte (no link, no hover). */
.ds-social__off{pointer-events:none}
.ds-social__handle{font-family:var(--ff-head);font-weight:600;color:var(--green)}
.ds-footer__bar{background:var(--green-lime);color:#fff}
.ds-footer__bar-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px var(--gutter);font-size:.84rem;flex-wrap:wrap}
.ds-footer__bar a{color:#fff}
.ds-credit{opacity:.9;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
/* ============================================================
Responsive
============================================================ */
@media (max-width:900px){
.ds-menu a{padding:.5em .8em;font-size:.78rem}
}
@media (max-width:768px){
body{font-size:16px}
.ds-nav-toggle{display:block}
.ds-nav{
position:absolute;top:var(--header-h);left:0;right:0;background:#fff;
border-bottom:1px solid var(--line);box-shadow:0 12px 18px rgba(0,0,0,.08);
max-height:0;overflow:hidden;transition:max-height .3s ease;
}
.ds-nav.is-open{max-height:70vh}
.ds-nav .ds-menu{flex-direction:column;align-items:stretch;padding:6px 0}
.ds-menu li:not(:last-child)::after{display:none}
.ds-menu li{border-bottom:1px solid #eef3e2}
.ds-menu a{padding:.85em var(--gutter);font-size:.9rem}
.ds-services__bar{flex-direction:column}
.ds-service{justify-content:center}
.ds-service:not(:last-child)::after{width:60%;height:1px;align-self:center;background:var(--line)}
.ds-service>a{justify-content:center;width:100%;padding:.8em 1em}
.ds-page-hero__inner{flex-direction:column;text-align:center;gap:14px}
.ds-page-hero--lockup{padding:24px 0 12px}
.ds-page-hero__lockup{max-height:44px}
.ds-footer__inner{flex-direction:column;align-items:center;text-align:center}
.ds-footer__bar-inner{justify-content:center;text-align:center}
.ds-social{margin-left:0;margin-top:6px}
}
@media (max-width:420px){
.ds-tiles{gap:8px}
.ds-tile{width:46px;height:46px}
.ds-hero__img{height:46vh}
}
@media (prefers-reduced-motion:reduce){
*{scroll-behavior:auto!important;transition:none!important}
}
/* ── Copertina fotografica in testa alle pagine-area (foto header) ───────────
Le 4 foto sono documentarie e di proporzioni molto diverse: le uniformo in
una fascia contenuta con ritaglio "cover" + punto focale per foto (nessun
soggetto tagliato), poi ci appoggio sopra il BADGE dell'area su card bianca
— stesso linguaggio della hero della home (foto + cartellino). Resta un
![]()
(alt/SEO) dentro la colonna boxed. */
.elementor-widget.ds-area-cover{margin-bottom:0}
.elementor-widget.ds-area-cover img{
width:100%;
aspect-ratio:2 / 1; /* fascia DETERMINISTICA (= 2560/850): una foto 3:1 entra perfetta a
QUALSIASI larghezza schermo, senza tagli. Export cliente: 2560×850. */
object-fit:cover;
display:block;
border-radius:6px;
}
/* Geologia: il file arriva gia' ritagliato (3550x1579 = 2.2483). Si adotta il
suo rapporto invece di 2:1, altrimenti "cover" taglierebbe un'inquadratura
gia' decisa. Se il file cambia, va riallineato anche questo numero. */
.elementor-widget.ds-area-cover--geologia img{aspect-ratio:2.2483;object-position:center}
/* Ingegneria: file gia' ritagliato (3315x1560 = 2.1250), stesso criterio di geologia. */
.elementor-widget.ds-area-cover--ingegneria img{aspect-ratio:2.1250;object-position:center}
/* Ambiente: file gia' ritagliato (4000x1858 = 2.1529), stesso criterio di geologia. */
.elementor-widget.ds-area-cover--ambiente img{aspect-ratio:2.1529;object-position:center}
/* Territorio e Progetti: file gia' ritagliati, stesso criterio di geologia. */
.elementor-widget.ds-area-cover--territorio img{aspect-ratio:2.0902;object-position:center}
.elementor-widget.ds-area-cover--progetti img{aspect-ratio:1.9345;object-position:center}
/* Su mobile la fascia 3:1 sarebbe troppo bassa → altezza fissa, ritaglio al centro. */
@media (max-width:600px){
.elementor-widget.ds-area-cover img{aspect-ratio:auto;height:200px}
}
/* Badge dell'area: lockup ufficiale su card bianca, sovrapposto alla foto
(come il logo-card della home). La card si stringe sul contenuto ed è
centrata; ombra morbida per farla "galleggiare". */
.elementor-widget.ds-area-badge{
margin-top:-28px;
margin-bottom:12px;
position:relative;
z-index:3;
text-align:center;
}
/* In questa build di Elementor l'![]()
è figlio DIRETTO del widget (niente
.elementor-widget-container), quindi la card bianca va messa sull'![]()
stessa: padding+sfondo bianco attorno al lockup trasparente, centrata. */
.elementor-widget.ds-area-badge img{
display:block;
box-sizing:content-box;
height:50px;
width:auto;
margin:0 auto;
background:#fff;
padding:15px 32px;
border-radius:12px;
box-shadow:0 12px 32px rgba(0,60,30,.18);
}
@media (max-width:600px){
.elementor-widget.ds-area-badge{margin-top:-20px}
.elementor-widget.ds-area-badge img{height:38px;padding:11px 22px}
}
/* ==== Modifiche Sara: pagine-area (lockup sotto la foto, testo centrato, sfumatura colore-area, barra HOME) ==== */
.ds-foto-credit{font-family:var(--ff-head);font-size:.62rem;letter-spacing:.06em;color:#9aa39a;text-transform:uppercase;margin:0;line-height:1}
.elementor-widget.ds-area-lockup{margin:0}
.elementor-widget.ds-area-lockup img{height:5.24rem;width:auto;display:block}
.elementor-widget.ds-sfumatura{margin:0}
.elementor-widget.ds-sfumatura img{width:100%;display:block}
.ds-homelink{margin:0}
.ds-homelink a{font-family:var(--ff-head);font-weight:700;color:var(--green);text-transform:uppercase;text-decoration:none;letter-spacing:.02em;font-size:.9rem}
.ds-homelink a:hover{color:var(--green-d)}
@media (max-width:600px){ .elementor-widget.ds-area-lockup img{height:61px} }
/* testo area: allineato a SINISTRA come nella scansione */
.ds-area-text .elementor-widget-container{text-align:left}
.ds-area-text p{text-align:left;margin:0 0 .5em}
/* punti a FLUSSO (multi-colonna naturale) come nella scansione: testo corto = 2-3 per riga, lungo = 1 */
.ds-area-text ul{list-style:none;padding:0;margin:.4em 0;display:flex;flex-wrap:wrap;column-gap:1.9em;row-gap:.34em}
.ds-area-text li{position:relative;padding-left:.95em;margin:0;text-align:left;max-width:100%}
.ds-area-text li::before{content:"\2022";position:absolute;left:0;color:var(--green-lime);font-weight:700}
/* disposizione punti IDENTICA allo schizzo, per pagina */
.ds-area-text--geologia ul,.ds-area-text--progetti ul{display:block} /* 1 per riga */
.ds-area-text--geologia li,.ds-area-text--progetti li{margin:.16em 0}
.ds-area-text--ambiente ul,.ds-area-text--territorio ul{display:grid;grid-template-columns:repeat(2,auto);justify-content:start;column-gap:2.6em;row-gap:.34em} /* 2 colonne */
/* pagine interne: solo il menu in alto, niente logo (come nello schizzo delle aree) */
.ds-header:not(.ds-header--home) .ds-branding{display:none}
/* sfumatura: attaccata alla galleria come nella scansione */
.elementor-widget.ds-sfumatura{margin-top:-1.875rem}
/* 9 riquadri vuoti (gallerie non ancora popolate) — come nello schizzo */
.ds-empty-gallery .elementor-widget-container{margin:0}
.ds-empty-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.875rem}
.ds-empty-cell{aspect-ratio:4 / 3;border:1px solid #d3d9cb;border-radius:2px;background:#fff}
/* Stesse soglie della griglia foto (gallery.css): il tablet in verticale tiene
le 3 colonne del PC, si scende a 2 solo sotto i 768. */
@media (max-width:767px){.ds-empty-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ds-empty-grid{grid-template-columns:1fr}}
/* Home: logo in alto a SINISTRA + menu a destra (come pag.1 scansione) */
.ds-header--home .ds-branding{display:flex}
.ds-header--home .ds-header__inner{justify-content:space-between}
/* ============================================================
Modifiche Sara — PASS 2 (fedelta' allo schizzo: colonna stretta,
ritmo compatto, menu a destra, punti quadrati, intro grassetto)
============================================================ */
/* Menu in alto: a DESTRA sulle pagine interne (logo nascosto) */
.ds-header:not(.ds-header--home) .ds-header__inner{justify-content:flex-end}
/* Punti elenco QUADRATI (come lo schizzo), non tondi */
.ds-area-text li::before{content:"\25AA"}
/* Riga introduttiva ("Forniamo/Operiamo/Supportiamo/Progettiamo...") in GRASSETTO */
.ds-area-text p{font-weight:700}
.ds-area-text li{font-weight:400}
/* SFUMATURA che risale DIETRO l'ultima riga della galleria (niente fascia vuota) */
.ds-area-gallery{position:relative;z-index:1}
.elementor-widget.ds-sfumatura{position:relative;z-index:0;margin-top:-300px}
/* Footer: etichette MAIUSCOLE + riga studio, "responsabile del sito" centrato (schizzo pag.1) */
.ds-footer__info .ds-lbl{text-transform:uppercase}
.ds-footer__co{font-family:var(--ff-head);font-weight:700;color:var(--green);text-transform:uppercase;margin:0 0 .35em;letter-spacing:.02em}
.ds-footer__bar-inner{position:relative;justify-content:center}
/* ⚠️ right:var(--gutter), NON right:0. Il credito e' in posizione assoluta per
poter stare a destra mentre il copyright resta centrato nella barra (con un
flex normale non si ottiene). Ma "right:0" si misura dal bordo INTERNO del
padding del contenitore, quindi scavalca i 22px di gutter che allineano tutto
il resto della pagina e la scritta finisce incollata al bordo della barra
(segnalato dall'utente 20/07). Con il gutter torna in colonna con il testo
dello studio qui sopra. */
.ds-footer__bar .ds-credit{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%)}
/* PASS 2b — header: lockup sovrapposto alla foto, credito overlay, rientri testo */
.elementor-widget.ds-area-lockup{margin-top:-2.125rem;position:relative;z-index:3}
.ds-area-cover figure{position:relative;margin:0}
.ds-area-cover figcaption,.ds-area-cover .widget-image-caption{position:absolute;right:10px;bottom:7px;margin:0;padding:0;font-family:var(--ff-head);font-size:.58rem;letter-spacing:.05em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
/* rientro testo allineato al lockup (blocco rientrato nello schizzo) */
.ds-area-text--geologia .elementor-widget-container,
.ds-area-text--ambiente .elementor-widget-container,
.ds-area-text--territorio .elementor-widget-container{padding-left:14%}
/* PASS 2c — centraggio lockup, rientro testo, header home compatto */
.ds-area-lockup img{margin-left:auto;margin-right:auto}
.ds-area-text--geologia p,.ds-area-text--geologia ul,
.ds-area-text--ambiente p,.ds-area-text--ambiente ul,
.ds-area-text--territorio p,.ds-area-text--territorio ul{margin-left:18%}
.ds-header--home .ds-header__inner{justify-content:flex-start;gap:36px}
/* ============================================================
PASS 3 — rifiniture finali per fedelta' allo schizzo
============================================================ */
/* Menu piccolo e compatto; via la riga divisoria dell'header */
.ds-header{border-bottom:0;box-shadow:none}
.ds-menu a{font-size:.6rem;padding:.32em .5em;letter-spacing:.02em}
.ds-menu li:not(:last-child)::after{height:.6875rem}
/* Angoli VIVI (niente arrotondamento) su foto header, tessere galleria e riquadri vuoti */
.ds-area-cover img,.ds-hero-photo img,.ds-gallery,.ds-gallery__item,.ds-gallery__link,.ds-gallery__item img,.ds-empty-cell{border-radius:0 !important}
/* Celle galleria piu' vicine al quadrato (come lo schizzo) */
.ds-gallery__item{aspect-ratio:6 / 5}
.ds-empty-cell{aspect-ratio:6 / 5}
/* Testo aree piu' piccolo e denso (lo schizzo e' compatto) */
.ds-area-text{font-size:.84rem;line-height:1.42}
.ds-area-text li::before{font-size:.6em;top:.05em}
.ds-area-text li{margin:.16em 0}
.ds-area-text p{margin-top:0;margin-bottom:.5em}
.page-id-9 .ds-area-lockup img{height:70px !important}
.ds-home-intro p{margin:0 0 .12em !important;line-height:1.34}
/* 2 colonne piu' strette (ambiente/territorio) */
.ds-area-text--ambiente ul,.ds-area-text--territorio ul{column-gap:1.3em;row-gap:.15em}
/* Ingegneria: flusso compatto e font piu' piccolo per chiudere i 7 punti in 3 righe */
.ds-area-text--ingegneria{font-size:.74rem}
.ds-area-text--ingegneria ul{column-gap:1em;row-gap:.1em}
/* Intro e punti rientrati sotto il lockup come nelle ALTRE aree (richiesta
utente 21/07): stesso identico trattamento di geologia/ambiente/territorio —
padding-left sul container + margin-left sul blocco, testo a SINISTRA (non
centrato-testo). Prima ingegneria era l'unica area senza rientro e restava
incollata al bordo sinistro sotto un lockup centrato. Valori allineati a
quelli delle altre (righe 380-382 e 513-515). */
.ds-area-text--ingegneria .elementor-widget-container{padding-left:14%}
/* 26% e non 22%: misurato, il bordo sinistro dei punti delle altre aree cade a
x~488-507 (territorio 488, geologia 503, ambiente 507); a 22% ingegneria
restava a 454, ~40px piu' a sinistra. A 26% rientra nella stessa fascia. */
.ds-area-text--ingegneria p,
.ds-area-text--ingegneria ul{margin-left:26%}
/* Rientro anche Progetti (elenco allineato al logo, meno della griglia) */
.ds-area-text--progetti p,.ds-area-text--progetti ul{margin-left:10%}
/* Progetti: sfumatura rossa NON risale (niente galleria) -> resta sotto il testo */
.ds-sfumatura--progetti{margin-top:1.375rem !important}
/* Credito foto della home: SOTTO la foto, a destra, su bianco — come nella
scansione (pag. 1: "FOTO © LUCA ARTUSI" sta fuori dalla foto) e come sulle
pagine area. Prima era un overlay bianco dentro la foto e non si leggeva.
⚠️ Il selettore aggancia anche .elementor-widget-image, e non e' ridondanza:
Elementor genera in post-4.css
.elementor-widget-image .widget-image-caption{color:var(--e-global-color-text)}
che ha la STESSA specificita' della regola del tema ma sta in un foglio
caricato DOPO main.css, quindi vinceva lui e il testo usciva verde scuro sul
prato chiaro. Qui serve piu' specificita', l'ordine non basta.
(Sulle pagine area il colore "funziona" solo perche' coincide con quello
globale: se un domani cambia il brand kit, li' cambia anche il credito.) */
.ds-hero-photo figure{position:relative;margin:0}
.elementor-widget-image.ds-hero-photo figcaption,
.elementor-widget-image.ds-hero-photo .widget-image-caption{
position:absolute;top:100%;right:2px;bottom:auto;left:auto;
margin:4px 0 0;padding:0;color:var(--green);text-shadow:none;
font-family:var(--ff-head);font-size:.6rem;letter-spacing:.05em;
text-transform:uppercase;line-height:1;z-index:2;
}
/* Home: foto header piu' alta (~3:2) come lo schizzo */
.ds-hero-photo img{aspect-ratio:1.62 / 1;object-fit:cover;object-position:center 42%;width:100%}
/* Footer compatto */
.ds-footer__info p{margin:0 0 .1em;line-height:1.42}
.ds-footer__co{margin-bottom:.08em}
/* Progetti: lockup titolo piu' piccolo (era troppo grande) */
.page-id-9 .ds-area-lockup img{height:70px}
/* ============================================================
PASS 4 — correzioni dal diff multi-agente (15/07)
============================================================ */
/* [tutti] Punti elenco = QUADRATO PIENO disegnato in CSS (non glyph di font,
che veniva letto come asterisco). Dimensione/forma deterministica. */
.ds-area-text li::before{
content:"";
position:absolute;left:0;top:.5em;
width:.42em;height:.42em;
background:var(--green-lime);
font-size:1em;line-height:0;border-radius:0;
}
/* [ingegneria/progetti/territorio] credito foto SOTTO la foto, a destra, su
bianco, testo scuro (non piu' bianco sovrapposto dentro la foto). */
.ds-area-cover figure{position:relative}
.ds-area-cover figcaption,
.ds-area-cover .widget-image-caption{
position:absolute;top:100%;right:2px;bottom:auto;left:auto;
margin:4px 0 0;color:var(--green);text-shadow:none;
font-family:var(--ff-head);font-size:.6rem;letter-spacing:.05em;
text-transform:uppercase;line-height:1;z-index:2;
}
/* [ingegneria/ambiente/territorio/geologia] la SFUMATURA sale piu' in alto:
l'ultima riga di tessere deve poggiare sul colore (2 righe su bianco + 1 sul
paesaggio), e la fascia colorata risulta piu' alta. */
.elementor-widget.ds-sfumatura{margin-top:-27.5rem}
/* [ambiente/territorio] punti a FLUSSO INLINE (2 per riga, il 2° punto segue
il testo del 1°), non piu' 2 colonne fisse allineate. */
.ds-area-text--ambiente ul,.ds-area-text--territorio ul{
display:flex;flex-wrap:wrap;column-gap:1.6em;row-gap:.18em;
grid-template-columns:none;
}
.ds-area-text--ambiente li,.ds-area-text--territorio li{max-width:none}
/* [ingegneria] chiudere i 7 punti su 3 righe (3-2-2): voci un filo piu' larghe. */
.ds-area-text--ingegneria{font-size:.8rem}
.ds-area-text--ingegneria ul{column-gap:1.5em;row-gap:.12em}
/* [progetti] voci in GRASSETTO, piu' arieggiate; piu' respiro titolo->intro. */
.ds-area-text--progetti li{font-weight:700;margin:.4em 0}
.ds-area-text--progetti .elementor-widget-container{padding-top:18px}
.ds-area-text--progetti p:first-child{margin-bottom:1em}
/* [progetti] sfumatura rossa piu' vicina alla lista (meno vuoto morto). */
.ds-sfumatura--progetti{margin-top:-40px !important}
/* [geologia/ambiente/territorio] testo allineato al logo del lockup (centrato):
bordo sinistro del testo ~ bordo sinistro del wordmark. */
.ds-area-text--geologia p,.ds-area-text--geologia ul,
.ds-area-text--ambiente p,.ds-area-text--ambiente ul,
.ds-area-text--territorio p,.ds-area-text--territorio ul{margin-left:22%}
/* [HOME] foto hero piu' panoramica e bassa (~1.9:1). */
.ds-hero-photo img{aspect-ratio:1.9 / 1}
/* [HOME] header logo+menu CENTRATO sopra la foto (annotazione "in centro"). */
.ds-header--home .ds-header__inner{justify-content:center !important;gap:44px}
/* [HOME] piu' respiro tra il blocco icone del marchio e il paragrafo intro. */
.ds-home-intro .elementor-widget-container{padding-top:22px}
/* [HOME] blocco contatti footer compatto (interlinea stretta). */
.ds-footer__info p{line-height:1.22}
/* ============================================================
PASS 5 — round 3 del diff multi-agente (15/07)
============================================================ */
/* [HOME] intro piu' serrato (~20-25% piu' basso): interlinea stretta. */
.ds-home-intro p{line-height:1.18 !important;margin:0 0 .06em !important}
.ds-home-intro .elementor-widget-container{padding-top:12px}
/* [INGEGNERIA] voci elenco ravvicinate (flusso inline stretto), resta 3-2-2. */
.ds-area-text--ingegneria ul{column-gap:.85em}
/* [AMBIENTE/TERRITORIO] elenco 2 per riga, blocco compatto a SINISTRA
(~meta' larghezza) invece di distendersi a tutta larghezza. */
.ds-area-text--ambiente ul,.ds-area-text--territorio ul{
max-width:58%;column-gap:1.1em;
}
/* [AMBIENTE/TERRITORIO] la sfumatura verde risale di piu' (copre tutta l'ultima
fila, sfuma dal fondo della penultima) e avvicina il footer bar. */
.elementor-widget.ds-sfumatura--ambiente,
.elementor-widget.ds-sfumatura--territorio{margin-top:-520px}
/* [AMBIENTE/PROGETTI] foto header: crop ravvicinato fatto sull'ASSET (headers
ritagliati 2:1 con montagna prominente) — niente zoom CSS (tagliava il credito). */
/* [AMBIENTE] un filo piu' d'aria tra elenco e prima fila di tessere. */
.ds-empty-grid{margin-top:.625rem}
/* [PROGETTI] piu' respiro titolo->intro e stacco netto prima di "PAGINA...". */
.ds-area-text--progetti .elementor-widget-container{padding-top:2.125rem}
.ds-area-text--progetti p:last-child{font-weight:700;color:var(--green);letter-spacing:0;margin-top:1.5em}
/* [PROGETTI] blocco testo allineato al logo (spostato a dx). */
.ds-area-text--progetti p,.ds-area-text--progetti ul{margin-left:15%}
/* ============================================================
PASS 6 — round 4 del diff (15/07): fix regressioni + rifiniture
============================================================ */
/* [tutte interne] lockup titolo piu' sovrapposto alla foto (box sul terzo
inferiore, come geologia nello schizzo). */
/* scan: box 12-18px sopra il bordo foto. Gap fisso 20px di Elementor
azzerato (sotto) -> margine PURO proporzionale, regge a ogni larghezza. */
.elementor-widget.ds-area-cover{margin-bottom:0 !important}
.elementor-widget.ds-area-lockup{margin-top:-.8125rem}
/* [tutte interne] voce HOME della barra nav grande come le altre (era text
piccolo vs lockup-immagine). */
.ds-homelink a{font-size:1.4rem;line-height:1}
/* [HOME] menu testata piu' grande e accostato al logo. */
.ds-menu a{font-size:.72rem}
.ds-header--home .ds-header__inner{gap:26px}
/* [HOME] il vuoto icone->paragrafo ora e' dato dal padding della sezione gradiente. */
.ds-home-intro .elementor-widget-container{padding-top:.5rem}
/* [HOME] icone social footer: piccole, INLINE, senza cerchi verdi (solo FB+LinkedIn). */
.ds-social a{width:auto;height:auto;border-radius:0;background:none}
.ds-social a:hover{background:none}
.ds-social svg{width:16px;height:16px;fill:var(--green)}
.ds-social{gap:6px;margin-left:8px}
/* [AMBIENTE/TERRITORIO] elenco = 2 colonne PULITE (2 voci per riga), a sinistra
(lo schizzo mostra colonne allineate, non flusso irregolare). */
.ds-area-text--ambiente ul,.ds-area-text--territorio ul{
display:grid;grid-template-columns:repeat(2,max-content);
justify-content:start;gap:.18em 1.5em;max-width:none;
}
/* [AMBIENTE/TERRITORIO] tessere VUOTE trasparenti: la sfumatura verde dietro
traspare attraverso l'ultima fila (tessere che "galleggiano sul verde"). */
.page-id-7 .ds-empty-cell,.page-id-8 .ds-empty-cell{background:transparent}
/* sfumatura amb/terr: abbassata rispetto a PASS5 (il verde saturo torna dietro
la 3a fila e prosegue sotto la griglia, non nascosto troppo in alto). */
.elementor-widget.ds-sfumatura--ambiente,
.elementor-widget.ds-sfumatura--territorio{margin-top:-20.625rem}
/* ============================================================
PASS 7 — round 5: piu' RESPIRO verticale nelle zone di testo
(lo schizzo e' piu' arieggiato). Ambiente/Ingegneria = gia' 0 diff,
NON toccate. Fix scoped per pagina per non regredire.
============================================================ */
/* [PROGETTI] elenco e stacchi molto piu' ariosi (scan ~1.8-2.9x). */
.ds-area-text--progetti .elementor-widget-container{padding-top:3.75rem}
.ds-area-text--progetti li{margin:.72em 0}
.ds-area-text--progetti p:first-child{margin-bottom:1.7em}
.ds-area-text--progetti p:last-child{font-weight:800;font-size:1.02em;color:var(--green);letter-spacing:0;margin-top:2.6em}
/* [TERRITORIO] piu' stacco titolo->elenco + gutter verticale griglia maggiore. */
.ds-area-text--territorio ul{margin-top:1em}
.page-id-8 .ds-empty-grid{gap:2.125rem .875rem}
/* [TERRITORIO] blocco testo un filo piu' a destra (allineamento al lockup). */
.ds-area-text--territorio p,.ds-area-text--territorio ul{margin-left:24%}
/* [GEOLOGIA] testo elenco piu' grande e ariose (scan +25-30%), allineato al
logo, e piu' bianco tra sfumatura e footer. Scoped: amb/ing restano 0-diff. */
.ds-area-text--geologia{font-size:.96rem;line-height:1.6}
.ds-area-text--geologia p,.ds-area-text--geologia ul{margin-left:25%}
.ds-area-text--geologia li{margin:.3em 0}
.elementor-widget.ds-sfumatura--geologia{margin-bottom:2.75rem}
/* ============================================================
PASS 8 — round 6: gradiente home centrato (template), + questi.
============================================================ */
/* [TERRITORIO] sfumatura piu' alta di ambiente: i picchi bianchi devono
risalire DENTRO il bordo inferiore della 3a fila (ora restava uno stacco). */
.elementor-widget.ds-sfumatura--territorio{margin-top:-25rem}
/* [PROGETTI] blocco lista ancora piu' arioso (scan ~1.5x): interlinea voci +
stacchi maggiori. */
.ds-area-text--progetti li{margin:1.05em 0}
.ds-area-text--progetti p:first-child{margin-bottom:2em}
.ds-area-text--progetti p:last-child{margin-top:3em}
/* [PROGETTI] lockup titolo 'PROGETTI IN CORSO //' un filo piu' grande (~60% foto). */
.page-id-9 .ds-area-lockup img{height:4.95rem !important} /* scan: box 74.6% foto */
/* ============================================================
PASS 9 — round 7: coerenza sfumatura ingegneria + rifiniture
============================================================ */
/* [INGEGNERIA] stesso trattamento di amb/terr: celle vuote trasparenti + sfumatura
piu' alta cosi' l'ultima fila di tessere sta DENTRO il tramonto. */
.page-id-6 .ds-empty-cell{background:transparent}
.elementor-widget.ds-sfumatura--ingegneria{margin-top:-23.75rem}
/* [PROGETTI] piu' aria prima di 'PAGINA IN CONTINUO AGGIORNAMENTO'. */
.ds-area-text--progetti p:last-child{margin-top:4em}
/* ============================================================
PASS 10 — verificati DA ME sulla scansione (round 9):
============================================================ */
/* [HOME] barra verde copyright LARGA COME IL CONTENUTO (nello scan ha bianco
ai lati, allineata alla foto header), non full-bleed. */
.ds-footer__bar{max-width:var(--maxw);margin-left:auto;margin-right:auto}
/* [HOME] social = BADGE CIRCOLARI pieni piccoli (scan: 2 cerchietti scuri dopo
il numero), alti quanto la riga di testo. */
.ds-social a{width:1.0625rem;height:1.0625rem;border-radius:50%;background:var(--green);display:inline-flex;align-items:center;justify-content:center}
.ds-social a:hover{background:var(--green-lime-d)}
.ds-social svg{width:.625rem;height:.625rem;fill:#fff}
.ds-social{gap:.3125rem}
/* ============================================================
PASS 11 — testata HOME misurata sulla scansione (16/07):
menu 58% della larghezza foto (era 46%), blocco logo+menu con
base allineata, menu quasi appoggiato al bordo foto.
============================================================ */
/* Menu piu' grande SOLO in home: scan home = 654/1119 della foto (x1.26);
scan pagine-area = ~445/1020 -> resta .72rem. */
.ds-header--home .ds-menu a{font-size:.9rem}
.ds-header--home .ds-menu li:not(:last-child)::after{height:1rem}
/* Logo testata: scan = 100/1119 della foto -> 85px a 1440. */
.ds-header--home .ds-branding img{width:5.3125rem;height:auto}
/* Base del menu allineata alla base del logo (scan: STUDIO e HOME sulla
stessa linea) e testata compatta: bordo foto ~13px sotto il menu. */
.ds-header--home .ds-header__inner{min-height:0;align-items:flex-end;padding:.625rem 0 0;gap:.75rem}
/* [pagine-area] testata compatta: scan = base menu ~34px sopra il bordo foto
(era 52). Menu in basso nel blocco, header non piu' alto del necessario. */
.ds-header:not(.ds-header--home) .ds-header__inner{min-height:0;padding:.875rem 0 .375rem}
/* ============================================================
PASS 12 — FACSIMILE PROPORZIONALE (16/07): la scansione e' UNA
composizione; il sito la mantiene a OGNI larghezza finestra.
Root rem = 1.6835% della larghezza colonna (16px @1440) -> tutte
le misure in rem/em/% scalano insieme alla foto (66vw, cap 1080).
Sotto i 901px tornano i breakpoint responsive normali.
============================================================ */
html{font-size:calc(min(66vw,1080px)*.016835)}
@media (max-width:900px){html{font-size:16px}}
/* colonna testata SENZA gutter sul desktop: il menu chiude sul bordo
foto come nello scan (gutter solo mobile per il menu a tendina). */
@media (min-width:901px){.ds-header .ds-container{padding-left:0;padding-right:0}}
/* marchio footer e capolettera S scalano col testo */
.ds-footer__brand img{width:12.5rem;height:auto}
.ds-home-intro p img{height:3.294em;width:auto}
/* icone barre (Elementor le fissa in px nel CSS generato): qui in rem */
.ds-svc-icon img{height:2.125rem !important}
.ds-navstrip-icon img{height:1.875rem !important}
/* niente spazio fisso sotto la foto hero: il margine % del marchio
parte esatto dal bordo foto (proporzionale) */
.elementor-widget.ds-hero-photo{margin-bottom:0 !important}
/* card marchio home: 20.52% della colonna-foto (scan 230/1119) via calc, a
OGNI larghezza (il width % di Elementor si risolve contro il PNG, non la
colonna; il width_mobile 146px spezzava la proporzione sotto i 900px ->
rimosso). Centratura forzata a prescindere dalla struttura widget. */
.ds-hero-marchio{text-align:center}
/* ⚠️ 22,51% e non 20,52%: dal 20/07 il marchio e' il file del grafico
(Marchio.jpg), che ha il disegno 384x384 su tela 438, cioe' 27px di bianco
per lato contro gli 8 del vecchio. La larghezza qui vale la TELA, quindi per
tenere il DISEGNO grande come prima serve 20,52% x (425/442) / (384/438).
Se cambia il file, rifare il conto con le sue misure. */
.ds-hero-marchio img{
width:calc(min(66vw,1080px)*.2251) !important;
max-width:none !important;height:auto;
margin-left:auto !important;margin-right:auto !important;
}
/* ============================================================
PASS 14 — 7 agenti (16/07): differenze reali corroborate.
============================================================ */
/* [AREE amb/ing/prog] testo intro+elenco TROPPO PICCOLO e compresso: più
grande e arioso, così riempie la colonna come nella scansione (3 agenti). */
.ds-area-text{font-size:.98rem;line-height:1.58}
.ds-area-text li{margin:.28em 0}
.ds-area-text--ingegneria{font-size:.92rem}
.ds-area-text--ingegneria ul{column-gap:1.1em;row-gap:.2em}
/* geologia resta com'era (l'agente la dà per combaciante) */
.ds-area-text--geologia{font-size:.98rem;line-height:1.6}
/* [AREE] la placca bianca del lockup deve MORDERE di più la foto (scan: ~11px
sopra il bordo; build era 3px). Più sovrapposizione (3 agenti). */
.elementor-widget.ds-area-lockup{margin-top:-1.5rem}
/* [AREE] galleria: gutter più stretti = mosaico compatto come nella scansione
(geologia). */
.ds-empty-grid{gap:.5rem}
.page-id-8 .ds-empty-grid{gap:.7rem .5rem}
/* [PROGETTI] "PAGINA IN CONTINUO AGGIORNAMENTO" più grande e marcata. */
.ds-area-text--progetti p:last-child{font-size:1.16em;font-weight:800}
/* [HOME] menu testata troppo spaziato (2 agenti: 68% vs 61,7% della foto):
tracking e padding più stretti. */
.ds-header--home .ds-menu a{letter-spacing:.01em;padding:.5em .7em}
.ds-header--home .ds-header__inner{gap:8px}
/* ============================================================
PASS 15 — intro home: le righe devono arrivare ai bordi come
nella scansione (utente 16/07). Scan riga lunga = 83,7% foto,
build era 79,8% -> corpo +5% così riempie fino ai bordi.
============================================================ */
.ds-home-intro p{font-size:1.115rem}
/* ============================================================
PASS 17 — FOTO NELLA GRIGLIA di Ingegneria / Ambiente / Territorio
(materiale Sara 19/07). Misure prese dalla scansione (200 dpi).
⚠️ La pagina 3 del PDF (ingegneria) è STIRATA IN ORIZZONTALE del 3,4%
da CamScanner: righello indipendente = la stringa di menu in testa, che è
lo stesso identico testo su tutte le pagine, misura 452px con maiuscole di
13px su p.3 contro 437px con maiuscole di 14px su p.5. Confermato dalla
larghezza griglia: 1025px su p.3 contro 991px su p.4. Le misure VERTICALI
invece coincidono (righe 254-256px ovunque).
Quindi il rapporto cella va preso da p.4/p.5, NON da p.3:
cella 319,8 x 254,3 px -> rapporto 1,25 (5:4)
gutter colonne 16 px -> 1,56% della griglia (0,925rem)
gutter righe 36,5 px -> 3,56% della griglia (2,14rem)
============================================================ */
/* NB: gallery.css viene accodato DOPO main.css, quindi qui serve più
specificità (.ds-area-gallery ...) o lo shorthand `gap` di gallery.css
vince su column-gap/row-gap. */
.ds-area-gallery .ds-gallery__grid{column-gap:.925rem;row-gap:2.14rem}
.ds-area-gallery .ds-gallery__link{aspect-ratio:1.25;border:0;box-shadow:none;background:transparent}
.ds-area-gallery .ds-gallery__item{aspect-ratio:auto}
/* [TERRITORIO] non sono foto ma TAVOLE TECNICHE (carte geologiche, di
pericolosità, microzonazione sismica) con legenda al margine: un ritaglio
"cover" taglierebbe legenda e bordi della carta. Quindi si mostrano
INTERE su fondo bianco. Le 3 immagini reali (07-08-09, 4:3) riempiono
comunque quasi tutta la cella.
ATTENZIONE: il ritaglio avveniva NEL FILE (add_image_size
'ds_gallery_thumb' 800x600 crop=true), quindi object-fit da solo non
bastava: serve la miniatura non ritagliata 'ds_gallery_thumb_fit'. Le due
cose viaggiano insieme tramite l'attributo data-fit. */
/* Fondo TRASPARENTE, non bianco: la sfumatura sale dietro alla griglia, quindi
un fondo bianco disegnerebbe una banda chiara sopra di essa nelle bande vuote
della lettera-box (segnalato dall'utente 20/07). Cosi' le foto incontrano
direttamente la sfumatura. Sul resto della pagina il fondo e' bianco comunque. */
.ds-gallery[data-fit="contain"] .ds-gallery__link{background:transparent}
.ds-gallery[data-fit="contain"] .ds-gallery__link img{object-fit:contain}
.ds-gallery[data-fit="contain"] .ds-gallery__link:hover img,
.ds-gallery[data-fit="contain"] .ds-gallery__link:focus-visible img{transform:scale(1.03)}
/* ============================================================
PASS 18 — SFUMATURA: distanza dalle foto (segnalata dall'utente 19/07)
La coda colorata che scende SOTTO l'ultima fila di foto era diversa su
ogni pagina, perché nei pass precedenti il margine era stato tarato a mano
pagina per pagina (-27,5 / -23,75 / -20,625 / -25rem). Quei valori erano
il difetto: la geometria delle aree è identica, quindi la regola è una sola.
Misura sulla scansione (coda / altezza cella, rapporto verticale/verticale
così è immune allo stiramento orizzontale di p.3):
geologia 0,461 · ingegneria 0,441 · ambiente 0,406 · territorio 0,453
-> media 0,440 = 108 px su cella da 245,5
Partendo dalle code misurate sul sito, la correzione richiesta da ciascuna
pagina converge sullo stesso numero: -346,5 px (geologia -346, ingegneria
-347, ambiente -346, territorio -347). Da qui l'unico valore -21,66rem.
============================================================ */
.elementor-widget.ds-sfumatura--geologia,
.elementor-widget.ds-sfumatura--ingegneria,
.elementor-widget.ds-sfumatura--ambiente,
.elementor-widget.ds-sfumatura--territorio{margin-top:-21.66rem}
/* ============================================================
PASS 18b — MOBILE: overflow orizzontale su ambiente e territorio.
Sotto i 900px la pagina scorreva lateralmente di ~150px. Due cause
sommate, entrambe pensate per il desktop e mai richiuse in una media
query: (1) gli elenchi a 2 colonne usano `repeat(2,max-content)`, che
per definizione NON si restringe sotto la larghezza dell'item piu'
lungo; (2) i rientri percentuali (margin-left fino al 25% e
padding-left 14%) che allineano il testo al lockup sul desktop.
Sotto i 900px il tema esce comunque dal facsimile proporzionale
(html torna a 16px fissi), quindi qui si impagina per la lettura.
============================================================ */
@media (max-width:900px){
.ds-area-text--geologia .elementor-widget-container,
.ds-area-text--ambiente .elementor-widget-container,
.ds-area-text--territorio .elementor-widget-container,
.ds-area-text--ingegneria .elementor-widget-container{padding-left:0}
.ds-area-text--geologia p,.ds-area-text--geologia ul,
.ds-area-text--ambiente p,.ds-area-text--ambiente ul,
.ds-area-text--territorio p,.ds-area-text--territorio ul,
.ds-area-text--ingegneria p,.ds-area-text--ingegneria ul,
.ds-area-text--progetti p,.ds-area-text--progetti ul{margin-left:0}
.ds-area-text--ambiente ul,.ds-area-text--territorio ul,
.ds-area-text--ingegneria ul{display:block;columns:auto;max-width:100%}
.ds-area-text li{max-width:100%}
}
/* Modalità 'auto': cover e contain convivono nella stessa griglia, quindi il
fit si applica per-cella (classe sull'item) e non solo via data-fit. */
.ds-gallery__item--contain .ds-gallery__link{background:transparent}
.ds-gallery__item--contain .ds-gallery__link img{object-fit:contain}
.ds-gallery__item--contain .ds-gallery__link:hover img,
.ds-gallery__item--contain .ds-gallery__link:focus-visible img{transform:scale(1.03)}
/* Silhouette della home a piena larghezza di colonna. Prima "funzionava" solo
perché il PNG era largo 1920px e finiva sempre contro max-width:100%; l'SVG
ha larghezza naturale 510 e senza questa regola verrebbe disegnato piccolo.
Le sfumature delle aree hanno già la regola equivalente su .ds-sfumatura. */
.elementor-widget.ds-home-silhouette img{width:100%;height:auto;display:block}
/* ============================================================
PASS 19 — TESTO ALLINEATO AL LOCKUP (segnalato dall'utente 20/07)
Nel progetto il bordo sinistro del testo cade ESATTAMENTE sul bordo
sinistro del lockup: misurato sulla scansione di geologia, testo a
x=603 contro lockup a x=605, cioe' 2 px su una foto larga 1050 (0,2%).
Le percentuali fisse usate finora (18/22/24/25%) non possono centrarlo:
il lockup e' CENTRATO e ogni area ha un PNG di larghezza diversa, quindi
il suo bordo sinistro dipende dall'asset, non dal contenitore.
Formula: meta' contenitore meno meta' lockup.
⚠️ Due unita' diverse, e non e' un capriccio: sulle aree l'altezza del
lockup e' FISSA (56px, imposta da Elementor e vincente su .ds-area-lockup
img{height:3.25rem}), quindi la meta'-larghezza e' una quantita' in px;
su progetti invece vale 3.125rem, che scala col contenitore, quindi li'
la meta'-larghezza e' una PERCENTUALE. Se cambia l'altezza del lockup o
il PNG di un'area, questi numeri vanno rifatti.
============================================================ */
@media (min-width:901px){
/* I lockup del grafico (20/07, cartella Downloads/jpg20:07:26) hanno il
disegno su una tela piu' grande, con margine bianco tutt'intorno voluto da
lui. Quindi il bordo del RIQUADRO non e' il bordo del logo, e il conto ha
un termine in piu': si parte dal centro, si toglie mezza tela e si
RIAGGIUNGE il margine sinistro, entrambi in scala.
margine = 50% - scala x (larghezza_tela / 2 - margine_sx_del_file)
con scala = altezza_resa / 179. Sulle aree l'altezza e' 90px fissi
(Elementor), su progetti 4.95rem che scala col contenitore: per questo
sotto ci sono px in un caso e una percentuale nell'altro.
I numeri fra parentesi sono tela e margine sinistro di ogni file. */
.ds-area-text--geologia p, .ds-area-text--geologia ul {margin-left:calc(50% - 216.96px)} /* 921x179, sx 29 */
.ds-area-text--ambiente p, .ds-area-text--ambiente ul {margin-left:calc(50% - 212.93px)} /* 921x179, sx 37 */
.ds-area-text--territorio p, .ds-area-text--territorio ul {margin-left:calc(50% - 231.79px)} /* 992x179, sx 35 */
.ds-area-text--progetti p, .ds-area-text--progetti ul {margin-left:16.78%} /* 1475x179, sx 24 */
}
/* ============================================================
PASS 20 — VOCE "HOME" DELLA BARRA IN BASSO (20/07)
Era testo HTML, ora e' l'immagine del grafico (services/home.png).
Le altre icone prendono height:1.875rem da .ds-navstrip-icon; qui serve un
valore diverso perche' la tela e' 66 invece di 46 (bianco intorno).
⚠️ Il riferimento e' la SCRITTA, non il disegno intero. Nelle altre icone
il disegno comprende anche la tessera colorata, che e' piu' alta del testo
(42 contro 33 su tela 46): allineando i disegni, HOME veniva alto 27px
contro i 21 delle vicine — sbagliato di un terzo, e si vedeva.
Conto giusto, tutto riferito all'altezza del TESTO:
altre = 1.875rem x 33/46 = 21,5px resi
home = 21,5 x 66/42 = 33,8px di tela = 2.11rem
⚠️ Deve stare DOPO .ds-navstrip-icon img: stessa specificita', vince
l'ultima. Se il grafico cambia il file, rifare il conto sulle sue misure.
============================================================ */
.ds-navstrip-icon--home img{height:2.11rem !important}
/* ============================================================
PASS 21 — TABLET IN VERTICALE (utente 21/07): "tutto il layout giusto".
Sotto i 900px il facsimile proporzionale e' gia' spento (html a 16px) e
il sito impagina per la lettura. Tre difetti visti a 768px (iPad verticale):
============================================================ */
/* (1) BARRA FOOTER: il credito del grafico era in posizione assoluta a destra
mentre il copyright resta centrato — trucco che sul desktop tiene le due
scritte su una riga sola. Su schermo stretto il copyright (lungo) arriva
sotto il credito e le due si accavallano ("...del sitoGRAFICA..."). Qui il
credito torna nel flusso e le due vanno IN COLONNA, centrate. */
@media (max-width:900px){
.ds-footer__bar-inner{flex-direction:column;align-items:center;gap:3px}
.ds-footer__bar .ds-credit{position:static;right:auto;transform:none}
}
/* (2) CREDITO FOTO DELLE AREE: la targa dell'area sta SOTTO la foto e su
schermo stretto e' larga quasi quanto la foto; la sua placca bianca copriva
il credito "FOTO © LUCA ARTUSI", che sul desktop sta in basso a destra fuori
dalla foto (restava scoperto solo "TUSI"). Ridurre la targa non basta:
Elementor le impone l'altezza e vince sulla regola del tema. Quindi qui il
credito si sposta DENTRO la foto, in alto a destra, dove non c'e' niente che
lo copra. Bianco con ombra per leggerlo su qualunque cielo (chiaro o scuro).
Sul desktop (>900) resta invariato: sotto la foto, verde, come nella scansione. */
/* ⚠️ CORRETTO IL 13/08 (utente: "non si legge FOTO © LUCA ARTUSI"). Il colore
bianco qui sotto NON stava mai attecchendo: Elementor genera in post-N.css
.elementor-widget-image .widget-image-caption{color:var(--e-global-color-text)}
che ha la stessa specificita' (0,2,0) di `.ds-area-cover .widget-image-caption`
ma sta in un foglio caricato DOPO main.css → vinceva lui e il credito restava
VERDE SCURO sopra la foto (illeggibile su cielo blu e su roccia). E' la stessa
trappola gia' documentata per la home a riga ~451: la cura e' agganciare anche
`.elementor-widget-image` (0,3,0), che sta sullo stesso elemento di
.ds-area-cover — verificato sul DOM live. L'ordine dei fogli non basta.
In piu' il solo bianco+ombra non regge su TUTTI gli sfondi (le testate di
ambiente e ingegneria hanno nuvole bianche proprio nell'angolo in alto a
destra): serve una velatura scura dietro il testo, che lo rende leggibile su
qualunque foto senza pesare.
⚠️ DAL 13/08 L'OVERLAY VALE SOLO SUL TELEFONO (≤767). Sul tablet l'utente lo
rivuole SOTTO la foto "come nel desktop", e ora si puo': con la colonna a piena
larghezza (PASS 22) la targa non occupa piu' quasi tutta la foto. Misurato: la
targa e' larga 464px FISSI e centrata, il credito sta a destra (~94px, right:2px),
quindi si sovrappongono solo quando W-96 < W/2+232, cioe' sotto i ~656px.
A 768 restano 56px di margine, a 820 ne restano 82 → nessuna collisione.
Sopra i 767 quindi NON si sovrascrive nulla e vale la regola base (riga ~497):
sotto la foto, a destra, verde — identica al desktop. Sotto i 768 la targa torna
larga quanto la foto e l'overlay resta indispensabile.
⚠️ Il credito resta DENTRO la foto anche sul telefono: fuori non c'e' posto.
Misurato a 390px: la targa e' larga 0-390 (tutto lo schermo) e scavalca il
bordo inferiore della foto, e sotto restano appena 14px prima del testo.
⚠️ RIQUADRO SCURO TOLTO IL 13/08 (seconda indicazione dell'utente: "non voglio
il minisfondo, fai solo una scritta in grassetto bianco con contorno nero").
In precedenza aveva scelto di tenerlo; questa richiesta la sostituisce.
Il contorno fa lo stesso lavoro della velatura — tenere leggibile la scritta
sia sul cielo blu sia sulle nuvole bianche di ambiente e ingegneria — ma senza
la placca. E' disegnato con OTTO ombre nette da 1px attorno al glifo e non con
-webkit-text-stroke, che disegna il bordo a cavallo del contorno e assottiglia
le lettere; cosi' invece il bianco resta pieno e il nero sta tutto fuori. */
@media (max-width:767px){
.elementor-widget-image.ds-area-cover figcaption,
.elementor-widget-image.ds-area-cover .widget-image-caption{
top:8px;bottom:auto;right:8px;left:auto;
color:#fff;
font-weight:700;
background:none;
padding:0;
border-radius:0;
/* ⚠️ Contorno nero TOLTO il 13/08 (terza indicazione dell'utente: "solo
in bianco senza l'outliner nero"). Prima c'era la velatura scura, poi
il contorno; ora bianco pieno e basta. Da sapere: nell'angolo in alto
a destra ambiente e ingegneria hanno nuvole bianche, quindi li' il
credito si legge poco — e' una conseguenza voluta della scelta. */
text-shadow:none;
}
}
/* ⚠️ ECCEZIONE TABLET, SOLO "PROGETTI IN CORSO" (utente 13/08: "il copyright
delle foto nella pagina progetti in corso mettilo come nella modalita'
smartphone"). Sopra i 767 il credito torna sotto la foto perche' le targhe
delle aree sono strette e non lo raggiungono — ma quella di progetti e' larga
il doppio (tela 1475 contro 921-992) e a 820px arriva a x736 mentre il credito
parte da x724: lo copriva davvero, si leggeva "TO © LUCA ARTUSI". Misurato:
si scontrano fino a ~880px, mentre a 900 restano 28px di margine e sul desktop
il problema non si pone (a 1440 ne restano 53). La regola vale su tutta la
fascia tablet e non fino a 880, per non far saltare il credito da dentro a
fuori la foto in mezzo a un ridimensionamento.
Le dichiarazioni sono le stesse del blocco qui sopra: se si cambia lo stile
del credito sul telefono, va cambiato anche qui. */
@media (min-width:768px) and (max-width:900px){
.page-id-9 .elementor-widget-image.ds-area-cover figcaption,
.page-id-9 .elementor-widget-image.ds-area-cover .widget-image-caption{
top:8px;bottom:auto;right:8px;left:auto;
color:#fff;
font-weight:700;
background:none;
padding:0;
border-radius:0;
text-shadow:
-1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000,
-1px 0 0 #000, 1px 0 0 #000,
-1px 1px 0 #000, 0 1px 0 #000, 1px 1px 0 #000;
}
}
/* (3) SFUMATURA + SILHOUETTE IN FONDO ALLE AREE (utente 21/07: "devi mettere la
sfumatura"). Il -21.66rem di base (PASS 18) vale ESATTAMENTE una cella della
griglia 3-colonne del desktop: serve a far risalire la sfumatura dietro
l'ultima FILA di tessere. Su schermo stretto la griglia diventa 1 colonna,
quindi "una cella su" = dietro l'ULTIMA foto: sulle aree con foto opache
(geologia, ambiente) la banda spariva del tutto, mentre dove l'ultima cella
lasciava intravedere il fondo (ingegneria, territorio) si vedeva ancora. Qui
la sfumatura torna a filo SOTTO la galleria, così la silhouette bianca si vede
su TUTTE le aree allo stesso modo. Progetti escluso: non ha galleria. */
@media (max-width:900px){
.elementor-widget.ds-sfumatura--geologia,
.elementor-widget.ds-sfumatura--ingegneria,
.elementor-widget.ds-sfumatura--ambiente,
.elementor-widget.ds-sfumatura--territorio{margin-top:0 !important}
}
/* ============================================================
PASS 22 — TABLET VERTICALE A PIENA LARGHEZZA (utente 13/08).
Tolte le colonne bianche (--maxw:100% fino a 900), la galleria a 768px resta
a 3 colonne: allora la sfumatura torna a RISALIRE dietro l'ultima fila (come
sul desktop), altrimenti resta una fascia sfumata vuota alta ~380px sotto le
foto. Vale SOLO nel range 3-colonne (768–900): sotto i 768 la griglia passa a
2 colonne (gallery.css) e la risalita resta 0 (PASS 21), che lì è corretto.
Valore adattivo: una fila+gap ≈ (100vw − 72)/4 + 14 → margin-top calc(4px − 25vw)
(contenuto = vw − 2·gutter22 − 2·gap14, celle 4:3). */
@media (min-width:768px) and (max-width:900px){
.elementor-widget.ds-sfumatura--geologia,
.elementor-widget.ds-sfumatura--ingegneria,
.elementor-widget.ds-sfumatura--ambiente,
.elementor-widget.ds-sfumatura--territorio{margin-top:calc(4px - 25vw) !important}
}
/* ============================================================
PASS 23 — TESTO DELLE AREE CENTRATO SOTTO LA TESTATA (utente 13/08,
visto su iPad 11" 820px nel Simulator).
Sul desktop il blocco e' allineato al bordo sinistro del lockup (PASS 19);
sotto i 900 quegli indenti sono azzerati (blocco 843) e il testo restava a
filo del bordo pagina mentre il lockup e' CENTRATO: sbilanciato.
⚠️ Si centra il BLOCCO, non la singola riga: `text-align:center` spezzerebbe
l'elenco puntato (puntini sparsi e bordi sinistri frastagliati, gia' bocciato
dall'utente il 21/07). Il contenitore si restringe al contenuto
(width:fit-content) e si centra con i margini automatici, cosi' heading ed
elenco conservano lo stesso bordo sinistro e il gruppo risulta centrato.
⚠️ Si centra il WIDGET, non `.elementor-widget-container`: questa versione di
Elementor NON genera piu' quel wrapper (verificato sul DOM live 13/08), e
sono figli diretti di .ds-area-text — le vecchie regole che lo prendevano
di mira sono lettera morta. Serve inoltre il selettore col genitore, perche'
Elementor impone `.elementor-widget-wrap > .elementor-element{width:100%}`
(0,2,1) e una `.ds-area-text` semplice (0,1,0) perderebbe.
============================================================ */
@media (max-width:900px){
.elementor-widget-wrap > .elementor-widget.ds-area-text{
width:fit-content;
max-width:100%;
margin-left:auto;
margin-right:auto;
}
}
/* SUL TELEFONO (utente 13/08, iPhone verticale) il centraggio qui sopra non si
vedeva: misurato a 390px il blocco e' largo 390 con padding 0, cioe' le righe
vanno gia' a capo e riempiono lo schermo — `fit-content` non ha spazio da
distribuire e il testo resta incollato ai due bordi (sembra "tutto a sinistra").
Servono quindi dei margini VERI: con box-sizing:border-box il padding stringe
il contenuto dentro la stessa larghezza, e il blocco diventa una colonna
centrata con aria ai lati. Restano left-aligned le righe (i puntini incolonnati),
come sul tablet. La galleria sotto resta invece a tutta larghezza. */
@media (max-width:767px){
.elementor-widget-wrap > .elementor-widget.ds-area-text{
padding-left:var(--gutter);
padding-right:var(--gutter);
}
}
/* ============================================================
PASS 24 — TESTATA DELLA HOME SUL TELEFONO (utente 13/08):
logo CENTRATO e hamburger nell'angolo a SINISTRA.
Prima logo e hamburger stavano appaiati al centro come un gruppo unico
(riga ~538: `justify-content:center !important`, globale).
Il modo pulito per centrare DAVVERO il logo — senza che la larghezza del
bottone lo sbilanci — e' togliere l'hamburger dal flusso: cosi' il logo resta
l'unico elemento in riga e il `center` gia' presente lo mette a meta' esatta,
qualunque cosa succeda al bottone. Niente !important da rincorrere.
⚠️ Il bottone si ancora a `.ds-header__inner`, che sulla home ha padding
orizzontale 0 (riga ~697 lo azzera con lo shorthand): quindi left e' misurato
dal bordo schermo. Il bottone ha 9px di padding interno, per cui
`--gutter - 9` fa cadere le tre barre esattamente sui 22px del testo.
Vale dove c'e' l'hamburger (≤768). Le pagine-area non hanno il logo in
testata e restano com'erano, con il bottone a destra.
============================================================ */
@media (max-width:768px){
.ds-header--home .ds-header__inner{position:relative}
.ds-header--home .ds-nav-toggle{
position:absolute;
left:calc(var(--gutter) - 9px);
top:50%;
transform:translateY(-50%);
}
.ds-header--home .ds-branding{margin-left:auto;margin-right:auto}
}
/* PASS 24b — TESTATA IDENTICA SU TUTTE LE PAGINE (utente 13/08: hamburger a
sinistra "da tutte le parti", poi "il logo della home mettilo su tutte le
pagine"). Sulle pagine-area il logo era nascosto (riga ~342) e il bottone
stava a destra (riga ~365): qui si riporta tutto alla stessa impaginazione
della home — logo centrato, hamburger ancorato a sinistra a 22px.
Il logo e' gia' avvolto in da header.php, quindi il clic porta
in home senza toccare il markup (verificato sul DOM: href = home_url).
⚠️ Il bottone puo' uscire dal flusso solo PERCHE' ora c'e' il logo a reggere
l'altezza della striscia: senza logo (com'era fino a un minuto fa) la testata
sarebbe collassata al solo padding, restando alta ~20px invece di 64.
Stessa larghezza del logo della home (5.3125rem) per non avere due misure. */
@media (max-width:768px){
.ds-header:not(.ds-header--home) .ds-branding{display:flex;margin-left:auto;margin-right:auto}
.ds-header:not(.ds-header--home) .ds-branding img{width:5.3125rem;height:auto}
.ds-header:not(.ds-header--home) .ds-header__inner{position:relative;justify-content:center}
.ds-header:not(.ds-header--home) .ds-nav-toggle{
position:absolute;
left:calc(var(--gutter) - 9px);
top:50%;
transform:translateY(-50%);
}
}
/* PASS 24c — la tendina del menu si aggancia al FONDO REALE della testata.
Era `top:var(--header-h)`, cioe' 74px fissi: con il logo aggiunto anche alle
pagine-area (24b) quelle testate sono passate a 85px e la tendina si apriva
11px DENTRO la testata (sulla home era gia' 1px, si notava appena).
`top:100%` la lega all'altezza effettiva — l'ancoraggio funziona perche' in
24/24b `.ds-header__inner` e' gia' `position:relative`, quindi e' lui il
riferimento. +1px per non coprire la riga di bordo della testata. */
@media (max-width:768px){
.ds-header .ds-nav{top:calc(100% + 1px)}
}
/* PASS 24d — attacco foto/testata IDENTICO fra home e pagine-area sul telefono
(utente 13/08: "e' diverso dalla home alle altre pagine"). Due scarti sommati:
1) la testata delle aree era piu' alta di 10px, perche' ha padding .875/.375
contro .625/0 della home (righe ~697/701, misurate: 85px contro 75);
2) sopra la foto le aree hanno una fascia bianca di 18px contro i 2px della
home: viene dalle impostazioni della SEZIONE salvate in Elementor
(`padding:18px 0 4px`, identica su tutte e 5 le pagine, post-5..post-9).
Sul punto 2 non si puo' vincere per specificita' — il CSS di Elementor e' per
pagina e caricato dopo — e la sezione non ha classi del tema a cui agganciarsi;
si compensa quindi sul widget della foto, che invece la classe ce l'ha,
riassorbendo 16 dei 18px e lasciando gli stessi 2px della home.
Solo ≤768: sul desktop l'impaginazione della scansione resta com'e'. */
@media (max-width:768px){
.ds-header:not(.ds-header--home) .ds-header__inner{padding:.625rem 0 0}
.elementor-widget.ds-area-cover{margin-top:-16px}
}
/* ============================================================
PASS 25 — LOCKUP DELLE AREE: RIMPICCIOLIRE, NON SCHIACCIARE (utente 13/08).
Sul telefono le targhe uscivano DEFORMATE, non ridotte: Elementor fissa
`img{height:90px}` nel CSS di pagina (post-N.css, elemento 18be3a2) e la
larghezza viene poi tagliata dal `max-width:100%` globale — risultato, lettere
strette. Misurato a 390px: geologia/ambiente -16%, ingegneria/territorio -22%,
progetti addirittura -40% (file 1475x179 reso 390x79).
Cura: niente misure imposte, ma due soli LIMITI —
max-width:100% → non esce mai dallo schermo
max-height: → non diventa mai piu' grande del previsto
con width/height auto, cosi' il browser conserva SEMPRE le proporzioni del
file: identico al progetto quando c'e' spazio, scalato quando non ce n'e'.
Solo ≤767: da 768 in su le targhe ci stanno gia' alla loro misura (la piu'
larga, progetti, occupa 651px) e sul desktop vale il facsimile proporzionale.
============================================================ */
@media (max-width:767px){
.elementor-widget.ds-area-lockup img{
width:auto !important;
height:auto !important;
max-width:100%;
max-height:90px;
}
.page-id-9 .ds-area-lockup img{max-height:79px}
}
/* ============================================================
PASS 25b — BARRA DI NAVIGAZIONE IN FONDO: stesso difetto delle targhe, ma
peggiore (utente 13/08, visto su tablet). Elementor impone alle icone
`width:100%;height:30px` (post-N.css) dentro colonne tutte uguali al 20%:
le voci lunghe venivano COMPRESSE per stare nella colonna. Misurato a 820px:
"PROGETTI IN CORSO" -50%, ingegneria -16%, territorio -14%; a 768 fino a -54%.
Non basta liberare le proporzioni dell'immagine: con colonne uguali la voce
piu' lunga (409x46 di tela, il doppio di "GEOLOGIA") si ridurrebbe molto piu'
delle altre e la barra risulterebbe con scritte di misure diverse.
Quindi le colonne della barra si dimensionano sul CONTENUTO (flex:1 1 auto,
niente 20% fisso): se ci sta tutto, ogni icona e' alla misura di progetto e
lo spazio avanzato diventa respiro fra le voci; se non ci sta, il flexbox
toglie a ciascuna la stessa PERCENTUALE — quindi rimpicciolisce tutta la
barra in blocco, mantenendo forme e proporzioni reciproche.
⚠️ La colonna si seleziona con :has() perche' la barra non ha classi del tema
e l'ordine delle voci cambia da pagina a pagina (HOME prende il posto
dell'area corrente), quindi :nth-child non sarebbe affidabile. Sui browser
senza :has() resta il comportamento attuale: nessuna rottura.
============================================================ */
/* ⚠️ Niente @media: vale a OGNI larghezza. Nato per tablet/telefono, esteso al
desktop il 13/08 su richiesta dell'utente ("fallo su tutte le pagine"): il
controllo automatico (_tools/audit_img.py) ha trovato che a 1440px "PROGETTI
IN CORSO" era schiacciato del 40% (409x46 reso 160x30) su geologia,
ingegneria, ambiente e territorio — le uniche quattro pagine in cui quella
voce compare nella barra (nella sua pagina il posto lo prende HOME).
Le misure sono in rem, quindi seguono il facsimile proporzionale del desktop.
⚠️ min-width:0 e' indispensabile: di norma un elemento flex non si stringe
sotto la larghezza del proprio contenuto (min-width:auto), quindi a 390px
le cinque voci sommavano 804px e la barra SBORDAVA a destra (con
html{overflow-x:clip} l'ultima sarebbe stata tagliata). Con min-width:0 il
flexbox puo' ridurle davvero, tutte della stessa percentuale. */
.elementor-column:has(> .elementor-widget-wrap > .ds-navstrip-icon){flex:1 1 auto;width:auto;min-width:0}
.ds-navstrip-icon img{
width:auto !important;
height:auto !important;
max-width:100%;
max-height:1.875rem;
margin-left:auto;margin-right:auto;
}
.ds-navstrip-icon--home img{max-height:2.11rem}
/* PASS 25c — la barra resta su UNA RIGA sul tablet. Liberate le proporzioni
(25b) le cinque voci chiedono 804px, ma fra i margini di pagina a 820 ne
restano 776: la riga andava a capo e "PROGETTI IN CORSO" finiva da solo
sotto. Qui si vieta l'andare a capo nella fascia tablet, cosi' il flexbox
toglie a tutte la stessa percentuale (~3% a 820, ~10% a 768) e la barra resta
una striscia unica, identica nelle proporzioni.
Sotto i 768px invece l"andare a capo si LASCIA: a 601px la riga unica avrebbe
390px le ridurrebbe a ~14px di altezza, illeggibili; su due-tre righe restano
alla misura di progetto.
Dal 13/08 il divieto vale anche sul desktop (la barra li' e' sempre stata una
riga sola: senza questo, liberate le proporzioni, "PROGETTI IN CORSO" sarebbe
potuto andare a capo da solo su schermi stretti). */
@media (min-width:768px){
.elementor-container:has(> .elementor-column > .elementor-widget-wrap > .ds-navstrip-icon){flex-wrap:nowrap}
}
/* PASS 25d — telefono: barra su UNA riga (scelta utente 13/08 "falla pure piu'
piccola"). Con la riga unica lo spazio e' pochissimo, e le colonne avevano
14px di padding per lato: 140px dei 390 dello schermo, il 36%, tutto spazio
vuoto sottratto alle scritte. Peggio: essendo una quota FISSA, pesava di piu'
sulle voci corte, che risultavano molto piu' piccole delle lunghe (HOME 6,5px
contro 10,2 di PROGETTI). Ridotto a 4px il rimpicciolimento e' piu' uniforme
e le scritte guadagnano circa un terzo di altezza. */
@media (max-width:767px){
/* Una voce per riga, come la barra della home (indicazione utente 13/08:
"si deve vedere come nella pagina home"). Le colonne tornano a piena
larghezza e la fila diventa verticale: cosi' ogni voce resta alla misura
di progetto e ben leggibile, invece di stringersi in una riga sola. */
.elementor-container:has(> .elementor-column > .elementor-widget-wrap > .ds-navstrip-icon){
flex-direction:column;
flex-wrap:nowrap;
}
.elementor-column:has(> .elementor-widget-wrap > .ds-navstrip-icon){
width:100%;
flex:0 0 auto;
}
}
/* PASS 26 — "PROGETTI IN CORSO" un po' piu' piccolo nella barra della HOME sul
telefono (utente 13/08). Non era un difetto di proporzioni: misurati i cinque
PNG, la scritta e' alta 33px su 46 di tela in TUTTI, quindi a 34px di resa le
lettere sono gia' identiche. Sembra piu' grande perche' la frase e' lunga e
quindi molto piu' larga (302px contro i 155-180 delle altre), e incolonnata
com'e' sul telefono domina la fila. Qui si riduce solo lei del 18% (34→28px,
larghezza 249) per riequilibrare la colonna.
⚠️ Le voci non hanno classi proprie: si aggancia dal nome del file. La barra
della home resta INCOLONNATA (una voce per riga) — indicazione esplicita
dell'utente; e' un elemento diverso (.ds-svc-icon) dalla barra delle
pagine-area (.ds-navstrip-icon) toccata in PASS 25b-d.
⚠️ Il limite e' 767 e non 768: a 768px esatti la barra e' ancora su UNA riga
(breakpoint mobile di Elementor) e questa altezza fissa rimetteva "PROGETTI IN
CORSO" fuori proporzione (-24%). Da 768 in su comanda PASS 27. */
@media (max-width:767px){
.ds-svc-icon img[src*="progetti"]{height:28px !important}
}
/* PASS 26b — stessa riduzione di "PROGETTI IN CORSO" anche nella barra delle
pagine-area, ora che pure li' e' incolonnata come nella home (PASS 26 l'aveva
applicata alla sola home). Stessa proporzione: -18% sull'altezza di progetto
della barra-area (30px → 25), cosi' la voce piu' lunga non domina la fila.
Solo ≤767: sul tablet la barra e' una riga sola e la misura la decide lo
spazio disponibile. */
@media (max-width:767px){
.ds-navstrip-icon img[src*="progetti"]{max-height:25px}
}
/* ============================================================
PASS 27 — BARRA DELLE AREE IN HOME (.ds-svc-icon) SUL TABLET (utente 13/08:
"sono ancora ristretti e sproporzionati"). Stesso difetto gia' curato sulla
barra delle pagine-area (PASS 25b), ma qui era rimasto: le colonne sono
fissate al 20% e l'immagine ha `height:34px` imposta dal tema (riga 719) con
`max-width:100%`, quindi le voci lunghe venivano SCHIACCIATE in larghezza.
Misurato a 820px: geologia -16%, territorio -25%, "PROGETTI IN CORSO" -56%
(file 409x46 reso 134x34, cioe' meno della meta').
Cura identica a PASS 25b: colonne dimensionate sul CONTENUTO e immagine con
soli due limiti (max-width:100%, max-height alla misura di progetto), cosi'
il browser conserva sempre le proporzioni del file; il flexbox toglie a tutte
la stessa percentuale e la barra rimpicciolisce in blocco restando su una
riga sola. Padding delle colonne 14 → 10px (.625rem): a barra ridotta 14px
sarebbero sproporzionati rispetto alle scritte (e rubano 140px dei 820), e
con 10 le voci restano piu' alte.
⚠️ ESTESO AL DESKTOP il 13/08 su richiesta dell'utente ("si sistemalo anche
nel desktop"): li' il difetto c'era dall'inizio — ingegneria -11%,
territorio -10%, "PROGETTI IN CORSO" -47% (409x46 reso 160x34). Il padding e'
in rem apposta, cosi' segue il facsimile proporzionale (a 1440 vale 10px, a
1920 ne vale 11,4) e la barra resta identica a se stessa a ogni larghezza.
Effetto collaterale accettato: le scritte calano da 34 a 29px di altezza a
1440. Non e' evitabile — alla misura di progetto le cinque voci chiedono
972px + 120 di margini interni contro i 950 della colonna, quindi NON ci
stanno; prima ci stavano solo perche' venivano schiacciate. Anche a padding
zero si arriverebbe a 32px.
Risultato: 0,0% di deformazione da 768px in su (verificato a 768/820/900/
901/1024/1280/1440/1920), sempre su una riga sola.
Sotto i 768 la barra e' gia' incolonnata una voce per riga (PASS 26).
============================================================ */
@media (min-width:768px){
.elementor-column:has(> .elementor-widget-wrap > .ds-svc-icon){flex:1 1 auto;width:auto;min-width:0}
/* !important obbligato: la regola di Elementor (post-4.css, colonna b04493b)
ha la stessa specificita' di questa (4 classi) ma e' caricata DOPO, quindi
a parita' vince lei. Vale solo per il padding: il resto qui non e' in
conflitto. */
.elementor-column:has(> .elementor-widget-wrap > .ds-svc-icon) > .elementor-widget-wrap{
padding-left:.625rem !important;
padding-right:.625rem !important;
}
.elementor-container:has(> .elementor-column > .elementor-widget-wrap > .ds-svc-icon){flex-wrap:nowrap}
.ds-svc-icon img{
width:auto !important;
height:auto !important;
max-width:100%;
max-height:2.125rem;
margin-left:auto;margin-right:auto;
}
}
/* ============================================================
PASS 28 — TARGA "PROGETTI IN CORSO" SUL TELEFONO: MARCHIO PIU' GRANDE,
TITOLO PIU' PICCOLO (utente 13/08: "rimpicciolisci il titolo e fai in modo
che logo e titolo siano simili di grandezza, proporzionalmente").
Il problema NON era una deformazione: misurata, la targa e' resa a 0,00% di
scarto. E' una questione di scala. Le targhe sono immagini piatte (marchio +
titolo gia' composti dal grafico) e sul telefono stanno tutte in 390px di
larghezza; ma la tela di "progetti" e' larga 1475px contro i 921-992 delle
altre, perche' la scritta e' lunga il doppio. Scalando per stare in 390 tutto
si riduce al 26% invece che al 42%, e il marchio finisce a 39px di larghezza
contro i 62 delle altre quattro pagine: corretto ma minuscolo.
Non essendo un testo ma un disegno unico, l'unico modo per cambiare il
rapporto interno e' separare i due pezzi. Da progetti.png sono stati RITAGLIATI
(nessun ridimensionamento: pixel originali del grafico) progetti-marchio.png
146x111 e progetti-titolo.png 1253x112. Qui i due pezzi vengono rimessi in
riga a scale diverse: il marchio torna a 62px, cioe' la misura che ha nelle
altre quattro pagine, e il titolo prende quel che resta (-11%).
Le due caselle hanno misure fisse nel rapporto esatto dei ritagli e
background-size:contain, che NON deforma mai: se lo schermo e' piu' stretto
di 390 il disegno rimpicciolisce dentro la casella restando proporzionato.
⚠️ Il limite e' 650px, non 767: sopra i 651 la targa intera non e' piu'
limitata dalla larghezza ma dall'altezza (79px), quindi il marchio arriva da
solo a 64-65px — piu' di quanto darebbe questo rimontaggio. Li' conviene la
targa originale del grafico, e il passaggio fra le due soluzioni a 650px e'
impercettibile (64px contro 62). Solo pagina 9: le altre quattro targhe sono
corte e non hanno mai avuto il problema.
============================================================ */
@media (max-width:650px){
.page-id-9 .elementor-widget.ds-area-lockup{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding-left:12px;
padding-right:12px;
/* ⚠️ Il fondo bianco e l'altezza vanno rimessi a mano: prima li dava la
tela della targa unica, che qui non c'e' piu' (i due ritagli sono
tagliati stretti attorno al disegno). Senza, la foto sopra trasparirebbe
negli spazi fra i due pezzi. 76px = la stessa altezza di fascia bianca
delle altre quattro pagine, cosi' la striscia sotto la foto e' identica
e il marchio ha lo stesso respiro sopra e sotto. */
background:#fff;
min-height:76px;
}
.page-id-9 .ds-area-lockup img{display:none}
.page-id-9 .ds-area-lockup::before,
.page-id-9 .ds-area-lockup::after{
content:"";
display:block;
background-repeat:no-repeat;
background-position:center;
background-size:contain;
}
/* marchio: 62x47 = il rapporto esatto del ritaglio (146:111) */
.page-id-9 .ds-area-lockup::before{
flex:0 0 auto;
width:62px;height:47px;
background-image:url(../img/lockups/progetti-marchio.png);
}
/* titolo: prende tutto lo spazio che avanza (a 390px sono 294, cioe' i 26px
di altezza del disegno). Niente altezza fissa: la detta aspect-ratio dal
rapporto esatto del ritaglio, cosi' su qualunque schermo il titolo si
adatta in larghezza restando proporzionato. */
.page-id-9 .ds-area-lockup::after{
flex:1 1 0;
min-width:0;
aspect-ratio:1253 / 112;
background-image:url(../img/lockups/progetti-titolo.png);
}
}
/* ============================================================
PASS 29 — HOME SUL TABLET: TESTO INTRO PIU' IN ALTO (utente 13/08).
Fra le quattro tessere e l'attacco del testo c'erano 115px di bianco: una
misura FISSA (padding-top del blocco che porta anche la sfumatura), quindi
identica a 390 come a 1440. Sul tablet, dove dal PASS 22 la colonna e' a
piena larghezza e la foto e' piu' grande, quella fascia vuota risultava
sproporzionata. Qui scende a 78px (-32%) solo nella fascia 768-900.
La sfumatura sta sullo STESSO blocco e ha gli stop in percentuale, quindi si
accorcia insieme al blocco: il testo resta appoggiato al passaggio
bianco→verde come prima, non ci sono altri accorgimenti da prendere.
⚠️ !important necessario: la regola di Elementor per questa colonna
(post-4.css) ha 4 classi come questa ma e' caricata dopo.
⚠️ Il :has() deve guardare un discendente dentro una SEZIONE, non il testo
diretto: i widget-wrap che contengono l'intro sono due (questo e quello della
sezione interna, che ha padding 0). Senza il "> .elementor-section" la regola
prenderebbe anche il secondo e AGGIUNGEREBBE spazio invece di toglierlo.
============================================================ */
@media (min-width:768px) and (max-width:900px){
.elementor-widget-wrap:has(> .elementor-section .ds-home-intro){
padding-top:78px !important;
}
}
/* ============================================================
PASS 30 — FOOTER SUL TELEFONO: VIA I TRATTINI A FINE RIGA (utente 13/08).
Due punti soli, quelli segnalati: l'indirizzo della sede legale, che andando
a capo lasciava "Piazza Dolomiti, 8 -" con il trattino penzoloni, e la PEC,
che restava attaccata alla mail con l'etichetta "PEC:" a fine riga e
l'indirizzo sotto. Qui il trattino di separazione sparisce e il secondo pezzo
diventa blocco, quindi parte da capo pulito. I due pezzi sono marcati in
footer.php (span .ds-sep / .ds-addr2 / .ds-pec), non si tocca il testo dei
dati aziendali: telefono/mobile e P.IVA/SDI restano in riga col trattino,
perche' ci stanno. Da 768 in su tutto invariato.
============================================================ */
@media (max-width:767px){
.ds-footer__info .ds-sep{display:none}
.ds-footer__info .ds-addr2,
.ds-footer__info .ds-pec{display:block}
/* ⚠️ Il
dopo l'indirizzo va tolto, altrimenti si sommano due andate a
capo (una la fa gia' il blocco) e fra la sede legale e la secondaria
restava una riga vuota. */
.ds-footer__info .ds-addr2 + br{display:none}
}
/* ============================================================
PASS 31 — INGEGNERIA SUL DESKTOP: UN PUNTO PER RIGA, BLOCCO ATTACCATO AL
BORDO SINISTRO DELLA TARGA (utente 13/08, con il segno tracciato sulla
schermata: "vai a capo per ogni punto e centralo allineato all'inizio del
logo").
Prima i 7 punti stavano su DUE per riga (scelta vecchia, per chiuderli in tre
righe) e il rientro era un margine fisso del 26%: il blocco risultava largo,
sbilanciato e slegato dalla targa. Ora:
- ul a blocco → una voce per riga, come geologia e progetti;
- margine sinistro calcolato, non a percentuale: il testo parte esatto dal
bordo sinistro della targa, che essendo centrata nella colonna porta con
se' il blocco al centro della pagina.
⚠️ La percentuale NON funzionava, ed e' il motivo per cui il calc() e'
indispensabile: la targa sul desktop e' alta 90px FISSI (imposti da Elementor
nel CSS di pagina, vedi PASS 25), quindi e' larga sempre 498px — 992x179 di
tela scalati a 90 — mentre la colonna cambia con la finestra (595px a 901,
950 a 1440, 1080 da 1636 in su). Una quota fissa in % ci prendeva solo a
1440: misurato, sbagliava di +94px a 901 e di -34px a 1920. Con
(100% - 498px)/2 il margine e' esattamente lo stesso spazio che la targa
centrata si lascia a sinistra, a QUALUNQUE larghezza.
Margine destro 0: la voce piu' lunga sta dentro la colonna a ogni larghezza
(a 1440 arriva a x958 contro i 1195 della colonna), quindi non serve
limitarla.
Solo ≥901: sotto i 900 i margini sono gia' azzerati (riga ~853), le voci sono
gia' una per riga e il blocco e' centrato dal PASS 23.
============================================================ */
@media (min-width:901px){
.ds-area-text--ingegneria ul{display:block}
.ds-area-text--ingegneria li{margin:.16em 0}
.ds-area-text--ingegneria p,
.ds-area-text--ingegneria ul{margin-left:calc((100% - 498px) / 2);margin-right:0}
}
/* ============================================================
PASS 32 — TUTTE LE AREE SUL TABLET: TESTO ATTACCATO AL BORDO SINISTRO DELLA
TARGA (utente 13/08: "la stessa identica roba per tutte le pagine in
modalita' tablet verticale").
Le voci erano gia' una per riga in questa fascia; quello che cambiava era il
rientro. Dal PASS 23 il blocco era centrato su SE STESSO (width:fit-content +
margini auto), quindi il suo bordo sinistro dipendeva da quanto era lungo il
testo e non c'entrava niente con la targa sopra: misurato a 820px, geologia
sfalsata di 7px, ingegneria 5, ambiente 27, territorio 44, progetti 45.
Qui si applica lo stesso criterio del desktop (PASS 31): il blocco riparte
largo quanto la colonna (serve, perche' i margini sotto sono calcolati su
quella) e il margine sinistro vale lo spazio che la targa CENTRATA si lascia
a sinistra, cioe' (100% - larghezza targa)/2.
Le larghezze sono tre perche' le targhe sono tre misure diverse: alte 90px
fisse su tutte le aree, la tela cambia — 921 di geologia/ambiente danno 463px,
992 di ingegneria/territorio danno 499, e progetti (tela 1475, alta 79 per la
sua regola) da' 653.
Solo 768-900: sul telefono resta la centratura del PASS 23 (li' la targa e'
larga quanto lo schermo e non c'e' nessun bordo a cui agganciarsi), sul
desktop valgono i rientri della scansione.
============================================================ */
@media (min-width:768px) and (max-width:900px){
/* ⚠️ width:100% + align-self:stretch, non width:auto: il contenitore dei
widget e' un flex in colonna con allineamento centrale, quindi un widget
"auto" si stringe sul contenuto (misurato: 219px invece di 820) e i
margini calcolati sotto venivano fuori NEGATIVI, col testo fuori schermo
a sinistra. */
.elementor-widget-wrap > .elementor-widget.ds-area-text{
width:100%;
align-self:stretch;
margin-left:0;margin-right:0;
}
.ds-area-text--geologia p,.ds-area-text--geologia ul,
.ds-area-text--ambiente p,.ds-area-text--ambiente ul{margin-left:calc((100% - 463px) / 2)}
.ds-area-text--ingegneria p,.ds-area-text--ingegneria ul,
.ds-area-text--territorio p,.ds-area-text--territorio ul{margin-left:calc((100% - 499px) / 2)}
.ds-area-text--progetti p,.ds-area-text--progetti ul{margin-left:calc((100% - 653px) / 2)}
}
/* ============================================================
PASS 33 — AMBIENTE SUL TELEFONO: CREDITO IN BASSO (utente 13/08: "si vede
male perche' bianco su bianco, spostala in basso dove ti ho cerchiato").
Tolto il contorno nero (PASS precedente), nell'angolo in alto a destra di
questa foto c'e' una nuvola bianca e la scritta bianca ci spariva dentro.
Qui scende sul fianco verde del monte, che e' scuro.
⚠️ bottom:30px e non 8: la targa bianca del titolo scavalca il bordo
inferiore della foto di 24px (misurato: foto fino a y277, targa da y253),
quindi a 8px il credito ci finirebbe sotto, coperto. Con 30 resta 6px sopra
il bordo della targa.
Solo ambiente e solo ≤767: le altre quattro foto hanno l'angolo alto a destra
scuro e li' il credito sta bene dov'e'.
============================================================ */
@media (max-width:767px){
.page-id-7 .elementor-widget-image.ds-area-cover figcaption,
.page-id-7 .elementor-widget-image.ds-area-cover .widget-image-caption{
top:auto;
bottom:30px;
}
}
/* PASS 33b — anche sul tablet, in progetti in corso, il credito resta solo
bianco: stessa scelta fatta per il telefono (utente 13/08). Il contorno
serviva a garantirne la lettura su qualunque cielo; qui il cielo e' scuro e
uniforme, quindi si legge lo stesso. */
@media (min-width:768px) and (max-width:900px){
.page-id-9 .elementor-widget-image.ds-area-cover figcaption,
.page-id-9 .elementor-widget-image.ds-area-cover .widget-image-caption{text-shadow:none}
}
/* ============================================================
PASS 34 — [PROGETTI IN CORSO] la griglia dei progetti alla larghezza del sito
La lista [dolomiti_progetti] sta dentro un CONTAINER Elementor (non una
"section"), quindi NON la prende la regola di riga 51 e resta alla misura del
kit Elementor: 1140px. Tutto il resto della pagina — foto di testata,
sfumatura rosa, barra delle aree — usa --maxw = min(66vw,1080px), cioe' 845px
a 1280 e 950px a 1440. Misurato: tessere x218/w1140, sfumatura x218/w845.
Le tessere sporgevano di ~148px per lato e la sfumatura rosa sembrava
disallineata e staccata sotto la griglia.
Qui riporto la griglia a --maxw: cosi' testata, tessere, sfumatura e barra
aree hanno gli stessi bordi bianchi e il rosa sale a filo sotto l'ultima fila
(il -40px di riga 527 lo infila 24px dietro le tessere, senza vuoto).
⚠️ colonne FISSE repeat(3,1fr) e non auto-fill/minmax(280px): a 845px il
minmax cadrebbe a 2 colonne. Stessi punti di rottura della galleria delle
aree (.ds-empty-grid, riga 349): 3 → 2 a 767 → 1 a 560.
Selettore .elementor-shortcode .dsdbx (0,2,0) perche' il plugin stampa il suo