/* ========================================================================= CHIAVI PER TIRANTI — Bei Lorenzo, Apecchio (PU) Home page. Impianto ricalcato sul riferimento fornito dal cliente (sito di un fognaturista danese): lime acido e nero, maiuscolo leggero e largo, fotografia in bianco e nero, bottoni circolari, filetti sottili. Il lime non e' preso dal riferimento: e' #B1EC00, il colore che palibloc.it usa nei tag di FrontPage dal 2013. Sta nella stessa famiglia di quello del riferimento ed e' gia' il colore dell'azienda. ========================================================================= */ :root{ --lime:#B1EC00; --lime-chiaro:#C6F63D; --nero:#111111; /* fondo delle fasce scure */ --nero-2:#0B0B0B; /* fondo pieno, header e piede */ --panna:#F2F2EE; --grigio:#8C8C86; /* testo secondario su scuro */ --grigio-scuro:#5A5A55; --inchiostro:#111111; /* testo sul lime */ --filo:rgba(242,242,238,.16); --filo-scuro:rgba(17,17,17,.22); /* Contrasti verificati #111111 su #B1EC00 = 13.60 AAA #F2F2EE su #111111 = 16.02 AAA #8C8C86 su #111111 = 6.42 AA (testo piccolo: ok) #B1EC00 su #111111 = 12.94 AAA Sul lime va solo inchiostro scuro: bianco su lime da' 1.45. */ --font:'Onest',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; --t-nano:clamp(.66rem,.62rem + .16vw,.75rem); --t-micro:clamp(.72rem,.68rem + .18vw,.82rem); --t-piccolo:clamp(.8rem,.76rem + .2vw,.92rem); --t-base:clamp(.92rem,.88rem + .22vw,1.02rem); --d-riga:clamp(1.05rem,.85rem + .95vw,1.7rem); /* voci elenco principi */ --d-media:clamp(1.6rem,1.05rem + 2.5vw,3.3rem); /* titoli di sezione */ --d-hero:clamp(2rem,1.05rem + 4.1vw,4.6rem); /* titolo hero e chiusura */ --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:clamp(4rem,7vw,7rem); --s8:clamp(5.5rem,11vw,11rem); --pad:clamp(1.25rem,4.4vw,4.5rem); --max:1600px; --testata:clamp(58px,5vw,74px); } *,*::before,*::after{box-sizing:border-box} html{background:var(--nero-2);-webkit-text-size-adjust:100%} html.scorrimento-morbido{scroll-behavior:auto} /* Con il menu a schermo pieno aperto, la pagina sotto resta ferma */ body.menu-aperto{overflow:hidden} body{ margin:0; background:var(--nero-2); color:var(--panna); font-family:var(--font); font-size:var(--t-base); font-weight:400; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} p{margin:0} figure,figcaption{margin:0} ul,ol{margin:0;padding:0;list-style:none} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :focus-visible{outline:2px solid var(--lime);outline-offset:4px} .salta{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--lime);color:var(--inchiostro);padding:14px 22px; font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.14em; } .salta:focus{left:0} /* Testo per la sola assistiva: il tasto del menu e' un + disegnato in CSS, e senza questa etichetta non avrebbe nome accessibile. */ .visually-hidden{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%); white-space:nowrap;border:0; } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /* ------------------------------------------------------------------------- TIPOGRAFIA DI DISPLAY Il riferimento usa maiuscolo leggero e largo: peso 300, spaziatura appena negativa, interlinea stretta. Le maiuscole si fanno in CSS, mai digitate nel sorgente: cosi' restano leggibili agli screen reader e copiabili. ------------------------------------------------------------------------- */ .display{ font-weight:300; text-transform:uppercase; letter-spacing:-.012em; line-height:1.06; margin:0; text-wrap:balance; } .display strong{font-weight:600} /* Un a capo che vale solo su schermo stretto. Lo spazio prima del tag resta nel documento: su schermo largo, dove il tag e' spento, le due parti restano separate dallo spazio e la frase e' una sola. */ .a-capo-stretto{display:none} @media (max-width:900px){ .a-capo-stretto{display:inline} } /* Etichetta fra barre, in lime — il segno ricorrente del riferimento */ .etichetta{ display:block; font-size:var(--t-nano); font-weight:500; text-transform:uppercase; letter-spacing:.1em; line-height:1.7; color:var(--lime); /* Niente gabbia in ch: con le maiuscole spaziate 22ch cadevano corti e l'occhiello si spezzava a meta'. Se proprio deve andare a capo, balance divide le righe in parti uguali invece di lasciare una parola sola. */ text-wrap:balance; } /* Spazio unificatore: la barra resta attaccata alla parola, non finisce da sola sulla riga dopo. */ /* Le barre sono decorazione: la seconda dichiarazione le lascia vedere ma non le fa leggere alla sintesi vocale. Chi non la capisce tiene la prima. */ .etichetta::before{content:"/\00a0";content:"/\00a0" / ""} .etichetta::after{content:"\00a0/";content:"\00a0/" / ""} .minuto{font-size:var(--t-micro);line-height:1.72;color:var(--grigio)} .minuto + .minuto{margin-top:var(--s4)} .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)} /* ------------------------------------------------------------------------- TESTATA ------------------------------------------------------------------------- */ .testata{ position:fixed;top:0;left:0;right:0;z-index:115; height:var(--testata); display:flex;align-items:center; transition:transform .5s cubic-bezier(.3,.7,.25,1),background-color .35s; } .testata.is-via{transform:translate3d(0,-102%,0)} .testata.is-staccata{background:rgba(11,11,11,.9);backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)} .testata__in{ width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad); display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s4); } /* Marchio: solo il nome, in chiaro. Niente targhetta e niente sottotitolo. */ .marchio{ justify-self:start; font-size:clamp(.88rem,.8rem + .3vw,1.02rem); font-weight:500;line-height:1; /* Una parola sola, in maiuscolo come il dominio. Il maiuscolo lo mette il foglio di stile e non l'HTML, come per tutto il resto del sito: cosi' chi legge con la sintesi vocale non se lo sente compitare lettera per lettera. */ text-transform:uppercase;letter-spacing:.06em; color:var(--panna);white-space:nowrap; } .marchio:hover{color:var(--lime)} /* Con il menu lime aperto il marchio chiaro si perderebbe sul fondo */ body.menu-aperto .marchio{color:var(--inchiostro)} body.menu-aperto .testata{background:none;backdrop-filter:none;-webkit-backdrop-filter:none} .menu{display:flex;justify-content:center;gap:clamp(var(--s4),2.6vw,var(--s6))} .menu a{ font-size:var(--t-micro);font-weight:500;text-transform:uppercase; letter-spacing:.09em;color:var(--panna);transition:color .25s; } .menu a:hover{color:var(--lime)} /* I recapiti appartengono al solo menu a tutta pagina: sul desktop la nav e' orizzontale e finirebbero dentro la testata. */ .menu__contatti{display:none} .coda{display:flex;justify-content:flex-end;align-items:center;gap:var(--s4)} /* Nella testata il numero e' una cornetta e non la cifra scritta: la barra e' una fila di parole tutte uguali per peso — home, articoli, azienda, contatti — e in mezzo un numero di telefono non si legge come un comando, si legge come un'altra voce. Il segno invece si riconosce prima di essere letto. Il numero resta nel documento, nascosto alla sola vista, quindi chi ascolta con la sintesi vocale sente "chiama il +39 338 844 2460". Il riquadro sta sui 36 pixel: l'icona e' 18, il resto e' spazio attorno, che serve a poterci cliccare senza mirare. */ .telefono{ display:grid;place-items:center; width:36px;height:36px;margin-right:calc(-1 * var(--s2)); font-size:var(--t-micro);font-weight:500;letter-spacing:.04em;white-space:nowrap; } .telefono__segno{width:18px;height:18px;fill:currentColor;display:block} .telefono:hover{color:var(--lime)} /* Pillola scura con freccia, come nel riferimento */ .pillola{ display:inline-flex;align-items:center;gap:10px; background:var(--nero-2);color:var(--panna); border:1px solid var(--filo); border-radius:999px;padding:9px 8px 9px 18px; font-size:var(--t-nano);font-weight:500; text-transform:uppercase;letter-spacing:.09em;white-space:nowrap; transition:background-color .3s,color .3s,border-color .3s; } .pillola i{ width:24px;height:24px;border-radius:999px;background:var(--lime); color:var(--inchiostro);display:grid;place-items:center; font-style:normal;font-size:.8em;line-height:1;transition:transform .3s; } .pillola:hover{background:var(--lime);color:var(--inchiostro);border-color:var(--lime)} .pillola:hover i{background:var(--inchiostro);color:var(--lime);transform:rotate(45deg)} /* Tasto del menu: un + che ruota di 45° e diventa una × all'apertura */ .nav-tasto{ display:none;justify-self:end; position:relative;width:44px;height:44px; color:var(--panna);z-index:120; } /* Due barre incrociate: un piu' semplice, che ruotando di 45 gradi diventa la croce di chiusura. Il segno della piastra resta come token e lo usa la casella non ancora fotografata della galleria. */ .nav-tasto::before, .nav-tasto::after{ content:"";position:absolute;left:50%;top:50%; background:currentColor;border-radius:1px; transition:transform .35s cubic-bezier(.3,.7,.25,1),background-color .3s; } .nav-tasto::before{width:20px;height:1.5px;translate:-50% -50%} .nav-tasto::after{width:1.5px;height:20px;translate:-50% -50%} .nav-tasto[aria-expanded="true"]{color:var(--inchiostro)} .nav-tasto[aria-expanded="true"]::before, .nav-tasto[aria-expanded="true"]::after{transform:rotate(45deg)} /* ------------------------------------------------------------------------- HERO Due varianti sullo stesso impianto: --video la home: fotografia a schermo pieno, testo chiaro --lime le pagine interne: campo lime pieno, testo inchiostro ------------------------------------------------------------------------- */ /* --- variante con fotografia a tutto campo (home) --- */ /* Il girato e' gia' cupo: la velatura serve a garantire il contrasto del testo, non a salvarlo. Piu' densa in basso, dove sta il paragrafo. */ /* Su qualunque superficie lime l'etichetta lime sparirebbe: una regola sola per tutte, cosi' il caso non si ripresenta a ogni nuova sezione. */ .split-scheda__testo .etichetta, .fascia--lime .etichetta{color:var(--inchiostro)} /* --- briciole di pane, dentro l'hero lime --- */ /* La scheda della vetrina e' un link: serve lo stato attivo */ a.scheda:hover .scheda__nome{color:var(--lime)} .scheda__nome{transition:color .3s} /* ------------------------------------------------------------------------- FASCE SCURE ------------------------------------------------------------------------- */ .fascia{background:var(--nero);padding-block:var(--s8)} .fascia--fondo{background:var(--nero-2)} .fascia--stretta{padding-block:var(--s7)} /* Impianto ricorrente: etichetta a sinistra, contenuto a destra */ .duetto{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr); gap:clamp(var(--s5),6vw,var(--s8)); align-items:start; } /* --- elenco dei principi --- */ /* La fotografia e' in bianco e nero, come nel riferimento: risolve anche il fatto che i nostri scatti sono a colori, diurni e su ghiaia chiara. */ /* --- testi sfalsati accanto alla fotografia --- */ /* --- chiusura --- Era giustificata su entrambi i lati, come nel riferimento. Non regge a questo corpo: undici parole su tre righe fanno 3,7 parole per riga, e giustificare vuol dire spalmare oltre cento pixel di avanzo su tre soli intervalli. Venivano fuori voragini fra una parola e l'altra. La giustificazione funziona con otto o dieci parole per riga, cioe' a corpo di testo, non a corpo di titolo: qui il titolo conta di piu'. text-wrap:balance pareggia le righe, che e' quello che la giustificazione prometteva senza mantenerlo. */ .chiusura{ /* Tre righe, decise dagli a capo scritti nel testo e non dalla larghezza: il cliente le vuole spezzate cosi' anche sul telefono. Quindi niente larghezza massima, e un corpo che non supera mai quello che fa stare in colonna la riga piu' lunga, "e' fatto bene, la struttura": in maiuscolo, Onest 300, spaziatura -.01em, misura 14,42 em. Diviso 14,8 resta un margine del 2-3% per i caratteri di ripiego, che sono piu' stretti. Da tablet in su vince --d-hero; sotto, il corpo scende con la colonna. */ font-size:min(var(--d-hero), calc((100vw - 2 * var(--pad)) / 14.8)); letter-spacing:-.01em; text-wrap:balance; max-width:none; } /* Come il titolo dell'hero: dove si puo', la colonna vera al posto della stima fatta su 100vw, che su desktop conta anche la barra di scorrimento. */ @supports (container-type:inline-size){ .wrap:has(> .chiusura){container-type:inline-size} .chiusura{font-size:min(var(--d-hero), calc(100cqw / 14.8))} } /* ------------------------------------------------------------------------- VETRINA PRODOTTI Contenitore a scorrimento nativo con aggancio: si trascina col dito, si sfoglia con le frecce, si raggiunge da tastiera. Nessun carosello a trasformazioni: meno codice e nessuna scheda da nascondere all'assistiva. ------------------------------------------------------------------------- */ /* Le righe della vetrina le decide questa griglia, non l'ordine nel codice: nel documento i comandi vengono prima della pista — si comanda una cosa dopo averla incontrata — ma su schermo largo salgono in cima a destra, accanto al titolo, e su schermo stretto scendono sotto le schede. */ .vetrina{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--s5); align-items:end; } .vetrina__testa{grid-column:1;grid-row:1;margin-bottom:var(--s7)} .vetrina__comandi{ grid-column:2;grid-row:1;justify-self:end; display:flex;align-items:center;gap:var(--s4); margin-bottom:var(--s7); } .vetrina__pista{grid-column:1 / -1;grid-row:2} .vetrina__conta{ font-size:var(--t-nano);letter-spacing:.12em;color:var(--grigio); font-variant-numeric:tabular-nums; } .vetrina__conta b{color:var(--panna);font-weight:500} .freccia{ width:52px;height:52px;flex:0 0 auto;border-radius:50%; border:1px solid var(--filo);color:var(--panna); display:grid;place-items:center;font-size:1.15rem;line-height:1; transition:border-color .3s,color .3s,background-color .3s,transform .3s; } .freccia:hover:not(:disabled){border-color:var(--lime);color:var(--lime)} .freccia:disabled{opacity:.28;cursor:default} .vetrina__pista{ display:flex;gap:clamp(var(--s3),1.8vw,var(--s5)); overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none;-ms-overflow-style:none; padding-bottom:var(--s2); } .vetrina__pista::-webkit-scrollbar{display:none} .vetrina__pista:focus-visible{outline:2px solid var(--lime);outline-offset:6px} .scheda{ flex:0 0 clamp(230px,25vw,330px); scroll-snap-align:start; display:flex;flex-direction:column; } .scheda__foto{position:relative;overflow:hidden;background:#171717} .scheda__foto img{ width:100%;aspect-ratio:4/5; /* Gli originali sono larghi e bassi (uno e' 448x138): ritagliarli in verticale lascia solo la ghiaia. Si contengono e si centrano, con aria attorno — che su una scheda di catalogo e' l'inquadratura giusta. */ object-fit:contain;padding:var(--s5) var(--s4); filter:grayscale(1) contrast(1.08) brightness(.92); transition:transform .6s cubic-bezier(.25,.7,.3,1),filter .6s ease; } .scheda:hover .scheda__foto img{transform:scale(1.03);filter:grayscale(1) contrast(1.04) brightness(1.04)} .scheda__cod{ position:absolute;left:var(--s3);top:var(--s3);z-index:2; font-size:var(--t-nano);font-weight:500;letter-spacing:.14em;color:var(--lime); } .scheda__corpo{padding-top:var(--s4);border-top:1px solid var(--filo);margin-top:var(--s4)} .scheda__nome{ font-size:clamp(.92rem,.82rem + .4vw,1.12rem); font-weight:300;text-transform:uppercase;letter-spacing:-.01em; line-height:1.16;margin:0 0 var(--s3); /* Il titolo ha il suo blocco riservato e le informazioni cominciano tutte alla stessa altezza, qualunque sia la lunghezza del nome. La riserva e' di due righe perche' la larghezza della scheda scende fino a 230px: a quelle misure un nome lungo va a capo, e senza riserva sfalserebbe l'intera fila. Il titolo si appoggia in basso, cosi' i nomi corti restano allineati a quelli lunghi. */ min-height:calc(2 * 1.16em); display:flex;align-items:flex-end; } .scheda__dati{ font-size:var(--t-nano);line-height:1.75;color:var(--grigio); letter-spacing:.04em;font-variant-numeric:tabular-nums; } /* Sotto i 1024 il numero di telefono esce dalla testata. Fra 761 e 900 la barra e' orizzontale e ci stanno gia' il nome, quattro voci di menu, il numero e il tasto del preventivo: non ci stavano nemmeno con tre voci — a 780 il tasto usciva dallo schermo di 47 pixel — e con la voce Home sarebbero diventati 112. Il numero e' la cosa che si puo' togliere: resta nel menu, nel piede e dentro il modulo del preventivo, mentre il tasto e' l'unica chiamata all'azione della barra. */ @media (max-width:1023px){ .coda .telefono{display:none} } @media (max-width:760px){ /* PROVA — su telefono i prodotti stanno in due colonne invece di scorrere in orizzontale. Si vedono tutti e nove senza dover trascinare, e non resta piu' meta' catalogo fuori dallo schermo. Il prezzo e' che ogni scheda scende a meta' larghezza: la fotografia passa da 78 a circa 36 vw, e i nomi lunghi vanno su tre righe. Per tornare indietro basta cancellare questo blocco. */ .vetrina{grid-template-columns:minmax(0,1fr)} .vetrina__testa{grid-row:1;margin-bottom:var(--s6)} .vetrina__pista{ grid-row:2; display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6) var(--s4); overflow:visible;scroll-snap-type:none;padding-bottom:0; } /* Contatore e frecce non hanno piu' niente da comandare e vanno tolti qui, con un display:none. Non basta nasconderli dallo script: la regola per schermo largo li mette in grid-column:2, e finche' restano nella griglia quella colonna viene creata lo stesso — larga quanto le due frecce — e schiaccia la pista a un terzo dello spazio. Un elemento in display:none non e' piu' una casella della griglia, e il problema sparisce. Lo script ci pensa comunque, ma per un'altra ragione: togliere il riquadro dalla tabulazione, che il CSS non sa fare. */ .vetrina__comandi{display:none} /* La riserva di due righe del nome basta anche a meta' larghezza: misurato, nessuno dei nove nomi arriva alla terza. Una riga in piu' sarebbe solo vuoto sotto a tutti. */ } /* ------------------------------------------------------------------------- TABELLA DATI — pagine prodotto ------------------------------------------------------------------------- */ .tab{overflow-x:auto;border-top:1px solid var(--filo);margin-top:var(--s5)} .tab:focus-visible{outline:2px solid var(--lime);outline-offset:6px} table{width:100%;border-collapse:collapse;min-width:520px;font-size:var(--t-micro)} caption{ text-align:left;font-size:var(--t-nano);text-transform:uppercase; letter-spacing:.12em;color:var(--lime);padding-bottom:var(--s4); } th,td{ text-align:left;padding:16px var(--s4) 16px 0; border-bottom:1px solid var(--filo);vertical-align:top; color:var(--grigio);font-variant-numeric:tabular-nums;font-weight:400; } thead th{ font-size:var(--t-nano);text-transform:uppercase;letter-spacing:.1em; color:var(--grigio-scuro); } tbody th{ font-size:var(--t-piccolo);text-transform:uppercase;letter-spacing:-.005em; color:var(--panna);font-weight:400; } td.v{color:var(--panna)} .tab-nota{margin-top:var(--s3);font-size:var(--t-nano);color:var(--grigio-scuro)} /* --- articoli abbinati --- */ .abbinati{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(var(--s4),2.4vw,var(--s5)); } .abbinato{display:flex;flex-direction:column;transition:opacity .3s} .abbinato:hover{opacity:.72} .abbinato__foto{background:#171717;overflow:hidden} .abbinato__foto img{ width:100%;aspect-ratio:4/3;object-fit:contain;padding:var(--s5) var(--s4); filter:grayscale(1) contrast(1.06) brightness(.9); } .abbinato__cod{ display:block;margin-top:var(--s4);font-size:var(--t-nano); letter-spacing:.14em;color:var(--lime); } .abbinato__nome{ font-size:clamp(.95rem,.85rem + .4vw,1.15rem);font-weight:300; text-transform:uppercase;line-height:1.18;margin:var(--s2) 0 0; } /* --- avviso: dato in attesa dal cliente --- */ .attesa{ border-left:2px solid var(--lime);padding:var(--s4) var(--s5); margin-top:var(--s6);font-size:var(--t-micro);color:var(--grigio); } .attesa b{color:var(--lime);font-weight:500} @media (max-width:900px){ .abbinati{grid-template-columns:1fr} } /* ------------------------------------------------------------------------- SCHEDA PRODOTTO ------------------------------------------------------------------------- */ /* L'hero della scheda non e' a schermo pieno: il paragrafo non deve essere spinto in fondo come sulla home, o resta un vuoto in mezzo. */ /* --- apertura della scheda: fotografia a sinistra, testo a destra --------- Lo stacco fra la meta' scura e quella lime e' esso stesso l'elemento grafico: non serve altro per dare peso all'apertura. */ /* Le colonne sono minmax(0,1fr) e non 1fr: una colonna 1fr non scende mai sotto il contenuto minimo di quello che ci sta dentro, e qui dentro c'e' una galleria che scorre in orizzontale, larga tre schermate. Senza lo zero la colonna puo' andare a misurarsi su quelle tre schermate invece che sul riquadro, e quello che ci sta dentro, centrato, finisce spostato a destra e fuori dallo schermo. Su iPhone succedeva davvero. */ .split-scheda{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); /* min-height e non height: se i dati sono tanti la meta' destra cresce invece di tagliarli. */ min-height:100vh; min-height:100svh; } .split-scheda__media{ position:relative;overflow:hidden; background:#151515; /* Qui dentro c'e' una cosa sola da centrare, e si centra con un flex e non con una griglia. Non e' un vezzo: la colonna di una griglia si misura su quello che contiene, e quello che contiene e' una pista che scorre in orizzontale, larga tre schermate. Se la colonna va a misurarsi su quelle, il centraggio centra la galleria dentro una colonna larga il triplo dello schermo, e la galleria finisce spostata a destra e mezza fuori: e' quello che succedeva su iPhone. Il flex non ha tracce da misurare, quindi la strada non esiste proprio. */ display:flex;align-items:center;justify-content:center; padding:calc(var(--testata) + var(--s4)) var(--s4) var(--s6); } /* Il numero d'articolo, grande, fa da fondale */ .split-scheda__num{ position:absolute;inset:0;display:grid;place-items:center;z-index:0; font-size:clamp(9rem,26vw,22rem);font-weight:300;line-height:.8; letter-spacing:-.06em;color:var(--panna);opacity:.045; pointer-events:none;user-select:none; } .split-scheda__testo{ background:var(--lime);color:var(--inchiostro); display:flex;flex-direction:column;justify-content:center; padding:calc(var(--testata) + var(--s6)) var(--pad) var(--s6); } .split-scheda__testo .split-scheda__testo h1{ font-size:clamp(1.9rem,1.1rem + 3vw,3.6rem); letter-spacing:-.025em;line-height:1.05;max-width:14ch; } .split-scheda__intro{ margin-top:var(--s5);max-width:46ch; font-size:var(--t-piccolo);line-height:1.7; color:color-mix(in srgb, var(--inchiostro) 78%, transparent); } .split-scheda__testo .fatti{margin-top:var(--s6)} .split-scheda__testo :focus-visible{outline-color:var(--inchiostro)} @media (max-width:900px){ .split-scheda{grid-template-columns:minmax(0,1fr);min-height:auto} .split-scheda__media{padding:calc(var(--testata) + var(--s5)) var(--s4) var(--s7); min-height:56vh} .split-scheda__num{font-size:clamp(7rem,38vw,12rem)} .split-scheda__testo{padding:var(--s7) var(--pad)} .split-scheda__testo h1{max-width:none} } /* Dati dimensionali dentro la meta' lime: righe compatte invece di una tabella larga, che in mezza pagina non ci starebbe. */ .dati-split{margin-top:var(--s6);border-top:1px solid var(--filo-scuro)} .dati-split__riga{ display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3) var(--s4); align-items:baseline;padding:var(--s3) 0; border-bottom:1px solid var(--filo-scuro); } .dati-split__nome{ font-size:var(--t-piccolo);text-transform:uppercase;letter-spacing:.02em; color:var(--inchiostro);white-space:nowrap; } .dati-split__spec{ font-size:var(--t-micro);line-height:1.5; color:color-mix(in srgb, var(--inchiostro) 68%, transparent); font-variant-numeric:tabular-nums; } /* Le righe che descrivono il pezzo — nervature, materiale, finitura — non hanno un prezzo, e la cella non c'e' proprio: prima la colonna si riempiva di "incluse", "incluso" e trattini, cioe' di niente scritto in modo che sembrasse qualcosa. Senza la cella, la descrizione si prende anche la colonna del prezzo, cosi' non si ferma a meta' riga per lasciare un vuoto a destra. */ .dati-split__spec:last-child{grid-column:2 / -1} .dati-split__prezzo{ font-size:clamp(1rem,.85rem + .55vw,1.3rem);font-weight:400; color:var(--inchiostro);white-space:nowrap;font-variant-numeric:tabular-nums; } .dati-split__prezzo small{ display:block;font-size:var(--t-nano);font-weight:400; color:color-mix(in srgb, var(--inchiostro) 58%, transparent); text-transform:uppercase;letter-spacing:.1em; } .dati-split__nota{ margin-top:var(--s4);font-size:var(--t-nano);line-height:1.6; color:color-mix(in srgb, var(--inchiostro) 62%, transparent); } .dati-split__nota b{ color:var(--inchiostro);font-weight:500; text-transform:uppercase;letter-spacing:.08em; } @media (max-width:900px){ /* Le tre cose su una riga sola non ci stanno. Il nome della misura si prende la sua riga e sotto restano le quote a sinistra e la cifra a destra, in linea: il prezzo si legge accanto alle misure a cui si riferisce, non staccato due righe piu' giu'. */ .dati-split__riga{grid-template-columns:1fr auto;gap:var(--s2) var(--s4)} .dati-split__nome{grid-column:1 / -1} .dati-split__spec{grid-column:1} .dati-split__prezzo{grid-column:2;justify-self:end} .dati-split__spec:last-child{grid-column:1 / -1} } /* Striscia dei dati chiave, in fondo al campo lime: la cosa piu' utile della pagina sta subito, senza scorrere. */ .fatti{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:0;margin:var(--s7) 0 0;border-top:1px solid var(--filo-scuro); } .fatti > div{padding:var(--s4) var(--s4) 0 0;border-right:1px solid var(--filo-scuro)} .fatti > div:last-child{border-right:0} .fatti > div + div{padding-left:var(--s4)} .fatti dt{ font-size:var(--t-nano);text-transform:uppercase;letter-spacing:.12em; color:color-mix(in srgb, var(--inchiostro) 62%, transparent);margin:0; } .fatti dd{ margin:var(--s2) 0 0;font-size:clamp(1.1rem,.85rem + 1vw,1.75rem); font-weight:300;text-transform:uppercase;letter-spacing:-.02em;line-height:1.1; color:var(--inchiostro); } /* Fascia lime: i dati dimensionali, che sono la cosa che nessuno pubblica, stanno nel punto piu' luminoso della pagina. */ .fascia--lime{background:var(--lime);color:var(--inchiostro)} .fascia--lime .etichetta{color:var(--inchiostro)} .fascia--lime .display{color:var(--inchiostro)} /* Sul lime il contorno lime del fuoco sparirebbe. */ .fascia--lime :focus-visible{outline-color:var(--inchiostro)} .fascia--lime .tab{border-top-color:var(--filo-scuro)} .fascia--lime table th, .fascia--lime table td{border-bottom-color:var(--filo-scuro);color:color-mix(in srgb, var(--inchiostro) 74%, transparent)} .fascia--lime tbody th, .fascia--lime td.v{color:var(--inchiostro)} .fascia--lime caption{color:color-mix(in srgb, var(--inchiostro) 58%, transparent)} .fascia--lime .tab-nota{color:color-mix(in srgb, var(--inchiostro) 62%, transparent)} .fascia--lime .attesa{border-left-color:var(--inchiostro);color:color-mix(in srgb, var(--inchiostro) 72%, transparent)} .fascia--lime .attesa b{color:var(--inchiostro)} /* Impieghi numerati: il numero diventa un elemento di composizione */ .passi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0; border-top:1px solid var(--filo)} .passi > div{padding:var(--s5) var(--s5) 0 0;border-right:1px solid var(--filo)} .passi > div:last-child{border-right:0} .passi > div + div{padding-left:var(--s5)} .passi__n{ display:block;font-size:clamp(2rem,4vw,3.4rem);font-weight:300; line-height:1;letter-spacing:-.04em;color:var(--lime);margin-bottom:var(--s4); } .passi h3{ font-size:clamp(1rem,.9rem + .4vw,1.2rem);font-weight:400; text-transform:uppercase;letter-spacing:-.005em;line-height:1.2; margin:0 0 var(--s3); } /* Navigazione fra articoli, in fondo alla scheda */ .navart{ display:grid;grid-template-columns:1fr 1fr;gap:var(--s5); border-top:1px solid var(--filo);margin-top:var(--s8);padding-top:var(--s5); } .navart a{display:flex;flex-direction:column;gap:var(--s2)} .navart a:last-child{text-align:right;align-items:flex-end} .navart span{font-size:var(--t-nano);text-transform:uppercase; letter-spacing:.12em;color:var(--grigio-scuro)} .navart b{font-size:clamp(1rem,.9rem + .5vw,1.35rem);font-weight:300; text-transform:uppercase;letter-spacing:-.01em;color:var(--panna)} .navart a:hover b{color:var(--lime)} @media (max-width:900px){ .fatti{grid-template-columns:repeat(2,minmax(0,1fr))} .fatti > div:nth-child(2){border-right:0} .passi{grid-template-columns:1fr} .passi > div{border-right:0;border-bottom:1px solid var(--filo);padding:var(--s5) 0} .passi > div + div{padding-left:0} .passi > div:last-child{border-bottom:0} .navart{grid-template-columns:1fr} .navart a:last-child{text-align:left;align-items:flex-start} } /* ------------------------------------------------------------------------- PIEDE ------------------------------------------------------------------------- */ .piede{background:var(--nero-2);padding:var(--s7) 0 var(--s5);border-top:1px solid var(--filo)} .piede__griglia{ display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s5); align-items:start; } .piede h3{ font-size:var(--t-nano);font-weight:500;text-transform:uppercase; letter-spacing:.1em;color:var(--grigio);margin:0 0 var(--s4); } .piede a:hover{color:var(--lime)} .piede li{margin-bottom:var(--s2);font-size:var(--t-micro);color:var(--grigio)} .piede__legale{ margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--filo); display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between; font-size:var(--t-nano);color:var(--grigio-scuro); } /* Il grigio scuro della riga legale da' 2,8 di contrasto: per il testo di contorno passa, per un collegamento da trovare no. */ .piede__legale a{color:var(--grigio);text-decoration:underline;text-underline-offset:3px} /* ------------------------------------------------------------------------- ENTRATE ------------------------------------------------------------------------- */ /* La condizione (scripting: enabled) e' la rete di sicurezza: a JavaScript spento e' l'IntersectionObserver a non arrivare mai, e senza questa guardia ogni .su resterebbe a opacita' zero — cioe' mezza pagina invisibile. Dove il browser non conosce la condizione, l'intera regola cade e il contenuto si vede senza entrata: il modo giusto di rompersi. */ @media (prefers-reduced-motion:no-preference) and (scripting: enabled){ .su{opacity:0;transform:translateY(22px); transition:opacity .75s cubic-bezier(.25,.7,.3,1),transform .75s cubic-bezier(.25,.7,.3,1)} .su.is-in{opacity:1;transform:none} } /* In stampa, o salvando in PDF, compare tutto: i blocchi che non sono mai passati sullo schermo resterebbero invisibili. Conta per l'informativa, che e' la pagina che qualcuno stampa davvero. */ @media print{ .su{opacity:1!important;transform:none!important} } /* ------------------------------------------------------------------------- RESPONSIVE ------------------------------------------------------------------------- */ @media (max-width:1000px){ .duetto{grid-template-columns:1fr;gap:var(--s5)} .piede__griglia{grid-template-columns:1fr 1fr} } @media (max-width:760px){ /* Su schermo stretto della testata resta il solo +, in mezzo. Il nome se ne va: sopra la fotografia della hero non deve esserci altro. Via il nome resta un solo elemento in flusso, quindi una sola colonna piena e la coda che si centra dentro. La via per tornare a casa non si perde: la prima voce del menu porta alla home, su tutte le pagine. */ .marchio{display:none} .testata__in{grid-template-columns:1fr;gap:var(--s3)} .nav-tasto{display:block} .coda{justify-content:center} .coda .telefono,.coda .pillola{display:none} /* Menu a tutta pagina: campo lime, voci grandi, recapiti in fondo. Scende dall'alto invece di comparire di colpo. Il display non si puo' animare, quindi il menu c'e' sempre e sta appeso sopra il bordo alto: e' la trasformazione che lo fa scendere. La visibilita' resta comunque spenta da chiuso — cosi' il tasto di tabulazione non ci finisce dentro e i collegamenti non si toccano per sbaglio — e si spegne solo a scivolata finita, altrimenti la risalita sparirebbe a meta'. Chi ha chiesto meno animazioni non vede scendere niente: la regola generale in cima al foglio azzera tutte le durate. */ .menu{ display:flex; position:fixed;inset:0;z-index:110; background:var(--lime);color:var(--inchiostro); flex-direction:column;justify-content:center;gap:0; padding:calc(var(--testata) + var(--s6)) var(--pad) var(--s6); overflow-y:auto;overscroll-behavior:contain; transform:translateY(-100%);visibility:hidden; transition:transform .55s cubic-bezier(.3,.7,.25,1),visibility 0s linear .55s; } .menu[data-aperto="true"]{ transform:translateY(0);visibility:visible; transition:transform .55s cubic-bezier(.3,.7,.25,1),visibility 0s; } .menu a{ color:var(--inchiostro); font-size:clamp(1.55rem,1rem + 4.2vw,2.5rem); font-weight:300;text-transform:uppercase;letter-spacing:-.02em; line-height:1.1;padding:var(--s4) 0;min-height:56px; border-bottom:1px solid var(--filo-scuro); display:flex;align-items:center; } .menu a:first-of-type{border-top:1px solid var(--filo-scuro)} .menu a:hover{opacity:.6} .menu__contatti{margin-top:var(--s7);display:grid;gap:var(--s5)} .menu__contatti > div{display:flex;flex-direction:column;gap:var(--s2)} .menu__contatti span{ font-size:var(--t-nano);text-transform:uppercase;letter-spacing:.12em; color:color-mix(in srgb, var(--inchiostro) 58%, transparent); } .menu__contatti b{font-size:var(--t-body);font-weight:400;line-height:1.5} .menu__contatti a{ font-size:var(--t-body);font-weight:400;text-transform:none; letter-spacing:0;line-height:1.5;min-height:auto; border:0;padding:0;display:inline; text-decoration:underline;text-underline-offset:.2em; } .menu__contatti a:first-of-type{border-top:0} /* L'hero resta a schermo pieno anche su mobile, ma con il solo titolo, appoggiato in basso: su uno schermo stretto il paragrafo lo soffocava. */ .piede__griglia{grid-template-columns:1fr} } /* ========================================================================= RICHIESTA DI PREVENTIVO — finestra modale Un solo , costruito da main.js e montato su tutte e dodici le pagine: il markup non si ripete e le pagine restano allineate da sole. Sta sul lime, come la fascia di richiamo delle pagine prodotto: e' l'unica azione che il sito chiede davvero, sul nero si confonderebbe con il resto. Sul lime va solo inchiostro — il contorno del fuoco compreso, altrimenti sparisce: #B1EC00 si comporta da fondo chiaro, non da fondo scuro. ========================================================================= */ .preventivo{ padding:0;border:0;margin:auto; width:min(1040px,100% - clamp(1.5rem,7vw,6rem)); max-width:none; background:var(--lime); color:var(--inchiostro); /* Il ha overflow:auto dallo stile del browser: senza questo il fuoco iniziale lo faceva scorrere e la testa finiva fuori vista. A scorrere dev'essere solo .preventivo__corpo. */ overflow:hidden; } .preventivo::backdrop{background:rgba(11,11,11,.78)} .preventivo :focus-visible{outline:2px solid var(--inchiostro);outline-offset:3px} /* Il blocco dello scorrimento sta appeso allo stato della finestra, non a una classe messa dall'evento 'close': se quell'evento non arriva, la pagina resta bloccata per sempre. Cosi' invece il vincolo sparisce nello stesso istante in cui sparisce l'attributo open. */ body:has(dialog[open]){overflow:hidden} .preventivo__pannello{ display:flex;flex-direction:column; max-height:min(88svh,940px); } /* --- testa --------------------------------------------------------- */ .preventivo__testa{ flex:0 0 auto; display:grid;grid-template-columns:minmax(0,1fr) auto; align-items:start;gap:var(--s4); padding:clamp(1.5rem,3.6vw,2.9rem) clamp(1.25rem,3.6vw,2.9rem) var(--s4); border-bottom:1px solid var(--filo-scuro); } .preventivo .etichetta{color:var(--inchiostro);max-width:none} .preventivo__titolo{ margin-top:var(--s3); font-size:clamp(1.45rem,1rem + 1.9vw,2.5rem); } .preventivo__intro{ margin:var(--s4) 0 0;max-width:58ch; font-size:var(--t-micro);line-height:1.72; color:color-mix(in srgb, var(--inchiostro) 68%, transparent); } .preventivo__chiudi{ position:relative;width:46px;height:46px;flex:0 0 auto; border-radius:50%;border:1px solid var(--filo-scuro); transition:background-color .3s,border-color .3s; } .preventivo__chiudi::before, .preventivo__chiudi::after{ content:"";position:absolute;left:50%;top:50%; width:18px;height:1.5px;background:var(--inchiostro); border-radius:1px;transition:background-color .3s; } .preventivo__chiudi::before{transform:translate(-50%,-50%) rotate(45deg)} .preventivo__chiudi::after{transform:translate(-50%,-50%) rotate(-45deg)} .preventivo__chiudi:hover{background:var(--inchiostro);border-color:var(--inchiostro)} .preventivo__chiudi:hover::before, .preventivo__chiudi:hover::after{background:var(--lime)} /* --- corpo scorrevole ----------------------------------------------- */ .preventivo__modulo{display:flex;flex-direction:column;min-height:0} .preventivo__corpo{ flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; padding:0 clamp(1.25rem,3.6vw,2.9rem) var(--s5); } .preventivo__gruppo{border:0;margin:0;padding:var(--s5) 0 0} .preventivo__gruppo + .preventivo__gruppo{ margin-top:var(--s5);border-top:1px solid var(--filo-scuro); } .preventivo__legenda{ padding:0; font-size:var(--t-nano);font-weight:500; text-transform:uppercase;letter-spacing:.1em; color:color-mix(in srgb, var(--inchiostro) 62%, transparent); } /* --- righe articolo: stessa griglia da distinta dei dati prodotto ---- */ .preventivo__articoli{margin-top:var(--s4);border-top:1px solid var(--filo-scuro)} .preventivo__articolo{ display:grid;grid-template-columns:minmax(0,1fr) auto; align-items:center;gap:var(--s3) var(--s4); padding:10px var(--s2); border-bottom:1px solid var(--filo-scuro); transition:background-color .2s; } .preventivo__articolo:has(:checked){background:color-mix(in srgb, var(--inchiostro) 7%, transparent)} .preventivo__scelta{ display:flex;align-items:center;gap:var(--s3); min-width:0;cursor:pointer; } .preventivo__scelta input[type="checkbox"], .preventivo__consenso input[type="checkbox"]{ appearance:none;-webkit-appearance:none;margin:0; width:20px;height:20px;flex:0 0 auto; border:1px solid var(--inchiostro);border-radius:2px; background:transparent;cursor:pointer; display:grid;place-items:center; transition:background-color .2s; } .preventivo__scelta input[type="checkbox"]::after, .preventivo__consenso input[type="checkbox"]::after{ content:"";width:9px;height:5px; border-left:1.5px solid var(--lime); border-bottom:1.5px solid var(--lime); transform:rotate(-45deg) translate(1px,-1px); opacity:0;transition:opacity .2s; } .preventivo__scelta input[type="checkbox"]:checked, .preventivo__consenso input[type="checkbox"]:checked{background:var(--inchiostro)} .preventivo__scelta input[type="checkbox"]:checked::after, .preventivo__consenso input[type="checkbox"]:checked::after{opacity:1} .preventivo__cod{ flex:0 0 auto;min-width:4.6em; font-size:var(--t-nano);font-weight:500;letter-spacing:.1em; font-variant-numeric:tabular-nums; color:color-mix(in srgb, var(--inchiostro) 56%, transparent); transition:color .2s; } .preventivo__articolo:has(:checked) .preventivo__cod{color:var(--inchiostro)} .preventivo__nome{font-size:var(--t-piccolo);line-height:1.4;min-width:0} .preventivo__qta input{ width:82px;padding:8px 10px; font:inherit;font-size:var(--t-micro); font-variant-numeric:tabular-nums;text-align:right; color:var(--inchiostro);background:transparent; border:1px solid var(--filo-scuro);border-radius:2px; transition:border-color .25s,opacity .25s; } .preventivo__qta input:disabled{opacity:.3} .preventivo__qta input:focus{border-color:var(--inchiostro)} /* --- campi di testo -------------------------------------------------- */ .preventivo__campi{ margin-top:var(--s4); display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--s5) var(--s4); } .preventivo__campo{display:flex;flex-direction:column;gap:var(--s2);min-width:0} .preventivo__campo--largo{grid-column:1 / -1} .preventivo__campo > span{ font-size:var(--t-nano);text-transform:uppercase;letter-spacing:.1em; color:color-mix(in srgb, var(--inchiostro) 62%, transparent); } .preventivo__campo input, .preventivo__campo textarea{ font:inherit;font-size:var(--t-piccolo); color:var(--inchiostro);background:transparent; border:0;border-bottom:1px solid var(--filo-scuro);border-radius:0; padding:8px 0;min-width:0; transition:border-color .25s; } .preventivo__campo input:focus, .preventivo__campo textarea:focus{border-bottom-color:var(--inchiostro)} .preventivo__campo textarea{resize:vertical;min-height:78px;line-height:1.6} .preventivo ::placeholder{ color:color-mix(in srgb, var(--inchiostro) 40%, transparent);opacity:1; } .preventivo__errore{ margin:var(--s4) 0 0;padding-left:var(--s3); border-left:2px solid var(--inchiostro); font-size:var(--t-micro);font-weight:500;line-height:1.5; color:var(--inchiostro); } .preventivo__errore:empty{display:none} /* --- piede ----------------------------------------------------------- */ .preventivo__piede{ flex:0 0 auto; display:flex;flex-wrap:wrap;align-items:center; justify-content:space-between;gap:var(--s4); padding:var(--s4) clamp(1.25rem,3.6vw,2.9rem); border-top:1px solid var(--filo-scuro); } .preventivo__nota{ margin:0;max-width:46ch; font-size:var(--t-nano);line-height:1.65; color:color-mix(in srgb, var(--inchiostro) 62%, transparent); } .preventivo__nota a{color:var(--inchiostro);text-decoration:underline;text-underline-offset:3px} /* La spunta del consenso prende una riga intera del piede, sopra nota e tasto. Stessa casella degli articoli, per non inventare un secondo segno per la stessa cosa. La riga intera la da' width:100%, non flex-basis:100%: su telefono il piede diventa una colonna, e li' la base in percentuale si misura sull'altezza. La riga si allungava a 170 pixel e mandava nota e tasto in una seconda colonna, fuori dallo schermo. Lo stesso per l'errore. */ .preventivo__consenso{ flex:0 0 auto;width:100%; display:flex;align-items:flex-start;gap:var(--s3); font-size:var(--t-nano);line-height:1.65; color:color-mix(in srgb, var(--inchiostro) 78%, transparent); cursor:pointer; } .preventivo__consenso a{color:var(--inchiostro);text-decoration:underline;text-underline-offset:3px} .preventivo__piede .preventivo__errore{flex:0 0 auto;width:100%;margin:0} .preventivo__invia{ display:inline-flex;align-items:center;gap:10px;flex:0 0 auto; background:var(--inchiostro);color:var(--lime); border:1px solid var(--inchiostro);border-radius:999px; padding:10px 9px 10px 22px; font-size:var(--t-nano);font-weight:500; text-transform:uppercase;letter-spacing:.09em;white-space:nowrap; transition:background-color .3s,color .3s; } .preventivo__invia i{ width:24px;height:24px;border-radius:999px; background:var(--lime);color:var(--inchiostro); display:grid;place-items:center; font-style:normal;font-size:.8em;line-height:1; transition:transform .3s,background-color .3s,color .3s; } .preventivo__invia:hover{background:transparent;color:var(--inchiostro)} .preventivo__invia:hover i{background:var(--inchiostro);color:var(--lime);transform:rotate(45deg)} /* --- esito ------------------------------------------------------------ */ /* A richiesta partita la testa sparisce: il titolo del modulo e quello dell'esito si accavallerebbero, e quello che conta e' il secondo. Resta il tasto di chiusura, che serve ancora. */ .preventivo__pannello[data-esito="si"] .preventivo__testa{ grid-template-columns:auto;justify-items:end; padding-bottom:0;border-bottom:0; } .preventivo__pannello[data-esito="si"] .preventivo__testa > div{display:none} .preventivo__esito{padding:clamp(1.5rem,3.6vw,2.9rem)} .preventivo__esito h3{ margin:var(--s3) 0 0;font-weight:300;text-transform:uppercase; letter-spacing:-.012em;line-height:1.1; font-size:clamp(1.3rem,.95rem + 1.5vw,2.1rem); } .preventivo__riepilogo{ margin:var(--s4) 0 0;padding:var(--s4); max-height:220px;overflow:auto;overscroll-behavior:contain; border:1px solid var(--filo-scuro); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--t-nano);line-height:1.7; white-space:pre-wrap;word-break:break-word; color:color-mix(in srgb, var(--inchiostro) 78%, transparent); } .preventivo__azioni{ margin-top:var(--s5); display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center; } .preventivo__azioni .preventivo__invia{padding:10px 22px} /* Il secondo tasto dell'esito e' una scelta di ripiego: sta in testo, non compete con quello pieno. */ .preventivo__testuale{ font-size:var(--t-nano);font-weight:500; text-transform:uppercase;letter-spacing:.09em; color:color-mix(in srgb, var(--inchiostro) 70%, transparent); text-decoration:underline;text-underline-offset:4px; padding:10px 0;transition:color .25s; } .preventivo__testuale:hover{color:var(--inchiostro)} /* --- innesco dentro il menu a tutta pagina ---------------------------- */ /* Su schermo stretto la pillola della testata e' nascosta: senza questo, da telefono non ci sarebbe modo di aprire la richiesta. Lo monta main.js, cosi' esiste solo dove funziona davvero. */ .menu__preventivo{display:none} @media (max-width:760px){ .preventivo{ width:100%;max-width:100%;height:100%;max-height:none; margin:0;border-radius:0; } .preventivo__pannello{height:100svh;max-height:100svh} .preventivo__testa{padding-top:calc(var(--s5) + env(safe-area-inset-top,0px))} .preventivo__piede{ flex-direction:column;align-items:stretch;gap:var(--s3); padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom,0px)); } .preventivo__invia{justify-content:center;padding:14px 9px 14px 22px} .preventivo__articolo{grid-template-columns:minmax(0,1fr) auto} .preventivo__nome{font-size:var(--t-micro)} .menu__preventivo{ display:inline-flex;align-items:center;justify-content:center;gap:10px; margin-top:var(--s5);width:100%; background:var(--inchiostro);color:var(--lime); border-radius:999px;padding:16px 22px; font-size:var(--t-micro);font-weight:500; text-transform:uppercase;letter-spacing:.09em; } .menu__preventivo i{ width:24px;height:24px;border-radius:999px; background:var(--lime);color:var(--inchiostro); display:grid;place-items:center; font-style:normal;font-size:.8em;line-height:1; } } /* Sul telefono basso — un iPhone SE e' alto 667, con le barre di Safari ne restano 550 — testa e piede fermi si mangiavano quasi tutto il corpo, e con l'errore del consenso in vista ne restavano 150 pixel. Il paragrafo della testa se ne va: il consiglio sulle misure fuori standard c'e' gia' nell'etichetta delle note. */ @media (max-width:760px) and (max-height:700px){ .preventivo__intro{display:none} } /* Schermo basso — il telefono girato — : testa e piede fermi non lasciano posto al corpo e il tasto d'invio finiva fuori schermo. Qui scorre tutto il pannello, e corpo e piede tengono la loro altezza. La finestra resta overflow:hidden: a scorrere e' il pannello, non il . */ @media (max-height:520px){ .preventivo__pannello{overflow-y:auto;overscroll-behavior:contain} .preventivo__modulo{flex:none} .preventivo__corpo{flex:none;overflow:visible} } /* La finestra entra solo dove il movimento e' gradito. */ @media (prefers-reduced-motion:no-preference){ .preventivo{ opacity:0;transform:translateY(20px); transition:opacity .3s ease,transform .4s cubic-bezier(.2,.7,.2,1); } .preventivo[open]{opacity:1;transform:none} @starting-style{ .preventivo[open]{opacity:0;transform:translateY(20px)} } } /* Nella sezione contatti i due richiami stanno in riga, e vanno a capo insieme quando lo spazio finisce. */ .preventivo-richiamo{display:flex;flex-wrap:wrap;gap:var(--s3)} /* Il pulsante che chiama porta una cornetta invece della freccia: la freccia dice "si va da un'altra parte", e questo invece fa partire una telefonata. E' un disegno e non un carattere: il segno del telefono nei caratteri di sistema esce come emoji colorata su meta' dei telefoni, e qui stonerebbe. Eredita il colore dal pallino, quindi si inverte insieme a lui al passaggio del mouse. */ .pillola--telefono i svg{width:11px;height:11px;fill:currentColor;display:block} /* La freccia ruota di 45 gradi al passaggio perche' e' una freccia. Una cornetta che gira storta no. */ .pillola--telefono:hover i{transform:none} /* Il pulsante porta il numero e non la parola "chiama": e' quello che serve a chi lo legge senza premerlo, e premuto fa la stessa cosa. La parola resta nascosta alla vista davanti al numero, cosi' chi ascolta con la sintesi vocale sente "chiama il 338 844 2460" invece di una fila di cifre. Sotto i 520 il passo fra i due pulsanti e il loro margine interno si stringono di poco. */ @media (max-width:520px){ /* Quel tanto che basta perche' stiano in fila su uno schermo da 375. Il passo fra i due e il margine interno si stringono di poco — quel tanto che basta perche' stiano in fila da 360 in su, cioe' su tutti i telefoni che si vedono oggi. Sotto quella misura vanno a capo, ed e' la cosa giusta: schiacciarli oltre vorrebbe dire due bersagli troppo stretti per un pollice. */ .preventivo-richiamo{gap:var(--s2)} /* Col numero per esteso i due pulsanti sommano 340 pixel e la colonna di un telefono da 375 ne ha 335. Oltre al margine interno si stringe anche la spaziatura fra le lettere, da nove a sei centesimi di em: e' la leva che rende di piu', perche' agisce su ogni lettera delle due scritte. Si scende a 330 e ci stanno, con cinque pixel di margine. */ .preventivo-richiamo .pillola{padding:9px 6px 9px 12px;letter-spacing:.06em} } /* ========================================================================= FISARMONICA — domande e note di posa delle pagine articolo Domande e note di posa stavano distese: tre blocchi di testo lunghi uno sotto l'altro, e per arrivare in fondo alla pagina bisognava scorrerli tutti. Adesso si aprono a uno a uno. Sono
, non un finto accordion con il JavaScript: ad aprirli e chiuderli e' il browser, quindi funzionano anche a script spento, si comandano da tastiera e la ricerca nella pagina li apre da sola. ========================================================================= */ .fisarmonica{ border-top:1px solid var(--filo); /* serve a far animare l'altezza fino ad auto */ interpolate-size:allow-keywords; } /* Quando la fisarmonica segue un titolo nella stessa colonna — nei principi, dove prima stavano in due colonne diverse e lo stacco lo faceva la griglia — il filetto arrivava attaccato all'ultima riga del titolo. */ h2 + .fisarmonica, h3 + .fisarmonica{margin-top:var(--s6)} .voce{border-bottom:1px solid var(--filo)} .voce__titolo{ list-style:none; position:relative; padding:var(--s4) 44px var(--s4) 0; cursor:pointer; font-size:var(--d-riga);font-weight:300; text-transform:uppercase;letter-spacing:-.005em;line-height:1.15; transition:color .25s; } .voce__titolo::-webkit-details-marker{display:none} .voce__titolo:hover{color:var(--lime)} /* Lo stesso piu' del tasto del menu, costruito allo stesso modo: due barre distinte, una in piano e una in piedi, ognuna con la sua misura. Prima era una barra sola girata di novanta gradi, e girandola i suoi bordi cadevano fra due file di pixel: il tratto in piedi veniva piu' pallido e piu' corto di quello in piano, e il segno sembrava stirato. Senza rotazione i due tratti sono netti uguali. I due pseudo-elementi sono ancorati allo stesso punto — sedici pixel dal bordo destro — e ognuno si sposta di meta' della propria larghezza: cosi' si incrociano esattamente al centro qualunque misura abbiano. Lo spostamento sta in "translate" e non in "transform", che resta libero per l'animazione. La barra in piedi si ritira quando la risposta e' aperta, e il piu' diventa un meno. */ .voce__titolo::before, .voce__titolo::after{ content:"";position:absolute;right:16px;top:50%; translate:50% -50%; background:currentColor; transition:transform .35s cubic-bezier(.3,.7,.25,1); } /* Due pixel e non uno e mezzo, e le punte squadrate invece che stondate. La misura e' la stessa del tasto del menu, ma li' il segno e' chiaro su fondo scuro e sembra piu' grosso di quello che e'; qui e' scuro su lime, e alla stessa misura l'occhio lo legge come un filo. I due pixel pieni pareggiano il peso apparente dei due segni. Il raggio di un pixel su un tratto cosi' sottile mangiava le punte e faceva sembrare la barra affusolata invece che netta. */ .voce__titolo::before{width:20px;height:2px} .voce__titolo::after{width:2px;height:20px} .voce[open] .voce__titolo::after{transform:scaleY(0)} .voce__corpo{ padding:0 44px var(--s5) 0; font-size:var(--t-micro);line-height:1.7;color:var(--grigio); } .voce__corpo p{margin:0;max-width:62ch} .voce__corpo p + p{margin-top:var(--s3)} @media (prefers-reduced-motion:no-preference){ .voce::details-content{ block-size:0;overflow:hidden; transition:block-size .4s cubic-bezier(.3,.7,.25,1), content-visibility .4s allow-discrete; } .voce[open]::details-content{block-size:auto} } /* ========================================================================= GALLERIA DELL'ARTICOLO Tre inquadrature per pezzo: l'insieme, il dettaglio, la messa in posa. Il telaio e' 4:5 verticale — il formato in cui verranno scattate — cosi' l'impaginato e' gia' quello definitivo e le foto vere entreranno senza spostare niente. Le caselle ancora vuote lo dicono, invece di far finta. Si scorre col dito da subito: e' un contenitore con overflow orizzontale e aggancio, quindi funziona anche a JavaScript spento. Frecce e pallini li aggiunge lo script, perche' senza di lui non servirebbero a niente. ========================================================================= */ .galleria{ position:relative;z-index:1; /* Larghezza piena con un tetto, invece di min(100%,430px): dentro una griglia il 100% di min() puo' essere calcolato prima che la colonna abbia una misura, e allora vale come "quanto il contenuto" — cioe' le tre schermate della pista. Il min-width:0 toglie di mezzo la misura minima automatica, che e' l'altra strada per cui la pista allargherebbe tutto. */ width:100%;max-width:430px;min-width:0; display:flex;flex-direction:column; } .galleria__pista{ display:flex;min-width:0;margin:0;padding:0;list-style:none; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; } .galleria__pista::-webkit-scrollbar{display:none} .galleria__pista:focus-visible{outline:2px solid var(--lime);outline-offset:6px} .galleria__vista{flex:0 0 100%;scroll-snap-align:center} .galleria__vista figure{display:flex;flex-direction:column} .galleria__telaio{ position:relative; aspect-ratio:4 / 5; background:#151515; overflow:hidden; } .galleria__telaio img{ display:block;width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.08) brightness(.96); } /* Casella non ancora fotografata: il segno della piastra e la parola che dice quale scatto ci va. */ .galleria__attesa{ position:absolute;inset:0; display:grid;place-content:center;justify-items:center;gap:var(--s4); border:1px dashed var(--filo); color:var(--grigio-scuro); } .galleria__attesa::before{ content:"";width:36px;height:36px; background:currentColor; -webkit-mask:var(--marchio-segno) center / 36px 36px no-repeat; mask:var(--marchio-segno) center / 36px 36px no-repeat; } .galleria__attesa b{ font-size:var(--t-nano);font-weight:500; text-transform:uppercase;letter-spacing:.12em; } /* --- comandi, montati dallo script --------------------------------------- */ .galleria__barra{ display:flex;align-items:center;justify-content:space-between; gap:var(--s4);margin-top:var(--s3); } .galleria__punti{display:flex;gap:8px;margin:0;padding:0;list-style:none} .galleria__punto{ width:28px;height:2px;padding:0;border-radius:2px; background:var(--filo); transition:background-color .3s; } .galleria__punto[aria-current="true"]{background:var(--panna)} .galleria__frecce{display:flex;gap:var(--s3)} .galleria__freccia{ width:42px;height:42px;border-radius:50%; border:1px solid var(--filo);color:var(--panna); display:grid;place-items:center; transition:background-color .3s,border-color .3s,color .3s,opacity .3s; } .galleria__freccia:hover:not(:disabled){ background:var(--panna);border-color:var(--panna);color:var(--nero); } .galleria__freccia:disabled{opacity:.28;cursor:default} @media (max-width:900px){ /* In colonna la galleria si prende la larghezza che trova, ma il telaio resta 4:5: e' un formato alto, e su telefono e' quello che rende meglio. */ .galleria{max-width:340px;margin-inline:auto} } /* ========================================================================= LENTE — la fotografia a schermo pieno Le foto della galleria sono piccole per forza: mezza pagina, e su un pezzo forgiato il dettaglio che conta e' la piega o il cordone che non c'e'. Qui la fotografia si apre grande e si puo' avvicinare ancora. La scena si comanda a mano — pizzico, rotella, trascinamento — quindi touch-action:none: i gesti li leggiamo noi, altrimenti se li prende il browser per far scorrere la pagina sotto. ========================================================================= */ .galleria__telaio--lente{cursor:zoom-in} .galleria__ingrandisci{ position:absolute;inset:0;z-index:2; display:block;width:100%;height:100%; cursor:zoom-in; } /* La pastiglia si mostra al passaggio e quando il fuoco arriva da tastiera: a riposo non deve coprire la fotografia. */ .galleria__pastiglia{ position:absolute;right:var(--s3);bottom:var(--s3); display:flex;align-items:center;gap:8px; padding:8px 14px;border-radius:999px; background:rgba(11,11,11,.72); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); color:var(--panna); font-size:var(--t-nano);font-weight:500; text-transform:uppercase;letter-spacing:.1em; opacity:0;transform:translateY(6px); transition:opacity .3s,transform .3s; pointer-events:none; } .galleria__ingrandisci:hover .galleria__pastiglia, .galleria__ingrandisci:focus-visible .galleria__pastiglia{opacity:1;transform:none} .lente{ padding:0;border:0;margin:0; width:100%;max-width:100%;height:100%;max-height:100%; background:var(--nero-2);color:var(--panna); overflow:hidden; } .lente::backdrop{background:var(--nero-2)} .lente :focus-visible{outline:2px solid var(--lime);outline-offset:3px} .lente__pannello{display:flex;flex-direction:column;height:100%} .lente__scena{ flex:1 1 auto;min-height:0; display:grid;place-items:center; /* Le tracce esplicite servono al max-height della fotografia. Con la riga lasciata ad auto l'altezza della riga la detta la fotografia, e la percentuale che dovrebbe contenerla finisce per misurarsi su se stessa: allora vale "nessun limite", e uno scatto piu' alto della scena esce dai bordi invece di rimpicciolirsi. Con minmax(0,1fr) l'area la detta la scena, e il limite torna a valere. Prima non si vedeva perche' le foto erano tutte piu' piccole della scena. */ grid-template-rows:minmax(0,1fr); grid-template-columns:minmax(0,1fr); overflow:hidden; padding:calc(var(--testata) + var(--s4)) var(--s4) var(--s4); touch-action:none; cursor:zoom-in; } .lente__scena[data-grande="si"]{cursor:grab} .lente__scena[data-trascino="si"]{cursor:grabbing} .lente__foto{ max-width:100%;max-height:100%;width:auto;height:auto;display:block; filter:grayscale(1) contrast(1.08) brightness(.96); transform-origin:center center; transition:transform .3s cubic-bezier(.2,.7,.2,1); } .lente__foto[data-mano="si"]{transition:none} .lente__chiudi{ position:absolute;top:var(--s3);right:var(--s3);z-index:3; width:46px;height:46px;border-radius:50%; border:1px solid var(--filo);color:var(--panna); transition:background-color .3s,border-color .3s,color .3s; } .lente__chiudi::before,.lente__chiudi::after{ content:"";position:absolute;left:50%;top:50%; width:18px;height:1.5px;background:currentColor;border-radius:1px; } .lente__chiudi::before{transform:translate(-50%,-50%) rotate(45deg)} .lente__chiudi::after{transform:translate(-50%,-50%) rotate(-45deg)} .lente__chiudi:hover{background:var(--panna);border-color:var(--panna);color:var(--nero)} .lente__barra{ flex:0 0 auto; display:flex;align-items:center;justify-content:space-between;gap:var(--s4); padding:var(--s4) var(--pad) calc(var(--s4) + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--filo); } .lente__dida{ margin:0;min-width:0; font-size:var(--t-nano);line-height:1.6;color:var(--grigio); text-transform:uppercase;letter-spacing:.12em; } .lente__dida b{color:var(--panna);font-weight:500} .lente__comandi{display:flex;align-items:center;gap:var(--s3);flex:0 0 auto} .lente__tasto{ width:44px;height:44px;border-radius:50%; border:1px solid var(--filo);color:var(--panna); display:grid;place-items:center; transition:background-color .3s,border-color .3s,color .3s,opacity .3s; } .lente__tasto:hover:not(:disabled){background:var(--panna);border-color:var(--panna);color:var(--nero)} .lente__tasto:disabled{opacity:.28;cursor:default} @media (max-width:760px){ .lente__barra{flex-direction:column;align-items:flex-start;gap:var(--s3)} .lente__comandi{align-self:stretch;justify-content:space-between} } @media (prefers-reduced-motion:reduce){ .lente__foto{transition:none} } /* La fisarmonica sul campo lime: filetti, testo e passaggio del mouse vanno in inchiostro. Il lime su lime non si vedrebbe — vale qui come per il contorno del fuoco. */ .fascia--lime .fisarmonica{border-top-color:var(--filo-scuro)} .fascia--lime .voce{border-bottom-color:var(--filo-scuro)} /* Sul lime il passaggio del mouse non cambia niente, e la riga non si scurisce. Prima c'era una velatura: su un telefono pero' il passaggio del mouse non esiste, e quello che succede e' che dopo un tocco la velatura ci resta attaccata, senza un modo per mandarla via. Una riga scura in mezzo alle altre chiare sembra un errore, non una risposta al tocco. Che la voce sia aperta lo dicono gia' il piu' che diventa meno e il pannello che si apre. L'inchiostro qui va comunque ribattuto: senza, vincerebbe la regola generale che al passaggio porta il titolo al lime, e il lime su lime sparisce. */ .fascia--lime .voce__titolo:hover{color:var(--inchiostro)} .fascia--lime .voce__corpo{color:color-mix(in srgb, var(--inchiostro) 72%, transparent)} /* ========================================================================= CODA DELLA HOME Cinque fasce dalle sagome tutte diverse al posto di tre blocchi mezzo-testo mezza-fotografia. Tre fotografie su quattro escono: erano segnaposto da 400px tirati al doppio, ed erano loro a far sembrare fiacche le sezioni. Nessuna riga di JavaScript nuova. ========================================================================= */ /* --- C. la matrice -------------------------------------------------------- */ .matrice{margin-top:var(--s7)} .matrice table{min-width:640px} .matrice th[scope="row"]{width:46%;color:var(--panna)} /* L'ultima cella non ha il margine a destra: cosi' il nome finisce dove finisce il filetto della riga, e la colonna si legge come una colonna. */ .matrice td.v{padding-right:0} /* La riga si legge in tre tempi: la situazione a sinistra, la miniatura del pezzo in mezzo, il nome a destra. Le tre colonne dentro il collegamento — immagine, spazio, nome — fanno si' che la miniatura si incolonni con quelle delle altre righe e il nome si appoggi al bordo destro della tabella. E' un collegamento solo per riga: spezzarlo in due celle vorrebbe dire due volte lo stesso link, e chi naviga con la tastiera lo incontrerebbe due volte. Il filetto sta sotto il nome e non sotto tutta la riga, altrimenti correrebbe anche sotto l'immagine. */ .matrice td.v a{ display:grid;grid-template-columns:auto minmax(var(--s4),1fr) auto; align-items:center; transition:color .3s; } .matrice td.v a:hover{color:var(--lime)} /* Verticale, come le fotografie: quattro a cinque, lo stesso taglio del telaio nelle schede. */ .matrice .mini{ width:56px;height:70px; object-fit:cover;background:#171717; filter:grayscale(1) contrast(1.06) brightness(.94); transition:filter .3s; } .matrice td.v a:hover .mini{filter:grayscale(1) contrast(1.04) brightness(1.06)} .matrice .cod{ justify-self:end;padding-right:var(--s3); color:var(--grigio-scuro);font-variant-numeric:tabular-nums; transition:color .3s; } .matrice .nome{ border-bottom:1px solid var(--filo); transition:border-color .3s; } .matrice td.v a:hover .nome{border-bottom-color:var(--lime)} /* --- la riga intera si accende al passaggio ------------------------------ Prima si accendeva solo il collegamento, cioe' la meta' destra: passando sopra alla descrizione del muro non succedeva niente, e la riga non si leggeva come una cosa sola. Ora la riga e' tutta lime, con un velo dello stesso colore sotto, appena percettibile. Il velo sta al 9%: piu' su, il lime dietro il testo lime comincia a togliere contrasto. Solo dove il passaggio del mouse esiste davvero: sul touch la riga resterebbe accesa dopo il tocco, senza un modo per spegnerla. */ @media (hover:hover){ .matrice tbody tr{transition:background-color .25s} .matrice tbody tr:hover{background:color-mix(in srgb, var(--lime) 9%, transparent)} .matrice tbody tr:hover th[scope="row"], .matrice tbody tr:hover td.v, .matrice tbody tr:hover .cod{color:var(--lime)} .matrice tbody tr:hover .nome{border-bottom-color:var(--lime)} .matrice tbody tr:hover .mini{filter:grayscale(1) contrast(1.04) brightness(1.06)} } /* --- D. chi li piega ------------------------------------------------------ */ /* --- E. chiusura sul lime -------------------------------------------------- */ .fatti--tre{grid-template-columns:repeat(3,minmax(0,1fr))} .fatti--tre a:hover{text-decoration:underline;text-underline-offset:.2em} /* Difetto gia' in rete su tutte e undici le schede: la pillola dentro una fascia lime, al passaggio del mouse, si dipingeva di lime su lime e spariva. Vale per la home e per le pagine prodotto. */ .fascia--lime .pillola{ background:transparent;color:var(--inchiostro);border-color:var(--inchiostro); } .fascia--lime .pillola i{background:var(--inchiostro);color:var(--lime)} .fascia--lime .pillola:hover{ background:var(--inchiostro);color:var(--lime);border-color:var(--inchiostro); } .fascia--lime .pillola:hover i{background:var(--lime);color:var(--inchiostro)} /* Stesso motivo: .minuto e' grigio, che sul lime da' circa 2.5 di contrasto. Le schede lo rattoppavano una per una con uno style in riga. */ .fascia--lime .minuto{color:color-mix(in srgb, var(--inchiostro) 74%, transparent)} @media (max-width:900px){ .fatti--tre{grid-template-columns:repeat(2,minmax(0,1fr))} /* A due colonne il filetto verticale va tolto a fine riga, non solo all'ultima cella: altrimenti resta appeso sul bordo destro. */ .fatti--tre > div:nth-child(2n){border-right:0} } /* Su telefono la tabella non scorre di lato: ogni riga diventa un blocco, la situazione sopra e il pezzo sotto. Scorrere una tabella dentro la pagina e' un gesto che nessuno cerca, e meta' del contenuto resta nascosta. */ @media (max-width:760px){ .matrice{overflow-x:visible;border-top:1px solid var(--filo)} .matrice table{min-width:0} .matrice thead{ position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap; } .matrice tbody tr{display:block;padding-block:var(--s4);border-bottom:1px solid var(--filo)} .matrice tbody tr:last-child{border-bottom:0} .matrice th[scope="row"], .matrice td{display:block;width:auto;padding:0;border:0} .matrice td{margin-top:var(--s3)} .matrice caption{padding-bottom:var(--s3)} /* Qui la riga e' gia' spezzata in due — la situazione sopra, il pezzo sotto — e i tre tempi della versione larga non servono piu': spingere il nome contro il bordo destro lascerebbe in mezzo un vuoto di cento pixel che non vuol dire niente. Miniatura, codice e nome stanno uniti. */ .matrice td.v a{grid-template-columns:auto auto minmax(0,1fr);gap:var(--s3)} .matrice .cod{justify-self:start;padding-right:0} } @media (max-width:600px){ /* In colonna sola il rientro e il filetto verticale del componente a due colonne diventano sbagliati: le celle si incolonnano e si separano con un filetto orizzontale. */ .fatti--tre{grid-template-columns:minmax(0,1fr)} .fatti--tre > div{border-right:0;padding-right:0} .fatti--tre > div + div{ padding-left:0;padding-top:var(--s4); border-top:1px solid var(--filo-scuro); } } /* ========================================================================= PAGINA AZIENDA Poche regole: la pagina e' testo, e il testo lo reggono i componenti che ci sono gia'. Serve solo dare alla riga una misura leggibile — un paragrafo largo quanto la fascia non lo legge nessuno. ========================================================================= */ .azienda__titolo{ font-size:var(--d-hero); margin-top:var(--s5);max-width:18ch; } /* 48ch e non 62: l'unita' ch misura la larghezza dello zero, piu' larga della lettera media, quindi 62ch dava righe da 83 battute. A 48 si sta fra le 60 e le 65, che e' la misura in cui l'occhio non perde il rigo. */ .colonna{max-width:48ch} .colonna .minuto + .minuto{margin-top:var(--s5)} /* Dove la colonna segue direttamente un titolo — cioe' fuori dal duetto, dove ci pensa la griglia — lo stacco va messo a mano. */ .azienda__titolo + .colonna, .azienda__frase + .colonna{margin-top:var(--s6)} /* Dove il testo sta sotto al titolo invece che di fianco, due colonne tengono la pagina compatta senza allungare la riga. */ .colonna--doppia{ max-width:none;margin-top:var(--s6); columns:2 30ch;column-gap:clamp(var(--s5),5vw,var(--s7)); } .colonna--doppia .minuto{break-inside:avoid;margin:0} .colonna--doppia .minuto + .minuto{margin-top:var(--s5)} /* La frase e' il titolo: sta larga quanto le serve, non quanto la fascia. */ .azienda__frase{ font-size:var(--d-media); margin-top:var(--s5);max-width:20ch; } /* --- informativa privacy ------------------------------------------------- Una voce per riga: a sinistra di cosa si parla, a destra cosa succede. E' la griglia della pagina dell'officina, con un filetto fra le voci perche' qui sono tante e brevi. */ .informativa{display:grid;gap:var(--s6);margin-top:var(--s7)} .informativa .duetto{padding-top:var(--s5);border-top:1px solid var(--filo)} .informativa h2{margin:0} .informativa ul{margin:var(--s4) 0 0;padding-left:1.1em;list-style:disc} .informativa li{font-size:var(--t-micro);line-height:1.72;color:var(--grigio)} .informativa li + li{margin-top:var(--s2)} .informativa .minuto a{color:var(--panna);text-decoration:underline;text-underline-offset:3px} .informativa .minuto a:hover{color:var(--lime)} .informativa b{color:var(--panna);font-weight:500} .fascia--lime .colonna .minuto{color:color-mix(in srgb, var(--inchiostro) 74%, transparent)} @media (max-width:900px){ .colonna--doppia{columns:1;margin-top:var(--s5)} .azienda__titolo, .azienda__frase{max-width:none} } /* ========================================================================= HERO TIPOGRAFICA Fondo scuro e nient'altro: il titolo si prende la larghezza, la riga tecnica sta in basso a sinistra, il tondo a destra. La fotografia non sta piu' sotto al testo ma in una fascia sua, subito dopo — cosi' non serve piu' il velo scuro che teneva leggibile il titolo, e la foto si vede per intero invece che a meta' dietro le lettere. ========================================================================= */ /* Campo lime. Sul lime va solo inchiostro: il panna darebbe 1.45 di contrasto. La hero non arriva a fondo schermata: la fotografia deve affacciarsi da sotto gia' senza scorrere, come nel riferimento. */ /* Lo stacco sopra il titolo e' di specie diversa dagli altri due: non e' ritmo fra blocchi, e' la distanza dalla testata, che galleggia sopra. Vale --s8 e respira; gli stacchi interni restano --s5, uguali fra loro. */ .hero{ background:var(--lime);color:var(--inchiostro); /* Rete di sicurezza: la prima riga e' in nowrap, e se un carattere di ripiego dovesse renderla piu' larga del previsto prima che arrivi Onest, senza questo comparirebbe una barra di scorrimento orizzontale. */ overflow:hidden; /* Piu' del piu' grande della scala: qui serve un vuoto che la scala non prevede, quindi ha un valore suo invece di storcere --s8, che regola le fasce di tutto il sito. */ /* Aria sopra e aria sotto: il campo lime respira da entrambe le parti e la fotografia comincia piu' in basso. Il vuoto sotto e' minore di quello sopra perche' sopra deve anche staccare dalla testata. */ padding:calc(var(--testata) + clamp(6.5rem,14vw,14rem)) 0 var(--s8); } .hero :focus-visible{outline-color:var(--inchiostro)} /* Sul desktop, col mouse, la hero e' un campo lime: i fondali non servono, e con un display:none le loro fotografie non vengono nemmeno chieste. */ .hero__fondali{display:none} .hero__in{width:100%} /* La spaziatura larga e' quello che fa leggere il titolo come una targa invece che come una frase: e' il segno del riferimento. */ /* Le due righe sono due blocchi, non un
: la rottura non dipende dallo spazio disponibile. La scala e' legata alla larghezza dello schermo perche' la prima riga — trenta caratteri — deve starci per intero a ogni misura: e' quello che il cliente ha chiesto. Il coefficiente 5vw e' stato trovato misurando la riga a 375, 414, 768, 1024, 1440 e 1600. */ .hero__titolo{ /* Il minimo scende da 1.05 a .95rem: col peso 500 il testo si allarga e a 320px il margine della riga era sceso a 9px, troppo poco per essere sicuri con un carattere di ripiego. */ font-size:clamp(.95rem,5.1vw,5.2rem); /* Piu' pesante del 300 di .display: a questo corpo il chiaro si assottiglia e perde presenza. Il 500 e' gia' fra i pesi caricati, quindi non aggiunge un file da scaricare. */ font-weight:500; letter-spacing:.01em; line-height:1.08; text-transform:uppercase; max-width:none; } .hero__titolo span{display:block;white-space:nowrap} /* L'invito non va al bordo della fascia ma alla fine della seconda riga del titolo: e' quel bordo, non il margine della pagina, che tiene insieme il blocco. La larghezza gliela da' la copia muta nel documento, larga quanto "ad alte prestazioni"; l'invito ci si appoggia con justify-self. */ .hero__riga{ margin-top:var(--s5); display:grid;grid-template-columns:auto auto; justify-content:space-between; width:max-content;max-width:100%; /* start e non center: l'invito si allinea alla prima riga del paragrafo, non al suo centro. */ gap:var(--s6);align-items:start; } .hero__riga .invito{justify-self:end} /* Stessi tratti della riga del titolo — corpo, peso, spaziatura, maiuscolo — altrimenti misurerebbe una larghezza diversa da quella che deve copiare. Alta zero e nascosta: occupa larghezza, non spazio. */ .hero__misura{ grid-column:1 / -1; height:0;overflow:hidden;visibility:hidden; font-size:clamp(.95rem,5.1vw,5.2rem); font-weight:500;letter-spacing:.01em;line-height:1.08; text-transform:uppercase;white-space:nowrap; } /* Sotto i 1040 il titolo si accorcia piu' in fretta di quanto si accorcino paragrafo e invito, e i due affiancati diventano piu' larghi della riga che devono seguire: l'invito finirebbe oltre la fine di "prestazioni". Sotto quella misura scende di una riga e si tiene a destra, cosi' l'allineamento con la fine del titolo regge a ogni larghezza. Solo col mouse: sul tablet in orizzontale la hero e' quella a fotografie, con la freccia appoggiata al titolo, e questa regola non la riguarda. */ @media (min-width:901px) and (max-width:1040px) and (orientation:landscape) and (hover:hover){ .hero__riga{grid-template-columns:minmax(0,1fr);gap:var(--s4) 0} .hero__misura{grid-column:1} } .hero__nota{ /* Le righe sono spezzate a mano nel documento: nessun limite di misura, altrimenti si aggiungerebbero rotture che non abbiamo chiesto. */ margin:0;max-width:none; font-size:var(--t-micro);line-height:1.7; color:color-mix(in srgb, var(--inchiostro) 72%, transparent); } /* Scritta e freccia in diagonale verso il basso, senza pallino: il collegamento porta piu' in basso nella pagina, e la freccia lo dice. Al passaggio si sposta nel verso in cui punta. */ .invito{ display:inline-flex;align-items:center;gap:10px;flex:0 0 auto; font-size:var(--t-nano);font-weight:500; text-transform:uppercase;letter-spacing:.1em;white-space:nowrap; color:var(--inchiostro); transition:color .3s; } .invito i{ font-style:normal;font-size:1.15em;line-height:1; transition:transform .3s cubic-bezier(.3,.7,.25,1); } .invito:hover i{transform:translate(3px,3px)} /* --- la fascia con la fotografia --------------------------------------- */ /* La fotografia e' un fondo e non un : cosi' vive dentro una media query e su telefono, dove la fascia non si vede, non viene richiesta. Il filtro sta sull'elemento perche' la fascia non ha figli. */ /* Due meta' affiancate, con lo stacco netto in mezzo: il gesto a sinistra, il posto dove si lavora a destra. Sono due elementi e non due strati di sfondo sullo stesso riquadro perche' due strati non si possono tagliare a meta' senza schiacciare le fotografie: "cover" ragiona sul riquadro intero, e per dare a ognuna la sua meta' bisognerebbe deformarle. Il filtro resta sul contenitore e vale per tutte e due. */ .banda{ height:clamp(320px,58vh,760px); background:var(--nero-2); filter:grayscale(1) contrast(1.06) brightness(.86); display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .banda__meta{background:var(--nero-2) center / cover no-repeat} /* Le fotografie stanno dentro la media query e non nell'HTML: su telefono e tablet la fascia non si vede e i due file non vengono nemmeno richiesti. Con due nascosti si sarebbero scaricati lo stesso. */ @media (min-width:901px) and (orientation:landscape) and (hover:hover), (min-width:1101px) and (hover:hover){ .banda__meta--lavoro{ background-image:url("../images/officina-orizzontale.jpg"); background-position:38% 45%; } .banda__meta--officina{ background-image:url("../images/officina.jpg"); background-position:50% 42%; } } /* COPERTINA A FOTOGRAFIE — quando vale. Sotto i 900; su ogni schermo in verticale fino a 1100; e su ogni schermo che si comanda col dito, a qualunque larghezza e in tutti e due i versi. Il verticale: un iPad Pro in verticale e' largo 1024, e col solo limite dei 900 prendeva la copertina da desktop — campo lime e fascia divisa — su uno schermo alto e stretto come un telefono grande. Il dito: lo stesso iPad girato in orizzontale e' largo 1366, piu' di tanti portatili, e nessuna misura li distingue. Li distingue il mouse. Con (hover:none) il tablet prende la copertina a fotografie in tutti e due i versi, mentre il portatile col touch screen resta sul desktop, perche' il suo puntatore principale e' il trackpad. Il nome del browser non aiuta: Safari su iPad si presenta come un Mac. Qui basta (hover:none), senza il (pointer:coarse) dei tre principi, perche' questa condizione ha un contrario da scrivere, e il contrario di (hover:none) e' soltanto (hover:hover). La stessa condizione — e il suo contrario per le regole da desktop — sta su tutti i blocchi che riguardano copertina, testata sopra la copertina e invito. Il contrario porta (hover:hover) su ogni ramo: senza, il tablet in orizzontale li prenderebbe tutti e due. Se se ne dimentica uno, sul tablet si mescolano pezzi delle due versioni. */ @media (max-width:900px), (orientation:portrait) and (max-width:1100px), (hover:none){ /* Su telefono la hero torna fotografica a tutta pagina, con il titolo in lime appoggiato in basso. La fotografia sta qui, in CSS, e non nel documento: dentro una media query che sul desktop non vale non viene nemmeno richiesta, quindi da desktop non si scarica un file che non si vedrebbe. Il rovescio e' che perde il testo alternativo, ma qui la fotografia illustra e non informa: quello che dice sta nel titolo. */ .hero{ position:relative; background:var(--nero-2); min-height:100svh; display:flex;align-items:flex-end; padding:calc(var(--testata) + var(--s6)) 0 var(--s7); } /* Quattro fotografie che si danno il cambio: il saldatore, l'officina, la mola, il carrello sotto il paranco. Cinque secondi ciascuna e un secondo e mezzo di dissolvenza in mezzo: ventisei secondi per giro. Sono elementi e non pseudo-elementi perche' i pseudo-elementi sono due e gli strati servono quattro. Girano tutti sulla stessa animazione e si sfalsano con un ritardo negativo: la stessa regola per tutti, e a cambiare e' solo da che punto del giro ognuno parte. Il ritardo e' negativo e non positivo perche' un ritardo positivo lascerebbe il fondale fermo sul suo primo fotogramma finche' non tocca a lui, cioe' visibile quando non deve. Il velo scuro sta dentro ogni fondale e non su uno strato per conto suo, e funziona perche' e' lo stesso in tutti — per questo e' scritto una volta sola, in --velo: a meta' dissolvenza — meta' dell'uno e meta' dell'altro — la sua forza non cambia. Quello che si mescola sono le fotografie sotto, non il velo sopra. Tiene il lime del titolo staccato dalle parti chiare degli scatti, che e' li' che perderebbe il fondo. Il filtro non fa danni al velo: e' un nero quasi puro, e grigio, contrasto e luminosita' su quel colore non lo spostano. */ .hero__fondali{display:block;position:absolute;inset:0;z-index:0;overflow:hidden} .hero__fondale{ position:absolute;inset:0;display:block;pointer-events:none; background-repeat:no-repeat;background-size:cover; filter:grayscale(1) contrast(1.06) brightness(.74); --velo:linear-gradient(to top, rgba(11,11,11,.93) 0%, rgba(11,11,11,.55) 42%, rgba(11,11,11,.30) 68%, rgba(11,11,11,.78) 100%); opacity:0; /* Due animazioni perche' vogliono due andature: la dissolvenza rallenta in entrata e in uscita, l'avvicinata dev'essere regolare, se no si vedrebbe accelerare e frenare. */ animation: copertina 26s ease-in-out infinite, copertina-avvicina 26s linear infinite; } /* L'ordine e' quello del documento: ogni fondale entra 6,5 secondi dopo il precedente. Il primo parte da zero, il fondale n con un ritardo di meno (26 - 6,5 x (n - 1)) secondi. */ .hero__fondale:nth-child(1){ background-image:var(--velo), url("../images/officina-verticale.jpg"); background-position:center, center; animation-delay:0s, 0s; } .hero__fondale:nth-child(2){ background-image:var(--velo), url("../images/officina.jpg"); /* Il taglio guarda piu' a sinistra dello scatto, verso i ferri appoggiati al muro: a schermo ne entra poco piu' della meta', e quale meta' lo decide questo numero. */ background-position:center, 30% 45%; animation-delay:-19.5s, -19.5s; } .hero__fondale:nth-child(3){ background-image:var(--velo), url("../images/cover_03.jpg"); background-position:center, 45% 45%; animation-delay:-13s, -13s; } .hero__fondale:nth-child(4){ background-image:var(--velo), url("../images/cover_4.jpg"); /* Un po' a sinistra del centro: tiene dentro il paranco con la catena, che sta a un terzo dello scatto, e la bilancia sul banco. */ background-position:center, 40% 45%; animation-delay:-6.5s, -6.5s; } /* Sullo schermo in orizzontale — il tablet girato, il telefono girato — il saldatore verticale verrebbe tagliato a una striscia in mezzo e ingrandito tre volte. Lo stesso scatto esiste gia' tagliato in orizzontale, ed e' quello della fascia da desktop: si usa quello. Gli altri tre restano gli stessi: da verticali a orizzontali perdono sopra e sotto, e il 45% in altezza tiene dentro quello che conta. */ @media (orientation:landscape){ .hero__fondale:nth-child(1){ background-image:var(--velo), url("../images/officina-orizzontale.jpg"); background-position:center, 38% 45%; } } /* I punti sono i secondi divisi per 26: a quadro fino a 5 (19,23%), spenta a 6,5 (25%), di nuovo in dissolvenza da 24,5 (94,23%). */ @keyframes copertina{ 0%, 19.23% {opacity:1} 25%, 94.23% {opacity:0} 100% {opacity:1} } /* Ogni fotografia si avvicina piano finche' sta a quadro e rientra mentre e' invisibile, fra un quarto e meta' del giro. Sei per cento in tutto: si deve sentire che qualcosa si muove senza accorgersi di cosa. Il taglio dei bordi lo fa il contenitore, che e' overflow:hidden. */ @keyframes copertina-avvicina{ 0% {transform:scale(1)} 25% {transform:scale(1.06)} 50%, 100% {transform:scale(1)} } /* A chi ha chiesto meno movimento non si alterna niente: la regola generale in cima al foglio azzera durata e ripetizioni, e l'animazione finisce prima di cominciare. Resta la prima fotografia, ferma; le altre spariscono, e con un display:none non vengono nemmeno scaricate. Prima restavano tutte a opacita' zero: la copertina era un nero vuoto, pagato con quattro fotografie scaricate per niente. */ @media (prefers-reduced-motion:reduce){ .hero__fondale:first-child{opacity:1} .hero__fondale:not(:first-child){display:none} } .hero__in{position:relative;z-index:2} /* Il titolo riempie la cassa, cosi' il margine a destra e' lo stesso che a sinistra. Prima il corpo era legato alla larghezza dello schermo con un coefficiente trovato a occhio (5.1vw), scelto per stare largo e non rischiare di sbordare: la riga restava trenta pixel corta e a destra avanzava il doppio del margine di sinistra. Il numero 16.14 non e' inventato: e' quanto misura la prima riga — "chiavi per tiranti antisismici" — in em. Misurato sulla pagina, ed e' esatto a qualunque corpo perche' anche la spaziatura fra le lettere e' in em. Dividendo la cassa per quel numero si ottiene il corpo che la riempie esattamente. Il carattere di ripiego, prima che arrivi Onest, e' piu' stretto (15.49 em): durante l'attesa la riga e' piu' corta, mai piu' lunga, quindi non c'e' il rischio di vederla tagliata. Si misura la cassa e non lo schermo: su un browser da tavolo stretto la barra di scorrimento fa sembrare lo schermo piu' largo di quanto la pagina sia davvero, e la riga uscirebbe di quei pixel. Dove le container query non ci sono, si ripiega sullo schermo meno i due margini. */ .hero__titolo{ color:var(--lime); font-size:calc((100vw - 2 * var(--pad)) / 16.14); } @supports (container-type:inline-size){ .hero__in{container-type:inline-size} .hero__titolo{font-size:calc(100cqw / 16.14)} } /* Il paragrafo se ne va: sopra la fotografia il titolo basta, e quello che dice il paragrafo lo ridice la sezione dei principi poco piu' sotto. */ .hero__nota{display:none} .invito{color:var(--panna)} /* L'anello del fuoco torna lime: quello in inchiostro e' pensato per il campo lime, e sul nero della fotografia non si vedrebbe. */ .hero :focus-visible{outline-color:var(--lime)} /* Resta la sola freccia, appoggiata sotto al titolo. Il testo non viene tolto ma nascosto alla vista: con un display:none il collegamento perderebbe il nome, e chi naviga con la sintesi vocale sentirebbe soltanto "link". */ .invito span{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; } .invito{ gap:0;min-width:44px;min-height:44px; align-items:center;justify-content:flex-start; } .invito i{font-size:2.1rem;line-height:1} /* La fascia fotografica sparisce: la fotografia e' gia' nella hero. */ .banda{display:none} .hero__riga{grid-template-columns:minmax(0,1fr);gap:var(--s5);align-items:start} .hero__nota{max-width:none} /* Qui la riga e' fuori flusso e larga quanto il suo contenuto: la copia muta la allargherebbe fino alla riga del titolo e trascinerebbe la freccia a sinistra. Su telefono non serve, quindi via del tutto. */ .hero__misura{display:none} } /* --- testata sopra la hero lime ------------------------------------------- La home apre su un campo lime e la testata ci sta sopra trasparente: il panna da' 1.26 di contrasto, cioe' niente. La classe .apre-sul-lime sta nell'HTML e non la mette lo script, cosi' vale dal primo fotogramma — una classe messa dal ciclo di animazione arriverebbe dopo la prima pittura, e a JavaScript spento non arriverebbe mai. Il :not(.is-staccata) e' obbligatorio: appena si scorre di 40px la testata prende il suo fondo scuro, e li' l'inchiostro sarebbe illeggibile quanto il panna sul lime. Le due condizioni si sovrappongono per centinaia di pixel, quindi senza la guardia il difetto si sposterebbe soltanto. */ body.apre-sul-lime .testata:not(.is-staccata) .marchio, body.apre-sul-lime .testata:not(.is-staccata) .menu > a, body.apre-sul-lime .testata:not(.is-staccata) .telefono{color:var(--inchiostro)} body.apre-sul-lime .testata:not(.is-staccata) .menu > a:hover{ color:color-mix(in srgb, var(--inchiostro) 58%, transparent); } /* La pillola scura sul lime si vede bene, ma al passaggio del mouse si dipingeva di lime su lime e spariva. */ body.apre-sul-lime .testata:not(.is-staccata) .pillola:hover{ background:var(--inchiostro);color:var(--lime);border-color:var(--inchiostro); } body.apre-sul-lime .testata:not(.is-staccata) .pillola:hover i{ background:var(--lime);color:var(--inchiostro); } /* A JavaScript spento .is-staccata non arriva mai: la testata resterebbe trasparente anche sopra le fasce nere, con l'inchiostro sopra. Le si da' il fondo scuro fisso e il testo torna panna. */ @media (scripting: none){ .testata{ background:rgba(11,11,11,.92); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); } body.apre-sul-lime .testata .marchio, body.apre-sul-lime .testata .menu > a, body.apre-sul-lime .testata .telefono{color:var(--panna)} } /* ========================================================================= TRE PRINCIPI A SCHERMO DIVISO Fotografia a sinistra, principi a destra. Passando sopra a una voce — o aprendola, che e' quello che si fa da telefono, dove il passaggio del mouse non esiste — cambia la fotografia. Lo scambio e' tutto in CSS. La fotografia sta PRIMA delle voci nel documento, quindi un selettore fratello non potrebbe raggiungerla all'indietro: e' :has() sul contenitore a risolvere il verso. ========================================================================= */ .principi-split{ display:grid;grid-template-columns:1fr 1fr; background:var(--lime);color:var(--inchiostro); min-height:min(100svh,860px); } .principi-split :focus-visible{outline-color:var(--inchiostro)} .visuale{position:relative;overflow:hidden;background:#151515} .visuale__foto{ position:absolute;inset:0;margin:0; opacity:0;transition:opacity .5s ease; } .visuale__foto img{ width:100%;height:100%;object-fit:cover;display:block; filter:grayscale(1) contrast(1.06) brightness(.94); } /* Un disegno tecnico non e' una fotografia: ingrandirlo non lo rende piu' grande, lo rende piu' sgranato. Questo e' largo 350 pixel, e riempiendo mezza schermata veniva tirato tre volte oltre la sua misura. Qui sta dentro il riquadro, al centro, e non supera mai la propria dimensione: quello che si perde in ingombro si guadagna in nitidezza. */ .visuale__foto--disegno{display:grid;place-items:center;padding:var(--s6)} .visuale__foto--disegno img{ width:auto;height:auto; /* 347 e' la larghezza vera del file: e' il tetto oltre il quale si comincerebbe a ingrandire. */ max-width:min(100%,347px);max-height:100%; object-fit:contain; } /* A riposo si vede la prima. Il :not(:has(...)) tiene la regola vera fino a quando qualcosa e' davvero puntato o aperto. */ .principi-split:not(:has(.voce:hover)):not(:has(.voce[open])) .visuale__foto:first-child{opacity:1} .principi-split:has(.voce:nth-of-type(1):hover) .visuale__foto:nth-child(1), .principi-split:has(.voce:nth-of-type(1)[open]) .visuale__foto:nth-child(1), .principi-split:has(.voce:nth-of-type(2):hover) .visuale__foto:nth-child(2), .principi-split:has(.voce:nth-of-type(2)[open]) .visuale__foto:nth-child(2), .principi-split:has(.voce:nth-of-type(3):hover) .visuale__foto:nth-child(3), .principi-split:has(.voce:nth-of-type(3)[open]) .visuale__foto:nth-child(3){opacity:1} /* Dove :has() non c'e', le fotografie resterebbero tutte trasparenti e la meta' sinistra sarebbe un rettangolo vuoto: qui la prima si vede sempre. */ @supports not selector(:has(*)){ .visuale__foto:first-child{opacity:1} } /* Il blocco parte dall'alto invece di stare centrato: centrato lasciava 245px di lime sopra l'occhiello e il titolo scendeva a meta' della fascia. Lo spazio che avanza cade in fondo, e quando una voce si apre se lo prende. */ .principi-split__testo{ display:flex;flex-direction:column;justify-content:flex-start; padding:var(--s7) var(--pad); } /* Su schermo stretto lo schermo diviso non ha senso: le due meta' finirebbero una sopra l'altra e la fotografia sarebbe solo una fascia in piu' da scorrere. La sezione torna quella di prima, il solo testo sul lime. Le fotografie sono loading="lazy" e dentro un display:none non hanno riquadro, quindi da telefono non vengono nemmeno scaricate: tre richieste in meno dove la banda costa. */ /* La miniatura dentro la voce serve solo su telefono, dove la colonna delle fotografie non c'e'. Su schermo largo resta spenta: li' la fotografia grande a sinistra fa gia' il suo lavoro, e con un display:none non viene nemmeno scaricata. */ .voce__foto{display:none} /* La colonna singola con le miniature vale sotto i 900 e su ogni schermo touch, a qualunque larghezza. Lo schermo diviso funziona al passaggio del mouse — la fotografia a sinistra cambia mentre si scorre fra le voci — e su un tablet il mouse non c'e'. La larghezza non basta a riconoscerlo: un tablet in orizzontale e' largo quanto un portatile. Conta il puntatore: un dito che non sa "passare sopra" a niente. */ @media (max-width:900px), (hover:none) and (pointer:coarse){ .principi-split{grid-template-columns:1fr;min-height:auto} .visuale{display:none} .principi-split__testo{padding:var(--s8) var(--pad)} /* Aprendo una voce si vede il pezzo di cui parla. Le fotografie sono le stesse della colonna di sinistra, e non costano niente finche' nessuno apre: sono loading="lazy" dentro un details chiuso, che non ha riquadro, quindi il browser le scarica solo all'apertura. Una voce aperta, una fotografia scaricata. Il margine destro negativo annulla i 44 pixel che il corpo della voce tiene liberi per il piu': quel vuoto serve al testo, non all'immagine, che cosi' arriva al bordo della colonna. L'aspect-ratio riserva il riquadro prima che la fotografia arrivi: senza, la voce si aprirebbe corta e poi scatterebbe piu' alta a meta' animazione. */ .voce__foto{ display:block;margin:var(--s4) -44px 0 0; background:#171717;overflow:hidden; } .voce__foto img{ display:block;width:100%;aspect-ratio:4/3;object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(.94); } /* Il disegno prende lo stesso riquadro delle fotografie — stessa larghezza, stesso quattro a tre — ma dentro ci sta intero invece di essere tagliato: e' un disegno quotato, e tagliarlo vorrebbe dire buttare via le quote, che sono tutto quello che ha da dire. Quello che avanza ai lati e' bianco come la carta su cui e' disegnato, cosi' le due bande non si vedono e il riquadro si legge come un foglio invece che come una fotografia dentro una cornice. Niente filtro: il grigio e la luminosita' ingrigirebbero la carta. */ .voce__foto--disegno{background:#fff} .voce__foto--disegno img{ width:100%;height:auto;aspect-ratio:4/3;object-fit:contain; filter:none; } } @media (prefers-reduced-motion:reduce){ .visuale__foto{transition:none} } /* Su telefono e tablet la home non apre piu' sul lime ma su una fotografia scura, quindi la testata torna chiara. Questo blocco sta in fondo apposta: ha la stessa specificita' delle regole in inchiostro qui sopra, e a parita' vince l'ultima scritta. Spostarlo piu' in alto lo renderebbe inefficace. */ @media (max-width:900px), (orientation:portrait) and (max-width:1100px), (hover:none){ body.apre-sul-lime .testata:not(.is-staccata) .menu > a, body.apre-sul-lime .testata:not(.is-staccata) .telefono{color:var(--panna)} /* Il marchio in lime, e ci resta anche scorrendo: senza il :not(.is-staccata) la regola vale pure quando la testata prende il suo fondo scuro, dove il lime da' 12.94 di contrasto. Vale solo qui: sul desktop la testata sta sul campo lime e il lime sul lime sparirebbe. Del tasto non si parla piu': ora e' lime su tutte le pagine, in fondo al foglio, e non dipende piu' da quello su cui apre la home. */ body.apre-sul-lime .testata .marchio, /* La riga qui sotto sembra un doppione ma non lo e': la regola in inchiostro piu' in alto porta :not(.is-staccata), che vale una classe in piu'. Senza ripetere la stessa forma, in cima vincerebbe l'inchiostro e il marchio sparirebbe sulla fotografia scura — cioe' l'opposto di quello che serve. */ body.apre-sul-lime .testata:not(.is-staccata) .marchio{color:var(--lime)} /* Al passaggio la voce va in lime. Senza questa riga vinceva quella del campo lime — inchiostro al 58%, stessa specificita', scritta prima — e sulla fotografia scura la voce spariva. Sul tablet peggio: dopo il tocco il link resta "sotto il dito" finche' non si tocca altro, e tornando in cima alla pagina restava invisibile. */ body.apre-sul-lime .testata:not(.is-staccata) .menu > a:hover{color:var(--lime)} } /* Sul desktop la freccia dell'invito sta dentro un pallino scuro, come quella delle pillole: e' lo stesso segno, e li' c'e' lo spazio per farlo. Su telefono e tablet resta nuda, dove il pallino non aggiungerebbe niente. */ @media (min-width:901px) and (orientation:landscape) and (hover:hover), (min-width:1101px) and (hover:hover){ .invito i{ width:30px;height:30px;flex:0 0 auto; border-radius:999px; background:var(--inchiostro);color:var(--lime); display:grid;place-items:center; font-size:.85em; } .invito:hover i{transform:translate(2px,2px)} } /* --- menu a tutta pagina aperto ------------------------------------------- Il menu copre lo schermo di lime, e sopra ci sta la testata. Le regole in lime e in panna qui sopra hanno la meglio su quelle del menu, quindi vanno ribattute con una classe in piu' — .menu-aperto sul body — che le supera in specificita'. Senza, con il menu aperto restavano il marchio lime su lime, la croce lime su lime e le voci in panna: tre cose invisibili. */ @media (max-width:900px){ body.apre-sul-lime.menu-aperto .testata .marchio, body.apre-sul-lime.menu-aperto .testata .menu > a, body.apre-sul-lime.menu-aperto .testata:not(.is-staccata) .marchio, body.apre-sul-lime.menu-aperto .testata:not(.is-staccata) .menu > a{ color:var(--inchiostro); } body.apre-sul-lime.menu-aperto .testata .menu > a:hover{ color:color-mix(in srgb, var(--inchiostro) 58%, transparent); } } /* --- testata scorsa: i testi passano al lime ------------------------------ Quando la testata prende il suo fondo scuro, tutto quello che ci sta dentro va in lime. Sul fondo a rgba(11,11,11,.9) il lime da' circa 12.9, quindi si legge meglio del panna e per di piu' e' il colore dell'azienda. */ .testata.is-staccata .marchio, .testata.is-staccata .menu > a, .testata.is-staccata .telefono, .testata.is-staccata .nav-tasto{color:var(--lime)} .testata.is-staccata .menu > a:hover{color:var(--panna)} /* --- su telefono la freccia si appoggia alla fine del titolo -------------- */ @media (max-width:900px), (orientation:portrait) and (max-width:1100px), (hover:none){ /* Il blocco e' largo quanto la sua riga piu' lunga, cioe' quanto "chiavi per tiranti antisismici": e' quel bordo destro che la freccia deve raggiungere. Con la riga fuori flusso, il fondo del blocco resta quello del titolo, quindi la freccia si posa in fondo alla seconda riga. */ .hero__blocco{position:relative;width:max-content;max-width:100%} .hero__riga{ position:absolute;right:0;bottom:0;margin:0; display:block;width:auto; } /* La freccia si posa sulla seconda riga del titolo invece di stare a cavallo delle due: il riquadro e' alto quanto il segno, e i 5px di scarto pareggiano l'ingombro diverso fra il riquadro del segno e quello della riga di testo, che senza correzione lo faceva salire sulla fine di "antisismici". L'area toccabile la mette uno pseudo-elemento fuori dal flusso: allarga il bersaglio per il pollice senza spostare il segno. */ .invito{ position:relative;top:5px; color:var(--lime);min-width:0;min-height:0; padding:0 0 0 14px;line-height:1; } .invito i{font-size:1.55rem;line-height:1} .invito::before{content:"";position:absolute;inset:-14px -10px} } /* --- il + della testata e' sempre lime, su telefono, su tutte le pagine ---- Lo vuole verde il cliente, e si puo' fare senza guardie: in cima ogni pagina ha un fondo scuro — la fotografia sulla home, il nero sulle schede e sulla pagina azienda — e appena si scorre la testata prende comunque il suo fondo scuro. Il lime ci da' da 12.9 in su dappertutto. Vale solo su telefono, perche' sopra i 760 il tasto non c'e' proprio. Un peso solo — una classe — basta: le regole che prima tenevano il tasto panna o inchiostro sono state tolte una per una qui sopra invece di essere sovrascritte, cosi' il colore del tasto si legge in un punto solo. L'eccezione e' il menu aperto: li' il campo e' lime pieno e il segno, che intanto e' diventato una croce, torna in inchiostro. La seconda forma del selettore serve per quando il menu si apre dopo aver scorso: la testata si porta dietro .is-staccata, e quella regola a parita' di peso vincerebbe perche' scritta prima. */ @media (max-width:760px){ .nav-tasto{color:var(--lime)} .testata .nav-tasto[aria-expanded="true"], .testata.is-staccata .nav-tasto[aria-expanded="true"]{color:var(--inchiostro)} }