figli */
.az-politica-text p { margin: 0 0 1em; font: inherit; color: inherit; }
.az-politica-text p:last-child { margin-bottom: 0; }
/* Content 2-col: accordion + img TÜV */
.az-politica-content {
display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start;
}
.az-politica-accordion { display: flex; flex-direction: column; }
/* Accordion politica — Figma 143:4621 (border-top+bottom cyan-light, padding 24 vert, 20 Bold blu, plus) */
.az-pq-accordion-item {
border-top: 1px solid var(--primary-cyan-light);
margin-bottom: -1px;
}
.az-pq-accordion-item:last-child { border-bottom: 1px solid var(--primary-cyan-light); margin-bottom: 0; }
.az-pq-accordion-summary {
display: flex; justify-content: space-between; align-items: center;
padding: 24px 8px; cursor: pointer; list-style: none;
gap: 16px;
}
.az-pq-accordion-summary::-webkit-details-marker { display: none; }
.az-pq-accordion-summary > span:first-child {
font-family: var(--font-base); font-size: 20px; font-weight: 700;
color: var(--primary-blue); line-height: 1.3; letter-spacing: 0;
}
.az-pq-accordion-icon { color: var(--primary-blue); flex-shrink: 0; display: flex; }
.az-pq-accordion-icon--minus { display: none; }
details[open] .az-pq-accordion-icon--plus { display: none; }
details[open] .az-pq-accordion-icon--minus { display: block; }
.az-pq-accordion-body {
padding: 0 8px 24px;
font-family: var(--font-base); font-size: 16px; font-weight: 500;
color: var(--grey-01); line-height: 1.4; letter-spacing: 0;
}
/* Img TÜV: bg grey-50 rounded 24, immagine centrata */
.az-politica-img {
height: 431px; border-radius: 24px; overflow: hidden;
background: var(--grey-50);
display: flex; align-items: center; justify-content: center;
}
.az-politica-img img {
max-width: 80%; max-height: 80%;
width: auto; height: auto;
object-fit: contain; display: block;
}
/* Sostenibilità — Figma 151:4985 (img-bg lago/montagna h=670 rounded 24 + dark overlay 20%,
header top-left 44/44 (label cyan-light + H2 white), 3 stats card bottom-right padding 38/30) */
.az-sost-inner { display: flex; flex-direction: column; gap: 44px; }
.az-sost-img-wrap {
position: relative; border-radius: 24px; overflow: hidden;
height: 670px;
}
.az-sost-img,
.az-sost-img-placeholder {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; border-radius: 24px;
z-index: 0;
}
.az-sost-img-placeholder { background: var(--grey-04); }
.az-sost-overlay {
position: absolute; inset: 0; z-index: 1;
background: rgba(26, 27, 29, 0.2);
pointer-events: none;
}
.az-sost-header {
position: absolute; top: 44px; left: 44px; z-index: 2;
display: flex; flex-direction: column; gap: 26px;
max-width: 531px;
}
.az-sost-label {
font-family: var(--font-base); font-size: 16px; font-weight: 700;
line-height: 1.24; letter-spacing: 0; text-transform: uppercase;
color: var(--primary-cyan-light); margin: 0;
}
.az-sost-title {
font-family: var(--font-base); font-size: 36px; font-weight: 700;
line-height: 1.2; letter-spacing: 0; color: var(--white); margin: 0;
}
.az-sost-stats {
position: absolute; right: 30px; bottom: 38px; z-index: 2;
width: 624px; max-width: calc(100% - 60px);
display: flex; flex-direction: column; gap: 30px;
pointer-events: none;
}
.az-sost-stat {
background: var(--primary-cyan-light); color: var(--primary-blue);
border-radius: 8px;
padding: 24px 30px 31px 24px;
height: 153px; box-sizing: border-box;
display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
flex: 0 1 297px;
pointer-events: auto;
}
.az-sost-stat--wide {
background: var(--primary-blue); color: var(--white);
width: 100%; flex: none;
padding: 24px 30px 23px 24px;
}
.az-sost-stat--wide .az-sost-lbl { color: var(--primary-cyan-light); }
.az-sost-stat-row { display: flex; gap: 30px; width: 100%; }
.az-sost-num {
font-family: var(--font-base); font-size: 48px; font-weight: 700;
line-height: 1.2; letter-spacing: 0; color: inherit;
}
.az-sost-lbl {
font-family: var(--font-base); font-size: 14px; font-weight: 700;
line-height: 1.24; letter-spacing: 0; text-transform: uppercase; color: inherit;
}
.az-sost-body {
font-family: var(--font-base); font-size: 16px; font-weight: 500;
line-height: 1.4; letter-spacing: 0; color: var(--black-true);
max-width: 654px; margin: 0;
}
/* il campo ACF può contenere
, quindi stilo il
interno */
.az-sost-body p { margin: 0; font: inherit; color: var(--black-true); }
.az-sost-body p + p { margin-top: 1em; }
/* Certificazioni — Figma 151:4983 (3 card 426×598, bg grey-50, img-area 294, body padding 22 + top 20, gap 20) */
.az-cert-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}
.az-cert-card {
background: var(--grey-50); border-radius: 16px; overflow: hidden;
display: flex; flex-direction: column;
min-height: 598px;
transition: border-radius .3s ease;
}
/* Hover (Figma 520:11977): radius asimmetrico 60/0/60/60 (TR squared) */
.az-cert-card:hover { border-radius: 60px 0 60px 60px; }
.az-cert-img {
height: 294px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: var(--grey-50); border-radius: 16px 16px 0 0;
overflow: hidden;
}
.az-cert-img img { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Logo certificazione in SVG (retina): dimensione naturale del logo centrato, non stretch */
.az-cert-img .az-cert-logo { width: auto; height: 152px; max-width: 62%; object-fit: contain; }
.az-cert-body {
padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 20px; flex: 1;
}
.az-cert-text {
display: flex; flex-direction: column; gap: 16px; width: 100%;
}
.az-cert-text h3 {
font-size: 20px; font-weight: 700; color: var(--black-true);
line-height: 1.3; letter-spacing: 0; margin: 0; font-family: var(--font-base);
}
.az-cert-text p {
font-size: 16px; font-weight: 500; color: var(--grey-01);
line-height: 1.4; letter-spacing: 0; margin: 0; font-family: var(--font-base);
}
/* Bottone Scarica — Figma 126:3590 (Outline default) → 128:3609 (Outline-hover)
Stesso pattern di .sp-btn-scheda: pill outline blu, height 56→54 hover,
cerchio 32 primary-blue → primary-cyan, 2 icone download slide VERTICAL */
.az-cert-btn {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 15px;
height: 56px; padding: 12px 12px 12px 20px;
border: 1px solid var(--primary-blue);
background: transparent; color: var(--black-true);
border-radius: 56px;
font: 700 14px/1.3 var(--font-base); letter-spacing: 0.2px;
text-decoration: none;
}
/* NB: niente cambio di height in hover — il bottone è nel flusso (politica qualità) e un
56→54px spostava visibilmente l'accordion/immagine sottostanti. Il feedback hover resta
con lo swap colore + slide dell'icona (::after). */
.az-cert-btn::after {
content: ""; position: relative;
display: inline-block; flex-shrink: 0;
width: 32px; height: 32px; border-radius: 16px;
background-color: var(--primary-blue);
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-repeat: no-repeat, no-repeat;
background-size: 16px 16px, 16px 16px;
background-position: center, center -32px;
overflow: hidden;
transition: background-color .25s ease, background-position .35s ease;
}
.az-cert-btn:hover::after,
.az-cert-card:hover .az-cert-btn::after {
background-color: var(--primary-cyan);
background-position: center calc(100% + 32px), center;
}
/* =====================
BASE CAT GROUPS (DEVE stare PRIMA del @media sotto — altrimenti il desktop
override-a il mobile perché stessa specificità + sorgente successiva)
===================== */
/* CAT-GROUP — Figma 151:6915 Frame 3980 (header centered, h3 28 Bold + p 16 Medium grey-01) */
.cat-group { margin-bottom: 120px; }
.cat-group:last-child { margin-bottom: 0; }
.cat-group-header { margin-bottom: 44px; text-align: center; }
.cat-group-heading { display: block; }
.cat-group-title { font-size: 28px; font-weight: 700; color: var(--black-true); margin: 0 0 24px; line-height: 1.3; letter-spacing: 0; }
.cat-group-desc { font-size: 16px; font-weight: 500; color: var(--grey-700); line-height: 1.4; letter-spacing: 0; margin: 0 auto; max-width: 1108px; }
.cat-group-toggle { display: none; }
.cat-group-content { display: block; }
.cat-group-carica-altri { display: none; }
/* =====================
RESPONSIVE
===================== */
@media (max-width: 1024px) {
/* Categoria hero mobile — Figma 343:9285: card grigia, titolo 28 + descrizione (era nascosta), height auto */
.cat-banner-wrap { padding: 0 16px; }
.cat-banner { height: auto; border-radius: 40px 0 40px 0; }
.cat-banner-overlay { position: static; display: flex; flex-direction: column; padding: 40px 30px; gap: 32px; }
.cat-banner-left { position: static; left: auto; top: auto; width: auto; gap: 24px; }
.cat-banner-left h1 { font-size: 28px; line-height: 1.3; }
.cat-banner-right { position: static; left: auto; top: auto; width: auto; padding-left: 0; display: flex; gap: 24px; }
.cat-banner-right p { font-size: 16px; line-height: 1.4; max-width: 100%; }
.azienda-intro { grid-template-columns: 1fr; }
.prodotti-archive-grid .prodotto-archive-card { flex: 0 0 calc(50% - 15px); max-width: calc(50% - 15px); height: 556px; }
.blog-grid--4 { grid-template-columns: repeat(2, 1fr); }
.caratteristiche-grid { grid-template-columns: 1fr; }
.post-layout { grid-template-columns: 1fr; }
.post-toc { display: none; }
.post-sidebar { display: none; }
.phc-post-content { padding: 40px 32px; }
.page-hero-card-content--settore-2col { position: relative; inset: auto; display: flex; flex-direction: column; align-items: flex-start; padding: 40px 32px; gap: 24px; }
.page-hero-card-content--settore-2col .page-hero-card-left { position: relative; left: auto; top: auto; width: auto; flex: none; }
.settore-hero-right { position: relative; left: auto; top: auto; width: auto; padding-left: 0; }
.cert-grid { grid-template-columns: repeat(2, 1fr); }
.valori-grid { grid-template-columns: repeat(2, 1fr); }
.posizione-layout { grid-template-columns: 1fr; }
.servizi-page-grid { grid-template-columns: 1fr; }
.sv-service-twocol { grid-template-columns: 1fr; gap: 40px; }
.sv-accordion-section { grid-template-columns: 1fr; gap: 40px; }
.sv-vantaggi-grid { grid-template-columns: 1fr; }
.sv-vantaggi-card { padding: 48px 40px; }
.sv-calc-header { grid-template-columns: 1fr; gap: 40px; }
.sv-calc-body { grid-template-columns: 1fr; gap: 40px; }
.sv-calc-card { padding: 48px 40px; }
.sv-intro-twocol { grid-template-columns: 1fr; gap: 40px; }
.sv-ambiti-grid { grid-template-columns: 1fr; gap: 40px; }
/* Figma mobile 362:13105 → 367:10464: la fascia aqua ha 52 sopra e 52 sotto (erano 32/40),
così testo legionella→barra tab fa 112 e pannello→titolo FAQ 112. */
.sv-leg-section { padding: 52px 0 52px; }
.sv-leg-tab-bar { margin-bottom: 34px; } /* Figma mobile: barra→pannello 34 (desktop 44) */
/* Tab bar NON è dentro .container → inset 16px (come il container) così la barra non è a filo
dei bordi schermo e i border-radius si vedono a SINISTRA e DESTRA (Figma 468:16217). */
/* Bar legionella SBORDA off-screen come Figma 468:16219 (576px): scroll sul tab-bar, sfondo blu largo max-content (prima il bg era confinato al viewport) */
.sv-leg-tab-bar { padding: 0 0 0 16px; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sv-leg-tab-bar::-webkit-scrollbar { display: none; }
.sv-leg-tabs { width: max-content; height: auto; min-height: 54px; overflow: visible; justify-content: flex-start; padding-left: 5px; } /* tab da SINISTRA, pill a x5; bg largo quanto tutti i tab */
.sv-leg-tab { padding: 10px 14px; font-size: 14px; flex-shrink: 0; }
/* Caroselli immagine: solo bullet, NIENTE frecce su mobile (Figma 363:8588).
Specificità alta perché regole .sv-carousel-arrows display:flex non-media vengono dopo. */
.sv-carousel-nav .sv-carousel-arrows { display: none; }
.page-servizi .sv-carousel-nav, .page-azienda .sv-carousel-nav { justify-content: center; }
/* Subnav mobile: niente underline/text-decoration sulla voce (Figma 318:13753: solo marker cyan) */
.sv-subnav-link:hover, .sv-subnav-link:focus-visible, .sv-subnav-link.is-selected { text-decoration: none; }
/* Goccia CTA mobile: punta a SINISTRA (Figma 3260:3178), opposto al desktop (no rotate 180) */
.cta-consulenza-decor::before { transform: none; } /* SVG già orientato come il design (rotazione -90 bakeata) */
/* Box "interventi" features-benefici BLU come Figma 821:18583 (era teal/aqua su desktop) */
.sv-interventi-section .sv-vantaggi-card { background: var(--primary-blue); }
.az-chi-siamo-text { margin-left: 0; max-width: 100%; }
.az-two-col { grid-template-columns: 1fr; }
.az-two-col--reverse .az-img-col,
.az-two-col--reverse .az-text-col { order: unset; }
.az-politica .container { gap: 48px; }
.az-politica-header { grid-template-columns: 1fr; gap: 24px; }
.az-politica-header-right { padding-top: 0; gap: 24px; }
.az-politica-title { font-size: 24px; } /* Figma 324:14193 H4-24 */
.az-politica-content { grid-template-columns: 1fr; gap: 20px; } /* Figma 39504: gap accordion→img 20 */
.az-politica-img { height: 237px; } /* Figma 330:14557 (era 320) */
.az-pq-accordion-summary > span:first-child { font-size: 18px; }
.az-clienti-body { grid-template-columns: 1fr; }
.az-cert-grid { grid-template-columns: repeat(2, 1fr); }
/* az-counter mobile (Figma 260:6586): stack verticale, items CENTER-aligned,
divider orizzontali 1px tra items (NON vertical left border come home counter) */
.az-counter {
flex-direction: column; align-items: center;
gap: 40px; /* Figma gap 40 (non 32) */
}
.az-counter-item {
flex: 0 0 auto; max-width: none;
width: 217px; /* Figma item width */
align-items: center; text-align: center; /* center, non flex-start */
}
.az-counter-label { text-align: center; }
/* Divider orizzontale full-width (1px) tra items */
.az-counter-divider {
flex: none; width: 100%; max-width: none;
height: 0; border-left: none;
border-top: 1px solid var(--grey-03);
}
/* H2 "Certificazioni" nascosto su mobile (Figma 277:1694 non lo mostra) */
.az-certificazioni > .container > .az-heading { display: none; }
/* Timeline storia mobile (Figma 266:6523) — layout verticale teal: testo + riga anno/frecce */
.az-timeline { padding: 40px 15px 40px 16px; overflow: visible; }
.az-timeline-inner {
flex-direction: column; gap: 51px;
align-items: flex-end;
padding: 0; max-width: none; margin: 0;
}
.az-timeline-content { flex: none; max-width: 100%; width: 100%; }
.az-timeline-content .section-label {
font-size: 16px; margin-bottom: 20px;
}
.az-timeline-title {
font-size: 36px;
margin: 0 0 24px;
}
.az-timeline-body { font-size: 24px; }
/* Riga in basso: anno attivo + frecce, space-between */
.az-timeline-years-wrap {
flex-direction: row; flex-wrap: nowrap;
align-items: center; justify-content: space-between;
width: 100%; gap: 0;
align-self: stretch;
}
/* Mostra solo l'anno attivo, come label inline */
.az-timeline-years {
flex-direction: row; gap: 0; min-width: 0;
}
.az-timeline-year {
display: none;
opacity: 1; transform: none;
}
.az-timeline-year.is-active {
display: block;
font-size: 30px;
color: var(--white);
}
/* Linea verticale/dot non servono su mobile */
.az-timeline-line { display: none; }
/* Nav orizzontale (gap 18), visibile su mobile (desktop la nasconde in column-layout) */
.az-timeline-nav {
display: flex; flex-direction: row; gap: 18px;
align-self: center;
}
.az-tl-nav-btn svg { transform: rotate(-90deg); } /* chevron up/down → left/right */
.az-tl-nav-btn.timeline-prev:disabled,
.az-tl-nav-btn.timeline-next:disabled {
opacity: .55; cursor: default;
}
/* Sub-nav mobile (Figma 254:6748): 40px alto, sticky sotto header, scroll orizzontale touch.
Su mobile l'header non si nasconde mai: forziamo top: var(--offset) ignorando le classi
topbar-hidden / is-header-hidden aggiunte dal JS di scroll desktop. */
.az-subnav,
.az-subnav.topbar-hidden,
.az-subnav.is-header-hidden {
height: 40px;
top: var(--offset);
position: sticky; /* riconferma (alcuni override potrebbero toccarla) */
margin-top: 15px; /* Figma 318:13750: 15px di gap tra hero (y757) e barra subnav (y772) */
}
/* Gradient sfumati sui bordi (stesso effetto delle frecce desktop) */
.az-subnav::before,
.az-subnav::after {
content: '';
position: absolute;
top: 0; bottom: 1px; /* lascia visibile il border-bottom 1px */
width: 32px;
pointer-events: none;
z-index: 2;
}
.az-subnav::before {
left: 0;
background: linear-gradient(90deg, var(--white), transparent);
}
.az-subnav::after {
right: 0;
background: linear-gradient(270deg, var(--white), transparent);
}
/* Anchor offset mobile: header 59 + subnav 40 + margine */
.az-section { scroll-margin-top: calc(var(--offset) + 44px); }
.az-subnav-inner { padding: 0; }
.az-subnav-arrow { display: none; } /* touch scroll → niente frecce */
.az-subnav-list {
padding: 0 15px; gap: 40px;
align-items: stretch; /* link a tutta altezza → underline flush in fondo alla barra 40px */
}
.az-subnav-item { flex-shrink: 0; }
.az-subnav-link {
padding: 13px 0 0; /* testo a top 13 (Figma 318:13754), underline al fondo (margin-bottom 0) */
align-items: flex-start;
font-size: 14px; font-weight: 700;
line-height: 14px; letter-spacing: 0.2px;
color: var(--grey-01);
border-bottom-width: 1px; /* Figma underline 1px (non 3) */
}
.az-subnav-link.is-current {
color: var(--black-true); /* Figma 318:13756: active bold nero */
border-bottom-color: var(--primary-cyan); /* Figma 318:13762: underline cyan #0086ab */
border-bottom-width: 3px;
}
/* Team mobile (Figma 267:6686 + 299:4430): inner 343 (non 654), image 343×372 */
.az-team-inner {
max-width: none;
padding: 0 16px; /* la sezione non usa .container → aggiungo padding qui */
gap: 24px; /* Figma gap header→image 24 (non 40 desktop) */
}
.az-team-carousel-wrap { width: 100%; }
.az-img-placeholder--team {
width: 100%;
aspect-ratio: 343/372; /* Figma mobile 343×372 (desktop 652/670) */
}
.az-team-carousel-wrap .az-carousel-slide img {
aspect-ratio: 343/372;
}
/* ===== Cat banner hero mobile (Figma 283:2137) — matcha breakpoint ≤1024 come header mobile ===== */
.cat-banner-wrap { padding: 0 16px; }
/* hero(343:9691) → primo accordion(343:9742) = 80px nel design (era 148: pad-top 120 + margine).
Specificità alta col main per battere la regola base .cat-content.section (più in basso nel file) */
.taxonomy-categoria .cat-content.section { padding-top: 52px; }
.cat-banner {
height: 610px; /* Figma 343:9285 = 610 (era 558, hero cresciuto in revisione) */
border-radius: 40px 0 40px 0; /* Figma 343:9285 rounded-tl/br 40 (era 16) */
/* NB: niente background qui — le varianti .cat-banner-- (es. #ffc936 filtrazione)
sono definite fuori dal media query: forzare grey-03 le sovrascriveva per source-order */
}
.cat-banner-overlay {
flex-direction: column;
align-items: flex-start;
padding: 26px 27px;
gap: 32px;
}
.cat-banner-left {
flex: none; width: 100%;
gap: 31px;
}
.cat-banner-left h1 {
font-size: 28px; /* Figma 343:9692 H3-28 */
line-height: 1.3;
color: var(--black);
}
.cat-banner-right {
flex: none; width: 100%;
padding-top: 0;
}
.cat-banner-right p {
font-size: 16px; color: var(--grey-01);
line-height: 1.3;
}
.cat-banner-left .breadcrumb { font-size: 14px; color: var(--grey-01); }
.cat-banner-left .breadcrumb > a:first-child,
.cat-banner-left .breadcrumb > .breadcrumb-sep,
.cat-banner-left .breadcrumb > strong { display: none; }
.cat-banner-left .breadcrumb > a:nth-of-type(2) {
display: inline-flex; align-items: center; gap: 7px;
color: var(--grey-01);
}
.cat-banner-left .breadcrumb > a:nth-of-type(2)::before {
content: '';
width: 12px; height: 12px;
background: currentColor;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* ===== Accordion sottocategorie mobile (Figma 283:1860 + 380:12922) — ≤1024 =====
Chiuso: header border-t + border-b, padding vertical 20, solo title visibile + plus
Aperto: header senza border, padding 0, title + desc gap 19, gap 60 verso products + Carica altri */
.cat-group { margin-bottom: -1px; transition: margin .4s ease; } /* margin animato come il max-height del content → niente scatto in chiusura (il margine 28/50 non salta più di colpo) */
.cat-group:last-child { margin-bottom: 0; }
.cat-group.is-open { margin: 28px 0 50px; } /* Figma: item-prodotti(343:11657) → accordion(343:11696) = 50px */
.cat-group.is-open + .cat-group { margin-top: 0; }
.cat-group-header {
margin: 0; padding: 24px 0; /* Figma 324:14491 py-24 (era 20) */
display: flex; justify-content: space-between;
align-items: flex-start;
gap: 10px; cursor: pointer;
border-top: 1px solid var(--primary-cyan-light); /* Figma 324:14491 bordi cyan-light #dbedf1 (era grey-02) */
border-bottom: 1px solid var(--primary-cyan-light);
text-align: left;
transition: padding .25s ease, border-color .25s ease;
}
.cat-group.is-open .cat-group-header {
padding: 0;
border-top: none;
border-bottom: none;
}
.cat-group-heading {
display: flex; flex-direction: column; gap: 0;
padding: 0 10px;
flex: 1 1 auto; min-width: 0;
}
.cat-group.is-open .cat-group-heading { gap: 19px; }
.cat-group-title {
font-size: 16px; /* Figma 324:14475 (era 20) */
font-weight: 700; color: var(--primary-blue); /* Figma 343:9743 primary-blue #265a7b (era grey-01) */
margin: 0; line-height: 1.4; letter-spacing: 0;
text-align: left; padding-left: 0;
}
.cat-group-desc {
display: none;
font-size: 14px; color: var(--grey-01);
line-height: 1.3; letter-spacing: 0.2px;
margin: 0; text-align: left;
max-width: none;
}
.cat-group.is-open .cat-group-desc { display: block; }
.cat-group-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; padding: 0;
background: none; border: none; cursor: pointer;
color: var(--grey-01); flex-shrink: 0;
}
/* Icon fatta con due barre CSS — plus (entrambe visibili) → minus (solo orizzontale) */
.cat-group-icon {
position: relative;
display: block;
width: 14px; height: 14px;
}
.cat-group-icon-bar {
position: absolute;
top: 50%; left: 50%;
background: currentColor;
transform: translate(-50%, -50%);
}
.cat-group-icon-bar-h { width: 14px; height: 1.5px; }
.cat-group-icon-bar-v {
width: 1.5px; height: 14px;
transition: transform .25s ease;
}
.cat-group.is-open .cat-group-icon-bar-v {
transform: translate(-50%, -50%) scaleY(0); /* nascosto quando aperto → diventa − */
}
.cat-group-content {
max-height: 0; overflow: hidden;
padding: 0 10px;
transition: max-height .4s ease, padding .3s ease, margin-top .3s ease;
}
.cat-group.is-open .cat-group-content {
max-height: 5000px;
padding: 0; /* niente trailing: l'ultima card = fondo blocco prodotti (Figma 343:11657), il gap 50 lo dà il margin del gruppo */
margin-top: 60px;
}
.cat-group .prodotti-archive-grid {
display: flex; flex-direction: column; gap: 28px;
margin-bottom: 0; /* era 64 (base) → toglie il trailing sotto l'ultima card */
}
.cat-group .cat-slider-wrap { gap: 28px; }
.cat-group .cat-slider-footer { display: none; }
/* "Carica altri" button — dentro ogni accordion, solo se count prodotti > 4 (Figma 380:12934) */
.cat-group-carica-altri {
display: flex; align-items: center; justify-content: center;
margin: 40px auto 0; padding: 12px 20px;
height: 48px; min-width: 123px;
border: 2px solid var(--grey-01);
border-radius: 4px;
background: transparent; color: var(--grey-01);
font-family: var(--font-base); font-size: 16px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.2px;
cursor: pointer;
}
.cat-group-carica-altri:hover { background: var(--grey-01); color: var(--white); }
}
@media (max-width: 768px) {
.page-hero .container { grid-template-columns: 1fr; }
.page-hero-img { display: none; }
.page-hero-content h1 { font-size: 28px; }
.two-col { grid-template-columns: 1fr; }
.two-col--reverse { direction: ltr; }
.prodotti-archive-grid .prodotto-archive-card { flex: none; width: 100%; max-width: 100%; height: 556px; } /* flex:none (grid è column su mobile) + altezza fissa: body è absolute, Figma 556 */
/* Carosello correlati mobile: swipe (touch-action pan-y → scroll verticale libero, swipe orizzontale gestito dal JS) */
.prodotti-archive-grid.sp-correlati-track { gap: 28px; }
.prodotti-archive-grid.sp-correlati-track, .prodotti-archive-grid.sp-correlati-track * { touch-action: pan-y; }
.prodotti-archive-grid.sp-correlati-track img { -webkit-user-drag: none; user-select: none; }
.settori-archive-grid, .blog-grid--4 { grid-template-columns: 1fr; }
.case-content-grid, .case-gallery, .download-grid { grid-template-columns: 1fr; }
.posizioni-layout, .numeri-grid { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.consulenza-form-section .form-row { grid-template-columns: 1fr; gap: 24px; margin-bottom: 24px; }
.consulenza-form-section { padding: 80px 0 80px; } /* Figma: dark->form 80, form->footer 80 (era 48/64) */
.consulenza-form-header { margin-bottom: 32px; }
.consulenza-form-header h2 { font-size: 24px; } /* Figma 376:13134 H4-24 */
.consulenza-dark-section { padding: 48px 0 0; }
.consulenza-dark-card { padding: 52px 30px; border-radius: 24px; } /* Figma MB-box-features-benefici */
.consulenza-dark-card h2 { font-size: 24px; margin-bottom: 36px; }
.consulenza-dark-grid { grid-template-columns: 1fr; gap: 36px; } /* Figma features row-gap 36 (era 32) */
.consulenza-dark-item-text strong { font-size: 16px; } /* Figma mobile item title 16 (era 20) */
.page-consulenza .page-inner-hero.section { padding-top: 24px; padding-bottom: 32px; }
.page-consulenza .breadcrumb { font-size: 14px; } /* Figma 376:12931 P-14 (era 12) */
.page-consulenza .page-inner-hero .breadcrumb { margin-bottom: 40px; } /* Figma breadcrumb->h1 41 (era 20) */
.page-consulenza .page-inner-hero-content { grid-template-columns: 1fr; gap: 40px; } /* Figma h1->testo 40 (era 24) */
.page-consulenza .page-inner-hero-content h1 { font-size: 28px; line-height: 1.3; } /* Figma 376:12940 H3-28 */
/* breadcrumb back "‹ home" */
.page-consulenza .breadcrumb-sep, .page-consulenza .breadcrumb strong { display: none; }
.page-consulenza .breadcrumb a:last-of-type::before { content: "\2039"; margin-right: 8px; font-size: 18px; line-height: 1; display: inline-block; }
.page-supporto .breadcrumb-sep, .page-supporto .breadcrumb strong { display: none; }
.page-supporto .breadcrumb a:last-of-type::before { content: "\2039"; margin-right: 8px; font-size: 18px; line-height: 1; display: inline-block; }
.page-lavora .breadcrumb-sep, .page-lavora .breadcrumb strong { display: none; }
.page-lavora .breadcrumb a:last-of-type::before { content: "\2039"; margin-right: 8px; font-size: 18px; line-height: 1; display: inline-block; }
.page-download .page-inner-hero .breadcrumb-sep, .page-download .page-inner-hero .breadcrumb strong { display: none; }
.page-download .page-inner-hero .breadcrumb a:last-of-type::before { content: "\2039"; margin-right: 8px; font-size: 18px; line-height: 1; display: inline-block; }
.page-consulenza .consulenza-hero-right { padding-top: 0; gap: 24px; }
.page-consulenza .consulenza-hero-right .btn-outline-blue { margin-top: 16px; } /* Figma testo->bottone 40 (gap24+16) */
.page-consulenza .wpcf7-acceptance label { gap: 16px; }
.page-consulenza .wpcf7-form { --acc-indent: 54px; } /* gap 16 anziché 23 */
.page-consulenza textarea.form-control { height: 160px; }
/* Download mobile */
.page-download .page-inner-hero.section { padding-top: 24px; padding-bottom: 32px; }
.page-download .page-inner-hero .breadcrumb { margin-bottom: 20px; }
.page-download .page-inner-hero-content { grid-template-columns: 1fr; gap: 20px; }
.page-download .page-inner-hero-content h1 { font-size: 28px; line-height: 1.3; } /* Figma 400:11777 H3-28 */
.page-download .page-inner-hero-content p { padding-top: 0; }
.page-download-cats { padding: 48px 0 64px; }
.download-group { margin-bottom: 48px; }
.page-download .download-group h2 { font-size: 24px; }
.download-item { padding: 28px 24px 44px; gap: 20px; } /* Figma item-scarica pt28/pb44/px24 */
.download-item-info { gap: 16px; }
.download-item-info strong { font-size: 20px; } /* Figma item-scarica H5-20 */
/* File BIM mobile */
.page-hero-card--bim { height: auto; min-height: 480px; border-radius: 32px 0 32px 0; }
/* Hero Supporto: quasi full-height come le altre hero interne (azienda/home) — il contenuto sotto spunta in fondo */
.page-supporto .page-hero-card--bim { min-height: calc(100vh - var(--offset) - 80px); min-height: calc(100svh - var(--offset) - 80px); } /* svh stabile: dvh zoomava la cover allo scroll (barra URL) */
/* GOTCHA flex-basis→altezza: su mobile (colonna) flex:0 1 485px/539px diventava ALTEZZA → hero gonfiata a 1104px.
Reset a content-size così h1 (alto) + descrizione (basso) si distribuiscono nella card full-height */
.page-supporto .page-hero-card-left { flex: 0 0 auto; max-width: 100%; }
.page-supporto .page-hero-card-right { flex: 0 0 auto; max-width: 100%; padding-top: 0; }
.page-hero-card-content--bim { flex-direction: column; align-items: flex-start; padding: 40px 24px; gap: 24px; }
.page-hero-card-left { flex: none; align-self: flex-start; gap: 16px; }
.page-hero-card-left h1 { font-size: 32px; }
.page-hero-card-right { flex: none; padding-left: 0; align-self: flex-start; gap: 20px; }
.page-hero-card-right p { max-width: none; }
.page-hero-card-btns { flex-direction: column; gap: 12px; align-items: stretch; }
.btn-blue-solid, .btn-cyan-light { justify-content: center; width: 100%; }
/* Bottone "Catalogo file BIM" (Figma 407:12301): auto-width a sinistra, non full-width */
.bim-catalogo-content .btn-cyan-light { width: max-content; max-width: 100%; justify-content: flex-start; align-self: flex-start; }
.bim-intro-section { padding: 48px 0 0; }
.bim-intro-inner h2 { font-size: 24px; } /* Figma 407:12059 H4-24 */
.bim-intro-text { font-size: 16px; } /* Figma 407:12060 P-16 */
.bim-catalogo-section { padding: 48px 0 0; }
.bim-catalogo-layout { grid-template-columns: 1fr; gap: 32px; }
.bim-catalogo-content h2 { font-size: 24px; } /* Figma 407:12285 H4-24 */
.bim-catalogo-label { font-size: 14px; } /* Figma 407:12283 LABEL-14 */
.bim-vantaggi-wrap { padding: 48px 0 0; }
.bim-form-section { padding: 48px 0 64px; }
.bim-form-inner { gap: 32px; }
.bim-form-inner h2 { font-size: 24px; } /* Figma 407:12372 H4-24 */
/* Hero file-bim mobile — Figma 407:12040: radius 40/0/40/0 (--bim base era 32), breadcrumb back "‹ HOME" */
.page-bim .page-hero-card--bim { border-radius: 40px 0 40px 0; min-height: 610px; } /* Figma overlayer 407:12042 = 610 (era 480 -> hero schiacciata) */
/* Figma 407:12040: breadcrumb in alto, blocco titolo+testo+bottoni ancorato in BASSO */
.page-bim .page-hero-card-content--bim { justify-content: flex-end; position: relative; gap: 24px; padding-top: 84px; }
.page-bim .page-hero-card-content--bim .breadcrumb { position: absolute; top: 40px; left: 32px; }
.page-bim .page-hero-card-content .breadcrumb-sep, .page-bim .page-hero-card-content .breadcrumb strong { display: none; }
.page-bim .page-hero-card-content .breadcrumb a:last-of-type::before { content: "\2039"; margin-right: 8px; font-size: 18px; line-height: 1; display: inline-block; }
.page-bim .form-row { grid-template-columns: 1fr; gap: 24px; }
.page-bim textarea.form-control { height: 160px; }
/* Service sections mobile — Figma 821:18574: eyebrow 14/1.24, h2 24/1.3, body 16/1.4, img-team 372 cover */
.sv-service-label { font-size: 14px; line-height: 1.24; margin-bottom: 28px; }
.sv-service-text h2, .sv-text-col h2 { font-size: 24px; line-height: 1.3; margin-bottom: 28px; }
.sv-service-single .sv-body, .sv-intro-right.sv-body, .sv-intro-right .sv-body, .sv-text-col--lg .sv-body { font-size: 16px; line-height: 1.4; }
.sv-carousel-wrap .sv-img-rounded { height: 372px; object-fit: cover; display: block; }
/* Immagini service "Frame 7" = 326px cover (Figma 363:9960/366:10324/366:10358) */
#file-bim .sv-img-rounded, #intervento .sv-img-rounded, #seminari .sv-img-rounded { height: 326px; object-fit: cover; display: block; }
/* Ambiti: l'immagine va PRIMA dell'accordion (Figma 363:8606: titolo → img-tab-clienti 237 → accordion) */
.sv-ambiti-grid > div:last-child { order: -1; aspect-ratio: 345 / 237; }
/* Titoli sezione mobile = H4-24/130% (Figma): erano 28/36px, portati a 24 */
.sv-faq-title { font-size: 24px; line-height: 1.3; }
.sv-faq-item summary, .sv-accordion-item summary { font-size: 17px; }
.sv-img-ph { min-height: 280px; }
.sv-vantaggi-card h2 { font-size: 24px; line-height: 1.3; margin-bottom: 36px; }
.sv-vantaggi-card { padding: 52px 30px; }
.sv-vantaggio-text strong { font-size: 16px; } /* Figma 353:2957: feature title 16px, non 20 */
.sv-intro-left h2 { font-size: 24px; line-height: 1.3; }
.sv-ambiti-title { font-size: 24px; line-height: 1.3; margin-bottom: 32px; }
.sv-calc-header h2 { font-size: 24px; line-height: 1.3; }
.sv-calc-inner > h2 { font-size: 24px; line-height: 1.3; }
.sv-img-ph--tall { min-height: 320px; }
.sv-bim-buttons { flex-direction: column; gap: 16px; }
.cert-grid, .valori-grid { grid-template-columns: repeat(2, 1fr); }
.blog-archive-top { flex-direction: column; gap: 16px; align-items: flex-start; }
.archive-blog .blog-archive-top { padding-top: 48px; } /* Figma 378:13705->13764: breadcrumb->filtro 48 (era 64, titolo nascosto su mobile) */
/* Blog archivio mobile — Figma 378:13523: niente titolo "Blog" (filtro subito dopo breadcrumb), breadcrumb back, filtro full-width */
.archive-blog .blog-archive-title { display: none; }
.archive-blog .breadcrumb--blog .breadcrumb-sep, .archive-blog .breadcrumb--blog strong { display: none; }
.archive-blog .breadcrumb--blog a:last-of-type::before { content: "\2039"; margin-right: 8px; font-size: 18px; line-height: 1; display: inline-block; }
.blog-cat-filter { width: 100%; }
.blog-cat-select-wrap { width: 100%; } /* Figma 378:13764: filtro full-width 343 su mobile (era 255 desktop) */
.page-hero-card { margin: 0 16px; min-height: 420px; }
.page-hero-card-content { padding: 40px 32px; }
.page-hero-card-content h1 { font-size: 28px; }
/* Hero servizi mobile — Figma 362:13108: card 40/0/40/0, overlay 40%, titolo in basso.
FULL-HEIGHT come azienda: hero + subnav sticky = 100svh, subnav al fondo del viewport a
OGNI risoluzione (iPhone incluso). svh stabile (no zoom immagine su scroll), niente min-height. */
.page-hero-card.page-hero-card--servizi {
height: calc(100vh - var(--offset) - 40px); /* 40 = subnav; nessun gap hero↔subnav su servizi → subnav al fondo */
height: calc(100svh - var(--offset) - 40px);
min-height: 0; border-radius: 40px 0 40px 0;
}
.page-hero-card.page-hero-card--servizi .page-hero-card-content { padding: 26px 30px 48px; max-width: 100%; height: 100%; justify-content: space-between; gap: 24px; }
.page-hero-card.page-hero-card--servizi .page-hero-card-content h1 { font-size: 28px; line-height: 1.3; }
/* breadcrumb mobile = back "‹ HOME" (Figma 362:13290) */
.page-servizi .page-hero-card-content .breadcrumb-sep,
.page-servizi .page-hero-card-content .breadcrumb strong { display: none; }
.page-servizi .page-hero-card-content .breadcrumb a::before { content: "\2039"; margin-right: 8px; font-size: 18px; line-height: 1; display: inline-block; }
.page-hero-card--bim { height: auto; }
.page-hero-card-content--bim { flex-direction: column; gap: 24px; padding: 40px 32px; }
.page-hero-card-left { flex: none; }
.page-hero-card-right { padding-left: 0; }
.page-inner-hero-content { grid-template-columns: 1fr; }
.page-inner-hero-content h1 { font-size: 32px; }
/* Lavora con noi mobile */
.page-hero-card--lavora { height: 610px; min-height: 0; border-radius: 40px 0 40px 0; } /* Figma 378:14417 */
.page-hero-card--lavora .page-hero-card-content { width: 100%; max-width: 100%; height: 100%; justify-content: space-between; padding: 26px 30px 40px; gap: 24px; }
.page-hero-card--lavora .page-hero-card-content h1 { font-size: 28px; line-height: 1.3; }
.lavora-valori-section { padding: 48px 0 0; }
.lavora-valori-section .container { gap: 32px; }
.lavora-valori-text { text-align: left; }
.lavora-valori-text h2 { font-size: 24px; margin-bottom: 20px; } /* Figma 378:14431 H4-24 */
.lavora-valori-text p { font-size: 16px; } /* Figma 378:14432 P-16 */
.lavora-valori-carousel-wrap { width: 100%; height: 480px; }
.lavora-carousel-controls { bottom: 20px; left: 20px; right: 20px; }
.lavora-perche-section { padding: 48px 0 0; }
.lavora-perche-card { grid-template-columns: 1fr; padding: 48px 30px; gap: 40px; }
.lavora-perche-item h3 { font-size: 24px; }
.lavora-persone-section { padding: 48px 0 0; }
.lavora-persone-section .container { gap: 20px; }
.lavora-persone-carousel-wrap { height: 420px; border-radius: 16px; }
.lavora-persone-controls { bottom: 20px; left: 20px; right: 20px; }
.lavora-persone-label { font-size: 22px; }
.lavora-posizioni-section { padding: 48px 0 0; }
.lavora-posizione-layout { flex-direction: column; gap: 32px; }
.lavora-posizione-layout + .lavora-posizione-layout { margin-top: 48px; }
.lavora-posizione-img { flex: none; width: 100%; }
.lavora-posizione-content { gap: 20px; }
.lavora-posizione-content h2 { font-size: 24px; } /* Figma 388:9977 H4-24 */
.lavora-posizione-label { font-size: 14px; } /* Figma 388:9975 LABEL-14 */
.lavora-cta-section { padding: 48px 0 64px; }
.lavora-cta-card { height: auto; min-height: 280px; }
.lavora-cta-content { flex-direction: column; align-items: flex-start; padding: 32px 24px; gap: 24px; }
.lavora-cta-text h2 { font-size: 24px; }
.lavora-cta-text p { font-size: 16px; }
/* Single articolo mobile */
.page-hero-card.page-hero-card--article { height: auto; min-height: 610px; border-radius: 40px 0 40px 0; } /* Figma 378:14139 (specificità per battere la base) */
/* Figma 378:14139: breadcrumb in alto, titolo+meta in BASSO (era titolo in alto) */
.single-post .page-hero-card--article { display: flex; flex-direction: column; align-items: stretch; }
.single-post .phc-article-content { flex: 1 1 auto; max-width: 100%; justify-content: space-between; padding: 26px 30px 84px; gap: 20px; }
/* .is-long-title incluso: su mobile il hero è ad altezza automatica, il titolo resta 28px */
.phc-article-content h1,
.single-post .phc-article-content h1.is-long-title { font-size: 28px; line-height: 1.3; }
.phc-article-meta { left: 30px; bottom: 40px; font-size: 16px; gap: 12px; }
/* breadcrumb articolo back "‹ blog" (3 livelli: nascondi Home + sep + titolo, mostra Blog) */
.single-post .page-hero-card-content .breadcrumb a:not(:last-of-type),
.single-post .page-hero-card-content .breadcrumb-sep,
.single-post .page-hero-card-content .breadcrumb strong { display: none; }
.single-post .page-hero-card-content .breadcrumb a:last-of-type::before { content: "\2039"; margin-right: 8px; font-size: 18px; line-height: 1; display: inline-block; }
.article-content-section { padding: 48px 0 64px; }
.article-content h2 { font-size: 24px; } /* Figma 378:14149 H4-24 */
.article-content h3 { font-size: 20px; }
.article-content p, .article-content ul, .article-content ol { font-size: 16px; } /* Figma P-16 */
.article-content > * + h2 { margin-top: 40px; }
.article-content > * + h3 { margin-top: 32px; }
.article-content > * + figure,
.article-content > * + .wp-block-image,
.article-content > figure + *,
.article-content > .wp-block-image + * { margin-top: 32px; }
.article-content blockquote { padding: 8px 0 8px 20px; font-size: 18px; }
.article-content figure img,
.article-content .wp-block-image img,
.article-content img { border-radius: 16px; }
.article-content .alignwide,
.article-content .alignfull { margin-left: 0; margin-right: 0; }
.article-content .wp-block-gallery { grid-template-columns: 1fr; gap: 16px; }
.article-correlati-section { padding: 0 0 64px; }
.article-correlati-title { font-size: 24px; margin-bottom: 32px; }
/* Supporto mobile */
.page-supporto .page-hero-card-right { align-self: flex-start; padding-left: 0; }
.supporto-content-section { padding: 48px 0 64px; }
.supporto-content-grid { grid-template-columns: 1fr; gap: 48px; }
.supporto-tipi { width: 100%; flex-direction: column; gap: 32px; }
.supporto-tipo h3 { font-size: 20px; } /* Figma 378:13447 H5-20 (era 22) */
.page-supporto .page-hero-card--bim { border-radius: 40px 0 40px 0; } /* Figma 378:13190 (era 32) */
.page-supporto .form-row { grid-template-columns: 1fr; gap: 24px; }
.page-supporto textarea.form-control { height: 160px; }
.bim-catalogo-layout { grid-template-columns: 1fr; gap: 40px; }
.bim-vantaggi-card { padding: 40px 24px; }
.bim-vantaggi-grid { grid-template-columns: 1fr; }
.bim-form-inner { max-width: 100%; }
.cta-dark-card { flex-direction: column; align-items: flex-start; }
.lavora-valori-text { text-align: left; }
.prodotto-hero-inner, .archive-settori-header { grid-template-columns: 1fr; }
/* Hero singolo prodotto: 1 colonna su mobile (img sopra, info sotto — era 590fr/539fr) */
.sp-hero-inner { grid-template-columns: 1fr; gap: 32px; }
.sp-hero-img-ph { min-height: 280px; }
/* Singolo prodotto hero mobile — Figma 343:11965: card 343 (margin 16), img full-bleed top,
info px30 titolo 28, breadcrumb back "‹ ", niente overflow (era margin 0 51 + padding desktop) */
.sp-hero-banner { margin: 0 16px; padding: 20px 0 40px; min-height: 0; border-radius: 40px 0 40px 0; overflow: hidden; }
.sp-hero-breadcrumb { padding: 0 30px; margin-bottom: 24px; white-space: normal; }
.sp-hero-breadcrumb a:not(:last-of-type), .sp-hero-breadcrumb .breadcrumb-sep, .sp-hero-breadcrumb strong { display: none; }
.sp-hero-breadcrumb a:last-of-type::before { content: "\2039"; margin-right: 8px; font-size: 18px; line-height: 1; display: inline-block; }
.sp-hero-info { padding: 0 30px; }
.sp-hero-info h1 { font-size: 28px; line-height: 1.3; }
/* Titoli sezione singolo prodotto = 24px (Figma h17): applicazioni/settori/correlati */
.sp-section-title { font-size: 24px; }
.sp-section-title--h2 { font-size: 24px; line-height: 1.3; }
/* Applicazioni principali (Figma 353:5027): stack — accordion sopra, immagine full-width sotto */
.sp-applicazioni-section .sp-section-title { margin-bottom: 28px; } /* Figma 348:1388 gap 28 */
.sp-applicazioni-inner { grid-template-columns: 1fr; gap: 20px; } /* era grid 2-col → schiacciava accordion+img */
.sp-applicazioni-img { aspect-ratio: 345 / 237; background: var(--grey-50); } /* Figma 348:1432 (era 654/431) */
.sp-applicazioni-accordion .sv-accordion-item summary { font-size: 16px; } /* Figma 324:14475 (era 17) */
/* Caratteristiche chiave (Figma 353:4988 a y2071): gap dall'immagine applicazioni ~80px, non 160 (era 60 pb + 100 pt) */
.sp-applicazioni-section { padding-bottom: 0; }
/* gap tra sezioni single-prodotto = 60px (Figma: features→settori, settori→cta, cta→correlati tutti 60).
Era doppio padding (padB 64/60 + padT 60 del successivo = 120-124) → padB 0, il gap lo dà il padT 60 */
.sp-caratteristiche-section { padding: 80px 0 0; }
.single-prodotto .sp-settori-section { padding-bottom: 0; }
.single-prodotto .cta-consulenza { padding-bottom: 0; }
.settore-aspetti-cols { flex-direction: column; }
.settore-aspetti-cols .settore-aspetti-img { flex: none; width: 100%; height: 237px; aspect-ratio: auto; } /* Figma 362:12947 = 237 (il container era h0 → immagine non si vedeva) */
.settore-aspetti-cols .settore-aspetti-img img, .settore-aspetti-cols .settore-aspetti-img .img-placeholder { height: 100%; }
.settore-accordion { flex: none; width: 100%; }
.settore-quote-card { height: auto; padding: 48px 32px; }
.settore-quote-mark { font-size: 80px; }
.settore-quote-text { font-size: 24px; margin-top: 52px; }
.az-quote-body { font-size: 24px; line-height: 1.3; } /* Figma 324:14139: quote azienda mobile 24/130 (era 36) */
/* Quote azienda mobile (Figma 324:14136): card più compatta, virgoletta piccola, gap virgoletta→testo ~24 (era enorme) */
.az-quote-card { padding: 60px 36px 40px; gap: 32px; }
.az-quote-card::before { font-size: 48px; top: 56px; left: 36px; line-height: 1; }
.az-quote-text { padding-top: 40px; gap: 28px; width: 100%; max-width: 100%; }
/* slide tagliate: la grid auto-dimensionava la colonna a 888px (width desktop dello slide) →
testo non andava a capo e overflow:hidden lo clippava. minmax(0,1fr) vincola la colonna alla card */
.az-quote-slides-wrap { width: 100%; grid-template-columns: minmax(0, 1fr); }
.settore-interventi-wrap { width: 100%; }
.settore-interventi-carousel img, .settore-interventi-carousel .img-placeholder { height: 360px; }
.page-hero-card--settore { height: auto; }
.page-hero-card-content--settore { max-width: 100%; }
.page-hero-card-content--settore .breadcrumb { white-space: normal; flex-wrap: wrap; width: auto; }
.settori-cards-grid { grid-template-columns: 1fr 1fr; }
.sub-settori-grid { grid-template-columns: 1fr 1fr; }
.sp-settori-grid { grid-template-columns: 1fr 1fr; }
.next-project-link { grid-template-columns: 1fr; }
/* Hero azienda mobile (Figma 254:6365: 343x698 fisso, no 100vh che crea spazio morto) */
.az-hero {
height: auto;
padding: 0 16px;
min-height: 0;
}
.az-hero-inner {
/* full-height: hero + subnav sticky riempiono il viewport, la subnav "spunta" a fondo schermo
(Figma 318:13750: barra subnav a y772-812 su viewport 812). 40px = altezza subnav.
svh (small viewport, STABILE) e non dvh: dvh cambia quando la barra URL si nasconde durante
lo scroll → la hero si riscala e l'immagine cover sembra "zoomare" */
height: calc(100vh - var(--offset) - 55px); /* 40 subnav + 15 gap hero↔subnav (Figma: hero finisce y757, barra y772) */
height: calc(100svh - var(--offset) - 55px);
min-height: 0; /* niente min: hero+subnav SEMPRE dentro il full-height a ogni viewport (era 560 → overflow su schermi bassi) */
border-radius: 40px 0 40px 0; /* Figma 318:12617 */
align-items: stretch;
}
.az-hero-content {
padding: 26px 30px 48px;
gap: 24px;
max-width: 100%;
height: 100%;
justify-content: space-between; /* breadcrumb in alto, titolo in basso */
}
.az-hero-content h1 { font-size: 28px; line-height: 1.3; max-width: 100%; }
.az-hero-content .breadcrumb { font-size: 14px; }
/* breadcrumb mobile = back "‹ HOME" (Figma 343:11957) */
.az-hero-content .breadcrumb-sep,
.az-hero-content .breadcrumb-current { display: none; }
.az-hero-content .breadcrumb a::before { content: "\2039"; margin-right: 8px; font-size: 18px; line-height: 1; display: inline-block; }
.az-full-img-wrap { margin: 0 20px; }
.az-timeline-title { font-size: 36px; line-height: 1.2; } /* Figma 318:13927 H2-36 (era 32) */
.az-timeline-body { font-size: 16px; line-height: 1.3; } /* Figma 318:13928 P-16 (era 24) */
.az-cert-grid { grid-template-columns: 1fr; }
/* Cert card mobile = Figma 333:8678 (h507): area icona 205, radius 24, titolo 16, desc 14, gap 24 */
.az-cert-card { height: auto; min-height: 0; border-radius: 24px; }
.az-cert-img { height: 205px; }
.az-cert-img .az-cert-logo { height: 122px; }
.az-cert-body { gap: 24px; }
.az-cert-text { gap: 24px; }
.az-cert-text h3 { font-size: 16px; }
.az-cert-text p { font-size: 14px; }
#mission .az-chi-siamo-text { gap: 28px; } /* Figma 318:13905/13907: distanze eyebrow→titolo e titolo(318:13908)→testo(318:13909) = 28 (era 32) */
.az-clienti-header { flex-direction: column; align-items: flex-start; }
/* Titoli sezione azienda — dimensioni Figma esatte (mix 24/28/36), erano tutti 36/28 desktop */
.az-chi-siamo-text .az-heading { font-size: 24px; line-height: 1.3; } /* intro 318:12631 */
.az-chi-siamo-text .az-body-text { font-size: 16px; line-height: 1.4; }
#mission .az-heading { font-size: 24px; } /* 318:13908 */
#team .az-heading { font-size: 28px; } /* 318:14021 H3-28 */
#team .az-body-text { font-size: 16px; line-height: 1.4; } /* 318:14022 P-16 (era 20px → testo 196px) */
.az-clienti-title { font-size: 24px; text-align: center; width: 100%; } /* 324:14036 centrato (era a sinistra) */
#certificazioni .az-heading { display: block; font-size: 24px; } /* 330:14684 (era nascosto su mobile) */
/* Carosello foto chi-siamo: su mobile immagine PORTRAIT 343x670 (Figma 320:8575), non landscape */
#az-foto-carousel .az-carousel-slide img { aspect-ratio: 343 / 670; }
/* Tabs mobile (Figma 324:14084/14085): la BARRA azzurra è larga quanto TUTTI i tab (≈767) e BLEEDA
oltre il bordo destro dello schermo. Lo scroll è sul wrapper, NON sullo sfondo (prima il bg
era confinato al viewport 343 e i tab scrollavano "dentro" → ora la barra scrolla come un blocco). */
.az-tabs-scroll {
display: block;
width: calc(100% + 16px); /* arriva fino al bordo destro schermo (annulla il padding 16 del container) */
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.az-tabs-scroll::-webkit-scrollbar { display: none; }
.az-tabs {
flex-wrap: nowrap;
width: max-content; /* sfondo azzurro = larghezza di tutti i tab, sborda off-screen */
max-width: none;
overflow: visible; /* niente scroll interno */
}
.az-tab { flex-shrink: 0; padding-top: 12px; padding-bottom: 12px; } /* barra a 54px (Figma 324:14085) */
/* Sostenibilità mobile (Figma 277:1621): overlay mantenuto sopra image placeholder 343x670,
header in alto-sx, stats card in basso con 3 card (1 wide + 2 affiancate) */
.az-sost-img-wrap {
height: 670px; /* Figma: 670 fisso (non auto/300) */
position: relative;
}
.az-sost-img,
.az-sost-img-placeholder { height: 100%; }
.az-sost-header {
position: absolute; /* overlay mantenuto, non static */
top: 36px; left: 31px;
max-width: 281px;
gap: 26px;
}
.az-sost-label { font-size: 16px; }
.az-sost-title { font-size: 24px; line-height: 1.2; }
.az-sost-stats {
position: absolute;
/* ancorato al BASSO (era top:426): con le etichette che vanno a capo i box
crescono, e ancorandoli in alto uscivano dall'immagine. 38px = inset
che il blocco aveva già con i box all'altezza nominale. */
top: auto;
bottom: 38px;
left: 50%; /* centrato orizzontalmente */
transform: translateX(-50%);
width: calc(100% - 38px); /* 19px inset da entrambi i bordi */
max-width: 305px; /* Figma width 305 */
right: auto; /* resetto eventuali right del base */
gap: 20px;
}
.az-sost-stat {
min-height: 102px; height: auto; /* Figma h-102, ma deve poter crescere */
padding: 12px 16px 12px 24px; /* Figma: pl=24, pr=16 → content area 102 (non 94 con 24/24) */
gap: 16px;
margin: 0;
justify-content: space-between;
}
/* Card wide "180+": padding più generoso come Figma (pl/pr=30) */
.az-sost-stat--wide { padding: 12px 30px; }
/* Label: no wrap, ellipsis se overflow (content area è già 102 Figma) */
/* 🔴 era white-space:nowrap: a 375px tagliava le etichette fuori dal box
("ALBERI EQUIVALEN…", "KM PERCORRIBILI…"). Devono andare a capo. */
.az-sost-lbl { white-space: normal; }
.az-sost-stat-row {
display: flex; gap: 20px; /* Figma esatto: 305 - 143 - 142 = 20 */
justify-content: space-between;
width: 100%;
}
.az-sost-stat-row .az-sost-stat { flex: 1; min-width: 0; }
.az-sost-num { font-size: 36px; font-weight: 400; } /* Regular 36 (desktop 42 Bold) */
/* nei due box stretti (143px a 375, ~103px interni) "538.000" a 36px misura 143px
e sfonda: qui il numero scala con la viewport, altrove resta 36. */
.az-sost-stat-row .az-sost-stat { padding: 12px 16px; }
.az-sost-stat-row .az-sost-num { font-size: clamp(22px, 7vw, 36px); }
.az-sost-lbl { font-size: 14px; }
.az-sost-body {
font-size: 16px; max-width: 100%;
color: var(--black-true); line-height: 1.4; /* Figma 330:14615: nero, P-16/140% (era grey-01 1.3) */
}
.az-sost-inner { gap: 20px; } /* Figma: 20px tra card immagine e testo (era 44) */
/* ===== Caroselli immagine azienda (chi-siamo 320:8575, team 318:14023): niente frecce, bullet DENTRO l'immagine in basso ===== */
.az-full-img-wrap, .az-team-carousel-wrap { position: relative; }
.az-full-img-wrap .az-carousel-controls,
.az-team-carousel-wrap .az-carousel-controls {
position: absolute; left: 0; right: 0; bottom: 28px;
margin: 0; padding: 0; justify-content: center; z-index: 3;
}
.az-carousel-controls .slider-arrows { display: none; }
.az-carousel-dots .slider-dot { background: var(--primary-cyan-light); opacity: .5; } /* Figma 318:14029 inattivi cyan-light @50% */
.az-carousel-dots .slider-dot.is-active { background: var(--primary-cyan); opacity: 1; } /* Figma 318:14028 attivo cyan #0086ab */
/* Quote carousel azienda (Figma 324:14136): niente frecce, solo dots centrati */
.az-quote-controls .slider-arrows { display: none; }
.az-quote-controls { justify-content: center; }
/* Testo "Il nostro team" (Figma 318:14019): allineato a sinistra (era centrato) */
.az-team-text { text-align: left; }
/* Clienti: immagine SOPRA la lista (Figma 324:14133), item 16px, divisori grey-50 (Figma 324:14055) */
.az-clienti-img { order: -1; }
.az-cliente-item { font-size: 16px; border-bottom-color: var(--grey-50); }
.az-cliente-item:first-child { border-top-color: var(--grey-50); }
}
/* =====================
PAGE HERO CARD — MEDIA VARIANT
(text left + image right inside dark card)
===================== */
.page-hero-card--media { min-height: 480px; align-items: center; }
.page-hero-card-content--media {
position: relative; z-index: 1;
display: grid; grid-template-columns: 1fr 1fr;
gap: 60px; padding: 65px 72px;
align-items: center; width: 100%;
}
.phc-media-text { display: flex; flex-direction: column; gap: 20px; }
.phc-media-text h1 {
font-size: 48px; font-weight: 700; color: var(--white);
line-height: 1.2; letter-spacing: 0.2px; margin: 0;
}
.post-hero-meta { display: flex; gap: 8px; align-items: center; font-size: 13px; color: rgba(255,255,255,.7); }
.post-hero-date { }
.post-hero-cat { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.phc-media-img .sv-img-ph { min-height: 280px; background: rgba(255,255,255,.1); }
.phc-media-img img { width: 100%; border-radius: 12px; display: block; }
/* Supporto: small placeholder in hero */
.sv-img-ph--sm { min-height: 200px; flex: 1; }
/* =====================
SUPPORTO PAGE
===================== */
.supporto-content-grid { display: grid; grid-template-columns: 313px 1fr; gap: 130px; align-items: start; }
.btn-supporto { display: inline-flex; align-items: center; justify-content: center; width: 198px; height: 48px; background: var(--grey-03); color: var(--grey-01); font-size: 16px; font-weight: 700; border: none; border-radius: var(--radius); cursor: pointer; transition: background .2s; }
.btn-supporto:hover { background: var(--grey-02); color: var(--white); }
/* =====================
SINGLE SETTORE
===================== */
/* Hero settore figlio (Figma 169:5392) — rounded asimmetrico 60/0/60/0, single-col content top-left */
.page-hero-card--settore {
height: 442px; min-height: 0;
border-radius: 60px 0 60px 0; overflow: hidden;
align-items: stretch;
}
.page-hero-card--settore .page-hero-card-bg {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; z-index: 0; pointer-events: none;
}
.page-hero-card--settore::before {
content: ""; position: absolute; inset: 0;
background: var(--black-true); opacity: .4; z-index: 1;
}
.page-hero-card-content--settore {
position: relative; z-index: 2;
padding: 45px 57px; gap: 28px;
align-self: flex-start;
}
.page-hero-card-content--settore h1 {
font-size: var(--fs-h1); font-weight: 700; color: var(--white);
line-height: 1.2; letter-spacing: 0; margin: 0;
max-width: 485px;
}
/* Breadcrumb single-settore figlio (Figma 169:5396): 4 livelli uppercase white 12 letter-spacing 0.2.
whitespace nowrap → singola riga; il container può overflow oltre il max-width 485 del parent. */
.page-hero-card-content--settore .breadcrumb {
font-size: 12px; padding: 0; margin: 0;
text-transform: uppercase; line-height: 1.24; letter-spacing: 0.2px;
display: flex; align-items: center; gap: 8px;
white-space: nowrap; width: max-content;
}
.page-hero-card-content--settore .breadcrumb a,
.page-hero-card-content--settore .breadcrumb span,
.page-hero-card-content--settore .breadcrumb strong { color: var(--white); }
.page-hero-card-content--settore .breadcrumb a,
.page-hero-card-content--settore .breadcrumb span { font-weight: 400; }
.page-hero-card-content--settore .breadcrumb strong { font-weight: 700; }
.page-hero-card-content--settore .breadcrumb a:hover { color: var(--primary-cyan-light); }
/* Parent settore hero — posizionamento assoluto identico al Figma:
- colonna sinistra: left:72px (card margin 51 + padding 72 = viewport x:123)
- colonna destra: left:calc(50%+16px) si ancora al centro del card come nel wireframe */
.page-hero-card-content--settore-2col {
position: absolute; inset: 0; z-index: 2;
max-width: none; width: auto; padding: 0; gap: 0;
display: block; align-self: auto;
}
.page-hero-card-content--settore-2col .page-hero-card-left {
position: absolute;
left: 57px; top: 45px;
width: 485px;
flex: none;
display: flex; flex-direction: column; gap: 28px;
}
/* Colonna destra (Figma 199:9628): top 226 dal PAGE = top 100 dal card (card hero parte da y=126 sul page).
left calc(50%+16) del card, padding-left 40, width content 539 + 40 padding = 579 totale */
.settore-hero-right {
position: absolute;
left: calc(50% + 16px);
top: 100px;
width: 579px;
padding-left: 40px;
box-sizing: border-box;
display: flex; flex-direction: column; gap: 32px;
}
.settore-hero-right p {
font-size: 16px; color: var(--white); line-height: 1.4;
letter-spacing: 0; margin: 0; max-width: 539px;
}
.settore-hero-right p:first-child { font-weight: 700; }
.settore-hero-right p:nth-child(n+2) { font-weight: 500; }
/* Settore figlio hero mobile — Figma 358:12549 (DOPO la base 2-col absolute per source-order):
impila titolo+descrizione, titolo 28, breadcrumb back "‹ tutti i settori", niente overflow */
@media (max-width: 768px) {
.page-hero-card--settore { margin: 0 16px; border-radius: 40px 0 40px 0; min-height: 0; height: auto; }
.page-hero-card-content--settore-2col {
position: relative; inset: auto; z-index: 2;
display: flex; flex-direction: column; align-items: flex-start;
width: auto; max-width: 100%; padding: 40px 30px; gap: 24px;
}
.page-hero-card-content--settore-2col .page-hero-card-left {
position: relative; left: auto; top: auto; width: auto; flex: none; gap: 16px;
}
.page-hero-card-content--settore-2col .page-hero-card-left h1 { font-size: 28px; line-height: 1.3; }
.page-hero-card-content--settore-2col .settore-hero-right,
.settore-hero-right { position: relative; left: auto; top: auto; width: auto; max-width: 100%; padding-left: 0; }
.page-hero-card-content--settore-2col .breadcrumb a:not(:last-of-type),
.page-hero-card-content--settore-2col .breadcrumb .breadcrumb-sep,
.page-hero-card-content--settore-2col .breadcrumb strong { display: none; }
.page-hero-card-content--settore-2col .breadcrumb a:last-of-type::before {
content: "\2039"; margin-right: 8px; font-size: 18px; line-height: 1; display: inline-block;
}
/* SUB-settore (non-2col, es. Cosmetico Figma 362:12664): hero 610, breadcrumb in alto + titolo 28 in basso */
.single-settore .page-hero-card--settore { min-height: 610px; }
.page-hero-card-content--settore:not(.page-hero-card-content--settore-2col) {
align-self: stretch; display: flex; flex-direction: column; justify-content: space-between;
padding: 26px 30px 48px;
}
.page-hero-card-content--settore:not(.page-hero-card-content--settore-2col) h1 { font-size: 28px; line-height: 1.3; max-width: 100%; }
.page-hero-card-content--settore:not(.page-hero-card-content--settore-2col) .breadcrumb a:not(:last-of-type),
.page-hero-card-content--settore:not(.page-hero-card-content--settore-2col) .breadcrumb .breadcrumb-sep,
.page-hero-card-content--settore:not(.page-hero-card-content--settore-2col) .breadcrumb strong { display: none; }
.page-hero-card-content--settore:not(.page-hero-card-content--settore-2col) .breadcrumb a:last-of-type::before {
content: "\2039"; margin-right: 8px; font-size: 18px; line-height: 1; display: inline-block;
}
}
/* Intro — Figma 172:6440 centered single-col, h2 36 black-true + p 20 grey-700 */
.settore-intro-inner {
max-width: 654px; margin: 0 auto;
display: flex; flex-direction: column; gap: 28px;
}
.settore-intro-inner h2 {
font-size: 36px; font-weight: 700; color: var(--black-true);
line-height: 1.2; letter-spacing: 0; margin: 0;
}
.settore-intro-text { font-size: 20px; font-weight: 500; color: var(--grey-700); line-height: 1.3; letter-spacing: 0; }
.settore-intro-text p { margin: 0 0 1em; }
.settore-intro-text p:last-child { margin-bottom: 0; }
/* Aspetti chiave — Figma 172:6444 (header h3 28 black-true) + 172:6452 (cols gap 30, img 654×431 r24) */
.settore-aspetti-header { display: flex; flex-direction: column; gap: 26px; margin-bottom: 40px; max-width: 654px; }
.settore-aspetti-header h2 {
font-size: 28px; font-weight: 700; color: var(--black-true);
line-height: 1.3; letter-spacing: 0; margin: 0;
}
.settore-aspetti-cols { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; }
.settore-aspetti-img { flex: 1 1 0; min-width: 0; aspect-ratio: 654 / 431; border-radius: 24px; overflow: hidden; }
.settore-aspetti-img img,
.settore-aspetti-img .img-placeholder { width: 100%; height: 100%; border-radius: 0; object-fit: cover; }
.settore-accordion { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
/* Quote + gli interventi container */
.settore-bottom-container { display: flex; flex-direction: column; align-items: center; gap: 120px; }
/* Quote card — Figma 172:6706/6707 (aqua-green bg, virgolette primary-blue, testo 36 Medium white) */
.settore-quote-card {
background: var(--primary-aqua); border-radius: 16px; height: 474px;
padding: 72px 43px 25px 36px; width: 100%;
display: flex; flex-direction: column; align-items: center; gap: 58px;
position: relative; overflow: hidden;
}
.settore-quote-inner {
position: relative; display: grid;
grid-template-columns: 1fr; grid-template-rows: 1fr;
width: 888px; max-width: 100%; gap: 31px;
}
.settore-quote-mark {
grid-column: 1; grid-row: 1; align-self: start; justify-self: start;
font-size: 116px; font-weight: 400; color: var(--primary-blue); line-height: 1.3; margin: 0;
}
.settore-quote-text {
grid-column: 1; grid-row: 1;
font-size: 36px; font-weight: 500; color: var(--white);
line-height: 1.2; letter-spacing: 0; margin: 85px 0 0;
}
.settore-quote-author {
font-size: 16px; font-weight: 700; color: var(--white);
line-height: 1.24; letter-spacing: 0; text-transform: uppercase; margin: 0;
width: 888px; max-width: 100%; text-align: left; align-self: center;
}
/* Gli interventi — Figma 175:3726/172:6444 single-col centered max 655 */
.settore-interventi-wrap {
display: flex; flex-direction: column; align-items: center; gap: 40px;
width: 655px; max-width: 100%;
}
.settore-interventi-text { display: flex; flex-direction: column; gap: 26px; width: 100%; }
.settore-interventi-text h2 {
font-size: 36px; font-weight: 700; color: var(--black-true);
line-height: 1.2; letter-spacing: 0; margin: 0;
}
.settore-interventi-body { font-size: 16px; font-weight: 500; color: var(--grey-700); line-height: 1.4; letter-spacing: 0; }
.settore-interventi-body p { margin: 0 0 1em; }
.settore-interventi-body p:last-child { margin-bottom: 0; }
.settore-interventi-carousel { width: 100%; }
.settore-interventi-carousel img,
.settore-interventi-carousel .img-placeholder { width: 100%; height: 670px; border-radius: 24px; object-fit: cover; }
/* Carousel "Gli interventi" — Figma 172:6761/6764 (overlay + nav absolute bottom 36, dots cyan-light/cyan, arrows white) */
.sv-carousel {
position: relative; width: 100%; height: 670px;
border-radius: 24px; overflow: hidden;
}
.sv-carousel::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(26,27,29,.16) 34.85%, var(--black-true) 109.55%);
opacity: 0.8;
z-index: 1;
}
.sv-carousel-track { position: absolute; inset: 0; }
.sv-carousel-slide {
position: absolute; inset: 0; opacity: 0; pointer-events: none;
transition: opacity .4s ease;
}
.sv-carousel-slide.is-active { opacity: 1; pointer-events: auto; }
.sv-carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-carousel-nav {
position: absolute; left: 28px; right: 28px; bottom: 36px;
display: flex; align-items: center; justify-content: space-between;
z-index: 2; padding: 0;
}
.sv-carousel-dots { display: flex; gap: 14px; align-items: center; }
.sv-carousel-dot {
width: 6px; height: 6px; border-radius: 3px;
background: var(--primary-cyan-light); opacity: .5;
border: none; padding: 0; cursor: pointer;
transition: background .2s, opacity .2s;
}
.sv-carousel-dot.is-active { background: var(--primary-cyan); opacity: 1; }
.sv-carousel-arrows { display: flex; gap: 18px; align-items: center; }
.sv-carousel-arrow {
width: 45px; height: 45px; border-radius: 50%;
border: 1px solid var(--white); background: transparent;
cursor: pointer; display: flex; align-items: center; justify-content: center;
color: var(--white); transition: background .2s, color .2s, opacity .2s;
padding: 0;
}
.sv-carousel-arrow:hover { background: var(--white); color: var(--primary-blue); }
.sv-carousel-arrow:disabled,
.sv-carousel-arrow.is-disabled {
opacity: .4; cursor: not-allowed; pointer-events: none;
}
/* Sub-settori grid (parent settore page — Grandi strutture ecc.) */
/* Sub-settori grid — Figma 165:3828 (item-settore-industrie Default+Hover)
Default 165:3829: radius 24, CTA hidden (Positive cerchio primary-blue)
Hover 165:3838: radius 60/0/60/60 (TR square), CTA visible Negative cerchio cyan-light + freccia primary-blue */
.sub-settori-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.sub-settore-card {
display: flex; flex-direction: column; justify-content: space-between;
position: relative; text-decoration: none;
background: var(--primary-aqua);
border-radius: 24px;
height: 397px; padding: 29px 26px 30px 30px;
overflow: hidden;
transition: border-radius .3s ease;
}
.sub-settore-card:hover {
border-radius: 60px 0 60px 60px;
}
.sub-settore-card-title {
font-size: 20px; font-weight: 700; color: var(--white);
line-height: 1.3; margin: 0; flex-shrink: 0;
}
/* Bottom block — Figma 165:3841: cluster (icon+desc) + CTA in-flow.
Niente gap fisso: il gap 18 è dato dal margin-top della CTA, attivato su hover. */
.sub-settore-card-bottom {
display: flex; flex-direction: column;
align-items: flex-start;
}
.sub-settore-card-icon-desc {
display: flex; flex-direction: column; gap: 28px;
align-items: flex-start;
}
.sub-settore-card-icon {
width: 104px; height: 104px; border-radius: 50%;
background: var(--primary-blue);
color: var(--white);
display: flex; align-items: center; justify-content: center;
overflow: hidden; flex-shrink: 0;
}
.sub-settore-card-icon svg { width: 36px; height: 36px; opacity: 1; color: var(--white); display: block; }
.sub-settore-card-icon img { width: 36px; height: 36px; object-fit: contain; filter: brightness(0) invert(1); }
.sub-settore-card-desc {
font-size: 16px; font-weight: 500; color: var(--white); line-height: 1.4;
letter-spacing: 0; margin: 0; max-width: 360px;
}
/* CTA "Scopri di più" — Figma 63:2323 (in-flow su hover, spinge icon+desc up; cerchio cyan-light freccia primary-blue) */
.sub-settore-card-cta {
display: flex; align-items: center; gap: 14px;
font-size: 14px; font-weight: 700; color: var(--white);
line-height: 1.3; letter-spacing: 0.2px;
height: 0; opacity: 0; margin-top: 0;
transition: height .3s ease, opacity .25s ease, margin-top .3s ease;
overflow: visible;
}
.sub-settore-card-cta .btn-cta-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 16px;
background: var(--primary-cyan-light); color: var(--primary-blue);
overflow: hidden; flex-shrink: 0;
}
.sub-settore-card-cta .btn-cta-icon svg { width: 16px; height: 16px; }
.sub-settore-card:hover .sub-settore-card-cta { height: 32px; opacity: 1; margin-top: 18px; }
/* Slide freccia "Scopri di più" — card settori (cta-secondary 29:3935 Negative→Negative-hover:
cerchio cyan-light, freccia primary-blue che scorre su hover della CTA). Mancava: freccia statica. */
.sub-settore-card-cta .btn-cta-icon,
.archive-settore-card-cta .btn-cta-icon,
.sp-settore-card-cta .btn-cta-icon { position: relative; }
.sub-settore-card-cta .btn-cta-icon::before,
.sub-settore-card-cta .btn-cta-icon::after,
.archive-settore-card-cta .btn-cta-icon::before,
.archive-settore-card-cta .btn-cta-icon::after,
.sp-settore-card-cta .btn-cta-icon::before,
.sp-settore-card-cta .btn-cta-icon::after {
content: ""; position: absolute; top: 50%;
width: 16px; height: 16px;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
transition: left .35s ease, transform .35s ease;
}
.sub-settore-card-cta .btn-cta-icon::before,
.archive-settore-card-cta .btn-cta-icon::before,
.sp-settore-card-cta .btn-cta-icon::before { left: 50%; transform: translate(-50%, -50%); }
.sub-settore-card-cta .btn-cta-icon::after,
.archive-settore-card-cta .btn-cta-icon::after,
.sp-settore-card-cta .btn-cta-icon::after { left: -50%; transform: translate(0, -50%); }
.sub-settore-card-cta:hover .btn-cta-icon::before,
.archive-settore-card-cta:hover .btn-cta-icon::before,
.sp-settore-card-cta:hover .btn-cta-icon::before { left: 150%; transform: translate(-50%, -50%); }
.sub-settore-card-cta:hover .btn-cta-icon::after,
.archive-settore-card-cta:hover .btn-cta-icon::after,
.sp-settore-card-cta:hover .btn-cta-icon::after { left: 50%; transform: translate(-50%, -50%); }
.sub-settore-card-cta .btn-cta-icon svg,
.archive-settore-card-cta .btn-cta-icon svg,
.sp-settore-card-cta .btn-cta-icon svg { display: none; }
/* Sistema integrato (settore padre) — Figma 773:19145: card BLU primary (#265a7b) con
sfumatura, testo bianco, header (titolo 36 sx + testo 16 dx) + illustrazione larga line-art chiara */
.settore-sistema-section { padding: 100px 0; }
/* SETTORE PADRE — distanze Figma 169:4352 (desktop): hero→card 80, card→box sistema 80,
box→footer 120 (mobile resta su .section/override esistenti) */
@media (min-width: 769px) {
.single-settore .sub-settori-section { padding-top: 80px; padding-bottom: 40px; }
.single-settore .settore-sistema-section{ padding-top: 40px; padding-bottom: 120px; }
}
.settore-sistema-card {
/* Figma 773:19145 — sfumatura cyan→blu (203.31deg, #0086AB 3.3% → #265A7B 82.2%) */
background: linear-gradient(203.31deg, #0086AB 3.3%, var(--primary-blue) 82.2%);
border-radius: 24px;
padding: 84px 83px;
overflow: hidden;
}
.settore-sistema-header {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 60px; margin-bottom: 75px;
}
.settore-sistema-title {
font-size: 36px; font-weight: 700; color: var(--white);
line-height: 1.2; letter-spacing: 0; margin: 0;
max-width: 395px; flex-shrink: 0;
}
.settore-sistema-text {
max-width: 543px; font-size: 16px; font-weight: 500; color: var(--white);
line-height: 1.4;
}
.settore-sistema-text p { margin: 0 0 1em; }
.settore-sistema-text p:last-child { margin-bottom: 0; }
.settore-sistema-img { max-width: 1114px; margin: 0 auto; }
.settore-sistema-img img { width: 100%; height: auto; display: block; }
/* Base CATEGORY TAXONOMY GROUPS: spostato sopra il @media 1024 — vedi blocco "BASE CAT GROUPS" */
/* CTA + Articoli dentro la sezione categoria */
.cat-content.section { padding-top: 120px; padding-bottom: 120px; } /* Figma 151:6377: correlati→footer 120 (era 100) */
.cat-cta-consulenza { margin-top: 120px; }
.cat-correlati { margin-top: 80px; }
.cat-correlati .blog-grid { gap: 30px; }
/* =====================
ARCHIVE TUTTI I SETTORI — Figma 165:3484
===================== */
.archive-settori-hero { padding-top: var(--offset); padding-bottom: 0; }
.archive-settori-hero .breadcrumb {
font-size: 12px; padding: 0; margin: 65px 0 0;
text-transform: uppercase; line-height: 1.24; letter-spacing: 0.2px;
display: flex; align-items: center; gap: 8px;
color: var(--black-true);
}
.archive-settori-hero .breadcrumb a,
.archive-settori-hero .breadcrumb span,
.archive-settori-hero .breadcrumb strong { color: var(--black-true); }
.archive-settori-hero .breadcrumb a { font-weight: 400; }
.archive-settori-hero .breadcrumb a:hover { color: var(--primary-blue); }
.archive-settori-hero .breadcrumb strong { font-weight: 700; }
.archive-settori-hero-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 40px;
margin-top: 32px; /* Figma 165:3484: H1 a y238 (era 47 → H1 finiva a 253) */
align-items: start;
}
.archive-settori-hero-grid h1 {
font-size: var(--fs-h1); font-weight: 700; color: var(--black-true);
line-height: 1.2; letter-spacing: 0;
margin: 0; max-width: 654px;
}
.archive-settori-hero-right {
display: flex; flex-direction: column; gap: 32px;
max-width: 565px;
}
.archive-settori-hero-right p {
font-size: 16px; color: var(--black-true);
line-height: 1.4; letter-spacing: 0; margin: 0;
}
.archive-settori-hero-right p:first-child { font-weight: 700; }
.archive-settori-hero-right p:nth-child(n+2) { font-weight: 500; }
.archive-settori-grid-section { padding: 75px 0 120px; } /* +15 compensa il margin-top hero 47→32: card restano a y478 (Figma) */
.archive-settori-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;
}
/* Mobile: 1 colonna (Figma 358:11853 — card full-width 343, hero stacked). Posizionato DOPO
la definizione base per vincere sul source-order. */
@media (max-width: 768px) {
.archive-settori-grid { grid-template-columns: 1fr; }
.archive-settori-hero-grid { grid-template-columns: 1fr; gap: 40px; } /* Figma 358:12396: gap titolo→desc 40 (era 24) */
.archive-settori-grid-section { padding-top: 60px; } /* Figma: hero→card 60 (era 75) */
/* Settori archivio mobile — Figma 358:12396/358:12331: titolo 28, breadcrumb back "‹ HOME", card 395 titolo 24 */
.archive-settori-hero-grid h1 { font-size: 28px; line-height: 1.3; }
.archive-settori-hero .breadcrumb-sep, .archive-settori-hero .breadcrumb strong { display: none; }
.archive-settori-hero .breadcrumb a::before { content: "\2039"; margin-right: 8px; font-size: 18px; line-height: 1; display: inline-block; }
}
.archive-settore-card {
position: relative; display: block; text-decoration: none;
height: 520px; border-radius: 24px; overflow: hidden;
transition: border-radius .3s ease;
}
.archive-settore-card:hover { border-radius: 60px 0 60px 60px; }
.archive-settore-card-bg {
position: absolute; inset: 0; z-index: 0;
}
.archive-settore-card-bg img,
.archive-settore-card-bg-ph {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .4s ease;
}
.archive-settore-card-bg-ph { background: var(--grey-700); }
.archive-settore-card:hover .archive-settore-card-bg img { transform: scale(1.04); }
.archive-settore-card-overlay {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(180deg, #090909 0%, rgba(3,3,3,0) 43.5%, #090909 105%);
opacity: 1;
}
.archive-settore-card-content {
position: absolute; inset: 0; z-index: 2;
display: flex; flex-direction: column; justify-content: space-between;
padding: 30px 24px;
}
.archive-settore-card-title {
font-size: 28px; font-weight: 700; color: var(--white);
line-height: 1.3; letter-spacing: 0; margin: 0;
max-width: 606px;
}
.archive-settore-card-bottom {
display: flex; flex-direction: column;
align-items: flex-start;
max-width: 595px;
}
.archive-settore-card-desc {
font-size: 16px; font-weight: 500; color: var(--white);
line-height: 1.4; letter-spacing: 0; margin: 0;
}
/* CTA "Scopri di più" — Figma 169:4157 in-flow on hover (push desc up, like sub-settori) */
.archive-settore-card-cta {
display: flex; align-items: center; gap: 14px;
font-size: 14px; font-weight: 700; color: var(--white);
line-height: 1.3; letter-spacing: 0.2px;
height: 0; opacity: 0; margin-top: 0; overflow: visible;
transition: height .3s ease, opacity .25s ease, margin-top .3s ease;
}
.archive-settore-card-cta .btn-cta-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 16px;
background: var(--primary-cyan-light); color: var(--primary-blue);
overflow: hidden; flex-shrink: 0;
}
.archive-settore-card-cta .btn-cta-icon svg { width: 16px; height: 16px; }
.archive-settore-card:hover .archive-settore-card-cta {
height: 32px; opacity: 1; margin-top: 20px;
}
/* Settori archivio card mobile — Figma MB-item-settori 358:12331: 395px, titolo 24 (DOPO la base per source-order) */
@media (max-width: 768px) {
.archive-settore-card { height: 395px; }
.archive-settore-card-title { font-size: 24px; }
.archive-settore-card-content { padding: 37px 24px; }
}
/* =====================
DARK ARCHIVE CARDS (Settori legacy, Prodotti) — non più usato in archive-settore
===================== */
.archive-dark-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.archive-dark-grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.archive-dark-card {
background: var(--primary-blue); border-radius: 16px; overflow: hidden;
display: block; text-decoration: none; transition: opacity .2s;
}
.archive-dark-card:hover { opacity: .88; }
.archive-dark-card-body { padding: 24px 28px 0; }
.archive-dark-card-title {
font-size: 20px; font-weight: 700; color: var(--white);
line-height: 1.3; letter-spacing: 0.2px; margin: 0;
}
.archive-dark-card-img {
aspect-ratio: 4/3; overflow: hidden; margin-top: 20px;
background: var(--grey-02); display: flex; align-items: center; justify-content: center;
}
.archive-dark-card-img img { width: 100%; height: 100%; object-fit: cover; }
.archive-dark-card-img-ph { width: 100%; height: 100%; }
.archive-dark-card-footer { padding: 16px 28px 28px; }
.archive-dark-card-footer p { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.5; margin: 0; }
/* =====================
CASE HISTORY ARCHIVE — design definitivo (Figma 182:5457)
===================== */
/* Breadcrumb + Title */
.archive-case-history .ch-archive-hero { padding-top: var(--offset); padding-bottom: 0; }
.archive-case-history .breadcrumb { font-size: 12px; color: var(--black-true); padding: 0; margin-top: 65px; text-transform: uppercase; line-height: 1.24; letter-spacing: 0.2px; display: flex; align-items: center; gap: 8px; }
.archive-case-history .breadcrumb a { color: var(--black-true); font-weight: 400; }
.archive-case-history .breadcrumb a:hover { color: var(--primary-blue); }
.archive-case-history .breadcrumb-sep { color: var(--black-true); }
.archive-case-history .breadcrumb strong { color: var(--black-true); font-weight: 700; }
/* SINGLE case history — breadcrumb UPPERCASE come il resto del sito (era 13px non-uppercase) */
.single-case-history .page-hero-card-content .breadcrumb {
font-size: 12px; padding: 0; text-transform: uppercase;
line-height: 1.24; letter-spacing: 0.2px;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.archive-case-history .ch-archive-title { font-size: 48px; font-weight: 700; color: var(--black-true); line-height: 1.2; letter-spacing: 0; margin: 31px 0 0; }
/* Section padding (Figma top=352 - hero end ~280 ≈ 72px gap) */
.archive-case-history .ch-archive-section { padding: 72px 0 120px; }
/* Lista card 1110×648 centered, gap 40 */
.ch-archive-list {
display: flex;
flex-direction: column;
gap: 40px;
max-width: 1110px;
margin: 0 auto;
}
.ch-archive-card {
display: block;
position: relative;
height: 648px;
background: var(--grey-04);
border-radius: 24px;
overflow: hidden;
text-decoration: none;
transition: border-radius .45s ease;
}
/* Hover Figma 57:1950: morphing border-radius
tl 80px, tr 0 (sharp), br 80px, bl 80px → effetto tag/price-card */
.ch-archive-card:hover {
border-radius: 80px 0 80px 80px;
}
/* Full-bleed background image */
.ch-archive-card-bg {
position: absolute; inset: 0;
overflow: hidden;
z-index: 0;
}
.ch-archive-card-bg img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
/* Placeholder when no image */
.ch-archive-card-bg-ph {
width: 100%; height: 100%;
background: var(--grey-01);
display: flex; align-items: center; justify-content: center;
}
/* Gradient overlay — sempre visibile (Figma: from 8% rgba(0,0,0,0.06) to 123% rgba(0,0,0,0.6)) */
.ch-archive-card-gradient {
position: absolute; inset: 0;
/* Figma 58:2068: gradient verticale (Background Shape) + diagonale che scurisce il bottom-left (testo) */
background:
linear-gradient(235deg, rgba(26,27,29,0) 49%, rgba(26,27,29,0.8) 92%),
linear-gradient(180deg, rgba(0,0,0,0.06) 8%, rgba(0,0,0,0.6) 100%);
pointer-events: none;
z-index: 1;
transition: background .35s ease;
}
/* Hover state (Figma 58:2072 — hover variant): gradient molto più scuro
da rgba(0,0,0,0.06→0.6) a rgba(0,0,0,0.1→0.95) → effetto "darken full card" */
.ch-archive-card:hover .ch-archive-card-gradient {
background:
linear-gradient(235deg, rgba(26,27,29,0) 49%, rgba(26,27,29,0.85) 92%),
linear-gradient(180deg, rgba(0,0,0,0.1) 8%, rgba(0,0,0,0.95) 100%);
}
/* Content overlay at bottom-left (Figma: bottom 64 left 60 w 706) */
.ch-archive-card-text {
position: absolute;
bottom: 64px; left: 60px;
z-index: 2;
width: 706px;
max-width: calc(100% - 120px);
display: flex;
flex-direction: column;
gap: 24px;
}
/* "CASE HISTORY" label — primary-blue-light sempre visibile (Figma) */
.ch-archive-card-label {
font-size: 16px;
font-weight: 700;
letter-spacing: 0;
line-height: 1.24;
color: var(--primary-blue-light);
text-transform: uppercase;
}
/* H2 — bianco sempre visibile (Figma 36 Bold white) */
.ch-archive-card-text h2 {
font-size: 36px;
font-weight: 700;
color: var(--white);
margin: 0;
line-height: 1.2;
letter-spacing: 0;
}
/* CTA "Scopri di più" — opacity 0 default, fade-in al hover */
.ch-archive-card-cta {
display: flex;
align-items: center;
gap: 14px;
opacity: 0;
transform: translateY(8px);
transition: opacity .35s ease, transform .35s ease;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.2px;
color: var(--white);
}
.ch-archive-card:hover .ch-archive-card-cta {
opacity: 1;
transform: translateY(0);
}
.ch-archive-card-cta-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
background: var(--primary-blue-light);
color: var(--primary-blue);
border-radius: 50%;
flex-shrink: 0;
overflow: hidden;
}
/* Slide freccia su HOVER CARD (cta-secondary 29:3935): doppia freccia primary-blue che scorre da sx al centro */
.ch-archive-card-cta-icon svg { display: none; }
.ch-archive-card-cta-icon::before,
.ch-archive-card-cta-icon::after {
content: ""; position: absolute; top: 50%;
width: 16px; height: 16px;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
transition: left .35s ease, transform .35s ease;
}
.ch-archive-card-cta-icon::before { left: 50%; transform: translate(-50%, -50%); }
.ch-archive-card-cta-icon::after { left: -50%; transform: translate(0, -50%); }
.ch-archive-card:hover .ch-archive-card-cta-icon::before { left: 150%; transform: translate(-50%, -50%); }
.ch-archive-card:hover .ch-archive-card-cta-icon::after { left: 50%; transform: translate(-50%, -50%); }
/* Empty state */
.ch-archive-empty {
font-size: 18px;
color: var(--grey-01);
text-align: center;
padding: 60px 0;
}
/* =====================
SINGLE CASE HISTORY — NEXT PROJECT (Figma item-case-successiva 190:7830, 1110×648)
===================== */
.case-next-section { padding-bottom: var(--section-gap); }
.case-next-wrap {
display: flex; flex-direction: column; gap: 17px;
max-width: 1110px; margin: 0 auto;
}
.case-next-head {
display: flex; align-items: center; gap: 14px;
color: var(--black-true);
transition: gap .3s;
}
.case-next-wrap:hover .case-next-head { gap: 22px; }
.case-next-head-arrow {
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 16px;
background: var(--primary-blue); color: var(--white);
transition: background .3s;
}
.case-next-wrap:hover .case-next-head-arrow { background: var(--primary-cyan, #0086ab); }
.case-next-heading {
font-size: 28px; font-weight: 700; color: var(--black-true);
margin: 0; line-height: 1.3;
}
.case-next-card {
position: relative; display: block;
width: 100%; height: 648px;
border-radius: 24px; overflow: hidden;
text-decoration: none; background: var(--grey-04);
}
.case-next-card-img {
position: absolute; inset: 0; z-index: 0;
}
.case-next-card-img img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .6s ease;
}
.case-next-wrap:hover .case-next-card-img img { transform: scale(1.04); }
.case-next-card-img-ph {
position: absolute; inset: 0;
background: var(--grey-04);
}
/* Gradient overlay bottom + left (Figma: rgba(0,0,0,.06)→rgba(0,0,0,.6) + side dark) */
.case-next-card::before {
content: ''; position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(235deg, rgba(26,27,29,0) 49%, rgba(26,27,29,.8) 92%),
linear-gradient(180deg, rgba(0,0,0,.06) 8%, rgba(0,0,0,.6) 100%);
pointer-events: none;
}
.case-next-card-body {
position: absolute; left: 60px; bottom: 64px; z-index: 2;
max-width: 706px;
display: flex; flex-direction: column; gap: 24px;
color: var(--white);
}
.case-next-card-label {
font-size: 16px; font-weight: 700; line-height: 1.24;
color: var(--primary-blue-light);
text-transform: uppercase;
margin: 0;
}
.case-next-card-body h2 {
font-size: 36px; font-weight: 700; color: var(--white);
margin: 0; line-height: 1.2;
}
/* CTA hidden by default, fade in on hover */
.case-next-card-cta {
display: inline-flex; align-items: center; gap: 14px;
opacity: 0; transform: translateY(8px);
transition: opacity .35s ease, transform .35s ease;
font-size: 14px; font-weight: 700; color: var(--white);
letter-spacing: 0.2px;
}
.case-next-card:hover .case-next-card-cta,
.case-next-wrap:hover .case-next-card-cta { opacity: 1; transform: translateY(0); }
.case-next-card-cta-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 16px;
background: var(--primary-blue-light); color: var(--primary-blue);
flex-shrink: 0;
}
/* Mobile case-next-card — card più bassa, padding ridotti, CTA sempre visibile */
@media (max-width: 768px) {
.case-next-wrap { gap: 24px; }
.case-next-heading { font-size: 22px; }
.case-next-head-arrow { width: 28px; height: 28px; border-radius: 14px; }
.case-next-wrap:hover .case-next-head { gap: 14px; }
.case-next-card { height: 460px; border-radius: 16px; }
.case-next-card-body {
left: 24px; right: 24px; bottom: 30px;
max-width: none;
gap: 16px;
}
.case-next-card-body h2 { font-size: 28px; line-height: 1.2; }
.case-next-card-label { font-size: 14px; }
.case-next-card-cta { opacity: 1; transform: none; }
}
/* =====================
SINGLE POSIZIONE — Ruolo e Posizione
===================== */
/* Single posizione — layout Figma 210:5221 */
.single-posizione { margin-top: var(--offset); }
.posizione-page-wrap {
display: grid;
grid-template-columns: 312px 1fr;
min-height: calc(100vh - var(--offset));
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
gap: 0;
align-items: start;
}
/* Sidebar */
.posizione-sidebar {
position: sticky;
top: calc(var(--offset) + 40px);
padding: 82px 0 80px; /* Figma 202:5049: cta-back a y248 */
display: flex;
flex-direction: column;
gap: 64px;
}
.posizione-sidebar-info {
display: flex;
flex-direction: column;
gap: 24px;
}
.posizione-info-list {
display: flex;
flex-direction: column;
gap: 24px;
}
.posizione-info-item { display: flex; flex-direction: column; gap: 4px; }
.posizione-info-label {
font-size: 18px; font-weight: 700;
color: var(--grey-01, #61646b);
line-height: 1.4; letter-spacing: 0.2px;
}
.posizione-info-val {
font-size: 18px; font-weight: 400;
color: var(--grey-01, #61646b);
line-height: 1.4; letter-spacing: 0.2px;
}
/* Il bottone "Candidati ora" usa .btn-blue (pill blu + freccia animata, Figma 202:6443).
.btn-posizione-candidati resta solo come hook, senza override di stile. */
/* Main content */
.posizione-main {
padding: 64px 0 120px 100px; /* Figma: contenuto→footer 120 */
max-width: 654px;
}
.posizione-main .breadcrumb { margin-bottom: 16px; } /* Figma: titolo a y248 */
.posizione-main-title {
font-size: 36px; font-weight: 700; color: var(--grey-01, #565a62);
line-height: 1.3; letter-spacing: 0.2px; margin-bottom: 40px;
}
.posizione-main-content {
display: flex; flex-direction: column; gap: 40px;
color: var(--grey-01, #61646b);
font-size: 18px; line-height: 1.4; letter-spacing: 0.2px;
}
.posizione-main-content p { margin: 0; }
.posizione-main-content h2 {
font-size: 18px; font-weight: 700;
color: var(--grey-01, #61646b);
margin: 0 0 20px;
}
.posizione-main-content ul {
padding-left: 27px; margin: 0;
display: flex; flex-direction: column; gap: 0;
}
.posizione-main-content li { line-height: 1.4; margin-bottom: 2px; }
/* Responsive */
@media (max-width: 768px) {
.posizione-page-wrap { grid-template-columns: 1fr; }
.posizione-sidebar { position: static; padding: 40px 0 0; gap: 32px; }
.posizione-main { padding: 32px 0 60px; max-width: 100%; }
.posizione-main-title { font-size: 28px; }
}
/* =====================
RESPONSIVE — new elements
===================== */
/* =====================
PAGINA PRODOTTI
===================== */
.prodotti-page-header { margin-top: var(--offset); }
.prodotti-page-header.section { padding-top: 48px; padding-bottom: 40px; }
.prodotti-page-header h1 {
font-size: 48px;
font-weight: 700;
color: var(--black);
max-width: 720px;
line-height: 1.2;
margin-top: 31px;
margin-bottom: 0;
}
.prodotti-page-intro {
font-size: 18px;
color: var(--grey-01);
margin-top: 24px;
max-width: 720px;
line-height: 1.6;
}
/* — TUTTI I PRODOTTI Hero (Figma 151:5683) — */
.archive-prodotti-hero { padding-top: var(--offset); padding-bottom: 0; }
.archive-prodotti-hero .breadcrumb {
font-size: 12px; padding: 0; margin: 65px 0 0;
text-transform: uppercase; line-height: 1.24; letter-spacing: 0.2px;
display: flex; align-items: center; gap: 8px;
color: var(--black-true);
}
.archive-prodotti-hero .breadcrumb a,
.archive-prodotti-hero .breadcrumb span,
.archive-prodotti-hero .breadcrumb strong { color: var(--black-true); }
.archive-prodotti-hero .breadcrumb a { font-weight: 400; }
.archive-prodotti-hero .breadcrumb a:hover { color: var(--primary-blue); }
.archive-prodotti-hero .breadcrumb strong { font-weight: 700; }
.archive-prodotti-hero h1 {
font-size: var(--fs-h1); font-weight: 700; color: var(--black-true);
line-height: 1.2; letter-spacing: 0; margin: 31px 0 0;
max-width: 720px;
}
/* — GRID CATEGORIE — Figma 151:6100 (Frame 4209: 3-col cards 424×520 gap 30/31) */
.archive-prodotti-grid-section { padding: 60px 0 120px; }
.prodotti-cat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px 31px;
}
/* Home = CAROSELLO slide (Figma 762:16909 desktop 3-up / 814:17194 mobile 1-up swipe).
L'archivio resta grid (solo .prodotti-cat-grid, senza .prodotti-cat-slider/.prodotti-viewport). */
.prodotti-viewport { overflow: hidden; }
.prodotti-cat-slider {
display: flex;
flex-wrap: nowrap;
gap: 31px;
transition: transform .4s ease;
will-change: transform;
}
.prodotti-cat-slider .prodotto-cat-card { flex: 0 0 calc((100% - 62px) / 3); }
/* Card categoria — Figma 151:5913 (item-categorie-prodotti)
bg grey-200, radius 24, border-bottom 8px colore categoria,
image centro-top + gradient overlay + testo bottom + CTA hover */
.prodotto-cat-card {
display: block;
position: relative;
height: 520px;
background: var(--grey-200, #cdd0d4);
border-radius: 24px;
border-bottom: 8px solid var(--primary-blue); /* fallback */
overflow: hidden;
text-decoration: none;
transition: border-radius .3s ease;
}
.prodotto-cat-card:hover { border-radius: 60px 0 60px 60px; }
/* Varianti colore border per slug categoria (Figma design system) */
.prodotto-cat-card--filtrazione,
.prodotto-cat-card--filtrazioni,
.prodotto-cat-card--filtrazione-acqua,
.prodotto-cat-card--filtrazioni-acqua { border-bottom-color: #ffc936; }
.prodotto-cat-card--osmosi,
.prodotto-cat-card--osmosi-inversa { border-bottom-color: #9adb02; }
.prodotto-cat-card--dosaggio,
.prodotto-cat-card--stazione-dosaggio,
.prodotto-cat-card--stazioni-dosaggio,
.prodotto-cat-card--prodotti-chimici { border-bottom-color: #1ce6d3; }
.prodotto-cat-card--addolcimento,
.prodotto-cat-card--addolcitori,
.prodotto-cat-card--addolcitori-acqua { border-bottom-color: #7ab0e0; }
.prodotto-cat-card--debatterizzatori,
.prodotto-cat-card--debatterizzatori-uvc,
.prodotto-cat-card--generatori,
.prodotto-cat-card--generatori-biossido { border-bottom-color: #a292fc; }
/* Immagine prodotto — cresce da top, image aspect 1180/1112 (item-prodotto pattern) */
.prodotto-cat-card-bg {
position: absolute;
inset: 0;
overflow: hidden;
}
.prodotto-cat-card-bg img {
position: absolute;
left: 50%; top: 3%;
transform: translateX(-50%);
width: auto; height: 60%;
object-fit: contain;
transition: transform .4s ease;
}
.prodotto-cat-card:hover .prodotto-cat-card-bg img { transform: translateX(-50%) scale(1.04); }
.prodotto-cat-card-bg-ph {
width: 100%; height: 60%;
display: flex; align-items: center; justify-content: center;
padding-top: 60px;
}
.prodotto-cat-card-bg-ph svg { display: block; flex-shrink: 0; }
/* Gradient overlay scuro — Figma 151:5857 (gradient bottom → top: nero 0.84 → trasparente 86%) */
.prodotto-cat-card-overlay {
position: absolute; inset: 0 0 -8px 0; pointer-events: none;
background: linear-gradient(to top, rgba(26,27,29,.84) 21.3%, rgba(26,27,29,0) 86.6%);
opacity: .75;
}
/* Testo bottom-left — Figma 151:5858 (default bottom 24) → 151:5879 (hover bottom 55, sale 31px) */
.prodotto-cat-card-text {
position: absolute;
left: 24px; right: 24px; bottom: 24px;
display: flex; flex-direction: column; gap: 12px;
z-index: 1;
transition: bottom .3s ease;
}
.prodotto-cat-card:hover .prodotto-cat-card-text { bottom: 55px; }
.prodotto-cat-card-title {
font-size: 28px;
font-weight: 700;
color: var(--white);
margin: 0;
line-height: 1.3;
letter-spacing: 0.2px;
}
.prodotto-cat-card-desc {
font-size: 16px;
font-weight: 500;
color: var(--white);
margin: 0;
line-height: 1.4;
letter-spacing: 0;
}
/* CTA "Scopri di più" — hidden default, visible on hover, cerchio cyan-light + freccia primary-blue (Negative variant) */
.prodotto-cat-card-cta {
display: inline-flex;
align-items: center;
gap: 14px;
font-size: 14px;
font-weight: 700;
color: var(--white);
line-height: 1.3;
letter-spacing: 0.2px;
height: 0; opacity: 0; margin-top: 0; overflow: visible;
transition: height .3s ease, opacity .25s ease, margin-top .3s ease;
}
.prodotto-cat-card-cta .btn-cta-icon {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 16px;
background: var(--primary-cyan-light); color: var(--primary-blue);
flex-shrink: 0; overflow: hidden;
transition: background-color .25s ease, color .25s ease;
}
.prodotto-cat-card-cta .btn-cta-icon svg {
width: 16px; height: 16px;
transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
/* Slide-through "classico" della freccia (come cta-secondary): la freccia esce a destra,
una seconda (bianca, per lo stato hover su cerchio primary-cyan) entra da sinistra */
.prodotto-cat-card-cta .btn-cta-icon::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: url("data:image/svg+xml;utf8,") no-repeat center;
transform: translateX(-24px);
transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.prodotto-cat-card-cta:hover .btn-cta-icon svg { transform: translateX(24px); }
.prodotto-cat-card-cta:hover .btn-cta-icon::after { transform: translateX(0); }
.prodotto-cat-card:hover .prodotto-cat-card-cta {
height: 32px; opacity: 1; margin-top: 0;
}
/* HOVER: cerchio diventa primary-cyan (#0086ab, era cyan-light) + freccia bianca */
.prodotto-cat-card:hover .prodotto-cat-card-cta .btn-cta-icon {
background: var(--primary-cyan);
color: var(--white);
}
/* =====================
RESPONSIVE — new elements
===================== */
@media (max-width: 1024px) {
.supporto-content-grid { grid-template-columns: 1fr; gap: 48px; }
.archive-dark-grid-3col { grid-template-columns: repeat(2, 1fr); }
.posizione-page-layout { grid-template-columns: 200px 1fr; gap: 48px; }
.case-row { grid-template-columns: 180px 1fr; gap: 40px; }
.prodotti-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.prodotto-cat-card { height: 440px; }
}
@media (max-width: 768px) {
.page-hero-card--media { min-height: 360px; }
.page-hero-card-content--media { grid-template-columns: 1fr; padding: 40px 32px; gap: 24px; }
.phc-media-text h1 { font-size: 28px; }
.phc-media-img { display: none; }
.supporto-content-grid { grid-template-columns: 1fr; }
.archive-dark-grid-2col, .archive-dark-grid-3col { grid-template-columns: 1fr; gap: 20px; }
/* MB-item-settori (343x395) — archive settori */
.archive-dark-card { height: 395px; display: flex; flex-direction: column; }
.archive-dark-card-body { padding: 30px 24px 0; }
.archive-dark-card-title { font-size: 24px; }
.archive-dark-card-img { margin-top: 0; aspect-ratio: auto; flex: 1; background: transparent; }
.archive-dark-card-footer { padding: 0 24px 30px; }
.archive-dark-card-footer p { font-size: 16px; color: var(--white); line-height: 1.3; letter-spacing: 0.2px; }
/* MB-settore (343x360) — sub-settori */
.sub-settori-grid { grid-template-columns: 1fr; gap: 20px; }
.sp-settori-grid { grid-template-columns: 1fr; gap: 20px; }
.sp-settore-card-cta { height: 32px; opacity: 1; margin-top: 18px; }
.settore-sistema-section { padding: 50px 0; }
.settore-sistema-card { padding: 32px 24px; border-radius: 20px; }
.settore-sistema-header { flex-direction: column; gap: 20px; margin-bottom: 32px; }
.settore-sistema-title { font-size: 28px; max-width: 100%; }
.settore-sistema-text { max-width: 100%; }
.sub-settori-grid { grid-template-columns: 1fr; gap: 24px; } /* Figma 358:12593: 1-up, gap 24 (era 20) */
.sub-settore-card { height: auto; min-height: 360px; padding: 29px 30px 30px 30px; border-radius: 24px; }
.sub-settore-card-title { font-size: 20px; }
.sub-settore-card-icon { width: 80px; height: 80px; }
.sub-settore-card-icon svg { width: 28px; height: 28px; }
.sub-settore-card-desc { font-size: 16px; line-height: 1.4; }
.sub-settore-card-cta { display: none; } /* Figma 358:12594: card SENZA "Scopri di più" (tutta cliccabile come ) */
.posizione-page-layout { grid-template-columns: 1fr; gap: 32px; }
.posizione-main-title { font-size: 28px; }
.case-row { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
.case-row-label { font-size: 18px; }
/* Case History archive mobile */
.archive-case-history .ch-archive-hero { padding-top: var(--offset); }
.archive-case-history .breadcrumb { margin-top: 24px; }
/* breadcrumb back "‹ HOME" (archive) */
.archive-case-history .breadcrumb-sep, .archive-case-history .breadcrumb strong { display: none; }
.archive-case-history .breadcrumb a:last-of-type::before { content: "\2039"; margin-right: 8px; font-size: 18px; line-height: 1; display: inline-block; }
/* breadcrumb back "‹ Case History" (single, 3 livelli) */
.single-case-history .page-hero-card-content .breadcrumb a:not(:last-of-type),
.single-case-history .page-hero-card-content .breadcrumb-sep,
.single-case-history .page-hero-card-content .breadcrumb strong { display: none; }
.single-case-history .page-hero-card-content .breadcrumb a:last-of-type::before { content: "\2039"; margin-right: 8px; font-size: 18px; line-height: 1; display: inline-block; }
.archive-case-history .ch-archive-title { font-size: 28px; margin: 20px 0 12px; } /* Figma 367:12472 H3-28; +12 bottom → gap titolo→card 60 */
.archive-case-history .ch-archive-section { padding: 48px 0 64px; }
.ch-archive-list { gap: 24px; max-width: 100%; }
.ch-archive-card { height: 567px; border-radius: 24px; } /* Figma MB-item-case-history 567/24 */
.ch-archive-card-text { bottom: 32px; left: 28px; right: 28px; width: auto; max-width: none; gap: 24px; } /* Figma 371:12638: px28 pb32, gap 24 (era left/right 24, gap 16) */
.ch-archive-card-text h2 { font-size: 24px; }
.ch-archive-card-label { font-size: 14px; } /* Figma 305:11561 LABEL-14 */
.ch-archive-card-cta { opacity: 1; transform: none; }
/* Single case-history mobile */
/* Figma mobile 372:8992: hero→logo 41, logo→Cliente 10, Cliente→Anno 32 (IMPILATI, non
affiancati), Anno→linea 40, linea→sezione 40, contenuto→linea dentro la sezione 32.
Il riquadro logo resta 200×100 come sul desktop (Figma 1428:21867). */
.single-case-history .case-meta-section { padding: 41px 0 40px; }
.single-case-history .case-meta { grid-template-columns: 1fr; gap: 10px; }
.single-case-history .case-meta-logo { grid-column: 1; grid-row: 1; }
.single-case-history .case-meta-cliente { grid-column: 1; grid-row: auto; }
.single-case-history .case-meta-anno { grid-column: 1; grid-row: auto; margin-top: 22px; } /* 10 di gap + 22 = 32 */
.single-case-history .case-sezioni-section { padding: 0; }
.single-case-history .case-sezioni { gap: 40px; }
.single-case-history .case-sezione { gap: 32px; }
.single-case-history .case-sezione-row { grid-template-columns: 1fr; gap: 16px; }
.single-case-history .case-sezione-title { font-size: 24px; }
.single-case-history .case-gallery-section { padding: 64px 0 0; }
.single-case-history .case-gallery-wrap { width: 100%; height: 420px; }
.single-case-history .case-gallery-controls { bottom: 20px; left: 20px; right: 20px; }
.single-case-history .case-benefici-section { padding: 64px 0 0; }
.single-case-history .case-quote-section { padding: 32px 0 0; }
.single-case-history .case-quote-card { padding: 60px 43px 60px 36px; min-height: auto; background: var(--primary-blue); } /* Figma 375:9282 blu #265a7b, py60/pl36/pr43 (era aqua-green) */
.single-case-history .case-quote-slide { align-items: flex-start; } /* Figma 375:9283 items-start (sinistra), non centrato */
.single-case-history .case-quote-mark { align-self: flex-start; font-size: 80px; margin-bottom: -30px; color: var(--primary-blue-light); } /* Figma virgolette blue-light #8bc5d7 (era primary-blue) */
.single-case-history .case-quote-text { font-size: 24px; text-align: left; } /* Figma 375:9285 24/130 */
.single-case-history .case-quote-author { color: var(--primary-blue-light); text-align: left; } /* Figma 375:9287 blue-light #8bc5d7 */
/* Carosello: la shorthand .case-quote-card sopra sovrascriveva il padding-bottom:100px desktop
-> dots/frecce absolute finivano SOPRA l'autore (autore lungo su 2 righe). Riserva spazio sotto. */
.single-case-history .case-quote-card--carousel { padding-bottom: 108px; }
.single-case-history .case-next-section { padding: 64px 0; }
.single-case-history .case-next-section .container { padding: 0 16px; } /* ripristina margini 16px (era breakout full-bleed) */
.single-case-history .case-next-wrap {
width: 100%; max-width: 100%;
margin-left: 0; margin-right: 0; /* annulla il breakout -178px desktop */
}
.single-case-history .case-next-card { height: 460px; border-radius: 24px; } /* Figma 376:12877 r24 */
.single-case-history .case-next-card::after { width: 80%; height: 100%; }
.single-case-history .case-next-heading { font-size: 22px; }
.prodotti-page-header h1 { font-size: 28px; } /* Figma 333:9180 H3-28 (era 32) */
/* Archivio prodotti mobile — Figma 333:8766: breadcrumb a 85 (offset 59 +26), titolo a 142, gap card 26, griglia→footer 80 */
.archive-prodotti-hero h1 { font-size: 28px; line-height: 1.3; margin-top: 41px; }
.archive-prodotti-hero .breadcrumb { margin-top: 26px; }
.archive-prodotti-hero .breadcrumb-sep, .archive-prodotti-hero .breadcrumb strong { display: none; }
.archive-prodotti-hero .breadcrumb a::before { content: "\2039"; margin-right: 8px; font-size: 18px; line-height: 1; display: inline-block; }
.archive-prodotti-grid-section { padding-bottom: 80px; }
.prodotti-cat-grid { grid-template-columns: 1fr; gap: 26px; }
/* Figma 333:8766: titolo/breadcrumb a x18, card a x15 (le card sporgono ~3px a sx del titolo) */
.archive-prodotti-hero .container { padding-left: 18px; padding-right: 18px; }
.archive-prodotti-grid-section .container { padding-left: 15px; padding-right: 15px; }
/* card riempie la colonna (345) e parte da x15 esatto: niente max-width 343 + margin auto che la centrava a 16 */
.archive-prodotti-grid-section .prodotto-cat-card { max-width: none; margin-inline: 0; }
/* MB-item-category-prodotti (343x441) */
.prodotto-cat-card { width: 100%; max-width: 343px; height: 433px; padding: 0; margin-inline: auto; } /* Figma MB-item-categorie-prodotti = 433 */
.prodotto-cat-card-title { font-size: 24px; }
.prodotto-cat-card-desc { font-size: 14px; line-height: 1.4; }
.prodotto-cat-card-text { left: 20px; right: 20px; bottom: 40px; } /* Figma pb40/px20 */
/* Home prodotti = carosello 1-up (Figma 814:17194: card h433 full-width, testo pb40/px20, title 24/desc 14) */
.prodotti-cat-slider { gap: 16px; }
.prodotti-cat-slider .prodotto-cat-card {
flex: 0 0 100%; width: 100%; max-width: none; height: 433px;
padding: 0; margin-inline: 0;
}
.prodotti-cat-slider .prodotto-cat-card-text { left: 20px; right: 20px; bottom: 40px; }
.prodotti-cat-slider .prodotto-cat-card-title { font-size: 24px; }
.prodotti-cat-slider .prodotto-cat-card-desc { font-size: 14px; line-height: 1.4; }
.candidatura-modal-inner { padding: 40px 20px 60px; }
.candidatura-header { flex-direction: column; gap: 16px; }
.candidatura-title { font-size: 28px; }
}
/* =====================
CANDIDATURA SPONTANEA — MODALE
===================== */
/* Full-page overlay modal */
.candidatura-modal {
display: none;
position: fixed;
inset: 0;
z-index: 10000;
background: #fff;
overflow-y: auto;
}
.candidatura-modal.is-open {
display: block;
animation: modalFadeIn .2s ease;
}
@keyframes modalFadeIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.candidatura-modal-inner {
max-width: 882px;
margin: 0 auto;
padding: 64px 24px 100px;
}
/* Header: back + titolo */
.candidatura-header {
display: flex;
align-items: flex-start;
gap: 40px;
margin-bottom: 48px;
}
.cta-back {
display: inline-flex;
align-items: center;
gap: 14px;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: var(--black-true, #1a1b1d);
font-size: 14px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.2px;
flex-shrink: 0;
text-decoration: none;
}
/* Cerchio blu 32px con doppia freccia-sinistra slide-through (Figma cta-back 202:5338) */
.cta-back-icon {
width: 32px; height: 32px;
border-radius: 50%;
background-color: var(--primary-blue);
overflow: hidden;
flex-shrink: 0;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
background-repeat: no-repeat, no-repeat;
background-size: 16px 16px, 16px 16px;
background-position: center, calc(100% + 16px) center;
transition: background-position .35s ease;
}
.cta-back-icon svg { display: none; } /* la freccia è resa via background per lo slide */
.cta-back:hover .cta-back-icon {
background-position: -16px center, center;
}
.candidatura-title {
font-size: 36px;
font-weight: 700;
color: var(--grey-01);
line-height: 1.3;
letter-spacing: 0.2px;
margin: 0;
}
/* CV upload zone */
/* Campi del modale candidatura: stile brand cyan-light (come consulenza/supporto),
prima usavano il .form-control globale bianco → background diverso dal resto del form */
.candidatura-modal .form-control {
background: var(--primary-cyan-light);
border: 1px solid var(--primary-blue-light);
color: var(--primary-blue);
font-size: 16px; font-weight: 500; line-height: 24px;
height: 60px; border-radius: 8px; padding: 12px;
}
.candidatura-modal .form-control::placeholder { color: var(--primary-blue); opacity: 0.45; }
.candidatura-modal .form-control:focus { outline: none; border-color: var(--primary-blue); }
.candidatura-modal select.form-control {
appearance: none; -webkit-appearance: none;
padding-right: 44px;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23265a7b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center;
}
.cv-upload-zone {
margin-bottom: 24px; /* Figma 202:6455/6879: stacco upload→privacy 24 (era 0, testo attaccato) */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 100%;
height: 126px;
background: var(--primary-cyan-light, #dbedf1);
border: 1px dashed var(--primary-blue);
border-radius: 4px;
cursor: pointer;
transition: border-color .2s, background .2s;
}
.cv-upload-zone:hover { border-color: var(--primary-cyan); background: #d2e7ee; }
.cv-upload-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cv-upload-label {
font-size: 16px;
font-weight: 700;
color: var(--primary-blue);
letter-spacing: 0.2px;
text-align: center;
}
.cv-upload-hint {
font-size: 12px;
font-weight: 500;
color: var(--primary-blue);
letter-spacing: 0.2px;
text-align: center;
}
/* Privacy row */
.form-check--candidatura { margin-top: 0; margin-bottom: 0; align-items: flex-start; }
.form-check--candidatura label { font-size: 14px; color: #61646b; line-height: 1.4; letter-spacing: 0.2px; cursor: pointer; }
.form-check--candidatura input[type="checkbox"] {
width: 20px; height: 20px; min-width: 20px;
border: 2px solid #afb1b6; border-radius: 4px;
appearance: none; background: #fff;
margin-top: 2px; cursor: pointer;
transition: border-color .15s;
}
.form-check--candidatura input[type="checkbox"]:checked {
background: var(--grey-01);
border-color: var(--grey-01);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
/* Posizione modal header variant: title + subtitle stacked */
.candidatura-header--posizione { align-items: flex-start; }
/* Figma 202:6455/6879 (desktop): back+titolo a y74; titolo→form 80 (spontanea) / 89 (posizione) */
@media (min-width: 769px) {
.candidatura-modal-inner { padding-top: 74px; }
.candidatura-header { margin-bottom: 78px; }
.candidatura-header--posizione { margin-bottom: 87px; }
}
.candidatura-title-wrap { display: flex; flex-direction: column; gap: 6px; }
.candidatura-subtitle {
font-size: 16px; font-weight: 700;
color: var(--primary-blue);
letter-spacing: 0.2px; text-transform: uppercase;
margin: 0; line-height: 1.3;
}
/* Modale candidatura mobile — Figma 400:11595/11596: titolo 24 black, sottotitolo 14 (DOPO la base per source-order) */
@media (max-width: 768px) {
.candidatura-title { font-size: 24px; color: var(--black-true); line-height: 1.3; }
.candidatura-subtitle { font-size: 14px; line-height: 1.24; }
}
/* Submit */
.candidatura-submit-row { margin-top: 40px; }
.btn-candidatura {
display: inline-flex;
align-items: center;
width: auto;
height: 56px;
padding: 12px 64px 12px 24px;
background: var(--primary-blue);
color: var(--white);
border: none;
border-radius: 56px;
font-family: var(--font-base);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.2px;
line-height: 1.3;
cursor: pointer;
transition: background-color .2s ease;
}
.btn-candidatura:hover { background: #1d4762; color: var(--white); }
@media (max-width: 768px) {
/* Figma 392:11451: bottone candidatura full-width, testo a sx + freccia a dx.
.form-submit-row e' inline-flex (si stringe a 219) -> reso flex full-width
cosi' il e l'input si allargano; la freccia ::after resta a right:12px. */
.form-submit-row:has(.btn-candidatura) { display: flex; width: 100%; }
.form-submit-row:has(.btn-candidatura) > p { flex: 1 1 auto; min-width: 0; margin: 0; }
.btn-candidatura { width: 100%; text-align: left; }
/* row full-width: lo spinner (default right:-44px) sforava di 20px oltre il viewport
-> overflow-x e modulo che "balla". Riportato dentro + clip di sicurezza. */
.form-submit-row:has(.btn-candidatura) .wpcf7-spinner { right: 8px; }
.candidatura-modal-inner { overflow-x: clip; }
}
/* ── Contact Form 7 compatibility ───────────────────────────────────────── */
/* Submit button rendered as */
input.wpcf7-submit {
appearance: none;
-webkit-appearance: none;
font-family: var(--font-base);
cursor: pointer;
}
/* Make inline-flex work on input submit (width/height driven by btn-grey / btn-supporto / btn-candidatura) */
input.wpcf7-submit.btn-grey { display: inline-block; }
input.wpcf7-submit.btn-supporto { display: inline-block; }
input.wpcf7-submit.btn-candidatura { display: inline-block; }
/* Acceptance field — CF7 wraps in label > input + span structure */
.wpcf7-acceptance label {
display: flex;
align-items: flex-start;
gap: 23px;
font-size: 14px;
color: #61646b;
cursor: pointer;
margin-bottom: 20px;
line-height: 1.4;
letter-spacing: 0.2px;
}
.wpcf7-acceptance label a { color: var(--grey-01); text-decoration: underline; }
.wpcf7-acceptance input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
/* Inside candidatura context override */
.form-check--candidatura .wpcf7-acceptance label { margin-bottom: 0; }
/* CF7 validation messages */
.wpcf7-not-valid-tip { display: block; font-size: 12px; color: #c0392b; margin-top: 4px; }
.wpcf7 .wpcf7-response-output { margin: 16px 0 0; padding: 12px 16px; border-radius: 4px; font-size: 14px; }
.wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ok { background: #e8f5e9; border: 1px solid #a5d6a7; color: #2e7d32; }
.wpcf7 .wpcf7-response-output.wpcf7-validation-errors { background: #fff3e0; border: 1px solid #ffcc80; color: #e65100; }
.wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ng,
.wpcf7 .wpcf7-response-output.wpcf7-spam-blocked { background: #fce4ec; border: 1px solid #f48fb1; color: #c62828; }
/* =====================
PAGINA GENERICA (legali: condizioni, smaltimento, cookie/privacy, codice etico)
===================== */
.page-generic .page-inner-hero { padding: 65px 0 0; }
.page-generic .page-inner-hero .breadcrumb { font-size: 12px; text-transform: uppercase; letter-spacing: 0.2px; line-height: 1.24; display: flex; align-items: center; gap: 8px; color: var(--black-true); margin-bottom: 31px; }
.page-generic .page-inner-hero .breadcrumb a { color: var(--black-true); font-weight: 400; }
.page-generic .page-inner-hero .breadcrumb a:hover { color: var(--primary-blue); }
.page-generic .page-inner-hero .breadcrumb strong { font-weight: 700; }
.page-generic-hero-content h1 { font-size: 48px; font-weight: 700; color: var(--black-true); line-height: 1.2; letter-spacing: 0; margin: 0; max-width: 900px; }
.page-generic-content-section { padding: 80px 0 120px; }
.page-generic-content { max-width: 882px; margin: 0 auto; }
.page-generic-content h2 { font-size: 28px; }
.page-generic-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.page-generic-content table td, .page-generic-content table th { border: 1px solid var(--grey-200, #cdd0d4); padding: 10px 14px; text-align: left; }
@media (max-width: 768px) {
.page-generic-hero-content h1 { font-size: 28px; }
.page-generic-content-section { padding: 48px 0 64px; }
}
/* Tipografia classica per le pagine legali: il contenuto importato (markup annidato Elementor)
non beneficia del flex-gap di .article-content → margini espliciti su ogni elemento. */
.page-generic-content { display: block; }
.page-generic-content p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--grey-700); }
.page-generic-content h2 { margin: 44px 0 16px; font-size: 28px; line-height: 1.3; color: var(--black-true); }
.page-generic-content h3 { margin: 32px 0 12px; font-size: 22px; line-height: 1.3; color: var(--black-true); }
.page-generic-content h4 { margin: 28px 0 10px; font-size: 18px; line-height: 1.3; color: var(--black-true); }
.page-generic-content h2:first-child, .page-generic-content h3:first-child { margin-top: 0; }
.page-generic-content ul, .page-generic-content ol { margin: 0 0 18px; padding-left: 24px; }
.page-generic-content li { margin-bottom: 8px; font-size: 16px; line-height: 1.6; color: var(--grey-700); }
.page-generic-content strong { color: var(--black-true); }
.page-generic-content a { color: var(--primary-blue); font-weight: 600; }
/* embed iubenda: respiro fra le sezioni della policy */
.page-generic-content #iubenda_policy p { margin-bottom: 14px; }
.page-generic-content #iubenda_policy h2 { margin: 36px 0 14px; }
.page-generic-content #iubenda_policy h3 { margin: 26px 0 10px; }
.page-generic-content #iubenda_policy ul { margin-bottom: 14px; }
/* =========================================================
SMALTIMENTO IMBALLAGGI — Figma desktop 1123:9426 / mobile 1129:15728
========================================================= */
.page-smaltimento .smalt-hero { padding-top: calc(var(--offset) + 65px); }
.page-smaltimento .smalt-hero .breadcrumb { padding: 0; margin-bottom: 31px; font-size: 14px; }
.page-smaltimento .smalt-hero .breadcrumb a { color: var(--grey-700); }
.page-smaltimento .smalt-hero .breadcrumb a:hover { color: var(--primary-blue); }
.page-smaltimento .smalt-hero .breadcrumb-sep { color: var(--grey-700); margin: 0 6px; }
.page-smaltimento .smalt-hero .breadcrumb strong { color: var(--black-true); font-weight: 700; }
.page-smaltimento .smalt-hero h1 {
font-size: 48px; font-weight: 700; color: var(--black-true);
line-height: 1.2; letter-spacing: 0; margin: 0;
}
.page-smaltimento .smalt-section { padding: 120px 0; }
.smalt-content { max-width: 1110px; margin: 0 auto; }
.smalt-header { display: flex; flex-direction: column; gap: 28px; margin-bottom: 60px; }
.smalt-label { font-size: 28px; font-weight: 700; color: var(--black-true); line-height: 1.3; letter-spacing: 0; margin: 0; }
.smalt-subtitle { font-size: 20px; font-weight: 500; color: var(--grey-700); line-height: 1.3; letter-spacing: 0; margin: 0; max-width: 882px; }
.smalt-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 79px;
row-gap: 72px;
}
.smalt-card { display: flex; flex-direction: column; gap: 24px; }
.smalt-card-img {
background: var(--grey-50);
border-radius: 24px;
aspect-ratio: 317 / 209;
display: flex; align-items: center; justify-content: center;
overflow: hidden; padding: 24px;
}
.smalt-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.smalt-card-body { display: flex; gap: 20px; align-items: flex-start; }
.smalt-card-text { flex: 1 1 0; min-width: 0; }
.smalt-card-title { font-size: 16px; font-weight: 700; color: var(--black-true); line-height: 1.4; letter-spacing: 0; margin: 0 0 4px; }
.smalt-card-list { margin: 0; padding-left: 22px; list-style: disc; }
.smalt-card-list li { font-size: 16px; font-weight: 500; color: var(--grey-700); line-height: 1.4; letter-spacing: 0; }
.smalt-card-icon { flex: 0 0 54px; width: 54px; height: 54px; }
.smalt-card-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 768px) {
.page-smaltimento .smalt-hero { padding-top: calc(var(--offset) + 26px); }
.page-smaltimento .smalt-hero h1 { font-size: 28px; }
.page-smaltimento .smalt-hero .breadcrumb { margin-bottom: 26px; }
.page-smaltimento .smalt-hero .breadcrumb-sep,
.page-smaltimento .smalt-hero .breadcrumb strong { display: none; }
.page-smaltimento .smalt-hero .breadcrumb a::before { content: "\2039"; margin-right: 8px; font-size: 18px; line-height: 1; display: inline-block; }
.page-smaltimento .smalt-section { padding: 80px 0; }
.smalt-header { gap: 28px; margin-bottom: 40px; }
.smalt-label { font-size: 20px; }
.smalt-subtitle { font-size: 16px; line-height: 1.4; }
.smalt-grid { grid-template-columns: 1fr; row-gap: 72px; justify-items: center; }
.smalt-card { width: 100%; max-width: 317px; }
}
/* =========================================================
WHISTLEBLOWING — Figma 1129:16066
========================================================= */
.page-whistleblowing .wb-hero { padding-top: calc(var(--offset) + 65px); }
.page-whistleblowing .wb-hero .breadcrumb { padding: 0; margin-bottom: 31px; font-size: 14px; }
.page-whistleblowing .wb-hero .breadcrumb a { color: var(--grey-700); }
.page-whistleblowing .wb-hero .breadcrumb a:hover { color: var(--primary-blue); }
.page-whistleblowing .wb-hero .breadcrumb-sep { color: var(--grey-700); margin: 0 6px; }
.page-whistleblowing .wb-hero .breadcrumb strong { color: var(--black-true); font-weight: 700; }
.page-whistleblowing .wb-hero h1 { font-size: 48px; font-weight: 700; color: var(--black-true); line-height: 1.2; letter-spacing: 0; margin: 0; }
.page-whistleblowing .wb-section { padding: 120px 0; }
.wb-content { max-width: 886px; margin: 0 auto; }
.wb-content p { font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--grey-700); margin: 0; }
.wb-content a { color: var(--primary-blue); text-decoration: underline; word-break: break-word; }
.wb-content ul { margin: 12px 0 0; padding-left: 24px; list-style: disc; }
.wb-content li { font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--grey-700); margin-bottom: 6px; }
.wb-content li:last-child { margin-bottom: 0; }
.wb-content li strong, .wb-content p strong { color: var(--black-true); font-weight: 700; }
.wb-intro { display: flex; flex-direction: column; gap: 16px; }
.wb-intro-title { font-size: 28px; font-weight: 700; color: var(--black-true); line-height: 1.3; margin: 0; }
.wb-intro-sub { font-size: 20px; font-weight: 700; color: var(--black-true); line-height: 1.3; margin: 0; }
.wb-lead { font-size: 20px; font-weight: 500; color: var(--grey-700); line-height: 1.3; margin: 36px 0 0; }
.wb-block { margin-top: 36px; }
.wb-block-title { font-size: 20px; font-weight: 700; color: var(--black-true); line-height: 1.3; letter-spacing: 0; margin: 0 0 16px; }
.wb-block p + p { margin-top: 14px; }
.wb-alert { display: flex; gap: 20px; align-items: flex-start; background: var(--primary-cyan-light); border-radius: 12px; padding: 32px 30px 33px; margin-top: 36px; }
.wb-alert-icon { flex: 0 0 24px; width: 24px; height: 24px; color: var(--primary-blue); }
.wb-alert-icon svg { display: block; width: 100%; height: 100%; }
.wb-alert-text p { margin: 0; }
.wb-alert-title { font-size: 20px; font-weight: 700; color: var(--black-true); line-height: 1.3; margin: 0 0 6px; }
.wb-table-wrap { margin-top: 28px; overflow-x: auto; }
.wb-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.wb-table th { background: var(--primary-blue); color: var(--white); font-size: 16px; font-weight: 700; text-align: left; padding: 20px 24px; border: 1px solid var(--primary-blue-light); }
.wb-table td { font-size: 14px; font-weight: 500; color: var(--black-true); line-height: 1.4; padding: 24px; border: 1px solid var(--primary-blue-light); vertical-align: top; }
.wb-table tbody tr:nth-child(even) td { background: var(--primary-cyan-light); }
.wb-table tbody tr:nth-child(odd) td { background: var(--white); }
.wb-table td strong { color: var(--black-true); font-weight: 700; }
.wb-doc-btn { display: inline-flex; align-items: center; gap: 15px; padding: 12px 12px 12px 20px; border: 1px solid var(--primary-blue); border-radius: 56px; margin-top: 36px; text-decoration: none; transition: background .2s; }
.wb-doc-btn-label { font-size: 14px; font-weight: 700; color: var(--black-true); letter-spacing: .2px; }
.wb-doc-btn-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--primary-blue); color: var(--white); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wb-doc-btn:hover { background: var(--primary-cyan-light); }
@media (max-width: 768px) {
.page-whistleblowing .wb-hero { padding-top: calc(var(--offset) + 26px); }
.page-whistleblowing .wb-hero h1 { font-size: 28px; }
.page-whistleblowing .wb-hero .breadcrumb { margin-bottom: 26px; }
.page-whistleblowing .wb-hero .breadcrumb-sep,
.page-whistleblowing .wb-hero .breadcrumb strong { display: none; }
.page-whistleblowing .wb-hero .breadcrumb a::before { content: "\2039"; margin-right: 8px; font-size: 18px; line-height: 1; display: inline-block; }
.page-whistleblowing .wb-section { padding: 80px 0; }
.wb-intro-title { font-size: 22px; }
.wb-intro-sub { font-size: 18px; }
.wb-lead { font-size: 18px; }
.wb-block-title { font-size: 18px; }
/* Alert mobile: icona SOPRA il testo (colonna) — Figma 1147:20814 */
.wb-alert { flex-direction: column; gap: 20px; padding: 32px 30px; }
/* Tabella mobile: 3 colonne strette a tutta larghezza, niente scroll, celle compatte — Figma 1147:20821 */
.wb-table-wrap { overflow-x: visible; }
.wb-table { table-layout: fixed; min-width: 0; }
.wb-table th { font-size: 14px; padding: 16px 12px; }
.wb-table td { padding: 16px 12px; }
.wb-table th, .wb-table td { overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
}