Stili

Sistema colori v1.0

Fonte canonica del tema: 4 colori core (paper, ink, accent, action) più i token derivati e di stato. Ogni token ha un uso consentito preciso, non intercambiabile con gli altri. Nessun HEX alternativo è ammesso nei template: tutto passa da qui.

Token derivati (stati)

Componenti reali con i token attivi

Griglia e contenitori

Un unico wide e un unico content, condivisi da tutte le pagine. Il gutter è la stessa formula ovunque: nessuna sezione definisce una propria larghezza.

Spaziature

Scala fluida per il ritmo delle sezioni. I componenti compatti hanno misure dedicate: padding, target e distanze funzionali possono essere fissi. Le varianti dei Servizi conservano le misure approvate.

Gerarchia di sezione

Eyebrow → H2 → lead → contenuto, con lo stesso ritmo verticale in ogni template.

Radius

Quattro raggi di base. Varianti esistenti dei Servizi: pulsanti della scheda 8px e collegamenti ai servizi vicini 10px. Non uniformarli automaticamente: la geometria fa parte della variante.

Card

Le card condividono i token di base, con composizioni specifiche per contenuto. Gli esempi itinerario e quick-link seguenti non rappresentano le card dell’archivio Servizi.

Standard — griglie di itinerari e indici

Compact — righe di collegamento, quick-link

Raggi per famiglia

I valori iniziali restano quelli del tema. Schede, mappe e immagini standard, filtri condivisi, contenitore logo e newsletter hanno controlli distinti. Le varianti locali conservano le proprie misure. La base storica può influenzare più famiglie quando i loro campi sono vuoti.

Servizi: componenti di origine degli Stili

Le misure approvate sono valori iniziali del sistema. Ogni variante conserva la propria geometria e il proprio comportamento responsive. Nessuna esclusione permanente dagli Stili.

Scheda ordinaria e scheda partner

Due composizioni distinte dell’archivio. Il partner conserva immagine e maggiore estensione desktop; la scheda ordinaria resta testuale.

Azioni compatte

Altezza minima 48px; padding verticale 6px; testo 0.875rem e interlinea 1.25 nelle varianti che li adottano. Il contenuto può aumentare l’altezza.

Azioni iniziali mobile

Padding orizzontale 8px e raggio 8px. La disposizione può andare a capo quando lo spazio non basta.

Barra azioni mobile

Padding orizzontale dei pulsanti 12px; raggio 8px; spazio inferiore per la safe area. Visibilità governata dallo scorrimento.

Categorie e ricerca mobile

Distacco 16px tra categorie e ricerca; il desktop mantiene la propria composizione.

Contatti sintetici mobile

Padding 0.75rem 1rem; nessuna altezza minima aggiuntiva. Il contenuto determina l’altezza.

Collegamenti ai servizi vicini

Raggio 10px: variante distinta dalle schede standard.

Varianti collegate agli Stili

Valori iniziali ricavati dai Servizi e utilizzati dai CSS di produzione. Servizi bici, galleria, mappa, pulsanti, servizi vicini e foto principale sono regolabili dal pannello con controlli distinti. Per i servizi vicini è regolabile anche il solo padding verticale; quello orizzontale conserva il valore iniziale. Anche i contatti mobile hanno il controllo del solo padding verticale, mantenendo 1rem ai lati. È regolabile anche il padding laterale dei pulsanti iniziali mobile. È regolabile anche il padding laterale di Cerca e Carica altri servizi nell’archivio. Resta non regolabile il padding della barra mobile.

Pulsanti scheda — raggio

8px — regolabile dal pannello

Foto principale — raggio

14px — regolabile dal pannello

Servizi vicini — raggio

10px — regolabile dal pannello

Servizi vicini — padding (regolabile solo verticale)

.85rem .95rem — regolabile dal pannello

Azioni iniziali mobile — padding orizzontale

8px — regolabile dal pannello

Azioni sticky — padding orizzontale

12px

Contatti sintetici mobile — padding (regolabile solo verticale)

.75rem 1rem — regolabile dal pannello

Ricerca e caricamento risultati — padding orizzontale

16px — regolabile dal pannello

Servizi bici — raggio

10px — regolabile dal pannello

Galleria servizio — raggio

12px — regolabile dal pannello

Mappa servizio — raggio

14px — regolabile dal pannello

