/* ==========================================================================
CancelliAutomaticiVenezia.it — components.css · prefisso cav · v1.0
I pezzi con cui si compongono le pagine. Nessun override sul tema padre:
quelli stanno tutti in fixes.css, che carica dopo questo file.
--------------------------------------------------------------------------
Regola cromatica ereditata da brand-foundation: ogni superficie ambra
porta testo --cav-ink. Mai bianco sull'ambra.
========================================================================== */
/* --------------------------------------------------------------------------
CONTRATTO DI SUPERFICIE
Ogni superficie dichiara di che colore va il contenuto che le sta sopra.
I componenti leggono la variabile invece di sapere dove si trovano: così
un pulsante a contorno resta leggibile ovunque lo si metta, e la prossima
scatola scura non ripropone il problema.
Correzione del 28/07: il pulsante a contorno spariva dentro .cav-cta e
.cav-hero, che sono superfici scure ma non portano la classe
.cav-section--dark su cui si appoggiava brand-foundation.css.
-------------------------------------------------------------------------- */
:root {
--cav-on-surface: var(--cav-ink);
--cav-on-surface-inverse: var(--cav-bg);
}
.cav-hero,
.cav-cta,
.cav-section--dark,
.cav-sticky,
#colophon {
--cav-on-surface: var(--cav-bg);
--cav-on-surface-inverse: var(--cav-ink);
}
.cav-btn--quote {
background: transparent;
color: var(--cav-on-surface);
border-color: var(--cav-on-surface);
}
.cav-btn--quote:hover,
.cav-btn--quote:focus-visible {
background: var(--cav-on-surface);
color: var(--cav-on-surface-inverse);
}
/* --------------------------------------------------------------------------
INTESTAZIONE DI SEZIONE
Occhiello, filo ambra, titolo. Il filo è la firma visiva del sito:
compare qui, sotto l'header e sopra il footer, e da nessun'altra parte.
-------------------------------------------------------------------------- */
.cav-section-header { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); max-width: 62ch; }
.cav-section-header--center { margin-inline: auto; text-align: center; }
.cav-section-header .cav-eyebrow { display: block; margin-bottom: 0.7rem; }
.cav-section-header__rule {
display: block;
width: 48px;
height: 3px;
background: var(--cav-accent);
margin-bottom: 1rem;
}
.cav-section-header--center .cav-section-header__rule { margin-inline: auto; }
.cav-section-header p {
color: var(--cav-ink-soft);
margin-top: 0.9rem;
margin-bottom: 0;
}
.cav-section--dark .cav-section-header p { color: rgba(243, 245, 246, 0.82); }
/* --------------------------------------------------------------------------
HERO HOME
Griglia 1.4fr / 1fr: a sinistra la promessa, a destra la colonna di
contatto. Non un modulo: chi arriva con il cancello fermo deve trovare
il numero senza scorrere.
-------------------------------------------------------------------------- */
.cav-hero {
position: relative;
background: var(--cav-dark);
color: var(--cav-bg);
padding-block: clamp(2.5rem, 6vw, 4.5rem);
overflow: hidden;
}
.cav-hero__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0.28;
}
.cav-hero__inner {
position: relative;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(1.6rem, 4vw, 3rem);
align-items: start;
}
.cav-hero h1 { color: var(--cav-bg); margin: 0 0 1rem; }
.cav-hero__lead {
font-size: clamp(1.08rem, 1.6vw, 1.2rem);
color: rgba(243, 245, 246, 0.88);
max-width: 54ch;
margin: 0 0 1.6rem;
}
.cav-hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
/* Colonna contatto: vetro sul fondo scuro, bordo ambra sul lato */
.cav-hero__card {
background: rgba(243, 245, 246, 0.07);
backdrop-filter: blur(6px);
border: 1px solid rgba(243, 245, 246, 0.16);
border-left: 3px solid var(--cav-accent);
border-radius: var(--cav-radius);
padding: clamp(1.2rem, 2.5vw, 1.7rem);
}
.cav-hero__card h2 {
color: var(--cav-bg);
font-size: 1.25rem;
margin: 0 0 0.9rem;
}
.cav-hero__phone {
display: block;
font-family: var(--cav-font-mono);
font-feature-settings: 'tnum' 1;
font-size: clamp(1.5rem, 3vw, 1.95rem);
color: var(--cav-accent);
text-decoration: none;
line-height: 1.1;
margin-bottom: 0.3rem;
}
.cav-hero__phone:hover { text-decoration: underline; }
.cav-hero__hours {
font-size: var(--cav-fs-small);
color: rgba(243, 245, 246, 0.75);
margin: 0 0 1.1rem;
}
@media (max-width: 860px) {
.cav-hero__inner { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
HERO PAGINE INTERNE — compatto, con briciole di pane in linea
-------------------------------------------------------------------------- */
.cav-hero--inner { padding-block: clamp(1.8rem, 4vw, 2.8rem); }
.cav-hero--inner .cav-hero__inner { grid-template-columns: 1fr; }
.cav-hero--inner h1 { margin-bottom: 0.6rem; }
.cav-breadcrumb {
font-size: var(--cav-fs-small);
color: rgba(243, 245, 246, 0.7);
margin-bottom: 0.9rem;
}
.cav-breadcrumb a { color: rgba(243, 245, 246, 0.7); text-decoration: none; }
.cav-breadcrumb a:hover { color: var(--cav-accent); }
/* --------------------------------------------------------------------------
GRIGLIE
-------------------------------------------------------------------------- */
.cav-grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.cav-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cav-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cav-grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
/* --------------------------------------------------------------------------
CARD
Un solo componente base, tre varianti. La card intera è cliccabile con
un link fantasma sovrapposto: attorno a un blocco flex lo romperebbe.
-------------------------------------------------------------------------- */
.cav-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--cav-bg);
border: var(--cav-border);
border-radius: var(--cav-radius);
padding: clamp(1.1rem, 2vw, 1.5rem);
transition: border-color .15s ease, transform .15s ease;
}
.cav-card:has(.cav-card__link):hover {
border-color: var(--cav-accent);
transform: translateY(-2px);
}
.cav-card__link {
position: absolute;
inset: 0;
z-index: 2;
text-indent: -9999px;
overflow: hidden;
}
.cav-card__icon {
width: 34px;
height: 34px;
color: var(--cav-accent);
margin-bottom: 0.9rem;
}
.cav-card__icon svg { width: 100%; height: 100%; }
.cav-card h3 { margin: 0 0 0.6rem; }
.cav-card p { margin: 0 0 0.9rem; color: var(--cav-ink-soft); }
.cav-card > :last-child { margin-bottom: 0; }
.cav-card__price {
margin-top: auto;
font-family: var(--cav-font-mono);
font-size: var(--cav-fs-small);
color: var(--cav-ink);
}
/* Variante con immagine in testa */
.cav-card--media { padding: 0; overflow: hidden; }
.cav-card--media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cav-card--media .cav-card__body { padding: clamp(1.1rem, 2vw, 1.5rem); }
/* Variante su fondo pietra, per sezioni chiare alternate */
.cav-card--stone { background: var(--cav-stone); border-color: transparent; }
/* Variante su fondo scuro */
.cav-section--dark .cav-card {
background: rgba(243, 245, 246, 0.05);
border-color: rgba(243, 245, 246, 0.14);
}
.cav-section--dark .cav-card p { color: rgba(243, 245, 246, 0.8); }
/* --------------------------------------------------------------------------
SPLIT — testo e immagine affiancati, alternabili
-------------------------------------------------------------------------- */
.cav-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.4rem, 4vw, 3rem);
align-items: center;
}
.cav-split--reverse .cav-split__media { order: 2; }
.cav-split__media img {
width: 100%;
border-radius: var(--cav-radius);
display: block;
}
.cav-split__body > :first-child { margin-top: 0; }
.cav-split__body > :last-child { margin-bottom: 0; }
@media (max-width: 780px) {
.cav-split { grid-template-columns: 1fr; }
.cav-split--reverse .cav-split__media { order: 0; }
}
/* --------------------------------------------------------------------------
ELENCO PUNTATO CON SPUNTA
Marcatore disegnato in CSS: nessuna icona esterna, eredita il colore.
-------------------------------------------------------------------------- */
.cav-check { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.cav-check li {
position: relative;
padding-left: 1.9rem;
margin-bottom: 0.6rem;
}
.cav-check li::before {
content: '';
position: absolute;
left: 0;
top: 0.42em;
width: 0.5rem;
height: 0.85rem;
border-right: 2.5px solid var(--cav-accent);
border-bottom: 2.5px solid var(--cav-accent);
transform: rotate(42deg);
}
/* Variante negativa — la sezione "cosa non facciamo" */
.cav-check--no li::before {
width: 0.85rem;
height: 0.85rem;
border: none;
border-top: 2.5px solid var(--cav-ink-soft);
transform: none;
top: 0.72em;
}
/* --------------------------------------------------------------------------
PROCESSO — timeline numerata
La numerazione qui è informazione, non decorazione: l'ordine degli
interventi è reale e il lettore lo deve seguire. Altrove non si numera.
-------------------------------------------------------------------------- */
.cav-process { counter-reset: cav-step; list-style: none; padding: 0; margin: 0; }
.cav-process__step {
position: relative;
counter-increment: cav-step;
padding-left: 3.4rem;
padding-bottom: 1.8rem;
}
.cav-process__step::before {
content: counter(cav-step, decimal-leading-zero);
position: absolute;
left: 0;
top: 0;
width: 2.3rem;
height: 2.3rem;
display: grid;
place-items: center;
background: var(--cav-accent);
color: var(--cav-ink);
border-radius: var(--cav-radius);
font-family: var(--cav-font-display);
font-variation-settings: 'wdth' var(--cav-display-stretch), 'wght' 600;
font-size: 0.95rem;
z-index: 1;
}
/* Filo verticale che collega gli step, tranne l'ultimo */
.cav-process__step::after {
content: '';
position: absolute;
left: 1.13rem;
top: 2.3rem;
bottom: 0;
width: 2px;
background: var(--cav-stone);
}
.cav-process__step:last-child { padding-bottom: 0; }
.cav-process__step:last-child::after { display: none; }
.cav-process__step h3 { margin: 0.2rem 0 0.4rem; }
.cav-process__step p { margin: 0; color: var(--cav-ink-soft); }
.cav-process__time {
display: inline-block;
font-family: var(--cav-font-mono);
font-size: var(--cav-fs-small);
color: var(--cav-ink-soft);
margin-top: 0.4rem;
}
.cav-section--dark .cav-process__step::after { background: rgba(243, 245, 246, 0.18); }
.cav-section--dark .cav-process__step p,
.cav-section--dark .cav-process__time { color: rgba(243, 245, 246, 0.8); }
/* --------------------------------------------------------------------------
CARATTERISTICHE — griglia sobria, senza numeri
-------------------------------------------------------------------------- */
.cav-feature { padding-top: 1.1rem; border-top: 2px solid var(--cav-accent); }
.cav-feature h3 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.cav-feature p { margin: 0; color: var(--cav-ink-soft); font-size: var(--cav-fs-small); }
.cav-section--dark .cav-feature { border-top-color: var(--cav-accent); }
.cav-section--dark .cav-feature p { color: rgba(243, 245, 246, 0.78); }
/* --------------------------------------------------------------------------
GALLERIA
-------------------------------------------------------------------------- */
.cav-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.8rem;
}
.cav-gallery img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--cav-radius);
display: block;
}
.cav-gallery figure { margin: 0; }
.cav-gallery figcaption {
font-size: var(--cav-fs-small);
color: var(--cav-ink-soft);
margin-top: 0.4rem;
}
/* --------------------------------------------------------------------------
TESTIMONIANZE E MANIFESTO
Il rivestimento del blockquote è qui; la neutralizzazione degli stili
aggressivi del tema padre sta in fixes.css, blocco 6.
-------------------------------------------------------------------------- */
.cav-testimonial {
border-left: 3px solid var(--cav-accent);
padding: 0.2rem 0 0.2rem 1.3rem;
margin: 0;
}
.cav-testimonial__quote { font-size: 1.06rem; margin: 0 0 0.7rem; }
.cav-testimonial__author {
font-size: var(--cav-fs-small);
color: var(--cav-ink-soft);
font-style: normal;
}
.cav-manifesto {
margin: clamp(1.6rem, 4vw, 2.6rem) 0;
padding: 0 0 0 1.6rem;
border-left: 4px solid var(--cav-accent);
font-family: var(--cav-font-display);
font-variation-settings: 'wdth' var(--cav-display-stretch), 'wght' 500;
font-size: clamp(1.3rem, 2.6vw, 1.85rem);
line-height: 1.32;
color: var(--cav-ink);
max-width: 30ch;
}
.cav-manifesto cite {
display: block;
margin-top: 0.8rem;
font-family: var(--cav-font-body);
font-size: var(--cav-fs-small);
font-style: normal;
color: var(--cav-ink-soft);
}
/* --------------------------------------------------------------------------
TABELLA COMPARATIVA
-------------------------------------------------------------------------- */
.cav-table-wrap { overflow-x: auto; margin-bottom: 1.4rem; }
.cav-table {
width: 100%;
border-collapse: collapse;
font-size: var(--cav-fs-small);
min-width: 480px;
}
.cav-table th,
.cav-table td {
padding: 0.75rem 0.9rem;
text-align: left;
border-bottom: 1px solid var(--cav-stone);
}
.cav-table thead th {
background: var(--cav-dark);
color: var(--cav-bg);
font-family: var(--cav-font-display);
font-variation-settings: 'wdth' var(--cav-display-stretch), 'wght' 600;
letter-spacing: 0.04em;
border-bottom: none;
}
.cav-table tbody tr:nth-child(even) { background: var(--cav-stone); }
.cav-table td:first-child { font-weight: 600; }
/* --------------------------------------------------------------------------
BOX INFORMATIVO — dove servono avvertenze o condizioni
Registro sobrio: nessun gradiente, nessuna forma da bollino.
-------------------------------------------------------------------------- */
.cav-note {
background: var(--cav-stone);
border-left: 3px solid var(--cav-accent);
border-radius: 0 var(--cav-radius) var(--cav-radius) 0;
padding: 1.1rem 1.35rem;
margin-bottom: 1.4rem;
}
.cav-note h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.cav-note > :last-child { margin-bottom: 0; }
/* --------------------------------------------------------------------------
BLOCCO CHIAMATA ALL'AZIONE
-------------------------------------------------------------------------- */
.cav-cta {
background: var(--cav-dark);
color: var(--cav-bg);
border-radius: var(--cav-radius);
padding: clamp(1.6rem, 4vw, 2.6rem);
display: grid;
grid-template-columns: 1fr auto;
gap: 1.4rem;
align-items: center;
}
.cav-cta h2 { color: var(--cav-bg); margin: 0 0 0.5rem; }
.cav-cta p { margin: 0; color: rgba(243, 245, 246, 0.82); }
.cav-cta__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
@media (max-width: 720px) {
.cav-cta { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
CONTATTI
Box cliccabili con link fantasma: attorno a un blocco flex si rompe
sui temi WordPress. Il pattern è lo stesso di .cav-card.
-------------------------------------------------------------------------- */
.cav-contact-box {
position: relative;
display: flex;
flex-direction: column;
gap: 0.3rem;
background: var(--cav-bg);
border: var(--cav-border);
border-radius: var(--cav-radius);
padding: 1.3rem;
transition: border-color .15s ease;
}
.cav-contact-box:hover { border-color: var(--cav-accent); }
.cav-contact-box__link { position: absolute; inset: 0; z-index: 2; text-indent: -9999px; overflow: hidden; }
.cav-contact-box__icon { width: 28px; height: 28px; color: var(--cav-accent); margin-bottom: 0.4rem; }
.cav-contact-box__icon svg { width: 100%; height: 100%; }
.cav-contact-box__label {
font-family: var(--cav-font-display);
font-variation-settings: 'wdth' var(--cav-display-stretch), 'wght' 600;
font-size: var(--cav-fs-eyebrow);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cav-ink-soft);
}
.cav-contact-box__value {
font-family: var(--cav-font-mono);
font-size: 1.05rem;
color: var(--cav-ink);
word-break: break-word;
}
/* Modulo a sinistra, schede informative a destra */
.cav-contact-layout {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: clamp(1.4rem, 3vw, 2.4rem);
align-items: start;
}
@media (max-width: 860px) {
.cav-contact-layout { grid-template-columns: 1fr; }
}
.cav-map {
border-radius: var(--cav-radius);
overflow: hidden;
line-height: 0;
border: var(--cav-border);
}
.cav-map iframe { width: 100%; height: 340px; border: 0; display: block; }
/* --------------------------------------------------------------------------
DOMANDE FREQUENTI
/: apertura e chiusura senza una riga di JavaScript,
e il contenuto resta nel DOM per i motori anche da chiuso.
-------------------------------------------------------------------------- */
.cav-faq { border-top: 1px solid var(--cav-stone); }
.cav-faq details {
border-bottom: 1px solid var(--cav-stone);
padding: 0;
}
.cav-faq summary {
position: relative;
cursor: pointer;
list-style: none;
padding: 1.05rem 2.6rem 1.05rem 0;
font-family: var(--cav-font-display);
font-variation-settings: 'wdth' var(--cav-display-stretch), 'wght' 600;
font-size: 1.08rem;
color: var(--cav-ink);
}
.cav-faq summary::-webkit-details-marker { display: none; }
.cav-faq summary::after {
content: '';
position: absolute;
right: 0.4rem;
top: 1.45rem;
width: 9px;
height: 9px;
border-right: 2.5px solid var(--cav-accent);
border-bottom: 2.5px solid var(--cav-accent);
transform: rotate(45deg);
transition: transform .18s ease;
}
.cav-faq details[open] summary::after { transform: rotate(-135deg); top: 1.7rem; }
.cav-faq details > *:not(summary) { padding-bottom: 1.1rem; }
.cav-faq details p { margin: 0 0 0.8rem; color: var(--cav-ink-soft); }
.cav-faq details p:last-of-type { margin-bottom: 0; }
/* --------------------------------------------------------------------------
BARRA CTA FISSA SU MOBILE
Sostituisce il plugin Call Now Button: due binari invece di uno,
colori del brand, e nessuna dipendenza esterna.
Markup: