/* ════════════════════════════════════════════════════════════════════════ THE GRAND ESCAPE TUSCANY — token dell'app Fonte dei valori: design system "The Grand Escape" su Claude Design, file colors_and_type.css (rispecchiato a sua volta da tge-refactor e dal brand book "The Grand Escape.pdf"). La fonte di verita' dei token del SITO resta quel file. Questo file e' la veste dell'APP, che e' un prodotto diverso dello stesso brand: qui i nomi sono quelli che il motore si aspetta, e in fondo c'e' il blocco che allinea i nomi del brand book a questi. ════════════════════════════════════════════════════════════════════════ LA SKIN — il file del rivestimento grafico. Questi valori sono l'unica cosa che separa l'aspetto di un evento da quello di un altro. Fuori da qui il CSS delle app-evento è identico: cambia questi ventisette valori e l'app cambia veste, senza aprire nessun altro file. ATTENZIONE — questo è un commento CSS: la sequenza di due asterischi seguiti da una barra lo chiude in anticipo, e il CSS che segue sparisce in silenzio. Niente grassetto in stile markdown qui dentro. REGOLA — i NOMI non si cambiano mai, solo i valori. */ /* ── I CARATTERI ────────────────────────────────────────────────────────── Serviti da questa repo, non da Google Fonts: è l'unico modo perché arrivino anche col telefono senza segnale. I file vanno elencati anche in evento/config.js → font, o restano fuori dalla copia offline. Il brand book dice DM Sans Bold per i titoli e Inter per il testo. Sono tutti e due file variabili: uno solo copre ogni peso. DM Serif Display, il carattere display dell'edizione toscana (--tge-font-tuscany nel design system, dove sta al posto di LTC Italian Old Style Pro), NON è qui — come Germania One non è nell'app tedesca. Un serif da titolo è troppo decorativo per le intestazioni di sezione di una guida che si legge in sella, con una mano sola e il sole negli occhi. Semmai per la sola testata, e si decide con Alessio. */ @font-face { font-family: 'DM Sans'; src: url('font/dm-sans-latin.woff2') format('woff2'); font-weight: 100 1000; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('font/inter-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root{ /* --- i due colori che fanno il brand ------------------------------------- --brand è IL colore dell'evento: pulsanti, selezioni, tracciato sulla mappa, focus. --accento è il secondo colore, usato per i richiami, i dettagli e i punti "mangiare" su mappa e altimetria. Il sub-brand dell'edizione toscana È il vino — nel design system --tge-tuscany vale var(--tge-wine), a differenza della Germania che ha il caramello e della Slovenia che ha il verde felce. Qui quindi il colore dell'edizione e il colore del brand sono la stessa cosa, e --evidenza prende un tono di terra che non appartiene a nessun'altra edizione. */ --brand: #A32C29; /* --tge-wine · Brown Red, primario del brand */ --brand-chiaro: #BE3A36; /* wine schiarito, non c'è nel design system */ --brand-testo: #ffffff; /* .tge-cta-pill mette bianco su wine */ --accento: #1D3B5F; /* --tge-navy · etichette e sottotitoli */ --accento-scuro:#14293F; /* navy scurito */ /* --- i fondi ------------------------------------------------------------ La carta del brand è avorio, non bianca. --superficie e --card restano però quasi bianche: è il foglio su cui si legge in pieno sole con una mano sola. */ --sfondo: #F3ECE0; /* --tge-paper-1 · base ivory */ --superficie: #FFFCF6; /* quasi bianco caldo */ --card: #FFFCF6; --card-alt: #EDE4D2; /* --tge-paper-2 */ --card-forte: #E8DCC4; /* --tge-paper-3 */ --bordo: rgba(44,31,21,.14); /* --tge-hairline */ /* --- il testo ----------------------------------------------------------- */ --testo: #2C1F15; /* --tge-espresso · --tge-fg */ --testo-soft: rgba(44,31,21,.72); /* --tge-fg-muted */ /* --- i colori di servizio ----------------------------------------------- --evidenza per ciò che va notato senza allarmare. Sull'edizione tedesca qui stava il caramello, che è il suo sub-brand: qui il sub-brand è già --brand, quindi si prende il rust tan delle terre calde del design system, che su carta avorio e come pallino da otto pixel si vede — il caramello, più chiaro, sparirebbe. --allarme per i divieti e le emergenze: resta rosso anche su un brand rosso, ma più acceso del vino, altrimenti il pulsante del 112 non si stacca dal resto. */ --evidenza: #A67244; /* --tge-rust-tan */ --evidenza-scuro: #6B4423; /* --tge-coffee */ --allarme: #D7263D; /* nessun corrispondente nel design system */ --allarme-scuro: #A81B2E; --oro: #C9A27A; /* --tge-wheat */ /* --- le famiglie --------------------------------------------------------- Brand book — DM Sans Bold per i titoli, Inter per il testo. */ --font-testo: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-titoli: 'DM Sans', 'Inter', -apple-system, sans-serif; /* --- i punti di interesse ----------------------------------------------- Il design system non ne ha di propri, quindi restano quelli del motore. L'azzurro dell'acqua si riconosce a colpo d'occhio anche da chi apre l'app la prima volta, sotto il sole, in sella. */ --poi-acqua: #1c7ed6; --poi-dormire: #7048e8; --poi-meccanico: #0b7285; /* --- la card grande della home ------------------------------------------ L'unico blocco a tutto colore dell'app. È la sezione scura del design system, .tge-espresso-bg, cioè walnut sfumato su espresso. */ --hero-fondo: linear-gradient(135deg, #3A2A1D 0%, #2C1F15 55%, #1A120C 100%); /* --- le forme ----------------------------------------------------------- Il design system dice di sé "emphatically flat" e usa raggio 0 come valore predefinito, con 8px per le schede mappa. Otto è il compromesso scelto guardando le schermate: si sente il brand squadrato senza smontare il layout dell'app, che è nato su angoli morbidi. */ --raggio: 8px; /* --tge-radius-md */ --ombra-pagina: 0 0 40px rgba(44,31,21,.14); /* derivata da --tge-hairline */ /* --- misure fisse ------------------------------------------------------- Non è colore: è l'altezza della barra delle schede in fondo, e il motore ci fa i conti. */ --nav-h: 66px; } /* ════════════════════════════════════════════════════════════════════════ DOPPIA DICHIARAZIONE — nomi del brand book ↔ nomi dell'app. Entrambi i set sono di primo livello e valgono gli stessi valori: cambiarne uno solo è un bug. Serve perché chi arriva dal brand book cerca --tge-wine e chi legge il codice dell'app cerca --brand, e devono trovare la stessa cosa. Qui sotto ci sono solo i nomi che l'app usa davvero. Il set completo dei token The Grand Escape — la scala tipografica, le spaziature, i tempi delle transizioni — vive nel design system, non qui. ════════════════════════════════════════════════════════════════════════ */ :root{ --tge-wine: var(--brand); --tge-navy: var(--accento); --tge-rust-tan: var(--evidenza); --tge-tuscany: var(--brand); --tge-coffee: var(--evidenza-scuro); --tge-wheat: var(--oro); --tge-espresso: var(--testo); --tge-paper-1: var(--sfondo); --tge-paper-2: var(--card-alt); --tge-paper-3: var(--card-forte); --tge-hairline: var(--bordo); --tge-fg: var(--testo); --tge-fg-muted: var(--testo-soft); --tge-font-display: var(--font-titoli); --tge-font-sans: var(--font-titoli); --tge-font-body: var(--font-testo); }