I raggi standard sono separati per famiglia; la base storica resta disponibile per compatibilità. Le altre varianti sono censite qui, ma non ancora tutte regolabili dal pannello.

Homepage — varianti degli Stili

La home adotta la gerarchia approvata nel mockup test.99. I titoli delle schede principali condividono la scala dell’archivio Servizi. Le regole sono locali alla home e agli esempi qui sotto: non cambiano i preset globali e non aggiungono controlli al pannello.

Titoli di sezione e introduzioni

Titoli Space Grotesk 600: clamp(1.75rem, 2.5vw, 2.25rem), interlinea 1.12. Introduzioni Inter 400: 1.125rem su mobile e 1.25rem da 48rem, interlinea 1.5, massimo 68ch. Con una base di 16px: titoli 28–36px e introduzioni 18–20px.

Titoli delle schede principali

Itinerari, articoli del Diario, evento principale, partner e pacchetti: Space Grotesk 600, clamp(1.22rem, 1.12rem + .42vw, 1.55rem), interlinea 1.08, spaziatura lettere -.025em. È la stessa formula dei Servizi: circa 19.5–24.8px con base 16px. I link evento non sono sottolineati a riposo; la sottolineatura compare al passaggio del puntatore o al focus da tastiera.

Titoli compatti

Territori e otto categorie Servizi della home: Space Grotesk 600, 1.125rem (18px), interlinea 1.2. Le categorie restano quattro per riga su desktop. Tutte le schede territorio mantengono la stessa altezza; la mappa segue quella complessiva delle prime tre.

Testi e dati

Estratto dell’articolo in evidenza: Inter 400, 1rem (16px), interlinea 1.55. Descrizioni, località e date: Inter .875rem (14px). Link e filtri Diario: .875rem, con area interattiva minima esistente di 44px. Etichette e badge: Inter .8125rem (13px). Dati tecnici degli itinerari: JetBrains Mono .8125rem. Menu desktop della home: Inter .9375rem (15px).

Finder — ricerca principale

Raggio pannelli condiviso, inizialmente 24px; controlli e collegamenti rapidi con raggio 12px. Padding e composizione propri dell’hero. Selettori con altezza minima 44px e pulsante 46px; da 35rem i minimi diventano 48 e 50px. La tipografia dell’hero conserva le misure precedenti.

Raggi e padding delle schede

Schede editoriali: raggio schede condiviso e padding standard clamp(1rem, .85rem + .7vw, 1.35rem). Territori: corpo .85rem 1rem. Categorie Servizi della home: clamp(.9rem, .82rem + .35vw, 1.15rem). Le geometrie delle varianti restano distinte.

Newsletter

Raggio dedicato condiviso; padding 1.25rem su mobile e 1.5rem da 48rem. Titolo 1.5rem (24px), testo .875rem (14px). Il pubblico vede solo l’output di uno shortcode registrato e non vuoto. Lo shortcode letterale non viene mostrato. Da test.100, [bikefvg_newsletter_demo] permette di mostrare una demo anche nella home pubblica, con campi disattivati e dicitura Demo. L’anteprima senza modulo resta riservata agli amministratori. Gli stili interni del provider richiedono la verifica sul modulo reale.

Footer — navigazione e chiusura sito

Da test.131 il footer condiviso usa fondo Ink e testi Paper, con quattro colonne desktop: brand, Esplora, Attività e Contatti. I link del footer sono più quieti del menu header: Inter 400, .9375rem (15px), cassa naturale. Una barra inferiore separata raccoglie copyright e collegamenti informativi. Due colonne su tablet e una colonna su mobile.

Eccezione corallo — Sei un’attività del territorio?

Il blocco di acquisizione partner mantiene colore, tipografia e composizione propri. È un’eccezione approvata alla regola delle azioni corallo e non eredita la nuova scala dei titoli di sezione.

Gap, padding e distanza tra schede

Il controllo Spazio tra i contenuti delle schede modifica il token card.gap, usato dagli indici Territori e Discipline. Non modifica il padding delle card homepage né il distacco tra le card della griglia. I raggi continuano a usare le rispettive famiglie del pannello Stili.

Misure dichiarate dal tema; gli esempi usano il CSS effettivo della home. Stili salvati nell’editor e plugin possono influire sulla pagina installata. Le pagine Servizi restano il riferimento approvato per le proprie varianti.

Servizi — varianti approvate

