/* ============================================================ I CARATTERI, DALLA CARTELLA font/ (24/08/2026) Prima venivano da Google: ogni visita mandava l'indirizzo IP del visitatore a un server terzo prima di qualunque consenso. Stessi cinque tagli, stessi nomi di famiglia, stessi pesi. ============================================================ */ @font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("font/big-shoulders-display-600-latin.woff2") format("woff2"); } @font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("font/big-shoulders-display-700-latin.woff2") format("woff2"); } @font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap; src: url("font/big-shoulders-display-800-latin.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("font/ibm-plex-sans-400-latin.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("font/ibm-plex-sans-600-latin.woff2") format("woff2"); } /* ============================================================ STILE ALPINA — l'unico posto dove stanno i valori. Ogni valore qui dentro è stato letto da Alpina-DUE.dc.html il 23/08/2026. Niente è stato inventato o arrotondato. Chi costruisce una pagina nuova copia da qui, non a occhio. ============================================================ */ :root { /* --- COLORI ------------------------------------------------- Tre, non uno di più. Il nome dice a cosa serve, non che colore è: se un giorno l'arancione cambia tinta, cambia qui e basta. Nella pagina non compare nessun altro colore: niente sfumature, niente ombre, niente trasparenze. */ --alpina-fondo: #1E2328; /* antracite: fondo di tutto — pagina, sezioni, riquadri foto, fascia del titolo sul telefono */ --alpina-testo: #FFFFFF; /* bianco: tutto il testo, e i collegamenti (anche al passaggio del dito) */ --alpina-filo: #FFFFFF; /* bianco: le linee — filo sopra le didascalie, cornici */ --alpina-fondo-chiaro: #9EA3A8; /* cemento freddo: fondo delle sezioni pari, che si alternano a quelle antracite. PIATTO, senza sfumature. Nelle sezioni chiare il testo e i fili diventano antracite (le variabili si riscrivono sulla sezione, non qui). Scelto il 24/08/2026 sulla pagina di prova a tre candidate (alpina-prova-fondi-r01): i grigi caldi #D5D2CC e #B7B3AC tiravano al beige — carta — mentre il calcestruzzo è neutro freddo. Nessuna riserva: il prossimo gradino si decide guardando, non si scrive qui */ --alpina-accento: #F26522; --alpina-accento-scuro: #8E3611; /* arancione scuro, SOLO dentro le sezioni chiare. Valore preso dalla candidata B della pagina di prova: su #9EA3A8 fa 3,08 di contrasto (l'arancio traffico #F26522 sullo stesso fondo fa 1,5 — si vede per grandezza, non per contrasto, e al sole sparisce). Si scurisce l'inchiostro, non il marchio: l'arancio del marchio, del pulsante e delle targhette non cambia mai */ --alpina-accento-segno: var(--alpina-accento); /* l'inchiostro dei SEGNI di sezione — numero 01…09 e trattino sopra il titolo. Sulle sezioni chiare vale --alpina-accento-scuro (si riscrive sulla sezione). Non usarlo per pulsanti, targhette o parole dentro una frase */ /* arancione: una parola dentro una frase, il trattino, il fondo del pulsante. Vedi il foglio a parole */ /* --- CARATTERI ---------------------------------------------- Due famiglie, nessuna terza. Nomi esatti come vanno scritti. */ --alpina-carattere-titoli: "Big Shoulders Display", sans-serif; /* condensato: titoli e parole brevi */ --alpina-carattere-testo: "IBM Plex Sans", sans-serif; /* testo corrente ed etichette. Sostituisce Public Sans il 23/08/2026: carattere nato per la documentazione tecnica, tiene i corpi piccoli e ha le cifre a larghezza fissa — nella tabella dei numeri i valori si incolonnano da soli. Public Sans NON si carica più: è una sostituzione, non un'aggiunta */ /* pesi realmente in uso — dalla rete si chiedono SOLO questi: Big Shoulders Display 600, 700, 800 · IBM Plex Sans 400, 600. Un peso in più è peso scaricato a ogni visita da telefono. */ --alpina-peso-titolo: 800; /* marchio DUE, titolo di sezione */ --alpina-peso-claim: 700; /* riga grande del claim */ --alpina-peso-etichetta: 600; /* riga piccola del claim, didascalie, pulsante */ --alpina-peso-testo: 400; /* paragrafi */ /* --- MISURE DEL TESTO --------------------------------------- Sono fluide: crescono col vetro. Il primo numero è il telefono, l'ultimo è il PC. Non tradurle in un numero fisso. */ --alpina-titolo: clamp(26px, 3vw, 46px); /* UNA misura sola di titolo: la parola DUE accanto al logo e il titolo di sezione «Cosa c'è dentro». Unificata il 23/08/2026 (prima il marchio cresceva a 2,85vw: era una svista) */ --alpina-claim-grande: clamp(24px, 2.5vw, 40px); /* «DUE funzioni, una macchina» — di partenza: la pagina poi la ingrandisce fino a ~76px per allinearla alla riga di sopra */ --alpina-claim-piccolo: clamp(13px, 1.45vw, 21px); /* «Betoniera meccanizzata · Dumper autocaricante» — sotto i 360px scende a 12px e va a capo */ /* LA TARGA DELL'APERTURA. Le due righe del claim devono finire sulla stessa verticale: la misura esatta la calcola la pagina e la scrive su in tre variabili — --alpina-claim-piccolo-fit, --alpina-claim-grande-fit, --alpina-claim-piccolo-ls. Qui sopra ci sono i valori di partenza, che si vedono finché il calcolo non arriva. Non scrivere quelle tre a mano. */ --alpina-testo-corrente: clamp(18px, 1.3vw, 19px); /* paragrafi della pagina prodotto. Portato a 18px sul telefono il 23/08/2026 (prima 13): sotto i 16 un paragrafo in cantiere, col sole e col telefono in mano, non si legge. Non riabbassarlo per far entrare un testo: si accorcia il testo */ --alpina-testo-lettura: clamp(18px, 1.39vw, 20px); /* documenti che si leggono per intero (pagine legali): 16px sul telefono, 20 sul PC. Non è la stessa cosa del testo corrente — chi apre quelle pagine deve leggerle, non guardarle. Deciso il 23/08/2026 su tre prove: 15→19 restava troppo vicino alla pagina prodotto, 17→21 allungava pagine già lunghe */ --alpina-didascalia: clamp(12px, 0.95vw, 14px); /* etichette tecniche sotto le foto */ --alpina-etichetta-pulsante:clamp(13px, 1vw, 15px); /* scritta dentro il pulsante */ --alpina-numero: clamp(22px, 1.9vw, 28px); /* i valori della tabella tecnica: 77 cm, 300 litri, 410 kg. Vanno nel carattere dei titoli e più grandi dell'etichetta che li nomina — nella sezione dei numeri comanda il numero, non la parola. Prima erano 15,8 px come una frase qualsiasi, con accanto un'etichetta maiuscola spaziata che pesava di più: la pagina diceva «leggi», non «attrezzo da lavoro». Deciso il 23/08/2026 */ --alpina-logo-altezza: clamp(19px, 2.1vw, 34px); /* il logo Alpina nel lockup */ /* interlinee */ --alpina-interlinea-titolo: 1; --alpina-interlinea-claim: 1.04; --alpina-interlinea-etichetta: 1.35; --alpina-interlinea-testo: 1.55; /* alzata da 1,5 il 23/08/2026 insieme al corpo 18: IBM Plex ha l'occhio più grande di Public Sans e chiede una riga d'aria in più */ --alpina-interlinea-lettura: 1.7; /* va insieme a --alpina-testo-lettura: venti articoli di legge chiedono più aria fra le righe di due frasi accanto a una foto */ /* spaziatura fra le lettere — larga sulle etichette in maiuscolo, quasi nulla sui titoli */ --alpina-spaziatura-titolo: 0.01em; --alpina-spaziatura-claim: 0.015em; --alpina-spaziatura-claim-piccolo: 0.22em; /* valore di partenza: la pagina la ricalcola per far finire le due righe del claim sulla stessa verticale; 0.18em sui telefoni stretti */ --alpina-spaziatura-didascalia: 0.16em; --alpina-spaziatura-pulsante: 0.12em; --alpina-testo-largo-max: 34em; /* un paragrafo non supera questa larghezza */ /* --- DISTANZE ----------------------------------------------- ATTENZIONE: nella pagina NON risulta una scala regolare (non è un multiplo di 4, né di 8). Le distanze sono legate al ruolo, non a una griglia. Sono elencate com'è: chi costruisce una pagina nuova riusa il nome del ruolo che gli somiglia, e non inventa un passo intermedio. */ --alpina-gronda: clamp(24px, 6vw, 96px); /* margine laterale della pagina: uguale per la fascia e per la sezione delle foto */ --alpina-sezione-verticale: clamp(88px, 11vw, 168px); /* aria sopra e sotto una sezione */ --alpina-sezione-righe: clamp(34px, 4.4vw, 60px); /* fra il titolo di sezione e il suo contenuto */ --alpina-intestazione-righe:clamp(16px, 1.6vw, 22px); /* fra il trattino arancione e il titolo di sezione */ --alpina-griglia: clamp(24px, 2.8vw, 40px); /* fra un riquadro foto e l'altro */ --alpina-coppia-max: 880px; /* larghezza massima di una fila di DUE blocchi grandi affiancati (le configurazioni). Senza tetto, sul PC ogni foto arriva a 606 px e la macchina viene grossa quanto in apertura: la pagina alzerebbe la voce scorrendo. Misurato il 23/08/2026 su tre prove: 1040 \u00b7 880 \u00b7 720 */ --alpina-fascia-sopra: clamp(26px, 3.4vh, 44px); /* aria in cima alla fascia del titolo */ --alpina-fascia-sotto: clamp(28px, 4vh, 52px); /* aria in fondo alla fascia */ --alpina-fascia-righe: clamp(15px, 2.2vh, 28px); /* fra i blocchi dentro la fascia */ --alpina-claim-righe: clamp(8px, 1.2vh, 14px); /* fra le due righe del claim */ --alpina-lockup-righe: clamp(9px, 1vw, 16px); /* fra il logo Alpina e la parola DUE */ --alpina-pulsante-stacco: clamp(2px, 0.8vh, 10px); /* aria in più sopra il pulsante */ /* Questi due sono fissi per scelta, non per svista: sono le distanze che si guardano da vicino, dentro il riquadro, e devono restare uguali su qualunque schermo. Non renderle fluide. */ --alpina-figura-didascalia: 14px; /* fra la foto e la sua didascalia */ --alpina-didascalia-filo: 12px; /* fra il filo bianco e la scritta della didascalia */ /* --- SEGNI E FORME ------------------------------------------ */ --alpina-angoli: 0; /* angoli vivi ovunque: nella pagina non esiste un solo bordo arrotondato */ --alpina-tenue: 0.70; /* il grado di spegnimento del footer. Il bianco pieno sull'antracite fa contrasto 15,8: troppo per un piede di pagina che non deve chiamare. A 0,70 il contrasto scende a 8,4 — il footer resta chiaramente in secondo piano ma i dati societari obbligatori si leggono, anche col sole sullo schermo in cantiere. Non scendere: scritti troppo spenti, quei dati sembrano scritti per non essere letti, e su una pagina che deve costruire fiducia è il contrario di quello che serve. Deciso il 23/08/2026 su tre prove misurate: 0,70 (8,4) · 0,62 (6,9) · 0,50 (5,0) */ --alpina-filo-spessore: 1px; /* la linea sopra le didascalie */ --alpina-trattino-larghezza:30px; /* il trattino arancione che apre una sezione */ --alpina-trattino-spessore: 3px; --alpina-foto-formato: 4 / 5; /* verticale: il riquadro delle foto in cui il soggetto È LA MACCHINA (componenti, configurazioni, passaggio) e il video della prima schermata. Le foto in cui il soggetto è IL LUOGO (il capannone) non si incorniciano: si mostrano intere, nelle loro proporzioni — vedi alpina-stile.md */ --alpina-foto-uscita: 900px; /* quanto è larga in pixel la foto RITAGLIATA che si carica nel sito, per i riquadri 4:5. Non è quanto si vede a schermo (420 px): è il file. Deciso il 23/08/2026 — è la misura che il sito usa già, e 900 sono più del doppio di quello che serve. Il doppio non si fa: ogni kilobyte in più lo paga chi arriva dall'annuncio col telefono */ --alpina-foto-uscita-apertura: 1080px; /* la sola apertura sul telefono, che a schermo arriva a 700 px di larghezza. Sul PC l'apertura è a pieno campo: non è un riquadro, non ha una forma, non si ritaglia */ --alpina-pulsante-altezza: 46px; /* minimo, perché un dito lo prenda */ --alpina-pulsante-fianchi: clamp(20px, 2vw, 28px); } /* ============================================================ LA TARGA SUL TELEFONO STRETTO (24/08/2026) Sotto i 407 px di vetro la colonna del claim scende sotto i 360: la riga piccola non ci sta più su una riga sola e va messa su due, senza il punto separatore. Sta qui e non nel codice perché è un cambio di IMPAGINAZIONE, non una misura calcolata: il ri-disegno della pagina non la può cancellare. Perché vinca sullo stile in linea, dal modello sono state togliete le due dichiarazioni display:inline-block e white-space:nowrap della riga piccola: qui sotto ci sono entrambi gli stati, largo e stretto. ============================================================ */ [data-claim="small"] { display: inline-block; white-space: nowrap; } @media (max-width: 407px) { [data-claim="small"] { display: flex; flex-direction: column; align-items: flex-start; white-space: normal; } [data-claim="small"] [data-claim="sep"] { display: none; } } /* LA RIGA DELLA CHIUSURA (sezione 09). Stesse due righe della targa dell'apertura, ma qui il carattere non si rimpicciolisce da solo: la riga intera non ci sta sotto i 580px di finestra, quindi da lì in giù va a capo — «betoniera meccanizzata» sopra, «dumper autocaricante» sotto, senza il punto separatore. */ [data-claim="chiusura"] { display: inline-block; white-space: nowrap; } @media (max-width: 580px) { [data-claim="chiusura"] { display: flex; flex-direction: column; align-items: flex-start; white-space: normal; } [data-claim="chiusura"] [data-claim="sep"] { display: none; } } /* ============================================================ FOTO A TUTTA LARGHEZZA SUL TELEFONO (23/08/2026) Sotto la larghezza da telefono la foto esce dai margini e arriva ai bordi dello schermo; il testo tiene i suoi margini. Ragione: testo stretto → foto piena → testo stretto dà un ritmo; una colonna di riquadri tutti uguali no. Su tablet e PC non cambia niente: le foto restano nel limite di 880 px (--alpina-coppia-max). Vale anche per i due disegni quotati (24/08/2026): a tutta larghezza il loro fondo antracite diventa una banda scura da bordo a bordo dentro la sezione chiara, e la quota 773 si legge. ============================================================ */ @media (max-width: 699px) { [data-foto="piena"] { margin-left: calc(-1 * var(--alpina-gronda)); margin-right: calc(-1 * var(--alpina-gronda)); width: calc(100% + var(--alpina-gronda) * 2); max-width: none; flex: 0 0 auto; } } /* ============================================================ TARGHETTA DIETRO LE DIDASCALIE D'ANGOLO (24/08/2026) Le tre quote sulle foto (LARGHEZZA 77 CM · PORTATA 600 KG · BICCHIERE 200 L) stanno su un rettangolo antracite PIENO: niente trasparenze, niente ombre, respiro minimo intorno al testo (--alpina-didascalia-filo). Su tutte e tre, anche dove la foto è già scura, perché il linguaggio delle foto è uno. La regola nasce sulle creatività Meta: su fondo chiaro il testo vuole la banda antracite piena, e la targhetta è la stessa firma di quelle. Il rettangolo è scritto nello stile della didascalia, qui sta solo la ragione. ============================================================ */ /* ============================================================ PROVA MOVIMENTO (23/08/2026, rifatta il 24/08/2026) SI TOGLIE IN UN GESTO: si cancella questo blocco. Numero e titolo di sezione compaiono una volta sola, 200 ms, opacità più 8 px di scorrimento, quando la sezione entra nello schermo. Nient'altro si anima. NIENTE JAVASCRIPT: la comparsa è legata allo scorrimento (animation-timeline: view()). La prima versione usava un osservatore che scriveva un attributo, e il ri-disegno della pagina lo riscriveva: i titoli restavano invisibili. Senza JS non c'è niente che possa restare a metà — dove il browser non conosce la regola (Safari), i titoli si vedono e basta. Se sa di volantino, via. ============================================================ */ @keyframes alpina-comparsa { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { [data-anima] { animation: alpina-comparsa 200ms linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; } } }}