/* ═══════════════════════════════════════════════════════════════════ news-body.css - TIPOGRAFIA DEL CORPO ARTICOLO (.nws-body) ─────────────────────────────────────────────────────────────────── FONTE UNICA, usata da DUE consumatori: 1) elbamylove.com -> App_Page/Organizza-Viaggio/News-Dettaglio.aspx 2) admin.elbamylove.com -> CKEditor della scheda News (App_Script/App_News.js lo mette in contentsCss e assegna bodyClass "nws-body" al body dell'editor) REGOLA: qui dentro SOLO regole che iniziano con .nws-body. Layout, hero, rail, gallery e animazioni .nws-rv restano nella pagina: nel CMS non hanno senso e .nws-rv (opacity:0) renderebbe il testo invisibile dentro l'editor. Tutte le var() hanno il fallback esplicito, quindi il file regge anche senza i token del tema (nel CKEditor guidelines.css non c'e'). ═══ COSA FA QUESTO FILE, E PERCHE' COSI' (revisione 2026-08-20) ═══ Il redattore scrive in CKEditor SENZA classi: h2, h3, p nudi. Il resto del sito invece "veste" ogni tag con una classe (.pf-eyebrow + .pf-h2 + .pf-p, vedi DaNonPerdere / Storia / Divertimento / Escursioni: lo stesso trio ripetuto scoped su ogni pagina). Qui quel vestito viene applicato ai tag NUDI, per discendenza da .nws-body: stesso risultato, zero lavoro in redazione. RIFERIMENTO COPIATO (App_Page/Cosa-Fare/DaNonPerdere-Isola-Elba.aspx): .pf-eyebrow filetto oro 22x1.5px + label uppercase .65rem/600/.22em .pf-h2 var(--font-display), weight 300, clamp, line-height 1.12 .pf-p .9rem, weight 300, color ink-md, line-height 1.9 .pf-p strong color ink, weight 600 DUE SCOSTAMENTI VOLUTI dal riferimento, entrambi misurati: 1) CORPO A 1.02rem E NON .9rem. Il .pf-p vive in blocchi da 2-4 righe (intro di sezione). Qui l'articolo mediano e' 336 parole in una colonna da 976px. MISURATO in browser su 15 paragrafi reali di puro testo (Chromium, colonna 914px, poi riportato a 976), non a occhio: .9rem -> 115 caratteri per riga 1.02rem -> 104 1.10rem -> 99 (era il valore precedente di questo file) Nessuno dei tre sta nei 60-75 consigliati: la misura lunga viene dalla colonna larga, non dal corpo, ed e' una scelta gia' presa (vedi qui sotto, niente max-width). Fra i tre si prende 1.02rem perche' e' l'unico che tiene insieme le due cose: sta sopra i 0,95rem sotto i quali il weight 300 diventa filiforme (regola tua, non mia) e paga solo 5 caratteri di riga in piu' rispetto al vecchio 1.10rem. Colore, interlinea, weight e strong sono identici al sito. 2) H2 PIU' PICCOLO del .pf-h2 di pagina (max 1.9rem invece di 2.5rem). Motivo: l'H1 della scheda news e' gia' compresso a 2.28rem (vedi News-Dettaglio.aspx). Un h2 a 2.5rem dentro il corpo sarebbe piu' grande del titolo dell'articolo. MISURATO SULL'ARCHIVIO (287 news it, 2026-08-20) - serve a spiegare perche' certe regole ci sono e altre no: 2233 p, 2924 strong, 265 li, 95 h3, 65 h2, 3 table solo 46 news su 287 hanno un titolo interno (h2 o h3) 12 news usano SOLO h3 e nessun h2 -> h3 deve reggere da solo 550 style="text-align:justify" inline -> vedi sezione IGIENE 229 paragrafi interamente in strong -> vedi sezione ENFASI ═══════════════════════════════════════════════════════════════════ */ /* ═══ 1. BASE ══════════════════════════════════════════════════════ NIENTE max-width qui dentro. Ci sono passato due volte: 1) max-width:72ch su .nws-body -> strozzava a 705px anche tabelle, immagini, iframe e griglie Bootstrap scritte dal redattore; 2) max-width:72ch sui soli paragrafi -> il layout non si rompeva piu', ma restavano 270px vuoti a destra di ogni riga di testo dentro una colonna gia' affiancata al rail: la pagina sembrava vuota. Ora il testo usa tutta la colonna (976px) e la misura si governa con la dimensione del corpo, non con una gabbia. */ .nws-body{ font-family:var(--font-body,'Jost',system-ui,-apple-system,sans-serif); font-size:1.02rem; font-weight:300; line-height:1.9; color:var(--ink-md,#3a3228); } /* Il primo blocco non deve mai staccarsi dalla copertina: i margini superiori di titoli e paragrafi vengono azzerati solo qui. */ .nws-body > *:first-child { margin-top: 0; } /* ═══ 2. PARAGRAFI ═════════════════════════════════════════════════ */ .nws-body p{ margin:0 0 1.25em; font-size:inherit; font-weight:inherit; line-height:inherit; color:inherit; } /* Attacco dell'articolo: mezzo passo sopra il corpo, come il .pf-p che apre le sezioni del sito. NB: se il redattore ha lasciato un paragrafo vuoto di Word in testa (succede: 327 paragrafi vuoti in archivio) la regola cade su un paragrafo invisibile e semplicemente non si vede. Degrada, non rompe. */ .nws-body > p:first-of-type{font-size:1.12rem;} /* ═══ 3. TITOLI ════════════════════════════════════════════════════ H2 = stacco di sezione. Prende il vestito completo del sito: il filetto oro del .pf-eyebrow (22x1.5px) diventa qui un filetto SOPRA il titolo, perche' nel corpo news non esiste l'occhiello testuale da mettergli accanto. E' il segno che rende riconoscibile una sezione dentro un muro di paragrafi - e l'84% delle news e' esattamente un muro di paragrafi. */ .nws-body h2 { font-family: var(--font-display); font-size: clamp(1.85rem, 3.6vw, 2.6rem); font-weight: 300; line-height: 1.13; color: var(--ink,#18140f); margin: 3rem 0 .9rem; text-wrap: balance; } .nws-body h2::before{ content:""; display:block; width:34px; height:2px; background:var(--gold,#c9a96b); border-radius:1px; margin-bottom:1rem; } .nws-body h2 em{font-style:italic;color:var(--gold-dk,#8c6d3c);} /* H3 = sotto-titolo, ma deve reggere DA SOLO: 12 news su 287 non hanno nessun h2 e usano solo h3. Percio' non e' un titolino: e' Lora 600, piu' compatto dell'h2 ma con lo stesso peso visivo di una testata di card del sito (.sto-ev-t / .dc-t). */ .nws-body h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.25; color: var(--ink,#18140f); margin: 2.3rem 0 .65rem; text-wrap: balance; } /* H4/H5/H6 = etichetta, non titolo. Stessa micro-label del sito (.vside-hd / .nws-rail h2): Jost, maiuscoletto spaziato. Il colore e' --ink-md e non --ink-lt: #8a8070 su bianco fa 3,89:1, sotto la soglia AA, ed e' un errore gia' corretto altrove. */ .nws-body h4, .nws-body h5, .nws-body h6{ font-family:var(--font-body,'Jost',system-ui,sans-serif); font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; line-height:1.4; color:var(--ink-md,#3a3228); margin:2rem 0 .55rem; } /* Titolo e paragrafo che lo segue sono UNA cosa sola: il margine sotto il titolo basta gia', quello sopra il paragrafo raddoppierebbe. */ .nws-body h2 + p, .nws-body h3 + p, .nws-body h4 + p, .nws-body h2 + ul, .nws-body h3 + ul, .nws-body h2 + ol, .nws-body h3 + ol{margin-top:0;} /* Due titoli di fila (h2 seguito subito da h3): niente voragine. */ .nws-body h2 + h3{margin-top:1.2rem;} /* ═══ 4. ENFASI ════════════════════════════════════════════════════ 2924 strong su 2233 paragrafi: in redazione il grassetto e' usato piu' della punteggiatura, e 229 paragrafi sono grassetto DALLA PRIMA ALL'ULTIMA parola. Il 700 di default su un paragrafo intero e' un muro nero. Si adotta la regola del sito (.pf-p strong): 600 e colore --ink, che stacca dal corpo --ink-md senza gridare. NON si prova a trasformare i paragrafi tutti-grassetto in titoli: misurato, 229 su 381 superano i 120 caratteri e 238 finiscono con un punto. Sono paragrafi, non titoli: promuoverli sarebbe un disastro. */ .nws-body strong, .nws-body b{font-weight:600;color:var(--ink,#18140f);} .nws-body em, .nws-body i{font-style:italic;} .nws-body mark{background:var(--gold-pale,#f7f0e3);color:var(--ink,#18140f);padding:0 .18em;} .nws-body small{font-size:.86em;color:var(--ink-lt,#6f665a);} .nws-body .pull { break-inside: avoid; border-left: 4px solid var(--accent); background: #fff; padding: .9rem 1rem; /* 26/09/2026: era 'Oswald', font mai caricato dal sito (si vedeva il sans-serif di sistema). Ora il font del sito, ospitato da noi. */ font-family: var(--font-body, 'Jost', sans-serif); font-size: 1.02rem; line-height: 1.35; margin: .4rem 0 1.1rem; } .nws-body .cta { break-inside: avoid; background: #f2efe8; border: 1px dashed var(--rule); padding: .75rem .9rem; /* 26/09/2026: era 'Open Sans', font mai caricato dal sito. */ font-family: var(--font-body, 'Jost', sans-serif); font-size: .87rem; line-height: 1.45; margin: 0 0 1.1rem; } /* ═══ 5. LISTE ═════════════════════════════════════════════════════ Il segno di elenco e' lo stesso trattino oro che il sito usa nel rail per le news senza immagine (.nws-altre a.no-img::before, 9x2px oro): cosi' l'elenco dentro l'articolo appartiene alla stessa famiglia visiva del resto della pagina, invece del pallino nero di default del browser. */ .nws-body ul, .nws-body ol{margin:0 0 1.25em;padding-left:1.45em;} .nws-body li{margin-bottom:.5em;} .nws-body li:last-child{margin-bottom:0;} .nws-body ul{list-style:none;} .nws-body ul > li{position:relative;} .nws-body ul > li::before{ content:""; position:absolute; left:-1.45em; top:.92em; width:10px; height:2px; border-radius:1px; background:var(--gold,#c9a96b); } .nws-body ol > li::marker{color:var(--gold-dk,#8c6d3c);font-weight:600;} /* Liste annidate: niente margine morto sopra e sotto. */ .nws-body li > ul, .nws-body li > ol{margin:.5em 0 0;} /* ═══ 6. CITAZIONI ═════════════════════════════════════════════════ Ricalca la pull-quote della pagina Storia (.sto-quote): fondo sabbia, filetto oro a sinistra, angoli stondati solo a destra, Lora corsivo. Il testo pero' resta --ink-md e non oro: oro su sabbia fa 2,9:1, illeggibile. L'oro sta nel bordo, dove non deve essere letto. */ .nws-body blockquote{ margin:1.9em 0; padding:1.15rem 1.5rem; background:var(--gold-pale,#f7f0e3); border-left:4px solid var(--gold,#c9a96b); border-radius:0 8px 8px 0; font-family:var(--font-display,'Lora',Georgia,serif); font-style:italic; font-weight:400; font-size:1.08rem; line-height:1.7; color:var(--ink-md,#3a3228); } .nws-body blockquote p:last-child{margin-bottom:0;} .nws-body blockquote cite{ display:block;margin-top:.6rem;font-family:var(--font-body,'Jost',sans-serif); font-style:normal;font-size:.75rem;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-lt,#6f665a); } /* ═══ 7. LINK ══════════════════════════════════════════════════════ */ .nws-body a{ color:var(--ink,#18140f); text-decoration:underline; text-decoration-color:var(--gold,#c9a96b); text-decoration-thickness:1px; text-underline-offset:3px; transition:color .3s cubic-bezier(.16,1,.3,1), text-decoration-color .3s cubic-bezier(.16,1,.3,1); } .nws-body a:hover{color:var(--gold-dk,#8c6d3c);text-decoration-color:var(--gold-dk,#8c6d3c);} /* ═══ 8. IMMAGINI E MEDIA ══════════════════════════════════════════ */ .nws-body img{ max-width:100%;height:auto;display:block; border-radius:4px;margin:1.7em auto; } .nws-body figure{margin:1.7em 0;} .nws-body figure img{margin:0;} .nws-body figcaption{ margin-top:.6rem;font-size:.78rem;line-height:1.5; color:var(--ink-lt,#6f665a);text-align:center; } .nws-body iframe, .nws-body video, .nws-body embed{max-width:100%;border:0;margin:1.7em 0;} /* hr = lo stesso filetto oro dei titoli, centrato: uno stacco che nel corpo news serve, perche' spesso separa due blocchi senza titolo. */ .nws-body hr{ border:0;height:2px;width:54px;border-radius:1px; background:var(--gold,#c9a96b);margin:2.6rem auto; } /* ═══ 9. TABELLE ═══════════════════════════════════════════════════ */ .nws-body table{ width:100%;border-collapse:collapse;margin:1.7em 0; font-size:.94rem;line-height:1.6; } .nws-body th, .nws-body td{ padding:10px 13px;border-bottom:1px solid var(--line,#e6dfd0); text-align:left;vertical-align:top; /* 10/10/2026 P16: senza colore le celle ereditavano #949494 dal tema (table tr:nth-child, hotale-style-custom.css) = 2,7-2,9:1. */ color:var(--ink-md,#3a3228); } .nws-body th{ font-family:var(--font-body,'Jost',sans-serif); font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--ink,#18140f);background:var(--sand,#f4efe6); } .nws-body tbody tr:last-child td{border-bottom:0;} /* ═══ 10. IGIENE - roba che arriva da Word e da CKEditor ═══════════ Queste regole non abbelliscono niente: impediscono al contenuto incollato di scavalcare tutto quello che c'e' sopra. */ /* GIUSTIFICATO. 550 occorrenze di style="text-align:justify" inline nell'archivio. Giustificato senza sillabazione, su una colonna da 976px in Jost 300, apre fiumi bianchi in mezzo al paragrafo: e' letteralmente il motivo per cui il corpo news sembra impaginato male. Nessuna pagina del sito giustifica. !important e' obbligatorio: lo stile e' INLINE, nessun selettore lo batte senza. Il selettore colpisce solo justify: il text-align:center delle 37 didascalie e il right delle 11 firme restano quelli che il redattore ha scelto. */ .nws-body [style*="justify"]{text-align:left !important;} /* WORD. 14 news incollano un blocco style di Word dentro il corpo. VERIFICATO il 20/08/2026, e il risultato e' meno grave di come sembrava: quei blocchi stanno dentro un commento condizionale IE (if gte mso 10), quindi NESSUN browser di oggi li applica, e per giunta dichiarano solo table.MsoNormalTable e st1 con escape - nessun selettore nudo tipo p o h2. Cioe': non stanno sporcando niente, ne' qui ne' nel resto della pagina. Le due regole qui sotto restano come cintura di sicurezza per il giorno in cui qualcuno incolla lo stesso blocco FUORI dal commento condizionale (CKEditor ha extraAllowedContent style[*] e lo lascerebbe passare). Costano due righe, non cambiano niente oggi. */ .nws-body table.MsoNormalTable{ font-family:inherit;font-size:inherit;color:inherit; border-collapse:collapse;width:100%; } .nws-body xml, .nws-body style{display:none;} /* BOOTSTRAP ORFANO. Bootstrap c'e' ed e' caricato (bootstrap.min.css), ma una .col-* funziona solo dentro una .row: e' la .row a essere display:flex. Nelle Descrizioni scritte da CKEditor capita che il redattore incolli le colonne SENZA la row: allora le col-md-6 non si affiancano, restano larghe il 50% e si impilano lasciando meta' riga vuota (verificato sulla news 550). Questa regola vale SOLO per le col figlie dirette di .nws-body, cioe' solo per quelle orfane: dentro una .row corretta Bootstrap resta padrone e le colonne si affiancano come devono. Dentro una .row NON si tocca niente: il margin -12px della row compensa esattamente il padding 12px delle col, e il testo torna allineato al bordo. Avevo azzerato il margin della row e il contenuto rientrava di 12px rispetto ai paragrafi fuori dalla griglia: si vedeva. */ .nws-body > [class*="col-"]{ width:100%;max-width:100%;flex:none; padding-left:0;padding-right:0; } /* ═══ 11. MOBILE ═══════════════════════════════════════════════════ Sotto i 640px la colonna e' larga ~340px: la misura non e' piu' il problema, lo diventa l'altezza. Corpo appena piu' piccolo, interlinea leggermente piu' corta, titoli piu' vicini al testo. */ @media (max-width:640px){ .nws-body{font-size:.99rem;line-height:1.82;} .nws-body > p:first-of-type{font-size:1.06rem;} .nws-body h2{margin:2.4rem 0 .8rem;} .nws-body h2::before{margin-bottom:.8rem;} .nws-body h3{margin:1.9rem 0 .55rem;font-size:1.2rem;} .nws-body blockquote{padding:1rem 1.1rem;font-size:1.02rem;} /* Tabella stretta: si fa scorrere lei invece di rompere la pagina. */ .nws-body table{display:block;overflow-x:auto;font-size:.88rem;} }