/* Theme Name: QuelliDelNaso Child Theme URI: https://www.quellidelnaso.it/ Description: Child theme di Astra per QuelliDelNaso. Contiene i template e gli stili personalizzati del sito. Tutte le personalizzazioni vivono qui, cosi' gli aggiornamenti di Astra non le cancellano. Author: QuelliDelNaso Author URI: https://www.quellidelnaso.it/ Template: astra Version: 4.18.4 Text Domain: quellidelnaso-child */ /* Gli stili della homepage stanno in assets/css/qdn-home.css e vengono caricati solo sulla pagina che usa il template "QDN Home". Qui sotto puoi aggiungere CSS globale valido per tutto il sito. */ /* ===================================================================== * FOOTER QDN — stile del footer globale del nuovo sito * --------------------------------------------------------------------- * Il markup sta in functions.php, sezioni F1-F7. Sta qui e non in linea * perche' questo foglio e' l'unico caricato su TUTTE le pagine del sito * (qdn_enqueue_styles), comprese quelle costruite con i template PHP del * prototipo. Nessuna pagina Elementor ha CSS del footer nel proprio * campo "CSS personalizzato": una regola sola, in un posto solo. * * Tutte le classi hanno il prefisso "qdn-footer" per non incrociarsi * ne' con "qdnh-" dell'header ne' con "qdn-" del prototipo v3.3. * ===================================================================== */ .qdn-footer { --qi: #1C1A17; /* inchiostro: fondo */ --qo: #B0895A; /* ottone: accenti */ --qc: #F4EFE6; /* crema: testo principale */ --qn: #C9C2B4; /* crema attenuata: link */ --qs: rgba(244, 239, 230, .72); /* testo secondario */ --qr: rgba(244, 239, 230, .13); /* filetti */ --qd: "Fraunces", Georgia, "Times New Roman", serif; --qb: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; background: #1C1A17; color: #F4EFE6; font-family: var(--qb); font-size: 15px; line-height: 1.62; margin: 0; } .qdn-footer *, .qdn-footer *::before, .qdn-footer *::after { box-sizing: border-box; } .qdn-footer p { margin: 0; } .qdn-footer-wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; } /* --------------------------------------------------------------------- * Fascia recensioni (widget Feedaty) * * Resta chiara di proposito: le schede recensione del plugin sono fatte * per un fondo chiaro e su inchiostro diventerebbero illeggibili. La * fascia usa la crema della palette, non il bianco. * ------------------------------------------------------------------- */ .qdn-footer-recensioni { background: var(--qc); border-bottom: 1px solid rgba(28, 26, 23, .1); padding: 20px 0 16px; } /* QUI STA LA CORREZIONE DELL'OVERFLOW. Il carosello ha una pista larga 2400px (dieci schede da 240px). Nel footer di Astra finiva dentro una griglia i cui elementi hanno min-width:auto: la pista faceva da larghezza minima e spingeva fuori l'intera pagina (2791px contro 1849 di finestra). Qui la pista NON viene toccata — nessuna larghezza imposta, nessun file del plugin modificato — ma vive dentro un viewport che la ritaglia e che non puo' essere spinto oltre la larghezza della pagina. overflow-x sta solo su questo div: mai su html, body o #page. */ .qdn-footer-recensioni-viewport { min-width: 0; max-width: 100%; overflow-x: hidden; } .qdn-footer-recensioni .widget { margin: 0; padding: 0; min-width: 0; max-width: 100%; border: 0; background: transparent; } .qdn-footer-recensioni .widget-title { display: none; } /* Il contenitore interno del widget si dichiara largo 1080px e bianco. Riportarlo dentro la fascia serve a due cose: su telefono le schede si ridispongono invece di finire tagliate, e la crema resta continua da un bordo all'altro. Il file del plugin non viene toccato. */ .qdn-footer-recensioni [class*="_widget_merchant"] { max-width: 100%; background: transparent; } /* Il kit di Elementor colora ogni di bordeaux: dentro le recensioni si vedeva sul riepilogo "4,8/5" e sul link alle recensioni. */ .qdn-footer-recensioni a { color: #1C1A17; } .qdn-footer-recensioni a:hover, .qdn-footer-recensioni a:focus { color: #8A6A42; } /* --------------------------------------------------------------------- * Corpo: quattro colonne su desktop, due su tablet, una su telefono. * ------------------------------------------------------------------- */ .qdn-footer-corpo { padding: 58px 0 50px; } .qdn-footer-griglia { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 44px 40px; align-items: start; } .qdn-footer-col { min-width: 0; } .qdn-footer-logo { display: inline-block; font-family: var(--qd); font-size: 21px; font-weight: 400; letter-spacing: .01em; color: var(--qc); text-decoration: none; } .qdn-footer-logo em { font-style: italic; color: var(--qo); } .qdn-footer-desc { margin-top: 14px; max-width: 34em; color: var(--qs); font-size: 14.5px; } .qdn-footer-dal { margin-top: 12px; font-size: 13px; letter-spacing: .03em; color: var(--qo); } .qdn-footer-social { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 20px 0 0; padding: 0; } .qdn-footer-social li { margin: 0; padding: 0; } .qdn-footer-social a { font-size: 13px; letter-spacing: .02em; color: var(--qn); text-decoration: none; border-bottom: 1px solid rgba(176, 137, 90, .45); padding-bottom: 2px; transition: color .25s, border-color .25s; } .qdn-footer-social a:hover, .qdn-footer-social a:focus { color: var(--qc); border-color: var(--qo); } /* Titoli di colonna */ .qdn-footer-tit { margin: 0 0 16px; font-family: var(--qb); font-size: 12px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--qo); line-height: 1.4; } /* Elenchi di link */ .qdn-footer ul.qdn-footer-menu, .qdn-footer ul.qdn-footer-contatti { list-style: none; margin: 0; padding: 0; } .qdn-footer ul.qdn-footer-menu li, .qdn-footer ul.qdn-footer-contatti li { margin: 0 0 9px; padding: 0; } .qdn-footer ul.qdn-footer-menu li:last-child, .qdn-footer ul.qdn-footer-contatti li:last-child { margin-bottom: 0; } .qdn-footer ul.qdn-footer-menu a, .qdn-footer ul.qdn-footer-contatti a { display: inline-block; padding: 3px 0; font-size: 14.5px; color: var(--qn); text-decoration: none; transition: color .25s; } .qdn-footer ul.qdn-footer-menu a:hover, .qdn-footer ul.qdn-footer-menu a:focus, .qdn-footer ul.qdn-footer-contatti a:hover, .qdn-footer ul.qdn-footer-contatti a:focus { color: var(--qc); } /* Righe non cliccabili dei recapiti: orari e sede. */ .qdn-footer .qdn-footer-spenta { font-size: 14px; color: var(--qs); padding: 3px 0; } /* Astra infila una freccia dentro le voci con figli. Il footer e' a un livello solo: se un domani qualcuno annidasse una voce, la freccia resterebbe muta e senza JavaScript. Meglio non stamparla. */ .qdn-footer .dropdown-menu-toggle, .qdn-footer .ast-icon { display: none !important; } /* --------------------------------------------------------------------- * Riga legale * ------------------------------------------------------------------- */ .qdn-footer-legale { border-top: 1px solid var(--qr); padding: 26px 0 32px; font-size: 12.5px; color: var(--qs); } .qdn-footer ul.qdn-footer-legale-menu { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0 0 18px; padding: 0; } .qdn-footer ul.qdn-footer-legale-menu li { margin: 0; padding: 0; } .qdn-footer ul.qdn-footer-legale-menu a { display: inline-block; padding: 3px 0; font-size: 13px; color: var(--qn); text-decoration: none; transition: color .25s; } .qdn-footer ul.qdn-footer-legale-menu a:hover, .qdn-footer ul.qdn-footer-legale-menu a:focus { color: var(--qc); } .qdn-footer-nota { max-width: 78ch; margin-bottom: 14px !important; } .qdn-footer-copy { color: var(--qn); margin-bottom: 4px !important; } .qdn-footer-dati { font-size: 12px; } /* --------------------------------------------------------------------- * Focus da tastiera: sempre visibile, in ottone. Tema e kit lo azzerano. * ------------------------------------------------------------------- */ .qdn-footer a:focus-visible, .qdn-footer button:focus-visible { outline: 2px solid var(--qo); outline-offset: 3px; } /* Il foglio di Feedaty arriva da widget.feedaty.com e non e' leggibile dal CSSOM: una regola li' dentro azzera il contorno di fuoco dei suoi link e delle sue frecce. Sul fondo chiaro della fascia il contorno va in inchiostro, non in ottone; e serve !important perche' non si puo' alzare la specificita' contro una regola che non si riesce a vedere. */ footer.qdn-footer .qdn-footer-recensioni a:focus-visible, footer.qdn-footer .qdn-footer-recensioni button:focus-visible { outline: 2px solid #1C1A17 !important; outline-offset: 2px; } /* --------------------------------------------------------------------- * Adattamento agli schermi * ------------------------------------------------------------------- */ @media (max-width: 1024px) { .qdn-footer-griglia { grid-template-columns: 1fr 1fr; gap: 40px 36px; } .qdn-footer-marchio { grid-column: 1 / -1; } .qdn-footer-corpo { padding: 48px 0 42px; } } @media (max-width: 600px) { .qdn-footer-wrap { padding: 0 20px; } .qdn-footer-griglia { grid-template-columns: 1fr; gap: 34px; } .qdn-footer-corpo { padding: 42px 0 36px; } .qdn-footer-recensioni { padding: 16px 0 12px; } /* Su telefono il carosello del plugin chiede circa 372px per far stare una scheda intera piu' le due frecce. La fascia recensioni va quindi da bordo a bordo, e quel poco che avanza si scorre col dito invece di restare tagliato. Il plugin non viene toccato. */ .qdn-footer-recensioni .qdn-footer-wrap { padding: 0; } .qdn-footer-recensioni-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; } .qdn-footer ul.qdn-footer-menu a, .qdn-footer ul.qdn-footer-contatti a { padding: 6px 0; } .qdn-footer ul.qdn-footer-legale-menu { gap: 4px 18px; } /* Spazio in fondo: cosi' il tondo WhatsApp e quello dei cookie non coprono l'ultima riga. Stessa ragione del prototipo v3.3. */ .qdn-footer-legale { padding-bottom: 96px; } } /* --------------------------------------------------------------------- * Specificita': il kit di Elementor dichiara ".elementor-kit-35 a" e * Astra dichiara i propri colori sui link. Le righe qui sotto ripetono * gli stessi valori con un selettore piu' forte (elemento + classe). * Non e' ridondanza: e' la correzione di un conflitto reale. * ------------------------------------------------------------------- */ footer.qdn-footer a { color: var(--qn); } footer.qdn-footer a.qdn-footer-logo, footer.qdn-footer a.qdn-footer-logo:hover { color: var(--qc); } footer.qdn-footer a.qdn-footer-logo em { color: var(--qo); } footer.qdn-footer ul.qdn-footer-menu a:hover, footer.qdn-footer ul.qdn-footer-contatti a:hover, footer.qdn-footer ul.qdn-footer-legale-menu a:hover { color: var(--qc); } footer.qdn-footer .qdn-footer-recensioni a { color: #1C1A17; } footer.qdn-footer .qdn-footer-recensioni a:hover { color: #8A6A42; } /* I template PHP del prototipo dichiarano ".qdn h2" con il carattere display a 2,7rem: dentro quelle nove pagine il titolo di colonna diventava enorme. Qui le stesse proprieta' con un selettore piu' forte, cosi' il footer e' identico ovunque. */ footer.qdn-footer h2.qdn-footer-tit { margin: 0 0 16px; font-family: var(--qb); font-size: 12px; font-weight: 500; letter-spacing: .13em; line-height: 1.4; text-transform: uppercase; color: var(--qo); } @media (prefers-reduced-motion: reduce) { .qdn-footer * { transition: none !important; } } /* ===== QDN COMPONENTI PAGINE v2 - INIZIO ===== */ /* Tipografia: stesso sistema di qdn-motion-home.css. * Fraunces e Instrument Sans li carica gia' qdn_header_stile(): * NESSUN carattere nuovo, NESSUNA richiesta esterna aggiunta. * Pesi disponibili su una pagina Elementor: Fraunces 300 e 400 * (+corsivo 400), Instrument Sans 400 e 500. Il 600 NON esiste. * * SPECIFICITA' — la trappola. Elementor stampa in post-.css la * regola ".elementor-widget-heading .elementor-heading-title" (0,2,0) * con la tipografia globale del kit (Quicksand 600). Quel foglio e' * caricato DOPO style.css: a parita' di specificita' vince lui. Le * regole dei titoli devono quindi stare a (0,3,0). E' la ragione per * cui qdn-motion-home.css scrive "body.qdn-mo--piena .qdn-motion-h1". * * ORDINE — prima i colori predefiniti di sezione, poi i componenti: * a parita' di specificita' deve vincere il componente. * ------------------------------------------------------------------ */ .qdn-pag{ --pgi:#1C1A17; --pgi2:#23211D; --pgo:#B0895A; --pgc:#F4EFE6; --pgc2:#EDE5D8; --pgp:#6B6760; --pgs:rgba(244,239,230,.74); --pgsc:rgba(28,26,23,.74); --qd:"Fraunces",Georgia,"Times New Roman",serif; --qb:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif; } .qdn-pag *,.qdn-pag *::before,.qdn-pag *::after{box-sizing:border-box} /* 1. Colori predefiniti secondo la sezione */ .qdn-pag.qdn-p-sez-scuro .elementor-heading-title{color:var(--pgc)} .qdn-pag.qdn-p-sez-scuro p,.qdn-pag.qdn-p-sez-scuro li, .qdn-pag.qdn-p-sez-scuro dd{color:var(--pgs)} .qdn-pag.qdn-p-sez-chiaro .elementor-heading-title{color:var(--pgi)} .qdn-pag.qdn-p-sez-chiaro p,.qdn-pag.qdn-p-sez-chiaro li, .qdn-pag.qdn-p-sez-chiaro dd{color:var(--pgsc)} /* 2. Tipografia di base — (0,3,0) per battere il kit Elementor */ .qdn-pag .elementor-widget-heading .elementor-heading-title{ font-family:var(--qd); font-weight:400; line-height:1.12; letter-spacing:-.015em; } .qdn-pag .elementor-widget-heading h1.elementor-heading-title{ font-size:clamp(34px,5.4vw,64px); line-height:1.06; max-width:15em; } .qdn-pag p,.qdn-pag li,.qdn-pag dd,.qdn-pag dt, .qdn-pag .elementor-widget-text-editor{ font-family:var(--qb); font-weight:400; line-height:1.62; } /* 3. Componenti — dopo, cosi' vincono a parita' di specificita' */ .qdn-pag .qdn-p-occhiello .elementor-heading-title{ font-family:var(--qb); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1.5; color:var(--pgo); } .qdn-pag .qdn-p-deck .elementor-heading-title{ font-family:var(--qd); font-weight:300; font-size:clamp(19px,2.1vw,26px); line-height:1.3; letter-spacing:0; color:var(--pgo); max-width:30ch; } .qdn-pag .qdn-p-ambienti{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:16px 30px; margin:0; padding:0; } .qdn-pag .qdn-p-ambienti dt{ font-family:var(--qd); font-weight:400; font-size:19px; line-height:1.3; color:var(--pgo); margin:0; } .qdn-pag .qdn-p-ambienti dd{ margin:0; font-size:15px; } @media (max-width:600px){ .qdn-pag .qdn-p-ambienti{grid-template-columns:1fr; gap:4px 0} .qdn-pag .qdn-p-ambienti dd{margin-bottom:14px} } .qdn-pag .qdn-p-scheda{ background:var(--pgi2); border-top:2px solid var(--pgo); padding:26px 24px; height:100%; } .qdn-pag .qdn-p-requisiti{ background:var(--pgc2); border-left:3px solid var(--pgo); padding:24px 26px; } .qdn-pag .qdn-p-requisiti li+li{ border-top:1px solid rgba(28,26,23,.12); margin-top:12px; padding-top:12px; } .qdn-pag .qdn-p-dati{font-variant-numeric:tabular-nums} .qdn-pag .qdn-p-nota{color:var(--pgp); font-size:.92rem} .qdn-pag.qdn-p-sez-scuro .qdn-p-nota{color:#A9A49B} .qdn-pag .qdn-p-datoatteso{ border-bottom:1px dashed rgba(176,137,90,.55); padding-bottom:1px; } .qdn-pag .qdn-p-vetro{background:var(--pgi2); border:1px solid rgba(176,137,90,.3)} @supports (backdrop-filter:blur(14px)){ body.qdn-mo-on .qdn-pag .qdn-p-vetro{ background:rgba(35,33,29,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } } .qdn-pag a:focus-visible,.qdn-pag button:focus-visible{ outline:2px solid var(--pgo); outline-offset:3px; border-radius:2px; } .qdn-pag .qdn-p-scorri{overflow-x:auto; min-width:0} @media (prefers-reduced-motion:reduce){ .qdn-pag *{animation:none !important; transition:none !important} } /* 4. Griglia delle schede prodotto — due colonne, una sotto 880px. * La sezione e' "boxed" (ha .e-con-inner), le schede sono "full" * (i widget sono figli diretti): verificato nel DOM, non dedotto. */ .qdn-pag.qdn-p-griglia > .e-con-inner{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; align-items:stretch; } @media (max-width:880px){ .qdn-pag.qdn-p-griglia > .e-con-inner{grid-template-columns:1fr} } .qdn-pag .qdn-p-card{ background:#FFFFFF; border-top:2px solid var(--pgo); padding:30px 28px 28px; height:100%; display:flex; flex-direction:column; } .qdn-pag .qdn-p-passo{margin-bottom:18px} .qdn-pag .qdn-p-passo .elementor-heading-title{ font-family:var(--qb); font-size:11.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; line-height:1.5; color:var(--pgo); } .qdn-pag .qdn-p-modello{margin-bottom:6px} .qdn-pag .qdn-p-modello .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:25px; line-height:1.22; letter-spacing:-.01em; color:var(--pgi); } .qdn-pag .qdn-p-testo{margin-bottom:22px} .qdn-pag .qdn-p-testo p{font-size:15px; color:var(--pgsc)} .qdn-pag .qdn-p-testo p+p{margin-top:12px} .qdn-pag .qdn-p-cta{margin-top:auto} .qdn-pag .qdn-p-cta .elementor-button{ background:var(--pgi); color:var(--pgc); border-radius:0; font-family:var(--qb); font-size:14px; font-weight:500; letter-spacing:.02em; padding:15px 26px; box-shadow:none; transition:background .25s ease, color .25s ease; } .qdn-pag .qdn-p-cta .elementor-button:hover, .qdn-pag .qdn-p-cta .elementor-button:focus-visible{ background:var(--pgo); color:var(--pgi); } /* 5. Sezioni di testo lungo, elenchi e CTA secondaria. * L'ordine del markup nelle schede e' H2 (modello) poi H3 (metratura): * la gerarchia visiva segue quella semantica, senza CSS order. */ .qdn-pag .qdn-p-titolo-sez{margin-bottom:22px} .qdn-pag .qdn-p-titolo-sez .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:clamp(26px,3.2vw,38px); line-height:1.18; letter-spacing:-.012em; max-width:22ch; } .qdn-pag .qdn-p-sottotitolo{margin:34px 0 14px} .qdn-pag .qdn-p-sottotitolo .elementor-heading-title{ font-family:var(--qb); font-size:12px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; line-height:1.5; color:var(--pgo); } .qdn-pag .qdn-p-corpo{max-width:68ch} .qdn-pag .qdn-p-corpo p{font-size:16px} .qdn-pag .qdn-p-corpo p+p{margin-top:14px} .qdn-pag .qdn-p-corpo a{color:var(--pgo); text-underline-offset:3px} .qdn-pag .qdn-p-elenco{margin:18px 0 0; padding:0; list-style:none} .qdn-pag .qdn-p-elenco li{position:relative; padding-left:20px; margin-top:12px; font-size:15.5px} .qdn-pag .qdn-p-elenco li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:1px; background:var(--pgo); } .qdn-pag .qdn-p-cta2{margin-top:28px} .qdn-pag .qdn-p-cta2 .elementor-button{ background:transparent; color:var(--pgo); border:1px solid var(--pgo); border-radius:0; font-family:var(--qb); font-size:14px; font-weight:500; letter-spacing:.02em; padding:14px 26px; box-shadow:none; transition:background .25s ease, color .25s ease; } .qdn-pag .qdn-p-cta2 .elementor-button:hover, .qdn-pag .qdn-p-cta2 .elementor-button:focus-visible{background:var(--pgo); color:var(--pgi)} .qdn-pag.qdn-p-affermazione .e-con-inner{align-items:center} .qdn-pag .qdn-p-affermazione-t .elementor-heading-title{ font-family:var(--qd); font-weight:300; font-size:clamp(22px,2.8vw,32px); line-height:1.25; color:var(--pgi); max-width:26ch; text-align:center; } /* 6. Rete di sicurezza tipografica alle larghezze minime. * Misurato in viewport emulato (iframe ridimensionato), non dedotto: * a 360px l'H1 "…INDIMENTICABILE" a 34px misura 308px contro 301px * disponibili e sborda di 7px. A 30px misura 272px ed entra. * overflow-wrap interviene solo quando una parola non entra davvero: * serve anche perche' GTranslate puo' generare parole piu' lunghe. */ .qdn-pag .elementor-heading-title{overflow-wrap:break-word} @media (max-width:400px){ .qdn-pag .elementor-widget-heading h1.elementor-heading-title{font-size:30px} } /* 7. Ottone leggibile sui fondi chiari — correzione di contrasto. * Misurato: #B0895A da 3,20:1 su bianco e 2,82:1 su crema, sotto il * 4,5:1 richiesto dal testo piccolo. #856440 da 5,39:1 su bianco e * 4,70:1 su crema. Sui fondi scuri resta l'ottone pieno, che li' * misura gia' 5,43:1 e non va toccato. */ .qdn-pag{--pgo-t:#856440} .qdn-pag .qdn-p-passo .elementor-heading-title{color:var(--pgo-t)} .qdn-pag.qdn-p-sez-chiaro .qdn-p-sottotitolo .elementor-heading-title{color:var(--pgo-t)} .qdn-pag.qdn-p-sez-chiaro .qdn-p-corpo a{color:var(--pgo-t)} .qdn-pag.qdn-p-sez-chiaro .qdn-p-cta2 .elementor-button{color:var(--pgo-t); border-color:var(--pgo-t)} .qdn-pag.qdn-p-sez-chiaro .qdn-p-cta2 .elementor-button:hover, .qdn-pag.qdn-p-sez-chiaro .qdn-p-cta2 .elementor-button:focus-visible{ background:var(--pgo-t); color:#FFFFFF; } /* 8. Contorno di fuoco leggibile anche sui fondi chiari. * L'ottone pieno su crema misura 2,82:1, sotto il 3:1 richiesto a un * indicatore di fuoco (WCAG 1.4.11). Sui chiari si usa l'ottone da * testo: 4,70:1 su crema, 5,39:1 sul bianco delle schede. */ .qdn-pag.qdn-p-sez-chiaro a:focus-visible, .qdn-pag.qdn-p-sez-chiaro button:focus-visible{outline-color:var(--pgo-t)} /* 9. Fotografie d’atmosfera nelle pagine. * Stesso trattamento non distruttivo gia’ approvato su Home e Chi siamo: * agisce solo in CSS, i file originali non vengono toccati. */ .qdn-pag .qdn-p-foto img{ display:block; width:100%; height:auto; filter:saturate(.73) contrast(1.04) brightness(.94); border:1px solid rgba(176,137,90,.55); } .qdn-pag .qdn-p-card .qdn-p-foto{margin-bottom:22px} .qdn-pag .qdn-p-sez-scuro .qdn-p-foto{margin-top:26px} /* 10. Griglie compatte: gamma apparecchi e planimetrie. * Contenitori "full": i figli sono diretti, quindi la griglia sta * sull'elemento stesso e non su .e-con-inner. Verificato nel DOM. */ .qdn-pag .qdn-p-griglia-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch; } .qdn-pag .qdn-p-piante{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:20px; } @media (max-width:1024px){ .qdn-pag .qdn-p-griglia-3{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:560px){ .qdn-pag .qdn-p-griglia-3{grid-template-columns:1fr} .qdn-pag .qdn-p-piante{grid-template-columns:1fr} } /* 11. Scheda apparecchio e didascalie delle immagini. */ .qdn-pag .qdn-p-app{ background:#FFFFFF; border-top:2px solid var(--pgo); padding:16px 16px 18px; height:100%; } .qdn-pag .qdn-p-app .qdn-p-foto img{filter:none; border:0; background:#FFFFFF} .qdn-pag .qdn-p-piante .qdn-p-foto img{filter:none; border:1px solid rgba(28,26,23,.12)} .qdn-pag .elementor-widget-image figcaption.widget-image-caption{ font-family:var(--qb); font-size:14px; line-height:1.45; color:var(--pgp); margin-top:10px; text-align:left; } .qdn-pag.qdn-p-sez-scuro .elementor-widget-image figcaption.widget-image-caption{color:#A9A49B} /* dentro le schede bianche il fondo torna chiaro anche in sezione scura */ .qdn-pag.qdn-p-sez-scuro .qdn-p-app .elementor-widget-image figcaption.widget-image-caption{color:var(--pgp)} /* 12. Fotografia di prodotto nelle sezioni a piena larghezza: la scheda * bianca non deve allargarsi oltre la misura reale del file servito. */ .qdn-p-prod .qdn-p-app{max-width:320px; margin:0 0 26px} @media (max-width:560px){.qdn-p-prod .qdn-p-app{max-width:100%}} /* 13. Nessun ingrandimento sfocato: le fotografie a livello di sezione * non superano la misura reale del file servito. Dentro le schede * restano invece al 100%, perche' li' la misura la detta la scheda. */ .qdn-pag .e-con-inner > .elementor-widget.elementor-widget-image.qdn-p-foto{max-width:680px} .qdn-pag .qdn-p-card .qdn-p-foto, .qdn-pag .qdn-p-app .qdn-p-foto, .qdn-pag .qdn-p-piante .qdn-p-foto{max-width:none} .qdn-pag .qdn-p-foto img{width:auto; max-width:100%} .qdn-pag .qdn-p-card .qdn-p-foto img, .qdn-pag .qdn-p-app .qdn-p-foto img, .qdn-pag .qdn-p-piante .qdn-p-foto img{width:100%} /* 14. Punti di riferimento e salto al contenuto. * Lo skip link di Astra punta a #content, che non e' focalizzabile, e non * si puo' togliere con un hook: e' HTML grezzo in header.php. display:none * lo toglie davvero dall'ordine di tabulazione, non lo nasconde soltanto. */ .skip-link[href="#content"]{display:none !important} .qdn-skip{position:absolute; left:-9999px; top:0; z-index:100000} .qdn-skip:focus{ left:8px; top:8px; width:auto; height:auto; padding:12px 18px; background:#1C1A17; color:#F4EFE6; font-family:var(--qb,system-ui,sans-serif); font-size:15px; line-height:1.2; text-decoration:none; border-radius:0; outline:2px solid #B0895A; outline-offset:2px; } body.admin-bar .qdn-skip:focus{top:40px} #qdn-main:focus{outline:none} #qdn-main:focus-visible{outline:2px solid #B0895A; outline-offset:2px} /* ===== QDN COMPONENTI PAGINE v2 - FINE ===== */ /* ===== QDN PAGINE SOLUZIONI v3 - INIZIO ===== * Componenti per le cinque pagine rifatte (profumazione ambientale, diffusori, * fragranze, profumazione su misura, purificatori). Tutto agganciato a .qdn-pag, * come i blocchi precedenti: le pagine restano modificabili in Elementor, qui * sta solo l'aspetto. */ /* 15. Paragrafo d'apertura di sezione e stacco prima di una griglia */ .qdn-pag .qdn-p-lead p{font-size:18px; line-height:1.6; max-width:60ch} .qdn-pag.qdn-p-sez-scuro .qdn-p-lead p{color:rgba(244,239,230,.82)} .qdn-pag .qdn-p-stacco{margin-top:40px} /* 16. Due colonne: testo e fotografia. Sotto 880px si impilano. */ .qdn-pag.qdn-p-split > .e-con-inner{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center; } @media (max-width:880px){ .qdn-pag.qdn-p-split > .e-con-inner{grid-template-columns:1fr; gap:34px} } .qdn-pag.qdn-p-split .qdn-p-foto{max-width:none} .qdn-pag.qdn-p-split .qdn-p-foto img{width:100%} /* 17. Tre elementi affiancati: tre colonne fino a 900px, poi una sola. * Mai due colonne: con tre schede resterebbe una scheda sola sulla riga. */ .qdn-pag .qdn-p-griglia-3.qdn-p-tre{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:900px){ .qdn-pag .qdn-p-griglia-3.qdn-p-tre{grid-template-columns:1fr} } /* 18. Scheda modello: fotografia del prodotto, ruolo, testo, azioni in fondo */ .qdn-pag .qdn-p-card .qdn-p-foto-prodotto{ margin:-6px 0 22px; padding-bottom:18px; border-bottom:1px solid rgba(28,26,23,.09); } .qdn-pag .qdn-p-card .qdn-p-foto-prodotto img{ filter:none; border:0; width:auto; max-width:100%; height:200px; object-fit:contain; margin:0 auto; } .qdn-pag .qdn-p-card .qdn-p-elenco{margin-top:6px} .qdn-pag .qdn-p-card .qdn-p-elenco li{font-size:14.5px; color:var(--pgsc)} .qdn-pag .qdn-p-card .qdn-p-azioni{margin-top:auto; padding-top:24px} /* 19. Riga di pulsanti: si va a capo invece di stringersi */ .qdn-pag .qdn-p-azioni{gap:12px 14px} .qdn-pag .qdn-p-azioni .qdn-p-cta, .qdn-pag .qdn-p-azioni .qdn-p-cta2{margin:0} .qdn-pag.qdn-p-sez-scuro .qdn-p-cta .elementor-button{background:var(--pgo); color:var(--pgi)} .qdn-pag.qdn-p-sez-scuro .qdn-p-cta .elementor-button:hover, .qdn-pag.qdn-p-sez-scuro .qdn-p-cta .elementor-button:focus-visible{background:var(--pgc); color:var(--pgi)} .qdn-pag.qdn-p-sez-scuro .qdn-p-card .qdn-p-cta .elementor-button{background:var(--pgi); color:var(--pgc)} .qdn-pag.qdn-p-sez-scuro .qdn-p-card .qdn-p-cta2 .elementor-button{color:var(--pgo-t); border-color:var(--pgo-t)} /* 20. Schede scure: titolo e testo dentro */ .qdn-pag .qdn-p-scheda .qdn-p-modello .elementor-heading-title{color:var(--pgc); font-size:22px} .qdn-pag .qdn-p-scheda .qdn-p-testo p{color:rgba(244,239,230,.74)} .qdn-pag .qdn-p-scheda .qdn-p-testo{margin-bottom:0} /* 21. Elenco di voci con collegamento (settori, famiglie olfattive) */ .qdn-pag .qdn-p-ambienti dt a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(176,137,90,.5); padding-bottom:1px; } .qdn-pag .qdn-p-ambienti dt a:hover{border-bottom-color:currentColor} .qdn-pag.qdn-p-sez-chiaro .qdn-p-ambienti dt{color:var(--pgo-t)} .qdn-pag.qdn-p-sez-chiaro .qdn-p-ambienti dd{color:var(--pgsc)} /* 22. Chiusura: riquadro bordato d'ottone sul fondo scuro */ .qdn-pag .qdn-p-chiusa{ border:1px solid rgba(176,137,90,.5); padding:clamp(28px,5vw,60px) !important; background:var(--pgi2); } .qdn-pag .qdn-p-chiusa .qdn-p-titolo-sez .elementor-heading-title{max-width:24ch} /* 23. Dato di progetto: numeri di un caso reale, allineati */ .qdn-pag .qdn-p-dati-caso{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:26px 0 8px; padding:0; list-style:none; border-top:1px solid rgba(176,137,90,.35); border-bottom:1px solid rgba(176,137,90,.35); } .qdn-pag .qdn-p-dati-caso li{padding:16px 18px 16px 0; font-variant-numeric:tabular-nums} .qdn-pag .qdn-p-dati-caso li + li{padding-left:18px; border-left:1px solid rgba(176,137,90,.35)} .qdn-pag .qdn-p-dati-caso strong{ display:block; font-family:var(--qd); font-weight:400; font-size:30px; line-height:1.1; color:var(--pgc); } .qdn-pag .qdn-p-dati-caso span{font-size:13.5px; color:rgba(244,239,230,.66)} @media (max-width:560px){ .qdn-pag .qdn-p-dati-caso{grid-template-columns:1fr} .qdn-pag .qdn-p-dati-caso li, .qdn-pag .qdn-p-dati-caso li + li{padding:12px 0; border-left:0} .qdn-pag .qdn-p-dati-caso li + li{border-top:1px solid rgba(176,137,90,.35)} } /* 24. Titolo di sezione con filetto: apre un gruppo di contenuti */ .qdn-pag .qdn-p-titolo-filetto .elementor-heading-title{ display:flex; align-items:center; gap:26px; max-width:none; } .qdn-pag .qdn-p-titolo-filetto .elementor-heading-title::after{ content:""; flex:1 1 auto; min-width:40px; height:1px; background:var(--pgo); } .qdn-pag.qdn-p-sez-chiaro .qdn-p-titolo-filetto .elementor-heading-title::after{background:var(--pgo-t)} @media (max-width:560px){ .qdn-pag .qdn-p-titolo-filetto .elementor-heading-title{display:block} .qdn-pag .qdn-p-titolo-filetto .elementor-heading-title::after{display:none} } /* 25. Etichette leggibili sui fondi scuri. * La regola 7 porta le etichette all'ottone da testo (#856440): giusto su * crema e bianco, ma sull'inchiostro misura 3:1. Sui fondi scuri torna * l'ottone pieno; dentro le schede bianche resta quello da testo. */ .qdn-pag.qdn-p-sez-scuro .qdn-p-passo .elementor-heading-title{color:var(--pgo)} .qdn-pag.qdn-p-sez-scuro .qdn-p-card .qdn-p-passo .elementor-heading-title, .qdn-pag.qdn-p-sez-scuro .qdn-p-app .qdn-p-passo .elementor-heading-title{color:var(--pgo-t)} /* 26. Gamma di dieci apparecchi: cinque colonne, poi due. * Mai tre o quattro: con dieci elementi resterebbe una riga monca. */ .qdn-pag .qdn-p-griglia-5{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; align-items:stretch; } @media (max-width:1024px){ .qdn-pag .qdn-p-griglia-5{grid-template-columns:repeat(2,minmax(0,1fr))} } .qdn-pag .qdn-p-app .qdn-p-modello{margin:12px 0 0} .qdn-pag .qdn-p-app .qdn-p-modello .elementor-heading-title{font-size:19px} /* 27. Contenitori interni senza rientro. * Elementor da' 10px di padding a ogni contenitore: pulsanti, griglie e * colonne finivano 10px a destra dei titoli. Le schede hanno un padding * proprio e non sono toccate. */ .qdn-pag > .e-con-inner > .e-con, .qdn-pag.qdn-p-split > .e-con-inner > .e-con, .qdn-pag .e-con.qdn-p-azioni, .qdn-pag .e-con.qdn-p-griglia-3, .qdn-pag .e-con.qdn-p-griglia-5{ --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } /* 28. Riquadri nelle due colonne: alti quanto il contenuto, non quanto la riga. */ .qdn-pag.qdn-p-split .qdn-p-scheda, .qdn-pag.qdn-p-split .qdn-p-requisiti{height:auto; align-self:center} /* 29. Titoli senza parola orfana sulla seconda riga. */ .qdn-pag .qdn-p-titolo-sez .elementor-heading-title, .qdn-pag .elementor-widget-heading h1.elementor-heading-title, .qdn-pag .qdn-p-deck .elementor-heading-title{text-wrap:balance} /* 30. Pulsanti nelle schede: uno sotto l'altro, larghi quanto la scheda. * Due pulsanti non stanno affiancati in una scheda da un terzo di 1120px: * andavano a capo con larghezze diverse. */ .qdn-pag .qdn-p-card .qdn-p-azioni{flex-direction:column; align-items:stretch; gap:10px} .qdn-pag .qdn-p-card .qdn-p-azioni > .elementor-widget-button{width:100%} .qdn-pag .qdn-p-card .qdn-p-azioni .elementor-button{width:100%; justify-content:center; text-align:center} /* ===== QDN PAGINE SOLUZIONI v3 - FINE ===== */ /* ===== QDN LANDING SETTORE v4 - INIZIO ===== * Componenti per le sei pagine settore rifatte in Elementor, a partire * da Hotel (37556). Stessa impostazione dei blocchi precedenti: tutto * agganciato a .qdn-pag, le pagine restano modificabili in Elementor e * qui sta solo l'aspetto. Prefisso proprio "qdn-set-" per non * interferire con i componenti 1-30 delle pagine soluzioni. * * MOVIMENTO — il motore condiviso (qdn-motion.js, livello "media") gia' * fa comparire i figli diretti di ogni sezione con sfalsamento e da' * alle immagini un accenno di scala. Qui si aggiunge solo cio' che quel * motore non copre: sfalsamento DENTRO le griglie, passaggi del mouse, * maschere e colonna appiccicata. Tutto in CSS, zero JavaScript nuovo. * Ogni stato nascosto e' condizionato a body.qdn-mo-on, che la mette lo * script: senza JavaScript non sparisce nulla (lezione §2-undecies). * ------------------------------------------------------------------ */ /* 31. Apertura: testo e fotografia affiancati, colonne asimmetriche. * La fotografia NON e' uno sfondo CSS ma un vero: e' la * correzione del difetto LCP del §7C. */ .qdn-pag.qdn-set-hero > .e-con-inner{ display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.86fr); gap:clamp(34px,4.6vw,68px); align-items:center; } @media (max-width:900px){ .qdn-pag.qdn-set-hero > .e-con-inner{grid-template-columns:1fr; gap:32px} } .qdn-pag .qdn-set-hero-testo{display:flex; flex-direction:column; align-items:flex-start} .qdn-pag .qdn-set-hero-foto{max-width:none; align-self:stretch} .qdn-pag .qdn-set-hero-foto img{ width:100%; height:100%; min-height:clamp(300px,42vw,520px); object-fit:cover; display:block; border:1px solid rgba(176,137,90,.45); } /* 32. Banda a tutta larghezza: una sola fotografia che taglia la pagina. * Sta in un contenitore a larghezza piena senza rientri, quindi non * servono margini negativi e non c'e' rischio di sbordo orizzontale. */ .qdn-pag.qdn-set-banda{--padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px} .qdn-pag .qdn-set-banda-img{max-width:none; line-height:0} .qdn-pag .qdn-set-banda-img img{ width:100%; height:clamp(240px,34vw,460px); object-fit:cover; display:block; } /* 33. Griglia bento: dieci ambienti, sei colonne, nessuna riga monca. * Le misure stanno sulle classi delle singole celle, cosi' l'ordine e' * leggibile in Elementor e la disposizione non dipende da nth-child. * xl = 3 colonne x 2 righe (cella con fotografia) * l = 3 colonne * m = 2 colonne * int = 6 colonne (riga intera, chiude la griglia) * Sotto 1024px si passa a due colonne e "int" torna a una sola cella, * altrimenti l'ultima riga resterebbe spaiata (lezione §9.4). */ .qdn-pag .qdn-set-bento{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; align-items:stretch; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-set-b{ grid-column:span 3; display:flex; flex-direction:column; padding:24px 24px 26px; background:var(--pgi2); border:1px solid rgba(176,137,90,.22); transition:border-color .35s ease, transform .35s ease, background-color .35s ease; } .qdn-pag .qdn-set-b-xl{grid-column:span 3; grid-row:span 2} .qdn-pag .qdn-set-b-l{grid-column:span 3} .qdn-pag .qdn-set-b-m{grid-column:span 2} .qdn-pag .qdn-set-b-int{grid-column:span 6} @media (max-width:1024px){ .qdn-pag .qdn-set-bento{grid-template-columns:repeat(2,minmax(0,1fr))} .qdn-pag .qdn-set-b{grid-column:span 1; grid-row:auto} .qdn-pag .qdn-set-b-xl{grid-column:span 2} } @media (max-width:680px){ .qdn-pag .qdn-set-bento{grid-template-columns:1fr; gap:12px} .qdn-pag .qdn-set-b,.qdn-pag .qdn-set-b-xl{grid-column:span 1} } .qdn-pag .qdn-set-b .qdn-set-b-tit .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:20px; line-height:1.24; color:var(--pgc); margin:0; } .qdn-pag .qdn-set-b .qdn-set-b-txt{margin:10px 0 0} .qdn-pag .qdn-set-b .qdn-set-b-txt p{ font-size:14.5px; line-height:1.56; color:rgba(244,239,230,.7); margin:0; } /* La cella con fotografia: immagine in alto, testo sotto, e l'immagine * si prende lo spazio che avanza cosi' due celle xl restano pari. */ .qdn-pag .qdn-set-b-xl{padding:0; overflow:hidden} .qdn-pag .qdn-set-b-xl .qdn-set-b-foto{max-width:none; line-height:0; flex:1 1 auto; min-height:0} .qdn-pag .qdn-set-b-xl .qdn-set-b-foto img{ width:100%; height:100%; min-height:190px; object-fit:cover; display:block; transition:transform .7s cubic-bezier(.22,.61,.36,1); } .qdn-pag .qdn-set-b-xl .qdn-set-b-tit, .qdn-pag .qdn-set-b-xl .qdn-set-b-txt{padding-left:24px; padding-right:24px} .qdn-pag .qdn-set-b-xl .qdn-set-b-tit{padding-top:22px} .qdn-pag .qdn-set-b-xl .qdn-set-b-txt{padding-bottom:26px} /* 34. Passaggio del mouse: la scheda si stacca appena e il filetto * d'ottone si accende. Nessun movimento su tocco (hover:none). */ @media (hover:hover){ .qdn-pag .qdn-set-b:hover{ border-color:rgba(176,137,90,.62); transform:translateY(-3px); } .qdn-pag .qdn-set-b-xl:hover .qdn-set-b-foto img{transform:scale(1.045)} .qdn-pag .qdn-set-caso:hover .qdn-set-caso-foto img{transform:scale(1.045)} .qdn-pag .qdn-set-caso:hover{border-color:rgba(176,137,90,.62)} } /* 35. Metodo numerato: binario d'ottone verticale e numeri grandi. * I passi sono quattro: due colonne fino a 900px, poi una sola. */ .qdn-pag .qdn-set-passi{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; align-items:stretch; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } @media (max-width:900px){ .qdn-pag .qdn-set-passi{grid-template-columns:1fr} } .qdn-pag .qdn-set-passo{ padding:30px 34px 32px 0; border-top:1px solid rgba(176,137,90,.3); position:relative; } .qdn-pag .qdn-set-passi > .qdn-set-passo:nth-child(2n){padding-left:34px; border-left:1px solid rgba(176,137,90,.3)} @media (max-width:900px){ .qdn-pag .qdn-set-passi > .qdn-set-passo:nth-child(2n){padding-left:0; border-left:0} .qdn-pag .qdn-set-passo{padding-right:0} } .qdn-pag .qdn-set-passo .qdn-set-num .elementor-heading-title{ font-family:var(--qd); font-weight:300; font-size:40px; line-height:1; color:var(--pgo); margin:0 0 14px; font-variant-numeric:tabular-nums; } .qdn-pag .qdn-set-passo .qdn-set-passo-tit .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:23px; line-height:1.22; color:var(--pgc); margin:0; } .qdn-pag .qdn-set-passo .qdn-set-passo-txt{margin:10px 0 0} .qdn-pag .qdn-set-passo .qdn-set-passo-txt p{font-size:15.5px; color:rgba(244,239,230,.72); margin:0} /* 36. Nota in coda a una sezione: piccola, con filetto a sinistra. */ .qdn-pag .qdn-set-nota{ border-left:2px solid var(--pgo); padding:2px 0 2px 20px; margin-top:34px; } .qdn-pag .qdn-set-nota p{font-size:15px; max-width:66ch; margin:0} .qdn-pag.qdn-p-sez-scuro .qdn-set-nota p{color:rgba(244,239,230,.78)} .qdn-pag.qdn-p-sez-chiaro .qdn-set-nota{border-left-color:var(--pgo-t)} /* 37. Scenari: tre schede con fotografia in alto. Tre colonne, poi una * sola (mai due: la terza resterebbe da sola, lezione §9.4). */ .qdn-pag .qdn-set-casi{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } @media (max-width:960px){ .qdn-pag .qdn-set-casi{grid-template-columns:1fr; gap:16px} } .qdn-pag .qdn-set-caso{ display:flex; flex-direction:column; padding:0; overflow:hidden; background:var(--pgi2); border:1px solid rgba(176,137,90,.22); transition:border-color .35s ease; } .qdn-pag .qdn-set-caso-foto{max-width:none; line-height:0} .qdn-pag .qdn-set-caso-foto img{ width:100%; height:210px; object-fit:cover; display:block; transition:transform .7s cubic-bezier(.22,.61,.36,1); } .qdn-pag .qdn-set-caso .qdn-set-caso-eti .elementor-heading-title{ font-family:var(--qb); font-size:11.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--pgo); margin:0; } .qdn-pag .qdn-set-caso .qdn-set-caso-tit .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:22px; line-height:1.22; color:var(--pgc); margin:8px 0 0; } .qdn-pag .qdn-set-caso .qdn-set-caso-eti, .qdn-pag .qdn-set-caso .qdn-set-caso-tit{padding:0 24px} .qdn-pag .qdn-set-caso .qdn-set-caso-eti{padding-top:24px} .qdn-pag .qdn-set-caso .qdn-set-caso-txt{padding:0 24px 26px; margin:12px 0 0} .qdn-pag .qdn-set-caso .qdn-set-caso-txt p{font-size:15px; line-height:1.58; color:rgba(244,239,230,.72); margin:0} /* 38. Segnaposto per una fotografia che ancora non esiste. * Meglio un vuoto dichiarato che una fotografia mediocre (§3). Si * sostituisce cambiando l'immagine nel widget, senza toccare il CSS. */ .qdn-pag .qdn-set-vuoto{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; height:210px; padding:20px; text-align:center; background:repeating-linear-gradient(135deg,rgba(176,137,90,.07) 0 10px,transparent 10px 20px); border-bottom:1px solid rgba(176,137,90,.3); } .qdn-pag .qdn-set-vuoto p{ font-family:var(--qb); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(176,137,90,.85); margin:0; } /* 39. Domande frequenti:
nativo, quindi funziona senza * JavaScript, si apre da tastiera e resta leggibile alla stampa. */ .qdn-pag .qdn-set-faq{max-width:none} .qdn-pag .qdn-set-faq details{ border-top:1px solid rgba(28,26,23,.14); padding:0; } .qdn-pag .qdn-set-faq details:last-of-type{border-bottom:1px solid rgba(28,26,23,.14)} .qdn-pag .qdn-set-faq summary{ list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative; font-family:var(--qd); font-weight:400; font-size:clamp(18px,2vw,21px); line-height:1.3; color:var(--pgi); } .qdn-pag .qdn-set-faq summary::-webkit-details-marker{display:none} .qdn-pag .qdn-set-faq summary::after{ content:""; position:absolute; right:8px; top:50%; width:13px; height:13px; margin-top:-8px; border-right:1.5px solid var(--pgo-t); border-bottom:1.5px solid var(--pgo-t); transform:rotate(45deg); transition:transform .3s ease; } .qdn-pag .qdn-set-faq details[open] summary::after{transform:rotate(-135deg); margin-top:-3px} .qdn-pag .qdn-set-faq summary:focus-visible{ outline:2px solid var(--pgo-t); outline-offset:3px; } .qdn-pag .qdn-set-faq details > p{ margin:0 0 22px; padding-right:44px; font-size:16px; line-height:1.62; max-width:74ch; color:var(--pgsc); } @media (hover:hover){ .qdn-pag .qdn-set-faq summary:hover{color:var(--pgo-t)} } /* 40. SISTEMA STICKY CONDIVISO delle landing di settore. * Una sola implementazione per tutte le sezioni "titolo a sinistra, * testo lungo a destra": la classe e' qdn-set-fermo e l'offset vive in * una variabile sola, --qdn-sticky-offset. * * COME E' STATO RICAVATO L'OFFSET, non scelto a caso: * header .qdnh-head misurato sul sito = 112px (barra fiducia 39 + * barra principale 73) fino a 901px; sotto i 900px il suo media query * lo riduce a 100px (34 + 66). L'header e' position:sticky, quindi * occupa quello spazio in permanenza. * Offset = altezza header + 24px di respiro (un passo della scala * delle spaziature), cosi' il titolo non sembra incollato alla barra. * Con la barra di WordPress l'header scende di 32px (regola * body.admin-bar .qdnh-head--solido{top:32px}): l'offset la segue, * altrimenti da amministratore il titolo finisce sotto l'header. * Il valore precedente era 104px, cioe' OTTO pixel MENO dell'header: * il titolo si agganciava dietro la barra e veniva tagliato. * * Lo sticky vale da 881px in su, cioe' esattamente da dove le due * colonne stanno affiancate (componente 16 le impila a 880px). Prima * partiva da 901px e restava una fascia di 20px con due colonne e * nessun aggancio. */ :root{ --qdn-sticky-offset:136px; } body.admin-bar{ --qdn-sticky-offset:168px; } @media (max-width:900px){ :root{ --qdn-sticky-offset:124px; } body.admin-bar{ --qdn-sticky-offset:156px; } } @media (min-width:881px){ .qdn-pag .qdn-set-fermo{ position:sticky; top:var(--qdn-sticky-offset,136px); align-self:start; min-width:0; } } /* Sotto la soglia le colonne si impilano: il titolo torna nel flusso e * scorre normalmente sopra al testo. Esplicito, cosi' vince anche su un * eventuale sticky impostato dentro Elementor. */ @media (max-width:880px){ .qdn-pag .qdn-set-fermo{position:static; top:auto} } /* 40-bis. Reveal e sticky separati. * Il motore motion a livello "media" assegna il reveal ai figli diretti * di .e-con-inner, cioe' proprio alla colonna sticky: l'elemento * riceveva insieme position:sticky e un transform d'entrata. Dopo * .is-in il transform torna a none e lo sticky regge lo stesso, quindi * NON era la causa dei difetti; ma tenere le due responsabilita' sullo * stesso box e' fragile. Qui il wrapper resta strutturale (nessun * transform) e il movimento passa ai suoi figli. La dissolvenza resta * sul wrapper. */ body.qdn-mo-on .qdn-pag .qdn-set-fermo.qdn-mo-rv{transform:none} body.qdn-mo-on .qdn-pag .qdn-set-fermo.qdn-mo-rv > *{ transform:translate3d(0,var(--qdn-mo-sposta),0); transition:transform var(--qdn-mo-durata) var(--qdn-mo-curva); } body.qdn-mo-on .qdn-pag .qdn-set-fermo.qdn-mo-rv.is-in > *{transform:none} @media (prefers-reduced-motion:reduce){ body.qdn-mo-on .qdn-pag .qdn-set-fermo.qdn-mo-rv > *{ transform:none !important; transition:none !important; } } /* 41. Testo editoriale lungo: colonna stretta, righe corte. * Il primo capoverso un filo piu' grande, come in un articolo. */ .qdn-pag .qdn-set-editoriale p{max-width:68ch; font-size:16.5px; line-height:1.68} .qdn-pag .qdn-set-editoriale p:first-child{font-size:18.5px; line-height:1.6} .qdn-pag .qdn-set-editoriale p + p{margin-top:1.05em} /* 42. Sfalsamento DENTRO le griglie. * Il motore condiviso fa comparire la griglia come un blocco solo. Qui * le celle entrano una dopo l'altra quando la griglia riceve .is-in. * Condizionato a body.qdn-mo-on: senza JavaScript non si nasconde * niente e la pagina resta intera. */ body.qdn-mo-on .qdn-pag .qdn-set-bento > .qdn-set-b, body.qdn-mo-on .qdn-pag .qdn-set-casi > .qdn-set-caso, body.qdn-mo-on .qdn-pag .qdn-set-passi > .qdn-set-passo{ opacity:0; transform:translate3d(0,16px,0); } body.qdn-mo-on .qdn-pag .qdn-set-bento.is-in > .qdn-set-b, body.qdn-mo-on .qdn-pag .qdn-set-casi.is-in > .qdn-set-caso, body.qdn-mo-on .qdn-pag .qdn-set-passi.is-in > .qdn-set-passo{ opacity:1; transform:none; transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1); } body.qdn-mo-on .qdn-pag .is-in > .qdn-set-b:nth-child(1), body.qdn-mo-on .qdn-pag .is-in > .qdn-set-caso:nth-child(1), body.qdn-mo-on .qdn-pag .is-in > .qdn-set-passo:nth-child(1){transition-delay:0s} body.qdn-mo-on .qdn-pag .is-in > .qdn-set-b:nth-child(2), body.qdn-mo-on .qdn-pag .is-in > .qdn-set-caso:nth-child(2), body.qdn-mo-on .qdn-pag .is-in > .qdn-set-passo:nth-child(2){transition-delay:.07s} body.qdn-mo-on .qdn-pag .is-in > .qdn-set-b:nth-child(3), body.qdn-mo-on .qdn-pag .is-in > .qdn-set-caso:nth-child(3), body.qdn-mo-on .qdn-pag .is-in > .qdn-set-passo:nth-child(3){transition-delay:.14s} body.qdn-mo-on .qdn-pag .is-in > .qdn-set-b:nth-child(4), body.qdn-mo-on .qdn-pag .is-in > .qdn-set-passo:nth-child(4){transition-delay:.21s} body.qdn-mo-on .qdn-pag .is-in > .qdn-set-b:nth-child(5){transition-delay:.26s} body.qdn-mo-on .qdn-pag .is-in > .qdn-set-b:nth-child(6){transition-delay:.31s} body.qdn-mo-on .qdn-pag .is-in > .qdn-set-b:nth-child(7){transition-delay:.36s} body.qdn-mo-on .qdn-pag .is-in > .qdn-set-b:nth-child(8){transition-delay:.4s} body.qdn-mo-on .qdn-pag .is-in > .qdn-set-b:nth-child(9){transition-delay:.44s} body.qdn-mo-on .qdn-pag .is-in > .qdn-set-b:nth-child(10){transition-delay:.48s} /* 43. Maschera d'ingresso sulle fotografie di apertura e di banda: * l'immagine si scopre dal basso invece di comparire e basta. * ATTENZIONE a due cose, entrambe gia' costate un difetto: * 1. la classe finisce sul WIDGET (.elementor-widget-image), che e' * anche l'elemento a cui il motore aggiunge .is-in: il selettore e' * quindi .qdn-set-hero-foto.is-in, non ".is-in .qdn-set-hero-foto"; * 2. NON si dichiara qui la transizione di "transform": quella la * governa gia' qdn-motion.css sulla stessa immagine, con la stessa * specificita' (0,3,1). Ridichiararla significherebbe affidare al * solo ordine di caricamento dei fogli chi vince. */ body.qdn-mo-on .qdn-pag .qdn-set-hero-foto img, body.qdn-mo-on .qdn-pag .qdn-set-banda-img img{ clip-path:inset(14% 0 0 0); transition:clip-path 1.05s cubic-bezier(.22,.61,.36,1); } body.qdn-mo-on .qdn-pag .qdn-set-hero-foto.is-in img, body.qdn-mo-on .qdn-pag .qdn-set-banda-img.is-in img{clip-path:inset(0 0 0 0)} /* 44. Movimento ridotto: si spegne tutto quello aggiunto qui sopra. * Il motore condiviso ha gia' la sua regola; questa copre i componenti * nuovi, comprese le transizioni del passaggio del mouse. */ @media (prefers-reduced-motion:reduce){ .qdn-pag .qdn-set-b, .qdn-pag .qdn-set-caso, .qdn-pag .qdn-set-b-xl .qdn-set-b-foto img, .qdn-pag .qdn-set-caso-foto img, .qdn-pag .qdn-set-faq summary::after{transition:none !important} body.qdn-mo-on .qdn-pag .qdn-set-bento > .qdn-set-b, body.qdn-mo-on .qdn-pag .qdn-set-casi > .qdn-set-caso, body.qdn-mo-on .qdn-pag .qdn-set-passi > .qdn-set-passo{ opacity:1 !important; transform:none !important; transition:none !important; } body.qdn-mo-on .qdn-pag .qdn-set-hero-foto img, body.qdn-mo-on .qdn-pag .qdn-set-banda-img img{ clip-path:none !important; transition:none !important; } .qdn-pag .qdn-set-fermo{position:static} } /* 45. Rete di sicurezza tipografica e di sbordo alle larghezze minime. */ @media (max-width:420px){ .qdn-pag .qdn-set-b{padding:20px 18px 22px} .qdn-pag .qdn-set-b-xl .qdn-set-b-tit, .qdn-pag .qdn-set-b-xl .qdn-set-b-txt{padding-left:18px; padding-right:18px} .qdn-pag .qdn-set-caso .qdn-set-caso-eti, .qdn-pag .qdn-set-caso .qdn-set-caso-tit{padding-left:18px; padding-right:18px} .qdn-pag .qdn-set-caso .qdn-set-caso-txt{padding-left:18px; padding-right:18px} .qdn-pag .qdn-set-faq summary{padding-right:36px; font-size:17.5px} .qdn-pag .qdn-set-faq details > p{padding-right:0} } /* Niente sborda in orizzontale, comprese le celle con fotografia. */ .qdn-pag .qdn-set-b,.qdn-pag .qdn-set-caso, .qdn-pag .qdn-set-bento,.qdn-pag .qdn-set-casi,.qdn-pag .qdn-set-passi{min-width:0} .qdn-pag .qdn-set-b img,.qdn-pag .qdn-set-caso img{max-width:100%} /* 46. Tre diffusori in scheda bianca: riusa .qdn-p-card (componente 4) * per il riquadro e aggiunge solo titolo, testo e azioni in fondo. */ .qdn-pag .qdn-set-sch .qdn-set-sch-tit .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:21px; line-height:1.2; color:var(--pgi); margin:0; } .qdn-pag .qdn-set-sch .qdn-set-sch-txt{margin:10px 0 0} .qdn-pag .qdn-set-sch .qdn-set-sch-txt p{font-size:14.5px; line-height:1.55; color:var(--pgsc); margin:0} .qdn-pag .qdn-set-sch .qdn-p-azioni{margin-top:auto; padding-top:20px} /* 47. Due colonne allineate in alto: serve alla colonna appiccicata del * componente 40, che con align-items:center non avrebbe spazio per * scorrere. */ .qdn-pag.qdn-set-split-alto > .e-con-inner{align-items:start} /* 48. Elenco descrittivo con numerazione discreta (le variabili di * progetto). Riusa la griglia dt/dd del componente 3 e aggiunge il * filetto di separazione fra una voce e l'altra. */ .qdn-pag .qdn-set-var{display:block; margin:0; padding:0} .qdn-pag .qdn-set-var > div{ padding:18px 0; border-top:1px solid rgba(28,26,23,.14); } .qdn-pag .qdn-set-var > div:last-child{border-bottom:1px solid rgba(28,26,23,.14)} .qdn-pag .qdn-set-var dt{ font-family:var(--qd); font-weight:400; font-size:19px; line-height:1.25; color:var(--pgo-t); margin:0 0 6px; } .qdn-pag .qdn-set-var dd{margin:0; font-size:15.5px; line-height:1.58; color:var(--pgsc)} /* ===== QDN LANDING SETTORE v4 - FINE ===== */ /* ===== QDN LANDING SETTORE v5 — UFFICI - INIZIO ===== * Componenti propri della pagina Uffici (37569). Il blocco v4 (31-48) * resta la base comune a tutte le landing di settore; qui stanno solo i * pezzi che Hotel non ha, perche' ogni settore deve avere una firma * visiva sua e non essere la Hotel con i nomi cambiati. * ------------------------------------------------------------------ */ /* 49. LA GIORNATA — firma visiva della pagina Uffici. * Cinque momenti su una riga, uniti da un binario d'ottone con i punti * di fermata. Cinque e non sei: a 1120px sei colonne lasciano ~170px per * cella, troppo stretti per un titolo piu' due righe di testo. * Sotto i 900px diventa un binario VERTICALE a sinistra: non due colonne, * che con cinque tappe lascerebbero una riga spaiata (lezione §9.4). */ .qdn-pag .qdn-set-giornata{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin-top:44px; align-items:stretch; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-set-tappa{ position:relative; padding:34px 18px 0 0; border-top:1px solid rgba(176,137,90,.38); } /* il punto di fermata sul binario */ .qdn-pag .qdn-set-tappa::before{ content:""; position:absolute; top:-5px; left:0; width:9px; height:9px; border-radius:50%; background:var(--pgo); box-shadow:0 0 0 4px var(--pgi); } .qdn-pag .qdn-set-tappa .qdn-set-ora .elementor-heading-title{ font-family:var(--qb); font-size:11px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--pgo); margin:0 0 9px; } .qdn-pag .qdn-set-tappa .qdn-set-tappa-tit .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:18.5px; line-height:1.22; color:var(--pgc); margin:0; } .qdn-pag .qdn-set-tappa .qdn-set-tappa-txt{margin:9px 0 0} .qdn-pag .qdn-set-tappa .qdn-set-tappa-txt p{ font-size:13.5px; line-height:1.55; color:rgba(244,239,230,.68); margin:0; } @media (max-width:900px){ .qdn-pag .qdn-set-giornata{grid-template-columns:1fr; margin-top:34px} .qdn-pag .qdn-set-tappa{ border-top:0; border-left:1px solid rgba(176,137,90,.38); padding:0 0 26px 26px; } .qdn-pag .qdn-set-tappa:last-child{padding-bottom:0} .qdn-pag .qdn-set-tappa::before{top:4px; left:-5px} .qdn-pag .qdn-set-tappa .qdn-set-tappa-txt p{font-size:15px} } /* 50. LE AREE — secondo componente proprio: riquadri con binario * d'ottone a sinistra, due colonne, e l'ultimo che occupa la riga intera * cosi' non resta mai una cella spaiata. */ .qdn-pag .qdn-set-aree{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:stretch; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-set-area{ padding:22px 24px 24px; border-left:2px solid var(--pgo-t); background:rgba(28,26,23,.035); transition:border-left-color .35s ease, background-color .35s ease; } .qdn-pag .qdn-set-area.qdn-set-area-intera{grid-column:span 2} @media (max-width:760px){ .qdn-pag .qdn-set-aree{grid-template-columns:1fr; gap:14px} .qdn-pag .qdn-set-area.qdn-set-area-intera{grid-column:span 1} } .qdn-pag .qdn-set-area .qdn-set-area-tit .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:20px; line-height:1.25; color:var(--pgi); margin:0; } .qdn-pag .qdn-set-area .qdn-set-area-txt{margin:9px 0 0} .qdn-pag .qdn-set-area .qdn-set-area-txt p{ font-size:15px; line-height:1.58; color:var(--pgsc); margin:0; } @media (hover:hover){ .qdn-pag .qdn-set-area:hover{background:rgba(28,26,23,.06); border-left-color:var(--pgi)} } /* 51. BANDA TIPOGRAFICA — al posto della banda fotografica di Hotel. * Serve a due cose: dare un respiro a meta' pagina senza una fotografia * che non abbiamo, e cambiare composizione rispetto a Hotel. */ .qdn-pag.qdn-set-citazione{background:var(--pgi2)} .qdn-pag .qdn-set-cit-testo .elementor-heading-title{ font-family:var(--qd); font-weight:300; font-size:clamp(23px,3.4vw,40px); line-height:1.24; letter-spacing:-.01em; color:var(--pgc); max-width:24ch; margin:0 auto; text-align:center; text-wrap:balance; position:relative; } .qdn-pag .qdn-set-cit-testo .elementor-heading-title::before{ content:"\201C"; display:block; font-size:2.1em; line-height:.6; color:var(--pgo); margin-bottom:.18em; } .qdn-pag .qdn-set-cit-firma .elementor-heading-title{ font-family:var(--qb); font-size:12px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--pgo); text-align:center; margin:26px 0 0; } /* 52. Sfalsamento dentro i due componenti nuovi, con la stessa regola * del componente 42: nascosti solo sotto body.qdn-mo-on. */ body.qdn-mo-on .qdn-pag .qdn-set-giornata > .qdn-set-tappa, body.qdn-mo-on .qdn-pag .qdn-set-aree > .qdn-set-area{ opacity:0; transform:translate3d(0,16px,0); } body.qdn-mo-on .qdn-pag .qdn-set-giornata.is-in > .qdn-set-tappa, body.qdn-mo-on .qdn-pag .qdn-set-aree.is-in > .qdn-set-area{ opacity:1; transform:none; transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1); } body.qdn-mo-on .qdn-pag .is-in > .qdn-set-tappa:nth-child(1), body.qdn-mo-on .qdn-pag .is-in > .qdn-set-area:nth-child(1){transition-delay:0s} body.qdn-mo-on .qdn-pag .is-in > .qdn-set-tappa:nth-child(2), body.qdn-mo-on .qdn-pag .is-in > .qdn-set-area:nth-child(2){transition-delay:.08s} body.qdn-mo-on .qdn-pag .is-in > .qdn-set-tappa:nth-child(3), body.qdn-mo-on .qdn-pag .is-in > .qdn-set-area:nth-child(3){transition-delay:.16s} body.qdn-mo-on .qdn-pag .is-in > .qdn-set-tappa:nth-child(4), body.qdn-mo-on .qdn-pag .is-in > .qdn-set-area:nth-child(4){transition-delay:.24s} body.qdn-mo-on .qdn-pag .is-in > .qdn-set-tappa:nth-child(5), body.qdn-mo-on .qdn-pag .is-in > .qdn-set-area:nth-child(5){transition-delay:.32s} @media (prefers-reduced-motion:reduce){ .qdn-pag .qdn-set-area{transition:none !important} body.qdn-mo-on .qdn-pag .qdn-set-giornata > .qdn-set-tappa, body.qdn-mo-on .qdn-pag .qdn-set-aree > .qdn-set-area{ opacity:1 !important; transform:none !important; transition:none !important; } } /* 53. Rete di sicurezza alle larghezze minime. */ @media (max-width:420px){ .qdn-pag .qdn-set-area{padding:18px 18px 20px} .qdn-pag .qdn-set-tappa{padding-left:22px} } .qdn-pag .qdn-set-tappa,.qdn-pag .qdn-set-area, .qdn-pag .qdn-set-giornata,.qdn-pag .qdn-set-aree{min-width:0} /* ===== QDN LANDING SETTORE v5 — UFFICI - FINE ===== */ /* ===== QDN LANDING SETTORE v6 — RETAIL - INIZIO ===== * Componenti propri della pagina Retail (37563). Il blocco v4 (31-48) resta * la base comune; il v5 (49-53) e' di Uffici e qui NON si usa. * Firma visiva di Retail: la soglia in quattro tempi e la rete dei punti * vendita. Nessuno dei due assomiglia alla griglia bento di Hotel o alla * timeline di Uffici. * ------------------------------------------------------------------ */ /* 54. LA SOGLIA — firma visiva di Retail. * Quattro tempi in sequenza (vetrina, ingresso, percorso, prova e cassa). * A differenza della timeline di Uffici, che ha i punti su un binario, qui * ogni tempo e' un pannello con un numero grande sullo sfondo e una freccia * d'ottone che porta al successivo: si legge come un avanzamento, non come * un orario. Quattro colonne fino a 900px, poi UNA sola: mai due, perche' * con quattro elementi la sequenza si spezzerebbe a meta' (lezione par. 9.4). */ .qdn-pag .qdn-set-soglia{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin-top:44px; align-items:stretch; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-set-tempo{ position:relative; padding:30px 30px 32px 0; overflow:hidden; border-top:1px solid rgba(176,137,90,.34); } /* il numero grande, sfumato sullo sfondo */ .qdn-pag .qdn-set-tempo .qdn-set-tempo-n .elementor-heading-title{ font-family:var(--qd); font-weight:300; font-size:58px; line-height:1; color:rgba(176,137,90,.26); margin:0 0 6px; font-variant-numeric:tabular-nums; } /* la freccia verso il tempo successivo */ .qdn-pag .qdn-set-soglia > .qdn-set-tempo:not(:last-child)::after{ content:""; position:absolute; top:-5px; right:22px; width:9px; height:9px; border-top:1.5px solid var(--pgo); border-right:1.5px solid var(--pgo); transform:rotate(45deg); } .qdn-pag .qdn-set-tempo .qdn-set-tempo-tit .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:19px; line-height:1.22; color:var(--pgc); margin:0; } .qdn-pag .qdn-set-tempo .qdn-set-tempo-txt{margin:9px 0 0} .qdn-pag .qdn-set-tempo .qdn-set-tempo-txt p{ font-size:14px; line-height:1.56; color:rgba(244,239,230,.7); margin:0; } @media (max-width:900px){ .qdn-pag .qdn-set-soglia{grid-template-columns:1fr; margin-top:34px} .qdn-pag .qdn-set-tempo{ border-top:0; border-left:1px solid rgba(176,137,90,.34); padding:0 0 26px 26px; } .qdn-pag .qdn-set-tempo:last-child{padding-bottom:0} /* in verticale la freccia punta in basso e sta sul binario */ .qdn-pag .qdn-set-soglia > .qdn-set-tempo:not(:last-child)::after{ top:auto; bottom:8px; right:auto; left:-5px; transform:rotate(135deg); } .qdn-pag .qdn-set-tempo .qdn-set-tempo-n .elementor-heading-title{font-size:40px} .qdn-pag .qdn-set-tempo .qdn-set-tempo-txt p{font-size:15px} } /* 55. LA RETE — secondo componente proprio. * Due colonne affiancate con un filetto d'ottone in mezzo: a sinistra cio' * che resta uguale in tutti i punti vendita, a destra cio' che si rifa' * sede per sede. E' un confronto, non un elenco: la forma dice il contenuto. * ⛔ Nessun numero di negozi, nessun caso cliente: solo il criterio. */ .qdn-pag .qdn-set-rete{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin-top:40px; align-items:stretch; border-top:1px solid rgba(28,26,23,.16); border-bottom:1px solid rgba(28,26,23,.16); --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-set-colonna{padding:28px 30px 30px 0} .qdn-pag .qdn-set-rete > .qdn-set-colonna:nth-child(2){ padding-left:30px; border-left:1px solid var(--pgo-t); } @media (max-width:800px){ .qdn-pag .qdn-set-rete{grid-template-columns:1fr} .qdn-pag .qdn-set-rete > .qdn-set-colonna:nth-child(2){ padding-left:0; border-left:0; border-top:1px solid var(--pgo-t); } .qdn-pag .qdn-set-colonna{padding-right:0} } .qdn-pag .qdn-set-colonna .qdn-set-col-eti .elementor-heading-title{ font-family:var(--qb); font-size:11.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--pgo-t); margin:0 0 12px; } .qdn-pag .qdn-set-colonna .qdn-set-col-tit .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:23px; line-height:1.22; color:var(--pgi); margin:0 0 14px; } .qdn-pag .qdn-set-colonna ul{margin:0; padding:0; list-style:none} .qdn-pag .qdn-set-colonna li{ font-size:15px; line-height:1.55; color:var(--pgsc); padding:11px 0 11px 20px; position:relative; } .qdn-pag .qdn-set-colonna li + li{border-top:1px solid rgba(28,26,23,.1)} .qdn-pag .qdn-set-colonna li::before{ content:""; position:absolute; left:0; top:19px; width:7px; height:1px; background:var(--pgo-t); } /* 56. Sfalsamento dentro i due componenti nuovi, stessa regola del 42: * nascosti solo sotto body.qdn-mo-on, quindi senza JavaScript nulla sparisce. */ body.qdn-mo-on .qdn-pag .qdn-set-soglia > .qdn-set-tempo, body.qdn-mo-on .qdn-pag .qdn-set-rete > .qdn-set-colonna{ opacity:0; transform:translate3d(0,16px,0); } body.qdn-mo-on .qdn-pag .qdn-set-soglia.is-in > .qdn-set-tempo, body.qdn-mo-on .qdn-pag .qdn-set-rete.is-in > .qdn-set-colonna{ opacity:1; transform:none; transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1); } body.qdn-mo-on .qdn-pag .is-in > .qdn-set-tempo:nth-child(1), body.qdn-mo-on .qdn-pag .is-in > .qdn-set-colonna:nth-child(1){transition-delay:0s} body.qdn-mo-on .qdn-pag .is-in > .qdn-set-tempo:nth-child(2), body.qdn-mo-on .qdn-pag .is-in > .qdn-set-colonna:nth-child(2){transition-delay:.09s} body.qdn-mo-on .qdn-pag .is-in > .qdn-set-tempo:nth-child(3){transition-delay:.18s} body.qdn-mo-on .qdn-pag .is-in > .qdn-set-tempo:nth-child(4){transition-delay:.27s} @media (prefers-reduced-motion:reduce){ body.qdn-mo-on .qdn-pag .qdn-set-soglia > .qdn-set-tempo, body.qdn-mo-on .qdn-pag .qdn-set-rete > .qdn-set-colonna{ opacity:1 !important; transform:none !important; transition:none !important; } } /* 57. Rete di sicurezza alle larghezze minime e contro lo sbordo. */ @media (max-width:420px){ .qdn-pag .qdn-set-tempo{padding-left:22px} .qdn-pag .qdn-set-colonna{padding:22px 0 24px} } .qdn-pag .qdn-set-tempo,.qdn-pag .qdn-set-colonna, .qdn-pag .qdn-set-soglia,.qdn-pag .qdn-set-rete{min-width:0} /* ===== QDN LANDING SETTORE v6 — RETAIL - FINE ===== */ /* ===== QDN LANDING SETTORE v7 — SHOWROOM - INIZIO ===== * Componenti propri della pagina Showroom e auto (37567). * Il v4 (31-48) resta la base comune; v5 (Uffici) e v6 (Retail) NON si usano qui. * * Firma visiva: QUATTRO GRANDI ZONE come fasce orizzontali a tutta * larghezza — non una griglia di schede. In uno showroom le zone sono * poche e grandi, e la pagina deve leggersi cosi': quattro respiri, non * dieci celle. E' l'opposto della bento di Hotel, per scelta. * ------------------------------------------------------------------ */ /* 58. LE QUATTRO ZONE — firma visiva di Showroom. * Ogni zona e' una FASCIA orizzontale: a sinistra numero e titolo, a * destra il testo, separate da un filetto d'ottone che attraversa tutta * la larghezza. Il ritmo e' lento e ampio, come lo spazio che descrive. */ .qdn-pag .qdn-set-zone{ display:block; margin-top:40px; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-set-zona{ display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,.58fr); gap:clamp(24px,4vw,64px); align-items:start; padding:38px 0 40px; border-top:1px solid rgba(176,137,90,.34); --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-set-zone > .qdn-set-zona:last-child{border-bottom:1px solid rgba(176,137,90,.34)} @media (max-width:880px){ .qdn-pag .qdn-set-zona{grid-template-columns:1fr; gap:14px; padding:30px 0 32px} } .qdn-pag .qdn-set-zona .qdn-set-zona-n .elementor-heading-title{ font-family:var(--qd); font-weight:300; font-size:clamp(30px,3.4vw,44px); line-height:1; color:var(--pgo); margin:0 0 10px; font-variant-numeric:tabular-nums; } .qdn-pag .qdn-set-zona .qdn-set-zona-tit .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:clamp(21px,2.3vw,28px); line-height:1.18; color:var(--pgc); margin:0; max-width:14ch; } .qdn-pag .qdn-set-zona .qdn-set-zona-txt p{ font-size:16px; line-height:1.64; color:rgba(244,239,230,.74); margin:0; max-width:62ch; } .qdn-pag .qdn-set-zona .qdn-set-zona-txt p + p{margin-top:.9em} /* 59. IL MOMENTO DELLA CONSEGNA — secondo componente proprio. * Fotografia a tutta larghezza con un riquadro di testo che la scavalca * verso l'alto: e' l'unica sovrapposizione di tutto il sito, e serve a * dare peso al passaggio piu' commerciale della pagina. Su telefono la * sovrapposizione sparisce e i due blocchi si impilano. */ .qdn-pag.qdn-set-consegna{--padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px} .qdn-pag .qdn-set-consegna-foto{max-width:none; line-height:0} .qdn-pag .qdn-set-consegna-foto img{ width:100%; height:clamp(280px,40vw,520px); object-fit:cover; display:block; } .qdn-pag .qdn-set-consegna-testo{ background:var(--pgi2); border:1px solid rgba(176,137,90,.4); padding:clamp(28px,4vw,52px); width:min(680px, calc(100% - 40px)); margin:-90px auto 0; position:relative; z-index:2; } @media (max-width:880px){ .qdn-pag .qdn-set-consegna-testo{margin-top:0; width:100%; border-left:0; border-right:0} } /* Variante SENZA fotografia: le uniche due immagini di showroom in * libreria, oltre a quella d'apertura, mostrano auto avvolte da fumo denso * in un capannone scuro — un look da racing/detailing che il mandato * esclude. Meglio una composizione che non ne ha bisogno che una banda * a tutta larghezza con un segnaposto tratteggiato. La fotografia giusta * resta nell'elenco di quelle da produrre. */ .qdn-pag .qdn-set-consegna-testo.qdn-set-senza-foto{margin-top:0} .qdn-pag .qdn-set-consegna-testo .qdn-set-consegna-eti .elementor-heading-title{ font-family:var(--qb); font-size:11.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--pgo); margin:0 0 12px; } .qdn-pag .qdn-set-consegna-testo .qdn-set-consegna-tit .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:clamp(23px,2.8vw,34px); line-height:1.2; color:var(--pgc); margin:0 0 16px; max-width:20ch; } .qdn-pag .qdn-set-consegna-testo p{ font-size:16px; line-height:1.64; color:rgba(244,239,230,.76); margin:0; max-width:60ch; } .qdn-pag .qdn-set-consegna-testo p + p{margin-top:.9em} /* 60. Sfalsamento dentro le zone, stessa regola del 42: nascosti solo * sotto body.qdn-mo-on, quindi senza JavaScript non sparisce nulla. */ body.qdn-mo-on .qdn-pag .qdn-set-zone > .qdn-set-zona{ opacity:0; transform:translate3d(0,16px,0); } body.qdn-mo-on .qdn-pag .qdn-set-zone.is-in > .qdn-set-zona{ opacity:1; transform:none; transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1); } body.qdn-mo-on .qdn-pag .is-in > .qdn-set-zona:nth-child(1){transition-delay:0s} body.qdn-mo-on .qdn-pag .is-in > .qdn-set-zona:nth-child(2){transition-delay:.1s} body.qdn-mo-on .qdn-pag .is-in > .qdn-set-zona:nth-child(3){transition-delay:.2s} body.qdn-mo-on .qdn-pag .is-in > .qdn-set-zona:nth-child(4){transition-delay:.3s} /* la fotografia della consegna si scopre dal basso, come quelle di apertura */ body.qdn-mo-on .qdn-pag .qdn-set-consegna-foto img{ clip-path:inset(14% 0 0 0); transition:clip-path 1.05s cubic-bezier(.22,.61,.36,1); } body.qdn-mo-on .qdn-pag .qdn-set-consegna-foto.is-in img{clip-path:inset(0 0 0 0)} @media (prefers-reduced-motion:reduce){ body.qdn-mo-on .qdn-pag .qdn-set-zone > .qdn-set-zona{ opacity:1 !important; transform:none !important; transition:none !important; } body.qdn-mo-on .qdn-pag .qdn-set-consegna-foto img{ clip-path:none !important; transition:none !important; } } /* 61. Rete di sicurezza alle larghezze minime e contro lo sbordo. */ @media (max-width:420px){ .qdn-pag .qdn-set-zona{padding:24px 0 26px} .qdn-pag .qdn-set-consegna-testo{padding:24px 20px} } .qdn-pag .qdn-set-zona,.qdn-pag .qdn-set-zone, .qdn-pag .qdn-set-consegna-testo{min-width:0} .qdn-pag .qdn-set-consegna-foto img{max-width:100%} /* ===== QDN LANDING SETTORE v7 — SHOWROOM - FINE ===== */ /* ===== QDN LANDING SETTORE v8 - PALESTRE E SPA - INIZIO ===== * Componenti propri della pagina Palestre, centri fitness e SPA (37565). * Il v4 (31-48) resta la base comune; v5, v6 e v7 NON si usano qui. * * Firma visiva: DUE PERCORSI PARALLELI. Fitness e Wellness/SPA convivono * nello stesso edificio ma chiedono all'aria cose opposte, e la pagina * deve mostrarlo con la forma, non solo dirlo con le parole. Due binari * affiancati, ognuno con le proprie fermate e il proprio tono di colore. * ------------------------------------------------------------------ */ /* 62. DOPPIO FONDO - la fascia che enuncia la tesi. * Una sola banda a tutta larghezza divisa in due terreni: a sinistra il * lato fitness (piu' freddo e netto), a destra il lato wellness (piu' * caldo e basso). Non e' una tabella di confronto: e' un'immagine sola * che si legge in un secondo. */ .qdn-pag .qdn-set-doppiofondo{ display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:32px; border:1px solid rgba(176,137,90,.34); --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-set-df-lato{ padding:clamp(26px,3.4vw,44px); --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-set-df-fitness{background:#1F1E1C; border-right:1px solid rgba(176,137,90,.34)} .qdn-pag .qdn-set-df-wellness{background:#262220} @media (max-width:820px){ .qdn-pag .qdn-set-doppiofondo{grid-template-columns:1fr} .qdn-pag .qdn-set-df-fitness{border-right:0; border-bottom:1px solid rgba(176,137,90,.34)} } .qdn-pag .qdn-set-df-lato .qdn-set-df-eti .elementor-heading-title{ font-family:var(--qb); font-size:11.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--pgo); margin:0 0 14px; } .qdn-pag .qdn-set-df-lato .qdn-set-df-tit .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:clamp(20px,2.4vw,27px); line-height:1.2; color:var(--pgc); margin:0 0 14px; max-width:18ch; } .qdn-pag .qdn-set-df-lato p{ font-size:16px; line-height:1.64; color:rgba(244,239,230,.74); margin:0; max-width:46ch; } /* 63. I DUE BINARI - firma visiva della pagina. * Due colonne affiancate, ognuna con un filetto d'ottone verticale e le * proprie fermate. Corrono in parallelo e non si incontrano mai: e' il * punto della pagina. Sotto gli 900 px si impilano, ma ciascuna conserva * il proprio filetto, cosi' restano due percorsi e non una lista sola. */ .qdn-pag .qdn-set-binari{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,58px); margin-top:40px; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } @media (max-width:900px){ .qdn-pag .qdn-set-binari{grid-template-columns:1fr; gap:44px} } .qdn-pag .qdn-set-binario{ position:relative; padding-left:26px; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-set-binario::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; height:auto; /* senza height:auto Elementor impone height:100% e bottom:6px viene ignorato */ background:linear-gradient(180deg,rgba(176,137,90,.65),rgba(176,137,90,.16)); } .qdn-pag .qdn-set-binario .qdn-set-bin-eti .elementor-heading-title{ font-family:var(--qb); font-size:11.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--pgo); margin:0 0 6px; } .qdn-pag .qdn-set-binario .qdn-set-bin-tit .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:clamp(21px,2.3vw,27px); line-height:1.2; color:var(--pgc); margin:0 0 22px; } .qdn-pag .qdn-set-fermata{ position:relative; padding:0 0 24px; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-set-fermata:last-child{padding-bottom:0} .qdn-pag .qdn-set-fermata::before{ content:""; position:absolute; left:-30px; top:9px; width:7px; height:7px; border-radius:50%; background:var(--pgo); } .qdn-pag .qdn-set-fermata .qdn-set-ferm-tit .elementor-heading-title{ font-family:var(--qb); font-weight:600; font-size:15.5px; letter-spacing:.01em; color:var(--pgc); margin:0 0 5px; } .qdn-pag .qdn-set-fermata .qdn-set-ferm-txt p{ font-size:15.5px; line-height:1.6; color:rgba(244,239,230,.72); margin:0; max-width:48ch; } /* 64. Sfalsamento dentro i binari: le fermate compaiono una dopo l'altra, * le due colonne insieme. Nascosti SOLO sotto body.qdn-mo-on: senza * JavaScript non sparisce nulla (lezione par. 2-undecies). */ body.qdn-mo-on .qdn-pag .qdn-set-binari .qdn-set-fermata{ opacity:0; transform:translate3d(0,14px,0); } body.qdn-mo-on .qdn-pag .qdn-set-binari.is-in .qdn-set-fermata{ opacity:1; transform:none; transition:opacity .48s cubic-bezier(.22,.61,.36,1), transform .48s cubic-bezier(.22,.61,.36,1); } body.qdn-mo-on .qdn-pag .is-in .qdn-set-fermata:nth-child(2){transition-delay:.08s} body.qdn-mo-on .qdn-pag .is-in .qdn-set-fermata:nth-child(3){transition-delay:.16s} body.qdn-mo-on .qdn-pag .is-in .qdn-set-fermata:nth-child(4){transition-delay:.24s} body.qdn-mo-on .qdn-pag .is-in .qdn-set-fermata:nth-child(5){transition-delay:.32s} body.qdn-mo-on .qdn-pag .qdn-set-doppiofondo > .qdn-set-df-lato{ opacity:0; transform:translate3d(0,12px,0); } body.qdn-mo-on .qdn-pag .qdn-set-doppiofondo.is-in > .qdn-set-df-lato{ opacity:1; transform:none; transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1); } body.qdn-mo-on .qdn-pag .qdn-set-doppiofondo.is-in > .qdn-set-df-lato:nth-child(2){transition-delay:.12s} @media (prefers-reduced-motion:reduce){ body.qdn-mo-on .qdn-pag .qdn-set-binari .qdn-set-fermata, body.qdn-mo-on .qdn-pag .qdn-set-doppiofondo > .qdn-set-df-lato{ opacity:1 !important; transform:none !important; transition:none !important; } } /* 65. Rete di sicurezza alle larghezze minime e contro lo sbordo. */ @media (max-width:420px){ .qdn-pag .qdn-set-df-lato{padding:22px 18px} .qdn-pag .qdn-set-binario{padding-left:22px} .qdn-pag .qdn-set-fermata::before{left:-26px} } .qdn-pag .qdn-set-binari,.qdn-pag .qdn-set-binario,.qdn-pag .qdn-set-fermata, .qdn-pag .qdn-set-doppiofondo,.qdn-pag .qdn-set-df-lato{min-width:0} /* ===== QDN LANDING SETTORE v8 - PALESTRE E SPA - FINE ===== */ /* ===== QDN PAGINA HUB v9 - PROFUMAZIONE AMBIENTALE - INIZIO ===== * Componenti propri della pagina madre (62). Non sono una variante di * una landing di settore: una pagina hub ha un compito diverso, cioe' * far percepire un PERCORSO e smistare verso il ramo giusto. * * Lo sticky NON viene ridefinito qui: si usa esclusivamente il sistema * condiviso del componente 40 (.qdn-set-fermo, --qdn-sticky-offset). * ------------------------------------------------------------------ */ /* 66. IL FILO - firma visiva della pagina hub. * Le sei tappe del percorso su una riga, unite da un filetto d'ottone * continuo che passa dietro i pallini. Non e' un menu decorativo: ogni * tappa porta alla propria sezione, quindi la pagina si puo' leggere * anche saltando. Sotto i 900px diventa una colonna con il filo * verticale, cosi' resta un percorso e non una fila di pulsanti. */ .qdn-pag .qdn-hub-filo{ position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; margin-top:44px; padding:0; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-hub-filo::before{ content:""; position:absolute; left:8%; right:8%; top:11px; height:1px; width:auto; /* senza width:auto Elementor impone width:100% allo pseudo e right:8% viene ignorato */ background:linear-gradient(90deg,rgba(176,137,90,.18),rgba(176,137,90,.6),rgba(176,137,90,.18)); } .qdn-pag .qdn-hub-tappa{ position:relative; padding:0 10px; text-align:center; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-hub-tappa::before{ content:""; position:absolute; left:50%; top:6px; width:11px; height:11px; margin-left:-5.5px; border-radius:50%; background:var(--pgi); border:1px solid var(--pgo); } .qdn-pag .qdn-hub-tappa.qdn-hub-tappa-on::before{background:var(--pgo)} .qdn-pag .qdn-hub-tappa .elementor-widget-container{padding-top:34px} .qdn-pag .qdn-hub-tappa a, .qdn-pag .qdn-hub-tappa .elementor-heading-title{ font-family:var(--qb); font-size:13.5px; font-weight:500; letter-spacing:.02em; line-height:1.35; color:var(--pgc); text-decoration:none; display:block; } .qdn-pag .qdn-hub-tappa a{border-bottom:0} @media (hover:hover){ .qdn-pag .qdn-hub-tappa a:hover{color:var(--pgo-t)} } .qdn-pag .qdn-hub-tappa a:focus-visible{ outline:2px solid var(--pgo-t); outline-offset:4px; border-radius:2px; } @media (max-width:900px){ .qdn-pag .qdn-hub-filo{grid-template-columns:1fr; gap:0; margin-top:32px} .qdn-pag .qdn-hub-filo::before{ left:5px; right:auto; top:8px; bottom:8px; width:1px; height:auto; background:linear-gradient(180deg,rgba(176,137,90,.6),rgba(176,137,90,.18)); } .qdn-pag .qdn-hub-tappa{text-align:left; padding:0 0 0 26px} .qdn-pag .qdn-hub-tappa::before{left:0; top:14px; margin-left:0} .qdn-pag .qdn-hub-tappa .elementor-widget-container{padding:9px 0} } /* 67. LE SEI DOMANDE - da dove parte un progetto. * Griglia di sei celle con il numero in ottone e la domanda in * evidenza; sotto, in tono minore, perche' quella domanda cambia il * progetto. Tre colonne, poi due, poi una: con sei celle nessuna riga * resta monca (lezione par. 9.4). */ .qdn-pag .qdn-hub-dom{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:rgba(176,137,90,.26); margin-top:40px; border:1px solid rgba(176,137,90,.26); --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } @media (max-width:1000px){.qdn-pag .qdn-hub-dom{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:620px){.qdn-pag .qdn-hub-dom{grid-template-columns:1fr}} .qdn-pag .qdn-hub-d{ background:var(--pgi); padding:clamp(24px,2.6vw,34px); min-width:0; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-hub-d .qdn-hub-d-n .elementor-heading-title{ font-family:var(--qd); font-weight:300; font-size:26px; line-height:1; color:var(--pgo); margin:0 0 14px; font-variant-numeric:tabular-nums; } .qdn-pag .qdn-hub-d .qdn-hub-d-q .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:clamp(19px,2vw,23px); line-height:1.25; color:var(--pgc); margin:0 0 12px; max-width:20ch; } .qdn-pag .qdn-hub-d .qdn-hub-d-t p{ font-size:15.5px; line-height:1.6; color:rgba(244,239,230,.72); margin:0; max-width:44ch; } /* 68. LE SEI PORTE - i settori, come smistamento non come catalogo. * Schede con fotografia in alto, etichetta e una riga sola di seguito: * la pagina hub non racconta il settore, ci porta. La freccia in fondo * dichiara che si esce dalla pagina. */ .qdn-pag .qdn-hub-porte{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2vw,26px); margin-top:40px; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } @media (max-width:1000px){.qdn-pag .qdn-hub-porte{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:620px){.qdn-pag .qdn-hub-porte{grid-template-columns:1fr}} .qdn-pag .qdn-hub-porta{ position:relative; display:flex; flex-direction:column; min-width:0; border:1px solid rgba(244,239,230,.14); background:#23211D; overflow:hidden; transition:border-color .3s ease, transform .3s ease; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-hub-porta .elementor-widget-image{line-height:0; margin:0} .qdn-pag .qdn-hub-porta img{ width:100%; height:clamp(140px,15vw,184px); object-fit:cover; display:block; filter:saturate(.74) contrast(1.04) brightness(.9); transition:transform .55s cubic-bezier(.22,.61,.36,1), filter .35s ease; } .qdn-pag .qdn-hub-porta .qdn-hub-porta-corpo{padding:22px 24px 24px} .qdn-pag .qdn-hub-porta .qdn-hub-porta-tit .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:clamp(19px,2vw,22px); line-height:1.2; color:var(--pgc); margin:0 0 8px; } .qdn-pag .qdn-hub-porta .qdn-hub-porta-txt p{ font-size:15px; line-height:1.55; color:rgba(244,239,230,.7); margin:0 0 16px; max-width:38ch; } .qdn-pag .qdn-hub-porta .qdn-hub-porta-link a{ font-family:var(--qb); font-size:13.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--pgo); text-decoration:none; } .qdn-pag .qdn-hub-porta .qdn-hub-porta-link a::after{content:" \2192"} @media (hover:hover){ .qdn-pag .qdn-hub-porta:hover{border-color:rgba(176,137,90,.5)} .qdn-pag .qdn-hub-porta:hover img{transform:scale(1.045); filter:saturate(.8) contrast(1.04) brightness(.96)} } .qdn-pag .qdn-hub-porta a:focus-visible{outline:2px solid var(--pgo-t); outline-offset:3px} /* Porta senza fotografia: non si mette un segnaposto tratteggiato in * una griglia di sei, sbilancerebbe tutto. Si compensa con un filetto * d'ottone in alto, cosi' la cella resta piena e dichiarata. */ .qdn-pag .qdn-hub-porta.qdn-hub-porta-senzafoto{border-top:2px solid var(--pgo)} .qdn-pag .qdn-hub-porta.qdn-hub-porta-senzafoto .qdn-hub-porta-corpo{padding-top:30px} /* 69. Sfalsamento dei componenti nuovi, stessa regola del 42: nascosti * SOLO sotto body.qdn-mo-on, quindi senza JavaScript non sparisce nulla. */ body.qdn-mo-on .qdn-pag .qdn-hub-dom > .qdn-hub-d, body.qdn-mo-on .qdn-pag .qdn-hub-porte > .qdn-hub-porta, body.qdn-mo-on .qdn-pag .qdn-hub-filo > .qdn-hub-tappa{ opacity:0; transform:translate3d(0,14px,0); } body.qdn-mo-on .qdn-pag .qdn-hub-dom.is-in > .qdn-hub-d, body.qdn-mo-on .qdn-pag .qdn-hub-porte.is-in > .qdn-hub-porta, body.qdn-mo-on .qdn-pag .qdn-hub-filo.is-in > .qdn-hub-tappa{ opacity:1; transform:none; transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1); } body.qdn-mo-on .qdn-pag .is-in > .qdn-hub-d:nth-child(2), body.qdn-mo-on .qdn-pag .is-in > .qdn-hub-porta:nth-child(2), body.qdn-mo-on .qdn-pag .is-in > .qdn-hub-tappa:nth-child(2){transition-delay:.06s} body.qdn-mo-on .qdn-pag .is-in > .qdn-hub-d:nth-child(3), body.qdn-mo-on .qdn-pag .is-in > .qdn-hub-porta:nth-child(3), body.qdn-mo-on .qdn-pag .is-in > .qdn-hub-tappa:nth-child(3){transition-delay:.12s} body.qdn-mo-on .qdn-pag .is-in > .qdn-hub-d:nth-child(4), body.qdn-mo-on .qdn-pag .is-in > .qdn-hub-porta:nth-child(4), body.qdn-mo-on .qdn-pag .is-in > .qdn-hub-tappa:nth-child(4){transition-delay:.18s} body.qdn-mo-on .qdn-pag .is-in > .qdn-hub-d:nth-child(5), body.qdn-mo-on .qdn-pag .is-in > .qdn-hub-porta:nth-child(5), body.qdn-mo-on .qdn-pag .is-in > .qdn-hub-tappa:nth-child(5){transition-delay:.24s} body.qdn-mo-on .qdn-pag .is-in > .qdn-hub-d:nth-child(6), body.qdn-mo-on .qdn-pag .is-in > .qdn-hub-porta:nth-child(6), body.qdn-mo-on .qdn-pag .is-in > .qdn-hub-tappa:nth-child(6){transition-delay:.3s} @media (prefers-reduced-motion:reduce){ body.qdn-mo-on .qdn-pag .qdn-hub-dom > .qdn-hub-d, body.qdn-mo-on .qdn-pag .qdn-hub-porte > .qdn-hub-porta, body.qdn-mo-on .qdn-pag .qdn-hub-filo > .qdn-hub-tappa{ opacity:1 !important; transform:none !important; transition:none !important; } .qdn-pag .qdn-hub-porta img{transition:none !important} } /* 70. Rete di sicurezza alle larghezze minime e contro lo sbordo. */ @media (max-width:420px){ .qdn-pag .qdn-hub-d{padding:20px 18px} .qdn-pag .qdn-hub-porta .qdn-hub-porta-corpo{padding:18px 18px 20px} } .qdn-pag .qdn-hub-filo,.qdn-pag .qdn-hub-tappa, .qdn-pag .qdn-hub-dom,.qdn-pag .qdn-hub-d, .qdn-pag .qdn-hub-porte,.qdn-pag .qdn-hub-porta{min-width:0} .qdn-pag .qdn-hub-porta img{max-width:100%} /* 70-bis. Due complementi minimi del sistema condiviso, usati solo qui. * - qdn-hub-due: due celle affiancate (il foglio ha la griglia a tre e a * cinque, non a due) e una sola sotto i 760px. * - qdn-hub-col: la colonna di testo accanto al titolo appiccicato, * senza stili propri oltre al min-width che evita lo sbordo. * - qdn-hub-cta-min: il secondo pulsante dell'apertura, tenuto in tono * minore perche' due pulsanti identici affiancati si annullano. */ .qdn-pag .qdn-hub-due{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.4vw,32px); --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } @media (max-width:760px){.qdn-pag .qdn-hub-due{grid-template-columns:1fr}} .qdn-pag .qdn-hub-due,.qdn-pag .qdn-hub-col{min-width:0} .qdn-pag .qdn-hub-col{--padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px} .qdn-pag .qdn-p-azioni .qdn-hub-cta-min .elementor-button{ background:transparent; border-color:transparent; padding-left:6px; padding-right:6px; text-decoration:underline; text-underline-offset:5px; } .qdn-pag .qdn-p-azioni .qdn-hub-cta-min .elementor-button:hover, .qdn-pag .qdn-p-azioni .qdn-hub-cta-min .elementor-button:focus-visible{ background:transparent; color:var(--pgo); border-color:transparent; } /* ===== QDN PAGINA HUB v9 - PROFUMAZIONE AMBIENTALE - FINE ===== */ /* ========================================================= * QDN LANDING SETTORE v10 - GRANDI SPAZI (componenti 71-75) * 29 settembre 2026. Solo staging. * * Firma visiva: la pagina deve sembrare una SCHEDA DI RILIEVO * su scala ampia, non una landing fotografica. Niente bento * (Hotel), niente timeline oraria (Uffici), niente soglia in * quattro tempi (Retail), niente fasce-zona (Showroom), * niente binari paralleli (Palestre), niente filo (hub). * Qui il linguaggio e' quello del disegno tecnico: geometrie * squadrate, filetti sottili, sigle, numerazione progressiva. * * ⛔ REGOLA APPRESA IL 29/09 (vedi CLAUDE.md §2-octovicies): * uno pseudo-elemento in posizione assoluta dentro un * contenitore Elementor DEVE dichiarare width e height, anche * "auto", altrimenti eredita quella di Elementor e le coppie * left/right e top/bottom smettono di funzionare in silenzio. * In questo blocco gli pseudo posizionati sono evitati dove * basta un bordo; dove ci sono, la misura e' dichiarata. * * Nessun JavaScript nuovo. Le uniche regole che nascondono * sono condizionate a body.qdn-mo-on (componente 75-bis). * ========================================================= */ /* 71. LA SCALA - quattro volumi crescenti a confronto. * Serve a dire una cosa sola, e a dirla senza numeri: passare * a un volume piu' grande non e' una moltiplicazione. I quattro * blocchi sono allineati sulla linea di terra come una sezione * di edificio; le altezze sono proporzioni visive, NON dati. * La linea di terra e' un border-bottom, non uno pseudo: meno * codice e nessuna trappola di misura. */ .qdn-pag .qdn-gs-scala{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 clamp(14px,2vw,28px); align-items:end; border-bottom:1px solid rgba(176,137,90,.5); padding:0 0 0 0; margin-top:40px; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-gs-vol{ display:flex; flex-direction:column; justify-content:flex-end; min-width:0; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } /* i quattro blocchi: altezze in proporzione, non in scala reale */ .qdn-pag .qdn-gs-vol .qdn-gs-vol-b{ border:1px solid rgba(176,137,90,.42); border-bottom:0; background:linear-gradient(180deg,rgba(176,137,90,.02),rgba(176,137,90,.10)); width:100%; margin-top:18px; } .qdn-pag .qdn-gs-vol-1 .qdn-gs-vol-b{height:clamp(26px,3.4vw,44px)} .qdn-pag .qdn-gs-vol-2 .qdn-gs-vol-b{height:clamp(46px,6vw,78px)} .qdn-pag .qdn-gs-vol-3 .qdn-gs-vol-b{height:clamp(74px,9.6vw,124px)} .qdn-pag .qdn-gs-vol-4 .qdn-gs-vol-b{height:clamp(110px,14.4vw,186px)} .qdn-pag .qdn-gs-vol .qdn-gs-vol-eti .elementor-heading-title{ font-family:var(--qb); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--pgo); margin:0 0 4px; } .qdn-pag .qdn-gs-vol .qdn-gs-vol-tit .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:clamp(16px,1.7vw,20px); line-height:1.2; color:var(--pgc); margin:0; } /* il testo sta SOTTO la linea di terra: e' didascalia, non contenuto del blocco */ .qdn-pag .qdn-gs-didascalie{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 clamp(14px,2vw,28px); margin-top:16px; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-gs-didascalie .qdn-gs-dida{min-width:0; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-gs-dida p{ font-family:var(--qb); font-size:13.5px; line-height:1.5; color:var(--pgc); opacity:.76; margin:0; } @media (max-width:900px){ /* due colonne, mai una sola: la scala si legge solo per confronto */ .qdn-pag .qdn-gs-scala, .qdn-pag .qdn-gs-didascalie{grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px} .qdn-pag .qdn-gs-didascalie{row-gap:18px} .qdn-pag .qdn-gs-scala{padding-bottom:0} } /* 72. LA PIANTA A ZONE - la mappa concettuale dello spazio. * E' il cuore della pagina: in un grande volume la prima * decisione non e' tecnica, e' topografica. Griglia a 12 * colonne con campate di ampiezza diversa, cosi' l'insieme si * legge come una tavola e non come quattro schede uguali. * Angoli vivi e filetti sottili: linguaggio da disegno. */ .qdn-pag .qdn-gs-pianta{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px); margin-top:40px; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-gs-zona{ grid-column:span 6; min-width:0; border:1px solid rgba(176,137,90,.34); border-radius:0; padding:clamp(22px,2.4vw,30px) clamp(20px,2.2vw,28px); background:rgba(176,137,90,.045); --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } /* campate diverse: A larga, B stretta, C stretta, D larga */ .qdn-pag .qdn-gs-zona-a{grid-column:span 7} .qdn-pag .qdn-gs-zona-b{grid-column:span 5} .qdn-pag .qdn-gs-zona-c{grid-column:span 5} .qdn-pag .qdn-gs-zona-d{grid-column:span 7} .qdn-pag .qdn-gs-zona .qdn-gs-z-l .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:clamp(30px,3.4vw,42px); line-height:1; color:var(--pgo); margin:0 0 2px; } .qdn-pag .qdn-gs-zona .qdn-gs-z-tit .elementor-heading-title{ font-family:var(--qb); font-size:12px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--pgc); opacity:.92; margin:0 0 14px; } .qdn-pag .qdn-gs-zona .qdn-gs-z-txt p{ font-family:var(--qb); font-size:15.5px; line-height:1.62; color:var(--pgc); opacity:.84; margin:0; } .qdn-pag .qdn-gs-zona .qdn-gs-z-txt p + p{margin-top:12px} /* sulle sezioni chiare il testo torna inchiostro */ .qdn-pag.qdn-p-sez-chiaro .qdn-gs-zona .qdn-gs-z-tit .elementor-heading-title, .qdn-pag.qdn-p-sez-chiaro .qdn-gs-zona .qdn-gs-z-txt p{color:var(--pgi)} @media (max-width:900px){ .qdn-pag .qdn-gs-pianta{grid-template-columns:1fr} .qdn-pag .qdn-gs-zona, .qdn-pag .qdn-gs-zona-a,.qdn-pag .qdn-gs-zona-b, .qdn-pag .qdn-gs-zona-c,.qdn-pag .qdn-gs-zona-d{grid-column:1 / -1} } /* 73. LA SCHEDA DI RILIEVO - il modulo tecnico. * Le voci che si rilevano in sopralluogo, impaginate come un * modulo compilato: sigla numerata a sinistra, descrizione a * destra, un filetto fra una riga e l'altra. Serve a far * vedere che il metodo esiste ed e' ordinato, senza promettere * nessun risultato. */ .qdn-pag .qdn-gs-rilievo{ margin-top:36px; border-top:1px solid rgba(176,137,90,.34); --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-gs-riga{ display:grid; grid-template-columns:minmax(0,224px) minmax(0,1fr); gap:clamp(12px,2vw,32px); align-items:start; padding:20px 0; border-bottom:1px solid rgba(176,137,90,.22); --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-gs-riga .qdn-gs-riga-eti .elementor-heading-title{ font-family:var(--qb); font-size:11.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--pgo); margin:0; line-height:1.5; } .qdn-pag .qdn-gs-riga .qdn-gs-riga-txt p{ font-family:var(--qb); font-size:16px; line-height:1.66; margin:0; color:var(--pgi); } .qdn-pag.qdn-p-sez-scuro .qdn-gs-riga .qdn-gs-riga-txt p{color:var(--pgc); opacity:.86} /* Contrasto dell'etichetta numerata. Sulla sezione crema2 (#EDE5D8) * l'ottone pieno misura 2,56:1 e l'ottone da testo 4,31:1: entrambi * sotto AA, misurato sulla pagina e non calcolato. Sui fondi chiari * passa all'inchiostro (13,89:1); il carattere del componente lo * tengono i filetti d'ottone, non il colore del testo. */ .qdn-pag.qdn-p-sez-chiaro .qdn-gs-riga .qdn-gs-riga-eti .elementor-heading-title{color:var(--pgi)} @media (max-width:760px){ .qdn-pag .qdn-gs-riga{grid-template-columns:1fr; gap:6px; padding:16px 0} } /* 74. IL PUNTO CHE SI DEFINISCE DOPO. * Riquadro dichiarativo, doppio filetto sopra e sotto. Dice * apertamente che la tecnologia si sceglie a valle del rilievo. * ⚠️ Non e' un segnaposto: e' il modo onesto di trattare un * punto che dipende dal contesto e non da una tabella. */ .qdn-pag .qdn-gs-dopo{ margin-top:40px; padding:clamp(30px,3.4vw,44px) clamp(22px,3vw,44px); border-top:2px solid var(--pgo); border-bottom:2px solid var(--pgo); background:rgba(176,137,90,.06); text-align:center; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-gs-dopo .qdn-gs-dopo-eti .elementor-heading-title{ font-family:var(--qb); font-size:11.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--pgo); margin:0 0 14px; } .qdn-pag .qdn-gs-dopo .qdn-gs-dopo-tit .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:clamp(23px,2.9vw,34px); line-height:1.24; color:var(--pgc); margin:0 auto 16px; max-width:20ch; text-wrap:balance; } .qdn-pag .qdn-gs-dopo .qdn-gs-dopo-txt p{ font-family:var(--qb); font-size:16.5px; line-height:1.68; color:var(--pgc); opacity:.86; margin:0 auto; max-width:62ch; } .qdn-pag .qdn-gs-dopo .qdn-gs-dopo-txt p + p{margin-top:14px} /* 75. I TIPI DI GRANDE SPAZIO - la legenda. * Sei voci, ognuna con la propria sigla e il proprio problema * dominante. Filetto d'ottone in testa: si legge come la * legenda di una tavola, non come sei schede prodotto. * Tre colonne, poi due, poi una: con sei celle nessuna riga * resta monca a nessuna delle tre misure. */ .qdn-pag .qdn-gs-tipi{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.6vw,34px); margin-top:40px; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-gs-tipo{ min-width:0; border-top:2px solid var(--pgo); padding:20px 0 0; --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } .qdn-pag .qdn-gs-tipo .qdn-gs-tipo-sig .elementor-heading-title{ font-family:var(--qb); font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--pgo); margin:0 0 8px; } .qdn-pag .qdn-gs-tipo .qdn-gs-tipo-tit .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:clamp(19px,2.1vw,24px); line-height:1.24; color:var(--pgc); margin:0 0 10px; } .qdn-pag .qdn-gs-tipo .qdn-gs-tipo-txt p{ font-family:var(--qb); font-size:15.5px; line-height:1.62; color:var(--pgc); opacity:.84; margin:0; } .qdn-pag.qdn-p-sez-chiaro .qdn-gs-tipo .qdn-gs-tipo-tit .elementor-heading-title, .qdn-pag.qdn-p-sez-chiaro .qdn-gs-tipo .qdn-gs-tipo-txt p{color:var(--pgi)} @media (max-width:1024px){ .qdn-pag .qdn-gs-tipi{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:620px){ .qdn-pag .qdn-gs-tipi{grid-template-columns:1fr} } /* 75-bis. Sfalsamento dei componenti nuovi. Stessa regola dei * componenti 42 e 69: nascosti SOLO sotto body.qdn-mo-on, * quindi senza JavaScript non sparisce niente. */ body.qdn-mo-on .qdn-pag .qdn-gs-tipi > .qdn-gs-tipo, body.qdn-mo-on .qdn-pag .qdn-gs-pianta > .qdn-gs-zona{ opacity:0; transform:translate3d(0,14px,0); } body.qdn-mo-on .qdn-pag .qdn-gs-tipi.is-in > .qdn-gs-tipo, body.qdn-mo-on .qdn-pag .qdn-gs-pianta.is-in > .qdn-gs-zona{ opacity:1; transform:none; transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1); } body.qdn-mo-on .qdn-pag .is-in > .qdn-gs-tipo:nth-child(2), body.qdn-mo-on .qdn-pag .is-in > .qdn-gs-zona:nth-child(2){transition-delay:.07s} body.qdn-mo-on .qdn-pag .is-in > .qdn-gs-tipo:nth-child(3), body.qdn-mo-on .qdn-pag .is-in > .qdn-gs-zona:nth-child(3){transition-delay:.14s} body.qdn-mo-on .qdn-pag .is-in > .qdn-gs-tipo:nth-child(4), body.qdn-mo-on .qdn-pag .is-in > .qdn-gs-zona:nth-child(4){transition-delay:.21s} body.qdn-mo-on .qdn-pag .is-in > .qdn-gs-tipo:nth-child(5){transition-delay:.28s} body.qdn-mo-on .qdn-pag .is-in > .qdn-gs-tipo:nth-child(6){transition-delay:.35s} /* la scala compare tutta insieme: e' un confronto, sfalsarla * la farebbe leggere come una sequenza temporale */ @media (prefers-reduced-motion:reduce){ body.qdn-mo-on .qdn-pag .qdn-gs-tipi > .qdn-gs-tipo, body.qdn-mo-on .qdn-pag .qdn-gs-pianta > .qdn-gs-zona{ opacity:1 !important; transform:none !important; transition:none !important; } } /* Rete di sicurezza: nessun elemento di griglia puo' imporre * la propria larghezza minima al contenitore. E' la regola che * ha evitato lo sbordo su tutte le landing precedenti. */ .qdn-pag .qdn-gs-scala,.qdn-pag .qdn-gs-vol, .qdn-pag .qdn-gs-didascalie,.qdn-pag .qdn-gs-dida, .qdn-pag .qdn-gs-pianta,.qdn-pag .qdn-gs-zona, .qdn-pag .qdn-gs-rilievo,.qdn-pag .qdn-gs-riga, .qdn-pag .qdn-gs-tipi,.qdn-pag .qdn-gs-tipo, .qdn-pag .qdn-gs-dopo{min-width:0} /* ===== QDN LANDING SETTORE v10 - GRANDI SPAZI - FINE ===== */ /* ===================================================================== * QDN HOME v11 — componenti propri della Home * --------------------------------------------------------------------- * 30 settembre 2026. Applicato sulla front page 37730, identificata * dall'opzione page_on_front. Accodato insieme a QDN_CHILD_VERSION 4.9.0, * nello stesso passaggio (§2-duovicies). * * NUMERAZIONE: 76-85. Il v10 (Grandi spazi) finisce a 75-bis. * PREFISSO: qdn-hp- (hp = home page). Verificato su style.css: zero * occorrenze, nessuna collisione con qdn-p-, qdn-set-, qdn-hub-, qdn-gs-. * * COME SI LEGA AL SISTEMA GIA' VALIDATO * - ogni sezione della Home porta "qdn-pag qdn-p-sez qdn-p-sez-scuro" * oppure "...-chiaro", come le sei landing e l'hub: da li' arrivano * palette, tipografia, colori di sezione e pulsanti; * - qdn-p-sez non ha regole proprie: e' il segno con cui le sonde * contano le sezioni. Il rientro delle sezioni lo da' Elementor; * - i pulsanti sono quelli del sistema: .qdn-p-cta (pieno), * .qdn-p-cta2 (contorno), dentro .qdn-p-azioni. Nessun pulsante nuovo; * - gli sticky usano ESCLUSIVAMENTE il sistema del componente 40: * .qdn-set-fermo sulla colonna + .qdn-set-split-alto sulla sezione. * Nessuna nuova dichiarazione position:sticky in questo blocco; * - il reveal e' quello condiviso (qdn-motion.js): qui c'e' solo lo * sfalsamento DENTRO i componenti nuovi, come la regola 42, e ogni * regola che nasconde e' condizionata a body.qdn-mo-on. Senza * JavaScript non sparisce niente. * * SPECIFICITA': i titoli vanno scritti a (0,3,0), altrimenti li vince il * kit Elementor, che si carica dopo (nota in cima al blocco v2). * * PSEUDO-ELEMENTI: ogni pseudo in posizione assoluta dichiara width e * height esplicite, anche "auto". Senza, Elementor impone la propria * larghezza e le coppie left/right e top/bottom smettono di funzionare * in silenzio (§2-octovicies). * * ⚠️ CARATTERE NON ASCII VOLUTO: al componente 82 c'e' content:"\2260" * (il segno "diverso da"). E' contenuto tipografico deciso, non un * marcatore di nota sfuggito (§2-quatervicies): la scansione dei * caratteri sopra U+2000 lo trovera' e va considerato legittimo. E' * decorativo: il significato deve stare anche nei titoli a fianco. * * ⛔ CONTRASTO DA MISURARE PRIMA DELL'APPROVAZIONE. Qui le etichette in * ottone stanno solo su fondi scuri, dove l'ottone pieno e' verificato. * Sui fondi chiari uso inchiostro o ottone da testo. Vale comunque la * regola del §2-novovicies: un'etichetta in ottone si misura sul fondo * su cui sta davvero, non si calcola. * ------------------------------------------------------------------ */ /* ===== QDN HOME v11 - INIZIO ===== */ /* 76. HERO — strato sottile sopra la macchina gia' esistente. * ⛔ Il v11 NON reimplementa la hero. Pista 220svh, pin 100svh, scala * della fotografia sullo scroll, velo, alone d'ottone, H1 diviso parola * per parola e riga delle CTA stanno gia' in assets/css/qdn-motion-home.css, * che si carica DOPO style.css: a parita' di specificita' vince lui, ed * e' giusto cosi'. Riscriverli qui vorrebbe dire avere due heroes che si * contendono le stesse proprieta'. * * La sezione della hero porta quindi due famiglie di classi insieme: * qdn-pag qdn-p-sez qdn-p-sez-scuro -> sistema condiviso * qdn-motion-hero -> macchina cinematografica * e dentro, nell'ordine, .qdn-motion-hero__pin > .qdn-motion-hero__media * + .qdn-motion-hero__inner > .qdn-motion-h1 / __testo / __cta. * ⚠️ Le prime quattro (qdn-motion-home, -hero, __pin, qdn-motion-h1) sono * un contratto con qdn-motion-home.js: se mancano, lo script esce e la * hero perde pin, scrub e divisione dell'H1 senza dare errore. * * Qui stanno i soli due pezzi che quel foglio non ha. */ /* 76.1 I pulsanti del sistema condiviso dentro la hero. * qdn-motion-home.css porta a tutta larghezza sotto i 600px i propri * .qdn-motion-btn, che la Home nuova non usa: la stessa cortesia va * ripetuta per .qdn-p-cta e .qdn-p-cta2, altrimenti sul telefono * restano due pulsanti stretti e disallineati. */ @media (max-width:600px){ .qdn-pag .qdn-motion-hero__cta > .elementor-widget-button{width:100%} .qdn-pag .qdn-motion-hero__cta .elementor-button{ width:100%; justify-content:center; text-align:center; } } /* 76.2 Invito a scorrere. Si appoggia a --qm-p, l'avanzamento della hero * che qdn-motion-home.js scrive gia' sulla radice: nessun JavaScript * nuovo e nessun listener in piu'. Senza motion la variabile vale 0, il * filetto resta visibile e fermo: e' un invito, non un'informazione, * quindi puo' restare. Non e' focalizzabile e non intercetta il mouse. */ .qdn-pag .qdn-hp-cue{ position:absolute; left:50%; bottom:clamp(18px,2.4vh,30px); z-index:4; width:auto; height:auto; translate:-50% 0; display:flex; flex-direction:column-reverse; align-items:center; gap:10px; pointer-events:none; opacity:calc(1 - var(--qm-p,0) * 2.4); } .qdn-pag .qdn-hp-cue .elementor-heading-title{ font-family:var(--qb); font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; line-height:1; margin:0; color:rgba(244,239,230,.62); } .qdn-pag .qdn-hp-cue::after{ content:""; display:block; width:1px; height:clamp(32px,5vh,52px); background:linear-gradient(180deg,rgba(176,137,90,.85),rgba(176,137,90,0)); } /* Sotto i 900px il pin non si attiva (lo decide lo script) e lo spazio * verticale e' prezioso: l'invito sparisce. */ @media (max-width:900px){ .qdn-pag .qdn-hp-cue{display:none} } /* 77. LE QUATTRO DIMENSIONI — firma visiva del posizionamento. * Spazio, identita', fragranza, tecnologia. Non sono una sequenza e non * sono un percorso: sono quattro cose che valgono insieme. Per questo i * filetti stanno SOPRA ogni voce e NON si toccano fra loro — il * contrario del filo dell'hub, dove la linea unisce proprio perche' li' * c'e' un ordine. E per questo sul telefono restano due per riga invece * di impilarsi in un elenco: quattro voci in colonna si leggono come * passi, e passi non sono. */ .qdn-pag .qdn-hp-dim{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(22px,2.6vw,38px); margin:0; padding:0; min-width:0; } .qdn-pag .qdn-hp-d{ min-width:0; padding-top:18px; border-top:1px solid rgba(176,137,90,.45); } .qdn-pag .qdn-hp-d .qdn-hp-d-t .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:clamp(21px,2.3vw,30px); line-height:1.12; letter-spacing:-.01em; margin:0; } .qdn-pag .qdn-hp-d .qdn-hp-d-x{margin:10px 0 0} .qdn-pag .qdn-hp-d .qdn-hp-d-x p{ font-size:15px; line-height:1.6; margin:0; max-width:34ch; } @media (max-width:900px){ .qdn-pag .qdn-hp-dim{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 24px} } /* 78. I SEI SETTORI — griglia editoriale asimmetrica. * Il mandato chiede di non fare sei schede identiche e anonime. Qui i * formati sono DUE: due celle ampie con fotografia in apertura e quattro * celle compatte tipografiche. Su dodici colonne: 7+5 sopra, 3+3+3+3 * sotto. * ⚠️ Non e' la bento di Hotel (sei colonne, dieci celle, tre misure) e * non sono le sei porte dell'hub (sei celle uguali, tutte con * fotografia): li' i settori sono uno smistamento, qui sono una * panoramica con due porte d'ingresso privilegiate. * Il collegamento si mette col campo link nativo del widget Titolo, * come sulla 62: niente plugin "clickable". */ .qdn-pag .qdn-hp-settori{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(16px,1.6vw,22px); min-width:0; } .qdn-pag .qdn-hp-s{ min-width:0; display:flex; flex-direction:column; background:var(--pgi2); border:1px solid rgba(176,137,90,.22); transition:border-color .3s ease, transform .3s ease; } .qdn-pag .qdn-hp-s-a{grid-column:span 7} .qdn-pag .qdn-hp-s-b{grid-column:span 5} .qdn-pag .qdn-hp-s-c{grid-column:span 3} /* La fotografia apre solo le due celle ampie, con due rapporti diversi: * l'asimmetria si legge anche quando le immagini non ci sono ancora. */ .qdn-pag .qdn-hp-s-foto{ position:relative; width:auto; height:auto; overflow:hidden; margin:0; aspect-ratio:16/9; } .qdn-pag .qdn-hp-s-b .qdn-hp-s-foto{aspect-ratio:4/3} .qdn-pag .qdn-hp-s-foto img{ display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.74) contrast(1.04) brightness(.94); transition:transform .5s cubic-bezier(.22,.61,.36,1); } /* Segnaposto dichiarato finche' la fotografia non esiste: si riusa il * componente 38, qui adattato a riempire la cella invece dei suoi * 210px fissi. */ .qdn-pag .qdn-hp-s-foto .qdn-set-vuoto{height:100%} .qdn-pag .qdn-hp-s-corpo{ display:flex; flex-direction:column; min-width:0; padding:clamp(18px,1.9vw,26px); } .qdn-pag .qdn-hp-s .qdn-hp-s-eti .elementor-heading-title{ font-family:var(--qb); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1.4; color:var(--pgo); margin:0; } .qdn-pag .qdn-hp-s .qdn-hp-s-tit .elementor-heading-title{ font-family:var(--qd); font-weight:400; line-height:1.18; letter-spacing:-.01em; font-size:clamp(20px,2vw,27px); margin:10px 0 0; color:var(--pgc); } .qdn-pag .qdn-hp-s-c .qdn-hp-s-tit .elementor-heading-title{font-size:clamp(18px,1.6vw,21px)} .qdn-pag .qdn-hp-s .qdn-hp-s-tit a{color:inherit; text-decoration:none} .qdn-pag .qdn-hp-s .qdn-hp-s-tit a:hover, .qdn-pag .qdn-hp-s .qdn-hp-s-tit a:focus-visible{color:var(--pgo)} .qdn-pag .qdn-hp-s .qdn-hp-s-tit a:focus-visible{outline:2px solid var(--pgo); outline-offset:3px} .qdn-pag .qdn-hp-s .qdn-hp-s-txt{margin:10px 0 0} .qdn-pag .qdn-hp-s .qdn-hp-s-txt p{ font-size:14.5px; line-height:1.58; margin:0; color:var(--pgs); max-width:44ch; } @media (hover:hover){ .qdn-pag .qdn-hp-s:hover{transform:translateY(-3px); border-color:rgba(176,137,90,.6)} .qdn-pag .qdn-hp-s:hover .qdn-hp-s-foto img{transform:scale(1.035)} } /* Due formati -> due colonne -> una. Mai una riga monca (lezione 9.4: * niente auto-fit con un numero fisso di elementi). */ @media (max-width:1024px){ .qdn-pag .qdn-hp-s-a,.qdn-pag .qdn-hp-s-b{grid-column:span 12} .qdn-pag .qdn-hp-s-c{grid-column:span 6} .qdn-pag .qdn-hp-s-b .qdn-hp-s-foto{aspect-ratio:16/9} } @media (max-width:680px){ .qdn-pag .qdn-hp-s-c{grid-column:span 12} } /* 79. IL METODO — la scala a gradini. * Cinque passi: analisi, direzione olfattiva, fragranza, tecnologia, * verifica. Ogni passo rientra di un gradino rispetto al precedente, e * il rientro e' l'unica cosa che racconta l'avanzamento: niente frecce * (Retail), niente binario verticale (Uffici), niente orario (Uffici). * E' una panoramica, non la ripetizione del metodo delle landing. * Il rientro vive in --g, cosi' aggiungere o togliere un passo non * richiede di riscrivere le regole: basta la riga nth-child. */ .qdn-pag .qdn-hp-metodo{display:block; margin:0; padding:0; min-width:0} .qdn-pag .qdn-hp-m{ position:relative; min-width:0; display:grid; grid-template-columns:max-content minmax(0,1fr); gap:4px clamp(16px,1.8vw,26px); align-items:baseline; padding:clamp(18px,2vw,24px) 0; padding-left:calc(var(--g,0) * clamp(12px,2.2vw,34px)); border-top:1px solid rgba(28,26,23,.14); } .qdn-pag .qdn-hp-m:last-child{border-bottom:1px solid rgba(28,26,23,.14)} .qdn-pag .qdn-hp-m:nth-child(1){--g:0} .qdn-pag .qdn-hp-m:nth-child(2){--g:1} .qdn-pag .qdn-hp-m:nth-child(3){--g:2} .qdn-pag .qdn-hp-m:nth-child(4){--g:3} .qdn-pag .qdn-hp-m:nth-child(5){--g:4} /* Il numero resta in inchiostro: su crema e su crema2 l'ottone non * arriva ad AA (misurato il 29/09 sul componente 73). Il carattere del * blocco lo tengono i filetti e il rientro, non il colore. */ .qdn-pag .qdn-hp-m .qdn-hp-m-n .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:clamp(20px,2vw,26px); line-height:1; color:var(--pgi); margin:0; font-variant-numeric:tabular-nums; } .qdn-pag .qdn-hp-m .qdn-hp-m-t .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:clamp(19px,2vw,24px); line-height:1.22; letter-spacing:-.01em; color:var(--pgi); margin:0; } .qdn-pag .qdn-hp-m .qdn-hp-m-x{grid-column:2; margin:8px 0 0} .qdn-pag .qdn-hp-m .qdn-hp-m-x p{ font-size:15.5px; line-height:1.6; margin:0; color:var(--pgsc); max-width:62ch; } /* Sul telefono il rientro sparisce: cinque gradini su 360px * mangerebbero meta' della riga. Resta un elenco numerato pulito. */ @media (max-width:700px){ .qdn-pag .qdn-hp-m{padding-left:0} } /* 80. LA COPPIA — due schede di peso diverso. * Serve dove ci sono due destinazioni che NON hanno la stessa * importanza: Fragranze e Campionario, e piu' avanti la prova. Il * sistema ha la griglia a tre e a cinque colonne e quella a due uguali * dell'hub; questa e' l'unica asimmetrica, 7 e 5. * Le celle riusano .qdn-p-card: qui c'e' solo la griglia. */ .qdn-pag .qdn-hp-coppia{ display:grid; grid-template-columns:7fr 5fr; gap:clamp(18px,2vw,26px); align-items:stretch; min-width:0; } .qdn-pag .qdn-hp-coppia > *{min-width:0} @media (max-width:820px){ .qdn-pag .qdn-hp-coppia{grid-template-columns:minmax(0,1fr)} } /* 81. SU MISURA — il riquadro con l'etichetta sulla costa. * La profumazione su misura e' l'unico servizio che ha una pagina * propria e un peso diverso dagli altri: qui ha una forma che non * compare da nessun'altra parte del sito, l'etichetta verticale lungo il * bordo sinistro, come la costa di un libro. * ⚠️ Il testo ruotato NON porta informazione indispensabile: e' * un'etichetta di reparto. Il titolo vero resta orizzontale dentro. */ .qdn-pag .qdn-hp-misura{ position:relative; min-width:0; background:var(--pgi2); border:1px solid rgba(176,137,90,.38); padding:clamp(26px,3vw,40px) clamp(22px,2.6vw,38px); padding-left:clamp(58px,5.4vw,80px); } .qdn-pag .qdn-hp-misura-costa{ position:absolute; left:0; top:0; bottom:0; width:clamp(36px,3.4vw,48px); height:auto; display:flex; align-items:center; justify-content:center; border-right:1px solid rgba(176,137,90,.28); } .qdn-pag .qdn-hp-misura-costa .elementor-heading-title{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--qb); font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; line-height:1; color:var(--pgo); margin:0; } /* Sotto gli 820px la costa torna orizzontale in cima: una scritta * verticale alta quanto un riquadro di 600px non si legge. */ @media (max-width:820px){ .qdn-pag .qdn-hp-misura{padding-left:clamp(22px,2.6vw,38px); padding-top:clamp(46px,6vw,58px)} .qdn-pag .qdn-hp-misura-costa{ left:0; right:0; top:0; bottom:auto; width:auto; height:clamp(34px,4.6vw,44px); justify-content:flex-start; padding-left:clamp(22px,2.6vw,38px); border-right:0; border-bottom:1px solid rgba(176,137,90,.28); } .qdn-pag .qdn-hp-misura-costa .elementor-heading-title{ writing-mode:horizontal-tb; transform:none; } } /* 82. I DUE ASSI — fragranza e diffusore non sono la stessa cosa. * Due definizioni affiancate, separate da un filetto verticale con il * segno "diverso da" al centro. Non e' "la rete" di Retail, che mette a * confronto due elenchi di cose che si fanno; qui ci sono due * definizioni e una sola affermazione fra loro. * ⚠️ Il segno e' decorativo: la frase deve reggere anche senza, quindi i * due titoli devono dirlo a parole. */ .qdn-pag .qdn-hp-assi{ display:grid; grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr); gap:clamp(18px,2.4vw,34px); align-items:stretch; min-width:0; } .qdn-pag .qdn-hp-asse{min-width:0} .qdn-pag .qdn-hp-asse .qdn-hp-asse-eti .elementor-heading-title{ font-family:var(--qb); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1.4; color:var(--pgo); margin:0; } .qdn-pag .qdn-hp-asse .qdn-hp-asse-tit .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:clamp(20px,2.1vw,26px); line-height:1.2; letter-spacing:-.01em; margin:12px 0 0; } .qdn-pag .qdn-hp-asse .qdn-hp-asse-txt{margin:10px 0 0} .qdn-pag .qdn-hp-asse .qdn-hp-asse-txt p{font-size:15.5px; line-height:1.6; margin:0; max-width:46ch} .qdn-pag .qdn-hp-segno{ position:relative; width:1px; height:auto; align-self:stretch; min-width:0; background:linear-gradient(180deg, rgba(176,137,90,0) 0%, rgba(176,137,90,.5) 16%, rgba(176,137,90,.5) 84%, rgba(176,137,90,0) 100%); } .qdn-pag .qdn-hp-segno::before{ content:"\2260"; position:absolute; left:50%; top:50%; width:30px; height:30px; translate:-50% -50%; display:flex; align-items:center; justify-content:center; font-family:var(--qd); font-size:17px; line-height:1; color:var(--pgo); background:var(--pgi); } /* Sulle sezioni chiare il segno deve coprire il filetto con il fondo * giusto, altrimenti si vede la linea passargli dietro. */ .qdn-pag.qdn-p-sez-chiaro .qdn-hp-segno::before{background:var(--pgc); color:var(--pgo-t)} .qdn-pag.qdn-p-sez-chiaro .qdn-hp-asse .qdn-hp-asse-eti .elementor-heading-title{color:var(--pgo-t)} /* Impilati, il filetto verticale non ha senso: diventa una riga sola * con il segno al centro. */ @media (max-width:820px){ .qdn-pag .qdn-hp-assi{grid-template-columns:minmax(0,1fr); gap:clamp(20px,3vw,28px)} .qdn-pag .qdn-hp-segno{ width:auto; height:1px; align-self:stretch; justify-self:stretch; background:linear-gradient(90deg, rgba(176,137,90,0) 0%, rgba(176,137,90,.5) 16%, rgba(176,137,90,.5) 84%, rgba(176,137,90,0) 100%); } } /* 83. Sfalsamento DENTRO i componenti nuovi. * Stessa regola del componente 42: il motore condiviso fa comparire la * griglia come un blocco solo, qui le celle entrano una dopo l'altra * quando il contenitore riceve .is-in. Tutto condizionato a * body.qdn-mo-on: senza JavaScript non si nasconde niente. */ body.qdn-mo-on .qdn-pag .qdn-hp-dim > .qdn-hp-d, body.qdn-mo-on .qdn-pag .qdn-hp-settori > .qdn-hp-s, body.qdn-mo-on .qdn-pag .qdn-hp-metodo > .qdn-hp-m{ opacity:0; transform:translate3d(0,16px,0); } /* Il secondo gruppo di selettori NON e' ridondante. Il motore assegna * .is-in ai figli DIRETTI dei contenitori di primo livello: la scala * del metodo sta tre livelli piu' in basso, dentro qdn-p-split > * qdn-hub-col, e il suo contenitore .is-in non lo riceve mai. Senza * queste tre righe i cinque passi restano invisibili: misurato sulla * pagina il 30/09/2026, ed e' la famiglia di difetti del paragrafo * 2-undecies (contenuto che sparisce se il motore non arriva). */ body.qdn-mo-on .qdn-pag .qdn-hp-dim.is-in > .qdn-hp-d, body.qdn-mo-on .qdn-pag .qdn-hp-settori.is-in > .qdn-hp-s, body.qdn-mo-on .qdn-pag .qdn-hp-metodo.is-in > .qdn-hp-m, body.qdn-mo-on .qdn-pag .is-in .qdn-hp-dim > .qdn-hp-d, body.qdn-mo-on .qdn-pag .is-in .qdn-hp-settori > .qdn-hp-s, body.qdn-mo-on .qdn-pag .is-in .qdn-hp-metodo > .qdn-hp-m{ opacity:1; transform:none; transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1); } body.qdn-mo-on .qdn-pag .qdn-hp-d:nth-child(1), body.qdn-mo-on .qdn-pag .qdn-hp-s:nth-child(1), body.qdn-mo-on .qdn-pag .qdn-hp-m:nth-child(1){transition-delay:0s} body.qdn-mo-on .qdn-pag .qdn-hp-d:nth-child(2), body.qdn-mo-on .qdn-pag .qdn-hp-s:nth-child(2), body.qdn-mo-on .qdn-pag .qdn-hp-m:nth-child(2){transition-delay:.07s} body.qdn-mo-on .qdn-pag .qdn-hp-d:nth-child(3), body.qdn-mo-on .qdn-pag .qdn-hp-s:nth-child(3), body.qdn-mo-on .qdn-pag .qdn-hp-m:nth-child(3){transition-delay:.14s} body.qdn-mo-on .qdn-pag .qdn-hp-d:nth-child(4), body.qdn-mo-on .qdn-pag .qdn-hp-s:nth-child(4), body.qdn-mo-on .qdn-pag .qdn-hp-m:nth-child(4){transition-delay:.21s} body.qdn-mo-on .qdn-pag .qdn-hp-s:nth-child(5), body.qdn-mo-on .qdn-pag .qdn-hp-m:nth-child(5){transition-delay:.26s} body.qdn-mo-on .qdn-pag .qdn-hp-s:nth-child(6){transition-delay:.31s} /* 84. Movimento ridotto: si spegne tutto quello aggiunto qui sopra. * Il motore condiviso ha gia' la sua regola; questa copre i componenti * nuovi, comprese le transizioni del passaggio del mouse e l'invito a * scorrere, che altrimenti resterebbe legato a --qm-p. */ @media (prefers-reduced-motion:reduce){ .qdn-pag .qdn-hp-s, .qdn-pag .qdn-hp-s-foto img{transition:none !important} body.qdn-mo-on .qdn-pag .qdn-hp-dim > .qdn-hp-d, body.qdn-mo-on .qdn-pag .qdn-hp-settori > .qdn-hp-s, body.qdn-mo-on .qdn-pag .qdn-hp-metodo > .qdn-hp-m{ opacity:1 !important; transform:none !important; transition:none !important; } .qdn-pag .qdn-hp-cue{opacity:1 !important} } /* 85. Rete di sicurezza alle larghezze minime e contro lo sbordo. * Provata alle stesse larghezze delle altre pagine: 1374, 1189, 1028, * 776, 394 e 364 px. */ .qdn-pag .qdn-hp-dim,.qdn-pag .qdn-hp-d, .qdn-pag .qdn-hp-settori,.qdn-pag .qdn-hp-s, .qdn-pag .qdn-hp-metodo,.qdn-pag .qdn-hp-m, .qdn-pag .qdn-hp-coppia,.qdn-pag .qdn-hp-misura, .qdn-pag .qdn-hp-assi,.qdn-pag .qdn-hp-asse{min-width:0} .qdn-pag .qdn-hp-s img,.qdn-pag .qdn-hp-misura img{max-width:100%} @media (max-width:420px){ .qdn-pag .qdn-hp-dim{gap:22px 18px} .qdn-pag .qdn-hp-d .qdn-hp-d-t .elementor-heading-title{font-size:19px} .qdn-pag .qdn-hp-d .qdn-hp-d-x p{font-size:14px} .qdn-pag .qdn-hp-s-corpo{padding:18px 16px 20px} .qdn-pag .qdn-hp-misura{padding-left:18px; padding-right:18px} .qdn-pag .qdn-hp-m .qdn-hp-m-x p{font-size:15px} } /* ===== QDN HOME v11 - FINE ===== */ /* ===================================================================== * APPENDICE — le sezioni che NON hanno bisogno di componenti nuovi * --------------------------------------------------------------------- * Non e' pigrizia: e' il punto del mandato. La Home dev'essere coerente * con il sistema appena costruito, e ogni componente in piu' e' un pezzo * di sistema da mantenere. Qui c'e' con quali classi gia' validate si * costruiscono le sezioni rimaste, cosi' il costruttore non improvvisa. * ⛔ Le classi vanno copiate da qui alla lettera: una classe inesistente * non da' errore, non rompe la pagina e non si vede in un conteggio di * sezioni (§2-octovicies). I nomi giusti sono qdn-p-griglia-3 col * trattino, qdn-p-cta per le schede bianche e qdn-p-cta2 sui fondi * scuri; qdn-p-cta3 e qdn-p-griglia3 NON esistono. * * 1 HERO ................ qdn-pag qdn-p-sez qdn-p-sez-scuro qdn-motion-hero * + qdn-motion-hero__pin / __media / __inner * + qdn-motion-h1 / __testo / __cta * + qdn-p-occhiello, qdn-p-cta, qdn-p-cta2 * + 76.2 qdn-hp-cue * 2 POSIZIONAMENTO ...... 77 qdn-hp-dim + qdn-p-titolo-sez + qdn-p-lead * 3 I SEI SETTORI ....... 78 qdn-hp-settori (+ qdn-set-vuoto dove la * fotografia non c'e' ancora) * 4 IL METODO ........... 79 qdn-hp-metodo, dentro una sezione * qdn-p-split + qdn-set-split-alto con la * colonna del titolo in qdn-set-fermo * 5 FRAGRANZE ........... qdn-p-ambienti (glossario dt/dd) per i * registri olfattivi + 80 qdn-hp-coppia per * Fragranze e Campionario + qdn-p-nota per la * nota di prudenza sul campionario * 6 SU MISURA ........... 81 qdn-hp-misura * 7 FRAGRANZA E TECNOLOGIA 82 qdn-hp-assi, in sezione * qdn-p-split + qdn-set-split-alto se serve lo * sticky del titolo * 8 CAMPIONARIO / PROVA . qdn-p-affermazione + qdn-p-azioni con * qdn-p-cta verso il campionario * 9 PROVA SOCIALE ....... ⛔ nessun cliente nominato senza permesso * scritto (§10) e nessun numero non verificato * (§11). Finche' non ci sono documenti: sezione * editoriale neutra con qdn-p-affermazione, * oppure si omette. Feedaty resta nel footer, * dov'e' gia' e dove e' vera. * 10 FAQ ................. qdn-set-faq,
nativo: funziona senza * JavaScript, si apre da tastiera, si stampa * 11 CTA FINALE .......... qdn-p-chiusa + qdn-p-cta verso /contact/#contatti * * STICKY: solo componente 40. La colonna che si ferma porta * qdn-set-fermo, la sezione qdn-set-split-alto. Offset e soglia (881px) * sono gia' calcolati sull'altezza reale dell'header: non si toccano. * * DA MISURARE SUL SITO, dopo l'applicazione (non prima): * - contrasto di qdn-hp-s-eti e qdn-hp-asse-eti sui fondi scuri reali; * - contrasto di qdn-hp-m-n e qdn-hp-m-t su crema e crema2; * - sbordo 0 alle sei larghezze; * - con le transizioni spente, zero elementi nascosti; * - una sola immagine con fetchpriority alto (la hero); * - lo sticky a 168px da amministratore e static sotto gli 881px. * ------------------------------------------------------------------ */ /* ===== 86. qdn-p-split su un CONTENITORE INTERNO - INIZIO ===== * Correzione strutturale trovata il 30 settembre 2026 su Grandi spazi * (37571) e sulla Home (37730), misurando lo scroll. * * Il selettore del componente 16 e' ".qdn-pag.qdn-p-split > .e-con-inner": * pretende le due classi sullo STESSO elemento, cioe' sulla sezione. Su * queste due pagine qdn-p-split sta invece su un contenitore INTERNO, * quindi la regola non combacia: non nasce nessuna griglia e i due * blocchi restano larghi quanto la sezione, uno sopra l'altro. Con la * colonna del titolo in position:sticky il titolo resta fermo SOPRA il * testo che scorre, e sembra che si accavallino. * * Misurato PRIMA su Grandi spazi: grid-template-columns "none", * column-gap 20px (il predefinito di Elementor), titolo e testo * entrambi larghi 1120px con lo stesso bordo sinistro, distanza fra la * fine del titolo e l'inizio del testo -546px. * * Non era un problema di spaziatura: aumentare il gap di una griglia * che non esiste non avrebbe cambiato niente. * * Qui il contenitore interno riceve la STESSA geometria del componente * 16 - 1.05fr / .95fr, gap 56px - cosi' le due pagine si comportano * esattamente come hub, Hotel, Uffici, Retail, Showroom e Palestre, che * hanno la classe sulla sezione. Nessun valore nuovo, nessun titolo * rimpicciolito, nessuna modifica al disegno della sezione. * * Il selettore prende SOLO i contenitori interni: sulle pagine che * funzionano qdn-p-split sta sulla sezione, che non e' mai figlia di * .e-con-inner. Verificato su otto pagine prima di scrivere la regola. * * align-items:start perche' una colonna appiccicata centrata non ha * spazio per scorrere: e' la ragione del componente 47. */ .qdn-pag > .e-con-inner > .e-con.qdn-p-split{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:start; } /* Come il componente 27: Elementor da' 10px di rientro a ogni * contenitore, e senza questo il titolo non sarebbe sul filo degli * altri titoli della pagina. */ .qdn-pag > .e-con-inner > .e-con.qdn-p-split > .e-con{ --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } /* Sotto la soglia del componente 40 le colonne si impilano, con lo * stesso gap del componente 16. */ @media (max-width:880px){ .qdn-pag > .e-con-inner > .e-con.qdn-p-split{ grid-template-columns:minmax(0,1fr); gap:34px; } } /* ===== 86. qdn-p-split su un CONTENITORE INTERNO - FINE ===== */ /* ===================================================================== * QDN LANDING PRODOTTO v12 — la pagina QI (3654) * Componenti 87-93. Prefisso qdn-qi-, verificato libero nel foglio. * * Perche' una firma visiva nuova: le sei landing di settore e l'hub * raccontano un SERVIZIO e sono costruite su griglie di ambienti o di * passaggi. Questa racconta un OGGETTO, ed e' l'unica pagina del sito * con un prezzo e un carrello. La forma dominante e' quindi la * VERTICALE: l'apparecchio e' un monolite 83x83x286, piu' alto che * largo in rapporto 1:3,4, e la pagina usa quella proporzione come * misura — nello slot della fotografia e nel filetto che accompagna * i passaggi. * ------------------------------------------------------------------ */ /* 87. LA COLONNA — apertura del prodotto. * Griglia asimmetrica: il testo prende la parte larga, lo slot della * fotografia la stretta, perche' l'oggetto e' stretto e alto davvero. * Non uso qdn-p-split: li' le colonne sono quasi pari (1,05/0,95), * qui servono proporzioni molto diverse. */ .qdn-pag .qdn-qi-colonna{ display:grid; grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr); gap:clamp(32px,5vw,72px); align-items:center; } /* Come il componente 27: Elementor da' 10px di rientro a ogni * contenitore, e senza questo il testo non starebbe sul filo degli * altri titoli della pagina. */ .qdn-pag .qdn-qi-colonna > .e-con{ --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; } @media (max-width:880px){ .qdn-pag .qdn-qi-colonna{grid-template-columns:minmax(0,1fr); gap:34px} } /* 88. LO SLOT DELLA FOTOGRAFIA — segnaposto neutro e sostituibile. * * Le fotografie definitive non ci sono ancora. Questo slot NON scrive * nulla e non disegna l'apparecchio: e' una superficie vuota con un * filo d'ottone, che si legge come spazio in attesa e non come un * render finto (il mandato vieta entrambi). * * SOSTITUZIONE: basta inserire un widget Immagine dentro il * contenitore. La regola :has(img) qui sotto spegne da sola fondo, * bordo e proporzione imposta, e l'immagine prende il suo posto senza * che nessuno debba togliere la classe. */ .qdn-pag .qdn-qi-slot{ position:relative; width:100%; max-width:100%; background: linear-gradient(160deg, rgba(176,137,90,.09), rgba(176,137,90,0) 62%), var(--pgi2); border:1px solid rgba(176,137,90,.38); } .qdn-pag.qdn-p-sez-chiaro .qdn-qi-slot{ background: linear-gradient(160deg, rgba(176,137,90,.12), rgba(176,137,90,0) 62%), var(--pgc2); } /* Le due proporzioni usate in pagina. 83:286 e' quella vera * dell'apparecchio: lo slot verticale ha la forma dell'oggetto che * dovra' contenere. */ .qdn-pag .qdn-qi-slot--alto{ /* L'altezza comanda e la larghezza la segue: con max-height su una * cella di griglia il box resterebbe largo quanto la colonna e * perderebbe la proporzione dell'apparecchio. Misurato: 305x558 * invece di 151x520. */ aspect-ratio:83/286; height:min(70vh,520px); width:auto; max-width:100%; margin-inline:auto; } .qdn-pag .qdn-qi-slot--largo{aspect-ratio:16/10} /* Quadrato: la cella delle tre schede tecnologia sulla 3033, dove le * altre due portano una foto prodotto quadrata. */ .qdn-pag .qdn-qi-slot--quadro{aspect-ratio:1/1} /* Quando la fotografia arriva, lo slot si fa da parte. * ⛔ Devono cedere anche height e width, non solo aspect-ratio: lo slot * verticale impone height:min(70vh,520px) e width:auto per tenere la * proporzione dell'apparecchio mentre e' vuoto. Lasciandole in piedi, con * aspect-ratio:auto la larghezza torna quella della colonna e l'immagine * sborda dal box alto 520px. Misurato il 6 ottobre 2026. */ .qdn-pag .qdn-qi-slot:has(img){ background:none; border:0; aspect-ratio:auto; max-height:none; height:auto; width:100%; } .qdn-pag .qdn-qi-slot img{display:block; width:100%; height:auto} /* 89. I QUATTRO GESTI — i passaggi d'uso. * Un filetto verticale d'ottone li tiene insieme, come la colonna * dell'apparecchio. Il numero sta sul filetto. */ .qdn-pag .qdn-qi-gesti{ display:grid; gap:0; margin:0; padding:0; list-style:none; } .qdn-pag .qdn-qi-gesto{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:0 26px; padding:0 0 30px 0; position:relative; } .qdn-pag .qdn-qi-gesto:last-child{padding-bottom:0} /* Il filetto corre lungo la colonna dei numeri. Width ed height * esplicite: dentro un contenitore Elementor uno pseudo-elemento in * posizione assoluta eredita altrimenti le misure del contenitore e * le coppie top/bottom smettono di funzionare (regola del * componente 66 e del §2-octovicies). */ .qdn-pag .qdn-qi-gesto::before{ content:""; position:absolute; left:17px; top:40px; bottom:0; width:1px; height:auto; background:rgba(176,137,90,.42); } .qdn-pag .qdn-qi-gesto:last-child::before{display:none} .qdn-pag .qdn-qi-gesto-n{ font-family:var(--qd); font-size:15px; line-height:1; letter-spacing:.02em; width:35px; height:35px; display:grid; place-items:center; border:1px solid rgba(176,137,90,.55); border-radius:50%; color:var(--pgo); background:var(--pgi); } .qdn-pag.qdn-p-sez-chiaro .qdn-qi-gesto-n{background:var(--pgc); color:#6E5233} .qdn-pag .qdn-qi-gesto-t{min-width:0} .qdn-pag .qdn-qi-gesto-t strong{ font-family:var(--qd); font-weight:400; font-size:19px; line-height:1.3; display:block; margin:0 0 6px; } .qdn-pag.qdn-p-sez-scuro .qdn-qi-gesto-t strong{color:var(--pgc)} .qdn-pag.qdn-p-sez-chiaro .qdn-qi-gesto-t strong{color:var(--pgi)} .qdn-pag .qdn-qi-gesto-t p{margin:0; font-size:15px} @media (max-width:600px){ .qdn-pag .qdn-qi-gesto{gap:0 18px} .qdn-pag .qdn-qi-gesto::before{left:14px} .qdn-pag .qdn-qi-gesto-n{width:29px; height:29px; font-size:13px} } /* 90. LE DUE CONSEGUENZE — il perche' pratico della tecnologia. * Due blocchi affiancati con un filetto d'ottone sopra: sono due * effetti dello stesso fatto, non una sequenza, quindi niente numeri * e niente frecce. */ .qdn-pag .qdn-qi-conseguenze{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3.4vw,46px); } .qdn-pag .qdn-qi-cons{ border-top:2px solid var(--pgo); padding:22px 0 0; min-width:0; } .qdn-pag .qdn-qi-cons h3, .qdn-pag .qdn-qi-cons .elementor-heading-title{ font-family:var(--qd); font-weight:400; font-size:clamp(19px,2vw,23px); line-height:1.26; margin:0 0 10px; } .qdn-pag .qdn-qi-cons p{margin:0; font-size:15px} @media (max-width:760px){ .qdn-pag .qdn-qi-conseguenze{grid-template-columns:minmax(0,1fr); gap:28px} } /* 91. LA SCHEDA TECNICA — la tabella delle specifiche. * Due colonne con un filetto per riga. Cifre in tabulare, cosi' le * misure si leggono incolonnate. */ .qdn-pag .qdn-qi-spec{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:0; margin:0; padding:0; font-variant-numeric:tabular-nums; } .qdn-pag .qdn-qi-spec dt, .qdn-pag .qdn-qi-spec dd{ margin:0; padding:13px 0; border-top:1px solid rgba(176,137,90,.26); font-size:15px; line-height:1.45; min-width:0; } .qdn-pag .qdn-qi-spec dt{ font-family:var(--qb); font-weight:500; padding-right:20px; } .qdn-pag.qdn-p-sez-scuro .qdn-qi-spec dt{color:var(--pgc)} .qdn-pag.qdn-p-sez-chiaro .qdn-qi-spec dt{color:var(--pgi)} .qdn-pag .qdn-qi-spec dd{overflow-wrap:anywhere} /* La riga della copertura e' l'unico punto della pagina in cui quel * dato compare, ed e' attribuita al produttore: la si distingue, cosi' * non si confonde con le misure certe. */ .qdn-pag .qdn-qi-spec .qdn-qi-spec-attr{color:var(--pgo)} @media (max-width:600px){ .qdn-pag .qdn-qi-spec{grid-template-columns:minmax(0,1fr)} .qdn-pag .qdn-qi-spec dt{padding:13px 0 0; border-top:1px solid rgba(176,137,90,.26)} .qdn-pag .qdn-qi-spec dd{padding:2px 0 13px; border-top:0} } /* 92. IL CONFINE — dove finisce QI e comincia il progetto. * Riquadro bordato d'ottone, come la chiusura di Chi siamo: e' una * deviazione dichiarata, non la continuazione del discorso. */ .qdn-pag .qdn-qi-confine{ border:1px solid rgba(176,137,90,.5); padding:clamp(26px,3.6vw,44px); background:var(--pgi2); } .qdn-pag.qdn-p-sez-chiaro .qdn-qi-confine{background:var(--pgc2)} /* 93. Sfalsamento dei componenti nuovi. * Stessa regola dei componenti 42, 52, 56, 60, 64, 69, 75-bis e 83. * * I selettori portano l'ANTENATO .is-in e non "contenitore.is-in", * perche' il motore assegna .is-in solo ai figli diretti delle sezioni * di primo livello: se il contenitore e' annidato piu' in basso la * forma "contenitore.is-in > figlio" non combacia mai e il contenuto * resta invisibile. E' la regola imparata sulla Home (§2-tricies). */ body.qdn-mo-on .qdn-pag .qdn-qi-gesto, body.qdn-mo-on .qdn-pag .qdn-qi-cons{ opacity:0; transform:translateY(14px); } body.qdn-mo-on .qdn-pag .is-in .qdn-qi-gesto, body.qdn-mo-on .qdn-pag .is-in .qdn-qi-cons, body.qdn-mo-on .qdn-pag .qdn-qi-gesti.is-in .qdn-qi-gesto, body.qdn-mo-on .qdn-pag .qdn-qi-conseguenze.is-in .qdn-qi-cons{ opacity:1; transform:none; transition:opacity .52s cubic-bezier(.22,.61,.36,1), transform .52s cubic-bezier(.22,.61,.36,1); } .qdn-pag .qdn-qi-gesto:nth-child(2){transition-delay:.07s} .qdn-pag .qdn-qi-gesto:nth-child(3){transition-delay:.14s} .qdn-pag .qdn-qi-gesto:nth-child(4){transition-delay:.21s} .qdn-pag .qdn-qi-cons:nth-child(2){transition-delay:.08s} /* Movimento ridotto: si spegne tutto quello aggiunto qui sopra. */ @media (prefers-reduced-motion:reduce){ body.qdn-mo-on .qdn-pag .qdn-qi-gesto, body.qdn-mo-on .qdn-pag .qdn-qi-cons{ opacity:1; transform:none; transition:none; } } /* Rete di sicurezza alle larghezze minime e contro lo sbordo. */ @media (max-width:420px){ .qdn-pag .qdn-qi-colonna, .qdn-pag .qdn-qi-conseguenze{gap:24px} .qdn-pag .qdn-qi-confine{padding:22px} .qdn-pag .qdn-qi-slot--alto{max-height:54vh} } .qdn-pag .qdn-qi-colonna, .qdn-pag .qdn-qi-conseguenze, .qdn-pag .qdn-qi-gesti, .qdn-pag .qdn-qi-spec, .qdn-pag .qdn-qi-confine, .qdn-pag .qdn-qi-slot{max-width:100%} /* ===================================================================== * QDN LANDING PRODOTTO v13 — alleggerimento della landing QI (3654) * Componenti 94-97. Prefisso qdn-qi-, gia' in uso dal v12. * * Il v12 raccontava l'oggetto con una verticale e una tabella unica da * 24 righe. La tabella era corretta ma pesante: occupava mezza pagina a * meta' del racconto e lo fermava. Qui la stessa informazione, nessun * dato tolto, viene divisa in gruppi brevi che si leggono a colpo * d'occhio, e la sezione scende dopo il momento d'acquisto. * ------------------------------------------------------------------ */ /* 94. SPECIFICHE A GRUPPI. * Tre colonne su desktop, due sotto i 1000px, una sotto i 640px. Le * colonne sono di contenuto, non di impaginazione: ogni gruppo resta * intero e non si spezza fra una colonna e l'altra. */ .qdn-pag .qdn-qi-specg{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(26px,3vw,44px) clamp(28px,3.4vw,56px); margin:0; padding:0; } .qdn-pag .qdn-qi-specg-g{min-width:0; break-inside:avoid} .qdn-pag .qdn-qi-specg-g > h3{ font-family:var(--qb); font-size:11.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; line-height:1.5; margin:0 0 12px; padding:0 0 10px; border-bottom:1px solid rgba(176,137,90,.42); color:var(--pgo); } .qdn-pag.qdn-p-sez-chiaro .qdn-qi-specg-g > h3{color:var(--pgo-t)} .qdn-pag .qdn-qi-specg-g dl{ display:grid; grid-template-columns:minmax(0,1fr); gap:0; margin:0; padding:0; font-variant-numeric:tabular-nums; } .qdn-pag .qdn-qi-specg-g dt{ font-family:var(--qb); font-weight:500; font-size:13px; line-height:1.4; margin:0; padding:10px 0 0; opacity:.72; } .qdn-pag .qdn-qi-specg-g dd{ margin:0; padding:1px 0 10px; font-size:15.5px; line-height:1.45; overflow-wrap:anywhere; border-bottom:1px solid rgba(176,137,90,.16); } .qdn-pag .qdn-qi-specg-g dd:last-of-type{border-bottom:0} .qdn-pag.qdn-p-sez-scuro .qdn-qi-specg-g dd{color:var(--pgc)} .qdn-pag.qdn-p-sez-chiaro .qdn-qi-specg-g dd{color:var(--pgi)} /* Il gruppo dei dati dichiarati dal produttore resta riconoscibile: * stessa distinzione d'ottone che il componente 91 dava alla singola * riga, qui portata sul gruppo intero. */ .qdn-pag .qdn-qi-specg-g--attr dd{color:var(--pgo)} .qdn-pag.qdn-p-sez-chiaro .qdn-qi-specg-g--attr dd{color:var(--pgo-t)} .qdn-pag .qdn-qi-specg-g--attr{ border-left:2px solid rgba(176,137,90,.45); padding-left:clamp(14px,1.6vw,20px); } @media (max-width:1000px){ .qdn-pag .qdn-qi-specg{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:640px){ .qdn-pag .qdn-qi-specg{grid-template-columns:minmax(0,1fr); gap:26px} } /* 95. I PILASTRI — poche ragioni forti, dette in due righe. * Serve dopo la hero: fa percepire il prodotto prima di spiegarlo. * * ⛔ Corretto il 7 ottobre 2026, ed era un difetto vero, non estetico. * La griglia aveva QUATTRO colonne e tre restavano VUOTE, con i quattro * testi incolonnati dentro 253px e alti 811px. * * ⚠️ La causa NON era il documento. Nei dati i quattro pilastri sono * sempre stati figli diretti: mancava content_width:'full' al contenitore. * Senza quella impostazione Elementor lo rende BOXED, cioe' gli infila * dentro un
, e la griglia finiva sull'involucro * esterno, che di figli ne aveva uno solo. Tutti gli altri contenitori a * griglia del progetto hanno 'full', ed e' per questo che funzionano. * * Doppia cintura: l'impostazione e' stata corretta nel documento, e la * regola display:contents qui sotto fa partecipare le celle alla griglia * anche se un domani l'involucro tornasse. Non si ripete da solo. * * Due colonne: a 1120px danno celle da ~532px, cioe' una larghezza di * lettura giusta, su due righe invece di una fila di scatole strette. * * La gerarchia la fa la POSIZIONE, non una classe in piu': la prima riga * porta i due concetti che distinguono QI, con il filetto d'ottone pieno * e il titolo piu' grande; la seconda porta i due funzionali, con un * filetto sottile e il corpo piu' piccolo. Quattro scatole identiche * sarebbero un elenco; due battute diverse si leggono. */ .qdn-pag .qdn-qi-pilastri{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,3.2vw,46px) clamp(32px,4vw,64px); } .qdn-pag .qdn-qi-pilastri > .e-con-inner{display:contents} .qdn-pag .qdn-qi-pil{min-width:0; padding:18px 0 0} .qdn-pag .qdn-qi-pil h3, .qdn-pag .qdn-qi-pil .elementor-heading-title{ font-family:var(--qd); font-weight:400; line-height:1.24; margin:0 0 9px; } .qdn-pag .qdn-qi-pil p{margin:0; line-height:1.6} /* prima riga: i due concetti che distinguono QI */ .qdn-pag .qdn-qi-pil:nth-child(-n+2){border-top:2px solid var(--pgo)} .qdn-pag.qdn-p-sez-chiaro .qdn-qi-pil:nth-child(-n+2){border-top-color:var(--pgo-t)} .qdn-pag .qdn-qi-pil:nth-child(-n+2) h3, .qdn-pag .qdn-qi-pil:nth-child(-n+2) .elementor-heading-title{ font-size:clamp(20px,2.2vw,25px); } .qdn-pag .qdn-qi-pil:nth-child(-n+2) p{font-size:15.5px} /* seconda riga: i due funzionali, piu' compatti e in tono minore */ .qdn-pag .qdn-qi-pil:nth-child(n+3){border-top:1px solid rgba(176,137,90,.4)} .qdn-pag .qdn-qi-pil:nth-child(n+3) h3, .qdn-pag .qdn-qi-pil:nth-child(n+3) .elementor-heading-title{ font-size:clamp(17px,1.7vw,19px); } .qdn-pag .qdn-qi-pil:nth-child(n+3) p{font-size:14.5px; opacity:.86} /* Sul telefono una colonna sola e compatta: quattro celle impilate non * devono trasformare la sezione in una sequenza lunga. */ @media (max-width:700px){ .qdn-pag .qdn-qi-pilastri{grid-template-columns:minmax(0,1fr); gap:22px} .qdn-pag .qdn-qi-pil{padding-top:14px} .qdn-pag .qdn-qi-pil:nth-child(-n+2) p, .qdn-pag .qdn-qi-pil:nth-child(n+3) p{font-size:15px} } /* 96. IL PREZZO NELLA HERO. * Deve essere trovabile subito ma non trasformare la hero in una scheda * di negozio: una riga sola, cifra grande, nota fiscale piccola. */ .qdn-pag .qdn-qi-prezzo{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0; } .qdn-pag .qdn-qi-prezzo .qdn-qi-prezzo-n{ font-family:var(--qd); font-weight:400; font-size:clamp(26px,3vw,34px); line-height:1.1; } .qdn-pag.qdn-p-sez-scuro .qdn-qi-prezzo .qdn-qi-prezzo-n{color:var(--pgc)} .qdn-pag .qdn-qi-prezzo .qdn-qi-prezzo-i{ font-family:var(--qb); font-size:13px; letter-spacing:.04em; opacity:.78; } /* 97. Sfalsamento dei componenti nuovi. Stessa forma del componente 93: * l'antenato porta .is-in, perche' il motore la assegna solo ai figli * diretti delle sezioni di primo livello. */ body.qdn-mo-on .qdn-pag .qdn-qi-pil, body.qdn-mo-on .qdn-pag .qdn-qi-specg-g{opacity:0; transform:translateY(14px)} body.qdn-mo-on .qdn-pag .is-in .qdn-qi-pil, body.qdn-mo-on .qdn-pag .is-in .qdn-qi-specg-g, body.qdn-mo-on .qdn-pag .qdn-qi-pilastri.is-in .qdn-qi-pil, body.qdn-mo-on .qdn-pag .qdn-qi-specg.is-in .qdn-qi-specg-g{ opacity:1; transform:none; transition:opacity .52s cubic-bezier(.22,.61,.36,1), transform .52s cubic-bezier(.22,.61,.36,1); } .qdn-pag .qdn-qi-pil:nth-child(2){transition-delay:.06s} .qdn-pag .qdn-qi-pil:nth-child(3){transition-delay:.12s} .qdn-pag .qdn-qi-pil:nth-child(4){transition-delay:.18s} .qdn-pag .qdn-qi-specg-g:nth-child(2){transition-delay:.05s} .qdn-pag .qdn-qi-specg-g:nth-child(3){transition-delay:.10s} @media (prefers-reduced-motion:reduce){ body.qdn-mo-on .qdn-pag .qdn-qi-pil, body.qdn-mo-on .qdn-pag .qdn-qi-specg-g{opacity:1; transform:none; transition:none} } .qdn-pag .qdn-qi-specg, .qdn-pag .qdn-qi-pilastri{max-width:100%} /* ===================================================================== * QDN LANDING PRODOTTO v14 — le fotografie in finitura oro (3654) * Componenti 98-100. Prefisso qdn-qi-, gia' in uso dal v12. * * Le due immagini definitive arrivano con fondi opposti, misurati: il QI * chiuso e' scontornato e ha il canale alfa (77% di pixel trasparenti, * angoli a alfa 0), la vista esplosa e' su fondo bianco pieno. Vanno su * due sezioni di tono opposto. Nessuna delle due si ritocca: il lavoro * lo fa il fondo che le accoglie. * ------------------------------------------------------------------ */ /* 98. LA TAVOLA TECNICA. * L'esploso sta nella sezione scura della tecnologia e ha il fondo * bianco: appoggiato li' sarebbe una toppa chiara. Diventa invece una * tavola su carta, cioe' un riquadro crema dichiarato. Il bianco del * file si fonde con la carta grazie a mix-blend-mode:multiply, che * lascia passare il prodotto e l'ombra sotto la base e assorbe solo il * fondo. * isolation:isolate e' OBBLIGATORIO: senza, il fondale della fusione * sarebbe la sezione inchiostro e l'immagine annerirebbe. */ .qdn-pag .qdn-qi-tavola{ background:var(--pgc); border:1px solid rgba(176,137,90,.4); padding:clamp(16px,2.2vw,30px); isolation:isolate; display:flex; justify-content:center; } .qdn-pag .qdn-qi-tavola .elementor-widget-image img{ display:block; width:auto; max-width:100%; height:auto; max-height:min(58vh,520px); mix-blend-mode:multiply; } /* 99. LA LEGENDA DELL'ESPLOSO. * Fuori dall'immagine, in HTML: un testo stampato dentro una fotografia * non si traduce, non si corregge e non lo legge uno screen reader. E' * la lezione che il 6 ottobre e' costata l'esclusione dell'esploso * precedente, le cui didascalie inglesi contraddicevano il sito. * Le voci seguono l'ordine verticale dell'immagine, dall'alto in basso: * e' quello che rende leggibile il rimando senza linee di richiamo. * I numeri sono in ottone pieno (--pgo), che sull'inchiostro misura * 5,1:1; l'ottone da testo si fermerebbe a 3:1 (regola 25). */ .qdn-pag .qdn-qi-legenda{margin-top:26px} .qdn-pag .qdn-qi-legenda ol{ list-style:none; counter-reset:qileg; margin:0; padding:0; } .qdn-pag .qdn-qi-legenda li{ counter-increment:qileg; position:relative; padding:11px 0 11px 36px; border-bottom:1px solid rgba(176,137,90,.2); font-size:15px; line-height:1.5; } .qdn-pag .qdn-qi-legenda li:last-child{border-bottom:0} .qdn-pag .qdn-qi-legenda li::before{ content:counter(qileg,decimal-leading-zero); position:absolute; left:0; top:13px; font-family:var(--qb); font-size:11.5px; letter-spacing:.12em; color:var(--pgo); } .qdn-pag .qdn-qi-legenda strong{display:block; font-weight:500} .qdn-pag.qdn-p-sez-scuro .qdn-qi-legenda li{color:rgba(244,239,230,.82)} .qdn-pag.qdn-p-sez-scuro .qdn-qi-legenda strong{color:var(--pgc)} /* 100. IL QI SCONTORNATO NELLA HERO. * Il file ha il canale alfa, quindi niente fondo, niente riquadro e * nessuna fusione: si appoggia direttamente sull'inchiostro. Il * componente 88 gia' spegne fondo e bordo del segnaposto quando arriva * un'immagine; qui resta da governare solo l'altezza, perche' il file e' * 1024x1536 e a larghezza piena supererebbe l'altezza della hero. * Serve piu' specificita' del componente 88, che impone width:100%. */ .qdn-pag .qdn-qi-slot--alto:has(img){display:flex; justify-content:center} .qdn-pag .qdn-qi-slot--alto .elementor-widget-image img{ width:auto; max-width:100%; height:auto; max-height:min(66vh,560px); } /* ===================================================================== * QDN CASE HISTORY v14 - componenti 101-106 * * Sezione "Le esperienze": schede riutilizzabili per le case history, * pensate per essere IDENTICHE su tutte le pagine settore. Si disegna * una volta sola e si riusa: il giorno in cui arriva una fotografia * migliore si sostituisce il file e basta. * * Due varianti dello stesso oggetto: * - con fotografia -> .qdn-caso-foto * - con logo -> .qdn-caso-foto + .qdn-caso-foto--logo * Stessa forma, stessa altezza, stesso allineamento: cambia solo che * cosa sta dentro il riquadro. * * Zero JavaScript. La comparsa la da' gia' il motore di livello "media". * ================================================================== */ /* --- 101. la griglia: due schede affiancate, una sola sul telefono --- */ .qdn-pag .qdn-caso-griglia{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; align-items:stretch; } @media (max-width:880px){ .qdn-pag .qdn-caso-griglia{ grid-template-columns:1fr; gap:32px; } } /* Elementor rende "boxed" un contenitore senza content_width full e gli infila dentro un .e-con-inner: in quel caso la griglia governerebbe l'involucro invece delle celle. Doppia cintura, lezione del 7/10. */ .qdn-pag .qdn-caso-griglia > .e-con-inner{display:contents} /* --- 102. la scheda --- */ .qdn-pag .qdn-caso{ display:flex; flex-direction:column; background:#23211D; border:1px solid rgba(176,137,90,.26); overflow:hidden; } .qdn-pag .qdn-caso > .e-con-inner{ display:flex; flex-direction:column; height:100%; padding:0; } /* --- 103. il riquadro dell'immagine --- SEMPRE 2:1: e' questo che tiene allineate le due schede qualunque sia la sorgente, e che permette di scambiare una fotografia con un logo senza rifare niente. */ .qdn-pag .qdn-caso-foto{ aspect-ratio:2 / 1; overflow:hidden; border-bottom:1px solid rgba(176,137,90,.26); padding:0; background:#1C1A17; } .qdn-pag .qdn-caso-foto .elementor-widget-image, .qdn-pag .qdn-caso-foto .elementor-widget-container, .qdn-pag .qdn-caso-foto figure{ height:100%; margin:0; padding:0; } .qdn-pag .qdn-caso-foto img{ display:block; width:100%; height:100%; object-fit:cover; /* stesso trattamento delle altre fotografie del sito (§2-septies): non distrugge l'originale, lo porta nella palette */ filter:saturate(.82) contrast(1.04) brightness(.95); } /* variante logo: il marchio non si taglia e non si deforma mai */ .qdn-pag .qdn-caso-foto--logo img{ object-fit:contain; padding:38px; filter:none; } /* --- 104. il corpo della scheda --- */ .qdn-pag .qdn-caso-corpo{ padding:30px 32px 34px; flex:1 1 auto; } @media (max-width:600px){ .qdn-pag .qdn-caso-corpo{padding:24px 22px 28px} } /* --- 105. l'occhiello con il nome del cliente --- Ottone pieno su #23211D misura 4,7:1, sopra AA. Sui fondi chiari servirebbe l'ottone scuro: qui la scheda e' sempre scura. */ .qdn-pag .qdn-caso-cliente{ margin:0 0 10px; font-family:'Instrument Sans',system-ui,sans-serif; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#B0895A; } /* --- 106. titolo e racconto --- */ .qdn-pag .qdn-caso-titolo{ margin:0 0 14px; font-family:'Fraunces',Georgia,serif; font-size:25px; line-height:1.24; font-weight:400; color:#F4EFE6; text-wrap:balance; } @media (max-width:600px){ .qdn-pag .qdn-caso-titolo{font-size:22px} } .qdn-pag .qdn-caso-testo, .qdn-pag .qdn-caso-testo p{ margin:0 0 12px; font-family:'Instrument Sans',system-ui,sans-serif; font-size:15.5px; line-height:1.62; color:rgba(244,239,230,.84); } .qdn-pag .qdn-caso-testo p:last-child{margin-bottom:0} /* --- la nota sotto la griglia, in tono minore --- */ .qdn-pag .qdn-caso-nota, .qdn-pag .qdn-caso-nota p{ margin:0; font-family:'Instrument Sans',system-ui,sans-serif; font-size:13.5px; line-height:1.6; color:rgba(244,239,230,.58); } /* ===================================================================== * QDN CASE HISTORY v15 - componente 107 * * Variante a TRE case history del componente v14 (101-106). NON e' un * componente nuovo: scheda, riquadro, occhiello, titolo, testo e nota * restano quelli del v14 e non vengono riscritti. * * Tre schede AFFIANCATE erano la prima soluzione ed e' stata scartata * MISURANDO, non a occhio: in una colonna da 352px la riga di testo * scende a 35 caratteri, il titolo va su quattro righe e la scheda * diventa alta 930px con un'immagine di 220. Cioe' stretta e alta. * * Qui ogni scheda e' una RIGA a tutta larghezza: immagine a sinistra, * racconto a destra. Misurato a 1120 di contenuti: 54 caratteri per * riga, titolo su due righe, riquadri 582x466 tutti identici. * ================================================================== */ /* --- 107. la griglia a TRE schede: una colonna, tre righe --- grid-auto-rows:1fr tiene le tre righe della stessa altezza, che e' la condizione perche' i tre riquadri restino identici fra loro: lo stesso principio del v14, applicato in verticale invece che in orizzontale. */ .qdn-pag .qdn-caso-griglia--3{ grid-template-columns:1fr; gap:28px; grid-auto-rows:1fr; } /* Sopra i 1100px la scheda si apre in due colonne. La soglia e' 1100 e non 1024 perche' e' li' che le righe smettono di funzionare: misurato a 1032px di viewport la riga di testo scende a 46 caratteri e il riquadro diventa VERTICALE (0,95), perche' il testo stretto cresce in altezza e l'immagine lo seguirebbe. ⚠️ La griglia va su .qdn-caso e NON su un involucro interno: queste schede hanno content_width "full", quindi Elementor non crea alcun .e-con-inner e una regola scritta su quello non colpirebbe nulla. */ @media (min-width:1101px){ .qdn-pag .qdn-caso-griglia--3 .qdn-caso{ display:grid; grid-template-columns:minmax(0,54fr) minmax(0,46fr); align-items:stretch; } /* il riquadro perde la proporzione fissa e prende l'altezza della riga: il filetto fra immagine e testo passa da sotto a destra */ .qdn-pag .qdn-caso-griglia--3 .qdn-caso-foto{ aspect-ratio:auto; height:100%; border-bottom:0; border-right:1px solid rgba(176,137,90,.26); } .qdn-pag .qdn-caso-griglia--3 .qdn-caso-corpo{ padding:32px 36px 34px; display:flex; flex-direction:column; justify-content:center; } } /* Sotto i 1100px torna la scheda verticale del v14, riquadro 2:1. Il limite di misura serve solo qui: impilata, la scheda e' larga quanto la pagina e la riga di testo arriverebbe a 111 caratteri. Il valore e' 56ch e non 64: misurato, 64ch rendeva 654px e 78 caratteri. ⛔ CINQUE classi, non tre: Elementor impone max-width:100% ai propri widget con un selettore da (0,4,0), e un selettore piu' corto perde in silenzio. E' la lezione del §2-quindecies. */ @media (max-width:1100px){ .qdn-pag .qdn-caso-griglia--3 .qdn-caso .qdn-caso-corpo .qdn-caso-testo{ max-width:56ch; } } /* ===================================================================== * QDN CHECKOUT v16 - componente 108 * * La cassa (pagina 979) e' ancora la pagina Elementor del vecchio sito: * titolo, widget Checkout di Elementor Pro, divisore e pulsante «Aggiungi * un Altro Prodotto». Dal 4.18.4 prende l'header QDN come tutto il resto * (prima restava quello di Astra, trasparente sopra il titolo); qui si * tolgono gli ultimi due colori del vecchio kit Elementor, il bordeaux * #A4193D di divisore e pulsante. * * Solo grafica, e solo dentro body.qdn-negozio.woocommerce-checkout: nessun * campo, metodo di pagamento, totale o calcolo e' coinvolto. Il pulsante * riprende il contorno d'ottone dei pulsanti secondari del sito. * ===================================================================== */ body.qdn-negozio.woocommerce-checkout .elementor-divider{--divider-color:rgba(176,137,90,.45)} body.qdn-negozio.woocommerce-checkout .elementor-divider-separator{border-top-color:rgba(176,137,90,.45)} body.qdn-negozio.woocommerce-checkout .elementor-widget-button .elementor-button{ background:transparent; color:#1C1A17; border:1px solid #B0895A; border-radius:0; font-family:'Instrument Sans',system-ui,sans-serif; font-size:13px; letter-spacing:.06em; text-transform:uppercase; box-shadow:none; } body.qdn-negozio.woocommerce-checkout .elementor-widget-button .elementor-button:hover, body.qdn-negozio.woocommerce-checkout .elementor-widget-button .elementor-button:focus-visible{ background:#B0895A; color:#1C1A17; }