vuoto prima di ogni card:
la griglia si ritrova 6 figli invece di 3 e le card
finiscono a scacchiera. I
diretti qui non sono
mai contenuto: le card sono .
-------------------------------------------------- */
.blatte-hero__benefit-grid > p {
display: none;
}
.blatte-hero__benefit-grid {
align-items: stretch;
}
/* --------------------------------------------------
FORM DELL'HERO
24px di padding su una colonna da 384px lasciavano
336px ai campi: la form risultava stretta. Con 16px
se ne guadagnano 16.
-------------------------------------------------- */
.blatte-hero__form-card {
padding: 16px;
}
/* --------------------------------------------------
TESTO DI LETTURA A 18px
Gli heading non vengono toccati. I restano
subordinati ma salgono a 16px: sotto i 12px erano
etichette illeggibili, non gerarchia.
-------------------------------------------------- */
.blatte-hero p,
.blatte-hero li,
.blatte-hero td,
.blatte-hero dd,
.blatte-hero dt {
font-size: 18px;
}
.blatte-hero small {
font-size: 16px;
}
/* --------------------------------------------------
INTESTAZIONE E CODA DELLA CARD PIU' COMPATTE
-------------------------------------------------- */
.blatte-hero__form-head {
margin-bottom: 0.5rem;
}
.blatte-hero__form-head h2,
.blatte-hero__form-title {
margin: 0.15rem 0 0.3rem;
line-height: 1.2;
}
.blatte-hero__form-reassurance {
margin-top: 0.5rem;
}
/* ======================================================================
CTA WHATSAPP NELL'HERO
Va su una riga propria, non in fila con le altre due: a 1024px i due
pulsanti esistenti sono gia' larghi 251px con il testo su due righe,
un terzo in riga li porterebbe a ~165px e a tre righe di testo.
flex-wrap + flex-basis 100% lo mandano sotto senza toccarli.
Il colore e' lo stesso #15948b della barra mobile: WhatsApp sul sito
ha gia' questa identita', non se ne introduce una seconda. Il colore
va !important come per --primary e --secondary, altrimenti vince
`.elementor-kit-29 a`, che con (0,1,1) batte la classe singola.
====================================================================== */
.blatte-hero__actions {
flex-wrap: wrap;
}
.blatte-hero__cta--whatsapp {
flex: 1 1 100%;
color: #FFFFFF !important;
background: #15948b;
border-color: #15948b;
}
.blatte-hero__cta--whatsapp:hover {
background: #0f6f68;
border-color: #0f6f68;
}
/* ----------------------------------------------------------------------
GRONDA MOBILE DELL'HERO ALLINEATA ALLE ALTRE SEZIONI
`.blatte-hero__layout` lasciava 9px per lato contro i 15 di costi,
chi-siamo e ora problema/zone/contatto. Stessa convenzione.
---------------------------------------------------------------------- */
@media (max-width: 1023px) {
.blatte-hero__layout {
width: min(1400px, calc(100% - 2rem));
margin-inline: auto;
}
}
/* ----------------------------------------------------------------------
FRASE DELLE SPECIE SU UNA RIGA SOLA
Con la quarta specie e la coda "e altre specie di blatte" la frase
misura 1066px su riga unica, mentre il contenitore e' 879 a 1520px e
749 a 1280px: a 18px andava a capo su due righe.
Il corpo scala con la larghezza della finestra invece di essere fisso.
Il contenitore vale circa il 58% della finestra, quindi il corpo che
serve e' ~0,976vw: qui si usa 0,96vw, appena sotto, per avere margine.
Il tetto resta 18px, cosi' su schermi molto larghi non cresce oltre il
resto del testo.
NIENTE `white-space: nowrap`: se il calcolo sbagliasse di poco, la
frase sborderebbe dal contenitore invece di andare a capo. Meglio due
righe che testo tagliato fuori.
Sotto i 1200px la riga unica richiederebbe meno di 11px: li' la frase
va a capo, ed e' la scelta giusta.
---------------------------------------------------------------------- */
@media ( min-width: 1200px ) {
/* due classi + elemento: (0,2,1). La regola del corpo hero
`.blatte-hero p, ...` vale (0,1,1) e altrimenti vince lei. */
.blatte-hero p.blatte-hero__species {
font-size: min(18px, 0.96vw);
}
}
/* Block: problema-soluzione */
.blatte-problema {
--blatte-dark: #1d2327;
--blatte-green: #2e4438;
--blatte-teal: #0f6f68;
--blatte-teal-light: #2db0a6;
--blatte-orange: #e06b44;
--blatte-white: #ffffff;
display: block !important;
width: 100%;
padding-block: 50px;
color: var(--blatte-green);
background: var(--blatte-white);
font-family: "Phudu", sans-serif;
}
.blatte-problema *,
.blatte-problema *::before,
.blatte-problema *::after {
box-sizing: border-box;
}
/* ==================================================
ASSE CENTRALE DELLA SEZIONE
Header, card e highlight condividono
esattamente la stessa larghezza.
================================================== */
.blatte-problema__header,
.blatte-problema__grid,
.blatte-problema__highlight {
width: 100%;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
/* ==================================================
HEADER
================================================== */
.blatte-problema__header {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom:
clamp(
1.6rem,
3vw,
2.3rem
);
}
/* ==================================================
EYEBROW
================================================== */
.blatte-problema__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
max-width: 100%;
margin:
0 0 0.75rem;
padding:
0.42rem 0.72rem;
color:
var(--blatte-green);
background:
rgb(45 176 166 / 10%);
border:
1px solid rgb(21 148 139 / 24%);
border-radius:
999px;
font-size:
0.68rem;
font-weight:
700;
line-height:
1.3;
letter-spacing:
0.045em;
text-transform:
uppercase;
}
.blatte-problema__eyebrow-dot {
display: inline-block;
width: 0.48rem;
height: 0.48rem;
flex:
0 0 0.48rem;
background:
var(--blatte-orange);
border-radius:
50%;
}
/* ==================================================
H2
================================================== */
.blatte-problema__title {
width: 100%;
max-width: 58rem;
margin: 0;
color:
var(--blatte-dark);
font-family:
"Phudu",
sans-serif;
font-size:
clamp(
2rem,
3.2vw,
3rem
);
font-weight:
800;
line-height:
1.05;
letter-spacing:
-0.03em;
text-wrap:
balance;
}
/* ==================================================
INTRO
================================================== */
.blatte-problema__intro {
width: 100%;
max-width: 55rem;
margin:
0.9rem 0 0;
color:
var(--blatte-green);
font-size:
clamp(
0.94rem,
1.25vw,
1.04rem
);
font-weight:
400;
line-height:
1.65;
opacity:
0.83;
text-wrap:
pretty;
}
/* ==================================================
LAYOUT CARD
Mobile = colonna
Desktop = due colonne reali
================================================== */
.blatte-problema__grid {
display: flex !important;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap:
clamp(
1rem,
2vw,
1.4rem
);
}
/* ==================================================
CARD
================================================== */
.blatte-problema__card {
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
width: 100%;
min-width: 0;
overflow: hidden;
padding:
clamp(
1rem,
1.5vw,
1.25rem
);
background:
var(--blatte-white);
border:
1px solid rgb(46 68 56 / 14%);
border-radius:
0.85rem;
box-shadow:
0 0.5rem 1.4rem
rgb(29 35 39 / 6%);
transition:
border-color 180ms ease,
box-shadow 180ms ease,
transform 180ms ease;
}
.blatte-problema__card::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 4px;
}
.blatte-problema__card:hover {
box-shadow:
0 0.8rem 1.9rem
rgb(29 35 39 / 9%);
transform:
translateY(-2px);
}
/* ==================================================
CARD PROBLEMA
================================================== */
.blatte-problema__card--risk {
background:
linear-gradient(
145deg,
var(--blatte-white),
rgb(224 107 68 / 4%)
);
border-color:
rgb(224 107 68 / 21%);
}
.blatte-problema__card--risk::before {
background:
var(--blatte-orange);
}
/* ==================================================
CARD SOLUZIONE
================================================== */
.blatte-problema__card--solution {
background:
linear-gradient(
145deg,
var(--blatte-white),
rgb(45 176 166 / 5%)
);
border-color:
rgb(21 148 139 / 21%);
}
.blatte-problema__card--solution::before {
background:
var(--blatte-teal);
}
/* ==================================================
CARD HEADING
================================================== */
.blatte-problema__card-heading {
display: flex;
align-items: flex-start;
gap: 0.7rem;
width: 100%;
margin-bottom:
0.7rem;
}
.blatte-problema__card-heading > div {
flex:
1 1 auto;
min-width: 0;
}
/* ==================================================
ICONA PRINCIPALE
================================================== */
.blatte-problema__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.65rem;
height: 2.65rem;
flex:
0 0 2.65rem;
color:
var(--blatte-white);
border-radius:
0.55rem;
}
.blatte-problema__card--risk
.blatte-problema__icon {
background:
var(--blatte-orange);
}
.blatte-problema__card--solution
.blatte-problema__icon {
background:
var(--blatte-teal);
}
.blatte-problema__icon svg,
.blatte-problema__list-icon svg,
.blatte-problema__highlight-icon svg {
width: 1.25rem;
height: 1.25rem;
fill: none;
stroke:
currentColor;
stroke-width:
1.8;
stroke-linecap:
round;
stroke-linejoin:
round;
}
/* ==================================================
LABEL
================================================== */
.blatte-problema__label {
margin:
0 0 0.2rem;
color:
var(--blatte-orange);
font-size:
0.64rem;
font-weight:
700;
line-height:
1.3;
letter-spacing:
0.05em;
text-transform:
uppercase;
}
.blatte-problema__card--solution
.blatte-problema__label {
color:
var(--blatte-teal);
}
/* ==================================================
H3
================================================== */
.blatte-problema__card h3 {
width: 100%;
margin: 0;
color:
var(--blatte-dark);
font-family:
"Phudu",
sans-serif;
font-size:
clamp(
1.12rem,
1.65vw,
1.45rem
);
font-weight:
750;
line-height:
1.18;
letter-spacing:
-0.016em;
text-wrap:
balance;
}
/* ==================================================
INTRO CARD
================================================== */
.blatte-problema__card > p {
width: 100%;
margin: 0;
color:
var(--blatte-green);
font-size:
0.84rem;
line-height:
1.62;
opacity:
0.82;
}
/* ==================================================
LISTA
================================================== */
.blatte-problema__list {
display: flex;
flex-direction: column;
width: 100%;
gap: 0;
margin:
0.8rem 0 0;
padding: 0;
list-style: none;
}
.blatte-problema__list li {
display: flex;
align-items: flex-start;
gap: 0.65rem;
width: 100%;
padding:
0.58rem 0;
border-top:
1px solid rgb(46 68 56 / 11%);
}
.blatte-problema__list li:last-child {
padding-bottom: 0;
}
/* ==================================================
ICONE LISTA
================================================== */
.blatte-problema__list-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
flex:
0 0 2rem;
margin-top:
0.05rem;
border-radius:
0.48rem;
}
.blatte-problema__card--risk
.blatte-problema__list-icon {
color:
var(--blatte-orange);
background:
rgb(224 107 68 / 10%);
}
.blatte-problema__card--solution
.blatte-problema__list-icon {
color:
var(--blatte-teal);
background:
rgb(45 176 166 / 10%);
}
.blatte-problema__list-icon svg {
width: 0.95rem;
height: 0.95rem;
}
/* ==================================================
CONTENUTO LISTA
================================================== */
.blatte-problema__list li > div {
flex:
1 1 auto;
min-width: 0;
}
.blatte-problema__list strong {
display: block;
margin-bottom:
0.12rem;
color:
var(--blatte-dark);
font-size:
0.82rem;
font-weight:
700;
line-height:
1.38;
}
.blatte-problema__list p {
margin: 0;
color:
var(--blatte-green);
font-size:
0.76rem;
line-height:
1.55;
opacity:
0.78;
}
.blatte-problema__list em {
color:
var(--blatte-teal);
font-style:
normal;
font-weight:
600;
}
/* ==================================================
HIGHLIGHT FINALE
================================================== */
.blatte-problema__highlight {
display: flex;
align-items: center;
gap: 0.8rem;
margin-top:
clamp(
1rem,
2vw,
1.35rem
);
padding:
clamp(
1rem,
2vw,
1.3rem
);
color:
var(--blatte-white);
background:
linear-gradient(
135deg,
var(--blatte-dark),
var(--blatte-green)
);
border:
1px solid rgb(45 176 166 / 18%);
border-radius:
0.85rem;
box-shadow:
0 0.7rem 1.8rem
rgb(29 35 39 / 13%);
}
.blatte-problema__highlight-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
flex:
0 0 2.5rem;
color:
var(--blatte-dark);
background:
var(--blatte-teal-light);
border-radius:
50%;
}
.blatte-problema__highlight p {
display: flex;
flex:
1 1 auto;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
margin: 0;
}
.blatte-problema__highlight strong {
color:
var(--blatte-white);
font-family:
"Phudu",
sans-serif;
font-size:
clamp(
0.95rem,
1.4vw,
1.05rem
);
font-weight:
700;
line-height:
1.38;
}
.blatte-problema__highlight span {
color:
rgb(255 255 255 / 70%);
font-size:
0.78rem;
line-height:
1.52;
}
/* ==================================================
DESKTOP
DUE COLONNE REALI
================================================== */
@media (min-width: 1024px) {
.blatte-problema__grid {
flex-direction: row;
align-items: stretch;
justify-content: space-between;
gap:
clamp(
1rem,
1.5vw,
1.35rem
);
}
.blatte-problema__card--risk,
.blatte-problema__card--solution {
flex: 1 1 0;
width: 0;
min-width: 0;
align-self: stretch;
}
}
/* ==================================================
DESKTOP MOLTO AMPIO
================================================== */
@media (min-width: 1280px) {
.blatte-problema__header,
.blatte-problema__grid,
.blatte-problema__highlight {
max-width:
1400px;
}
}
/* ==================================================
TABLET
================================================== */
@media (
min-width: 700px
) and (
max-width: 1023px
) {
.blatte-problema__grid {
flex-direction:
column;
}
.blatte-problema__card {
width:
100%;
}
.blatte-problema__title {
max-width:
52rem;
}
}
/* ==================================================
MOBILE
================================================== */
@media (max-width: 699px) {
.blatte-problema {
padding-block: 40px;
}
.blatte-problema__header {
margin-bottom:
1.35rem;
}
.blatte-problema__title {
max-width:
100%;
font-size:
clamp(
1.7rem,
8vw,
2.3rem
);
line-height:
1.07;
}
.blatte-problema__intro {
max-width:
100%;
margin-top:
0.75rem;
font-size:
0.92rem;
}
.blatte-problema__eyebrow {
border-radius:
0.55rem;
}
.blatte-problema__grid {
flex-direction:
column;
gap:
0.9rem;
}
.blatte-problema__card {
width:
100%;
padding:
1rem;
}
.blatte-problema__card-heading {
gap:
0.65rem;
margin-bottom:
0.8rem;
}
.blatte-problema__icon {
width:
2.45rem;
height:
2.45rem;
flex-basis:
2.45rem;
}
.blatte-problema__card h3 {
font-size:
1.12rem;
}
.blatte-problema__card > p {
font-size:
0.82rem;
}
.blatte-problema__list {
margin-top:
0.85rem;
}
.blatte-problema__list li {
gap:
0.6rem;
padding:
0.68rem 0;
}
.blatte-problema__list-icon {
width:
1.9rem;
height:
1.9rem;
flex-basis:
1.9rem;
}
.blatte-problema__highlight {
align-items:
flex-start;
gap:
0.65rem;
padding:
0.95rem;
}
}
/* ==================================================
SMARTPHONE MOLTO PICCOLI
================================================== */
@media (max-width: 380px) {
.blatte-problema__card-heading {
flex-direction:
column;
}
.blatte-problema__highlight {
flex-direction:
column;
}
}
/* ==================================================
ACCESSIBILITÀ
================================================== */
@media (prefers-reduced-motion: reduce) {
.blatte-problema__card {
transition:
none;
}
.blatte-problema__card:hover {
transform:
none;
}
}
/* --------------------------------------------------
TESTO DI LETTURA A 18px
Gli heading non vengono toccati. I restano
subordinati ma salgono a 16px: sotto i 12px erano
etichette illeggibili, non gerarchia.
-------------------------------------------------- */
.blatte-problema p,
.blatte-problema li,
.blatte-problema td,
.blatte-problema dd,
.blatte-problema dt {
font-size: 18px;
}
.blatte-problema small {
font-size: 16px;
}
/* --------------------------------------------------
RIQUADRO-NOTA: RESPIRO E ACCENTO ARANCIONE
Era identico a quello del blocco costi — stesso
gradiente scuro, stesso peso — e due riquadri uguali
a poca distanza si neutralizzano a vicenda.
La forma resta quella comune (raggio 14.4px), cambia
l'ACCENTO: qui arancione, perche' il messaggio e' un
avvertimento. Padding da 20.8 a 32px e titolo da
16.8 a 20px, cosi' il riquadro pesa quanto il ruolo
che ha. Arancione su fondo scuro: 4.81.
-------------------------------------------------- */
.blatte-problema__highlight {
padding: 32px;
border-radius: 14.4px;
border-left: 5px solid var(--blatte-orange);
background:
radial-gradient(
circle at 0 0,
rgb(224 107 68 / 26%),
transparent 420px
),
linear-gradient(
135deg,
var(--blatte-dark) 0%,
var(--blatte-green) 100%
);
}
.blatte-problema__highlight strong {
display: block;
margin-bottom: 0.45rem;
color: var(--blatte-orange);
font-size: 20px;
letter-spacing: 0.01em;
}
.blatte-problema__highlight p,
.blatte-problema__highlight span {
font-size: 18px;
line-height: 1.55;
}
/* ======================================================================
MARGINI LATERALI SU MOBILE
A 390px il titolo e l'intro toccavano il bordo sinistro a 0px: l'asse
di questa sezione e' `width: 100%` con `margin: auto`, quindi su
schermi stretti non lascia alcuna gronda. Le sezioni gia' a posto
(costi, chi-siamo) usano `min(1400px, calc(100% - 2rem))`, che a
390px da' 16px per lato: qui si applica la stessa convenzione.
Limitato a <=1023px perche' il desktop e' gia' verificato a 1400px e
non va toccato.
====================================================================== */
@media (max-width: 1023px) {
.blatte-problema__header,
.blatte-problema__grid,
.blatte-problema__highlight {
width: min(1400px, calc(100% - 2rem));
margin-inline: auto;
}
}
/* Block: costi */
.blatte-costi,
.blatte-costi__inner,
.blatte-costi__header,
.blatte-costi__heading-grid,
.blatte-costi__heading-grid > *,
.blatte-costi__hook,
.blatte-costi__hook > *,
.blatte-costi__toolbar,
.blatte-costi__toolbar > *,
.blatte-costi__search,
.blatte-costi__search-field,
.blatte-costi__filters,
.blatte-costi__table-shell,
.blatte-costi__table-scroll,
.blatte-costi__footer,
.blatte-costi__footer > * {
min-width: 0;
max-width: 100%;
}
/* ==================================================
HEADER
Il box scuro non viene più compresso in una
colonna laterale troppo stretta.
================================================== */
.blatte-costi__heading-grid {
display: grid !important;
grid-template-columns:
minmax(0, 1fr) !important;
align-items: stretch !important;
gap: 1rem !important;
width: 100%;
}
.blatte-costi__heading-grid > div:first-child {
width: 100%;
min-width: 0;
}
.blatte-costi__title,
.blatte-costi__intro {
width: 100%;
max-width: 62rem;
}
.blatte-costi__hook {
display: grid !important;
grid-template-columns:
2.7rem minmax(0, 1fr);
align-items: center !important;
gap: 0.8rem !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0.9rem 1rem !important;
overflow: hidden;
}
.blatte-costi__hook-icon {
width: 2.7rem !important;
height: 2.7rem !important;
min-width: 2.7rem;
flex: none !important;
margin: 0 !important;
}
.blatte-costi__hook p {
display: block !important;
width: 100%;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
}
.blatte-costi__hook strong,
.blatte-costi__hook p > span {
width: 100%;
max-width: 100%;
margin-right: 0 !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
.blatte-costi__hook strong {
color: var(--blatte-white) !important;
font-size: 0.95rem !important;
line-height: 1.35 !important;
}
.blatte-costi__hook p > span {
color: rgb(255 255 255 / 72%) !important;
font-size: 0.8rem !important;
line-height: 1.5 !important;
}
/* ==================================================
TOOLBAR
Ricerca a sinistra + filtri a destra.
Nessun elemento può collassare a pochi pixel.
================================================== */
.blatte-costi__toolbar {
display: grid !important;
grid-template-columns:
minmax(0, 1fr) auto;
align-items: end !important;
gap: 1rem !important;
width: 100%;
margin-bottom: 0.9rem;
}
.blatte-costi__search {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
}
.blatte-costi__search-field {
width: 100% !important;
min-width: 0 !important;
}
.blatte-costi__search-input {
display: block;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.blatte-costi__filters {
display: flex !important;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0.45rem;
width: auto;
min-width: 0;
}
.blatte-costi__filter {
flex: 0 0 auto;
white-space: nowrap;
}
/* ==================================================
TABELLA
================================================== */
.blatte-costi__table-shell {
width: 100%;
overflow: hidden;
}
.blatte-costi__table-scroll {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.blatte-costi__table {
width: 100% !important;
min-width: 68rem;
table-layout: fixed !important;
}
.blatte-costi__table th,
.blatte-costi__table td {
min-width: 0;
overflow-wrap: break-word;
word-break: normal;
white-space: normal;
}
/*
* Distribuzione più adatta anche a prezzi composti
* come "€350 + IVA il primo passaggio..."
*/
.blatte-costi__table th:nth-child(1),
.blatte-costi__table td:nth-child(1) {
width: 25% !important;
}
.blatte-costi__table th:nth-child(2),
.blatte-costi__table td:nth-child(2) {
width: 24% !important;
}
.blatte-costi__table th:nth-child(3),
.blatte-costi__table td:nth-child(3) {
width: 25% !important;
}
.blatte-costi__table th:nth-child(4),
.blatte-costi__table td:nth-child(4) {
width: 26% !important;
}
/* ==================================================
PREZZO
Prima era white-space: nowrap:
i prezzi lunghi invadevano la colonna successiva.
================================================== */
.blatte-costi__price {
display: inline-block !important;
width: auto;
max-width: 100% !important;
min-width: 0 !important;
padding: 0.42rem 0.6rem !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
line-height: 1.3 !important;
text-align: left;
}
/* ==================================================
FOOTER
================================================== */
.blatte-costi__footer {
width: 100%;
}
.blatte-costi__note {
min-width: 0;
}
.blatte-costi__note strong,
.blatte-costi__note span {
overflow-wrap: break-word;
word-break: normal;
}
/* ==================================================
DESKTOP
================================================== */
@media (min-width: 1024px) {
/*
* Manteniamo intenzionalmente l'header su una colonna:
* il box-hook è una fascia orizzontale e non può più
* uscire dalla propria area.
*/
.blatte-costi__heading-grid {
grid-template-columns:
minmax(0, 1fr) !important;
}
.blatte-costi__toolbar {
grid-template-columns:
minmax(20rem, 1fr)
auto !important;
}
.blatte-costi__footer {
display: grid !important;
grid-template-columns:
minmax(0, 1fr)
auto;
align-items: center;
gap: 1rem;
}
.blatte-costi__cta {
width: auto !important;
max-width: 22rem;
white-space: normal;
}
}
/* ==================================================
TABLET
Barra filtri sotto il campo di ricerca.
================================================== */
@media (max-width: 900px) {
.blatte-costi__toolbar {
grid-template-columns:
minmax(0, 1fr) !important;
}
.blatte-costi__filters {
justify-content: flex-start;
width: 100%;
}
}
/* ==================================================
MOBILE
================================================== */
@media (max-width: 699px) {
.blatte-costi__hook {
grid-template-columns:
2.5rem minmax(0, 1fr);
padding:
0.85rem !important;
}
.blatte-costi__hook-icon {
width: 2.5rem !important;
height: 2.5rem !important;
min-width: 2.5rem;
}
.blatte-costi__filters {
flex-wrap: nowrap;
justify-content: flex-start;
width: 100%;
overflow-x: auto;
padding-bottom: 0.25rem;
-webkit-overflow-scrolling: touch;
}
/*
* La tabella mobile mantiene il layout a card
* già previsto dal CSS originale.
*/
.blatte-costi__table {
min-width: 0 !important;
}
.blatte-costi__table td {
width: 100% !important;
}
.blatte-costi__price {
justify-self: start;
width: fit-content;
max-width: 100%;
}
.blatte-costi__footer {
display: flex !important;
flex-direction: column;
align-items: stretch;
}
.blatte-costi__cta {
width: 100% !important;
max-width: none;
}
}
/* ==================================================
BLOCCO COSTI — regole mancanti
Il foglio conteneva gia' tabella, filtri e ricerca,
ma non il contenitore ne' la palette.
Le variabili --blatte-* NON stanno su :root: ogni
blocco le ridichiara sulla propria radice (hero,
contatto, faq-toggle, problema, scelta, zone).
.blatte-costi non lo faceva, quindi ogni
var(--blatte-*) al suo interno restava senza valore
e la CTA finale usciva trasparente.
================================================== */
.blatte-costi {
--blatte-dark: #1d2327;
--blatte-green: #2e4438;
--blatte-teal: #0f6f68;
--blatte-teal-light: #2db0a6;
--blatte-orange: #e06b44;
--blatte-white: #ffffff;
display: block;
width: 100%;
padding-block: 50px;
color: var(--blatte-green);
font-family:
"Phudu",
sans-serif;
}
/* Asse centrale: stessa misura degli altri blocchi
(.blatte-problema__header, .blatte-scelta__grid...). */
.blatte-costi__inner {
width: 100%;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.blatte-costi__header {
width: 100%;
margin-bottom: 1.4rem;
}
/* Occhiello a pastiglia: forma identica a
.blatte-zone__eyebrow / __scelta / __problema. */
.blatte-costi__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
max-width: 100%;
margin:
0 0 0.75rem;
padding:
0.42rem 0.72rem;
color: var(--blatte-green);
background:
rgb(45 176 166 / 10%);
border:
1px solid rgb(21 148 139 / 24%);
border-radius:
999px;
font-size:
0.68rem;
font-weight:
700;
line-height:
1.3;
letter-spacing:
0.045em;
text-transform:
uppercase;
}
/* Nel markup il titoletto e il testo che lo segue stanno
dentro lo STESSO
: senza questo si leggevano
attaccati ("...parte dal caso realeNumero di punti"). */
.blatte-costi__hook p strong,
.blatte-costi__table-meta p strong {
display: block;
margin-bottom: 0.15rem;
}
.blatte-costi__table-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
margin-bottom: 0.7rem;
font-size: 0.8rem;
}
.blatte-costi__table-meta p {
margin: 0;
}
.blatte-costi__result-count {
color: var(--blatte-teal);
font-weight: 700;
white-space: nowrap;
}
/* Stesso difetto nelle celle: il qualificatore breve va
sotto la casistica, non in coda alla stessa riga. */
.blatte-costi__table td small {
display: block;
margin-top: 0.2rem;
font-size: 0.78em;
font-weight: 400;
opacity: 0.78;
}
/* Il campo fa da riferimento al pulsante di cancellazione,
che il JS scopre togliendo l'attributo hidden. */
.blatte-costi__search-field {
position: relative;
}
.blatte-costi__search-field .blatte-costi__search-input {
padding-right: 2.2rem;
}
.blatte-costi__search-clear {
position: absolute;
top: 50%;
right: 0.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
padding: 0;
color: var(--blatte-green);
background:
rgb(45 176 166 / 12%);
border: 0;
border-radius: 999px;
font-size: 1rem;
line-height: 1;
cursor: pointer;
transform:
translateY(-50%);
}
/* Senza questa il display:inline-flex qui sopra batte la
regola del browser e il pulsante resterebbe visibile
anche da fermo. */
.blatte-costi__search-clear[hidden] {
display: none;
}
.blatte-costi__empty {
padding: 1.2rem 1rem;
color: var(--blatte-green);
text-align: center;
}
/* --------------------------------------------------
CTA del blocco costi
Nel foglio la CTA aveva SOLO regole di dimensione, e
per giunta dentro due @media: nessuna regola di
aspetto: a schermo restava un link di testo.
Qui c'e' l'aspetto e basta — width e max-width
restano governati dai due @media, per non entrare in
conflitto con loro.
-------------------------------------------------- */
.blatte-costi__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 1rem;
padding:
0.65rem 0.95rem;
color: var(--blatte-white);
background:
var(--blatte-teal-light);
border:
2px solid var(--blatte-teal-light);
border-radius:
0.48rem;
font-size:
0.74rem;
font-weight:
700;
letter-spacing:
0.03em;
text-decoration:
none;
transition:
background 0.2s ease,
color 0.2s ease;
}
.blatte-costi__cta:hover,
.blatte-costi__cta:focus-visible {
color: var(--blatte-teal-light);
background: transparent;
}
/* --------------------------------------------------
CORREZIONI CONTRASTO
1) Il riquadro-nota ha e BIANCHI ma
nessuno sfondo: bianco su bianco, illeggibile.
Il difetto era latente: finche' la palette non era
dichiarata sulla radice, var(--blatte-white) non
risolveva e il testo ereditava il verde scuro, per
cui si leggeva lo stesso. Dichiarata la palette, il
bianco ha iniziato a risolvere davvero. Si ripristina
il fondo scuro che quel testo presuppone.
2) Il kit di Elementor porta `.elementor-kit-29 a`
(specificita' 0,1,1) che batte `.blatte-costi__cta`
(0,1,0) e ricolora il bottone di verde su verde.
Si sale a 0,2,1 invece di usare !important, cosi'
la regola resta sovrascrivibile.
-------------------------------------------------- */
.blatte-costi__hook {
color: var(--blatte-white);
background:
linear-gradient(
135deg,
var(--blatte-dark) 0%,
var(--blatte-green) 100%
);
border-radius: 0.6rem;
}
.blatte-costi__hook p,
.blatte-costi__hook strong,
.blatte-costi__hook span {
color: var(--blatte-white);
}
.blatte-costi a.blatte-costi__cta,
.blatte-costi a.blatte-costi__cta span {
color: var(--blatte-white);
}
.blatte-costi a.blatte-costi__cta:hover,
.blatte-costi a.blatte-costi__cta:focus-visible,
.blatte-costi a.blatte-costi__cta:hover span,
.blatte-costi a.blatte-costi__cta:focus-visible span {
color: var(--blatte-teal-light);
}
/* --------------------------------------------------
LAYOUT DEL RIQUADRO-NOTA
wpautop sbilancia i tag di questo blocco: nel sorgente
il riquadro ha due figli (icona + paragrafo), nel
rendering compaiono
spuri che il browser trasforma
in paragrafi VUOTI. Con quattro figli in una griglia a
due colonne, il paragrafo col testo scivola nella
colonna dell'icona (43px) e va a capo a ogni parola.
Invece di inseguire l'autop si rende la regola
indifferente al numero di figli: i paragrafi vuoti
spariscono e il testo sta comunque in colonna 2.
-------------------------------------------------- */
.blatte-costi__hook > p:empty {
display: none;
}
.blatte-costi__hook > p {
grid-column: 2;
margin: 0;
}
/* --------------------------------------------------
ICONE A CONTORNO
Questi tre svg hanno path da contornare (h/v/Z) ma
nessuna regola: il browser applica il default
fill:black, stroke:none e li disegna come sagome nere
piene. Sul riquadro scuro l'icona diventava un
quadrato nero. Le icone degli altri blocchi usano
gia' fill:none + stroke, qui si allinea.
-------------------------------------------------- */
.blatte-costi__hook-icon svg,
.blatte-costi__search-field > svg,
.blatte-costi__cta svg {
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
/* --------------------------------------------------
FILTRI ALLINEATI ALLA PALETTE
Erano testo BIANCO su grigio #e6e6e6 (contrasto 1.5,
di fatto illeggibili) con raggio 2px, mentre il resto
della landing usa 14px e la coppia teal/verde.
-------------------------------------------------- */
.blatte-costi__filter {
padding: 0.55rem 1rem;
color: var(--blatte-green);
background: var(--blatte-white);
border: 1px solid rgb(21 148 139 / 35%);
border-radius: 999px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease;
}
.blatte-costi__filter:hover,
.blatte-costi__filter:focus-visible {
color: var(--blatte-white);
background: var(--blatte-teal);
border-color: var(--blatte-teal);
}
.blatte-costi__filter.is-active {
color: var(--blatte-white);
background: var(--blatte-teal-light);
border-color: var(--blatte-teal-light);
}
/* --------------------------------------------------
RIQUADRO-NOTA UNIFORMATO ALLA GARANZIA
Stesso trattamento del riquadro preso a riferimento:
velo radiale arancione sopra il gradiente scuro,
raggio 14.4px e respiro interno maggiore.
-------------------------------------------------- */
.blatte-costi__hook {
padding: 28.8px !important;
background:
radial-gradient(
circle at 100% 0,
rgb(224 107 68 / 20%),
transparent 384px
),
linear-gradient(
135deg,
var(--blatte-dark) 0%,
var(--blatte-green) 100%
);
border-radius: 14.4px;
}
/* --------------------------------------------------
TESTO DI LETTURA A 18px
Heading non toccati; subordinati ma a 16px.
-------------------------------------------------- */
.blatte-costi p,
.blatte-costi li,
.blatte-costi td,
.blatte-costi dd,
.blatte-costi dt {
font-size: 18px;
}
.blatte-costi small {
font-size: 16px;
}
/* --------------------------------------------------
STATO ATTIVO DEI FILTRI: CONTRASTO
Il verde-acqua chiaro con testo bianco dava 2.67, e
anche il teal del brand si ferma a 3.53: entrambi
sotto la soglia 4.5. #0f6f68 e' lo stesso verde
scurito gia' usato per i link dei consensi e porta
il rapporto a 5.70.
-------------------------------------------------- */
.blatte-costi__filter.is-active,
.blatte-costi__filter:hover,
.blatte-costi__filter:focus-visible {
color: var(--blatte-white);
background: #0f6f68;
border-color: #0f6f68;
}
/* --------------------------------------------------
RIQUADRO-NOTA: RESPIRO E ACCENTO VERDE-ACQUA
Stessa forma del gemello nel blocco problema, ACCENTO
diverso: qui il messaggio non avverte, rassicura sul
metodo, quindi resta nella famiglia teal.
Verde-acqua su fondo scuro: 5.96.
-------------------------------------------------- */
.blatte-costi__hook {
padding: 32px !important;
border-left: 5px solid var(--blatte-teal-light);
background:
radial-gradient(
circle at 0 0,
rgb(45 176 166 / 24%),
transparent 420px
),
linear-gradient(
135deg,
var(--blatte-dark) 0%,
var(--blatte-green) 100%
);
}
.blatte-costi__hook strong {
display: block;
margin-bottom: 0.45rem;
color: var(--blatte-teal-light);
font-size: 20px;
letter-spacing: 0.01em;
}
.blatte-costi__hook span,
.blatte-costi__hook p {
font-size: 18px;
line-height: 1.55;
}
/* --------------------------------------------------
TITOLO DEL RIQUADRO: SOVRASCRITTURA MOTIVATA
Il CSS originale del blocco dichiara
`.blatte-costi__hook strong { font-size:.95rem
!important; color: var(--blatte-white) !important }`.
Con un !important gia' in campo, la specificita' non
basta: l'unico modo di correggerlo e' pareggiarlo.
Limitato alle due proprieta' in conflitto.
-------------------------------------------------- */
.blatte-costi__hook strong {
color: var(--blatte-teal-light) !important;
font-size: 20px !important;
}
.blatte-costi__hook span,
.blatte-costi__hook p {
font-size: 18px !important;
}
/* --------------------------------------------------
CENTRATURA DEL RIQUADRO
In pagina l'icona non esiste: wpautop la riduce a un
che occupa la prima cella della griglia
e spinge il testo a destra di ~93px, lasciando un
vuoto enorme sul lato opposto.
:empty non lo intercetta (lo spazio unificatore non
e' "vuoto"), ma quel paragrafo e' sempre il primo
figlio. La regola si disattiva da sola se un giorno
l'icona tornasse a renderizzare: in quel caso il
primo figlio sarebbe lo , non un
.
-------------------------------------------------- */
.blatte-costi__hook > p:first-child {
display: none;
}
.blatte-costi__hook {
grid-template-columns:
minmax(0, 1fr);
justify-items: center;
text-align: center;
}
.blatte-costi__hook > p {
grid-column: 1;
max-width: 64rem;
}
/* --------------------------------------------------
NASCONDERE IL PARAGRAFO FANTASMA: !important MOTIVATO
Il CSS originale del blocco dichiara
`.blatte-costi__hook p { display: block !important }`.
La mia regola ha specificita' superiore (0,2,1 contro
0,1,1) ma contro un !important non basta: va pareggiato.
Limitato alla sola proprieta' in conflitto.
-------------------------------------------------- */
.blatte-costi__hook > p:first-child {
display: none !important;
}
/* ======================================================================
TABELLA COSTI: IMPILAMENTO SU MOBILE
Stato di partenza, il peggiore dei due mondi: la tabella nasce
scorrevole (`min-width: 68rem` dentro `.blatte-costi__table-scroll`,
che ha `overflow-x: auto`), ma sotto i 699px c'era
`min-width: 0 !important` — che toglie lo scorrimento — senza pero'
completare l'impilamento. Le 4 colonne restavano dentro 390px e le
intestazioni si spezzavano lettera per lettera ("CASISTI CA").
Il markup e' gia' pronto: ogni
porta `data-label` con il nome
della colonna. Serviva solo il CSS.
Nota sulla specificita': la regola mobile esistente
`.blatte-costi__table td { width: 100% !important }` non aveva alcun
effetto perche' `.blatte-costi__table td:nth-child(1) { width: 25%
!important }` vale (0,2,1) contro (0,1,1). Qui le larghezze si
riscrivono con gli stessi selettori nth-child.
====================================================================== */
@media (max-width: 699px) {
.blatte-costi__table {
display: block;
table-layout: auto !important;
}
/* l'intestazione non serve piu': il nome della colonna torna
sopra ogni valore tramite data-label */
.blatte-costi__table thead {
display: none;
}
.blatte-costi__table tbody,
.blatte-costi__table tr,
.blatte-costi__table td {
display: block;
width: 100% !important;
}
.blatte-costi__table td:nth-child(1),
.blatte-costi__table td:nth-child(2),
.blatte-costi__table td:nth-child(3),
.blatte-costi__table td:nth-child(4) {
width: 100% !important;
}
/* ogni riga diventa una scheda */
.blatte-costi__table tr {
margin-bottom: 0.75rem;
padding: 0.85rem 0.95rem;
border: 1px solid rgba(15, 111, 104, 0.22);
border-radius: 0.6rem;
background: rgba(255, 255, 255, 0.55);
}
.blatte-costi__table td {
padding: 0.5rem 0;
border: 0;
text-align: left;
}
.blatte-costi__table td:not(:last-child) {
border-bottom: 1px solid rgba(15, 111, 104, 0.12);
}
.blatte-costi__table td::before {
content: attr(data-label);
display: block;
margin-bottom: 0.18rem;
color: #0f6f68;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* la prima cella e' il titolo della scheda: niente etichetta */
.blatte-costi__table td:first-child::before {
display: none;
}
.blatte-costi__table td:first-child strong {
font-size: 1.05rem;
}
}
/* ----------------------------------------------------------------------
ICONE DEL BLOCCO COSTI FUORI MISURA
La lente del campo di ricerca veniva renderizzata a 990x990 px e la
freccia della CTA a 90x90: quegli