/* ============================================================
MARIN Soluzioni — style.css
Foglio di stile globale. Importato da tutte le pagine.
============================================================ */
/* ============================================================
1. GOOGLE FONTS
Le font Outfit e Inter sono caricate via nell'HTML
con preconnect per performance ottimale.
NON usare @import qui — crea una catena render-blocking.
============================================================ */
/* ============================================================
2. CSS CUSTOM PROPERTIES (VARIABILI)
============================================================ */
:root {
/* Colori principali */
--blu: #306ec2;
--blu-hover: #2558a0;
--blu-scuro: #1a3d6b;
--blu-chiaro: #e8f0fb;
/* Neutri */
--nero: #0f0f0f;
--testo-scuro: #1a1a1a;
--testo-corpo: #4a4a4a;
--testo-grigio: #717373;
--bordo: #e2e2e2;
--sfondo-grigio: #f6f6f6;
--bianco: #ffffff;
/* Feedback */
--successo: #1e6e2e;
--errore: #c62828;
/* Tipografia */
--font-display: 'Outfit', sans-serif;
--font-body: 'Inter', sans-serif;
/* Scale tipografica desktop */
--t-h1: clamp(2rem, 4.5vw, 3.25rem);
--t-h2: clamp(1.6rem, 3vw, 2.4rem);
--t-h3: clamp(1.15rem, 2vw, 1.5rem);
--t-body: 1rem;
--t-small: 0.875rem;
--t-label: 0.8125rem;
/* Spaziatura */
--s-xs: 0.5rem;
--s-sm: 1rem;
--s-md: 1.5rem;
--s-lg: 2.5rem;
--s-xl: 4rem;
--s-2xl: 6rem;
--s-3xl: 8rem;
/* Layout */
--max-width: 1200px;
--max-width-text: 760px;
--padding-x: clamp(1.25rem, 5vw, 3rem);
/* Effetti */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--ombra-sm: 0 2px 8px rgba(0,0,0,0.07);
--ombra-md: 0 8px 24px rgba(0,0,0,0.09);
--ombra-lg: 0 20px 48px rgba(0,0,0,0.12);
--ombra-blu: 0 8px 24px rgba(48,110,194,0.25);
/* Transizioni */
--trans-fast: 0.18s ease;
--trans-med: 0.28s ease;
--trans-slow: 0.45s ease;
/* Header */
--header-h: 72px;
}
/* ============================================================
3. RESET & BASE
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
/* Blocca zoom da doppio tap su iOS senza disabilitare pinch-to-zoom */
touch-action: pan-y;
}
body {
font-family: var(--font-body);
font-size: var(--t-body);
color: var(--testo-corpo);
background-color: var(--bianco);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
max-width: 100vw;
}
img, svg {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
ul, ol {
list-style: none;
}
button {
cursor: pointer;
border: none;
background: none;
font-family: var(--font-body);
}
input, textarea, select {
font-family: var(--font-body);
}
/* ============================================================
4. TIPOGRAFIA
============================================================ */
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--testo-scuro);
line-height: 1.15;
letter-spacing: -0.02em;
}
h1 { font-size: var(--t-h1); font-weight: 800; }
h2 { font-size: var(--t-h2); font-weight: 700; }
h3 { font-size: var(--t-h3); font-weight: 600; }
p {
line-height: 1.75;
color: var(--testo-corpo);
}
.testo-piccolo {
font-size: var(--t-small);
color: var(--testo-grigio);
}
.etichetta {
font-family: var(--font-display);
font-size: var(--t-label);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--blu);
}
/* ============================================================
5. LAYOUT UTILITIES
============================================================ */
.contenitore {
width: 100%;
max-width: var(--max-width);
margin: auto;
padding: 0 var(--padding-x);
height: 100%;
}
.sezione {
padding: var(--s-2xl) 0;
}
.sezione--grigio {
background-color: var(--sfondo-grigio);
}
.sezione--blu {
background-color: var(--blu);
}
.sezione--scuro {
background-color: var(--nero);
}
.testo-centrato {
text-align: center;
}
.max-testo {
max-width: var(--max-width-text);
}
.griglia-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-md);
}
.griglia-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-md);
}
.griglia-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-md);
}
.flex-centro {
display: flex;
align-items: center;
justify-content: center;
}
.flex-tra {
display: flex;
align-items: center;
justify-content: space-between;
}
/* ============================================================
6. HEADER & NAVIGAZIONE
============================================================ */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
height: var(--header-h);
background: rgba(255,255,255,0.97);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid transparent;
transition: border-color var(--trans-med), box-shadow var(--trans-med);
}
.header.scrollato {
border-bottom-color: var(--bordo);
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.header__interno {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
gap: var(--s-md);
padding-top: 6px;
padding-bottom: 6px;
}
/* Logo */
.header__logo {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.header__logo-icona {
width: 38px;
height: 38px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
}
.header__logo-icona svg {
width: 22px;
height: 22px;
}
.header__logo-testo {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.header__logo-nome {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.25rem;
color: var(--testo-scuro);
letter-spacing: -0.02em;
}
.header__logo-sub {
font-size: 0.7rem;
font-weight: 500;
color: var(--testo-grigio);
letter-spacing: 0.04em;
}
/* Nav desktop */
.header__nav {
display: flex;
align-items: center;
gap: var(--s-lg);
}
.header__nav-link {
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 600;
color: var(--testo-scuro);
transition: color var(--trans-fast);
position: relative;
}
.header__nav-link::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 0;
height: 2px;
background: var(--blu);
border-radius: 2px;
transition: width var(--trans-med);
}
.header__nav-link:hover { color: var(--blu); }
.header__nav-link:hover::after { width: 100%; }
/* Link attivo — pagina corrente (gestito via JS) */
.header__nav-link.attivo { color: var(--blu); }
.header__nav-link.attivo::after { width: 100%; }
/* CTA header */
.header__cta {
display: flex;
align-items: center;
gap: var(--s-md);
flex-shrink: 0;
}
.header__telefono {
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 600;
color: var(--testo-scuro);
display: flex;
align-items: center;
gap: 6px;
transition: color var(--trans-fast);
}
.header__telefono:hover { color: var(--blu); }
.header__telefono svg {
width: 14px;
height: 14px;
color: var(--blu);
}
/* Hamburger mobile */
.header__hamburger {
display: none;
flex-direction: column;
gap: 5px;
padding: 6px;
cursor: pointer;
}
.header__hamburger span {
display: block;
width: 24px;
height: 2px;
background: var(--testo-scuro);
border-radius: 2px;
transition: transform var(--trans-med), opacity var(--trans-med);
transform-origin: center;
}
/* Hamburger → X via classe (no inline style) */
.header__hamburger.attivo span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.header__hamburger.attivo span:nth-child(2) {
opacity: 0;
}
.header__hamburger.attivo span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* Menu mobile */
.menu-mobile {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--bianco);
z-index: 999;
flex-direction: column;
/* NO overflow-y qui — lo scroll è solo sulla parte scrollabile */
transform: translateX(100%);
visibility: hidden;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0s linear 0.35s;
}
.menu-mobile.aperto {
transform: translateX(0);
visibility: visible;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0s linear 0s;
}
/* Blocco scroll body/html quando menu mobile è aperto (iOS-safe) */
html.menu-aperto,
body.menu-aperto {
overflow: hidden !important;
overscroll-behavior: none;
}
body.menu-aperto {
touch-action: none;
}
/* Parte FISSA in cima (header + tel) */
.menu-mobile__fisso {
flex-shrink: 0;
}
.menu-mobile__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--padding-x);
height: var(--header-h);
border-bottom: 1px solid var(--bordo);
}
.menu-mobile__chiudi {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
transition: background var(--trans-fast);
}
.menu-mobile__chiudi:hover { background: var(--sfondo-grigio); }
.menu-mobile__tel {
display: flex;
align-items: center;
gap: 12px;
padding: var(--s-md) var(--padding-x);
border-bottom: 1px solid var(--bordo);
}
.menu-mobile__tel-icona {
width: 44px;
height: 44px;
background: var(--blu-chiaro);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.menu-mobile__tel-icona svg { width: 20px; height: 20px; color: var(--blu); }
.menu-mobile__tel-testo { display: flex; flex-direction: column; }
.menu-mobile__tel-label {
font-size: 0.75rem;
color: var(--testo-grigio);
font-weight: 500;
}
.menu-mobile__tel-numero {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 700;
color: var(--testo-scuro);
letter-spacing: -0.02em;
}
/* Parte SCROLLABILE (nav + footer) */
.menu-mobile__scorrevole {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
/* Scrollbar sottile */
scrollbar-width: thin;
scrollbar-color: var(--bordo) transparent;
}
.menu-mobile__nav {
padding: var(--s-sm) var(--padding-x);
flex: 1;
}
.menu-mobile__nav-voce {
display: block;
padding: 16px 0;
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 600;
color: var(--testo-scuro);
border-bottom: 1px solid var(--bordo);
transition: color var(--trans-fast);
/* Altezza touch minima 48px garantita da padding + line-height */
min-height: 48px;
display: flex;
align-items: center;
}
.menu-mobile__nav-voce:hover { color: var(--blu); }
/* Voce attiva — pagina corrente (gestito via JS) */
.menu-mobile__nav-voce.attivo { color: var(--blu); }
.menu-mobile__nav-servizi {
padding: 16px 0;
border-bottom: 1px solid var(--bordo);
}
.menu-mobile__nav-servizi-titolo {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 600;
color: var(--testo-scuro);
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
min-height: 48px;
}
.menu-mobile__nav-servizi-titolo svg {
width: 20px;
height: 20px;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
flex-shrink: 0;
}
/* Freccia ruotata via aria-expanded (no inline JS) */
.menu-mobile__nav-servizi-titolo[aria-expanded="true"] svg {
transform: rotate(180deg);
}
/* Sottomenu — animazione perfetta con grid row + fade contenuto */
.menu-mobile__nav-sub {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: grid-template-rows;
}
.menu-mobile__nav-sub > * {
overflow: hidden;
}
.menu-mobile__nav-sub.aperto {
grid-template-rows: 1fr;
}
/* Wrapper interno per il contenuto del sottomenu */
.menu-mobile__nav-sub-inner {
display: flex;
flex-direction: column;
gap: 14px;
padding-top: 14px;
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s;
}
.menu-mobile__nav-sub.aperto .menu-mobile__nav-sub-inner {
opacity: 1;
transform: translateY(0);
}
/* Stagger gruppi — ogni gruppo appare con ritardo progressivo */
.menu-mobile__nav-sub.aperto .menu-mobile__nav-gruppo:nth-child(1) {
animation: fadeSubGruppo 0.35s ease 0.12s both;
}
.menu-mobile__nav-sub.aperto .menu-mobile__nav-gruppo:nth-child(2) {
animation: fadeSubGruppo 0.35s ease 0.2s both;
}
.menu-mobile__nav-sub.aperto .menu-mobile__nav-gruppo:nth-child(3) {
animation: fadeSubGruppo 0.35s ease 0.28s both;
}
@keyframes fadeSubGruppo {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Gruppo categoria */
.menu-mobile__nav-gruppo {
display: flex;
flex-direction: column;
}
.menu-mobile__nav-gruppo-label {
font-family: var(--font-display);
font-size: .7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--blu);
padding: 6px 12px 8px;
}
.menu-mobile__nav-gruppo-items {
display: flex;
flex-direction: column;
background: var(--sfondo-grigio);
border-radius: var(--radius-md);
overflow: hidden;
}
.menu-mobile__nav-sub-link {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
font-family: var(--font-display);
font-size: .9375rem;
font-weight: 500;
color: var(--testo-scuro);
border-bottom: 1px solid var(--bordo);
transition: background var(--trans-fast), color var(--trans-fast);
/* Altezza touch minima 48px */
min-height: 48px;
}
.menu-mobile__nav-sub-link:last-child { border-bottom: none; }
.menu-mobile__nav-sub-link svg {
width: 18px;
height: 18px;
color: var(--blu);
flex-shrink: 0;
}
.menu-mobile__nav-sub-link:hover,
.menu-mobile__nav-sub-link.attivo {
background: var(--blu-chiaro);
color: var(--blu);
}
.menu-mobile__footer {
padding: var(--s-md) var(--padding-x) var(--s-2xl);
flex-shrink: 0;
}
/* ============================================================
DROPDOWN DESKTOP — mega-menu a 3 colonne
============================================================ */
/* Il contenitore del toggle è inline nel nav, non crea contesto */
.header__dropdown {
position: static;
}
/* Il toggle stesso — stile coerente con gli altri nav-link */
.header__dropdown-toggle {
display: flex;
align-items: center;
gap: 5px;
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 600;
color: var(--testo-scuro);
cursor: pointer;
transition: color var(--trans-fast);
position: relative;
padding-bottom: 2px;
}
.header__dropdown-toggle::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--blu);
border-radius: 2px;
transition: width var(--trans-med);
}
/* Stato attivo (gestito via JS) */
.header__dropdown-toggle.attivo {
color: var(--blu);
}
.header__dropdown-toggle.attivo::after {
width: 100%;
}
.header__dropdown-toggle.attivo .header__dropdown-freccia {
transform: rotate(180deg);
}
.header__dropdown-freccia {
transition: transform var(--trans-med);
flex-shrink: 0;
}
/* ── Il menu vero e proprio ── */
.header__dropdown-menu {
position: fixed;
top: calc(var(--header-h) + 10px);
left: 50%;
transform: translateX(-50%) translateY(-8px);
width: max-content;
max-width: min(900px, calc(100vw - 40px));
background: var(--bianco);
border: 1px solid var(--bordo);
border-radius: var(--radius-lg, 16px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
overflow: hidden;
/* Stato nascosto */
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s ease;
z-index: 999;
}
/* Ponte invisibile che collega il toggle al menu per evitare chiusure accidentali */
.header__dropdown-menu::before {
content: '';
position: absolute;
top: -30px;
left: 0;
right: 0;
height: 30px;
}
/* Stato aperto — aggiunto via JS */
.header__dropdown-menu.aperto {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
/* Griglia interna: 3 colonne con padding simmetrico */
.header__dropdown-interno {
padding: var(--s-lg);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-lg);
}
/* Separatore verticale tra le colonne */
.header__dropdown-gruppo + .header__dropdown-gruppo {
border-left: 1px solid var(--bordo);
padding-left: var(--s-lg);
}
/* Colonna */
.header__dropdown-gruppo {
display: flex;
flex-direction: column;
gap: 2px;
}
/* Titolo categoria */
.header__dropdown-gruppo-label {
font-family: var(--font-display);
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--blu);
padding: 0 8px 10px;
margin-bottom: 4px;
border-bottom: 1px solid var(--blu-chiaro);
}
/* Voce singola */
.header__dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 500;
color: var(--testo-scuro);
transition: background var(--trans-fast), color var(--trans-fast), transform var(--trans-fast);
white-space: nowrap;
}
.header__dropdown-item:hover {
background: var(--blu-chiaro);
color: var(--blu);
transform: translateX(3px);
}
.header__dropdown-item svg {
width: 15px;
height: 15px;
color: var(--blu);
flex-shrink: 0;
opacity: 0.75;
transition: opacity var(--trans-fast);
}
.header__dropdown-item:hover svg {
opacity: 1;
}
/* ============================================================
7. BOTTONI
============================================================ */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 600;
border-radius: var(--radius-sm);
transition: all var(--trans-fast);
cursor: pointer;
border: 2px solid transparent;
white-space: nowrap;
line-height: 1;
}
/* Primario — blu pieno */
.btn--primario {
background: var(--blu);
color: var(--bianco);
border-color: var(--blu);
}
.btn--primario:hover {
background: var(--blu-hover);
border-color: var(--blu-hover);
transform: translateY(-2px);
box-shadow: var(--ombra-blu);
}
/* Secondario — outline blu */
.btn--secondario {
background: transparent;
color: var(--blu);
border-color: var(--blu);
}
.btn--secondario:hover {
background: var(--blu-chiaro);
transform: translateY(-2px);
}
/* Bianco — per sfondi scuri */
.btn--bianco {
background: var(--bianco);
color: var(--blu);
border-color: var(--bianco);
}
.btn--bianco:hover {
background: var(--blu-chiaro);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
/* Outline bianco — per sfondi scuri */
.btn--outline-bianco {
background: transparent;
color: var(--bianco);
border-color: rgba(255,255,255,0.6);
}
.btn--outline-bianco:hover {
background: rgba(255,255,255,0.1);
border-color: var(--bianco);
}
/* Grande */
.btn--grande {
padding: 16px 36px;
font-size: 1rem;
}
/* Piccolo */
.btn--piccolo {
padding: 10px 20px;
font-size: 0.8125rem;
}
.btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* ============================================================
8. HERO HOMEPAGE
============================================================ */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
background: var(--nero);
}
.hero__sfondo {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #0d1b2e 0%, #1a3d6b 50%, #0d1b2e 100%);
}
/* Pattern geometrico decorativo */
.hero__pattern {
position: absolute;
inset: 0;
opacity: 0.04;
background-image:
linear-gradient(var(--blu) 1px, transparent 1px),
linear-gradient(90deg, var(--blu) 1px, transparent 1px);
background-size: 60px 60px;
}
/* Linea diagonale — elemento differenziante */
.hero__diagonale {
position: absolute;
top: 0;
right: 0;
width: 45%;
height: 100%;
background: linear-gradient(135deg, rgba(48,110,194,0.15) 0%, rgba(48,110,194,0.05) 100%);
clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
}
.hero__diagonale::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(to bottom, transparent, var(--blu), transparent);
transform: skewX(-15deg) translateX(20px);
}
.hero__interno {
position: relative;
z-index: 2;
padding-top: var(--header-h);
width: 100%;
}
.hero__contenuto {
max-width: 720px;
padding: var(--s-3xl) 0;
}
/* Badge sopra H1 */
.hero__badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(48,110,194,0.2);
border: 1px solid rgba(48,110,194,0.4);
border-radius: 100px;
padding: 6px 16px;
font-size: 0.8125rem;
font-weight: 600;
color: rgba(255,255,255,0.85);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: var(--s-md);
animation: fadeInDown 0.6s ease both;
}
.hero__badge-punto {
width: 6px;
height: 6px;
background: #4ade80;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.3); }
}
.hero__titolo {
font-size: clamp(2.2rem, 5vw, 3.8rem);
font-weight: 800;
color: var(--bianco);
line-height: 1.08;
letter-spacing: -0.03em;
margin-bottom: var(--s-md);
animation: fadeInUp 0.7s ease 0.1s both;
}
.hero__titolo span {
color: var(--blu);
position: relative;
}
.hero__sottotitolo {
font-size: clamp(1rem, 1.8vw, 1.2rem);
color: rgba(255,255,255,0.7);
line-height: 1.65;
margin-bottom: var(--s-lg);
max-width: 580px;
animation: fadeInUp 0.7s ease 0.2s both;
}
.hero__cta {
display: flex;
flex-wrap: wrap;
gap: var(--s-sm);
margin-bottom: var(--s-2xl);
animation: fadeInUp 0.7s ease 0.3s both;
}
/* Trust badges */
.hero__trust {
display: flex;
flex-wrap: wrap;
gap: var(--s-md);
animation: fadeInUp 0.7s ease 0.4s both;
}
.hero__trust-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: rgba(255,255,255,0.75);
font-weight: 500;
}
.hero__trust-item svg {
width: 16px;
height: 16px;
color: var(--blu);
flex-shrink: 0;
}
/* ============================================================
9. HERO COMPATTO (pagine interne)
============================================================ */
.hero-compatto {
position: relative;
padding: calc(var(--header-h) + var(--s-2xl)) 0 var(--s-2xl);
background: linear-gradient(135deg, #0d1b2e 0%, #1a3d6b 100%);
overflow: hidden;
}
.hero-compatto__pattern {
position: absolute;
inset: 0;
opacity: 0.04;
background-image:
linear-gradient(var(--blu) 1px, transparent 1px),
linear-gradient(90deg, var(--blu) 1px, transparent 1px);
background-size: 60px 60px;
}
.hero-compatto__interno {
position: relative;
z-index: 1;
}
.hero-compatto__breadcrumb {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.8125rem;
color: rgba(255,255,255,0.5);
margin-bottom: var(--s-md);
}
.hero-compatto__breadcrumb a {
color: rgba(255,255,255,0.5);
transition: color var(--trans-fast);
}
.hero-compatto__breadcrumb a:hover { color: rgba(255,255,255,0.85); }
.hero-compatto__breadcrumb svg {
width: 12px;
height: 12px;
}
.hero-compatto__titolo {
font-size: clamp(1.8rem, 4vw, 3rem);
font-weight: 800;
color: var(--bianco);
max-width: 700px;
margin-bottom: var(--s-sm);
}
.hero-compatto__sottotitolo {
font-size: clamp(0.95rem, 1.5vw, 1.1rem);
color: rgba(255,255,255,0.68);
max-width: 580px;
line-height: 1.65;
margin-bottom: var(--s-lg);
}
/* ============================================================
10. SEZIONE INTRO TESTO
============================================================ */
.sezione-intro {
padding: var(--s-2xl) 0;
}
.sezione-intro__testo {
max-width: var(--max-width-text);
margin: 0 auto;
}
.sezione-intro h2 {
margin-bottom: var(--s-md);
}
.sezione-intro p {
margin-bottom: var(--s-md);
}
.sezione-intro p:last-child { margin-bottom: 0; }
/* ============================================================
11. INTESTAZIONE SEZIONE
============================================================ */
.intestazione-sezione {
margin-bottom: var(--s-xl);
text-align: center;
}
.intestazione-sezione h2 {
margin-bottom: var(--s-sm);
}
.intestazione-sezione p {
max-width: 560px;
margin: 0 auto;
color: var(--testo-grigio);
}
/* ============================================================
12. CARD SERVIZI (homepage e indice) — layout a categorie
============================================================ */
/* Contenitore principale categorie */
.servizi-categorie {
display: flex;
flex-direction: column;
gap: var(--s-xl);
}
/* Singola categoria */
.servizi-categoria {
display: flex;
flex-direction: column;
gap: var(--s-sm);
}
.servizi-categoria__header {
display: flex;
align-items: center;
gap: var(--s-sm);
}
.servizi-categoria__label {
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--blu);
padding: 4px 12px;
background: var(--blu-chiaro);
border-radius: 100px;
}
/* Griglia cards dentro la categoria */
.servizi-categoria__cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5px;
background: var(--bordo);
border: 1.5px solid var(--bordo);
border-radius: var(--radius-lg);
overflow: hidden;
}
.card-servizio {
background: var(--bianco);
padding: var(--s-lg) var(--s-md);
transition: background var(--trans-fast);
position: relative;
}
.card-servizio::after {
content: '';
position: absolute;
bottom: 0;
left: var(--s-md);
right: var(--s-md);
height: 2px;
background: var(--blu);
transform: scaleX(0);
transition: transform var(--trans-med);
}
.card-servizio:hover { background: var(--blu-chiaro); }
.card-servizio:hover::after { transform: scaleX(1); }
.card-servizio__icona {
width: 48px;
height: 48px;
background: var(--blu-chiaro);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--s-md);
transition: background var(--trans-fast);
}
.card-servizio:hover .card-servizio__icona {
background: var(--blu);
}
.card-servizio__icona svg {
width: 24px;
height: 24px;
color: var(--blu);
transition: color var(--trans-fast);
}
.card-servizio:hover .card-servizio__icona svg {
color: var(--bianco);
}
.card-servizio h3 {
font-size: 1rem;
margin-bottom: 6px;
color: var(--testo-scuro);
}
.card-servizio p {
font-size: 0.875rem;
color: var(--testo-grigio);
line-height: 1.55;
margin-bottom: var(--s-md);
}
.card-servizio__link {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.8125rem;
font-weight: 600;
color: var(--blu);
font-family: var(--font-display);
transition: gap var(--trans-fast);
}
.card-servizio:hover .card-servizio__link { gap: 9px; }
.card-servizio__link svg {
width: 14px;
height: 14px;
}
/* ============================================================
13. BLOCCHI PERCHÉ NOI
============================================================ */
.griglia-perche {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-lg);
}
.blocco-perche {
text-align: center;
}
.blocco-perche__icona {
width: 64px;
height: 64px;
background: var(--blu-chiaro);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--s-md);
}
.blocco-perche__icona svg {
width: 28px;
height: 28px;
color: var(--blu);
}
.blocco-perche__numero {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 800;
color: var(--blu);
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: 4px;
}
.blocco-perche h3 {
font-size: 1rem;
margin-bottom: var(--s-xs);
color: var(--testo-scuro);
}
.blocco-perche p {
font-size: 0.875rem;
color: var(--testo-grigio);
line-height: 1.6;
}
/* ============================================================
14. SOCIAL PROOF (fase 0 — zero recensioni)
============================================================ */
.social-proof {
padding: var(--s-2xl) 0;
}
.social-proof__interno {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: var(--s-2xl);
align-items: center;
}
.social-proof__numeri {
display: flex;
flex-direction: column;
gap: var(--s-lg);
}
.social-proof__numero {
display: flex;
align-items: center;
gap: var(--s-md);
padding-bottom: var(--s-md);
border-bottom: 1px solid var(--bordo);
}
.social-proof__numero:last-child { border-bottom: none; }
.social-proof__cifra {
font-family: var(--font-display);
font-size: 3rem;
font-weight: 800;
color: var(--blu);
letter-spacing: -0.04em;
line-height: 1;
flex-shrink: 0;
}
.social-proof__desc h4 {
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 2px;
color: var(--testo-scuro);
}
.social-proof__desc p {
font-size: 0.8125rem;
color: var(--testo-grigio);
}
.social-proof__testo h2 {
margin-bottom: var(--s-md);
}
.social-proof__testo p {
margin-bottom: var(--s-md);
color: var(--testo-corpo);
}
.social-proof__testo p:last-of-type { margin-bottom: var(--s-lg); }
/* ============================================================
15. MATERIALI CERTIFICATI
============================================================ */
.materiali {
padding: var(--s-xl) 0;
border-top: 1px solid var(--bordo);
border-bottom: 1px solid var(--bordo);
}
.materiali__interno {
display: flex;
align-items: center;
gap: var(--s-2xl);
flex-wrap: wrap;
}
.materiali__testo {
flex: 1;
min-width: 280px;
}
.materiali__testo h2 {
font-size: var(--t-h3);
margin-bottom: var(--s-sm);
}
.materiali__testo p {
font-size: 0.9rem;
color: var(--testo-grigio);
max-width: 500px;
}
.materiali__loghi {
display: flex;
gap: var(--s-md);
flex-shrink: 0;
}
.materiali__logo {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: var(--s-md) var(--s-lg);
border: 1.5px solid var(--bordo);
border-radius: var(--radius-md);
transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
}
.materiali__logo:hover {
border-color: var(--blu);
box-shadow: var(--ombra-sm);
}
.materiali__logo-nome {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 800;
color: var(--testo-scuro);
letter-spacing: -0.02em;
}
.materiali__logo-sub {
font-size: 0.7rem;
color: var(--testo-grigio);
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* ============================================================
16. AREA DI INTERVENTO (homepage)
============================================================ */
.zone-home {
text-align: center;
}
.zone-home__griglia {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-md);
margin: var(--s-xl) auto;
max-width: 700px;
}
.zone-home__card {
border: 1.5px solid var(--bordo);
border-radius: var(--radius-md);
padding: var(--s-lg);
text-align: left;
transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
}
.zone-home__card:hover {
border-color: var(--blu);
box-shadow: var(--ombra-sm);
}
.zone-home__card-provincia {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 700;
color: var(--testo-scuro);
margin-bottom: 4px;
}
.zone-home__card-sub {
font-size: 0.875rem;
color: var(--testo-grigio);
}
/* ============================================================
17. CTA FINALE (sezione blu)
============================================================ */
.cta-finale {
background: var(--blu);
position: relative;
overflow: hidden;
}
.cta-finale__pattern {
position: absolute;
inset: 0;
opacity: 0.06;
background-image:
linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);
background-size: 50px 50px;
}
.cta-finale__interno {
position: relative;
z-index: 1;
text-align: center;
max-width: 640px;
margin: 0 auto;
}
.cta-finale h2 {
color: var(--bianco);
margin-bottom: var(--s-sm);
}
.cta-finale p {
color: rgba(255,255,255,0.75);
font-size: 1.05rem;
margin-bottom: var(--s-lg);
}
.cta-finale__pulsanti {
display: flex;
flex-wrap: wrap;
gap: var(--s-sm);
justify-content: center;
}
/* ============================================================
18. GARANZIE CARD
============================================================ */
.griglia-garanzie {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-md);
}
.card-garanzia {
text-align: center;
padding: var(--s-md);
}
.card-garanzia__icona {
width: 52px;
height: 52px;
background: var(--blu-chiaro);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--s-sm);
}
.card-garanzia__icona svg {
width: 24px;
height: 24px;
color: var(--blu);
}
.card-garanzia h4 {
font-size: 0.9375rem;
font-weight: 600;
color: var(--testo-scuro);
margin-bottom: 4px;
}
.card-garanzia p {
font-size: 0.8125rem;
color: var(--testo-grigio);
}
/* ============================================================
19. TIPOLOGIE SERVIZIO
============================================================ */
.griglia-tipologie {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-md);
}
.card-tipologia {
background: var(--bianco);
border: 1.5px solid var(--bordo);
border-radius: var(--radius-md);
padding: var(--s-lg);
transition: border-color var(--trans-fast), box-shadow var(--trans-fast), transform var(--trans-fast);
}
.card-tipologia:hover {
border-color: var(--blu);
box-shadow: var(--ombra-md);
transform: translateY(-3px);
}
.card-tipologia__num {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 800;
color: var(--bordo);
letter-spacing: -0.04em;
line-height: 1;
margin-bottom: var(--s-xs);
transition: color var(--trans-fast);
}
.card-tipologia:hover .card-tipologia__num { color: var(--blu-chiaro); }
.card-tipologia h3 {
font-size: 1.05rem;
margin-bottom: var(--s-xs);
}
.card-tipologia p {
font-size: 0.875rem;
color: var(--testo-grigio);
line-height: 1.6;
}
/* ============================================================
20. ZONE SERVITE (pagina dedicata)
============================================================ */
.sezione-zone__intro {
max-width: var(--max-width-text);
margin: 0 auto var(--s-2xl);
text-align: center;
}
.sezione-zone__griglia {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-lg);
}
.zona-card {
background: var(--bianco);
border: 1.5px solid var(--bordo);
border-radius: var(--radius-lg);
padding: var(--s-xl);
transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
}
.zona-card:hover {
border-color: var(--blu);
box-shadow: var(--ombra-md);
}
.zona-card__header {
display: flex;
align-items: center;
gap: var(--s-sm);
margin-bottom: var(--s-lg);
padding-bottom: var(--s-md);
border-bottom: 1.5px solid var(--bordo);
}
.zona-card__icona {
width: 44px;
height: 44px;
background: var(--blu-chiaro);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
}
.zona-card__icona svg {
width: 20px;
height: 20px;
color: var(--blu);
}
.zona-card h2 {
font-size: 1.3rem;
color: var(--testo-scuro);
}
.zona-card__comuni {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.zona-card__comune {
background: var(--sfondo-grigio);
padding: 5px 12px;
border-radius: 100px;
font-size: 0.8125rem;
color: var(--testo-corpo);
font-weight: 500;
transition: background var(--trans-fast), color var(--trans-fast);
}
.zona-card__comune:hover {
background: var(--blu-chiaro);
color: var(--blu);
}
/* ============================================================
21. FORM CONTATTI
============================================================ */
.sezione-contatti__griglia {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: var(--s-2xl);
align-items: start;
}
.contatti-info__item {
display: flex;
align-items: flex-start;
gap: var(--s-md);
margin-bottom: var(--s-lg);
}
.contatti-info__item:last-child { margin-bottom: 0; }
.contatti-info__icona {
width: 44px;
height: 44px;
background: var(--blu-chiaro);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contatti-info__icona svg {
width: 20px;
height: 20px;
color: var(--blu);
}
.contatti-info__testo-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--testo-grigio);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 3px;
}
.contatti-info__testo-valore {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 600;
color: var(--testo-scuro);
}
.contatti-info__testo-valore a {
color: var(--testo-scuro);
transition: color var(--trans-fast);
}
.contatti-info__testo-valore a:hover { color: var(--blu); }
.contatti-info__divider {
height: 1px;
background: var(--bordo);
margin: var(--s-lg) 0;
}
.form-card {
background: var(--bianco);
border: 1.5px solid var(--bordo);
border-radius: var(--radius-lg);
padding: var(--s-xl);
box-shadow: var(--ombra-md);
}
.form-card__titolo {
font-size: 1.3rem;
margin-bottom: var(--s-xs);
}
.form-card__sub {
font-size: 0.875rem;
color: var(--testo-grigio);
margin-bottom: var(--s-lg);
}
.form-griglia {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-md);
}
.form-campo {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-campo--intero {
grid-column: 1 / -1;
}
.form-campo label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--testo-scuro);
}
.form-campo label span {
color: var(--blu);
margin-left: 2px;
}
.form-campo input,
.form-campo select,
.form-campo textarea {
padding: 12px 14px;
border: 1.5px solid var(--bordo);
border-radius: var(--radius-sm);
font-size: 0.9375rem;
color: var(--testo-scuro);
background: var(--bianco);
transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
outline: none;
width: 100%;
}
.form-campo input:focus,
.form-campo select:focus,
.form-campo textarea:focus {
border-color: var(--blu);
box-shadow: 0 0 0 3px rgba(48,110,194,0.12);
}
.form-campo input.errore,
.form-campo select.errore,
.form-campo textarea.errore {
border-color: var(--errore);
box-shadow: 0 0 0 3px rgba(198,40,40,0.08);
}
.form-campo__errore {
font-size: 0.75rem;
color: var(--errore);
display: none;
}
.form-campo__errore.visibile { display: block; }
.form-campo textarea {
resize: vertical;
min-height: 110px;
}
.form-campo select {
appearance: none;
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='%23717373' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
cursor: pointer;
}
/* Honeypot — nascosto */
.form-honeypot {
position: absolute;
left: -9999px;
opacity: 0;
pointer-events: none;
}
/* Privacy checkbox */
.form-privacy {
display: flex;
align-items: flex-start;
gap: 10px;
grid-column: 1 / -1;
}
.form-privacy input[type="checkbox"] {
width: 18px;
height: 18px;
min-width: 18px;
margin-top: 2px;
accent-color: var(--blu);
cursor: pointer;
}
.form-privacy label {
font-size: 0.8125rem;
color: var(--testo-grigio);
line-height: 1.5;
cursor: pointer;
}
.form-privacy a {
color: var(--blu);
text-decoration: underline;
}
/* Submit */
.form-submit {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: var(--s-sm);
}
/* Messaggi feedback */
.form-messaggio {
display: none;
padding: var(--s-md);
border-radius: var(--radius-sm);
font-size: 0.9rem;
font-weight: 500;
}
.form-messaggio.successo {
display: block;
background: #e8f5e9;
color: var(--successo);
border: 1px solid #c8e6c9;
}
.form-messaggio.errore-msg {
display: block;
background: #fce4e4;
color: var(--errore);
border: 1px solid #f5c6c6;
}
/* ============================================================
22. FOOTER
============================================================ */
.footer {
background: #0a0f1a;
color: rgba(255,255,255,0.65);
}
.footer__superiore {
padding: var(--s-3xl) 0 var(--s-2xl);
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: var(--s-2xl);
}
.footer__logo {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: var(--s-md);
}
.footer__logo-icona {
width: 36px;
height: 36px;
background: var(--blu);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
}
.footer__logo-icona svg {
width: 20px;
height: 20px;
}
.footer__logo-nome {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 800;
color: var(--bianco);
letter-spacing: -0.02em;
}
.footer__desc {
font-size: 0.875rem;
line-height: 1.65;
margin-bottom: var(--s-md);
max-width: 280px;
}
.footer__piva {
font-size: 0.8rem;
opacity: 0.5;
}
.footer__col-titolo {
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 700;
color: var(--bianco);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: var(--s-md);
}
.footer__link {
display: block;
font-size: 0.875rem;
color: rgba(255,255,255,0.55);
padding: 5px 0;
transition: color var(--trans-fast);
}
.footer__link:hover { color: var(--bianco); }
.footer__inferiore {
border-top: 1px solid rgba(255,255,255,0.08);
padding: var(--s-md) 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-md);
flex-wrap: wrap;
}
.footer__copyright {
font-size: 0.8125rem;
opacity: 0.45;
}
.footer__legal {
display: flex;
gap: var(--s-md);
}
.footer__legal a {
font-size: 0.8125rem;
color: rgba(255,255,255,0.45);
transition: color var(--trans-fast);
}
.footer__legal a:hover { color: rgba(255,255,255,0.8); }
/* ============================================================
23. STICKY BAR MOBILE (telefono + preventivo)
============================================================ */
.sticky-mobile {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 998;
background: var(--bianco);
border-top: 1px solid var(--bordo);
box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
padding: 10px var(--padding-x);
gap: var(--s-sm);
transition: transform 0.25s ease, opacity 0.25s ease;
}
.sticky-mobile__tel {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 13px;
border: 1.5px solid var(--blu);
border-radius: var(--radius-sm);
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 600;
color: var(--blu);
}
.sticky-mobile__tel svg {
width: 16px;
height: 16px;
}
.sticky-mobile__cta {
flex: 1.4;
}
/* ============================================================
24. ANIMAZIONI ON-SCROLL
============================================================ */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visibile {
opacity: 1;
transform: translateY(0);
}
.reveal--ritardo-1 { transition-delay: 0.1s; }
.reveal--ritardo-2 { transition-delay: 0.2s; }
.reveal--ritardo-3 { transition-delay: 0.3s; }
.reveal--ritardo-4 { transition-delay: 0.4s; }
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
25. PAGINA 404
============================================================ */
.pagina-404 {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.pagina-404__contenuto {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: calc(var(--header-h) + var(--s-2xl)) var(--padding-x) var(--s-2xl);
}
.pagina-404__interno {
max-width: 600px;
width: 100%;
margin: 0 auto;
text-align: center;
padding: calc(var(--header-h) + var(--s-2xl)) var(--padding-x) var(--s-2xl);
}
.pagina-404__numero {
font-family: var(--font-display);
font-size: clamp(5rem, 18vw, 10rem);
font-weight: 800;
color: var(--blu-chiaro);
letter-spacing: -0.05em;
line-height: 1;
margin-bottom: var(--s-sm);
}
.pagina-404__numero span {
color: var(--blu);
}
.pagina-404__titolo {
font-size: clamp(1.4rem, 3vw, 2rem);
margin-bottom: var(--s-sm);
}
.pagina-404__testo {
color: var(--testo-grigio);
max-width: 400px;
margin: 0 auto var(--s-lg);
}
.pagina-404__link {
display: flex;
flex-wrap: wrap;
gap: var(--s-sm);
justify-content: center;
margin-bottom: var(--s-lg);
}
.pagina-404__link a {
font-size: 0.9rem;
color: var(--blu);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Link rapidi 404 — layout pill/tag */
.pagina-404__links {
display: flex;
flex-wrap: wrap;
gap: var(--s-xs);
justify-content: center;
margin-bottom: var(--s-xl);
}
.pagina-404__link-rapido {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border: 1px solid var(--bordo);
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 500;
color: var(--testo-scuro);
text-decoration: none;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.pagina-404__link-rapido:hover {
color: var(--blu);
border-color: var(--blu);
background: var(--blu-chiaro);
}
.pagina-404__link-rapido svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* ============================================================
25b. ACCESSIBILITÀ — riduzione animazioni
============================================================ */
@media (prefers-reduced-motion: reduce) {
.menu-mobile {
transition: none;
}
.menu-mobile__nav-sub {
transition: none;
}
.menu-mobile__nav-sub-inner {
transition: none;
}
.menu-mobile__nav-servizi-titolo svg {
transition: none;
}
.menu-mobile__nav-sub.aperto .menu-mobile__nav-gruppo {
animation: none;
opacity: 1;
transform: none;
}
.header__hamburger span {
transition: none;
}
.reveal {
transition: none;
opacity: 1;
transform: none;
}
}
/* ============================================================
26. STAMPA
============================================================ */
@media print {
.header,
.sticky-mobile,
.hero__cta,
.cta-finale,
.footer,
.btn,
.menu-mobile { display: none !important; }
body {
font-size: 12pt;
color: #000;
}
h1, h2, h3 { color: #000; page-break-after: avoid; }
p { page-break-inside: avoid; }
a { color: #000; text-decoration: none; }
a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; }
}
/* ============================================================
27. RESPONSIVE — TABLET (max 1024px)
============================================================ */
@media (max-width: 1024px) {
.servizi-categoria__cards { grid-template-columns: repeat(2, 1fr); }
.griglia-perche { grid-template-columns: repeat(2, 1fr); }
.griglia-garanzie { grid-template-columns: repeat(2, 1fr); }
.footer__superiore { grid-template-columns: 1fr 1fr; gap: var(--s-xl); }
.social-proof__interno { grid-template-columns: 1fr; }
.header__telefono { display: none; }
}
/* Fix "Chi Siamo" wrapping between 769px and 856px */
@media (min-width: 769px) and (max-width: 880px) {
.header__nav {
gap: var(--s-md);
}
.header__nav-link,
.header__dropdown-toggle {
font-size: 0.82rem;
white-space: nowrap;
}
}
/* ============================================================
28. RESPONSIVE — MOBILE (max 768px)
============================================================ */
@media (max-width: 768px) {
:root {
--s-xl: 2.5rem;
--s-2xl: 3.5rem;
--s-3xl: 5rem;
}
/* ── Previeni overflow orizzontale globale ── */
html, body {
overflow-x: hidden;
max-width: 100vw;
}
/* ── Prevenzione zoom su input (iOS Safari) ── */
input, select, textarea {
font-size: 1rem !important;
}
/* ── Header mobile ── */
.header__nav,
.header__cta { display: none; }
.header__hamburger { display: flex; }
.menu-mobile { display: flex; }
/* ── Sticky bar ── */
.sticky-mobile {
display: flex;
padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
/* ── Padding bottom per sticky bar ── */
main { padding-bottom: 80px; }
/* ── HERO HOMEPAGE ── */
.hero__diagonale { display: none; }
.hero__contenuto { padding: var(--s-2xl) 0; }
.hero__titolo { font-size: clamp(1.9rem, 8vw, 2.8rem); }
.hero__cta { flex-direction: column; }
.hero__cta .btn { width: 100%; justify-content: center; }
.hero__trust { gap: var(--s-sm); }
.hero__trust-item { font-size: 0.8rem; }
/* ── HERO COMPATTO (pagine interne) ── */
.hero-compatto {
padding: calc(var(--header-h) + var(--s-lg)) 0 var(--s-lg);
}
.hero-compatto__titolo { font-size: clamp(1.5rem, 7vw, 2.2rem); }
.hero-compatto__sottotitolo { font-size: 0.9375rem; }
/* CTA in hero compatto: colonna su mobile */
.hero-compatto [style*="display:flex"][style*="flex-wrap:wrap"],
.hero-compatto div[style*="gap"] {
flex-direction: column;
}
.hero-compatto .btn {
width: 100%;
justify-content: center;
}
/* ── GRIGLIE GENERICHE ── */
.griglia-2,
.griglia-3,
.griglia-4 { grid-template-columns: 1fr; }
/* ── SERVIZI ── */
.servizi-categoria__cards { grid-template-columns: 1fr; }
.card-servizio { padding: var(--s-md); }
/* ── PERCHÉ NOI ── */
.griglia-perche { grid-template-columns: 1fr 1fr; gap: var(--s-sm); }
.blocco-perche { padding: var(--s-md); }
.blocco-perche__numero { font-size: 2rem; }
/* ── GARANZIE ── */
.griglia-garanzie { grid-template-columns: 1fr 1fr; gap: var(--s-sm); }
.card-garanzia { padding: var(--s-md); }
/* ── TIPOLOGIE ── */
.griglia-tipologie { grid-template-columns: 1fr; }
/* ── SOCIAL PROOF ── */
.social-proof__interno { grid-template-columns: 1fr; }
.social-proof__numeri {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-sm);
}
.social-proof__numero { flex-direction: column; gap: var(--s-xs); text-align: center; }
.social-proof__cifra { font-size: clamp(1.6rem, 6vw, 2.2rem); }
/* ── MATERIALI ── */
.materiali__interno { flex-direction: column; text-align: center; }
.materiali__loghi { flex-wrap: wrap; gap: var(--s-sm); justify-content: center; }
.materiali__logo { min-width: 120px; }
/* ── ZONE HOME ── */
.zone-home__griglia { grid-template-columns: 1fr; }
.zone-home__card { padding: var(--s-md); }
.zone-home__card-provincia { font-size: clamp(1.2rem, 5vw, 1.6rem); }
/* ── SEZIONE ZONE (pagina area-di-intervento) ── */
.sezione-zone__griglia { grid-template-columns: 1fr; }
.zona-card { padding: var(--s-lg); }
/* ── PAGINA AREA DI INTERVENTO — classi inline ── */
/* ── CTA FINALE ── */
.cta-finale__interno { text-align: center; }
.cta-finale__pulsanti {
flex-direction: column;
align-items: stretch;
}
.cta-finale__pulsanti .btn { width: 100%; justify-content: center; }
/* ── CONTATTI ── */
.sezione-contatti__griglia { grid-template-columns: 1fr; }
.contatti-info__divider { display: none; }
.form-card { padding: var(--s-lg) var(--s-md); }
/* ── FORM ── */
.form-griglia { grid-template-columns: 1fr; }
.form-campo--intero { grid-column: auto; }
.form-submit { grid-column: auto; }
.form-privacy { grid-column: auto; }
.form-campo input,
.form-campo select,
.form-campo textarea { min-height: 52px; }
/* ── PAGINE SERVIZIO — sidebar ── */
/* Il layout servizio passa a colonna singola (già gestito via @media 1024px inline,
ma qui rafforzato e aggiunto ordine corretto) */
.servizio-layout {
grid-template-columns: 1fr !important;
}
.sidebar-cta {
order: -1; /* Sidebar CTA viene prima del contenuto */
position: static !important;
}
/* CTA sidebar: bottoni full-width */
.sidebar-cta__card .btn { width: 100%; justify-content: center; }
/* Servizi-nav laterale: diventa lista orizzontale scrollabile su mobile */
.servizi-nav {
position: static !important;
}
/* ── PAGINA SERVIZIO — classi REI ── */
.rei-classi { grid-template-columns: 1fr 1fr !important; gap: var(--s-sm) !important; }
.rei-card { padding: var(--s-md); }
.rei-card__numero { font-size: 1.6rem; }
/* ── normativa-box ── */
.normativa-box { flex-direction: column !important; gap: var(--s-sm) !important; }
/* ── FOOTER ── */
.footer__superiore { grid-template-columns: 1fr; gap: var(--s-lg); }
.footer__inferiore {
flex-direction: column;
text-align: center;
gap: var(--s-sm);
}
.footer__legal { justify-content: center; }
/* ── COOKIE TABELLA: scrollabile orizzontalmente ── */
.cookie-tabella-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.cookie-tabella { min-width: 480px; }
/* ── BREADCRUMB: wrappable ── */
.hero-compatto__breadcrumb { flex-wrap: wrap; }
/* ── INTESTAZIONE SEZIONE ── */
.intestazione-sezione { margin-bottom: var(--s-lg); }
/* ── BLOCCHI CHI SIAMO (sezione intro) ── */
.sezione-intro__testo { text-align: left !important; }
}
/* ============================================================
28b. RESPONSIVE — MOBILE PICCOLO (max 480px)
============================================================ */
@media (max-width: 480px) {
/* Riduci padding contenitore su schermi strettissimi */
:root { --padding-x: 1rem; }
/* Perché noi: 1 colonna su schermi molto piccoli */
.griglia-perche { grid-template-columns: 1fr; }
/* Garanzie: 1 colonna */
.griglia-garanzie { grid-template-columns: 1fr; }
/* Social proof numeri: 1 colonna */
.social-proof__numeri { grid-template-columns: 1fr; }
/* Hero trust items: column */
.hero__trust { flex-direction: column; gap: var(--s-xs); }
/* Btn hero: font più piccolo */
.btn--grande { padding: 14px 20px; font-size: 0.9rem; }
/* Titoli hero */
.hero__titolo { font-size: clamp(1.7rem, 9vw, 2.2rem); }
/* REI classi: 1 colonna su schermi molto piccoli */
.rei-classi { grid-template-columns: 1fr !important; }
/* Provincia card header: testo più piccolo */
.provincia-card__titolo { font-size: 1.1rem; }
.provincia-card__conteggio { font-size: 1.4rem; }
.provincia-card { padding: var(--s-md); }
.provincia-card__header [style*="text-align:right"] { display: none; }
/* Non-trovi box */
.non-trovi { padding: var(--s-md); }
/* Footer */
.footer__superiore { gap: var(--s-md); }
}
/* ============================================================
29. ACCESSIBILITÀ — Skip to Content
[Correzione FASE 2, §5]
============================================================ */
.skip-link {
position: absolute;
top: -100%;
left: var(--padding-x);
z-index: 10000;
padding: 12px 24px;
background: var(--blu);
color: var(--bianco);
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 600;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
text-decoration: none;
transition: top var(--trans-fast);
}
.skip-link:focus {
top: 0;
}
/* ============================================================
30. ACCESSIBILITÀ — :focus-visible globale
[Correzione FASE 2, §6]
============================================================ */
:focus-visible {
outline: 3px solid var(--blu);
outline-offset: 2px;
border-radius: 2px;
}
/* Rimuovi outline per interazione mouse/touch */
:focus:not(:focus-visible) {
outline: none;
}
/* Focus specifici per elementi interattivi */
.btn:focus-visible {
outline-offset: 3px;
box-shadow: 0 0 0 3px rgba(48,110,194,0.3);
}
.form-campo input:focus-visible,
.form-campo select:focus-visible,
.form-campo textarea:focus-visible {
border-color: var(--blu);
box-shadow: 0 0 0 3px rgba(48,110,194,0.15);
outline: none;
}
a:focus-visible {
outline-offset: 3px;
}
/* ============================================================
31. UTILITY CLASSES — Spaziatura
[Correzione FASE 2, §3 — sostituzione 195+ inline styles]
============================================================ */
/* Margin bottom */
.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--s-xs); }
.mb-sm { margin-bottom: var(--s-sm); }
.mb-md { margin-bottom: var(--s-md); }
.mb-lg { margin-bottom: var(--s-lg); }
.mb-xl { margin-bottom: var(--s-xl); }
/* Margin top */
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--s-xs); }
.mt-sm { margin-top: var(--s-sm); }
.mt-md { margin-top: var(--s-md); }
.mt-lg { margin-top: var(--s-lg); }
.mt-xl { margin-top: var(--s-xl); }
/* Padding */
.pb-0 { padding-bottom: 0; }
.pt-lg { padding-top: var(--s-lg); }
.pt-xl { padding-top: var(--s-xl); }
/* ============================================================
32. UTILITY CLASSES — Display & Flex
[Correzione FASE 2, §3]
============================================================ */
.flex-inline {
display: inline-flex;
align-items: center;
}
.flex-wrap {
display: flex;
flex-wrap: wrap;
}
.flex-col {
display: flex;
flex-direction: column;
}
.w-full { width: 100%; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }
.gap-xs { gap: var(--s-xs); }
.gap-sm { gap: var(--s-sm); }
.gap-md { gap: var(--s-md); }
/* Testo (testo-centrato già esiste in sezione 5) */
.testo-sinistra { text-align: left; }
/* Cursore */
.cursore-default { cursor: default; }
/* Colori testo per sfondi scuri */
.testo-bianco-75 { color: rgba(255,255,255,0.75); }
.testo-bianco-60 { color: rgba(255,255,255,0.6); }
.testo-bianco-50 { color: rgba(255,255,255,0.5); }
.testo-bianco-80 { color: rgba(255,255,255,0.8); }
/* Link inline stile brand */
.link-brand {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-weight: 600;
color: var(--blu);
font-size: 0.9375rem;
}
.link-brand--piccolo {
font-size: 0.875rem;
}
/* Margine auto centrato */
.mx-auto { margin-left: auto; margin-right: auto; }
/* ============================================================
33. PAGINE SERVIZIO — Layout, Sidebar, Articolo
[Migrazione CSS embedded da 8 pagine servizio — FASE 2, §4]
============================================================ */
/* Navigazione servizi laterale */
.servizi-nav {
background: var(--sfondo-grigio);
border: 1.5px solid var(--bordo);
border-radius: var(--radius-md);
overflow: hidden;
position: sticky;
top: calc(var(--header-h) + 1.5rem);
}
.servizi-nav__titolo {
padding: var(--s-md);
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 700;
color: var(--testo-grigio);
text-transform: uppercase;
letter-spacing: 0.08em;
border-bottom: 1px solid var(--bordo);
background: var(--bianco);
}
.servizi-nav__link {
display: flex;
align-items: center;
gap: 10px;
padding: 11px var(--s-md);
font-size: 0.875rem;
font-weight: 500;
color: var(--testo-corpo);
border-bottom: 1px solid var(--bordo);
transition: background var(--trans-fast), color var(--trans-fast);
}
.servizi-nav__link:last-child { border-bottom: none; }
.servizi-nav__link:hover {
background: var(--blu-chiaro);
color: var(--blu);
}
.servizi-nav__link.attivo {
background: var(--blu-chiaro);
color: var(--blu);
font-weight: 600;
}
.servizi-nav__link svg {
width: 15px;
height: 15px;
color: var(--blu);
flex-shrink: 0;
}
/* Layout pagina servizio — griglia principale */
.servizio-layout {
display: grid;
grid-template-columns: 1fr 280px;
gap: var(--s-2xl);
align-items: start;
}
.servizio-contenuto { min-width: 0; }
/* Sidebar CTA */
.sidebar-cta {
position: sticky;
top: calc(var(--header-h) + 1.5rem);
display: flex;
flex-direction: column;
gap: var(--s-md);
}
.sidebar-cta__card {
background: var(--blu);
border-radius: var(--radius-md);
padding: var(--s-lg);
color: var(--bianco);
}
.sidebar-cta__card h3 {
color: var(--bianco);
font-size: 1.05rem;
margin-bottom: var(--s-xs);
}
.sidebar-cta__card p {
color: rgba(255,255,255,0.75);
font-size: 0.8125rem;
margin-bottom: var(--s-md);
line-height: 1.55;
}
.sidebar-garanzie {
background: var(--bianco);
border: 1.5px solid var(--bordo);
border-radius: var(--radius-md);
padding: var(--s-md);
}
.sidebar-garanzie__titolo {
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 700;
color: var(--testo-grigio);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--s-sm);
}
.sidebar-garanzia-item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 0;
font-size: 0.8125rem;
font-weight: 500;
color: var(--testo-scuro);
border-bottom: 1px solid var(--bordo);
}
.sidebar-garanzia-item:last-child { border-bottom: none; }
.sidebar-garanzia-item svg {
width: 14px;
height: 14px;
color: var(--blu);
flex-shrink: 0;
}
/* Contenuto articolo servizio */
.servizio-articolo h2 {
margin-top: var(--s-2xl);
margin-bottom: var(--s-md);
padding-top: var(--s-lg);
border-top: 1px solid var(--bordo);
}
.servizio-articolo h2:first-of-type {
margin-top: var(--s-lg);
border-top: none;
padding-top: 0;
}
.servizio-articolo p {
margin-bottom: var(--s-md);
line-height: 1.75;
}
.servizio-articolo p:last-of-type { margin-bottom: 0; }
/* Placeholder immagine servizio */
.placeholder-servizio {
aspect-ratio: 16/9;
background: linear-gradient(135deg, var(--sfondo-grigio) 0%, var(--blu-chiaro) 100%);
border-radius: var(--radius-lg);
border: 2px dashed var(--bordo);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--s-sm);
margin-bottom: var(--s-lg);
}
.placeholder-servizio svg {
width: 40px;
height: 40px;
color: var(--blu);
opacity: 0.4;
}
.placeholder-servizio p {
font-size: 0.8125rem;
color: var(--testo-grigio);
margin: 0;
text-align: center;
}
/* Responsive sidebar — tablet */
@media (max-width: 1024px) {
.servizio-layout {
grid-template-columns: 1fr;
}
.sidebar-cta,
.servizi-nav {
position: static;
}
}
/* ============================================================
34. CHI SIAMO — Valori, Timeline, Numeri, Split, Materiali
[Migrazione CSS embedded da chi-siamo.html — FASE 2, §4]
============================================================ */
/* Valori aziendali */
.valori {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-md);
}
.valore-card {
background: var(--bianco);
border: 1.5px solid var(--bordo);
border-radius: var(--radius-md);
padding: var(--s-lg);
position: relative;
overflow: hidden;
transition: border-color var(--trans-fast), box-shadow var(--trans-fast), transform var(--trans-fast);
}
.valore-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--blu);
border-radius: 0 2px 2px 0;
}
.valore-card:hover {
border-color: var(--blu);
box-shadow: var(--ombra-md);
transform: translateY(-2px);
}
.valore-card__icona {
width: 44px;
height: 44px;
background: var(--blu-chiaro);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--s-md);
}
.valore-card__icona svg {
width: 22px;
height: 22px;
color: var(--blu);
}
.valore-card h3 {
font-size: 1.05rem;
margin-bottom: 6px;
}
.valore-card p {
font-size: 0.875rem;
color: var(--testo-grigio);
line-height: 1.65;
}
/* Come lavoriamo — timeline */
.timeline {
position: relative;
padding-left: 2.5rem;
}
.timeline::before {
content: '';
position: absolute;
left: 11px;
top: 8px;
bottom: 8px;
width: 2px;
background: linear-gradient(to bottom, var(--blu), var(--blu-chiaro));
border-radius: 2px;
}
.timeline__step {
position: relative;
margin-bottom: var(--s-lg);
}
.timeline__step:last-child { margin-bottom: 0; }
.timeline__punto {
position: absolute;
left: -2.5rem;
top: 4px;
width: 24px;
height: 24px;
background: var(--blu);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.timeline__punto svg {
width: 12px;
height: 12px;
color: var(--bianco);
}
.timeline__step h3 {
font-size: 1rem;
margin-bottom: 4px;
}
.timeline__step p {
font-size: 0.875rem;
color: var(--testo-grigio);
line-height: 1.65;
}
/* Sezione numeri */
.numeri-strip {
background: var(--blu);
padding: var(--s-xl) 0;
position: relative;
overflow: hidden;
}
.numeri-strip__pattern {
position: absolute;
inset: 0;
opacity: 0.06;
background-image:
linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);
background-size: 40px 40px;
}
.numeri-strip__griglia {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-lg);
text-align: center;
}
.numero-stat__cifra {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
color: var(--bianco);
letter-spacing: -0.04em;
line-height: 1;
margin-bottom: 6px;
}
.numero-stat__label {
font-size: 0.875rem;
color: rgba(255,255,255,0.7);
font-weight: 500;
}
/* Testo affiancato immagine placeholder */
.sezione-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-2xl);
align-items: center;
}
.sezione-split--invertita {
direction: rtl;
}
.sezione-split--invertita > * {
direction: ltr;
}
.placeholder-immagine {
aspect-ratio: 4/3;
background: linear-gradient(135deg, var(--sfondo-grigio) 0%, var(--blu-chiaro) 100%);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--s-sm);
border: 2px dashed var(--bordo);
}
.placeholder-immagine svg {
width: 48px;
height: 48px;
color: var(--blu);
opacity: 0.4;
}
.placeholder-immagine p {
font-size: 0.8125rem;
color: var(--testo-grigio);
text-align: center;
max-width: 200px;
}
/* ============================================================
Immagini reali — classi per sostituire i placeholder
============================================================ */
/* Foto grande in cima alle pagine servizio (16:9) */
.img-servizio {
width: 100%;
height: auto;
border-radius: var(--radius-lg);
margin-bottom: var(--s-lg);
display: block;
}
/* Foto nella pagina Chi Siamo (4:3, dentro sezione-split) */
.img-chi-siamo {
width: 100%;
height: auto;
border-radius: var(--radius-lg);
display: block;
}
/* Foto nelle card nicchie gallery */
.img-card {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Quando un ![]()
è dentro nicchia-card__immagine, riempi il contenitore */
.nicchia-card__immagine img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Materiali dettaglio */
.materiali-dettaglio {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-md);
margin-top: var(--s-xl);
}
.materiale-card {
border: 1.5px solid var(--bordo);
border-radius: var(--radius-md);
padding: var(--s-lg);
transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
}
.materiale-card:hover {
border-color: var(--blu);
box-shadow: var(--ombra-sm);
}
.materiale-card__nome {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 800;
color: var(--testo-scuro);
letter-spacing: -0.02em;
margin-bottom: 2px;
}
.materiale-card__sub {
font-size: 0.75rem;
color: var(--testo-grigio);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
margin-bottom: var(--s-sm);
}
.materiale-card p {
font-size: 0.875rem;
color: var(--testo-grigio);
line-height: 1.6;
}
/* ============================================================
35. AREA DI INTERVENTO — Province, Comuni, Servizi zona
[Migrazione CSS embedded da area-di-intervento.html — FASE 2, §4]
============================================================ */
/* Griglia comuni */
.comuni-griglia {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: var(--s-lg);
}
.comune-tag {
background: var(--sfondo-grigio);
border: 1px solid var(--bordo);
border-radius: 100px;
padding: 6px 14px;
font-size: 0.8125rem;
font-weight: 500;
color: var(--testo-corpo);
transition: background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast);
cursor: default;
}
.comune-tag:hover {
background: var(--blu-chiaro);
color: var(--blu);
border-color: var(--blu);
}
/* Provincia card */
.provincia-card {
background: var(--bianco);
border: 1.5px solid var(--bordo);
border-radius: var(--radius-lg);
padding: var(--s-xl);
transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
}
.provincia-card:hover {
border-color: var(--blu);
box-shadow: var(--ombra-md);
}
.provincia-card__header {
display: flex;
align-items: center;
gap: var(--s-md);
margin-bottom: var(--s-md);
padding-bottom: var(--s-md);
border-bottom: 1.5px solid var(--bordo);
}
.provincia-card__icona {
width: 48px;
height: 48px;
background: var(--blu-chiaro);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.provincia-card__icona svg {
width: 22px;
height: 22px;
color: var(--blu);
}
.provincia-card__meta {
flex: 1;
}
.provincia-card__titolo {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 800;
color: var(--testo-scuro);
letter-spacing: -0.02em;
line-height: 1.1;
}
.provincia-card__sub {
font-size: 0.8125rem;
color: var(--testo-grigio);
margin-top: 2px;
}
.provincia-card__conteggio {
font-family: var(--font-display);
font-size: 1.8rem;
font-weight: 800;
color: var(--blu);
letter-spacing: -0.03em;
line-height: 1;
}
.provincia-card__conteggio-label {
font-size: 0.7rem;
color: var(--testo-grigio);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
/* Servizi disponibili in zona */
.servizi-zona {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-md);
margin-top: var(--s-xl);
}
.servizio-zona-card {
border: 1.5px solid var(--bordo);
border-radius: var(--radius-md);
padding: var(--s-md);
text-align: center;
transition: border-color var(--trans-fast), box-shadow var(--trans-fast), transform var(--trans-fast);
text-decoration: none;
display: block;
}
.servizio-zona-card:hover {
border-color: var(--blu);
box-shadow: var(--ombra-sm);
transform: translateY(-2px);
}
.servizio-zona-card__icona {
width: 40px;
height: 40px;
background: var(--blu-chiaro);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--s-sm);
transition: background var(--trans-fast);
}
.servizio-zona-card:hover .servizio-zona-card__icona {
background: var(--blu);
}
.servizio-zona-card__icona svg {
width: 18px;
height: 18px;
color: var(--blu);
transition: color var(--trans-fast);
}
.servizio-zona-card:hover .servizio-zona-card__icona svg {
color: var(--bianco);
}
.servizio-zona-card__nome {
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 600;
color: var(--testo-scuro);
line-height: 1.3;
}
/* Box "non trovi il tuo comune" */
.non-trovi {
background: var(--blu-chiaro);
border: 1.5px solid rgba(48,110,194,0.2);
border-radius: var(--radius-lg);
padding: var(--s-xl);
display: flex;
align-items: center;
gap: var(--s-lg);
margin-top: var(--s-xl);
}
.non-trovi__icona {
width: 56px;
height: 56px;
background: var(--blu);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.non-trovi__icona svg {
width: 26px;
height: 26px;
color: var(--bianco);
}
.non-trovi__testo h3 {
font-size: 1.05rem;
margin-bottom: 4px;
}
.non-trovi__testo p {
font-size: 0.875rem;
color: var(--testo-grigio);
margin-bottom: var(--s-sm);
}
/* ============================================================
36. CONTATTI — Hero, Info, Garanzie, Zone, Form nota, FAQ
[Migrazione CSS embedded da contatti.html — FASE 2, §4]
============================================================ */
/* Hero contatti */
.hero-contatti {
background: linear-gradient(135deg, #0d1b2e 0%, #1a3d6b 100%);
padding: calc(var(--header-h) + var(--s-2xl)) 0 var(--s-2xl);
position: relative;
overflow: hidden;
}
.hero-contatti__pattern {
position: absolute;
inset: 0;
opacity: 0.04;
background-image:
linear-gradient(var(--blu) 1px, transparent 1px),
linear-gradient(90deg, var(--blu) 1px, transparent 1px);
background-size: 60px 60px;
}
.hero-contatti__interno {
position: relative;
z-index: 1;
}
.hero-contatti__badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(48,110,194,0.2);
border: 1px solid rgba(48,110,194,0.4);
border-radius: 100px;
padding: 6px 16px;
font-size: 0.8125rem;
font-weight: 600;
color: rgba(255,255,255,0.85);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: var(--s-md);
}
.hero-contatti__titolo {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
color: var(--bianco);
letter-spacing: -0.03em;
margin-bottom: var(--s-sm);
}
.hero-contatti__sottotitolo {
font-size: 1.1rem;
color: rgba(255,255,255,0.7);
max-width: 520px;
}
/* Risposta rapida badge */
.risposta-rapida {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.15);
border-radius: var(--radius-md);
padding: 12px 20px;
margin-top: var(--s-md);
}
.risposta-rapida__punto {
width: 8px;
height: 8px;
background: #4ade80;
border-radius: 50%;
flex-shrink: 0;
animation: pulse 2s infinite;
}
.risposta-rapida__testo {
font-size: 0.875rem;
color: rgba(255,255,255,0.8);
font-weight: 500;
}
/* Sezione contatti principale */
.sezione-contatti {
padding: var(--s-2xl) 0 var(--s-3xl);
}
/* Info collaterali */
.contatti-info {
padding-top: var(--s-sm);
}
.contatti-info__titolo {
font-size: 1.1rem;
font-weight: 700;
color: var(--testo-scuro);
margin-bottom: var(--s-lg);
font-family: var(--font-display);
}
/* Card garanzie laterale */
.contatti-garanzie {
background: var(--sfondo-grigio);
border-radius: var(--radius-md);
padding: var(--s-lg);
margin-top: var(--s-lg);
}
.contatti-garanzie__titolo {
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 700;
color: var(--testo-grigio);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--s-md);
}
.contatti-garanzia-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--bordo);
font-size: 0.875rem;
font-weight: 500;
color: var(--testo-scuro);
}
.contatti-garanzia-item:last-child { border-bottom: none; }
.contatti-garanzia-item svg {
width: 16px;
height: 16px;
color: var(--blu);
flex-shrink: 0;
}
/* Note zone */
.contatti-zone {
margin-top: var(--s-lg);
padding: var(--s-md);
border-left: 3px solid var(--blu);
background: var(--blu-chiaro);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.contatti-zone p {
font-size: 0.875rem;
color: var(--testo-scuro);
line-height: 1.6;
}
.contatti-zone a {
color: var(--blu);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
/* Nota sotto form */
.form-nota {
display: flex;
align-items: flex-start;
gap: 8px;
padding: var(--s-sm);
background: var(--sfondo-grigio);
border-radius: var(--radius-sm);
font-size: 0.8rem;
color: var(--testo-grigio);
line-height: 1.5;
}
.form-nota svg {
width: 14px;
height: 14px;
color: var(--blu);
flex-shrink: 0;
margin-top: 1px;
}
/* FAQ contatti */
.faq {
padding: var(--s-2xl) 0;
border-top: 1px solid var(--bordo);
}
.faq__griglia {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-lg);
margin-top: var(--s-xl);
}
.faq__item {
padding: var(--s-lg);
border: 1.5px solid var(--bordo);
border-radius: var(--radius-md);
transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
}
.faq__item:hover {
border-color: var(--blu);
box-shadow: var(--ombra-sm);
}
.faq__domanda {
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 700;
color: var(--testo-scuro);
margin-bottom: var(--s-xs);
}
.faq__risposta {
font-size: 0.875rem;
color: var(--testo-grigio);
line-height: 1.65;
}
/* Privacy wrapper avanzato */
.form-privacy__wrapper {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px;
background: var(--sfondo-grigio);
border: 1.5px solid var(--bordo);
border-radius: var(--radius-sm);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
.form-privacy__testo {
font-size: 0.8125rem;
line-height: 1.55;
color: var(--testo-grigio);
}
.form-privacy__testo a {
color: var(--blu);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
padding: 6px 2px;
margin: -6px -2px;
position: relative;
z-index: 1;
cursor: pointer;
}
/* ============================================================
37. PAGINE LEGALI — Cookie Policy, Privacy Policy
[Migrazione CSS embedded — FASE 2, §4]
============================================================ */
.legal-content {
max-width: 780px;
margin: 0 auto;
padding: 0 0.25rem;
}
.legal-content h2 {
font-size: 1.2rem;
margin-top: var(--s-2xl);
margin-bottom: var(--s-sm);
padding-top: var(--s-lg);
border-top: 1px solid var(--bordo);
}
.legal-content h2:first-of-type {
border-top: none;
padding-top: 0;
margin-top: var(--s-lg);
}
.legal-content p,
.legal-content li {
font-size: 0.9375rem;
line-height: 1.8;
color: var(--testo-corpo);
margin-bottom: var(--s-sm);
}
.legal-content ul {
padding-left: var(--s-lg);
margin-bottom: var(--s-md);
}
.legal-content strong { color: var(--testo-scuro); }
.legal-content a { color: var(--blu); }
.legal-aggiornato {
font-size: 0.8125rem;
color: var(--testo-grigio);
margin-top: var(--s-sm);
}
/* ============================================================
38. NORMATIVA BOX — Riferimenti normativi (UNI 11424, DPCM)
[Nuovo componente — FASE 1, §1-§2]
============================================================ */
.normativa-box {
display: flex;
gap: var(--s-md);
padding: var(--s-lg);
background: var(--blu-chiaro);
border-left: 4px solid var(--blu);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
margin: var(--s-lg) 0;
}
.normativa-box__icona {
width: 44px;
height: 44px;
background: var(--blu);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.normativa-box__icona svg {
width: 22px;
height: 22px;
color: var(--bianco);
}
.normativa-box__contenuto h4 {
font-size: 0.9375rem;
color: var(--testo-scuro);
margin-bottom: 4px;
}
.normativa-box__contenuto p {
font-size: 0.875rem;
color: var(--testo-corpo);
line-height: 1.6;
margin-bottom: 0;
}
/* Tabella Q1-Q4 */
.tabella-livelli {
width: 100%;
border-collapse: collapse;
margin: var(--s-lg) 0;
font-size: 0.875rem;
}
.tabella-livelli th {
background: var(--blu);
color: var(--bianco);
font-family: var(--font-display);
font-weight: 600;
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 12px 16px;
text-align: left;
}
.tabella-livelli td {
padding: 12px 16px;
border-bottom: 1px solid var(--bordo);
color: var(--testo-corpo);
line-height: 1.55;
vertical-align: top;
}
.tabella-livelli tr:nth-child(even) td {
background: var(--sfondo-grigio);
}
.tabella-livelli tr:last-child td {
border-bottom: 2px solid var(--blu);
}
.tabella-livelli td:first-child {
font-family: var(--font-display);
font-weight: 700;
color: var(--blu);
white-space: nowrap;
}
/* ============================================================
39. FAQ ACCORDION — Pagine servizio
[Nuovo componente — FASE 4, §3]
============================================================ */
.faq-accordion {
margin: var(--s-lg) 0;
}
.faq-accordion__item {
border: 1.5px solid var(--bordo);
border-radius: var(--radius-md);
margin-bottom: var(--s-sm);
overflow: hidden;
transition: border-color var(--trans-fast);
}
.faq-accordion__item:hover {
border-color: var(--blu);
}
.faq-accordion__domanda {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-sm);
width: 100%;
padding: var(--s-md);
background: none;
border: none;
cursor: pointer;
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 600;
color: var(--testo-scuro);
text-align: left;
line-height: 1.4;
min-height: 48px;
}
.faq-accordion__domanda svg {
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--blu);
transition: transform 0.3s ease;
}
.faq-accordion__domanda[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.faq-accordion__risposta {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s ease;
}
.faq-accordion__risposta > div {
overflow: hidden;
}
.faq-accordion__risposta.aperta {
grid-template-rows: 1fr;
}
.faq-accordion__risposta-testo {
padding: 0 var(--s-md) var(--s-md);
font-size: 0.875rem;
color: var(--testo-grigio);
line-height: 1.7;
}
/* ============================================================
40. SEZIONE "QUANTO COSTA" — Pagine servizio
[Nuovo componente — FASE 4, §2]
============================================================ */
.costo-range {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--s-md);
margin: var(--s-lg) 0;
}
.costo-range__item {
background: var(--sfondo-grigio);
border-radius: var(--radius-md);
padding: var(--s-md);
text-align: center;
}
.costo-range__prezzo {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 800;
color: var(--blu);
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 4px;
}
.costo-range__label {
font-size: 0.8125rem;
color: var(--testo-grigio);
font-weight: 500;
}
.costo-nota {
font-size: 0.8125rem;
color: var(--testo-grigio);
background: var(--sfondo-grigio);
padding: var(--s-sm) var(--s-md);
border-radius: var(--radius-sm);
border-left: 3px solid var(--blu);
margin-top: var(--s-sm);
}
/* ============================================================
41. SEZIONE "DOVE OPERIAMO" — Link zona in pagine servizio
[Nuovo componente — FASE 4, §11]
============================================================ */
.dove-operiamo {
background: var(--sfondo-grigio);
border-radius: var(--radius-md);
padding: var(--s-lg);
margin: var(--s-lg) 0;
}
.dove-operiamo h3 {
font-size: 1rem;
margin-bottom: var(--s-sm);
}
.dove-operiamo p {
font-size: 0.875rem;
color: var(--testo-grigio);
line-height: 1.7;
}
.dove-operiamo a {
color: var(--blu);
font-weight: 600;
}
/* ============================================================
42. REI CLASSI — Pagina sistemi ignifughi
[Componente specifico per pagina REI]
============================================================ */
.rei-classi {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-md);
margin: var(--s-lg) 0;
}
.rei-card {
border: 1.5px solid var(--bordo);
border-radius: var(--radius-md);
padding: var(--s-lg);
text-align: center;
transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
}
.rei-card:hover {
border-color: var(--blu);
box-shadow: var(--ombra-sm);
}
.rei-card__numero {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 800;
color: var(--blu);
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: var(--s-xs);
}
.rei-card h4 {
font-size: 0.9rem;
margin-bottom: 4px;
}
.rei-card p {
font-size: 0.8125rem;
color: var(--testo-grigio);
line-height: 1.55;
}
/* ============================================================
43. WHATSAPP STICKY — Contatto rapido
[Nuovo componente — FASE 6, §WhatsApp]
============================================================ */
.whatsapp-float {
position: fixed;
bottom: 24px;
right: var(--padding-x);
z-index: 997;
width: 56px;
height: 56px;
background: #25d366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(37,211,102,0.4);
transition: transform var(--trans-fast), box-shadow var(--trans-fast), bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.whatsapp-float:hover {
transform: scale(1.1);
box-shadow: 0 6px 24px rgba(37,211,102,0.5);
}
.whatsapp-float svg {
width: 28px;
height: 28px;
color: var(--bianco);
}
/* Rialzato — classe aggiunta/rimossa via JS quando sticky bar è visibile */
.whatsapp-float--rialzato {
bottom: 90px;
}
/* ============================================================
44. RESPONSIVE AGGIUNTIVO — Componenti migrati
[Responsive per sezioni 33-42]
============================================================ */
/* ── TABLET (max 1024px) ── */
@media (max-width: 1024px) {
.numeri-strip__griglia { grid-template-columns: repeat(2, 1fr); }
.faq__griglia { grid-template-columns: repeat(2, 1fr); }
.servizi-zona { grid-template-columns: repeat(3, 1fr); }
}
/* ── MOBILE (max 768px) ── */
@media (max-width: 768px) {
/* Chi Siamo */
.valori { grid-template-columns: 1fr; }
.numeri-strip__griglia { grid-template-columns: repeat(2, 1fr); }
.sezione-split,
.sezione-split--invertita { grid-template-columns: 1fr; direction: ltr; }
.materiali-dettaglio { grid-template-columns: 1fr; }
/* Area di intervento */
.servizi-zona {
grid-template-columns: repeat(2, 1fr);
gap: var(--s-sm);
}
.non-trovi {
flex-direction: column;
text-align: center;
padding: var(--s-lg);
gap: var(--s-md);
}
.provincia-card { padding: var(--s-lg); }
.provincia-card__header { flex-wrap: wrap; gap: var(--s-sm); }
.provincia-card__titolo { font-size: 1.2rem; }
.comuni-griglia { margin-top: var(--s-md); }
.comune-tag { font-size: 0.75rem; padding: 5px 10px; }
/* Contatti */
.faq__griglia { grid-template-columns: 1fr; }
.form-privacy__wrapper { padding: 18px; gap: 18px; }
.form-privacy__testo a { display: inline-block; padding: 8px 2px; margin: -8px -2px; }
/* REI */
.rei-classi { grid-template-columns: 1fr 1fr; gap: var(--s-sm); }
/* Normativa box */
.normativa-box { flex-direction: column; gap: var(--s-sm); }
/* Costo range */
.costo-range { grid-template-columns: 1fr; }
/* Legal */
.legal-content ul { padding-left: var(--s-md); }
/* WhatsApp float — su mobile sale di più sopra la sticky bar */
.whatsapp-float--rialzato { bottom: 100px; }
}
/* ── MOBILE PICCOLO (max 480px) ── */
@media (max-width: 480px) {
.servizi-zona { grid-template-columns: 1fr 1fr; }
.rei-classi { grid-template-columns: 1fr; }
}
/* ============================================================
45. CLASSI JS-DRIVEN — Nascosto, SW Banner
[Sostituiscono inline styles da script.js]
============================================================ */
/* Nascosto generico — usato da JS per hide form/sticky */
.nascosto {
display: none !important;
}
/* Sticky bar: nascosta via classe (non più inline style) */
.sticky-mobile.nascosto {
transform: translateY(100%);
opacity: 0;
display: flex !important; /* mantieni display flex, nascondi con transform */
pointer-events: none;
}
/* Banner aggiornamento Service Worker */
.sw-update-banner {
position: fixed;
bottom: 90px;
left: 50%;
transform: translateX(-50%);
background: var(--blu-scuro);
color: var(--bianco);
padding: 12px 20px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 600;
box-shadow: var(--ombra-lg);
z-index: 9999;
white-space: nowrap;
}
.sw-update-banner__chiudi {
background: none;
border: none;
color: rgba(255,255,255,0.6);
font-size: 1.2rem;
cursor: pointer;
padding: 4px;
line-height: 1;
transition: color var(--trans-fast);
}
.sw-update-banner__chiudi:hover {
color: var(--bianco);
}
/* ============================================================
46. PROBLEMA-SOLUZIONE — Pagina isolamento acustico
[Migrazione CSS embedded — FASE 2, §4]
============================================================ */
.problema-soluzione {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-md);
margin: var(--s-lg) 0;
}
.problema-box,
.soluzione-box {
border-radius: var(--radius-md);
padding: var(--s-lg);
}
.problema-box {
background: #fef2f2;
border: 1.5px solid #fecaca;
}
.problema-box h4 {
font-size: 0.875rem;
font-weight: 700;
color: #991b1b;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--s-sm);
}
.problema-box ul,
.soluzione-box ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
.problema-box li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 0.875rem;
color: #7f1d1d;
line-height: 1.5;
}
.problema-box li::before {
content: '✕';
color: #ef4444;
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}
.soluzione-box {
background: #f0fdf4;
border: 1.5px solid #bbf7d0;
}
.soluzione-box h4 {
font-size: 0.875rem;
font-weight: 700;
color: #14532d;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--s-sm);
}
.soluzione-box li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 0.875rem;
color: #166534;
line-height: 1.5;
}
.soluzione-box li::before {
content: '✓';
color: #22c55e;
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}
@media (max-width: 768px) {
.problema-soluzione { grid-template-columns: 1fr; }
}
/* ============================================================
47. CONFRONTO-TABELLA + RISPARMIO-BOX — Pagina isolamento termico
[Migrazione CSS embedded — FASE 2, §4]
============================================================ */
.confronto-tabella {
border: 1.5px solid var(--bordo);
border-radius: var(--radius-md);
overflow: hidden;
margin: var(--s-lg) 0;
}
.confronto-tabella__header {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
background: var(--testo-scuro);
color: white;
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.confronto-tabella__header-cel,
.confronto-tabella__riga-cel {
padding: 12px var(--s-md);
}
.confronto-tabella__header-cel:not(:last-child),
.confronto-tabella__riga-cel:not(:last-child) {
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.confronto-tabella__riga {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
border-bottom: 1px solid var(--bordo);
font-size: 0.875rem;
}
.confronto-tabella__riga:last-child {
border-bottom: none;
}
.confronto-tabella__riga:nth-child(even) {
background: var(--sfondo-grigio);
}
.confronto-tabella__riga-cel {
color: var(--testo-corpo);
}
.confronto-tabella__riga-cel:first-child {
font-weight: 600;
color: var(--testo-scuro);
}
.confronto-tabella__riga-cel.ok {
color: #15803d;
font-weight: 600;
}
.confronto-tabella__riga-cel.ko {
color: #dc2626;
}
.confronto-tabella__riga-cel.meh {
color: var(--testo-grigio);
}
/* Risparmio box */
.risparmio-box {
background: linear-gradient(135deg, #0d1b2e 0%, #1a3d6b 100%);
border-radius: var(--radius-md);
padding: var(--s-lg);
margin: var(--s-lg) 0;
display: flex;
align-items: center;
gap: var(--s-lg);
}
.risparmio-box__icona {
width: 56px;
height: 56px;
background: rgba(48, 110, 194, 0.3);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.risparmio-box__icona svg {
width: 26px;
height: 26px;
color: white;
}
.risparmio-box__testo h4 {
color: white;
font-size: 1rem;
margin-bottom: 4px;
}
.risparmio-box__testo p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.875rem;
margin: 0;
line-height: 1.6;
}
@media (max-width: 640px) {
.confronto-tabella__header,
.confronto-tabella__riga {
grid-template-columns: 1fr 1fr;
}
.confronto-tabella__header-cel:first-child,
.confronto-tabella__riga-cel:first-child {
grid-column: 1 / -1;
border-right: none;
border-bottom: 1px solid var(--bordo);
}
.risparmio-box {
flex-direction: column;
text-align: center;
}
}
/* ============================================================
48. CONFRONTO-DUO — Pagina tramezzi (cartongesso vs tradizionale)
[Migrazione CSS embedded — FASE 2, §4]
============================================================ */
.confronto-duo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-md);
margin: var(--s-lg) 0;
}
.confronto-col {
border-radius: var(--radius-md);
padding: var(--s-lg);
}
.confronto-col--tradizionale {
background: #fef9f0;
border: 1.5px solid #fed7aa;
}
.confronto-col--cartongesso {
background: #f0fdf4;
border: 1.5px solid #bbf7d0;
}
.confronto-col__titolo {
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--s-sm);
}
.confronto-col--tradizionale .confronto-col__titolo {
color: #9a3412;
}
.confronto-col--cartongesso .confronto-col__titolo {
color: #14532d;
}
.confronto-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
.confronto-col li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 0.875rem;
line-height: 1.5;
}
.confronto-col--tradizionale li {
color: #7c2d12;
}
.confronto-col--tradizionale li::before {
content: '—';
color: #f97316;
font-weight: 700;
flex-shrink: 0;
}
.confronto-col--cartongesso li {
color: #166534;
}
.confronto-col--cartongesso li::before {
content: '✓';
color: #22c55e;
font-weight: 700;
flex-shrink: 0;
}
@media (max-width: 640px) {
.confronto-duo { grid-template-columns: 1fr; }
}
/* ============================================================
49. CASI-USO — Pagina contropareti (casi d'uso con icone)
[Migrazione CSS embedded — FASE 2, §4]
============================================================ */
.casi-uso {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-md);
margin: var(--s-lg) 0;
}
.caso-card {
border: 1.5px solid var(--bordo);
border-radius: var(--radius-md);
padding: var(--s-lg);
transition: border-color var(--trans-fast), box-shadow var(--trans-fast), transform var(--trans-fast);
}
.caso-card:hover {
border-color: var(--blu);
box-shadow: var(--ombra-sm);
transform: translateY(-2px);
}
.caso-card__icona {
width: 44px;
height: 44px;
background: var(--blu-chiaro);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--s-sm);
}
.caso-card__icona svg {
width: 22px;
height: 22px;
color: var(--blu);
}
.caso-card h3 {
font-size: 0.9375rem;
margin-bottom: 6px;
}
.caso-card p {
font-size: 0.8125rem;
color: var(--testo-grigio);
line-height: 1.6;
margin: 0;
}
@media (max-width: 768px) {
.casi-uso { grid-template-columns: 1fr; }
}
/* ============================================================
50. VELETTA-SCHEMA — Pagina velette LED (schema visuale)
[Migrazione CSS embedded — FASE 2, §4]
============================================================ */
.veletta-schema {
background: linear-gradient(135deg, #0d1b2e 0%, #1a3d6b 100%);
border-radius: var(--radius-md);
padding: var(--s-xl);
margin: var(--s-lg) 0;
position: relative;
overflow: hidden;
}
.veletta-schema::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent 10%, rgba(255, 255, 255, 0.7) 50%, transparent 90%);
}
.veletta-schema__titolo {
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--s-md);
}
.veletta-schema__griglia {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-md);
}
.veletta-schema__item {
text-align: center;
}
.veletta-schema__item-num {
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 800;
color: white;
line-height: 1;
}
.veletta-schema__item-label {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.6);
margin-top: 4px;
}
@media (max-width: 640px) {
.veletta-schema__griglia { grid-template-columns: 1fr 1fr; }
}
/* ============================================================
51. NICCHIE-GALLERY — Pagina nicchie su misura
[Migrazione CSS embedded — FASE 2, §4]
============================================================ */
.nicchie-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-md);
margin: var(--s-lg) 0;
}
.nicchia-card {
border: 1.5px solid var(--bordo);
border-radius: var(--radius-md);
overflow: hidden;
transition: transform var(--trans-fast), box-shadow var(--trans-fast), border-color var(--trans-fast);
}
.nicchia-card:hover {
transform: translateY(-3px);
box-shadow: var(--ombra-md);
border-color: var(--blu);
}
.nicchia-card__immagine {
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, var(--sfondo-grigio) 0%, var(--blu-chiaro) 100%);
display: flex;
align-items: center;
justify-content: center;
}
.nicchia-card__immagine svg {
width: 36px;
height: 36px;
color: var(--blu);
opacity: 0.35;
}
.nicchia-card__corpo {
padding: var(--s-md);
}
.nicchia-card__corpo h3 {
font-size: 0.9375rem;
margin-bottom: 4px;
}
.nicchia-card__corpo p {
font-size: 0.8125rem;
color: var(--testo-grigio);
line-height: 1.55;
margin: 0;
}
@media (max-width: 640px) {
.nicchie-gallery { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
.nicchie-gallery { grid-template-columns: 1fr; }
}
/* ============================================================
★ AESTHETIC LAYER — Enhancement Pass
Aggiunto su strato separato: zero modifiche al codice sopra.
Solo regole additive per profondità, micro-interazioni e fluidità.
============================================================ */
/* ── Nuove variabili (aggiunte, nessuna sovrascritta) ── */
:root {
--ombra-elevata: 0 16px 40px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
--ombra-card-blu: 0 12px 32px rgba(48,110,194,0.12);
--ombra-card-riposo: 0 1px 3px rgba(0,0,0,0.04);
--trans-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
--trans-elegant: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--glow-blu: 0 0 0 0 rgba(48,110,194,0);
}
/* ============================================================
A1. HEADER — Polish sottile
============================================================ */
.header {
background: rgba(255,255,255,0.92);
backdrop-filter: blur(20px) saturate(1.8);
-webkit-backdrop-filter: blur(20px) saturate(1.8);
}
.header.scrollato {
box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
}
/* Logo icona — transizione sottile */
.header__logo-icona {
transition: transform var(--trans-fast);
}
.header__logo:hover .header__logo-icona {
transform: scale(1.05);
}
/* ============================================================
A2. BUTTONS — Profondità e feedback tattile
============================================================ */
/* Primario — ombra più avvolgente, transizione migliore */
.btn--primario {
box-shadow: 0 1px 2px rgba(48,110,194,0.2), 0 4px 12px rgba(48,110,194,0.15);
transition: all var(--trans-elegant);
position: relative;
overflow: hidden;
}
.btn--primario:hover {
box-shadow: 0 4px 12px rgba(48,110,194,0.25), 0 12px 28px rgba(48,110,194,0.2);
transform: translateY(-3px);
}
.btn--primario:active {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(48,110,194,0.2);
transition-duration: 0.08s;
}
/* Shimmer sottile sui bottoni primari */
.btn--primario::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.12),
transparent
);
transition: left 0.6s ease;
pointer-events: none;
}
.btn--primario:hover::after {
left: 120%;
}
/* Secondario — feedback migliorato */
.btn--secondario {
transition: all var(--trans-elegant);
}
.btn--secondario:hover {
box-shadow: 0 4px 16px rgba(48,110,194,0.12);
transform: translateY(-2px);
}
.btn--secondario:active {
transform: translateY(0);
transition-duration: 0.08s;
}
/* Bianco (CTA finale) */
.btn--bianco {
transition: all var(--trans-elegant);
}
.btn--bianco:hover {
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
.btn--bianco:active {
transform: translateY(-1px);
transition-duration: 0.08s;
}
/* Outline bianco */
.btn--outline-bianco {
transition: all var(--trans-elegant);
}
.btn--outline-bianco:hover {
transform: translateY(-2px);
}
.btn--outline-bianco:active {
transform: translateY(0);
transition-duration: 0.08s;
}
/* ============================================================
A3. HERO — Micro-polish (niente sfumature nuove)
============================================================ */
/* Badge — glow sottilissimo al pulse */
.hero__badge {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Titolo — text-shadow per profondità */
.hero__titolo {
text-shadow: 0 2px 40px rgba(0,0,0,0.3);
}
/* Trust items — hover sottile */
.hero__trust-item {
transition: color var(--trans-fast);
cursor: default;
}
.hero__trust-item:hover {
color: rgba(255,255,255,0.95);
}
.hero__trust-item svg {
transition: transform var(--trans-fast);
}
.hero__trust-item:hover svg {
transform: scale(1.15);
}
/* ============================================================
A4. SERVICE CARDS — Profondità professionale
============================================================ */
.card-servizio {
transition: background var(--trans-elegant), box-shadow var(--trans-elegant);
box-shadow: var(--ombra-card-riposo);
}
.card-servizio:hover {
box-shadow: 0 8px 24px rgba(48,110,194,0.08);
}
/* Icona — rotazione elegante su hover card */
.card-servizio__icona {
transition: background var(--trans-elegant), transform var(--trans-elegant), box-shadow var(--trans-elegant);
}
.card-servizio:hover .card-servizio__icona {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(48,110,194,0.2);
}
.card-servizio__icona svg {
transition: color var(--trans-elegant), transform var(--trans-elegant);
}
.card-servizio:hover .card-servizio__icona svg {
transform: rotate(-5deg) scale(1.05);
}
/* Link freccia — animazione più fluida */
.card-servizio__link {
transition: gap var(--trans-elegant), color var(--trans-fast);
}
.card-servizio__link svg {
transition: transform var(--trans-elegant);
}
.card-servizio:hover .card-servizio__link svg {
transform: translateX(3px);
}
/* Linea inferiore — da centro verso fuori */
.card-servizio::after {
transform-origin: center;
transition: transform var(--trans-elegant);
}
/* Servizi categoria label — hover sottile */
.servizi-categoria__label {
transition: background var(--trans-fast), color var(--trans-fast);
}
/* ============================================================
A5. BLOCCHI PERCHÉ — Profondità e animazione numeri
============================================================ */
.blocco-perche {
padding: var(--s-lg) var(--s-md);
border-radius: var(--radius-md);
transition: background var(--trans-elegant), box-shadow var(--trans-elegant);
}
.blocco-perche:hover {
background: var(--sfondo-grigio);
box-shadow: var(--ombra-card-riposo);
}
.blocco-perche__icona {
transition: transform var(--trans-elegant), box-shadow var(--trans-elegant);
}
.blocco-perche:hover .blocco-perche__icona {
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(48,110,194,0.15);
}
.blocco-perche__numero {
transition: transform var(--trans-elegant);
}
.blocco-perche:hover .blocco-perche__numero {
transform: scale(1.04);
}
/* ============================================================
A6. SOCIAL PROOF — Enfasi sui numeri
============================================================ */
.social-proof__numero {
transition: transform var(--trans-elegant);
}
.social-proof__numero:hover {
transform: translateX(4px);
}
.social-proof__cifra {
transition: color var(--trans-fast), transform var(--trans-fast);
}
.social-proof__numero:hover .social-proof__cifra {
transform: scale(1.04);
}
/* ============================================================
A7. MATERIALI — Logo card polish
============================================================ */
.materiali__logo {
transition: border-color var(--trans-elegant), box-shadow var(--trans-elegant), transform var(--trans-elegant);
}
.materiali__logo:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
/* ============================================================
A8. ZONE HOME — Card interazione
============================================================ */
.zone-home__card {
transition: border-color var(--trans-elegant), box-shadow var(--trans-elegant), transform var(--trans-elegant);
}
.zone-home__card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(48,110,194,0.1);
}
.zone-home__card-provincia {
transition: color var(--trans-fast);
}
.zone-home__card:hover .zone-home__card-provincia {
color: var(--blu);
}
/* ============================================================
A9. CTA FINALE — Profondità e respiro
============================================================ */
.cta-finale {
background: linear-gradient(135deg, var(--blu) 0%, var(--blu-hover) 100%);
}
/* ============================================================
A10. FOOTER — Link underline animation
============================================================ */
.footer__link {
position: relative;
transition: color var(--trans-fast), transform var(--trans-fast);
}
.footer__link:not(.cursore-default):hover {
transform: translateX(3px);
}
.footer__col-titolo {
position: relative;
padding-bottom: 8px;
}
.footer__col-titolo::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 24px;
height: 2px;
background: var(--blu);
border-radius: 2px;
}
/* ============================================================
A11. CARD TIPOLOGIA — Polish professionale
============================================================ */
.card-tipologia {
transition: border-color var(--trans-elegant), box-shadow var(--trans-elegant), transform var(--trans-elegant);
}
.card-tipologia:hover {
box-shadow: 0 12px 32px rgba(48,110,194,0.1);
}
.card-tipologia__num {
transition: color var(--trans-elegant), transform var(--trans-fast);
}
.card-tipologia:hover .card-tipologia__num {
color: var(--blu);
transform: scale(1.05);
}
/* ============================================================
A12. VALORE CARDS (Chi Siamo) — Depth
============================================================ */
.valore-card {
transition: border-color var(--trans-elegant), box-shadow var(--trans-elegant), transform var(--trans-elegant);
}
.valore-card:hover {
box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
.valore-card__icona {
transition: transform var(--trans-elegant), box-shadow var(--trans-elegant);
}
.valore-card:hover .valore-card__icona {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(48,110,194,0.15);
}
/* ============================================================
A13. TIMELINE — Punto animato
============================================================ */
.timeline__punto {
transition: transform var(--trans-elegant), box-shadow var(--trans-elegant);
}
.timeline__step:hover .timeline__punto {
transform: scale(1.15);
box-shadow: 0 0 0 6px rgba(48,110,194,0.15);
}
/* ============================================================
A14. FAQ ACCORDION — Transizione migliorata
============================================================ */
.faq-accordion__item {
transition: border-color var(--trans-elegant), box-shadow var(--trans-elegant);
}
.faq-accordion__item:hover {
box-shadow: 0 2px 12px rgba(48,110,194,0.06);
}
.faq-accordion__domanda {
transition: color var(--trans-fast), background var(--trans-fast);
border-radius: var(--radius-md);
}
.faq-accordion__domanda:hover {
color: var(--blu);
background: rgba(48,110,194,0.03);
}
/* ============================================================
A15. FORM — Input focus depth
============================================================ */
.form-campo input:focus,
.form-campo select:focus,
.form-campo textarea:focus {
box-shadow: 0 0 0 3px rgba(48,110,194,0.12), 0 4px 12px rgba(48,110,194,0.06);
}
.form-card {
transition: box-shadow var(--trans-elegant);
}
.form-card:hover {
box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
/* ============================================================
A16. DROPDOWN DESKTOP — Polish
============================================================ */
.header__dropdown-menu {
box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08);
}
.header__dropdown-item {
border-radius: var(--radius-sm);
transition: background var(--trans-fast), color var(--trans-fast), transform var(--trans-fast), box-shadow var(--trans-fast);
}
.header__dropdown-item:hover {
box-shadow: 0 2px 8px rgba(48,110,194,0.08);
}
/* ============================================================
A17. WHATSAPP FLOAT — Pulse glow
============================================================ */
.whatsapp-float {
animation: wa-glow 3s ease-in-out infinite;
}
@keyframes wa-glow {
0%, 100% { box-shadow: 0 4px 16px rgba(37,211,102,0.35); }
50% { box-shadow: 0 4px 16px rgba(37,211,102,0.35), 0 0 0 8px rgba(37,211,102,0.12); }
}
.whatsapp-float:hover {
animation: none;
box-shadow: 0 6px 24px rgba(37,211,102,0.5);
}
/* ============================================================
A18. LINK BRAND — Freccia dinamica
============================================================ */
.link-brand svg {
transition: transform var(--trans-elegant);
}
.link-brand:hover svg {
transform: translateX(4px);
}
.link-brand {
transition: color var(--trans-fast), gap var(--trans-elegant);
}
.link-brand:hover {
gap: 10px;
}
/* ============================================================
A19. REI CARDS — Hover shine
============================================================ */
.rei-card {
transition: border-color var(--trans-elegant), box-shadow var(--trans-elegant), transform var(--trans-elegant);
}
.rei-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(48,110,194,0.1);
}
.rei-card__numero {
transition: transform var(--trans-fast);
}
.rei-card:hover .rei-card__numero {
transform: scale(1.06);
}
/* ============================================================
A20. CASO CARD — Profondità
============================================================ */
.caso-card {
transition: border-color var(--trans-elegant), box-shadow var(--trans-elegant), transform var(--trans-elegant);
}
.caso-card:hover {
box-shadow: 0 12px 32px rgba(48,110,194,0.1);
}
.caso-card__icona {
transition: transform var(--trans-elegant), box-shadow var(--trans-elegant);
}
.caso-card:hover .caso-card__icona {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(48,110,194,0.12);
}
/* ============================================================
A21. NICCHIA CARD — Hover profondo
============================================================ */
.nicchia-card {
transition: transform var(--trans-elegant), box-shadow var(--trans-elegant), border-color var(--trans-elegant);
}
.nicchia-card:hover {
box-shadow: 0 16px 40px rgba(0,0,0,0.1);
}
/* ============================================================
A22. PROVINCIA CARD + SERVIZIO ZONA — Polish
============================================================ */
.provincia-card {
transition: border-color var(--trans-elegant), box-shadow var(--trans-elegant), transform var(--trans-elegant);
}
.provincia-card:hover {
transform: translateY(-2px);
}
.servizio-zona-card {
transition: border-color var(--trans-elegant), box-shadow var(--trans-elegant), transform var(--trans-elegant);
}
.servizio-zona-card:hover {
box-shadow: 0 8px 20px rgba(48,110,194,0.1);
}
/* ============================================================
A23. SIDEBAR CTA — Glow sottile
============================================================ */
.sidebar-cta__card {
position: relative;
overflow: hidden;
transition: box-shadow var(--trans-elegant);
}
.sidebar-cta__card:hover {
box-shadow: 0 8px 24px rgba(48,110,194,0.25);
}
/* ============================================================
A24. NUMERI STRIP — Cifre hover
============================================================ */
.numero-stat__cifra {
transition: transform var(--trans-fast);
}
.numero-stat__cifra:hover {
transform: scale(1.04);
}
/* ============================================================
A25. HERO COMPATTO — Breadcrumb polish
============================================================ */
.hero-compatto__breadcrumb a {
transition: color var(--trans-fast);
text-decoration-color: transparent;
}
.hero-compatto__breadcrumb a:hover {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(255,255,255,0.4);
}
/* ============================================================
A26. RISPOSTA RAPIDA — Glow del punto
============================================================ */
.risposta-rapida__punto {
box-shadow: 0 0 0 0 rgba(74,222,128,0.4);
animation: risposta-pulse 2s infinite;
}
@keyframes risposta-pulse {
0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
/* ============================================================
A27. ETICHETTA — Micro-animazione sottile
============================================================ */
.etichetta {
transition: letter-spacing var(--trans-elegant);
}
/* ============================================================
A28. INTESTAZIONE SEZIONE — Separatore decorativo
============================================================ */
.intestazione-sezione h2 {
position: relative;
display: inline-block;
}
/* ============================================================
A29. SMOOTH REVEAL VARIANTS — per JS stagger
============================================================ */
.reveal--da-sinistra {
opacity: 0;
transform: translateX(-30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal--da-sinistra.visibile {
opacity: 1;
transform: translateX(0);
}
.reveal--da-destra {
opacity: 0;
transform: translateX(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal--da-destra.visibile {
opacity: 1;
transform: translateX(0);
}
.reveal--scala {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal--scala.visibile {
opacity: 1;
transform: scale(1);
}
/* ============================================================
A30. SELEZIONE TESTO — Brand-aware
============================================================ */
::selection {
background: rgba(48,110,194,0.15);
color: var(--testo-scuro);
}
/* ============================================================
A31. SCROLLBAR CUSTOM — Desktop sottile
============================================================ */
@media (min-width: 769px) {
html {
scrollbar-width: thin;
scrollbar-color: rgba(48,110,194,0.2) transparent;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(48,110,194,0.2);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(48,110,194,0.35);
}
}
/* ============================================================
A32. CONTATTI INFO — Hover laterale
============================================================ */
.contatti-info__item {
padding: var(--s-sm);
border-radius: var(--radius-sm);
transition: background var(--trans-fast);
}
.contatti-info__item:hover {
background: var(--sfondo-grigio);
}
.contatti-info__icona {
transition: transform var(--trans-elegant), box-shadow var(--trans-elegant);
}
.contatti-info__item:hover .contatti-info__icona {
transform: scale(1.06);
box-shadow: 0 4px 12px rgba(48,110,194,0.12);
}
/* ============================================================
A33. COMUNE TAG — Micro-interaction
============================================================ */
.comune-tag {
transition: background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast), transform var(--trans-fast), box-shadow var(--trans-fast);
}
.comune-tag:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(48,110,194,0.1);
}
/* ============================================================
A34. MENU MOBILE — Smoother feel
============================================================ */
.menu-mobile__nav-sub-link {
transition: background var(--trans-fast), color var(--trans-fast), padding-left var(--trans-fast);
}
.menu-mobile__nav-sub-link:hover {
padding-left: 20px;
}
/* ============================================================
A35. GARANZIA CONTATTI — Hover items
============================================================ */
.contatti-garanzia-item {
transition: transform var(--trans-fast), color var(--trans-fast);
}
.contatti-garanzia-item:hover {
transform: translateX(3px);
color: var(--blu);
}
/* ============================================================
A36. MATERIALE CARD — Polish
============================================================ */
.materiale-card {
transition: border-color var(--trans-elegant), box-shadow var(--trans-elegant), transform var(--trans-elegant);
}
.materiale-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,0.07);
}
/* ============================================================
A37. REDUCED MOTION — Override per nuove animazioni
============================================================ */
@media (prefers-reduced-motion: reduce) {
.whatsapp-float { animation: none; }
.risposta-rapida__punto { animation: none; }
.btn--primario::after { display: none; }
.reveal--da-sinistra,
.reveal--da-destra,
.reveal--scala {
transition: none;
opacity: 1;
transform: none;
}
}