@import url('fonts.css'); /* ===================================================================== IL MESSAGGERO DELLA SERA — foglio del 1926 Classifica di PRIMA DELL'ALBA. L'IDEA: il brief chiede sia la carta ingiallita sia lo sfondo scuro. Invece di sceglierne uno, valgono entrambi con un senso — il giornale e' un foglio posato nel buio. Il e' la notte (#0E0E14), il maniero fuori; il .foglio e' la carta che ci galleggia sopra. Il buio non e' decorazione, e' dove si svolge la partita. Niente framework, niente build: un file, mobile-first, media query solo per allargare. ===================================================================== */ /* ------------------------------------------------------------- token */ :root { /* palette del gioco, presa di peso */ --notte: #0E0E14; --carta: #E2D6BA; --inchiostro: #261E18; --rosso: #C82828; --oro: #FFEB96; /* Derivati, e non per capriccio: #C82828 su #E2D6BA da' 3.84:1 — basta per il testo grande (serve 3:1) ma NON per quello piccolo (serve 4.5:1). Quindi il rosso del brief resta tale e quale sui titoli, e le etichette minute usano una tinta piu' fitta della stessa famiglia: #9E1B1B da' 5.54:1. Stessa storia per il grigio: --inchiostro-tenue e' 5.20:1. */ --rosso-fitto: #9E1B1B; --inchiostro-tenue: #5F5340; --filo: rgba(38, 30, 24, .34); --filo-lieve: rgba(38, 30, 24, .16); --oro-fitto: #7A6114; --testata: 'UnifrakturMaguntia', 'Old English Text MT', 'Blackletter', serif; --titoli: 'Bodoni Moda', 'Bodoni MT', Didot, 'Didot LT STD', serif; --corpo: 'EB Garamond', Garamond, 'Times New Roman', serif; --gabbia: 62rem; } /* ------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; padding: clamp(0rem, 3vw, 2.5rem); background: var(--notte); color: var(--inchiostro); font-family: var(--corpo); font-size: 1.0625rem; line-height: 1.6; /* La notte non e' piatta: il maniero e' piu' scuro ai bordi. */ background-image: radial-gradient(ellipse at 50% 0%, #171722 0%, var(--notte) 60%); background-attachment: fixed; -webkit-text-size-adjust: 100%; } a { color: inherit; } :focus-visible { outline: 2px solid var(--rosso); outline-offset: 3px; } /* ------------------------------------------------- il foglio di carta */ .foglio { max-width: var(--gabbia); margin-inline: auto; padding: clamp(1.1rem, 4vw, 3.25rem); background: var(--carta); position: relative; /* Carta vera: un foglio ha spessore e proietta ombra sul buio. */ box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 1.5rem 4rem rgba(0, 0, 0, .75); } /* La grana. Senza, #E2D6BA e' solo un beige; con, e' carta. feTurbulence in un data URI: nessun file, nessuna richiesta. */ .foglio::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='.22'/%3E%3C/svg%3E"); } /* Il contenuto sta sopra la grana. */ .foglio > * { position: relative; z-index: 1; } /* ------------------------------------------------------------ testata */ .riga-edizione { display: flex; flex-wrap: wrap; gap: .35rem 1rem; justify-content: space-between; font-family: var(--titoli); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--inchiostro-tenue); } /* Il doppio filetto sotto la testata: uno grosso, uno sottile, distanziati. E' la firma tipografica di un quotidiano, e si fa con due bordi. */ .filetto-doppio { border-top: 3px solid var(--inchiostro); border-bottom: 1px solid var(--inchiostro); height: 4px; margin: .55rem 0; } .testata { font-family: var(--testata); font-weight: 400; font-size: clamp(2.1rem, 11.5vw, 5rem); line-height: 1; text-align: center; margin: .5rem 0 .35rem; color: var(--inchiostro); /* Il blackletter e' gia' fittissimo: aprirlo di un soffio lo rende leggibile senza togliergli l'epoca. */ letter-spacing: .01em; } .testata a { text-decoration: none; } .sottotestata { text-align: center; font-family: var(--titoli); font-style: italic; font-size: .82rem; letter-spacing: .04em; color: var(--inchiostro-tenue); margin: 0 0 .5rem; } /* Il bollettino: i numeri veri della classifica, come il meteo in prima. */ .bollettino { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.4rem; font-family: var(--titoli); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--inchiostro-tenue); margin: .7rem 0 0; } .bollettino b { font-weight: 700; color: var(--inchiostro); font-variant-numeric: tabular-nums; } /* ----------------------------------------------------------- rubriche */ /* Il selettore fra le classifiche. Sono link veri: la pagina funziona senza una riga di JavaScript, e ogni classifica ha il suo URL. */ .rubriche { display: flex; flex-wrap: wrap; gap: 0; margin: 1.4rem 0 0; border-top: 1px solid var(--filo); border-bottom: 1px solid var(--filo); padding: .1rem 0; } .rubrica { font-family: var(--titoli); font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; text-decoration: none; color: var(--inchiostro-tenue); padding: .5rem .8rem; border-bottom: 2px solid transparent; white-space: nowrap; } .rubrica:hover { color: var(--inchiostro); } .rubrica[aria-current='page'] { color: var(--rosso-fitto); border-bottom-color: var(--rosso); font-weight: 700; } /* -------------------------------------------------------- intestazione */ .occhiello-sezione { font-family: var(--titoli); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--rosso-fitto); margin: 2rem 0 .3rem; } .titolo-sezione { font-family: var(--titoli); font-weight: 700; font-size: clamp(1.5rem, 5.5vw, 2.1rem); line-height: 1.1; margin: 0 0 .3rem; letter-spacing: -.01em; } .sommario-sezione { font-style: italic; color: var(--inchiostro-tenue); margin: 0 0 1.1rem; max-width: 42ch; } /* ================================================================ L'APERTURA — il primo classificato. Qui sta l'idea della pagina: la classifica non e' una tabella, e' una colonna di notizie. Il primo non ha un badge o un numerino piu' grosso: ha il trattamento da articolo di apertura. Un giornale codifica l'importanza con la prominenza tipografica, e il rango E' importanza. ================================================================ */ .apertura { border-top: 2px solid var(--inchiostro); border-bottom: 1px solid var(--filo); padding: 1.1rem 0 1.3rem; margin: 0 0 .2rem; } .apertura-rango { font-family: var(--titoli); font-size: .7rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--rosso-fitto); margin: 0 0 .1rem; } .apertura-nome { font-family: var(--titoli); font-weight: 700; font-size: clamp(2.1rem, 9vw, 3.6rem); line-height: .98; letter-spacing: -.02em; margin: 0 0 .5rem; text-transform: uppercase; overflow-wrap: anywhere; } .apertura-nome a { text-decoration: none; } .apertura-nome a:hover { color: var(--rosso); } .apertura-catenaccio { font-size: 1.14rem; font-style: italic; line-height: 1.5; margin: 0 0 1rem; max-width: 46ch; color: var(--inchiostro); } /* --------------------------------------------------- striscia di dati */ .dati { display: flex; flex-wrap: wrap; gap: .9rem 1.6rem; padding-top: .85rem; border-top: 1px solid var(--filo-lieve); margin: 0; } .dato { margin: 0; } .dato-etichetta { font-family: var(--titoli); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--inchiostro-tenue); margin: 0; } .dato-valore { font-family: var(--titoli); font-weight: 700; font-size: 1.28rem; font-variant-numeric: tabular-nums lining-nums; line-height: 1.15; margin: 0; } .dato-valore--oro { color: var(--oro-fitto); } /* ==================================================== la colonna, II+ */ .colonna { list-style: none; margin: 0; padding: 0; } .voce { display: grid; /* rango | notizia | metrica */ grid-template-columns: 2.4rem 1fr; gap: 0 .8rem; padding: .95rem 0; border-bottom: 1px solid var(--filo-lieve); } /* Il rango in numeri romani. Un quotidiano italiano del '26 li avrebbe usati, e qui l'ordine e' informazione vera (e' una classifica, non un elenco decorato con 01/02/03). Con 25 righe al massimo, XXV resta leggibile — e il tempo sta li' accanto in cifre arabe, quindi non si perde niente. */ .voce-rango { font-family: var(--titoli); font-weight: 700; font-size: 1rem; line-height: 1.5; color: var(--rosso-fitto); text-align: right; letter-spacing: .02em; font-variant-numeric: lining-nums; } .voce-corpo { min-width: 0; } .voce-nome { font-family: var(--titoli); font-weight: 700; font-size: 1.16rem; line-height: 1.25; margin: 0; text-transform: uppercase; letter-spacing: -.005em; overflow-wrap: anywhere; } .voce-nome a { text-decoration: none; } .voce-nome a:hover { color: var(--rosso); } .voce-racconto { font-style: italic; font-size: .96rem; line-height: 1.45; color: var(--inchiostro-tenue); margin: .1rem 0 0; } .voce-metrica { font-family: var(--titoli); font-weight: 700; font-size: 1.2rem; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; margin: .35rem 0 0; grid-column: 2; } .voce-metrica-nota { font-family: var(--titoli); font-size: .62rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--inchiostro-tenue); margin-left: .4rem; } /* Da tablet in su la metrica torna in colonna a destra, incolonnata. */ @media (min-width: 34rem) { .voce { grid-template-columns: 2.6rem 1fr auto; align-items: baseline; } .voce-metrica { grid-column: 3; grid-row: 1; margin: 0; text-align: right; font-size: 1.32rem; } .voce-metrica-nota { display: block; margin: 0; } } /* La sconfitta si legge come tale: inchiostro piu' pallido, come una notizia di cronaca che non ha fatto il titolo. */ .voce--sconfitta .voce-nome { color: var(--inchiostro-tenue); } .voce--sconfitta .voce-metrica { color: var(--inchiostro-tenue); } .esito-bollo { display: inline-block; font-family: var(--titoli); font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border: 1px solid currentColor; padding: .05rem .35rem; margin-left: .45rem; vertical-align: .18em; color: var(--rosso-fitto); } .esito-bollo--vittoria { color: var(--oro-fitto); } /* ----------------------------------------------------------- vuoto */ .vuoto { border-top: 2px solid var(--inchiostro); padding: 3rem 1rem; text-align: center; } .vuoto-titolo { font-family: var(--titoli); font-weight: 700; font-size: clamp(1.3rem, 5vw, 1.8rem); margin: 0 0 .5rem; } .vuoto-testo { font-style: italic; color: var(--inchiostro-tenue); margin: 0 auto; max-width: 38ch; } /* ================================================ pagina di dettaglio */ .ritorno { font-family: var(--titoli); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--inchiostro-tenue); text-decoration: none; display: inline-block; margin: 1.6rem 0 .4rem; } .ritorno:hover { color: var(--rosso-fitto); } .articolo-titolo { font-family: var(--titoli); font-weight: 700; font-size: clamp(1.8rem, 7.5vw, 3.1rem); line-height: 1.02; letter-spacing: -.02em; margin: .2rem 0 .6rem; color: var(--rosso); } .articolo-sommario { font-size: 1.15rem; line-height: 1.55; margin: 0 0 1.2rem; max-width: 52ch; } .articolo-firma { font-family: var(--titoli); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--inchiostro-tenue); border-top: 1px solid var(--filo); border-bottom: 1px solid var(--filo); padding: .5rem 0; margin: 0 0 1.6rem; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; } /* Le colonne dell'articolo: su schermo largo, due. */ .colonne-articolo { display: grid; gap: 2rem; } @media (min-width: 46rem) { .colonne-articolo { grid-template-columns: 1fr 21rem; gap: 2.6rem; } } .blocco-titolo { font-family: var(--titoli); font-weight: 700; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rosso-fitto); border-bottom: 2px solid var(--inchiostro); padding-bottom: .35rem; margin: 0 0 .9rem; } /* Le statistiche: due colonne di dati incolonnati, come un listino. */ .listino { margin: 0 0 1.8rem; display: grid; grid-template-columns: 1fr; } .listino-riga { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; /* margin: 0 non e' pignoleria — sono

, e il margine di default del browser (1em 0) le distanzia al punto da sballare le due colonne. */ margin: 0; padding: .32rem 0; border-bottom: 1px dotted var(--filo-lieve); } .listino-voce { color: var(--inchiostro-tenue); font-size: .95rem; } .listino-numero { font-family: var(--titoli); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; font-size: 1.02rem; white-space: nowrap; } /* ============================================= LA PIANTA DEL MANIERO */ /* Una pianta non disegna la terra intorno alla casa: disegna le stanze. Percio' le celle mai costruite non sono scatole vuote, sono NIENTE — un tratteggio appena percettibile che tiene la griglia leggibile. */ .pianta { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(7, 1fr); gap: .28rem; aspect-ratio: 5 / 7; max-width: 21rem; margin: 0 0 .8rem; } .cella { display: flex; align-items: center; justify-content: center; font-family: var(--titoli); font-size: clamp(.62rem, 2.4vw, .78rem); font-weight: 700; letter-spacing: .04em; border: 1px dashed var(--filo-lieve); color: var(--inchiostro-tenue); } .cella--piena { border: 1.5px solid var(--inchiostro); background: rgba(38, 30, 24, .07); color: var(--inchiostro); } .cella--bunker { border-color: var(--rosso); border-width: 2px; background: rgba(200, 40, 40, .16); color: var(--rosso-fitto); } .cella--ingresso { border-color: var(--oro-fitto); border-width: 2px; background: rgba(255, 235, 150, .42); color: var(--oro-fitto); } /* Sigillata = enigma obbligatorio fallito: la stanza e' sbarrata, e si vede — tratteggio incrociato, come l'annullo su un documento. */ .cella--sigillata { background-image: repeating-linear-gradient( 45deg, transparent 0 3px, rgba(200, 40, 40, .5) 3px 4px ); border-color: var(--rosso); } .legenda { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: .3rem; font-size: .82rem; color: var(--inchiostro-tenue); } .legenda-voce { display: flex; align-items: center; gap: .5rem; } .legenda-bollo { flex: 0 0 auto; width: 1rem; height: 1rem; border: 1.5px solid var(--inchiostro); background: rgba(38, 30, 24, .07); } .legenda-bollo--bunker { border-color: var(--rosso); border-width: 2px; background: rgba(200, 40, 40, .16); } .legenda-bollo--ingresso { border-color: var(--oro-fitto); border-width: 2px; background: rgba(255, 235, 150, .42); } .legenda-bollo--vuota { border: 1px dashed var(--filo-lieve); background: none; } .legenda-bollo--sigillata { border-color: var(--rosso); background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(200,40,40,.5) 3px 4px); } .didascalia { font-size: .8rem; font-style: italic; color: var(--inchiostro-tenue); border-top: 1px solid var(--filo-lieve); padding-top: .5rem; margin: 0 0 1.8rem; max-width: 34ch; } /* ------------------------------------------------------------- piede */ .piede { margin-top: 2.6rem; padding-top: .9rem; border-top: 3px double var(--inchiostro); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.2rem; font-family: var(--titoli); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--inchiostro-tenue); } .piede a { color: var(--inchiostro-tenue); } .piede a:hover { color: var(--rosso-fitto); } /* --------------------------------------------------------- utilita' */ .solo-lettori-schermo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* La carta non si anima: il giornale sta fermo. L'unico movimento e' il passaggio di colore dei link, e anche quello sparisce su richiesta. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* Stampare la classifica del giornale e' l'unica cosa sensata da fare. */ @media print { body { background: #fff; padding: 0; } .foglio { box-shadow: none; max-width: none; } .foglio::before { display: none; } .rubriche, .ritorno { display: none; } }