/* ═══════════════════════════════════════════════════════════════════════════ SEPARATORE — il fregio «linea · G · linea» di Tango R02 · 07/09/2026 · giro WP12 (riscrive il WP11) 🔴 UNA SOLA COLLOCAZIONE, `data-sep="capitolo"`. Le tre del WP11 (`capitolo` a modo suo, `confine`, `titolo`) sono state TOLTE il 07/09 alle 15:xx: Costantino le ha guardate e bocciate — la logica «stacco fra due blocchi» che reggeva `confine` è quella che ha prodotto i tre casi che non gli piacevano (fra le categorie di Produttori, fra la lista del Manifesto e la newsletter, fra la fascia rosa e la newsletter in home). Le regole che non servono più non restano «per sicurezza»: sarebbero due collocazioni da tenere allineate a ogni ritocco, e nessuno le userebbe. La regola nuova è in testa a `inc/separatore.php`. 🔴 FOGLIO A PARTE, e non è disordine. `gastronomica-percorso.css` e `gastronomica-pagine.css` li RIGENERA `tema/costruisci-asset.sh` a ogni `installa.sh` concatenando i fogli del sito Node: una riga scritta lì sparirebbe al primo rimontaggio, e sparirebbe in silenzio (trappola già pagata col §Partecipa, giro WP6). Si carica DOPO la pila (`functions.php`, slot 5), quindi a parità di specificità vince lui. ── L'ADATTAMENTO AL FONDO ──────────────────────────────────────────────── Il markup porta tutti e due i file (scuro + chiaro): qui si decide quale si vede. La regola è la più semplice possibile: · fregio SCURO → solo sui due bianchi (--carta #FFEFE4, --carta-calda) · fregio CHIARO → su OGNI campitura satura, chiara o scura che sia. 🔴 La strada presa prima era «segui il colore del TESTO di quel fondo», perché lo stesso arancione porta testo bianco in home (`.campo--zucca`) e testo bruno #46220F sulla banda delle pagine interne (`.banda--bere`). Sembrava più fine. **Guardando i due scatti affiancati sulla banda arancione** si vede che è sbagliata: il fregio scuro ha la G melagrana #C4400F e le linee beige #d8c3ae, e su #FF8A00 le linee spariscono — un separatore che non si vede non è un separatore. Deciso guardando. ⚠️ Quando nasce una campitura nuova, la sua classe va aggiunta all'elenco qui sotto. È l'unico punto da toccare. ═══════════════════════════════════════════════════════════════════════════ */ .separatore{ /* 🔴 `grid-column` e `flex-basis` NON sono decorazione: il separatore viene innestato come figlio di contenitori che a volte sono griglie o fasce flex, e senza queste due righe diventa una colonna. · `.meta{display:grid; grid-template-columns:1fr 1fr}` (home, «Che cos'è Gastronomica»): senza `grid-column:1/-1` il fregio si prende la prima colonna e spinge la foto fuori. · `.testa-sez{display:flex; justify-content:space-between; flex-wrap:wrap}`: senza `flex-basis:100%` il fregio si mette in riga ACCANTO al titolo. Le due righe restano anche se oggi il fregio si innesta FUORI da `.testa-sez` (v. `gastro_sep_capitoli()`): costano zero su un genitore block e sono la rete se domani un capitolo nasce dentro una fascia flex. */ grid-column: 1 / -1; flex-basis: 100%; width: 100%; line-height: 0; /* niente riga di testo fantasma sotto l'immagine */ } /* 🔴 LA MISURA STA SULL'IMMAGINE, NON SUL CONTENITORE, e l'ho pagata guardando uno scatto. Prima versione: contenitore con `flex-basis:100%` **e** `max-width:min(560px,72%)`. In una fascia flex il `max-width` limita la «dimensione principale ipotetica» PRIMA che il browser decida dove va a capo: il fregio non prendeva più una riga tutta sua, restava in riga con l'occhiello e in `#scatti` mandava «NEI PIATTI» a destra e il titolo a capo. Il conteggio era giusto, la prova era verde, il difetto si vedeva **solo nello scatto**. Contenitore a larghezza piena + misura sull'``. */ .separatore__i{ display:block; width: min(560px, 72%); height:auto; margin-inline:auto; } /* Di serie: il fregio SCURO, quello per i fondi chiari. */ .separatore__i--chiaro{ display:none } /* Sulle campiture sature: il fregio chiaro. `.banda` senza modificatore le prende tutte e tre (bere, festival, produttori) e anche quelle che nasceranno: una banda è per definizione una campitura satura, quindi qui non serve elencarle una per una. ⚠️ Vale anche per le tre prove di colore di `?banda=1|2|3` (`inc/banda.php`): melagrana, brace e alloro sono tutte e tre sature, e il fregio chiaro si legge su tutte e tre. Verificato guardando le sei schermate del WP12. */ .campo--melagrana .separatore__i--scuro, .campo--mora .separatore__i--scuro, .campo--zucca .separatore__i--scuro, .campo--alloro .separatore__i--scuro, .campo-pieno .separatore__i--scuro, .scura .separatore__i--scuro, .apertura .separatore__i--scuro, .banda .separatore__i--scuro{ display:none } .campo--melagrana .separatore__i--chiaro, .campo--mora .separatore__i--chiaro, .campo--zucca .separatore__i--chiaro, .campo--alloro .separatore__i--chiaro, .campo-pieno .separatore__i--chiaro, .scura .separatore__i--chiaro, .apertura .separatore__i--chiaro, .banda .separatore__i--chiaro{ display:block } /* ── CAPITOLO — sopra il gruppo occhiello + titolo ────────────────────────── Sta DENTRO la colonna del contenuto (`.wrap`), come primo elemento dell'apertura di sezione: non è un filetto a tutta pagina, è la prima riga del capitolo. Lo spazio sotto è quello che lo lega al titolo: se fosse uguale allo spazio sopra, il fregio galleggerebbe fra due sezioni — che è esattamente la lettura «stacco fra blocchi» già bocciata. */ .separatore[data-sep="capitolo"]{ margin-top: 0; margin-bottom: clamp(18px, 1.8vw, 28px); } /* Su `/partecipa` e sul `/manifesto` il fregio è figlio diretto della sezione e il titolo arriva subito dopo: lì la sezione non ha padding proprio in cima, quindi un po' d'aria sopra serve. Su `.wrap`/`.testa-sez` (home) no: la sezione ce l'ha già. */ .ptc-sez > .separatore, .corpo > .separatore{ margin-top: clamp(8px, 1vw, 16px) } /* ── Schermo stretto ─────────────────────────────────────────────────────── */ @media (max-width: 700px){ .separatore__i{ width:84% } .separatore[data-sep="capitolo"]{ margin-bottom:20px } } /* Chi ha chiesto meno movimento non perde niente: il fregio è fermo di suo. Nessuna transizione, nessuna animazione: è una decorazione, non un evento. */