/* Contatti — «biglietto da visita» (03/10/2026). Solo questa pagina, dopo style.css. Stessi testi, immagini e classi della home: le forme nuove stanno su id, data-* e #contenuto. 1 hero diviso: testo su pietra chiara a sinistra, pannello scuro con grana a destra (arco + due pulsanti) 2 «cosa preparare»: tre righe separate da filetti (icona · titolo · elenco), da telefono in colonna 3 #dati: tabella etichetta | valore con filetti sottili · 4 #pec: riquadro piccolo e sobrio Ogni stato nascosto sta sotto .js e (prefers-reduced-motion: no-preference). */ /* ═══════════════ 1 · HERO «BIGLIETTO» ═══════════════ */ #contenuto .hero__scheda{background:var(--pietra-chiara);color:var(--inchiostro);box-shadow:inset 0 0 0 1px rgba(41,47,52,.06)} #contenuto .hero__scheda::before,#contenuto .hero__scheda::after,#contenuto .hero__testo::after{display:none} /* trama grafite ferma, che sfuma dall'angolo in alto a sinistra */ #contenuto .hero__testo::before{inset:0;translate:none;background:var(--trama-g) 0 0/120px; -webkit-mask-image:radial-gradient(120% 90% at 0 0,rgba(0,0,0,.9),transparent 70%); mask-image:radial-gradient(120% 90% at 0 0,rgba(0,0,0,.9),transparent 70%)} #contenuto .hero__testo{background:none;padding:28px 20px 30px} #contenuto .hero .occhiello{color:#686D73} #contenuto .hero__titolo{margin-top:14px;color:var(--inchiostro)} #contenuto .hero__sotto{font-size:17.5px;line-height:1.45;color:var(--testo)} #contenuto .hero__testo :focus-visible,#contenuto #pec :focus-visible{outline-color:var(--grafite);box-shadow:0 0 0 5px rgba(220,215,207,.6)} /* il pannello scuro: grana, trama, luce pietra; l'arco della foto e i due pulsanti uno sopra l'altro */ #contenuto .hero__azioni{position:relative;isolation:isolate;overflow:hidden;overflow:clip;display:flex;flex-direction:column;gap:10px;margin:0;padding:20px 20px 28px; background:var(--grana) 0 0/160px,var(--trama-p) 0 0/120px,linear-gradient(165deg,var(--grafite) 0%,var(--notte) 100%);color:var(--bianco)} #contenuto .hero__azioni::before{content:"";position:absolute;inset:-30%;z-index:-1;pointer-events:none;background:radial-gradient(45% 40% at 70% 80%,rgba(220,215,207,.08),transparent 70%)} #contenuto .hero__foto{position:relative;display:block;aspect-ratio:16/8;margin-bottom:8px;overflow:hidden;overflow:clip;border-radius:50% 50% 12px 12px/34% 34% 12px 12px} #contenuto .hero__foto img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover} #contenuto .hero__foto::after{content:"";position:absolute;inset:10px;z-index:1;border:1px solid rgba(255,255,255,.55);border-radius:inherit;pointer-events:none} #contenuto .hero__azioni .bottone{width:100%;height:auto;min-height:54px;padding:12px 18px;font-size:17px} /* il segno «tre» del kit: da telefono in fondo al pannello, sotto il secondo pulsante */ #contenuto .hero__scheda>svg[data-segno="tre"]{width:100px;right:-12px;bottom:-6px} /* ═══════════════ 2 · «COSA PREPARARE»: RIGHE CON FILETTI ═══════════════ */ #contenuto [data-righe]{padding:44px 16px 0} #contenuto [data-righe] .servizi__griglia{display:block;margin-top:0;box-shadow:inset 0 -1px 0 var(--filetto)} #contenuto [data-righe] .scheda{display:block;overflow:visible;background:none;border-radius:0;box-shadow:none} #contenuto [data-righe] .scheda::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--filetto);transform-origin:left center} #contenuto [data-righe] .scheda::after{display:none} #contenuto [data-righe] .scheda:hover{transform:none;box-shadow:none} #contenuto [data-righe] .scheda__testo{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:center;padding:24px 2px 26px} #contenuto [data-righe] .scheda__testo>svg:not([data-segno]){grid-column:1;grid-row:1;width:40px;height:40px;margin:0;background-color:var(--piastrella);box-shadow:none} #contenuto [data-righe] .scheda__titolo{grid-column:2;grid-row:1;margin:0;font-size:22px;line-height:1.18} #contenuto [data-righe] .scheda__testo>:not(svg):not(.scheda__titolo){grid-column:1 / -1} #contenuto [data-righe] .scheda__titolo+*{margin-top:14px} /* ═══════════════ 3 · DATI DELLA SOCIETÀ: TABELLA ═══════════════ */ #contenuto #dati{display:block;margin:52px 16px 0;padding:0;background:none;border-radius:0;overflow:visible} #contenuto #dati::before{display:none} #contenuto #dati .domande__testa{padding:0} #contenuto #dati .domande__titolo{margin:0;font-size:30px} #contenuto #dati .domande__lista{display:block;margin-top:12px} #contenuto #dati .domande__lista>p{font-size:16.5px;line-height:1.55} #contenuto [data-tabella]{margin-top:20px;padding:0;border-top:1.5px solid var(--grafite);font-size:16px} #contenuto [data-tabella] li{display:grid;gap:2px;margin:0;padding:12px 0 13px;border-bottom:1px solid var(--filetto)} #contenuto [data-tabella] li::before{display:none} #contenuto [data-tabella] li>span:first-child{font-size:14px;line-height:1.4;color:var(--testo-tenue)} #contenuto [data-tabella] li>span:last-child{line-height:1.45;color:var(--inchiostro);overflow-wrap:anywhere} /* ═══════════════ 4 · PEC: RIQUADRO PICCOLO ═══════════════ */ #contenuto #pec{display:block;margin:36px 16px 0;padding:24px 20px;background:var(--pietra-chiara);color:var(--inchiostro);border-radius:14px;box-shadow:inset 0 0 0 1px rgba(41,47,52,.06)} #contenuto #pec::before,#contenuto #pec::after{display:none} #contenuto #pec .contatto__sx::before{content:"";display:block;width:40px;height:2px;margin-bottom:16px;background:var(--pietra-linea)} #contenuto #pec .contatto__sx{padding:0;border:0} #contenuto #pec .contatto__sx::after{display:none} #contenuto #pec .contatto__titolo{font-size:25px;line-height:1.12;color:var(--inchiostro)} #contenuto #pec .contatto__sotto{font-size:16px;line-height:1.5;color:var(--testo)} #contenuto #pec .contatto__dx{display:block;margin-top:20px;padding:20px 0 0;border:0} #contenuto #pec .contatto__dx::before{display:block;background:var(--filetto)} #contenuto [data-coppia]{padding-bottom:8px} /* ═══════════════ DA 768 PX ═══════════════ */ @media (min-width:768px){ /* hero: 7 parti di testo, 5 di pannello; niente velo né foto sotto il testo */ #contenuto .hero__scheda{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch;min-height:0} #contenuto .hero__testo{align-self:center;max-width:none;padding:calc(56 * var(--k)) calc(56 * var(--k)) calc(64 * var(--k)) calc(38.5 * var(--c))} #contenuto .hero__titolo{margin-top:calc(18 * var(--k));max-width:calc(660 * var(--k));font-size:max(36px,calc(52 * var(--k)));line-height:1.04} #contenuto .hero__sotto{max-width:calc(560 * var(--k));margin-top:calc(18 * var(--k));font-size:max(16.5px,calc(19 * var(--k)));line-height:1.5} #contenuto .hero__sotto+.hero__sotto{margin-top:calc(8 * var(--k))} #contenuto .hero__azioni{justify-content:flex-end;gap:calc(12 * var(--k));padding:calc(28 * var(--k)) calc(28 * var(--k)) calc(30 * var(--k))} #contenuto .hero__foto{flex:1 1 auto;aspect-ratio:auto;min-height:calc(190 * var(--k));margin-bottom:calc(10 * var(--k));border-radius:50% 50% calc(12 * var(--k)) calc(12 * var(--k))/34% 34% calc(12 * var(--k)) calc(12 * var(--k))} #contenuto .hero__foto::after{inset:calc(12 * var(--k))} #contenuto .hero__azioni .bottone{min-height:0;height:max(52px,calc(62 * var(--k)));padding:0 calc(24 * var(--k));font-size:max(16px,calc(18 * var(--k)))} #contenuto .hero__azioni .bottone--bordo{padding:0 calc(24 * var(--k))} /* il segno: in basso a destra della colonna di testo, sotto le righe corte */ #contenuto .hero__scheda>svg[data-segno="tre"]{z-index:1;left:auto;right:calc(41.667% + 36 * var(--k));bottom:calc(26 * var(--k));width:calc(150 * var(--k));color:var(--notte);--intensita:.09} /* righe: icona · titolo · elenco */ #contenuto [data-righe]{padding:calc(64 * var(--k)) 0 0} #contenuto [data-righe] .scheda__testo{grid-template-columns:calc(64 * var(--k)) minmax(0,5fr) minmax(0,7fr);column-gap:calc(36 * var(--k));align-items:start;padding:calc(36 * var(--k)) calc(18 * var(--c)) calc(40 * var(--k))} #contenuto [data-righe] .scheda__testo>svg:not([data-segno]){grid-row:1 / span 6;width:calc(64 * var(--k));height:calc(64 * var(--k));padding:calc(14 * var(--k))} #contenuto [data-righe] .scheda__titolo{grid-column:2;grid-row:1 / span 6;padding-top:calc(10 * var(--k));font-size:max(23px,calc(30 * var(--k)));line-height:1.12} #contenuto [data-righe] .scheda__testo>:not(svg):not(.scheda__titolo){grid-column:3;max-width:calc(640 * var(--k))} #contenuto [data-righe] .scheda__titolo+*{margin-top:calc(10 * var(--k))} #contenuto [data-righe] .scheda__voci{margin-top:calc(12 * var(--k))} /* dati e PEC */ #contenuto [data-coppia]{max-width:calc(752 * var(--c));margin:calc(72 * var(--k)) auto 0;padding:0 calc(18 * var(--c)) calc(24 * var(--k))} #contenuto #dati,#contenuto #pec{max-width:none;margin:0} #contenuto #dati .domande__titolo{font-size:max(30px,calc(42 * var(--k)));line-height:1.08} #contenuto #dati .domande__lista{margin-top:calc(12 * var(--k))} #contenuto #dati .domande__lista>p{font-size:max(16px,calc(18 * var(--k)))} #contenuto [data-tabella]{margin-top:calc(26 * var(--k));font-size:max(15.5px,calc(17 * var(--k)))} #contenuto [data-tabella] li{grid-template-columns:minmax(0,13fr) minmax(0,27fr);gap:calc(24 * var(--k));align-items:baseline;padding:calc(16 * var(--k)) 0 calc(17 * var(--k))} #contenuto [data-tabella] li>span:first-child{font-size:max(14px,calc(15 * var(--k)))} #contenuto #pec{margin-top:calc(40 * var(--k));max-width:calc(640 * var(--k));padding:calc(30 * var(--k)) calc(32 * var(--k)) calc(32 * var(--k));border-radius:calc(14 * var(--k))} #contenuto #pec .contatto__sx::before{width:calc(48 * var(--k));margin-bottom:calc(18 * var(--k))} #contenuto #pec .contatto__titolo{font-size:max(24px,calc(30 * var(--k)))} #contenuto #pec .contatto__sotto{margin-top:calc(12 * var(--k));font-size:max(15.5px,calc(16.5 * var(--k)))} #contenuto #pec .contatto__sotto+.contatto__sotto{margin-top:calc(8 * var(--k))} #contenuto #pec .contatto__dx{margin-top:calc(22 * var(--k));padding-top:calc(22 * var(--k))} #contenuto #pec .contatto__wa{width:auto;height:max(48px,calc(50 * var(--k)));padding:0 calc(24 * var(--k));font-size:max(15px,calc(16.5 * var(--k)))} } /* da 1024 px dati e PEC stanno affiancati: la tabella a sinistra, il riquadro piccolo a destra */ @media (min-width:1024px){ #contenuto [data-coppia]{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:calc(64 * var(--k));align-items:start} #contenuto #pec{margin-top:calc(8 * var(--k));max-width:none} } /* fra 768 e 1023 px il pannello è stretto: pulsanti a capo invece che fuori dal bordo */ @media (min-width:768px) and (max-width:1023px){ #contenuto .hero__scheda{grid-template-columns:minmax(0,4fr) minmax(0,3fr)} #contenuto .hero__titolo{font-size:34px;line-height:1.06} #contenuto .hero__scheda>svg[data-segno="tre"]{right:calc(42.857% + 28 * var(--k))} #contenuto .hero__azioni .bottone{height:auto;min-height:52px;padding:12px 18px;white-space:normal;text-align:center;line-height:1.25} } /* ═══════════════ MOVIMENTO (solo con JS e senza «riduci movimento») ═══════════════ */ @media (prefers-reduced-motion:no-preference){ /* il pannello si apre, poi l'arco si riempie dal basso come le finestre dello studio */ html.js:not(.is-arrivo) #contenuto .hero__azioni{animation:cdv-velo .8s var(--e-posa) .3s backwards} html.js:not(.is-arrivo) #contenuto .hero__foto{animation:cdv-arco 1.2s var(--e-sipario) .5s backwards} html.js:not(.is-arrivo) #contenuto .hero__foto::after{animation:cdv-filetto-giu .9s var(--e-sipario) 1.3s backwards} /* righe: il filetto si disegna da sinistra quando la riga entra */ .js #contenuto [data-righe] .scheda.reveal:not(.in)::before{scale:0 1} .js #contenuto [data-righe] .scheda.reveal.in::before{animation:cdv-linea 1s var(--e-tratto) backwards;animation-delay:var(--s,0ms)} #contenuto [data-righe] .scheda.reveal{--d-scheda:16px} /* tabella: la riga di testa si allunga, poi le righe */ .js #contenuto #dati .domande__lista[data-reveal].in>[data-tabella]{animation:cdv-testa .9s var(--e-tratto) backwards} @keyframes cdv-velo{from{opacity:0;translate:0 var(--d-su)}} @keyframes cdv-arco{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes cdv-filetto-giu{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}} @keyframes cdv-linea{from{scale:0 1}} @keyframes cdv-testa{from{border-top-color:transparent}} } @media (min-width:768px) and (prefers-reduced-motion:no-preference){ html.js:not(.is-arrivo) #contenuto .hero__azioni{animation:cdv-pannello 1.1s var(--e-sipario) .15s backwards} @keyframes cdv-pannello{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}} } @media print{ #contenuto .hero__azioni,#contenuto .hero__foto,#contenuto [data-righe] .scheda::before{animation:none!important;clip-path:none!important;scale:none!important} }