/* components.css — technical_installer.
Il segno del verticale è il FILETTO ROSSO che nel marchio sta sotto il wordmark: torna come coda
dell'occhiello di ogni sezione, come bordo sinistro delle tessere di servizio e davanti alla
didascalia del video. Non riuso le tre icone del marchio come icone d'interfaccia: sono parte
della lastra, e spezzarle le consuma.
⚠ Ogni regola che tocca un blocco WP è scritta con lo SCHEMA DI SELETTORE di WP, non con uno più
corto: il CSS dei blocchi è iniettato DOPO il tema e a parità di specificità vince lui. */
/* ══════════════════ occhiello, testate di sezione, prosa ══════════════════ */
.eyebrow {
font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm);
text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--accent-ink);
display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3);
}
.eyebrow::after { content: ""; flex: 0 0 44px; height: 3px; background: var(--accent); }
/* ⚠ Sul fondo scuro il rosso di marca fa 3,18: l'occhiello passa al rosso schiarito. */
.banda-scura .eyebrow { color: var(--accent-on-dark); }
.section-head { margin-bottom: var(--space-7); }
.section-head h2 { font-size: var(--t-2xl); max-width: var(--misura-titolo); }
/* ⚠ La misura di lettura sta sul PARAGRAFO, mai sul contenitore o sulla riga di una griglia. */
.lead { font-size: var(--t-lead); color: var(--ink-muted); max-width: var(--misura-lead); margin-top: var(--space-4); }
.banda-scura .lead, .banda-scura p { color: var(--on-dark-muted); }
.prosa p { max-width: var(--misura-prosa); }
/* Una sezione SENZA fotografia cambia TELAIO, non solo contenuto: il testo occupa l'intera area in
due colonne invece di lasciare vuota la metà destra. Regola owner, e nessun gate la vede. */
.prosa--piena { columns: 2; column-gap: clamp(2rem, 1rem + 3vw, 4rem); }
.prosa--piena p { break-inside: avoid; max-width: none; }
.prosa--piena p + p { margin-top: var(--space-4); }
/* ══════════════════ bottoni ══════════════════ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm);
text-transform: uppercase; letter-spacing: .08em;
padding: .85rem 1.5rem; border-radius: var(--radius); border: 2px solid transparent;
transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
/* ⚠ Sul rosso il testo è BIANCO: il nero fa 3,02. */
.btn--primario { background: var(--accent); color: var(--on-accent); }
.btn--primario:hover, .btn--primario:focus-visible { background: var(--accent-dark); }
.btn--ghost { border-color: currentColor; color: inherit; }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.banda-scura .btn--ghost:hover, .banda-scura .btn--ghost:focus-visible { background: var(--on-dark); color: var(--brand); border-color: var(--on-dark); }
/* ══════════════════ barra alta: indirizzo · telefono · social ══════════════════ */
.topbar { background: var(--brand); color: var(--on-dark); font-size: var(--t-sm); }
.topbar__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-2); }
.topbar__contatti { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.topbar__tel { font-family: var(--font-display); font-weight: 500; letter-spacing: .04em; font-size: var(--t-base); }
.topbar__tel:hover { color: var(--accent-on-dark); }
.topbar__luogo { color: var(--on-dark-muted); }
/* ══════════════════ social col battito ══════════════════ */
.social { display: inline-flex; align-items: center; gap: var(--space-3); }
.social__link {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%; color: var(--on-dark);
border: 1px solid rgba(255, 255, 255, .28);
transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
/* ⚠ L'icona è una MASCHERA, non un ![]()
: così eredita `currentColor` e cambia colore sull'hover.
Il percorso è riscritto dall'emitter, quindi deve stare in un url() di `mask`, non inline. */
.social__ico { width: 17px; height: 17px; background: currentColor; }
.social__ico[data-social="facebook"] {
-webkit-mask: url("../assets/img/icons/social-facebook.svg") no-repeat center / contain;
mask: url("../assets/img/icons/social-facebook.svg") no-repeat center / contain;
}
.social__ico[data-social="instagram"] {
-webkit-mask: url("../assets/img/icons/social-instagram.svg") no-repeat center / contain;
mask: url("../assets/img/icons/social-instagram.svg") no-repeat center / contain;
}
/* Il battito sta su uno pseudo-elemento perché il cerchio vero deve restare cliccabile e di
dimensione ferma — un `transform` sul link sposterebbe il bersaglio sotto il dito. */
.social__link::after {
content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none;
animation: fp-social-pulse 2.8s var(--ease) infinite;
}
.social__link:nth-of-type(2)::after { animation-delay: 1.4s; }
.social__link:hover, .social__link:focus-visible { color: var(--brand); background: var(--on-dark); border-color: var(--on-dark); }
/* Fermo sotto il puntatore: chi sta per cliccare non ha bisogno di essere richiamato. */
.social__link:hover::after { animation-play-state: paused; }
@keyframes fp-social-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-on-dark) 60%, transparent); }
70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent-on-dark) 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-on-dark) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .social__link::after { animation: none; } }
/* ══════════════════ testata ══════════════════ */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-3); }
/* ⚠ Nav e CTA portano un margine di blocco da WP che li spinge sotto il centro: si azzera qui,
altrimenti la testata ha più spazio sopra che sotto. (Regola 16.) */
.site-header__row > * { align-self: center; margin-block: 0; }
.wordmark { display: inline-flex; align-items: center; }
.wordmark img { height: 56px; width: auto; }
.wordmark__txt { font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg); text-transform: uppercase; letter-spacing: .02em; }
.site-header .site-nav { display: flex; align-items: center; gap: var(--space-6); }
/* ⚠⚠ Il colore della voce si dichiara sul BLOCCO, non solo sull': `.site-nav a` perde contro il
CSS dei blocchi a parità di specificità e il menu resta del colore di WP. */
.site-header .site-nav .wp-block-navigation-item__content,
.site-header .site-nav a {
font-family: var(--font-display); font-weight: 500; font-size: var(--t-sm);
text-transform: uppercase; letter-spacing: .1em; color: var(--ink);
padding-block: var(--space-2); border-bottom: 2px solid transparent;
transition: color .2s var(--ease), border-color .2s var(--ease);
}
.site-header .site-nav .wp-block-navigation-item__content:hover,
.site-header .site-nav .wp-block-navigation-item__content:focus-visible {
color: var(--accent-ink); border-bottom-color: var(--accent);
}
.header-cta {
font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm);
text-transform: uppercase; letter-spacing: .08em;
background: var(--accent); color: var(--on-accent);
padding: .7rem 1.2rem; border-radius: var(--radius); margin-left: var(--space-4);
}
.header-cta:hover, .header-cta:focus-visible { background: var(--accent-dark); }
/* ── menu mobile: overlay wp:navigation ──────────────────────────────────────
⚠⚠ WP tiene l'overlay BIANCO con `:not(.has-background) … :not(.disable-default-overlay)`, che
pesa (0,4,0): una regola piatta perde e il menu resta bianco su bianco. Si vince ricopiando il
suo schema di selettore. */
.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open),
.wp-block-navigation__responsive-container.is-menu-open {
background-color: var(--brand); color: var(--on-dark);
}
.wp-block-navigation__responsive-container.is-menu-open {
height: 100vh; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* ⚠⚠ `align-items` qui governa l'asse ORIZZONTALE (i contenitori WP sono flex in COLONNA).
Con `flex-start` la lista si stringe sul testo e i filetti escono di lunghezze diverse, uno per
parola; serve `stretch`, così le voci occupano la riga e il testo va a sinistra col suo
`text-align`. Il flex-end di partenza arriva dal `justifyContent:right` della nav DESKTOP. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
align-items: stretch; width: 100%;
/* ⚠ Il margine laterale va messo QUI e non sul contenitore dell'overlay: li' WP vince e il
`padding` si calcola a 0 (misurato), e le voci restano incollate al bordo sinistro.
`padding-inline` da solo lascia stare il margine superiore, che e' di WP. */
padding-inline: var(--gutter);
/* L'ultima voce non deve finire sotto la barra CTA fissa. */
padding-bottom: 96px;
}
/* ⚠⚠ NON BASTA il contenitore: `align-items: flex-end` sta anche sulla UL e sui LI, e arriva da
`items-justified-right`, cioe' dal `justifyContent:right` della nav DESKTOP che WP porta dentro
l'overlay. In un flex in COLONNA quell'`align-items` governa l'asse ORIZZONTALE: senza queste due
righe le voci restano incollate al bordo destro (misurato: `li` largo 57px a x=333 su 390). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li {
align-items: stretch; width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
width: 100%; text-align: left; color: var(--on-dark);
font-family: var(--font-display); font-weight: 500; font-size: var(--t-lg);
text-transform: uppercase; letter-spacing: .08em;
padding-block: var(--space-4); border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: var(--accent-on-dark); }
/* Area di tocco dichiarata sul bottone di chiusura: il segno è 26px, il bersaglio 50. */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center;
}
.wp-block-navigation__responsive-container-close { color: var(--on-dark); }
.wp-block-navigation__responsive-container-open { color: var(--ink); }
/* ══════════════════ testata del sito: pannello + rotatore ══════════════════
Il testo NON sta mai sopra una delle due lastre: sta nel pannello accanto. Così il contrasto non
dipende dal fotogramma che scorre, non serve nessun velo, e la lastra del MARCHIO non si ritrova
del testo addosso. */
.hero { background: var(--sage-light); border-bottom: 1px solid var(--line); }
.hero__grid {
display: grid; grid-template-columns: 1.02fr .98fr;
gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
align-items: center; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
.hero h1 { font-size: var(--t-3xl); line-height: var(--lh-tight); max-width: var(--misura-titolo); }
.hero .lead { max-width: var(--misura-hero-lead); margin-top: var(--space-5); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.rotatore {
position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
box-shadow: 0 18px 40px -24px rgba(20, 22, 26, .55); isolation: isolate;
}
.rotatore__lastra { position: absolute; inset: 0; opacity: 0; animation: fp-rotatore 14s var(--ease) infinite; }
.rotatore__lastra:nth-child(2) { animation-delay: 7s; }
.rotatore__lastra img { width: 100%; height: 100%; object-fit: cover; }
/* La lastra del MARCHIO non è una fotografia: niente velo, niente testo sopra. La coccarda su fondo
scuro è la resa che il cliente usa già, non una nostra invenzione. */
.rotatore__lastra--marchio { background: var(--brand); display: grid; place-items: center; padding: 12%; }
.rotatore__lastra--marchio img { width: 100%; height: auto; object-fit: contain; }
@keyframes fp-rotatore {
0%, 4% { opacity: 0; }
8%, 46% { opacity: 1; }
54%, 100%{ opacity: 0; }
}
/* Con moto ridotto il rotatore si ferma sulla PRIMA lastra, che è la fotografia. */
@media (prefers-reduced-motion: reduce) {
.rotatore__lastra { animation: none; opacity: 0; }
.rotatore__lastra:first-child { opacity: 1; }
}
/* Variante senza fotografia idonea: resta il pannello e la lastra del marchio, MAI una foto finta. */
.hero--design .rotatore__lastra--marchio { position: static; animation: none; opacity: 1; aspect-ratio: 4 / 3; }
/* ══════════════════ chi siamo ══════════════════ */
.chisiamo__top { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); align-items: start; }
/* ⚠⚠ `height:auto` NON è pleonastico: l'attributo `height` dell'![]()
è un suggerimento di
presentazione e VINCE su `aspect-ratio` quando il CSS non dichiara un'altezza. Misurato:
510×1100 invece di 510×510. */
.chisiamo__foto img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); }
.chisiamo__didascalia { font-size: var(--t-sm); color: var(--ink-muted); margin-top: var(--space-3); }
.chisiamo__coda { margin-top: var(--space-7); }
/* ══════════════════ servizi ══════════════════ */
/* ⚠ La traccia e' tarata perche' le voci CHIUDANO le righe: con `minmax(230px,…)` il contenitore da
1280px fa 5 colonne, e dodici tessere lasciano tre celle vuote in fondo. A 260px le colonne sono
4 e le righe si chiudono (12 = 4x3). Se un cliente avesse un numero diverso di voci, questa
misura andrebbe rivista PER SITO. */
.servizi__griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.servizio {
background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--accent);
border-radius: var(--radius); padding: var(--space-5);
font-family: var(--font-display); font-weight: 500; font-size: var(--t-lead);
text-transform: uppercase; letter-spacing: .02em; line-height: var(--lh-heading);
max-width: var(--misura-tessera);
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.servizio:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -20px rgba(20, 22, 26, .6); }
.servizi__coda { margin-top: var(--space-6); }
/* ── il video del cliente ─────────────────────────────────────────────────────
⚠⚠ Il riquadro è CAPPATO a 496px, che è la risoluzione vera della clip del primo cliente. Un
video non si ingrandisce: oltre la sua misura nativa si vede la compressione. Se un altro
cliente porta una clip più grande, questo tetto va rialzato PER SITO, non tolto. */
.video-riga { display: grid; grid-template-columns: minmax(0, 496px) 1fr; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); align-items: center; margin-top: var(--space-8); }
.video-scheda { max-width: 496px; }
.video-scheda video { width: 100%; height: auto; border-radius: var(--radius); background: var(--brand); }
.video-scheda figcaption { font-size: var(--t-sm); color: var(--ink-muted); margin-top: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
.video-scheda figcaption::before { content: ""; width: 22px; height: 3px; background: var(--accent); flex: 0 0 auto; }
.video-testo h3 { font-size: var(--t-xl); margin-bottom: var(--space-4); }
/* ══════════════════ banda scura di respiro ══════════════════ */
.banda-scura { background: var(--brand); color: var(--on-dark); }
.banda-scura h2, .banda-scura h3 { color: var(--on-dark); }
/* ══════════════════ gallery ══════════════════
⚠ Il parco fotografico del mestiere è fatto in gran parte di RITRATTI (sul primo cliente 6 su 9).
Una griglia a campate con aspetti misti lascia buchi sotto le tessere basse; un aspetto unico
ritaglierebbe di brutto le orizzontali. Le COLONNE tengono l'aspetto vero di ogni foto e chiudono
da sole, senza ritagliare nulla. */
.mosaico { columns: 3; column-gap: var(--space-3); margin-top: var(--space-6); }
.mosaico figure { break-inside: avoid; margin: 0 0 var(--space-3); overflow: hidden; border-radius: var(--radius); }
.mosaico img { width: 100%; height: auto; transition: transform .5s var(--ease); }
.mosaico figure:hover img { transform: scale(1.04); }
/* ══════════════════ contatti ══════════════════ */
.recapiti__cols { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; margin-top: var(--space-6); }
.scheda-recapiti { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, .8rem + 1.6vw, 2rem); }
.scheda-recapiti dl { display: grid; gap: var(--space-5); }
.scheda-recapiti dt { font-family: var(--font-display); font-weight: 600; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ink-muted); margin-bottom: var(--space-1); }
.scheda-recapiti dd { margin: 0; }
.scheda-recapiti a { color: var(--accent-ink); text-underline-offset: 3px; text-decoration: underline; }
/* Più recapiti mobili, ognuno con la propria etichetta: è il caso comune di un'impresa familiare,
dove non esiste un centralino ma una persona per mestiere. */
.persone { display: grid; gap: var(--space-2); }
.persone a { display: flex; align-items: baseline; gap: var(--space-3); color: var(--ink); text-decoration: none; }
.persone .chi { font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .1em; color: var(--accent-ink); min-width: 5.5em; }
.persone .numero { font-family: var(--font-display); font-weight: 500; font-size: var(--t-lead); letter-spacing: .03em; }
.persone a:hover .numero { color: var(--accent-ink); text-decoration: underline; }
.orari { width: 100%; border-collapse: collapse; }
.orari th, .orari td { text-align: left; padding: .3rem 0; font-size: var(--t-sm); border-bottom: 1px solid var(--line); }
.orari th { font-weight: 500; color: var(--ink-muted); text-transform: capitalize; }
.orari td { font-variant-numeric: tabular-nums; }
.orari tr:last-child th, .orari tr:last-child td { border-bottom: 0; }
.orari .chiuso { color: var(--accent-ink); font-weight: 600; }
/* Modulo: i campi si vedono, e quando il recapito non è ancora attivo l'invio è SPENTO e dichiarato.
Un modulo che sembra funzionare e non recapita è peggio di un modulo assente. */
.modulo { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, .8rem + 1.6vw, 2rem); }
.modulo h3 { font-size: var(--t-xl); }
.modulo > p { color: var(--ink-muted); margin-bottom: var(--space-5); max-width: var(--misura-nota); }
/* L'avviso di modulo non disponibile e' INIETTATO dal build dopo il pulsante (form-disabled.json):
qui si veste soltanto. Sta dentro il