Archivio: card ordinaria testuale; partner con immagine e maggiore estensione nella griglia desktop. Essere verificato non rende un servizio partner. Titoli, posizione, dotazioni e azioni mantengono la loro gerarchia; su mobile i titoli vanno a capo.

Scheda singola: desktop invariato; su mobile metadati semplificati, contatti compatti e azioni inferiori visibili dopo il superamento delle azioni iniziali. Queste composizioni restano varianti specifiche.

Campioni da servizi pubblicati, generati dallo stesso componente dell’archivio. I collegamenti aprono le schede reali.

Azioni compatte — riferimento condiviso

Altezza minima 48px, inclusi bordo e padding; testo 0.875rem, interlinea 1.25 e padding verticale 6px. Sono misure minime: il controllo può crescere con il testo. Padding orizzontale: 16px nei filtri, 8px nelle azioni iniziali mobile, 12px nella barra inferiore.

Gli esempi mostrano dimensioni e focus; non eseguono una ricerca. La classe bikefvg-control–compact è una variante esplicita per i nuovi componenti, non una modifica globale a tutti i pulsanti.

Spazio fra categorie e ricerca su mobile: 16px. I testi secondari delle card usano 0.875rem; tipologie e dotazioni 0.8125rem. I titoli conservano le rispettive scale. Badge statici e controlli interattivi hanno ruoli differenti.

Altre varianti del sistema: i teaser editoriali di Discipline/Territori (immagine + titolo, senza cornice — mai stati una card) e i pannelli informativi tecnici come quickfacts o attributi, con misure e composizione proprie.

Filtri

Base condivisa dei filtri, con layout specifico per i Servizi (categorie, ricerca e filtri aggiuntivi). Il colore del pulsante resta accent su entrambi. Il pulsante "Applica filtri" è uno strumento di raffinamento, non la CTA di conversione: action resta riservato a "Trova itinerari" e "Scarica GPX".

Dove Tutti i territori

Come Tutte le discipline

Caratteristiche

Adatto alle famiglie Compatibile e-bike

Applica filtri

Non nel layer comune, di proposito: la disposizione mobile di filter-options (qui 2 elementi in riga) cambia in base al numero di campi — su Servizi, con 5 caratteristiche, diventa una griglia 2×2+1. È una differenza di contenuto, non di sistema.

Breadcrumb e navigazione interna

Un solo breadcrumb secondario prima della hero e una sola barra sticky per gli indici delle pagine lunghe. I template definiscono le voci; il sistema comune governa gerarchia, overflow, focus e stato attivo.

Pagine indice

Itinerari, Discipline, Territori e Servizi condividono la stessa cornice: altezza della hero, scala del titolo, larghezza del testo introduttivo, ritmo delle sezioni e alternanza Paper/Panel. Filtri e griglie restano specifici del contenuto.

Tipografia

Tre famiglie, ruoli distinti: Space Grotesk per identità e titoli, Inter per corpo e interfaccia, JetBrains Mono esclusivamente per dati tecnici. Display e H1 sono scale separate: la prima è riservata all’hero.

Badge e chip

Regola canonica: badge = etichetta statica, chip = selezione interattiva. Non sono intercambiabili.

Difficoltà

Nelle card si mostra solo la difficoltà complessiva. Il dettaglio tecnica/fisica appartiene alla scheda itinerario, sempre visibile e mai in tooltip.

Tassonomia congelata

Gli slug sono identificatori stabili e non traducibili: filtri, deep-link e dataset usano sempre questi, mai il nome visibile.

Territori (11)

• tarvisiano — Tarvisiano
• carnia — Carnia
• gemonese — Gemonese
• cividale-natisone-torre — Cividale, Natisone e Torre
• friuli-collinare-san-daniele — Friuli Collinare e San Daniele
• udine-dintorni — Udine e dintorni
• gorizia-collio — Gorizia e Collio
• trieste-carso — Trieste e Carso
• montagna-pordenonese — Montagna Pordenonese
• pordenone-dintorni — Pordenone e dintorni
• laguna-costa — Laguna e Costa

Discipline (5)

• cicloturismo — Cicloturismo
• bici-strada — Bici da strada
• gravel-xc — Gravel / Cross Country
• all-mountain-enduro — All Mountain / Enduro
• downhill — Downhill

«Famiglia» non è una disciplina ma un attributo trasversale. «Pump track» non è una disciplina ma una struttura, quindi un Servizio.