/* ============================================================ Spazio Sanremo — minimal scuro + floating glass bar ============================================================ */ /* Geist, auto-ospitato. Variabile 100-900: il logotipo usa il peso 200 per «spazio», che lo stack di sistema garantiva solo su macOS. SIL Open Font License 1.1 — il testo è in assets/font/OFL.txt */ @font-face { font-family: 'Geist'; src: url('../font/geist.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ------------------------------------------------------------------------ LA TAVOLOZZA — «Ariston» Il blu è quello del palco illuminato, campionato da una fotografia della scenografia invece che scelto a occhio. Quello che la misura ha detto: · il buio del palco sta fra #000014 e #0a0a1e; · le pareti illuminate fra #0a1446 e #0a1464; · i fasci di luce sono un cobalto elettrico, #285afa e dintorni. Tutti nella stessa zona, fra 226° e 233°, e tutti con il canale verde molto sotto la retta fra rosso e blu (da −17 a −45). È questo che li rende cobalto e non ciano, ed è la ragione per cui questa tinta non si legge come violetta mentre un indaco chiaro e slavato alla stessa gradazione sì: a fare la differenza è la saturazione, non l'angolo. L'accento del testo è il cobalto schiarito quel tanto che basta a reggere 6,8:1 sul fondo. Schiarirlo oltre lo porterebbe verso il pervinca, che è la strada da cui si è già tornati indietro una volta. Un guadagno che il colore precedente non aveva: la distanza fra l'accento e il testo bianco è 2,64:1 contro 1,42:1. Un collegamento dentro una frase si riconosce perché il suo colore è diverso da quello delle parole intorno, e con l'azzurro cielo quella differenza si stava chiudendo. Il colore non entra mai nel testo corrente e non si mette sui nomi propri: va sui collegamenti, sulla voce di menu attiva, sulle barre dei grafici e sul conto alla rovescia. Un archivio si legge, e un testo colorato si legge peggio. ------------------------------------------------------------------------ */ :root { --bg: #040a1a; --bg-2: #0d1640; --text: #f4f4f6; --muted: #8e94a8; --dim: #6e7590; --hairline: rgba(198,214,255,.10); --hairline-2: rgba(198,214,255,.18); --accento: #6b93ff; --accento-2: #4a6ee0; --accento-velo: rgba(107,147,255,.13); /* L'accento quando diventa un'AREA PIENA, non un testo. Non è pignoleria: lo stesso colore steso su un blocco si legge più saturo e più indaco della stessa tinta usata per qualche lettera sottile, perché l'occhio giudica una superficie e non un contorno. La pastiglia del menu a 224° sembrava violetta mentre i collegamenti alla stessa tinta no. Qui la tinta scende a 215°, tenendo identiche luminosità e saturazione: il blocco si legge blu, e il testo scuro sopra guadagna anche un po' di contrasto (da 6,9:1 a 8,4:1). */ --accento-pieno: #6ba9ff; --glass: rgba(255,255,255,.055); --glass-hi: rgba(255,255,255,.13); /* alias storico: alcune regole scrivono --line invece di --hairline. Senza questa riga quei bordi ereditavano currentColor e comparivano bianchi invece che appena accennati. */ --line: rgba(198,214,255,.10); --maxw: 1060px; --font: 'Geist', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Inter, Helvetica, Arial, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.55; padding-top: 132px; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* L'ingresso della pagina. Sul si anima SOLO l'opacità, mai la posizione. Una `transform` sul body renderebbe il body il blocco di riferimento dei figli in `position: fixed`, e la barra del menu smetterebbe di stare agganciata alla finestra: scorrendo se ne andrebbe via con la pagina. È un effetto collaterale che si vede solo provando a scorrere, quindi è il tipo di cosa che passa inosservata fino alla pubblicazione. Il movimento verso l'alto lo fanno i contenitori qui sotto, che fissi non sono e quindi possono permetterselo. */ animation: entra-pagina .42s ease-out both; } @keyframes entra-pagina { from { opacity: 0; } to { opacity: 1; } } /* Il contenuto sale di pochissimo mentre compare. Otto pixel: abbastanza perché si percepisca un arrivo, troppo pochi perché si percepisca un'animazione. Il ritardo di 60 ms fa partire il movimento a dissolvenza già cominciata, così le due cose non sembrano lo stesso gesto. */ .hero, .band { animation: sale-contenuto .5s .06s cubic-bezier(.2,.7,.3,1) both; } @keyframes sale-contenuto { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Chi ha chiesto al sistema meno animazioni non se le trova addosso: la pagina compare e basta, senza dissolvenza e senza movimento. */ @media (prefers-reduced-motion: reduce) { body, .hero, .band, body::before, body::after { animation: none; } } /* Gli aloni di fondo. PERCHÉ HANNO UN COLORE LORO, E NON L'ACCENTO. All'inizio riusavano --accento e --accento-2, che è la cosa che viene naturale. Il risultato era un fondo che tirava al verde, e per due volte la colpa è sembrata del colore di base: non lo era. Misurando quanto il canale verde sta sopra la retta fra rosso e blu, il fondo dava −1 (blu pulito) mentre i due accenti davano +18 e +21, cioè tiravano al ciano. Stesi su mezzo schermo a bassa opacità, erano loro a dare la dominante. I colori qui sotto sono scelti perché quella misura sia vicina a zero: #2c5ea8 dà −5,8 e #3a6fc0 dà −7,3. Sono blu con dentro pochissimo verde, e infatti si leggono come notte e non come acquario. Restano vicini di tinta all'accento (215° contro 202°), quindi la famiglia è la stessa: cambia solo che questi non devono essere leggibili, devono solo colorare il buio. Tre regole che li tengono discreti: opacità fra .07 e .22, nessuna seconda tinta che farebbe arcobaleno, e posizione fissa rispetto alla finestra, così il testo scorre sopra una luce ferma. */ :root { --alone-1: 34, 64, 158; /* #22409e, le pareti illuminate */ --alone-2: 51, 88, 216; /* #3358d8, i fasci di luce */ } /* Due strati invece di uno: si muovono con tempi e versi diversi, e il movimento risulta irregolare invece che una giostra. Si anima solo `transform`, che la scheda grafica sa fare senza ridisegnare niente: animare `background-position` su un elemento sfocato a schermo intero farebbe girare le ventole. */ body::before, body::after { content: ''; position: fixed; inset: -25%; pointer-events: none; z-index: 0; filter: blur(30px); will-change: transform; } body::before { background: radial-gradient(38% 30% at 20% 16%, rgba(var(--alone-1),.22), transparent 68%), radial-gradient(28% 24% at 88% 56%, rgba(var(--alone-1),.14), transparent 70%), radial-gradient(40% 28% at 52% 96%, rgba(var(--alone-1),.10), transparent 72%); animation: deriva-a 46s ease-in-out infinite alternate; } body::after { background: radial-gradient(30% 26% at 84% 10%, rgba(var(--alone-2),.13), transparent 66%), radial-gradient(34% 28% at 10% 76%, rgba(var(--alone-2),.10), transparent 70%); animation: deriva-b 61s ease-in-out infinite alternate; } /* Il movimento è di pochi punti percentuali su una macchia larga mezzo schermo e sfocata di 30 px: a schermo si legge come un respiro, non come uno spostamento. I due tempi sono 46 e 61 secondi, primi fra loro, così i due strati non tornano mai allineati e il disegno non si ripete in modo riconoscibile. */ @keyframes deriva-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(2.5%, -2%, 0) scale(1.06); } } @keyframes deriva-b { from { transform: translate3d(0, 0, 0) scale(1.04); } to { transform: translate3d(-3%, 2.5%, 0) scale(1); } } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } .wrap { position: relative; z-index: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 26px; } /* ------------------------------------------------------------ Floating glass bar ------------------------------------------------------------ */ .glassbar { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 500; display: flex; align-items: center; gap: 20px; padding: 8px 8px 8px 22px; border-radius: 999px; background: var(--glass); border: 1px solid var(--hairline-2); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 10px 40px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10); transition: top .3s cubic-bezier(.4,0,.2,1), padding .3s, background .3s; } /* Il riflesso speculare in alto alla barra è stato tolto: su un fondo blu scuro quella mezzaluna bianca si vedeva come una patina lattiginosa invece che come vetro. Restano la sfocatura di fondo e il bordo chiaro, che l'effetto vetro lo fanno già. */ .glassbar.scrolled { top: 12px; background: rgba(255,255,255,.075); } /* ------------------------------------------------------------------------ Il logotipo è un PNG a tre densità (vedi marca() in main.js), non testo più SVG. Motivo: composto in HTML le lettere le aggancia alla griglia dei pixel il rasterizzatore dei caratteri, le barre no — e a ogni zoom sembravano staccarsi dalla parola. Come immagine sono un pezzo solo. Prezzo da pagare: non eredita il colore, non è selezionabile, e a zoom intermedi il browser lo ricampiona. Per questo c'è l'alt e per questo le misure stanno nell'attributo, così il posto è riservato prima del caricamento. ------------------------------------------------------------------------ */ .marca { display: inline-block; line-height: 0; } .marca-img { display: block; width: 150px; height: 19px; } /* Perché il contenitore è flex e non un semplice span. Un elemento inline-block sta su una riga di testo, e la riga riserva comunque lo spazio del «puntello»: la discendente del carattere ereditato, sotto la linea di base. L'immagine si appoggia alla base e quello spazio le resta sotto — quindi dentro un riquadro centrato l'immagine risulta più alta del centro di circa 1,6 px (16 px di corpo, interlinea 1,55). Con `display: flex` la riga di testo non esiste più: l'altezza del contenitore è esattamente quella dell'immagine. */ .gb-logo { display: flex; align-items: center; gap: 4px; } /* Il segno che apre la tendina. Sul desktop non serve: il menu è già tutto in vista, e un secondo modo di arrivarci sarebbe solo rumore. */ .gb-tendina { display: none; } .gb-pannello { display: none; } .gb-nav { display: flex; align-items: center; gap: 2px; } .gb-nav a { position: relative; font-size: 13.5px; font-weight: 500; letter-spacing: -.005em; color: var(--muted); padding: 8px 15px; border-radius: 999px; transition: color .18s, background .18s; white-space: nowrap; } .gb-nav a:hover { color: var(--text); background: rgba(255,255,255,.06); } .gb-nav a.active { color: #04070c; background: var(--accento-pieno); box-shadow: 0 1px 8px rgba(107,169,255,.32), inset 0 1px 0 rgba(255,255,255,.45); } /* menu a tendina dentro la barra */ .gb-item { position: relative; } .gb-drop { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 186px; padding: 7px; border-radius: 18px; /* Coprente sul serio. A .72 il contenuto della pagina si leggeva attraverso la tendina e i due testi si accavallavano: una tendina è un foglio che si mette davanti, non un vetro smerigliato. A .94 resta un filo di trasparenza, quel tanto che basta perché si capisca che galleggia, e sotto non si legge più niente. Il colore è quello del fondo, non un grigio neutro: un grigio su un fondo blu si vede come una macchia di un'altra famiglia. */ background: rgba(9,17,32,.94); border: 1px solid var(--hairline-2); backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%); box-shadow: 0 16px 48px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.10); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; } .gb-item:hover .gb-drop, .gb-item:focus-within .gb-drop, .gb-item.open .gb-drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .gb-drop a { display: block; padding: 9px 14px; border-radius: 12px; font-size: 13.5px; color: var(--muted); } .gb-drop a:hover { background: rgba(255,255,255,.07); color: var(--text); } /* La pagina in cui ci si trova, dentro la tendina, si segnala come nella barra: pastiglia piena nel colore d'accento e testo scuro sopra. Prima era un rettangolo appena più chiaro del fondo, che si confondeva con l'effetto del passaggio del puntatore: due stati diversi non possono avere lo stesso aspetto. */ .gb-drop a.active { color: #04070c; background: var(--accento-pieno); box-shadow: 0 1px 8px rgba(107,169,255,.28), inset 0 1px 0 rgba(255,255,255,.4); } .gb-drop a.active:hover { color: #04070c; background: var(--accento-pieno); } .caret { font-size: 9px; opacity: .6; margin-left: 5px; vertical-align: middle; } /* ------------------------------------------------------------ Ricerca globale ------------------------------------------------------------ */ .gb-cerca { display: grid; place-items: center; width: 34px; height: 34px; margin-left: 4px; border: none; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--muted); cursor: pointer; transition: color .18s, background .18s; } .gb-cerca:hover { color: var(--text); background: rgba(255,255,255,.13); } .ric-overlay { position: fixed; inset: 0; z-index: 900; display: grid; grid-template-rows: 1fr; align-items: start; justify-items: center; padding: 10vh 20px 20px; } .ric-overlay[hidden] { display: none; } body.ric-bloccato { overflow: hidden; } .ric-fondo { position: fixed; inset: 0; background: rgba(6,6,8,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .ric-box { position: relative; width: 100%; max-width: 660px; max-height: 76vh; display: flex; flex-direction: column; border-radius: 22px; background: rgba(20,20,25,.86); border: 1px solid var(--hairline-2); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.14); overflow: hidden; animation: ric-entra .17s cubic-bezier(.4,0,.2,1); } @keyframes ric-entra { from { opacity: 0; transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .ric-box { animation: none; } } .ric-campo { display: flex; align-items: center; gap: 12px; padding: 16px 16px 16px 20px; border-bottom: 1px solid var(--hairline); } .ric-lente { color: var(--dim); display: grid; place-items: center; } .ric-campo input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 17px; letter-spacing: -.015em; } .ric-campo input::placeholder { color: var(--dim); } .ric-campo input::-webkit-search-cancel-button { display: none; } /* Il pulsante di chiusura. Era la parola «esc» dentro un riquadro, cioè una scorciatoia da tastiera disegnata come un tasto: su un telefono, dove la tastiera non c'è, era un pulsante che chiedeva di premere un tasto inesistente. La croce si capisce dappertutto, e la scorciatoia resta, scritta nel `title` per chi ha una tastiera. */ .ric-esc { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid var(--hairline-2); background: transparent; color: var(--dim); border-radius: 999px; cursor: pointer; transition: color .18s, background .18s, border-color .18s; } .ric-esc:hover { color: var(--text); background: var(--glass); border-color: var(--hairline-2); } .ric-esiti { overflow-y: auto; padding: 8px; flex: 1; overscroll-behavior: contain; } .ric-vuoto { color: var(--dim); font-size: .92rem; padding: 26px 14px; text-align: center; } .ric-titolo { display: flex; justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--dim); padding: 14px 12px 7px; } .ric-gruppo:first-child .ric-titolo { padding-top: 6px; } .ric-voce { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 11px; cursor: pointer; } .ric-voce:hover, .ric-voce.on { background: rgba(255,255,255,.08); } .ric-nome { font-size: .97rem; letter-spacing: -.012em; } .ric-sotto { color: var(--dim); font-size: .8rem; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; } .ric-esiti mark { background: none; color: var(--text); font-weight: 600; box-shadow: inset 0 -1px 0 rgba(255,255,255,.28); } .ric-nome { color: var(--muted); } .ric-tutti { display: block; margin: 8px 4px 4px; padding: 12px; border-radius: 11px; text-align: center; font-size: .87rem; color: var(--muted); border: 1px solid var(--hairline); } .ric-tutti:hover { color: var(--text); background: rgba(255,255,255,.05); } .ric-piede { display: flex; gap: 18px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--hairline); font-size: 11px; color: var(--dim); } .ric-piede .ric-conta { margin-left: auto; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ Statistiche ------------------------------------------------------------ */ /* Quattro colonne fisse, non `auto-fit`. Le voci sono otto: con `auto-fit` il numero di colonne dipende dalla larghezza della finestra, e a 1060 px ne entravano sei — sei piene e due sulla riga sotto, con quattro celle vuote che sembravano dati mancanti. Otto diviso quattro fa due righe piene sempre. */ .numeri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden; } .numero { display: grid; gap: 6px; padding: 26px 22px; background: var(--bg); transition: background .2s; } .numero:hover { background: rgba(255,255,255,.035); } .numero b { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; } .numero span { font-size: .8rem; color: var(--dim); letter-spacing: -.005em; } /* classifica con barra proporzionale */ .grad { list-style: none; counter-reset: none; } .grad li { display: grid; grid-template-columns: 34px 1fr; align-items: center; } .grad .pos { font-size: .78rem; color: var(--dim); font-variant-numeric: tabular-nums; text-align: right; padding-right: 14px; } .grad .voce { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 18px; padding: 13px 16px; border-bottom: 1px solid var(--hairline); overflow: hidden; } .grad li:first-child .voce { border-top: 1px solid var(--hairline); } .grad .barra { position: absolute; inset: 1px auto 1px 0; background: rgba(255,255,255,.055); border-radius: 0 3px 3px 0; transition: background .2s; } .grad .voce:hover .barra { background: rgba(255,255,255,.1); } .grad .nome { position: relative; font-size: 1rem; letter-spacing: -.015em; } .grad .nome em { display: block; font-style: normal; color: var(--dim); font-size: .8rem; margin-top: 4px; letter-spacing: 0; } .grad .val { position: relative; color: var(--muted); font-size: .84rem; white-space: nowrap; font-variant-numeric: tabular-nums; } /* istogramma. Il grafico non si riscala in proporzione allo schermo: settantasei barre in trecento pixel non si distinguono più. Sotto una certa larghezza si scorre in orizzontale, che è meglio di un grafico illeggibile. */ .grafico { margin: 0; overflow-x: auto; overscroll-behavior-x: contain; } .grafico svg { display: block; width: 100%; min-width: 620px; height: auto; } .grafico-tela { position: relative; } /* Le barre nel blu profondo, quella toccata nell'azzurro pieno: il salto fra i due si vede anche di sfuggita, e non serve nient'altro per capire quale anno si sta guardando. */ .grafico .gb .barra { fill: var(--accento-2); transition: fill .12s; } .grafico .gb .barra.on { fill: var(--accento); } /* il rettangolo invisibile che copre tutta l'altezza: serve a prendere il puntatore anche sugli anni con la barra bassa */ .grafico .gb .tocca { fill: transparent; } /* ogni barra è un collegamento all'edizione: il puntatore deve dirlo */ .grafico .gb a { cursor: pointer; } /* ATTENZIONE: questa è la targhetta che segue il dito sui grafici delle statistiche, non una didascalia. È in posizione assoluta e non va a capo (`nowrap`), quindi usata per una nota normale diventa una riga larga 837 px che fa scorrere di lato tutta la pagina: è successo sulla scheda del 2027. Per una nota sotto a un elenco c'è `.legenda`. */ .grafico-nota { position: absolute; pointer-events: none; padding: 7px 11px; border-radius: 10px; background: rgba(20,20,25,.95); border: 1px solid var(--hairline-2); box-shadow: 0 8px 24px rgba(0,0,0,.5); font-size: 12.5px; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; z-index: 5; } .grafico-nota[hidden] { display: none; } .grafico .asse { stroke: var(--hairline-2); stroke-width: 1; vector-effect: non-scaling-stroke; } .grafico .ga text { fill: var(--dim); font-size: 11px; font-family: inherit; font-variant-numeric: tabular-nums; } .grafico figcaption { margin-top: 16px; font-size: .84rem; color: var(--dim); } .grafico figcaption b { color: var(--muted); font-weight: 500; } /* pagina dei risultati */ .ric-sezione { margin-bottom: 54px; } .ric-sezione .sec { margin-bottom: 18px; } .ric-n { color: var(--dim); font-weight: 400; font-size: .6em; margin-left: 6px; } .ric-espandi { display: block; margin-top: 20px; background: none; border: none; font-family: inherit; cursor: pointer; padding: 0; } #risultati mark { background: none; color: var(--text); box-shadow: inset 0 -1px 0 rgba(255,255,255,.3); } /* ------------------------------------------------------------ Tipografia ------------------------------------------------------------ */ .kicker { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: 26px; } h1.display { font-size: clamp(2.7rem, 8.2vw, 5.6rem); line-height: .96; letter-spacing: -.045em; font-weight: 600; } h1.display .fade { color: var(--dim); } .lead { font-size: clamp(1.02rem, 1.7vw, 1.22rem); color: var(--muted); max-width: 46ch; margin-top: 30px; letter-spacing: -.011em; } h2.sec { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.032em; font-weight: 600; } .hero { padding: 34px 0 96px; } .band { padding: 92px 0; border-top: 1px solid var(--hairline); } .band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 46px; flex-wrap: wrap; } .textlink { font-size: 13.5px; color: var(--muted); transition: color .18s; } .textlink:hover { color: var(--accento); } /* ------------------------------------------------------------ Liste (news, edizioni) ------------------------------------------------------------ */ .list { border-top: 1px solid var(--hairline); } .row { border-bottom: 1px solid var(--hairline); cursor: pointer; transition: background .2s; } .row:hover { background: rgba(255,255,255,.022); } .row-main { display: grid; align-items: baseline; gap: 22px; padding: 24px 4px; } /* news */ .row.news .row-main { grid-template-columns: 92px 1fr auto; } .row .meta { font-size: 12px; color: var(--dim); letter-spacing: .02em; font-variant-numeric: tabular-nums; } .row h3 { font-size: clamp(1.05rem, 2vw, 1.32rem); font-weight: 500; letter-spacing: -.022em; line-height: 1.28; } .row .sub { color: var(--muted); font-size: .94rem; margin-top: 7px; max-width: 62ch; letter-spacing: -.008em; } .chev { color: var(--dim); font-size: 18px; line-height: 1; transition: transform .28s cubic-bezier(.4,0,.2,1), color .2s; } .row.open .chev { transform: rotate(45deg); color: var(--text); } .row:hover .chev { color: var(--muted); } .row-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(.4,0,.2,1); } .row.open .row-detail { grid-template-rows: 1fr; } .row-detail > div { overflow: hidden; } .detail-inner { padding: 4px 4px 30px; color: var(--muted); font-size: .96rem; max-width: 68ch; } /* edizioni */ .row.ed .row-main { grid-template-columns: 92px 1fr 1fr auto; } .row.ed .year { font-size: 1.55rem; font-weight: 500; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1; } /* Il vincitore resta bianco. Provato in azzurro: era l'informazione che si cerca scorrendo un elenco di edizioni, e colorarla sembrava l'uso più utile del colore. In pagina però il risultato è un elenco di nomi propri accesi, che a colpo d'occhio si leggono come collegamenti tutti uguali invece che come persone diverse. Un nome si mette in evidenza col peso, non con la tinta: qui basta il 500 contro il 400 della riga accanto. */ .row.ed .winner { font-size: 1.06rem; font-weight: 500; letter-spacing: -.02em; color: var(--text); } .row.ed .song { color: var(--muted); font-size: .93rem; margin-top: 4px; } /* che cosa ha fatto comparire questa edizione fra i risultati di ricerca */ .row.ed .match { color: var(--dim); font-size: .84rem; margin-top: 7px; padding-left: 11px; border-left: 1px solid var(--line); display: grid; gap: 3px; } .row.ed .hosts { color: var(--dim); font-size: .87rem; letter-spacing: -.005em; } .facts { display: grid; gap: 1px; margin-top: 2px; } .fact { display: grid; grid-template-columns: 116px 1fr; gap: 18px; padding: 10px 0; border-top: 1px solid var(--hairline); font-size: .93rem; } .fact dt { color: var(--dim); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; padding-top: 2px; } .fact dd { color: var(--text); } /* ------------------------------------------------------------ Pannello vetro (statistiche / filtri) ------------------------------------------------------------ */ .glass-panel { background: var(--glass); border: 1px solid var(--hairline); border-radius: 22px; backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); padding: 34px 32px; } .figures { display: flex; flex-wrap: wrap; gap: 54px; } .figure .n { font-size: clamp(2.1rem, 5vw, 3.1rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; } .figure .l { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin-top: 11px; } /* toolbar filtri — sticky sotto la barra */ .toolbar { position: sticky; top: 96px; z-index: 40; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; margin-bottom: 26px; border-radius: 999px; background: rgba(14,14,17,.7); border: 1px solid var(--hairline); backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255,255,255,.09); } .field { background: transparent; border: none; color: var(--text); font-family: inherit; font-size: 14.5px; padding: 10px 18px; border-radius: 999px; outline: none; } .field:focus { background: rgba(255,255,255,.06); } input.field { flex: 1; min-width: 190px; } input.field::placeholder { color: var(--dim); } select.field { color: var(--muted); cursor: pointer; } select.field option { background: #14141a; color: var(--text); } .count { font-size: 12.5px; color: var(--dim); margin-bottom: 8px; padding-left: 4px; } .notice { font-size: .87rem; color: var(--dim); border-left: 1px solid var(--hairline-2); padding-left: 16px; margin-bottom: 30px; max-width: 60ch; } /* ------------------------------------------------------------ Storia ------------------------------------------------------------ */ /* I collegamenti dentro un testo: azzurri, ma senza sottolineatura fissa. In un archivio i collegamenti sono tantissimi, e sottolinearli tutti trasformerebbe un paragrafo in un reticolo. La sottolineatura compare al passaggio del puntatore. */ .prose a, .articolo-corpo a { color: var(--accento); } .prose a:hover, .articolo-corpo a:hover { text-decoration: underline; text-underline-offset: 3px; } .prose p { color: var(--muted); font-size: 1.02rem; max-width: 62ch; margin-bottom: 20px; letter-spacing: -.01em; } .chapters { border-top: 1px solid var(--hairline); } .chapter { display: grid; grid-template-columns: 132px 1fr; gap: 30px; padding: 40px 0; border-bottom: 1px solid var(--hairline); } .chapter .yr { font-size: .82rem; color: var(--dim); letter-spacing: .06em; font-variant-numeric: tabular-nums; padding-top: 6px; } .chapter h3 { font-size: 1.28rem; font-weight: 500; letter-spacing: -.025em; margin-bottom: 10px; } .chapter p { color: var(--muted); font-size: .97rem; max-width: 60ch; letter-spacing: -.008em; } /* ------------------------------------------------------------ Footer ------------------------------------------------------------ */ .foot { border-top: 1px solid var(--hairline); padding: 60px 0 46px; margin-top: 30px; } .foot-in { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; } /* la colonna del marchio: la misura stava scritta in linea dentro main.js, e da lì nessuna regola poteva riallinearla per lo schermo stretto */ .foot-marca { max-width: 260px; } /* `:not(.marca-img)` non è pedanteria: questa regola nasceva per il logotipo in SVG, che si adattava da solo. Con il PNG imponeva 16 px di altezza lasciando i 150 di larghezza, e il marchio usciva schiacciato. Ora la misura del logotipo la decide una regola sola, qui sotto. */ .foot img:not(.marca-img) { height: 16px; opacity: .8; margin-bottom: 16px; } /* Nel footer il logotipo è più grande che nella barra: lì è un pulsante di servizio, qui è la firma in chiusura. 150 × 19 diventa 174 × 22, che mantiene il rapporto del disegno con uno scarto dello 0,18%, e resta dentro la colonna da 260 px. Il PNG arriva fino a @3x (450 px), quindi anche su schermo a doppia densità non viene ingrandito oltre il vero. */ .foot .marca-img { width: 174px; height: 22px; opacity: .85; } .foot .marca { margin-bottom: 16px; } .foot p, .foot a { color: var(--dim); font-size: .87rem; } .foot a { display: block; padding: 3px 0; transition: color .18s; } .foot a:hover { color: var(--text); } .foot h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .11em; color: var(--dim); margin-bottom: 12px; font-weight: 500; } .foot-bottom { margin-top: 46px; font-size: .78rem; color: #6e7590; /* due estremi della stessa riga: la nota legale a sinistra, la firma a destra. Su schermo stretto vanno a capo e restano allineate a sinistra, invece di stringersi in due colonne da quattro parole l'una. */ display: flex; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; } .foot-bottom .firma { color: var(--dim); } /* il collegamento della firma è in linea, non un blocco come gli altri del footer, altrimenti «Vuoi un sito così?» andrebbe a capo da solo */ .foot-bottom a { display: inline; padding: 0; color: var(--muted); } .foot-bottom a:hover { color: var(--text); } /* ------------------------------------------------------------ Pagina edizione ------------------------------------------------------------ */ .tabs { display: flex; gap: 4px; padding: 6px; margin-bottom: 34px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--hairline); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { flex: none; padding: 9px 17px; border-radius: 999px; border: none; background: none; color: var(--muted); font-family: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .18s, color .18s; } .tab:hover { color: var(--text); background: rgba(255,255,255,.05); } .tab.on { color: #0b0b0d; background: rgba(255,255,255,.92); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); } .pane { display: none; } .pane.on { display: block; animation: fade .3s ease; } @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* classifica */ .rank { border-top: 1px solid var(--hairline); } .rk { display: grid; grid-template-columns: 44px 1fr auto; gap: 18px; align-items: baseline; padding: 17px 4px; border-bottom: 1px solid var(--hairline); transition: background .18s; } .rk:hover { background: rgba(255,255,255,.022); } .rk .pos { font-size: 1.05rem; color: var(--dim); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .rk.podio .pos { color: var(--accento); font-size: 1.3rem; } /* il numero di posizione, non un nome */ .rk .tit { font-size: 1.03rem; font-weight: 500; letter-spacing: -.02em; } .rk .by { color: var(--muted); font-size: .9rem; margin-top: 3px; } .rk .by a, .credits a { border-bottom: 1px solid rgba(255,255,255,.18); } .rk .by a:hover, .credits a:hover { color: var(--text); border-color: var(--text); } .rk .aside { color: var(--dim); font-size: .82rem; text-align: right; } .credits { color: var(--dim); font-size: .85rem; margin-top: 6px; } .links { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid var(--hairline); transition: background .18s, color .18s, border-color .18s; } .chip:hover { background: rgba(255,255,255,.1); color: var(--text); border-color: var(--hairline-2); } button.chip { font-family: inherit; cursor: pointer; } .chip.on { background: var(--accento-pieno); color: #04070c; border-color: transparent; } .chip span { color: var(--dim); font-variant-numeric: tabular-nums; } .chip.on span { color: rgba(0,0,0,.5); } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; } .embed { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--hairline); margin-top: 16px; max-width: 620px; } .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .quote { border-left: 1px solid var(--hairline-2); padding: 2px 0 2px 18px; margin: 16px 0; color: var(--muted); font-size: .95rem; font-style: italic; max-width: 46ch; } .quote cite { display: block; font-style: normal; font-size: .78rem; color: var(--dim); margin-top: 8px; } .bullets { list-style: none; } .bullets li { position: relative; padding: 0 0 14px 20px; color: var(--muted); font-size: .96rem; max-width: 66ch; } .bullets li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: var(--dim); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .serata-head { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin: 34px 0 12px; } /* testata in cima alla scheda di una singola serata */ .testata-serata { padding: 22px 26px; margin-bottom: 26px; border-radius: 18px; background: var(--glass); border: 1px solid var(--hairline); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,.09); } .testata-serata .ts-data { font-size: 1.22rem; letter-spacing: -.028em; font-weight: 500; text-transform: capitalize; } .testata-serata .ts-con { color: var(--muted); font-size: .93rem; margin-top: 7px; } .testata-serata .ts-con a { color: var(--text); border-bottom: 1px solid rgba(255,255,255,.18); } .testata-serata .ts-con a:hover { border-color: var(--text); } /* ascolti */ .ascolti { border-top: 1px solid var(--hairline); } .ascolto { display: grid; grid-template-columns: 190px 1fr 132px; gap: 22px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--hairline); } .ascolto .a-lab { color: var(--muted); font-size: .9rem; letter-spacing: -.008em; } .ascolto .a-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,.055); overflow: hidden; } .ascolto .a-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.82)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); } .ascolto .a-val { text-align: right; font-size: .95rem; font-variant-numeric: tabular-nums; letter-spacing: -.015em; } .ascolto .a-val span { display: block; color: var(--dim); font-size: .76rem; margin-top: 3px; } /* ------------------------------------------------------------ Indici (artisti, autori, ospiti, canzoni) ------------------------------------------------------------ */ .alpha { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 26px; } .alpha button { min-width: 30px; padding: 6px 8px; border-radius: 9px; border: none; background: none; color: var(--dim); font-family: inherit; font-size: 12.5px; cursor: pointer; transition: background .15s, color .15s; } .alpha button:hover { color: var(--text); background: rgba(255,255,255,.06); } .alpha button.on { color: #0b0b0d; background: rgba(255,255,255,.9); } .alpha button:disabled { opacity: .22; cursor: default; } .badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; color: var(--dim); border: 1px solid var(--hairline); vertical-align: middle; margin-left: 9px; } .row.entity .row-main { grid-template-columns: 1fr auto auto; gap: 16px; } .row.entity .n-part { color: var(--dim); font-size: .84rem; white-space: nowrap; } .part { display: grid; grid-template-columns: 62px 1fr auto; gap: 16px; padding: 11px 0; border-top: 1px solid var(--hairline); font-size: .93rem; align-items: baseline; } .part .yr { color: var(--dim); font-variant-numeric: tabular-nums; } .part .pl { color: var(--dim); font-size: .82rem; text-align: right; } .empty { color: var(--dim); font-size: .93rem; padding: 30px 4px; } /* ------------------------------------------------------------ Responsive ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto; } } /* artisti fuori classifica: ritirati, esclusi */ .rk.fuori .pos, .rk.fuori .tit { opacity: .62; } /* legenda sotto una classifica (F / NF) */ .legenda { font-size: .78rem; color: var(--dim); letter-spacing: .02em; margin: 10px 0 30px 4px; } .legenda span { opacity: .7; } /* ------------------------------ fotografie ------------------------------ Vengono da Wikimedia Commons: libere, ma quasi sempre da attribuire. Cliccando si aprono in grande, ed è lì che compaiono i crediti. */ .ritratto { object-fit: cover; cursor: zoom-in; background: var(--panel); border: 1px solid var(--line); -webkit-user-drag: none; user-select: none; } .ritratto { width: 172px; height: 172px; border-radius: 50%; margin-bottom: 26px; display: block; } #lightbox { position: fixed; inset: 0; z-index: 90; display: none; background: rgba(8, 8, 10, .93); backdrop-filter: blur(18px) saturate(120%); align-items: center; justify-content: center; padding: 5vh 5vw; } #lightbox.on { display: flex; } #lightbox figure { margin: 0; max-width: 100%; max-height: 90vh; text-align: center; } #lightbox img { max-width: 100%; max-height: 78vh; border-radius: 10px; /* è un blocco: senza questo resta incollata a sinistra */ margin: 0 auto; user-select: none; -webkit-user-drag: none; } #lightbox figcaption { color: var(--dim); font-size: .85rem; margin-top: 16px; line-height: 1.6; } #lightbox figcaption a { color: var(--muted); } #lightbox .lb-desc { display: block; color: var(--muted); margin-bottom: 4px; } .lb-chiudi { position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer; background: rgba(255, 255, 255, .06); color: var(--text); font-size: 1.5rem; line-height: 1; } /* Una fonte che non è un indirizzo web ma la citazione di un libro: si scrive, non si trasforma in un collegamento verso il proprio testo. */ .fonte-cita { color: var(--dim); font-size: .86em; } .fonte-link { color: var(--dim); } .fonte-link:hover { color: var(--text); } /* Gli indirizzi delle fonti si scrivono per intero e vanno a capo dove serve: troncarli faceva sembrare rotto un collegamento che funziona. */ .fonte-url { word-break: break-all; line-height: 1.45; } /* ------------------------------------------------------------ Home: conto alla rovescia e carosello degli articoli ------------------------------------------------------------ */ .conto { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 30px 34px; border-radius: 22px; background: var(--glass); border: 1px solid var(--hairline-2); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); transition: border-color .2s, background .2s; } .conto:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.075); } .conto .kicker { margin-bottom: 10px; } /* I quadranti del conto alla rovescia: mesi, giorni, ore. `tabular-nums` è obbligatorio, non estetico: senza, ogni volta che un numero cambia cifra la riga si sposta di qualche pixel, e con un valore che si aggiorna da solo il movimento si nota. */ .conto-quadranti { display: flex; gap: 26px; } .conto-q { text-align: center; min-width: 62px; } .conto-q b { display: block; font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 500; letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; /* Il colore delle pastiglie e non quello dei collegamenti: le cifre del conto alla rovescia sono grandi e piene, e valgono come superficie più che come testo. Stessa ragione per cui la pastiglia del menu ha un valore suo. Diventano bianche quando il Festival è in onda: il cambio di colore è il segnale che la sezione ha cambiato mestiere. */ color: var(--accento-pieno); } .conto-q span { display: block; margin-top: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); } .conto-quadranti.in-corso .conto-q b { color: var(--text); } /* Il logotipo come titolo della home. Largo quanto la colonna di testo ma con un tetto, perché oltre una certa misura smette di essere un marchio e diventa una scritta. */ /* Sotto il logotipo, nella home, una riga sottile. Chiude il marchio e apre quello che viene dopo, che è il mestiere di un filetto. Va per tutta la colonna e non solo sotto il disegno: una riga lunga quanto il logotipo sembrerebbe una sottolineatura, cioè parte del marchio, mentre così si legge come una divisione della pagina. */ .marchione { line-height: 0; margin-bottom: 0; padding-bottom: 34px; border-bottom: 1px solid var(--hairline); } /* Il logotipo allineato al testo, non al bordo del suo file. L'SVG si porta dentro del vuoto a sinistra: rasterizzandolo a 560 px l'inchiostro comincia a 7,00 px dal bordo dell'immagine. Metà è il bordo di sicurezza del viewBox (40 unità su 6888), metà è la spalla della «s» iniziale. La frase qui sotto comincia invece a 0,54 px — la spalla della «T» di Geist a corpo 41,6 px — quindi senza correzione il marchio risulta rientrato di sei pixel e mezzo rispetto al testo. Da fermi non si nota, ma con la frase larga uguale sotto sì. Il recupero è in percentuale e non in pixel perché il logotipo rimpicciolisce con la finestra: dentro la calc «100%» vale la larghezza del contenitore, che sotto i 560 px è anche la larghezza dell'immagine, così lo scarto resta proporzionato a qualunque misura. 7,00 su 560 è l'1,25%. Corretto qui e non nel file del logotipo perché quel vuoto serve altrove — nella barra e nell'immagine social il marchio non deve toccare i bordi. */ .marchione img { --logo-largo: min(100%, 560px); width: var(--logo-largo); height: auto; margin-left: calc(var(--logo-largo) * -0.0125); } /* La promessa del sito, in grande e tutta di un pezzo. Niente parole in evidenza: un peso solo, un colore solo. Bianca e piena come il logotipo: la differenza fra le due cose non la fa il colore e nemmeno il peso, la fa la misura. Il marchio resta la cosa più grande, questa è il gradino sotto, e la riga dei numeri in --dim è il terzo. Tre gradini della stessa luce. */ .claim { /* Senza il logotipo sopra, la frase apre la pagina: non ha più bisogno dello stacco che la separava dal marchio. Il margine serve solo quando è preceduta da qualcosa. */ margin-top: 0; /* La scala è quella di h1.display, il titolo delle altre pagine, perché questa riga è il titolo della home: il logotipo sopra è un marchio, non una frase, e senza di lei la pagina si aprirebbe senza dire di che cosa parla. Il corpo massimo è 3,6rem e non i 5,6 di h1.display, e la ragione è misurata sul font vero: a 5,6rem questa frase occupa 2.363 px e la colonna ne offre 1.012, cioè tre righe sotto a un logotipo largo 560 px. A 3,6rem ne occupa 1.519 e si spezza in due righe di circa 760 px, che è la misura del logotipo poco più larga. Due righe, non tre, e il marchio resta la cosa più grande della pagina. */ font-size: clamp(1.9rem, 4.6vw, 3.6rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.06; color: var(--text); /* `balance` spezza in due righe di lunghezza simile invece di lasciare «a oggi» da solo in fondo; il tetto in em fa sì che il punto di rottura scenda insieme al corpo quando la finestra si stringe. */ max-width: 16em; text-wrap: balance; } /* La coda della frase, in grigio: «dal 1951 a oggi» dice da quando a quando, ed è un'informazione di secondo piano rispetto a che cosa c'è dentro. Il grigio è --muted, quello che il sito usa già per il testo secondario, e non un grigio nuovo: a 3,6rem fa 6,5:1 sul fondo, ben oltre il 3:1 che il testo grande richiede, e 2,75:1 contro il bianco della prima parte, abbastanza perché le due metà si leggano come due cose diverse. */ .claim-coda { color: var(--muted); } /* preceduta da un titolo o da un occhiello, torna a staccarsi */ h1.display + .claim, .kicker + .claim { margin-top: 18px; } /* i conti dell'archivio, piccoli: sono la prova di quella frase. Stanno SOTTO la frase, non sopra: prima si dice che cosa c'è dentro, poi quanto ce n'è. Letti prima, erano quattro numeri senza contesto. */ .numeri-riga { margin-top: 26px; font-size: .92rem; color: var(--dim); letter-spacing: -.005em; font-variant-numeric: tabular-nums; } .lead-marchio { margin-top: 20px; max-width: 46ch; } /* Carosello: una notizia per volta, che ruota da sola. Il cambio è una dissolvenza e non uno scorrimento: le lastre stanno una sopra l'altra nella stessa cella di griglia, e cambia solo l'opacità. Niente da calcolare, niente da ridisegnare, e il riquadro non cambia altezza fra una notizia e l'altra. */ .carosello { position: relative; } .car-vetrina { display: grid; /* `minmax(0, 1fr)` e non `auto`: una colonna implicita si dimensiona sul contenuto più largo, e con `overflow: hidden` sopra il risultato non è una barra di scorrimento ma il testo tagliato a metà parola. Su schermo stretto si vedeva: «pensa al tou|». */ grid-template-columns: minmax(0, 1fr); border: 1px solid var(--hairline); border-radius: 22px; overflow: hidden; background: var(--bg-2); } /* Il passaggio è uno scorrimento. Le lastre stanno tutte nella stessa cella di griglia, una sopra l'altra. Quella attiva è al centro; le altre aspettano spostate di lato, dalla parte da cui arriveranno. La lastra che sta uscendo porta la classe `uscita` e va dalla parte opposta: senza quella distinzione, in CSS «non attiva» comprenderebbe sia chi se ne va sia chi aspetta, e le due si muoverebbero nello stesso verso. `--dir` vale 1 o -1 e lo imposta il JavaScript a ogni cambio. */ .car-lastra { grid-area: 1 / 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 42%) 1fr; min-height: 268px; opacity: 0; visibility: hidden; transform: translateX(calc(var(--dir, 1) * 60px)); transition: opacity .78s ease, transform .78s cubic-bezier(.3, .8, .2, 1), visibility 0s linear .78s; pointer-events: none; } .car-lastra.on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .78s ease, transform .78s cubic-bezier(.3, .8, .2, 1); } .car-lastra.uscita { transform: translateX(calc(var(--dir, 1) * -60px)); } @media (prefers-reduced-motion: reduce) { .car-lastra, .car-lastra.on { transition: opacity .2s linear; transform: none; } } /* senza immagine il testo si prende tutto lo spazio */ .car-lastra:not(:has(.car-foto)) { grid-template-columns: 1fr; } .car-foto { background: var(--bg); border-right: 1px solid var(--hairline); } .car-foto img { width: 100%; height: 100%; object-fit: cover; } .car-corpo { padding: 40px 42px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; max-width: 68ch; } .car-data { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); } .car-corpo h3 { font-size: clamp(1.35rem, 2.9vw, 2rem); font-weight: 500; letter-spacing: -.032em; line-height: 1.2; } .car-corpo h3 a:hover { color: var(--muted); } .car-corpo p { color: var(--muted); font-size: .98rem; letter-spacing: -.008em; max-width: 60ch; } .car-corpo .chip { margin-top: 6px; } .car-comandi { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; } .car-freccia { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--hairline); background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; transition: color .18s, border-color .18s, background .18s; } .car-freccia:hover { color: var(--text); border-color: var(--hairline-2); background: rgba(255,255,255,.05); } .car-punti { display: flex; align-items: center; gap: 8px; } /* `flex: 0 0 auto` non è pleonastico. I puntini stanno in un contenitore flex, e per impostazione predefinita un elemento flex può restringersi sotto la misura richiesta. Mentre il puntino attivo si allarga da 7 a 22 px, il flex compensava schiacciando gli altri: per un istante diventavano ovali, poi tornavano tondi. Con `flex: 0 0 auto` la misura è quella dichiarata e basta. */ .car-punto { flex: 0 0 auto; width: 7px; height: 7px; padding: 0; border: none; border-radius: 999px; background: var(--dim); opacity: .5; cursor: pointer; transition: width .7s cubic-bezier(.3, .8, .2, 1), opacity .35s, background .35s; } .car-punto:hover { opacity: .9; } .car-punto.on { background: var(--text); opacity: 1; width: 22px; } @media (prefers-reduced-motion: reduce) { .car-punto { transition: opacity .2s, background .2s; } } /* ============================================================ Le notizie ============================================================ */ /* La griglia di news.html: schede tutte della stessa misura, in ordine di data. Le colonne si contano da sole con `auto-fill`: 320 px è la misura sotto la quale una scheda non racconta più niente, e sopra quella soglia ne entrano quante ce ne stanno. Nessuna interruzione scritta a mano per il telefono — ce n'è una sola, per non lasciare una colonna sola larga quanto lo schermo su un tablet stretto. */ .griglia-news { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 26px; margin-top: 8px; } .scheda-news { position: relative; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; transition: border-color .22s ease, transform .22s ease; } .scheda-news:hover { border-color: var(--line); transform: translateY(-2px); } /* Tutta la scheda è cliccabile, ma il collegamento è uno solo e invisibile, steso sopra. L'alternativa — avvolgere la scheda in un — annega il titolo, la data e la categoria dentro un unico nome lunghissimo per chi naviga con uno screen reader; così invece il collegamento ha il suo `aria-label` e il resto resta testo. */ .scheda-news-tutta { position: absolute; inset: 0; z-index: 2; } .scheda-news figure, .scheda-news .copertina-scritta { margin: 0; } .scheda-news img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--bg); } /* Le notizie senza fotografia non restano mezze vuote e non ricevono un rettangolo grigio: al posto dell'immagine va la categoria scritta in grande e sbiadita. Non finge di essere una foto, e tiene le schede della stessa altezza — che è l'unica ragione per cui si mette un segnaposto. */ .copertina-scritta { aspect-ratio: 16 / 10; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.05), transparent 70%), var(--bg); border-bottom: 1px solid var(--hairline); } .copertina-scritta span { display: block; padding: 0 24px; font-size: 1.12rem; font-weight: 300; line-height: 1.32; letter-spacing: -.02em; color: var(--dim); text-align: center; /* tre righe al massimo: oltre, la copertina diventa un muro di testo */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .scheda-news-corpo { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; } .scheda-news-meta { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--dim); margin-bottom: 12px; } .scheda-news-meta .tag { color: var(--accento); border: 1px solid rgba(107,147,255,.36); border-radius: 999px; padding: 3px 10px; font-size: .72rem; letter-spacing: .02em; } .scheda-news h3 { font-size: 1.14rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.28; margin-bottom: 10px; color: var(--text); } .scheda-news p { font-size: .94rem; color: var(--muted); line-height: 1.5; letter-spacing: -.008em; /* tre righe e poi taglia: le schede restano allineate anche quando un sommario è lungo il doppio degli altri */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .scheda-news-piede { margin-top: auto; padding-top: 16px; font-size: .78rem; color: var(--dim); } /* ------------------- la striscia sotto anni e persone -------------------- */ /* Le stesse schede della griglia, messe in fila e scorrevoli di lato. In fondo alla pagina di un'edizione o di una persona le notizie sono una coda, non il contenuto principale: impilate verticalmente allungherebbero la pagina per qualcosa che quasi sempre è una notizia o due. Lo scorrimento si aggancia (`scroll-snap`) così una scheda non resta mai tagliata a metà, e il margine negativo lascia che la striscia esca fino al bordo dello schermo sul telefono, dove tenerla dentro al `wrap` vorrebbe dire mostrare mezza scheda e basta. */ .sezione-news { margin-top: 64px; } .sezione-news .sec { margin-bottom: 22px; } .striscia-news { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 340px); gap: 22px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 12px; margin-inline: calc(var(--fuga, 0px) * -1); padding-inline: var(--fuga, 0px); scrollbar-width: thin; scrollbar-color: var(--hairline-2) transparent; } .striscia-news > * { scroll-snap-align: start; } /* Una notizia sola non è una striscia: resta una scheda di misura normale, senza barra di scorrimento e senza il vuoto a destra. */ .striscia-news.sola { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 420px); overflow: visible; } /* La barra di scorrimento su WebKit, sottile e solo quando serve */ .striscia-news::-webkit-scrollbar { height: 8px; } .striscia-news::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 99px; } .striscia-news::-webkit-scrollbar-track { background: transparent; } /* --------------------------------- l'articolo --------------------------- */ .articolo { max-width: 760px; } .articolo-testa { margin: 26px 0 36px; } .articolo-titolo { font-size: clamp(2rem, 4.6vw, 3.1rem); letter-spacing: -.038em; line-height: 1.08; margin: 14px 0 0; } .articolo-occhiello { margin-top: 20px; max-width: 58ch; } .articolo-firma { margin-top: 20px; font-size: .84rem; color: var(--dim); } .articolo-corpo h2.sec { margin: 44px 0 18px; } .articolo-corpo h3 { font-size: 1.2rem; font-weight: 500; letter-spacing: -.025em; margin: 32px 0 12px; } .articolo-corpo ul { margin: 0 0 20px 20px; max-width: 62ch; } .articolo-corpo li { color: var(--muted); font-size: 1.02rem; margin-bottom: 8px; letter-spacing: -.01em; } .articolo-corpo blockquote { margin: 28px 0; padding-left: 22px; border-left: 2px solid var(--line); color: var(--text); font-size: 1.1rem; font-weight: 300; letter-spacing: -.018em; max-width: 58ch; } .foto-news.grande { margin: 0 0 36px; } .foto-news.grande img { width: 100%; border-radius: 14px; } .foto-news figcaption { margin-top: 10px; font-size: .8rem; color: var(--dim); } .foto-news figcaption a { color: var(--dim); } .altre-news { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--hairline); } .altre-news .sec { margin-bottom: 24px; } /* --------------------------------- Instagram ---------------------------- */ /* Il riquadro di Instagram arriva con misure sue e con lo sfondo bianco: non si può ridisegnare da fuori — è dentro un iframe di Meta — quindi ci si limita a centrarlo e a dargli un tetto di larghezza, perché a piena pagina sarebbe una lastra bianca alta il doppio del testo. */ /* Del riquadro di Instagram resta solo la fotografia. Il riquadro ufficiale è fatto di tre pezzi: una riga in alta con il nome di chi ha pubblicato (54 px), la fotografia, e in fondo i cuoricini, i «mi piace», il campo «aggiungi un commento» e il logo (154 px). Qui si tengono solo i pixel di mezzo. Come: `clip-path` ritaglia testa e piede, e i margini negativi della stessa misura richiudono lo spazio che il ritaglio lascerebbe vuoto. La figura è `display:grid` perché altrimenti il margine negativo di sopra si fonderebbe con quello della figura (margin collapsing) e invece di accorciarla la sposterebbe in su, lasciando il buco dov'era. Due cose misurate sui post veri, che vale la pena sapere prima di toccare i numeri: · il piede non è sempre alto uguale. Vale 154 px quando il post mostra il numero dei «mi piace» e 130 quando non lo mostra, e da fuori non c'è modo di sapere quale dei due sia: l'iframe è di un altro sito e comunica solo la propria altezza. Si taglia 154 sempre, quindi nel secondo caso se ne vanno anche gli ultimi 24 px della fotografia, il 3-4% dell'altezza. È il compromesso scelto: meglio perdere una striscia di immagine che lasciare in pagina un pezzo di barra. · le misure valgono per il riquadro di oggi. Se Instagram rifà il suo embed, i due numeri vanno rimisurati, e il sintomo sarà una striscia chiara sopra o sotto la foto. Detto chiaro: questo ritaglio toglie dalla pagina il nome di chi ha pubblicato la fotografia. L'attribuzione resta nel post incorporato, che è lì e si apre, ma non si vede più. Scelta consapevole, non una svista. */ .ig { display: grid; max-width: 540px; /* centrata nella colonna dell'articolo, che è larga 760: appoggiata a sinistra lasciava 220 px di vuoto da una parte sola, e si vedeva */ margin: 0 auto 36px; } /* Il velo che blocca il carosello. Quando il post ha più fotografie, Instagram ci mette le frecce e i pallini per scorrerle, dentro al suo riquadro, dove non possiamo arrivare: è un altro sito dentro una finestrella, e il CSS nostro lì non entra. Questo velo trasparente si stende sopra e si prende i clic e i trascinamenti al posto suo, così la fotografia resta quella scelta e non cambia sotto le mani di chi legge. Il collegamento al post c'è, sotto, in chiaro: il velo toglie la manovra, non la via d'uscita. */ .ig::after { content: ''; /* nella prima cella della griglia, cioè sopra la fotografia e basta: il credito sta nella riga sotto e resta cliccabile */ grid-area: 1 / 1; z-index: 2; } .ig .instagram-media { margin: 0 auto !important; max-width: 540px !important; min-width: 0 !important; } .ig figcaption { margin-top: 10px; font-size: .8rem; color: var(--dim); } .ig figcaption a { color: var(--dim); } .ig iframe.instagram-media { /* il raggio va dentro al ritaglio: `overflow` sulla figura taglierebbe anche la riga del credito, che sta fuori dall'immagine */ clip-path: inset(54px 0 154px 0 round 14px); margin: -54px auto -154px !important; border: 0 !important; box-shadow: none !important; background: transparent !important; } .ig-ripiego { font-size: .94rem; } /* La versione che non carica niente finché non si preme il pulsante. Si vede solo con INCORPORA_SUBITO a false in assets/js/notizie.js. */ .ig-chiusa .ig-avviso { background: var(--bg-2); border: 1px solid var(--hairline); border-radius: 14px; padding: 28px 26px; max-width: 540px; } .ig-avviso p { color: var(--muted); font-size: .98rem; margin-bottom: 8px; } .ig-avviso .ig-nota { color: var(--dim); font-size: .84rem; margin-bottom: 18px; } .ig-avviso .chip { margin-right: 14px; } /* ============================================================ Gli schermi stretti ============================================================ STANNO IN FONDO AL FILE, E NON È UN VEZZO DI ORDINE. Un `@media` non aggiunge specificità: `.car-lastra` dentro un media e `.car-lastra` fuori valgono uguale, e a parità vince quello scritto dopo. Finché i blocchi mobile stavano a metà foglio, ogni regola desktop scritta più sotto li cancellava in silenzio — e succedeva davvero: sei regole non facevano niente, fra cui quella che sul telefono manda il carosello della home a una colonna sola. Il risultato era la fotografia schiacciata in un quarto di schermo con il titolo a fianco, una parola per riga. Da qui in fondo non c'è più niente che possa scavalcarle. Le regole nuove per il telefono vanno aggiunte qui dentro, non sparse per il file. L'ordine è dal largo allo stretto, così i vincoli più stretti si sovrappongono a quelli più larghi e non il contrario. ============================================================ */ @media (max-width: 780px) { body { padding-top: 108px; } .glassbar { left: 14px; right: 14px; transform: none; padding: 7px; gap: 8px; justify-content: center; } /* LA BARRA SU SCHERMO STRETTO Prima le cinque voci stavano tutte in riga e il logotipo spariva. A 375 px non ci stavano: «Statistiche» usciva dal bordo destro e la lente della ricerca finiva fuori schermo, cioè l'archivio diventava irraggiungibile dal telefono. Adesso in barra ci sono solo il logotipo e la lente, e le voci stanno in una tendina. Il logotipo torna a vedersi, ed è giusto così: su una pagina interna era l'unica cosa che diceva su che sito sei. */ .glassbar { justify-content: space-between; padding: 7px 7px 7px 14px; } .gb-logo { display: flex; } .gb-nav { display: none; } /* `display: grid` e non `flex`: il centraggio della lente lo fa `place-items: center` nella regola di base, e `place-items` in un contenitore flex centra solo in verticale, perché `justify-items` lì non ha effetto. Scritto `flex` la lente stava 9,5 px a sinistra. */ .gb-cerca { width: 34px; height: 34px; margin-left: 0; flex: 0 0 auto; } /* I bersagli del dito. Il logotipo è alto 19 px e il dito non lo sbaglia perché è largo 150, ma il collegamento vero deve coprire tutta l'altezza della barra: si allarga con il padding, senza toccare l'immagine. Stessa cosa per le voci del piede, che a 28 px stavano sotto la soglia. */ .gb-logo .marca { padding: 8px 0; } .foot a { padding: 10px 0; } .foot-bottom a { padding: 8px 0; } /* IL PIEDE, IN COLONNA E AL CENTRO Su schermo largo il piede è una riga di colonne allineate a sinistra, e funziona perché le colonne stanno affiancate. Stretto, quelle colonne andavano a capo una sotto l'altra ma restavano allineate a sinistra e di larghezza diversa, con il bordo destro frastagliato: sembrava una pagina impaginata male più che una chiusura. Centrato torna a essere un blocco solo. Le voci diventano righe piene larghe quanto lo schermo, quindi il bersaglio del dito cresce senza che serva altro. */ .foot { text-align: center; } .foot-in { flex-direction: column; align-items: center; gap: 34px; } .foot-in > div { width: 100%; } .foot-marca { max-width: none; } .foot-marca p { margin-inline: auto; max-width: 30ch; } .foot .marca { margin-inline: auto; } .foot h4 { margin-bottom: 4px; } /* Due colonne per gruppo, non una. Impilati uno sotto l'altro i diciannove collegamenti facevano un piede alto 1.220 px, una volta e mezzo lo schermo: si scorreva a lungo per uscire dalla pagina. A due colonne sono 846, e l'allineamento al centro resta perché l'intestazione del gruppo sta a cavallo delle due. */ .foot-in > div:not(.foot-marca) { display: grid; grid-template-columns: 1fr 1fr; /* il vuoto in mezzo: senza, «Direttori d'orchestra» e «Case discografiche» si sfiorano e sembrano una voce sola */ column-gap: 14px; } .foot-in > div:not(.foot-marca) h4 { grid-column: 1 / -1; } .foot-bottom { flex-direction: column; align-items: center; gap: 12px; margin-top: 38px; } .foot-bottom .firma { max-width: 32ch; } .gb-tendina { display: flex; align-items: center; justify-content: center; /* 34 px di bersaglio: sotto i 32 il dito sbaglia, ed è la misura che ha anche la lente, così i due comandi della barra sono pari */ width: 26px; height: 34px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted); } .gb-tendina .caret { font-size: 11px; transition: transform .22s ease; } .glassbar.aperta .gb-tendina { color: var(--text); } .glassbar.aperta .gb-tendina .caret { transform: rotate(180deg); } /* Il pannello scende da sotto la barra e ne ripete la materia: stesso vetro, stesso bordo, stesso raggio. Non è una tendina di sistema appiccicata sopra, è la barra che si allunga. */ .gb-pannello { display: grid; position: absolute; top: calc(100% + 8px); left: 0; right: 0; padding: 10px; border-radius: 22px; /* Opaco, non vetro come la barra. La barra è una striscia sottile e sotto ci passa il contenuto; il pannello copre mezzo schermo, e basta pochissimo perché il logotipo della pagina si veda in trasparenza fra una voce e l'altra: su fondo scuro l'1,5% di bianco è già uno spettro visibile. Un menu si legge o non serve, e opaco non serve nemmeno la sfocatura, che costa. */ background: #0a1029; border: 1px solid var(--hairline-2); box-shadow: 0 18px 50px rgba(0,0,0,.6); /* più alto dello schermo non può essere: con l'Archivio aperto le voci sono undici, e su un telefono basso vanno scorse */ max-height: calc(100vh - 120px); overflow-y: auto; animation: scende-pannello .2s ease-out both; } .gb-pannello[hidden] { display: none; } @keyframes scende-pannello { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } } .gb-pannello a { display: block; padding: 11px 14px; border-radius: 12px; font-size: 15px; color: var(--muted); letter-spacing: -.01em; } .gb-pannello a.active { color: var(--text); background: var(--accento-velo); } .gb-pannello a:active { background: var(--glass); } .gb-gruppo { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--hairline); } .gb-gruppo h4 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--dim); padding: 0 14px 6px; font-weight: 500; } .ric-overlay { padding: 0; } .ric-box { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; border: none; } .ric-sotto { display: none; } .numeri { grid-template-columns: repeat(2, 1fr); } .conto { flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 22px; } .car-lastra { grid-template-columns: minmax(0, 1fr); min-height: 0; } .car-foto { border-right: none; border-bottom: 1px solid var(--hairline); aspect-ratio: 16/9; } .car-corpo { padding: 26px 22px; } .conto-quadranti { gap: 18px; } .conto-q { min-width: 52px; } .numero { padding: 20px 16px; } .grad li { grid-template-columns: 24px 1fr; } .grad .pos { padding-right: 8px; } .grad .voce { padding: 12px 12px; gap: 10px; } .row.news .row-main { grid-template-columns: 1fr auto; } .row.news .meta { grid-column: 1 / -1; margin-bottom: -12px; } .row.ed .row-main { grid-template-columns: 68px 1fr auto; } .row.ed .hosts { display: none; } .row.ed .year { font-size: 1.28rem; } .chapter { grid-template-columns: 1fr; gap: 8px; padding: 32px 0; } .grid-2 { grid-template-columns: 1fr; gap: 28px; } .rk { grid-template-columns: 34px 1fr; gap: 12px; } .rk .aside { grid-column: 2; text-align: left; margin-top: 4px; } .part { grid-template-columns: 52px 1fr; } .testata-serata { padding: 18px 20px; } .ascolto { grid-template-columns: 1fr auto; gap: 8px 14px; } .ascolto .a-bar { grid-column: 1 / -1; order: 3; } .part .pl { grid-column: 2; text-align: left; } .gb-drop { left: auto; right: 0; transform: translateY(-6px); } .gb-item:hover .gb-drop, .gb-item:focus-within .gb-drop, .gb-item.open .gb-drop { transform: translateY(0); } .figures { gap: 34px; } .band { padding: 66px 0; } .hero { padding: 20px 0 70px; } .toolbar { top: 84px; border-radius: 22px; } .glass-panel { padding: 26px 22px; border-radius: 18px; } .fact { grid-template-columns: 1fr; gap: 3px; } } @media (max-width: 720px) { .striscia-news { --fuga: 18px; } .striscia-news { grid-auto-columns: minmax(256px, 82%); } } @media (max-width: 640px) { .ritratto { width: 128px; height: 128px; } .mini { width: 38px; height: 38px; } }