html, body { overflow-x: clip; }
/* ---------- Font self-hosted (GDPR-friendly: nessuna richiesta a Google) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/inter-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/poppins-latin-800-normal.woff2") format("woff2"); }
/* ============================================
CERALDI SRL — ceraldi.it
Design system v0.1 — HomePro Marketing
============================================ */
:root {
/* Design system v1.0 «social» — petrolio / ambra / ghiaccio / oro */
--brand: #ECA53C; /* ambra: azione */
--brand-dark: #D89129;
--navy: #1B5878; /* petrolio: titoli, superfici scure */
--navy-2: #14465F; /* petrolio profondo */
--gold: #D9A44A; /* hairline dorate */
--ice: #EAF2F9;
--ink: #2A4A60;
--ink-soft: #567286;
--bg: #ffffff;
--bg-soft: #EAF2F9;
--line: #D8E5EF;
--ok: #16a34a;
--radius: 20px;
--font-display: "Poppins", "Inter", -apple-system, sans-serif;
--shadow: 0 10px 30px rgba(23, 76, 105, 0.10);
--maxw: 1140px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--ink);
background: var(--bg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-dark); text-decoration: none; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
/* ---------- Topbar ---------- */
.topbar {
background: var(--navy);
color: #cfe6f2;
font-size: 0.82rem;
padding: 6px 0;
}
.topbar .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.topbar a { color: #fff; font-weight: 600; }
/* ---------- Header ---------- */
header.site {
position: sticky; top: 0; z-index: 50;
background: rgba(255,255,255,.96);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; max-width: var(--maxw); margin: 0 auto; }
.nav .logo img { height: 46px; width: auto; }
.nav ul { display: flex; gap: 26px; list-style: none; align-items: center; }
.nav ul a { color: var(--ink); font-weight: 600; font-size: 0.95rem; }
.nav ul a:hover, .nav ul a.active { color: var(--brand-dark); }
.nav .cta { background: var(--brand); color: #fff; padding: 10px 18px; border-radius: 99px; font-weight: 700; }
.nav .cta:hover { background: var(--brand-dark); color: #fff; }
.hamburger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.hamburger span { display: block; width: 24px; height: 3px; background: var(--navy); margin: 5px 0; border-radius: 2px; transition: .25s; }
/* ---------- Hero ---------- */
.hero {
position: relative;
background: linear-gradient(115deg, var(--navy) 0%, var(--navy-2) 55%, #0d4a6b 100%);
color: #fff;
overflow: hidden;
}
.hero::after {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(600px 300px at 85% 20%, rgba(1,174,242,.25), transparent 65%),
radial-gradient(500px 260px at 10% 90%, rgba(1,174,242,.12), transparent 60%);
pointer-events: none;
}
.hero .container { position: relative; z-index: 1; padding: 84px 20px; }
.hero .kicker { color: var(--brand); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }
.hero h1 { font-size: clamp(1.9rem, 4.5vw, 3.1rem); line-height: 1.15; margin: 14px 0 18px; max-width: 720px; }
.hero p.lead { font-size: 1.13rem; color: #c9dbe7; max-width: 640px; margin-bottom: 30px; }
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn { display: inline-block; padding: 14px 26px; border-radius: 99px; font-weight: 700; font-size: 1rem; transition: .2s; border: 2px solid transparent; cursor: pointer; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; transform: translateY(-1px); }
.btn-ghost { border-color: rgba(255,255,255,.35); color: #fff; }
.btn-ghost:hover { border-color: #fff; }
.btn-outline { border-color: var(--brand); color: var(--brand-dark); }
.btn-outline:hover { background: var(--brand); color: #fff; }
.hero .badges { display: flex; gap: 22px; margin-top: 40px; flex-wrap: wrap; }
.hero .badge { font-size: .88rem; color: #cfe6f2; display: flex; align-items: center; gap: 8px; }
.hero .badge strong { color: #fff; }
.hero .badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
/* ---------- Page hero (inner pages) ---------- */
.page-hero { background: linear-gradient(115deg, var(--navy), var(--navy-2)); color: #fff; padding: 56px 0; }
.page-hero .kicker { color: var(--brand); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }
.page-hero h1 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); margin-top: 10px; }
.page-hero p { color: #c9dbe7; max-width: 640px; margin-top: 12px; }
/* ---------- Sections ---------- */
section { padding: 72px 0; }
section.soft { background: var(--bg-soft); }
.section-head { max-width: 660px; margin-bottom: 44px; }
.section-head .kicker { color: var(--brand-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }
.section-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-top: 8px; color: var(--navy); }
.section-head p { color: var(--ink-soft); margin-top: 10px; }
/* ---------- Cards servizi ---------- */
.grid { display: grid; gap: 22px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: 28px; transition: .2s; position: relative;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--brand); }
.card .icon {
width: 52px; height: 52px; border-radius: 12px;
background: linear-gradient(135deg, var(--brand), var(--brand-dark));
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem; margin-bottom: 18px; color: #fff;
}
.card h3 { color: var(--navy); font-size: 1.15rem; margin-bottom: 8px; }
.card p { color: var(--ink-soft); font-size: .95rem; }
.card .link { display: inline-block; margin-top: 14px; font-weight: 700; font-size: .92rem; }
.card .link::after { content: " →"; }
/* ---------- Numeri ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { text-align: center; padding: 26px 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.stat .n { font-size: 2rem; font-weight: 800; color: var(--brand-dark); }
.stat .l { color: var(--ink-soft); font-size: .9rem; margin-top: 4px; }
/* ---------- Split (testo+foto) ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.split img { border-radius: var(--radius); box-shadow: var(--shadow); }
.split ul.checks { list-style: none; margin-top: 18px; }
.split ul.checks li { padding-left: 30px; position: relative; margin-bottom: 12px; color: var(--ink-soft); }
.split ul.checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 800; }
.split ul.checks li strong { color: var(--ink); }
/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(115deg, var(--brand-dark), var(--brand)); color: #fff; padding: 56px 0; }
.cta-band .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); }
.cta-band p { color: #e8f7ff; margin-top: 6px; }
.cta-band .btn { background: #fff; color: var(--brand-dark); }
.cta-band .btn:hover { background: var(--navy); color: #fff; }
/* ---------- Form ---------- */
.form-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 36px; box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
label { font-weight: 600; font-size: .9rem; color: var(--navy); display: block; margin-bottom: 6px; }
input, select, textarea {
width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
font: inherit; color: var(--ink); background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); border-color: transparent; }
.consent { font-size: .82rem; color: var(--ink-soft); display: flex; gap: 10px; align-items: flex-start; }
.consent input { width: auto; margin-top: 3px; }
/* ---------- Area riservata teaser ---------- */
.portal-box {
border: 2px dashed var(--brand); border-radius: var(--radius);
padding: 34px; background: #f4fbff; text-align: center;
}
.portal-box h3 { color: var(--navy); font-size: 1.25rem; }
.portal-box p { color: var(--ink-soft); max-width: 520px; margin: 10px auto 0; }
.pill { display: inline-block; background: var(--brand); color: #fff; font-size: .75rem; font-weight: 700; padding: 4px 12px; border-radius: 99px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
/* ---------- Footer ---------- */
footer.site { background: var(--navy); color: #9db8c8; padding: 56px 0 24px; font-size: .92rem; }
footer.site .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
footer.site h4 { color: #fff; font-size: .95rem; margin-bottom: 14px; }
footer.site ul { list-style: none; }
footer.site li { margin-bottom: 8px; }
footer.site a { color: #9db8c8; }
footer.site a:hover { color: #fff; }
footer.site .logo-f img { height: 44px; width: auto; max-width: 100%; object-fit: contain; background: #fff; padding: 6px 10px; border-radius: 14px; }
footer.site .legal { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .8rem; }
/* ---------- Utility ---------- */
.notice { background: #F2F7FA; border: 1px solid #DDE8EE; color: #1B2733; padding: 14px 18px; border-radius: 14px; }
/* ---------- Responsive ---------- */
@media (max-width: 920px) {
.grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
.stats { grid-template-columns: repeat(2, 1fr); }
.split { grid-template-columns: 1fr; }
footer.site .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
.nav ul {
position: fixed; inset: 62px 0 auto 0; background: #fff; flex-direction: column;
padding: 20px; gap: 16px; border-bottom: 1px solid var(--line);
transform: translateY(-130%); transition: .25s; box-shadow: var(--shadow);
}
.nav ul.open { transform: translateY(0); }
.hamburger { display: block; }
.grid.cols-3, .grid.cols-2, .form-grid { grid-template-columns: 1fr; }
.hero .container { padding: 60px 20px; }
section { padding: 52px 0; }
}
/* ============================================
HOMEPAGE v1.0 (Design Loop round 1)
Classi scoped .home-* — non toccano le pagine interne
============================================ */
/* Sulla homepage il link attivo resta navy: max 2 elementi accento per schermata */
body.home .nav ul a.active { color: var(--ink); }
body.home .nav ul a.active:hover { color: var(--brand-dark); }
/* Sulla homepage la CTA in header è outline: un solo primario pieno per schermata
(il pieno azzurro resta solo nel hero e nella CTA finale) */
body.home .nav .cta {
background: transparent;
color: var(--navy);
border: 2px solid var(--navy);
padding: 8px 17px;
}
body.home .nav .cta:hover { background: var(--brand); color: #fff; }
/* ---- Hero full-bleed ---- */
.home-hero {
position: relative;
min-height: 100svh;
display: flex;
flex-direction: column;
color: #fff;
background: var(--navy);
overflow: hidden;
}
.home-hero-bg {
position: absolute; inset: 0;
background: url("../img/hero-villa.jpg") center 42% / cover no-repeat;
}
.home-hero-overlay {
position: absolute; inset: 0;
background:
linear-gradient(97deg, rgba(11,34,51,.88) 0%, rgba(11,34,51,.66) 44%, rgba(11,34,51,.22) 78%, rgba(11,34,51,.12) 100%),
linear-gradient(180deg, rgba(11,34,51,.25) 0%, rgba(11,34,51,.05) 55%, rgba(11,34,51,.55) 100%);
}
.home-hero-main {
position: relative; z-index: 1;
flex: 1; display: flex; align-items: center;
padding: 40px 0 196px;
}
.home-hero-main .container { width: 100%; }
.home-hero h1 {
font-size: clamp(3rem, 6.9vw, 6.2rem);
line-height: .98;
font-weight: 800;
letter-spacing: -0.015em;
margin: 12px 0 26px;
max-width: 900px;
}
.home-hero-sub {
font-size: clamp(1.08rem, 1.6vw, 1.3rem);
line-height: 1.45;
color: #EAF2F7;
max-width: 660px;
}
.home-hero-actions { display: flex; gap: 18px; margin-top: 38px; flex-wrap: wrap; align-items: center; }
.home-hero-trust { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.22); padding: 19px 0; background: rgba(11,34,51,.55); backdrop-filter: blur(6px); }
.home-hero-trust-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px 40px; }
.home-hero-trust-row > span:nth-child(2) { justify-self: center; }
.home-hero-trust-row > span:last-child { justify-self: end; }
.home-hero-trust-row span { display: flex; align-items: center; gap: 9px; font-size: .92rem; font-weight: 500; color: rgba(255,255,255,.8); }
.home-hero-trust-row .home-hero-rating { font-size: 1.14rem; color: #fff; }
.home-hero-trust-row .home-hero-rating svg { width: 19px; height: 19px; }
.home-hero-trust-row > span:not(.home-hero-rating) { font-size: .86rem; color: rgba(255,255,255,.68); }
.home-hero-trust-row > span:not(.home-hero-rating) svg { width: 15px; height: 15px; }
.home-hero-trust-row span > svg { color: var(--ok); }
.home-hero-trust-row svg { flex: none; }
/* ---- Kicker ---- */
.home-kicker {
display: inline-block;
font-size: .8rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .14em;
color: var(--ink-soft);
}
.home-kicker-light { color: rgba(255,255,255,.96); }
/* ---- Bottoni ---- */
.home-btn {
display: inline-flex; align-items: center; gap: 12px;
padding: 16px 30px; border-radius: 99px;
font-weight: 700; font-size: 1.02rem;
border: 2px solid transparent; transition: .2s; cursor: pointer;
}
.home-btn-primary { background: var(--brand); color: #fff; }
.home-btn-primary:hover { background: var(--brand-dark); color: #fff; transform: translateY(-1px); }
.home-btn-ghost { border-color: rgba(255,255,255,.6); color: #fff; }
.home-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }
.home-btn-outline { border-color: var(--navy); color: var(--navy); margin-top: 26px; }
.home-btn-outline:hover { background: var(--navy); color: #fff; }
/* ---- Fascia marchi trattati (press band) ---- */
.home-brands { background: var(--bg-soft); padding: 112px 0; }
.home-brands-label {
text-align: center;
font-size: .78rem; font-weight: 600;
text-transform: uppercase; letter-spacing: .15em;
color: var(--ink-soft);
margin-bottom: 28px;
}
.home-brands-row {
list-style: none; margin: 0; padding: 0;
display: flex; align-items: center; justify-content: space-between;
gap: 18px 36px; flex-wrap: wrap;
}
.home-brands-row li {
color: #8496a4;
line-height: 1; white-space: nowrap;
font-size: 1.06rem;
}
.hb-viessmann { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .96rem; }
.hb-ariston { font-weight: 600; letter-spacing: .2em; font-size: 1.02rem; }
.hb-roca { font-weight: 800; font-size: 1.18rem; letter-spacing: .01em; }
.hb-biasi { font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: .07em; font-size: 1rem; }
.hb-riello { font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 1rem; }
.hb-fontecal { font-weight: 700; font-style: italic; letter-spacing: .01em; }
.hb-airwell { font-weight: 400; letter-spacing: .18em; font-size: 1rem; }
.hb-haier { font-weight: 700; letter-spacing: .03em; font-size: 1.12rem; }
/* ---- Sezioni ariose ---- */
.home-section { padding: 118px 0; }
.home-section.home-team-section { padding-bottom: 128px; }
.home-soft { background: var(--bg-soft); }
.home-h2 { font-size: clamp(1.9rem, 3.2vw, 2.85rem); line-height: 1.08; color: var(--navy); letter-spacing: -0.01em; margin-top: 12px; }
.home-head { max-width: 700px; margin: 0 auto 60px; text-align: center; }
.home-head p { color: var(--ink-soft); margin-top: 14px; font-size: 1.05rem; }
/* ---- Numeri reali (una sezione = un messaggio) ---- */
.home-numbers-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 0; text-align: center;
max-width: 1020px; margin: 0 auto;
align-items: start;
}
.home-number { padding: 8px 30px; }
.home-number + .home-number { border-left: 0; }
.home-number .n {
font-size: clamp(4rem, 6.2vw, 5.4rem);
font-weight: 800; color: var(--navy);
line-height: 1; letter-spacing: -0.02em;
}
.home-number .l {
color: var(--ink-soft); font-size: .98rem; line-height: 1.5;
margin: 14px auto 0; max-width: 240px;
}
.home-numbers-cert {
display: flex; align-items: center; justify-content: center; gap: 10px;
margin: 64px auto 0; padding: 13px 26px;
width: fit-content; max-width: 100%;
border: 1px solid var(--line); border-radius: 99px;
color: var(--ink-soft); font-size: .95rem;
}
.home-numbers-cert svg { flex: none; color: var(--ok); }
.home-numbers-cert strong { color: var(--navy); }
/* ---- Card servizi ---- */
.home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.home-card {
display: block; background: #fff;
border: 1px solid var(--line); border-radius: var(--radius);
padding: 32px 28px; transition: .2s; color: inherit;
}
.home-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.home-card-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 54px; height: 54px; border-radius: 14px;
background: var(--bg-soft); color: var(--navy);
margin-bottom: 20px;
}
.home-card h3 { color: var(--navy); font-size: 1.2rem; margin-bottom: 8px; }
.home-card p { color: var(--ink-soft); font-size: .97rem; }
.home-card-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-weight: 700; font-size: .93rem; color: var(--navy); }
.home-card:hover .home-card-link { color: var(--brand-dark); }
/* ---- Split Perché Ceraldi ---- */
.home-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.home-split-text { color: var(--ink-soft); margin-top: 16px; font-size: 1.02rem; }
.home-checks { list-style: none; margin-top: 26px; }
.home-checks li { display: flex; gap: 12px; margin-bottom: 14px; color: var(--ink-soft); font-size: .98rem; }
.home-checks li svg { flex: none; color: var(--ok); margin-top: 3px; }
.home-checks li strong { color: var(--ink); }
.home-photo { margin: 0; }
.home-photo img { border-radius: 14px; width: 100%; height: auto; }
.home-photo figcaption { font-size: .85rem; color: var(--ink-soft); margin-top: 12px; padding-bottom: 4px; }
/* ---- Team reale: strip scorrevole con le 12 card "Meet the team" ---- */
.home-teampeople .home-head { margin-bottom: 48px; }
.home-teamstrip {
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: #c3d4de transparent;
scroll-padding-inline: max(20px, calc((100vw - var(--maxw)) / 2 + 20px));
}
.home-teamstrip:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.home-teamstrip-track {
list-style: none; margin: 0;
display: flex; gap: 22px;
width: max-content;
padding: 10px max(20px, calc((100vw - var(--maxw)) / 2 + 20px)) 26px;
}
.home-teamstrip-track li { flex: 0 0 auto; scroll-snap-align: start; }
.home-teamstrip::-webkit-scrollbar { height: 8px; }
.home-teamstrip::-webkit-scrollbar-track { background: transparent; }
.home-teamstrip::-webkit-scrollbar-thumb { background: #c3d4de; border-radius: 99px; }
.home-teamstrip-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 12px 24px; flex-wrap: wrap;
margin-top: 14px;
}
.home-teamstrip-hint {
display: inline-flex; align-items: center; gap: 8px;
color: var(--ink-soft); font-size: .9rem; font-weight: 600;
}
.home-teamstrip-hint svg { color: #9db1bf; }
.home-teamstrip-link { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-weight: 700; font-size: .97rem; }
.home-teamstrip-link:hover { color: var(--brand-dark); }
/* ---- Area riservata ---- */
.home-portal { max-width: 640px; margin: 0 auto; text-align: center; }
.home-portal p { color: var(--ink-soft); margin-top: 14px; font-size: 1.02rem; }
.home-tag {
display: inline-block; font-size: .75rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .1em;
color: var(--navy); border: 1px solid var(--line);
background: #fff; padding: 6px 14px; border-radius: 99px;
}
/* ---- CTA finale ---- */
.home-cta { background: var(--navy); color: #fff; }
.home-cta-inner { text-align: center; max-width: 680px; }
.home-cta .home-h2 { color: #fff; }
.home-cta p { color: #c9dbe7; margin: 16px 0 32px; font-size: 1.05rem; }
/* ---- Footer contatti (icone SVG) ---- */
.home-footer-contacts li { display: flex; align-items: flex-start; gap: 9px; }
.home-footer-contacts svg { flex: none; margin-top: 4px; }
/* ---- Responsive homepage ---- */
@media (max-width: 920px) {
.home-grid { grid-template-columns: repeat(2, 1fr); }
.home-number { padding: 8px 18px; }
.home-split { grid-template-columns: 1fr; gap: 40px; }
.home-section { padding: 84px 0; }
.home-brands-row { justify-content: center; gap: 18px 32px; }
}
@media (max-width: 680px) {
.home-hero { min-height: 100svh; }
.home-hero-main { padding: 24px 0 76px; }
.home-hero-bg { background-position: 72% center; }
.home-hero h1 { font-size: clamp(2.6rem, 12.4vw, 3.35rem); letter-spacing: -0.01em; }
.home-hero-actions { flex-direction: column; align-items: stretch; }
.home-btn { justify-content: center; }
.home-hero-trust-row { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.home-hero-trust-row .home-hero-rating { order: -1; }
.home-grid { grid-template-columns: 1fr; }
.home-section { padding: 68px 0; }
.home-numbers-grid { grid-template-columns: 1fr; text-align: center; }
.home-number { padding: 30px 10px; }
.home-number:first-child { padding-top: 0; }
.home-number + .home-number { border-left: 0; border-top: 1px solid var(--line); }
.home-number .l { max-width: 280px; }
.home-brands { padding: 64px 0; }
.home-brands-label { margin-bottom: 22px; }
.home-brands-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 10px; justify-items: center; }
.home-numbers-cert { margin-top: 44px; text-align: left; padding: 12px 20px; border-radius: 99px; }
.home-head { margin-bottom: 40px; text-align: left; }
.home-numbers .home-head { text-align: center; }
.home-teampeople .home-head { margin-bottom: 30px; }
.home-teamstrip-track { gap: 16px; padding-bottom: 22px; }
.home-teamstrip-foot { align-items: flex-start; }
}
/* ============================================
ART DIRECTION v1.1 — tipografia display, motion, profondità
============================================ */
/* Tipografia display: Space Grotesk sui titoli grandi e sui numerali */
.home-hero h1, .home-h2, .home-number .n,
.hero h1, .page-hero h1, .section-head h2, .cta-band h2 {
font-family: var(--font-display);
}
.home-hero h1 { font-weight: 700; }
.home-h2, .page-hero h1 { letter-spacing: 0; font-weight: 700; }
.home-number .n { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Hero: scrim direzionale (denso sul testo, aperto sulla foto) + vignetta */
.home-hero-overlay {
background:
linear-gradient(100deg, rgba(11,34,51,.84) 0%, rgba(11,34,51,.70) 30%,
rgba(11,34,51,.56) 56%, rgba(11,34,51,.10) 86%, rgba(11,34,51,.04) 100%),
linear-gradient(180deg, rgba(11,34,51,.18) 0%, rgba(11,34,51,0) 34%,
rgba(11,34,51,0) 66%, rgba(11,34,51,.62) 100%),
radial-gradient(125% 95% at 50% 12%, rgba(11,34,51,0) 50%, rgba(11,34,51,.28) 100%);
}
@keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1); } }
.home-hero-bg { animation: heroZoom 1.8s cubic-bezier(.22,.61,.36,1) both; will-change: transform; }
/* Bottoni: profondità e focus */
.home-btn-primary { box-shadow: var(--shadow); }
.home-hero .home-btn-primary { color: var(--navy); box-shadow: 0 14px 30px rgba(3,12,20,.38); }
.home-hero .home-btn-primary:hover { color: var(--navy); }
.home-btn:focus-visible, .btn:focus-visible, .nav .cta:focus-visible {
outline: 3px solid rgba(1,174,242,.55); outline-offset: 2px;
}
.home-btn, .btn { transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s, background .2s, color .2s, border-color .2s; }
/* Card servizi: freccia che scorre, bordo che scompare a favore dell'ombra */
.home-card { transition: box-shadow .28s cubic-bezier(.22,.61,.36,1), transform .28s cubic-bezier(.22,.61,.36,1), border-color .28s; }
.home-card:hover { border-color: transparent; box-shadow: 0 10px 30px rgba(11,34,51,.10); transform: translateY(-5px); }
.home-card-link svg { transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.home-card:hover .home-card-link svg { transform: translateX(4px); }
/* Foto: micro-zoom al passaggio */
.home-photo { overflow: hidden; border-radius: 14px; box-shadow: var(--shadow); }
.home-photo img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.home-photo:hover img { transform: scale(1.02); }
.home-photo figcaption { padding: 0 4px; }
/* Press band: più aria e presenza al passaggio */
.home-brands { padding: 112px 0; }
.home-brands-row li { opacity: .78; transition: opacity .25s, color .25s; }
.home-brands-row li:hover { opacity: 1; color: var(--navy); }
/* Kicker con hairline navy (monocromo, non conta come accento) */
.home-head .home-kicker { position: relative; padding-bottom: 14px; }
.home-head .home-kicker::after {
content: ""; position: absolute; left: 50%; bottom: 0;
width: 28px; height: 2px; transform: translateX(-50%);
background: var(--navy); opacity: .35; border-radius: 2px;
}
/* Team strip: card che si alzano */
.home-teamstrip-track li:hover img { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(11,34,51,.10); }
/* Reveal on scroll (JS aggiunge .rv / .rv.in) */
.rv { opacity: 0; transform: translateY(26px); }
.rv.in { opacity: 1; transform: none; transition: opacity .7s ease, transform .75s cubic-bezier(.22,.61,.36,1); }
.rv-d1.in { transition-delay: .08s; } .rv-d2.in { transition-delay: .16s; } .rv-d3.in { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
.home-hero-bg { animation: none; }
.rv { opacity: 1; transform: none; }
.home-photo img, .home-card, .home-btn, .btn,
}
/* ============================================
RECENSIONI GOOGLE — sezione navy con carosello (v0.6)
============================================ */
.home-reviews { background: var(--navy); color: #fff; overflow: hidden; }
.home-reviews-grid {
display: grid; grid-template-columns: 300px 1fr;
gap: 56px; align-items: center;
}
.home-reviews-score {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(4rem, 6.2vw, 5.4rem); line-height: 1; color: #fff;
margin-top: 18px;
}
.home-review-stars { display: flex; gap: 3px; color: #FBB000; }
.home-reviews-bigstars { margin: 14px 0 10px; }
.home-reviews-bigstars svg { width: 22px; height: 22px; }
.home-reviews-count { color: #c9dbe7; font-size: 1rem; }
.home-reviews-count strong { color: #fff; }
.home-reviews-link {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 26px; color: #fff; font-weight: 700; font-size: .97rem;
border-bottom: 2px solid rgba(255,255,255,.35); padding-bottom: 4px;
}
.home-reviews-link:hover { color: var(--brand); border-color: var(--brand); }
.home-reviews-carousel { position: relative; min-width: 0; }
.home-reviews-track {
display: flex; gap: 20px;
overflow-x: auto; scroll-snap-type: x mandatory;
scrollbar-width: none; -ms-overflow-style: none;
padding: 8px 2px 14px;
}
.home-reviews-track::-webkit-scrollbar { display: none; }
.home-review-card {
flex: 0 0 340px; scroll-snap-align: start;
background: #fff; color: var(--ink);
border-radius: 14px; padding: 26px 24px;
box-shadow: var(--shadow);
}
.home-review-card header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.home-review-card header > svg { margin-left: auto; flex: none; }
.home-review-avatar {
width: 42px; height: 42px; border-radius: 50%; flex: none;
background: var(--bg-soft); color: var(--navy);
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 1rem;
}
.home-review-card header strong { display: block; font-size: .95rem; color: var(--navy); line-height: 1.3; }
.home-review-card header time { font-size: .8rem; color: var(--ink-soft); }
.home-review-card .home-review-stars svg { width: 15px; height: 15px; }
.home-review-card p { margin-top: 12px; font-size: .93rem; color: var(--ink-soft); line-height: 1.65; }
.home-reviews-arrow { z-index: 4;
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
background: #fff; color: var(--navy);
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow);
transition: transform .2s, background .2s, color .2s;
}
.home-reviews-arrow:hover { background: var(--navy); color: #fff; transform: translateY(-50%) scale(1.05); }
.home-reviews-arrow[data-dir="-1"] { left: -22px; }
.home-reviews-arrow[data-dir="1"] { right: -22px; }
.home-reviews-arrow:focus-visible { outline: 3px solid rgba(1,174,242,.55); outline-offset: 2px; }
/* rating nella trust bar del hero */
.home-hero-rating strong { color: #fff; }
/* ---- Card servizi: numerazione editoriale (v0.6 tailor-made) ---- */
.home-card { position: relative; }
.home-card-num {
position: absolute; top: 26px; right: 26px;
font-family: var(--font-display); font-weight: 600;
font-size: 1.05rem; letter-spacing: .06em;
color: #b8c7d2;
}
.home-card:hover .home-card-num { color: var(--navy); }
@media (max-width: 920px) {
.home-reviews-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; }
.home-reviews-brand .home-review-stars { justify-content: center; }
.home-reviews-arrow { display: none; }
.home-review-card { flex-basis: min(320px, 82vw); }
}
/* ---- powered by Google (sezione recensioni) ---- */
.home-reviews-powered {
display: flex; align-items: baseline; gap: 8px;
margin: 6px 0 14px; color: #8fa8b8; font-size: .82rem;
}
.home-reviews-powered svg { transform: translateY(3px); }
.home-review-mute { color: var(--ink-soft); font-style: italic; }
/* ---- Richiesta rapida in homepage (v0.7) ---- */
.home-request { background: #fff; }
.home-request-grid {
display: grid; grid-template-columns: minmax(300px, 5fr) 7fr;
gap: 56px; align-items: start;
}
.home-request-copy p a { color: var(--navy); text-decoration: none; }
.home-request-points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.home-request-points li { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: .98rem; }
.home-request-points svg { color: var(--ok); flex: none; }
.home-request-form {
min-width: 0;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: 34px; box-shadow: var(--shadow);
}
.hr-hp { display: none; }
.hr-services { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.hr-services legend {
font-family: var(--font-display); font-weight: 600; letter-spacing: .02em;
font-size: 1.15rem; color: var(--navy); margin-bottom: 14px;
}
.hr-chips { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.hr-chip { cursor: pointer; }
.hr-chip { position: relative; }
.hr-chip input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.hr-chip span {
display: inline-block; padding: 9px 18px; border-radius: 99px;
border: 1.5px solid #C3D2DC; color: var(--ink); font-size: .92rem; font-weight: 600;
background: #fff; transition: all .18s ease; user-select: none;
}
.hr-chip:hover span { border-color: var(--navy); }
.hr-chip.on span { background: var(--navy); border-color: var(--navy); color: #fff; }
.hr-chip input:focus-visible + span { outline: 3px solid rgba(1,174,242,.55); outline-offset: 2px; }
.hr-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hr-field label { display: block; font-size: .86rem; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.hr-field input, .hr-field textarea {
width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px;
font: inherit; color: var(--ink); background: #fff; transition: border-color .18s ease;
}
.hr-field input:focus, .hr-field textarea:focus { outline: none; border-color: var(--brand); }
.hr-field-full { grid-column: 1 / -1; }
.hr-privacy { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin: 18px 0 20px; font-size: .86rem; color: var(--ink-soft); cursor: pointer; }
.hr-privacy input { flex: none; width: 17px; height: 17px; accent-color: var(--navy); margin: 0; }
.hr-privacy a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.hr-submit { width: 100%; justify-content: center; }
@media (max-width: 920px) {
.home-request-grid { grid-template-columns: 1fr; gap: 34px; }
.home-request-form {
min-width: 0; padding: 26px 20px; }
.hr-fields { grid-template-columns: 1fr; }
}
/* ---- Animazioni custom v0.7 (leggere, CSS-only, rispettano reduced-motion) ---- */
@media (prefers-reduced-motion: no-preference) {
.home-hero h1, .home-hero .home-hero-sub, .home-hero .home-hero-actions, .home-hero .home-kicker {
opacity: 0; transform: translateY(18px);
animation: cer-rise .7s cubic-bezier(.22,.61,.36,1) forwards;
}
.home-hero .home-kicker { animation-delay: .05s; }
.home-hero h1 { animation-delay: .15s; }
.home-hero .home-hero-sub { animation-delay: .3s; }
.home-hero .home-hero-actions { animation-delay: .45s; }
@keyframes cer-rise { to { opacity: 1; transform: none; } }
/* micro-interazione CTA: freccia che scivola */
.home-btn svg { transition: transform .22s cubic-bezier(.22,.61,.36,1); }
.home-btn:hover svg { transform: translateX(4px); }
}
/* ---- v0.7 round25: card recensioni disciplinate ---- */
.home-review-card p {
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
overflow: hidden; margin-bottom: 0;
}
.home-review-avatar { background: #EAF3F8 !important; color: var(--navy) !important; font-weight: 800; font-family: var(--font-body); font-size: 1rem; }
.home-review-card { height: auto; }
/* submit: ombra di sistema, non glow colorato */
.hr-submit { box-shadow: var(--shadow); }
/* chips 3+3: larghezza minima uniforme */
.hr-chip { flex: 0 0 auto; }
/* form: griglia verticale coerente */
.hr-fields { margin-top: 4px; }
.hr-field label { margin-bottom: 8px; }
.hr-services legend { margin-bottom: 16px; }
.hr-services { margin-bottom: 24px; }
/* ---- round25: ritmo verticale e raccordi ---- */
.home-section:has(.home-portal) { padding: 72px 0; }
.home-portal {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 44px 48px; max-width: 760px;
}
.home-portal p { max-width: 560px; margin-left: auto; margin-right: auto; }
@media (max-width: 920px) {
/* la coppia H2→paragrafo mantiene il respiro anche su mobile */
.home-request-copy .home-h2 { margin-bottom: 14px; }
/* badge certificazione: non spezzare in colonne */
.home-numbers-cert { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; line-height: 1.5; }
/* frecce carosello visibili anche su mobile, sotto il track */
.home-reviews-arrow { display: inline-flex; position: static; transform: none; margin: 18px 8px 0; }
.home-reviews-carousel { display: flex; flex-direction: column; align-items: center; }
.home-reviews-track { order: 0; width: 100%; }
.home-reviews-arrow[data-dir="-1"] { order: 1; }
.home-reviews-arrow[data-dir="1"] { order: 2; }
.home-reviews-arrow:hover { transform: scale(1.05); }
}
/* ---- round26: rifiniture da critica ---- */
/* respiro H2 -> lead nella richiesta */
.home-request-copy .home-h2 { margin-bottom: 16px; }
/* chips: altezza uniforme e testo centrato */
.hr-chip span { min-height: 44px; display: flex; align-items: center; justify-content: center; }
/* press band più leggibile (resta monocroma) */
.home-brands-row li { color: #6E7F8C; opacity: 1; }
/* area riservata: banner a tutta colonna, in ritmo */
.home-section:has(.home-portal) { padding: 110px 0; }
.home-portal {
max-width: none; display: grid; grid-template-columns: minmax(240px, 4fr) 8fr;
align-items: center; gap: 48px; text-align: left; padding: 40px 48px;
}
.home-portal-left .home-kicker { display: block; margin-bottom: 8px; }
.home-portal-right { display: flex; align-items: center; gap: 32px; }
.home-portal-right p { flex: 1; margin: 0; }
.home-portal > * { margin: 0; }
.home-portal .home-tag { flex: none; }
.home-portal .home-h2 { font-size: clamp(1.5rem, 2vw, 1.8rem); margin: 0; }
.home-portal p { flex: 1; max-width: none; margin: 0; }
.home-portal .home-btn { flex: none; white-space: nowrap; }
@media (max-width: 920px) {
.home-portal { grid-template-columns: 1fr; text-align: center; gap: 18px; }
.home-portal-right { flex-direction: column; gap: 16px; }
/* frecce carosello affiancate e lockup centrato */
.home-reviews-carousel { flex-flow: row wrap; justify-content: center; }
.home-reviews-track { flex: 0 0 100%; }
.home-reviews-arrow { margin: 18px 10px 0; }
.home-reviews-powered { justify-content: center; }
}
/* ---- round27 ---- */
/* titolo banner area riservata: registro lead, non display */
.home-portal p.home-portal-title { font-family: var(--font-body); font-weight: 650; font-size: 1.125rem; color: var(--navy); margin: 0; }
/* sfumatura di uscita del carosello verso il navy (niente schegge tagliate) */
.home-reviews-carousel::after {
content: ""; position: absolute; top: 0; bottom: 0; width: 64px; z-index: 1; pointer-events: none;
}
.home-reviews-carousel::after { right: 0; background: linear-gradient(to left, var(--navy), transparent); }
.home-reviews-arrow { z-index: 4; }
/* quinta stella parziale (aggregato 4,9) */
.star-part { position: relative; display: inline-block; width: 22px; height: 22px; vertical-align: top; }
.star-part svg { position: absolute; left: 0; top: 0; }
.star-part svg:first-child { color: rgba(255,255,255,.28); }
.star-part svg:last-child { clip-path: inset(0 15% 0 0); }
/* trust sotto il submit */
.hr-trust { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 14px 0 0; font-size: .86rem; color: var(--ink-soft); }
.hr-trust strong { color: var(--navy); }
/* dettagli form non-default */
.hr-field textarea { resize: none; }
@media (max-width: 920px) {
.home-reviews-carousel::after { display: none; }
}
/* ---- round29 ---- */
.home-head-light .home-h2 { color: #fff; }
.home-h2-light { color: #fff; }
.home-reviews .home-head { margin-bottom: 48px; }
/* freccia disabilitata a inizio/fine corsa */
.home-reviews-arrow[disabled] { opacity: .35; pointer-events: none; }
.home-reviews-arrow { border: 1px solid var(--line); }
/* barra sticky mobile di conversione */
.home-mobilebar { display: none; }
@media (max-width: 720px) {
.home-mobilebar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
display: flex; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
border-top: 1px solid var(--line);
transform: translateY(110%); transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.home-mobilebar.show { transform: none; }
.home-mobilebar .home-btn { flex: 1; justify-content: center; padding: 12px 10px; font-size: .95rem; }
.home-btn-ghostnavy { border: 1.5px solid var(--navy); color: var(--navy); border-radius: 99px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
body.home { scroll-padding-bottom: 70px; }
}
/* scrim hero più protettivo su schermi stretti */
@media (max-width: 560px) {
.home-hero-overlay { background: linear-gradient(180deg, rgba(11,34,51,.22) 0%, rgba(11,34,51,.62) 20%, rgba(11,34,51,.70) 60%, rgba(11,34,51,.34) 80%, rgba(11,34,51,.26) 100%) !important; }
}
/* flotta: cornice più contenuta (foto 1x) */
.home-photo { max-width: 430px; margin-left: auto; }
/* ---- round31: QUIZ a step ---- */
.qz-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.qz-progress-label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.qz-progress-label b { color: var(--navy); }
.qz-progress-bar { flex: 1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.qz-progress-bar i { display: block; height: 100%; background: var(--navy); border-radius: 4px; transition: width .35s cubic-bezier(.22,.61,.36,1); }
.qz-q { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--navy); margin: 0 0 4px; letter-spacing: .01em; }
.qz-hint { font-size: .88rem; color: var(--ink-soft); margin: 0 0 16px; }
.qz-step { animation: none; }
@media (prefers-reduced-motion: no-preference) {
.qz-step-on { animation: qz-in .32s cubic-bezier(.22,.61,.36,1); }
@keyframes qz-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
}
.hr-chip span { display: inline-flex; align-items: center; gap: 8px; }
.hr-chip svg { flex: none; }
.qz-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qz-card { position: relative; cursor: pointer; }
.qz-card input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.qz-card span {
display: block; padding: 14px 16px; border: 1.5px solid #C3D2DC; border-radius: 12px;
transition: all .18s ease; background: #fff;
}
.qz-card span b { display: block; color: var(--navy); font-size: .98rem; }
.qz-card span small { color: var(--ink-soft); font-size: .84rem; }
.qz-card:hover span { border-color: var(--navy); }
.qz-card.on span { border-color: var(--navy); background: var(--navy); }
.qz-card.on span b, .qz-card.on span small { color: #fff; }
.qz-card input:focus-visible + span { outline: 3px solid rgba(1,174,242,.55); outline-offset: 2px; }
.qz-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; }
.qz-nav .home-btn { margin-left: auto; }
.qz-back {
background: none; border: 0; font: inherit; font-weight: 600; color: var(--ink-soft);
cursor: pointer; padding: 10px 6px; display: inline-flex; align-items: center; gap: 6px;
}
.qz-back::before { content: "←"; }
.qz-back:hover { color: var(--navy); }
.qz-error { color: #B4231F; font-size: .88rem; margin: 12px 0 0; }
.hr-submit { width: auto; }
/* ---- round31: FAQ ---- */
.home-faq-grid { display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: 64px; align-items: start; }
.home-faq-illu { width: 100%; max-width: 340px; margin-top: 34px; }
.home-faq-list { display: grid; gap: 12px; }
.home-faq-item {
background: #fff; border: 1px solid var(--line); border-radius: 14px;
box-shadow: var(--shadow); overflow: hidden;
}
.home-faq-item summary {
list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
gap: 18px; padding: 20px 24px; font-weight: 650; color: var(--navy); font-size: 1.02rem;
}
.home-faq-item summary::-webkit-details-marker { display: none; }
.home-faq-x { position: relative; flex: none; width: 22px; height: 22px; }
.home-faq-x::before, .home-faq-x::after {
content: ""; position: absolute; left: 50%; top: 50%; background: var(--navy);
transform: translate(-50%,-50%); transition: transform .25s cubic-bezier(.22,.61,.36,1);
}
.home-faq-x::before { width: 14px; height: 2px; }
.home-faq-x::after { width: 2px; height: 14px; }
.home-faq-item[open] .home-faq-x::after { transform: translate(-50%,-50%) rotate(90deg); }
.home-faq-a { padding: 0 24px; }
.home-faq-a p { color: var(--ink-soft); padding-bottom: 20px; margin: 0; max-width: 62ch; }
.home-faq-a a { color: var(--navy); }
.home-faq-item[open] summary { padding-bottom: 10px; }
@media (prefers-reduced-motion: no-preference) {
.home-faq-a { overflow: hidden; }
.home-faq-item[open] .home-faq-a { animation: faq-open .3s cubic-bezier(.22,.61,.36,1); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 920px) {
.home-faq-grid { grid-template-columns: 1fr; gap: 30px; }
.home-faq-illu { display: none; }
.qz-cards { grid-template-columns: 1fr; }
}
/* ---- round32 ---- */
/* i passi del quiz non ereditano il padding delle section generiche */
.qz-step { padding: 0 !important; }
/* domanda del quiz in registro display piccolo, dominante sul blocco */
.qz-q { font-size: 1.6rem; }
/* telefono in header (solo desktop largo) */
.nav-tel a { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--navy); }
@media (max-width: 1080px) { .nav-tel { display: none; } }
/* banner mobile allineato come il resto */
@media (max-width: 920px) {
.home-portal { text-align: left; }
.home-portal-right { align-items: flex-start; }
}
.home-portal p.home-portal-title { font-size: 1.125rem; }
/* flotta più contenuta */
.home-photo { max-width: 390px; }
/* ---- round33 ---- */
.hb-ariston, .hb-airwell { font-weight: 700; letter-spacing: .04em; }
/* ---- round34 (polish finale) ---- */
/* freccia disabilitata: piena e a contrasto ridotto, mai trasparente sulle card */
.home-reviews-arrow[disabled] { opacity: 1; background: var(--navy-2); border-color: transparent; color: rgba(255,255,255,.38); pointer-events: none; }
/* frecce leggermente più fuori dal bleed */
.home-reviews-arrow[data-dir="-1"] { left: -26px; }
.home-reviews-arrow[data-dir="1"] { right: -26px; }
/* fascia marchi: taglia ottica livellata */
.hb-ariston, .hb-airwell, .hb-haier { font-size: 1.08em; }
/* mobile: padding fascia marchi bilanciato */
@media (max-width: 720px) {
.home-brands { padding-bottom: 34px; }
.home-brands .container { padding-bottom: 0; }
}
/* ---- Hero giro 3: piega, silhouette, scala tonale ---- */
:root { --hdr-h: 71px; }
.home-hero { padding: 0; min-height: calc(100svh - var(--hdr-h)); }
.home-hero-main { padding: 40px 0 125px; }
.home-hero-sub { max-width: 400px; text-wrap: balance; font-size: clamp(1.14rem, 1.6vw, 1.3rem); }
.home-kicker-light { color: rgba(255,255,255,.78); }
.home-hero-trust-row .home-hero-rating { font-size: clamp(1.04rem, 1.4vw, 1.14rem); }
.home-hero-trust-row .home-hero-rating svg { width: clamp(17px, 1.35vw, 19px); height: clamp(17px, 1.35vw, 19px); }
@media (max-width: 680px) {
.home-hero-main { padding: 24px 0 64px; }
}
/* ---- Hero giro 4 (chiusura): banda tablet 681-872 ---- */
@media (min-width: 681px) and (max-width: 839px) {
.home-hero-trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; }
.home-hero-trust-row .home-hero-rating { order: -1; flex: 0 0 100%; justify-content: center; }
}
@media (min-width: 681px) and (max-width: 872px) { :root { --hdr-h: 76px; } }
@media (max-width: 680px) { .home-hero-trust-row > span:not(.home-hero-rating) svg { margin-right: 2px; } }
/* ============================================
TEMA SOCIAL v1.0 — linguaggio grafico Ceraldi
petrolio / ambra / ghiaccio / oro / Poppins
============================================ */
body { background: var(--ice); }
section, .home-request { background: #fff; }
section.soft, .home-soft, .home-brands { background: var(--ice); }
/* ---- Header bianco, nav petrolio, CTA ambra (tutte le pagine) ---- */
.topbar { display: none; }
header.site { background: #fff; border-bottom: 0; box-shadow: 0 1px 0 #DCE8F1; }
.nav { padding: 16px 20px; }
.nav .logo img { height: 48px; }
.nav ul a { color: var(--navy); font-weight: 600; }
.nav ul a:hover, .nav ul a.active { color: var(--brand-dark); }
.nav-tel a { color: var(--navy); font-family: var(--font-display); font-weight: 700; }
.nav .cta, body.home .nav .cta {
font-family: var(--font-display); font-weight: 700; font-size: .8rem;
text-transform: uppercase; letter-spacing: .12em;
background: var(--brand); color: #fff; border: 0;
padding: 14px 24px; border-radius: 12px;
}
.nav .cta:hover, body.home .nav .cta:hover { background: var(--brand-dark); color: #fff; }
.hamburger span { background: var(--navy); }
/* ---- Bottoni: rettangolo ambra uppercase (linguaggio social) ---- */
.home-btn, .btn {
border-radius: 13px;
font-family: var(--font-display); font-weight: 700; font-size: .9rem;
text-transform: uppercase; letter-spacing: .12em;
}
.home-btn-primary, .btn-primary { background: var(--brand); color: #fff; }
.home-btn-primary:hover, .btn-primary:hover { background: var(--brand-dark); color: #fff; }
.home-btn-outline { border-color: var(--navy); color: var(--navy); }
.home-btn-outline:hover { background: var(--navy); color: #fff; }
.home-btn:focus-visible, .btn:focus-visible, .nav .cta:focus-visible {
outline: 3px solid rgba(236,165,60,.55); outline-offset: 2px;
}
.hr-chip input:focus-visible + span, .qz-card input:focus-visible + span {
outline: 3px solid rgba(236,165,60,.55); outline-offset: 2px;
}
.home-teamstrip:focus-visible { outline: 2px solid var(--brand); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); border-color: transparent; }
.hr-field input:focus, .hr-field textarea:focus { outline: none; border-color: var(--brand); }
/* ---- Kicker nel registro social: tracking largo, petrolio ---- */
.home-kicker, .section-head .kicker, .hero .kicker, .page-hero .kicker {
font-family: var(--font-display); font-weight: 700;
letter-spacing: .24em; color: var(--navy); opacity: .72;
}
.home-kicker-light { color: rgba(255,255,255,.82); opacity: 1; }
.home-head .home-kicker::after { background: var(--gold); opacity: .9; width: 34px; height: 2px; }
/* ---- Titoli Poppins con punto ambra dove già presente nel testo ---- */
.home-h2, .section-head h2, .page-hero h1, .hero h1 { letter-spacing: -.02em; font-weight: 700; }
.home-h2 .dot, h1 .dot { color: var(--brand); }
/* ---- Superfici scure: petrolio profondo ---- */
.home-reviews, .home-cta, footer.site { background: var(--navy-2); }
.home-reviews-carousel::after { background: linear-gradient(to left, var(--navy-2), transparent); }
.home-reviews-arrow[disabled] { background: var(--navy); }
.cta-band { background: var(--navy-2); }
.cta-band .btn { background: var(--brand); color: #fff; }
.cta-band .btn:hover { background: var(--brand-dark); color: #fff; }
.cta-band p { color: #C8DCE9; }
/* ---- Hero pagine interne: petrolio, kicker ambra ---- */
.hero, .page-hero { background: linear-gradient(115deg, var(--navy-2), var(--navy)); }
.hero .kicker, .page-hero .kicker { color: #F0B95C; opacity: 1; letter-spacing: .2em; }
.hero p.lead, .page-hero p { color: #C8DCE9; }
/* ---- Card: raggio social, hover ambra ---- */
.card:hover { border-color: var(--brand); }
.card .icon { background: var(--navy); }
.home-card { border-radius: var(--radius); }
.home-card-icon { background: var(--ice); color: var(--navy); border-radius: 14px; }
.home-card:hover { box-shadow: 0 14px 36px rgba(23,76,105,.14); }
.home-card-num { color: #A9BFCE; }
.home-card:hover .home-card-num { color: var(--brand-dark); }
.home-card:hover .home-card-link { color: var(--brand-dark); }
/* ---- Numeri: Poppins 800 petrolio ---- */
.home-number .n { font-weight: 800; color: var(--navy); }
.home-numbers-cert { background: #fff; border-color: var(--line); }
/* ---- Recensioni: card chiara con cornice oro sfalsata (dalle card social) ---- */
.home-review-card { position: relative; z-index: 0; border-radius: 18px; }
.home-review-card::after {
content: ""; position: absolute; inset: 0; z-index: -1;
border: 1.5px solid var(--gold); border-radius: 18px;
transform: translate(9px, 9px);
}
.home-reviews-track { padding: 8px 12px 24px 2px; }
.home-review-avatar { background: var(--ice) !important; color: var(--navy) !important; }
.home-reviews-arrow:hover { background: var(--brand); color: #fff; }
.home-reviews-link:hover { color: #F0B95C; border-color: #F0B95C; }
/* ---- Chips e quiz: stato attivo petrolio ---- */
.hr-chip.on span { background: var(--navy); border-color: var(--navy); }
.hr-chip:hover span, .qz-card:hover span { border-color: var(--navy); }
.qz-card.on span { background: var(--navy); border-color: var(--navy); }
.qz-progress-bar i { background: var(--brand); }
.qz-q { font-weight: 700; }
/* ---- FAQ: raggio social ---- */
.home-faq-item { border-radius: 16px; }
/* ---- Portal / tag ---- */
.home-tag { color: var(--navy); border-color: var(--gold); }
/* ---- Footer: logo su bianco, link chiari su petrolio ---- */
footer.site { color: #B7CCDA; }
footer.site a { color: #B7CCDA; }
footer.site .legal { border-top-color: rgba(255,255,255,.14); }
/* ---- Sticky bar mobile ---- */
@media (max-width: 720px) {
.home-btn-ghostnavy { border-color: var(--navy); color: var(--navy); border-radius: 13px; }
}
/* ---- Hairline oro sotto le testate di sezione centrate ---- */
.section-head .kicker { display: inline-block; }
/* ============================================
HERO POSTER v1.0 (dal prototipo approvato v3.1)
============================================ */
.ph-hero { background: var(--ice); overflow: clip; padding: 0; }
.ph-wrap { max-width: 1280px; margin: 0 auto; padding: 32px 28px 68px; }
.ph-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.ph-kicker {
font-family: var(--font-display); font-weight: 700; font-size: .82rem;
text-transform: uppercase; letter-spacing: .26em; color: var(--navy); opacity: .72; margin: 0;
}
.ph-trust {
display: inline-flex; align-items: center; gap: 12px;
background: #fff; border-radius: 99px; padding: 11px 20px;
box-shadow: 0 8px 24px rgba(23,76,105,.10);
}
.ph-stars { display: flex; gap: 2px; }
.ph-stars svg { width: 18px; height: 18px; fill: #F2A93B; }
.ph-trust-txt { font-size: .95rem; color: #3A5A70; white-space: nowrap; }
.ph-trust-txt b { color: var(--navy); }
.ph-h1 {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(3.2rem, 6.5vw, 6rem);
line-height: .98; letter-spacing: -.03em; color: var(--navy);
margin: 0 0 14px;
}
.ph-h1 .thin { font-weight: 600; }
.ph-h1 .dot { color: var(--brand); }
.ph-lead {
font-family: var(--font-display); font-weight: 600;
font-size: clamp(1rem, 1.5vw, 1.3rem); letter-spacing: .02em;
color: var(--ink); opacity: .85; margin: 0 0 28px;
}
.ph-band { position: relative; margin-bottom: 112px; }
.ph-shot {
position: relative; margin: 0;
height: clamp(340px, 42vh, 500px);
border-radius: 40px; overflow: hidden;
box-shadow: 0 34px 80px rgba(15,52,73,.30);
}
.ph-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 62%; }
.ph-shot::after { content: ""; position: absolute; inset: 0; border-radius: 40px;
background: linear-gradient(115deg, rgba(20,70,95,.34) 0%, rgba(20,70,95,.06) 55%, rgba(20,70,95,0) 100%);
pointer-events: none; }
.ph-panel {
position: absolute; left: 40px; bottom: -56px; z-index: 3;
background: var(--navy-2); color: #fff;
border-radius: 26px; padding: 30px 32px 30px;
width: min(548px, calc(100% - 80px));
box-shadow: 0 26px 60px rgba(15,52,73,.35);
}
.ph-hook {
font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
text-transform: uppercase; letter-spacing: .12em; line-height: 1.42;
color: #DCEBF5; margin: 0 0 18px;
padding-bottom: 18px; border-bottom: 1.5px solid rgba(217,164,74,.6);
}
.ph-hook b { color: #fff; font-weight: 800; display: block; }
.ph-row { display: flex; gap: 12px; align-items: stretch; }
.ph-btn-amber {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--font-display); font-weight: 700; font-size: .9rem;
text-transform: uppercase; letter-spacing: .13em; text-decoration: none;
background: var(--brand); color: #fff; padding: 18px 30px; border-radius: 13px;
transition: background .18s ease;
}
.ph-btn-amber:hover { background: var(--brand-dark); color: #fff; }
.ph-btn-amber svg { transition: transform .22s ease; }
.ph-btn-amber:hover svg { transform: translateX(3px); }
.ph-btn-tel {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
font-family: var(--font-display); font-weight: 700; font-size: .98rem; letter-spacing: .02em;
color: #fff; text-decoration: none;
border: 1.5px solid rgba(255,255,255,.38); border-radius: 13px; padding: 15px 20px;
transition: border-color .18s ease, background .18s ease;
}
.ph-btn-tel:hover { border-color: var(--brand); background: rgba(236,165,60,.12); color: #fff; }
.ph-btn-amber:focus-visible, .ph-btn-tel:focus-visible { outline: 3px solid rgba(236,165,60,.55); outline-offset: 2px; }
.ph-badge { position: absolute; right: 40px; top: -34px; width: 150px; height: 150px; z-index: 3;
filter: drop-shadow(0 10px 24px rgba(23,76,105,.20)); }
.ph-badge svg { width: 100%; height: 100%; }
.ph-badge .rot { animation: ph-spin 30s linear infinite; transform-origin: 50% 50%; }
@keyframes ph-spin { to { transform: rotate(360deg); } }
.ph-badge text { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .18em; fill: var(--navy); }
.ph-badge .anno { font-family: var(--font-display); font-weight: 800; font-size: 29px; fill: var(--navy); }
.ph-services {
position: absolute; right: 40px; bottom: 28px; z-index: 2;
display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
}
.ph-services span {
font-family: var(--font-display); font-weight: 600; font-size: .74rem;
text-transform: uppercase; letter-spacing: .14em; color: #fff;
background: rgba(16,54,74,.55); backdrop-filter: blur(6px);
padding: 9px 16px; border-radius: 99px; border: 1px solid rgba(255,255,255,.25);
}
/* entrata leggera (rispetta reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
.ph-top, .ph-h1, .ph-lead, .ph-band {
opacity: 0; transform: translateY(18px);
animation: cer-rise .7s cubic-bezier(.22,.61,.36,1) forwards;
}
.ph-top { animation-delay: .05s; }
.ph-h1 { animation-delay: .14s; }
.ph-lead { animation-delay: .26s; }
.ph-band { animation-delay: .38s; }
}
@media (prefers-reduced-motion: reduce) { .ph-badge .rot { animation: none; } }
/* schermi desktop bassi (1366x768, 1280x720): tutto sopra la piega */
@media (min-width: 941px) and (max-height: 800px) {
.ph-wrap { padding-top: 24px; }
.ph-shot { height: max(300px, 38vh); }
}
/* mobile */
@media (max-width: 940px) {
.ph-wrap { padding: 30px 20px 72px; }
.ph-top { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.ph-trust { padding: 10px 14px; gap: 10px; }
.ph-trust-txt { font-size: .88rem; }
.ph-h1 { font-size: clamp(2.9rem, 12.5vw, 3.6rem); }
.ph-lead { margin-bottom: 30px; }
.ph-band { margin-bottom: 0; }
.ph-shot { height: 320px; border-radius: 28px; }
.ph-badge { width: 108px; height: 108px; right: 16px; top: -26px; }
.ph-badge text { font-size: 12px; }
.ph-services { display: none; }
.ph-panel {
position: relative; left: auto; bottom: auto; z-index: 3; width: auto;
margin: -48px 14px 0; border-radius: 22px; padding: 24px 22px;
}
.ph-hook { font-size: .92rem; letter-spacing: .1em; }
.ph-row { flex-direction: column; align-items: stretch; }
.ph-btn-amber { justify-content: center; font-size: .82rem; letter-spacing: .11em; padding: 17px 20px; white-space: nowrap; }
}
/* ---- Header: hamburger fino a 1000px (la nav Poppins non ci sta prima) ---- */
@media (max-width: 1000px) {
.nav ul {
position: fixed; inset: 80px 0 auto 0; background: #fff; flex-direction: column;
padding: 20px; gap: 16px; border-bottom: 1px solid var(--line);
transform: translateY(-130%); transition: .25s; box-shadow: var(--shadow);
}
.nav ul.open { transform: translateY(0); }
.hamburger { display: block; }
.nav .logo img { height: 42px; }
}
/* ---- Rifiniture tema v1.0 (pagine interne) ---- */
/* link inline: petrolio, non ambra (l'ambra resta il colore dell'azione) */
a { color: var(--navy); }
a:hover { color: var(--brand-dark); }
.nav ul a.active { color: var(--brand-dark); }
/* bottone secondario outline: petrolio */
.btn-outline { border-color: var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
/* titoli sezione: interlinea da display, non da body */
.section-head h2, .home-h2 { line-height: 1.12; }
.card h3, .home-card h3 { font-family: var(--font-display); letter-spacing: -.01em; }
/* icone card interne: niente emoji su petrolio pieno, tinta ghiaccio */
.card .icon { background: var(--ice); }
/* ============================================
FIX AD round 48 (homepage + pagine interne)
============================================ */
/* 1. BLOCCANTE mobile: la barra fissa non deve coprire la riga legale */
@media (max-width: 720px) {
footer.site { padding-bottom: calc(24px + 98px + env(safe-area-inset-bottom)); }
}
/* 2. CTA ambra: testo petrolio (4.84:1), non bianco (2.10:1) */
.home-btn-primary, .btn-primary, .ph-btn-amber,
.nav .cta, body.home .nav .cta, .cta-band .btn {
color: var(--navy-2);
}
.home-btn-primary:hover, .btn-primary:hover, .ph-btn-amber:hover,
.nav .cta:hover, body.home .nav .cta:hover, .cta-band .btn:hover {
color: var(--navy-2);
}
/* 3. Carosello recensioni: la sfumatura non entra nella card, freccia staccata */
.home-reviews-carousel::after { width: 44px; }
.home-reviews-arrow[data-dir="1"] { right: -32px; }
/* 4. Disciplina cromatica: fuori i colori estranei al sistema */
:root { --ok: #1B5878; }
.home-brands-row li { color: #4E6B80; }
.home-card-num { color: #7E93A3; }
/* 5. Focus ring: ambra anche sulle frecce del carosello; niente azzurro residuo */
.home-reviews-arrow:focus-visible { outline: 3px solid rgba(236,165,60,.55); outline-offset: 2px; }
.hero::after { content: none; }
/* 6. Ritmo verticale: una sola griglia (118 desktop / 68 mobile) */
.home-brands { padding: 118px 0; }
.home-section.home-team-section { padding-bottom: 118px; }
.home-section:has(.home-portal) { padding: 118px 0; }
@media (max-width: 720px) {
.home-brands { padding: 68px 0; }
.home-section.home-team-section { padding-bottom: 68px; }
.home-section:has(.home-portal) { padding: 68px 0; }
}
/* 7. Poppins: lo spazio tra parole non deve collassare col tracking negativo */
h1, .home-h2, .section-head h2, .home-card h3, .card h3, .home-number .n, .home-portal-title { word-spacing: .055em; }
/* Pagine interne */
/* split senza immagine: colonna singola leggibile */
.split.split-solo { grid-template-columns: 1fr; max-width: 760px; }
/* CTA finale distinta dal footer + cucitura oro */
.cta-band { background: var(--navy); }
footer.site { border-top: 1px solid rgba(217,164,74,.32); }
/* grazie: hero piatta, nessuno scalino tonale sul footer */
.page-hero-flat { background: var(--navy-2); }
/* superfici di servizio nel sistema */
.portal-box { background: var(--ice); border: 1px solid var(--gold); border-radius: var(--radius); }
.notice { background: var(--ice); border: 1px solid #CFE0EC; color: var(--navy); border-radius: 16px; }
/* menu mobile agganciato all'header reale (niente filo scuro) */
@media (max-width: 1000px) {
.nav ul { position: absolute; top: 100%; left: 0; right: 0; bottom: auto; inset: auto 0 auto 0; top: 100%; }
}
/* footer: icone contatti allineate e dorate */
footer.site .cols li { display: flex; align-items: flex-start; gap: 9px; }
footer.site .cols li svg { flex: none; margin-top: 4px; color: var(--gold); }
/* ---- Hero: più aria e foto meno panoramica (feedback cliente 14/08) ---- */
.ph-wrap { padding-top: 36px; }
.ph-top { margin-bottom: 28px; }
.ph-h1 { margin-bottom: 16px; }
.ph-lead { margin-bottom: 32px; }
.ph-shot { height: clamp(380px, 46vh, 560px); }
/* sui monitor alti la foto respira davvero */
@media (min-width: 941px) and (min-height: 1000px) {
.ph-wrap { padding-top: 48px; }
.ph-top { margin-bottom: 36px; }
.ph-lead { margin-bottom: 46px; }
.ph-shot { height: clamp(480px, 50vh, 620px); }
}
/* schermi bassi: si torna compatti per tenere la CTA sopra la piega */
@media (min-width: 941px) and (max-height: 800px) {
.ph-top { margin-bottom: 24px; }
.ph-h1 { margin-bottom: 14px; }
.ph-lead { margin-bottom: 28px; }
.ph-shot { height: max(300px, 38vh); }
}
/* mobile: foto un filo più alta anche qui */
@media (max-width: 940px) {
.ph-shot { height: 360px; }
}
/* ---- Area riservata: card di accesso (linguaggio social) ---- */
.login-card {
max-width: 460px; margin: 56px auto 0;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 36px 34px;
position: relative; z-index: 0;
}
.login-card::after {
content: ""; position: absolute; inset: 0; z-index: -1;
border: 1.5px solid var(--gold); border-radius: var(--radius);
transform: translate(10px, 10px);
}
.login-head h3 { font-family: var(--font-display); color: var(--navy); font-size: 1.35rem; letter-spacing: -.01em; }
.login-head p { color: var(--ink-soft); font-size: .95rem; margin: 6px 0 22px; }
.login-form { display: grid; gap: 16px; }
.login-submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.login-msg {
background: var(--ice); border: 1px solid #CFE0EC; border-radius: 14px;
padding: 14px 16px; font-size: .9rem; color: var(--navy); margin: 2px 0 0; line-height: 1.55;
}
.login-foot { text-align: center; font-size: .88rem; color: var(--ink-soft); margin-top: 20px; }
/* ============================================
NEWS + ARTICOLI + TRASPARENZA (v1.2, linguaggio social)
============================================ */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.news-card {
display: flex; flex-direction: column; gap: 0;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: 28px; color: inherit; position: relative; z-index: 0;
transition: box-shadow .25s cubic-bezier(.22,.61,.36,1), transform .25s cubic-bezier(.22,.61,.36,1);
}
.news-card::after {
content: ""; position: absolute; inset: 0; z-index: -1;
border: 1.5px solid var(--gold); border-radius: var(--radius);
transform: translate(9px, 9px); opacity: 0; transition: opacity .25s;
}
.news-card:hover { box-shadow: 0 14px 36px rgba(23,76,105,.14); transform: translateY(-3px); }
.news-card:hover::after { opacity: 1; }
.news-tag {
align-self: flex-start;
font-family: var(--font-display); font-weight: 700; font-size: .68rem;
text-transform: uppercase; letter-spacing: .14em;
color: var(--navy); background: var(--ice); border-radius: 99px;
padding: 6px 13px; margin-bottom: 16px;
}
.news-tag-bando { background: rgba(217,164,74,.16); color: #8A6118; }
.news-card time { font-size: .82rem; color: var(--ink-soft); margin-bottom: 8px; display: block; }
.news-card h3 { font-family: var(--font-display); color: var(--navy); font-size: 1.16rem; line-height: 1.3; letter-spacing: -.01em; margin-bottom: 10px; }
.news-card p { color: var(--ink-soft); font-size: .93rem; flex: 1; }
.news-card .home-card-link { margin-top: 16px; }
@media (max-width: 920px) { .news-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .news-grid { grid-template-columns: 1fr; } }
/* articolo */
.art-body { max-width: 720px; }
.art-body p { color: var(--ink); margin-bottom: 18px; line-height: 1.75; }
.art-body h2 { font-family: var(--font-display); color: var(--navy); font-size: 1.45rem; letter-spacing: -.01em; margin: 34px 0 14px; line-height: 1.2; }
.art-body ul { margin: 0 0 18px 0; padding-left: 22px; color: var(--ink); }
.art-body li { margin-bottom: 8px; line-height: 1.65; }
.art-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.art-meta time { color: #C8DCE9; font-size: .92rem; }
.art-back { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .93rem; color: var(--navy); margin-bottom: 26px; }
.art-back::before { content: "\2190"; }
/* blocco dati bando (trasparenza) */
.bando-box {
background: var(--ice); border: 1px solid var(--gold); border-radius: var(--radius);
padding: 28px 30px; margin: 26px 0;
}
.bando-box dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; margin: 0; }
.bando-box dt { font-family: var(--font-display); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--navy); padding-top: 2px; }
.bando-box dd { margin: 0; color: var(--ink); }
.bando-box dd strong { color: var(--navy); }
@media (max-width: 640px) { .bando-box dl { grid-template-columns: 1fr; gap: 2px 0; } .bando-box dt { margin-top: 12px; } .bando-box dl dt:first-child { margin-top: 0; } }
/* fascia loghi finanziamento (testuale finché non arrivano i loghi ufficiali) */
.eu-strip {
display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap;
border-top: 1.5px solid rgba(217,164,74,.6); border-bottom: 1.5px solid rgba(217,164,74,.6);
padding: 16px 4px; margin: 30px 0;
font-family: var(--font-display); font-weight: 700; font-size: .8rem;
text-transform: uppercase; letter-spacing: .1em; color: var(--navy);
}
.eu-strip span { white-space: nowrap; }
/* quiz nelle pagine servizio */
.sv-quiz { background: var(--ice); }
.sv-quiz-grid { display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: 56px; align-items: start; }
.sv-quiz-form {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: 34px; box-shadow: var(--shadow); min-width: 0;
position: relative; z-index: 0;
}
.sv-quiz-form::after {
content: ""; position: absolute; inset: 0; z-index: -1;
border: 1.5px solid var(--gold); border-radius: var(--radius);
transform: translate(10px, 10px);
}
@media (max-width: 920px) { .sv-quiz-grid { grid-template-columns: 1fr; gap: 34px; } .sv-quiz-form { padding: 26px 20px; } }
/* ============================================
FIX LOOP OPUS round 49 (homepage / news / servizio / tech)
============================================ */
/* -- hero: resta ARIOSA per scelta del cliente (la conversione sotto piega
è coperta dalla barra sticky mobile e dalla CTA in header) -- */
/* barra sticky mobile: visibile da subito (prima nessuna CTA nel primo schermo) */
@media (max-width: 720px) {
.home-mobilebar .home-btn { white-space: nowrap; font-size: .86rem; padding: 13px 8px; }
body.home footer.site { padding-bottom: calc(24px + 98px + env(safe-area-inset-bottom)); }
footer.site { padding-bottom: 24px; }
}
/* -- news card: cornice oro sempre presente (firma del sistema), hover coerente -- */
.news-card::after { opacity: 1; transition: none; }
@media (min-width: 641px) { .news-card h3 { min-height: calc(3 * 1.3em); } }
.news-card h3 { word-spacing: .055em; }
.news-card .home-card-link svg { transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.news-card:hover .home-card-link { color: var(--brand-dark); }
.news-card:hover .home-card-link svg { transform: translateX(4px); }
/* -- page-hero: interlinea display, misura di riga -- */
.page-hero h1, .hero h1 { line-height: 1.12; }
.page-hero h1 { max-width: 860px; margin-top: 14px; }
/* -- articoli: link riconoscibili, misura di riga 72ch -- */
.art-body { max-width: 680px; }
.art-body p, .art-body li { font-size: 1.0625rem; }
.art-body p a, .art-body li a, .art-body dd a {
font-weight: 600; text-decoration: underline;
text-decoration-thickness: 1.5px; text-underline-offset: 3px;
text-decoration-color: rgba(217,164,74,.9);
}
.art-body a:hover { text-decoration-color: var(--brand); }
/* -- eu-strip: dichiarazione UE su riga propria, enti sotto, mai tagliata -- */
.eu-strip { display: grid; justify-items: start; gap: 10px; }
@media (min-width: 721px) {
.eu-strip { grid-template-columns: repeat(3, max-content); column-gap: 26px; row-gap: 12px; }
.eu-strip span:first-child { grid-column: 1 / -1; }
}
@media (max-width: 420px) { .eu-strip span { white-space: normal; } }
/* -- bando-box: stessa griglia su tutte le schede -- */
@media (min-width: 641px) { .bando-box dl { grid-template-columns: 200px 1fr; } }
/* -- servizi/index: icone visibili, link allineati al fondo -- */
.card .icon { color: var(--navy); }
.card { display: flex; flex-direction: column; }
.card .link { margin-top: auto; }
/* -- consenso privacy: frase intera, checkbox sulla prima riga -- */
.hr-privacy { align-items: flex-start; }
.hr-privacy input { margin-top: 3px; }
.hr-privacy span { flex: 1; }
/* -- focus visibile sui campi (via le outline:none) -- */
.hr-field input:focus, .hr-field textarea:focus {
outline: 3px solid rgba(236,165,60,.55); outline-offset: 1px; border-color: var(--brand);
}
/* -- ancore sotto header sticky -- */
[id] { scroll-margin-top: 104px; }
/* -- skip link -- */
.skip { position: absolute; left: -9999px; }
.skip:focus {
left: 20px; top: 12px; z-index: 100; position: fixed;
background: #fff; color: var(--navy); font-weight: 700;
padding: 10px 16px; border-radius: 10px; outline: 3px solid var(--brand);
}
/* -- menu mobile: fuori dal tab order da chiuso, tap target 44px -- */
@media (max-width: 1000px) {
.nav ul { visibility: hidden; }
.nav ul.open { visibility: visible; }
.nav ul a { display: block; padding: 12px 4px; }
.nav ul { gap: 4px; }
}
/* -- progress bar quiz leggibile su mobile -- */
@media (max-width: 560px) {
.qz-progress { flex-direction: column; align-items: stretch; gap: 8px; }
.qz-progress-bar { width: 100%; }
}
/* ============================================
ANGOLI MISTI v1.5: firma dalla grafica social Ceraldi.
Stondati SOLO alto-sinistra e basso-destra, vivi gli altri due,
raggi più generosi. [regola cliente 14/08]
============================================ */
.ph-shot, .ph-shot::after { border-radius: 48px 0 48px 0; }
.ph-panel { border-radius: 26px; }
.news-card, .news-card::after { border-radius: 30px 0 30px 0; }
.home-review-card, .home-review-card::after { border-radius: 28px 0 28px 0; }
.login-card, .login-card::after,
.sv-quiz-form, .sv-quiz-form::after { border-radius: 30px 0 30px 0; }
.bando-box { border-radius: 28px 0 28px 0; }
.home-card { border-radius: 30px 0 30px 0; }
.home-faq-item { border-radius: 22px 0 22px 0; }
.card { border-radius: 30px 0 30px 0; }
.home-portal { border-radius: 30px 0 30px 0; }
.form-wrap, .home-request-form { border-radius: 30px 0 30px 0; }
@media (max-width: 940px) {
.ph-shot, .ph-shot::after { border-radius: 32px 0 32px 0; }
.ph-panel { border-radius: 22px; }
}
/* ---- Emblema UE nella fascia finanziatori (geometria ufficiale) ---- */
.eu-strip .eu-flag { display: inline-flex; align-items: center; gap: 12px; }
.eu-flag-svg { flex: none; border-radius: 2px; box-shadow: 0 1px 3px rgba(15,52,73,.18); }
/* ---- logo nel footer: su colonne strette la larghezza viene limitata,
con object-fit lo stemma si adatta invece di schiacciarsi ---- */
@media (max-width: 520px) { footer.site .logo-f img { height: 40px; } }
/* ---- schermi molto stretti (320px): footer a colonna unica e nessun overflow ---- */
@media (max-width: 560px) {
footer.site .cols { grid-template-columns: 1fr; gap: 26px; }
footer.site .cols li, footer.site .cols a, .art-body a { overflow-wrap: anywhere; }
.home-btn, .btn, .ph-btn-amber, .ph-btn-tel { max-width: 100%; }
}
/* ---- barra CTA mobile su schermi molto stretti (320px) ---- */
@media (max-width: 380px) {
.home-mobilebar { gap: 8px; padding-left: 10px; padding-right: 10px; }
.home-mobilebar .home-btn {
min-width: 0; font-size: .74rem; letter-spacing: .04em; padding: 12px 6px;
white-space: normal; line-height: 1.2; text-align: center;
}
}
/* ============================================
MENU MOBILE BRANDIZZATO (approvato 30/08) + telefono
nell'header di tutte le pagine. I gialli e le sagome
delle card restano come sono per scelta del cliente.
============================================ */
@media (max-width: 1000px) {
.nav ul {
padding: 10px 22px 22px; gap: 0; align-items: stretch;
box-shadow: 0 28px 48px rgba(15,52,73,.20);
border-bottom: 0; border-radius: 0 0 22px 0;
}
.nav ul a {
font-family: var(--font-display); font-weight: 600; font-size: 1.06rem;
color: var(--navy); padding: 15px 4px; text-align: center;
}
.nav ul li:not(:first-child) a:not(.cta) { border-top: 1px solid #E3ECF3; }
.nav ul .nav-tel { display: block; }
.nav ul .nav-tel a { display: flex; align-items: center; justify-content: center; gap: 10px; }
.nav ul a.cta {
display: block; text-align: center; margin-top: 14px;
padding: 16px; font-size: .84rem; color: var(--navy-2);
}
}
/* ============================================
BILANCIAMENTO FIRMA (deciso 30/08)
La firma R 0 R 0 resta sui servizi, sui moduli e sugli
elementi unici. News e recensioni tornano a raggio uniforme:
sono griglie di lettura, non blocchi identitari.
============================================ */
.news-card, .news-card::after { border-radius: var(--radius); }
.home-review-card, .home-review-card::after { border-radius: 18px; }
/* ============================================
TASSONOMIA SERVIZI v2 (04/09)
Sottosezioni con ancora dentro le pagine servizio e
tile "Tutti i servizi" in fondo alla griglia homepage.
Solo append: nessun blocco precedente riscritto.
Le nuove card usano .card / .home-card, quindi ereditano
la firma angoli 30px 0 30px 0 senza ridichiararla.
============================================ */
/* -- Ancore delle sottosezioni: stacco dall'header in sticky -- */
.sv-sub { scroll-margin-top: 96px; }
/* -- Navigazione interna alle sottosezioni (pill sobrie) -- */
.sv-sub-nav { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.sv-sub-nav a {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 18px; border: 1.5px solid var(--line); border-radius: 99px;
background: #fff; color: var(--navy); font-weight: 700; font-size: .92rem;
transition: border-color .2s, color .2s;
}
.sv-sub-nav a:hover { border-color: var(--brand); color: var(--brand-dark); }
.sv-sub-nav svg { flex: none; }
/* -- Elenco puntato dentro le card (stesso segno di .checks) -- */
.card ul.sv-points { list-style: none; margin-top: 16px; }
.card ul.sv-points li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--ink-soft); font-size: .94rem; }
.card ul.sv-points li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 800; }
.card ul.sv-points li strong { color: var(--ink); }
/* -- Tile finale "Tutti i servizi": variante sobria della home-card -- */
.home-card-all { background: var(--ice); border-color: #CFDFEC; }
.home-card-all .home-card-icon { background: #fff; color: var(--navy); }
.home-card-all h3 { color: var(--navy-2); }
.home-card-all:hover { box-shadow: 0 14px 36px rgba(23,76,105,.12); }
/* A 3 colonne la tile occupa la campata residua: 7 card + 2 = 9 = griglia piena. */
@media (min-width: 921px) {
.home-grid .home-card-all { grid-column: span 2; }
}
/* ============================================
STEP PRIVATI/AZIENDE
Primo passo di scelta percorso nei moduli di richiesta
(quiz home .qz, quiz servizio .qz2) e gruppo di scelta in
testa a richiesta-intervento.html. Solo classi nuove .qzp-*:
nessuna regola esistente viene ridefinita.
============================================ */
/* -- Progress dei quiz con lo step aggiuntivo (hook rinominati) -- */
.qzp-progress-bar { flex: 1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.qzp-progress-bar i { display: block; height: 100%; background: var(--brand); border-radius: 4px; transition: width .35s cubic-bezier(.22,.61,.36,1); }
.qz-progress-label b.qzp-stepnum { color: var(--navy); }
@media (max-width: 720px) { .qzp-progress-bar { width: 100%; } }
/* -- Lo step di scelta e' una : niente padding generico (come .qz-step) -- */
.qzp-gate { padding: 0 !important; }
/* -- Le due card di percorso -- */
.qzp-cards {
display: grid; grid-template-columns: repeat(auto-fit, minmax(102px, 1fr));
gap: 10px; min-width: 0;
}
.qzp-card { position: relative; cursor: pointer; min-width: 0; }
.qzp-card input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.qzp-card > span {
display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
padding: 16px 14px; background: #fff;
border: 1.5px solid #C3D2DC; border-radius: 22px 0 22px 0;
transition: border-color .18s ease, background .18s ease, color .18s ease;
height: 100%; overflow-wrap: anywhere;
}
.qzp-card .qzp-ico {
flex: none; width: 34px; height: 34px; display: grid; place-items: center;
border-radius: 12px 0 12px 0; background: var(--ice); color: var(--navy);
transition: background .18s ease, color .18s ease;
}
.qzp-card .qzp-ico svg { display: block; }
.qzp-card b { display: block; color: var(--navy); font-size: 1rem; font-weight: 700; line-height: 1.2; }
.qzp-card small { display: block; color: var(--ink-soft); font-size: .82rem; line-height: 1.35; }
.qzp-card:hover > span { border-color: var(--navy); }
.qzp-card.on > span { background: var(--navy); border-color: var(--navy); }
.qzp-card.on b, .qzp-card.on small { color: #fff; }
.qzp-card.on .qzp-ico { background: var(--brand); color: var(--navy-2); }
.qzp-card input:focus-visible + span { outline: 3px solid rgba(1,174,242,.55); outline-offset: 2px; }
/* -- Messaggio di errore dello step -- */
.qzp-error { color: #B4231F; font-size: .88rem; margin: 12px 0 0; }
/* -- Pulsante Indietro verso lo step di scelta (stessa resa di .qz-back) -- */
.qzp-back {
background: none; border: 0; padding: 8px 2px; cursor: pointer;
font: inherit; font-weight: 700; font-size: .92rem; color: var(--ink-soft);
}
.qzp-back:hover { color: var(--navy); }
/* -- Voci filtrate dal percorso: nascoste davvero anche se inline-flex -- */
.hr-chip[hidden], .qzp-card[hidden], .qz-card[hidden] { display: none !important; }
/* -- Gruppo di scelta in testa a richiesta-intervento.html -- */
.qzp-inline { margin: 0 0 22px; border: 0; padding: 0; min-width: 0; }
.qzp-inline legend {
padding: 0; margin: 0 0 10px; font-weight: 700; color: var(--navy); font-size: .95rem;
}
.qzp-inline .qzp-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
/* ============================================
MARCHI DUE LIVELLI (04/09)
Livello 1 = marchi per cui Ceraldi e centro assistenza
autorizzato (card con badge ambra e firma angoli).
Livello 2 = altri marchi assistiti (riga tipografica
sobria, nessun badge, nessuna card).
Solo append: nessun blocco precedente riscritto.
Per aggiungere un marchio: duplicare una .mk-card in
index.html e, se il marchio e nuovo, aggiungere qui
la sua classe .hb-* (peso/tracking) e il corpo .mk-name.hb-*.
============================================ */
/* -- Press band: due marchi in piu (Vaillant, Piscine Castiglione) -- */
.home-brands-row { gap: 18px 30px; }
.hb-vaillant { font-weight: 600; letter-spacing: .015em; font-size: 1.14rem; }
.hb-castiglione { font-weight: 700; letter-spacing: .01em; font-size: 1.02rem; }
.hb-castiglione span {
font-weight: 400; font-size: .8em; letter-spacing: .16em;
text-transform: uppercase; margin-right: .1em;
}
/* mobile: la griglia a 2 colonne non regge un nome lungo su una riga sola */
@media (max-width: 680px) {
.home-brands-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; }
.home-brands-row .hb-castiglione {
grid-column: 1 / -1; white-space: normal; text-align: center;
}
}
/* -- Intestazione di livello: etichetta + hairline -- */
.mk-level {
display: flex; align-items: center; gap: 14px;
font-family: var(--font-display);
font-size: 1rem; font-weight: 700; letter-spacing: .01em;
word-spacing: .055em; color: var(--navy-2);
margin-bottom: 24px;
}
.mk-level::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* -- Livello 1: card marchio autorizzato -- */
.mk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mk-card {
display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
background: #fff; border: 1px solid var(--line);
border-radius: 30px 0 30px 0;
padding: 28px 26px 26px;
transition: box-shadow .28s cubic-bezier(.22,.61,.36,1),
transform .28s cubic-bezier(.22,.61,.36,1);
}
.mk-card:hover { box-shadow: 0 10px 30px rgba(11,34,51,.10); transform: translateY(-4px); }
/* badge: testo petrolio profondo su ambra, mai bianco */
.mk-badge {
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 14px 6px 11px; border-radius: 99px;
background: var(--brand); color: var(--navy-2);
font-size: .71rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .1em; line-height: 1;
}
.mk-badge svg { flex: none; }
.mk-name { color: var(--navy); line-height: 1.05; font-size: 1.7rem; overflow-wrap: anywhere; }
.mk-role { color: var(--ink-soft); font-size: .95rem; }
/* Le classi .hb-* portano peso, corsivo, maiuscole e tracking del marchio.
Qui si riscala solo il corpo per la resa grande dentro la card. */
.mk-name.hb-viessmann { font-size: 1.5rem; }
.mk-name.hb-vaillant { font-size: 1.8rem; }
.mk-name.hb-castiglione { font-size: 1.64rem; }
.mk-name.hb-biasi { font-size: 1.6rem; }
.mk-name.hb-ariston { font-size: 1.58rem; }
.mk-name.hb-roca { font-size: 1.92rem; }
.mk-name.hb-riello { font-size: 1.6rem; }
.mk-name.hb-fontecal { font-size: 1.72rem; }
.mk-name.hb-airwell { font-size: 1.6rem; }
.mk-name.hb-haier { font-size: 1.84rem; }
/* nome su due righe: "Piscine" come sopratitolo del marchio */
.mk-card .mk-name.hb-castiglione span { display: block; margin: 0 0 3px; }
/* nomi ancorati alla stessa base: le righe di ruolo partono allineate */
.mk-card .mk-name {
display: flex; flex-direction: column; justify-content: flex-end;
min-height: 2.85rem;
}
/* -- Livello 2: altri marchi assistiti, senza badge e senza card -- */
.mk-others { margin-top: 58px; }
.mk-others-text { color: var(--ink-soft); font-size: 1rem; max-width: 720px; margin-bottom: 24px; }
.mk-others-row {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px 34px;
}
.mk-others-row li { color: #4E6B80; line-height: 1; white-space: nowrap; }
.mk-others-row li.mk-others-more {
white-space: normal; font-size: .92rem; font-weight: 400;
letter-spacing: 0; font-style: italic; color: var(--ink-soft);
}
.mk-note { color: var(--ink-soft); font-size: .95rem; margin-top: 26px; }
/* -- Richiamo compatto (servizi/index.html): una riga, non la sezione -- */
.mk-inline {
display: flex; align-items: flex-start; gap: 12px;
margin-top: 34px; padding: 16px 22px;
background: var(--ice); border: 1px solid var(--line);
border-radius: 22px 0 22px 0;
color: var(--ink-soft); font-size: .96rem;
}
.mk-inline svg { flex: none; color: var(--navy); margin-top: 3px; }
.mk-inline strong { color: var(--navy); }
/* -- Responsive -- */
@media (max-width: 920px) {
.mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
.mk-grid { grid-template-columns: 1fr; gap: 18px; }
.mk-card { padding: 24px 22px; border-radius: 24px 0 24px 0; gap: 12px; }
.mk-card .mk-name { font-size: 1.46rem; min-height: 0; }
.mk-card .mk-name.hb-roca, .mk-card .mk-name.hb-haier { font-size: 1.6rem; }
.mk-level { font-size: .94rem; gap: 12px; margin-bottom: 20px; }
.mk-others { margin-top: 44px; }
.mk-others-row { gap: 14px 24px; }
.mk-inline { padding: 15px 18px; font-size: .93rem; }
}
/* ============================================
PORTALE AREA RISERVATA
Pagina protetta portale.html + stati della form
di login in area-riservata.html.
Firma angoli: stondati SOLO alto-sinistra e basso-destra.
Testo su ambra sempre petrolio profondo, mai bianco.
============================================ */
/* ---- Login: variante di errore del messaggio ---- */
.login-msg-err {
background: #FDF2F2; border-color: #F0C9C9; color: #8C2F2F;
}
.login-msg-err a { color: #8C2F2F; text-decoration: underline; text-underline-offset: 2px; }
/* ---- Testata ridotta del portale ---- */
.pt-header .pt-nav {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; max-width: var(--maxw); margin: 0 auto; padding: 14px 20px;
}
.pt-nav-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pt-nav-link, .pt-logout {
display: inline-flex; align-items: center; gap: 8px;
font: inherit; font-size: .9rem; font-weight: 700; line-height: 1;
padding: 10px 16px; border-radius: 99px; cursor: pointer;
border: 1.5px solid var(--line); background: #fff; color: var(--navy);
transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.pt-nav-link:hover { border-color: var(--navy); color: var(--navy); }
.pt-logout { border-color: transparent; background: var(--brand); color: var(--navy-2); }
.pt-logout:hover { background: var(--brand-dark); color: var(--navy-2); }
.pt-logout:disabled { opacity: .6; cursor: default; }
.pt-nav-link svg, .pt-logout svg { flex: none; }
/* ---- Intestazione ---- */
.pt-hero { padding: 46px 0 44px; }
.pt-hero h1 { overflow-wrap: anywhere; }
/* ---- Sezioni ---- */
.pt-section { padding: 54px 0; }
.pt-section-alt { background: var(--bg-soft); }
.pt-section-head {
display: flex; align-items: center; gap: 11px; margin-bottom: 24px;
color: var(--navy);
}
.pt-section-head svg { flex: none; }
.pt-section-head h2 {
font-family: var(--font-display); font-size: 1.5rem;
letter-spacing: -.01em; line-height: 1.15; color: var(--navy);
}
/* ---- Stato vuoto ---- */
.pt-empty {
background: #fff; border: 1px dashed #C3D2DC;
border-radius: 22px 0 22px 0;
padding: 22px 24px; color: var(--ink-soft); font-size: .96rem;
}
.pt-section-alt .pt-empty { background: #fff; }
/* dentro la griglia degli impianti lo stato vuoto occupa tutta la riga */
.pt-grid .pt-empty { grid-column: 1 / -1; }
/* ---- Card impianto ---- */
.pt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pt-card {
display: flex; flex-direction: column; gap: 10px;
background: #fff; border: 1px solid var(--line);
border-radius: 22px 0 22px 0;
padding: 24px 22px;
transition: box-shadow .25s cubic-bezier(.22,.61,.36,1), transform .25s cubic-bezier(.22,.61,.36,1);
}
.pt-card:hover { box-shadow: 0 10px 30px rgba(11,34,51,.10); transform: translateY(-3px); }
.pt-card-kicker {
align-self: flex-start;
font-size: .71rem; font-weight: 700; line-height: 1;
text-transform: uppercase; letter-spacing: .1em;
color: var(--navy-2); background: var(--brand);
padding: 6px 11px; border-radius: 8px;
}
.pt-card h3 {
font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2;
color: var(--navy); letter-spacing: -.01em; overflow-wrap: anywhere;
}
.pt-card-meta { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
.pt-card-meta li { display: flex; justify-content: space-between; gap: 14px; font-size: .9rem; }
.pt-card-meta span { color: var(--ink-soft); }
.pt-card-meta strong { color: var(--navy); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.pt-card-note { font-size: .92rem; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 10px; margin-top: 2px; }
/* ---- Righe documento e richiesta ---- */
.pt-list { display: grid; gap: 14px; }
.pt-row {
display: flex; align-items: center; justify-content: space-between;
gap: 18px; flex-wrap: wrap;
background: #fff; border: 1px solid var(--line);
border-radius: 22px 0 22px 0;
padding: 20px 24px;
}
.pt-row-req { align-items: flex-start; }
.pt-row-main { flex: 1 1 260px; min-width: 0; }
.pt-row-main h3 {
font-family: var(--font-display); font-size: 1.06rem; line-height: 1.3;
color: var(--navy); letter-spacing: -.005em; overflow-wrap: anywhere;
}
.pt-row-meta { font-size: .86rem; color: var(--ink-soft); margin-top: 4px; }
.pt-row-text { font-size: .94rem; color: var(--ink); margin-top: 10px; overflow-wrap: anywhere; }
.pt-row-alert { flex: 1 1 100%; font-size: .88rem; color: #8C2F2F; margin-top: 4px; }
.pt-tag {
display: inline-block; margin-bottom: 7px;
font-size: .69rem; font-weight: 700; line-height: 1;
text-transform: uppercase; letter-spacing: .1em;
color: var(--navy); background: var(--ice);
border: 1px solid #CFE0EC; padding: 5px 10px; border-radius: 8px;
}
.pt-download {
flex: none; display: inline-flex; align-items: center; gap: 8px;
font: inherit; font-size: .88rem; font-weight: 700; line-height: 1;
padding: 11px 18px; border-radius: 99px; cursor: pointer;
border: 1.5px solid var(--brand); background: #fff; color: var(--brand-dark);
transition: background .18s ease, color .18s ease;
}
.pt-download:hover { background: var(--brand); color: var(--navy-2); }
.pt-download:disabled { opacity: .65; cursor: default; }
.pt-download svg { flex: none; }
/* ---- Badge di stato: raggio piccolo e uniforme ---- */
.pt-badge {
flex: none; display: inline-block;
font-size: .72rem; font-weight: 700; line-height: 1;
text-transform: uppercase; letter-spacing: .08em;
padding: 8px 13px; border-radius: 8px; white-space: nowrap;
}
.pt-badge-ricevuta { background: var(--ice); color: var(--navy); border: 1px solid #CFE0EC; }
.pt-badge-in_lavorazione { background: var(--brand); color: var(--navy-2); }
.pt-badge-pianificata { background: var(--navy); color: #fff; }
.pt-badge-chiusa { background: #E7F3EC; color: #1B6B3F; border: 1px solid #C6E3D3; }
/* ---- Form nuova richiesta ---- */
.pt-req-card {
margin-top: 30px; background: #fff; border: 1px solid var(--line);
border-radius: 22px 0 22px 0;
padding: 30px 28px; box-shadow: var(--shadow);
}
.pt-req-card h3 {
font-family: var(--font-display); font-size: 1.22rem;
color: var(--navy); letter-spacing: -.01em;
}
.pt-req-intro { color: var(--ink-soft); font-size: .95rem; margin: 6px 0 22px; }
.pt-req-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pt-field-full { grid-column: 1 / -1; }
.pt-field label { display: block; font-size: .86rem; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.pt-field select, .pt-field textarea, .pt-field input {
width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px;
font: inherit; color: var(--ink); background: #fff; transition: border-color .18s ease;
}
.pt-field textarea { resize: vertical; }
.pt-field select:focus, .pt-field textarea:focus, .pt-field input:focus { outline: none; border-color: var(--brand); }
.pt-account { margin-top: 0; }
.pt-req-submit {
grid-column: 1 / -1; justify-self: start;
display: inline-flex; align-items: center; gap: 10px;
}
.pt-req-submit:disabled { opacity: .65; cursor: default; }
.pt-req-msg {
grid-column: 1 / -1;
background: var(--ice); border: 1px solid #CFE0EC; border-radius: 12px;
padding: 13px 16px; font-size: .9rem; color: var(--navy); line-height: 1.55;
}
.pt-req-msg-err { background: #FDF2F2; border-color: #F0C9C9; color: #8C2F2F; }
/* ---- Schermata di caricamento ---- */
.pt-boot {
max-width: var(--maxw); margin: 0 auto; padding: 64px 20px;
color: var(--ink-soft); font-size: .96rem;
}
/* ---- Footer ridotto: senza colonne servono meno respiro sopra ---- */
.pt-footer { padding: 26px 0 24px; }
.pt-footer .legal { border-top: 0; margin-top: 0; padding-top: 0; }
/* ---- Responsive ---- */
@media (max-width: 940px) {
.pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
.pt-header .pt-nav { padding: 12px 16px; gap: 10px; }
.pt-header .logo img { height: 30px; width: auto; }
.pt-nav-actions { gap: 7px; flex-wrap: nowrap; }
.pt-nav-link, .pt-logout {
padding: 9px 11px; font-size: .8rem; gap: 6px; white-space: nowrap;
}
.pt-hero { padding: 36px 0 34px; }
.pt-section { padding: 40px 0; }
.pt-section-head h2 { font-size: 1.3rem; }
.pt-grid { grid-template-columns: 1fr; gap: 16px; }
.pt-row { padding: 18px 20px; gap: 14px; }
.pt-download { width: 100%; justify-content: center; }
.pt-req-card { padding: 24px 20px; }
.pt-req-form { grid-template-columns: 1fr; }
.pt-req-submit { width: 100%; justify-content: center; }
}
/* ============================================
SWITCH SERVIZI PRIVATI/AZIENDE
Selettore a due segmenti in testa alla griglia di
servizi/index.html: stessa coppia di etichette, stesse
icone e stessa resa visiva dello step .qzp dei moduli,
ma qui il pattern e' un tablist (pulsanti), non radio,
quindi classi nuove .svsw-* invece di riusare .qzp-card.
Nessuna regola esistente viene ridefinita.
Senza JavaScript: i due pannelli restano entrambi
visibili e impilati, ognuno col suo titoletto, e il
selettore sparisce (vedi il ![]()