/* ============================================================================ IL CARATTERE STA IN CASA (2/09/2026) ---------------------------------------------------------------------------- Prima Cormorant Garamond arrivava da fonts.googleapis.com: ogni visita mandava l'INDIRIZZO IP del visitatore a Google, senza consenso. E' il caso deciso a Monaco nel 2022 (100 euro di danno riconosciuti a un visitatore), da cui e' nata una stagione di lettere di diffida in Germania e Austria. ⛔ Ospitandolo qui non esce piu' niente: nessuna richiesta a terzi, nessun IP, niente da far accettare in un banner. ⚙️ I quattro file sono quelli che Google stesso serve — font VARIABILE, quindi lo stesso file copre i pesi 300 e 400 — nei soli sottoinsiemi latino e latino esteso. Cirillico e vietnamita esclusi: nel sito non ce n'e' un carattere. ⚠️ Le regole qui sotto sono la COPIA di quelle di Google, cambiati solo gli indirizzi: stesso comportamento di prima, compreso lo unicode-range che fa scaricare solo il sottoinsieme che serve. ============================================================================ */ /* latin-ext */ @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url('/fonts/cormorant-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url('/fonts/cormorant-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/cormorant-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/cormorant-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/cormorant-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/cormorant-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/cormorant-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/cormorant-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ EXTENDED PLACE — PROTOTYPE CSS Visual direction v2: Cormorant Garamond + system UI ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ══════════════════════════════════════════════════════════════════════════════ ⛔ QUANDO VERIFICHI UNA DISTANZA, MISURALA FRA LE LETTERE — NON FRA LE SCATOLE. Un margine parte dal bordo della scatola, e la scatola di un testo è alta quanto la riga (line-height), non quanto le lettere: il carattere si porta dentro dello spazio proprio, che si somma al margine. Un'immagine no. Esempi veri: `margin-top: 32px` fra descrizione e liner notes → 42px visti. 30px fra le sezioni su mobile → 40px visti. 🛠 Strumento: incolla `scripts/misura-distanze.js` nella console e usa distanze('.a', '.b') — stampa scatole e LETTERE una accanto all'altra. ══════════════════════════════════════════════════════════════════════════════ */ :root { --news-pad: 28px; /* respiro di una notizia attorno al suo filetto */ --bg: #ffffff; --bg-subtle: #f5f5f5; --text-1: #0a0a0a; --text-2: #6a6a6a; --text-3: #aaaaaa; --border: #e2e2e2; /* ===== FILETTO ATTORNO ALLE COPERTINE (30/08, prova) ===== ⏪ PER TOGLIERLO: mettere `none` qui sotto. Una riga, nient'altro da toccare. Perche' esiste: il bordo esterno delle copertine va da 238 a 255 (misurato su tutte e 69), quindi NESSUN colore di fondo funziona per tutte — 4 spariscono sia sul bianco della pagina sia sul grigio del lightbox (il-postino 255, dialoghi 249, loula 249, la-vie-en-blanc 245, che e' esattamente il fondo #f5f5f5). Non manca il fondo giusto: manca il bordo della copertina. ⚙️ box-shadow e non border: un bordo vero aggiunge 2px alla scatola e sposterebbe griglie e distanze misurate per giorni. L'ombra disegna la stessa linea senza occupare spazio, quindi nessun allineamento si muove. */ --cover-edge: 0 0 0 0.5px var(--border); /* 0.5px e non 1: su uno schermo retina mezzo pixel CSS e' un pixel vero dello schermo, cioe' il filo piu' sottile che esista. Alessandro, 30/08: «voglio vedere la sua funzione ma non voglio vedere lui». A 1px si vedeva lui. ⚠️ Il colore NON puo' schiarirsi oltre #f5f5f5: sotto quel valore sparirebbe proprio sul fondo del lightbox, che e' il posto per cui il filetto e' nato. Per smorzarlo ancora si agisce sullo spessore, non sul colore. */ --font-serif: 'Cormorant Garamond', Georgia, serif; --font-ui: -apple-system, 'Helvetica Neue', Arial, sans-serif; /* ===== LA REGOLA DEI FILETTI (Alessandro, 02/08) ===== 1. Filetto che separa SEZIONI DIVERSE → distanze DIVERSE sopra e sotto (sopra meno, sotto più: la linea chiude ciò che precede e apre ciò che segue). Sono: .page-head, .filters, .disc-section, .home-section-header, .collana-header, .about-people-heading, .news-related. 2. Filetto che separa ELEMENTI GERARCHICAMENTE UGUALI → distanze UGUALI (una news e un'altra news, un partner e un altro partner: sopra e sotto c'è la stessa cosa, quindi la linea non deve avere direzione). Sono: .news-item e .partner-item, con `padding: Npx 0` simmetrico. ⚠️ Perché la differenza del caso 1 dev'essere NETTA e non di pochi pixel: il testo sopra la linea si porta dietro l'interlinea, quindi a parità di valore lo spazio superiore appare già più grande di quello che dice il numero. */ --rule-above: 15px; --rule-below: 40px; /* larghezza della copertina in home: la usano la cover E la linea della barra, che deve cominciare esattamente dove la copertina finisce */ --hero-w: min(50vw, 580px); --nav-h: 64px; --max-w: 1100px; --gutter: 48px; --ep: #1a1a1a; --ep-events: #1a2535; --ep-horizons: #162516; --ep-single: #25161f; --ep-echoes: #25201a; } /* ---- LE DUE SOGLIE DEL RESPONSIVE ---- 900px = dove il contenuto si rompe sul lato largo (le 7 voci della nav non stanno più in fila, le pagine di dettaglio a due colonne si strozzano) 600px = telefono vero: gutter stretto, colonna singola, densità diversa Sono soglie di CONTENUTO, non modelli di dispositivo. Prima erano quattro (800/700/640/600) nate una alla volta: con quattro soglie diventa impossibile prevedere cosa succede a una certa larghezza. Non aggiungerne altre. ⚠️ Le sole cose che stanno QUI sono le variabili: una custom property si risolve dove viene usata, quindi funziona anche se ridefinita in cima. Tutte le altre sovrascritture mobili stanno IN FONDO AL FILE — a parità di specificità vince l'ultima regola scritta, e qui verrebbero annullate dalle definizioni desktop che seguono. */ html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-serif); color: var(--text-1); background: var(--bg); line-height: 1.6; } a { color: inherit; text-decoration: none; } /* ---- NAV ---- */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); display: grid; grid-template-columns: var(--hero-w) 1fr; column-gap: 56px; align-items: center; background: var(--bg); border-bottom: 1px solid var(--border); } .nav-logo { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: var(--text-1); padding-left: var(--gutter); } /* ⚙️ 3/09/2026 — via il `padding-right: var(--gutter)` che stava qui. Era la guardia perche' le voci, ANDANDO A CAPO (c'e' flex-wrap), non toccassero il bordo della finestra. Da oggi il panino scatta prima che vadano a capo, quindi proteggeva un caso che non accade piu' — e intanto rubava 48px di larghezza utile, alzando la soglia del panino di altrettanto. ⚠️ `flex-wrap` resta: e' l'ultima rete se un giorno i conti sbagliano. */ .nav-links { display: flex; gap: 24px; list-style: none; flex-wrap: wrap; } .nav-links a { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-2); transition: color .15s; } .nav-links a.active { color: var(--text-1); text-decoration: none; } @media (hover: hover) { .nav-links a:hover { color: var(--text-1); text-decoration: none; } } /* ---- MENU MOBILE ---- Sopra i 900px il bottone non esiste e la barra resta quella di sempre. La soglia è dove il contenuto si rompe, non un modello di telefono: il logo (~175px + gutter) e le sette voci in fila smettono di starci intorno agli 800px. L'area del bottone è 44px: sotto quella misura un dito non centra il bersaglio. */ /* In home la copertina tocca il bordo inferiore della barra: la linea non deve attraversarla, ma cominciare dove la copertina finisce. Non basta spostare la copertina — la barra è `fixed` con z-index 100, quindi disegna sempre per ultima e la sua linea resterebbe sopra l'immagine qualunque cosa. La linea diventa quindi un segmento che parte da --hero-w. Su mobile --hero-w è 100% e il segmento ha larghezza zero: la copertina piena fa da separatore da sola. */ nav.nav--home { border-bottom-color: transparent; /* il fondo bianco non deve dipingere l'area del bordo, altrimenti coprirebbe la copertina che sale a occuparla */ background-clip: padding-box; } nav.nav--home::after { content: ''; position: absolute; left: var(--hero-w); right: 0; /* -1px: `bottom: 0` cade sull'area INTERNA della barra, che esclude il bordo — il segmento finiva un pixel più in alto della linea di tutte le altre pagine */ bottom: -1px; height: 1px; background: var(--border); } .nav-toggle { display: none; } /* ---- MAIN ---- */ main { padding-top: var(--nav-h); min-height: 100vh; } /* ⚠️ In fondo 56px, non `--rule-above`: sopra il filetto del footer non c'è un titolo da legare alla linea ma la FINE DEL CONTENUTO, e a 15px la linea sembrava appartenere all'ultimo elemento. 56 è lo stacco che il sito usa fra due blocchi diversi. 🔑 Il principio: il filetto sta vicino a ciò a cui APPARTIENE — al titolo sopra di sé nelle testate, al footer sotto di sé qui. */ .page { max-width: var(--max-w); margin: 0 auto; padding: 72px var(--gutter) 56px; } /* ---- HEADINGS ---- */ h1 { font-family: var(--font-serif); font-size: 40px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 8px; text-wrap: balance; } h2 { font-family: var(--font-serif); font-size: 26px; font-weight: 300; margin-bottom: 20px; margin-top: 40px; } h3 { font-family: var(--font-ui); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 20px; } /* Titoli di sezione della pagina Video (Trailers / Singles / Extended Place Stories). Restano serif, appena più contenuti dell'h2, con un filetto che prosegue fino al bordo: a separare le sezioni è la linea, non la dimensione del carattere. */ .section-label { display: flex; align-items: baseline; gap: 16px; font-size: 22px; } .section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ---- META TAGS ---- */ .tag { display: inline-block; font-family: var(--font-ui); font-size: 8.5px; letter-spacing: 0.09em; text-transform: uppercase; border: 1px solid var(--border); padding: 4px 10px; color: var(--text-2); cursor: pointer; transition: border-color .15s, color .15s; } @media (hover: hover) { .tag:hover { border-color: var(--text-1); color: var(--text-1); text-decoration: none; } } .tag.tag-collana { background: var(--bg-subtle); } /* ---- GRID ---- */ .grid { display: grid; gap: 28px; } .grid-4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } /* ---- SINGLES STRIP ---- */ .singles-strip { display: flex; flex-wrap: wrap; gap: 16px; } .single-item { display: flex; flex-direction: column; gap: 0; width: 88px; } .single-cover-sm { cursor: pointer; } @media (hover: hover) { .single-cover-sm:hover { opacity: .85; } } .single-cover-sm { width: 88px; height: 88px; position: relative; overflow: hidden; transition: opacity .2s; } .single-cover-sm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .single-item-title { font-family: var(--font-serif); font-size: 13px; font-weight: 400; color: var(--text-1); line-height: 1.3; cursor: pointer; } @media (hover: hover) { .single-item:hover .single-item-title { text-decoration: underline; } } .single-item-date { font-family: var(--font-ui); font-size: 10px; color: var(--text-3); } /* Il filetto NON e' su tutte le copertine (30/08: «lo vedo e lo trovo orribile»): la classe .bordo-chiaro la mette app.js solo alle copertine il cui bordo si confonde col fondo, e l'elenco e' MISURATO da scripts/bordi-chiari.py, non scritto a mano. ⏪ Per toglierlo del tutto: --cover-edge: none, in cima. */ .bordo-chiaro { box-shadow: var(--cover-edge); } /* ---- DISC CARD ---- */ .disc-card-cover { cursor: pointer; } @media (hover: hover) { .disc-card-cover:hover .disc-cover { opacity: .88; } } .disc-cover { width: 100%; aspect-ratio: 1; background: var(--text-1); transition: opacity .2s; margin-bottom: 12px; position: relative; overflow: hidden; } .disc-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .disc-cover-ep { background: var(--ep); } .disc-cover-ep-events { background: var(--ep-events); } .disc-cover-ep-horizons { background: var(--ep-horizons); } .disc-cover-ep-single { background: var(--ep-single); } .disc-cover-ep-promo-single { background: var(--ep-single); } .disc-cover-ep-echoes { background: var(--ep-echoes); } .disc-card-title { font-family: var(--font-serif); font-size: 15px; font-weight: 400; line-height: 1.3; margin-bottom: 4px; color: var(--text-1); cursor: pointer; } @media (hover: hover) { .disc-card-title:hover { text-decoration: underline; } } .disc-card-artist { font-family: var(--font-ui); font-size: 12px; color: var(--text-2); } .disc-card-artist a { color: inherit; } @media (hover: hover) { .disc-card-artist a:hover { text-decoration: underline; } } .disc-card-upcoming { font-family: var(--font-ui); font-size: 11px; color: var(--text-3); letter-spacing: 0.04em; margin-top: 4px; text-transform: uppercase; } /* ---- ARTIST CARD ---- */ .artist-card { cursor: pointer; } @media (hover: hover) { .artist-card:hover .artist-photo { opacity: .85; } } .artist-photo { width: 100%; aspect-ratio: 1; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; transition: opacity .2s; font-family: var(--font-serif); font-size: 32px; font-weight: 300; color: var(--text-3); overflow: hidden; } .artist-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .artist-card-name { font-family: var(--font-serif); font-size: 15px; font-weight: 400; } /* ---- DISC PAGE ---- */ .disc-page-header { display: grid; grid-template-columns: 380px 1fr; gap: 72px; align-items: start; margin-bottom: var(--rule-above); } .disc-page-cover { width: 100%; aspect-ratio: 1; position: relative; overflow: hidden; background: var(--text-1); } .disc-page-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .disc-page-meta { padding-top: 4px; display: flex; flex-direction: column; gap: 32px; } .disc-page-tags { display: flex; gap: 7px; flex-wrap: wrap; } .disc-page-meta h1 { font-family: var(--font-serif); font-size: 40px; font-weight: 300; letter-spacing: 0; line-height: 1.15; margin-bottom: 0; } .disc-page-title-group { display: flex; flex-direction: column; gap: 10px; } .disc-page-interpreters { font-family: var(--font-ui); font-size: 14px; font-style: normal; color: var(--text-2); line-height: 1.4; } .disc-page-interpreters a { color: var(--text-2); } @media (hover: hover) { .disc-page-interpreters a:hover { color: var(--text-1); text-decoration: underline; } } .disc-page-composers { display: flex; flex-direction: column; gap: 10px; } .disc-page-composer-tags { display: flex; gap: 7px; flex-wrap: wrap; } .btn-listen { display: inline-block; font-family: var(--font-ui); font-size: 8.5px; letter-spacing: 0.09em; text-transform: uppercase; padding: 4px 10px; background: var(--text-1); color: var(--bg); text-align: center; transition: opacity .15s; } @media (hover: hover) { .btn-listen:hover { opacity: .75; text-decoration: none; } } .disc-page-listen { display: flex; gap: 8px; flex-wrap: wrap; } .disc-page-meta-block { margin-top: 16px; display: flex; flex-direction: column; gap: 4px; } .disc-meta-line { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-1); } .disc-meta-label { color: var(--text-3); } /* Le sezioni non sono più separate da una linea: si separano con lo spazio, e la linea passa SOTTO la testata (modello della home). Deciso il 24/08 guardando la pagina disco, dove le sezioni in fila sono sette. I 56px sono quelli che la home usa dal 01/08: non è un numero nuovo. */ .disc-section { margin-top: 56px; } /* L'indirizzo al posto del modulo (5/09/2026, vedi MODULO_CONTACT_ATTIVO in app.js). Stessa misura del testo dell'About: e' una frase, non un annuncio. */ .contact-address { font-family: var(--font-serif); font-size: 16px; line-height: 1.85; color: var(--text-2); max-width: 680px; margin-top: 24px; } /* Il link prende il colore del testo e si sottolinea al passaggio del mouse: e' la convenzione del sito per i link dentro un corpo di testo (.about-body, .privacy-body), non una regola nuova. Senza, l'indirizzo restava azzurro e sottolineato di suo, cioe' fuori dal disegno. */ .contact-address a { color: inherit; } @media (hover: hover) { .contact-address a:hover { text-decoration: underline; } } /* La riga di attesa nella discografia di un artista annunciato e non ancora uscito. ⚙️ Stesso corpo e stesso colore del testo del sito: e' un'informazione, non un annuncio — nessun riquadro e nessun colore di richiamo, perche' un blocco vistoso attirerebbe l'occhio proprio sulla cosa che manca. ⚠️ Le distanze NON sono sue: sopra le da' il `--rule-below` della testata, sotto i 56px della sezione seguente. Sono quelle di ogni altra sezione, e Alessandro le ha confermate viste in pagina il 4/09. */ .discografia-attesa { font-family: var(--font-serif); font-size: 16px; line-height: 1.85; color: var(--text-2); } .sezione-testata { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: var(--rule-above); border-bottom: 1px solid var(--border); margin-bottom: var(--rule-below); } .sezione-testata h3 { margin-bottom: 0; color: var(--text-1); } /* scuro: comanda la riga */ /* Programme */ .programme-block { margin-bottom: 24px; } .programme-composer { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; } @media (hover: hover) { .programme-composer a:hover { text-decoration: underline; } } .programme-note { font-family: var(--font-serif); font-size: 14px; font-style: italic; color: var(--text-2); margin-bottom: 10px; } /* Intestazione delle pagine luogo e collaboratore: testo a sinistra, logo o foto a destra */ .page-header-split { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: start; } /* Il logo occupa le sue dimensioni REALI entro un limite, non un riquadro fisso. Prima era un box 100×100 con l'immagine centrata come sfondo: un marchio largo e basso portava con sé due fasce vuote sopra e sotto, che sul desktop non si notano (sta a destra) ma su mobile, finendo sotto il titolo, lo facevano sembrare posizionato a caso. Con un il vuoto non esiste e la distanza dal testo è una distanza vera. */ .header-media--logo { display: inline-block; transition: opacity .15s; } .header-media--logo img { display: block; width: auto; height: auto; max-width: 140px; max-height: 64px; } @media (hover: hover) { a.header-media--logo:hover { opacity: .65; } } .contributor-role { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 18px; } /* 18px, MISURATI (1/09/2026): fra le lettere fanno 28px, che è il respiro della pagina — nome → bio e bio → pulsanti misurano 28px su ogni pagina artista senza riga di ruolo. Erano 40px, cioè 50px fra le lettere: quasi il doppio, e si vedeva. Nati quando sotto il ruolo non c'era quasi mai niente; con una bio sotto diventavano un buco. Il ruolo resta attaccato al nome (19px sopra): è un sottotitolo, appartiene a ciò che sta sopra. Quando non segue nulla — Tommaso Cancellieri non ha né bio né link — vale la riga qui sotto. */ .contributor-role:last-child { margin-bottom: 0; } .programme-footnote { font-family: var(--font-serif); font-size: 14px; font-style: italic; color: var(--text-2); margin-top: 18px; max-width: 680px; line-height: 1.6; } .programme-works { list-style: none; } .programme-works li { font-family: var(--font-serif); font-size: 15px; line-height: 1.5; padding: 5px 0 5px 16px; border-left: 1px solid var(--border); margin-bottom: 5px; /* Nessun `color`: eredita da body come la descrizione e i credits. Prima lo fissava a var(--text-1), stesso valore ma dichiarato a parte — cambiando il colore del testo di base il programma sarebbe rimasto indietro da solo. */ } .programme-total { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-top: 18px; } /* Descrizione del disco. Era uno stile inline dentro app.js, spostato qui il 02/08 per poterla ingrandire su mobile (l'inline vince su qualsiasi regola CSS). L'inline diceva `color: var(--gray-800)`, variabile che NON esiste: il colore cadeva sull'ereditato, cioè --text-1 (nero). ✅ Il nero è stato confermato da Alessandro il 02/08: resta così, non è più un caso ma una scelta. */ .disc-description { font-size: 15px; line-height: 1.8; max-width: 680px; } /* Liner notes — ⛔ NON sono una nota di servizio: sono un VALORE AGGIUNTO (Alessandro, 24/08: «quando ci sono vanno valorizzate»). Dicono che quell'edizione ha un libretto con note d'autore, cioè un pregio dell'oggetto. Sul desktop stanno in coda all'About — corpo pieno e colore del testo, non più 13px grigie — e si distinguono per il CORSIVO. Nessun filetto: qui il testo non viene mai troncato, quindi non c'è nulla da cui staccarle. */ /* ⚠️ 18px di margine = 28px fra le LETTERE, cioè una riga vuota (l'interlinea è 27). Con 32 se ne vedevano 42: i 6px di vuoto sotto le lettere della descrizione e i 4 sopra quelle delle liner notes si sommano al margine — vedi «la distanza si calcola sul risultato visibile». */ .disc-linernotes { font-size: 15px; font-style: italic; color: var(--text-1); margin-top: 18px; } /* Credits */ .credits-block { columns: 2; gap: 48px; } .credit-item { font-family: var(--font-serif); font-size: 14px; break-inside: avoid; margin-bottom: 20px; } .credit-item a { color: inherit; } @media (hover: hover) { .credit-item a:hover { text-decoration: underline; } } .credit-label { font-family: var(--font-ui); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; } /* Riga secondaria dentro una voce di credito (es. "Electric Version produced by…"): stesso font/dimensione/colore del valore principale, solo staccata di poco. */ .credit-note { margin-top: 2px; } /* ---- ARTIST PAGE ---- */ .artist-page-header { display: grid; grid-template-columns: 300px 1fr; gap: 72px; align-items: start; margin-bottom: var(--rule-above); } /* ⚠️ Il `gap: 72px` separava due COLONNE affiancate. A colonna singola diventa un buco verticale fra la foto e il nome (visibile su Tommaso Cancellieri). Passando a una colonna va sempre rivisto anche il gap, non solo il numero di colonne. */ .artist-page-photo { width: 100%; aspect-ratio: 1; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 56px; font-weight: 300; color: var(--text-3); overflow: hidden; } .artist-page-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .artist-bio { font-family: var(--font-serif); font-size: 16px; line-height: 1.85; color: var(--text-2); } .artist-links { display: flex; gap: 10px; flex-wrap: wrap; } .artist-social-tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: 8.5px; letter-spacing: 0.09em; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--border); color: var(--text-2); transition: border-color .15s, color .15s; } @media (hover: hover) { .artist-social-tag:hover { border-color: var(--text-1); color: var(--text-1); text-decoration: none; } } /* ---- VIDEO CARD ---- */ .video-card-thumb { cursor: pointer; } .video-card-title { cursor: pointer; } @media (hover: hover) { .video-card-title:hover { text-decoration: underline; } } .video-card-artist a { color: inherit; } @media (hover: hover) { .video-card-artist a:hover { text-decoration: underline; } } .video-thumb { width: 100%; aspect-ratio: 16/9; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; position: relative; } /* ⛔ 2/09/2026 — la locandina che sostituisce l'iframe finche' non si clicca. Usa gli stessi .video-thumb e .video-play delle schede: nessun componente nuovo. */ .video-poster { cursor: pointer; display: block; } .video-poster .video-thumb { margin-bottom: 0; } @media (hover: hover) { .video-poster:hover .video-play { background: rgba(10,10,10,.85); } } .video-poster:focus-visible { outline: 2px solid var(--text-1); outline-offset: 3px; } /* 2/09/2026: il titolo del disco sotto il video e' un link, ma non lo diceva niente - stesso nero del testo, niente sottolineatura, nessun hover. Ora si comporta come tutti gli altri link del sito: sottolineatura al passaggio, e solo dove un puntatore esiste. */ @media (hover: hover) { .video-from-release a:hover { text-decoration: underline; } } /* 2/09/2026 - L'ETICHETTA SULLA LOCANDINA. Il click-to-load senza etichetta nasconde il trasferimento invece di dichiararlo: il clic E' il consenso, e un consenso si da' sapendo a che cosa. In piu' il glifo del play e' identico a quello delle schede, dove il clic porta a una NOSTRA pagina: stesso pulsante, due destinazioni. L'etichetta separa i due. Registro: quello di .btn-listen («Listen on Qobuz»), gia' il modo in cui il sito dichiara che un comando porta fuori. Sta dentro .video-thumb, che e' gia' position:relative. */ .video-from-release { /* 800px come il contenitore del player: l'etichetta va al margine destro del VIDEO, non a quello della pagina. Senza questo la riga e' larga quanto il contenuto e l'etichetta se ne va lontanissima dal video a cui si riferisce. */ max-width: 800px; margin-top: 24px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } /* La riga esiste SEMPRE, anche sui 4 video senza disco collegato (le interviste): li' il lato sinistro e' vuoto e l'etichetta resta al suo posto a destra. Se la riga nascesse solo col disco, un quinto delle pagine video tornerebbe senza avviso. */ .video-badge { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; } .video-play { width: 44px; height: 44px; background: rgba(10,10,10,.7); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .video-play::after { content: ''; border-left: 14px solid white; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 3px; } /* 2/09/2026: da 14 a 15px. Era l'unico titolo di scheda rimasto a 14 mentre .disc-card-title e .artist-card-name stanno a 15, e il blocco mobile li tratta gia' tutti e tre come una famiglia sola (una regola, 15px). Misurato il perche' si notava: Cormorant ha una x da 0.386em, il sans di sistema da 0.508em, quindi a 14 contro 12 la riga degli interpreti aveva le minuscole PIU' ALTE del titolo (6,09px contro 5,40). A 15 lo scarto passa da -13% a -5%. */ .video-card-title { font-family: var(--font-serif); font-size: 15px; font-weight: 400; margin-bottom: 4px; } .video-card-artist { font-family: var(--font-ui); font-size: 12px; color: var(--text-2); } /* ---- «VIEW ALL» E LE TRE FASCE (impianto 2026-08-24) ---- Il comando sta nella testata della sezione, non in fondo: così il fondo della sezione non aggiunge spazio proprio e sparisce la compensazione che serviva a governare lo stacco verso la sezione seguente. Gli elementi oltre il massimo di mobile stanno in `.oltre-mobile`, quelli oltre anche il massimo di desktop in `.oltre-tutti`. `display: contents` fa sparire il contenitore dal layout: le card tornano celle della griglia. */ .oltre-mobile { display: contents; } .oltre-tutti { display: none; } .is-espansa .oltre-mobile, .is-espansa .oltre-tutti { display: contents; } /* nelle liste news non è una griglia: lì «contents» non serve, basta mostrarlo */ .news-list .oltre-tutti { display: none; } .is-espansa .news-list .oltre-tutti { display: block; } /* Identico al link della home: grigio, 0.08em, NON maiuscolo, peso normale. ⚠️ Nella prima stesura avevo copiato lo stile del TITOLO (0.14em, maiuscolo, 600): il comando pesava quanto il titolo che dovrebbe comandare la riga. Il minuscolo è voluto — a parità di corpo il link appare più piccolo, ed è così che si distinguono. */ .view-all { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.08em; color: var(--text-3); white-space: nowrap; } /* Feedback identico al gemello nella home (.home-section-header a): scurisce. ⚠️ Ma dentro `@media (hover: hover)`, cioè solo dove esiste un puntatore. Su TOUCH lo stato :hover resta appiccicato all'elemento dopo il tap, finché non si tocca altrove: il link restava scuro — del colore del titolo — e su telefono non c'era modo di toglierlo. Sul desktop il difetto non si presentava, perché lì l'hover è transitorio: basta spostare il mouse. */ @media (hover: hover) { .view-all:hover { color: var(--text-1); } } /* se serve al solo mobile, su desktop non si mostra */ .view-all--solo-mobile { display: none; } .show-more-btn { margin-top: 16px; background: none; border: none; padding: 0; font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.08em; color: var(--text-3); cursor: pointer; text-transform: uppercase; text-align: left; } @media (hover: hover) { .show-more-btn:hover { color: var(--text-1); } } /* ---- NEWS ---- */ .news-list { display: flex; flex-direction: column; } .news-item { padding: var(--news-pad) 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: 80px 110px 1fr; gap: 24px; cursor: pointer; align-items: start; } /* L'ultima news non ha nulla da separare sotto di sé, e segue il footer che ha già la sua linea in cima. Nelle liste con "View more" l'ultimo elemento visibile non è :last-child, quindi la riga sopra il pulsante resta — corretto. */ /* ⚠️ Il separatore sta SOPRA ogni notizia (24/08). Con `border-bottom` l'ultima notizia VISIBILE si teneva la sua linea, perché le notizie oltre la soglia stanno in `.oltre-tutti` e `:last-child` non le distingueva: due righe prima del footer. Sopra, l'ultima non ha mai nulla sotto di sé — il problema non esiste. Resta da azzerare il suo padding, che altrimenti allontana il filetto seguente. */ /* ⚠️ `:last-child` NON basta: quando ci sono notizie nascoste, l'ultimo figlio della lista è il contenitore `.oltre-tutti`, quindi nessuna notizia è :last-child. Serve distinguere i due casi con `:has()`. */ .news-list > .news-item:last-child { padding-bottom: 0; } .news-list:has(> .oltre-tutti) > .news-item:nth-last-child(2) { padding-bottom: 0; } /* a sezione aperta l'ultima visibile è dentro il gruppo, e la penultima riprende il suo */ .is-espansa .news-list:has(> .oltre-tutti) > .news-item:nth-last-child(2) { padding-bottom: var(--news-pad); } .is-espansa .news-list .oltre-tutti > .news-item:last-child { padding-bottom: 0; } .news-item-cover { width: 80px; aspect-ratio: 1; overflow: hidden; } .news-item-cover .disc-cover { width: 80px; aspect-ratio: 1; } .news-item-cover--empty { background: var(--border); } .news-item-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---- FYC (21/09/2026) ---- La riga di una voce e' quella della news, senza la colonna della data: immagine e testo, e a destra le foto delle persone nei crediti. Filetto fra voci uguali, quindi padding simmetrico (regola dei filetti, caso 2). La prima non ha filetto (lo da' gia' la testata), l'ultima non ha respiro sotto. ⚙️ Immagine a 160 (21/09: «piu' grande» — era 80 come le news). ⚙️ Testo e foto CENTRATI sull'altezza dell'immagine (21/09, prova chiesta da Alessandro): a 160 il testo ne occupa circa meta', e allineato in alto lasciava sotto un vuoto diverso da riga a riga. Sul telefono (96) resta in alto: vedi la regola mobile. ⚙️ Foto delle persone a 80 = meta' dell'immagine, e la misura delle miniature news (21/09: a 48 «troppo piccola»). Sul telefono 56. */ .fyc-list { display: flex; flex-direction: column; } .fyc-item { padding: var(--news-pad) 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: 160px 1fr auto; gap: 24px; align-items: center; } .fyc-item .news-item-cover, .fyc-item .news-item-cover .disc-cover { width: 160px; } .fyc-people { display: flex; gap: 8px; justify-content: flex-end; } /* A capo fra i crediti, non dentro (vedi fycItem), e SENZA il «·» in fondo alla riga. Il punto sta davanti a ogni gruppo, largo --fyc-sep. Il contenitore e' spostato a sinistra della stessa misura, e il riquadro esterno taglia cio' che sborda: cosi' il punto del PRIMO gruppo di ogni riga finisce fuori e sparisce, gli altri restano fra un gruppo e l'altro. Trucco solo CSS: nessun conto di dove il browser va a capo. */ .fyc-item .news-intro { overflow: hidden; --fyc-sep: 1.3em; } .fyc-credits { display: block; margin-left: calc(-1 * var(--fyc-sep)); } .fyc-credit { display: inline-block; } .fyc-credit::before { content: '·'; display: inline-block; width: var(--fyc-sep); text-align: center; font-style: normal; } .fyc-person { display: block; width: 80px; aspect-ratio: 1; overflow: hidden; } .fyc-person img { width: 100%; height: 100%; object-fit: cover; display: block; } .fyc-list > .fyc-item:first-child { border-top: none; padding-top: 0; } .fyc-list > .fyc-item:last-child { padding-bottom: 0; } .fyc-item .news-item-cover a { display: block; width: 100%; height: 100%; } .fyc-item .news-title a { color: inherit; } .fyc-item .contributor-role { margin-bottom: 6px; } /* Opt-out (21/09, Alessandro): in corsivo, e alla STESSA distanza dalla linea sopra e da quella del piede sotto. Sotto c'e' il padding-bottom di .page (56, e 42 sul telefono): il padding-top lo ricopia, anche nella regola mobile piu' giu'. ⚠️ Se cambia quello di .page, va cambiato anche qui. */ .fyc-optout { margin-top: var(--news-pad); padding-top: 56px; border-top: 1px solid var(--border); font-style: italic; } @media (hover: hover) { .news-item:hover .news-title { text-decoration: underline; } } .news-date { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); padding-top: 4px; } .news-title { font-family: var(--font-serif); font-size: 17px; font-weight: 400; margin-bottom: 6px; } .news-intro { font-family: var(--font-serif); font-size: 14px; font-style: italic; color: var(--text-2); line-height: 1.6; } .news-page h1 { margin-bottom: 8px; } .news-page-date { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-3); margin-bottom: 40px; display: block; } .news-page-body { font-family: var(--font-serif); font-size: 16px; line-height: 1.85; color: var(--text-2); max-width: 660px; margin-bottom: 40px; } .news-page-body p { margin: 0 0 1.2em; } .news-page-body p:last-child { margin-bottom: 0; } .news-page-body a { color: var(--text-1); border-bottom: 1px solid var(--border); } @media (hover: hover) { .news-page-body a:hover { border-bottom-color: var(--text-1); } } .news-related { margin-top: 56px; } /* Il blocco «Related» in fondo a una news: prima queste misure erano inline nel JS. Le schede artista sono ora quelle vere (artistCard), quindi con ritaglio e miniatura: qui si fissa solo la larghezza, che nel contesto stretto della news è minore. */ .news-related-grid { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 16px; } .news-related-artists { display: flex; gap: 16px; flex-wrap: wrap; } /* 22/09/2026 — al massimo 4 schede per riga, SOLO nelle news che lo chiedono (relatedPerRow: 4 in data.js; oggi la news FYC: 6 persone = 4 + 2 invece di 5 + 1). 4 x 160 + 3 x 16 = 688. */ .news-related-artists--4 { max-width: 688px; } .news-related-grid .disc-card, .news-related-artists .artist-card { width: 160px; } /* ⛔ 1/09/2026 — LA DIDASCALIA HA DUE MISURE, E SONO SOLO DUE: **15px nel contesto pieno** (griglie del catalogo, Related Recordings: schede ~280px) **14px nel contesto ridotto** (blocco Related delle news 160px, striscia Singles 88px). Prima erano quattro valori nati in momenti diversi: 15 e 15 nelle griglie, 14 nella striscia, 13 sul nome artista dentro le news — e nessuno sapeva più perché. ⚠️ Non scendere a 13: sotto il titolo della striscia c'è la data in lineare 13px, e Cormorant ha le lettere piccole rispetto al corpo — a 13 il titolo (8,1 di inchiostro) diventerebbe più piccolo della propria data (8,6). A 14 sta sopra: 8,8. */ .news-related-grid .disc-card-title, .news-related-artists .artist-card-name { font-size: 14px; } /* Testata di pagina chiusa da un filetto: Artists, News, Partners. Stessi valori del catalogo (20 sopra la linea, 28 sotto), così tutte le pagine indice staccano la testata dal contenuto allo stesso modo — con una riga, non con del vuoto, che è il modo in cui separa tutto il resto del sito. ⚠️ Video NON la usa: ha già i filetti nei titoli di sezione (Trailers, Singles, Stories) e due linee ravvicinate si annullerebbero a vicenda. */ .page-head { padding-bottom: var(--rule-above); border-bottom: 1px solid var(--border); margin-bottom: var(--rule-below); } /* ============================================================ IL CONTENUTO A CONTATTO CON UN FILETTO NON AGGIUNGE SPAZIO PROPRIO Senza queste righe le distanze dichiarate non sono quelle che si vedono: sotto un filetto da 40px una griglia dà 40, una lista di news 68 (28 di padding per riga) e i partner 60 (20 di padding). Sopra un filetto da 24, i credits ne danno 44, il programma e l'About 48. È il motivo per cui «sono tutti diversi». La distanza la decide il filetto, una volta sola. Vale su ogni schermo. ============================================================ */ /* niente margine proprio nemmeno DENTRO la testata: l'h1 ne porta 8 e su About, che non ha sottotitolo, facevano 33px sopra la linea invece di 25 */ .page-head > *:last-child { margin-bottom: 0; } /* primo elemento sotto la linea */ /* `>` e non uno spazio: solo la PRIMA notizia della lista, quella a contatto con il filetto della testata. Con il discendente colpiva anche la prima notizia del gruppo nascosto dietro «View more» — che sta in mezzo alla lista e il suo spazio ce l'ha: aprendo, il filetto finiva attaccato alla copertina. */ .news-list > .news-item:first-child { border-top: none; padding-top: 0; } /* Il contenuto a contatto con un filetto non aggiunge spazio proprio: senza questa, sotto ogni testata arrivavano 40 di margine + 20 di padding = 60px prima del nome. */ .partners-list .partner-item:first-child { padding-top: 0; } /* ⚠️ COMPENSAZIONE OTTICA, −6px — vale la regola «la distanza si calcola sul risultato VISIBILE» (24/08). `.partner-name` è Cormorant 26px, ma le sue lettere sono alte 19px: il carattere si porta dentro ~6px di vuoto sopra. Con i 40px dichiarati sotto il filetto le lettere cadevano a 46, mentre nelle altre pagine sotto il filetto c'è una COPERTINA, che comincia a 40 esatti. Questi 6px riportano il nome dove cade tutto il resto del sito. Se cambia il corpo o il carattere del nome, va rifatto il conto — col canvas, non con getBoundingClientRect. */ .sezione-testata + .partners-list .partner-item:first-child { margin-top: -6px; } /* ultimo elemento sopra la linea */ .disc-section > *:last-child, .about-body > *:last-child, .credits-block .credit-item:last-child, .programme-block:last-child { margin-bottom: 0; } /* I sette tasti delle collane, sopra i filtri. Lo stile era inline dentro app.js: spostato qui il 02/08 perché uno spazio scritto nel JS non si trova guardando il CSS — ed era proprio uno spazio da correggere. ⚠️ Nota sui conti: fra `h1` e questo blocco NON ci sono 8+16=24px ma 16, perché i margini verticali adiacenti COLLASSANO e vince il maggiore. I 32px sotto sono voluti: titolo e tasti si leggono legati (dove sono), i filtri staccati (cosa cerco). Pareggiarli a 16 appiattisce i tre livelli in una massa unica — provato il 02/08 e tornati indietro. */ .catalogue-modes { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0 32px; } /* ⛔ 27/09/2026 — FILTRI SUL TELEFONO (migliorie, voce 4). Sul computer questi pezzi NON esistono: niente tasto «Filter by», niente riga Series, niente valore scritto a destra; il contenitore dei comandi e' `display: contents`, cioe' per l'impaginazione non c'e'. Le regole vere sono nel blocco a 600px. */ .catalogo-filtra, .filter-group.solo-telefono, .filtro-valore { display: none; } .catalogo-comandi { display: contents; } /* ---- CATALOGUE FILTERS ---- */ /* PROVA 02/08 — il filetto. I filtri chiudono la testata con una riga sottile invece che con 44px di vuoto: titolo, tasti e filtri diventano un blocco compatto, sotto comincia la griglia. È la lingua che il sito parla già altrove — .collana-header, .section-label, .disc-section separano tutti con un filetto, non con lo spazio. Il catalogo era l'unica pagina a farlo col vuoto, ed è il motivo per cui quel vuoto sembrava sempre o troppo o troppo poco: stava facendo il lavoro di una linea. */ .filters { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; padding-bottom: var(--rule-above); border-bottom: 1px solid var(--border); margin-bottom: var(--rule-below); } .filter-group { display: flex; align-items: baseline; gap: 5px; } .filter-group label { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; } .filter-arrow { font-size: 10px; color: var(--text-3); } .filter-group select { font-family: var(--font-serif); font-size: 15px; font-weight: 300; border: none; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; color: var(--text-1); } .filter-group select.filtered { font-style: italic; } .filter-group select:focus { outline: none; } .btn-reset { font-family: var(--font-ui); font-size: 8.5px; letter-spacing: 0.09em; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--border); background: none; cursor: pointer; color: var(--text-2); transition: border-color .15s, color .15s; } @media (hover: hover) { .btn-reset:hover { border-color: var(--text-1); color: var(--text-1); } } /* ---- HOME ---- */ .home-hero { display: grid; grid-template-columns: auto 1fr; column-gap: 56px; } .home-hero-cover { margin-top: -1px; /* riempie l'area del bordo, resa trasparente in home */ width: var(--hero-w); aspect-ratio: 1; position: relative; overflow: hidden; background: var(--text-1); } .home-hero-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .home-hero-info { padding: 64px 56px 64px 0; display: flex; flex-direction: column; justify-content: center; } .home-tagline { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 20px; } .home-hero-title { font-size: 44px; margin-bottom: 10px; } .home-hero-artist { font-family: var(--font-ui); font-size: 14px; color: var(--text-2); margin-bottom: 28px; } .home-hero-artist a { color: var(--text-2); } @media (hover: hover) { .home-hero-artist a:hover { color: var(--text-1); text-decoration: underline; } } .home-hero-desc { font-family: var(--font-serif); font-size: 15px; color: var(--text-2); line-height: 1.85; margin-bottom: 36px; max-width: 400px; } .btn-primary { display: inline-block; font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; padding: 12px 28px; background: var(--text-1); color: var(--bg); transition: opacity .15s; align-self: flex-start; } @media (hover: hover) { .btn-primary:hover { opacity: .75; text-decoration: none; } } /* Lo spazio fra le sezioni si dichiara UNA VOLTA SOLA, in alto. Prima era `padding: 48px` sopra e sotto: fra due sezioni consecutive si sommava e ne faceva 96. Il 10/07 era stato ridotto da 72 a 48 per questo motivo, ma abbassare il numero non toglie la somma — infatti il vuoto è tornato. L'ultima sezione chiude con il suo padding: sotto ha solo il footer. */ .home-section { padding: 56px var(--gutter) 0; max-width: var(--max-w); margin: 0 auto; } .home-section:last-child { padding-bottom: 56px; } .home-section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--rule-below); border-bottom: 1px solid var(--border); padding-bottom: var(--rule-above); } .home-section-header h2 { margin: 0; font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--text-1); } .home-section-header a { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.08em; color: var(--text-3); } @media (hover: hover) { .home-section-header a:hover { color: var(--text-1); } } /* ---- COLLANA PAGE ---- */ .collana-header { margin-bottom: var(--rule-below); border-bottom: 1px solid var(--border); padding-bottom: var(--rule-above); } .collana-description { font-family: var(--font-serif); font-size: 16px; color: var(--text-2); max-width: 580px; line-height: 1.8; margin-top: 14px; } /* ---- ABOUT ---- */ .about-body { max-width: 680px; } .about-body p { font-family: var(--font-serif); font-size: 16px; line-height: 1.85; color: var(--text-2); margin-bottom: 24px; } .about-body a { color: inherit; } @media (hover: hover) { .about-body a:hover { text-decoration: underline; } } /* «The People» chiude il testo e apre l'elenco: separato da un filetto come tutte le altre sezioni del sito, invece che da 96px di vuoto. */ .about-people-heading { margin-top: 56px; } .about-people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 560px; } .about-person { display: block; } @media (hover: hover) { .about-person:hover .artist-photo { opacity: .85; } } @media (hover: hover) { .about-person:hover .about-person-name { text-decoration: underline; } } .about-person-name { font-family: var(--font-serif); font-size: 16px; font-weight: 400; color: var(--text-1); margin-bottom: 4px; } .about-person-role { font-family: var(--font-ui); font-size: 9px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-3); line-height: 1.5; } /* ---- PARTNERS ---- */ /* Scala degli spazi: 28px titolo→contenuto < 40px fra righe < 64px fra gruppi */ /* I quattro gruppi sono sezioni a tutti gli effetti e dal 24/08 lo dicono: ognuno ha la sua testata col filetto sotto, e si separano con i 56px che il sito usa fra due sezioni. Prima erano `h3` nudi con 8px di stacco — le ultime intestazioni rimaste col vecchio modello. Sparisce anche il filetto che CHIUDEVA il gruppo: adesso è la testata seguente ad aprirlo, e quella linea era solo una compensazione. */ .partner-group { margin-top: 56px; margin-bottom: 0; } /* ⚠️ Partners è l'unica pagina dove una testata di PAGINA è seguita subito da una testata di SEZIONE: senza stacco i due filetti resterebbero a ~66px l'uno dall'altro. 56px è la stessa misura che separa due sezioni — nessun numero nuovo. */ .page-head + .partner-group { margin-top: 56px; } .partners-list { display: flex; flex-direction: column; } .partner-item { padding: 20px 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr 90px; gap: 40px; align-items: center; } /* nessun partner porta una linea sotto di sé a fine gruppo: sotto c'è lo stacco di 56px e la testata seguente, oppure il filetto del footer */ .partners-list .partner-item:last-child { border-bottom: none; padding-bottom: 0; } /* Il nome è il protagonista, come i titoli dei dischi; il logo resta un dettaglio */ .partner-name { font-family: var(--font-serif); font-size: 26px; font-weight: 300; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 8px; } .reg { font-size: .42em; vertical-align: super; letter-spacing: 0; } /* Riduzione minima per i testi già piccoli (footer): niente apice, a 9px sparirebbe */ .reg-small { font-size: .78em; vertical-align: super; } .partner-name a { color: inherit; } @media (hover: hover) { .partner-name a:hover { text-decoration: underline; } } .partner-desc { font-family: var(--font-serif); font-size: 15px; line-height: 1.7; color: var(--text-2); max-width: 560px; } .partner-logo { width: 90px; height: 48px; display: block; justify-self: end; background-size: contain; background-position: center; background-repeat: no-repeat; opacity: .8; transition: opacity .15s; } @media (hover: hover) { a.partner-logo:hover { opacity: 1; } } /* ---- CONTACT ---- */ /* ⛔ 2/09/2026 — il corpo dell'informativa. Colonna stretta come i testi lunghi del sito: una riga di 90 caratteri non si legge. h3 gia' esistenti (maiuscoletto), qui solo il ritmo. */ .privacy-body { max-width: 680px; margin-top: 40px; } .privacy-body h3 { margin-top: 32px; } .privacy-body p { font-family: var(--font-serif); font-size: 16px; line-height: 1.85; color: var(--text-2); margin-top: 12px; } /* 2/09/2026 - i link dell'informativa non si distinguevano dal testo: stesso colore, niente sottolineatura, nessun hover. Stessa regola di .about-body, che e' la convenzione del sito per i link dentro un corpo di testo. Presa la classe e non il singolo link: una regola per uno solo dei sei avrebbe reso incoerente proprio la pagina che si stava sistemando. */ @media (hover: hover) { .privacy-body a:hover { text-decoration: underline; } } /* Dove un puntatore NON esiste — telefono e tablet — l'hover non puo' segnalare niente, e i link dell'informativa resterebbero indistinguibili dal testo: dentro ci sono il Garante e l'informativa di Register, cioe' i due che una persona potrebbe voler aprire davvero. Filetto permanente, la forma che il sito usa gia' per i link marcati (.news-page-body). ⛔ Solo qui: sulle altre pagine resta la convenzione dell'hover. E' `hover: none` e non una soglia di larghezza, perche' quello che conta e' l'assenza del puntatore, non lo schermo. */ @media (hover: none) { .privacy-body a { border-bottom: 1px solid var(--border); } } .contact-form { max-width: 500px; display: flex; flex-direction: column; gap: 20px; margin-top: 40px; } /* Il campo esca dell'antispam: fuori dallo schermo, non «display:none» né type=hidden — i robot saltano quelli e compilano invece i campi di testo che trovano nel modulo. aria-hidden e tabindex -1 lo tengono fuori da lettori di schermo e tabulazione. */ .contact-esca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .form-group { display: flex; flex-direction: column; gap: 7px; } .form-group label { font-family: var(--font-ui); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); } .form-group input, .form-group textarea { font-family: var(--font-serif); font-size: 15px; padding: 10px 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text-1); resize: vertical; } .form-group input:focus, .form-group textarea:focus { outline: 1px solid var(--text-1); } .form-group textarea { min-height: 120px; } .btn-submit { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 28px; background: var(--text-1); color: var(--bg); border: none; cursor: pointer; align-self: flex-start; } /* 2/09/2026 - la casella del consenso alle notizie. Corpo 14px come la riga sulla privacy subito sotto: le due si leggono come una coppia, ed e' il corpo della prosa secondaria del modulo. align-items: flex-start perche' su schermo stretto il testo va a capo e la casella deve restare sulla PRIMA riga, non centrarsi sul blocco. */ /* 2/09/2026 - le due righe sono UNA COSA SOLA e vanno distanziate come tale. Il modulo ha due ritmi gia' suoi: 7px dentro un gruppo (.form-group, fra etichetta e campo) e 20px fra un gruppo e l'altro. Da sole erano figlie dirette del form, quindi stavano a 20 - la stessa distanza che separa due campi diversi, che e' l'incoerenza. Raccolte in un gruppo, dentro valgono i 7px del resto del modulo. */ .contact-consent-group { display: flex; flex-direction: column; gap: 7px; } .contact-consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-family: var(--font-serif); font-size: 14px; color: var(--text-2); } /* Il testo si allinea al CENTRO della casella, non alla sua base. Non con align-items:center, che centrerebbe la casella sull'INTERO blocco: se la riga va a capo la casella deve restare sulla prima riga, non scendere a meta' delle due. Aritmetica: testo 14px x 1.6 di interlinea = riga alta 22,4px, centro a 11,2. Casella 14px, centro a margin-top + 7. Quindi margin-top = 11,2 - 7 = 4,2px. ⚠️ La misura della casella e' imposta perche' il valore predefinito cambia da browser a browser: senza, il conto sopra vale solo qui. */ .contact-consent input { accent-color: var(--text-1); flex: none; width: 14px; height: 14px; margin-top: 4.2px; } .contact-email { font-family: var(--font-serif); font-size: 15px; color: var(--text-2); margin-top: 36px; } .contact-email a { color: var(--text-1); border-bottom: 1px solid var(--border); } /* ---- FOOTER ---- */ footer { /* La linea NON è un border del footer: lo sarebbe a tutta la larghezza del contenitore (1100px), mentre ogni altra linea del sito sta dentro il contenuto ed è rientrata del margine (1004px). Disegnata come pseudo-elemento, si allinea a tutte le altre — compresa quella sopra Believe, che è già così. */ position: relative; padding: var(--rule-below) var(--gutter) 48px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; color: var(--text-2); align-items: start; max-width: var(--max-w); margin: 0 auto; } footer h4 { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 16px; } footer ul { list-style: none; display: flex; flex-direction: column; gap: 8px; } footer a { font-family: var(--font-serif); font-size: 14px; color: var(--text-2); } @media (hover: hover) { footer a:hover { color: var(--text-1); } } /* Riga conclusiva a tutta larghezza: distributore a sinistra, copyright a destra */ footer::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--border); } .footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; /* niente margin-top: il grid del footer ha già gap 32px */ margin-top: 0; padding-top: 10px; border-top: 1px solid var(--border); } .footer-bottom a, .footer-copy { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } @media (hover: hover) { .footer-bottom a:hover { color: var(--text-1); } } /* ---- BREADCRUMB ---- */ .breadcrumb { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 36px; display: flex; gap: 8px; /* baseline, non center: quando il titolo della release va a capo, `center` centrava tutto il blocco rispetto a «Catalogue ›» e la prima riga risultava disallineata. Con baseline la prima riga cade sulla stessa riga di scrittura degli altri. Stesso principio già adottato il 31/07 su .section-label. */ align-items: baseline; } .breadcrumb a { color: var(--text-3); } @media (hover: hover) { .breadcrumb a:hover { color: var(--text-1); } } .breadcrumb span { color: var(--border); } /* ---- UTIL ---- */ .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-32 { margin-top: 32px; } .text-muted { color: var(--text-2); } /* 2/09/2026: da 13 a 14px. La riga sulla privacy nel modulo Contact era il testo piu' piccolo di un blocco in cui i campi e .contact-email stanno a 15px, ed e' una riga che va letta PRIMA di premere Send. Il 13px restava inoltre uno scalino quasi vuoto: sul desktop lo usava solo .single-item-title, mentre il 14 e' gia' affollato (credits, titoli delle schede video, occhiello news, link del footer). */ .text-small { font-size: 14px; } /* ---- NEWS IMAGES ---- */ .news-content-wrap { display: flex; gap: 48px; align-items: flex-start; } .news-page-body { flex: 1; } .news-images { width: 180px; flex-shrink: 0; } .news-thumb-wrap { margin-bottom: 16px; } .news-thumb { width: 100%; display: block; cursor: zoom-in; border: 1px solid var(--border); transition: opacity 0.15s; } @media (hover: hover) { .news-thumb:hover { opacity: 0.75; } } .news-thumb-caption { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.07em; color: var(--text-3); margin-top: 6px; line-height: 1.5; } /* ---- LIGHTBOX ---- */ #lightbox { display: none; position: fixed; inset: 0; /* 30/08 — DECISO (provato e confermato da Alessandro): grigio chiarissimo, --bg-subtle. Prima era rgba(0,0,0,0.88): non un colore scelto ma nero translucido sopra la pagina bianca, che si leggeva come grigio scuro e cambiava a seconda di cosa c'era dietro. Ora e' PIENO: un colore, uguale su ogni pagina. Il grigio invece del bianco tiene staccate le copertine quasi bianche (Il Postino, Dialoghi, LouLa) senza aggiungere un bordo attorno all'immagine. */ background: var(--bg-subtle); z-index: 1000; align-items: center; justify-content: center; cursor: zoom-out; } #lightbox[data-open] { display: flex; } .lightbox-inner { max-width: 90vw; max-height: 90vh; text-align: center; } #lightbox-img { max-width: 100%; max-height: 82vh; object-fit: contain; display: block; } #lightbox-caption { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.08em; /* era bianco al 55% sul fondo scuro: sul chiaro serve il grigio del testo secondario. Se risulta troppo presente, l'alternativa gia' in tavolozza e' --text-3 (#aaaaaa). */ color: var(--text-2); margin-top: 12px; text-transform: uppercase; } /* ============================================================ MOBILE — sovrascritture in fondo, dove vincono Stanno qui e non in cima di proposito: a parità di specificità vince l'ultima regola del file. Le due soglie sono 900 e 600 (vedi in testa). ============================================================ */ /* ============================================================ MOBILE — SCALA TIPOGRAFICA (02/08) Perché i numeri sono più alti di quanto sembri necessario: il sito compone in Cormorant Garamond, un Garamond, e i Garamond hanno l'altezza delle minuscole molto bassa. I nostri 15px rendono all'occhio come ~13,5px di un lineare. ECM su mobile usa 16px di Univers per quasi tutto (corpo, metadati, navigazione) e il suo testo più piccolo è 12,8px: per pareggiarlo servono ~17px di Cormorant. ⚠️ Le etichette maiuscolette erano a 8,5–9px: sul desktop sono segnaletica discreta, su un telefono sotto gli 11px diventano decorazione illeggibile. ============================================================ */ /* ============================================================ PAGINA DISCO — ORDINE PER IL TELEFONO (02/08) Non è un adattamento del desktop: è un altro ordine di lettura. Chi apre da un link condiviso vuole capire cos'è e ascoltare; i dati di catalogo e le briciole di pane servono a chi cataloga o naviga, e scendono. Come funziona: i pezzi da riordinare stanno a livelli diversi dell'albero (titolo e dati di catalogo sono dentro .disc-page-meta, le sezioni no). `display: contents` fa sparire i due contenitori dal layout e porta tutti i figli allo stesso livello di .disc-page, che diventa un flex in colonna: solo così `order` può metterli in fila come vogliamo. ⚠️ Con `display: contents` i contenitori non generano più box: margini, padding e `gap` che stavano su .disc-page-header e .disc-page-meta SPARISCONO. Le spaziature qui sotto li sostituiscono una per una. ============================================================ */ /* ============================================================ PAGINA DISCO — ACCENNARE E CHIUDERE (02/08) Principio: se serve a decidere se ascoltare → visibile o accennato; se serve ad approfondire dopo → si apre. ============================================================ */ .mobile-only { display: none; } /* ============================================================ SOGLIA 900 — tutte le regole in un blocco solo Erano sparse in 6 blocchi lungo il file: quando una regola non funzionava era perché un altro blocco più in basso la sovrascriveva senza che si vedesse. L'ordine interno è quello originale: fra regole di pari specificità vince l'ultima, quindi spostarle avrebbe cambiato il risultato. ============================================================ */ /* ⛔ 3/09/2026 — IL MENU' A PANINO SCATTA A 1250px, NON A 900. Le sette voci occupano ~513px (otto con FYC: ~562) e lo spazio che le ospita vale `finestra - min(50vw,580) - 56 (column-gap) - 48 (padding)`: a 1100px sono 446. Fra 900 e ~1200 il menu' disteso era quindi ancora attivo e NON ci stava, e con `flex-wrap: wrap` le voci andavano a capo DENTRO una barra alta --nav-h = 64px fissi. E' la larghezza di una finestra non massimizzata su un portatile: il caso piu' comune dopo lo schermo pieno. ⚙️ LA FORMULA, per non rifare il conto a naso quando si aggiunge una voce: soglia = (somma delle voci) + (n-1) x gap 24 + 580 (--hero-w) + 56 (column-gap) dove una voce larga `len` caratteri vale circa `len x 8,2` px (10px, letter-spacing .10em). Oggi 7 voci = 513px -> soglia 1149. Con FYC 8 voci = 562px -> soglia 1198. ⚙️ MESSA A 1200: regge oggi E con FYC, cosi' non si ritocca due volte. ⛔ Se si aggiunge un'altra voce, si rifa' il conto e si rialza QUESTO numero — non si rimette la guardia. ⛔ SPOSTATE QUI SOLO LE REGOLE DELLA NAV. Il blocco a 900px contiene anche la pagina disco, la pagina artista e l'hero della home: alzarlo tutto avrebbe portato l'intero sito in modalita' mobile a 1250. ⚠️ Se si aggiunge una voce al menu', questa soglia va rialzata — il conto e' quello in cima a questo commento. */ @media (max-width: 1200px) { nav { grid-template-columns: 1fr auto; column-gap: 16px; } .nav-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: calc(var(--gutter) - 12px); background: none; border: none; padding: 0; cursor: pointer; } /* Tre filetti da 1px: lo stesso spessore dei bordi del sito, non un'icona importata */ .nav-toggle span { position: relative; display: block; width: 20px; height: 1px; background: var(--text-1); transition: background .15s; } .nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; width: 20px; height: 1px; background: var(--text-1); transition: transform .15s; } .nav-toggle span::before { transform: translateY(-6px); } .nav-toggle span::after { transform: translateY(6px); } /* Aperto: il filetto centrale sparisce e gli altri due si incrociano */ nav.open .nav-toggle span { background: transparent; } nav.open .nav-toggle span::before { transform: rotate(45deg); } nav.open .nav-toggle span::after { transform: rotate(-45deg); } /* Il pannello scende da sotto la barra. La barra è fixed, quindi gli fa da riferimento: position absolute + top 100% lo appoggia al suo bordo inferiore. */ .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px var(--gutter) 20px; background: var(--bg); border-bottom: 1px solid var(--border); } nav.open .nav-links { display: flex; } /* Voci più grandi che sul desktop: 10px si leggono col mouse, non col pollice */ .nav-links a { display: block; font-size: 13px; letter-spacing: 0.08em; padding: 13px 0; } .nav-links li + li { border-top: 1px solid var(--border); } } @media (max-width: 900px) { :root { --gutter: 32px; } .disc-page-header { grid-template-columns: 1fr; gap: 24px; } .page-header-split { grid-template-columns: 1fr; gap: 24px; } .artist-page-header { grid-template-columns: 1fr; gap: 24px; } /* L'hero regge ancora due colonne fin quasi al telefono: basta stringere il respiro attorno al testo. La copertina si dimezza da sé (è min(50vw, 580px)). */ .home-hero { column-gap: 24px; } .home-hero-info { padding: 32px 24px 32px 0; } .home-hero-title { font-size: 34px; } .home-hero-desc { margin-bottom: 28px; } } /* ============================================================ SOGLIA 600 — tutte le regole in un blocco solo Erano sparse in 10 blocchi lungo il file: quando una regola non funzionava era perché un altro blocco più in basso la sovrascriveva senza che si vedesse. L'ordine interno è quello originale: fra regole di pari specificità vince l'ultima, quindi spostarle avrebbe cambiato il risultato. ============================================================ */ @media (max-width: 600px) { /* 20px per lato, come ECM da mobile: a 48px se ne andrebbe il 26% dello schermo */ :root { --gutter: 20px; --nav-h: 56px; --hero-w: 100%; /* Stessa regola del desktop, numeri più stretti: su un telefono lo spazio verticale è la risorsa scarsa. Il rapporto resta ~1:2,5, così l'asimmetria si legge come sul grande. */ --rule-above: 12px; --rule-below: 30px; } .credits-block { columns: 1; } .about-people { grid-template-columns: 1fr 1fr; } .partner-item { grid-template-columns: 1fr; gap: 16px; } .partner-logo { justify-self: start; } footer { grid-template-columns: 1fr; } .news-content-wrap { flex-direction: column-reverse; } .news-images { width: 100%; display: flex; flex-wrap: wrap; gap: 10px; } .news-thumb-wrap { width: calc(50% - 5px); margin-bottom: 0; } /* Respiro verticale: 72px sopra e sotto sono da desktop, su un telefono mangiano mezza schermata prima ancora di aver mostrato qualcosa. */ /* il fondo resta --rule-above: è lo spazio SOPRA il filetto del footer, e la scorciatoia `padding: 40px gutter` lo sovrascriveva a 40 */ .page { padding: 40px var(--gutter) 42px; } /* come lo stacco fra sezioni su mobile */ .fyc-optout { padding-top: 42px; } /* = padding-bottom di .page qui sopra: vedi FYC */ /* FYC sul telefono: immagine a 96 e le foto sotto i crediti, non a destra */ /* ⛔ row-gap 0, e lo stacco sopra le foto come margine: con il gap, la griglia apriva una SECONDA riga vuota anche dove le foto non ci sono (il produttore), e ci aggiungeva i 24px del gap — 20 sopra la riga, 44 sotto. Misurato il 21/09: righe «96px 0px». */ .fyc-item { grid-template-columns: 96px 1fr; align-items: start; row-gap: 0; } .fyc-people { margin-top: 24px; } .fyc-person { width: 56px; } .fyc-item .news-item-cover, .fyc-item .news-item-cover .disc-cover { width: 96px; } .fyc-people { grid-column: 2; justify-content: flex-start; } .fyc-people:empty { display: none; } /* ---- SPAZIO FRA LE SEZIONI DELLA HOME ---- Il difetto era strutturale, non di misura: ogni sezione aveva padding sopra E sotto, quindi fra due sezioni lo spazio si SOMMAVA (32+32=64). Ridurre il numero non risolve, rimanda — lo stesso punto era già stato "sistemato" il 10/07 portando il padding da 72 a 48, ed è tornato. Qui lo spazio è dichiarato UNA VOLTA SOLA, in alto; l'ultima sezione chiude con il suo, perché sotto non c'è nient'altro a distanziarla dal footer. */ .home-section { padding: 42px var(--gutter) 0; } .home-section:last-child { padding-bottom: 42px; } h1 { font-size: 30px; } h2 { font-size: 22px; margin-top: 32px; } /* ---- HOME HERO: la direzione B ---- Copertina grande sopra, testo sotto. La copertina resta **a filo dei bordi**, senza gutter: sul desktop tocca già il margine sinistro dello schermo, quindi a piena larghezza non inventa nulla, prosegue la stessa idea. Il testo invece rientra come tutto il resto del sito. */ .home-hero { grid-template-columns: 1fr; column-gap: 0; } .home-hero-cover { width: 100%; } /* --hero-w a 100% azzera da sé il segmento di linea sopra la copertina */ .home-hero-info { padding: 28px var(--gutter) 0; justify-content: flex-start; } .home-hero-title { font-size: 32px; } .home-tagline { margin-bottom: 14px; } .home-hero-artist { margin-bottom: 20px; } /* max-width 400 serviva a non allargare la riga di lettura accanto alla cover: in colonna singola è il gutter a fare quel lavoro. */ .home-hero-desc { max-width: none; margin-bottom: 28px; } /* ---- LISTA NEWS: riga compatta ---- Da tre colonne (80px cover | 110px data | testo) a due. La data smette di essere una colonna e diventa una riga sopra il titolo: quei 110px erano il vero spreco: su 375px lasciavano 41px al testo, cioè due o tre lettere per riga. Ora ne restano ~249. Vale per la pagina News e per le due news in fondo alla home, che usano lo stesso componente. */ :root { --news-pad: 20px; } .news-item { grid-template-columns: 72px 1fr; grid-template-rows: auto auto; gap: 0 14px; padding: var(--news-pad) 0; } .news-item-cover { grid-column: 1; grid-row: 1 / span 2; width: 72px; } .news-item-cover .disc-cover { width: 72px; } .news-date { grid-column: 2; grid-row: 1; padding-top: 0; margin-bottom: 5px; } /* Il contenitore di titolo e intro: è l'ultimo figlio, non ha una classe propria */ .news-item > div:last-child { grid-column: 2; grid-row: 2; } .news-title { margin-bottom: 4px; } /* mobile: si mostra fino al massimo di questo formato, il resto attende il click */ .oltre-mobile { display: none; } .view-all--solo-mobile { display: inline; } /* ---- GRIGLIE: la decisione A ---- Due colonne fisse, non `auto-fill`. Con `minmax(220px, 1fr)` a 375px ci sta una colonna sola e la copertina diventa un poster da 335px: per 69 dischi è uno scroll infinito. Due colonne danno cover da ~160px — la stessa proporzione del desktop, dove sono 4 da 230px in 1100px. `minmax(0, 1fr)` e non `1fr`: il minimo automatico di una colonna è il suo contenuto, e un titolo lungo la farebbe sbordare oltre lo schermo. */ .grid { gap: 22px 14px; } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .disc-card-title { font-size: 14px; } .disc-card-artist { font-size: 11px; } .artist-card-name { font-size: 14px; } /* I video restano a piena larghezza: sono 16:9, non quadrati. A due colonne farebbero 160×90 — un francobollo in cui non si distingue nulla. Una copertina regge la miniatura perché è grafica, un fotogramma no. Vale per la pagina Video, i video del disco e quelli dell'artista: `grid-3` è usato solo per i video. */ .grid-3 { grid-template-columns: 1fr; } /* ---- HOME: vetrina e indice, non catalogo ---- I video della home vanno a piena larghezza come tutti gli altri e si fermano ai primi due: quattro video alti 188px sono quattro schermate, e in fondo a ogni sezione c'è già «View all» che porta alla pagina intera. Fatto in CSS e non in JS di proposito: così si adegua da solo a rotazione e ridimensionamento, mentre il numero deciso in JS resterebbe quello calcolato all'apertura della pagina (render() gira sul cambio di rotta, non sul resize). I due video nascosti restano nel documento — non spariscono per i motori di ricerca, semplicemente non si mostrano qui. */ .home-videos { grid-template-columns: 1fr; } .home-videos > *:nth-child(n+3) { display: none; } /* ---- FOOTER ALLEGGERITO ---- Restano Follow e la riga finale. Via i sette link di navigazione: da quando esiste il menu sono un doppione a un tocco di distanza, e impilati facevano ~620px su uno schermo da 812 — tre quarti di schermata di solo piè di pagina. Non si perde nulla dal sito: quei link sono nel menu, non altrove. */ .footer-col--nav, .footer-col--label { display: none; } /* Due colonne: Follow a sinistra, Believe e copyright a destra sulla stessa riga. Restando sotto il filetto occupavano una fascia loro e lasciavano vuota metà larghezza accanto ai social. Sono già dello stesso registro tipografico dell'intestazione «Follow» (9px maiuscoletto), quindi si allineano con essa. */ footer { grid-template-columns: 1fr auto; padding: var(--rule-below) var(--gutter) 28px; gap: 24px; } .footer-bottom { grid-column: 2; grid-row: 1; /* In fondo, non in cima: il footer ha `align-items: start`, che appaiava queste due righe all'intestazione «Follow» e lasciava un buco sotto. Allineate al basso, il copyright cade sulla riga di YouTube. */ align-self: end; /* Allineati a destra, come già sul desktop: là la riga è `space-between` e il copyright sta all'estremo. Chiude il footer sul margine destro, in simmetria con Follow su quello sinistro. */ flex-direction: column; align-items: flex-end; text-align: right; gap: 6px; /* Gli 11px in basso compensano il padding dei link: «YouTube» ha 11px di area toccabile sotto il testo, quindi senza questo il copyright cadrebbe 11px più in basso della riga a cui deve allinearsi. */ /* 11px e non 9: i 9 compensano il padding dei link social, ma i due testi hanno corpi diversi (15px e 11px) e allineare i blocchi non allinea le linee di base. ⚠️ E nemmeno le linee di base bastano: «YouTube» è 15px con maiuscole e minuscole (ha ascendenti), il copyright è 11px TUTTO MAIUSCOLO, quindi il suo blocco è più corto e a parità di base sembra schiacciato in basso. Si allinea il CENTRO OTTICO, non la base: da qui i 3px in più (misurati: base a 11px, ottico a 14px). */ /* 2/09/2026 - RITMO VERTICALE, calcolato non a occhio. La colonna di sinistra ha righe da 42px (15px di corpo x 1.6 di interlinea = 24, piu' 9+9 di padding dei link). Le tre voci di destra girano a MEZZO ritmo, 21px: i loro centri cadono a 10,5 / 31,5 / 52,5, quindi la prima e la terza distano 42px esatti - la stessa distanza che separa Facebook da YouTube. Believe cade sulla riga di Facebook e il copyright su quella di YouTube. Il padding di 10,5px in basso e' la differenza fra il centro di YouTube (21px dal fondo) e quello della terza voce (10,5px). */ line-height: 21px; gap: 0; padding: 0 0 10.5px; border-top: none; } /* 2/09/2026: sul telefono Privacy torna su una riga sua. Unito al copyright la riga era troppo lunga per la colonna destra e andava a capo dentro il copyright. Qui la colonna e' gia' verticale, quindi una riga in piu' e' la forma naturale: non si accorcia niente, si toglie solo il punto medio che sul desktop li unisce. */ .footer-bottom .footer-sep { display: none; } .footer-bottom .footer-copy a { display: block; } /* Righe da ~43px: a 14px con 8 di gap erano alte 21, troppo strette per un dito */ footer ul { gap: 0; } /* 9px invece di 11 → righe da ~39px anziché 43. Sotto i 44 canonici, ma i tre social sono bersagli isolati e distanti dal resto: il rischio di sbagliare tocco è basso. ⚠️ Se si cambia questo valore va cambiato anche il padding-bottom di .footer-bottom, che lo compensa per allineare il copyright. */ footer li a { display: block; padding: 9px 0; } /* Corpo del testo */ .disc-description { font-size: 17px; } .about-body p, .news-page-body, .collana-description { font-size: 17px; } .programme-works li { font-size: 17px; } .home-hero-desc { font-size: 17px; } .credit-item { font-size: 16px; } .news-title { font-size: 17px; } /* Testi secondari */ .disc-page-interpreters, .news-intro, .home-hero-artist, .programme-note, .programme-footnote, footer a { font-size: 15px; } .disc-card-title, .artist-card-name, .video-card-title { font-size: 15px; } .single-item-title { font-size: 14px; } .disc-card-artist, .video-card-artist, .single-item-date { font-size: 13px; } /* Segnaletica: maiuscoletto spaziato. Da 8,5–9px a 11, la soglia sotto la quale un lineare spaziato smette di essere leggibile su un telefono. */ h3, .credit-label, .tag, .disc-meta-line, .programme-composer, .programme-total, .contributor-role, .news-date, .breadcrumb, .home-tagline, footer h4, .footer-bottom a, .footer-copy, .btn-listen, .btn-primary, .video-badge, .home-section-header h2, .home-section-header a, .show-more-btn, .view-all, .filter-group label, /* .btn-reset sta in fila con i tag delle collane: se resta a 8,5 mentre loro salgono a 11 stona: era l'unico pulsante rimasto fuori dalla scala. */ .btn-reset { font-size: 11px; } .filter-group select { font-size: 17px; } /* ⛔ 27/09/2026 — FILTRI SUL TELEFONO (migliorie, voce 4, progetto di Alessandro). Un solo «Filter by» chiuso all'arrivo, col filetto sotto come la barra dei filtri sul computer; aperto mostra quattro righe — Series, Artist, Composer, Year — col valore scelto a destra. La tendina vera e' TRASPARENTE sopra tutta la riga: toccandola si apre la lista del telefono (regge i 53 compositori). I tasti delle collane non si vedono: sono diventati la riga Series. */ .catalogo-filtra { display: flex; align-items: baseline; gap: 6px; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--border); padding: 0 0 var(--rule-above); margin: 16px 0 var(--rule-below); font-family: var(--font-ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-1); text-align: left; cursor: pointer; } .catalogo-filtra-stato { color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .catalogo-filtra-freccia { margin-left: auto; color: var(--text-3); } .catalogo-filtra[aria-expanded="true"] { margin-bottom: 0; } .catalogo-filtra[aria-expanded="true"] .catalogo-filtra-freccia { transform: rotate(180deg); } .catalogo-comandi { display: none; } .catalogo-comandi.aperto { display: block; } .catalogo-comandi .catalogue-modes { display: none; } .filters { display: block; } .filter-group, .filter-group.solo-telefono { display: flex; justify-content: space-between; align-items: baseline; position: relative; padding: 14px 0; border-top: 1px solid var(--border); } .filters .filter-group:first-child { border-top: 0; } .filter-group .filter-arrow { display: none; } .filtro-valore { display: inline; font-family: var(--font-serif); font-size: 17px; font-weight: 300; color: var(--text-1); } .filtro-valore::after { content: ' ›'; color: var(--text-3); } .filter-group select { position: absolute; top: 0; left: 0; width: 100% !important; height: 100%; opacity: 0; cursor: pointer; } .filters .btn-reset { margin-top: 14px; } .disc-page { display: flex; flex-direction: column; } .disc-page .disc-page-header, .disc-page .disc-page-meta { display: contents; } .disc-page .disc-page-cover { order: 1; margin-bottom: 20px; } .disc-page .disc-page-title-group{ order: 2; margin-bottom: 14px; } .disc-page .disc-page-composers { order: 3; margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; } .disc-page .disc-page-listen { order: 4; } /* Tutte le sezioni con lo stesso order: fra pari, `order` lascia l'ordine del documento. Dal 02/08 About viene prima di Programme anche nel markup (quindi anche sul desktop), e non serve più scambiarle qui: l'ordine visivo e quello del documento coincidono di nuovo. */ .disc-page .disc-section { order: 5; } /* Dati da schedario: numero di catalogo, date, collana e anno. Servono a chi verifica, non a chi sta decidendo se ascoltare — in fondo, dopo il contenuto. */ /* Il blocco finale (catalogo · tag · briciole) è aperto da un filetto come ogni altra sezione: stessa regola, stessi numeri. Era 40 sopra e 24 sotto, cioè l'inverso — scritto prima che la regola esistesse. */ .disc-page .disc-page-meta-block { order: 12; margin-top: var(--rule-above); padding-top: var(--rule-below); border-top: 1px solid var(--border); } .disc-page .disc-page-tags { order: 13; margin-top: 16px; } /* Il telefono ha già il suo tasto indietro: qui orientano dopo, non prima. */ .disc-page .breadcrumb { order: 14; margin: 16px 0 0; } /* Vale per TUTTE le sezioni del sito, non solo per la pagina disco: stesso filetto, stesso passo — pagine collaboratore, compositore e luogo comprese. margin-top 24 (non 32) perché sta PRIMA del filetto: quando una sezione finisce con un blocco già separato da una riga (le liner notes) due filetti a 32px l'uno dall'altro aprono un buco. Il respiro sta dopo il filetto (padding 32), dove separa il titolo dal contenuto invece di sommarsi allo stacco precedente. ⚠️ Le intestazioni sopra hanno `margin-bottom: 64px`: senza ridurlo qui vince lui (i margini adiacenti collassano) e sopra la linea resterebbero 64px contro i 24 voluti — è esattamente l'asimmetria vista su Tommaso Cancellieri. */ /* ⛔ 4/09/2026 — QUI C'ERANO TRE REGOLE, e vanno tolte insieme alla ragione per cui c'erano. Mettevano primo, secondo e terzo riquadro in celle fisse per tenere Alessandro da solo sulla prima riga: con due colonne l'ordine naturale affiancava Alessandro e Javier e lasciava Tommaso sotto da solo — una gerarchia prodotta dal numero di colonne, non da una scelta. 🔑 Dal 4/09 il fondatore ha una sezione propria, quindi in `.about-people` restano DUE riquadri: Javier diventerebbe «il primo» e finirebbe incolonnato sopra Tommaso, cioe' esattamente la gerarchia accidentale che queste righe volevano evitare. Tolte, l'ordine naturale li affianca ed e' quello giusto. ⚠️ Se un domani si tornasse a tre riquadri in una griglia a due colonne, il problema originale si ripresenta: la cura non e' rimettere le celle fisse a caso, e' rileggere questo commento. */ .mobile-only { display: block; } /* ⚠️ Senza questa riga l'attributo `hidden` non funziona su .mobile-only: `[hidden] { display: none }` sta nel foglio di stile del BROWSER, che perde sempre contro il nostro. Il JS nascondeva il bottone e il CSS lo rimostrava, così «Read more» compariva anche su descrizioni di quattro righe. */ .mobile-only[hidden] { display: none; } /* --- About: 10 righe, poi «Read more» --- `-webkit-line-clamp` conta le righe VERE renderizzate dal browser, quindi la soglia resta esatta anche cambiando carattere o larghezza — a differenza di una max-height in pixel, che andrebbe ricalcolata a ogni ritocco tipografico. Il bottone lo mostra/nasconde il JS, che è l'unico a sapere se il testo eccede. */ .disc-description-wrap { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10; overflow: hidden; } .disc-description-wrap.is-espanso { display: block; -webkit-line-clamp: none; overflow: visible; } /* --- Liner notes: sezione a sé, sempre visibile --- Non sono un testo ma una nota di servizio sul libretto fisico ("The release includes liner notes by…"). Stanno FUORI dal troncamento: sparirebbero dentro il «Read more» pur essendo due righe. A 13px erano illeggibili. */ /* Su mobile la descrizione è troncata a 10 righe e sotto c'è il «Read more»: le liner notes hanno bisogno di dire «questo non fa parte del testo sopra», altrimenti compaiono subito sotto il pulsante e sembrano la coda del testo tagliato. ⚠️ Il filetto è CORTO (48px), non a piena larghezza: nel linguaggio del sito una linea lunga significa «qui comincia una sezione», e queste non lo sono. Un segno breve dice «pausa», non «capitolo» — e nel sito non esiste nient'altro di simile. */ .disc-linernotes { font-size: 17px; line-height: 1.8; color: var(--text-1); font-style: italic; margin-top: 32px; padding-top: 26px; position: relative; border-top: none; } .disc-linernotes::before { content: ''; position: absolute; top: 0; left: 0; width: 48px; height: 1px; background: var(--border); } /* --- Programme: 7 tracce, poi «Show all» --- */ .disc-section--programme .track-extra { display: none; } .disc-section--programme.is-espanso .track-extra { display: list-item; } /* --- Spazi fra le sezioni, versione mobile --- Stesso stacco che la home usa su telefono dal 01/08. ⏳ DA GUARDARE: qui 30 è anche la distanza sotto il filetto, quindi separare due sezioni vale quanto separare la testata dal suo contenuto — mentre su desktop è 56 contro 40. Con sette sezioni in fila potrebbe non bastare: se non basta, il numero da alzare è questo (la proporzione del desktop darebbe 42). */ /* ⛔ 42px, non 30 (24/08). Con 30 lo stacco FRA due sezioni valeva quanto quello DENTRO la sezione (filetto → contenuto), e le sezioni risultavano attaccate: misurato fra le lettere, 40px contro 35 — rapporto 1,14. Sul desktop lo stesso rapporto è 1,4 (56 contro 40). 42 = 1,4 × 30: stessa proporzione, numeri del telefono. Alessandro: «tutte le sezioni sono attaccate, c'è bisogno di più aria». */ .disc-section, .news-related, .about-people-heading { margin-top: 42px; } /* «Read more» della descrizione: appartiene al testo che espande, non al blocco che segue. Glielo dice la vicinanza — 8 sopra contro 32 sotto — invece di una compensazione. Serve soprattutto quando sotto ci sono le liner notes, che hanno un filetto proprio e rischiavano di attirarselo. */ .disc-description-wrap + .show-more-btn { margin-top: 8px; margin-bottom: 32px; } }