/* ═════════════════════════════════════════════════════════════════════════════ Napolinord — impianto grafico. Principi, in ordine di importanza: 1. COLORE PER SEZIONE. Ogni area ha il suo accento: entrando in "Eventi" o in "Da visitare" si capisce dove si è dal colore, prima di leggere. Si imposta una sola classe sul (sez-eventi, sez-visitare…) e tutti i componenti si tingono da soli, perché usano --accento. 2. GERARCHIA ASIMMETRICA. Griglie tutte uguali fanno sembrare ogni contenuto uguale agli altri, e togliono il motivo di cliccare. Le pagine hanno un pezzo grande, uno medio, alcuni piccoli: un mosaico, non una tabella. 3. MOVIMENTO SOBRIO. L'immagine cresce di poco sotto il puntatore, l'ombra si alza, il titolo cambia colore. Nessuna animazione che si mette in mostra, e tutto si spegne con prefers-reduced-motion. 4. TITOLI SERIF su corpo sans: l'aria della testata, non del gestionale. 5. NESSUN FILE ESTERNO. Caratteri di sistema, immagini disegnate in SVG: la prima visita non aspetta nulla e nessun IP finisce a un terzo. ═════════════════════════════════════════════════════════════════════════════ */ /* ⚠ DICHIARAZIONE INDISPENSABILE. Dice al browser: «questo sito gestisce da sé il tema chiaro e quello scuro, non invertirmi». Senza di essa, i browser con la modalità scura forzata (Samsung Internet, Chrome con il tema scuro sperimentale, Android auto-dark) rifanno i colori a modo loro e sugli SVG e sui gradienti producono BLOCCHI NERI — è così che la cartina si vedeva nera su un telefono anche dopo averla corretta. */ :root { color-scheme: light dark; } :root { --carta: #faf8f4; --carta-alt: #ffffff; --carta-calda: #f5f0e7; --inchiostro: #14181f; --tenue: #59616d; --bordo: #e7e2d8; --bordo-forte: #d2ccbe; --accento: #b8492a; /* terracotta: il colore del tufo */ --accento-viva: #9c3c22; --accento-luce: #fdf1ec; --notte: #14212b; /* blu del golfo */ --notte-alt: #1c2d39; --notte-tenue: #93a7b4; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --max: 1240px; --stretto: 720px; --raggio: 3px; --raggio-g: 6px; --ombra-1: 0 1px 2px rgba(20, 24, 31, .05); --ombra-2: 0 2px 6px rgba(20, 24, 31, .07), 0 12px 28px -14px rgba(20, 24, 31, .16); --ombra-3: 0 6px 16px rgba(20, 24, 31, .10), 0 28px 60px -24px rgba(20, 24, 31, .26); --molla: cubic-bezier(.22, .61, .36, 1); } /* accenti di sezione: la classe la mette il master in base alla pagina aperta */ body.sez-eventi { --accento: #b8492a; --accento-viva: #9c3c22; --accento-luce: #fdf1ec; } body.sez-notizie { --accento: #3a4b8f; --accento-viva: #2d3b74; --accento-luce: #eef0fa; } body.sez-avvisi { --accento: #9a6410; --accento-viva: #7d500a; --accento-luce: #fdf4e3; } body.sez-negozi { --accento: #4b6b3a; --accento-viva: #3b562d; --accento-luce: #eef4ea; } body.sez-visitare { --accento: #1f5f7a; --accento-viva: #164a60; --accento-luce: #e9f2f6; } body.sez-bacheca { --accento: #8c3f5d; --accento-viva: #72324c; --accento-luce: #fbedf3; } @media (prefers-color-scheme: dark) { :root { --carta: #0e1218; --carta-alt: #161c24; --carta-calda: #1a212a; --inchiostro: #eae7e1; --tenue: #9aa5b1; --bordo: #262f3a; --bordo-forte: #364252; --accento: #e0714d; --accento-viva:#ef8460; --accento-luce:#241a16; --notte: #080d12; --notte-alt: #101a22; --notte-tenue: #8ba0ae; --ombra-1: 0 1px 2px rgba(0,0,0,.4); --ombra-2: 0 2px 6px rgba(0,0,0,.5), 0 12px 28px -14px rgba(0,0,0,.6); --ombra-3: 0 6px 16px rgba(0,0,0,.55), 0 28px 60px -24px rgba(0,0,0,.7); } body.sez-notizie { --accento: #8b9bef; --accento-viva: #a3b0f5; --accento-luce: #171b2c; } body.sez-avvisi { --accento: #dda63f; --accento-viva: #ebb857; --accento-luce: #2a2113; } body.sez-negozi { --accento: #86b06c; --accento-viva: #9cc283; --accento-luce: #172217; } body.sez-visitare { --accento: #63b6d8; --accento-viva: #82c6e3; --accento-luce: #12222a; } body.sez-bacheca { --accento: #d98caa; --accento-viva: #e6a2bc; --accento-luce: #26161d; } } /* ── identità del comune ───────────────────────────────────────────────────── --comune-h è la tonalità che il master prende dal database (campo Tinta) e mette sul . Tinge la banda in cima, il marchio e il badge del comune nel menu: passando da Giugliano a Marano il portale cambia colore d'insegna, mentre il colore di SEZIONE (eventi, negozi…) resta al suo posto. Due segnali distinti. */ :root { --comune-h: 14; } .comune-tinta { color: hsl(var(--comune-h), 52%, 38%); } .banda-comune { height: 4px; background: linear-gradient(90deg, hsl(var(--comune-h), 58%, 42%) 0%, hsl(var(--comune-h), 48%, 32%) 55%, hsl(calc(var(--comune-h) + 24), 52%, 38%) 100%); } .marchio .nord { color: hsl(var(--comune-h), 58%, 42%); } .insegna-comune { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; padding: 5px 12px 5px 6px; border-radius: 100px; background: hsl(var(--comune-h), 46%, 96%); border: 1px solid hsl(var(--comune-h), 40%, 86%); font-size: .82rem; font-weight: 600; color: hsl(var(--comune-h), 46%, 30%); } .insegna-comune img { width: 22px; height: 22px; object-fit: contain; } .navigazione .voce-comune { color: hsl(var(--comune-h), 50%, 34%); } .navigazione .voce-comune::after { background: hsl(var(--comune-h), 54%, 42%); } .navigazione .stemmino { width: 20px; height: 20px; object-fit: contain; } @media (prefers-color-scheme: dark) { .insegna-comune { background: hsl(var(--comune-h), 32%, 14%); border-color: hsl(var(--comune-h), 30%, 26%); color: hsl(var(--comune-h), 55%, 76%); } .marchio .nord { color: hsl(var(--comune-h), 62%, 62%); } .navigazione .voce-comune { color: hsl(var(--comune-h), 55%, 72%); } .navigazione .voce-comune::after { background: hsl(var(--comune-h), 58%, 62%); } } @media (max-width: 700px) { .insegna-comune span { display: none; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--carta); color: var(--inchiostro); font-family: var(--sans); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* alone caldo in alto: toglie l'effetto "foglio bianco" senza farsi notare */ background-image: radial-gradient(120% 62% at 50% -12%, var(--carta-calda) 0%, transparent 62%); background-repeat: no-repeat; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } :focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; } .contenitore { max-width: var(--max); margin: 0 auto; padding: 0 24px; } .stretto { max-width: var(--stretto); } /* ── tipografia ─────────────────────────────────────────────────────────── */ h1, h2, h3, .titolo { font-family: var(--serif); font-weight: 600; line-height: 1.1; letter-spacing: -.018em; margin: 0 0 .55em; text-wrap: balance; } h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); } h2 { font-size: clamp(1.55rem, 3.2vw, 2.35rem); } h3 { font-size: 1.2rem; } p { margin: 0 0 1.1em; } p.guida { font-size: clamp(1.08rem, 2vw, 1.32rem); line-height: 1.5; color: var(--tenue); } .tenue { color: var(--tenue); } .occhiello { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--accento); margin: 0 0 14px; display: inline-flex; align-items: center; gap: 10px; } .occhiello::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .45; } .occhiello.chiara { color: var(--notte-tenue); } .occhiello.senzafilo::after { display: none; } /* capolettera per i testi lunghi: storia, schede dei luoghi */ .capolettera::first-letter { float: left; font-family: var(--serif); font-size: 3.4em; line-height: .82; padding: .06em .12em 0 0; color: var(--accento); font-weight: 600; } .citazione { font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 1.9rem); line-height: 1.28; border-left: 3px solid var(--accento); padding: .2em 0 .2em 1em; margin: 1.6em 0; } .citazione cite { display: block; font-family: var(--sans); font-size: .82rem; font-style: normal; color: var(--tenue); margin-top: .8em; letter-spacing: .04em; } /* ── testata ────────────────────────────────────────────────────────────── */ .testata .riga { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 0 16px; } .marchio { font-family: var(--serif); font-size: 1.55rem; font-weight: 700; letter-spacing: -.035em; display: inline-flex; align-items: baseline; } .marchio .nord { color: var(--accento); } .data-oggi { font-size: .82rem; color: var(--tenue); font-variant-numeric: tabular-nums; } .pillola { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--bordo-forte); border-radius: 100px; padding: 5px 12px; color: var(--tenue); white-space: nowrap; transition: .2s var(--molla); } a.pillola:hover { border-color: var(--accento); color: var(--accento); } /* ── navigazione: contatori e sottolineatura che cresce ──────────────────── */ .navigazione { border-top: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo); background: var(--carta-alt); position: sticky; top: 0; z-index: 30; } .navigazione .riga { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; padding: 0; } .navigazione a { display: inline-flex; align-items: center; gap: 8px; padding: 15px; font-size: .93rem; font-weight: 600; white-space: nowrap; color: var(--tenue); position: relative; transition: color .18s var(--molla); } .navigazione a::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 0; height: 2px; background: var(--accento); transform: scaleX(0); transform-origin: left; transition: transform .26s var(--molla); } .navigazione a:hover { color: var(--inchiostro); } .navigazione a:hover::after { transform: scaleX(.45); } .navigazione a.attivo { color: var(--inchiostro); } .navigazione a.attivo::after { transform: scaleX(1); } .navigazione .conta { font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 100px; background: var(--accento-luce); color: var(--accento); } .scelta-comune { margin-left: auto; display: flex; align-items: center; gap: 8px; padding-left: 16px; } .scelta-comune select { font: inherit; font-size: .88rem; font-weight: 600; color: var(--inchiostro); background: var(--carta-alt); border: 1px solid var(--bordo-forte); border-radius: 100px; padding: 7px 12px; } /* ── intestazioni di pagina ─────────────────────────────────────────────── */ .briciole { font-size: .84rem; color: var(--tenue); padding: 22px 0 0; } .briciole a:hover { color: var(--accento); } .testa-pagina { padding: 26px 0 38px; } .testa-pagina h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); margin-bottom: .25em; } .testa-pagina .guida { margin: 0; max-width: 42em; } .titolo-sezione { display: flex; align-items: baseline; gap: 16px; margin-bottom: clamp(24px, 3.4vw, 38px); } .titolo-sezione h2 { margin: 0; } .titolo-sezione .filo { flex: 1; height: 1px; background: var(--bordo); } .titolo-sezione a { font-size: .9rem; font-weight: 600; color: var(--accento); white-space: nowrap; } /* ── apertura e vetrina ─────────────────────────────────────────────────── */ .apertura { padding: clamp(40px, 7vw, 88px) 0 0; } .apertura h1 { max-width: 17em; } .apertura .guida { max-width: 30em; } .panorama { margin-top: clamp(36px, 5vw, 64px); line-height: 0; } .panorama svg { width: 100%; height: auto; display: block; } /* vetrina: immagine grande col titolo sopra. È il pezzo forte di una pagina. */ .vetrina { position: relative; display: block; overflow: hidden; border-radius: var(--raggio-g); background: var(--notte); min-height: clamp(300px, 46vw, 520px); box-shadow: var(--ombra-2); transition: box-shadow .3s var(--molla); } .vetrina:hover { box-shadow: var(--ombra-3); } .vetrina .sfondo { position: absolute; inset: 0; } .vetrina .sfondo img, .vetrina .sfondo svg { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--molla); } .vetrina:hover .sfondo img, .vetrina:hover .sfondo svg { transform: scale(1.045); } .vetrina::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,13,18,.92) 0%, rgba(8,13,18,.58) 42%, rgba(8,13,18,.14) 78%); } .vetrina .sopra { position: relative; z-index: 2; color: #fff; padding: clamp(24px, 4vw, 46px); display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(300px, 46vw, 520px); } .vetrina h2, .vetrina h3 { color: #fff; margin: .2em 0 .3em; font-size: clamp(1.7rem, 4.2vw, 3rem); text-shadow: 0 2px 24px rgba(0,0,0,.4); } .vetrina p { color: rgba(255,255,255,.87); max-width: 44em; margin: 0; } .vetrina .meta { color: rgba(255,255,255,.8); display: flex; flex-wrap: wrap; gap: 16px; font-size: .9rem; } .vetrina .meta span { display: inline-flex; align-items: center; gap: 7px; } .vetrina .occhiello { color: #fff; opacity: .92; } /* ── mosaico ────────────────────────────────────────────────────────────── */ .mosaico { display: grid; gap: 18px; grid-template-columns: 1fr; } @media (min-width: 860px) { .mosaico { grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; } .m-6 { grid-column: span 6; } .m-4 { grid-column: span 4; } .m-3 { grid-column: span 3; } .m-2 { grid-column: span 2; } .m-alta { grid-row: span 2; } } .tessera { position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--carta-alt); border: 1px solid var(--bordo); border-radius: var(--raggio-g); padding: 22px; overflow: hidden; box-shadow: var(--ombra-1); transition: transform .28s var(--molla), box-shadow .28s var(--molla), border-color .28s; } a.tessera:hover { transform: translateY(-3px); box-shadow: var(--ombra-2); border-color: var(--bordo-forte); } .tessera h3 { margin: 0; } .tessera p { margin: 0; color: var(--tenue); font-size: .95rem; } .tessera .meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: .84rem; color: var(--tenue); } .tessera .meta span { display: inline-flex; align-items: center; gap: 6px; } .tessera .coda { margin-top: auto; padding-top: 12px; font-size: .86rem; font-weight: 600; color: var(--accento); } .tessera .visuale { margin: -22px -22px 6px; border-radius: 0; } .tessera.grande h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); } .tessera.piena { background: var(--notte); border-color: var(--notte); color: #f2efe9; } .tessera.piena h3 { color: #fff; } .tessera.piena p, .tessera.piena .meta, .tessera.piena .piccolo { color: var(--notte-tenue); } .tessera.piena a { color: #fff; } .tessera.tinta { background: var(--accento-luce); border-color: color-mix(in srgb, var(--accento) 24%, transparent); } .tessera ul.righe-min { list-style: none; margin: 0; padding: 0; } .tessera ul.righe-min li + li { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bordo); } .tessera ul.righe-min a { font-weight: 600; } .tessera ul.righe-min a:hover { color: var(--accento); } .tessera ul.righe-min .piccolo { font-size: .8rem; color: var(--tenue); } .tessera.piena ul.righe-min li + li { border-top-color: rgba(255,255,255,.14); } /* ── notiziario: etichette d'argomento, classifica, comuni vicini ─────────── L'etichetta colorata dice DI COSA parla la notizia prima ancora che si legga il titolo: è il modo in cui si scorre un giornale locale. La tinta arriva dal codice (--arg-h) e non dal CSS, perché gli argomenti si aggiungono in Notiziario.cs. */ .etichetta.arg { background: hsl(var(--arg-h, 14), 62%, 95%); color: hsl(var(--arg-h, 14), 58%, 28%); border-color: hsl(var(--arg-h, 14), 46%, 82%); font-weight: 700; } .etichetta.comune { background: hsl(var(--arg-h, 14), 48%, 96%); color: hsl(var(--arg-h, 14), 52%, 30%); border-color: hsl(var(--arg-h, 14), 40%, 84%); font-weight: 700; text-decoration: none; } .etichetta.comune:hover { background: hsl(var(--arg-h, 14), 52%, 92%); } .riga-etichette { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .piccolo { font-size: .8rem; } .filtri.argomenti { margin-top: -8px; } .filtri.argomenti a.attivo { background: hsl(var(--arg-h, 14), 55%, 34%); border-color: hsl(var(--arg-h, 14), 55%, 34%); } /* classifica delle più lette: il numero grande è il richiamo, il titolo è il contenuto */ ol.classifica { list-style: none; margin: 0; padding: 0; counter-reset: c; } ol.classifica li { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--bordo); } ol.classifica .numero { font-family: var(--serif, Georgia, serif); font-size: 1.5rem; font-weight: 700; color: var(--accento); min-width: 1.4em; text-align: right; line-height: 1; } ol.classifica a { font-weight: 600; } ol.classifica a:hover { color: var(--accento); } .righe.vicini .riga-voce { padding: 14px 0; } .righe.vicini h3 a { font-weight: 600; } .righe.vicini h3 a:hover { color: var(--accento); } /* ── visuale ────────────────────────────────────────────────────────────── */ .visuale { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--notte); border-radius: 2px; line-height: 0; } @supports not (aspect-ratio: 1) { .visuale { height: 0; padding-bottom: 56.25%; } .visuale > * { position: absolute; inset: 0; } } .visuale img, .visuale svg { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--molla); } a:hover > .visuale img, a:hover > .visuale svg { transform: scale(1.05); } .visuale.alta { aspect-ratio: 21 / 9; } .visuale.quadra { aspect-ratio: 1 / 1; } .visuale .fonte { position: absolute; right: 0; bottom: 0; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; background: rgba(10,16,22,.72); color: #fff; border-top-left-radius: 3px; line-height: 1.4; cursor: help; } /* ── datario ────────────────────────────────────────────────────────────── */ .datario { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; min-height: 58px; padding: 7px 0; border-radius: var(--raggio); background: var(--accento-luce); border: 1px solid color-mix(in srgb, var(--accento) 22%, transparent); line-height: 1; flex: 0 0 auto; } .datario .g { font-family: var(--serif); font-size: 1.65rem; font-weight: 700; color: var(--accento); } .datario .m { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accento); opacity: .82; margin-top: 3px; } .datario.chiaro { background: rgba(255,255,255,.17); border-color: rgba(255,255,255,.32); } .datario.chiaro .g, .datario.chiaro .m { color: #fff; opacity: 1; } .alto { display: flex; gap: 14px; align-items: flex-start; } /* ── carte ──────────────────────────────────────────────────────────────── */ .carte { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .carta { background: var(--carta-alt); border: 1px solid var(--bordo); border-radius: var(--raggio-g); padding: 22px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; box-shadow: var(--ombra-1); transition: transform .28s var(--molla), box-shadow .28s var(--molla), border-color .28s; } a.carta:hover { transform: translateY(-3px); box-shadow: var(--ombra-2); border-color: var(--bordo-forte); } a.carta h3 { transition: color .2s; } a.carta:hover h3 { color: var(--accento); } .carta h3 { margin: 0; font-size: 1.2rem; } .carta p { margin: 0; color: var(--tenue); font-size: .94rem; } .carta .meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: .84rem; color: var(--tenue); } .carta .meta span { display: inline-flex; align-items: center; gap: 6px; } .carta .visuale { margin: -22px -22px 6px; border-radius: 0; } .carta.grande { grid-column: span 2; } .carta.grande h3 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); } .carta.grande .visuale { aspect-ratio: 21 / 9; } /* la riga di chiusura della carta ("leggi su ..."): spinta in fondo, così le carte di una fila finiscono allineate anche con titoli di lunghezza diversa */ .carta .coda { margin-top: auto; padding-top: 12px; font-size: .86rem; font-weight: 600; color: var(--accento); display: inline-flex; align-items: center; gap: 6px; } /* Foto della testata sopra la copertina disegnata: la copertina resta sotto come rete di sicurezza — se l'immagine non c'è più, l'onerror toglie la foto e sotto compare il disegno, senza il rettangolo bianco dell'immagine rotta. */ .visuale > img.sopra { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 720px) { .carta.grande { grid-column: span 1; } } /* ── righe ──────────────────────────────────────────────────────────────── */ .righe { border-top: 1px solid var(--bordo); } .riga-voce { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--bordo); transition: background .2s; } .riga-voce:hover { background: color-mix(in srgb, var(--accento-luce) 55%, transparent); } .riga-voce .simbolo { color: var(--accento); background: var(--accento-luce); border: 1px solid color-mix(in srgb, var(--accento) 20%, transparent); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .riga-voce .corpo { min-width: 0; flex: 1; } .riga-voce h3 { font-size: 1.1rem; margin: 0 0 .2em; } .riga-voce h3 a:hover { color: var(--accento); } .riga-voce p { margin: 0; color: var(--tenue); font-size: .93rem; } .riga-voce .quando { font-size: .8rem; color: var(--tenue); white-space: nowrap; } .riga-voce.urgente .simbolo { color: #fff; background: var(--accento); border-color: var(--accento); } .riga-voce .visuale { flex: 0 0 104px; width: 104px; aspect-ratio: 1/1; border-radius: var(--raggio); } /* ── etichette ──────────────────────────────────────────────────────────── */ .etichetta { display: inline-flex; align-items: center; gap: 6px; font-size: .71rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; border: 1px solid var(--bordo-forte); color: var(--tenue); } .etichetta.viva { background: var(--accento); border-color: var(--accento); color: #fff; } .etichetta.tinta { background: var(--accento-luce); border-color: color-mix(in srgb, var(--accento) 24%, transparent); color: var(--accento); } .etichetta.notte { background: var(--notte); border-color: var(--notte); color: #fff; } .etichetta.chiara{ border-color: rgba(255,255,255,.42); color: #fff; } /* ── filtri ─────────────────────────────────────────────────────────────── */ .filtri { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; } .filtri a { font-size: .87rem; font-weight: 600; padding: 8px 15px; border-radius: 100px; border: 1px solid var(--bordo-forte); color: var(--tenue); transition: .2s var(--molla); } .filtri a:hover { border-color: var(--accento); color: var(--accento); background: var(--accento-luce); } .filtri a.attivo { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--carta); } .filtri a .conta { opacity: .55; } /* ── ricerca ────────────────────────────────────────────────────────────── */ .cerca-grande { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 26px; } .cerca-grande .campo-testo { flex: 1 1 280px; position: relative; } .cerca-grande input[type=text] { padding-left: 44px; } .cerca-grande .lente { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tenue); pointer-events: none; } /* ── percorsi di scoperta ───────────────────────────────────────────────── */ .percorsi { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); } .percorso { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 172px; padding: 20px; border-radius: var(--raggio-g); overflow: hidden; background: var(--notte); color: #fff; box-shadow: var(--ombra-1); transition: transform .28s var(--molla), box-shadow .28s var(--molla); } .percorso::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 130% at 100% 0%, color-mix(in srgb, var(--accento) 55%, transparent), transparent 62%); } .percorso:hover { transform: translateY(-3px); box-shadow: var(--ombra-2); } .percorso .segno { position: absolute; right: -12px; top: -12px; opacity: .17; color: #fff; transition: transform .5s var(--molla), opacity .3s; } .percorso:hover .segno { transform: rotate(-8deg) scale(1.08); opacity: .26; } .percorso h3 { color: #fff; margin: 0 0 .2em; font-size: 1.24rem; position: relative; } .percorso p { color: rgba(255,255,255,.8); font-size: .88rem; margin: 0; position: relative; } .percorso .quanti { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 8px; position: relative; } /* ── banda a contrasto ──────────────────────────────────────────────────── */ .banda { background: var(--notte); color: #f2efe9; padding: clamp(44px, 7vw, 82px) 0; position: relative; overflow: hidden; } .banda::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 120% at 88% 0%, color-mix(in srgb, var(--accento) 30%, transparent), transparent 62%); } .banda .contenitore { position: relative; } .banda h2 { color: #fff; } .banda p { color: var(--notte-tenue); max-width: 42em; } /* ── componenti ─────────────────────────────────────────────────────────── */ .bottone { display: inline-flex; align-items: center; gap: 9px; background: var(--accento); color: #fff; border: 0; border-radius: 100px; padding: 13px 24px; font: inherit; font-weight: 600; cursor: pointer; box-shadow: var(--ombra-1); transition: transform .2s var(--molla), background .2s, box-shadow .2s; } .bottone:hover { background: var(--accento-viva); color: #fff; transform: translateY(-1px); box-shadow: var(--ombra-2); } .bottone.vuoto { background: transparent; color: var(--accento); border: 1px solid var(--accento); box-shadow: none; } .bottone.vuoto:hover { background: var(--accento-luce); } .bottone.chiaro { background: #fff; color: var(--notte); } .bottone.chiaro:hover { background: #f2efe9; color: var(--notte); } .scheda { background: var(--carta-alt); border: 1px solid var(--bordo); border-radius: var(--raggio-g); box-shadow: var(--ombra-1); padding: 26px; } input[type=text], input[type=password], input[type=email], .campo textarea, .campo select { width: 100%; padding: 13px 15px; font: inherit; color: var(--inchiostro); background: var(--carta-alt); border: 1px solid var(--bordo-forte); border-radius: var(--raggio); transition: border-color .2s, box-shadow .2s; } input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--accento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 18%, transparent); } .campo { margin: 0 0 18px; } .campo label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: 6px; } .campo .aiuto { font-size: .82rem; color: var(--tenue); margin-top: 5px; } .campo textarea { min-height: 140px; resize: vertical; } .due-campi { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .avviso { border-left: 3px solid var(--accento); padding: 13px 16px; margin: 0 0 18px; background: var(--accento-luce); border-radius: 0 var(--raggio) var(--raggio) 0; } .errore { border-left-color: #b3261e; background: #fdeceb; } @media (prefers-color-scheme: dark) { .errore { background: #2a1614; } } /* ── dati di contatto e prodotti ────────────────────────────────────────── */ .dati-contatto { list-style: none; margin: 0; padding: 0; } .dati-contatto li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--bordo); font-size: .95rem; } .dati-contatto .ico { color: var(--accento); margin-top: 2px; flex: 0 0 auto; } .dati-contatto .voce { color: var(--tenue); min-width: 92px; font-size: .84rem; } .dati-contatto a:hover { color: var(--accento); } .orari { white-space: pre-line; font-size: .95rem; } .prodotti { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .prodotto { background: var(--carta-alt); border: 1px solid var(--bordo); border-radius: var(--raggio-g); padding: 18px; transition: border-color .2s, box-shadow .2s; } .prodotto:hover { border-color: var(--bordo-forte); box-shadow: var(--ombra-1); } .prodotto .nome { font-weight: 600; } .prodotto .prezzo { font-family: var(--serif); font-size: 1.3rem; color: var(--accento); margin-top: 6px; } .prodotto .barrato { text-decoration: line-through; color: var(--tenue); font-size: .9rem; margin-left: 8px; } .prodotto p { margin: 6px 0 0; font-size: .9rem; color: var(--tenue); } /* ── comuni ─────────────────────────────────────────────────────────────── */ .comune-primo { position: relative; overflow: hidden; background: var(--notte); color: #f4f1ea; padding: clamp(28px, 4vw, 46px); border-radius: var(--raggio-g); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; box-shadow: var(--ombra-2); transition: transform .3s var(--molla), box-shadow .3s var(--molla); } a.comune-primo:hover { transform: translateY(-3px); box-shadow: var(--ombra-3); } .comune-primo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 140% at 92% 8%, rgba(184,73,42,.36), transparent 60%); } .comune-primo > * { position: relative; } .comune-primo .nome { font-family: var(--serif); font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.03; } .comune-primo .abitanti { color: var(--notte-tenue); font-size: .92rem; display: flex; align-items: center; gap: 8px; } .comuni { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); } .comuni li { background: var(--carta-alt); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 15px 17px; transition: border-color .2s, transform .2s var(--molla); } .comuni li:hover { border-color: var(--bordo-forte); } .comuni .nome { font-weight: 600; } .comuni .stato { display: block; font-size: .8rem; color: var(--tenue); margin-top: 2px; } /* ── stati, paginazione, laterale ───────────────────────────────────────── */ .vuoto { border: 1px dashed var(--bordo-forte); border-radius: var(--raggio-g); padding: clamp(30px, 5vw, 56px); text-align: center; color: var(--tenue); background: color-mix(in srgb, var(--carta-alt) 60%, transparent); } .vuoto .ico { color: var(--bordo-forte); margin-bottom: 12px; } .vuoto strong { color: var(--inchiostro); } .paginazione { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 36px 0 0; } .paginazione a, .paginazione span { padding: 10px 16px; border: 1px solid var(--bordo-forte); border-radius: 100px; font-size: .9rem; font-weight: 600; color: var(--tenue); transition: .2s; } .paginazione a:hover { border-color: var(--accento); color: var(--accento); } .paginazione .qui { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--carta); } .due-colonne { display: grid; gap: clamp(26px, 4vw, 50px); grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .due-colonne { grid-template-columns: minmax(0, 1fr) 330px; } } .laterale > * + * { margin-top: 22px; } .riquadro { border: 1px solid var(--bordo); background: var(--carta-alt); padding: 22px; border-radius: var(--raggio-g); box-shadow: var(--ombra-1); } .riquadro h3 { font-family: var(--sans); font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--tenue); margin: 0 0 15px; display: flex; align-items: center; gap: 8px; } .riquadro ul { list-style: none; margin: 0; padding: 0; } .riquadro li + li { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--bordo); } .riquadro .piccolo { font-size: .82rem; color: var(--tenue); } .riquadro a:hover { color: var(--accento); } /* ── coda ───────────────────────────────────────────────────────────────── */ footer.piede { background: var(--notte); color: var(--notte-tenue); margin-top: clamp(56px, 8vw, 96px); padding: clamp(40px, 6vw, 66px) 0 34px; } footer.piede .marchio { color: #fff; font-size: 1.3rem; } footer.piede a { color: rgba(255,255,255,.82); } footer.piede a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } footer.piede h4 { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.52); margin: 0 0 12px; } footer.piede .colonne { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.13); } footer.piede ul { list-style: none; margin: 0; padding: 0; font-size: .92rem; line-height: 2; } footer.piede .chiusura { padding-top: 22px; font-size: .82rem; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; } /* ── comparsa allo scorrimento (senza JS resta visibile) ────────────────── */ /* ⚠ Nascosto SOLO se in pagina c'è lo script che rivela (aggiunge .con-comparsa alla radice). Prima bastava che una pagina non avesse quello script — la home, che non usa il master — e tutte le sue sezioni con class="appare" restavano invisibili per sempre: la home appariva mezza vuota, e per giorni ho creduto fosse un problema di contenuti. */ .con-comparsa .appare { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--molla), transform .6s var(--molla); } .con-comparsa .appare.visto { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .con-comparsa .appare { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } * { animation-duration: .001s !important; transition-duration: .001s !important; } } .ico { display: inline-block; vertical-align: -.18em; flex: 0 0 auto; } /* ── diagnostica ────────────────────────────────────────────────────────── */ table.diag { border-collapse: collapse; width: 100%; font-size: .94rem; } table.diag td, table.diag th { border-bottom: 1px solid var(--bordo); padding: 9px 10px; text-align: left; } table.diag th { font-weight: 700; color: var(--tenue); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; } .si { color: #1a7f5a; font-weight: 600; } .no { color: #b3261e; font-weight: 600; } /* ── stampa ─────────────────────────────────────────────────────────────── */ @media print { .navigazione, footer.piede, .banda, .bottone, .filtri { display: none !important; } body { background: #fff; background-image: none; } .visuale { max-height: 8cm; } a { text-decoration: underline; } } /* ══════════════════════════════════════════════════════════════════════════════ SCHERMI PICCOLI La maggior parte di chi legge un portale di paese lo fa dal telefono, in piedi, con una mano. Qui si sistemano le cose che su 360 px non funzionavano: margini che rubavano un sesto della larghezza, griglie a due colonne strette, copertine larghe come fessure, tabelle che facevano scorrere tutta la pagina. ══════════════════════════════════════════════════════════════════════════════ */ /* Nessuna parola può sfondare il suo contenitore: i nomi lunghi ("Circumvesuviana", un indirizzo web) su schermo piccolo lo facevano. */ h1, h2, h3, .carta h3, .tessera h3 { overflow-wrap: break-word; } @media (max-width: 620px) { /* 24 px per lato su 360 sono 48 px buttati: uno spazio che serve al contenuto */ .contenitore { padding: 0 16px; } /* una colonna VERA: con minmax(280px) su schermi stretti le carte si stringevano fino a diventare illeggibili invece di impilarsi */ .carte, .prodotti { grid-template-columns: 1fr; gap: 14px; } .carta { padding: 18px; } .carta .visuale, .tessera .visuale { margin: -18px -18px 6px; } .tessera { padding: 18px; } /* 21:9 su un telefono è una fessura: l'apertura torna 16:9 */ .carta.grande .visuale, .visuale.alta { aspect-ratio: 16 / 9; } /* titoli: il minimo di 2.3rem era pensato per il desktop */ h1 { font-size: clamp(1.75rem, 8vw, 2.6rem); } .testa-pagina h1 { font-size: clamp(1.6rem, 7.5vw, 2.4rem); } p.guida { font-size: 1.02rem; } /* elenchi con miniatura: 104 px di foto su 328 di riga lasciavano poco al titolo */ .riga-voce { gap: 12px; padding: 15px 0; } .riga-voce .visuale { flex: 0 0 76px; width: 76px; } .riga-voce .simbolo { width: 34px; height: 34px; } /* i filtri diventano una striscia che scorre, invece di tre righe che si accavallano */ .filtri { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } .filtri::-webkit-scrollbar { display: none; } .filtri a { flex: 0 0 auto; } ol.classifica .numero { font-size: 1.2rem; min-width: 1.1em; } ol.classifica li { gap: 10px; padding: 11px 0; } /* la vetrina non deve occupare tutto lo schermo prima del contenuto */ .vetrina { min-height: clamp(230px, 60vw, 340px); } /* le voci contatto: etichetta sopra, valore sotto, invece di due colonne strette */ .dati-contatto li { flex-wrap: wrap; } .dati-contatto .voce { min-width: 0; flex: 0 0 100%; } .scheda, .riquadro { padding: 16px; } .titolo-sezione h2 { font-size: 1.25rem; } blockquote.citazione { padding: 16px 18px; font-size: 1.05rem; } } /* Le tabelle sono il punto dove il mobile si rompe di brutto: cinque o sei colonne fanno scorrere TUTTA la pagina di lato. Si racchiudono in un contenitore che scorre da solo (lo aggiunge il piede della pagina, così vale anche per le pagine future). */ .tabella-scorre { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 4px; } .tabella-scorre > table { min-width: 520px; } @media (max-width: 760px) { table.gest, table.diag { font-size: .86rem; } table.gest th, table.gest td, table.diag th, table.diag td { padding: 8px; } /* i pulsanti d'azione vanno a capo invece di allargare la tabella */ table.gest .azioni { white-space: normal; } table.gest .azioni .bottone, table.gest .azioni .etichetta { margin: 2px 0; } } /* Bersagli grandi abbastanza per un pollice (Apple e Google dicono 44 px). */ @media (hover: none) { .navigazione a, .menu-admin a { padding-top: 16px; padding-bottom: 16px; } .etichetta, .bottone { min-height: 38px; display: inline-flex; align-items: center; } } /* ══════════════════════════════════════════════════════════════════════════════ RESTYLING 2026-08-17 — LA COSTELLAZIONE E IL TONO EDITORIALE ────────────────────────────────────────────────────────────────────────────── L'idea che tiene insieme tutto: ogni comune ha una FORMA, disegnata dai punti delle sue attività e dei suoi luoghi (Mappa.cs). Non è una decorazione presa altrove: è il paese vero, con i vuoti delle campagne e l'addensamento del centro. Da qui viene l'identità visiva — e nessun altro portale può averla, perché nessun altro ha questi dati. ══════════════════════════════════════════════════════════════════════════════ */ /* ── la costellazione ────────────────────────────────────────────────────────── */ .costellazione { display: block; width: 100%; height: 100%; } .costellazione .reticolo line { stroke: currentColor; stroke-width: .5; opacity: .10; } /* ⚠ NIENTE regole su "circle" in generale: nella mappa interattiva ogni punto ha anche un cerchio invisibile da 13 px per il dito, e colorarlo produceva un alone grigio attorno ad ogni negozio (visto in una fotografia della pagina il 2026-08-17). Si colora SOLO .pallino. */ .costellazione .qui .nucleo { fill: hsl(var(--comune-h, 14), 88%, 44%); stroke: #fff; stroke-width: 5; } .costellazione .qui .alone { fill: hsl(var(--comune-h, 14), 78%, 55%); opacity: .22; } .costellazione .qui .alone2 { fill: hsl(var(--comune-h, 14), 78%, 55%); opacity: .10; } /* respira: un battito lentissimo sul punto in evidenza, appena percettibile */ @keyframes battito { 0%,100% { transform: scale(1); opacity: .22; } 50% { transform: scale(1.25); opacity: .07; } } .costellazione .qui .alone { transform-box: fill-box; transform-origin: center; animation: battito 3.6s ease-in-out infinite; } /* fondale della testata di un comune: grande, tenue, dietro al testo */ /* La sagoma del comune nella testata: grande, sulla destra, riempita e con le strade leggibili. Sfuma verso sinistra per non disturbare il titolo. */ .costellazione.fondale { position: absolute; top: -6%; right: -3%; bottom: -6%; left: 55%; width: auto; height: auto; color: #fff; opacity: .5; mask-image: linear-gradient(94deg, transparent 0%, #000 22%, #000 100%); -webkit-mask-image: linear-gradient(94deg, transparent 0%, #000 22%, #000 100%); } .costellazione.fondale .territorio { fill-opacity: .16; stroke-opacity: .75; stroke-width: 2.6; } .costellazione.fondale .strade path { stroke-opacity: .5; stroke-width: 2.2; } @media (max-width: 760px) { .costellazione.fondale { left: 8%; opacity: .3; } } /* dentro una carta: la forma del paese si deve vedere tutta */ .mappa-carta { position: relative; aspect-ratio: 10 / 7; border-radius: var(--raggio-g); overflow: hidden; background: var(--carta-alt); border: 1px solid var(--bordo); color: hsl(var(--comune-h, 14), 52%, 40%); } .mappa-carta .costellazione { padding: 4%; } .mappa-carta .etichetta-mappa { position: absolute; left: 14px; bottom: 12px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--tenue); } /* ── la scelta del comune in home: sette forme, non sette nomi ──────────────── */ .paesi { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); } .paese { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--bordo); border-radius: var(--raggio-g); background: var(--carta); text-decoration: none; overflow: hidden; transition: transform .32s var(--molla), box-shadow .32s var(--molla), border-color .3s; } .paese::before { /* un velo nella tinta del paese */ content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, hsl(var(--comune-h), 62%, 52%, .10), transparent 62%); opacity: 0; transition: opacity .35s; } .paese:hover { transform: translateY(-5px); box-shadow: var(--ombra-2); border-color: hsl(var(--comune-h), 46%, 62%); } .paese:hover::before { opacity: 1; } .paese .forma { position: relative; aspect-ratio: 10 / 7; color: hsl(var(--comune-h), 55%, 42%); transition: color .3s, transform .5s var(--molla); } .paese:hover .forma { transform: scale(1.04); } .paese .nome { position: relative; display: flex; align-items: center; gap: 10px; } .paese .nome strong { font-family: var(--serif); font-size: 1.16rem; line-height: 1.15; } .paese .stemmino { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; } .paese .numeri { position: relative; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .78rem; color: var(--tenue); } .paese .numeri b { color: hsl(var(--comune-h), 52%, 38%); font-weight: 700; } /* ── testata di comune: pannello scuro con la costellazione dentro ───────────── */ /* ⚠ RIFATTA il 2026-08-17 dopo aver GUARDATO la pagina: con il fondale a filo di trasparenza la testata era una scatola nera con dei filamenti pallidi dentro — brutta e incomprensibile. Ora il colore del comune si vede davvero, e la sagoma del territorio è un elemento grafico grande e nitido sulla destra, non un fantasma. */ .insegna-paese { position: relative; overflow: hidden; border-radius: var(--raggio-g); background: radial-gradient(70% 110% at 96% 6%, hsl(var(--comune-h), 62%, 34%) 0%, transparent 60%), linear-gradient(112deg, hsl(var(--comune-h), 26%, 10%) 0%, hsl(var(--comune-h), 34%, 15%) 52%, hsl(var(--comune-h), 44%, 21%) 100%); color: #f6f3ec; padding: clamp(26px, 5vw, 54px); margin-bottom: 30px; box-shadow: var(--ombra-2); } .insegna-paese .dentro { position: relative; z-index: 2; max-width: 46em; } .insegna-paese h1 { font-size: clamp(2.1rem, 6.4vw, 4.4rem); line-height: .98; letter-spacing: -.02em; margin: .1em 0 .25em; color: #fff; } .insegna-paese .occhiello { color: hsl(var(--comune-h), 62%, 78%); } .insegna-paese p.guida { color: rgba(255,255,255,.82); } .insegna-paese .stemma-grande { width: clamp(52px, 8vw, 78px); height: clamp(52px, 8vw, 78px); object-fit: contain; filter: drop-shadow(0 3px 12px rgba(0,0,0,.45)); } .insegna-paese .cifre { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px 34px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); } .insegna-paese .cifra { display: flex; flex-direction: column; gap: 2px; } .insegna-paese .cifra b { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1; color: #fff; } .insegna-paese .cifra span { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); } .insegna-paese a.cifra { text-decoration: none; } .insegna-paese a.cifra:hover b { color: hsl(var(--comune-h), 70%, 72%); } /* ── numeri vivi in home ─────────────────────────────────────────────────────── */ .cifre-portale { display: grid; gap: 1px; background: var(--bordo); border: 1px solid var(--bordo); border-radius: var(--raggio-g); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .cifre-portale > div { background: var(--carta); padding: 20px 18px; text-align: center; } .cifre-portale b { display: block; font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1; color: var(--accento); } .cifre-portale span { display: block; margin-top: 6px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); } /* ── ritocchi editoriali ─────────────────────────────────────────────────────── */ /* il filetto sopra i titoli di sezione: dà il passo di un giornale */ .titolo-sezione h2 { letter-spacing: -.015em; } /* le carte guadagnano profondità al passaggio, non solo un'ombra */ a.carta:hover .visuale img, a.carta:hover .visuale svg { transform: scale(1.06); } .carta .coda { transition: gap .25s; } a.carta:hover .coda { gap: 10px; } /* citazione: virgolette grandi come in un'apertura di rivista */ blockquote.citazione { position: relative; } blockquote.citazione::before { content: "\201C"; position: absolute; left: -.05em; top: -.35em; font-family: var(--serif); font-size: 4.5rem; line-height: 1; color: var(--accento); opacity: .16; pointer-events: none; } @media (max-width: 620px) { .paesi { grid-template-columns: 1fr 1fr; gap: 12px; } .paese { padding: 12px; } .paese .nome strong { font-size: .98rem; } .paese .numeri { font-size: .72rem; } .insegna-paese { padding: 22px 18px; border-radius: var(--raggio); } .insegna-paese .cifre { gap: 8px 20px; margin-top: 18px; padding-top: 16px; } } @media (prefers-reduced-motion: reduce) { .costellazione .qui .alone { animation: none; } .paese:hover { transform: none; } .paese:hover .forma { transform: none; } } /* al buio la costellazione è la cosa che si accende */ @media (prefers-color-scheme: dark) { .mappa-carta { color: hsl(var(--comune-h, 14), 58%, 62%); } .paese .forma { color: hsl(var(--comune-h), 58%, 62%); } .paese .numeri b { color: hsl(var(--comune-h), 62%, 68%); } } /* ══ LA CARTINA: territorio, strade, punti che si possono toccare ══════════════ I punti da soli sembravano messi a caso — è la prima cosa che ha detto chi l'ha vista, ed era vero. Sotto ci sono ora il confine amministrativo vero del comune e le sue strade principali (dati OpenStreetMap): il confine dà la forma, le strade danno l'orientamento, e i negozi diventano leggibili come su una mappa. */ .costellazione .territorio { fill: currentColor; fill-opacity: .07; stroke: currentColor; stroke-opacity: .45; stroke-width: 2.2; stroke-linejoin: round; } .costellazione .strade path { fill: none; stroke: currentColor; stroke-opacity: .3; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* I punti devono STACCARE dalla cartina: pieno nella tinta del comune e anello chiaro intorno, come le puntine su una carta. Prima erano dischi tenui, indistinguibili dalle strade. */ .costellazione .negozi .pallino { fill: hsl(var(--comune-h, 14), 74%, 34%); stroke: #fff; stroke-width: 2.4; opacity: 1; } .costellazione .luoghi .pallino { fill: var(--carta); stroke: hsl(var(--comune-h, 14), 68%, 34%); stroke-width: 3.4; opacity: 1; } .costellazione .tocco { fill: none; stroke: none; pointer-events: all; } /* Il bersaglio per il dito è il CONTORNO trasparente del cerchio: un puntino di due pixel non si centra, un'area di venti sì. Il contorno è dipinto (trasparente ma dipinto), quindi riceve il tocco — e non aggiunge un secondo elemento al disegno. */ .costellazione a.punto { cursor: pointer; } .costellazione a.punto .pallino { transition: r .18s, fill .18s, stroke-width .18s; } .costellazione a.punto:hover .pallino, .costellazione a.punto:focus .pallino, .costellazione a.punto.acceso .pallino { fill: hsl(var(--comune-h, 14), 86%, 46%); stroke: #fff; stroke-width: 4; r: 11; } .costellazione a.punto:focus { outline: none; } /* ── la mappa grande di un comune ─────────────────────────────────────────── */ /* ⚠ Anche questa rifatta guardando la pagina: con proporzione 10/7 su schermo largo il riquadro era alto 840 px, quasi tutto vuoto, e i punti finivano sotto la piega. Ora è un pannello panoramico con un tetto d'altezza. */ .mappa-paese { position: relative; border-radius: var(--raggio-g); overflow: hidden; background: radial-gradient(90% 120% at 50% 0%, hsl(var(--comune-h, 14), 34%, 97%) 0%, transparent 70%), var(--carta-alt); border: 1px solid var(--bordo); color: hsl(var(--comune-h, 14), 52%, 32%); } .mappa-paese .costellazione { padding: 2%; } .mappa-paese .legenda { position: absolute; right: 14px; top: 12px; display: flex; flex-direction: column; gap: 6px; background: color-mix(in srgb, var(--carta) 86%, transparent); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 9px 12px; font-size: .76rem; color: var(--tenue); backdrop-filter: blur(3px); } .mappa-paese .legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .5; margin-right: 7px; } .mappa-paese .legenda .luogo i { background: none; border: 1.6px solid currentColor; opacity: .85; } .mappa-paese .fonte-mappa { position: absolute; left: 14px; bottom: 10px; font-size: .7rem; color: var(--tenue); } .mappa-paese .fonte-mappa a { color: inherit; } /* l'etichetta che compare sul punto: al passaggio del mouse, al tocco, o col tasto tab */ .etichetta-punto { position: fixed; z-index: 60; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .16s, transform .16s; background: var(--notte); color: #fff; border-radius: 8px; padding: 8px 11px; font-size: .84rem; line-height: 1.25; max-width: 15em; box-shadow: var(--ombra-2); } .etichetta-punto.vista { opacity: 1; transform: translateY(0); } .etichetta-punto b { display: block; font-weight: 700; } .etichetta-punto span { color: var(--notte-tenue); font-size: .78rem; } .etichetta-punto em { display: block; margin-top: 3px; font-style: normal; font-size: .74rem; color: hsl(var(--comune-h, 14), 70%, 74%); } @media (max-width: 620px) { /* sul telefono la mappa si fa alta: più pixel per punto, e i bersagli si centrano col dito */ .mappa-paese { aspect-ratio: 4 / 5; } .mappa-paese .legenda { right: 8px; top: 8px; padding: 7px 9px; font-size: .72rem; } .etichetta-punto { max-width: 68vw; font-size: .88rem; } } @media (prefers-color-scheme: dark) { .mappa-paese { color: hsl(var(--comune-h, 14), 55%, 66%); } .costellazione .territorio { fill-opacity: .10; stroke-opacity: .5; } } /* ══════════════════════════════════════════════════════════════════════════════ OGNI COMUNE UN POSTO DIVERSO ────────────────────────────────────────────────────────────────────────────── Prima cambiava solo una barra colorata e le sette pagine sembravano la stessa. Ora, entrando in un comune, cambia TUTTO l'accento del portale: pulsanti, link, etichette, filetti, riquadri. Più la trama di fondo della testata, diversa per ogni paese, e la sagoma vera del territorio. Il colore arriva da --comune-h (campo Tinta nel database, impostato dal master sul body): qui si ricava da quello l'intera famiglia di accenti. Un comune nuovo eredita il proprio colore senza scrivere una riga di CSS. ══════════════════════════════════════════════════════════════════════════════ */ body[style*="--comune-h"] { --accento: hsl(var(--comune-h), 58%, 36%); --accento-viva: hsl(var(--comune-h), 62%, 28%); --accento-luce: hsl(var(--comune-h), 58%, 96%); } @media (prefers-color-scheme: dark) { body[style*="--comune-h"] { --accento: hsl(var(--comune-h), 62%, 62%); --accento-viva: hsl(var(--comune-h), 68%, 72%); --accento-luce: hsl(var(--comune-h), 34%, 14%); } } /* La barra del menu prende la tinta del paese: è la prima cosa che si vede cambiare */ .navigazione { border-top: 3px solid hsl(var(--comune-h), 58%, 42%); } /* ── la trama della testata: una per comune ────────────────────────────────── Sette trame geometriche diverse, disegnate in CSS (nessun file da scaricare). Sono discrete: si notano come "grana", ma bastano perché due comuni non si confondano. La classe la mette la pagina, in base all'Id del comune. */ .insegna-paese::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5; mix-blend-mode: soft-light; } /* 1 · punti */ .trama-1::after { background-image: radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.2px); background-size: 16px 16px; } /* 2 · righe diagonali */ .trama-2::after { background-image: repeating-linear-gradient(48deg, rgba(255,255,255,.24) 0 1px, transparent 1px 11px); } /* 3 · reticolo */ .trama-3::after { background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.20) 0 1px, transparent 1px 18px), repeating-linear-gradient(90deg, rgba(255,255,255,.20) 0 1px, transparent 1px 18px); } /* 4 · onde */ .trama-4::after { background-image: repeating-radial-gradient(circle at 0 100%, transparent 0 22px, rgba(255,255,255,.22) 22px 23px, transparent 23px 44px); background-size: 90px 90px; } /* 5 · righe verticali larghe */ .trama-5::after { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 2px, transparent 2px 26px); } /* 6 · scacchi minuti */ .trama-6::after { background-image: repeating-conic-gradient(rgba(255,255,255,.16) 0% 25%, transparent 0% 50%); background-size: 22px 22px; } /* 7 · tratteggio incrociato */ .trama-7::after { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.20) 0 1px, transparent 1px 9px), repeating-linear-gradient(-45deg, rgba(255,255,255,.20) 0 1px, transparent 1px 9px); } /* la riga d'identità del paese: patrono, abitanti, motto — contenuto che cambia davvero */ .insegna-paese .identita { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 18px 0 0; align-items: center; } .insegna-paese .identita .voce { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.20); border-radius: 999px; padding: 6px 13px; font-size: .84rem; color: #fff; backdrop-filter: blur(2px); } .insegna-paese .identita .motto { font-family: var(--serif); font-style: italic; font-size: 1rem; color: hsl(var(--comune-h), 70%, 82%); background: none; border: none; padding-left: 0; } /* ══ NIENTE SFONDAMENTI IN LARGHEZZA ═══════════════════════════════════════════ Su 390 px la riga della testata (marchio + data + pulsante Accedi) non andava a capo: sommava a più di 390 px e allargava TUTTA la pagina, che così appariva tagliata a destra in ogni sua parte. Visto in una fotografia della pagina a 390 px. Si corregge la causa (la riga va a capo, la data sparisce quando non c'è spazio) e si mette una rete di sicurezza sul body. */ .testata .riga { flex-wrap: wrap; row-gap: 8px; } @media (max-width: 620px) { /* la data è un vezzo da quotidiano: sul telefono lo spazio serve al contenuto */ .data-oggi { display: none; } .titolo-sezione { flex-wrap: wrap; row-gap: 6px; } .titolo-sezione a { white-space: normal; } .insegna-paese .cifre { gap: 12px 22px; } } /* Rete di sicurezza: "clip" non crea un contenitore di scorrimento (a differenza di overflow:hidden) e quindi non rompe gli elementi appiccicati in alto. Se un giorno un elemento sfonda, la pagina non si allarga: si vede il difetto lì, non su tutto. */ html { overflow-x: clip; } body { overflow-x: clip; } /* ══ TELEFONO: le ultime spaginature ═══════════════════════════════════════════ Viste a 390 px veri (pagina dentro un iframe di quella larghezza — Chrome senza finestra non scende sotto 485 e mostrava una foto ritagliata, non la verità). */ /* la mappa prende le proporzioni del comune… */ .mappa-paese, .mappa-carta { aspect-ratio: var(--prop, 1.6); } @media (max-width: 620px) { /* …ma su un telefono una forma larga e piatta diventava una striscia di 130 px, con i punti troppo piccoli per il dito: si "addolcisce" il formato e si mette un minimo. */ .mappa-paese, .mappa-carta { aspect-ratio: max(1.05, calc(var(--prop, 1.6) / 1.7)); } /* i numeri della testata: una griglia regolare invece di righe ragged */ .insegna-paese .cifre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; } .insegna-paese .cifra b { font-size: 1.45rem; } .insegna-paese .cifra span { font-size: .68rem; letter-spacing: .06em; } /* le pillole d'identità: il motto va a capo per conto suo, senza incollarsi al bordo */ .insegna-paese .identita { gap: 7px; } .insegna-paese .identita .motto { flex: 1 0 100%; padding: 0; } .insegna-paese .identita .voce { font-size: .8rem; padding: 5px 11px; } /* la legenda della mappa non deve mangiare la cartina */ .mappa-paese .legenda { position: static; margin: 8px 10px 0; border: none; background: none; flex-direction: row; gap: 14px; padding: 0; backdrop-filter: none; } .mappa-paese .fonte-mappa { position: static; margin: 4px 10px 8px; } .mappa-paese { display: flex; flex-direction: column; aspect-ratio: auto; } .mappa-paese .costellazione { aspect-ratio: max(1.05, calc(var(--prop, 1.6) / 1.7)); padding: 3%; } } /* ══ LA CARTINA AL BUIO ════════════════════════════════════════════════════════ ⚠ Segnalato da chi guardava il sito dal telefono: «vedo la mappa come un blocco nero». Ed era vero — e non lo avevo visto perché provavo tutto in tema chiaro. Al buio: il fondo del pannello era quasi nero, il territorio riempito al 7% di un colore medio spariva, le strade al 30% pure, e i pallini erano scuri su scuro (fill al 34% di luminosità). Risultato: un rettangolo nero. Qui la cartina viene ridisegnata per il buio: fondo che si distacca, territorio più marcato, strade leggibili, punti CHIARI con contorno scuro. */ @media (prefers-color-scheme: dark) { .mappa-paese, .mappa-carta { background: radial-gradient(90% 120% at 50% 0%, hsl(var(--comune-h, 14), 30%, 17%) 0%, transparent 70%), hsl(var(--comune-h, 14), 20%, 11%); border-color: hsl(var(--comune-h, 14), 22%, 24%); color: hsl(var(--comune-h, 14), 48%, 62%); } /* il territorio deve leggersi come una massa, non come un contorno perso */ .costellazione .territorio { fill: hsl(var(--comune-h, 14), 34%, 22%); fill-opacity: .85; stroke: hsl(var(--comune-h, 14), 46%, 62%); stroke-opacity: .55; } .costellazione .strade path { stroke: hsl(var(--comune-h, 14), 30%, 52%); stroke-opacity: .55; } /* i punti si invertono: chiari con il contorno scuro, così staccano dal territorio */ .costellazione .negozi .pallino { fill: hsl(var(--comune-h, 14), 78%, 66%); stroke: hsl(var(--comune-h, 14), 24%, 10%); stroke-width: 2.2; } .costellazione .luoghi .pallino { fill: hsl(var(--comune-h, 14), 22%, 12%); stroke: hsl(var(--comune-h, 14), 72%, 70%); stroke-width: 3.4; } .costellazione a.punto:hover .pallino, .costellazione a.punto:focus .pallino, .costellazione a.punto.acceso .pallino { fill: #fff; stroke: hsl(var(--comune-h, 14), 80%, 60%); stroke-width: 4; } .costellazione .qui .nucleo { fill: hsl(var(--comune-h, 14), 84%, 66%); stroke: #0e1218; stroke-width: 5; } .costellazione .qui .alone { fill: hsl(var(--comune-h, 14), 84%, 66%); opacity: .26; } .costellazione .qui .alone2 { fill: hsl(var(--comune-h, 14), 84%, 66%); opacity: .13; } .mappa-paese .legenda { background: color-mix(in srgb, var(--carta) 82%, transparent); border-color: hsl(var(--comune-h, 14), 22%, 26%); color: var(--tenue); } .mappa-carta .etichetta-mappa, .mappa-paese .fonte-mappa { color: var(--tenue); } /* le sette forme in home: stesso trattamento, altrimenti sono sette macchie nere */ .paese .forma { color: hsl(var(--comune-h), 48%, 62%); } .paese { background: var(--carta-alt); border-color: var(--bordo); } } /* I numeri del portale sono cinque: su due colonne resta una casella vuota, e con il fondo della griglia a fare da bordo si vedeva come un rettangolo grigio. L'ultima si allarga. */ @media (max-width: 620px) { .cifre-portale { grid-template-columns: 1fr 1fr; } .cifre-portale > div:nth-child(odd):last-child { grid-column: 1 / -1; } .cifre-portale > div { padding: 16px 12px; } .cifre-portale b { font-size: 1.6rem; } } /* ⚠ MAI aspect-ratio + max-height sullo stesso elemento: il browser, per rispettare entrambi, RESTRINGE LA LARGHEZZA — il pannello della mappa risultava 676 px su un contenitore da 1190 e sembrava "tagliato" (misurato, non supposto). Si limita invece la proporzione: la larghezza resta piena e l'altezza non può superare width/2.2. */ .mappa-paese { aspect-ratio: max(2.2, var(--prop, 1.6)); max-height: none; } .mappa-carta { aspect-ratio: max(1.9, var(--prop, 1.6)); max-height: none; } @media (max-width: 620px) { .mappa-paese { aspect-ratio: auto; } .mappa-carta { aspect-ratio: max(1.05, calc(var(--prop, 1.6) / 1.7)); } } /* ══════════════════════════════════════════════════════════════════════════════ OGNI COMUNE UNA PAGINA SUA — non solo un colore ────────────────────────────────────────────────────────────────────────────── Segnalazione: «Mugnano è uguale a Giugliano, Calvizzano è uguale a Villaricca». Vero: cambiava la tinta ma l'impaginazione era identica, e l'occhio legge prima la forma della pagina che il colore. Qui cambiano TRE cose per comune: · l'impianto della testata (tre varianti: A insegna a fianco, B nome sopra la sagoma a piena larghezza, C pannello diviso con i numeri in colonna); · la disposizione del mosaico (quale tessera pesa il doppio); · l'ORDINE dei blocchi, deciso da ciò che quel comune ha davvero (chi ha 103 negozi apre con la mappa, chi ha 21 avvisi apre con gli avvisi). ══════════════════════════════════════════════════════════════════════════════ */ /* ── variante B: il nome sopra la sagoma, a piena larghezza ─────────────────── */ .insegna-paese.forma-b { padding-top: clamp(30px, 6vw, 70px); } .insegna-paese.forma-b .costellazione.fondale { left: 0; right: 0; top: -4%; bottom: -18%; opacity: .38; mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 100%); } .insegna-paese.forma-b .dentro { max-width: none; text-align: center; margin: 0 auto; } .insegna-paese.forma-b h1 { font-size: clamp(2.3rem, 8vw, 5.4rem); letter-spacing: -.03em; } .insegna-paese.forma-b .identita, .insegna-paese.forma-b .cifre { justify-content: center; } .insegna-paese.forma-b .cifre { border-top-color: rgba(255,255,255,.22); } .insegna-paese.forma-b .stemma-grande { display: block; margin: 0 auto .4em; } /* ── variante C: pannello diviso, numeri in colonna a sinistra ──────────────── */ @media (min-width: 780px) { .insegna-paese.forma-c { display: grid; grid-template-columns: 1fr minmax(180px, .42fr); gap: 30px; } .insegna-paese.forma-c .dentro { grid-column: 1; } .insegna-paese.forma-c .identita { grid-column: 1; } .insegna-paese.forma-c .cifre { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; gap: 16px; border-top: none; border-left: 1px solid rgba(255,255,255,.18); padding: 4px 0 4px 24px; margin: 0; align-content: start; } .insegna-paese.forma-c .costellazione.fondale { left: 30%; opacity: .34; } } /* ── disposizioni del mosaico: cambia quale tessera domina ──────────────────── */ @media (min-width: 860px) { .mosaico.disp-2 .m-4 { grid-column: span 3; } .mosaico.disp-2 .m-3:first-of-type { grid-column: span 4; } .mosaico.disp-2 .m-2.m-alta { grid-column: span 3; grid-row: span 1; } .mosaico.disp-3 .m-4 { grid-column: span 6; } .mosaico.disp-3 .m-2 { grid-column: span 3; } .mosaico.disp-3 .m-3 { grid-column: span 2; } .mosaico.disp-4 .m-4 { grid-column: span 2; } .mosaico.disp-4 .m-2:first-of-type { grid-column: span 4; } .mosaico.disp-4 .m-3 { grid-column: span 3; } } /* ── ordina e ritira ────────────────────────────────────────────────────────── */ .prodotto form.aggiungi { display: flex; gap: 8px; align-items: center; margin-top: 12px; } .prodotto form.aggiungi .campo { width: 66px; padding: 7px 9px; } .prodotto form.aggiungi .bottone { padding: 8px 14px; font-size: .86rem; } .prodotto.esaurito { opacity: .55; } .prodotto.esaurito .prezzo { text-decoration: line-through; } .ordina-qui { border-left: 3px solid var(--accento); } /* il numerino del carrello nel menu: dice che c'è un ordine iniziato */ .navigazione .carrello .conta { background: var(--accento); color: #fff; } /* ═══════════════════════════════════════════════════════════════════════════ ORDINA E RITIRA Il negozio di quartiere che vende senza commissioni. Tre pezzi visivi: il carrello in testata, l'etichetta «ordina e ritira», la fascia di richiamo. ⚠ L'etichetta usa il VERDE dei negozi anche fuori dalla sezione negozi: è un marchio di funzione, non di sezione, e deve restare riconoscibile ovunque. ═════════════════════════════════════════════════════════════════════════ */ .carrello-pillola { background: var(--accento); border-color: var(--accento); color: #fff !important; font-weight: 600; gap: 7px; display: inline-flex; align-items: center; } a.carrello-pillola:hover { background: var(--accento-viva, var(--accento)); color: #fff !important; } .carrello-pillola .conta { background: rgba(255,255,255,.24); border-radius: 999px; min-width: 1.35em; padding: 0 .35em; text-align: center; font-variant-numeric: tabular-nums; } .carrello-pillola svg { stroke: #fff; } .etichetta.ordinabile { background: #eef4ea; border-color: #c3d6b7; color: #35502a; font-weight: 600; } .etichetta.ordinabile svg { stroke: #4b6b3a; } /* la fascia di richiamo: scura, per staccare dal resto della pagina */ .fascia-ordina { background: var(--notte); color: #f4f1ea; border-radius: 18px; padding: 30px 28px; margin: 30px 0 8px; background-image: radial-gradient(120% 90% at 100% 0%, rgba(184,73,42,.30), transparent 60%), radial-gradient(90% 70% at 0% 100%, rgba(75,107,58,.26), transparent 62%); } .fascia-ordina .occhiello { color: #e7bfae; margin: 0 0 6px; } .fascia-ordina h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 4.4vw, 2.3rem); line-height: 1.12; color: #fff; } .fascia-ordina .testo { margin: 0; max-width: 62ch; color: #dfe6ea; } .fascia-ordina .testo strong, .fascia-ordina .chiusa strong { color: #fff; } .fascia-ordina .passi { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin: 26px 0 0; } .fascia-ordina .passi > div { border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 16px 16px 14px; background: rgba(255,255,255,.045); } .fascia-ordina .numero { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: var(--accento); color: #fff; font-size: .84rem; font-weight: 700; margin-bottom: 9px; } .fascia-ordina .passi strong { display: block; color: #fff; margin-bottom: 5px; } .fascia-ordina .passi p { margin: 0; font-size: .92rem; color: #cbd6dd; } .fascia-ordina .chiusa { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); font-size: .94rem; color: #cbd6dd; } /* griglia a tre e carta senza immagine, per la fascia dei negozi che vendono */ .carte.tre { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .carta.compatta { padding: 18px 18px 16px; } .carta.compatta h3 { margin: 10px 0 6px; } @media (max-width: 620px) { .fascia-ordina { padding: 22px 17px; border-radius: 15px; margin-left: 0; margin-right: 0; } .fascia-ordina .passi { gap: 12px; margin-top: 20px; } .fascia-ordina .passi > div { padding: 14px 14px 12px; } /* ⚠ in testata su schermo stretto il carrello resta, la data no: è la data che si taglia */ .carrello-pillola { order: -1; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .etichetta.ordinabile { background: rgba(120,170,95,.16); border-color: rgba(150,196,124,.42); color: #cfe3c1; } :root:not([data-theme="light"]) .etichetta.ordinabile svg { stroke: #a8cc92; } :root:not([data-theme="light"]) .fascia-ordina { background-color: #101a22; } } :root[data-theme="dark"] .etichetta.ordinabile { background: rgba(120,170,95,.16); border-color: rgba(150,196,124,.42); color: #cfe3c1; } :root[data-theme="dark"] .etichetta.ordinabile svg { stroke: #a8cc92; } :root[data-theme="dark"] .fascia-ordina { background-color: #101a22; } /* ═══════════════════════════════════════════════════════════════════════════ AREA RISERVATA DEL COMMERCIANTE (/mio) ⚠ Chi la usa non sta al computer: sta dietro un banco, con il telefono in una mano. Comandi grandi, un menu solo che scorre in orizzontale, nessun sottomenu, e le cose che si usano ogni giorno raggiungibili col pollice. ⚠ Fondo scuro in testata e menu: dice «qui stai lavorando», non «stai navigando il portale». Il corpo resta chiaro, per leggere e scrivere. ═════════════════════════════════════════════════════════════════════════ */ .area-mia { background: var(--carta); color: var(--inchiostro); } .testata-mia { background: var(--notte); color: #fff; padding: 13px 0; } .testata-mia .riga { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .testata-mia .marchio { color: #fff; font-size: 1.25rem; } .testata-mia .etichetta-area { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--notte-tenue); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 3px 10px; } .testata-mia .chi { margin-left: auto; font-size: .87rem; color: var(--notte-tenue); display: inline-flex; align-items: center; gap: 7px; } .testata-mia .chi svg { stroke: var(--notte-tenue); } .testata-mia .chi a { color: #fff; font-weight: 600; } /* la striscia della redazione: deve dare fastidio quanto basta per non dimenticarla */ .barra-redazione { background: #9a6410; color: #fff; font-size: .88rem; } .barra-redazione .contenitore { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 20px; } .barra-redazione .segno { display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; background: rgba(0,0,0,.22); border-radius: 999px; padding: 3px 9px; } .barra-redazione .segno svg { stroke: #fff; } .barra-redazione .dice strong { color: #fff; } .barra-redazione form { display: flex; gap: 6px; margin-left: auto; } .barra-redazione input { border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.14); color: #fff; border-radius: 8px; padding: 5px 9px; font: inherit; width: 170px; } .barra-redazione input::placeholder { color: rgba(255,255,255,.72); } .barra-redazione button, .barra-redazione > .contenitore > a { background: #fff; color: #6b4409; border: 0; border-radius: 8px; padding: 5px 12px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; } /* la barra col nome del negozio: dove sono */ .barra-negozio { background: var(--notte-alt); color: #fff; padding: 12px 0; } .barra-negozio .contenitore { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .barra-negozio .nome { display: flex; flex-direction: column; gap: 2px; } .barra-negozio .nome strong { font-size: 1.15rem; font-family: var(--serif); } .barra-negozio .nome .tenue { color: var(--notte-tenue); font-size: .84rem; } .barra-negozio .etichetta { margin-left: auto; border-color: rgba(255,255,255,.3); color: #fff; background: none; } .barra-negozio .etichetta svg { stroke: #fff; } /* il menu: una riga sola, scorre col dito quando non ci sta */ .menu-mio { background: var(--notte); border-top: 1px solid rgba(255,255,255,.1); position: sticky; top: 0; z-index: 30; } .menu-mio .contenitore { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .menu-mio .contenitore::-webkit-scrollbar { display: none; } .menu-mio a { display: inline-flex; align-items: center; gap: 8px; padding: 13px 14px; color: var(--notte-tenue); font-size: .93rem; font-weight: 600; text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; } .menu-mio a svg { stroke: var(--notte-tenue); } .menu-mio a:hover { color: #fff; } .menu-mio a:hover svg { stroke: #fff; } .menu-mio a.qui { color: #fff; border-bottom-color: var(--accento); } .menu-mio a.qui svg { stroke: #fff; } .menu-mio .conta { background: var(--accento); color: #fff; border-radius: 999px; font-size: .74rem; min-width: 1.5em; padding: 1px .4em; text-align: center; } .corpo-mio { padding: 30px 20px 70px; max-width: 940px; } .testa-mia { margin-bottom: 26px; } .testa-mia h1 { font-size: clamp(1.7rem, 4.2vw, 2.5rem); margin: 4px 0 8px; line-height: 1.1; } .testa-mia .guida { color: var(--tenue); margin: 0; max-width: 62ch; } .piede-mio { border-top: 1px solid var(--bordo); padding: 20px 0 40px; font-size: .86rem; color: var(--tenue); } .piede-mio .contenitore { display: flex; gap: 16px; flex-wrap: wrap; } .piede-mio a { color: var(--tenue); } /* ── il richiamo degli ordini nuovi: la cosa che non può aspettare ─────────── */ .richiamo-ordini { display: flex; align-items: center; gap: 16px; background: var(--accento); color: #fff; border-radius: 16px; padding: 18px 20px; margin-bottom: 26px; text-decoration: none; } .richiamo-ordini:hover { background: var(--accento-viva, var(--accento)); } .richiamo-ordini .cifra { font-family: var(--serif); font-size: 2.4rem; line-height: 1; background: rgba(255,255,255,.18); border-radius: 14px; min-width: 66px; text-align: center; padding: 10px 6px; } .richiamo-ordini strong { display: block; font-size: 1.15rem; } .richiamo-ordini .tenue { color: rgba(255,255,255,.88); font-size: .9rem; } .richiamo-ordini .freccia { margin-left: auto; } .richiamo-ordini svg { stroke: #fff; } /* ── i numeri del cruscotto ────────────────────────────────────────────────── */ .numeri-mio { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .numeri-mio .numero { background: var(--carta-alt); border: 1px solid var(--bordo); border-radius: var(--raggio-g); padding: 18px; } .numeri-mio .numero.acceso { border-color: #c3d6b7; background: #eef4ea; } .numeri-mio .n { font-family: var(--serif); font-size: 2.2rem; line-height: 1; } .numeri-mio .e { font-size: .76rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; } .numeri-mio .tenue { font-size: .82rem; color: var(--tenue); margin-top: 8px; display: block; } .numeri-mio .su { color: #1a7f5a; font-weight: 700; } .numeri-mio .giu { color: var(--accento); font-weight: 700; } .barra-completa { height: 6px; border-radius: 99px; background: var(--bordo); margin-top: 10px; overflow: hidden; } .barra-completa span { display: block; height: 100%; background: var(--accento); } /* ── che cosa conviene fare: la lista con le spunte ────────────────────────── */ .passi-mio { display: grid; gap: 10px; } .passi-mio .passo { display: flex; gap: 13px; align-items: flex-start; background: var(--carta); border: 1px solid var(--bordo); border-left: 3px solid var(--accento); border-radius: var(--raggio); padding: 15px 16px; text-decoration: none; color: inherit; } .passi-mio .passo:hover { border-color: var(--accento); } .passi-mio .passo strong { display: block; } .passi-mio .passo .tenue { color: var(--tenue); font-size: .89rem; } .passi-mio .passo .segno { flex: 0 0 22px; height: 22px; border-radius: 999px; border: 2px solid var(--bordo-forte); display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; } .passi-mio .passo.fatto { border-left-color: #4b6b3a; opacity: .72; } .passi-mio .passo.fatto .segno { background: #4b6b3a; border-color: #4b6b3a; } .passi-mio .passo.fatto .segno svg { stroke: #fff; } /* ── l'elenco di quello che vendo ──────────────────────────────────────────── */ .voci-mio { display: grid; gap: 10px; } .voci-mio .voce { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 14px 16px; } .voci-mio .voce.esaurita { background: var(--carta-alt); } .voci-mio .voce.esaurita .corpo strong { text-decoration: line-through; opacity: .7; } .voci-mio .corpo { flex: 1 1 240px; display: flex; flex-direction: column; gap: 3px; } .voci-mio .corpo .tenue { font-size: .87rem; color: var(--tenue); } .voci-mio .prezzo { font-weight: 700; white-space: nowrap; } .voci-mio .comandi { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; } .voci-mio .comandi form { display: inline; } .voci-mio .comandi button { cursor: pointer; background: none; } /* ── l'interruttore degli ordini ───────────────────────────────────────────── */ .interruttore-ordini { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; border: 1px solid var(--bordo-forte); border-radius: 16px; padding: 20px 22px; background: var(--carta-alt); } .interruttore-ordini.acceso { border-color: #8fae7c; background: #eef4ea; } .interruttore-ordini > div { flex: 1 1 280px; display: flex; flex-direction: column; gap: 5px; } .interruttore-ordini strong { font-size: 1.2rem; font-family: var(--serif); } .interruttore-ordini .tenue { color: var(--tenue); font-size: .9rem; } .interruttore-ordini form { margin: 0; } @media (max-width: 620px) { .testata-mia .chi { margin-left: 0; width: 100%; } .testata-mia { padding: 11px 0; } .corpo-mio { padding: 22px 16px 60px; } .barra-redazione .contenitore { padding: 9px 16px; } .barra-redazione form { margin-left: 0; width: 100%; } .barra-redazione input { flex: 1 1 auto; width: auto; } .barra-negozio .etichetta { margin-left: 0; } .menu-mio a { padding: 12px 11px; font-size: .9rem; } .richiamo-ordini { padding: 15px 16px; gap: 13px; } .richiamo-ordini .cifra { font-size: 2rem; min-width: 56px; } /* i comandi di una voce, a tutta larghezza: si premono col pollice */ .voci-mio .comandi { width: 100%; } .voci-mio .comandi .etichetta, .voci-mio .comandi button { padding: 8px 12px; } .interruttore-ordini { padding: 17px 16px; } .interruttore-ordini .bottone { width: 100%; justify-content: center; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .numeri-mio .numero.acceso, :root:not([data-theme="light"]) .interruttore-ordini.acceso { background: rgba(120,170,95,.13); border-color: rgba(150,196,124,.4); } :root:not([data-theme="light"]) .passi-mio .passo.fatto .segno { background: #6f9257; border-color: #6f9257; } } :root[data-theme="dark"] .numeri-mio .numero.acceso, :root[data-theme="dark"] .interruttore-ordini.acceso { background: rgba(120,170,95,.13); border-color: rgba(150,196,124,.4); } :root[data-theme="dark"] .passi-mio .passo.fatto .segno { background: #6f9257; border-color: #6f9257; } /* ═══════════════════════════════════════════════════════════════════════════ SPAZIO SPONSORIZZATO ⚠ Deve somigliare alle carte intorno (altrimenti è un cartellone che rovina la pagina) ma NON deve poter essere confuso con una notizia: bordo di accento, fondo appena diverso, ed etichetta esplicita sempre presente. ═════════════════════════════════════════════════════════════════════════ */ .carta.sponsor { background: var(--carta-calda); border-color: var(--bordo-forte); box-shadow: inset 3px 0 0 var(--accento); } .etichetta.segno-sponsor { background: transparent; border-style: dashed; border-color: var(--bordo-forte); color: var(--tenue); letter-spacing: .06em; text-transform: uppercase; font-size: .68rem; } /* ── il confronto dei costi nella pagina del negozio online ────────────────── */ .confronto-costi { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .confronto-costi .colonna { border: 1px solid var(--bordo); border-radius: 14px; padding: 18px; } .confronto-costi .noi { border-color: #8fae7c; background: #eef4ea; } .confronto-costi .loro { background: var(--carta-alt); } .confronto-costi .cifra { font-family: var(--serif); font-size: 2.6rem; line-height: 1; margin: 6px 0 12px; } .confronto-costi .noi .cifra { color: #3b562d; } .confronto-costi .loro .cifra { color: var(--accento); } .confronto-costi ul { margin: 0; padding-left: 20px; line-height: 1.65; font-size: .93rem; } .confronto-costi .loro ul { color: var(--tenue); } /* ── le domande frequenti ──────────────────────────────────────────────────── */ .domande { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .domande > div { border-left: 3px solid var(--bordo-forte); padding: 2px 0 2px 15px; } .domande strong { display: block; margin-bottom: 5px; } .domande p { margin: 0; color: var(--tenue); font-size: .93rem; } .bottone.chiaro.vuoto { background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .carta.sponsor { background: rgba(255,255,255,.035); } :root:not([data-theme="light"]) .confronto-costi .noi { background: rgba(120,170,95,.12); border-color: rgba(150,196,124,.4); } } :root[data-theme="dark"] .carta.sponsor { background: rgba(255,255,255,.035); } :root[data-theme="dark"] .confronto-costi .noi { background: rgba(120,170,95,.12); border-color: rgba(150,196,124,.4); } /* ═══════════════════════════════════════════════════════════════════════════ IL TEMPO ⚠ Le icone sono disegnate nel codice (Meteo.Icona): i colori arrivano da qui, così restano coerenti col portale e funzionano anche in tema scuro. ⚠ Deve leggersi in un colpo d'occhio da un telefono in mano: temperatura grande, cielo in parole, e la tendenza in una riga che scorre. ═════════════════════════════════════════════════════════════════════════ */ .tessera.meteo .adesso { display: flex; align-items: center; gap: 16px; margin: 10px 0 4px; } .tessera.meteo .lettura { display: flex; flex-direction: column; gap: 2px; } .tessera.meteo .gradi { font-family: var(--serif); font-size: 2.5rem; line-height: 1; } .tessera.meteo .cielo { font-size: 1rem; } .tessera.meteo .estremi { font-size: .84rem; } .tessera.meteo .tendenza { display: flex; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bordo); overflow-x: auto; scrollbar-width: none; } .tessera.meteo .tendenza::-webkit-scrollbar { display: none; } .tessera.meteo .giorno { flex: 1 1 0; min-width: 62px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; } .tessera.meteo .quando { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); } .tessera.meteo .valori { font-size: .85rem; display: flex; gap: 5px; } .tessera.meteo .coda.nonlink { color: var(--tenue); font-size: .76rem; } /* i colori del cielo: pochi, e sempre gli stessi */ .segno-meteo .astro { fill: #eba13a; } .segno-meteo .raggi { stroke: #eba13a; stroke-width: 2.1; stroke-linecap: round; } .segno-meteo .nube { fill: #b9c6cf; } .segno-meteo .nube-dietro { fill: #d5dee4; } .segno-meteo .acqua { stroke: #4a86b8; stroke-width: 2.2; stroke-linecap: round; } .segno-meteo .fulmine { fill: #e0a52c; } .segno-meteo .neve { stroke: #7fa8c4; stroke-width: 2; stroke-linecap: round; } .segno-meteo .foschia { stroke: #9fb0bb; stroke-width: 2.2; stroke-linecap: round; } /* col sole dietro la nuvola la nuvola sta davanti: si abbassa un poco il sole */ .segno-meteo.m-velato .astro, .segno-meteo.m-velato .raggi { opacity: .95; } @media (max-width: 620px) { .tessera.meteo .gradi { font-size: 2.1rem; } .tessera.meteo .adesso { gap: 12px; } .tessera.meteo .giorno { min-width: 56px; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .segno-meteo .nube { fill: #7d8b96; } :root:not([data-theme="light"]) .segno-meteo .nube-dietro { fill: #5f6b75; } :root:not([data-theme="light"]) .segno-meteo .acqua { stroke: #74a9d4; } } :root[data-theme="dark"] .segno-meteo .nube { fill: #7d8b96; } :root[data-theme="dark"] .segno-meteo .nube-dietro { fill: #5f6b75; } :root[data-theme="dark"] .segno-meteo .acqua { stroke: #74a9d4; } /* l'insegna disegnata: il segno di riserva per un comune senza stemma utilizzabile */ .insegna-disegnata { display: block; } .insegna-comune .insegna-disegnata { margin-right: 1px; } .stemmino .insegna-disegnata { width: 24px; height: 24px; } a.insegna-comune { text-decoration: none; color: inherit; } a.insegna-comune:hover span { text-decoration: underline; } /* ═══════════════════════════════════════════════════════════════════════════ AREA DI GESTIONE: TELAIO A DUE COLONNE ⚠ Tredici voci in una barra orizzontale non si leggono: si scorre di lato e si va a tentoni. In colonna, raggruppate per scopo, si trovano a colpo d'occhio. Su schermo stretto la colonna torna una striscia che scorre — lì i gruppi restano ma le intestazioni sparirebbero come rumore. ═════════════════════════════════════════════════════════════════════════ */ .telaio-admin { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 30px; align-items: start; padding-top: 24px; padding-bottom: 70px; } .lato-admin { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 1px; } .lato-admin .gruppo { margin: 18px 0 6px; padding: 0 10px; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--tenue); opacity: .85; } .lato-admin a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; font-size: .92rem; font-weight: 600; color: var(--inchiostro); text-decoration: none; line-height: 1.25; } .lato-admin a svg { stroke: var(--tenue); flex: 0 0 auto; } .lato-admin a span { min-width: 0; } .lato-admin a:hover { background: var(--carta-calda); } .lato-admin a.attivo { background: var(--accento); color: #fff; } .lato-admin a.attivo svg { stroke: #fff; } .lato-admin .conta { margin-left: auto; background: var(--accento); color: #fff; border-radius: 999px; font-size: .74rem; font-weight: 700; padding: 1px .45em; min-width: 1.5em; text-align: center; } .lato-admin a.attivo .conta { background: rgba(255,255,255,.28); } .corpo-admin { min-width: 0; } @media (max-width: 900px) { .telaio-admin { grid-template-columns: 1fr; gap: 18px; padding-top: 14px; } .lato-admin { position: static; flex-direction: row; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; border-bottom: 1px solid var(--bordo); } .lato-admin::-webkit-scrollbar { display: none; } .lato-admin .gruppo { display: none; } .lato-admin a { white-space: nowrap; border-radius: 999px; padding: 8px 13px; } } /* ── il cruscotto della gestione ───────────────────────────────────────────── */ .blocco-admin { margin-bottom: 34px; } .blocco-admin > h2 { font-size: 1.15rem; margin: 0 0 4px; display: flex; align-items: center; gap: 9px; } .blocco-admin > .spiega { margin: 0 0 14px; color: var(--tenue); font-size: .9rem; } .decisioni { display: grid; gap: 10px; } .decisione { display: flex; align-items: center; gap: 14px; border: 1px solid var(--bordo); border-left: 3px solid var(--accento); border-radius: var(--raggio); background: var(--carta-alt); padding: 13px 15px; text-decoration: none; color: inherit; } .decisione:hover { border-color: var(--accento); } .decisione .quanti { font-family: var(--serif); font-size: 1.9rem; line-height: 1; min-width: 2.2em; text-align: center; color: var(--accento); } .decisione strong { display: block; } .decisione .tenue { font-size: .87rem; color: var(--tenue); } .decisione.calma { border-left-color: #8fae7c; } .decisione.calma .quanti { color: #4b6b3a; } /* riga di numeri cliccabili, con la voce sotto */ .numeri-admin { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); } /* ⚠ SOLO I FIGLI DIRETTI: senza il «>» la scatola veniva applicata anche ai div interni (numero, etichetta, nota) e ogni riquadro conteneva tre riquadri annidati. */ .numeri-admin > a, .numeri-admin > div { background: var(--carta-alt); border: 1px solid var(--bordo); border-radius: var(--raggio-g); padding: 15px; text-decoration: none; color: inherit; } .numeri-admin > a:hover { border-color: var(--accento); } .numeri-admin .n { font-family: var(--serif); font-size: 1.9rem; line-height: 1; } .numeri-admin .e { font-size: .74rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; } .numeri-admin .p { font-size: .8rem; color: var(--tenue); margin-top: 6px; } /* barre di confronto: quanto pesa una voce sul totale */ .barre { display: grid; gap: 9px; } .barre .voce { display: grid; grid-template-columns: minmax(0,1fr) 62px 52px; gap: 10px; align-items: center; } .barre .nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .93rem; } .barre .nome small { color: var(--tenue); } .barre .traccia { grid-column: 1 / -1; height: 5px; border-radius: 99px; background: var(--bordo); overflow: hidden; margin-top: -4px; } .barre .traccia span { display: block; height: 100%; background: var(--accento); } .barre .cifra { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .barre .quota { text-align: right; font-size: .85rem; color: var(--tenue); font-variant-numeric: tabular-nums; } /* «negozi vicino a me»: riga di comando sopra l'elenco */ .riga-vicino { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; } .riga-vicino .bottone { flex: 0 0 auto; } @media (max-width: 620px) { .riga-vicino .bottone { width: 100%; justify-content: center; } } /* ═══════════════════════════════════════════════════════════════════════════ LA PAGINA DI UNA NOTIZIA ⚠ Non è un articolo nostro: è un titolo, un riassunto e il rimando alla testata. La grafica lo deve dire, altrimenti sembra che ci appropriamo di un pezzo scritto da altri. ═════════════════════════════════════════════════════════════════════════ */ .articolo-notizia { max-width: 760px; } .articolo-notizia h1 { font-size: clamp(1.8rem, 4.6vw, 2.7rem); line-height: 1.12; margin: 10px 0 18px; } .articolo-notizia .foto-notizia { margin: 0 0 22px; } .articolo-notizia .foto-notizia figcaption { font-size: .8rem; margin-top: 7px; } .articolo-notizia .sommario { font-size: 1.12rem; line-height: 1.62; color: var(--inchiostro); } .rimando-fonte { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; border: 1px solid var(--bordo-forte); border-left: 3px solid var(--accento); border-radius: var(--raggio); background: var(--carta-alt); padding: 18px 20px; margin-top: 26px; } .rimando-fonte > div { flex: 1 1 260px; display: flex; flex-direction: column; gap: 5px; } .rimando-fonte .tenue { font-size: .88rem; color: var(--tenue); } @media (max-width: 620px) { .rimando-fonte { padding: 15px 16px; } .rimando-fonte .bottone { width: 100%; justify-content: center; } } /* ── catalogo: miniatura della voce ─────────────────────────────────────────── */ .voci-mio .miniatura { flex: 0 0 58px; width: 58px; height: 58px; border-radius: var(--raggio); overflow: hidden; background: var(--carta-alt); border: 1px solid var(--bordo); } .voci-mio .miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── vetrina: anteprima della locandina ─────────────────────────────────────── */ .anteprima-locandina { border: 1px solid var(--bordo); border-radius: var(--raggio-g); overflow: hidden; background: var(--carta-alt); } .anteprima-locandina img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; } /* ── agenda: un appuntamento ────────────────────────────────────────────────── */ .appuntamento .riga-ora { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .appuntamento .ora { font-family: var(--serif); font-size: 1.7rem; line-height: 1; } .appuntamento .fino { color: var(--tenue); font-size: .92rem; } .appuntamento .codice { margin-left: auto; font-size: .82rem; } @media (max-width: 620px) { .appuntamento .codice { margin-left: 0; } .appuntamento .bottone { width: 100%; justify-content: center; } } /* ── prenotare un orario ────────────────────────────────────────────────────── */ .scelta-servizi { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .scelta-servizi .serv { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--bordo); border-left: 3px solid var(--bordo-forte); border-radius: var(--raggio); padding: 14px 15px; text-decoration: none; color: inherit; background: var(--carta-alt); } .scelta-servizi .serv:hover { border-color: var(--accento); } .scelta-servizi .serv.scelto { border-left-color: var(--accento); background: var(--accento-luce); } .scelta-servizi .tenue { font-size: .88rem; color: var(--tenue); } .scelta-servizi .piccolo { font-size: .82rem; } /* ⚠ Gli orari sono PULSANTI GRANDI, non una tendina: si scelgono col pollice, e vedere tutti gli slot liberi insieme fa capire in un colpo com'è la giornata. */ .orari-liberi { display: flex; flex-wrap: wrap; gap: 8px; } .ora-libera { position: relative; } .ora-libera input { position: absolute; opacity: 0; pointer-events: none; } .ora-libera span { display: inline-block; border: 1px solid var(--bordo-forte); border-radius: 999px; padding: 9px 15px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; background: var(--carta-alt); } .ora-libera input:checked + span { background: var(--accento); border-color: var(--accento); color: #fff; } .ora-libera input:focus-visible + span { outline: 2px solid var(--accento); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════════════════ LA VETRINA DEL NEGOZIO ⚠ La tinta arriva da una variabile scritta sul contenitore (StileVetrina in scheda.aspx): tutto quello che qui usa var(--accento) si tinge da sé. ═════════════════════════════════════════════════════════════════════════ */ .locandina-negozio { border-radius: var(--raggio-g); overflow: hidden; margin: 0 0 26px; background: var(--carta-alt); border: 1px solid var(--bordo); aspect-ratio: 21 / 8; } .locandina-negozio img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 620px) { /* ⚠ Su telefono una fascia 21:8 diventa una striscia: si alza il rapporto */ .locandina-negozio { aspect-ratio: 16 / 10; margin-bottom: 20px; } } .slogan-negozio { margin: 2px 0 8px; font-family: var(--serif); font-size: 1.12rem; font-style: italic; color: var(--accento); } .racconto-negozio { font-size: 1.06rem; line-height: 1.72; border-left: 3px solid var(--accento); padding-left: 18px; margin: 0 0 30px; } .racconto-negozio p:first-child { margin-top: 0; } .racconto-negozio p:last-child { margin-bottom: 0; } /* la foto di una voce del catalogo */ .prodotti .foto-voce { display: block; border-radius: var(--raggio); overflow: hidden; margin: -2px 0 10px; aspect-ratio: 3 / 2; background: var(--carta-alt); } .prodotti .foto-voce img { width: 100%; height: 100%; object-fit: cover; display: block; } /* il campo del codice di attivazione: si legge da un foglio e si digita su un telefono */ .campo.codice-grande { font-size: 1.5rem; letter-spacing: .22em; text-transform: uppercase; text-align: center; font-variant-numeric: tabular-nums; max-width: 320px; } /* ═══════════════════════════════════════════════════════════════════════════ UTENTI E ACCESSI (gestione) ⚠ Gli stili stanno QUI e non negli attributi delle righe: la pagina è una tabella lunga, e con lo stile sparso dentro il markup diventa illeggibile al primo cambio. Nel .aspx c'è solo la struttura. ⚠ Carattere più grande della tabella di servizio: questa pagina si legge per cercare una persona, non per scorrere numeri. ═════════════════════════════════════════════════════════════════════════ */ .testa-admin { margin-bottom: 22px; } .testa-admin .riga-titolo { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .testa-admin .riga-titolo > div { flex: 1 1 auto; } .testa-admin .riga-titolo .bottone { flex: 0 0 auto; } .testa-admin h1 { font-size: clamp(1.7rem, 4vw, 2.2rem); margin: 2px 0 0; line-height: 1.1; } .testa-admin .guida { color: var(--tenue); margin: 10px 0 0; max-width: 64ch; } .testa-admin .conti { color: var(--tenue); font-size: .92rem; margin: 10px 0 0; } .testa-admin .conti strong { color: var(--inchiostro); } .filtri-utenti { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; } /* ⚠ La lente sta DENTRO il campo: serve position:relative sul contenitore e il testo spostato a destra, come in .cerca-grande. Senza, l'icona finiva sopra al campo — un dettaglio che fa sembrare la pagina rotta. */ .filtri-utenti .campo-testo { flex: 1 1 260px; position: relative; } .filtri-utenti .campo-testo .lente { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tenue); pointer-events: none; line-height: 0; } /* ⚠ Stessa altezza per campo, tendine e pulsante: tre altezze diverse in fila si vedono. */ .filtri-utenti input[type=text], .filtri-utenti select, .filtri-utenti .bottone { font: inherit; font-size: .95rem; padding: 11px 14px; line-height: 1.2; border-radius: var(--raggio); } /* ⚠ DOPO la regola comune, altrimenti «padding: 11px 14px» se lo mangia e la lente finisce sopra al testo (visto: «⌕rca per nome utente»). L'ordine, nei CSS, è la regola. */ .filtri-utenti input[type=text] { padding-left: 44px; } .filtri-utenti select { border: 1px solid var(--bordo-forte); background: var(--carta-alt); color: inherit; max-width: 200px; } .conta-righe { color: var(--tenue); font-size: .88rem; margin: 0 0 14px; } /* ⚠ Le etichette dentro questi elenchi devono restare piccole: con il corpo a .86rem, una etichetta grande fa saltare l'altezza della riga e l'elenco perde il ritmo. */ .tabella-utenti .etichetta, .tabella-elenco .etichetta { font-size: .7rem; padding: 3px 8px; } .tabella-utenti .bottone.mini, .tabella-elenco .bottone.mini { font-size: .76rem; padding: 5px 11px; } /* ⚠ Una tabella sola per utenti e attività: sono due elenchi di gestione con la stessa struttura (chi/cosa · dettagli · stato · azioni). Due fogli di stile paralleli avrebbero preso strade diverse al primo cambio. ⚠ Carattere piccolo, chiesto esplicitamente: sono elenchi che si scorrono, e più righe entrano nello schermo meno si scorre. La gerarchia resta (nome in grassetto, dettagli in grigio più piccolo), è la scala che si abbassa. */ .tabella-utenti, .tabella-elenco { width: 100%; border-collapse: collapse; font-size: .86rem; } .tabella-utenti th, .tabella-elenco th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tenue); padding: 0 12px 8px; border-bottom: 1px solid var(--bordo-forte); font-weight: 700; } .tabella-utenti td, .tabella-elenco td { padding: 10px 10px; border-bottom: 1px solid var(--bordo); vertical-align: top; } .tabella-utenti tr.sospeso td, .tabella-elenco tr.sospeso td { opacity: .55; } .tabella-utenti tr.aperta td, .tabella-elenco tr.aperta td { background: var(--accento-luce); } .tabella-utenti tr:hover td, .tabella-elenco tr:hover td { background: var(--carta-calda); } .tabella-utenti tr.aperta:hover td, .tabella-elenco tr.aperta:hover td { background: var(--accento-luce); } /* la colonna di chi è: tre righe con una gerarchia chiara */ .tabella-utenti .chi, .tabella-elenco .chi { display: flex; flex-direction: column; gap: 1px; min-width: 180px; } .tabella-utenti .utente, .tabella-elenco .utente { font-weight: 700; font-size: .94rem; } .tabella-utenti .persona, .tabella-elenco .persona { font-size: .84rem; color: var(--tenue); } .tabella-utenti .posta, .tabella-elenco .posta { font-size: .8rem; color: var(--tenue); word-break: break-all; } .tabella-utenti .nota-riga, .tabella-elenco .nota-riga { display: block; font-size: .78rem; color: var(--tenue); margin-top: 2px; } .tabella-utenti .quando, .tabella-elenco .quando { white-space: nowrap; font-size: .84rem; } .tabella-utenti .vuoto-cella, .tabella-elenco .vuoto-cella { color: var(--tenue); } .tabella-utenti td.azioni, .tabella-elenco td.azioni { text-align: right; white-space: nowrap; } .tabella-utenti td.azioni form, .tabella-elenco td.azioni form { display: inline; } .tabella-utenti td.azioni button, .tabella-elenco td.azioni button { cursor: pointer; background: none; } /* il dettaglio della riga aperta: tre pezzi affiancati, non un ammasso di campi */ .tabella-utenti tr.dettaglio td, .tabella-elenco tr.dettaglio td { background: var(--carta-alt); padding: 18px 12px 22px; } .pezzi-dettaglio { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .pezzi-dettaglio .campo { margin-bottom: 10px; } .pezzi-dettaglio .fine-dettaglio p { margin: 0 0 10px; color: var(--tenue); font-size: .9rem; } /* il modulo del nuovo utente: sezioni con un titolo, non trenta campi in fila */ .modulo-utente { max-width: 900px; } .modulo-utente .gruppo-campi { background: var(--carta-alt); border: 1px solid var(--bordo); border-radius: var(--raggio-g); padding: 20px 22px; margin-bottom: 16px; } .modulo-utente .gruppo-campi h2 { font-size: 1.02rem; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--bordo); } .modulo-utente .riga-comandi { display: flex; gap: 14px; align-items: center; margin: 4px 0 0; } @media (max-width: 760px) { /* ⚠ Su telefono la tabella diventa un elenco di schede: cinque colonne su 390 px non si leggono, e lo scorrimento laterale su una pagina di gestione è la cosa più fastidiosa. */ /* ⚠ Anche il TBODY va portato a block: il browser ne crea uno implicito e, restando un elemento di tabella, le righe non seguono la larghezza — le schede uscivano larghe due terzi dello schermo. Non si vede leggendo il markup, perché quel tbody non l'ha scritto nessuno. */ .tabella-utenti, .tabella-utenti tbody, .tabella-utenti tr, .tabella-utenti td, .tabella-elenco, .tabella-elenco tbody, .tabella-elenco tr, .tabella-elenco td { display: block; width: 100%; } .tabella-utenti tr:first-child, .tabella-elenco tr:first-child { display: none; } .tabella-utenti tr, .tabella-elenco tr { border: 1px solid var(--bordo); border-radius: var(--raggio-g); padding: 12px 14px; margin-bottom: 10px; background: var(--carta-alt); } .tabella-utenti td, .tabella-elenco td { border: 0; padding: 3px 0; } .tabella-utenti td.azioni, .tabella-elenco td.azioni { text-align: left; padding-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; } .tabella-utenti tr.dettaglio, .tabella-elenco tr.dettaglio { background: var(--carta-calda); } .filtri-utenti select { max-width: none; flex: 1 1 140px; } } /* ── le promozioni del negozio, sulla sua pagina ────────────────────────────── */ .promozioni { border: 1px dashed var(--accento); border-radius: var(--raggio-g); background: var(--accento-luce); padding: 16px 18px; margin: 0 0 26px; } .promozioni .occhiello { margin: 0 0 10px; } .promozioni .promo { display: flex; align-items: center; gap: 14px; padding: 7px 0; } .promozioni .promo + .promo { border-top: 1px solid rgba(0,0,0,.07); } .promozioni .valore { font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--accento); white-space: nowrap; } .promozioni .dettagli { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .promozioni .dettagli strong { letter-spacing: .04em; } .promozioni .tenue { font-size: .86rem; color: var(--tenue); } /* ── schede fra pagine sorelle nell'area del negozio ───────────────────────── */ .schede-mio { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--bordo); margin: 0 0 22px; } .schede-mio a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; font-weight: 600; font-size: .95rem; color: var(--tenue); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; } .schede-mio a:hover { color: var(--inchiostro); } .schede-mio a.qui { color: var(--accento); border-bottom-color: var(--accento); } .schede-mio .conta { background: var(--accento); color: #fff; border-radius: 999px; font-size: .74rem; min-width: 1.5em; padding: 1px .4em; text-align: center; } @media (max-width: 620px) { .schede-mio a { flex: 1 1 auto; justify-content: center; padding: 10px 8px; font-size: .9rem; } } /* ═══════════════════════════════════════════════════════════════════════════ DUE MODI DI COMPRARE: LA MERCE E L'ORARIO Un negozio può vendere cose che si ritirano e servizi che si prenotano. Sono due gesti diversi — «metti nel carrello» e «scegli un'ora» — e il cliente deve capire quale sta facendo PRIMA di premere. ⚠ Prima i due riquadri erano identici: cambiava solo la parola sul pulsante («aggiungi» / «prenota»), e i cartelli che spiegavano come funziona stavano lontani dalle rispettive liste (quello degli ordini arrivava DOPO i servizi). Nessuno legge una spiegazione che sta trenta centimetri sotto la cosa che spiega. ⚠ Il VERDE è già il marchio di «ordina e ritira» in tutto il portale (vedi .etichetta.ordinabile): non si può riusare per gli appuntamenti. Agli orari va il blu del golfo, che nel portale non ha altri incarichi. ═════════════════════════════════════════════════════════════════════════ */ :root { --appunt: #1f6079; /* blu del golfo: il colore dell'orario */ --appunt-viva: #16495c; --appunt-luce: #eef5f9; --appunt-filo: #cfe0e9; --merce: #5d7d48; /* il verde dei negozi, in forma piena */ --merce-luce: #f2f6ee; --merce-filo: #d8e3ce; } /* ── il bivio, in cima alla scheda di chi fa entrambe le cose ────────────── */ .due-modi { display: grid; gap: 12px; margin: 0 0 32px; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); } .due-modi a { display: flex; gap: 13px; align-items: flex-start; padding: 15px 17px; background: var(--carta-alt); border: 1px solid var(--bordo); border-left-width: 3px; border-radius: var(--raggio-g); box-shadow: var(--ombra-1); transition: transform .2s var(--molla), box-shadow .2s, border-color .2s; } .due-modi a:hover { transform: translateY(-2px); box-shadow: var(--ombra-2); } .due-modi a.merce { border-left-color: var(--merce); background: var(--merce-luce); } .due-modi a.appunt { border-left-color: var(--appunt); background: var(--appunt-luce); } .due-modi .segno { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: var(--carta-alt); } .due-modi a.merce .segno { color: var(--merce); } .due-modi a.appunt .segno { color: var(--appunt); } .due-modi strong { display: block; font-size: 1.02rem; color: var(--inchiostro); } .due-modi .come { display: block; font-size: .85rem; color: var(--tenue); margin-top: 2px; } /* ── la testata di reparto: sostituisce titolo + cartello staccato ───────── */ .testa-reparto { margin: 46px 0 20px; padding: 17px 19px 18px; border: 1px solid var(--bordo); border-left-width: 3px; border-radius: var(--raggio-g); } .testa-reparto.primo { margin-top: 0; } .testa-reparto.merce { border-left-color: var(--merce); background: var(--merce-luce); border-color: var(--merce-filo); } .testa-reparto.appunt { border-left-color: var(--appunt); background: var(--appunt-luce); border-color: var(--appunt-filo); } .testa-reparto .fila { display: flex; gap: 12px; align-items: center; } .testa-reparto .segno { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: var(--carta-alt); box-shadow: var(--ombra-1); } .testa-reparto.merce .segno { color: var(--merce); } .testa-reparto.appunt .segno { color: var(--appunt); } .testa-reparto h2 { font-family: var(--serif); font-size: clamp(1.35rem, 2.6vw, 1.62rem); margin: 0; line-height: 1.08; } .testa-reparto .come { margin: .6em 0 0; font-size: .95rem; color: var(--tenue); max-width: 64ch; } .testa-reparto .come strong { color: var(--inchiostro); font-weight: 600; } .testa-reparto .fatti { margin: 13px 0 0; display: flex; gap: 9px; flex-wrap: wrap; align-items: center; } /* il pulsante dell'orario: stessa forma del bottone, l'altro colore */ .bottone.appunt { background: var(--appunt); border-color: var(--appunt); } .bottone.appunt:hover { background: var(--appunt-viva); border-color: var(--appunt-viva); } /* ── i riquadri: la merce e l'orario non si somigliano più ───────────────── */ .prodotti.orari { grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); } .prodotto.servizio { background: var(--appunt-luce); border-color: var(--appunt-filo); box-shadow: inset 3px 0 0 var(--appunt); padding-left: 21px; display: flex; flex-direction: column; } .prodotto.servizio:hover { border-color: var(--appunt); box-shadow: inset 3px 0 0 var(--appunt), var(--ombra-1); } .prodotto.servizio .prezzo { color: var(--appunt-viva); } .prodotto.servizio p { flex: 1 1 auto; } /* la durata: in testa al riquadro, non un'etichettina di coda. È il dato che distingue un servizio da una scatola sullo scaffale. */ .prodotto .quanto-dura { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--appunt-viva); } .prodotto.servizio .bottone { display: flex; justify-content: center; width: 100%; margin-top: 13px; } /* l'etichetta di tipo: serve dove i due mondi si mescolano (le voci «in evidenza» scelte dal negoziante), non nei reparti dove il titolo lo dice già */ .etichetta.da-ordinare { background: var(--merce-luce); border-color: var(--merce-filo); color: #45602f; } .etichetta.a-orario { background: var(--appunt-luce); border-color: var(--appunt-filo); color: var(--appunt-viva); } .etichetta.da-ordinare svg { stroke: var(--merce); } .etichetta.a-orario svg { stroke: var(--appunt); } /* ── lo stesso confine nel pannello del negoziante ───────────────────────── */ .voci-mio .voce.servizio { box-shadow: inset 3px 0 0 var(--appunt); padding-left: 17px; } .voci-mio .voce.merce { box-shadow: inset 3px 0 0 var(--merce); padding-left: 17px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --appunt: #6fa8c4; --appunt-viva: #a5cede; --appunt-luce: rgba(111,168,196,.10); --appunt-filo: rgba(111,168,196,.34); --merce: #8fb473; --merce-luce: rgba(143,180,115,.10); --merce-filo: rgba(143,180,115,.32); } :root:not([data-theme="light"]) .due-modi .segno, :root:not([data-theme="light"]) .testa-reparto .segno { background: rgba(255,255,255,.06); } :root:not([data-theme="light"]) .bottone.appunt { color: #0d1a20; } :root:not([data-theme="light"]) .etichetta.da-ordinare { color: #cfe3c1; } :root:not([data-theme="light"]) .etichetta.a-orario { color: #cfe4ee; } } :root[data-theme="dark"] { --appunt: #6fa8c4; --appunt-viva: #a5cede; --appunt-luce: rgba(111,168,196,.10); --appunt-filo: rgba(111,168,196,.34); --merce: #8fb473; --merce-luce: rgba(143,180,115,.10); --merce-filo: rgba(143,180,115,.32); } :root[data-theme="dark"] .due-modi .segno, :root[data-theme="dark"] .testa-reparto .segno { background: rgba(255,255,255,.06); } :root[data-theme="dark"] .bottone.appunt { color: #0d1a20; } :root[data-theme="dark"] .etichetta.da-ordinare { color: #cfe3c1; } :root[data-theme="dark"] .etichetta.a-orario { color: #cfe4ee; } /* la pagina di prenotazione è tutta «mondo orario»: il servizio scelto si segna in blu, non nel terracotta della merce */ .scelta-servizi .serv:hover { border-color: var(--appunt); } .scelta-servizi .serv.scelto { border-left-color: var(--appunt); background: var(--appunt-luce); } .ora-libera input:checked + span { background: var(--appunt); border-color: var(--appunt); color: #fff; } :root[data-theme="dark"] .ora-libera input:checked + span { color: #0d1a20; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ora-libera input:checked + span { color: #0d1a20; } } /* ⚠ Su telefono il bivio finisce a una colonna e le sue due righe di spiegazione ripetono, a pochi centimetri di distanza, quelle delle testate di reparto: sembra un errore. Stretto resta a due colonne e diventa due pulsanti d'aggancio — a spiegare ci pensano i reparti. */ @media (max-width: 620px) { .due-modi { grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 26px; } .due-modi a { flex-direction: column; gap: 7px; padding: 13px; text-align: left; } .due-modi .come { display: none; } .due-modi strong { font-size: .94rem; line-height: 1.2; } .due-modi .segno { width: 31px; height: 31px; } } /* ⚠ Il riquadro del servizio è una colonna flex: senza questo le etichette si STIRANO a tutta larghezza e «su appuntamento» sembra un secondo pulsante sopra quello vero. */ .prodotto.servizio > .etichetta, .prodotto.servizio > .quanto-dura { align-self: flex-start; } /* ═══════════════════════════════════════════════════════════════════════════ LE ZONE Quattordici comuni in una griglia unica dicono «ecco quattordici paesi». Divisi per zona dicono una cosa vera in più: che sono due pezzi di territorio diversi, e quale è il tuo. ⚠ Il titolo di zona è più leggero di un titolo di sezione: divide, non interrompe. Se fosse grande come un h2 sembrerebbero due pagine. ═════════════════════════════════════════════════════════════════════════ */ .titolo-zona { display: flex; align-items: center; gap: 14px; margin: 34px 0 14px; } .titolo-zona:first-of-type { margin-top: 6px; } .titolo-zona h3 { font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); margin: 0; white-space: nowrap; } .titolo-zona .filo { flex: 1 1 auto; height: 1px; background: var(--bordo); } .titolo-zona .quanti { font-size: .78rem; color: var(--tenue); white-space: nowrap; }