/* ========================================================================== RedShop Luxury — «FONDO BIANCO», versione bianco e nero (17/09/2026) Il fondo è bianco come nelle sue 56 foto. L'unico colore in pagina è quello della MERCE: la pagina non ne aggiunge nessuno. 🔴 Il rosso è stato tolto: il marchio del cliente è nero + argento cromato. Nessuna libreria, nessun CDN, nessun font caricato da Google. ========================================================================== */ /* ========================================================================== TIPOGRAFIA — rifatta il 18/09/2026 sui riferimenti VERI del marchio. 🔴 Il primo giro era sbagliato: lo stile era stato preso dallo STEMMA (serif ornato). Ma lo stemma è come il marchio si FIRMA, non come SCRIVE. Come scrive si vede nel logo G2 FIRENZE e nelle grafiche sui capi: · 00000058 G2FIRENZE — grottesco pesante, condensato il giusto, maiuscolo · 00000012 stampa sulla schiena — stesso grottesco, maiuscolo · 00000047 «ICON» — blocco nerissimo, geometrico · 00000059 targhetta SOLDIER — maiuscolo spaziato largo, bold Denominatore comune: MAIUSCOLO · GROTTESCO · PESO ALTO · ZERO GRAZIE. 🔴 SCELTA DEFINITIVA (Domenico, 18/09/2026): INTER TIGHT 800 + INTER. Fra le cinque prove è quella che tiene il registro del marchio — maiuscolo, grottesco, peso alto — senza gridare: i titoli si fanno da parte e a parlare restano le foto dei capi. Una famiglia sola, due larghezze. I font sono scaricati e sottoinsiemati da noi (scarica-font.py), mai chiesti a Google in pagina: il subset «latin» di Google non ha gli accenti italiani. ========================================================================== */ @font-face { font-family: 'Inter Tight'; src: url('../font/inter-tight-800.woff2') format('woff2'); font-weight: 800; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../font/inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../font/inter-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../font/inter-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } /* ========================================================================== DUE TEMI, COMMUTABILI — scuro di partenza, chiaro a richiesta. L'attributo sta su : data-tema="dark" | "light". 🔴 LA REGOLA CHE TIENE IN PIEDI IL TEMA SCURO: le 47 foto del catalogo sono packshot su fondo CHIARO — 36 su 47 hanno la cornice sopra 225 di luminosità, solo 2 sono scure. Su pagina nera diventerebbero rettangoli abbaglianti, ed è per questo che la versione 1 nera fu scartata. Le foto NON si toccano (veto di Domenico), quindi si cambia quello che sta DIETRO: il prodotto resta su una CARTA CHIARA (--carta) anche nel tema scuro. È come lavorano le boutique in dark mode. ========================================================================== */ :root { /* — invarianti: non dipendono dal tema — */ --nero: #000000; --bianco: #FFFFFF; --wa: #25D366; /* il verde del servizio, SOLO sul pulsante WhatsApp */ --wa-ink: #0F0F10; /* 9,66:1 sul verde. Il bianco farebbe 1,98:1 */ /* ══ LA SCALA DELLE SPAZIATURE ══════════════════════════════════════ Nove gradini. Da qui in poi non si scrive più un margine a mano. Il gradino dice la PARENTELA: a --s3 due cose sono la stessa cosa, a --s6 sono due cose diverse. Se serve un valore che non c'è nella scala, il problema non è la scala: sono le due cose che non stanno insieme. (Prima lo stesso stacco era scritto con CINQUE valori diversi dentro l'HTML: .7rem .9rem 1rem 1.2rem 1.4rem.) */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 104px; /* una curva sola, in tutto lo store */ --curva: cubic-bezier(.22,.61,.36,1); /* il cromo del logo: materia, non colore piatto */ --cromo: linear-gradient(90deg, #363636 0%, #9D9D9D 14%, #E1E1E1 30%, #BDBDBF 44%, #777777 58%, #EEEEEE 74%, #9D9D9D 88%, #474747 100%); /* ══ IL CROMO, SEPARATO PER SUPERFICIE ══════════════════════════════ 🔴 CORREZIONE DI UN DIFETTO CHE ERA GIÀ IN PAGINA, non un'aggiunta. Nel tema chiaro --cromo era identico a quello della base, e QUATTRO dei suoi sette stop non arrivavano a 3:1 sul bianco (#E1E1E1 fa 1,31:1, #EEEEEE fa 1,16:1). Il trattino dell'occhiello — che sta in undici sezioni — e il filo sotto la testata sembravano TRATTEGGIATI. Nel tema scuro il problema era già stato visto e risolto; al chiaro no. Il cromo si legge dall'ALTERNANZA scuro-chiaro-scuro, non dai valori assoluti: si abbassa tutta la curva senza perdere la materia. Minimo misurato: 3,24:1 sulla superficie più sfavorevole (#F2F2F2). */ --cromo-su-chiaro: linear-gradient(90deg, #3A3A3C 0%, #6A6A6C 14%, #828286 30%, #74747A 44%, #46464A 58%, #86868A 74%, #6A6A6C 88%, #54545A 100%); --cromo-su-scuro: linear-gradient(90deg, #6E6E70 0%, #B6B6B8 14%, #F0F0F0 30%, #D2D2D4 44%, #8E8E90 58%, #FAFAFA 74%, #B6B6B8 88%, #77777A 100%); --display: 'Inter Tight', ui-sans-serif, system-ui, sans-serif; --testo: 'Inter', ui-sans-serif, system-ui, sans-serif; --gutter: 16px; --max: 1440px; } @media (min-width: 720px) { :root { --gutter: 28px; } } @media (min-width: 1100px) { :root { --gutter: 44px; } } /* --cromo-segno è il token che si USA. --cromo resta dov'è per non rompere niente, ma OGNI segno nuovo passa da qui: così un filo di cromo è sempre leggibile sulla superficie su cui sta, qualunque tema sia attivo. */ html[data-tema="light"] { --cromo-segno: var(--cromo-su-chiaro); } html[data-tema="dark"] { --cromo-segno: var(--cromo-su-scuro); } .su-nero { --cromo-segno: var(--cromo-su-scuro); } /* ------------------------------------------------------- TEMA CHIARO ----- */ html[data-tema="light"] { color-scheme: light; --fondo: #FFFFFF; --fondo-alt: #F2F2F2; /* fasce alterne */ --inchiostro: #0F0F10; /* 19,16:1 sul fondo — AAA */ --grigio: #555556; /* 7,45:1 — AAA */ --grigio-tenue: #6B6B6C; /* 5,32:1 — AA */ --scheda: #F6F6F6; /* superficie generica */ --carta: #F6F6F6; /* la carta sotto il prodotto */ --linea: #DCDCDC; /* separatori decorativi */ --linea-forte: #8A8A8A; /* bordo dei CONTROLLI — 3,45:1, WCAG 1.4.11 */ --accento: #0F0F10; --accento-ink: #FFFFFF; /* testo SOPRA l'accento */ --focus: #0F0F10; --cromo: linear-gradient(90deg, #363636 0%, #9D9D9D 14%, #E1E1E1 30%, #BDBDBF 44%, #777777 58%, #EEEEEE 74%, #9D9D9D 88%, #474747 100%); } /* -------------------------------------------------------- TEMA SCURO ----- Ogni valore è MISURATO, non scelto a occhio. I rapporti a fianco sono quelli veri contro il fondo. */ html[data-tema="dark"] { color-scheme: dark; --fondo: #000000; /* nero vero: è il fondo del suo logo */ --fondo-alt: #131316; /* fasce alterne, nastro, piede — ΔL* 6,4 dal fondo: lo stesso stacco che #F2F2F2 dà sul bianco */ --inchiostro: #EDEDEF; /* 17,96:1 — 🔴 NON #FFFFFF: il bianco pieno su nero, sui titoli grandi, sfrangia */ --grigio: #A9A9AC; /* 8,96:1 — AAA */ --grigio-tenue: #8A8A8E; /* 6,11:1 — AA */ --scheda: #131316; --carta: #FAFAFA; /* 🔴 CHIARA ANCHE NEL DARK — ci sta sopra il prodotto, fotografato su bianco. Misurato: con #FAFAFA solo 15 foto su 45 scartano di oltre 2 L*, con #F6F6F6 ne scartano 35 */ --linea: #3A3A3F; --linea-forte: #707076; /* 4,27:1 — WCAG 1.4.11 */ --accento: #EDEDEF; --accento-ink: #000000; /* testo SOPRA l'accento: si inverte */ --focus: #FFFFFF; /* 21:1 — qui il massimo serve davvero */ /* il cromo RIALZATO: sul nero gli stop scuri erano ciechi (#363636 fa 1,74:1) e il filo sotto la testata sembrava tratteggiato. Stessa curva, pavimento portato a 4,13:1. */ --cromo: linear-gradient(90deg, #6E6E70 0%, #B6B6B8 14%, #F0F0F0 30%, #D2D2D4 44%, #8E8E90 58%, #FAFAFA 74%, #B6B6B8 88%, #77777A 100%); } /* Le fasce sempre nere (nastro dei marchi e piede). Nel tema scuro sono già il fondo, quindi questa classe non fa quasi niente: resta perché nel tema chiaro è lei a creare lo stacco. */ .su-nero { background: var(--nero); color: #F2F2F3; --fondo: #000000; --inchiostro: #F2F2F3; --grigio: #B4B4B6; --grigio-tenue: #8E8E90; --linea: #2D2D2D; --linea-forte: #777777; --accento: #F2F2F3; --accento-ink: #000000; --focus: #F2F2F3; --scheda: #141414; } /* ══════════════════════════ IL BLOCCO INVERTITO ═══════════════════════════ Il motore di .nota--forte. Ribalta TUTTI i token in un colpo solo, come fa già .su-nero qui sopra — ed è per questo che sta qui accanto e non in coda. Senza questo, dentro un riquadro invertito il testo secondario e i fili resterebbero del colore del tema ESTERNO e sparirebbero: grigio chiaro su fondo chiaro. Non è un dettaglio estetico, è il blocco che deve essere sempre leggibile. ⚠️ Niente color-mix() qui dentro: Safari sotto la 16.2 non ce l'ha, e un colore che cade su un blocco di massima enfasi è un blocco illeggibile. ======================================================================== */ html[data-tema="light"] .nota--forte { --fondo: #0F0F10; --inchiostro: #FFFFFF; /* 19,16:1 ✅ AAA */ --grigio: #B4B4B6; /* 9,26:1 ✅ AAA */ --grigio-tenue: #8E8E90; /* 5,86:1 ✅ AAA */ --linea: #2D2D2D; --linea-forte: #8A8A8E; /* 5,86:1 ✅ */ --accento: #FFFFFF; --accento-ink: #0F0F10; --focus: #FFFFFF; --cromo-segno: var(--cromo-su-scuro); } html[data-tema="dark"] .nota--forte { --fondo: #EDEDEF; --inchiostro: #000000; /* 17,96:1 ✅ AAA */ --grigio: #55555A; /* 6,34:1 ✅ AAA */ --grigio-tenue: #6B6B70; /* 4,53:1 ✅ AA */ --linea: #C9C9CD; --linea-forte: #6B6B70; /* 4,53:1 ✅ */ --accento: #000000; --accento-ink: #EDEDEF; --focus: #000000; --cromo-segno: var(--cromo-su-chiaro); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--fondo); color: var(--inchiostro); font-family: var(--testo); font-size: clamp(15px, .9vw + 12px, 17px); line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, video { display: block; max-width: 100%; } a { color: inherit; } /* MAIUSCOLO sempre: è così che il marchio scrive, su ogni capo e su ogni etichetta. Il contrasto lo fa il PESO e la CASSA, non il mescolare generi. */ h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.05; letter-spacing: -.022em; text-transform: uppercase; margin: 0; } /* 🔴 I minimi dei clamp sono tarati su 375px, NON sul desktop: con i minimi da desktop l'H1 andava a 4-5 righe su telefono. Misurato. */ h1 { font-size: clamp(1.5rem, 4.6vw, 4.1rem); } h2 { font-size: clamp(1.45rem, 3.1vw, 2.5rem); } h3 { font-size: clamp(.95rem, 1.2vw, 1.15rem); } /* il marchio in testata, gli occhielli e il nastro seguono il TITOLO, non il testo: sono lettering, non prosa */ .marchio-testo, .capo-occhiello, .nastro-voce, .invito-testa { font-family: var(--display); } p { margin: 0 0 .75em; max-width: 60ch; } .contenitore { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } section { padding-block: clamp(3rem, 6.5vw, 5.5rem); position: relative; } .nebbia { background: var(--fondo-alt); } /* il trattino dell'occhiello è l'unico punto in cui il cromo del logo entra come materia nelle fasce chiare */ .occhiello { font-family: var(--testo); font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--grigio); margin: 0 0 .9rem; display: flex; align-items: center; gap: .65rem; } .occhiello::before { content: ''; width: 24px; height: 3px; flex: none; background: var(--cromo-segno); } /* --------------------------------------------------------- testata ------ */ .testata { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--fondo) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea); } /* 🔴 Su una testata STICKY la sfocatura si rifà a OGNI FOTOGRAMMA DI SCROLL, su tutta la larghezza dello schermo: su un Android di fascia media è la voce più cara della pagina. E il traffico di questo negozio arriva da Instagram, cioè dal telefono. Regola THK: se un effetto fa perdere un fotogramma, l'effetto si toglie. */ @media (max-width: 719px) { .testata { backdrop-filter: none; background: var(--fondo); } } /* il filo sotto la testata: cromo fisso. Non scorre — non è più la firma */ .testata::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--cromo-segno); } /* 🔴 «.testata > div» NON si usa piu: colpiva OGNI div figlio della testata, e da quando c'e il menu da telefono quel menu e un figlio diretto. Si prendeva `height: 64px` e `display: flex`, e con un'altezza esplicita `inset: 0` non puo vincere: il pannello si apriva alto 176px — 64 di altezza ereditata + 32 di padding sopra + 144 sotto — cioe una striscia in cima con dentro quattro voci, e il resto dei link spinti fuori schermo (misurato: il primo link finiva a -437px). E questo il difetto che Domenico ha descritto come «clicco sulla tendina e sopra esce a meta». Adesso la regola colpisce SOLO la riga della testata, che e un .contenitore. */ .testata > .contenitore { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 64px; } .testata .marchio { display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-size: 1.55rem; letter-spacing: .02em; text-decoration: none; line-height: 1; min-width: 0; } /* lo stemma è ARGENTO: su bianco sparirebbe. Va sulla sua piastrella nera, che è poi come il cliente l'ha sempre usato. */ .marchio-stemma { flex: none; height: 34px; width: auto; } /* la piastrella nera serve SOLO nel tema chiaro: lo stemma è argento e su bianco sparirebbe. Sul nero il fondo ce l'ha già. */ html[data-tema="light"] .marchio-stemma { background: var(--nero); padding: 5px 7px; } .marchio-testo { white-space: nowrap; } .marchio-testo span { color: var(--grigio); } /* da telefono la scritta si STRINGE, non sparisce: lo stemma da solo non dice come si chiama il negozio, e il nome è la prima cosa che serve. */ /* 🔴 A 375px fra la fine dello stemma e il pulsante WhatsApp ci sono 137px. «REDSHOP LUXURY» in Inter Tight 800 a 1,2rem ne vorrebbe 190 e finirebbe sotto il pulsante. Il massimo misurato è .94rem: qui sta a .90. */ @media (max-width: 559px) { .testata .marchio { font-size: .90rem; letter-spacing: -.01em; gap: .45rem; } .marchio-stemma { height: 30px; } html[data-tema="light"] .marchio-stemma { padding: 4px 6px; } } .testata .marchio span { color: var(--grigio); } .menu { display: none; gap: 1.5rem; font-size: .76rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; } .menu a { position: relative; text-decoration: none; color: var(--grigio); padding-block: .35rem; } .menu a:hover, .menu a:focus-visible { color: var(--inchiostro); } /* i link del menu prendono il gesto del sistema: il filo che si disegna */ .menu a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cromo-segno); transform: scaleX(0); transform-origin: left center; transition: transform .28s var(--curva); } @media (hover: hover) { .menu a:hover::after, .menu a:focus-visible::after { transform: scaleX(1); } } @media (min-width: 920px) { .menu { display: flex; } } /* --------------------------------------------------------- bottoni ------ */ /* 🔴 Via la transizione `background .18s`: era l'UNICA animazione di PAINT ripetuta della pagina. La sostituisce un inchiostro che entra a scaleX, cioè sul compositore. Stesso risultato visivo, costo diverso. E col dito l'hover NON ESISTE: il riscontro è il PRESS. */ .btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--testo); font-size: .85rem; font-weight: 700; letter-spacing: .03em; padding: .8rem 1.3rem; border: 0; cursor: pointer; text-decoration: none; background: var(--accento); color: var(--accento-ink); position: relative; overflow: hidden; isolation: isolate; transition: transform .18s var(--curva), color .18s linear; } .btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--btn-ink, var(--grigio)); transform: scaleX(0); transform-origin: left center; transition: transform .3s var(--curva); } .btn--vuoto { background: transparent; color: var(--inchiostro); border: 1.5px solid var(--inchiostro); --btn-ink: var(--accento); } @media (hover: hover) { .btn:hover, .btn:focus-visible { transform: translateY(-2px); } .btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); } .btn--vuoto:hover, .btn--vuoto:focus-visible { color: var(--accento-ink); } } .btn:active { transform: scale(.975); } .btn .i, .btn svg { width: 16px; height: 16px; flex: none; } /* ======================================================= 1 · APERTURA ==== Scheletro 5 · LA GRIGLIA EDITORIALE. Nessun hero a tutta pagina. ======================================================================== */ .apertura { padding-block: clamp(1.6rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3rem); } .apertura h1 { max-width: 22ch; } /* era 15ch: a 390px il titolo andava su 5 righe */ @media (min-width: 720px) { .apertura h1 { max-width: 15ch; } } /* l'enfasi dell'H1 ora è una .cifra vera — sono due NUMERI, e il sistema dice che i numeri si evidenziano. Il box-shadow statico che c'era prima era un'enfasi fuori vocabolario: esisteva solo qui. */ .apertura h1 .cifra { font-size: inherit; line-height: inherit; } .apertura .sotto { font-size: clamp(1rem, 1.15vw, 1.15rem); color: var(--grigio); margin: 1.1rem 0 1.5rem; max-width: 46ch; } .apertura .sotto strong { color: var(--inchiostro); font-weight: 700; } .azioni { display: flex; flex-wrap: wrap; gap: .6rem; } /* 🔴 «end» allineava il testo in basso: accanto a un video alto 668px il blocco scritto restava appiccicato al fondo. Centrato, i due pesi si guardano. (Serviva a reggere il trittico, che non esiste piu.) */ .apertura-griglia { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: center; } @media (min-width: 900px) { .apertura-griglia { grid-template-columns: 1.1fr .9fr; gap: 34px; } } /* le tre foto d'apertura, ognuna con le SUE proporzioni */ .trittico { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; align-items: end; } .trittico figure { margin: 0; position: relative; } /* le tre foto entrano SFALSATE di 60ms: entrando insieme sembravano un blocco solo che compare, non tre fotografie che si posano. */ @media (prefers-reduced-motion: no-preference) { .trittico figure { animation: sali .7s var(--curva) both; } .trittico figure:nth-child(2) { animation-delay: .06s; } .trittico figure:nth-child(3) { animation-delay: .12s; } } .trittico img { width: 100%; height: auto; background: var(--carta); } /* ============================================ 2 · NASTRO DEI MARCHI ===== Su fondo nero: è qui che il nero del marchio entra come materia. 🔴 Non si ferma MAI, nemmeno col mouse sopra (regola THK). ======================================================================== */ .nastro { padding-block: 1.1rem; overflow: hidden; } .nastro-pista { display: flex; width: max-content; animation: scorri 54s linear infinite; /* era 46s: i conteggi allungano ogni voce di ~35px, cioè la pista di ~350px. 🔴 Nessuna pausa all'hover: non si ferma mai. */ } .nastro-gruppo { display: flex; align-items: center; gap: clamp(2rem, 4.5vw, 4rem); padding-right: clamp(2rem, 4.5vw, 4rem); } .nastro-voce { font-family: var(--display); font-size: clamp(1.3rem, 2.6vw, 2.1rem); color: #F2F2F3; /* 🐛 qui c'era un token «argento chiaro» che non esisteva in nessuna delle 670 righe del foglio: la dichiarazione cadeva, e il colore arrivava PER CASO dall'ereditato di .su-nero. Funzionava per sbaglio. */ white-space: nowrap; letter-spacing: .02em; display: inline-flex; align-items: baseline; gap: .42rem; } /* quanti articoli per marchio: un dato VERO, contato alla build */ .nastro-n { font-family: var(--testo); font-size: .42em; font-weight: 600; color: #8E8E90; font-variant-numeric: tabular-nums; } @keyframes scorri { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } /* ========================================================= 3 · FILTRI === Due righe: CATEGORIA e MARCHIO, combinabili fra loro. Scorrono col dito (il traffico arriva da Instagram, quindi dal telefono). ======================================================================== */ /* IL PANNELLO DI CONTROLLO — erano due righe di pastiglie identiche fra loro: sembravano i tag di un blog, non si capiva che si combinano, e da telefono quelle fuori schermo si tagliavano di netto senza dire che c'era dell'altro. Adesso è un pannello vero, col suo filetto di cromo in cima. */ .filtri { position: relative; margin: var(--s5) 0; padding: var(--s4); background: var(--scheda); box-shadow: inset 0 0 0 1px var(--linea); display: grid; gap: var(--s3); } .filtri::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cromo-segno); } @media (min-width: 720px) { .filtri { padding: var(--s5); } } /* la frase che si riscrive da sola mentre filtri: è lei a dire ad alta voce cosa sta succedendo, invece di lasciarlo dedurre dalle pastiglie accese */ .filtri-frase { margin: 0; max-width: none; font-family: var(--display); font-size: clamp(1rem, 1.9vw, 1.4rem); text-transform: uppercase; letter-spacing: -.01em; line-height: 1.2; } .filtri-frase .n { font-variant-numeric: tabular-nums; } .filtri-frase .v { color: var(--grigio); } .filtro-riga { display: flex; align-items: center; gap: .4rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: .15rem; /* la riga SFUMA sul bordo destro invece di tagliarsi: così si capisce che c'è dell'altro da scorrere, senza aggiungere una freccia */ -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); } /* la riga MARCHIO è SUBORDINATA alla riga CATEGORIA: il filo a L è il segno da mappa che rende visibile il «si combinano», invece di scriverlo. 🔴 Sta sull'involucro, non sulla riga: la riga scorre col dito e ha overflow-x:auto, che ritaglierebbe il filo e se lo porterebbe via. */ .filtro-sub { position: relative; padding-left: 16px; } .filtro-sub::before { content: ''; position: absolute; left: 4px; top: calc(var(--s3) * -1); bottom: 50%; width: 1px; background: var(--linea-forte); } .filtro-sub::after { content: ''; position: absolute; left: 4px; bottom: calc(50% - 1px); width: 8px; height: 1px; background: var(--linea-forte); } /* la pastiglia attiva prende il filo di cromo: è il segno della selezione, lo stesso gesto di tutto il resto della pagina */ .filtro { position: relative; } .filtro[aria-pressed="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--cromo-segno); } .filtro-riga::-webkit-scrollbar { display: none; } .filtro-eti { flex: none; font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--grigio); width: 5.4rem; } @media (max-width: 559px) { .filtro-eti { width: 4.2rem; } } .filtro { flex: none; scroll-snap-align: start; font-family: var(--testo); font-size: .78rem; font-weight: 600; letter-spacing: .04em; min-height: 44px; padding: .45rem .9rem; cursor: pointer; /* 44px: bersaglio per il dito */ border: 1px solid var(--linea-forte); background: transparent; color: var(--inchiostro); white-space: nowrap; transition: border-color .18s, color .18s, background .18s; } .filtro:hover { border-color: var(--inchiostro); } .filtro[aria-pressed="true"] { background: var(--accento); border-color: var(--accento); color: var(--accento-ink); } .filtro[disabled] { opacity: .35; cursor: not-allowed; } .filtro .n { opacity: .6; margin-left: .35rem; font-weight: 400; font-variant-numeric: tabular-nums; } /* la parentesi e il pulsante azzera sulla stessa riga: il conteggio che stava qui lo dice già la frase viva sopra, e dirlo due volte è disordine */ .filtri-stato { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); font-size: .8rem; color: var(--grigio); } .filtri-stato .par { margin: 0; flex: 1 1 auto; min-width: 0; } .filtro-azzera { font: inherit; font-size: .78rem; color: var(--inchiostro); background: none; border: 0; cursor: pointer; padding: .3rem 0; text-decoration: underline; text-underline-offset: 3px; } .filtro-azzera[hidden] { display: none; } /* ====================================================== 4 · IL CATALOGO == Griglia da e-commerce: 2 colonne su telefono, 3 da 680px, 4 da 1080px. Il riquadro 4:5 fisso dà a tutte le tessere la STESSA ALTEZZA: i prezzi cadono sulla stessa linea. È lui a tenere il CLS a zero, perché l'altezza è riservata prima che la foto arrivi. 🔴 Le foto NON si ritagliano: object-fit:contain. 4:5 è il rapporto più presente nel materiale (9 foto su 47 esatto) e quello che spreca meno. ======================================================================== */ .catalogo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* minmax(0,…): 1fr ha min-width:auto e una foto larga allargherebbe la colonna */ gap: 26px 10px; margin: 0; padding: 0; list-style: none; } @media (min-width: 680px) { .catalogo { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 30px 14px; } } @media (min-width: 1080px) { .catalogo { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 34px 16px; } } /* 1 o 2 soli risultati: la griglia si stringe, invece di lasciare una tessera sperduta dentro una riga da quattro */ .catalogo[data-risultati="1"], .catalogo[data-risultati="2"] { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 560px; } .capo { display: grid; position: relative; } .capo.via { display: none; } /* esce dalla griglia: nessun buco */ .capo-bottone { display: grid; grid-template-rows: auto auto; align-content: start; width: 100%; height: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: zoom-in; } .capo-foto { display: block; /* 🔴 è uno : su un inline aspect-ratio non fa niente */ position: relative; aspect-ratio: 4 / 5; padding: 10px; overflow: hidden; background: var(--carta); box-shadow: inset 0 0 0 1px var(--linea); transition: transform .18s var(--curva); } /* il filo di cromo che si disegna sotto la foto: la firma, applicata alle 47 tessere. La STRUTTURA della tessera non si tocca — prezzi allineati per costruzione, CLS 0 — qui entra solo il gesto. */ .capo-foto::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3; background: var(--cromo-segno); transform: scaleX(0); transform-origin: left center; transition: transform .4s var(--curva); pointer-events: none; } @media (hover: hover) { .capo-bottone:hover .capo-foto::after, .capo-bottone:focus-visible .capo-foto::after { transform: scaleX(1); } } /* col dito l'hover non esiste: il riscontro è il PRESS */ .capo-bottone:active .capo-foto { transform: scale(.985); } .capo-foto img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; transition: transform .35s ease; } @media (hover: hover) { .capo-bottone:hover .capo-foto img, .capo-bottone:focus-visible .capo-foto img { transform: scale(1.03); } } /* la didascalia: occhiello 1 riga · nome 2 righe riservate · prezzo 1 riga. Altezza identica in tutta la griglia = prezzi allineati. */ .capo-dati { padding: .6rem .1rem .2rem; display: grid; gap: .1rem; align-content: start; } .capo-occhiello { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grigio); } .capo-nome { font-size: .88rem; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .capo-prezzo { font-size: .88rem; font-weight: 700; color: var(--inchiostro); font-variant-numeric: tabular-nums; } .capo-prezzo--chiedi { font-weight: 400; color: var(--grigio-tenue); } /* la tessera-invito: chiude la riga quando avanzerebbe un capo solo */ .invito { display: grid; } .invito[hidden] { display: none; } .invito-box { display: grid; align-content: center; justify-items: center; gap: .55rem; height: 100%; padding: 1.4rem 1rem; border: 1px solid var(--inchiostro); text-align: center; text-decoration: none; color: var(--inchiostro); } .invito-testa { font-family: var(--display); font-size: 1.3rem; line-height: 1.05; } .invito-testo { font-size: .8rem; color: var(--grigio); max-width: 24ch; } .invito-btn { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .catalogo-vuoto { padding: 3rem 0; text-align: center; color: var(--grigio); } .catalogo-vuoto[hidden] { display: none; } /* ============================================ il capo aperto a schermo === Serve a vedere la foto INTERA e grande: niente ritaglio, mai. ======================================================================== */ .visore[hidden] { display: none; } .visore { position: fixed; inset: 0; z-index: 90; background: var(--fondo); display: grid; grid-template-rows: auto 1fr auto; padding: 12px; } @media (min-width: 880px) { .visore { padding: 18px 28px; } } .visore-testa { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .visore-chiudi { border: 0; background: none; cursor: pointer; font: inherit; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grigio); padding: .5rem; } .visore-chiudi:hover { color: var(--inchiostro); } /* 🔴 `grid-template-rows: minmax(0,1fr)` è il pezzo che mancava: senza, la riga interna si dimensionava sul CONTENUTO, quindi il `max-height:100%` della foto girava a vuoto e l'immagine sfondava finendo SOTTO il testo (misurati 360px di debordo su una foto verticale). Con la riga limitata, la percentuale ha finalmente un'altezza vera contro cui risolversi. */ .visore-corpo { display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; min-height: 0; padding-block: 10px; } .visore-corpo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; /* la foto intera, mai tagliata */ background: var(--carta); } .visore-piede { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding-top: .5rem; } .visore-piede .titolo { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1; } .visore-piede .sotto { font-size: .8rem; color: var(--grigio); } .visore-prezzo { font-size: .9rem; font-weight: 700; color: var(--inchiostro); font-variant-numeric: tabular-nums; } /* ------------------------------------------------ blocchi di contenuto -- */ .due { display: grid; gap: clamp(1.4rem, 3.5vw, 3rem); grid-template-columns: 1fr; align-items: start; } @media (min-width: 880px) { .due { grid-template-columns: 1fr 1fr; } } /* ═══════════════════════ 7 · LA MAPPA ════════════════════════════════════ È qui che la «logica da mappa» diventa letterale: tre blocchi collegati da frecce. Impilati col dito (frecce in giù), in orizzontale da 780px (frecce a destra). Sostituisce .passi/.passo, che erano solo un numero grosso e una riga di testo: mancava il titolo del passo, e mancava la freccia — cioè proprio quello che trasforma uno schema in una mappa. ⛔ Una sola in tutto il sito: numerare ciò che non è una sequenza è disordine travestito da ordine. ======================================================================== */ .mappa { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s7); counter-reset: m; } @media (min-width: 780px) { .mappa { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s6); } } .mappa-passo { position: relative; counter-increment: m; padding-top: var(--s5); border-top: 3px solid var(--inchiostro); transition: transform .22s var(--curva); } @media (hover: hover) { .mappa-passo:hover { transform: translateY(-3px); } } /* il numero è l'UNICO elemento invertito della mappa: il riquadro forte di questa sezione è già speso altrove, quindi qui l'inversione sta solo sul numero, che è il perno dello schema. */ .mappa-passo::before { content: counter(m, decimal-leading-zero); position: absolute; top: 0; left: 0; transform: translateY(-50%); display: grid; place-items: center; min-width: 34px; height: 34px; padding-inline: .4rem; background: var(--accento); color: var(--accento-ink); /* 19,16 · 17,96 */ font-family: var(--display); font-size: 1.05rem; line-height: 1; } .mappa-titolo { font-size: 1rem; letter-spacing: -.01em; margin: var(--s4) 0 var(--s2); } .mappa-passo p { margin: 0; color: var(--grigio); font-size: .92rem; } /* la freccia: UN solo clip-path poligonale, ruotato. Zero immagini, zero SVG. ⚠️ il calc dipende dal gap: se si cambia il gap si cambia anche il calc, o le frecce finiscono sopra il testo del passo successivo. */ .mappa-passo:not(:last-child)::after { content: ''; position: absolute; left: 50%; bottom: calc(var(--s7) / -2 - 9px); width: 18px; height: 34px; background: var(--linea-forte); clip-path: polygon(45% 0, 55% 0, 55% 60%, 100% 60%, 50% 100%, 0 60%, 45% 60%); transform: translateX(-50%); transform-origin: 50% 0; pointer-events: none; } @media (min-width: 780px) { .mappa-passo:not(:last-child)::after { left: auto; bottom: auto; right: calc(var(--s6) / -2 - 17px); top: 2.7rem; width: 34px; height: 18px; clip-path: polygon(0 45%, 60% 45%, 60% 0, 100% 50%, 60% 100%, 60% 55%, 0 55%); transform: none; transform-origin: 0 50%; } } /* i tre passi entrano IN SEQUENZA, non insieme: è una mappa, si legge in ordine. (Lo scaglionamento sulle 47 tessere invece è stato scartato: a 2 e a 3 colonne entrerebbe sfalsato a caso e leggerebbe come un difetto.) */ .mappa-passo:nth-child(2) { --riv-da: 11%; } .mappa-passo:nth-child(3) { --riv-da: 16%; } @media (max-width: 559px) { .mappa-passo::before { min-width: 30px; height: 30px; font-size: .95rem; } } /* ═══════════════════════ 9 · IL TRAGITTO ═════════════════════════════════ Lo stesso percorso della mappa, scala minima: nessun riquadro, solo le tappe e la stessa punta di freccia. Terza scala dello stesso segno, così #spedizioni non somiglia a #ordinare pur parlando la stessa lingua. ======================================================================== */ .tragitto { list-style: none; margin: var(--s5) 0 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); } .tragitto li { display: flex; align-items: center; gap: var(--s3); font-family: var(--display); font-size: clamp(1rem, 1.7vw, 1.25rem); text-transform: uppercase; letter-spacing: -.01em; line-height: 1.1; } .tragitto li:not(:last-child)::after { content: ''; flex: none; width: 16px; height: 30px; background: var(--linea-forte); clip-path: polygon(45% 0, 55% 0, 55% 60%, 100% 60%, 50% 100%, 0 60%, 45% 60%); } @media (min-width: 620px) { .tragitto { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s3) 0; } .tragitto li:not(:last-child)::after { width: 34px; height: 16px; margin-inline: var(--s4); clip-path: polygon(0 45%, 60% 45%, 60% 0, 100% 50%, 60% 100%, 60% 55%, 0 55%); } } .insegne { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0,1fr)); max-width: 640px; } .insegna { border: 1px solid var(--linea); display: flex; align-items: center; justify-content: center; padding: .7rem; aspect-ratio: 3/2; overflow: hidden; min-width: 0; } .insegna img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } /* 🔴 CHIUDE UNA VIOLAZIONE THK: il video è 576×1024, e stando DA SOLO nella sua riga a 390px di larghezza veniva alto 636px — «mai un'immagine o un video gigante sotto l'altro, soprattutto da mobile». 🔴 E la forma è TRE IN FILA per una ragione misurata, non estetica: video e foto hanno LO STESSO RAPPORTO (0,56 · 0,57 · 0,5625 — tutti verticali 9:16). Il primo tentativo metteva il video in una colonna e le due foto impilate nell'altra: con proporzioni identiche, una colonna veniva alta la metà dell'altra e restavano 313px di buco nero. Misurato dal vivo. A parità di rapporto l'unica impaginazione a filo è la fila. In più chiude «mai un elemento solo in una riga». ⚠️ Le due sono figlie DIRETTE di .negozio-media: niente display:contents, che si romperebbe in silenzio se un giorno le foto diventassero tre. */ .negozio-media { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; align-items: start; } .negozio-media img { width: 100%; height: auto; background: var(--carta); } /* la tabella degli orari dentro il riquadro forte: eredita i token invertiti */ .nota--forte .orari { margin: 0; max-width: none; } .nota--forte .orari th, .nota--forte .orari td { border-bottom-color: var(--linea); } .nota--forte .orari tr:last-child th, .nota--forte .orari tr:last-child td { border-bottom: 0; } .nota--forte .orari-chiuso { margin: var(--s4) 0 0; color: var(--inchiostro); font-weight: 700; font-family: var(--testo); font-size: .9rem; } .negozio-film { position: relative; background: var(--scheda); } .negozio-film video { width: 100%; height: auto; display: block; } /* 🔴 Il pulsante audio sta SOTTO la fila, non sopra il video: da quando i media sono tre in fila, il video è largo ~112px su un telefono, e la scritta obbligatoria «Clicca per attivare l'audio» ci andava a capo tre volte sbordando dal riquadro. La scritta non si accorcia — è la regola THK — quindi si sposta il pulsante. */ .audio-toggle { margin-top: 10px; display: inline-flex; align-items: center; gap: .45rem; background: var(--scheda); color: var(--inchiostro); border: 1px solid var(--linea-forte); padding: .5rem .85rem; cursor: pointer; font-family: var(--testo); font-size: .7rem; font-weight: 600; letter-spacing: .04em; min-height: 38px; transition: background .18s var(--curva), color .18s var(--curva); } @media (hover: hover) { .audio-toggle:hover, .audio-toggle:focus-visible { background: var(--accento); color: var(--accento-ink); } } .audio-toggle svg { width: 13px; height: 13px; } .indirizzo { font-size: 1.02rem; line-height: 1.75; } .indirizzo strong { font-weight: 700; } /* senza il rosso il link sparirebbe nel testo: la sottolineatura non è decorazione, è l'unico segnale rimasto (WCAG 1.4.1) */ .indirizzo a { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 3px; } /* domande frequenti */ /* ══════════════════ 12 · LE OTTO DOMANDE, NUMERATE ═══════════════════════ Erano righe separate da un filo, col marcatore che cambiava da '+' a '–': uno stacco secco, l'accordion di qualsiasi plugin. Adesso sono schede numerate 01 → 08 — il titolo «Otto domande, otto risposte» diventa letteralmente vero, si contano — il numero si inverte all'apertura, il '+' RUOTA di 45° e diventa una ×, e sul filo sinistro si disegna la barra di cromo dall'alto: la firma, applicata alle FAQ. ======================================================================== */ .faq { margin-top: var(--s5); max-width: 880px; display: grid; gap: var(--s2); counter-reset: q; } .faq details { position: relative; counter-increment: q; border: 1px solid var(--linea); background: var(--scheda); padding: var(--s4) var(--s5); transition: border-color .2s ease; } @media (hover: hover) { .faq details:hover { border-color: var(--linea-forte); } } /* la barra di cromo che si disegna all'apertura: è la sottolineatura di .chiave, girata in verticale. Solo transform. */ .faq details::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--cromo-segno); transform: scaleY(0); transform-origin: 50% 0; transition: transform .28s var(--curva); } .faq details[open]::before { transform: scaleY(1); } .faq summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s4); font-family: var(--display); font-size: clamp(1rem, 1.5vw, 1.18rem); text-transform: uppercase; letter-spacing: -.01em; line-height: 1.15; } .faq summary::-webkit-details-marker { display: none; } .faq summary::before { content: counter(q, decimal-leading-zero); font-family: var(--display); font-size: .74rem; letter-spacing: .06em; line-height: 1; color: var(--grigio); border: 1px solid var(--linea-forte); padding: .26rem .4rem; transition: background .2s ease, color .2s ease, border-color .2s ease; } .faq details[open] summary::before { background: var(--accento); color: var(--accento-ink); border-color: var(--accento); } /* il '+' che RUOTA e diventa una ×: una riga, transform puro, e toglie il cambio di content, che era uno stacco secco */ .faq summary::after { content: '+'; display: inline-block; flex: none; font-family: var(--testo); font-weight: 400; font-size: 1.3rem; line-height: 1; color: var(--inchiostro); transition: transform .25s var(--curva); } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { margin: var(--s3) 0 0; color: var(--grigio); max-width: 62ch; } @media (min-width: 560px) { .faq details p { padding-left: 2.6rem; } } /* 🔴 NON si anima l'altezza del
: l'altezza è layout, costerebbe fotogrammi. Il salto istantaneo col contenuto in dissolvenza è indistinguibile a occhio da un'apertura animata. */ @media (prefers-reduced-motion: no-preference) { .faq details[open] p { animation: risposta .3s var(--curva) both; } } @keyframes risposta { from { opacity: 0; transform: translate3d(0,-6px,0); } to { opacity: 1; transform: none; } } /* ---------------------------------------------------------- piede ------- */ /* il piede è su fondo nero: è qui che entra lo stemma vero del cliente */ .piede { padding-block: clamp(2.2rem, 4vw, 3.4rem) 1.6rem; } .piede-griglia { display: grid; gap: 1.8rem; grid-template-columns: 1fr; } @media (min-width: 780px) { .piede-griglia { grid-template-columns: 1.4fr 1fr 1fr; } } .piede h2, .piede h3 { font-family: var(--testo); font-size: .7rem; font-weight: 700; letter-spacing: .18em; color: var(--grigio-tenue); margin-bottom: .7rem; text-transform: uppercase; } .piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .9rem; } .piede a { color: var(--grigio); text-decoration: none; } .piede a:hover { color: var(--inchiostro); } .piede .marchio { font-family: var(--display); font-size: 2rem; line-height: 1; display: block; margin-bottom: .5rem; } .piede .marchio span { color: var(--grigio); } /* il logo del cliente, dal SUO file: mai ricreato, mai deformato. height:auto è obbligatorio — senza, l'attributo height dell' resta e l'immagine esce schiacciata (è successo davvero, 150x976). */ .piede-stemma { width: 170px; height: auto; display: block; } .firma { margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; justify-content: space-between; font-size: .76rem; color: var(--grigio-tenue); } .firma a { color: var(--grigio); text-decoration: underline; text-underline-offset: 3px; } /* pulsante WhatsApp fisso su telefono — resta verde perché è il colore del servizio, ma la scritta è NERA: il bianco su questo verde fa 1,98:1 */ .wa-fisso { position: fixed; right: 12px; bottom: 12px; z-index: 70; display: inline-flex; align-items: center; gap: .45rem; background: var(--wa); color: var(--wa-ink); text-decoration: none; padding: .75rem 1.05rem; font-size: .82rem; font-weight: 700; box-shadow: 0 8px 22px rgba(0,0,0,.18); } .wa-fisso svg, .wa-fisso .i { width: 17px; height: 17px; } @media (min-width: 920px) { .wa-fisso { display: none; } } .i { width: 1em; height: 1em; flex: none; } /* ============================================ reveal guidato dallo scroll 🔴 @keyframes sali sta FUORI dal blocco @supports: lo usa anche il trittico d'apertura, che entra a tempo e non allo scroll. */ @keyframes sali { from { opacity: 0; transform: translate3d(0,18px,0); } to { opacity: 1; transform: none; } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .rivela { animation: sali linear both; animation-timeline: view(); animation-range: entry var(--riv-da, 6%) cover calc(var(--riv-da, 6%) + 18%); } } } /* ═══ LA FIRMA — 🖋️ «IL FILO CHE SI DISEGNA» ══════════════════════════════ Il cromo dello stemma non è un colore: è un FILO. In questo negozio il filo si comporta come la penna di chi disegna una mappa — si disegna sempre da sinistra a destra, sempre alla stessa velocità, su ogni segno che conta: il trattino dell'occhiello, la sottolineatura di ogni parola chiave, il filetto dentro ogni riquadro, la freccia fra un passaggio e il successivo, la barra che scende nella FAQ che si apre. Scorrendo la pagina si vede UNA MANO CHE SOTTOLINEA MENTRE TU LEGGI, con lo stesso gesto, dodici sezioni di fila. È una firma vera perché è una REGOLA, non un effetto: non si può copiare senza copiare anche il cromo di questo marchio. Costo: ZERO KB di JavaScript. Tutto scaleX/scaleY su animation-timeline, cioè fuori dal thread principale. ======================================================================== */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .chiave::after { animation: filo linear both; animation-timeline: view(); animation-range: entry 24% cover 34%; } .nota::before { animation: filo-giu linear both; animation-timeline: view(); animation-range: entry 10% cover 28%; } .mappa-passo:not(:last-child)::after { animation: freccia linear both; animation-timeline: view(); animation-range: entry 30% cover 42%; } /* ═══ LA FIRMA — «LA MAPPA CHE SI PESA» ═════════════════════════════ 🔴 QUI la lunghezza E' IL MESSAGGIO. Le otto barre non corrono tutte alla stessa meta: ognuna si ferma alla SUA — scaleX(--quota), cioè quanti capi ha quel reparto diviso il reparto piu' grosso. I numeri arrivano dal catalogo alla build (costruisci.py), quindi la firma si aggiorna da sola quando Niko manda foto nuove. Non e' un filetto che si disegna (quello e' gia' stato usato altrove ed e' solo la grammatica di questo sito): e' un DIAGRAMMA che si misura mentre lo guardi. Su un fabbro o uno studio legale non vorrebbe dire niente: senza un magazzino vero non esiste. */ .reparto a::before { animation: peso linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; } @keyframes peso { from { transform: scaleX(0); } to { transform: scaleX(var(--quota, .2)); } } @keyframes filo { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes filo-giu { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes freccia { from { opacity: 0; } to { opacity: 1; } } } } /* 🔴 LA REGOLA DI GOVERNO CHE TIENE IN PIEDI TUTTO IL MOVIMENTO: NESSUNO STATO DI PARTENZA INVISIBILE NEL CSS BASE. Lo stato «non disegnato» esiste SOLO dentro i @keyframes. Conseguenza: su Firefox (che non ha ancora le timeline di scroll), senza JavaScript, in stampa e sotto riduci-movimento, la pagina è GIÀ nel suo stato finale. Non esiste il caso «l'animazione non è partita e il contenuto è rimasto invisibile», che è il modo numero uno in cui questi sistemi muoiono in produzione. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .nastro-pista { animation: none !important; } /* 🔴 Le animazioni su animation-timeline NON sono governate da animation-duration: senza queste righe i fili resterebbero a scaleX(0), cioè INVISIBILI, proprio per chi ha chiesto meno movimento. È un problema di accessibilità, non di grafica. */ .chiave::after, .nota::before, .mappa-passo:not(:last-child)::after, .btn::before, .tessera-link::before, .menu a::after, .marchi-elenco a::after, .capo-foto::after, .faq details::before, .reparto a::before, .trittico figure { animation: none !important; } /* nessun elemento resta invisibile: lo stato base È lo stato finale */ .chiave::after { transform: scaleX(1) !important; } .nota::before { transform: scaleY(1) !important; } .mappa-passo:not(:last-child)::after { opacity: 1 !important; } /* la barra del reparto torna alla SUA lunghezza, non a 1: senza questo il dato sparirebbe proprio per chi ha chiesto meno movimento */ .reparto a::before { transform: scaleX(var(--quota, .2)) !important; } .trittico figure { opacity: 1 !important; transform: none !important; } .btn::before, .tessera-link::before { transform: scaleX(0) !important; } .btn:hover, .tessera-link:hover, .mappa-passo:hover, .reparto a:hover { transform: none !important; } } :focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; } .salta { position: absolute; left: -9999px; background: var(--accento); color: var(--accento-ink); padding: .7rem 1rem; z-index: 100; } .salta:focus { left: 8px; top: 8px; } /* ==================================================== ORARI DI APERTURA === Dalla grafica mandata dal cliente. Una tabella vera: sono dati tabellari, e uno screen reader li deve poter leggere riga per riga. ======================================================================== */ .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .orari { width: 100%; max-width: 420px; border-collapse: collapse; margin: 1.1rem 0 .9rem; } .orari th, .orari td { padding: .55rem 0; border-bottom: 1px solid var(--linea); text-align: left; } .orari th { font-family: var(--testo); font-weight: 700; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grigio); width: 7.5rem; } .orari td { font-size: .95rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .orari td + td { text-align: right; } .orari-sep { opacity: .5; padding-inline: .25rem; } .orari-chiuso { font-size: .95rem; color: var(--grigio); } @media (max-width: 420px) { .orari th { width: 5.2rem; font-size: .68rem; letter-spacing: .1em; } .orari td { font-size: .84rem; } } /* ============================================ il logo INTERO in apertura == In testata non ci sta: la banda «EXCLUSIVE» è il 4,2% dell'altezza del file, quindi in una testata da 64px verrebbe resa a 1,9px — illeggibile. Qui invece ha lo spazio per leggersi tutto. ======================================================================== */ .apertura-logo { width: clamp(120px, 20vw, 190px); height: auto; display: block; margin: 0 0 1.4rem; } /* nel tema chiaro l'argento su bianco sparisce: gli si mette sotto la sua piastrella nera, che è come il cliente l'ha sempre usato */ html[data-tema="light"] .apertura-logo { background: var(--nero); padding: 14px 16px; } /* 🗑️ Qui stavano .tema-scelta e un PRIMO blocco .tema-btn: residui del pannello dei font, che non esiste più. .tema-scelta non aveva un solo elemento in pagina, e .tema-btn era dichiarato due volte — il primo coi colori scritti a mano (#2D2D2D, #FFFFFF, #1C1C1D), che non seguivano il tema ed erano interamente sovrascritti da quello sotto. Tolti. */ /* ======================================================= INTERRUTTORE TEMA = Il sito nasce scuro; il visitatore può schiarirlo e la scelta gli resta. Sta in basso a sinistra per non finire sotto il pulsante WhatsApp. ======================================================================== */ .tema { position: fixed; left: 12px; bottom: 12px; z-index: 65; display: flex; gap: 1px; padding: 2px; background: var(--fondo-alt); border: 1px solid var(--linea-forte); } .tema-btn { font: inherit; font-size: .72rem; font-weight: 600; letter-spacing: .04em; background: none; border: 0; color: var(--grigio); padding: .4rem .7rem; cursor: pointer; min-height: 34px; transition: background .15s, color .15s; } .tema-btn:hover { color: var(--inchiostro); } .tema-btn[aria-pressed="true"] { background: var(--accento); color: var(--accento-ink); } @media (max-width: 559px) { .tema-btn { font-size: .68rem; padding: .35rem .6rem; } } /* ========================================================= BARRA ANNUNCI == In flusso normale, sopra la testata sticky: cosi non ne rompe lo sticky. ======================================================================== */ /* LA TARGHETTA — era una riga di testo centrata su fondo pieno, cioè la barra annunci di default di qualunque tema. Adesso sono tre celle separate da filetti, con la cifra vera nel carattere display e l'orlo di cromo sotto. Su telefono la terza cella esce: è ridondante col pulsante WhatsApp fisso, che sta sempre lì in basso a destra. */ .annuncio { position: relative; background: var(--accento); color: var(--accento-ink); display: flex; align-items: stretch; justify-content: center; flex-wrap: nowrap; padding: 0 var(--gutter); font-size: .72rem; letter-spacing: .05em; line-height: 1.3; } .annuncio::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cromo-segno); } .annuncio-cella { display: inline-flex; align-items: center; gap: .42rem; white-space: nowrap; padding: .55rem .95rem; font-weight: 600; text-decoration: none; color: inherit; transition: background .2s var(--curva), color .2s var(--curva); } /* il filetto fra le celle: currentColor, così segue l'inversione del tema senza color-mix (Safari sotto la 16.2 non ce l'ha) */ .annuncio-cella + .annuncio-cella { box-shadow: inset 1px 0 0 currentColor; } .annuncio-cifra { font-family: var(--display); font-size: .96rem; letter-spacing: .01em; } @media (hover: hover) { .annuncio-cella--wa:hover, .annuncio-cella--wa:focus-visible { background: var(--wa); color: var(--wa-ink); } } @media (max-width: 559px) { .annuncio { font-size: .66rem; } .annuncio-cella { padding: .5rem .6rem; } .annuncio-cifra { font-size: .86rem; } .annuncio-cella--wa { display: none; } /* ridondante col pulsante fisso */ } /* 🗑️ Qui stavano .tessere / .tessere--link / .tessera-link: la griglia che serviva sia a «Le categorie» sia a «I marchi». Erano la stessa griglia due volte di fila, ed è il motivo per cui le due sezioni si somigliavano. Adesso sono .mappa-reparti (un diagramma pesato) e .marchi-elenco (un elenco tipografico): due forme opposte. Zero elementi in pagina usano più queste classi — verificato sul file generato — quindi il CSS se ne va. Un foglio di stile con dentro regole morte non è «estremamente ordinato». */ /* ------------------------------------- elenchi «cosa facciamo / non facciamo» */ .elenco { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .5rem; } .elenco li { position: relative; padding-left: 1.1rem; font-size: .95rem; color: var(--grigio); } .elenco li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 1px; background: var(--linea-forte); } /* il + e il − sono DISEGNATI, non caratteri: uno screen reader non li incontra, e il segno dice da solo che il secondo elenco è il negativo del primo — senza bisogno di scriverlo. */ .elenco--si li::before, .elenco--si li::after { content: ''; position: absolute; background: var(--inchiostro); } .elenco--si li::before { left: 0; top: .62em; width: 12px; height: 2px; } .elenco--si li::after { left: 5px; top: .32em; width: 2px; height: 12px; } .elenco--no li::before { width: 12px; background: var(--grigio-tenue); } .elenco--si li, .elenco--no li { padding-left: 1.4rem; } .nota .elenco { margin-top: var(--s3); } @media (min-width: 560px) { #chi-siamo .rivela:last-child { display: grid; gap: var(--s3); } } /* la riga dei dati societari nel piede: obbligatoria per legge */ .piede-legale { margin: 1.6rem 0 0; font-size: .72rem; line-height: 1.6; color: var(--grigio-tenue); } /* --------------------------------------------- descrizione dell'articolo -- */ .capo-descr { font-size: .78rem; line-height: 1.4; color: var(--grigio); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.2em; } .visore-descr { margin: .3rem 0 0; font-size: .85rem; color: var(--grigio); max-width: 52ch; } /* ═══════════════════════════════════════════════════════════════════════ IL SISTEMA «MAPPA» — sette segni, sette significati. Il brief chiedeva riquadri, sottolineature, evidenziazioni, parentesi, badge, passaggi numerati e frecce — e insieme «estremamente ordinato, mai disordinato». Le due cose stanno insieme a una sola condizione: che ogni segno voglia dire UNA cosa sola, e la dica sempre uguale in tutte e dodici le sezioni. LE TRE FRASI DA SAPERE A MEMORIA ① Sottolineo il COSA, evidenzio il QUANTO. ② Colore = si agisce. Niente colore = si legge. ③ Un riquadro forte per sezione. Se ne servono due, la sezione sono due sezioni. Un segno usato per due cose diverse è rumore: si toglie, non si aggiunge. I tetti numerici stanno nel PIANO §1 e si CONTANO prima di pubblicare. ═══════════════════════════════════════════════════════════════════════ */ /* ── ① IL RIQUADRO ───────────────────────────────────────────────────── Un dettaglio che aiuta a decidere e che nel testo corrente si perderebbe. ⛔ Non è un contenitore per prosa lunga: un riquadro pieno di prosa è un paragrafo con un bordo. */ .nota { position: relative; margin: var(--s5) 0 0; padding: var(--s4) var(--s4) var(--s4) var(--s5); background: var(--scheda); border: 1px solid var(--linea-forte); /* ⛔ MAI --linea: fa 1,37:1 */ font-size: .92rem; line-height: 1.6; } @media (min-width: 720px) { .nota { padding: var(--s5) var(--s5) var(--s5) var(--s6); } } .nota > :first-child { margin-top: 0; } .nota > :last-child { margin-bottom: 0; } .nota p { color: var(--grigio); max-width: 56ch; } .nota h2, .nota h3 { margin: 0 0 var(--s3); font-size: 1rem; } /* il filo di cromo sul fianco: è lui a dire che il riquadro appartiene a QUESTO negozio e non a un template. 3px — sotto i 2 il gradiente si sgrana */ .nota::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cromo-segno); transform: scaleY(1); transform-origin: top center; /* già disegnato */ } /* ── ② IL RIQUADRO FORTE — «il colore più acceso», risolto ───────────── Non un colore inventato: l'INVERSIONE. Questo marchio ha zero pixel rossi e due sole materie, nero e cromo. Non si accende il riquadro: si spegne tutto il resto. E l'inversione non compete con le 47 fotografie, che sono l'unico colore che questa pagina deve avere. 🔴 MAX 1 PER SEZIONE, 3 IN PAGINA. */ .nota--forte { background: var(--fondo); /* i token arrivano invertiti da sopra */ color: var(--inchiostro); border-color: var(--linea-forte); font-family: var(--display); font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.25; letter-spacing: -.01em; text-transform: none; /* qui si LEGGE: il maiuscolo dei titoli su due righe piene rallenta */ padding: var(--s5); } @media (min-width: 720px) { .nota--forte { padding: var(--s6); } } .nota--forte p { color: var(--inchiostro); } .nota--forte::before { background: var(--cromo-segno); } /* ── ③ IL RIQUADRO ASSENTE — tratteggiato = quello che NON c'è ───────── Regola fissa: il tratteggio significa assenza, e nient'altro. */ .nota--assente { background: transparent; border-style: dashed; } .nota--assente::before { display: none; } /* ── ④ IL RIQUADRO DELL'AZIONE ──────────────────────────────────────── 🔴 SEMPRE PIENO, MAI UN BORDO: #25D366 su bianco fa 1,98:1, su carta #FAFAFA fa 1,90:1. Un riquadro verde solo contornato, nel tema chiaro, non esiste. Nel tema scuro passerebbe — ma una regola sola vale più di una regola giusta a metà. Dentro ci sta UNA riga e UN pulsante: niente testo secondario, quindi non serve un secondo inchiostro sul verde. */ .azione { margin: var(--s5) 0 0; padding: var(--s5); background: var(--wa); color: var(--wa-ink); /* 9,66:1 ✅ AAA */ display: grid; gap: var(--s4); justify-items: start; } .azione p { margin: 0; color: var(--wa-ink); font-weight: 600; max-width: 46ch; } .azione .btn { --btn-ink: #000000; background: var(--wa-ink); color: var(--wa); } @media (max-width: 559px) { .azione { padding: var(--s4); } } /* ── ⑤ LE PARENTESI GRAFICHE ────────────────────────────────────────── Una nota a margine: vera e utile, ma non decisiva per comprare. 🔴 NON si scrivono con i caratteri «(» e «)»: due parentesi vere verrebbero LETTE AD ALTA VOCE e spezzerebbero la frase. Qui sono due pseudo-elementi con content:'' — muti per definizione. ⛔ Mai dentro un .nota: due scatole per una cosa sola. */ .par { position: relative; padding-inline: var(--s5); margin: var(--s5) 0 0; color: var(--grigio); font-size: .88rem; line-height: 1.6; } .par::before, .par::after { content: ''; position: absolute; top: 0; bottom: 0; width: 9px; border-top: 2px solid var(--linea-forte); border-bottom: 2px solid var(--linea-forte); pointer-events: none; } .par::before { left: 0; border-left: 2px solid var(--linea-forte); } .par::after { right: 0; border-right: 2px solid var(--linea-forte); } .par > :first-child { margin-top: 0; } .par > :last-child { margin-bottom: 0; } @media (max-width: 559px) { .par { padding-inline: var(--s4); } } /* ── ⑥ LA SOTTOLINEATURA — «il COSA» ────────────────────────────────── LA PAROLA CHE IL VISITATORE STAVA CERCANDO. Sostantivi e fatti: Manfredonia · Via Pulsano 69 · su WhatsApp · ritiro in negozio. ⛔ Mai su un aggettivo: sottolineare «davvero comodo» è vantarsi, e chi si vanta da solo è un asino di natura. ⛔ Mai su un numero: quello è .cifra. 🔴 MAX 3 PAROLE — display:inline-block non va a capo al suo interno, e a 375px una frase lunga sfonderebbe la colonna. display:inline-block è obbligatorio, non estetico: su un inline che va a capo, un ::after in posizione assoluta coprirebbe tutto il riquadro di ingombro invece della sola riga. */ .chiave { position: relative; display: inline-block; max-width: 100%; font-weight: 600; color: var(--inchiostro); } .chiave::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.14em; height: .16em; background: var(--cromo-segno); transform: scaleX(1); /* ripiego: già disegnata */ transform-origin: left center; } /* ── ⑦ L'EVIDENZIAZIONE — «il QUANTO» ───────────────────────────────── IL DATO CHE DECIDE. Solo roba che si conta: 48 ore · 47 articoli · 10:00. 🔴 LA DIFFERENZA CON ⑥ È IL PERNO DI TUTTO IL SISTEMA: SOTTOLINEO IL COSA. EVIDENZIO IL QUANTO. Se un giorno si evidenzia una parola, da quel momento i due segni vogliono dire tutti e due «importante», cioè niente, e il lettore smette di fidarsi dei segni in TUTTA la pagina. 🔴 E la .cifra NON si disegna, mentre la .chiave sì: la .cifra ha il testo invertito sopra il fondo pieno, e se il fondo entrasse scorrendo, per i 400ms dell'animazione la scritta sarebbe di un colore sbagliato su un fondo sbagliato. La sottolineatura invece non tocca il colore del testo. Una si muove, l'altra no, e c'è un perché. ⛔ MAI SOPRA UN PREZZO finché PREZZI_DEMO = True. */ .cifra { background: var(--accento); color: var(--accento-ink); padding: .06em .34em; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* dentro un riquadro già invertito o verde la .cifra non serve: il riquadro È già l'enfasi. Lì torna testo in grassetto. */ .nota--forte .cifra, .azione .cifra { background: none; color: inherit; padding: 0; } @media (max-width: 559px) { .cifra { padding: .05em .28em; } } /* ── ⑧ BADGE E STICKER ──────────────────────────────────────────────── Un'etichetta corta su un dato CHE POSSEDIAMO DAVVERO. ✅ i conteggi: calcolati alla build, si aggiornano da soli quando arrivano foto nuove. ✅ il «rif.» nel visore: è la stessa sigla che finisce nel messaggio. ⛔ «best seller» · «novità» · «ultimo pezzo» · «-30%» · stelline: non abbiamo un solo dato di vendita, magazzino o recensione. Un badge inventato su un sito che ha ancora i prezzi provvisori accesi è la stessa pratica di un «rivenditore ufficiale» scritto senza esserlo. ⛔ NESSUN bollo sulle 47 tessere: il marchio è già nell'occhiello, e su una griglia da 47 la stessa informazione due volte è disordine. ⛔ Nessun bollo si muove: un elemento che pulsa da fermo legge come una notifica, non come lusso. */ .bollo { display: inline-flex; align-items: center; gap: var(--s1); margin-left: var(--s3); padding: .26rem .55rem; border: 1px solid var(--linea-forte); font-family: var(--testo); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--inchiostro); font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: middle; } .bollo--rif { border-style: dashed; color: var(--grigio); letter-spacing: .08em; } @media (max-width: 559px) { .bollo { margin-left: var(--s2); font-size: .6rem; letter-spacing: .1em; } } /* ── ⑨ IL RITMO — la scala applicata, al posto degli style= in linea ─── La spaziatura smette di essere una decisione presa dodici volte e diventa una regola presa una volta. È la condizione perché «estremamente ordinato» si veda davvero, invece di essere solo un'intenzione. */ .occhiello { margin: 0 0 var(--s3); } .sotto-titolo { margin-top: var(--s4); color: var(--grigio); max-width: 60ch; } .blocco + .blocco { margin-top: var(--s6); } /* ══════════════════════ 4 · LA MAPPA DEI REPARTI ═════════════════════════ Non una griglia: un DIAGRAMMA. Ogni reparto è largo quanto pesa, e il filo di cromo in cima è lungo n/max. Dato vero, zero invenzione: a colpo d'occhio si vede cosa vende davvero questo negozio. Prima erano otto rettangoli identici — e la sezione dopo, «I marchi», era la STESSA identica griglia con dentro altre parole. Due griglie uguali di fila sono la definizione di template. ✅ Orfani impossibili per costruzione: con flex-grow l'ultima riga si distende sempre a piena larghezza. ======================================================================== */ .mappa-reparti { list-style: none; margin: var(--s5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); } .reparto { flex: var(--peso, 1) 1 44%; min-width: 0; } /* 375px: mai più di 2 per riga */ @media (min-width: 680px) { .reparto { flex-basis: 20%; } } @media (min-width: 1080px) { .reparto { flex-basis: 15%; } } .reparto a { position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s3) var(--s3); text-decoration: none; color: var(--inchiostro); background: var(--fondo); box-shadow: inset 0 0 0 1px var(--linea-forte); transition: transform .22s var(--curva), background .22s, color .22s; } /* 🔴 il filo in cima è lungo quanto il reparto PESA: dato, non ornamento */ .reparto a::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--cromo-segno); transform: scaleX(var(--quota, .2)); transform-origin: left center; } @media (hover: hover) { .reparto a:hover, .reparto a:focus-visible { transform: translateY(-3px); background: var(--accento); color: var(--accento-ink); } } .reparto a:active { transform: scale(.985); } .reparto-voce { font-family: var(--display); font-size: clamp(.85rem, 1.5vw, 1.05rem); text-transform: uppercase; line-height: 1.1; letter-spacing: -.01em; } .reparto-n { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1; font-variant-numeric: tabular-nums; } /* ══════════════════════ 5 · LA PARETE DELLE INSEGNE ══════════════════════ Le tre insegne sono le uniche PROVE FOTOGRAFICHE che il negozio è rivenditore: stavano sotto, come un ripensamento. Ora salgono in cima. Sotto, i marchi diventano un elenco tipografico — forma opposta alla mappa dei reparti, così le due sezioni non si somigliano più in niente. ======================================================================== */ .insegna { background: var(--carta); transition: transform .25s var(--curva); } @media (hover: hover) { .insegna:hover { transform: translateY(-3px); } } .marchi-elenco { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; } /* ✅ 10 marchi su 2 colonne da 860px = 5+5 esatti; sotto, una colonna di righe piene: nessun orfano possibile a nessuna larghezza. */ @media (min-width: 860px) { .marchi-elenco { grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 64px); } } .marchi-elenco a { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: var(--s4) 0; text-decoration: none; color: var(--inchiostro); border-bottom: 1px solid var(--linea); } .marchi-elenco .nome { font-family: var(--display); font-size: clamp(1.15rem, 2.4vw, 1.8rem); text-transform: uppercase; letter-spacing: -.015em; line-height: 1; } .marchi-elenco .quanti { flex: none; font-size: .8rem; color: var(--grigio); font-variant-numeric: tabular-nums; } /* il filo che si disegna: la firma, applicata all'elenco */ .marchi-elenco a::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--cromo-segno); transform: scaleX(0); transform-origin: left center; transition: transform .32s var(--curva); } @media (hover: hover) { .marchi-elenco a:hover::after, .marchi-elenco a:focus-visible::after { transform: scaleX(1); } } /* ══════════════════════════ IL PIEDE ═════════════════════════════════════ Erano tre colonne di testo senza gerarchia, senza un solo segno del sistema. Adesso ogni colonna prende il trattino di cromo — lo STESSO segno di .occhiello::before — così il piede appartiene visibilmente alla stessa pagina invece di essere un'appendice. ======================================================================== */ .piede-griglia > div { position: relative; padding-top: var(--s4); } .piede-griglia > div::before { content: ''; position: absolute; left: 0; top: 0; width: 34px; height: 3px; background: var(--cromo-segno); } .piede-claim { color: var(--grigio); font-size: .9rem; margin-top: var(--s3); } /* la firma OnlinePerTutti chiude la pagina, col suo filo sopra */ .firma { position: relative; } .firma::before { content: ''; position: absolute; left: 0; top: -1px; width: 72px; height: 2px; background: var(--cromo-segno); } /* l'occhiello dentro il visore non ha margine: è in una barra, non in flusso */ .visore-occhiello { margin: 0; } /* ═══════════════════════════════════════════════════════════════════════ DA QUI IN GIÙ: L'E-COMMERCE A PIÙ PAGINE (18/09/2026) Il sito era una landing page sola. Adesso ha sedici pagine e un menu vero. Stile, caratteri e colori non cambiano: cambia quello che c'è da navigare. ═══════════════════════════════════════════════════════════════════════ */ /* 🔴 UNA SOLA LEVA per bloccare lo scorrimento. Prima il visore usava body.style.overflow in linea; il menu userebbe una classe. Chi chiude per ultimo vince, e la pagina resta bloccata sotto il menu. Ora usano questa. */ body.fermo { overflow: hidden; } /* ── IL MENU ───────────────────────────────────────────────────────────── */ .btn--testata { padding: .6rem .9rem; } @media (max-width: 559px) { .btn--testata { padding: .55rem .7rem; } .btn--testata span { position: absolute; left: -9999px; } /* resta l'icona */ } /* il pulsante che apre il menu: c'è solo dove il menu in riga non ci sta */ .menu-apri { display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--inchiostro); background: none; border: 1px solid var(--linea-forte); cursor: pointer; padding: .5rem .7rem; min-height: 40px; } .menu-apri-righe { display: block; width: 16px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; } .menu-apri[aria-expanded="true"] .menu-apri-righe { box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; } @media (min-width: 920px) { .menu-apri { display: none; } } /* il sottomenu dei reparti, su desktop: CSS puro, zero JavaScript, quindi funziona anche se il JS non parte. 🔴 `align-self: stretch` NON e estetica, e la correzione di un difetto. La tendina sta a `top: 100%` del .menu, e il .menu era alto quanto le sue scritte (~20px) centrate dentro una testata da 64: il 100% cadeva a meta testata, e la tendina usciva DENTRO la barra, col filo inferiore della testata che ci passava attraverso. Misurato: si apriva a y=81 mentre la testata finisce a 103. Facendo occupare al .menu tutta l'altezza della riga, `top: 100%` cade esattamente sul bordo inferiore della testata. In piu la zona sensibile diventa piu alta, quindi passando dal link alla tendina non si perde l'hover a meta strada. */ .menu { position: relative; align-self: stretch; align-items: center; } .menu-reparti { position: absolute; top: 100%; left: 0; z-index: 70; min-width: 230px; padding: var(--s3) 0; background: var(--fondo); border: 1px solid var(--linea-forte); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s var(--curva), transform .18s var(--curva), visibility .18s; } .menu-reparti ul { list-style: none; margin: 0; padding: 0; display: grid; } .menu-reparti a { display: block; padding: .5rem var(--s4); font-family: var(--testo); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grigio); } .menu-reparti a::after { content: none; } /* niente filo: è un elenco, non una voce */ .menu-reparti a:hover, .menu-reparti a:focus-visible { color: var(--inchiostro); } @media (min-width: 920px) { .menu:hover .menu-reparti, .menu:focus-within .menu-reparti { opacity: 1; visibility: visible; transform: none; } } /* il pannello da telefono */ .menu-mobile { position: fixed; inset: 0; z-index: 80; background: var(--fondo); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--s6) var(--gutter) calc(var(--s9) + 40px); } .menu-mobile[hidden] { display: none; } @media (min-width: 920px) { .menu-mobile { display: none !important; } } .menu-mobile-dentro { display: grid; gap: var(--s2); max-width: var(--max); margin: 0 auto; } .menu-mobile a { display: block; padding: var(--s4) 0; font-family: var(--display); font-size: clamp(1.2rem, 5vw, 1.6rem); text-transform: uppercase; letter-spacing: -.01em; line-height: 1.1; text-decoration: none; color: var(--inchiostro); border-bottom: 1px solid var(--linea); } .menu-mobile a[aria-current] { color: var(--grigio); } .menu-mobile a[aria-current]::before { content: '— '; } .menu-eti { margin: var(--s5) 0 0; font-family: var(--testo); font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--grigio-tenue); } .menu-reparti-mobile { list-style: none; margin: 0; padding: 0; } .menu-reparti-mobile a { font-size: clamp(1rem, 4vw, 1.25rem); } /* ── LE VETRINE DELLA HOME ─────────────────────────────────────────────── */ .vetrina-sez, .riga-sez, .saldi-sez { padding-block: clamp(var(--s7), 6vw, var(--s8)); } .vetrina-testa { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); } .vetrina-testa h2 { margin: 0; } .vetrina-tutto { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--testo); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--inchiostro); text-decoration: none; white-space: nowrap; padding-block: .35rem; position: relative; flex: none; } .vetrina-tutto::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cromo-segno); transform: scaleX(1); transform-origin: left center; transition: transform .28s var(--curva); } @media (hover: hover) { .vetrina-tutto:hover::after, .vetrina-tutto:focus-visible::after { transform: scaleX(0); } } /* 🗑️ Qui stava .vetrina, la griglia a 4 colonne delle otto sezioni categoria della home. Quelle sezioni non esistono piu: adesso TUTTE le sezioni prodotto sono righe che scorrono, una forma sola in tutto il sito. */ /* il prezzo pieno barrato sta sulla STESSA riga del prezzo: la riga ha altezza propria, quindi le tessere restano alte uguali e il CLS resta 0 */ .capo-prezzi { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; } .capo-pieno { color: var(--grigio-tenue); font-size: .85em; text-decoration-thickness: 1px; } /* ── LA RIGA CHE SCORRE ────────────────────────────────────────────────── */ .riga { overflow: hidden; } .riga-pista { list-style: none; margin: 0; padding: 0 0 var(--s3); display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; /* lo spiraglio a destra dice che c'è dell'altro senza aggiungere un segno */ -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); } .riga-pista::-webkit-scrollbar { display: none; } .riga-pista .capo { flex: 0 0 46%; scroll-snap-align: start; min-width: 0; } @media (min-width: 680px) { .riga-pista .capo { flex-basis: 30%; } } @media (min-width: 1080px) { .riga-pista .capo { flex-basis: 22%; } } .riga-frecce { display: flex; gap: var(--s2); } .riga-prec, .riga-succ { width: 40px; height: 40px; flex: none; cursor: pointer; background: none; border: 1px solid var(--linea-forte); color: var(--inchiostro); font: inherit; font-size: 1rem; line-height: 1; transition: background .18s var(--curva), color .18s var(--curva), opacity .18s; } @media (hover: hover) { .riga-prec:hover:not(:disabled), .riga-succ:hover:not(:disabled) { background: var(--accento); color: var(--accento-ink); } } .riga-prec:disabled, .riga-succ:disabled { opacity: .3; cursor: default; } /* se non c'è niente oltre il bordo le frecce non servono: spariscono */ .riga--ferma .riga-frecce { display: none; } .riga--ferma .riga-pista { -webkit-mask-image: none; mask-image: none; } /* 🗑️ Qui stava il listino incolonnato dei Saldi (.saldi, .saldo, .saldo-foto, .saldo-dati, .saldo-nome, .saldo-prezzi, .saldo-ora). Era la TERZA forma per dire «ecco dei prodotti», e nessuna delle tre spiegava perche fosse diversa dalle altre. Adesso i saldi sono una riga come tutte le altre, e i due prezzi — pieno barrato e scontato — stanno dentro la scheda normale, come gia succedeva nel resto del catalogo. */ /* ── I METODI DI PAGAMENTO ─────────────────────────────────────────────── */ .pagamenti { list-style: none; margin: var(--s5) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); } .pagamenti li { border: 1px solid var(--linea-forte); padding: .55rem .9rem; font-family: var(--testo); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } /* ── BRICIOLE E ALTRI REPARTI ──────────────────────────────────────────── */ .briciole { margin-bottom: var(--s4); font-size: .76rem; letter-spacing: .06em; color: var(--grigio); } .briciole a { color: var(--grigio); text-decoration: underline; text-underline-offset: 3px; } .briciole a:hover { color: var(--inchiostro); } .altri-reparti { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--linea); font-size: .82rem; color: var(--grigio); line-height: 2; } .altri-reparti a { color: var(--inchiostro); text-decoration: none; } .altri-reparti a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ── TRACCIA IL TUO ORDINE ─────────────────────────────────────────────── */ .traccia { margin-top: var(--s5); max-width: 560px; display: grid; gap: var(--s3); } .traccia-eti { margin: 0; font-family: var(--testo); font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--grigio); } .traccia-campo { font: inherit; font-size: 1rem; font-variant-numeric: tabular-nums; padding: .85rem var(--s4); min-height: 48px; background: var(--scheda); color: var(--inchiostro); border: 1px solid var(--linea-forte); } .traccia-campo::placeholder { color: var(--grigio-tenue); } .traccia-corrieri { display: flex; flex-wrap: wrap; gap: var(--s2); } .traccia-avviso { margin: 0; color: var(--inchiostro); font-weight: 700; font-size: .85rem; } .traccia-esito { margin: 0; color: var(--grigio); font-size: .85rem; } /* il riassunto in home: forma PIANA, perché .mappa (numeri invertiti + frecce) vale una volta sola in tutto il sito, e quella volta è /ordinare/ */ .passi-brevi { list-style: none; margin: var(--s5) 0; padding: 0; display: grid; gap: var(--s3); counter-reset: pb; max-width: 60ch; } .passi-brevi li { counter-increment: pb; position: relative; padding-left: 2.2rem; font-size: .98rem; color: var(--grigio); } .passi-brevi li::before { content: counter(pb, decimal-leading-zero); position: absolute; left: 0; top: .1em; font-family: var(--display); font-size: .78rem; letter-spacing: .04em; color: var(--grigio-tenue); font-variant-numeric: tabular-nums; } .passi-brevi b { color: var(--inchiostro); font-weight: 700; } /* ── LA RIGA, ORA UNICA FORMA DI SEZIONE PRODOTTI ───────────────────────── Le sezioni prodotto sono tutte uguali: cambia il titolo, cambiano i capi, non cambia la forma. Su /catalogo/ ce ne sono otto di fila, quindi il ritmo verticale conta piu di prima. */ .riga-sez { padding-block: clamp(var(--s6), 5vw, var(--s7)); } .riga-sez[hidden] { display: none; } /* due righe di fila non devono sembrare una cosa sola */ .riga-sez + .riga-sez { border-top: 1px solid var(--linea); } .vetrina-titoli { min-width: 0; } .vetrina-titoli h2 { margin: 0; } .riga-coda { margin-top: var(--s4); } /* la riga non si allarga fino al bordo: resta dentro il contenitore, ma la pista sfora a destra cosi si vede che c'e dell'altro */ .riga-sez .vetrina-testa { align-items: flex-end; margin-bottom: var(--s4); } /* ── I LOGHI NEL NASTRO ──────────────────────────────────────────────────── Quattro marchi su dieci hanno un logo vero (gli altri sei non si sono trovati e restano scritti: vedi assets/img/marchi/PROVENIENZA.md). Perché la riga non sembri sciatta, logo e nome devono avere la STESSA altezza ottica e stare sulla stessa linea di mezzo. */ .nastro-voce { line-height: 1; } /* I due marchi rimasti SCRITTI (Marcelo Burlon e Soldier: il logo non si e trovato) vanno rimpiccioliti, o sbilanciano la riga: misurato, «MARCELO BURLON» in corpo pieno era largo 245px contro i 21-112 dei loghi, cioe piu del doppio di qualunque altro. Cosi stanno nella stessa fascia. */ .nastro-voce:not(.nastro-voce--logo) { font-size: clamp(1.05rem, 2vw, 1.55rem); } .nastro-voce--logo { display: inline-flex; align-items: center; } .nastro-logo { display: block; width: auto; /* --scala arriva dal generatore, uno per logo: un simbolo alto e stretto a parità di altezza sembra minuscolo accanto a un nome scritto */ height: calc(clamp(20px, 2.1vw, 30px) * var(--scala, 1)); object-fit: contain; } /* I marchi TESTUALI (Armani Exchange, Polo Ralph Lauren) sono tracciati neri: su nero sparirebbero. Si invertono in bianco, e così stanno accanto ai nomi scritti degli altri sei senza che si veda la differenza di trattamento. */ .nastro-logo--bianco { filter: brightness(0) invert(1); } /* I SIMBOLI (il coccodrillo, lo scudo) si riconoscono dal colore: invertirli li ridurrebbe a due macchie bianche. Su nero si leggono già. */ .nastro-logo--colore { filter: none; } @media (max-width: 559px) { .nastro-logo { height: calc(19px * var(--scala, 1)); } } /* ═══════════════════════════════════════════════════════════════════════ LE DUE APERTURE (18/09/2026) — si scelgono dal menù in basso a sinistra. Al posto del trittico di tre packshot su bianco, che non diceva né chi sei né perché fidarsi. Tutte e due rispondono alla domanda che questo negozio si sente fare davvero: «esistete, o siete solo una pagina Instagram?» ⚠️ Quando Domenico sceglie, l'altra e il menù se ne vanno. ═══════════════════════════════════════════════════════════════════════ */ .apertura-testo { min-width: 0; } .apertura-media { min-width: 0; } /* 🔴 IL VIDEO E DUE TESSERE PER DUE. Ha la cornice identica alla tessera prodotto — stesse proporzioni 4:5, stesso fondo chiaro, stesso filo — e occupa esattamente l'ingombro di QUATTRO tessere: due di larghezza (piu il loro spazio in mezzo) e due di altezza. Resta sulla griglia, ma si vede. Perche proprio due e non «un po' piu grande»: un 4:5 largo due tessere piu il loro spazio e ancora un 4:5 esatto. Qualunque altra misura sarebbe stata un numero scelto a caso, e il sito e tenuto insieme da un modulo. Il 9:16 dentro un 4:5 perde sopra e sotto (object-fit: cover). E una panoramica del negozio, non un capo: il veto «le foto non si ritagliano» vale sui PRODOTTI, e quello resta intatto. */ .hero-film { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--carta); box-shadow: inset 0 0 0 1px var(--linea); } .hero-film video { width: 100%; height: 100%; display: block; object-fit: cover; } /* due tessere + lo spazio fra loro (10px, quello della riga prodotti). ⚠️ Sotto i 900px l'apertura e in colonna unica: li la percentuale si applica al contenitore. Da 900px e a due colonne, e la larghezza la deve dare la COLONNA — un max-width in percentuale si applicherebbe alla colonna e non al contenitore (misurato: veniva 115px invece di 262). */ .apertura-media { max-width: calc(92% + 10px); } @media (min-width: 680px) { .apertura-media { max-width: calc(60% + 10px); } } /* 🔴 L'apertura resta IN COLONNA UNICA fino a 1080px. Nella fascia 900-1080 la tessera vale il 30% del contenitore — la riga prodotti ne mostra tre — quindi due tessere fanno il 60%, e affiancandole al testo restavano 334px con l'H1 schiacciato su due righe strette. Misurato a 1000px, non supposto. Da 1080 la tessera scende al 22%: due fanno il 44%, e le due colonne stanno in equilibrio (testo 624px). */ @media (min-width: 900px) and (max-width: 1079px) { .apertura-griglia { grid-template-columns: 1fr; } } @media (min-width: 1080px) { .apertura-griglia { grid-template-columns: 1fr calc(44% + 10px); } .apertura-media { max-width: 100%; } } /* il pulsante audio dentro il riquadro, in basso a sinistra. Adesso il video e largo due tessere: la scritta ci sta per intero, torna visibile. */ .audio-toggle--hero { position: absolute; left: 10px; bottom: 10px; margin-top: 0; background: color-mix(in srgb, var(--fondo) 88%, transparent); backdrop-filter: blur(6px); font-size: .64rem; min-height: 32px; padding: .4rem .7rem; } @media (max-width: 559px) { .audio-toggle--hero { font-size: .6rem; padding: .35rem .55rem; } } /* le tre insegne nella sezione negozio: sono fotografie delle insegne vere, l'unica prova di quali marchi tratta. Stavano solo nella seconda apertura. */ .insegne--negozio { margin-top: 10px; max-width: none; } .insegne-eti { margin: var(--s2) 0 0; font-family: var(--testo); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--grigio-tenue); } /* la sezione negozio senza il video: due foto affiancate */ .negozio-media--foto { grid-template-columns: repeat(2, minmax(0,1fr)); } /* ═══════════════════════════════════════════════════════════════════════ L'APERTURA SU TELEFONO — il video diventa lo SFONDO, il testo ci sta sopra su un pannello nero (18/09/2026). 🔴 Perché il pannello è nero PIENO e non una velatura: il video è chiaro. Misurato fotogramma per fotogramma, la luminanza media sta fra 136 e 178 su 255 — è un negozio con le pareti bianche. Bianco su quel fondo non si legge, e una velatura al 60% lascerebbe passare le magliette chiare proprio sotto il titolo. Nero pieno: 21:1, e non dipende dal fotogramma. 🔴 Vale fino a 1080px, cioè esattamente fino a dove l'apertura è in colonna unica. Da 1080 in su tornano le due colonne col video a due tessere. ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 1079px) { .apertura { position: relative; overflow: hidden; padding-block: 0; background: var(--nero); /* tutto quello che sta dietro è nero */ } /* 🔴 Lo spazio del video si RISERVA, non si spera che avanzi. Con una min-height sulla sezione, su un telefono da 640px il pannello si mangiava tutto e al video restavano 105px — il 20%: non e piu uno sfondo, e una striscia. Misurato. Con un padding in cima, il video ha sempre la sua parte e la sezione cresce quanto serve al testo. */ .apertura-griglia { position: relative; z-index: 2; padding-top: clamp(200px, 34vh, 300px); display: flex; flex-direction: column; justify-content: flex-end; gap: 0; } /* il video esce dal flusso e copre la sezione */ .apertura-media { position: absolute; inset: 0; max-width: none; z-index: 0; } .hero-film { width: 100%; height: 100%; aspect-ratio: auto; /* qui non è più una tessera: è lo sfondo */ background: var(--nero); box-shadow: none; } .hero-film video { width: 100%; height: 100%; object-fit: cover; } /* IL PANNELLO NERO — a tutta larghezza, attaccato al fondo. I token sono gli stessi di .su-nero (vedi lì, è la fonte): servono perché dentro ci sono i pulsanti, l'occhiello e la .cifra, che devono invertirsi tutti insieme invece di essere colorati a mano uno per uno. */ .apertura-testo { /* 🔴 position + z-index NON sono decorazione: senza, il pannello finisce DIETRO al video. Un elemento posizionato (il video, absolute z-index:0) si dipinge sopra il contenuto normale, anche se nel codice viene prima. Le misure dicevano che il pannello era al posto giusto — era la SOVRAPPOSIZIONE a essere sbagliata, e si e vista solo guardando. */ position: relative; z-index: 1; background: var(--nero); color: #F2F2F3; --fondo: #000000; --inchiostro: #F2F2F3; --grigio: #B4B4B6; --grigio-tenue: #8E8E90; --linea: #2D2D2D; --linea-forte: #777777; --accento: #F2F2F3; --accento-ink: #000000; --focus: #F2F2F3; --scheda: #141414; --cromo-segno: var(--cromo-su-scuro); margin-inline: calc(var(--gutter) * -1); padding: var(--s5) var(--gutter) var(--s6); } /* il logo si stringe: qui ogni pixel del pannello toglie video */ .apertura-logo { width: clamp(96px, 26vw, 128px); margin-bottom: var(--s4); } html[data-tema="light"] .apertura-logo { background: none; padding: 0; } /* 🔴 su uno schermo BASSO il logo esce dall'apertura: vale ~150px, e su un telefono da 640px sono la differenza fra i pulsanti sopra o sotto la piega. Il marchio resta comunque in testata (stemma + nome) e per intero nel piede: non si perde, cambia solo posto. */ @media (max-height: 720px) { .apertura-logo { display: none; } } /* il pulsante audio sta sul video, in alto a destra: in basso finirebbe sotto il pannello */ .audio-toggle--hero { top: var(--s3); right: var(--gutter); left: auto; bottom: auto; background: rgba(0, 0, 0, .55); border-color: #777777; color: #F2F2F3; } } /* la riga in cima al menu da telefono: il marchio e la via d'uscita. Serve perché il pannello copre la testata — quindi il pulsante «Menu» che l'ha aperto non si vede più — e su un telefono il tasto Esc non esiste. */ .menu-mobile-testa { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); padding-bottom: var(--s4); border-bottom: 1px solid var(--linea); } .menu-mobile-testa .marchio-testo { font-family: var(--display); font-size: .95rem; letter-spacing: -.01em; } .menu-chiudi { font: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; background: none; color: var(--inchiostro); border: 1px solid var(--linea-forte); padding: .5rem .8rem; min-height: 40px; transition: background .18s var(--curva), color .18s var(--curva); } @media (hover: hover) { .menu-chiudi:hover, .menu-chiudi:focus-visible { background: var(--accento); color: var(--accento-ink); } }