con una classe, NON uno : dentro `.page-card` uno sciolto e' l'OCCHIELLO, e finirebbe in alto in maiuscoletto. */ body.mono-dark-home .page-card .mono-card-firma { color: #A83A28; font-weight: 800; margin-top: 10px; } /* Titolo della fascia serale su /aperitivo/ (28/7). ⚠️ COLORI INVERTITI di proposito rispetto al sistema: qui la PRIMA riga e' terracotta e la SECONDA oro, mentre sulle pagine prodotto la regola generale vuole titolo oro e accento terracotta. E' una scelta sua fatta guardando la pagina, non una svista: se un domani sembra un errore, e' voluta. Terracotta sul buio fa ~3,97 -> regge SOLO perche' e' un titolo grande, non replicare su testo piccolo. */ body.mono-dark-home.aperitivo-page .aperitivo-section-title span { color: var(--accento); display: block; } body.mono-dark-home.aperitivo-page .aperitivo-section-title span + span { color: var(--titolo); } /* "Rito contemporaneo" su /aperitivo/ (28/7): "Resti per un bicchiere." ORO, "Torni per il resto." TERRACOTTA. Qui i colori seguono il sistema NORMALE del sito (titolo = --titolo, accento = --accento), al contrario della fascia serale qui sopra dove sono invertiti di proposito. Serve una regola esplicita perche' la regola generica `main h2 span + span` farebbe oro anche il secondo. */ body.mono-dark-home.aperitivo-page .aperitivo-rito-title span { display: block; } body.mono-dark-home.aperitivo-page .aperitivo-rito-title span + span { color: var(--accento); } /* ============================================================ 28/7 sera — LA TAVOLA CONDIVISA di /la-bottega/ DEVE VEDERSI ⚠️ QUINTA VOLTA per la trappola dell'opacita' zero. Il segnaposto `.mono-page-scene` in `la-bottega/index.html` fa uscire subito `setupPageScene()`, che percio' non aggiunge piu' `.is-scene-awake`, e senza quella `.mono-page-scene { opacity: 0 }` (experience.css) terrebbe il disegno NEL DOM E INVISIBILE PER SEMPRE. Rimedio in CSS come per le altre due illustrazioni fatte a mano (--social e --frusta): niente JavaScript, cosi' non c'e' niente che possa non partire. ⚠️ Io avevo scritto una funzione JS con IntersectionObserver ed era SBAGLIATO come metodo: in questo sito la convenzione e' gia' questa, e una regola CSS non puo' fallire. ⚠️ DIFFERENZA VOLUTA rispetto alla regola gemella di --frusta: quella impone anche il `transform`, SENZA limite di larghezza. Ma sotto gli 820px `.mono-page-scene` viene centrata con `left: 50%` + `translate3d(-50%, ...)`: imporre li' il transform da computer la sposterebbe di mezza larghezza fuori posto. Qui il transform si tocca SOLO da 821px in su. ============================================================ */ body.mono-dark-home.about-page .page-hero .mono-scene-tavola { opacity: 1; } @media (min-width: 821px) { body.mono-dark-home.about-page .page-hero .mono-scene-tavola { transform: translate3d(var(--scene-x), calc(-50% + var(--scene-y)), 0) scale(1); } } body.mono-dark-home .mono-scene-tavola svg { height: auto; width: 100%; } /* ============================================================ 28/7 sera — /la-bottega/, TRE RITOCCHI CHIESTI DA LUI ============================================================ */ /* (1) "Un prodotto, da solo, non basta. / Ci prendiamo cura della tua scelta." — voleva la seconda riga su UNA RIGA SOLA. ⚠️ Non si e' rimpicciolito il testo: MISURATO, la riga e' larga 1112px mentre il titolo era chiuso in 920 da `.page-section > h2 { max-width: 920px }` (styles.css) — ma la sezione di spazio ne ha 1252. Quindi basta ALLARGARE il titolo e il corpo resta grande. Solo da 821px in su: sotto, andare a capo e' giusto e la riga unica sarebbe illeggibile. Stessa cosa per "Il metodo la rende possibile.", che si spezzava in "Il metodo la / rende possibile." — suo: "non ha senso andare a capo". */ @media (min-width: 821px) { body.mono-dark-home.about-page .about-scelta-title, body.mono-dark-home.about-page .about-metodo-title { max-width: min(1180px, 100%); } } /* (2) Il cuore di posate di MonoConvivium. Sul telefono: sotto, centrato, piccolo. Da computer: a destra, nello spazio libero accanto al testo (che si ferma a 920px). */ body.mono-dark-home.about-page .about-impact { position: relative; } body.mono-dark-home.about-page .about-convivium-cuore { display: block; height: auto; margin: 34px auto 6px; max-width: 230px; opacity: 0.9; width: 58%; } @media (min-width: 1081px) { /* 28/7 sera, secondo giro — suo: "cosi' tutto a destra diventa un po' anonimo, piu' grosso e piu' centrale". ⚠️ Sale all'altezza del TITOLO, non dei paragrafi: il titolo "Qui ogni scelta / nutre due volte." e' corto e finisce intorno a meta' pagina, quindi li' c'e' spazio vero. Piu' in basso i paragrafi arrivano a 920px e il cuore ci finirebbe sopra. */ /* 28/7 sera, TERZO giro — non ci siamo ancora, suo: "lo voglio piu' grosso, al centro di quel pezzo li', all'altezza della riga dove dice «E nutre il futuro, sostenendo MonoConvivium»". ⚠️ Il `top` e' misurato: quella riga cade a ~390px dall'inizio della sezione, quindi il cuore (alto ~330) parte a ~225 per restarci centrato. Legato a vw e non a vh: l'altezza della finestra non c'entra niente con dove cade il testo. ⚠️ Piu' in basso di cosi' non si puo' scendere granche': i paragrafi arrivano a 920px e il cuore ci finirebbe sopra. Qui la riga "formazione, lavoro e autonomia." e' corta e lascia campo. */ /* 28/7 sera, QUARTO giro — suo: "ancora leggermente piu' basso, e piu' grosso, tipo il doppio di adesso". ⚠️ IL DOPPIO NON CI STA, ed e' misurato non stimato: 470 x 2 = 940, ma i paragrafi della sezione sono larghi 920px e il cuore ci finirebbe sopra. Il massimo che NON copre una lettera e' 610px in alto e 570 piu' in basso (misurato riga per riga sul sito vero). Preso 570 e sceso a 300: la direzione giusta, al massimo consentito. ➡️ Per andare davvero al doppio l'unica strada e' stringere la colonna di testo di questa sezione (920px sono ~100 battute, una misura di lettura gia' lunga): stringendola a ~620 si libererebbero 300px e il cuore potrebbe arrivare a ~780. Da chiedergli. */ body.mono-dark-home.about-page .about-convivium-cuore { margin: 0; max-width: none; position: absolute; /* ⚠️ Il margine destro e' stretto di proposito. A 570px di larghezza il bordo sinistro del cuore arrivava a 12px sopra la riga "Un lavoro che conta, dentro una squadra vera." (misurato dopo la pubblicazione). Invece di rimpicciolirlo, si sposta verso il bordo: cosi' resta della misura che ha chiesto. */ right: clamp(14px, 1.7vw, 34px); top: clamp(180px, 21vw, 320px); /* ⚠️ 545 e non 570: a 570 restavano 7px fra il cuore e la riga "Un lavoro che conta...". Zero sovrapposizioni sulla carta, ma 7px sono dentro il margine con cui i caratteri rendono diversamente da un computer all'altro: basta poco e si toccano. Con 545 la distanza sale a ~32px e la differenza a occhio non si vede. */ width: min(40vw, 545px); } } /* (3) La chiusura: centrata, piu' importante, nel ROSSO BRILLANTE. ⚠️ Questa e' la SECONDA e ULTIMA eccezione a --mono-rosso-brillante, che era nato solo per "amore" sull'isola verde della home. L'ha chiesto lui proprio per distinguerla dal rosso dei bottoni e darle piu' peso. Qui il fondo e' scuro, quindi si legge senza problemi: il limite dell'altro rosso valeva sul verde, non sul buio. ⚠️ Anche qui la larghezza va oltre i 920px di regola, se no "Contribuisci a costruire qualcosa di importante." va a capo. */ body.mono-dark-home.about-page .about-impact-closing { margin-left: auto; margin-right: auto; max-width: min(1240px, 100%); text-align: center; } body.mono-dark-home.about-page .about-impact-call { color: var(--mono-rosso-brillante); letter-spacing: -0.01em; margin-bottom: 18px; } body.mono-dark-home.about-page .about-impact-closing > p:last-child { margin-left: auto; margin-right: auto; max-width: 62ch; } /* 28/7 sera — /la-bottega/, titolo hero: "MONO" torna DORATO. Prima tutta la prima riga era rossa (il --titolo delle pagine PERSONE). Su sua indicazione: MONO oro · "nasce dalla cucina." rosso · "Cresce intorno alle persone." oro (quella era gia' cosi'). Qui --accento VALE ORO, non rosso: su about/jobs/convivium/events i due colori sono invertiti rispetto alle pagine prodotto. ⚠️ `display: inline` obbligatorio: `.about-page .about-hero-title span` (styles.css:1384) mette display:block su OGNI span discendente, anche quelli annidati, e senza questa riga "MONO" finirebbe su una riga sua. */ body.mono-dark-home.about-page .about-hero-title .about-mono-oro { color: var(--accento); display: inline; } /* 28/7 sera — /lavora-con-noi/: "responsabilità vere." in DORATO. Era rosso come tutto il resto del titolo. ⚠️ Qui `--accento` VALE ORO: le pagine PERSONE (about, jobs, convivium, events) hanno i due colori invertiti rispetto a quelle prodotto. Scrivere `var(--accento)` e non `#CBA75A` a mano e' quello che tiene in piedi il sistema. ⚠️ Uno span SOLO: la regola `main h2 span + span` colpisce il SECONDO span e qui non entra in gioco. */ body.mono-dark-home.jobs-page .jobs-percorsi-title span { color: var(--accento); } /* ============================================================ 28/7 sera — /app/: due titoli ritoccati da lui ============================================================ */ /* "Meno passaggi." (oro) / "Più tempo per le cose buone." (ROSSO), una riga ciascuna. ⚠️ Serve la regola esplicita per il rosso: la generica `main h2 span + span` fa ORO ogni span dopo il primo, ed erano infatti dorate tutte e due. ⚠️ Sulla riga unica il caso e' curioso e vale la pena saperlo: la frase chiede 919px e il titolo ne aveva 920. Un solo pixel di margine, che gli arrotondamenti del testo si mangiano: bastava niente per mandarla a capo. Alzato a 1000, che e' comodo, contro i 1252 di spazio utile della sezione. */ body.mono-dark-home.app-page .app-meno-title span + span { color: var(--accento); } @media (min-width: 821px) { body.mono-dark-home.app-page .app-meno-title { max-width: min(1000px, 100%); } } /* "MONO, quando vuoi TU." — rosso solo sull'ultima parola. ⚠️ Uno span SOLO: la regola `main h2 span + span` colpisce il SECONDO span e qui non entra in gioco. */ body.mono-dark-home.app-page .app-closing-title span { color: var(--accento); } /* ============================================================ 28/7 sera — /eventi/: LA TAVOLATA e la terza riga in rosso ============================================================ */ /* (1) L'illustrazione deve VEDERSI. ⚠️ Sesta volta per la trappola dell'opacita' zero: il segnaposto fa uscire subito setupPageScene(), che percio' non aggiunge piu' `.is-scene-awake`, e senza quella `.mono-page-scene { opacity: 0 }` la terrebbe invisibile per sempre. Regola CSS come per --social, --frusta e la tavola di /la-bottega/: niente JavaScript, cosi' non c'e' niente che possa non partire. ⚠️ Il `transform` si tocca SOLO da 821px in su: sotto, la scena e' centrata con left:50% + translate(-50%) e imporre qui la posa da computer la sposterebbe di mezza larghezza. */ body.mono-dark-home.events-page .page-hero .mono-scene-tavolata { opacity: 1; } @media (min-width: 821px) { body.mono-dark-home.events-page .page-hero .mono-scene-tavolata { transform: translate3d(var(--scene-x), calc(-50% + var(--scene-y)), 0) scale(1); } } body.mono-dark-home .mono-scene-tavolata svg { height: auto; width: 100%; } /* (2) "Facile da organizzare." torna al ROSSO del sito. Storia, perche' spiega la scelta finale ed evita di rifare il giro: - prima l'aveva chiesta in #FF8360 (il rosso di "amore"): guardandola non gli e' piaciuta, e aveva ragione. Erano TRE CALDI VICINI (terracotta, oro, corallo): si impastavano e la terza riga sembrava una variante della prima invece di chiudere; - poi ha provato dal vivo quattro versioni su /prova-colori/, compreso il cashmere in fondo e una col verde oliva; - ha scelto la piu' sobria: "i colori del font, quindi dorato e rosso, nulla di piu'". Nessun colore nuovo nel sistema. Quindi rosso / oro / rosso. Serve la regola esplicita perche' la generica `main h2 span + span` fa oro OGNI span dopo il primo, e la terza riga sarebbe dorata come la seconda. `--titolo` su /eventi/ vale terracotta: le pagine PERSONE hanno i due colori invertiti rispetto a quelle prodotto. */ body.mono-dark-home.events-page .events-proposal-title span:nth-child(3) { color: var(--titolo); } /* 28/7 sera — /gastronomia/, sezione "Disponibilità", riscritta da lui. "La cucina è all'opera." (oro) / "E presto saprai cosa assaggiare oggi." (ROSSO), su due righe, una riga ciascuna. ⚠️ Regola esplicita obbligatoria: la generica `main h2 span + span` farebbe la seconda riga ORO. Stessa avvertenza dei titoli gemelli. ⚠️ MISURATO a 1440: la riga rossa chiede 1175px e il titolo era chiuso in 920 da `.page-section > h2`; lo spazio utile della sezione e' 1252, quindi basta allargare. Il paragrafo: la seconda frase chiede 851px contro i 715 del suo max-width, stessa cura. Sotto gli 821px tutto torna ad andare a capo da solo, ed e' giusto. */ body.mono-dark-home.gastronomia-page .gastronomia-banco-title span { display: block; } body.mono-dark-home.gastronomia-page .gastronomia-banco-title span + span { color: var(--accento); } @media (min-width: 821px) { body.mono-dark-home.gastronomia-page .gastronomia-banco-title { max-width: min(1220px, 100%); } body.mono-dark-home.gastronomia-page .gastronomia-banco-testo { max-width: min(890px, 100%); } } /* 28/7 sera — /gastronomia/, "Radici vere, / FORMA CONTEMPORANEA.": due righe vere e la seconda in ROSSO, chiesto da lui. ⚠️ Serve la regola esplicita: quella generica `main h2 span + span` farebbe la seconda riga ORO. Stessa avvertenza gia' scritta per i due titoli di /aperitivo/ — se un domani sembra una svista, non lo e'. ⚠️ Rosso normale del sito (--accento = terracotta), NON il rosso brillante, che vive solo sull'isola verde della home. */ body.mono-dark-home.gastronomia-page .gastronomia-radici-title span { display: block; } body.mono-dark-home.gastronomia-page .gastronomia-radici-title span + span { color: var(--accento); } /* 28/7 sera — "Quando la bottega rallenta, resta il GUSTO.": rosso solo sull'ultima parola, chiesto da lui. Stessa mossa gia' fatta sulla home con "porta qui": uno nel titolo e il resto resta oro. ⚠️ Qui va il rosso NORMALE del sito (--accento = terracotta #B85C38, 3,93 sul fondo scuro), NON il --mono-rosso-brillante: quello vive solo sull'isola verde della home, dove la terracotta sparirebbe. ⚠️ Uno span SOLO: la regola generica `main h1 span + span` colpisce il SECONDO span e qui non entra in gioco. */ body.mono-dark-home.aperitivo-page .page-hero h1 span { color: var(--accento); } /* ============================================================ "amore": la PENNELLATA E' STATA TOLTA (28/7 sera) STORIA, perche' serve se un domani si torna indietro. Il 28/7 mattina il proprietario voleva "amore" in rosso mattone. MISURATO: la terracotta su quel verde fa 1,22 -> come TESTO le lettere perdono il bordo. Ma come MACCHIA PIENA si vede benissimo (rosso e verde hanno luminosita' simile e tinte opposte), quindi la parola era rimasta CREMA con la pennellata rossa sotto. La sera ha chiesto il contrario, e a ragion veduta: "voglio sbatterci la testa, voglio vederlo io rosso su verde se rimane o meno". Fatto: parola rossa (regola piu' sopra), pennellata via. ⚠️ PER TORNARE INDIETRO basta rimettere le due regole qui sotto e riportare l'`em` a var(--mono-cream). La pennellata e' un SVG scritto dentro il CSS, nessun file da scaricare; `preserveAspectRatio='none'` la allunga quanto la parola. body.mono-dark-home .product-system .product-system-title em { position: relative; } body.mono-dark-home .product-system .product-system-title em::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 22' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C42 1 84 13 124 5 C152 0 176 8 198 3 L198 15 C176 21 152 13 124 18 C84 26 42 15 2 20 Z' fill='%23B85C38'/%3E%3C/svg%3E") no-repeat center / 100% 100%; bottom: -0.04em; content: ""; height: 0.17em; left: -1.5%; pointer-events: none; position: absolute; right: -1.5%; } ============================================================ */ /* ============================================================ ALTRI DUE ROSSI CHIESTI IL 28/7 SERA (fondo scuro, non verde: qui la terracotta fa 3,93, sopra la soglia 3 dei titoli grandi) 1. "Trasparenza al banco. Semplice a casa." — titolo su DUE RIGHE, DUE COLORI (aggiornato il 29/7: prima era tutto rosso). 1a riga ROSSA, 2a riga ORO — richiesta sua guardando la pagina. La 1a riga eredita il rosso dall'h2; la 2a lo scavalca con `var(--titolo)`, che sulla home vale ORO (le pagine PRODOTTO hanno i due colori invertiti rispetto a quelle PERSONE, riga 535/542). ⚠️ La regola esplicita e' voluta anche se la generica `main h2 span + span` farebbe gia' oro: qui l'h2 e' rosso per conto suo e senza una regola SULLO span la seconda riga erediterebbe il rosso. 2. "La strada per qualcosa di buono porta qui." — rosso SOLO su "porta qui" (suo: "lo scrivi solo porta qui in rosso"), che in `index.html` e' avvolto in uno . Il resto resta oro perche' e' testo sciolto dell'h2. ⚠️ Uno span SOLO: la regola generica `main h2 span + span` colpisce il SECONDO span e qui non entra. ============================================================ */ body.mono-dark-home .value-section h2 { color: var(--accento); } body.mono-dark-home .value-section h2 span { display: block; } body.mono-dark-home .value-section h2 span + span { color: var(--titolo); } body.mono-dark-home .local-info-section h2 span { color: var(--accento); } /* ============================================================ SEZIONE APP DELLA HOME — rimessa in ordine (28/7) Richiesta sua: "la trovo disordinata". Tolta la card "Ordina. Paga. Torna." (diceva a parole quello che i tre riquadri rossi dicono gia') e al suo posto, nella colonna di destra, e' salito il QR, che prima stava schiacciato in fondo alla colonna sinistra. Risultato: una cosa sola per lato. A sinistra si legge, a destra si fa. ============================================================ */ body.mono-dark-home .app-gateway > .app-qr--colonna { align-self: center; flex-direction: column; gap: 20px; justify-content: center; margin-top: 0; max-width: none; padding: clamp(22px, 3vw, 34px); text-align: center; width: 100%; } body.mono-dark-home .app-qr--colonna img { height: auto; padding: 12px; width: min(260px, 52vw); } body.mono-dark-home .app-qr--colonna span { font-size: clamp(15px, 1.3vw, 17px); font-weight: 700; } /* Sotto i 900px la griglia va in colonna: il QR non deve diventare un lenzuolo largo quanto lo schermo. */ @media (max-width: 900px) { body.mono-dark-home .app-gateway > .app-qr--colonna { justify-self: center; max-width: 380px; } } /* Titolo della sezione app su due righe (28/7): prima "Tutto in un tap" restava attaccato e la sezione sembrava sbilanciata. */ body.mono-dark-home .app-gateway-title span { display: block; } body.mono-dark-home .app-gateway-title span + span { color: var(--accento); } /* ============================================================ 29/7 — LA FASCIA LEGALE DEL FOOTER (P. IVA e dati dell'impresa) Obbligo di legge: la partita IVA va sulla home page (art. 35 DPR 633/1972). Serve anche alla fiducia: un ufficio acquisti che deve ordinare un catering cerca la P. IVA prima di scrivere, e se non la trova tu non esisti come fornitore. PERCHE' UNA FASCIA SCURA E NON SEMPLICEMENTE UNA RIGA IN PIU' Il footer e' un gradiente terracotta (#a83a28 -> #b85c38). Su quel fondo il testo crema fa 4.33 nel punto piu' chiaro: per un testo di 13px e' sotto la soglia di 4.5. Con la velatura scura il fondo scende a #8f4c32/#843426 e il crema arriva a 6.17-8.01. Misurato, non stimato. In piu' separa i dati burocratici dalla navigazione, che e' il modo in cui li tengono tutti i siti fatti bene: si trovano quando li cerchi e non rubano l'occhio quando non li cerchi. ⚠️ `flex-basis: 100%`: il footer e' un flex con `space-between`, senza questa riga la fascia diventerebbe una terza colonna schiacciata accanto al marchio e al menu. ============================================================ */ /* ⚠️ 30/7 — RIDOTTA A UNA RIGA, e non e' una svista. Sua richiesta: nel footer resta SOLO la partita IVA. Sede legale, ragione sociale (che contiene nome e cognome), REA e PEC sono suoi dati privati e NON c'e' nessun obbligo di pubblicarli: l'art. 2250 c.c. che li impone vale per le societa', e MONO e' una ditta individuale. Obbligatoria e' solo la P. IVA (art. 35 DPR 633/1972). Essendo una riga sola, la fascia scura di prima sarebbe stata una scatola vuota: adesso e' discreta, allineata a destra accanto al menu del footer. ⚠️ Il fondo terracotta piu' chiaro fa 4.33 col crema pieno: per un testo cosi' piccolo si tiene la velatura scura, che lo porta a 6.17. */ body.mono-dark-home .site-footer__legale { background: rgba(38, 35, 33, 0.28); border-radius: 999px; color: #fff9ee; font-size: 12px; letter-spacing: 0.02em; line-height: 1.4; margin: 0; padding: 6px 14px; white-space: nowrap; } body.mono-dark-home .site-footer__legale a { color: #fff9ee; text-decoration: underline; text-decoration-color: rgba(255, 249, 238, 0.45); text-underline-offset: 2px; } body.mono-dark-home .site-footer__legale a:hover, body.mono-dark-home .site-footer__legale a:focus-visible { text-decoration-color: #fff9ee; } /* ============================================================ 29/7 — LA PAGINA /privacy/ Pagina NUOVA, quindi qui non si sta cambiando niente di esistente: sono gli unici stili di elenco del sito, perche' finora nessuna pagina aveva bisogno di elenchi (una pagina di informativa senza elenchi e' illeggibile). Tutto il resto della pagina usa le classi che c'erano gia' (.page-hero, .page-section, .page-section.alt, .eyebrow): il davanti e' identico alle altre 13 pagine, come voluto. ============================================================ */ body.mono-dark-home.privacy-page .privacy-elenco { list-style: none; margin: 0 0 18px; max-width: 920px; padding: 0; } body.mono-dark-home.privacy-page .privacy-elenco li { line-height: 1.6; padding: 0 0 10px 26px; position: relative; } /* Il pallino e' un quadratino ORO, non un bullet di sistema: cosi' l'elenco appartiene al sito invece di sembrare incollato da un modulo. */ body.mono-dark-home.privacy-page .privacy-elenco li::before { background: var(--mono-champagne); content: ""; height: 6px; left: 4px; position: absolute; top: 0.62em; width: 6px; } body.mono-dark-home.privacy-page .privacy-elenco strong { color: #fff9ee; } /* Il riquadro coi dati dell'impresa: righe corte, nessun pallino, monospaziato nei numeri no — resta il carattere del sito, ma piu' stretto di riga. */ body.mono-dark-home.privacy-page .privacy-elenco--dati li { padding-bottom: 2px; } body.mono-dark-home.privacy-page .privacy-elenco--dati li::before { display: none; } body.mono-dark-home.privacy-page .privacy-blocco h3 { color: var(--mono-champagne); font-size: clamp(17px, 1.5vw, 21px); margin: 26px 0 10px; } body.mono-dark-home.privacy-page .privacy-aggiornata { border-top: 1px solid rgba(255, 249, 238, 0.18); font-size: 13.5px; margin-top: 28px; padding-top: 16px; } /* ============================================================ 29/7 — LA SPUNTA DEL CONSENSO sui due moduli email ⚠️⚠️ TRAPPOLA GIA' PAGATA DUE VOLTE SU QUESTO SITO, evitata qui: in `styles.css` esiste `.cinema-signup input { flex: 1 1 200px; border-radius: 999px; background: rgba(255,249,238,.94); padding: 12px 16px }` — una regola pensata per il CAMPO EMAIL che colpisce QUALUNQUE input dentro il modulo. Senza le righe qui sotto la casella del consenso diventava una PILLOLA CREMA larga 200px senza spunta. E' lo stesso difetto del 24/7 sul modulo di /eventi/ (`.mono-form input` con appearance:none), risolto la' nello stesso modo. Se un domani la casella "sembra un campo di testo", e' questa regola che e' saltata. Specificita': `.cinema-signup input` vale (0,1,1), questa (0,3,1). Vince. ============================================================ */ body.mono-dark-home .signup-consenso { align-items: flex-start; color: #fff9ee; cursor: pointer; display: flex; font-size: 12.5px; gap: 9px; line-height: 1.45; /* ⚠️ Il