grows the hover target without changing
the header's height, so there's more to aim at on the way down. */
.nav-item > a{ padding-block:10px; }
.mega-menu{
--mega-gap:calc((max(var(--logo-h),44px) - 24px) / 2 + 11px);
position:absolute; top:calc(100% + var(--mega-gap)); left:0;
width:min(640px,calc(100vw - 2 * var(--gutter)));
background:var(--paper-000);
border:1px solid var(--line-200);
border-radius:var(--radius-m);
box-shadow:var(--shadow-pop);
/* No pointer-events here on purpose. visibility:hidden already makes
the closed panel unclickable, and unlike pointer-events it is a
transitioned property — so it stays "visible" (and therefore
interactive) for the whole grace period below. With
pointer-events:none the panel went inert the instant :hover was
lost: still on screen, but the mouse fell through it to the page
behind, so moving back onto it could not reopen it and the delay
bought nothing. */
opacity:0; visibility:hidden;
transform:translateY(-4px);
/* --mega-close-delay is a grace period on the CLOSING direction
only: this rule is what applies once :hover is lost, so the delay
here keeps the panel up while the cursor cuts a corner or crosses
a gap. The :hover rule below zeroes it, so opening stays instant. */
--mega-close-delay:.3s;
transition:
opacity .15s ease var(--mega-close-delay),
transform .15s ease var(--mega-close-delay),
visibility .15s var(--mega-close-delay);
z-index:150;
}
.mega-menu::before{
content:"";
position:absolute; left:0; right:0;
top:calc(-1 * var(--mega-gap)); height:var(--mega-gap);
}
.nav-item.has-mega:hover .mega-menu,
.nav-item.has-mega:focus-within .mega-menu{
opacity:1; visibility:visible;
transform:translateY(0);
--mega-close-delay:0s; /* opens with no lag */
}
.mega-menu__panel{ display:flex; align-items:stretch; }
/* One plain column of regions. Width is set so the longest names
("Apertura Porte Emilia – Romagna") stay on one line — wrapped rows
were what pushed Fabbro's 20 regions past the cap into a scrollbar. */
.mega-menu__pane--regions{
/* Width is set so the longest name stays on one line AT THE SIZE
ABOVE — 268px was right at .82rem and wraps "Apertura Porte
Emilia – Romagna" at .9rem. A wrapped row is not just untidy: it
costs a row's height in a column already capped for scrolling. */
flex:0 0 296px;
padding:10px;
/* Raised with the type below. Measured from the space actually left
under the header rather than a flat vh share, so the panel can't
run past the bottom of a short window. Fabbro is the worst case:
21 regions at 27px a row is 567px, so they fit down to roughly a
730px-tall window and scroll below that. */
max-height:min(calc(100vh - 120px),660px);
overflow-y:auto;
}
/* Desktop type: larger than the mobile drawer's, and with real space
between rows — these are pointing targets, not a dense list.
The vertical padding is 4px, not 5px, because restoring Fabbro
Valle d'Aosta took the fabbro menu from 20 regions to 21 (see
_PHASE-6-LOG.md A15) and a 21st row at the old height pushed the
column past the cap above, bringing the scrollbar back at window
heights where it used to fit. 2px off each row buys back 42px,
more than the 29px the new row costs, so 21 regions now clear the
cap in slightly LESS height than 20 used to.
This affects the desktop column only. The mobile drawer sets its
own min-height:44px in the <=900px block and is untouched.
The linked rows (a link plus a caret button) take the same size and
vertical padding, so a row that happens to be a page of its own is
indistinguishable from the rest of the column. Only the horizontal
padding differs, because the row's 10px is split between the two
halves instead of sitting on one element. */
.mega-region__toggle{
padding:4px 10px;
font-size:.9rem;
}
.mega-menu a.mega-region__link{
padding:4px 4px 4px 10px;
font-size:.9rem;
}
.mega-region__toggle--caret{
padding:4px 10px 4px 4px;
}
/* The cities for whichever region is pointed at. 15 is the most any
one region has, which is well inside the cap. */
.mega-menu__pane--cities{
flex:1 1 auto; min-width:0;
padding:16px 20px;
border-left:1px solid var(--line-100);
background:var(--paper-050);
border-radius:0 var(--radius-m) var(--radius-m) 0;
max-height:min(calc(100vh - 120px),660px);
overflow-y:auto;
}
.mega-menu__pane--cities a{
font-size:.95rem;
padding:7px 0;
}
.mega-menu__back{ display:none; }
}
/* ============================================================
7b. HERO — .hero--split variant
APPEND THIS AT THE END OF SECTION 7 IN global.css
(immediately before the "8. SERVICE TILE STRIP" comment)
Two-column hero: copy left, photo right with floating stat cards.
Overrides the photo-background hero without touching it, so the
homepage's existing .hero and .hero--compact keep working.
Selectors use .hero.hero--split (0,3,0) rather than .hero--split
(0,2,0) so they beat the base .hero .hero__grid rules regardless
of where this block ends up in the file.
============================================================ */
.hero.hero--split{
position:relative;
overflow:hidden;
background:var(--green-050);
padding-block:clamp(28px,5vw,72px);
color:var(--ink-700);
}
/* Was a decorative gradient wash (purely visual, aria-hidden in
markup) — removed in favour of the hero's own flat --green-050
background. The element stays in the markup, just unrendered, so
nothing else needs to change. */
.hero--split .hero__shape{ display:none; }
/* Reset everything the photo-hero set on the grid */
.hero.hero--split .hero__grid{
position:relative;
z-index:1;
width:min(100% - (var(--gutter) * 2), var(--max-w));
margin-inline:auto;
padding-inline:0;
padding-block:0;
min-height:0;
background-image:none;
background-color:transparent;
border-radius:0;
box-shadow:none;
display:grid;
gap:clamp(32px,5vw,64px);
align-items:center;
grid-template-columns:minmax(0,1fr);
}
@media (min-width:980px){
.hero.hero--split .hero__grid{
grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
gap:clamp(40px,5vw,80px);
}
}
/* The copy is no longer a card sitting on a photo */
.hero.hero--split .hero__copy{
background:transparent;
box-shadow:none;
border-radius:0;
margin:0;
padding:0;
display:block;
}
.hero--split .hero__copy .section-kicker{ margin-bottom:16px; }
/* One hero title treatment for every page on this banner: same size,
always capitals. text-transform rather than retyped copy, so a title
written in sentence case in the source still reads as capitals and
the source words stay untouched. Service stylesheets must not
override the size — the longer titles simply wrap onto more lines. */
.hero.hero--split h1,
.hero.hero--split .hero__headline,
/* One hero title treatment for every page on this banner: same size, always capitals. text-transform rather than retyped copy, so a title written in sentence case in the source still reads as capitals and the source words stay untouched. Service stylesheets must not override the size — the longer titles simply wrap onto more lines. */ .hero.hero--split h2:where(.h1-look){ text-transform:uppercase; }
.hero.hero--split h1,
.hero.hero--split h2:where(.h1-look){
font-size:clamp(2.1rem,1.4rem + 3vw,3.6rem);
line-height:1.02;
letter-spacing:-.02em;
}
/* Orange highlight inside the H1 */
.hero h1 .accent,
/* Orange highlight inside the H1 */ .hero h2:where(.h1-look) .accent{ color:var(--amber-500); }
.hero.hero--split .hero__sub{
margin-top:16px;
max-width:44ch;
}
.hero.hero--split .hero__actions{
margin-top:26px;
padding-top:0;
border-top:0;
max-width:none;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:var(--space-xs);
}
/* One per row on phones, so neither button gets squeezed. */
@media (max-width:480px){
.hero.hero--split .hero__actions{ flex-direction:column; align-items:stretch; }
}
/* --- Trust list: any number of items, 1 col on phones, 2 above --- */
.hero__trust{
display:grid;
gap:10px var(--space-m);
grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
margin-top:28px;
padding-top:24px;
border-top:1px solid var(--line-200);
max-width:520px;
}
.hero__trust li{
display:flex; align-items:center; gap:10px;
font-size:.95rem; font-weight:600; color:var(--green-900);
line-height:1.3;
}
.hero__trust svg{
width:20px; height:20px; flex-shrink:0;
color:var(--live-500);
}
/* ============================================================
Visual column
Mobile: image + stats flow as a grid, no absolute positioning.
Desktop: stats float over the image corners.
============================================================ */
.hero.hero--split .hero__visual{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
gap:var(--space-2xs);
position:relative;
padding:0;
align-items:stretch;
justify-content:initial;
}
/* Landscape on purpose — wider than tall. object-fit:cover means a
portrait source file gets cropped top and bottom to fit this box. */
.hero__img{
grid-column:1 / -1;
width:100%;
height:auto;
aspect-ratio:4/3;
object-fit:cover;
border-radius:var(--radius-l);
box-shadow:var(--shadow-pop);
margin-bottom:var(--space-2xs);
}
.hero__stat{
display:flex; flex-direction:column; gap:2px;
padding:14px 16px;
background:var(--paper-000);
border:1px solid var(--line-200);
border-radius:var(--radius-m);
box-shadow:var(--shadow-card);
}
.hero__stat-num{
font-family:var(--font-display);
font-weight:800;
font-size:clamp(1.15rem,1.05rem + .5vw,1.5rem);
line-height:1.1;
color:var(--green-900);
letter-spacing:-.01em;
}
.hero__stat-num sup{
font-size:.55em; vertical-align:super;
color:var(--amber-500); margin-left:1px;
}
.hero__stat-label{
font-size:.78rem; font-weight:600;
color:var(--ink-500); line-height:1.25;
}
.hero__stat--a .hero__stat-num{ color:var(--amber-600); }
@media (min-width:980px){
.hero.hero--split .hero__visual{
display:block;
padding:0 clamp(12px,2vw,28px);
}
.hero__img{
aspect-ratio:4/3;
margin-bottom:0;
}
.hero__stat{
position:absolute;
z-index:2;
min-width:150px;
padding:15px 18px;
backdrop-filter:blur(6px);
background:rgba(255,255,255,.94);
}
/* Tucked slightly outside the photo: it's landscape, so it's much
shorter than a portrait one and inset cards would crowd it. */
.hero__stat--a{ top:-4%; left:-2%; }
.hero__stat--d{ bottom:-6%; right:-2%; }
}
/* Tall-but-narrow desktops: pull the cards in so they don't collide */
@media (min-width:980px) and (max-width:1180px){
.hero__stat{ min-width:132px; padding:12px 14px; }
.hero__stat--a{ left:-2%; }
}
@media (max-width:420px){
.hero.hero--split .hero__visual{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.hero__stat{ padding:12px 13px; }
.hero__stat-label{ font-size:.73rem; }
}
/* ============================================================
8. SERVICE TILE STRIP — now any number of tiles
============================================================ */
.tile-strip{ background:var(--green-050); padding-block:clamp(36px,5vw,64px); }
.tile-strip__grid{
--col-min:140px;
--gap:clamp(12px,1.4vw,16px);
--cols-max:6; /* raise or lower per page if needed */
display:grid;
gap:var(--gap);
grid-template-columns:repeat(
auto-fit,
minmax(
max(min(var(--col-min),100%),
(100% - (var(--gap) * (var(--cols-max) - 1))) / var(--cols-max)),
1fr
)
);
}
.tile{
position:relative; isolation:isolate; overflow:hidden;
display:flex; flex-direction:column; align-items:center;
gap:14px; padding:26px 12px 22px;
background:var(--paper-000);
border:1px solid var(--line-200);
border-radius:var(--radius-m);
box-shadow:var(--shadow-card);
text-align:center;
height:100%; /* equal heights at any count */
transition:transform .22s cubic-bezier(.2,.7,.3,1),
box-shadow .22s cubic-bezier(.2,.7,.3,1),
border-color .22s ease;
}
.tile::before{
content:""; position:absolute; inset-inline:0; top:0; height:3px;
background:linear-gradient(90deg,var(--amber-500),var(--amber-400));
transform:scaleX(0); transform-origin:left;
transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.tile:hover,.tile:focus-within{
transform:translateY(-4px); border-color:transparent; box-shadow:var(--shadow-pop);
}
.tile:hover::before,.tile:focus-within::before{ transform:scaleX(1); }
.tile__media{
display:grid; place-items:center;
width:clamp(64px,9vw,84px); height:clamp(64px,9vw,84px);
border-radius:50%; background:var(--green-100);
transition:background .22s ease, transform .22s cubic-bezier(.2,.7,.3,1);
}
.tile:hover .tile__media,.tile:focus-within .tile__media{
background:var(--amber-050); transform:scale(1.06);
}
.tile__media img{
width:clamp(34px,5vw,48px); height:clamp(34px,5vw,48px);
transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.tile:hover .tile__media img{ transform:scale(1.06); }
.tile__label{
font-family:var(--font-display);
font-size:clamp(13px,1.1vw,15px);
font-weight:700; letter-spacing:-.01em;
color:var(--green-900); line-height:1.25;
display:inline-block; min-height:22px;
margin-top:auto; /* labels align even at uneven lengths */
transition:color .18s ease;
}
.tile:hover .tile__label,.tile:focus-within .tile__label{ color:var(--amber-600); }
.tile a:focus-visible{ outline:3px solid var(--green-500); outline-offset:3px; border-radius:8px; }
@media (max-width:899px){
.tile-strip__grid{ --cols-max:3; }
}
@media (max-width:480px){
.tile{ padding:18px 8px 16px; gap:10px; }
}
@media (prefers-reduced-motion:reduce){
.tile,.tile::before,.tile__media,.tile__media img{ transition:none; }
.tile:hover{ transform:none; }
.tile:hover .tile__media,.tile:focus-within .tile__media{ transform:none; }
}
/* ============================================================
9. ABOUT — collapses without a breakpoint
============================================================ */
.about__grid{
display:grid;
gap:clamp(32px,5vw,64px);
grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
align-items:center;
}
/* No panel behind the image: the gradient box, 4:5 ratio and contain
padding were built for the small map PNG this slot used to hold. It
holds a photo now, which fills the column at its own proportions. */
.about__media{
position:relative; border-radius:var(--radius-l); overflow:hidden;
max-width:400px; margin-inline:auto; /* source is 724px wide — any
larger and it renders soft */
}
.about__media img{ display:block; width:100%; height:auto; }
.about__content h2:where(:not(.h1-look)){ margin-bottom:8px; }
.about__subhead{
color:var(--amber-500);
font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);
font-weight:700; margin-bottom:20px;
}
.about__content p{ margin-bottom:16px; max-width:70ch; }
.about__content p:last-child{ margin-bottom:0; }
.about__content a{ color:var(--green-500); font-weight:700; }
.about__content a:hover{ color:var(--green-700); }
.about__content a.btn--white,
.about__content a.btn--white:hover,
.about__content a.btn--white:focus-visible{ color:var(--paper-000); }
.about__content a.btn--white .icon-phone{ color:inherit; }
/* Justified text creates rivers on narrow screens */
.about__content p,.feature-card p,.faq-item__a-inner p{ text-align:left; }
@media (min-width:900px){
.about__content p,.feature-card p,.faq-item__a-inner p{ text-align:justify; }
}
/* ============================================================
10. FEATURE CARDS — any number, accents cycle
============================================================ */
.features{ background:var(--green-050); }
.features__head{ max-width:620px; margin-bottom:var(--space-xl); }
.features__head--center{ margin-inline:auto; text-align:center; }
.features__head--center .section-kicker{ justify-content:center; }
.features__grid{
--col-min:280px; --gap:var(--space-m); --cols-max:3;
display:grid; gap:var(--gap);
grid-template-columns:repeat(
auto-fit,
minmax(max(min(var(--col-min),100%),
(100% - (var(--gap) * (var(--cols-max) - 1))) / var(--cols-max)),1fr)
);
}
.feature-card{
background:var(--paper-000);
border-radius:var(--radius-m);
padding:clamp(24px,3vw,34px) clamp(20px,2.5vw,28px);
border-top:4px solid var(--amber-500);
box-shadow:var(--shadow-card);
height:100%;
}
/* Cycles every 3 — works with 3, 4, 7 or any other count */
.feature-card:nth-child(3n+2){ border-top-color:var(--green-700); }
.feature-card:nth-child(3n+3){ border-top-color:var(--green-950); }
.feature-card__icon{
width:48px; height:48px; border-radius:12px;
background:var(--green-100); color:var(--green-800);
display:flex; align-items:center; justify-content:center;
margin-bottom:20px;
}
.feature-card__icon svg{ width:24px; height:24px; }
.feature-card :is(h2:where(:not(.h1-look)),h3,h4,h5,h6){
margin-bottom:12px;
font-size:clamp(1.05rem,1rem + .3vw,1.2rem);
font-weight:700; line-height:1.3; color:var(--green-900);
}
.feature-card :is(h2:where(:not(.h1-look)),h3,h4,h5,h6) a{ color:inherit; }
.feature-card :is(h2:where(:not(.h1-look)),h3,h4,h5,h6) a:hover{ color:var(--amber-600); }
.feature-card p{ font-size:.97rem; }
/* ============================================================
11. SERVICE CARDS — any number
============================================================ */
.services{ background:var(--paper-000); }
.services__grid{
--col-min:280px; --gap:clamp(20px,2.2vw,24px); --cols-max:3;
display:grid; gap:var(--gap);
grid-template-columns:repeat(
auto-fit,
minmax(max(min(var(--col-min),100%),
(100% - (var(--gap) * (var(--cols-max) - 1))) / var(--cols-max)),1fr)
);
}
.service-card{
background:var(--paper-000);
border:1px solid var(--line-200);
border-radius:var(--radius-m);
overflow:hidden;
display:flex; flex-direction:column;
height:100%;
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.service-card:hover,.service-card:focus-within{
transform:translateY(-6px); box-shadow:var(--shadow-pop); border-color:transparent;
}
.service-card__media{ position:relative; overflow:hidden; aspect-ratio:4/3; }
.service-card__media img{
width:100%; height:100%; object-fit:cover; transition:transform .4s ease;
}
.service-card:hover .service-card__media img{ transform:scale(1.05); }
.service-card__body{
padding:22px 24px 26px;
display:flex; align-items:center; justify-content:space-between;
gap:var(--space-s); flex:1;
}
.service-card h4{ color:var(--green-900); }
.service-card__arrow{
width:34px; height:34px; border-radius:50%;
background:var(--amber-600); color:var(--paper-000);
display:flex; align-items:center; justify-content:center; flex-shrink:0;
transition:background .22s ease, color .22s ease, transform .22s ease;
}
.service-card__arrow svg{ width:16px; height:16px; }
.service-card:hover .service-card__arrow{
background:var(--green-100); color:var(--green-800); transform:translateX(4px);
}
@media (max-width:899px){
.services__grid{ --cols-max:2; }
.services{display: none;}
}
/* ============================================================
12. ACCORDION / FAQ
============================================================ */
.faq{ background:var(--amber-050); }
.faq__wrap{ max-width:820px; margin-inline:auto; }
.faq-item{
background:var(--paper-000);
border:1px solid var(--line-200);
border-radius:var(--radius-m);
margin-bottom:var(--space-xs);
overflow:hidden;
transition:box-shadow .2s ease, border-color .2s ease;
}
.faq-item:hover{ border-color:var(--amber-400); }
.faq-item.is-open{ box-shadow:var(--shadow-card); border-color:transparent; }
.faq-item__q{
width:100%; text-align:left;
display:flex; align-items:center; justify-content:space-between;
gap:var(--space-s);
padding:clamp(16px,2.2vw,22px) clamp(16px,2.2vw,24px);
min-height:44px;
font-family:var(--font-display); font-weight:700;
font-size:clamp(.97rem,.93rem + .25vw,1.06rem);
line-height:1.35;
color:var(--green-900);
transition:color .18s ease;
}
.faq-item__q:hover{ color:var(--amber-600); }
.faq-item__plus{
width:28px; height:28px; border-radius:50%;
background:var(--green-100);
flex-shrink:0; position:relative;
transition:background .25s ease, transform .25s ease;
}
.faq-item__plus::before{
content:"";
position:absolute; top:47%; left:50%;
width:8px; height:8px;
border-right:2px solid var(--green-900);
border-bottom:2px solid var(--green-900);
transform:translate(-50%,-65%) rotate(45deg);
transition:border-color .25s ease;
}
.faq-item__plus::after{ content:none; }
.faq-item__q:hover .faq-item__plus{ background:var(--amber-050); }
.faq-item.is-open .faq-item__plus{
background:var(--amber-500); transform:rotate(180deg);
}
.faq-item.is-open .faq-item__plus::before{ border-color:#fff; }
/* Height-agnostic reveal. Padding lives on the inner element, which
is fully clipped while collapsed. */
.faq-item__a{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows .3s ease;
}
.faq-item.is-open .faq-item__a{ grid-template-rows:1fr; }
.faq-item__a > *{
overflow:hidden;
min-height:0;
}
.faq-item__a-inner{
padding:0 clamp(16px,2.2vw,24px);
max-width:68ch;
}
.faq-item__a-inner > *:first-child{ margin-top:0; }
.faq-item.is-open .faq-item__a-inner{
padding-bottom:clamp(18px,2.4vw,24px);
}
.faq-item__a-inner p{ font-size:.96rem; text-align:left; line-height:1.6; }
.faq-item__a-inner p + p{ margin-top:var(--space-xs); }
.faq-item__a-inner a{ color:var(--green-500); font-weight:700; text-decoration:underline; }
.faq-item__a-inner a:hover{ color:var(--green-700); }
@supports not (grid-template-rows:0fr){
.faq-item__a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-item.is-open .faq-item__a{ max-height:2000px; }
}
/* ============================================================
13. CTA BAND
============================================================ */
.cta-band{
position:relative; overflow:hidden;
background:linear-gradient(100deg,var(--green-900) 0%,var(--green-800) 100%);
color:#fff; padding-block:clamp(32px,5vw,60px);
}
.cta-band::before{
content:""; position:absolute; inset-inline:0; top:0; height:3px;
background:linear-gradient(90deg,var(--amber-500),var(--amber-400));
}
.cta-band__inner{
position:relative;
display:flex; flex-wrap:wrap;
align-items:center; justify-content:space-between;
gap:var(--space-m);
text-align:center;
}
.cta-band__lead{
font-family:var(--font-display); font-weight:800;
font-size:clamp(1.05rem,.95rem + .7vw,1.5rem);
line-height:1.2; letter-spacing:-.01em; color:#fff;
flex:1 1 min(100%,420px);
text-wrap:balance;
}
.cta-band__phone{
font-family:var(--font-body); font-size:1rem; font-weight:700;
padding:14px 28px; flex-shrink:0; margin-inline:auto;
}
@media (min-width:760px){
.cta-band__inner{ text-align:left; flex-wrap:nowrap; gap:var(--space-l); }
.cta-band__phone{ margin-inline:0; }
}
@media (max-width:600px){
.cta-band__phone{ width:100%; }
}
/* ============================================================
14. TABS — generic, scrollable on mobile
.region-tabs / .region-tab kept as aliases.
============================================================ */
.region-tabs{
display:flex; flex-wrap:wrap; gap:9px;
}
/* On phones, don't wrap into four rows — scroll instead */
@media (max-width:640px){
.region-tabs{
flex-wrap:nowrap;
overflow-x:auto;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
padding-bottom:4px;
margin-inline:calc(var(--gutter) * -1);
padding-inline:var(--gutter);
}
.region-tabs::-webkit-scrollbar{ display:none; }
.region-tab{ scroll-snap-align:start; flex:0 0 auto; }
}
.region-tab{
border:1.5px solid var(--line-200); background:#fff; color:var(--green-900);
padding:9px 16px; border-radius:999px;
font-family:inherit; font-size:14px; font-weight:600;
min-height:40px;
transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.region-tab:hover{ border-color:var(--amber-500); }
.region-tab.active,.region-tab[aria-selected="true"]{
background:var(--green-900); border-color:var(--green-900); color:#fff;
}
.region-panel{
margin-top:22px;
background:var(--amber-050);
border:1px solid var(--line-200);
border-radius:var(--radius-s);
padding:clamp(20px,2.6vw,28px);
min-height:150px;
}
.region-panel[hidden]{ display:none; }
.region-panel h3{
font-family:var(--font-body); font-size:15px; color:var(--amber-500);
text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px;
}
.region-panel p{ margin:0; color:var(--ink-700); font-size:15px; }
.region-panel p + p{ margin-top:var(--space-xs); }
/* ============================================================
15. COVERAGE / REGIONS
============================================================ */
.coverage{ padding-block:clamp(56px,8vw,96px); }
.coverage-top{ text-align:center; max-width:640px; margin:0 auto clamp(32px,4vw,46px); }
.coverage-top h2:where(:not(.h1-look)){ font-size:clamp(26px,3.4vw,34px); }
.coverage-top p{ color:var(--ink-700); margin-top:12px; }
.coverage-top .btn{ margin-top:22px; }
.coverage-grid{
display:grid;
gap:clamp(32px,4vw,46px);
grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));
align-items:start;
}
@media (min-width:1040px){
.coverage-grid{ grid-template-columns:.9fr 1.1fr; }
}
.map-wrap{ display:flex; align-items:center; justify-content:center; }
.map-wrap svg{ width:100%; max-width:340px; height:auto; }
.region-path{ transition:fill .15s ease, stroke .15s ease; }
.region-path.covered{ fill:var(--amber-050); stroke:var(--green-900); stroke-width:1; cursor:pointer; }
.region-path.covered:hover{ fill:#F2E7D2; stroke:var(--amber-500); }
.region-path.covered.active{ fill:var(--amber-500); stroke:var(--amber-600); }
.region-path.uncovered{ fill:#EAE5D8; stroke:#CFC8B3; stroke-width:.7; }
@media (max-width:920px){ .map-wrap{ margin-top:28px; } }
/* The map is decorative on phones — the tabs carry the same information */
/* @media (max-width:560px){ .map-wrap{ display:none; } } */
/* ============================================================
16. CITY / PARTNER LINK GROUPS — any number of groups or links
============================================================ */
.local{ background:var(--green-050); }
.local__groups{
--col-min:280px; --gap:clamp(20px,2.2vw,24px); --cols-max:3;
display:grid; gap:var(--gap);
grid-template-columns:repeat(
auto-fit,
minmax(max(min(var(--col-min),100%),
(100% - (var(--gap) * (var(--cols-max) - 1))) / var(--cols-max)),1fr)
);
}
.local-group{
position:relative; isolation:isolate; overflow:hidden;
background:var(--paper-000);
border:1px solid var(--line-200);
border-radius:var(--radius-m);
box-shadow:var(--shadow-card);
padding:clamp(24px,3vw,30px) clamp(20px,2.6vw,28px) 22px;
height:100%;
}
.local-group::before{
content:""; position:absolute; inset-inline:0; top:0; height:3px;
background:linear-gradient(90deg,var(--gold-500),var(--amber-400));
}
.local-group__head{
display:flex; align-items:center; gap:14px;
padding-bottom:18px; margin-bottom:6px;
border-bottom:1px solid var(--line-200);
}
.local-group__icon{
width:44px; height:44px; border-radius:12px;
background:var(--green-900); color:var(--gold-500);
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.local-group__icon svg{ width:22px; height:22px; }
.local-group h3{
font-family:var(--font-display); color:var(--green-900);
font-size:1.05rem; line-height:1.25; letter-spacing:-.01em;
}
.local-group__chips{ display:flex; flex-direction:column; gap:0; }
.local-chip{
position:relative; display:flex; align-items:center;
min-height:44px; padding:11px 0 11px 16px;
border-bottom:1px solid var(--line-100);
font-size:.875rem; font-weight:600; line-height:1.4; color:var(--ink-700);
transition:color .18s ease, padding-left .18s cubic-bezier(.2,.7,.3,1);
}
.local-group__chips .local-chip:last-child{ border-bottom:0; }
.local-chip::before{
content:""; position:absolute; left:0; top:50%;
width:3px; height:0; border-radius:999px; background:var(--amber-500);
transform:translateY(-50%);
transition:height .2s cubic-bezier(.2,.7,.3,1);
}
.local-chip:hover,.local-chip:focus-visible{ color:var(--green-900); padding-left:22px; }
.local-chip:hover::before,.local-chip:focus-visible::before{ height:20px; }
.local-chip:focus-visible{ outline:3px solid var(--green-500); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion:reduce){
.local-chip,.local-chip::before{ transition:none; }
.local-chip:hover,.local-chip:focus-visible{ padding-left:16px; }
}
/* ============================================================
19. FOOTER — any number of columns
============================================================ */
.site-footer{
background:var(--green-950); color:rgba(255,255,255,.7);
padding-block:56px 28px;
padding-bottom:calc(28px + var(--callbar-h)); /* clears the call bar */
}
@media (min-width:769px){ .site-footer{ padding-bottom:28px; } }
/* justify-content is CENTER, not space-between. This row has exactly one
child (footer.php's single ), and space-between parks a lone flex item
at flex-start — which left the legal line hard against the left edge with
~700px of empty footer beside it at 1440px. text-align could not correct
it: the
shrinks to its content width, so centring text inside a box
that is already at the left just centres it within itself.
If a second child is ever added here, center still reads correctly. */
.site-footer__legal{
padding-top:24px;
display:flex; flex-wrap:wrap; justify-content:center;
gap:12px; font-size:.9rem; color:rgba(255,255,255,.7); text-align:center;
}
.site-footer__legal a{ color:#fff; }
@media (max-width:600px){
.site-footer__legal{ flex-direction:column; }
}
/* ============================================================
20. STICKY CALL BAR (mobile)
============================================================ */
.call-bar{
position:fixed; bottom:0; left:0; width:100%; z-index:9999;
display:none; align-items:center; justify-content:center; gap:10px;
min-height:var(--callbar-h);
padding:15px 0 calc(15px + env(safe-area-inset-bottom));
background-color:var(--live-500); color:var(--paper-000);
font-size:20px; font-weight:700; text-align:center;
box-shadow:0 -2px 6px rgba(0,0,0,.2);
transition:transform .25s ease;
}
.call-bar:hover{ background-color:#218838; color:var(--paper-000); }
.call-bar:active{ background-color:#000; color:var(--paper-000); }
.call-bar svg{ width:22px; height:22px; flex-shrink:0; }
@media (max-width:768px){
.call-bar{ display:flex; }
body{ padding-bottom:calc(var(--callbar-h) + env(safe-area-inset-bottom)); }
}
/* Slid out of view (site.js §4) while another call button — the hero
CHIAMA, a mid-page CTA, the CTA band — is already on screen, so two
"call us" prompts are never visible at once. body keeps its
call-bar padding regardless: the bar still occupies its reserved
strip, it is just translated below it, so nothing reflows when it
toggles. */
.call-bar--hidden{ transform:translateY(100%); }
/* ============================================================
21. UTILITIES
============================================================ */
/* ============================================================
assets/css/idraulico.css
/intervento-idraulico/ — page-specific sections only.
Tokens, .container, .btn, the header/footer chrome, the sticky
call bar and the .hero--split hero all come from global.css and
are never redefined here (CLAUDE.md, "Section CSS" rule 2).
Everything below is prefixed idr- so it cannot collide with a
global component, now or later.
Sections: services - faq - closing - categories - emergency
(pricing + coverage now live in prezzi.css)
============================================================ */
/* --- Slots inside global components that this page fills with its
own content. .feature-card__icon is built for a 24px inline SVG;
this page puts a 128x128 PNG in it, so it needs sizing. --- */
.feature-card__icon img{
width:28px; height:28px; object-fit:contain; display:block;
}
/* Deliberately a
, not a heading — the old page has no heading
here and the hierarchy must match it exactly. */
.feature-card__title{
margin:0 0 10px;
font-family:var(--font-display);
font-weight:700; font-size:clamp(1.05rem,1rem + .3vw,1.2rem);
line-height:1.3; color:var(--green-900);
}
.idr-feature-check {
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(40, 167, 69, 0.12);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.idr-feature-check svg { width: 11px; height: 11px; }
.idr-section-title {
margin: 0 0 18px;
font-size: clamp(28px, 3vw, 38px);
font-weight: 800;
color: var(--green-900);
letter-spacing: -0.01em;
}
.idr-section-text {
font-size: 16.5px;
line-height: 1.7;
color: var(--ink-700);
margin: 0 0 28px;
max-width: 780px;
}
/* ============ Services section ============ */
.idr-services {
background: var(--paper-000);
padding: 88px 5vw 64px;
}
.idr-services-inner {
max-width: 1000px;
margin: 0 auto;
}
.idr-service-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 36px;
}
.idr-service-chip {
display: flex;
align-items: center;
gap: 12px;
background: var(--green-100);
border-radius: 12px;
padding: 14px 18px;
font-size: 15px;
font-weight: 600;
color: var(--green-900);
}
.idr-service-chip-icon {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--amber-600);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.idr-service-chip-icon svg { width: 11px; height: 11px; }
/* Inside a service card the column is half-width, so the chip
grid drops to two across and loses its trailing gap. */
.feature-card .idr-service-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-bottom: 0;
text-align: left;
}
.feature-card .idr-service-chip { font-size: 14px; padding: 12px 14px; }
.idr-services-closing {
background: var(--amber-050);
border: 1px solid var(--line-200);
border-radius: 18px;
padding: 28px 30px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.idr-services-closing p {
margin: 0;
font-size: 15.5px;
line-height: 1.6;
color: var(--ink-700);
max-width: 560px;
}
/* Targets global's .btn — this page's buttons moved onto it. Keeps
the button from being squashed by the flex row and matches the
slightly smaller size this panel used before. */
.idr-services-closing .btn {
flex-shrink: 0;
padding: 15px 26px;
font-size: 15px;
}
@media (max-width: 900px) {
/* minmax(0,1fr): a plain 1fr track never shrinks below its longest
word ("disincrostazione", "condizionamento"), which pushed the
grid up to 38px past the screen on 360–390px phones. */
.idr-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.idr-service-chip { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
}
@media (max-width: 480px) {
.idr-service-grid { gap: 8px; }
.idr-service-chip { gap: 6px; padding: 12px 8px; font-size: 13.5px; }
.idr-service-chip-icon { width: 18px; height: 18px; }
.idr-service-chip-icon svg { width: 9px; height: 9px; }
}
/* ============ FAQ section ============ */
.idr-faq {
background: var(--paper-050);
padding: 64px 5vw 88px;
}
.idr-faq-inner {
max-width: 900px;
margin: 0 auto;
}
.idr-faq-item {
background: var(--paper-000);
border: 1px solid var(--line-200);
border-radius: 16px;
padding: 6px 26px;
margin-bottom: 16px;
}
.idr-faq-item summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 0;
font-size: 17px;
font-weight: 700;
color: var(--green-900);
}
.idr-faq-item summary::-webkit-details-marker { display: none; }
.idr-faq-toggle {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--green-100);
color: var(--green-900);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 18px;
font-weight: 700;
transition: transform 0.15s ease;
}
.idr-faq-item[open] .idr-faq-toggle {
transform: rotate(45deg);
}
.idr-faq-body {
padding: 0 0 24px;
font-size: 15.5px;
line-height: 1.7;
color: var(--ink-700);
}
.idr-faq-body p { margin: 0 0 14px; }
.idr-faq-body p:last-child { margin-bottom: 0; }
.idr-faq-checklist {
list-style: none;
margin: 0 0 14px;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.idr-faq-checklist li {
display: flex;
align-items: flex-start;
gap: 10px;
}
.idr-faq-checklist .idr-feature-check {
margin-top: 2px;
}
/* ============ Closing panel ============ */
.idr-closing {
background: var(--green-900);
padding: 72px 5vw;
}
.idr-closing-inner {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.idr-closing h2:where(:not(.h1-look)) {
margin: 0 0 16px;
font-size: clamp(26px, 3vw, 34px);
font-weight: 800;
color: var(--paper-000);
letter-spacing: -0.01em;
}
.idr-closing p {
margin: 0 0 32px;
font-size: 16.5px;
line-height: 1.7;
color: var(--green-100);
}
/* ============ Service categories section ============ */
.idr-categories {
background: var(--paper-000);
padding: 88px 5vw;
}
.idr-categories-inner {
max-width: 1160px;
margin: 0 auto;
}
.idr-categories-head {
max-width: 620px;
margin-bottom: 48px;
}
.idr-categories-eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.idr-categories-eyebrow-bar {
width: 28px;
height: 3px;
background: var(--amber-600);
border-radius: 2px;
flex-shrink: 0;
}
.idr-categories-eyebrow-text {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--amber-600);
}
.idr-categories-title {
margin: 0;
font-size: clamp(28px, 3vw, 38px);
font-weight: 800;
color: var(--green-900);
letter-spacing: -0.01em;
}
.idr-category-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.idr-category-card {
position: relative;
background: var(--paper-050);
border-radius: 24px;
padding: 32px 30px 34px;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.idr-category-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(14, 57, 94, 0.14);
}
.idr-category-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 22px;
}
.idr-category-media {
width: 128px;
height: 128px;
border-radius: 20px;
overflow: hidden;
flex-shrink: 0;
}
.idr-category-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.25s ease;
}
.idr-category-card:hover .idr-category-media img {
transform: scale(1.06);
}
.idr-category-title {
margin: 0 0 16px;
font-size: 19px;
font-weight: 800;
color: var(--green-900);
line-height: 1.3;
}
.idr-category-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.idr-category-list li {
display: flex;
align-items: center;
gap: 9px;
font-size: 14.5px;
color: var(--ink-700);
}
.idr-category-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.idr-category-card--a .idr-category-dot { background: var(--amber-600); }
.idr-category-card--b .idr-category-dot { background: var(--green-900); }
.idr-category-card--c .idr-category-dot { background: var(--gold-500); }
.idr-category-card--d .idr-category-dot { background: var(--green-700); }
@media (max-width: 1100px) {
.idr-category-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.idr-category-grid { grid-template-columns: 1fr; }
}
/* ============ Emergency dark section ============ */
.idr-emergency {
background: var(--green-950);
padding: 92px 5vw;
}
.idr-emergency-inner {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 64px;
align-items: center;
}
.idr-emergency-eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 22px;
}
.idr-emergency-eyebrow-bar {
width: 28px;
height: 3px;
background: var(--amber-500);
border-radius: 2px;
flex-shrink: 0;
}
.idr-emergency-eyebrow-text {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--amber-500);
}
.idr-emergency-title {
margin: 0 0 24px;
font-size: clamp(28px, 3.4vw, 40px);
font-weight: 800;
color: var(--paper-000);
letter-spacing: -0.01em;
line-height: 1.15;
}
.idr-emergency-text {
font-size: 16.5px;
line-height: 1.75;
color: var(--green-100);
margin: 0 0 20px;
max-width: 560px;
}
.idr-emergency-text a {
color: var(--amber-400);
font-weight: 700;
text-decoration: underline;
}
.idr-emergency-cta {
margin-top: 12px;
}
.idr-emergency-media {
position: relative;
}
.idr-emergency-frame {
position: relative;
border-radius: 24px;
overflow: hidden;
aspect-ratio: 4 / 4.4;
box-shadow: 0 30px 60px rgba(0,0,0,0.35);
}
.idr-emergency-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.idr-emergency-badge {
position: absolute;
bottom: -22px;
left: -22px;
background: var(--amber-600);
color: var(--paper-000);
border-radius: 16px;
padding: 16px 22px;
box-shadow: 0 14px 34px rgba(0,0,0,0.3);
}
.idr-emergency-badge-value {
font-size: 20px;
font-weight: 800;
line-height: 1.1;
}
.idr-emergency-badge-label {
font-size: 12.5px;
margin-top: 3px;
opacity: 0.92;
}
@media (max-width: 900px) {
.idr-emergency-inner {
grid-template-columns: 1fr;
gap: 48px;
}
.idr-emergency-media { order: -1; max-width: 420px; margin: 0 auto; }
.idr-emergency-text { max-width: none; }
}
@media (max-width: 480px) {
.idr-emergency { padding: 64px 5vw; }
.idr-emergency-badge { padding: 12px 16px; left: -10px; bottom: -16px; }
}
/* ============================================================
/intervento-idraulico/idraulico-ticino/ — city page sections.
Hero reuses .hero--split (global.css) exactly as the hub and
/intervento-fabbro-h24/ pages do — no new hero CSS here.
Pricing reuses .svc-pricing* from prezzi.css; the intro image+text
reuses global's .about__grid. Everything else below is new,
prefixed idr- to stay clear of the sections above.
============================================================ */
/* ---- Icon strip ---- */
.idr-icon-strip {
background: var(--paper-000);
padding: 80px 5vw 56px;
text-align: center;
}
.idr-icon-strip-head {
max-width: 640px;
margin: 0 auto 44px;
}
/* Anzio heads the strip with the page's own H2, which carries a tel:
link. Base links are color:inherit, so it would read as plain text. */
.idr-icon-strip-head h2:where(:not(.h1-look)) a { color: var(--green-500); }
.idr-icon-strip-head h2:where(:not(.h1-look)) a:hover { color: var(--green-700); }
.idr-icon-strip-head h2:where(:not(.h1-look)) {
margin: 0 0 10px;
font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem);
color: var(--green-900);
}
.idr-icon-strip-head h3 {
margin: 0;
font-weight: 400;
font-style: italic;
font-size: 1.15rem;
color: var(--ink-700);
}
.idr-icon-grid {
--col-min: 140px; --gap: 20px; --cols-max: 6;
display: grid;
gap: var(--gap);
grid-template-columns: repeat(
auto-fit,
minmax(max(min(var(--col-min),100%),
(100% - (var(--gap) * (var(--cols-max) - 1))) / var(--cols-max)),1fr)
);
max-width: 1100px;
margin: 0 auto;
}
.idr-icon-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 20px 12px;
}
.idr-icon-tile img { width: 48px; height: 48px; object-fit: contain; }
/* Most pages label these tiles with ; Busto Arsizio's source
uses , and that heading level has to survive; Bologna and Parma
use on a tile or two, and Parma splits one label across a
and a , which a keeps on one line. Same look
whichever the source used. */
.idr-icon-tile strong,
.idr-icon-tile b,
.idr-icon-tile span,
.idr-icon-tile h4,
.idr-icon-tile h5 {
margin: 0;
font-size: 14.5px;
font-weight: 700;
color: var(--green-900);
line-height: 1.35;
}
/* ---- Intro (image + prose — reuses global .about__grid) ---- */
.idr-intro {
background: var(--paper-050);
padding: 72px 5vw;
}
.idr-intro-call {
margin-top: 20px;
}
/* .btn is nowrap, and "CHIAMA SUBITO 03621637209" (Monza, 11 digits)
is wider than a 320–360px phone's column: the page overflowed
sideways and dragged the fixed .call-bar with it (same fault
fabbro.css records for Asti). Wrapping only kicks in when the line
doesn't fit, so wider screens render exactly as before. */
.idr-intro-call .btn {
white-space: normal;
max-width: 100%;
}
/* Carpi draws the same rule with a real
instead of characters.
Nothing else on the site uses one, so it gets its look here. */
.idr-intro hr {
width: 72px;
height: 3px;
margin: 0 0 18px;
border: 0;
border-radius: 2px;
background: var(--amber-500);
}
/* Velletri draws a short red rule under its H2 with a run of em-dashes.
Keeping the characters keeps the copy intact; the colour is what the
old page's inline style did. */
.idr-intro-divider {
margin: -6px 0 14px;
color: var(--amber-500);
letter-spacing: -1px;
line-height: 1;
}
/* global.css paints every link inside .about__content green-500, which
also catches the call button and turns its label blue. Put the
button's own colour back — it wins on specificity (0,3,1). */
.idr-intro .about__content a.btn,
.idr-intro .about__content a.btn:hover,
.idr-intro .about__content a.btn:focus-visible {
color: var(--paper-000);
}
/* ---- Dove operiamo — subhead + city tile grid ---- */
.idr-coverage {
background: var(--green-050);
padding: 72px 5vw;
text-align: center;
}
.idr-coverage h3 {
margin: 0 0 36px;
font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
color: var(--green-900);
}
.idr-city-grid {
--col-min: 180px; --gap: 18px; --cols-max: 4;
display: grid;
gap: var(--gap);
grid-template-columns: repeat(
auto-fit,
minmax(max(min(var(--col-min),100%),
(100% - (var(--gap) * (var(--cols-max) - 1))) / var(--cols-max)),1fr)
);
max-width: 900px;
margin: 0 auto;
}
.idr-city-tile {
display: block;
background: var(--paper-000);
border: 1px solid var(--line-200);
border-radius: var(--radius-m);
padding: 22px 16px;
transition: border-color .15s ease, box-shadow .15s ease;
}
a.idr-city-tile:hover { border-color: var(--green-700); box-shadow: var(--shadow-card); }
.idr-city-tile h4 { margin: 0; font-size: 16px; color: var(--green-900); }
a.idr-city-tile h4 { color: var(--green-700); }
/* ---- Trust band — closing dark prose panel ---- */
.idr-trust {
background: var(--green-950);
padding: 88px 5vw;
text-align: center;
}
.idr-trust-inner { max-width: 820px; margin: 0 auto; }
/* Ticino heads this band with an h3, Lugano with an h2 — both sit on
the dark panel, so both take the same white treatment. */
.idr-trust h2:where(:not(.h1-look)),
.idr-trust h3 {
margin: 0 0 20px;
color: var(--paper-000);
font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
}
.idr-trust-lead {
margin: 0 0 28px;
color: var(--green-100);
font-size: 17px;
line-height: 1.6;
}
.idr-trust-lead a { color: var(--amber-400); font-weight: 700; }
.idr-trust-grid {
margin-top: 56px;
display: grid;
gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
text-align: left;
}
.idr-trust-item {
background: var(--green-900);
border: 1px solid var(--green-800);
border-radius: var(--radius-l);
padding: 32px 26px;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.idr-trust-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-pop);
}
.idr-trust-icon {
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--amber-500);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.idr-trust-icon svg {
width: 24px;
height: 24px;
color: var(--paper-000);
}
.idr-trust-item strong {
display: block;
color: var(--paper-000);
font-size: 17px;
margin-bottom: 10px;
}
.idr-trust-item p {
margin: 0;
color: var(--green-100);
font-size: 15px;
line-height: 1.6;
}
/* ---- Service cards, full-width rows, icon beside the text ----
Scoped to this section so global's .feature-card (homepage and
the idraulico hub) keeps its stacked layout. */
.idr-services-split .features__grid {
--cols-max: 1;
}
/* The icon is taken out of flow and the card reserves a gutter for it,
so the copy column holds however many paragraphs a card carries.
(A grid with pinned rows would overlap the 2nd paragraph on the 1st.)
The left padding mirrors global's .feature-card padding. */
.idr-services-split .feature-card {
position: relative;
padding-left: calc(clamp(20px, 2.5vw, 28px) + 132px + 28px);
min-height: calc(132px + 2 * clamp(24px, 3vw, 34px));
}
.idr-services-split .feature-card__icon {
position: absolute;
left: clamp(20px, 2.5vw, 28px);
top: clamp(24px, 3vw, 34px);
width: 132px;
height: 132px;
border-radius: var(--radius-m);
margin-bottom: 0;
}
.idr-services-split .feature-card__icon img { width: 96px; height: 96px; }
/* Most pages ship 128px card icons, which take the 96px above happily.
Pesaro e Urbino's are 64px originals — rendering those at 96px makes
them visibly soft, so they stay at their own size inside the tile. */
.idr-services-split .feature-card__icon img[width="64"] {
width: 64px;
height: 64px;
}
.idr-services-split .feature-card p { margin: 0 0 14px; }
.idr-services-split .feature-card p:last-child { margin-bottom: 0; }
/* global.css gives .feature-card headings their own link colour but
nothing for links in the body copy, which fall back to the base
a{color:inherit} and read as plain text. Every city page puts its
phone number in these paragraphs, so they have to look clickable. */
.idr-services-split .feature-card p a,
.idr-services-split .feature-card li a,
.idr-services-inline .feature-card p a,
.idr-services-stack .feature-card p a,
.idr-services-2col .feature-card p a {
color: var(--green-500);
font-weight: 700;
}
.idr-services-split .feature-card p a:hover,
.idr-services-split .feature-card li a:hover,
.idr-services-inline .feature-card p a:hover,
.idr-services-stack .feature-card p a:hover,
.idr-services-2col .feature-card p a:hover {
color: var(--green-700);
}
/* A few pages (Viterbo) put bullet lists inside a card. */
.idr-services-split .feature-card ul {
margin: 0 0 14px;
padding-left: 20px;
list-style: disc;
}
.idr-services-split .feature-card li {
margin-bottom: 6px;
font-size: .97rem;
color: var(--ink-700);
}
.idr-services-split .feature-card ul:last-child { margin-bottom: 0; }
/* Same list treatment for the stacked two-column layout, whose
cards are centred — the list itself still reads left. */
.idr-services-2col .feature-card ul {
margin: 0 0 14px;
padding-left: 20px;
list-style: disc;
text-align: left;
}
.idr-services-2col .feature-card li {
margin-bottom: 6px;
font-size: .97rem;
color: var(--ink-700);
}
.idr-services-2col .feature-card ul:last-child { margin-bottom: 0; }
/* La Spezia closes two cards with a run of
-separated
service names inside one paragraph, centred in the source.
Kept centred, with tighter leading so it reads as a list. */
.idr-services-linelist {
margin: 0;
padding: 16px 18px;
background: var(--paper-050);
border-radius: var(--radius-s);
border-left: 3px solid var(--amber-500);
font-size: .93rem;
line-height: 1.9;
color: var(--ink-700);
}
.idr-services-stack .feature-card .idr-services-linelist,
.idr-services-2col .feature-card .idr-services-linelist { text-align: left; }
@media (max-width: 560px) {
.idr-services-split .feature-card {
padding-left: calc(clamp(20px, 2.5vw, 28px) + 80px + 16px);
min-height: calc(80px + 2 * clamp(24px, 3vw, 34px));
}
.idr-services-split .feature-card__icon { width: 80px; height: 80px; }
.idr-services-split .feature-card__icon img { width: 56px; height: 56px; }
}
/* Lugano captions its intro photo. */
.idr-intro-caption {
margin: 10px 0 0;
font-size: 14px;
font-style: italic;
text-align: center;
color: var(--ink-500);
}
/* A call button sits between the services subhead and the cards on the
Lugano page, rather than closing the section. */
.idr-services-lead-cta {
margin: 0 0 36px;
text-align: center;
}
.idr-services-lead-cta .btn {
white-space: normal;
max-width: 100%;
}
/* The trust band centres its content, so its closing button only needs
room above the credential cards. */
.idr-trust-cta { margin: 0 0 8px; }
/* ---- Service cards with the icon stacked above a centred heading ----
Lugano's cards put a 128px PNG above the title rather than beside it.
global's .feature-card__icon is a 48px tile built for a 24px inline
SVG, so the icon block is resized and centred here. */
.idr-services-stack .feature-card {
text-align: center;
}
.idr-services-stack .feature-card__icon {
width: 104px;
height: 104px;
background: transparent;
margin: 0 auto 18px;
}
.idr-services-stack .feature-card__icon img {
width: 88px;
height: 88px;
}
.idr-services-stack .feature-card p {
text-align: left;
}
/* Three across by default; the fluid grid drops to two columns and then
one as the viewport narrows. */
.idr-services-stack .features__grid { --cols-max: 3; }
/* --3-2: three-up first row, two-up second — the layout Lugano's five
cards use. A six-track grid gives both from one set of tracks: the
first three cards take two tracks each, the rest take three. Only
above 900px; below that the fluid grid takes over again. */
@media (min-width: 900px) {
.idr-services-stack--3-2 .features__grid {
grid-template-columns: repeat(6, 1fr);
}
.idr-services-stack--3-2 .feature-card:nth-child(-n + 3) { grid-column: span 2; }
.idr-services-stack--3-2 .feature-card:nth-child(n + 4) { grid-column: span 3; }
}
@media (min-width: 900px) {
.idr-services-stack .feature-card p { text-align: justify; }
}
@media (max-width: 560px) {
.idr-services-stack .feature-card__icon { width: 84px; height: 84px; }
.idr-services-stack .feature-card__icon img { width: 68px; height: 68px; }
}
/* Single-column variant: cards run full width, one per row. Kept as a
modifier so the pages that put the Italy map in a spare grid cell
(Bolzano, Ancona) keep their three-column layout. */
.idr-services-1col .features__grid { --cols-max: 1; }
/* Two-column variant: Bologna's nine cards carry no icons of their
own and sat two-up on the old page, so the grid stops at two and
the cards keep global's plain stacked layout. */
.idr-services-2col .features__grid { --cols-max: 2; }
.idr-services-2col .feature-card p { margin: 0 0 14px; }
.idr-services-2col .feature-card p:last-child { margin-bottom: 0; }
/* Bologna floats a row of six 128px service icons above the card
grid. They carry no label and no link of their own, so they read
as a decorative rule rather than tiles: .idr-icon-grid does the
fluid columns, and only the tile padding and icon size change. */
.idr-services-iconrow {
margin: 0 0 40px;
}
.idr-services-iconrow .idr-icon-tile { padding: 0; }
.idr-services-iconrow .idr-icon-tile img {
width: 72px;
height: 72px;
}
@media (max-width: 560px) {
.idr-services-iconrow .idr-icon-tile img { width: 56px; height: 56px; }
}
/* ---- Service cards whose icon lives inside the heading ----
Bolzano puts each card's 64px icon inside the h4 instead of in a
separate .feature-card__icon block, so the icon cannot be pulled
out to a gutter the way .idr-services-split does. Line it up with
the label and let a long label wrap beside it. */
.idr-services-inline .feature-card h4 {
display: flex;
align-items: center;
gap: 12px;
}
.idr-services-inline .feature-card h4 img {
width: 48px;
height: 48px;
flex-shrink: 0;
vertical-align: middle;
}
/* Vercelli nests the icon inside the heading's rather than
beside it, so the is the single flex item and the icon
sits inline with the label. vertical-align above keeps them on
the same baseline; the gap is then the markup's own space. */
/* The spare cell can hold a heading rather than a bare image
(Vercelli wraps its map in an h4 with no text of its own). */
.idr-services-grid-map h4 { margin: 0; }
/* ---- Centred call button(s) closing the services block ---- */
.idr-services-cta {
margin-top: 44px;
text-align: center;
}
/* Savona drops the map + call button into the grid's spare cell
instead of a full-width strip below it. */
.idr-services-cta--cell {
margin-top: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* One page's CTA label is a full sentence, so it has to be allowed to
wrap — .btn is nowrap by default and would overflow on a phone. */
.idr-services-cta .btn {
white-space: normal;
max-width: 100%;
margin: 7px;
}
.idr-services-cta-map {
display: block;
width: 256px;
max-width: 100%;
height: auto;
margin: 0 auto 28px;
}
/* Genova wraps its map in an empty (a defect kept from the
old page); the wrapper must not add heading spacing. */
.idr-services-cta h4 { margin: 0; }
/* ---- Italy map placed as a grid cell rather than below the cards ----
Where a page's card count leaves the last cell of a row empty
(Bolzano: five cards on a three-column grid), the map fills it and
centres in whatever space that cell has. */
.idr-services-grid-map {
display: flex;
align-items: center;
justify-content: center;
}
.idr-services-grid-map img {
width: 100%;
max-width: 256px;
height: auto;
}
/* Most pages drop the portrait Italy map into that cell, which the
256px cap suits. Ferrara's is a wide city map (700x369) — capped it
would render as a thumbnail, so it fills the cell instead. */
.idr-services-grid-map--wide img { max-width: 100%; }
/* Torino fills that cell with a lone 128px service icon rather than a
map. Stretching it to 256px would show the upscaling, so icon-sized
originals stay at their own size, as they do in .idr-services-split. */
.idr-services-grid-map img[width="128"] {
width: 128px;
height: 128px;
}
/* ---- Linked icon tiles — some strip items are links on the
Milano page, plain text on the others. ---- */
a.idr-icon-tile strong { transition: color .15s ease; }
a.idr-icon-tile:hover strong { color: var(--amber-600); }
/* Genova links only the label text, not the whole tile, so the
anchor sits inside instead of wrapping it. */
.idr-icon-tile strong a { transition: color .15s ease; }
.idr-icon-tile strong a:hover { color: var(--amber-600); }
/* ---- Prose block — headings + body copy, no card chrome ---- */
.idr-prose {
background: var(--paper-000);
padding: 72px 5vw;
}
.idr-prose-inner {
max-width: 860px;
margin: 0 auto;
}
.idr-prose h2:where(:not(.h1-look)) {
margin: 0 0 16px;
font-size: clamp(24px, 2.4vw, 32px);
color: var(--green-900);
}
.idr-prose h3 {
margin: 0 0 14px;
font-size: clamp(20px, 2vw, 25px);
color: var(--green-900);
}
.idr-prose p {
margin: 0 0 18px;
font-size: 16.5px;
line-height: 1.75;
color: var(--ink-700);
}
.idr-prose :is(h2:where(:not(.h1-look)), h3):not(:first-child) { margin-top: 40px; }
/* global.css sets a{color:inherit}, so prose links need their own
colour or they read as plain body text. */
.idr-prose p a {
color: var(--green-500);
font-weight: 700;
}
.idr-prose p a:hover { color: var(--green-700); }
/* ---- Blue variant — the deep brand navy, same treatment as
.idr-closing. Used by Imperia's closing section; the plain
white .idr-prose is unchanged for Milano. ---- */
.idr-prose--blue { background: var(--green-900); }
.idr-prose--blue :is(h2:where(:not(.h1-look)), h3) { color: var(--paper-000); }
.idr-prose--blue p { color: var(--green-100); }
.idr-prose--blue p a { color: var(--gold-500); }
.idr-prose--blue p a:hover { color: var(--amber-400); }
/* ---- Editorial blocks — icon rail down the left, copy right,
closing line pulled out as a callout ---- */
.idr-editorial {
background: var(--green-050);
padding: 80px 5vw;
}
.idr-editorial-inner {
max-width: 900px;
margin: 0 auto;
display: grid;
gap: 52px;
}
.idr-editorial-block {
display: grid;
grid-template-columns: 44px 1fr;
gap: 26px;
}
.idr-editorial-rail {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.idr-editorial-dot {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--amber-500);
color: var(--paper-000);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 8px 20px rgba(255, 81, 0, .3);
}
.idr-editorial-dot svg { width: 22px; height: 22px; }
.idr-editorial-line {
flex: 1;
width: 2px;
border-radius: 1px;
background: linear-gradient(var(--green-700), transparent);
opacity: .35;
}
/* Blocks carry an h2 on some pages and an h3 on others (Roma mixes
both); the rail treatment is the same either way. */
.idr-editorial-body h2:where(:not(.h1-look)) {
margin: 4px 0 16px;
font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.25;
color: var(--green-900);
}
.idr-editorial-body h3 {
margin: 4px 0 16px;
font-size: clamp(19px, 1.7vw, 23px);
line-height: 1.35;
color: var(--green-900);
}
.idr-editorial-body p {
margin: 0 0 16px;
font-size: 16.5px;
line-height: 1.8;
color: var(--ink-700);
}
.idr-editorial-body p:last-child { margin-bottom: 0; }
.idr-editorial-body .idr-editorial-callout {
margin: 26px 0 0;
padding: 18px 24px;
background: var(--paper-000);
border-left: 4px solid var(--amber-500);
border-radius: 0 var(--radius-m) var(--radius-m) 0;
box-shadow: var(--shadow-card);
font-size: 17px;
font-weight: 600;
color: var(--green-900);
}
.idr-editorial-body a { color: var(--green-500); font-weight: 700; }
.idr-editorial-body a:hover { color: var(--green-700); }
/* The callout closes the block on Roma and Milano. On Pomezia the
pulled-out line opens it instead, so the margin has to flip. */
.idr-editorial-body .idr-editorial-callout:not(:last-child) {
margin: 0 0 26px;
}
/* A section with a single block has nothing for the connector line to
join to, so it would hang into empty space below the dot. (Roma and
Milano stack several blocks, where it runs from one dot to the next.) */
.idr-editorial-inner > :only-child .idr-editorial-line { display: none; }
@media (max-width: 560px) {
.idr-editorial { padding: 56px 5vw; }
.idr-editorial-block { grid-template-columns: 34px 1fr; gap: 16px; }
.idr-editorial-dot { width: 34px; height: 34px; }
.idr-editorial-dot svg { width: 17px; height: 17px; }
}
/* ---- Closing keyword lists ----
Chieti closes with a heading over four columns of service
names. Kept as real lists; the columns flow into a fluid grid and
each item gets a check mark instead of a bullet. */
.idr-keywords {
background: var(--green-050);
padding: 72px 5vw;
}
.idr-keywords-inner {
max-width: 1080px;
margin: 0 auto;
}
.idr-keywords h3 {
margin: 0 0 36px;
text-align: center;
font-size: clamp(20px, 2vw, 26px);
line-height: 1.35;
color: var(--green-900);
}
.idr-keywords-grid {
--col-min: 220px; --gap: 20px; --cols-max: 4;
display: grid;
gap: var(--gap);
grid-template-columns: repeat(
auto-fit,
minmax(max(min(var(--col-min),100%),
(100% - (var(--gap) * (var(--cols-max) - 1))) / var(--cols-max)),1fr)
);
}
.idr-keywords-grid ul {
margin: 0;
padding: 0;
list-style: none;
}
.idr-keywords-grid li {
position: relative;
padding: 8px 0 8px 26px;
font-size: 15px;
line-height: 1.45;
color: var(--ink-700);
border-bottom: 1px solid var(--line-100);
}
.idr-keywords-grid li:last-child { border-bottom: 0; }
.idr-keywords-grid li::before {
content: "";
position: absolute;
left: 4px;
top: 15px;
width: 10px;
height: 6px;
border-left: 2px solid var(--amber-500);
border-bottom: 2px solid var(--amber-500);
transform: rotate(-45deg);
}
/* ---- Dark band — closing copy with gold section labels ---- */
.idr-band {
background: var(--green-950);
padding: 80px 5vw;
}
.idr-band-inner {
max-width: 960px;
margin: 0 auto;
}
.idr-band h3 {
margin: 0 0 32px;
color: var(--paper-000);
font-size: clamp(20px, 2vw, 24px);
line-height: 1.45;
}
.idr-band h4,
.idr-band-label {
margin: 0 0 10px;
color: var(--gold-500);
font-size: 18px;
font-weight: 700;
}
.idr-band h4 {
margin-top: 32px;
color: var(--paper-000);
font-size: clamp(19px, 1.8vw, 22px);
line-height: 1.4;
}
.idr-band-inner > h4:first-child { margin-top: 0; margin-bottom: 28px; }
.idr-band p {
margin: 0 0 18px;
color: var(--green-100);
font-size: 16px;
line-height: 1.8;
}
.idr-band .btn { margin-top: 14px; }
/* Base links are color:inherit, which on this band makes a tel: link
identical to the copy around it. Gold is already the band's accent. */
.idr-band p a { color: var(--gold-500); font-weight: 700; }
/* ...but a call button inside that copy is not a text link: the rule
above outranks .btn--primary's own colour and turns its label gold
on an orange fill. Buttons keep white text. */
.idr-band p a.btn { color: var(--paper-000); }
/* Velletri closes on a single sentence rather than a block of copy, so
the band narrows and centres instead of running the full 960px. */
.idr-band--lead .idr-band-inner { max-width: 720px; text-align: center; }
.idr-band--lead p { margin: 0; font-size: 18px; }
/* ---- City cards inside the dark band ---- */
.idr-band-cities {
--col-min: 220px; --gap: 14px; --cols-max: 4;
display: grid;
gap: var(--gap);
grid-template-columns: repeat(
auto-fit,
minmax(max(min(var(--col-min),100%),
(100% - (var(--gap) * (var(--cols-max) - 1))) / var(--cols-max)),1fr)
);
margin: 0 0 32px;
}
.idr-band-city {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--green-900);
border: 1px solid var(--green-800);
border-radius: var(--radius-m);
font-size: 14.5px;
font-weight: 600;
line-height: 1.35;
color: var(--paper-000);
}
.idr-band-city svg {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--gold-500);
}
@media (max-width: 560px) {
.idr-band-cities { --cols-max: 2; --col-min: 150px; }
.idr-band-city { padding: 12px; gap: 9px; font-size: 13.5px; }
}
/* ============================================================
/intervento-caldaie/ — the few pieces nothing above covers.
Everything else on that page is an existing idr- or global
component.
============================================================ */
/* ---- Intro tiles whose icon lives inside the H2 ----
The old page puts each 128px icon inside the heading, so it
cannot use .feature-card__icon. Stacked above the title,
centred, same size as .idr-services-stack's icons. */
.idr-services-headicon .feature-card h2:where(:not(.h1-look)) img {
display: block;
width: 88px;
height: 88px;
margin: 0 auto 18px;
object-fit: contain;
}
@media (max-width: 560px) {
.idr-services-headicon .feature-card h2:where(:not(.h1-look)) img { width: 68px; height: 68px; }
}
/* ---- Icon strip: the heading's
and call line ---- */
.idr-icon-strip-head hr {
width: 72px;
height: 3px;
margin: 0 auto 18px;
border: 0;
border-radius: 2px;
background: var(--green-900);
}
.idr-icon-strip-call {
margin: 0;
font-size: 1.1rem;
color: var(--amber-500);
}
.idr-icon-strip-call a { color: inherit; }
.idr-icon-strip-call a:hover { text-decoration: underline; }
/* ---- Icon strip, tiles as white cards on the tinted band ----
Four tiles, so the grid stops at four across; two across on a
phone (150px minimum). */
.idr-icon-strip--cards { background: var(--green-050); }
.idr-icon-strip--cards .idr-icon-grid {
--cols-max: 4;
--col-min: 150px;
max-width: 960px;
}
.idr-icon-strip--cards .idr-icon-tile {
justify-content: center;
padding: 28px 16px;
background: var(--paper-000);
border: 1px solid var(--line-200);
border-radius: var(--radius-m);
box-shadow: var(--shadow-card);
transition: transform .18s ease, border-color .18s ease;
}
.idr-icon-strip--cards a.idr-icon-tile:hover {
transform: translateY(-3px);
border-color: var(--green-700);
}
.idr-icon-strip--cards .idr-icon-tile h4 { transition: color .15s ease; }
.idr-icon-strip--cards a.idr-icon-tile:hover h4 { color: var(--amber-600); }
/* ---- Region cards ("Dove operiamo") ----
Each region is a card: its label on top, its cities as pills
below. The / wrappers from the old markup are kept
but take no box (display: contents), so the label span, the city
spans and the separator text all become items of the card's own
flex row. The old " | " and " – " separators stay in the text,
drawn faintly between the pills. */
.idr-regions-head { margin-bottom: 36px; }
.idr-regions-head hr { margin-bottom: 0; }
.idr-regions-layout {
display: grid;
gap: 40px;
align-items: start;
}
@media (min-width: 980px) {
.idr-regions-layout { grid-template-columns: minmax(0, 1fr) 300px; }
.idr-regions-map { position: sticky; top: 110px; }
}
.idr-regions-grid {
display: grid;
gap: 16px;
}
@media (min-width: 700px) {
.idr-regions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.idr-region-card--wide { grid-column: 1 / -1; }
}
.idr-region-card {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: flex-start;
gap: 8px 6px;
margin: 0;
padding: 20px 22px 22px;
background: var(--paper-000);
border: 1px solid var(--line-200);
border-radius: var(--radius-m);
box-shadow: var(--shadow-card);
font-size: 14px;
line-height: 1.3;
color: var(--line-200);
}
.idr-region-card > strong,
.idr-region-card > b { display: contents; }
/* The old markup's line breaks: the card layout does the breaking. */
.idr-region-card br { display: none; }
.idr-region-name {
flex-basis: 100%;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line-100);
font-family: var(--font-display);
font-size: 15px;
font-weight: 800;
letter-spacing: .04em;
color: var(--green-900);
}
.idr-region-name::before {
content: "";
width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: 50%;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M12 21s-7-6.5-7-11.5C5 5.9 8.1 3 12 3s7 2.9 7 6.5C19 14.5 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.3'/%3E%3C/svg%3E")
center / 16px no-repeat,
var(--amber-500);
}
/* inline-block, not inline-flex: several cities are two anchors
("Intervento caldaie a" + " Roma") and flex would trim the
space that opens the second one. */
.idr-city {
display: inline-block;
padding: 8px 14px;
background: var(--green-050);
border: 1px solid var(--line-200);
border-radius: 999px;
font-weight: 600;
color: var(--green-900);
transition: border-color .15s ease, background .15s ease;
}
.idr-city:has(a):hover {
border-color: var(--green-700);
background: var(--green-100);
}
.idr-city a { color: var(--green-700); font-weight: 700; }
.idr-city a:hover { color: var(--amber-600); }
/* The map file is 262px wide locally; any wider and it goes soft. */
.idr-regions-map img {
display: block;
width: 100%;
max-width: 262px;
height: auto;
margin-inline: auto;
}
@media (max-width: 560px) {
.idr-region-card { padding: 16px 16px 18px; }
.idr-regions-map img { max-width: 220px; }
}
/* ---- Closing call box: an H1 in the source, drawn as the old
orange rounded box. Its two spans stack; the
between them
stays in the markup but has no job inside the flex column. ---- */
.idr-closing-call {
margin: 36px 0 0;
text-align: center;
font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
line-height: 1.2;
}
.idr-closing-call a {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 22px 44px;
border-radius: var(--radius-l);
background: var(--amber-500);
color: var(--paper-000);
box-shadow: 0 10px 26px rgba(255, 81, 0, .35);
transition: background .15s ease, box-shadow .15s ease;
}
.idr-closing-call a:hover {
background: var(--amber-600);
box-shadow: 0 14px 30px rgba(255, 81, 0, .45);
}
.idr-closing-call br { display: none; }
.idr-closing-call span {
display: inline-flex;
align-items: center;
gap: 10px;
}
.idr-closing-call svg { width: .85em; height: .85em; flex-shrink: 0; }
/* The navy panel's H2 is a link on this page. */
.idr-prose--blue :is(h2:where(:not(.h1-look)), h3) a:hover { color: var(--gold-500); }
@media (max-width: 480px) {
.idr-closing-call a { display: flex; padding: 20px 16px; }
}
/* ============================================================
/riparazione-caldaie/riparazione-caldaie-milano/ — image/text
rows and the closing band. Rows reuse .idr-intro + global's
.about__grid; only the pieces below are new.
============================================================ */
/* Alternating row colour for stacked .idr-intro rows. */
.idr-intro--white { background: var(--paper-000); }
/* The riparazione-caldaie rows put an
between the H2 and the
copy; riparazione-caldaie-mantova's source has none, so its first
paragraph would sit on global's 8px heading margin. Opt-in
modifier, so the idraulico city pages (which run H2 straight into
a paragraph by design) are untouched. */
.idr-intro--nohr .about__content h2:where(:not(.h1-look)) + p { margin-top: 18px; }
/* Section H3 inside a row. The old page drew a short rule under it
with a background image (hr.png); same idea, drawn in CSS. */
.idr-split-title {
position: relative;
margin: 0 0 20px;
padding-bottom: 16px;
font-size: clamp(20px, 2vw, 26px);
line-height: 1.3;
color: var(--green-900);
}
.idr-split-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 72px;
height: 3px;
border-radius: 2px;
background: var(--amber-500);
}
/* The row illustrations are 291px originals — shown at their own
size so they stay sharp, centred in the column. */
.idr-intro .about__media img[width="291"] {
max-width: 291px;
margin-inline: auto;
}
/* ---- Closing band split: feature line left, call box right ---- */
.idr-band--split .idr-band-inner {
display: grid;
gap: 36px;
align-items: center;
}
@media (min-width: 900px) {
.idr-band--split .idr-band-inner { grid-template-columns: minmax(0, 1fr) auto; }
}
.idr-band-feature {
display: flex;
align-items: center;
gap: 24px;
}
.idr-band-feature > p { margin: 0; flex-shrink: 0; }
.idr-band-feature img { display: block; width: 96px; height: 96px; }
.idr-band .idr-band-feature h4 { margin: 0 0 8px; }
.idr-band-feature div p { margin: 0; }
/* .idr-band's own p and p a rules (font size, gold links) outrank
the call box's classes, so its size and white label go back. */
.idr-band .idr-closing-call {
margin: 0;
font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
line-height: 1.2;
text-align: center;
}
.idr-band .idr-closing-call a { color: var(--paper-000); }
/* riparazione-caldaie-bologna closes on a plain single-line call
button instead of the two-line box; centred when the band stacks,
full width on a phone like the site's other lone buttons. */
.idr-band-cta { text-align: center; }
@media (max-width: 480px) {
.idr-band-cta .btn { width: 100%; }
}
@media (max-width: 560px) {
.idr-band-feature { flex-direction: column; text-align: center; gap: 16px; }
.idr-band-feature img { width: 80px; height: 80px; }
}
/* ---- Hero headline that is not a heading ----
riparazione-caldaie-brescia's export sets its hero headline in a
, and the page has no H1 anywhere. Heading levels are fixed,
so it stays a
; this gives it the exact type global.css's
.hero.hero--split h1 gets, so the hero reads the same as its
sibling pages. (Same idea as .hero--city .hero__headline in
elettricista.css, which that file scopes to its own pages.) */
.hero.hero--split .hero__headline {
margin: 0;
font-family: var(--font-display);
font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
font-weight: 900;
line-height: 1.02;
letter-spacing: -.02em;
color: var(--ink-900);
text-wrap: balance;
}
.hero.hero--split .hero__headline strong { font-weight: inherit; }
/* ---- riparazione-caldaie-parma: older template ----
Three service cards side by side (global .features grid, three
up by default), each an illustration over an H2 and its copy.
Headings centre under the picture; copy stays left-aligned
(global justifies .feature-card p from 900px). */
.idr-services-cards .feature-card { text-align: center; }
.idr-services-cards .feature-card p { text-align: left; }
.idr-card-illus img {
display: block;
width: 100%;
max-width: 200px;
height: auto;
margin: 0 auto 18px;
}
/* The closing sentence is an H1 in the source (the page's second);
global h1 sizing is hero-scale, so it is brought down to a
panel headline on the navy .idr-closing band. */
.idr-closing .idr-closing-h1 {
margin: 0 0 28px;
font-size: clamp(22px, 1.4rem + 1vw, 30px);
font-weight: 800;
line-height: 1.3;
color: var(--paper-000);
}
/* ---- riparazione-caldaie-ravenna ----
The intro photo carries its own H2 caption above it (a WPBakery
single-image heading in the source); set as a quiet label so it
does not compete with the section H2 beside it. */
.idr-intro .about__media .idr-media-title {
margin: 0 0 14px;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.3;
text-align: center;
color: var(--green-900);
}
/* ---- riparazione-caldaie-torino ----
Heading row over the three cards: the H2 with its orange rule on
the left, the call button on the right; stacked on phones. */
.idr-cards-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px 32px;
margin-bottom: var(--space-xl);
}
.idr-cards-head .idr-split-title { margin: 0; }
/* ---- riparazione-caldaie-alessandria ----
Each call button sits inside an H3 in the source; the H3 is kept
but neutralised so the .btn inside looks like any other. The
closing sentence (also an H3) is the navy panel's headline. */
.idr-cta-h3 {
margin: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.idr-cta-h3 .btn { white-space: normal; max-width: 100%; }
/* ---- riparazione-caldaie-novara ----
The band's second line is an H5 here (a
elsewhere),
set to match. The call box is a whose label is plain text
split by a
, so here the
does the stacking. */
.idr-band .idr-band-feature h5 {
margin: 0;
font-size: 16px;
font-weight: 700;
line-height: 1.6;
color: var(--green-100);
}
/* riparazione-caldaie-prato: the same pair one level up, H3 + H4. */
.idr-band .idr-band-feature h3 {
margin: 0 0 8px;
font-size: clamp(19px, 1.8vw, 22px);
line-height: 1.4;
}
.idr-band .idr-band-feature h3 + h4 {
margin: 0;
font-size: 16px;
font-weight: 700;
line-height: 1.6;
color: var(--green-100);
}
.idr-band div.idr-closing-call { font-weight: 700; }
.idr-band div.idr-closing-call a { display: inline-block; }
.idr-band div.idr-closing-call br { display: inline; }
@media (max-width: 480px) {
.idr-band div.idr-closing-call a { display: block; }
}
/* ---- idraulico-milano/emergenza-allagamenti-e-riparazione-perdite-milano ----
Sub-page of Idraulico Milano. The hero's second line is an H4 in
the source; set as the hero subtitle. */
.hero.hero--split h4.hero__sub {
margin: 16px 0 0;
max-width: 46ch;
font-size: clamp(17px, 1.4vw, 20px);
font-weight: 600;
line-height: 1.5;
color: var(--ink-700);
}
/* "Perché scegliere…" — the page's only H1 sits mid-page in the
source, above six checkmark labels. Brought down from hero scale
to a section headline; the labels reuse the chip grid. */
.idr-why {
background: var(--paper-000);
padding: clamp(56px, 6vw, 80px) 5vw;
}
.idr-why-inner { max-width: 1000px; margin: 0 auto; }
.idr-why h1,
.idr-why h2:where(.h1-look) {
margin: 0 0 32px;
font-size: clamp(26px, 2.8vw, 36px);
line-height: 1.25;
text-align: center;
color: var(--green-900);
text-wrap: balance;
}
.idr-why .idr-service-grid { margin-bottom: 0; }
/* Copy with a link list beside it (8/4 in the source). */
.idr-aside-split {
background: var(--paper-050);
padding: clamp(56px, 6vw, 80px) 5vw;
}
.idr-aside-split-inner { max-width: 1140px; margin: 0 auto; }
.idr-aside-split h2:where(:not(.h1-look)) {
margin: 0 0 24px;
font-size: clamp(24px, 2.4vw, 32px);
color: var(--green-900);
}
.idr-aside-split-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) {
.idr-aside-split-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; }
}
.idr-aside-split-copy p {
margin: 0 0 18px;
font-size: 16.5px;
line-height: 1.75;
color: var(--ink-700);
}
.idr-aside-split-copy p a,
.idr-aside-card a { color: var(--green-500); font-weight: 700; }
.idr-aside-split-copy p a:hover,
.idr-aside-card a:hover { color: var(--green-700); }
.idr-aside-card {
background: var(--paper-000);
border: 1px solid var(--line-200);
border-top: 4px solid var(--amber-500);
border-radius: 18px;
padding: 26px 26px 20px;
}
.idr-aside-card h4 {
margin: 0 0 14px;
font-size: 18px;
line-height: 1.35;
color: var(--green-900);
}
.idr-aside-card ul { list-style: none; margin: 0; padding: 0; }
.idr-aside-card li {
position: relative;
padding: 10px 0 10px 22px;
border-top: 1px solid var(--line-200);
font-size: 15.5px;
line-height: 1.45;
color: var(--ink-700);
}
.idr-aside-card li::before {
content: "";
position: absolute;
left: 2px;
top: 17px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--amber-500);
}
/* "SOS Idraulico Milano 24 ore su 24" — navy heading card on the
left, copy on the right, the last paragraph
pulled out as an orange-edged callout. */
.idr-sos {
background: var(--paper-000);
padding: clamp(56px, 6vw, 88px) 5vw;
}
.idr-sos-inner {
max-width: 1140px;
margin: 0 auto;
display: grid;
gap: 28px;
align-items: start;
}
@media (min-width: 900px) {
.idr-sos-inner { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 56px; }
}
.idr-sos-head {
position: relative;
overflow: hidden;
background: var(--green-900);
border-radius: 22px;
padding: 34px 30px 36px;
box-shadow: 0 18px 40px rgba(14, 57, 94, .18);
}
/* soft orange glow in the corner, purely decorative */
.idr-sos-head::after {
content: "";
position: absolute;
right: -60px;
bottom: -60px;
width: 180px;
height: 180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 81, 0, .35), rgba(255, 81, 0, 0) 70%);
pointer-events: none;
}
.idr-sos-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin-bottom: 22px;
border-radius: 16px;
background: var(--amber-500);
color: var(--paper-000);
box-shadow: 0 8px 20px rgba(255, 81, 0, .35);
}
.idr-sos-icon svg { width: 28px; height: 28px; }
.idr-sos-head h3 {
position: relative;
margin: 0;
padding-bottom: 18px;
font-size: clamp(22px, 2.2vw, 28px);
line-height: 1.25;
color: var(--paper-000);
}
.idr-sos-head h3::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 56px;
height: 3px;
border-radius: 2px;
background: var(--amber-500);
}
.idr-sos-body p {
margin: 0 0 20px;
font-size: 16.5px;
line-height: 1.8;
color: var(--ink-700);
}
.idr-sos-body p.idr-sos-callout {
margin: 28px 0 0;
padding: 22px 26px;
background: var(--green-100);
border-left: 4px solid var(--amber-500);
border-radius: 0 16px 16px 0;
font-weight: 600;
color: var(--green-900);
}
/* idraulico-brescia/emergenza-allagamenti…: the SOS panel's copy
also carries an H4 and a list. */
.idr-sos-body h4 {
margin: 30px 0 12px;
font-size: clamp(18px, 1.6vw, 21px);
color: var(--green-900);
}
.idr-sos-body p a { color: var(--green-500); font-weight: 700; }
.idr-sos-body p a:hover { color: var(--green-700); }
.idr-sos-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.idr-sos-body li {
position: relative;
padding: 16px 18px 16px 50px;
background: var(--green-100);
border-radius: 14px;
font-size: 15.5px;
line-height: 1.65;
color: var(--ink-700);
}
.idr-sos-body li::before {
content: "";
position: absolute;
left: 16px;
top: 17px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--amber-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}
/* The "Segni che potresti avere una perdita" blockquote, set as a
checklist card (its bullets and
s are the source's). */
.idr-aside-split-copy blockquote {
margin: 0 0 8px;
padding: 22px 26px;
background: var(--paper-000);
border: 1px solid var(--line-200);
border-left: 4px solid var(--amber-500);
border-radius: 0 16px 16px 0;
box-shadow: var(--shadow-card);
}
.idr-aside-split-copy blockquote p {
margin: 0;
font-size: 16px;
line-height: 2;
font-weight: 600;
color: var(--green-900);
}
.idr-aside-split-copy > p:first-child em { color: var(--amber-600); font-weight: 600; }
.idr-aside-split-copy p + h3 { margin-top: 32px; }
@media (max-width: 560px) {
.idr-sos-head { padding: 28px 24px 30px; }
.idr-sos-body p.idr-sos-callout { padding: 18px 20px; }
}
/* ---- idraulico-milano/riparazione-lavandini-e-tubature-milano ----
Hero: three "»" lines, each an H4 in the source. */
.hero.hero--split .hero__points { margin-top: 18px; }
.hero.hero--split .hero__points h4 {
margin: 0 0 6px;
font-size: clamp(16px, 1.3vw, 18px);
font-weight: 600;
line-height: 1.5;
color: var(--ink-700);
}
/* Four perk cards (global .features), four across on desktop. */
.idr-perks .features__grid { --cols-max: 4; --col-min: 230px; }
.idr-perks .feature-card { text-align: center; }
.idr-perks .feature-card__icon {
margin-inline: auto;
background: var(--amber-050);
color: var(--amber-600);
}
.idr-perks .feature-card p { text-align: left; }
/* "Riparazione e manutenzione lavandini" as cards instead of one
long column: copy card + navy call card, then the "Aggiorna la
tua cucina" heading beside two paragraph cards. */
.idr-lav {
background: var(--paper-000);
padding: clamp(56px, 6vw, 88px) 5vw;
}
.idr-lav-inner { max-width: 1140px; margin: 0 auto; }
.idr-lav-top,
.idr-lav-split { display: grid; gap: 24px; align-items: stretch; }
.idr-lav-split { margin-top: clamp(40px, 5vw, 64px); align-items: start; }
@media (min-width: 900px) {
.idr-lav-top { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.idr-lav-split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; }
}
.idr-lav-card {
background: var(--amber-050);
border: 1px solid var(--line-200);
border-radius: 20px;
padding: clamp(26px, 3vw, 36px);
}
.idr-lav-card h3 {
position: relative;
margin: 0 0 18px;
padding-bottom: 14px;
font-size: clamp(19px, 1.8vw, 23px);
line-height: 1.3;
color: var(--green-900);
}
.idr-lav-card h3::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 56px;
height: 3px;
border-radius: 2px;
background: var(--amber-500);
}
.idr-lav-card p {
margin: 0;
font-size: 16px;
line-height: 1.8;
color: var(--ink-700);
}
.idr-lav-card p a { color: var(--green-500); font-weight: 700; }
.idr-lav-card p a:hover { color: var(--green-700); }
.idr-lav-cta {
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
background: var(--green-900);
border-radius: 20px;
padding: clamp(28px, 3vw, 40px);
box-shadow: 0 18px 40px rgba(14, 57, 94, .18);
}
.idr-lav-cta h2:where(:not(.h1-look)) {
margin: 0;
font-size: clamp(22px, 2.2vw, 28px);
line-height: 1.25;
color: var(--paper-000);
}
.idr-lav-cta p { margin: 0; }
.idr-lav-cta .idr-lav-call a {
display: inline-flex;
align-items: center;
padding: 14px 26px;
border-radius: 999px;
background: var(--amber-500);
font-size: clamp(18px, 1.8vw, 21px);
color: var(--paper-000);
box-shadow: 0 10px 24px rgba(255, 81, 0, .35);
transition: background .15s ease;
}
.idr-lav-cta .idr-lav-call a:hover { background: var(--amber-600); }
.idr-lav-cta .idr-lav-badge {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: 14px;
background: rgba(255, 255, 255, .08);
color: var(--green-100);
}
.idr-lav-cta .idr-lav-badge img { width: 44px; height: 44px; flex-shrink: 0; }
.idr-lav-head { display: flex; flex-direction: column; gap: 18px; }
.idr-lav-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 16px;
background: var(--amber-500);
color: var(--paper-000);
}
.idr-lav-icon svg { width: 28px; height: 28px; }
.idr-lav-head h3 {
margin: 0;
font-size: clamp(22px, 2.2vw, 28px);
line-height: 1.25;
color: var(--green-900);
}
.idr-lav-cols { display: grid; gap: 18px; }
@media (min-width: 700px) {
.idr-lav-cols { grid-template-columns: 1fr 1fr; }
}
.idr-lav-cols p {
margin: 0;
padding: 24px 24px 24px 26px;
background: var(--paper-000);
border: 1px solid var(--line-200);
border-left: 4px solid var(--green-500);
border-radius: 0 16px 16px 0;
box-shadow: var(--shadow-card);
font-size: 15.5px;
line-height: 1.75;
color: var(--ink-700);
}
/* idraulico-bologna/riparazione-lavandini-e-tubature-bologna:
the hero's "»" lines are
s there (H4s on Milano). */
.hero.hero--split .hero__points p {
margin: 0 0 6px;
font-size: clamp(16px, 1.3vw, 18px);
font-weight: 600;
line-height: 1.5;
color: var(--ink-700);
}
/* Bologna: the long "L'installazione del rubinetto…" paragraph
after the navy call card, as a full-width note card. */
.idr-lav-note {
margin: 24px 0 0;
padding: 24px 28px;
background: var(--green-100);
border-left: 4px solid var(--amber-500);
border-radius: 0 18px 18px 0;
font-size: 16px;
line-height: 1.8;
color: var(--ink-700);
}
.idr-lav-note .idr-lav-note-num a {
font-size: clamp(19px, 1.9vw, 24px);
color: var(--amber-600);
}
.idr-lav-note .idr-lav-note-num a:hover { color: var(--amber-500); }
/* Bologna promo card: the five tap types, one per line. */
.idr-promo-card .idr-promo-list { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.9; }
/* Bologna: three cards, each with its own centred H3. */
@media (min-width: 980px) {
.idr-tips--three .idr-tips-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.idr-tips--three .idr-tips-card:nth-child(3) { border-top-color: var(--green-950); }
.idr-tips .idr-tips-card h3 {
margin: 0 0 14px;
font-size: clamp(18px, 1.6vw, 20px);
line-height: 1.35;
text-align: center;
}
.idr-tips--three .idr-tips-icon { display: flex; margin: 0 auto 16px; }
.idr-tips-card p + p { margin-top: 14px; }
.idr-tips-card p a { color: var(--green-500); font-weight: 700; }
.idr-tips-card p a:hover { color: var(--green-700); }
/* Bologna allagamenti: a second copy + image row in the same
section, the image framed as a card. */
.idr-aside-split-grid + .idr-aside-split-grid { margin-top: clamp(32px, 4vw, 48px); }
.idr-aside-media {
display: flex;
align-items: center;
justify-content: center;
background: var(--paper-000);
border: 1px solid var(--line-200);
border-radius: 18px;
padding: 24px;
box-shadow: var(--shadow-card);
}
.idr-aside-media p { margin: 0; }
.idr-aside-media img { display: block; width: 100%; max-width: 300px; height: auto; }
/* idraulico-torino/riparazione-lavandini-e-tubature-torino:
two paragraph cards straight after the copy + call row, H4
titles in the tip cards, and an image H4 leading the last
column. */
.idr-lav-cols--after { margin-top: 24px; }
.idr-lav-card p + p { margin-top: 14px; }
.idr-lav-card p:first-of-type em { color: var(--amber-600); font-weight: 600; }
.idr-tips .idr-tips-card h4 {
margin: 0 0 14px;
font-size: clamp(18px, 1.6vw, 20px);
line-height: 1.35;
text-align: center;
color: var(--green-900);
}
.idr-tips-card .idr-tips-icon--center { display: flex; margin: 0 auto 16px; }
.idr-aside-split-copy > h4:first-child { margin-top: 0; }
/* Bologna: the last column's image sits inside an H4. */
.idr-aside-split-copy h4 img {
display: block;
width: 100%;
height: auto;
border-radius: 18px;
box-shadow: var(--shadow-card);
}
/* "Un rubinetto o un soffione…" — heading over two icon cards,
then the H4 + paragraph as a highlighted strip. */
.idr-tips {
background: var(--green-050);
padding: clamp(56px, 6vw, 88px) 5vw;
}
.idr-tips-inner { max-width: 1140px; margin: 0 auto; }
.idr-tips h3 {
margin: 0 0 28px;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.25;
text-align: center;
color: var(--green-900);
}
.idr-tips-grid { display: grid; gap: 22px; }
@media (min-width: 800px) {
.idr-tips-grid { grid-template-columns: 1fr 1fr; }
}
.idr-tips-card {
background: var(--paper-000);
border-radius: 20px;
border-top: 4px solid var(--amber-500);
padding: 28px 28px 30px;
box-shadow: var(--shadow-card);
}
.idr-tips-card + .idr-tips-card { border-top-color: var(--green-700); }
.idr-tips-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: 16px;
border-radius: 14px;
background: var(--green-100);
color: var(--green-700);
}
.idr-tips-icon svg { width: 24px; height: 24px; }
.idr-tips-card p {
margin: 0;
font-size: 15.5px;
line-height: 1.75;
color: var(--ink-700);
}
.idr-tips-strip {
margin-top: 24px;
padding: 26px 30px;
background: var(--green-900);
border-radius: 20px;
}
.idr-tips-strip h4 {
margin: 0 0 10px;
font-size: clamp(18px, 1.7vw, 21px);
color: var(--paper-000);
}
.idr-tips-strip p {
margin: 0;
font-size: 15.5px;
line-height: 1.75;
color: var(--green-100);
}
/* Promo row: light "RIPARAZIONE LAVANDINI" card + navy 24h card. */
.idr-promo {
background: var(--paper-050);
padding: clamp(48px, 5vw, 72px) 5vw;
}
.idr-promo-inner {
max-width: 1140px;
margin: 0 auto;
display: grid;
gap: 24px;
}
@media (min-width: 900px) {
.idr-promo-inner { grid-template-columns: 1fr 1fr; }
}
.idr-promo-card {
background: var(--paper-000);
border: 1px solid var(--line-200);
border-top: 4px solid var(--amber-500);
border-radius: 20px;
padding: 32px 30px;
box-shadow: var(--shadow-card);
}
.idr-promo-card p { margin: 0 0 14px; line-height: 1.6; color: var(--green-900); }
.idr-promo-card p:last-child { margin-bottom: 0; }
.idr-promo-card .idr-promo-title { font-size: clamp(20px, 2vw, 24px); letter-spacing: .01em; }
.idr-promo-card .idr-promo-lead { font-size: clamp(17px, 1.6vw, 20px); }
.idr-promo-card .idr-promo-call { font-size: clamp(20px, 2vw, 24px); }
.idr-promo-card .idr-promo-call a { color: var(--amber-600); }
.idr-promo-card .idr-promo-call a:hover { color: var(--amber-500); }
.idr-promo-card--dark {
background: var(--green-900);
border-color: var(--green-900);
border-top-color: var(--amber-500);
}
.idr-promo-card--dark p { font-size: clamp(16px, 1.5vw, 19px); color: var(--green-100); }
.idr-promo-card--dark .idr-promo-big {
display: block;
margin-bottom: 6px;
font-size: clamp(28px, 3vw, 36px);
line-height: 1.1;
color: var(--paper-000);
}
/* Aside on the left (4/8 in the source): list card + copy. */
@media (min-width: 900px) {
.idr-aside-split--left .idr-aside-split-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
.idr-aside-split-copy :is(h3, h4) { color: var(--green-900); }
.idr-aside-split-copy h3 { margin: 0 0 14px; font-size: clamp(20px, 2vw, 25px); }
.idr-aside-split-copy h4 { margin: 32px 0 12px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.35; }
.idr-aside-card li strong { font-weight: 600; color: var(--green-900); }
.idr-aside-card a.btn { width: 100%; margin-top: 18px; color: var(--paper-000); justify-content: center; }
.idr-aside-card a.btn:hover { color: var(--paper-000); }
/* ============================================================
/preventivi/ — quote finder page. Everything below is scoped
to .pv-* classes used only there.
============================================================ */
/* 1. Top: logo, H3 and the Servizio / Zona finder. */
.pv-top {
position: relative;
overflow: hidden;
background: var(--paper-050);
padding: clamp(48px, 6vw, 88px) 5vw;
}
.pv-top::before {
content: "";
position: absolute;
right: -120px;
top: -120px;
width: 420px;
height: 420px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 81, 0, .12), rgba(255, 81, 0, 0) 70%);
pointer-events: none;
}
.pv-top-card {
position: relative;
max-width: 760px;
margin: 0 auto;
padding: clamp(28px, 4vw, 48px);
background: var(--paper-000);
border: 1px solid var(--line-200);
border-top: 4px solid var(--amber-500);
border-radius: 24px;
box-shadow: 0 24px 60px rgba(14, 57, 94, .12);
text-align: center;
}
.pv-top-card > p:first-child { margin: 0 0 18px; }
.pv-top-card > p:first-child img { display: inline-block; width: 100%; max-width: 280px; height: auto; }
.pv-top-card > h3 {
margin: 0;
font-size: clamp(22px, 2.6vw, 30px);
line-height: 1.25;
color: var(--amber-600);
}
.pv-finder {
display: grid;
gap: 18px;
margin-top: 28px;
text-align: left;
}
@media (min-width: 640px) {
.pv-finder { grid-template-columns: 1fr 1fr; }
}
.pv-finder h3 {
margin: 0 0 8px;
font-size: 15px;
font-weight: 700;
letter-spacing: .02em;
color: var(--green-900);
}
.pv-finder form { margin: 0; }
.pv-finder select {
width: 100%;
padding: 14px 44px 14px 16px;
border: 1.5px solid var(--line-200);
border-radius: 14px;
background: var(--paper-000) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e395e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
font: inherit;
font-size: 16px;
color: var(--green-900);
appearance: none;
cursor: pointer;
transition: border-color .15s ease, box-shadow .15s ease;
}
.pv-finder select:focus {
outline: none;
border-color: var(--amber-500);
box-shadow: 0 0 0 4px rgba(255, 81, 0, .15);
}
.pv-finder-go { grid-column: 1 / -1; }
.pv-finder-go button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 6px 20px;
border: 0;
border-radius: 999px;
background: var(--amber-500);
box-shadow: 0 10px 24px rgba(255, 81, 0, .35);
cursor: pointer;
transition: background .15s ease;
}
.pv-finder-go button:hover { background: var(--amber-600); }
.pv-finder-go button h3 {
margin: 10px 0;
font-size: 18px;
letter-spacing: .03em;
color: var(--paper-000);
}
.pv-finder-msg {
grid-column: 1 / -1;
margin: 0;
min-height: 1.4em;
font-size: 14px;
text-align: center;
color: var(--amber-600);
}
/* 2. Three steps (each an H2 with its linked icon). */
.pv-steps {
background: var(--green-900);
padding: clamp(56px, 6vw, 80px) 5vw;
}
.pv-steps-grid {
max-width: 1140px;
margin: 0 auto;
display: grid;
gap: 24px;
}
@media (min-width: 900px) {
.pv-steps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pv-step {
background: var(--paper-000);
border-radius: 22px;
padding: 30px 28px 32px;
text-align: center;
box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}
.pv-step h2:where(:not(.h1-look)) {
margin: 0 0 14px;
font-size: clamp(20px, 2vw, 24px);
line-height: 1.3;
color: var(--green-900);
}
.pv-step h2:where(:not(.h1-look)) a {
display: flex;
align-items: center;
justify-content: center;
width: 104px;
height: 104px;
margin: 0 auto 18px;
border-radius: 50%;
background: var(--amber-050);
transition: transform .2s ease;
}
.pv-step h2:where(:not(.h1-look)) a:hover { transform: scale(1.05); }
.pv-step h2:where(:not(.h1-look)) img { width: 72px; height: 72px; }
.pv-step p {
margin: 0;
font-size: 15.5px;
line-height: 1.75;
text-align: left;
color: var(--ink-700);
}
/* 3. What we offer (12 tiles) + quote accordion. */
.pv-offer {
background: var(--paper-000);
padding: clamp(56px, 6vw, 88px) 5vw;
}
.pv-offer-inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
gap: 40px;
align-items: start;
}
@media (min-width: 1000px) {
.pv-offer-inner { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; }
}
.pv-offer h1,
.pv-offer h2:where(.h1-look) {
margin: 0 0 24px;
font-size: clamp(24px, 2.6vw, 32px);
line-height: 1.2;
text-align: center;
color: var(--amber-600);
}
.pv-tiles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
@media (min-width: 700px) {
.pv-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pv-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 22px 12px;
background: var(--green-050);
border: 1px solid var(--line-200);
border-radius: 18px;
text-align: center;
transition: transform .2s ease, box-shadow .2s ease;
}
.pv-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.pv-tile img { width: 52px; height: 52px; }
.pv-tile h4 {
margin: 0;
font-size: 13.5px;
font-weight: 700;
line-height: 1.35;
letter-spacing: .01em;
color: var(--green-900);
}
.pv-acc {
border: 1px solid var(--line-200);
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-card);
}
.pv-acc-panel + .pv-acc-panel { border-top: 1px solid var(--line-200); }
.pv-acc-title { margin: 0; font-size: 16px; }
.pv-acc-title a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
font-weight: 700;
color: var(--green-900);
background: var(--paper-000);
transition: background .15s ease;
}
.pv-acc-title a::after {
content: "";
width: 10px;
height: 10px;
border-right: 2px solid var(--amber-500);
border-bottom: 2px solid var(--amber-500);
transform: rotate(45deg) translateY(-3px);
transition: transform .2s ease;
}
.pv-acc-title a:hover { background: var(--green-050); }
.pv-acc-panel.is-open .pv-acc-title a { background: var(--green-900); color: var(--paper-000); }
.pv-acc-panel.is-open .pv-acc-title a::after { transform: rotate(-135deg) translateY(-3px); }
.pv-acc-body { display: none; padding: 8px 20px 14px; background: var(--paper-050); }
.pv-acc-panel.is-open .pv-acc-body { display: block; }
.pv-acc-body h4 {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
padding: 12px 0;
font-size: 15.5px;
}
.pv-acc-body h4 + h4 { border-top: 1px solid var(--line-200); }
.pv-acc-body h4 a { color: var(--green-900); font-weight: 600; }
.pv-acc-body h4 a:hover { color: var(--amber-600); }
.pv-acc-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: 10px;
background: var(--amber-050);
color: var(--amber-600);
}
.pv-acc-icon svg { width: 18px; height: 18px; }
/* 4. Where we work: navy band, one card per region, cities as chips. */
.pv-regions {
position: relative;
overflow: hidden;
background:
radial-gradient(rgba(14, 57, 94, .07) 1px, transparent 1px) 0 0 / 22px 22px,
var(--green-050);
padding: clamp(64px, 7vw, 100px) 5vw;
}
.pv-regions::after {
content: "";
position: absolute;
left: -160px;
bottom: -160px;
width: 460px;
height: 460px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 81, 0, .1), rgba(255, 81, 0, 0) 70%);
pointer-events: none;
}
.pv-regions-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
.pv-regions h2:where(:not(.h1-look)) {
margin: 0 0 40px;
font-size: clamp(26px, 3vw, 36px);
letter-spacing: .04em;
text-align: center;
color: var(--green-900);
}
.pv-regions h2:where(:not(.h1-look))::after {
content: "";
display: block;
width: 64px;
height: 4px;
margin: 14px auto 0;
border-radius: 4px;
background: var(--amber-500);
}
.pv-regions-grid {
display: grid;
gap: 16px;
}
@media (min-width: 640px) {
.pv-regions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
.pv-regions-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}
.pv-region {
padding: 22px 20px 24px;
background: var(--paper-000);
border: 1px solid var(--line-200);
border-radius: 20px;
box-shadow: var(--shadow-card);
transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.pv-region:hover {
border-color: rgba(255, 81, 0, .5);
box-shadow: var(--shadow-pop);
transform: translateY(-3px);
}
.pv-region-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px dashed var(--line-200);
}
.pv-region-pin {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 12px;
background: var(--amber-500);
color: var(--paper-000);
box-shadow: 0 8px 18px rgba(255, 81, 0, .35);
}
.pv-region-pin svg { width: 20px; height: 20px; }
.pv-region h3 {
margin: 0;
font-size: 15.5px;
line-height: 1.25;
letter-spacing: .05em;
color: var(--green-900);
}
.pv-region p {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 16px;
margin: 0;
}
.pv-region p br { display: none; }
.pv-region p strong {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
font-size: 14.5px;
font-weight: 600;
line-height: 1.3;
color: var(--ink-900);
}
.pv-region p strong::before {
content: "";
width: 7px;
height: 7px;
flex-shrink: 0;
border-radius: 50%;
background: var(--amber-500);
box-shadow: 0 0 0 3px rgba(255, 81, 0, .15);
}
/* ============================================================
/preventivi/intervento--/ — quote pages.
Scoped to .pvq-* classes so every city quote page can reuse it.
============================================================ */
/* 1. Hero: H1, orange call box, three step pills. */
.pvq-hero {
position: relative;
padding: clamp(56px, 8vw, 110px) 5vw clamp(40px, 5vw, 64px);
background:
linear-gradient(160deg, rgba(14, 57, 94, .92) 0%, rgba(24, 64, 105, .82) 100%),
url("/wp-content/uploads/2016/11/BG.jpg") center / cover no-repeat;
text-align: center;
color: var(--paper-000);
}
.pvq-hero-inner { max-width: 820px; margin: 0 auto; }
.pvq-hero h1,
.pvq-hero h2:where(.h1-look) {
margin: 0;
font-size: clamp(28px, 4.4vw, 48px);
line-height: 1.15;
letter-spacing: .01em;
color: var(--paper-000);
}
.pvq-call {
display: inline-block;
margin: 28px 0 0;
}
.pvq-call h1,
.pvq-call h2:where(.h1-look) { margin: 0; font-size: inherit; line-height: 1.2; }
.pvq-call a {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 18px 40px;
border-radius: 20px;
background: var(--amber-500);
box-shadow: 0 16px 36px rgba(255, 81, 0, .4);
font-size: clamp(18px, 2vw, 22px);
font-weight: 800;
letter-spacing: .04em;
color: var(--paper-000);
transition: background .15s ease, transform .15s ease;
}
.pvq-call a:hover { background: var(--amber-600); transform: translateY(-2px); }
.pvq-call a br { display: none; }
.pvq-call-num {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: clamp(26px, 3.4vw, 36px);
letter-spacing: .02em;
}
.pvq-call-num svg { width: .8em; height: .8em; }
.pvq-steps {
display: grid;
gap: 12px;
max-width: 960px;
margin: 40px auto 0;
}
@media (min-width: 760px) {
.pvq-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pvq-steps h4 {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 0;
padding: 14px 18px;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 999px;
background: rgba(255, 255, 255, .08);
font-size: 15.5px;
color: var(--paper-000);
}
.pvq-step-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 50%;
background: var(--amber-500);
}
.pvq-step-icon svg { width: 16px; height: 16px; }
/* 2. Intro: quote copy + features, and the "Indica…" call card. */
.pvq-intro {
background: var(--paper-000);
padding: clamp(56px, 6vw, 88px) 5vw;
}
.pvq-intro-inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
gap: 36px;
align-items: start;
}
@media (min-width: 1000px) {
.pvq-intro-inner { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 48px; }
}
.pvq-intro h1,
.pvq-intro h2:where(.h1-look) {
margin: 0 0 18px;
font-size: clamp(24px, 2.8vw, 34px);
line-height: 1.2;
color: var(--amber-600);
}
.pvq-lead {
margin: 0 0 32px;
padding: 18px 22px;
border-left: 4px solid var(--amber-500);
border-radius: 0 16px 16px 0;
background: var(--amber-050);
font-size: 16px;
line-height: 1.7;
text-wrap: wrap;
color: var(--green-900);
}
.pvq-lead a { color: var(--amber-600); text-decoration: underline; text-underline-offset: 3px; }
.pvq-intro-split {
display: grid;
gap: 28px;
align-items: center;
}
@media (min-width: 700px) {
.pvq-intro-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.pvq-intro-split--media-right { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}
.pvq-intro-media {
border-radius: 22px;
overflow: hidden;
background: var(--green-100);
}
.pvq-intro-media img { display: block; width: 100%; height: auto; }
@media (max-width: 699px) {
.pvq-intro-media { width: 100%; max-width: 300px; margin: 0 auto; }
}
.pvq-feats { display: grid; gap: 14px; }
.pvq-feat {
padding: 18px 20px;
border: 1px solid var(--line-200);
border-radius: 18px;
background: var(--paper-000);
box-shadow: var(--shadow-card);
}
.pvq-feat h4 {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 8px;
font-size: 16.5px;
color: var(--green-900);
}
.pvq-feat h4 img {
width: 42px;
height: 42px;
flex-shrink: 0;
padding: 7px;
border-radius: 12px;
background: var(--amber-050);
}
.pvq-feat p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-700); }
.pvq-ask {
overflow: hidden;
border-radius: 24px;
background: var(--green-900);
box-shadow: var(--shadow-pop);
text-align: center;
}
.pvq-ask h3 {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
margin: 0;
padding: 32px 24px 20px;
font-size: clamp(20px, 2vw, 24px);
line-height: 1.3;
color: var(--paper-000);
}
.pvq-ask h3 img { width: 64px; height: 64px; }
.pvq-ask-btn {
display: inline-block;
margin: 0 24px 28px;
padding: 14px 28px;
border-radius: 999px;
background: var(--amber-500);
box-shadow: 0 10px 24px rgba(255, 81, 0, .35);
font-weight: 800;
letter-spacing: .04em;
color: var(--paper-000);
transition: background .15s ease;
}
.pvq-ask-btn:hover { background: var(--amber-600); }
.pvq-ask p { margin: 0; }
.pvq-ask p img { display: block; width: 100%; height: auto; }
/* 3. Four linked service cards. */
.pvq-services {
background: var(--green-050);
padding: clamp(56px, 6vw, 88px) 5vw;
}
.pvq-services-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
gap: 18px;
}
@media (min-width: 640px) {
.pvq-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
.pvq-services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pvq-service {
display: flex;
flex-direction: column;
height: 100%;
padding: 28px 24px;
border: 1px solid var(--line-200);
border-top: 4px solid var(--amber-500);
border-radius: 20px;
background: var(--paper-000);
box-shadow: var(--shadow-card);
color: inherit;
transition: transform .2s ease, box-shadow .2s ease;
}
.pvq-service:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.pvq-service img {
width: 76px;
height: 76px;
margin-bottom: 18px;
padding: 12px;
border-radius: 20px;
background: var(--green-100);
}
.pvq-service h4 {
margin: 0 0 10px;
font-size: 16px;
line-height: 1.35;
letter-spacing: .02em;
color: var(--green-900);
}
.pvq-service-desc { font-size: 14.5px; line-height: 1.7; color: var(--ink-700); }
/* 4. Navy band: H2, H5 copy and a second call box. */
.pvq-band {
background:
radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 22px 22px,
linear-gradient(160deg, var(--green-900) 0%, var(--green-800) 100%);
padding: clamp(56px, 6vw, 88px) 5vw;
}
.pvq-band-card {
max-width: 880px;
margin: 0 auto;
padding: clamp(28px, 4vw, 48px);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 26px;
background: rgba(255, 255, 255, .05);
text-align: center;
}
.pvq-band h2:where(:not(.h1-look)) {
margin: 0 0 20px;
font-size: clamp(24px, 3vw, 34px);
line-height: 1.2;
color: var(--paper-000);
}
.pvq-band h2:where(:not(.h1-look))::after {
content: "";
display: block;
width: 64px;
height: 4px;
margin: 14px auto 0;
border-radius: 4px;
background: var(--amber-500);
}
.pvq-band h5 {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: 1.85;
text-align: left;
text-wrap: wrap; /* global.css balances headings; this H5 is a paragraph */
color: rgba(255, 255, 255, .88);
}
/* 5. "Sei un PROFESSIONISTA?" */
.pvq-pro {
background: var(--paper-050);
padding: clamp(56px, 6vw, 88px) 5vw;
}
.pvq-pro-card {
max-width: 1040px;
margin: 0 auto;
display: grid;
gap: 28px;
align-items: center;
padding: clamp(24px, 4vw, 44px);
border: 1px solid var(--line-200);
border-radius: 26px;
background: var(--paper-000);
box-shadow: var(--shadow-card);
}
@media (min-width: 800px) {
.pvq-pro-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 44px; }
}
.pvq-pro-media { text-align: center; }
.pvq-pro-media img { display: inline-block; width: 100%; max-width: 300px; height: auto; }
.pvq-pro-copy { text-align: center; }
@media (min-width: 800px) { .pvq-pro-copy { text-align: left; } }
.pvq-pro h2:where(:not(.h1-look)) {
margin: 0 0 12px;
font-size: clamp(24px, 2.8vw, 32px);
color: var(--green-900);
}
.pvq-pro h5 {
margin: 0 0 22px;
font-size: 16px;
font-weight: 400;
line-height: 1.75;
color: var(--ink-700);
}
.pvq-pro h4:empty { display: none; }
.pvq-pro h3 { margin: 0; font-size: 16px; }
.pvq-pro h3 a {
display: inline-block;
padding: 14px 28px;
border-radius: 999px;
background: var(--green-900);
letter-spacing: .04em;
color: var(--paper-000);
transition: background .15s ease;
}
.pvq-pro h3 a:hover { background: var(--green-700); }
.pvq-pro h3 u { text-decoration: none; }
/* ============================================================
/imbianchino-a-milano/ — painter page. Scoped to .imb-* classes.
============================================================ */
/* 1. Hero: two H1s (title + phone). */
.imb-hero {
position: relative;
overflow: hidden;
padding: clamp(64px, 9vw, 120px) 5vw;
background:
radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 22px 22px,
linear-gradient(150deg, var(--green-900) 0%, var(--green-800) 60%, var(--green-700) 100%);
text-align: center;
}
.imb-hero::before,
.imb-hero::after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.imb-hero::before {
right: -140px;
top: -140px;
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(255, 81, 0, .3), rgba(255, 81, 0, 0) 70%);
}
.imb-hero::after {
left: -120px;
bottom: -160px;
width: 380px;
height: 380px;
background: radial-gradient(circle, rgba(41, 145, 214, .35), rgba(41, 145, 214, 0) 70%);
}
.imb-hero-inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; }
.imb-hero h1,
.imb-hero h2:where(.h1-look) {
margin: 0;
font-size: clamp(32px, 5vw, 56px);
line-height: 1.1;
letter-spacing: .02em;
color: var(--paper-000);
}
.imb-hero h1 + h1,
.imb-hero h2:where(.h1-look) + h1,
.imb-hero h1 + h2:where(.h1-look),
.imb-hero h2:where(.h1-look) + h2:where(.h1-look) { margin-top: 28px; font-size: inherit; }
.imb-hero h1 + h1 a,
.imb-hero h2:where(.h1-look) + h1 a,
.imb-hero h1 + h2:where(.h1-look) a,
.imb-hero h2:where(.h1-look) + h2:where(.h1-look) a {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 34px;
border-radius: 999px;
background: var(--amber-500);
box-shadow: 0 16px 36px rgba(255, 81, 0, .4);
font-size: clamp(20px, 2.6vw, 28px);
font-weight: 800;
letter-spacing: .03em;
color: var(--paper-000);
transition: background .15s ease, transform .15s ease;
}
.imb-hero h1 + h1 a:hover,
.imb-hero h2:where(.h1-look) + h1 a:hover,
.imb-hero h1 + h2:where(.h1-look) a:hover,
.imb-hero h2:where(.h1-look) + h2:where(.h1-look) a:hover { background: var(--amber-600); transform: translateY(-2px); }
.imb-hero h1 + h1 svg,
.imb-hero h2:where(.h1-look) + h1 svg,
.imb-hero h1 + h2:where(.h1-look) svg,
.imb-hero h2:where(.h1-look) + h2:where(.h1-look) svg { width: .9em; height: .9em; }
/* 2. Chi Siamo: copy card + image. */
.imb-about {
background: var(--paper-000);
padding: clamp(56px, 6vw, 88px) 5vw;
}
.imb-about-inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
gap: 36px;
align-items: center;
}
@media (min-width: 960px) {
.imb-about-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; }
}
.imb-about h1,
.imb-about h2:where(.h1-look) {
margin: 0 0 20px;
font-size: clamp(28px, 3.2vw, 40px);
color: var(--amber-600);
}
.imb-about h1::after,
.imb-about h2:where(.h1-look)::after {
content: "";
display: block;
width: 56px;
height: 4px;
margin-top: 12px;
border-radius: 4px;
background: var(--amber-500);
}
.imb-about p {
margin: 0 0 16px;
font-size: 16px;
line-height: 1.8;
color: var(--ink-700);
}
.imb-about p:last-child { margin-bottom: 0; }
.imb-about p strong { color: var(--green-900); }
.imb-about-media {
position: relative;
border-radius: 26px;
overflow: hidden;
background: var(--green-100);
box-shadow: var(--shadow-pop);
}
.imb-about-media::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 8px;
background: linear-gradient(90deg, var(--amber-500), var(--green-500));
}
.imb-about-media img { display: block; width: 100%; height: auto; }
/* 3. Contact band: two H2s. */
.imb-contact {
background: var(--paper-000);
padding: 0 5vw clamp(56px, 6vw, 88px);
}
.imb-contact-card {
max-width: 980px;
margin: 0 auto;
padding: clamp(28px, 4vw, 44px);
border: 1px solid rgba(255, 81, 0, .2);
border-radius: 26px;
background: linear-gradient(135deg, var(--amber-050) 0%, var(--paper-000) 100%);
box-shadow: var(--shadow-card);
text-align: center;
}
.imb-contact h2:where(:not(.h1-look)) {
margin: 0;
font-size: clamp(20px, 2.4vw, 28px);
line-height: 1.45;
color: var(--green-900);
}
.imb-contact h2:where(:not(.h1-look)) a {
display: inline-block;
margin-top: 6px;
color: var(--amber-600);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 5px;
}
.imb-contact h2:where(:not(.h1-look)) + h2:where(:not(.h1-look)) {
display: inline-block;
margin-top: 18px;
padding: 8px 22px;
border-radius: 999px;
background: var(--green-900);
font-size: 15px;
letter-spacing: .06em;
color: var(--paper-000);
}
/* 4. Servizi: four cards. */
.imb-services {
background: var(--green-050);
padding: clamp(56px, 6vw, 88px) 5vw;
}
.imb-services-inner { max-width: 1200px; margin: 0 auto; }
.imb-services h1,
.imb-services h2:where(.h1-look) {
margin: 0 0 32px;
font-size: clamp(28px, 3.2vw, 40px);
text-align: center;
color: var(--green-900);
}
.imb-services h1::after,
.imb-services h2:where(.h1-look)::after {
content: "";
display: block;
width: 56px;
height: 4px;
margin: 12px auto 0;
border-radius: 4px;
background: var(--amber-500);
}
.imb-services-grid { display: grid; gap: 20px; }
@media (min-width: 860px) {
.imb-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
.imb-service {
padding: 26px 26px 28px;
border: 1px solid var(--line-200);
border-top: 4px solid var(--amber-500);
border-radius: 22px;
background: var(--paper-000);
box-shadow: var(--shadow-card);
}
.imb-service:nth-child(even) { border-top-color: var(--green-700); }
.imb-service h3 {
display: flex;
align-items: center;
gap: 16px;
margin: 0 0 16px;
font-size: clamp(18px, 1.8vw, 21px);
letter-spacing: .04em;
color: var(--green-900);
}
.imb-service h3 img {
width: 84px;
height: 73px;
flex-shrink: 0;
object-fit: cover;
border-radius: 16px;
background: var(--green-100);
}
.imb-service p {
margin: 0;
font-size: 15.5px;
line-height: 1.8;
color: var(--ink-700);
}
/* 5. Leftover rating shortcodes from the old page (kept as text). */
.imb-rating {
background: var(--green-050);
padding: 0 5vw 40px;
text-align: center;
}
.imb-rating p {
margin: 0;
font-size: 12px;
line-height: 1.6;
color: var(--ink-500);
}
/* Closing band on a single H4 sentence (Velletri-style lead band). */
.idr-band--lead h4:first-child { margin-top: 0; }
.idr-closing .idr-closing-h3 {
margin: 0 0 28px;
font-size: clamp(20px, 1.2rem + 1vw, 28px);
font-weight: 800;
line-height: 1.3;
color: var(--paper-000);
}
.idr-cards-head .btn { white-space: normal; max-width: 100%; }
@media (max-width: 600px) {
.idr-cards-head { flex-direction: column; align-items: stretch; }
.idr-cards-head .btn { width: 100%; justify-content: center; }
}
/* ============================================================
consent.css — cookie banner (assets/js/consent.js), every page.
global.css supplies tokens and .btn; nothing here redefines them.
The bar sits at the bottom of the viewport. On phones it sits
ABOVE the green call bar (global.css §20) instead of covering it:
the call button must stay tappable while the banner is open.
============================================================ */
.cc{ display:none; }
.cc.cc--open{ display:block; }
.cc-bar{
position:fixed;
left:50%; transform:translateX(-50%);
bottom:16px;
z-index:10001;
width:min(100% - 32px, 980px);
max-height:calc(100vh - 120px);
overflow:auto;
background:var(--paper-000);
color:var(--ink-900);
border:1px solid var(--line-200);
border-radius:var(--radius-m);
box-shadow:0 18px 50px rgba(14,57,94,.22);
padding:22px 24px 20px;
font-size:.92rem;
line-height:1.5;
}
@media (max-width:768px){
.cc-bar{
bottom:calc(var(--callbar-h) + env(safe-area-inset-bottom) + 8px);
width:calc(100% - 16px);
max-height:calc(100vh - var(--callbar-h) - 90px);
padding:18px 16px 16px;
}
}
.cc-title{
margin:0 32px 8px 0;
font-family:var(--font-display);
font-weight:800;
font-size:1.05rem;
color:var(--green-900);
}
.cc-desc p, .cc-intro, .cc-cat p{
margin:0 0 8px;
color:var(--ink-700);
font-size:.88rem;
}
.cc-desc a, .cc-intro a{ color:var(--green-700); text-decoration:underline; }
.cc-x{
position:absolute; top:10px; right:12px;
width:36px; height:36px;
border:0; border-radius:50%;
background:transparent;
color:var(--ink-700);
font-size:26px; line-height:1;
cursor:pointer;
}
.cc-x:hover{ background:var(--line-100); }
.cc-actions{
display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center;
gap:10px;
margin-top:12px;
}
.cc-actions .btn{ padding:12px 22px; font-size:.92rem; }
.cc-links{ display:none; }
/* Phones: keep the bar short so the page's own CHIAMA button and the
green call bar stay usable while the banner is open.
Rifiuta and Accetta keep the same size side by side (Garante 2021:
rejecting must be as easy as accepting); "Impostazioni cookie"
drops to a text link underneath. */
@media (max-width:600px){
.cc-bar{ padding:14px 14px 12px; }
.cc-title{ font-size:.98rem; margin-bottom:6px; }
.cc-desc .cc-more{ display:none; }
.cc-desc p, .cc-links{ font-size:.82rem; line-height:1.4; margin-bottom:6px; }
.cc-links{ display:block; }
.cc-links a{ color:var(--green-700); text-decoration:underline; }
.cc-bar .cc-actions{
display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px;
}
.cc-bar .cc-actions .btn{
width:100%; min-height:44px; padding:10px 8px;
font-size:.82rem; white-space:normal; line-height:1.2;
}
.cc-bar .cc-actions [data-cc="reject"]{ grid-column:1; grid-row:1; }
.cc-bar .cc-actions [data-cc="accept"]{ grid-column:2; grid-row:1; }
.cc-bar .cc-actions [data-cc="settings"]{ grid-column:1 / -1; grid-row:2; min-height:36px; padding:4px; }
.cc-panel .cc-actions{ flex-direction:column-reverse; align-items:stretch; }
.cc-panel .cc-actions .btn{ width:100%; }
}
/* While the banner is open the green call bar never slides away
(site.js §4 hides it when another CHIAMA is on screen — here that
button may sit under the banner). */
.cc-visible .call-bar.call-bar--hidden{ transform:none; }
/* ---- settings modal ---- */
.cc-modal{
position:fixed; inset:0;
z-index:10002;
background:rgba(26,27,39,.55);
display:flex; align-items:center; justify-content:center;
padding:16px;
}
.cc-modal[hidden]{ display:none; }
.cc-panel{
position:relative;
width:min(100%, 640px);
max-height:calc(100vh - 32px);
overflow:auto;
background:var(--paper-000);
border-radius:var(--radius-m);
box-shadow:0 24px 60px rgba(0,0,0,.3);
padding:24px;
}
.cc-cat{
border-top:1px solid var(--line-200);
padding:14px 0 6px;
}
.cc-cat-head{
display:flex; align-items:center; justify-content:space-between; gap:12px;
margin-bottom:4px;
cursor:pointer;
}
.cc-cat-name{ font-weight:700; color:var(--ink-900); }
.cc-always{ font-size:.8rem; font-weight:700; color:var(--live-500); }
/* Toggle switch built on a real checkbox (keyboard + screen reader) */
.cc-switch{
appearance:none; -webkit-appearance:none;
position:relative; flex-shrink:0;
width:44px; height:26px; margin:0;
border-radius:999px;
background:var(--ink-500);
cursor:pointer;
transition:background .15s ease;
}
.cc-switch::after{
content:""; position:absolute; top:3px; left:3px;
width:20px; height:20px; border-radius:50%;
background:var(--paper-000);
transition:transform .15s ease;
}
.cc-switch:checked{ background:var(--green-700); }
.cc-switch:checked::after{ transform:translateX(18px); }
.cc-switch:focus-visible{ outline:2px solid var(--amber-500); outline-offset:2px; }