@font-face {
font-weight: normal;
font-style: normal;
font-family: "woodmart-font";
src: url("//www.fabbromassimo.it/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=8.4.1") format("woff2");
}
:root {
--wd-text-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
--wd-text-font-weight: 400;
--wd-text-color: #767676;
--wd-text-font-size: 14px;
--wd-title-font: var(--wd-text-font);
--wd-title-font-weight: 600;
--wd-title-color: #242424;
--wd-entities-title-font: var(--wd-title-font);
--wd-entities-title-font-weight: 500;
--wd-entities-title-color: #333333;
--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
--wd-alternative-font: var(--wd-text-font);
--wd-widget-title-font: var(--wd-title-font);
--wd-widget-title-font-weight: 600;
--wd-widget-title-transform: uppercase;
--wd-widget-title-color: #333;
--wd-widget-title-font-size: 16px;
--wd-header-el-font: var(--wd-text-font);
--wd-header-el-font-weight: 700;
--wd-header-el-transform: uppercase;
--wd-header-el-font-size: 13px;
--wd-otl-style: dotted;
--wd-otl-width: 2px;
--wd-primary-color: rgb(61,220,132);
--wd-alternative-color: rgb(255,215,0);
--btn-default-bgcolor: #f7f7f7;
--btn-default-bgcolor-hover: #efefef;
--btn-accented-bgcolor: rgb(61,220,132);
--btn-accented-bgcolor-hover: rgb(61,220,132);
--wd-form-brd-width: 2px;
--notices-success-bg: #459647;
--notices-success-color: #fff;
--notices-warning-bg: #E0B252;
--notices-warning-color: #fff;
--wd-link-color: #333333;
--wd-link-color-hover: #242424;
}
.wd-age-verify-wrap {
--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
background-color: #111111;
background-image: none;
background-repeat: no-repeat;
background-size: contain;
background-position: left center;
}
.wd-promo-popup-wrap {
--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
object-fit: cover;
object-position: center center;
}
.wd-footer {
background-color: #ffffff;
background-image: none;
}
.page :is(.wd-page-content, .whb-header) {
background-color: rgb(248,250,252);
background-image: none;
}
.mfp-wrap.wd-popup-quick-view-wrap {
--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 35px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 5px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 5px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--wd-brd-radius: 12px;
}
@media (min-width: 1222px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}
.wd-page-title {
background-color: #0a0a0a;
}
/* ================================================================
FABBROMASSIMO.IT – CSS GLOBALE
Carica in: Aspetto > Personalizza > CSS aggiuntivo
Oppure in: Child Theme > assets/css/custom.css
CONTIENE:
• Variabili brand (colori, font, spaziature)
• Reset elementi base
• Componenti riutilizzabili su tutte le pagine:
- Wrapper .fm-w
- Tipografia h1-h4, p, link
- Label soprattitolo .fm-label
- Pulsanti .fm-btn (tutte le varianti)
- Card servizi .fm-sc
- Card recensioni .fm-rcard
- Card prezzi .fm-pcard
- Pill zone .fm-zpill
- FAQ accordion .fm-faq-*
- Sezioni .fm-sez-*
- Stats strip .fm-stats-*
- Trust bar .fm-trust
- Immagine placeholder .fm-img-ph
- Floating bar mobile .fm-float
- Full-width breakout
• Media queries responsive
================================================================ */
/* ── GOOGLE FONTS ─────────────────────────────────────────────
Incolla questo nel del tema oppure usa il plugin
"Fonts Plugin" per caricare Inter localmente (GDPR).
──────────────────────────────────────────────────────────── */
/* ── VARIABILI ─────────────────────────────────────────────── */
.fm-page {
--v: #3ddc84;
--v-light: #edfdf5;
--v-mid: #c6f6e0;
--v-dk: #28a85f;
--navy: #0f172a;
--navy2: #1e293b;
--testo: #374151;
--testo2: #6b7280;
--bianco: #ffffff;
--grigio1: #f8fafc;
--grigio2: #f1f5f9;
--grigio3: #e2e8f0;
--blu-dk: #1e3a5f;
--raggio: 10px;
--raggio-l: 18px;
--ombra-s: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
--ombra-m: 0 4px 16px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(0, 0, 0, 0.04);
--ombra-v: 0 4px 20px rgba(22, 163, 74, 0.18);
--trans: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
font-family:
"Inter",
-apple-system,
sans-serif;
color: var(--testo);
line-height: 1.65;
}
/* ── RESET LOCALE ──────────────────────────────────────────── */
.fm-page *,
.fm-page *::before,
.fm-page *::after {
box-sizing: border-box;
}
.fm-page a {
text-decoration: none;
color: var(--v);
transition: color var(--trans);
}
.fm-page img {
display: block;
max-width: 100%;
}
.fm-page ul {
list-style: none;
padding: 0;
margin: 0;
}
/* ── WRAPPER & LAYOUT ──────────────────────────────────────── */
.fm-w {
max-width: 1160px;
margin: 0 auto;
padding: 0 24px;
}
.fm-sez {
padding: 88px 0;
}
.fm-sez-light {
background: var(--bianco);
}
.fm-sez-grigio {
background: var(--grigio1);
}
.fm-sez-navy {
background: var(--navy);
position: relative;
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
max-width: 100vw;
}
/* ── TIPOGRAFIA ────────────────────────────────────────────── */
.fm-page h1,
.fm-page h2,
.fm-page h3,
.fm-page h4 {
font-family: "Inter", sans-serif;
font-weight: 800;
line-height: 1.08;
color: var(--navy);
letter-spacing: -0.02em;
}
.fm-page h1 {
font-size: clamp(2.6rem, 5.5vw, 4.6rem);
}
.fm-page h2 {
font-size: clamp(1.9rem, 3.5vw, 2.9rem);
}
.fm-page h3 {
font-size: 1.25rem;
}
.fm-page h4 {
font-size: 1.05rem;
font-family: "Inter", sans-serif;
font-weight: 600;
}
.fm-page p {
color: var(--testo2);
line-height: 1.78;
}
/* Su sfondo scuro */
.fm-sez-navy h1,
.fm-sez-navy h2,
.fm-sez-navy h3,
.fm-sez-navy h4 {
color: var(--bianco);
}
.fm-sez-navy p {
color: #94a3b8;
}
/* Accent verde */
.fm-v {
color: var(--v) !important;
}
.fm-vb {
background: var(--v);
color: var(--bianco);
}
/* Label soprattitolo */
.fm-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--v);
margin-bottom: 14px;
}
.fm-label::before {
content: "";
width: 22px;
height: 2px;
background: var(--v);
border-radius: 2px;
flex-shrink: 0;
}
/* ── PULSANTI ──────────────────────────────────────────────── */
.fm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: "Inter", sans-serif;
font-weight: 600;
font-size: 0.92rem;
letter-spacing: 0.01em;
padding: 13px 28px;
border-radius: var(--raggio);
border: 2px solid transparent;
cursor: pointer;
transition: all var(--trans);
white-space: nowrap;
}
.fm-btn-verde {
background: var(--v);
color: var(--bianco) !important;
border-color: var(--v);
}
.fm-btn-verde:hover {
background: var(--v-dk);
border-color: var(--v-dk);
transform: translateY(-2px);
box-shadow: var(--ombra-v);
}
.fm-btn-outline {
background: transparent;
color: var(--v) !important;
border-color: var(--v);
}
.fm-btn-outline:hover {
background: var(--v);
color: var(--bianco) !important;
transform: translateY(-2px);
}
.fm-btn-outline-w {
background: transparent;
color: var(--bianco) !important;
border-color: rgba(255, 255, 255, 0.5);
}
.fm-btn-outline-w:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--bianco);
}
.fm-btn-blu {
background: #1e3a5f;
color: var(--bianco) !important;
border-color: #1e3a5f;
}
.fm-btn-blu:hover {
background: #163354;
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(30, 58, 95, 0.2);
}
.fm-btn-lg {
padding: 15px 36px;
font-size: 1rem;
}
.fm-btn-pulse {
animation: fmpulse 2.2s ease infinite;
}
@keyframes fmpulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4);
}
50% {
box-shadow: 0 0 0 12px rgba(22, 163, 74, 0);
}
}
/* ── IMMAGINE PLACEHOLDER ──────────────────────────────────── */
.fm-img-ph {
width: 100%;
background: var(--grigio2);
border-radius: var(--raggio-l);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: var(--testo2);
font-size: 0.78rem;
letter-spacing: 0.04em;
text-align: center;
padding: 20px;
border: 2px dashed var(--grigio3);
}
.fm-img-ph svg {
opacity: 0.25;
}
/* ╔══════════════════════════════════════════════════════════
║ HERO (navy scuro – unico blocco dark)
╚══════════════════════════════════════════════════════════ */
.fm-hero {
background: var(--navy);
overflow: hidden;
padding: 170px 0 88px;
position: relative;
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
max-width: 100vw;
}
.fm-hero::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 55%;
height: 100%;
background: radial-gradient(
ellipse 80% 80% at 80% 40%,
rgba(22, 163, 74, 0.12) 0%,
transparent 70%
);
pointer-events: none;
}
.fm-hero-inner {
display: grid;
grid-template-columns: 1fr 380px;
gap: 56px;
align-items: center;
position: relative;
z-index: 1;
}
.fm-hero-chip {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(22, 163, 74, 0.12);
border: 1px solid rgba(22, 163, 74, 0.3);
border-radius: 50px;
padding: 5px 14px 5px 8px;
font-size: 0.76rem;
font-weight: 600;
color: #3ddc84;
margin-bottom: 22px;
}
.fm-hero-dot {
width: 8px;
height: 8px;
background: #3ddc84;
border-radius: 50%;
animation: fmblink 1.8s ease infinite;
}
@keyframes fmblink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.2;
}
}
.fm-hero h1 {
color: var(--bianco);
text-transform: uppercase;
margin-bottom: 22px;
}
.fm-hero h1 em {
color: #3ddc84;
font-style: normal;
display: block;
}
.fm-hero-sub {
color: #fff;
font-size: 1rem;
max-width: 500px;
margin-bottom: 36px;
line-height: 1.8;
}
.fm-hero-sub strong {
color: #fff;
font-weight: 600;
}
.fm-hero-cta {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 44px;
}
.fm-hero-pills {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.fm-hero-pill {
display: flex;
align-items: center;
gap: 9px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 8px;
padding: 10px 16px;
}
.fm-hero-pill-ico {
font-size: 1rem;
}
.fm-hero-pill strong {
color: #fff;
font-size: 0.88rem;
font-weight: 600;
display: block;
line-height: 1.2;
}
.fm-hero-pill span {
color: #e7e7e7;
font-size: 0.74rem;
}
/* Card urgenza hero */
.fm-card-urgenza {
background: var(--bianco);
border-radius: var(--raggio-l);
padding: 28px 24px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}
.fm-cu-header {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 4px;
}
.fm-cu-dot {
width: 9px;
height: 9px;
background: var(--v);
border-radius: 50%;
animation: fmblink 1.8s ease infinite;
}
.fm-cu-title {
font-family: "Inter", sans-serif;
font-weight: 800;
font-size: 1rem;
color: var(--navy);
}
.fm-cu-sub {
font-size: 0.78rem;
color: var(--testo2);
margin-bottom: 20px;
}
.fm-cu-tel {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--v);
color: #ffffff !important;
font-family: "Inter", sans-serif;
font-weight: 800;
font-size: 1.25rem;
border-radius: var(--raggio);
padding: 15px 20px;
width: 100%;
margin-bottom: 10px;
animation: fmpulse 2.2s ease infinite;
transition: all var(--trans);
letter-spacing: 0.01em;
text-decoration: none;
line-height: 1;
-webkit-text-fill-color: #ffffff;
}
.fm-cu-tel:hover {
background: var(--v-dk);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
transform: translateY(-2px);
}
.fm-cu-tel-ico {
font-size: 1.1rem;
flex-shrink: 0;
}
.fm-cu-tel-txt {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
}
.fm-cu-tel-num {
font-size: 1.1rem;
font-weight: 800;
color: #ffffff;
line-height: 1;
}
.fm-cu-tel-sub {
font-size: 0.68rem;
font-weight: 400;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 0.03em;
}
.fm-cu-wa {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: #ffffff;
color: #28a85f !important;
border: 1.5px solid #a7f0cc;
font-weight: 600;
font-size: 0.9rem;
border-radius: var(--raggio);
padding: 12px 20px;
width: 100%;
margin-bottom: 18px;
transition: all var(--trans);
text-decoration: none;
line-height: 1;
}
.fm-cu-wa:hover {
background: #edfdf5;
border-color: var(--v);
transform: translateY(-2px);
}
.fm-cu-feats {
display: flex;
justify-content: space-around;
border-top: 1px solid var(--grigio3);
padding-top: 16px;
gap: 6px;
}
.fm-cu-feat {
text-align: center;
}
.fm-cu-feat strong {
display: block;
font-family: "Inter", sans-serif;
font-size: 0.95rem;
color: var(--v);
font-weight: 800;
line-height: 1.2;
}
.fm-cu-feat span {
font-size: 0.7rem;
color: var(--testo2);
}
/* ╔══════════════════════════════════════════════════════════
║ TRUST BAR
╚══════════════════════════════════════════════════════════ */
.fm-trust {
background: #3ddc84;
border-bottom: none;
padding: 16px 0;
position: relative;
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
max-width: 100vw;
}
.fm-trust-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.fm-trust-item {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.85rem;
font-weight: 700;
color: #fff;
white-space: nowrap;
}
.fm-trust-item svg {
stroke: #fff;
}
.fm-trust-item strong {
color: #fff;
font-weight: 800;
}
.fm-trust-div {
width: 1px;
height: 22px;
background: rgba(255, 255, 255, 0.35);
}
/* ╔══════════════════════════════════════════════════════════
║ SERVIZI CORE
╚══════════════════════════════════════════════════════════ */
.fm-servizi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.fm-sc {
background: var(--bianco);
border: 1.5px solid var(--grigio3);
border-radius: var(--raggio-l);
padding: 28px 24px;
transition: all var(--trans);
display: flex;
flex-direction: column;
box-shadow: var(--ombra-s);
}
.fm-sc:hover {
border-color: var(--v);
box-shadow: 0 8px 28px rgba(22, 163, 74, 0.12);
transform: translateY(-4px);
}
.fm-sc.emg {
background: #f0f4ff;
border-color: #bfcfea;
}
.fm-sc.emg:hover {
border-color: #1e3a5f;
box-shadow: 0 8px 28px rgba(30, 58, 95, 0.08);
}
.fm-sc-icon {
width: 50px;
height: 50px;
background: var(--v-light);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
margin-bottom: 18px;
transition: background var(--trans);
}
.fm-sc.emg .fm-sc-icon {
background: #eef2ff;
}
.fm-sc:hover .fm-sc-icon {
background: var(--v-mid);
}
.fm-sc h3 {
color: var(--navy);
margin-bottom: 10px;
}
.fm-sc p {
font-size: 0.87rem;
flex: 1;
margin-bottom: 18px;
}
.fm-sc-lnk {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--v);
display: inline-flex;
align-items: center;
gap: 5px;
transition: gap var(--trans);
}
.fm-sc.emg .fm-sc-lnk {
color: #1e3a5f;
}
.fm-sc:hover .fm-sc-lnk {
gap: 10px;
}
/* ╔══════════════════════════════════════════════════════════
║ COME FUNZIONA
╚══════════════════════════════════════════════════════════ */
.fm-come-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: center;
}
.fm-steps {
display: flex;
flex-direction: column;
gap: 0;
}
.fm-step {
display: flex;
gap: 22px;
padding: 26px 0;
border-bottom: 1px solid var(--grigio3);
align-items: flex-start;
}
.fm-step:last-child {
border-bottom: none;
}
.fm-step-n {
width: 48px;
height: 48px;
flex-shrink: 0;
border: 2px solid var(--v);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: "Inter", sans-serif;
font-weight: 800;
font-size: 1.1rem;
color: var(--v);
background: var(--v-light);
}
.fm-step h4 {
color: var(--navy);
margin-bottom: 6px;
}
.fm-step p {
font-size: 0.87rem;
}
.fm-come-img {
position: relative;
}
.fm-come-img .fm-img-ph {
aspect-ratio: 4/5;
}
.fm-come-badge {
position: absolute;
bottom: 28px;
left: -22px;
background: var(--bianco);
border: 1px solid var(--grigio3);
border-radius: var(--raggio);
padding: 14px 18px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: var(--ombra-m);
}
.fm-come-badge-num {
font-family: "Inter", sans-serif;
font-weight: 800;
font-size: 1.8rem;
color: var(--v);
line-height: 1;
}
.fm-come-badge span {
font-size: 0.76rem;
color: var(--testo2);
display: block;
}
/* ╔══════════════════════════════════════════════════════════
║ STATS
╚══════════════════════════════════════════════════════════ */
.fm-stats-strip {
background: var(--v);
padding: 52px 0;
position: relative;
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
max-width: 100vw;
}
.fm-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
text-align: center;
}
.fm-stat + .fm-stat {
border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.fm-stat-n {
font-family: "Inter", sans-serif;
font-weight: 800;
font-size: clamp(2.4rem, 4vw, 3.4rem);
color: var(--bianco);
line-height: 1;
margin-bottom: 6px;
}
.fm-stat-l {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.75);
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* ╔══════════════════════════════════════════════════════════
║ EMERGENZE
╚══════════════════════════════════════════════════════════ */
.fm-emg-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: center;
}
.fm-emg-items {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.fm-emg-item {
background: var(--bianco);
border: 1.5px solid var(--grigio3);
border-radius: var(--raggio);
padding: 16px;
display: flex;
align-items: flex-start;
gap: 12px;
transition: all var(--trans);
box-shadow: var(--ombra-s);
}
.fm-emg-item:hover {
border-color: var(--v);
box-shadow: var(--ombra-v);
transform: translateY(-3px);
color: inherit;
}
.fm-emg-item-ico {
font-size: 1.2rem;
flex-shrink: 0;
margin-top: 1px;
}
.fm-emg-item h4 {
color: var(--navy);
font-size: 0.9rem;
margin-bottom: 2px;
}
.fm-emg-item p {
font-size: 0.76rem;
line-height: 1.4;
}
/* ╔══════════════════════════════════════════════════════════
║ ZONE
╚══════════════════════════════════════════════════════════ */
.fm-zone-cloud {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 36px;
}
.fm-zpill {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--bianco);
border: 1.5px solid var(--grigio3);
border-radius: 50px;
padding: 8px 18px;
font-size: 0.85rem;
font-weight: 500;
color: var(--navy);
box-shadow: var(--ombra-s);
transition: all var(--trans);
}
.fm-zpill:hover {
background: var(--v);
color: var(--bianco);
border-color: var(--v);
transform: translateY(-2px);
box-shadow: var(--ombra-v);
}
.fm-zpill::before {
display: none;
}
/* ╔══════════════════════════════════════════════════════════
║ PREZZI
╚══════════════════════════════════════════════════════════ */
.fm-prezzi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.fm-pcard {
background: var(--bianco);
border: 1.5px solid var(--grigio3);
border-radius: var(--raggio-l);
padding: 28px 22px;
text-align: center;
box-shadow: var(--ombra-s);
transition: all var(--trans);
}
.fm-pcard:hover {
border-color: var(--v);
box-shadow: var(--ombra-v);
transform: translateY(-4px);
}
.fm-pcard.top {
background: var(--navy);
border-color: var(--navy);
transform: scale(1.04);
}
.fm-pcard.top h4,
.fm-pcard.top .fm-p-srv,
.fm-pcard.top .fm-p-note {
color: #94a3b8;
}
.fm-pcard.top .fm-p-pz {
color: #3ddc84;
}
.fm-p-ico {
font-size: 1.6rem;
margin-bottom: 12px;
}
.fm-p-srv {
font-family: "Inter", sans-serif;
font-weight: 800;
font-size: 1rem;
color: var(--navy);
margin-bottom: 4px;
}
.fm-p-tipo {
font-size: 0.74rem;
color: var(--testo2);
margin-bottom: 16px;
}
.fm-p-pz {
font-family: "Inter", sans-serif;
font-weight: 800;
font-size: 2rem;
color: var(--v);
line-height: 1;
}
.fm-p-pz small {
font-size: 1rem;
font-weight: 400;
color: var(--testo2);
}
.fm-p-note {
font-size: 0.72rem;
color: var(--testo2);
margin-top: 8px;
}
/* ╔══════════════════════════════════════════════════════════
║ RECENSIONI
╚══════════════════════════════════════════════════════════ */
.fm-rec-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 44px;
gap: 20px;
flex-wrap: wrap;
}
.fm-rec-score {
display: flex;
align-items: center;
gap: 14px;
background: var(--bianco);
border: 1.5px solid var(--grigio3);
border-radius: var(--raggio);
padding: 14px 22px;
box-shadow: var(--ombra-s);
}
.fm-rec-stelle {
color: #f59e0b;
font-size: 1.2rem;
letter-spacing: 2px;
}
.fm-rec-num {
font-family: "Inter", sans-serif;
font-weight: 800;
font-size: 2rem;
color: var(--navy);
}
.fm-rec-sub {
font-size: 0.74rem;
color: var(--testo2);
}
.fm-rec-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.fm-rcard {
background: var(--bianco);
border: 1.5px solid var(--grigio3);
border-radius: var(--raggio-l);
padding: 24px;
box-shadow: var(--ombra-s);
transition: all var(--trans);
}
.fm-rcard:hover {
border-color: var(--v);
box-shadow: var(--ombra-v);
transform: translateY(-3px);
}
.fm-rcard-stelle {
color: #f59e0b;
font-size: 0.88rem;
letter-spacing: 2px;
margin-bottom: 12px;
}
.fm-rcard-txt {
font-size: 0.88rem;
line-height: 1.72;
color: var(--testo);
font-style: italic;
margin-bottom: 18px;
}
.fm-rcard-author {
display: flex;
align-items: center;
gap: 11px;
}
.fm-ravatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--v-light);
border: 2px solid var(--v-mid);
display: flex;
align-items: center;
justify-content: center;
font-family: "Inter", sans-serif;
font-weight: 800;
font-size: 0.85rem;
color: var(--v);
flex-shrink: 0;
}
.fm-rname {
font-weight: 600;
font-size: 0.88rem;
color: var(--navy);
}
.fm-rzona {
font-size: 0.74rem;
color: var(--testo2);
}
.fm-rsource {
font-size: 0.7rem;
color: var(--testo2);
margin-top: 2px;
}
/* ╔══════════════════════════════════════════════════════════
║ FAQ
╚══════════════════════════════════════════════════════════ */
.fm-faq-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.fm-faq-list {
display: flex;
flex-direction: column;
}
.fm-faq-item {
border-bottom: 1px solid var(--grigio3);
}
.fm-faq-q {
display: flex;
align-items: center;
justify-content: space-between;
padding: 19px 0;
cursor: pointer;
gap: 14px;
font-weight: 600;
font-size: 0.95rem;
color: var(--navy);
transition: color var(--trans);
}
.fm-faq-q:hover {
color: var(--v);
}
.fm-faq-ico {
width: 26px;
height: 26px;
border-radius: 50%;
flex-shrink: 0;
background: var(--v-light);
border: 1.5px solid var(--v-mid);
display: flex;
align-items: center;
justify-content: center;
color: var(--v);
font-size: 1.1rem;
font-weight: 300;
transition: transform var(--trans);
}
.fm-faq-item.open .fm-faq-ico {
transform: rotate(45deg);
background: var(--v);
color: var(--bianco);
}
.fm-faq-a {
max-height: 0;
overflow: hidden;
transition:
max-height 0.38s ease,
padding 0.38s ease;
font-size: 0.88rem;
line-height: 1.78;
color: var(--testo2);
}
.fm-faq-item.open .fm-faq-a {
max-height: 240px;
padding-bottom: 18px;
}
/* ╔══════════════════════════════════════════════════════════
║ CTA FINALE (navy – secondo blocco scuro)
╚══════════════════════════════════════════════════════════ */
.fm-cta-finale {
background: var(--navy);
padding: 88px 0;
position: relative;
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
max-width: 100vw;
}
.fm-cta-box {
max-width: 680px;
margin: 0 auto;
text-align: center;
}
.fm-cta-box h2 {
color: var(--bianco);
margin-bottom: 16px;
}
.fm-cta-box p {
font-size: 1rem;
margin-bottom: 36px;
}
.fm-cta-btns {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* ╔══════════════════════════════════════════════════════════
║ FLOATING BAR MOBILE
╚══════════════════════════════════════════════════════════ */
.fm-float {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
border-top: 2px solid var(--v);
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}
.fm-float-t {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--v);
padding: 15px 12px;
font-weight: 700;
font-size: 0.99rem;
color: var(--bianco);
letter-spacing: 0.02em;
}
.fm-float-w {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #28a85f;
padding: 15px 12px;
font-weight: 700;
font-size: 0.99rem;
color: var(--bianco);
letter-spacing: 0.02em;
border-left: 1px solid rgba(255, 255, 255, 0.2);
}
/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1024px) {
.fm-hero-inner {
grid-template-columns: 1fr;
}
.fm-card-urgenza {
max-width: 460px;
}
.fm-servizi-grid {
grid-template-columns: repeat(2, 1fr);
}
.fm-come-grid,
.fm-emg-grid {
grid-template-columns: 1fr;
gap: 48px;
}
.fm-come-badge {
left: 0;
}
.fm-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.fm-stat:nth-child(3) {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.fm-stat:nth-child(4) {
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.fm-rec-grid {
grid-template-columns: repeat(2, 1fr);
}
.fm-prezzi-grid {
grid-template-columns: repeat(2, 1fr);
}
.fm-faq-grid {
grid-template-columns: 1fr;
gap: 40px;
}
}
@media (max-width: 768px) {
.fm-sez {
padding: 60px 0;
}
.fm-hero {
padding: 130px 0 60px;
}
.fm-servizi-grid {
grid-template-columns: 1fr;
}
.fm-emg-items {
grid-template-columns: 1fr;
}
.fm-rec-grid {
grid-template-columns: 1fr;
}
.fm-prezzi-grid {
grid-template-columns: 1fr 1fr;
}
.fm-pcard.top {
transform: none;
}
.fm-trust-div {
display: none;
}
.fm-trust-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 8px;
justify-items: center;
}
.fm-trust-item {
font-size: 0.8rem;
justify-content: center;
}
.fm-hero-pill:nth-child(3) {
flex: 1 1 100%;
}
}
@media (max-width: 480px) {
.fm-hero h1 {
font-size: 2.6rem;
}
.fm-hero-cta {
flex-direction: column;
}
.fm-prezzi-grid {
grid-template-columns: 1fr;
}
.fm-cta-btns {
flex-direction: column;
}
}