/* ========================================================================== 140 GRAMMI · TEMPLATE "SPIGA" Tutto quello che segue viene dal Manuale di utilizzo del Logo (Publikendi per 140 Grammi spaghetteria, 11.01.23). Niente di inventato. ========================================================================== */ :root{ /* --- COLORI SOCIALI · manuale, cap. 5 "Riferimenti", pag. 16-17 ---------- Sono questi cinque e nessun altro. Non si schiariscono, non si scuriscono, non si mescolano: il manuale vieta di modificare i colori istituzionali. */ --oro:#C4921E; /* CMYK 20.40.95.10 · RGB 196.146.30 */ --scuro:#180A0A; /* CMYK 70.80.63.90 · RGB 24.10.10 */ --bianco:#FFFFFF; /* CMYK 0.0.0.0 · RGB 255.255.255 */ --verde:#3D9348; /* CMYK 77.18.89.3 · RGB 61.147.72 */ --rosso:#DA0D33; /* CMYK 7.100.77.0 · RGB 218.13.51 */ /* Verde e rosso sono colori sociali a tutti gli effetti. In questo sito restano dentro il marchio (i filetti sotto "SPAGHETTERIA") per scelta di Andrea, non per una regola del manuale. */ /* --- trasparenze dei colori sociali (non sono colori nuovi) --- */ --scuro-70:rgba(24,10,10,.70); --scuro-40:rgba(24,10,10,.40); --scuro-16:rgba(24,10,10,.16); --bianco-70:rgba(255,255,255,.70); --bianco-40:rgba(255,255,255,.40); /* --- fondo a spighe: la Texture 140 Grammi ufficiale. La tessera è già colorata (oro su bianco): niente maschere, niente sovrapposizioni, quindi nessun colore fuori tavolozza. Sta sulla pagina, così le colonne restano allineate da un blocco all'altro. --- */ --spiga-scala:67px 27px; /* --- scala tipografica --- */ --t-micro:11px; --t-piccolo:14px; --t-corpo:17px; --t-medio:clamp(19px,2.2vw,23px); --t-grande:clamp(26px,3.6vw,40px); --t-enorme:clamp(34px,5.6vw,64px); /* --- ritmo verticale, passo 4 --- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --gabbia:1120px; --stretta:680px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background-color:var(--bianco); background-image:url("data:image/png;base64,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"); background-size:var(--spiga-scala); background-repeat:repeat; color:var(--scuro); font-family:"Lato","Helvetica Neue",Arial,sans-serif; /* carattere del kit del marchio */ font-size:var(--t-corpo); line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} a{color:inherit} :focus-visible{outline:2px solid var(--oro);outline-offset:3px} /* -------------------------------------------------------------------------- FONDI SOCIALI Il manuale (cap. 6, pag. 20-21) prevede il marchio su fondo oro e su fondo scuro, con due versioni dedicate del logo. Qui i tre fondi ammessi:
bianco, spighe oro
oro, spighe scure
scuro, spighe oro Dentro ci va SEMPRE il file del logo giusto per quel fondo — vedi .marchio. -------------------------------------------------------------------------- */ .campo{position:relative;isolation:isolate;background:transparent} .campo > .spighe,.sede > .spighe,.piede-grande > .spighe,.scelta > a > .spighe{display:none} .campo > *:not(.spighe){position:relative;z-index:1} /* fondi pieni: opachi, senza trama sovrapposta. Il fondo scuro è il #180A0A del manuale, pieno: nessuna spiga sopra, quindi nessun marrone. */ .campo--scuro{background:var(--scuro);color:var(--bianco)} .campo--oro{background-color:var(--oro);background-image:url("data:image/png;base64,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"); background-size:var(--spiga-scala);color:var(--scuro)} /* -------------------------------------------------------------------------- IMPAGINAZIONE -------------------------------------------------------------------------- */ .gabbia{max-width:var(--gabbia);margin-inline:auto;padding-inline:clamp(18px,4vw,40px)} .gabbia--stretta{max-width:var(--stretta)} .sezione{padding-block:clamp(var(--s7),8vw,var(--s9))} .sezione--corta{padding-block:clamp(var(--s6),5vw,var(--s7))} .centrato{text-align:center} .pila{display:flex;flex-direction:column} .pila--s4{gap:var(--s4)} .pila--s5{gap:var(--s5)} .pila--s6{gap:var(--s6)} .pila--s7{gap:var(--s7)} /* Mr Spaghetto e' molto piu' alto del testo che gli sta accanto: la colonna che lo contiene ha bisogno di piu' stacco dal blocco sotto, o i piedi lo toccano. */ .pila--s7:has(.mr-riga){gap:clamp(var(--s6),5vw,var(--s8))} /* -------------------------------------------------------------------------- TIPOGRAFIA Manuale cap. 5: il naming nasce da un sans serif iconico. Per il testo corrente Lato, per i titoli Source Serif: i due caratteri che stanno nella cartella Fonts del kit del marchio. -------------------------------------------------------------------------- */ .occhiello{ margin:0;font-size:var(--t-micro);font-weight:900; letter-spacing:.26em;text-transform:uppercase;color:var(--scuro-70); } .campo--scuro .occhiello{color:var(--oro)} .campo--oro .occhiello{color:var(--scuro-70)} .titolo,.titolo-grande,.titolo-medio{ font-family:"Source Serif 4",Georgia,"Times New Roman",serif; font-weight:700;margin:0;line-height:1.04;letter-spacing:-.015em;text-wrap:balance; } .titolo-grande{font-size:var(--t-enorme)} .titolo{font-size:var(--t-grande)} .titolo-medio{font-size:var(--t-medio);line-height:1.15} /* L'oro come colore di testo si usa solo in corpo grande: in piccolo non regge. */ .titolo em,.titolo-grande em{font-style:italic;color:var(--oro)} .campo--oro em{color:var(--scuro)} .testo{margin:0;font-size:var(--t-corpo);max-width:60ch} .testo--tenue{color:var(--scuro-70)} .campo--scuro .testo{color:var(--bianco)} .campo--scuro .testo--tenue{color:var(--bianco-70)} .piccolo{font-size:var(--t-piccolo)} .filetto{width:44px;height:2px;background:var(--oro);border:0;margin:0} .centrato .filetto{margin-inline:auto} /* -------------------------------------------------------------------------- MARCHIO Manuale cap. 8 "Errori da evitare": mai deformarlo, mai ricolorarlo, mai metterlo dentro riquadri bianchi sovrapposti a fondi colorati, mai aloni o ombre. Per questo qui non c'e' nessuna cornice e nessun box-shadow. Tre file, uno per fondo: assets/logo-su-bianco-2.png su fondo bianco assets/logo-su-oro-2.png su fondo oro assets/logo-su-scuro-2.png su fondo scuro Larghezza minima prevista dal manuale: 15 mm nella versione verticale. -------------------------------------------------------------------------- */ /* Il marchio ufficiale porta con se' l'area di rispetto del manuale: il segno occupa circa metà della tela. Le misure qui sotto tengono conto di quello, percio' sono piu' grandi di quanto sembri. height:auto: mai schiacciato. */ .marchio{width:clamp(160px,20vw,240px);height:auto;display:block;margin-inline:auto} .marchio--piccolo{width:clamp(120px,13vw,150px)} /* -------------------------------------------------------------------------- BOTTONI -------------------------------------------------------------------------- */ .bottoni{display:flex;flex-wrap:wrap;gap:var(--s3)} .centrato .bottoni{justify-content:center} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--s2); font-family:inherit;font-size:var(--t-piccolo);font-weight:900; letter-spacing:.1em;text-transform:uppercase;text-decoration:none; padding:14px 24px;border:1px solid var(--scuro);background:var(--scuro);color:var(--bianco); cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease; } .btn:hover{background:var(--oro);border-color:var(--oro);color:var(--scuro)} .btn--vuoto{background:transparent;color:var(--scuro)} .btn--vuoto:hover{background:var(--scuro);color:var(--bianco);border-color:var(--scuro)} .campo--scuro .btn,.sede--scuro .btn{background:var(--oro);border-color:var(--oro);color:var(--scuro)} .campo--scuro .btn:hover,.sede--scuro .btn:hover{background:var(--bianco);border-color:var(--bianco);color:var(--scuro)} .campo--scuro .btn--vuoto,.sede--scuro .btn--vuoto{background:transparent;border-color:var(--bianco-40);color:var(--bianco)} .campo--scuro .btn--vuoto:hover,.sede--scuro .btn--vuoto:hover{background:var(--bianco);border-color:var(--bianco);color:var(--scuro)} .campo--oro .btn,.sede--oro .btn{background:var(--scuro);border-color:var(--scuro);color:var(--bianco)} .campo--oro .btn:hover,.sede--oro .btn:hover{background:var(--bianco);border-color:var(--bianco);color:var(--scuro)} .campo--oro .btn--vuoto,.sede--oro .btn--vuoto{background:transparent;border-color:var(--scuro);color:var(--scuro)} .campo--oro .btn--vuoto:hover,.sede--oro .btn--vuoto:hover{background:var(--scuro);color:var(--bianco)} /* -------------------------------------------------------------------------- ETICHETTE -------------------------------------------------------------------------- */ .etichetta{ display:inline-block;font-size:var(--t-micro);font-weight:900; letter-spacing:.18em;text-transform:uppercase;padding:8px 14px; border:1px solid var(--scuro-16);color:var(--scuro-70); } .campo--scuro .etichetta,.sede--scuro .etichetta{border-color:var(--bianco-40);color:var(--bianco)} .campo--oro .etichetta,.sede--oro .etichetta{border-color:var(--scuro-40);color:var(--scuro)} .voto{display:inline-flex;align-items:baseline;gap:var(--s2)} .voto b{font-family:"Source Serif 4",Georgia,serif;font-size:28px;line-height:1;font-weight:700} .voto span{font-size:var(--t-piccolo);color:var(--scuro-70)} /* -------------------------------------------------------------------------- SCHEDE SEDE -------------------------------------------------------------------------- */ .griglia-sedi{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:0} .sede{position:relative;isolation:isolate; padding:clamp(var(--s6),5vw,var(--s8)) clamp(var(--s5),4vw,var(--s7)); display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start} .sede > *:not(.spighe){position:relative;z-index:1} .sede--scuro{background:var(--scuro);color:var(--bianco)} .sede--scuro .occhiello{color:var(--oro)} .sede--scuro .titolo,.sede--scuro .testo{color:var(--bianco)} .sede--bianco{background:var(--bianco);color:var(--scuro);box-shadow:inset 1px 0 0 var(--scuro-16)} .sede--bianco .occhiello{color:var(--scuro-70)} .sede--oro{background-color:var(--oro);background-image:url("data:image/png;base64,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"); background-size:var(--spiga-scala);color:var(--scuro)} .sede--oro .occhiello{color:var(--scuro-70)} .social{display:flex;gap:var(--s3);margin-top:var(--s2)} .social a{width:38px;height:38px;display:grid;place-items:center; border:1px solid var(--scuro-16);color:var(--scuro);text-decoration:none; transition:background .18s ease,color .18s ease} .social a:hover{background:var(--scuro);color:var(--bianco)} .social svg{width:17px;height:17px;fill:currentColor} .sede--scuro .social a,.campo--scuro .social a{border-color:var(--bianco-40);color:var(--bianco)} .sede--scuro .social a:hover,.campo--scuro .social a:hover{background:var(--bianco);color:var(--scuro)} .sede--oro .social a{border-color:var(--scuro-40);color:var(--scuro)} /* -------------------------------------------------------------------------- FASCIA E PIEDE -------------------------------------------------------------------------- */ .fascia{background:var(--scuro);color:var(--bianco);padding-block:var(--s5)} .fascia .gabbia{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:center; justify-content:center;font-size:var(--t-piccolo);letter-spacing:.04em;text-align:center} .fascia b{font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:var(--t-micro);color:var(--oro)} .piede{padding-block:var(--s6);border-top:1px solid var(--scuro-16);font-size:var(--t-piccolo);color:var(--scuro-70)} .piede .gabbia{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);align-items:center;justify-content:space-between} .piede a{text-decoration:none;border-bottom:1px solid var(--scuro-16)} .piede a:hover{border-bottom-color:var(--oro)} /* -------------------------------------------------------------------------- SCHEDE GENERICHE -------------------------------------------------------------------------- */ .griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s5)} .scheda{background:var(--bianco);border:1px solid var(--scuro-16);padding:var(--s5); display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start} .scheda .data{font-size:var(--t-micro);font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--scuro-70)} .scheda--rilievo{border-top:4px solid var(--oro)} .scheda--scuro{background:var(--scuro);border-color:var(--scuro);color:var(--bianco)} .scheda--scuro .data{color:var(--oro)} .scheda--scuro .btn--vuoto{border-color:var(--bianco-40);color:var(--bianco)} .scheda--scuro .btn--vuoto:hover{background:var(--bianco);color:var(--scuro);border-color:var(--bianco)} /* -------------------------------------------------------------------------- ANTEPRIMA -> CODICE (si attiva con ?modifica in coda all'indirizzo) -------------------------------------------------------------------------- */ body.modifica [data-blocco]{position:relative;outline:1px dashed rgba(196,146,30,.85);outline-offset:-1px;cursor:pointer} body.modifica [data-blocco]:hover{outline:2px solid var(--oro);background-color:rgba(196,146,30,.06)} body.modifica [data-blocco]::before{ content:attr(data-blocco);position:absolute;top:0;left:0;z-index:60; font:900 10px/1 "Lato",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase; background:var(--oro);color:var(--scuro);padding:5px 8px;pointer-events:none; } body.modifica{padding-bottom:64px} body.modifica [data-blocco].canvas-scelto{outline:3px solid var(--oro);background-color:rgba(196,146,30,.10)} body.modifica [contenteditable="true"]{cursor:text;border-radius:2px} body.modifica [contenteditable="true"]:hover{background-color:rgba(196,146,30,.14)} body.modifica [contenteditable="true"]:focus{ outline:2px solid var(--oro);outline-offset:2px;background-color:rgba(196,146,30,.16); } #canvas-barra{ position:fixed;left:0;right:0;bottom:0;z-index:99; display:flex;flex-wrap:wrap;align-items:center;gap:12px; background:var(--scuro);color:var(--bianco);padding:10px 16px; font:400 13px/1.3 "Lato",Arial,sans-serif; } #canvas-barra .canvas-file{ font-weight:900;letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:var(--oro); } #canvas-barra .canvas-stato{flex:1 1 200px;color:rgba(255,255,255,.82)} #canvas-barra button{ background:transparent;color:var(--bianco);border:1px solid rgba(255,255,255,.42); padding:7px 12px;font:900 11px/1 "Lato",Arial,sans-serif;letter-spacing:.1em; text-transform:uppercase;cursor:pointer;transition:background-color .18s ease,border-color .18s ease; } #canvas-barra button:hover{background:var(--oro);border-color:var(--oro);color:var(--scuro)} #canvas-barra button b{color:var(--oro)} #canvas-barra button:hover b{color:var(--scuro)} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ========================================================================== PARTE 2 · TESTATA, NAVIGAZIONE, COMPONENTI INTERATTIVI ========================================================================== */ /* -------------------------------------------------------------------------- TESTATA Resta in alto e si compatta quando si scorre. -------------------------------------------------------------------------- */ .testata{ position:sticky;top:0;z-index:50; background:var(--bianco); border-bottom:1px solid var(--scuro-16); transition:padding .2s ease, box-shadow .2s ease; } .testata .gabbia{display:flex;align-items:center;gap:var(--s5);padding-block:var(--s4)} .testata.compatta .gabbia{padding-block:var(--s2)} .testata.compatta{box-shadow:0 1px 0 var(--scuro-16)} .testata .logo{flex:none;display:block} /* Il marchio in testata si misura in ALTEZZA, non in larghezza: il file ora e' ritagliato sul segno, quindi legarlo alla larghezza gli dimezzava l'altezza e "SPAGHETTERIA" diventava illeggibile. Con l'altezza fissa la presenza ottica resta la stessa qualunque sia il rapporto del file. */ .testata .logo img{height:clamp(30px,3.2vw,38px);width:auto;display:block;transition:height .2s ease} .testata.compatta .logo img{height:clamp(26px,2.6vw,32px)} .nav{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);margin-left:auto} .nav a{ position:relative;text-decoration:none;font-size:var(--t-piccolo);font-weight:700; letter-spacing:.03em;color:var(--scuro);padding-block:6px;white-space:nowrap; } .nav a::after{ content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--oro); transition:right .22s ease; } .nav a:hover::after,.nav a:focus-visible::after{right:0} .nav a[aria-current="page"]{color:var(--oro)} .nav a[aria-current="page"]::after{right:0} .testata-azioni{display:flex;align-items:center;gap:var(--s3);flex:none} .testata-tel{ font-size:var(--t-piccolo);font-weight:900;letter-spacing:.06em;text-decoration:none; white-space:nowrap; } .testata-tel:hover{color:var(--oro)} .btn--piccolo{padding:10px 18px;font-size:12px} .apri-menu{display:none;margin-left:auto;background:transparent;border:1px solid var(--scuro-16); padding:10px 14px;font:900 11px/1 "Lato",Arial,sans-serif;letter-spacing:.18em; text-transform:uppercase;color:var(--scuro);cursor:pointer} .apri-menu:hover{border-color:var(--oro)} @media (max-width:1080px){ .apri-menu{display:block} .nav{ position:fixed;inset:0 0 auto;top:0;padding:96px var(--s5) var(--s6); background:var(--bianco);flex-direction:column;align-items:flex-start;gap:var(--s4); border-bottom:1px solid var(--scuro-16); transform:translateY(-101%);transition:transform .28s ease; max-height:100dvh;overflow-y:auto; } .nav.aperta{transform:translateY(0)} .nav a{font-size:19px} .testata-azioni{display:none} .nav .solo-telefono{display:flex;flex-direction:column;gap:var(--s3);width:100%;margin-top:var(--s3)} } @media (min-width:1081px){ .nav .solo-telefono{display:none} } /* -------------------------------------------------------------------------- EROE -------------------------------------------------------------------------- */ /* L'apertura dello splash: aria sopra, meno sotto, cosi' non si apre un buco fra il testo e il blocco che segue. */ .sezione--apertura{padding-block:clamp(var(--s7),7vw,var(--s9)) clamp(var(--s6),4vw,var(--s7))} .eroe{position:relative;isolation:isolate} .eroe .gabbia{padding-block:clamp(var(--s7),9vw,var(--s9))} .eroe-testo{max-width:26ch} .eroe .centrato .eroe-testo{margin-inline:auto;max-width:24ch} /* -------------------------------------------------------------------------- RIQUADRI: le scatole che si accendono al passaggio del mouse -------------------------------------------------------------------------- */ .riquadri{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr));gap:var(--s4)} /* niente max-width + margin:auto: la griglia si centrava da sola dentro una colonna allineata a sinistra e finiva rientrata di 42px rispetto al testo che le sta sopra. Ora segue la stessa colonna dei fratelli. */ .riquadri--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))} .riquadri--2 .riquadro{min-width:0} .riquadro .btn{margin-top:auto} .riquadro{ position:relative;display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start; padding:var(--s5);background:var(--bianco);border:1px solid var(--scuro-16); text-decoration:none;color:inherit; transition:border-color .2s ease, transform .2s ease, background-color .2s ease; } .riquadro::before{ content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--oro); transform:scaleX(0);transform-origin:left;transition:transform .26s ease; } .riquadro:hover,.riquadro:focus-visible{border-color:var(--oro);transform:translateY(-3px)} .riquadro:hover::before,.riquadro:focus-visible::before{transform:scaleX(1)} .riquadro h3{margin:0;font-family:"Source Serif 4",Georgia,serif;font-size:var(--t-medio); font-weight:700;line-height:1.15} .riquadro p{margin:0;font-size:var(--t-piccolo);color:var(--scuro-70);line-height:1.55} .riquadro .vai{ margin-top:auto;font-size:var(--t-micro);font-weight:900;letter-spacing:.18em; text-transform:uppercase;color:var(--oro);display:inline-flex;gap:8px;align-items:center; } .riquadro .vai::after{content:"→";transition:transform .22s ease} .riquadro:hover .vai::after,.riquadro:focus-visible .vai::after{transform:translateX(5px)} /* riquadri sui fondi pieni */ .campo--scuro .riquadro{background:transparent;border-color:var(--bianco-40);color:var(--bianco)} .campo--scuro .riquadro:hover{border-color:var(--oro);background:rgba(196,146,30,.10)} .campo--scuro .riquadro p{color:var(--bianco-70)} .campo--oro .riquadro{background:transparent;border-color:var(--scuro-40)} .campo--oro .riquadro:hover{border-color:var(--scuro);background:rgba(24,10,10,.06)} .campo--oro .riquadro p{color:var(--scuro-70)} .campo--oro .riquadro::before{background:var(--scuro)} .campo--oro .riquadro .vai{color:var(--scuro)} /* riquadro senza collegamento (solo informativo) */ .riquadro--fermo{cursor:default} .riquadro--fermo:hover{transform:none} /* -------------------------------------------------------------------------- ELENCO PUNTATO ELEGANTE -------------------------------------------------------------------------- */ .spighe-elenco{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)} .spighe-elenco li{position:relative;padding-left:26px} .spighe-elenco li::before{ content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--oro); } .campo--scuro .spighe-elenco li::before{background:var(--oro)} /* -------------------------------------------------------------------------- FAQ a fisarmonica -------------------------------------------------------------------------- */ .faq{display:flex;flex-direction:column;border-top:1px solid var(--scuro-16)} .faq details{border-bottom:1px solid var(--scuro-16)} .faq summary{ list-style:none;cursor:pointer;padding:var(--s4) 42px var(--s4) 0;position:relative; font-family:"Source Serif 4",Georgia,serif;font-size:var(--t-medio);font-weight:700; line-height:1.25;transition:color .18s ease; } .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--oro)} .faq summary::after{ content:"";position:absolute;right:8px;top:50%;width:13px;height:13px; border-right:2px solid var(--oro);border-bottom:2px solid var(--oro); transform:translateY(-70%) rotate(45deg);transition:transform .24s ease; } .faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)} .faq .risposta{padding:0 0 var(--s5);max-width:70ch;color:var(--scuro-70)} .faq .risposta p{margin:0 0 var(--s3)} .faq .risposta p:last-child{margin-bottom:0} .faq .risposta ul{margin:var(--s2) 0 0;padding-left:20px} .faq .risposta li{margin-bottom:6px} .faq .risposta b{color:var(--scuro)} /* -------------------------------------------------------------------------- DATI IN COLONNA (orari, indirizzo, contatti) -------------------------------------------------------------------------- */ .dati{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:var(--s5)} .dato h4{margin:0 0 6px;font-size:var(--t-micro);font-weight:900;letter-spacing:.18em; text-transform:uppercase;color:var(--scuro-70)} .dato p{margin:0;font-size:var(--t-piccolo);line-height:1.6} .dato a{text-decoration:none;border-bottom:1px solid var(--scuro-16)} .dato a:hover{border-bottom-color:var(--oro)} .campo--scuro .dato h4{color:var(--oro)} .campo--scuro .dato a{border-bottom-color:var(--bianco-40)} /* -------------------------------------------------------------------------- COMPARSA DOLCE ALLO SCORRIMENTO Lo stato nascosto lo mette il JS: se il JS non parte, resta tutto visibile. (Su questo marchio non si parte mai da opacity 0 scritto nel CSS.) -------------------------------------------------------------------------- */ .js-comparsa{opacity:0;transform:translateY(14px)} .js-comparsa.visibile{opacity:1;transform:none;transition:opacity .5s ease, transform .5s ease} @media (prefers-reduced-motion:reduce){ .js-comparsa,.js-comparsa.visibile{opacity:1;transform:none;transition:none} } /* -------------------------------------------------------------------------- PIEDE COMPLETO -------------------------------------------------------------------------- */ .piede-grande{background:var(--scuro);color:var(--bianco);position:relative;isolation:isolate} .piede-grande > *:not(.spighe){position:relative;z-index:1} .piede-grande .gabbia{padding-block:var(--s7)} .piede-grande .dato h4{color:var(--oro)} .piede-grande .dato p,.piede-grande .dato a{color:var(--bianco)} .piede-grande .dato a{border-bottom-color:var(--bianco-40)} .piede-grande .dato a:hover{border-bottom-color:var(--oro)} .piede-legale{border-top:1px solid var(--bianco-40);margin-top:var(--s6);padding-top:var(--s5); display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);justify-content:space-between; font-size:12px;color:var(--bianco-70)} .piede-legale a{color:var(--bianco-70);text-decoration:none;border-bottom:1px solid var(--bianco-40)} .piede-legale a:hover{color:var(--bianco);border-bottom-color:var(--oro)} /* -------------------------------------------------------------------------- SCELTA SEDE · due scatole, con dentro le scritte -------------------------------------------------------------------------- */ .scelta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--s5)} .scelta-box{ position:relative;overflow:hidden;text-decoration:none;color:var(--scuro); background:var(--bianco);border:1px solid var(--scuro-16); padding:clamp(var(--s5),4vw,var(--s7)); display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3); transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease; } .scelta-box::before{ content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--oro); transform:scaleX(0);transform-origin:left;transition:transform .32s ease; } .scelta-box:hover,.scelta-box:focus-visible{ border-color:var(--oro);transform:translateY(-4px); box-shadow:0 18px 40px -26px rgba(24,10,10,.55); } .scelta-box:hover::before,.scelta-box:focus-visible::before{transform:scaleX(1)} .scelta-box .titolo{transition:color .22s ease} .scelta-box:hover .titolo{color:var(--oro)} .scelta-box .vai{ margin-top:var(--s2);font-size:var(--t-micro);font-weight:900;letter-spacing:.2em; text-transform:uppercase;color:var(--oro);display:inline-flex;gap:10px;align-items:center; } .scelta-box .vai::after{content:"\2192";transition:transform .24s ease} .scelta-box:hover .vai::after{transform:translateX(7px)} /* -------------------------------------------------------------------------- MR SPAGHETTO -------------------------------------------------------------------------- */ .mr{display:block;width:clamp(150px,19vw,230px);height:auto;flex:none;max-width:100%} .mr-riga{display:flex;align-items:center;justify-content:space-between; gap:clamp(var(--s5),4vw,var(--s7));flex-wrap:wrap} .mr-riga .testi{flex:1 1 340px;max-width:52ch;display:flex;flex-direction:column;gap:var(--s3)} @media (prefers-reduced-motion:no-preference){ .mr{animation:galleggia 5s ease-in-out infinite;transform-origin:50% 100%} .mr-riga:hover .mr{animation:saluta 1.1s ease-in-out} } @keyframes galleggia{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @keyframes saluta{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}60%{transform:rotate(4deg)}} /* -------------------------------------------------------------------------- NASTRO (le due promozioni fisse, in fondo alle pagine) -------------------------------------------------------------------------- */ .nastro{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0} .nastro{background:var(--bianco)} .nastro > a{ text-decoration:none;color:inherit;padding:clamp(var(--s5),4vw,var(--s7)); display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start; border-top:1px solid var(--scuro-16);transition:background-color .22s ease; } .nastro > a + a{border-left:1px solid var(--scuro-16)} .nastro > a:hover{background:rgba(196,146,30,.10)} .nastro h3{margin:0;font-family:"Source Serif 4",Georgia,serif;font-size:var(--t-medio);font-weight:700} .nastro p{margin:0;font-size:var(--t-piccolo);color:var(--scuro-70);max-width:44ch} .nastro .vai{font-size:var(--t-micro);font-weight:900;letter-spacing:.18em;text-transform:uppercase; color:var(--oro);display:inline-flex;gap:8px;align-items:center;margin-top:var(--s1)} .nastro .vai::after{content:"→";transition:transform .22s ease} .nastro > a:hover .vai::after{transform:translateX(5px)} /* ========================================================================== PARTE 3 · AIDA Ogni pagina segue lo stesso percorso: Attenzione, Interesse, Desiderio, Azione. I "ganci" sono le frasi che fermano l'occhio: due o tre per pagina, mai di più, altrimenti non fermano più niente. ========================================================================== */ /* -------------------------------------------------------------------------- GANCIO · la frase che ferma l'occhio -------------------------------------------------------------------------- */ .gancio{ position:relative;margin:0;padding:clamp(var(--s5),4vw,var(--s6)) 0 0; border-top:2px solid var(--oro); font-family:"Source Serif 4",Georgia,serif;font-weight:700;font-style:italic; font-size:clamp(22px,3.4vw,34px);line-height:1.18;letter-spacing:-.01em; max-width:30ch;text-wrap:balance; } .centrato .gancio{margin-inline:auto} .gancio small{ display:block;margin-top:var(--s3);font-family:"Lato",Arial,sans-serif; font-style:normal;font-weight:400;font-size:var(--t-corpo);line-height:1.6; color:var(--scuro-70);max-width:100%;letter-spacing:0; } .campo--scuro .gancio small{color:var(--bianco-70)} .campo--oro .gancio small{color:var(--scuro-70)} /* -------------------------------------------------------------------------- PROVE · i numeri veri, quelli che si possono controllare -------------------------------------------------------------------------- */ .prove{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:0;border:1px solid var(--scuro-16);background:var(--bianco); } .prova{padding:clamp(var(--s4),3vw,var(--s5));border-right:1px solid var(--scuro-16); display:flex;flex-direction:column;gap:6px} .prova:last-child{border-right:0} .prova b{ font-family:"Source Serif 4",Georgia,serif;font-size:clamp(26px,3.6vw,38px); font-weight:700;line-height:1;color:var(--scuro);font-variant-numeric:tabular-nums; } .prova span{font-size:var(--t-piccolo);line-height:1.45;color:var(--scuro-70)} .prova em{display:block;font-style:normal;font-size:10px;font-weight:900; letter-spacing:.16em;text-transform:uppercase;color:var(--oro);margin-top:2px} .campo--scuro .prove{background:transparent;border-color:var(--bianco-40)} .campo--scuro .prova{border-right-color:var(--bianco-40)} .campo--scuro .prova b{color:var(--bianco)} .campo--scuro .prova span{color:var(--bianco-70)} @media (max-width:640px){ .prova{border-right:0;border-bottom:1px solid var(--scuro-16)} .prova:last-child{border-bottom:0} .campo--scuro .prova{border-bottom-color:var(--bianco-40)} } /* -------------------------------------------------------------------------- CHIUSURA · l'azione, sempre in fondo e sempre uguale -------------------------------------------------------------------------- */ .azione{background:var(--scuro);color:var(--bianco)} .azione .gabbia{padding-block:clamp(var(--s7),7vw,var(--s8)); display:flex;flex-wrap:wrap;gap:var(--s5) var(--s6);align-items:center;justify-content:space-between} .azione .testi{flex:1 1 380px;display:flex;flex-direction:column;gap:var(--s3)} .azione .titolo{color:var(--bianco)} .azione .titolo em{color:var(--oro)} .azione .testo{color:var(--bianco-70);max-width:46ch} .azione .bottoni{flex:0 0 auto} .azione .btn{background:var(--oro);border-color:var(--oro);color:var(--scuro)} .azione .btn:hover{background:var(--bianco);border-color:var(--bianco)} .azione .btn--vuoto{background:transparent;border-color:var(--bianco-40);color:var(--bianco)} .azione .btn--vuoto:hover{background:var(--bianco);border-color:var(--bianco);color:var(--scuro)} /* -------------------------------------------------------------------------- MISURE · larghezze coerenti su tutto il sito -------------------------------------------------------------------------- */ .titolo{max-width:20ch} .titolo-grande{max-width:24ch} .centrato .titolo,.centrato .titolo-grande{margin-inline:auto} .titolo-medio{max-width:24ch} .testo{max-width:62ch} .centrato .testo{margin-inline:auto} .eroe .testo{max-width:52ch} /* -------------------------------------------------------------------------- TELEFONO · proporzioni riviste -------------------------------------------------------------------------- */ @media (max-width:680px){ :root{ --t-corpo:16px; --t-enorme:clamp(30px,8.4vw,40px); --t-grande:clamp(24px,6.6vw,32px); --t-medio:19px; } .sezione{padding-block:var(--s7)} .eroe .gabbia{padding-block:var(--s7)} .gabbia{padding-inline:20px} .marchio{width:168px} .titolo,.titolo-grande,.titolo-medio,.testo,.gancio{max-width:none} .bottoni{width:100%} .bottoni .btn{flex:1 1 auto;justify-content:center} .azione .gabbia{align-items:flex-start} .azione .bottoni{width:100%} .mr-riga{gap:var(--s5);flex-direction:column-reverse;align-items:flex-start} /* in colonna il flex-basis diventa altezza: senza questo il blocco di testo resta alto 340px e sotto si apre un buco vuoto */ .mr-riga .testi{flex:0 0 auto;max-width:none;width:100%} .mr{width:120px} .piede-grande .gabbia{padding-block:var(--s6)} .fascia .gabbia{flex-direction:column;gap:var(--s2)} } /* -------------------------------------------------------------------------- PARTE 4 · DICONO DI NOI I badge dei portali in alto, il muro delle recensioni sotto. Nessuno stato iniziale invisibile: senza JavaScript si vede tutto lo stesso. -------------------------------------------------------------------------- */ .dicono-capo{ margin-bottom:var(--s6); display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s5); } .badge-riga{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:stretch} .badge{ display:flex;flex-direction:column;justify-content:center;gap:10px; min-width:250px;min-height:104px;padding:var(--s4) var(--s5); background:var(--bianco);border:1px solid var(--scuro-16); } .badge--ta{align-items:center;justify-content:center;text-align:center} .badge--ta .cdsROW,.badge--ta .cdsLocName,.badge--ta div[id^="CDSRATINGWIDGET"]{ background:transparent!important;border:0!important;box-shadow:none!important; margin:0 auto!important;padding:0!important;width:auto!important; } .badge--ta a{text-decoration:none} .badge--ta img{display:inline-block;vertical-align:middle} .badge .TA_links{list-style:none;margin:0;padding:0} .badge a{color:var(--scuro)} .badge-fonte{ margin:0;font-size:var(--t-micro);font-weight:900;letter-spacing:.18em; text-transform:uppercase;color:var(--oro); } .badge-testo{margin:0;font-size:var(--t-micro);color:var(--scuro-70);line-height:1.5;max-width:26ch} .badge-link{font-size:var(--t-micro);font-weight:700;color:var(--scuro)} .stelle{margin:0;display:inline-flex;gap:2px;line-height:1} .stella{color:var(--oro);font-size:1rem} .stella--vuota{color:var(--scuro-16)} /* filtri per portale */ .filtri{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .filtro{ background:transparent;border:1px solid var(--scuro-16);color:var(--scuro); padding:8px 14px;font:900 11px/1 "Lato",Arial,sans-serif;letter-spacing:.12em; text-transform:uppercase;cursor:pointer; transition:border-color .18s ease,background-color .18s ease,color .18s ease; } .filtro b{color:var(--oro);margin-left:6px} .filtro:hover{border-color:var(--oro)} .filtro.attivo{background:var(--scuro);border-color:var(--scuro);color:var(--bianco)} .filtro.attivo b{color:var(--oro)} .filtro-nota{font-size:var(--t-micro);color:var(--scuro-70);margin-left:auto} /* il carosello che scorre da solo */ .nastro-recensioni{ overflow:hidden;padding:2px 0 var(--s6); -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); } /* align-items:flex-start: ogni scheda alta quanto il suo testo. Con stretch una recensione di tre parole restava alta come la piu' lunga e sotto si vedeva un buco bianco. */ .scorre{display:flex;align-items:flex-start;gap:var(--s4);width:max-content; animation:scorri 90s linear infinite} .nastro-recensioni:hover .scorre, .nastro-recensioni:focus-within .scorre{animation-play-state:paused} @keyframes scorri{from{transform:translateX(0)}to{transform:translateX(-50%)}} .scorre .recensione{flex:0 0 320px} @media (prefers-reduced-motion:reduce){ .scorre{animation:none;width:auto;flex-wrap:wrap;justify-content:center} .nastro-recensioni{-webkit-mask-image:none;mask-image:none} .scorre .recensione:nth-child(n+7){display:none} } /* il muro */ .muro{ display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,286px),1fr)); gap:var(--s4);align-items:start; } .recensione{ margin:0;display:flex;flex-direction:column;gap:var(--s3); padding:var(--s5);background:var(--bianco);border:1px solid var(--scuro-16); transition:border-color .2s ease,transform .2s ease; } .recensione:hover{border-color:var(--oro);transform:translateY(-3px)} .recensione-capo{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)} .recensione .fonte{ font-size:var(--t-micro);font-weight:900;letter-spacing:.16em; text-transform:uppercase;color:var(--oro); } .recensione .quando{font-size:var(--t-micro);color:var(--scuro-70)} .recensione blockquote{ margin:0;font-family:"Source Serif 4",Georgia,serif;font-size:var(--t-piccolo); line-height:1.6;color:var(--scuro); } .recensione blockquote::before{content:"\201C"} .recensione blockquote::after{content:"\201D"} .nota-fonte{text-align:center;max-width:64ch;margin:var(--s4) auto 0} @media (max-width:680px){ .dicono-capo{flex-direction:column;align-items:flex-start} .scorre{animation-duration:65s} .scorre .recensione{flex-basis:262px} .badge-riga{width:100%} .badge{min-width:0;width:100%} .filtro-nota{margin-left:0;width:100%} .recensione{padding:var(--s4)} } @media print{.recensione[hidden]{display:flex!important}} .badge-voto{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .badge-numero{font-family:"Source Serif 4",Georgia,serif;font-size:1.9rem;font-weight:700;line-height:1;color:var(--scuro)} .badge-stelle{display:inline-flex;gap:2px;line-height:1} .badge-quante{font-size:var(--t-micro);color:var(--scuro-70)} /* Il premio Travellers' Choice: immagine servita da Tripadvisor, riquadro nostro. */ .badge--premio{align-items:center;justify-content:center;min-width:150px;padding:var(--s3) var(--s4)} .badge--premio .TA_links{list-style:none;margin:0;padding:0} .badge--premio img,.badge--premio .widCOEImg{display:block;width:104px;height:auto;margin:0 auto} /* Se static.tacdn.com non risponde (succede spesso col blocco tracciamenti sui telefoni) l'immagine si toglie da sola e resta scritto il premio: niente icona rotta. Se invece arriva, il testo sparisce e resta il logo. */ .premio-testo{display:none;text-align:center;font-family:var(--titolo); font-size:13px;line-height:1.35;color:var(--scuro);letter-spacing:.02em} .premio-testo b{display:block;font-size:22px;color:var(--oro)} .senza-logo .premio-testo{display:block} /* I due premi in home: uno per sede, non cliccabili (qui l'unica scelta da fare e' la sede, non uscire dal sito). */ /* I due premi devono stare CIASCUNO sotto la propria sede: stessa griglia di .prove (due colonne uguali), cosi' il premio di Via Mameli e' centrato sotto il riquadro di Via Mameli e quello di Predda Niedda sotto il suo. Con un flex a sinistra finivano appaiati a sinistra, senza rapporto con i box. */ .premi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:0;align-items:start;margin-top:var(--s5)} .premi .premio{justify-self:center} .premio{flex:0 0 auto;text-align:center} .premio .TA_links{list-style:none;margin:0;padding:0} .premio img,.premio .widCOEImg{display:block;width:104px;height:auto;margin:0 auto} .premio a{pointer-events:none;cursor:default;text-decoration:none;border-bottom:0} .premio-sede{margin:var(--s2) 0 0;font-size:12px;font-weight:900; letter-spacing:.18em;text-transform:uppercase;color:var(--oro)} /* -------------------------------------------------------------------------- PARTE 5 · TELEFONO Il telefono e' il novanta per cento degli accessi. Qui si garantisce che ogni cosa da toccare sia grande almeno 44px (la misura che Apple e Google indicano per il polpastrello) e che nessuna scritta scenda sotto i 12px. -------------------------------------------------------------------------- */ @media (max-width:900px){ /* niente scritte sotto i 12px: sotto quella misura il telefono le rimpicciolisce ancora e chi ha la vista stanca non le legge */ .occhiello,.recensione .fonte,.recensione .quando,.badge-fonte, .badge-quante,.etichetta,.filtro,.piede-legale,.nota-fonte{font-size:12px} .vai,.riquadro .vai,.scelta-box .vai,.nastro .vai{font-size:12px} .prova em,.dato h4,.apri-menu,.nastro b,.fascia b{font-size:12px} .nav a{white-space:nowrap} /* bersagli da toccare: almeno 44px per lato */ .apri-menu{min-height:44px;padding-inline:var(--s4)} .nav a{min-height:44px;min-width:44px;padding-inline:6px;display:inline-flex;align-items:center;justify-content:center} /* Il filetto sotto i link del piede passa da border-bottom a sottolineatura: cosi' resta attaccato alla parola anche quando il link si allarga per essere comodo da toccare col dito. */ .piede-grande a,.dato a,.badge-link,.piede-legale a{ display:inline-block;padding-block:11px;border-bottom:0; text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.45); } .piede-grande .dato a{display:block;width:fit-content} .badge-link{text-decoration-color:var(--scuro-40)} .social a{border-bottom:0;text-decoration:none;padding:0} .piede-grande .dato p{display:flex;flex-direction:column} .social a{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none} .badge a,.badge--ta a{min-height:44px;display:inline-flex;align-items:center} /* i collegamenti dentro le risposte delle FAQ: si tocca la riga intera */ .risposta a,.testo a{padding-block:12px;display:inline-block} .fascia a{min-height:44px;display:inline-flex;align-items:center} /* i bottoni veri restano larghi tutta la colonna: si sbagliano meno */ .btn{min-height:48px} } /* -------------------------------------------------------------------------- PARTE 6 · LA PAGINA D'INGRESSO E' TUTTA CENTRATA Su ogni schermo, non solo sul telefono: se un titolo parte da sinistra e quello dopo e' centrato sembra un errore. Sulla pagina d'ingresso tutto sta sull'asse centrale — occhielli, filetti, titoli, testi, Mr Spaghetto. -------------------------------------------------------------------------- */ .ingresso .gabbia, .ingresso .mr-riga, .ingresso .mr-riga .testi, .ingresso .scelta-box, .ingresso .prova, .ingresso .gancio, .ingresso .testo, .ingresso .titolo, .ingresso .titolo-grande, .ingresso .occhiello{text-align:center} .ingresso .mr-riga{align-items:center} .ingresso .mr{margin-inline:auto} .ingresso .gancio,.ingresso .prova,.ingresso .scelta-box{align-items:center} .ingresso .filetto{margin-inline:auto} .ingresso .etichetta,.ingresso .vai{align-self:center} .ingresso .piede .gabbia{text-align:center} .ingresso .fascia .gabbia{text-align:center;justify-content:center} /* i blocchi con una larghezza massima vanno centrati anche come scatola, non solo nel testo: altrimenti il testo e' centrato dentro una scatola che sta a sinistra, e si vede */ .ingresso .gancio,.ingresso .testo,.ingresso .titolo, .ingresso .titolo-grande,.ingresso .occhiello{margin-inline:auto} /* il filetto d'oro sopra il gancio parte dal bordo della scatola: se la scatola e' centrata lo e' anche lui */ .ingresso .gancio{border-top-width:2px} /* -------------------------------------------------------------------------- PARTE 7 · LA BANDA TRICOLORE E IL RESPIRO IN CIMA In cima alla pagina restava un vuoto senza motivo e le distanze fra marchio, occhiello, titolo, filetto e testo sembravano tutte diverse. Erano diverse davvero, ma non per colpa del CSS: i PNG del marchio avevano dentro un quarto di trasparenza per lato, quindi il segno "galleggiava". Ora i file sono ritagliati sul segno e le distanze qui sotto sono quelle che si vedono. -------------------------------------------------------------------------- */ .tricolore{ height:6px;width:100%; background:linear-gradient(90deg, var(--verde) 0 33.334%, #FFFFFF 33.334% 66.667%, var(--rosso) 66.667% 100%); } /* La pagina d'ingresso: un unico passo fra tutti gli elementi dell'apertura. line-height:1 sull'occhiello toglie l'aria che il rigo si porta dietro e che faceva sembrare quello spazio piu' largo degli altri. */ .ingresso .sezione--apertura{padding-block:clamp(var(--s5),5vw,var(--s7)) clamp(var(--s6),4vw,var(--s7))} .ingresso .sezione--apertura .occhiello{line-height:1.35} .ingresso .sezione--apertura .titolo-grande{margin:0} /* fra l'apertura e la scelta della sede un solo stacco, non due sommati */ .ingresso .sezione--apertura + .sezione--corta{padding-top:0} @media (max-width:900px){ /* sul telefono il passo e' uno solo: 20px fra ogni cosa */ .ingresso .sezione--apertura .gabbia{gap:20px} /* sul telefono l'occhiello con .26em di spaziatura andava a capo tre volte */ .ingresso .sezione--apertura .occhiello{letter-spacing:.16em} .ingresso .sezione--apertura{padding-block:24px 32px} .tricolore{height:5px} } /* -------------------------------------------------------------------------- PARTE 8 · LE IMMAGINI DENTRO I WIDGET ALTRUI Lo script Tripadvisor inietta il proprio marchio con altezza e larghezza fisse che a volte non stanno nel rapporto vero del file (il lockup orizzontale e' 3354x713, cioe' 4,7:1, e arrivava schiacciato a 3,6:1). Non possiamo cambiare il loro markup, ma possiamo impedire che si deformi. -------------------------------------------------------------------------- */ .badge img,.badge svg, .badge--ta img,.badge--premio img, .TA_cdsratingsonlynarrow img,.TA_certificateOfExcellence img{ height:auto;max-width:100%;object-fit:contain; } /* ========================================================================== PARTE 9 · L'IMPIANTO DEL TEMPLATE Struttura presa dal canvas "Sito 140 Grammi": apertura su fondo scuro con Mr Spaghetto grande, occhielli in carattere a spaziatura fissa, titoli bicolore, bottoni a pillola, schede con angoli tondi. I COLORI restano quelli del manuale (oro C4921E, scuro 180A0A, verde 3D9348, rosso DA0D33) e i caratteri restano Source Serif 4 + Lato: del template si prende l'impianto, non la tavolozza. ========================================================================== */ :root{ /* l'oro del manuale su fondo scuro e su fondo chiaro ha bisogno di due luminosita' diverse per restare leggibile: sono lo stesso colore con una trasparenza, non due colori nuovi (il manuale vieta di aggiungerne) */ --oro-su-scuro:color-mix(in srgb, var(--oro) 78%, #FFFFFF); --oro-su-chiaro:color-mix(in srgb, var(--oro) 82%, var(--scuro)); --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --tondo:16px; } /* --- occhiello: carattere a spaziatura fissa, come nel template ---------- */ .occhiello{ font-family:var(--mono); font-size:11px;font-weight:600;letter-spacing:.18em; color:var(--oro-su-chiaro); } .campo--scuro .occhiello,.eroe .occhiello,.apertura-scura .occhiello{color:var(--oro-su-scuro)} /* --- l'apertura scura: la firma del template --------------------------- */ .apertura-scura{background:var(--scuro);color:var(--bianco)} .apertura-scura .gabbia{ display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(28px,5vw,56px);align-items:center; padding-block:clamp(48px,9vw,104px) clamp(40px,7vw,80px); } .apertura-testi{display:flex;flex-direction:column;gap:20px; align-items:center;text-align:center} .apertura-scura .titolo-grande{margin:0;color:var(--bianco)} .apertura-scura .titolo-grande em{color:var(--oro-su-scuro);font-style:italic} .apertura-scura .testo{color:var(--bianco-70);max-width:52ch;margin:0} .apertura-mr{display:flex;justify-content:center} /* Mr e' alto e stretto (0,56): legandolo alla larghezza diventava altissimo e lasciava un buco sotto al titolo. Si misura in altezza e la larghezza segue, con un tetto per i telefoni stretti. */ .apertura-mr img{height:clamp(320px,52vh,540px);width:auto;max-width:72vw;object-fit:contain} /* la riga di prova col tricolore ai lati: il verde e il rosso del marchio fanno da parentesi al numero, invece di stare da soli in cima */ .prova-riga{display:flex;align-items:center;gap:10px;padding-top:4px;flex-wrap:wrap} .prova-riga .filo{width:22px;height:3px;border-radius:3px;flex:none} .prova-riga .filo--verde{background:var(--verde)} .prova-riga .filo--rosso{background:var(--rosso)} .prova-riga span:not(.filo){font-size:13px;color:var(--bianco-40);letter-spacing:.03em} /* --- bottoni a pillola --------------------------------------------------- */ .btn{border-radius:999px} .apri-menu{ border-radius:999px;border:1px solid var(--scuro-16);background:var(--bianco); flex-direction:column;align-items:center;justify-content:center;gap:4px; min-width:44px;font-size:0; } /* resta nascosto sul desktop: qui si cambia solo il suo aspetto, non quando compare (quello lo decide la regola di PARTE 3, che vale a 900px) */ @media (max-width:900px){ .apri-menu{display:flex} } .apri-menu::before,.apri-menu::after,.apri-menu .barra{ content:"";width:17px;height:2px;background:var(--scuro);border-radius:2px;display:block; } .apri-menu .barra{width:11px;background:var(--oro)} .apri-menu:hover{border-color:var(--oro)} /* --- angoli tondi sulle schede ------------------------------------------ */ .scelta-box,.riquadro,.badge,.recensione,.prova,.premio,.dato--scheda{border-radius:var(--tondo)} .nav a{border-radius:999px} /* Il marchio dentro l'apertura scura: la pagina d'ingresso non ha testata, quindi senza questo il marchio non comparirebbe da nessuna parte. Misurato in altezza, come in testata, per i motivi spiegati in PARTE 8. */ /* align-self:flex-start e' obbligatorio: .apertura-testi e' una colonna flex con align-items:stretch, quindi senza questo l'immagine si allarga a tutta la colonna e, avendo l'altezza fissata, si schiaccia (90% di deformazione). */ .marchio-apertura{height:clamp(34px,4.4vw,52px);width:auto;margin:0 0 var(--s2); align-self:center;flex:none} /* Il marchio si centra SOLO sul telefono, dove tutta la colonna e' centrata. Su schermo largo la colonna e' allineata a sinistra: se il marchio resta centrato finisce fuori asse rispetto a occhiello, titolo e riga di prova. */ @media (max-width:900px){ .ingresso .marchio-apertura{margin-inline:auto} } @media (max-width:900px){ .ingresso .prova-riga{justify-content:center} } /* la riga di prova anche dentro l'eroe delle sedi, centrata come il resto */ .eroe .prova-riga{justify-content:center} .eroe .prova-riga span:not(.filo){color:var(--bianco-40)} /* Il filo verde e quello rosso restano alle due estremita' anche quando il testo in mezzo va a capo: senza questo, sul telefono il verde finiva su una riga da solo e il rosso su un'altra. */ .prova-riga{flex-wrap:nowrap;align-items:center} .prova-riga span:not(.filo){flex:0 1 auto;min-width:0} /* la barretta corta e oro sta per ultima, come nel template */ .apri-menu .barra{order:3} /* l'occhiello a spaziatura fissa e' nato a 11px: sul telefono torna a 12, sotto quella misura non si legge (regola di PARTE 5) */ @media (max-width:900px){ .occhiello{font-size:12px;letter-spacing:.14em} } /* le etichette dei dati (INDIRIZZO, TELEFONO, ORARI…) sono la stessa classe di scritta dell'occhiello: stesso carattere, cosi' il sistema resta uno */ .dato h4,.badge-fonte{font-family:var(--mono);font-weight:600;letter-spacing:.16em} /* -------------------------------------------------------------------------- PARTE 10 · IL PIEDE SUL TELEFONO Su una colonna sola tutto sta sull'asse centrale, piede compreso: se le etichette partono da sinistra e il resto e' centrato sembra un errore. -------------------------------------------------------------------------- */ @media (max-width:900px){ .piede-grande,.piede-grande .gabbia,.piede-grande .dato, .piede,.piede .gabbia,.piede-legale, .dati,.dati .dato, .fascia,.fascia .gabbia{text-align:center} .piede-grande .dato p,.piede-grande .dato h4{align-items:center} /* su un figlio flex margin:auto mangia tutto lo spazio libero: dentro .social spingerebbe le due icone agli estremi invece di centrarle */ .piede-grande .dato > a,.piede-grande .dato > p{margin-inline:auto} .piede-grande .dato a{display:inline-block;width:auto} .piede-grande .dato p{display:flex;flex-direction:column;align-items:center} /* .social e .piede-legale sono flex: per centrarli non basta text-align, serve anche l'asse principale (justify-content) */ .social{justify-content:center;gap:var(--s4)} /* il bersaglio da toccare torna a 44px: erano 19, cioe' la sola icona */ .dati .dato .social a,.piede-grande .social a,.social a{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;margin:0;flex:none;padding:0} .social a svg{width:20px;height:20px} .piede-legale{justify-content:center;text-align:center;flex-direction:column;align-items:center} .piede-legale a{margin-inline:auto} .piede .gabbia{align-items:center} .fascia .gabbia{justify-content:center;align-items:center;flex-direction:column} .dati .dato > a,.dati .dato > p > a{margin-inline:auto} } /* e' un contenitore in linea: senza questo la misura di .mr finirebbe sul contenitore e non sull'immagine dentro */ picture.mr{display:block} picture.mr img{width:100%;height:auto;display:block} /* Sul telefono la pagina d'ingresso e' tutta centrata: i blocchi che hanno una larghezza massima devono centrarsi anche come scatola, non solo nel testo, altrimenti restano fuori asse rispetto agli altri. */ @media (max-width:900px){ .ingresso .gancio,.ingresso .testo,.ingresso .titolo-grande, .ingresso .titolo,.ingresso .occhiello,.ingresso .prova-riga{ margin-inline:auto; } } /* l'apertura e' centrata sulla sua colonna a ogni misura: cosi' marchio, occhiello, titolo e riga di prova stanno su un asse solo */ .apertura-scura .testo,.apertura-scura .titolo-grande{margin-inline:auto} .apertura-scura .prova-riga{justify-content:center} /* -------------------------------------------------------------------------- PARTE 11 · IL TASTO PRENOTA E IL MENU A TENDINA Il tasto Prenota era scuro su scuro dentro il menu del telefono: il testo c'era ma non si leggeva. Ora e' VERDE sempre e ORO al passaggio: e' l'azione piu' importante del sito e deve saltare all'occhio, non mimetizzarsi. Verde e oro sono due dei cinque colori del manuale. -------------------------------------------------------------------------- */ .btn--prenota, .nav .btn--prenota, .solo-telefono .btn--prenota{ background:var(--verde);border-color:var(--verde);color:#FFFFFF; box-shadow:0 2px 10px rgba(61,147,72,.28); } .btn--prenota:hover,.btn--prenota:focus-visible, .nav .btn--prenota:hover,.solo-telefono .btn--prenota:hover{ background:var(--oro);border-color:var(--oro);color:var(--scuro); box-shadow:0 2px 12px rgba(196,146,30,.35); } /* Sul fondo oro `.campo--oro .btn` vinceva per specificita' e lo faceva scuro. Il tasto Prenota resta verde anche li'. Unica eccezione alla regola "oro al passaggio": sull'oro l'oro sparisce, quindi al passaggio va scuro. */ .campo--oro .btn--prenota,.sede--oro .btn--prenota{ background:var(--verde);border-color:var(--verde);color:#FFFFFF; } .campo--oro .btn--prenota:hover,.sede--oro .btn--prenota:hover{ background:var(--scuro);border-color:var(--scuro);color:#FFFFFF; } /* anche sui fondi scuri resta verde: e' il suo colore, non eredita il contesto */ .campo--scuro .btn--prenota,.sede--scuro .btn--prenota, .apertura-scura .btn--prenota,.eroe .btn--prenota{ background:var(--verde);border-color:var(--verde);color:#FFFFFF; } .campo--scuro .btn--prenota:hover,.sede--scuro .btn--prenota:hover, .apertura-scura .btn--prenota:hover,.eroe .btn--prenota:hover{ background:var(--oro);border-color:var(--oro);color:var(--scuro); } /* --- il menu a tendina --------------------------------------------------- */ .nav-gruppo{position:relative} .nav-madre .freccia{margin-left:5px;font-size:.7em;opacity:.7} @media (min-width:901px){ .nav-tendina{ position:absolute;top:100%;left:50%;transform:translateX(-50%); display:none;min-width:210px;z-index:40; background:var(--bianco);border:1px solid var(--scuro-16); border-radius:var(--tondo);padding:var(--s2); box-shadow:0 12px 28px rgba(24,10,10,.14); } .nav-gruppo:hover .nav-tendina, .nav-gruppo:focus-within .nav-tendina{display:block} .nav-tendina a{ display:block;padding:10px 14px;border-radius:10px;white-space:nowrap; font-size:14px;text-decoration:none;color:var(--scuro); } .nav-tendina a:hover{background:var(--bianco);color:var(--oro-su-chiaro)} } @media (max-width:900px){ /* sul telefono niente tendina che si apre: le voci stanno gia' tutte in elenco, rientrate sotto la madre, cosi' si vedono senza toccare niente */ .nav-gruppo{display:flex;flex-direction:column;align-items:center;width:100%} .nav-madre .freccia{display:none} .nav-tendina{display:flex;flex-direction:column;align-items:center;width:100%} .nav-tendina a{ min-height:44px;display:inline-flex;align-items:center;justify-content:center; font-size:15px;color:var(--scuro-70); } .nav-tendina a::before{content:"— ";opacity:.5} } /* chi arriva da una voce della tendina non deve trovarsi il riquadro nascosto sotto la testata appiccicata in cima */ [id]{scroll-margin-top:96px} /* -------------------------------------------------------------------------- PARTE 12 · LA TESTATA CON NOVE VOCI Con Priority Lunch e Collaborazioni rientrate, la barra chiedeva 1248px ma ne aveva 1120: usciva dallo schermo. Tre mosse, in quest'ordine: la barra puo' allargarsi, il numero di telefono resta solo sugli schermi davvero larghi (c'e' comunque nel menu e nel piede), e il passaggio al menu a panino avviene prima. -------------------------------------------------------------------------- */ .testata .gabbia{max-width:1280px;gap:var(--s4)} .nav{gap:clamp(10px,1.3vw,18px)} .nav a{font-size:13px} /* il telefono in testata solo sopra i 1360px: sotto, il posto serve alle voci */ @media (max-width:1360px){ .testata-tel{display:none} } /* il menu a panino compare gia' sotto i 1180px, non a 900: con nove voci sotto quella misura non ci stanno piu' in riga */ @media (max-width:1180px){ .nav{ position:absolute;top:100%;left:0;right:0; flex-direction:column;align-items:stretch;gap:0; background:var(--bianco);border-top:1px solid var(--scuro-16); padding:var(--s4) var(--s5) var(--s6); box-shadow:0 14px 30px rgba(24,10,10,.12); display:none; } .nav.aperta{display:flex} .apri-menu{display:flex;margin-left:auto} .testata .gabbia{position:relative;flex-wrap:wrap} .testata-azioni{display:none} .solo-telefono{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s4)} .nav a{font-size:16px;justify-content:center;text-align:center} .nav-gruppo{display:flex;flex-direction:column;align-items:center;width:100%} .nav-madre .freccia{display:none} .nav-tendina{display:flex;flex-direction:column;align-items:center;width:100%} .nav-tendina a{ min-height:44px;display:inline-flex;align-items:center;justify-content:center; font-size:15px;color:var(--scuro-70); } .nav-tendina a::before{content:"— ";opacity:.5} } /* il panino aperto diventa una croce: si capisce che si richiude */ .apri-menu.aperto{border-color:var(--oro)} .apri-menu.aperto::before{transform:translateY(6px) rotate(45deg)} .apri-menu.aperto::after{transform:translateY(-6px) rotate(-45deg)} .apri-menu.aperto .barra{opacity:0} .apri-menu::before,.apri-menu::after{transition:transform .18s ease} .apri-menu .barra{transition:opacity .18s ease} /* -------------------------------------------------------------------------- PARTE 13 · I MENU PER GRUPPI Su Sestu i piatti stanno dentro quattro PDF da scaricare. Qui stanno scritti in pagina: si leggono dal telefono senza aprire niente. -------------------------------------------------------------------------- */ .menu-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--s5)} /* Da 900px in su due colonne fisse: cosi' dentro la carta Terra e Mare stanno affiancati e si confrontano con l'occhio, e i quattro menù fanno un quadrato pieno invece di lasciare mezza pagina vuota. */ @media (min-width:900px){ .menu-lista{grid-template-columns:repeat(2,1fr)} } .menu-carta{ background:var(--bianco);border:1px solid var(--scuro-16);border-radius:var(--tondo); padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4); } .menu-testa{border-bottom:1px solid var(--scuro-16);padding-bottom:var(--s3)} .menu-prezzo{margin:0;display:flex;align-items:baseline;gap:var(--s2)} .menu-prezzo b{font-family:"Source Serif 4",Georgia,serif;font-size:clamp(30px,4vw,42px); font-weight:700;line-height:1;color:var(--oro-su-chiaro)} .menu-prezzo span{font-size:13px;color:var(--scuro-70)} .menu-nota{margin:var(--s2) 0 0;font-size:12px;color:var(--scuro-70);font-family:var(--mono);letter-spacing:.02em} .menu-corpo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:var(--s4)} .menu-versione h4{ margin:0 0 var(--s2);font-family:var(--mono);font-size:12px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--oro-su-chiaro); } .menu-versione ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s2)} .menu-versione li{font-size:15px;line-height:1.45;padding-left:14px;position:relative} .menu-versione li::before{content:"";position:absolute;left:0;top:.6em; width:5px;height:5px;border-radius:50%;background:var(--oro)} /* Le portate. Nel PDF di Sestu i piatti sono tutti in fila, in maiuscolo, e la zuppa di cozze finisce dove sta l'antipasto senza che nessuno lo dica: si legge male e si capisce peggio. Qui ogni riga dice PRIMA che portata e', poi che cosa arriva: antipasto, primi, secondo, e come si chiude. */ .menu-portate{margin:0;display:flex;flex-direction:column;gap:var(--s3)} .menu-portata{display:grid;gap:2px} .menu-portata dt{ font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--scuro-70); } .menu-portata dd{ margin:0;font-family:"Source Serif 4",Georgia,serif;font-size:16px;line-height:1.4; color:var(--scuro); } .menu-portata + .menu-portata{border-top:1px solid var(--scuro-16);padding-top:var(--s3)} @media (max-width:900px){ .menu-carta{text-align:center} .menu-prezzo{justify-content:center} .menu-versione li{padding-left:0;text-align:center} .menu-versione li::before{display:none} .menu-portata{justify-items:center;text-align:center} } /* -------------------------------------------------------------------------- PARTE 14 · IL MODULO RICHIESTA EVENTO Campi grandi, etichette sopra, niente segnaposto al posto dell'etichetta: sul telefono il segnaposto sparisce appena scrivi e non sai piu' cos'e'. -------------------------------------------------------------------------- */ .modulo{display:flex;flex-direction:column;gap:var(--s4);width:100%;text-align:left} .modulo-riga{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--s4)} .modulo label{display:flex;flex-direction:column;gap:6px} /* l'etichetta e l'asterisco stanno su una riga sola: erano due elementi distinti dentro una colonna flex, quindi finivano uno sotto l'altro */ .modulo-etichetta{ font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--scuro-70);display:block; } .modulo input,.modulo select,.modulo textarea{ font-family:inherit;font-size:16px; /* 16px: sotto, iOS ingrandisce da solo */ letter-spacing:normal;text-transform:none;color:var(--scuro); padding:12px 14px;min-height:48px; border:1px solid var(--scuro-16);border-radius:12px;background:var(--bianco); width:100%;transition:border-color .15s ease,box-shadow .15s ease; } .modulo textarea{min-height:120px;resize:vertical;line-height:1.5} .modulo input:focus,.modulo select:focus,.modulo textarea:focus{ outline:none;border-color:var(--oro);box-shadow:0 0 0 3px rgba(196,146,30,.18)} .modulo .obbligo{color:var(--rosso)} .modulo-fascia{border:1px solid var(--scuro-16);border-radius:var(--tondo); padding:var(--s4);margin:0} .modulo-fascia legend{font-family:var(--mono);font-size:12px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--scuro-70);padding-inline:var(--s2)} .modulo-consenso{flex-direction:row;align-items:flex-start;gap:var(--s3); font-family:inherit;font-size:14px;letter-spacing:normal;text-transform:none; color:var(--scuro-70);line-height:1.5} .modulo-consenso input{width:22px;height:22px;min-height:22px;flex:none;margin-top:2px} .modulo .btn{align-self:flex-start} /* la trappola per i robot: invisibile a chi guarda, presente per chi legge il codice */ .trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} @media (max-width:900px){ .modulo,.modulo label{text-align:center} .modulo label{align-items:center} .modulo-consenso{text-align:left;align-items:flex-start} .modulo .btn{align-self:stretch} .modulo-fascia legend{margin-inline:auto} }