, link incluso, o si spezza in più item. */
.contact-form .consent { display: flex; align-items: flex-start; gap: var(--space-3); margin-block: var(--space-5); }
.contact-form .consent span { font-size: 0.9rem; color: var(--on-dark-muted); }
.contact-form .consent a { color: var(--gold); text-decoration: underline; }
.form-note { font-size: 0.85rem; color: var(--on-dark-muted); margin-top: var(--space-4); }
.contatti__info {
border-left: 1px solid rgba(201,171,129,.4); padding-left: clamp(1.5rem, 3vw, 2.5rem);
/* ⭐ Da colonna a PANNELLO con una superficie propria. ⚠⚠ NIENTE `space-between`: il pattern del
verticale chiude la colonna con un `` VUOTO, e distribuire tre figli (dl · «Apri la mappa» · p
vuoto) su 815px li spingeva a inizio, centro e fondo — il pannello sembrava avere dei pezzi
mancanti. Il contenuto sta in ALTO e il pannello si ferma dove finisce. */
display: var(--contatti-info-display); flex-direction: column; justify-content: flex-start;
align-content: start;
background: var(--contatti-info-bg); padding-block: var(--contatti-info-pad);
padding-right: var(--contatti-info-pad); border-radius: var(--contatti-info-radius);
}
/* Due colonne solo dove c'è spazio: sotto i 1100px una sola. ⚠ E un indirizzo email non si spezza da
solo: in una colonna da 155px sbordava di 7px oltre il viewport — un difetto che si vede solo misurando
lo scrollWidth, perché la pagina resta apparentemente a posto. */
.contatti__info dl { margin: 0; }
.contatti__info dd { overflow-wrap: anywhere; }
/* ⚠ Il pattern chiude la colonna con un capoverso VUOTO: in un contenitore flex diventa un figlio che
partecipa alla distribuzione e apre un vuoto. Non si rende. */
.contatti__info > p:empty { display: none; }
@media (min-width: 1100px) {
.contatti__info dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-6); }
}
.contatti__info dt {
font-size: 0.74rem; font-weight: 700; letter-spacing: var(--tracking-label);
text-transform: uppercase; color: var(--gold); margin-top: var(--space-5);
}
.contatti__info dt:first-child { margin-top: 0; }
.contatti__info dd { margin: var(--space-2) 0 0; color: var(--on-dark); }
.contatti__info dd a:hover { color: var(--gold); }
/* ⚠⚠ LA CORNICE A DUE COLONNE SI SCIOGLIE QUANDO LA COLONNA DESTRA NON HA UNA FOTOGRAFIA.
Sulla pagina dei contatti il pannello porta una foto dello showroom ed e' alto quanto il modulo (687px
contro 758): la cornice regge. In home il pannello ha tre recapiti e una mappa, 288px contro 815, e
sotto restava un vuoto alto mezzo schermo — la prima delle tre cause di «spazi vuoti».
Qui il blocco di testa si promuove a figlio della griglia (`contents`), cosi' il titolo puo' stare in
colonna 1 mentre il pannello occupa la 2, e il MODULO scende sotto a tutta larghezza su due colonne:
la banda scende da 1103 a 976px e il vuoto sparisce.
⚠ `:not(:has(...))` e' la guardia: senza, la stessa regola spingerebbe il modulo della pagina contatti
sotto un pannello alto 687px, aprendo un vuoto peggiore di quello che chiude (misurato).
⚠ `row-gap` a parte: col blocco promosso, il gap della griglia finirebbe FRA occhiello, titolo e lead,
che hanno gia' i loro margini. I default di tutti i token sono le due colonne di oggi. */
@media (min-width: 901px) {
.contatti__cols:not(:has(.contatti__info figure)) { row-gap: var(--contatti-row-gap); }
.contatti__cols:not(:has(.contatti__info figure)) > :first-child { display: var(--contatti-first-display); }
.contatti__cols:not(:has(.contatti__info figure)) > :first-child > * { grid-column: var(--contatti-intro-col); }
.contatti__cols:not(:has(.contatti__info figure)) .contatti__info { grid-area: var(--contatti-info-area); }
.contatti__cols:not(:has(.contatti__info figure)) .contact-form {
grid-column: var(--contatti-form-col); margin-top: var(--contatti-form-mt);
display: var(--contatti-form-display); grid-template-columns: var(--contatti-form-cols);
column-gap: var(--contatti-form-gap); align-items: start;
}
/* Il messaggio sale accanto ai campi e si allunga quanto la colonna sinistra; invia e nota si
dispongono da soli nell'ultima riga (auto-placement), uno per colonna.
⚠ `justify-self`, `align-self` e `flex` non fanno nulla finche' il modulo e' `block`: restano inerti
sui siti che non ridichiarano i token. */
.contatti__cols:not(:has(.contatti__info figure)) .contact-form > .field:has(textarea) {
grid-area: var(--contatti-msg-area);
display: var(--contatti-msg-display); flex-direction: column; align-self: stretch;
}
.contatti__cols:not(:has(.contatti__info figure)) .contact-form > .field:has(textarea) textarea {
flex: 1; min-height: var(--contatti-msg-minh);
}
.contatti__cols:not(:has(.contatti__info figure)) .contact-form > button { justify-self: start; }
.contatti__cols:not(:has(.contatti__info figure)) .contact-form > .form-note { align-self: center; }
}
@media (max-width: 860px) {
.contatti__cols { grid-template-columns: 1fr; }
.contatti__info { border-left: 0; border-top: 1px solid rgba(201,171,129,.4); padding-left: 0; padding-top: var(--space-6); }
.contact-form .row { grid-template-columns: 1fr; }
}
/* ============================ Testata di pagina ============================ */
/* ⚠ Una page-head NON è un hero: usa il gradino sotto (--text-2xl) e un padding contenuto, altrimenti
«occupa mezza schermata». È condivisa da tutte le pagine interne: si sistema una volta sola. */
.page-head { position: relative; isolation: isolate; background: var(--night); overflow: hidden; }
.page-head__inner { padding-block: clamp(3.5rem, 3rem + 4vw, 6rem); position: relative; z-index: 2; }
/* Stessa medicina dell'hero: la targa porta il contrasto, il velo no. Qui la fotografia cambia da una
pagina all'altra — misurarne una sola non direbbe nulla delle altre tredici. */
.page-head__plate {
max-width: 60ch; background: linear-gradient(152deg, rgba(43,42,42,.93) 0%, rgba(43,42,42,.86) 100%);
border-left: 3px solid var(--gold);
padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
}
.page-head h1 { color: var(--on-dark); font-size: var(--text-2xl); }
.page-head .eyebrow { color: var(--gold-lt); }
/* ⚠ --on-dark-muted su una targa semitrasparente non regge: il testo secondario resta pieno. */
.page-head__lead { color: var(--on-dark); margin-top: var(--space-4); max-width: 58ch; }
.page-head__media { position: absolute; inset: 0; z-index: -2; }
.page-head__media img { width: 100%; height: 100%; object-fit: cover; }
.page-head::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--scrim); pointer-events: none; }
@media (max-width: 820px) { .page-head::after { background: var(--scrim-mobile); } }
/* Briciole di pane: il sito è a pagina unica, le pagine prodotto devono dire da dove si torna. */
/* ⚠ --on-dark-muted misura 6,02 sulla banda notte PIENA ma 4,35 sulla targa semitrasparente sopra una
fotografia: è lo stesso token verificato su una superficie e usato su un'altra. Qui resta il pieno. */
.crumbs { font-size: 0.85rem; color: var(--on-dark); margin-bottom: var(--space-4); }
/* ⚠ Un link dentro un blocco di testo deve distinguersi dal testo circostante anche senza colore:
--gold-lt contro --on-dark dà 1,54, sotto il 3:1 richiesto. La sottolineatura è sempre presente. */
.crumbs a { color: var(--gold-lt); text-decoration: underline; text-underline-offset: 2px; }
/* ============================ Pagina prodotto ============================ */
/* ⚠ La misura di lettura va sul PARAGRAFO e il blocco si CENTRA: legata al bordo sinistro del container
lasciava un vuoto largo quanto mezzo schermo sui monitor grandi. */
.prod-intro { max-width: 68ch; margin-inline: auto; text-align: center; }
.prod-intro > * + * { margin-top: var(--space-4); }
.prod-intro p { color: var(--ink-muted); margin-inline: auto; }
/* Sottotipo (Cucine classiche / Cucine moderne): ognuno è una BANDA propria, alternata crema/carta.
Dà ritmo a pagine che altrimenti sono una colonna sola di fotografie, e l'intestazione centrata coi due
filetti d'oro è la stessa della home: una sola grammatica in tutto il sito. */
.subsection { padding-block: var(--section-y); background: var(--paper); }
.subsection--alt { background: var(--surface); }
.subsection__head { text-align: center; margin-bottom: var(--space-7);
display: flex; align-items: center; justify-content: center; gap: var(--space-5); }
.subsection__head h2 { font-size: var(--text-lg); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; margin: 0; }
.subsection__head::before, .subsection__head::after {
content: ""; height: 1px; background: var(--gold); flex: 0 1 clamp(1.5rem, 7vw, 5rem);
}
/* La griglia regolare: tessere della stessa misura, gutter ampio, ritmo calmo. */
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.4vw, 2rem); }
/* ⚠ PROVATO E TOLTO: `content-visibility:auto` sembrava la risposta alle 65 fotografie di /complementi/
(~281 MB di bitmap, che sfondano il tetto di decodifica di Chromium). NON ha risolto — le stesse tre
immagini restano rifiutate da `decode()` — e in cambio lasciava le bande VUOTE negli screenshot a
pagina intera, che sono ciò su cui il sito viene giudicato. Un rimedio che non cura e che rompe la
verifica non si tiene. */
.prod-grid a { display: block; overflow: hidden; position: relative; background: var(--surface); }
.prod-grid img {
width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
transition: transform 600ms var(--ease);
}
.prod-grid a:hover img { transform: scale(1.05); }
/* Affordance dello zoom: senza, una griglia cliccabile non dichiara di esserlo. */
.prod-grid a::after {
content: ""; position: absolute; inset: 0; background: rgba(43,42,42,.28);
opacity: 0; transition: opacity var(--dur) var(--ease);
}
.prod-grid a:hover::after, .prod-grid a:focus-visible::after { opacity: 1; }
@media (max-width: 900px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .prod-grid { grid-template-columns: 1fr; } }
/* Banda di richiamo in fondo alle pagine prodotto. */
/* ⚠ Aveva la stessa identica campitura delle bande crema: due componenti con mestieri diversi che si
somigliano al punto da non distinguersi. Il richiamo finale prende una campitura PROPRIA, diagonale e
più calda, che lo stacca dalla galleria che lo precede. */
.cta-band { background: linear-gradient(135deg, var(--tint) 0%, var(--surface) 45%, #EFE6D6 100%);
padding-block: calc(var(--section-y) * 0.78); text-align: center; position: relative; }
/* Un filetto d'oro in testa alla fascia: la stacca dalla galleria che la precede. */
.cta-band::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--gold) 25%, #FFF6E6 50%, var(--gold) 75%, transparent 100%);
background-size: 200% 100%; animation: fp-scia 8s linear infinite; }
.cta-band h2 { margin-bottom: var(--space-4); }
.cta-band p { margin-inline: auto; color: var(--ink-muted); margin-bottom: var(--space-6); }
/* ============================ Fascia fotografica ============================ */
/* Una fotografia a tutta larghezza fra due gallerie: spezza la colonna di tessere, dà alla pagina
un'immagine GRANDE (le tessere da sole non ne hanno nessuna) e regge una frase del cliente.
⚠ L'altezza è contenuta: queste foto sono di taglia media e a piena altezza si sgranerebbero. */
.photoband { position: relative; isolation: isolate; overflow: hidden;
min-height: clamp(16rem, 34vw, 26rem); display: flex; align-items: center;
background: var(--night); }
.photoband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.photoband__veil { position: absolute; inset: 0; z-index: -1;
background: linear-gradient(96deg, rgba(43,42,42,.88) 0%, rgba(43,42,42,.62) 45%, rgba(43,42,42,.22) 100%); }
.photoband__plate { max-width: 44ch; padding-block: var(--space-7); }
.photoband__plate p { color: var(--on-dark); font-family: var(--font-display); font-size: var(--text-md); }
.photoband__plate .eyebrow { color: var(--gold-lt); }
@media (max-width: 820px) {
.photoband__veil { background: linear-gradient(178deg, rgba(43,42,42,.55) 0%, rgba(43,42,42,.82) 100%); }
}
/* ============================ Lightbox (reveal.js) ============================ */
/* ⚠ Lo stato a riposo dev'essere NASCOSTO: un overlay dichiarato `display:flex` senza stato chiuso
intercetta ogni click e il crawl resta verde su un sito inutilizzabile. */
.fp-lb { display: none; position: fixed; inset: 0; z-index: 90; background: rgba(43,42,42,.94); }
.fp-lb.is-open { display: flex; align-items: center; justify-content: center; }
.fp-lb__img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; object-fit: contain; }
.fp-lb__x, .fp-lb__nav {
position: absolute; background: none; border: 1px solid var(--gold); color: var(--on-dark);
width: 2.75rem; height: 2.75rem; line-height: 1; font-size: 1.3rem;
display: inline-flex; align-items: center; justify-content: center;
}
.fp-lb__x { top: var(--space-5); right: var(--space-5); }
.fp-lb__prev { left: var(--space-5); top: 50%; transform: translateY(-50%); }
.fp-lb__next { right: var(--space-5); top: 50%; transform: translateY(-50%); }
.fp-lb__nav svg { width: 1.4rem; height: 1.4rem; }
.fp-lb__x:hover, .fp-lb__nav:hover { background: var(--gold); color: var(--brand-dark); }
/* Bottoni del blocco WP (template 404 e ogni wp:button dei pattern): theme.json dà loro solo il colore di
base dai ruoli, la forma e le varianti stanno qui. */
.wp-block-button__link { border-radius: var(--radius); padding: var(--space-4) var(--space-6);
font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid transparent; }
.wp-block-button.is-accent .wp-block-button__link { background: var(--gold); color: var(--brand-dark); }
.wp-block-button.is-accent .wp-block-button__link:hover { background: var(--gold-lt); }
.wp-block-button.is-ghost .wp-block-button__link { background: transparent; color: var(--brand-dark); border-color: currentColor; }
.notfound .wp-block-buttons { justify-content: center; margin-top: var(--space-6); }
/* ============================ Piè di pagina ============================ */
.site-footer { background: var(--night); color: var(--on-dark); padding-block: var(--space-8) var(--space-6); }
.site-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); }
.site-footer h4 {
font-family: var(--font-body); font-size: 0.78rem; font-weight: 700;
letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold);
margin-bottom: var(--space-5);
}
.site-footer ul li + li { margin-top: var(--space-3); }
.site-footer a:hover { color: var(--gold); }
.site-footer p, .site-footer li, .site-footer dd { color: var(--on-dark-muted); font-size: 0.95rem; }
.site-footer .fmark { width: clamp(150px, 16vw, 190px); height: auto; margin-bottom: var(--space-5); }
.site-footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.site-footer__social a {
display: inline-flex; align-items: center; justify-content: center;
width: 2.5rem; height: 2.5rem; border: 1px solid rgba(201,171,129,.5); color: var(--gold);
}
.site-footer__social a:hover { background: var(--gold); color: var(--brand-dark); }
.site-footer__legal {
margin-top: var(--space-8); padding-top: var(--space-5);
border-top: 1px solid rgba(243,239,232,.16);
display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); align-items: center;
font-size: .88rem; color: var(--on-dark-muted);
}
.site-footer__legal .powered { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2); }
.site-footer__legal .powered img { width: 20px; height: 20px; }
@media (max-width: 900px) { .site-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
.site-footer__cols { grid-template-columns: 1fr; }
.site-footer__legal .powered { margin-left: 0; }
}
/* ============================ Barra CTA mobile ============================ */
.cta-bar { display: none; }
@media (max-width: 900px) {
.cta-bar {
display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
background: var(--brand-dark); border-top: 1px solid var(--gold);
}
.cta-bar a {
flex: 1 1 0; text-align: center; padding: var(--space-4) var(--space-2);
color: var(--on-dark); font-size: 0.82rem; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
}
.cta-bar a + a { border-left: 1px solid rgba(201,171,129,.4); }
body { padding-bottom: 3.6rem; }
}
/* ============================ Orari ============================ */
/* Componente CONDIVISO fra la banda contatti (scura) e il piè (scuro): il colore si EREDITA dal contesto,
non si fissa qui — un componente che dichiara il proprio colore diventa invisibile appena cambia banda. */
.hours li { display: flex; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-2); }
.hours li + li { border-top: 1px solid rgba(243,239,232,.14); }
.hours li span:first-child { font-weight: 700; }
/* Icone social: SVG in data-URI dentro il CSS del verticale, non file esterni — così non c'è nessuna
richiesta di rete e nessun `url()` da risolvere nel post_content. */
.ico { display: block; width: 1.1rem; height: 1.1rem; background: currentColor; }
.ico--facebook { -webkit-mask: var(--ico-fb) center/contain no-repeat; mask: var(--ico-fb) center/contain no-repeat; }
.ico--instagram { -webkit-mask: var(--ico-ig) center/contain no-repeat; mask: var(--ico-ig) center/contain no-repeat; }
:root {
--ico-fb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 9h3V6h-3a4 4 0 0 0-4 4v2H8v3h2v7h3v-7h3l1-3h-4v-2a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
--ico-ig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.07 1.2.05 1.8.25 2.2.42.6.22 1 .48 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c0 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2 0-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c0-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zm0 3.1a6.7 6.7 0 1 0 0 13.4 6.7 6.7 0 0 0 0-13.4zm0 11a4.3 4.3 0 1 1 0-8.6 4.3 4.3 0 0 1 0 8.6zm6.9-11.3a1.6 1.6 0 1 1-3.1 0 1.6 1.6 0 0 1 3.1 0z'/%3E%3C/svg%3E");
}
/* ============================ Prosa (privacy, testi lunghi) ============================ */
.prose { max-width: var(--container-narrow); }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { margin-top: var(--space-8); }
.prose h3 { margin-top: var(--space-6); }
.prose ul { list-style: disc; padding-left: 1.4rem; }
.prose li + li { margin-top: var(--space-2); }
.prose a { color: var(--gold-ink); text-decoration: underline; }
/* ============================ 404 ============================ */
.notfound { padding-block: var(--space-10); text-align: center; }
.notfound p { margin-inline: auto; color: var(--ink-muted); margin-block: var(--space-5) var(--space-7); }
/* ============================ Dinamismo sobrio ============================ */
/* ⚠ Le animazioni continue stanno sulle DECORAZIONI del testo (filetti, occhielli, bolli), MAI sui glifi:
un testo che pulsa attraversa la soglia di contrasto mentre si muove, e axe lo coglie solo per caso.
Tutto si spegne con `prefers-reduced-motion`, in fondo al file. */
/* I bottoni social respirano: il filetto d'oro si accende e si spegne, sfalsato fra i due. */
@keyframes fp-respiro {
0%, 100% { border-color: rgba(201,171,129,.45); box-shadow: 0 0 0 0 rgba(201,171,129,0); }
50% { border-color: rgba(201,171,129,1); box-shadow: 0 0 0 4px rgba(201,171,129,.10); }
}
.site-footer__social a { animation: fp-respiro 3.6s var(--ease) infinite; }
.site-footer__social a:nth-child(2) { animation-delay: 1.2s; }
.site-footer__social a:hover { animation-play-state: paused; }
/* I filetti d'oro delle intestazioni: una luce che li percorre, lenta. */
@keyframes fp-scia { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.section-head::before, .section-head::after,
.subsection__head::before, .subsection__head::after {
background: linear-gradient(90deg, var(--gold) 0%, var(--gold-lt) 35%, #FFF6E6 50%, var(--gold-lt) 65%, var(--gold) 100%);
background-size: 200% 100%;
animation: fp-scia 7s linear infinite;
}
/* L'occhiello porta un bollo che pulsa: il segnale di «vivo» più piccolo che esista. */
.eyebrow { position: relative; }
.section-intro .eyebrow::after, .page-head .eyebrow::after, .hero .eyebrow::after {
content: ""; display: inline-block; width: .34em; height: .34em; margin-left: .7em;
border-radius: 50%; background: currentColor; vertical-align: middle;
animation: fp-bollo 2.4s var(--ease) infinite;
}
@keyframes fp-bollo { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
/* Il filetto del «Scopri» scorre da solo, e all'hover si allunga (l'hover c'era già). */
.more::before {
background: linear-gradient(90deg, var(--gold) 0%, #FFF6E6 50%, var(--gold) 100%);
background-size: 200% 100%;
animation: fp-scia 5s linear infinite;
}
/* La linea che attraversa i quattro passi respira anche lei. */
.step::before { animation: fp-linea 6s var(--ease) infinite; }
@keyframes fp-linea { 0%, 100% { opacity: .28; } 50% { opacity: .75; } }
/* Il pulsante primario prende un lampo che lo attraversa una volta ogni tanto: invito, non insegna. */
.btn--accent { position: relative; overflow: hidden; }
.btn--accent::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
transform: translateX(-120%);
animation: fp-lampo 6.5s var(--ease) infinite;
pointer-events: none;
}
@keyframes fp-lampo { 0%, 78% { transform: translateX(-120%); } 92%, 100% { transform: translateX(120%); } }
/* La barra mobile: il filetto d'oro in cima scorre, così si nota senza urlare. */
.cta-bar { position: relative; }
.cta-bar::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, var(--gold) 0%, #FFF6E6 50%, var(--gold) 100%);
background-size: 200% 100%; animation: fp-scia 4.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.site-footer__social a, .section-head::before, .section-head::after,
.subsection__head::before, .subsection__head::after,
.section-intro .eyebrow::after, .page-head .eyebrow::after, .hero .eyebrow::after,
.more::before, .step::before, .btn--accent::after, .cta-bar::before { animation: none; }
.btn--accent::after { display: none; }
}
/* Griglia dei marchi dei fornitori (canale @design). Additiva: un sito che non la emette non la vede.
⚠ I loghi sono SCONTORNATI su fondo chiaro: `contain` e non `cover`, che ne taglierebbe le lettere.
⚠ Altezza uniforme e larghezza libera: imporre anche la larghezza deformerebbe i marchi orizzontali
(un logo con la scritta accanto al segno è largo il triplo di uno quadrato). */
.marchi__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-5);
align-items: center;
margin-top: var(--space-6);
}
.marchi__grid .marchio {
display: flex;
align-items: center;
justify-content: center;
min-height: 72px;
padding: var(--space-3);
background: var(--paper);
border-radius: var(--radius);
}
.marchi__grid .marchio img {
max-width: 100%;
max-height: 56px;
width: auto;
height: auto;
object-fit: contain;
}
@media (min-width: 640px) { .marchi__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .marchi__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-6); } }
/* ======================= Sezioni editoriali di PAGINA (pagine di progetto) =======================
Additive: un sito che non le emette non le vede. Nascono da tre difetti misurati su una pagina di
catalogo lunga: la fotografia in colonna resta PICCOLA (zero immagini grandi sulla pagina), il testo
in mezza colonna lascia un vuoto a destra quando la foto e' piu' corta della prosa, e la cornice
sfalsata del verticale lampeggia durante il reveal perche' sta DIETRO la foto (z-index negativo). */
.pg-sez { padding-block: clamp(4rem, 8vw, 7rem); }
.pg-sez + .pg-sez { border-top: 1px solid var(--line); }
/* L'occhiello porta il numero della famiglia: da' ritmo alla lettura e dice a che punto si e'. */
.pg-sez__head { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2.25rem); align-items: start; }
.pg-sez__num { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; color: var(--gold-ink); }
.pg-sez__titolo { margin: 0; line-height: var(--lh-tight); }
.pg-sez__occhiello { margin: 0 0 var(--space-2); }
/* ⭐ La fotografia e' una BANDA larga, non una colonna: e' l'unica forma in cui una foto di showroom
regge il confronto con la prosa che la accompagna. */
.pg-sez__media { position: relative; margin-top: clamp(1.75rem, 4vw, 2.75rem); overflow: hidden; border-radius: var(--radius); }
.pg-sez__media img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; transition: transform 1.2s var(--ease); }
.pg-sez:hover .pg-sez__media img { transform: scale(1.03); }
/* Velo dal basso: stacca la banda dal fondo chiaro senza toccare la fotografia. */
.pg-sez__velo { position: absolute; inset: auto 0 0 0; height: 42%; pointer-events: none;
background: linear-gradient(to top, rgba(0,0,0,.34), rgba(0,0,0,0)); }
/* ⭐ Il testo prende TUTTA la larghezza in due colonne invece di stare in mezza pagina: in colonna unica
lascerebbe a destra un vuoto alto quanto la prosa. La misura di lettura resta sulla COLONNA. */
.pg-sez__testo { margin-top: clamp(1.5rem, 3.5vw, 2.5rem); columns: 2; column-gap: clamp(2rem, 5vw, 4rem); }
.pg-sez__testo > * { break-inside: avoid; }
.pg-sez__testo > * + * { margin-top: var(--space-4); }
.pg-sez__testo p { color: var(--ink-muted); max-width: 62ch; }
.pg-sez__testo .lead { color: var(--ink); font-size: var(--text-lg); line-height: var(--lh-snug); }
.pg-sez__testo ul { margin: 0; padding-left: 1.1em; color: var(--ink-muted); }
.pg-sez__testo li + li { margin-top: var(--space-1); }
@media (max-width: 860px) {
.pg-sez__testo { columns: 1; }
.pg-sez__media img { aspect-ratio: 4 / 3; }
.pg-sez__head { grid-template-columns: 1fr; gap: var(--space-2); }
}
/* Masthead fotografico delle pagine di progetto: la testata di pagina era una fascia piatta, e su una
pagina di catalogo lunga non annunciava niente. Additiva. */
.pg-head { position: relative; overflow: hidden; background: var(--brand-dark); }
.pg-head__media { position: absolute; inset: 0; }
.pg-head__media img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
/* ⭐ Il velo e' un ELEMENTO VERO, non uno pseudo: garantisce il contrasto qualunque sia il fotogramma,
ed e' una superficie della pagina anche per chi la guarda — uno scrim su ::after non lo e'. */
.pg-head__velo { position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(20,18,17,.82) 0%, rgba(20,18,17,.60) 45%, rgba(20,18,17,.90) 100%); }
.pg-head__inner { position: relative; z-index: 1; padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.pg-head h1 { color: var(--on-dark); margin: 0; max-width: 20ch; }
.pg-head .eyebrow { color: var(--gold-lt); }
.pg-head__intro { margin-top: clamp(1.25rem, 3vw, 2rem); columns: 2; column-gap: clamp(2rem, 5vw, 4rem); }
.pg-head__intro > * { break-inside: avoid; }
.pg-head__intro > * + * { margin-top: var(--space-4); }
.pg-head__intro p { color: var(--on-dark-muted); max-width: 60ch; }
.pg-head__intro .lead { color: var(--on-dark); font-size: var(--text-lg); line-height: var(--lh-snug); }
@media (max-width: 860px) { .pg-head__intro { columns: 1; } }
/* Alternanza delle bande: sei sezioni con lo stesso fondo diventano un nastro unico, e chi scorre non
percepisce di aver cambiato famiglia. */
.pg-sez--alt { background: var(--surface); }
.pg-sez--alt + .pg-sez, .pg-sez + .pg-sez--alt { border-top: 0; }
/* Fascia d'invito fra le famiglie: una pagina di catalogo lunga ha bisogno di un punto in cui si passa
dal leggere al chiedere. Campitura PROPRIA — non la stessa delle bande crema, sennò e' un altro
paragrafo con altre parole. */
.pg-invito { position: relative; overflow: hidden; background: var(--brand-dark); color: var(--on-dark); }
.pg-invito__grad { position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(115deg, rgba(154,122,60,.30) 0%, rgba(20,18,17,0) 48%, rgba(154,122,60,.18) 100%); }
.pg-invito__inner { position: relative; z-index: 1; padding-block: clamp(3rem, 6vw, 5rem);
display: grid; gap: var(--space-5); grid-template-columns: 1fr auto; align-items: center; }
.pg-invito h2 { margin: 0; color: var(--on-dark); max-width: 26ch; }
.pg-invito p { margin: var(--space-2) 0 0; color: var(--on-dark-muted); max-width: 60ch; }
.pg-invito__azioni { display: flex; gap: var(--space-3); flex-wrap: wrap; }
@media (max-width: 760px) { .pg-invito__inner { grid-template-columns: 1fr; } }
/* Filetto d'oro sopra il numero della famiglia: dettaglio che lega le sei sezioni fra loro. */
.pg-sez__num::before { content: ""; display: block; width: 2.4rem; height: 2px; background: var(--gold); margin-bottom: var(--space-3); }
/* ===================== Pagina CONTATTI (progetto) =====================
Additiva. La pagina era il solo masthead: nessun recapito raggiungibile senza tornare alla home. */
.ct-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.25rem); }
.ct-card { background: var(--paper); border-top: 2px solid var(--gold); padding: var(--space-6) var(--space-5); }
.ct-card h3 { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
.ct-card p, .ct-card a { color: var(--ink-muted); margin: 0; }
.ct-card p + p { margin-top: var(--space-2); }
.ct-card a { text-decoration: none; border-bottom: 1px solid var(--line); }
.ct-card a:hover { color: var(--ink); border-bottom-color: var(--gold); }
.ct-orari { display: grid; gap: var(--space-2); }
.ct-orari__riga { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.ct-orari__riga:last-child { border-bottom: 0; }
.ct-orari__g { color: var(--ink); font-weight: 600; }
/* Striscia fotografica di chiusura: si esce dalla pagina avendo visto lo showroom, non un modulo. */
.ct-striscia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.ct-striscia img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 1s var(--ease), filter 1s var(--ease); }
.ct-striscia a:hover img { transform: scale(1.05); filter: saturate(1.08); }
@media (max-width: 860px) {
.ct-griglia { grid-template-columns: 1fr; }
.ct-striscia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Tasto WhatsApp flottante, come sul sito attuale del cliente. `position:fixed` sotto l'header sticky. */
.wa-flot { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 45;
display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
border-radius: 50%; background: #25d366; box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.wa-flot svg { width: 30px; height: 30px; } /* il riempimento e' dichiarato nel marchio */
.wa-flot:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .wa-flot { transition: transform var(--dur) var(--ease); } .wa-flot:hover { transform: scale(1.08); } }
/* Social nella TESTATA, in alto a destra. Additiva e project-only (dichiarata in canonical/chrome.json):
un sito che non li dichiara non li vede, quindi le testate gia' consegnate non cambiano. */
.hd-social { display: inline-flex; align-items: center; gap: var(--space-2); }
.hd-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
border: 1px solid var(--line); border-radius: 50%; color: var(--ink-muted); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.hd-social a:hover { color: var(--brand-dark); border-color: var(--gold); background: var(--gold-soft, transparent); }
.hd-social a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* ⚠ Un SVG dentro ![]()
NON eredita currentColor: gli stemmi sono INLINE, sennò restano del colore con
cui sono stati disegnati e su una testata chiara possono sparire. */
.hd-social svg { width: 17px; height: 17px; fill: currentColor; }
@media (max-width: 900px) { .hd-social { display: none; } }
/* Griglia marchi: superficie propria e sollevamento all'hover — era una teoria di riquadri piatti. */
.marchi__grid .marchio { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); border: 1px solid var(--line); }
.marchi__grid .marchio:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.08); border-color: var(--gold); }
/* Chiusura editoriale delle sezioni: filetto in gradiente invece di un bordo secco. */
.pg-sez + .pg-sez { border-top: 0; }
.pg-sez::before { content: ""; display: block; height: 1px; margin-bottom: clamp(2rem, 5vw, 4rem);
background: linear-gradient(90deg, rgba(154,122,60,0) 0%, rgba(154,122,60,.55) 22%, rgba(154,122,60,.55) 78%, rgba(154,122,60,0) 100%); }
.pg-sez:first-of-type::before { display: none; }
/* Campiture di pagina con profondita': le bande erano tinte piatte, e sei sezioni di fila diventavano
un nastro unico. Il gradiente e' largo quanto la banda — e' li' che si vede. */
.marchi { background-image: linear-gradient(160deg, rgba(154,122,60,.12) 0%, rgba(154,122,60,0) 50%, rgba(0,0,0,.05) 100%); }
.pg-sez--alt { background-image: linear-gradient(200deg, rgba(154,122,60,.09) 0%, rgba(154,122,60,0) 55%); }
.ct-griglia { position: relative; }
/* ⚠⚠ CONTESTO DI IMPILAMENTO delle bande. Con la testata CINEMATOGRAFICA la fotografia e' `sticky` e
ESCE dal riquadro della testata: essendo posizionata resta davanti alle bande successive, che sono
statiche — misurato con `elementFromPoint`, la banda «azienda» aveva fondo bianco opaco e la foto le
stava comunque davanti. Dare a ogni banda un contesto proprio rimette il contenuto sopra la foto.
⚠ Per una testata FERMA la regola non sposta nulla: le bande sono gia' opache e non si scavalcano.
Verificato mettendo i token della testata ai default e confrontando gli screenshot: identici. */
.wp-block-post-content > * { position: relative; z-index: 1; }
.wp-block-post-content > .hero { z-index: 0; }
/* ============ Direzioni di ingresso (additive) ============
`.reveal` entra dal basso. Queste varianti danno alla pagina piu' di un verso, che e' cio' che separa
una pagina che "appare" da una che si ANIMA. ⚠ Agiscono solo su chi porta la classe: un sito che non
le usa non ha nulla di diverso. ⚠ Il movimento e' SOLO transform: un elemento che sfuma attraversa
valori di contrasto piu' bassi di quelli dichiarati, e impedisce il download delle immagini dentro. */
/* ⚠⚠ Una rivelazione ORIZZONTALE sborda finche' non e' arrivata: la pagina guadagna una barra di
scorrimento laterale, ed e' un difetto BLOCCANTE. Si chiude sulla banda che le contiene con
`overflow-x: clip` — ⚠ MAI `hidden`, che creerebbe un contenitore di scorrimento e spegnerebbe la
testata `sticky` e la parallasse. */
.pg-sez, .section, .subsection, .contatti, .photogallery { overflow-x: clip; }
/* ⚠⚠ DECISIONE OWNER 2026-09-14: niente elementi che si SPOSTANO, men che meno in verticale. Il solo
movimento ammesso e' un leggero INGRANDIMENTO. Le quattro varianti restano, ma si distinguono per
QUANTO ingrandiscono, non per la direzione da cui arrivano: nessuna trasla di un pixel.
⚠ Solo `transform`: un elemento che sfuma attraversa contrasti piu' bassi di quelli dichiarati e
impedisce il download delle immagini che contiene. */
.js .reveal--left { transform: scale(0.972); }
.js .reveal--right { transform: scale(0.978); }
.js .reveal--scale { transform: scale(0.965); }
.js .reveal--rise { transform: scale(0.985); }
.js .reveal--left.is-visible,
.js .reveal--right.is-visible,
.js .reveal--scale.is-visible,
.js .reveal--rise.is-visible { transform: none; }
@media (prefers-reduced-motion: reduce) {
.js .reveal--left, .js .reveal--right, .js .reveal--scale, .js .reveal--rise { transform: none; }
}
/* ============ Il filetto che si disegna ============
Un segno breve sotto l'occhiello che si TRACCIA quando la sezione entra in vista. E' il dettaglio che
distingue una pagina che «appare» da una che si anima, e costa un solo `transform`.
⚠ Nasce VISIBILE e si ritrae solo dentro una rivelazione non ancora scattata: senza JS, o con le
animazioni ridotte, resta un filetto fermo invece di sparire (fail-visible).
⚠ Larghezza da token, default 0: per gli altri siti del verticale non esiste.
⚠ SOLO transform: un elemento che sfuma attraversa contrasti piu' bassi di quelli dichiarati. */
.pg-sez__occhiello, .section-intro .eyebrow, .pg-head__inner .eyebrow, .subsection__head .eyebrow { position: relative; }
.pg-sez__occhiello::after,
.section-intro .eyebrow::after,
.pg-head__inner .eyebrow::after,
.subsection__head .eyebrow::after {
content: ""; position: absolute; left: 0; bottom: -0.5rem;
width: var(--eyebrow-rule-w); height: 2px; background: var(--gold);
transform: scaleX(1); transform-origin: left center;
transition: transform .85s var(--ease) .12s;
}
.js .reveal:not(.is-visible) .pg-sez__occhiello::after,
.js .reveal:not(.is-visible) .eyebrow::after,
.js .reveal:not(.is-visible).pg-sez__occhiello::after { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
.js .reveal:not(.is-visible) .pg-sez__occhiello::after,
.js .reveal:not(.is-visible) .eyebrow::after { transform: scaleX(1); }
}
/* ============ Sovrapposizioni editoriali ============
⭐ Due gesti, non decorativi: (1) la fotografia delle sezioni PARI esce dal contenitore e va al bordo
dello schermo — la pagina smette di essere una colonna sola e prende respiro; (2) la prima sezione
CAVALCA la testata di pagina, cosi' le due bande si agganciano invece di susseguirsi.
⚠ Entrambi da token con default 0: per gli altri siti del verticale non cambia un pixel.
⚠ Lo sbordo e' contenuto da `overflow-x: clip` sulla banda: senza, la pagina prende una barra
orizzontale, che e' un difetto BLOCCANTE. */
.pg-sez:nth-of-type(even) .pg-sez__media {
margin-inline: calc(-1 * var(--sez-media-bleed));
border-radius: 0;
}
.pg-sez:first-of-type {
margin-top: calc(-1 * var(--pg-first-pull));
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
background: var(--paper);
}
/* ⭐ Introduzione di sezione a DUE COLONNE (opt-in dal token). Titolo a sinistra, sommario a destra:
la banda si riempie invece di lasciare tre quarti di schermo vuoti attorno a una colonna centrata.
⚠ Con `--intro-display: block` (default) le regole di griglia qui sotto sono inerti: `grid-column`
non significa nulla fuori da una griglia. */
@media (min-width: 900px) {
.section-intro {
display: var(--intro-display);
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(2rem, 5vw, 5.5rem);
align-items: end;
}
.section-intro > .eyebrow { grid-column: 1; grid-row: 1; align-self: end; }
.section-intro > .section-head { grid-column: 1; grid-row: 2; }
.section-intro > p { grid-column: 2; grid-row: 2; margin-top: 0; }
}
/* ============ Sezione di catalogo a DUE COLONNE ============
⭐⭐ Perche' esiste: le fotografie recuperate sono al massimo 1199px di larghezza VERA. In una banda
larga 1320-1432px CSS il browser le INGRANDISCE (misurato: 0,84-0,91 pixel veri per pixel CSS) e si
vedono sgranate — il rilievo dell'owner. In colonna la stessa fotografia ne copre ~630 e arriva a
1,9x: nitida anche su schermo a doppia densita'. E la foto sta ACCANTO al suo testo invece che sopra.
⚠ La classe vive SOLO nelle pagine di questo progetto: nessun altro sito del verticale la porta. */
.pg-sez__grid { display: block; }
@media (min-width: 900px) {
.pg-sez__grid {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2rem, 4vw, 4rem); align-items: center;
margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
/* Lati alternati: la pagina prende un ritmo invece di ripetere la stessa riga tredici volte. */
.pg-sez:nth-of-type(even) .pg-sez__grid > .pg-sez__media { order: 2; }
.pg-sez__grid > .pg-sez__media { margin-top: 0; }
/* In mezza pagina il testo torna a UNA colonna: due sarebbero strette da leggere. */
.pg-sez__grid > .pg-sez__testo { columns: auto; margin-top: 0; }
.pg-sez__grid > .pg-sez__media img { aspect-ratio: 4 / 3; }
}