/* ════════════════════════════════════════════════════════════ stile.css — le dimensioni di stile che non sono il layout Il layout dice DOVE stanno le cose (temi.css). Qui si dice come sono FATTE: forme, tipografia, schede evento, navigazione, testata, guscio, sfondo esterno, marchio. OGNI REGOLA PENDE DA `body.tema-on[data-tm-…="valore"]`, scritto su da `applyTema()` in js/app.js. Tre conseguenze volute, le stesse di temi.css: · Il valore predefinito di ogni dimensione NON compare mai qui. `data-tm-forme="classico"` non carica nemmeno una dichiarazione: la pagina è quella di sempre, al pixel. È la condizione che permette di lavorare su questo file senza mettere a rischio i clienti in produzione. · `.tema-on` c'è di proposito: la classe è accesa solo sulle viste pubbliche, mai in admin. Una scelta di stile non deve poter deformare il pannello di chi gestisce le prenotazioni. · La specificità è (0,2,1) più quella del selettore che segue: batte le utility Tailwind compilate (0,1,0) senza `!important`. ORDINE DEI FOGLI. Questo è collegato PRIMA di temi.css. A parità di specificità vince l'ultimo: dove una scelta di scheda evento e un layout si contendono la stessa proprietà, vince il layout — ed è giusto, perché `essenziale` toglie le immagini e `vetrina` fa i quadrati, e una scelta di scheda non deve poterli smentire a metà. ════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ 1. IL GUSCIO E LO SFONDO ESTERNO `#app` era GIÀ `max-w-md w-full mx-auto`: su un monitor da 27 pollici l'app pubblica è sempre stata una colonna da 448px centrata, non una pagina desktop. Il formato mobile quindi non si introduce qui, si CONFERMA — e si aggiunge la sola cosa che mancava: l'ambiente attorno. Due bande di gradiente non sono una scelta di design, sono ciò che resta quando non se ne fa nessuna. ════════════════════════════════════════════════════════════ */ /* La larghezza del guscio è un token, non un numero sparso nel markup: `max-w-md` resta la classe compilata, questa regola la governa. 448px è la misura su cui è calibrato tutto il resto (testata, schede, barra in basso): cambiarla a occhio sposta ventisei cose. */ body.tema-on { --tm-guscio-largo: 28rem; } /* ─── Guscio CENTRATO ──────────────────────────────────────── L'app si stacca dallo sfondo come un'app vera. Solo dove c'è spazio accanto: sotto i 600px la cornice mangerebbe schermo utile a chi prenota, che è l'unica cosa che conta lì. */ @media (min-width: 600px) { body.tema-on[data-tm-guscio="centrato"] #app { max-width: var(--tm-guscio-largo); border-radius: 28px; border-left: 0; border-right: 0; margin-top: 24px; margin-bottom: 24px; min-height: calc(100vh - 48px); overflow: hidden; box-shadow: 0 30px 90px rgba(0, 0, 0, .22), 0 2px 10px rgba(0, 0, 0, .08); } /* La barra in basso e la testata sono `fixed` e agganciate al viewport: dentro un guscio con gli angoli tondi resterebbero appese in fondo alla finestra, staccate dall'app. Si riportano dentro. */ body.tema-on[data-tm-guscio="centrato"] nav.fixed.bottom-0, body.tema-on[data-tm-guscio="centrato"] .fixed.bottom-0 { bottom: 24px; left: max(0px, calc((100vw - var(--tm-guscio-largo)) / 2)); right: auto; width: min(100vw, var(--tm-guscio-largo)); max-width: var(--tm-guscio-largo); border-bottom-left-radius: 28px; border-bottom-right-radius: 28px; } } /* ─── Lo sfondo attorno ────────────────────────────────────── `auto` non compare: è il gradiente che `buildTemaCss()` già scrive coi token del kit, cioè il comportamento di oggi. */ body.tema-on[data-tm-sfondo="tinta"] { background: var(--tk-sfondoColore, var(--tk-bgBottom)) !important; } /* Un'immagine dietro l'app va SEMPRE attenuata: a piena forza compete con la locandina dell'evento, che è la cosa che deve vincere. Il velo scuro non è un gusto, è ciò che tiene leggibile l'ombra del guscio. */ body.tema-on[data-tm-sfondo="sfocata"]::before, body.tema-on[data-tm-sfondo="immagine"]::before { content: ''; position: fixed; inset: 0; z-index: -1; background-image: var(--tm-sfondo-img); background-size: cover; background-position: center; background-repeat: no-repeat; } body.tema-on[data-tm-sfondo="sfocata"]::before { filter: blur(28px) saturate(1.1) brightness(.62); /* La sfocatura mangia i bordi: senza la scala si vedrebbero due dita di sfondo trasparente sui quattro lati. */ transform: scale(1.12); } body.tema-on[data-tm-sfondo="immagine"]::before { filter: brightness(.72); } /* Su telefono l'immagine non si vede mai (l'app copre tutto) ma il browser la scaricherebbe lo stesso: qualche centinaio di kilobyte spesi per niente, sulla connessione di chi sta prenotando in piedi davanti al teatro. */ @media (max-width: 599px) { body.tema-on[data-tm-sfondo="sfocata"]::before, body.tema-on[data-tm-sfondo="immagine"]::before { background-image: none; } } /* ════════════════════════════════════════════════════════════ 2. LA TESTATA — che cosa c'è dentro `data-tm-testata` (piena/barra/minima) governa QUANTO spazio prende. Questo governa COSA c'è. Sono due domande diverse e servono entrambe: un festival può volere la composizione «festival» dentro una testata «barra», perché ha molte date da mostrare sotto. ════════════════════════════════════════════════════════════ */ /* ─── Solo logo ────────────────────────────────────────────── Quando il logo dice già il nome, scriverlo sotto lo ripete. */ body.tema-on[data-tm-intestazione="logo"] header h1 { display: none; } body.tema-on[data-tm-intestazione="logo"] header img { height: 78px; margin-bottom: 0; } /* ─── Logo e nome in riga ──────────────────────────────────── La testata più bassa che si possa avere senza rinunciare al nome. */ body.tema-on[data-tm-intestazione="logoNome"] header > div > div[class*="cursor-pointer"] { flex-direction: row; align-items: center; gap: 12px; } body.tema-on[data-tm-intestazione="logoNome"] header img { height: 40px; margin-bottom: 0; } body.tema-on[data-tm-intestazione="logoNome"] header h1 { font-size: 19px !important; text-align: left; line-height: 1.08; } body.tema-on[data-tm-intestazione="logoNome"] header h1 span { font-size: 12px; } /* ─── Solo testo ───────────────────────────────────────────── Il nome scritto grande È l'identità: nessun logo da caricare, che per un comune o una pro loco è spesso l'ostacolo che ferma tutto. */ body.tema-on[data-tm-intestazione="testo"] header img { display: none; } body.tema-on[data-tm-intestazione="testo"] header h1 { font-size: 34px !important; letter-spacing: -.02em; line-height: .98; } body.tema-on[data-tm-intestazione="testo"] header h1 span { font-size: 13px; letter-spacing: .06em; margin-top: 8px; } /* ─── Festival ─────────────────────────────────────────────── Nome, claim, edizione, date e luogo composti insieme. La composizione la fa Hedrapp: chi la configura scrive cinque campi, non sposta cinque riquadri. È l'intera differenza con un editor libero. */ body.tema-on[data-tm-intestazione="festival"] header > div > div[class*="cursor-pointer"] { gap: 10px; } body.tema-on[data-tm-intestazione="festival"] header img { height: 52px; margin-bottom: 2px; } body.tema-on[data-tm-intestazione="festival"] header h1 { font-size: 30px !important; letter-spacing: -.015em; line-height: .96; } body.tema-on[data-tm-intestazione="festival"] header h1 span { font-size: 12px; letter-spacing: .05em; } .tm-testata-festival { display: none; width: 100%; margin-top: 10px; text-align: center; } body.tema-on[data-tm-intestazione="festival"] .tm-testata-festival { display: block; } .tm-testata-festival__claim { font-size: 13px; line-height: 1.35; font-weight: 600; color: var(--tk-textDarkTesto); margin: 0 auto; max-width: 30ch; } /* Edizione, date e luogo su una riga sola, separati da un filetto: tre righe sotto il nome allontanano il primo evento di quaranta pixel, e sopra la piega quaranta pixel sono un evento in meno che si vede. */ .tm-testata-festival__riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin-top: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--tk-primaryTesto); } .tm-testata-festival__riga > span + span::before { content: ''; display: inline-block; width: 1px; height: 10px; margin-right: 10px; vertical-align: -1px; background: currentColor; opacity: .35; } /* ─── Locandina / Immagine di testata ─────────────────────── L'immagine del cliente a tutta larghezza, il nome sopra. Si mostra in due casi (vedi `heroTestataAttiva` in app.js): la composizione `intestazione: 'locandina'`, oppure — indipendentemente da quale composizione sia scelta — un'immagine caricata esplicitamente dalla sezione Studio «Immagine di testata». Sono lo STESSO elemento: non c'è un secondo hero da tenere allineato. */ .tm-testata-hero { display: none; } :is(body.tema-on[data-tm-intestazione="locandina"], body.tema-on[data-tm-hero-immagine="1"]) .tm-testata-hero { display: block; position: relative; /* Negativi pari al `px-6` della testata: l'immagine deve toccare i bordi del guscio, o sembra una fotografia incorniciata invece che una locandina. */ margin: -40px -24px 0; overflow: hidden; } :is(body.tema-on[data-tm-intestazione="locandina"], body.tema-on[data-tm-hero-immagine="1"]) .tm-testata-hero { /* 4/3 è anche il valore di `heroAltezza: 'equilibrato'` — lo stesso numero, non una coincidenza: prima che l'altezza fosse una dimensione a parte, questo ERA il rapporto fisso. Un cliente che non sceglie niente non si sposta di un pixel. */ aspect-ratio: 4 / 3; background: var(--tk-lightBg); } :is(body.tema-on[data-tm-intestazione="locandina"], body.tema-on[data-tm-hero-immagine="1"]) .tm-testata-hero__fondale { position:absolute; inset:-18px; z-index:0; background-image:var(--tm-hero-bg); background-size:cover; background-position:center; filter:blur(18px) saturate(.9); opacity:.42; transform:scale(1.08); } :is(body.tema-on[data-tm-intestazione="locandina"], body.tema-on[data-tm-hero-immagine="1"]) .tm-testata-hero img { position:relative; z-index:1; display:block; width:100%; height:100%; } /* Tre parole comprensibili al cliente, tre comportamenti non distruttivi. `auto` e `intera` mostrano sempre tutto il file; auto completa gli spazi col fondale sfocato, intera con la palette. `riempi` usa cover e permette focal point/zoom senza mai modificare l'originale in R2. */ body.tema-on[data-tm-hero-modalita="auto"] .tm-testata-hero img, body.tema-on[data-tm-hero-modalita="intera"] .tm-testata-hero img { object-fit:contain; object-position:center; transform:none; } body.tema-on[data-tm-hero-modalita="riempi"] .tm-testata-hero img { object-fit:cover; object-position:var(--tm-hero-x,50%) var(--tm-hero-y,50%); transform:scale(var(--tm-hero-zoom,1)); transform-origin:var(--tm-hero-x,50%) var(--tm-hero-y,50%); } body.tema-on[data-tm-hero-modalita="intera"] .tm-testata-hero__fondale, body.tema-on[data-tm-hero-sfondo="palette"] .tm-testata-hero__fondale { display:none; } body.tema-on[data-tm-hero-sfondo="palette"] .tm-testata-hero { background:var(--tk-lightBg); } body.tema-on[data-tm-hero-sfondo="sfocato"] .tm-testata-hero__fondale, body.tema-on[data-tm-hero-sfondo="auto"] .tm-testata-hero__fondale { display:block; } /* Il velo esiste perché il nome sopra dev'essere leggibile su QUALUNQUE immagine, comprese quelle chiare: senza, metà dei clienti otterrebbe un titolo bianco su cielo bianco e non avrebbe modo di saperlo. */ :is(body.tema-on[data-tm-intestazione="locandina"], body.tema-on[data-tm-hero-immagine="1"]) .tm-testata-hero::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .28) 42%, rgba(0, 0, 0, 0) 72%); } :is(body.tema-on[data-tm-intestazione="locandina"], body.tema-on[data-tm-hero-immagine="1"]) .tm-testata-hero__testo { position: absolute; left: 20px; right: 20px; /* In percentuale e non in px: deve restare SOPRA la linea di stacco più profonda (y=0.78, vedi il vincolo su HERO_FORMA in preset.js) su qualunque altezza — un valore fisso funzionava col solo bordo dritto di prima, ma su `compatto` (poche decine di px) sarebbe finito fuori dal riquadro, e su `impatto` sarebbe finito dentro il taglio. */ bottom: 18%; z-index: 3; text-align: left; color: #fff; } :is(body.tema-on[data-tm-intestazione="locandina"], body.tema-on[data-tm-hero-immagine="1"]) .tm-testata-hero__nome { font-size: 26px; font-weight: 800; line-height: 1.02; letter-spacing: -.01em; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); } :is(body.tema-on[data-tm-intestazione="locandina"], body.tema-on[data-tm-hero-immagine="1"]) .tm-testata-hero__sotto { font-size: 11.5px; font-weight: 600; opacity: .92; margin-top: 3px; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); } /* Col hero il blocco logo+nome sopra sarebbe il nome scritto due volte. */ :is(body.tema-on[data-tm-intestazione="locandina"], body.tema-on[data-tm-hero-immagine="1"]) header > div > div[class*="cursor-pointer"] { display: none; } :is(body.tema-on[data-tm-intestazione="locandina"], body.tema-on[data-tm-hero-immagine="1"]) header { padding-top: 40px; } /* I fianchi tornano SIMMETRICI quando c'è la locandina in testata. `.tm-testata-hero` esce dal rientro della testata con `margin: 0 -24px`, un negativo calibrato sul `px-6` del markup. Ma `testata: 'barra'` (temi.css) porta il rientro a 14px a sinistra e **92px a destra**, per lasciare spazio al selettore di lingua: sotto quella testata il negativo di 24px sfonda di 9px a sinistra e lascia 69px di pagina a destra. Misurato in un browser vero — testata larga 330px invece di 388, con origine a x = -9 — su `agenda` e `vetrina`, cioè su cinque proposte Automatiche su sei: la locandina usciva tagliata da un lato e con una banda di fondo dall'altro, che è esattamente il difetto che questo lavoro sta chiudendo. Quei 92px non servono qui: il blocco logo+nome che dovevano proteggere è già `display: none` due regole più sopra, e il selettore di lingua è `position: absolute` — non occupa flusso. Restano quindi 24px per parte, che è il valore su cui il negativo è tarato. */ :is(body.tema-on[data-tm-intestazione="locandina"], body.tema-on[data-tm-hero-immagine="1"]) header { padding-left: 24px; padding-right: 24px; } /* Sul piano base il marchio resta SOPRA la locandina, in una fascia propria: non copre il visual e non sparisce nel crop. */ :is(body.tema-on[data-tm-intestazione="locandina"], body.tema-on[data-tm-hero-immagine="1"])[data-tm-marchio="completo"] header { padding-top: 0; } :is(body.tema-on[data-tm-intestazione="locandina"], body.tema-on[data-tm-hero-immagine="1"])[data-tm-marchio="completo"] .tm-marchio-alto { margin: 0 -24px; position: relative; z-index: 5; } :is(body.tema-on[data-tm-intestazione="locandina"], body.tema-on[data-tm-hero-immagine="1"])[data-tm-marchio="completo"] .tm-testata-hero { margin-top: 0; } /* ─── Immagine di testata: altezza ─────────────────────────── `equilibrato` (il predefinito) è il 4/3 fissato sopra: nessuna regola qui per lui, stessa garanzia di ogni altro predefinito. Le altre tre sovrascrivono SOLO `aspect-ratio`, quindi funzionano identiche sotto qualunque linea di stacco scelta più sotto. */ body.tema-on[data-tm-heroaltezza="compatto"] .tm-testata-hero { aspect-ratio: 21 / 9; } body.tema-on[data-tm-heroaltezza="ampio"] .tm-testata-hero { aspect-ratio: 1 / 1; } body.tema-on[data-tm-heroaltezza="impatto"] .tm-testata-hero { aspect-ratio: 3 / 4; } /* ─── Immagine di testata: la linea di stacco ──────────────── `dritto` (il predefinito) non ha regola: il rettangolo di sempre. Le altre nove sono un `clip-path` verso lo sprite iniettato da app.js (`iniettaSpriteTagliTestata()`, coordinate in preset.js — un solo posto, vedi `HERO_FORMA`). `objectBoundingBox` fa sì che il ritaglio segua la larghezza reale dell'header a ogni breakpoint, senza bisogno di media query: è SVG, non un'immagine, quindi non sfoca e non pixela. Il velo (`::after`) e il testo restano SOPRA il taglio: sono elementi diversi con lo stesso genitore, non parte dell'immagine ritagliata. */ body.tema-on[data-tm-heroforma="diagonale-sx"] .tm-testata-hero { clip-path: url(#hd-taglio-diagonale-sx); } body.tema-on[data-tm-heroforma="diagonale-dx"] .tm-testata-hero { clip-path: url(#hd-taglio-diagonale-dx); } body.tema-on[data-tm-heroforma="onda-morbida"] .tm-testata-hero { clip-path: url(#hd-taglio-onda-morbida); } body.tema-on[data-tm-heroforma="onda-dinamica"] .tm-testata-hero { clip-path: url(#hd-taglio-onda-dinamica); } body.tema-on[data-tm-heroforma="arco"] .tm-testata-hero { clip-path: url(#hd-taglio-arco); } body.tema-on[data-tm-heroforma="arco-inverso"] .tm-testata-hero { clip-path: url(#hd-taglio-arco-inverso); } body.tema-on[data-tm-heroforma="morbido-asimmetrico"] .tm-testata-hero { clip-path: url(#hd-taglio-morbido-asimmetrico); } body.tema-on[data-tm-heroforma="doppia-onda"] .tm-testata-hero { clip-path: url(#hd-taglio-doppia-onda); } body.tema-on[data-tm-heroforma="editoriale"] .tm-testata-hero { clip-path: url(#hd-taglio-editoriale); } /* ════════════════════════════════════════════════════════════ 3. LA NAVIGAZIONE Gli stessi pulsanti, dieci linguaggi grafici. `classico` non compare qui: sono le pastiglie di solo testo di oggi, disegnate dalle utility Tailwind già scritte nel markup. TUTTI I COLORI VENGONO DAI TOKEN. Nessun esadecimale in questo blocco: è la ragione per cui la navigazione cambia insieme al kit, a differenza dei cerchi della barra in basso che hanno lo sfondo in `style=` inline e restano fissi (vedi CLAUDE.md). ════════════════════════════════════════════════════════════ */ .tmnav__segno { display: block; flex: none; } /* La griglia della barra. Vale per tutti gli stili tranne `classico`, che resta la fila di pastiglie a capo automatico di oggi. */ body.tema-on:not([data-tm-nav="classico"]) .tmnav { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 14px; } /* ── La barra larga quanto la testata — SOLO per l'Automatico ────── `.tmnav` vive dentro un `flex flex-col items-center` (la testata in `index.html`): come figlio di un contenitore che centra, si restringe attorno a ciò che contiene. Misurato in un browser vero: con tre voci ogni `.tmnav__voce` usciva larga 45px, mentre sotto ce n'erano 342 disponibili. È DA LÌ che nascevano i troncamenti — «COME PRE…», «POSIZI…» — non dalle etichette troppo lunghe: a 45px non ci sta nemmeno «Posizione». Scopato a `[data-theme-source="auto"]` e non globale, di proposito. La correzione è un miglioramento anche per il Manuale, ma sposta un cliente che ha già pubblicato un tema con una nav a icone: misurato sulla baseline Manuale, 19 scenari su 36 cambiavano. Il Manuale non si tocca per correggere l'Automatico — è la regola che una tornata precedente ha già pagato. Il difetto resta aperto per il Manuale, ed è una decisione a parte (vedi l'handoff, §7). `classico` resta fuori da entrambi i selettori e non si sposta mai. */ body.tema-on[data-theme-source="auto"]:not([data-tm-nav="classico"]) .tmnav { width: 100%; } body.tema-on:not([data-tm-nav="classico"]) .tmnav__voce { /* Le utility della pastiglia di oggi vanno spente una per una: sono scritte nel markup e nessuna scelta di stile può toglierle da lì. */ background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; flex: 1 1 0; min-width: 0; /* 44px è il bersaglio minimo per un dito, e non è negoziabile: una barra di icone belle che si sbaglia a premere è peggio delle pastiglie di testo che sostituisce. */ min-height: 44px; color: var(--tk-primaryTesto); text-transform: none; letter-spacing: 0; } body.tema-on:not([data-tm-nav="classico"]) .tmnav__testo { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.15; text-align: center; /* Un'etichetta che va a capo alza una voce sola e sfalsa tutta la barra: si taglia. Il nome intero resta nel `title` e nell'aria-label. L'Automatico non taglia — vedi il blocco scopato più sotto. */ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Due righe riservate invece del taglio coi puntini — SOLO Automatico, per la stessa ragione della larghezza qui sopra. Lo spazio è riservato per TUTTE le voci, quindi la barra resta dritta anche se una va a capo: era quella la ragione giusta per cui il Manuale taglia. Resta la rete per l'etichetta libera («Pulsante tuo»), lunga a piacere. */ body.tema-on[data-theme-source="auto"]:not([data-tm-nav="classico"]) .tmnav__testo { white-space: normal; overflow-wrap: break-word; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.3em; } body.tema-on:not([data-tm-nav="classico"]) .tmnav__cerchio { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; transition: background-color .18s, color .18s, box-shadow .18s; } /* ─── Le dieci famiglie ────────────────────────────────────── Ognuna cambia almeno tre cose fra: forma e riempimento del contorno, dimensione del segno, peso e spaziatura dell'etichetta. Due stili che differiscono per il solo spessore del tratto non sono due stili. ═══ I COLORI SI PESCANO DA UN VOCABOLARIO RISTRETTO ═══ Un kit può essere chiaro, scuro o a tinta piena, e i token cambiano ruolo fra i tre. Solo queste relazioni valgono in TUTTI E TRE: · `primary` e `textDark` sono sempre abbastanza scuri da reggere il bianco sopra — è la condizione con cui li calcola il generatore; · `primaryTesto`, `textDarkTesto` e `terracotta` passano sempre AA sia su `bgBottom` sia su `superficie` — stessa garanzia; · `bgBottom` e `superficie` invece sono chiari su un kit chiaro e scuri su uno saturo: da soli non dicono niente. Quindi una coppia (sfondo, segno) è sicura solo se prende un termine dal primo gruppo e uno dal secondo. Tre schemi, e nient'altro: PIENO background: terracotta → color: superficie TENUE background: superficie → color: primaryTesto CONTORNO box-shadow: primaryTesto → color: primaryTesto (eredita) NON è pignoleria. La prima stesura usava `background: var(--tk-primary)` per lo stile «Festival»: su un kit chiaro è un cerchio scuro che si stacca, su un kit a tinta piena `primary` è a un passo dal fondo — e i cerchi sparivano nella pagina. Si vedeva solo aprendo l'app con quel kit, che è esattamente ciò che nessuno fa per dieci stili × sessanta- quattro kit. `verifica-preset.js` pretende ora questo vocabolario. */ /* 1. Linea — nessun contorno, il segno da solo. */ body.tema-on[data-tm-nav="linea"] .tmnav__cerchio { width: 26px; height: 26px; } body.tema-on[data-tm-nav="linea"] .tmnav__testo { font-weight: 600; letter-spacing: .02em; } /* 2. Morbido — riquadro smussato in tinta tenue. */ body.tema-on[data-tm-nav="morbido"] .tmnav__cerchio { border-radius: 13px; background: var(--tk-superficie); color: var(--tk-primaryTesto); } body.tema-on[data-tm-nav="morbido"] .tmnav__voce[aria-current="true"] .tmnav__cerchio { background: var(--tk-terracotta); color: var(--tk-superficie); } /* 3. Pieno — sagome piene, nessun contorno, etichetta pesante. */ body.tema-on[data-tm-nav="pieno"] .tmnav__cerchio { width: 28px; height: 28px; } body.tema-on[data-tm-nav="pieno"] .tmnav__testo { font-weight: 800; letter-spacing: .06em; } /* 4. Geometrico — quadrato di filo, angoli vivi. */ body.tema-on[data-tm-nav="geometrico"] .tmnav__cerchio { border-radius: 0; width: 32px; height: 32px; box-shadow: inset 0 0 0 1.5px var(--tk-primaryTesto); } body.tema-on[data-tm-nav="geometrico"] .tmnav__testo { letter-spacing: .1em; font-weight: 700; } body.tema-on[data-tm-nav="geometrico"] .tmnav__voce[aria-current="true"] .tmnav__cerchio { background: var(--tk-terracotta); color: var(--tk-superficie); box-shadow: none; } /* 5. Festival — cerchio pieno d'accento, etichetta spaziata. */ body.tema-on[data-tm-nav="festival"] .tmnav__cerchio { background: var(--tk-terracotta); color: var(--tk-superficie); width: 38px; height: 38px; } body.tema-on[data-tm-nav="festival"] .tmnav__testo { letter-spacing: .14em; font-weight: 800; font-size: 8.5px; } body.tema-on[data-tm-nav="festival"] .tmnav__voce[aria-current="true"] .tmnav__cerchio { box-shadow: 0 0 0 3px var(--tk-superficie); } /* 6. Premium — filo capillare, molta aria, etichetta piccolissima. */ body.tema-on[data-tm-nav="premium"] .tmnav__cerchio { width: 36px; height: 36px; box-shadow: inset 0 0 0 1px var(--tk-primaryTesto); opacity: .92; } body.tema-on[data-tm-nav="premium"] .tmnav__testo { font-size: 8px; font-weight: 600; letter-spacing: .18em; } body.tema-on[data-tm-nav="premium"] .tmnav { gap: 8px; } /* 7. Giocoso — cerchi vivaci, segni grossi, etichetta tonda. */ body.tema-on[data-tm-nav="giocoso"] .tmnav__cerchio { background: var(--tk-terracotta); color: var(--tk-superficie); width: 42px; height: 42px; } body.tema-on[data-tm-nav="giocoso"] .tmnav__testo { font-size: 9.5px; font-weight: 800; letter-spacing: 0; text-transform: none; } body.tema-on[data-tm-nav="giocoso"] .tmnav__voce[aria-current="true"] .tmnav__cerchio { transform: scale(1.08); box-shadow: 0 6px 16px rgba(0, 0, 0, .16); } /* 8. App — la barra che tutti conoscono dal telefono. */ body.tema-on[data-tm-nav="app"] .tmnav__cerchio { border-radius: 10px; width: 44px; height: 30px; background: transparent; } body.tema-on[data-tm-nav="app"] .tmnav__voce[aria-current="true"] .tmnav__cerchio { background: var(--tk-superficie); color: var(--tk-primaryTesto); } body.tema-on[data-tm-nav="app"] .tmnav__testo { font-size: 9.5px; font-weight: 600; text-transform: none; letter-spacing: 0; } /* 9. Contorno — cerchio vuoto col segno dentro. */ body.tema-on[data-tm-nav="contorno"] .tmnav__cerchio { box-shadow: inset 0 0 0 1.5px var(--tk-primaryTesto); width: 36px; height: 36px; } body.tema-on[data-tm-nav="contorno"] .tmnav__voce[aria-current="true"] .tmnav__cerchio { background: var(--tk-terracotta); color: var(--tk-superficie); box-shadow: none; } /* 10. Pastiglia — segno e scritta AFFIANCATI dentro una pastiglia piena. È l'unica che cambia la disposizione e non solo la pittura: proprio per questo si legge subito come un'altra famiglia. */ body.tema-on[data-tm-nav="pastiglia"] .tmnav { gap: 6px; } body.tema-on[data-tm-nav="pastiglia"] .tmnav__voce { flex-direction: row; flex: 0 1 auto; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--tk-superficie); color: var(--tk-primaryTesto); } body.tema-on[data-tm-nav="pastiglia"] .tmnav__cerchio { width: 18px; height: 18px; } body.tema-on[data-tm-nav="pastiglia"] .tmnav__testo { font-size: 10px; letter-spacing: .04em; } body.tema-on[data-tm-nav="pastiglia"] .tmnav__voce[aria-current="true"] { background: var(--tk-terracotta); color: var(--tk-superficie); } /* Il pulsante «Altro» e il suo pannello. Esiste perché nessuno possa comporre per sbaglio una barra con dodici icone da tre millimetri: oltre la quinta voce si raccolgono qui. */ .tmnav__altro-pannello { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: 100%; margin-top: 8px; padding-top: 8px; /* La superficie e non una tonalità della ramp: `superficie` è per costruzione diversa dal fondo in tutti e tre i tipi di kit, una `stone-200` no — su un kit a tinta piena è chiara quanto il fondo. */ border-top: 1px solid var(--tk-superficie); } /* ════════════════════════════════════════════════════════════ 4. LE FORME Raggi, bordi, ombre e densità cambiano INSIEME. Non si espone uno slider per ciascuno: chi non fa il grafico non sa che vanno insieme, e chi lo sa non usa uno slider. È la differenza fra «scegli Editoriale» e «imposta border-radius 17, padding 26, ombra 0.04». ════════════════════════════════════════════════════════════ */ /* Le classi di raggio compilate da Tailwind che il markup usa davvero. Elencarle una volta qui evita di riscriverle in ognuna delle nove forme — e soprattutto evita che una forma ne dimentichi una e lasci un angolo tondo in mezzo a nove squadrati. IL `:not([data-tm-forme="classico"])` NON È PIGNOLERIA. Scritta come `[data-tm-forme]` e basta, questa regola valeva anche per il default: `--tm-raggio` lì non esiste, quindi ogni `rounded-*` della pagina sarebbe caduto sul valore di ripiego — cioè TUTTI i clienti già pubblicati avrebbero cambiato angoli al primo deploy, che è esattamente ciò che il motore promette di non fare mai. L'ha trovato `verifica-preset.js`, non una rilettura del CSS. */ body.tema-on[data-tm-forme]:not([data-tm-forme="classico"]) :is( .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl, .rounded-\[16px\], .rounded-\[24px\], .rounded-t-3xl ) { border-radius: var(--tm-raggio, 12px); } /* ─── Morbido ───────────────────────────────────────────────── */ body.tema-on[data-tm-forme="morbido"] { --tm-raggio: 24px; } body.tema-on[data-tm-forme="morbido"] .rounded-full { border-radius: 999px; } body.tema-on[data-tm-forme="morbido"] .shadow-sm { box-shadow: 0 4px 14px rgba(0, 0, 0, .05); } /* ─── Squadrato — nessun angolo tondo. Nemmeno le pastiglie: una pastiglia tonda in mezzo a venti rettangoli si nota più di quanto sembri, ed è esattamente il difetto che fa dire «non è cambiato niente». Le pastiglie di stato restano tonde, perché sono il segnale e non la forma. ───────────────────────────────────────────── */ body.tema-on[data-tm-forme="squadrato"] { --tm-raggio: 0px; } body.tema-on[data-tm-forme="squadrato"] .rounded-full:not(.w-1\.5) { border-radius: 3px; } body.tema-on[data-tm-forme="squadrato"] .shadow-sm, body.tema-on[data-tm-forme="squadrato"] .shadow-md { box-shadow: none; } /* ─── Geometrico — bordi netti e spessi, niente ombre. ──────── */ body.tema-on[data-tm-forme="geometrico"] { --tm-raggio: 2px; } body.tema-on[data-tm-forme="geometrico"] .rounded-full:not(.w-1\.5) { border-radius: 2px; } body.tema-on[data-tm-forme="geometrico"] .border { border-width: 2px; } body.tema-on[data-tm-forme="geometrico"] .shadow-sm, body.tema-on[data-tm-forme="geometrico"] .shadow-md, body.tema-on[data-tm-forme="geometrico"] .shadow-lg { box-shadow: none; } /* ─── Editoriale — filetti al posto delle scatole. ──────────── */ body.tema-on[data-tm-forme="editoriale"] { --tm-raggio: 0px; } body.tema-on[data-tm-forme="editoriale"] .shadow-sm, body.tema-on[data-tm-forme="editoriale"] .shadow-md { box-shadow: none; } body.tema-on[data-tm-forme="editoriale"] .border { border-width: 0 0 1px 0; } body.tema-on[data-tm-forme="editoriale"] main { padding-left: 26px; padding-right: 26px; } /* ─── Organico — angoli larghi e asimmetrici, nessun bordo. ─── */ body.tema-on[data-tm-forme="organico"] { --tm-raggio: 26px 32px 26px 32px; } body.tema-on[data-tm-forme="organico"] .border { border-color: transparent; } body.tema-on[data-tm-forme="organico"] .shadow-sm { box-shadow: 0 8px 26px rgba(0, 0, 0, .06); } /* ─── Minimal — via ombre e bordi, resta il contenuto. ──────── */ body.tema-on[data-tm-forme="minimal"] { --tm-raggio: 8px; } body.tema-on[data-tm-forme="minimal"] .shadow-sm, body.tema-on[data-tm-forme="minimal"] .shadow-md, body.tema-on[data-tm-forme="minimal"] .shadow-lg, body.tema-on[data-tm-forme="minimal"] .shadow-xl { box-shadow: none; } body.tema-on[data-tm-forme="minimal"] .border { border-color: transparent; } /* ─── Deciso — bordi grossi e ombre marcate. ────────────────── */ body.tema-on[data-tm-forme="deciso"] { --tm-raggio: 14px; } body.tema-on[data-tm-forme="deciso"] .border { border-width: 2.5px; } body.tema-on[data-tm-forme="deciso"] .shadow-sm { box-shadow: 0 6px 0 rgba(0, 0, 0, .1); } /* ─── Elegante — filetti chiari e molta aria. ───────────────── */ body.tema-on[data-tm-forme="elegante"] { --tm-raggio: 6px; } body.tema-on[data-tm-forme="elegante"] .border { border-width: 1px; opacity: 1; } body.tema-on[data-tm-forme="elegante"] .shadow-sm { box-shadow: 0 1px 3px rgba(0, 0, 0, .04); } body.tema-on[data-tm-forme="elegante"] main { padding: 30px 26px; } body.tema-on[data-tm-forme="elegante"] .p-2\.5 { padding: 14px; } /* ─── Compatto — tutto più stretto: più eventi visibili. ────── */ body.tema-on[data-tm-forme="compatto"] { --tm-raggio: 10px; } body.tema-on[data-tm-forme="compatto"] main { padding: 12px; padding-top: 14px; } body.tema-on[data-tm-forme="compatto"] .p-2\.5 { padding: 7px; } body.tema-on[data-tm-forme="compatto"] .space-y-2 > * + * { margin-top: 5px; } body.tema-on[data-tm-forme="compatto"] header { padding-top: 18px; } /* ════════════════════════════════════════════════════════════ 5. LA TIPOGRAFIA Il font resta una scelta a parte: è il nome che il cliente conosce. Qui si governa il resto — scala, peso, spaziatura, maiuscole, rapporto fra titolo e testo. Sono le decisioni che distinguono chi fa il grafico da chi ha scelto un bel font, e non si possono chiedere a chi non lo è. ════════════════════════════════════════════════════════════ */ /* ─── Editoriale — titoli grandi e stretti, testo generoso. ── */ body.tema-on[data-tm-tipo="editoriale"] header h1 { font-size: 32px !important; letter-spacing: -.025em; line-height: .98; } body.tema-on[data-tm-tipo="editoriale"] .space-y-2 p.font-semibold { font-size: 16px; letter-spacing: -.01em; } body.tema-on[data-tm-tipo="editoriale"] main { font-size: 14.5px; line-height: 1.6; } body.tema-on[data-tm-tipo="editoriale"] h3 { letter-spacing: .04em; } /* ─── Festival — titoli pesanti in maiuscolo, molto spaziati. ─ */ body.tema-on[data-tm-tipo="festival"] header h1 { font-size: 30px !important; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; line-height: .95; } body.tema-on[data-tm-tipo="festival"] .space-y-2 p.font-semibold { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; } body.tema-on[data-tm-tipo="festival"] h3 { font-weight: 900; letter-spacing: .16em; } /* ─── Elegante — pesi leggeri, lettere distanziate. ─────────── */ body.tema-on[data-tm-tipo="elegante"] header h1 { font-weight: 400 !important; letter-spacing: .1em; font-size: 24px !important; } body.tema-on[data-tm-tipo="elegante"] .space-y-2 p.font-semibold { font-weight: 500; letter-spacing: .03em; } body.tema-on[data-tm-tipo="elegante"] h3 { font-weight: 500; letter-spacing: .2em; } body.tema-on[data-tm-tipo="elegante"] .font-bold { font-weight: 600; } /* ─── Minimal — un peso solo, titoli appena più grandi. ─────── */ body.tema-on[data-tm-tipo="minimal"] header h1 { font-size: 20px !important; font-weight: 600 !important; letter-spacing: 0; text-transform: none; } body.tema-on[data-tm-tipo="minimal"] .font-extrabold, body.tema-on[data-tm-tipo="minimal"] .font-bold { font-weight: 600; } body.tema-on[data-tm-tipo="minimal"] .space-y-2 p.font-semibold { font-size: 14px; font-weight: 600; } body.tema-on[data-tm-tipo="minimal"] .uppercase { text-transform: none; letter-spacing: 0; } /* ─── Amichevole — testo più grande e righe più larghe. Non è un vezzo: è la tipografia per il pubblico anziano di una pro loco e per i bambini di un teatro ragazzi, che sono due dei casi d'uso veri di questo prodotto. ────────────────────────────── */ body.tema-on[data-tm-tipo="amichevole"] main { font-size: 15.5px; line-height: 1.68; } body.tema-on[data-tm-tipo="amichevole"] .space-y-2 p.font-semibold { font-size: 16.5px; } body.tema-on[data-tm-tipo="amichevole"] .text-\[10\.5px\] { font-size: 13px; } body.tema-on[data-tm-tipo="amichevole"] .text-\[9px\] { font-size: 11.5px; } body.tema-on[data-tm-tipo="amichevole"] button { font-size: 14px; } body.tema-on[data-tm-tipo="amichevole"] header h1 { font-size: 25px !important; } /* ─── Moderno — titoli molto grandi e stretti, testo piccolo. ─ */ body.tema-on[data-tm-tipo="moderno"] header h1 { font-size: 38px !important; font-weight: 800 !important; letter-spacing: -.04em; line-height: .9; } body.tema-on[data-tm-tipo="moderno"] .space-y-2 p.font-semibold { font-size: 15px; letter-spacing: -.02em; font-weight: 700; } body.tema-on[data-tm-tipo="moderno"] main { font-size: 13px; } body.tema-on[data-tm-tipo="moderno"] h3 { font-size: 10px; letter-spacing: .22em; } /* ════════════════════════════════════════════════════════════ 6. LE SCHEDE EVENTO L'elemento più guardato dell'app: è lì che si decide se prenotare. Il markup è uno solo (`.space-y-2 > div`, con miniatura, testo e pastiglia di stato): qui cambia come si dispone, non che cosa contiene. Un secondo markup per ogni scheda avrebbe voluto dire dieci copie da tenere allineate a ogni modifica del prodotto. ════════════════════════════════════════════════════════════ */ /* ─── Locandina — il manifesto domina, il testo sotto. ──────── Il tetto di 300px non è un'arrotondatura estetica: a piena larghezza un 3:4 su una colonna da 448px è alto 336px più il testo, cioè UNA scheda per schermata. Un elenco in cui non si vede mai il secondo evento non è un elenco, e lo si scopre solo guardando la pagina — l'ha mostrato la fotografia del modello «Teatro», non il CSS. */ body.tema-on[data-tm-card="locandina"] .space-y-2 > div > .flex { flex-direction: column; align-items: stretch; gap: 10px; } body.tema-on[data-tm-card="locandina"] .space-y-2 .w-9.h-12 { width: 100%; height: auto; aspect-ratio: 3 / 4; max-height: 300px; border-radius: 12px; box-shadow: none; } body.tema-on[data-tm-card="locandina"] .space-y-2 .w-9.h-12 > span { font-size: 46px; } body.tema-on[data-tm-card="locandina"] .space-y-2 p.font-semibold { font-size: 15px; white-space: normal; } body.tema-on[data-tm-card="locandina"] .space-y-2 .rounded-full.self-center { align-self: flex-start; margin-left: 0; } /* ─── Immagine di lato — grande a sinistra, testo a destra. ─── */ body.tema-on[data-tm-card="laterale"] .space-y-2 .w-9.h-12 { width: 84px; height: 84px; border-radius: 12px; } body.tema-on[data-tm-card="laterale"] .space-y-2 > div { padding: 10px; } body.tema-on[data-tm-card="laterale"] .space-y-2 p.font-semibold { font-size: 15px; white-space: normal; } /* ─── Minimale — nessuna immagine, solo le parole. ──────────── */ body.tema-on[data-tm-card="minimale"] .space-y-2 .w-9.h-12 { display: none; } body.tema-on[data-tm-card="minimale"] .space-y-2 > div { padding: 12px 4px; box-shadow: none !important; background: transparent; border-bottom: 1px solid var(--tk-r-stone-200, #e7e5e4); border-radius: 0; } body.tema-on[data-tm-card="minimale"] .space-y-2 p.font-semibold { font-size: 15.5px; } /* ─── Piena — immagine a tutta scheda, testo sopra. L'unica che sovrappone: la miniatura esce dal flusso e riempie la scheda, il testo ci sale sopra con il suo velo. Serve `position: relative` sulla scheda, che il markup ha già (`relative overflow-hidden` sono classi sue). ─────────────────────────────────────────── */ body.tema-on[data-tm-card="piena"] .space-y-2 > div { padding: 0; min-height: 116px; } body.tema-on[data-tm-card="piena"] .space-y-2 .w-9.h-12 { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; border: 0; box-shadow: none; z-index: 0; } body.tema-on[data-tm-card="piena"] .space-y-2 > div > .flex { position: relative; z-index: 2; align-items: flex-end; min-height: 116px; padding: 12px; background: linear-gradient(to top, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .22) 55%, rgba(0, 0, 0, 0) 100%); } body.tema-on[data-tm-card="piena"] .space-y-2 p.font-semibold, body.tema-on[data-tm-card="piena"] .space-y-2 p.font-semibold > span { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); } body.tema-on[data-tm-card="piena"] .space-y-2 .text-\[10\.5px\] { color: rgba(255, 255, 255, .9); } /* ─── Editoriale — filetto invece della scatola. ────────────── */ body.tema-on[data-tm-card="editoriale"] .space-y-2 > div { background: transparent; box-shadow: none !important; border-radius: 0; padding: 14px 0; border-bottom: 1px solid var(--tk-r-stone-200, #e7e5e4); } body.tema-on[data-tm-card="editoriale"] .space-y-2 .w-9.h-12 { width: 56px; height: 56px; border-radius: 0; } body.tema-on[data-tm-card="editoriale"] .space-y-2 p.font-semibold { font-size: 17px; letter-spacing: -.015em; white-space: normal; } /* ─── Manifesto — cornice spessa, titolo in maiuscolo. ──────── */ body.tema-on[data-tm-card="manifesto"] .space-y-2 > div { border: 2.5px solid var(--tk-textDarkTesto); border-radius: 0; box-shadow: none !important; padding: 12px; } body.tema-on[data-tm-card="manifesto"] .space-y-2 p.font-semibold { text-transform: uppercase; font-weight: 800; letter-spacing: .02em; font-size: 14px; white-space: normal; } body.tema-on[data-tm-card="manifesto"] .space-y-2 .w-9.h-12 { border-radius: 0; width: 52px; height: 68px; } /* ─── Lista — righe fitte, una per evento. ──────────────────── */ body.tema-on[data-tm-card="lista"] .space-y-2 > * + * { margin-top: 0; } body.tema-on[data-tm-card="lista"] .space-y-2 > div { border-radius: 0; box-shadow: none !important; padding: 9px 8px; border-bottom: 1px solid var(--tk-r-stone-100, #f5f5f4); } body.tema-on[data-tm-card="lista"] .space-y-2 .w-9.h-12 { width: 26px; height: 26px; border-radius: 6px; } body.tema-on[data-tm-card="lista"] .space-y-2 p.font-semibold { font-size: 13.5px; } /* ─── Data in evidenza — il blocco della data comanda. La miniatura si spegne e al suo posto compare il giorno, preso dal testo che la scheda ha già. Serve a chi ha repliche fitte: quello che si cerca non è quale spettacolo, è quale sera. ────────────── */ body.tema-on[data-tm-card="data"] .space-y-2 .w-9.h-12 { display: none; } body.tema-on[data-tm-card="data"] .space-y-2 > div > .flex { gap: 12px; } body.tema-on[data-tm-card="data"] .space-y-2 .text-\[10\.5px\] { order: -1; flex: none; width: 58px; padding: 8px 4px; text-align: center; font-size: 12px; font-weight: 800; line-height: 1.2; border-radius: 10px; background: var(--tk-superficie); color: var(--tk-primaryTesto); } body.tema-on[data-tm-card="data"] .space-y-2 > div > .flex > div:nth-child(2) > .flex { flex-direction: column; align-items: flex-start; } body.tema-on[data-tm-card="data"] .space-y-2 p.font-semibold { font-size: 15px; } /* ─── Compatta — come la classica, ma stretta. ──────────────── */ body.tema-on[data-tm-card="compatta"] .space-y-2 > div { padding: 6px; } body.tema-on[data-tm-card="compatta"] .space-y-2 > * + * { margin-top: 4px; } body.tema-on[data-tm-card="compatta"] .space-y-2 .w-9.h-12 { width: 28px; height: 36px; } body.tema-on[data-tm-card="compatta"] .space-y-2 p.font-semibold { font-size: 13px; } /* ════════════════════════════════════════════════════════════ 7. IL MARCHIO HEDRAPP Governato dal PIANO, non dal gusto: il valore arriva dal Worker (`config.piano.marchioHedrapp`) e finisce in `data-tm-marchio`. Non è CSS nascosto — il markup stesso non viene disegnato quando il piano non lo prevede (vedi `marchioHedrapp` in app.js). Queste regole governano solo COME si vede quando c'è. `assente` non compare qui: è il comportamento di oggi, cioè nessun marchio Hedrapp su nessuna app pubblica. ════════════════════════════════════════════════════════════ */ .tm-marchio-alto, .tm-marchio-basso { display: none; } body.tema-on[data-tm-marchio="completo"] .tm-marchio-alto { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; /* Sopra una locandina la striscia deve leggersi senza coprirla: fondo proprio e non trasparenza, perché su un manifesto chiaro un testo chiaro con velo sparisce comunque. */ /* `textDark` regge sempre il bianco sopra: è la condizione con cui il generatore lo calcola, e vale su un kit chiaro come su uno a tinta piena. `cream` invece è bianco solo sui kit chiari — su uno saturo vale `superficie`, cioè scuro, e la striscia sarebbe illeggibile. */ background: var(--tk-textDark); color: #fff; } body.tema-on[data-tm-marchio="completo"] .tm-marchio-alto img, body.tema-on[data-tm-marchio="ridotto"] .tm-marchio-basso img, body.tema-on[data-tm-marchio="completo"] .tm-marchio-basso img { height: 13px; width: auto; } body.tema-on[data-tm-marchio="completo"] .tm-marchio-basso, body.tema-on[data-tm-marchio="ridotto"] .tm-marchio-basso { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 12px 8px; font-size: 10px; font-weight: 600; letter-spacing: .04em; opacity: .62; color: var(--tk-textDarkTesto); } /* ════════════════════════════════════════════════════════════ 8. ACCESSIBILITÀ Vale per tutte le scelte, e non è negoziabile da nessuna di esse: la libertà di stile non arriva a poter comporre una pagina che non si può usare con la tastiera o con un dito. ════════════════════════════════════════════════════════════ */ body.tema-on .tmnav__voce:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { body.tema-on .tmnav__cerchio { transition: none; } body.tema-on[data-tm-nav="giocoso"] .tmnav__voce[aria-current="true"] .tmnav__cerchio { transform: none; } } /* ════════════════════════════════════════════════════════════ 9. REGOLAZIONI AVANZATE GUIDATE Recuperate dal ramo Codex e sovrapposte alle famiglie moderne di stile. I valori "standard" non hanno regole: retrocompatibilità completa. ════════════════════════════════════════════════════════════ */ body.tema-on[data-tm-radius="squadrato"] :is(.rounded-lg,.rounded-xl,.rounded-2xl,.rounded-full) { border-radius: 3px; } body.tema-on[data-tm-radius="leggero"] :is(.rounded-lg,.rounded-xl,.rounded-2xl) { border-radius: 8px; } body.tema-on[data-tm-radius="molto"] :is(.rounded-lg,.rounded-xl,.rounded-2xl) { border-radius: 22px; } body.tema-on[data-tm-radius="molto"] :is(button,input,select,textarea) { border-radius: 16px; } body.tema-on[data-tm-density="compatta"] .tm-main { padding-top: 8px; } body.tema-on[data-tm-density="compatta"] .tm-home .space-y-2 > div { padding-block: 7px; } body.tema-on[data-tm-density="compatta"] .tm-home .space-y-2 { gap: 5px; } body.tema-on[data-tm-density="ariosa"] .tm-main { padding-top: 28px; } body.tema-on[data-tm-density="ariosa"] .tm-home .space-y-2 > div { padding-block: 18px; } body.tema-on[data-tm-density="ariosa"] .tm-home .space-y-2 { gap: 15px; } body.tema-on[data-tm-buttons="soft"] :is(.tm-header,.tm-main,.tm-racconto-barra) button.bg-theatre-primary { background: var(--tk-sage); color: var(--tk-primaryTesto); } body.tema-on[data-tm-buttons="outline"] :is(.tm-header,.tm-main,.tm-racconto-barra) button.bg-theatre-primary { background: transparent; color: var(--tk-primaryTesto); border: 1.5px solid var(--tk-primary); } body.tema-on[data-tm-buttons="pill"] :is(.tm-header,.tm-main,.tm-racconto-barra) button { border-radius: 999px; } body.tema-on[data-tm-buttons="minimal"] :is(.tm-header,.tm-main,.tm-racconto-barra) button.bg-theatre-primary { background: transparent; color: var(--tk-primaryTesto); border-radius: 0; box-shadow: none; border-bottom: 2px solid var(--tk-primary); } body.tema-on[data-tm-images="verticale"] .tm-home .space-y-2 .w-9.h-12 { aspect-ratio: 3 / 4; height: auto; } body.tema-on[data-tm-images="quadrata"] .tm-home .space-y-2 .w-9.h-12 { aspect-ratio: 1; height: auto; } body.tema-on[data-tm-images="arrotondata"] :is(.tm-home .space-y-2 img,.tm-locandina-img) { border-radius: 18px; } body.tema-on[data-tm-images="full-bleed"] .tm-home .space-y-2 .w-9.h-12 { width: 112px; align-self: stretch; height: auto; margin-block: -12px; margin-left: -12px; border-radius: 0; } body.tema-on[data-tm-icons="filled"] .tm-home .space-y-2 .w-9.h-12 > span { display: grid; place-items: center; width: 100%; height: 100%; background: var(--tk-primary); border-radius: inherit; } body.tema-on[data-tm-icons="minimal"] .tm-home .space-y-2 .w-9.h-12 > span { opacity: .55; filter: grayscale(1); } body.tema-on[data-tm-icons="nessuna"] .tm-home .space-y-2 .w-9.h-12 > span { visibility: hidden; } body.tema-on[data-tm-shadows="nessuna"] :is(.tm-home .space-y-2 > div,.tm-racconto-barra) { box-shadow: none; } body.tema-on[data-tm-shadows="media"] :is(.tm-home .space-y-2 > div,.tm-racconto-barra) { box-shadow: 0 14px 34px rgba(15,23,42,.16); } body.tema-on[data-tm-motion="nessuna"] :is(.tm-header,.tm-main,.tm-home *) { animation: none; transition: none; } body.tema-on[data-tm-motion="fluide"] :is(.tm-home .space-y-2 > div,button) { transition-duration: .28s; transition-timing-function: cubic-bezier(.2,.8,.2,1); } body.tema-on[data-tm-motion="fluide"] .tm-home .space-y-2 > div:hover { transform: translateY(-2px); } body.tema-on[data-tm-text="compatta"] :is(.tm-main,.tm-header) { font-size: 14px; } body.tema-on[data-tm-text="grande"] :is(.tm-main,.tm-header) { font-size: 17px; } body.tema-on[data-tm-text="grande"] .tm-home p { line-height: 1.65; } body.tema-on[data-tm-contrast="alto"] :is(.tm-main,.tm-header) { font-weight: 550; } body.tema-on[data-tm-contrast="alto"] :is(.tm-home .space-y-2 > div,input,select,textarea) { border-width: 2px; } body.tema-on[data-tm-background="neutro"] { background: var(--tk-bgBottom); } body.tema-on[data-tm-background="colore"] { background: var(--tk-sage); } body.tema-on[data-tm-background="gradiente"] { background: linear-gradient(145deg,var(--tk-bgTop),var(--tk-sage),var(--tk-bgBottom)); background-attachment: fixed; } body.tema-on[data-tm-logo-size="piccolo"] .tm-header img { height: 48px; } body.tema-on[data-tm-logo-size="grande"] .tm-header img { height: 104px; } body.tema-on[data-tm-logo-position="sinistra"] .tm-header > div:first-child > div[class*="cursor-pointer"] { align-items: flex-start; text-align: left; } body.tema-on[data-tm-logo-position="sinistra"] .tm-header h1 { text-align: left; } body.tema-on[data-tm-cta="soft"] form button[type="submit"] { background: var(--tk-sage); color: var(--tk-primaryTesto); } body.tema-on[data-tm-cta="outline"] form button[type="submit"] { background: transparent; color: var(--tk-primaryTesto); border: 2px solid var(--tk-primary); } /* Automatico Pro receipt: the terminal state consumes the same surface, type and border vocabulary as detail and booking. Scoped to the explicit Pro marker so historical Automatico and Manuale receipts are untouched. */ body.tema-on[data-theme-source="auto-pro"] [data-pro-receipt] { color: var(--tk-textDarkTesto) !important; font-family: var(--tk-fontBody, ui-sans-serif, system-ui, sans-serif) !important; } body.tema-on[data-theme-source="auto-pro"] [data-pro-receipt] :is(.bg-white, .bg-stone-50\/50, .bg-stone-50) { background: var(--tk-superficie) !important; color: var(--tk-textDarkTesto) !important; border-color: var(--tk-chipBordo) !important; } body.tema-on[data-theme-source="auto-pro"] [data-pro-receipt] :is(h2, .archeo-title) { color: var(--tk-primaryTesto) !important; font-family: var(--tk-fontTitle, ui-sans-serif, system-ui, sans-serif) !important; } body.tema-on[data-theme-source="auto-pro"] [data-pro-receipt] [class*="text-stone-"] { color: var(--tk-textDarkTesto) !important; } body.tema-on[data-tm-cta="pill"] form button[type="submit"] { border-radius: 999px; } /* HED-032 — True Responsive Desktop Composition. Two locks were intentional: a closed non-default token AND theme provenance -- but the provenance lock below was written as `[data-theme-source="auto"]` only. `desktopComposizione` (griglia/ rivista/scaffale) is a real, deterministic token, but it is produced by exactly one generator: `deriveDesktopComposition()` in automatico-pro.js. generateFromRecipes() (legacy Automatico) never emits it. The result: the ONE mode that ever actually sets this token was excluded from the ONE system built to render it -- Pro fell back to an undifferentiated width-only layout regardless of which composition the engine had genuinely chosen, which independent review correctly read as "not visibly superior" on two of three tenants. Fixed at the selector (`[data-theme-source="auto"]` -> `:is([data-theme-source="auto"], [data-theme-source="auto-pro"])`, every rule below and in the `@media(min-width:1024px)` block further down) rather than by duplicating the three compositions' grid rules here a second time. Below 1024px there are no declarations at all, so phones and tablets keep the certified renderer byte-for-byte and rule-for-rule. */ @media (min-width: 1024px) { /* Fallback only: every real griglia/rivista/scaffale value now carries higher specificity than these four rules (see the fixed selector above) and wins on any tenant that has one. This still matters for `deriveDesktopComposition()`'s own "mobile" outcome, where Pro deliberately emits no token at all rather than force a composition that doesn't fit -- such a tenant must not fall all the way back to an undifferentiated mobile-width desktop render either. */ body.tema-on[data-theme-source="auto-pro"] #app { width:calc(100% - 64px);max-width:1180px;min-height:100vh; } body.tema-on[data-theme-source="auto-pro"] .tm-main { width:100%;padding-inline:clamp(28px,4vw,64px); } body.tema-on[data-theme-source="auto-pro"] .tm-header > * { max-width:1052px;margin-inline:auto; } body.tema-on[data-theme-source="auto-pro"] .tm-detail { display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,.55fr);align-items:start;gap:20px 28px; } body.tema-on[data-theme-source="auto-pro"] .tm-detail > :first-child { grid-column:1/-1; } body.tema-on[data-theme-source="auto-pro"] .tm-detail > :last-child { grid-column:2;position:sticky;top:24px; } body.tema-on[data-theme-source="auto-pro"] .tm-home { justify-content: flex-start; } body.tema-on[data-theme-source="auto-pro"] .tm-home .tm-pannello { padding: 24px; } body.tema-on[data-theme-source="auto-pro"] .tm-home .tm-pannello > .space-y-2 { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px; } body.tema-on[data-theme-source="auto-pro"] .tm-home .tm-pannello > .space-y-2 > * { margin-top:0; } body.tema-on[data-theme-source="auto-pro"] .tm-home .tm-ev { min-height: 148px; } body.tema-on[data-theme-source="auto-pro"] .tm-home .tm-ev__cta { display: block; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"]):is([data-tm-desktop="griglia"],[data-tm-desktop="rivista"],[data-tm-desktop="scaffale"]) #app { width: calc(100% - 64px); max-width: 1180px; min-height: 100vh; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"]):is([data-tm-desktop="griglia"],[data-tm-desktop="rivista"],[data-tm-desktop="scaffale"]) .tm-main { width: 100%; padding-inline: clamp(28px, 4vw, 64px); } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"]):is([data-tm-desktop="griglia"],[data-tm-desktop="rivista"],[data-tm-desktop="scaffale"]) .tm-header > * { max-width: 1052px; margin-inline: auto; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"]):is([data-tm-desktop="griglia"],[data-tm-desktop="rivista"],[data-tm-desktop="scaffale"]) .tm-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, .55fr); align-items: start; gap: 20px 28px; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"]):is([data-tm-desktop="griglia"],[data-tm-desktop="rivista"],[data-tm-desktop="scaffale"]) .tm-detail > :first-child { grid-column: 1 / -1; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"]):is([data-tm-desktop="griglia"],[data-tm-desktop="rivista"],[data-tm-desktop="scaffale"]) .tm-detail > :last-child { grid-column: 2; position: sticky; top: 24px; } /* Every rule below also targets `.tm-pannello > div > .space-y-1\.5` alongside `.tm-pannello > .space-y-2`: the "agenda" layout family (`layout: 'agenda'`, used by e.g. il-posto-delle-favole) groups events under a month heading, so its real event list is nested one level deeper (`.tm-pannello > div[v-for=month] > .space-y-1.5`), not a direct child of `.tm-pannello`. Without this, griglia/rivista/scaffale never matched anything for an agenda tenant and silently no-opped -- the token was set, the CSS was written, but the two never actually met, which is exactly why an agenda-layout tenant's desktop composition looked unchanged (independent review: "essentially their current site"). Both DOM shapes get identical treatment; a month group simply becomes its own independent grid. */ /* Programme grid: dense comparison, visible actions, wide adjacency. */ body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="griglia"] .tm-home { justify-content: flex-start; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="griglia"] .tm-home .tm-pannello { padding: 22px; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="griglia"] .tm-home .tm-pannello > .space-y-2, body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="griglia"] .tm-home .tm-pannello > div > .space-y-1\.5 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="griglia"] .tm-home .tm-pannello > .space-y-2 > *, body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="griglia"] .tm-home .tm-pannello > div > .space-y-1\.5 > * { margin-top: 0; } /* A month (agenda layout) or the whole panel (other layouts) with exactly one event leaves every column past the first empty -- independent review measured this at ~60% of the flagship desktop capture. A lone card spans the full row instead of sitting alone in the first column. */ body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="griglia"] .tm-home .tm-pannello > .space-y-2 > *:only-child, body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="griglia"] .tm-home .tm-pannello > div > .space-y-1\.5 > *:only-child { grid-column: 1 / -1; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="griglia"] .tm-home .tm-ev { min-height: 132px; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="griglia"] .tm-home .tm-ev__cta { display: block; } /* Magazine: deliberately asymmetric editorial rhythm. */ body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="rivista"] .tm-home { width: 82%; justify-content: flex-start; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="rivista"] .tm-home .tm-pannello { padding: 30px 34px; border-radius: 0; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="rivista"] .tm-home .tm-pannello > .space-y-2, body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="rivista"] .tm-home .tm-pannello > div > .space-y-1\.5 { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(220px, .75fr); gap: 0 32px; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="rivista"] .tm-home .tm-pannello > .space-y-2 > *, body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="rivista"] .tm-home .tm-pannello > div > .space-y-1\.5 > * { margin-top: 0; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="rivista"] .tm-home .tm-pannello > .space-y-2 > :nth-child(3n + 1), body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="rivista"] .tm-home .tm-pannello > div > .space-y-1\.5 > :nth-child(3n + 1) { grid-row: span 2; min-height: 190px; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="rivista"] .tm-detail { grid-template-columns: minmax(0, 1.8fr) minmax(280px, .65fr); } /* Shelves: generous, calm pairs rather than a dense catalogue. */ body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="scaffale"] .tm-home { justify-content: flex-start; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="scaffale"] .tm-home .tm-pannello { padding: 28px; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="scaffale"] .tm-home .tm-pannello > .space-y-2, body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="scaffale"] .tm-home .tm-pannello > div > .space-y-1\.5 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="scaffale"] .tm-home .tm-pannello > .space-y-2 > *, body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="scaffale"] .tm-home .tm-pannello > div > .space-y-1\.5 > * { margin-top: 0; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="scaffale"] .tm-home .tm-pannello > .space-y-2 > *:only-child, body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="scaffale"] .tm-home .tm-pannello > div > .space-y-1\.5 > *:only-child { grid-column: 1 / -1; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="scaffale"] .tm-home .tm-ev { min-height: 178px; padding: 18px; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="scaffale"] .tm-home .tm-ev__art { width: 92px; height: 112px; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="scaffale"] .tm-home .tm-ev__titolo { white-space: normal; font-size: 18px; } body.tema-on:is([data-theme-source="auto"],[data-theme-source="auto-pro"])[data-tm-desktop="scaffale"] .tm-detail { grid-template-columns: minmax(0, 1.35fr) minmax(330px, .75fr); } } body.tema-on[data-theme-source="auto-pro"][data-public-view="receipt"] .tm-header { display:none; } /* Pro forces every primary CTA to one consistent solid `--tk-primary` fill (art-direction.css, §Force the fill for Pro). The FOREGROUND was only pinned to white for two `scalaTipo` values ("sobria", "editoriale"); every other scala/cardFamily left `.tm-cta` / `.tm-ev__cta` inheriting `--tk-primaryTesto` (or, on a light kit where primaryTesto == primary, `primary` itself) over that same `--tk-primary` fill -- HED-040 Opus gate call 1 measured the "Prenota Ora" label at 1.0:1 on `monumentale` (P1 detail) and 1.6:1 on `elegante` (P3 home + detail + booking submit). `--tk-primary` is contract-guaranteed by verifica-temi.js to carry white >= 4.5:1 for every real kit -- which is exactly why Pro fills with it -- so pin the white foreground (and the same solid fill) for EVERY Pro primary CTA surface, under every scala and cardFamily, plus the booking submit whose `buttonStyle:'soft'` otherwise repaints it to sage + primaryTesto (1.66:1 on a dark kit). Scoped entirely to [data-theme-source="auto-pro"]: Manual mode and non-Pro Automatico are untouched. art-direction.css cannot hold the `#fff` literal (verifica-preset.js bans `#rrggbb` there); this file already carries it in other force-overrides. A deterministic gate (frontend/lib/hed-040-cta-contrast-gate.mjs, wired into verifica.sh) re-measures every Pro filled CTA in a real browser so this cannot regress. The extra `[data-tm-cardfam]` (always present on a Pro ) is only for specificity: (0,3,2) wins the `!important` tie against art-direction.css's `[data-tm-scala="sobria"|"editoriale"] .tm-cta` (also (0,2,2) !important). */ body.tema-on[data-theme-source="auto-pro"][data-tm-cardfam] .tm-cta, body.tema-on[data-theme-source="auto-pro"][data-tm-cardfam] .tm-ev__cta, body.tema-on[data-theme-source="auto-pro"] form[data-booking-flow] button[type="submit"] { background: var(--tk-primary) !important; color: #fff !important; border-color: var(--tk-primary) !important; } /* ════════════════════════════════════════════════════════════ Automatic Visual Identity Engine V2 — cssHook delle due Composition Family che non bastano a distinguersi con layout+card esistenti da soli (specifica §14, colonna «CSS nuovo»): `brutalist-culture` ed `timeline`. Nessun `data-tm-*` nuovo — selettori composti sugli attributi ESISTENTI (§5.2 dell'handoff): il predefinito e ogni altra combinazione restano intonsi per costruzione, perché il selettore richiede ENTRAMBI gli attributi insieme. ──────────────────────────────────────────────────────────── */ /* Manifesto (brutalist-culture): essenziale + lista da soli restano due scelte "pulite". Qui si vuole l'opposto — un bordo pieno e uno spigolo che non si arrotonda MAI, anche se `forme` cambiasse idea, perché l'identità di questa famiglia è proprio l'assenza di ogni morbidezza. */ body.tema-on[data-tm-layout="essenziale"][data-tm-card="lista"] .space-y-2 > div { border: 2px solid var(--tk-textDark); border-radius: 0 !important; box-shadow: none !important; } body.tema-on[data-tm-layout="essenziale"][data-tm-card="lista"] .space-y-2 > div + div { margin-top: 10px; } body.tema-on[data-tm-layout="essenziale"][data-tm-card="lista"] .space-y-2 p.font-semibold { text-transform: uppercase; letter-spacing: .04em; } /* Agenda (timeline): agenda + compatta da soli restano righe fitte, non una linea del tempo. Un filo verticale e un pallino per riga bastano a leggerla come sequenza — l'immagine resta a sinistra del filo, non sopra. */ body.tema-on[data-tm-layout="agenda"][data-tm-card="compatta"] .space-y-2 { position: relative; padding-left: 14px; } body.tema-on[data-tm-layout="agenda"][data-tm-card="compatta"] .space-y-2::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: 2px; background: var(--tk-r-stone-300, #d6d3d1); } body.tema-on[data-tm-layout="agenda"][data-tm-card="compatta"] .space-y-2 > div { position: relative; } body.tema-on[data-tm-layout="agenda"][data-tm-card="compatta"] .space-y-2 > div::before { content: ""; position: absolute; left: -14px; top: 50%; width: 8px; height: 8px; transform: translateY(-50%); border-radius: 999px; background: var(--tk-primary); } @media (prefers-reduced-motion: reduce) { body.tema-on[data-tm-motion] :is(.tm-header,.tm-main,.tm-home *) { animation: none; transition: none; scroll-behavior: auto; } body.tema-on[data-tm-motion="fluide"] .tm-home .space-y-2 > div:hover { transform: none; } }