/* ========================================================================== LIUTERIA D'INSIEME - TOKEN DI DESIGN -------------------------------------------------------------------------- Questo file contiene SOLO le "manopole" del sito: colori, dimensioni del testo, spaziature, ombre. Non contiene regole di layout. >>> Se vuoi cambiare l'aspetto del sito, quasi sempre basta modificare >>> un valore QUI, e cambia in tutte le 37 pagine contemporaneamente. Come si legge una riga: --colore-marchio: #b3120c; | | nome del token valore (un colore, una misura...) Nel foglio di stile principale (site.css) il token viene richiamato cosi': color: var(--colore-marchio); NON cancellare righe da questo file: se un token sparisce, le regole che lo usano smettono di funzionare. Cambia il valore, non il nome. ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. COLORI ------------------------------------------------------------------ Il rosso storico del sito era #CC0000, che su fondo bianco si fermava a 4,3:1 e non raggiungeva il 4,5:1 richiesto dalle linee guida di accessibilita' WCAG 2.1 livello AA. Scurito a #b3120c arriva a 6,98:1. Se lo schiarisci, ricontrolla il contrasto su https://webaim.org/resources/contrastchecker/ ------------------------------------------------------------------ */ /* Colore del marchio: righe, titoli di sezione, link, voce di menu attiva. E' il rosso storico del sito, scurito quel tanto che basta a passare il controllo di contrasto (vedi sopra). */ --colore-marchio: #b3120c; /* Versione piu' scura: usata al passaggio del mouse e nei sottomenu */ --colore-marchio-scuro: #8a0d08; /* Velo rosato appena accennato: sfondo di riquadri in evidenza */ --colore-marchio-velo: #fdf1f0; /* Testo principale (quasi nero, leggermente caldo) */ --colore-testo: #26211e; /* Testo secondario: didascalie, note, piè di pagina */ --colore-testo-tenue: #5c5450; /* Sfondi. Il secondo tono non e' un crema caldo ma un grigio-carta quasi neutro: il colore della carta da banco del laboratorio. Serve che le fotografie dei legni — palissandro, abete, ebano — risaltino senza che lo sfondo entri in competizione con loro, e che non ci sia l'ennesimo fondo color panna. */ --colore-fondo: #ffffff; /* sfondo delle pagine */ --colore-fondo-tenue: #f2f1ee; /* sfondo di sezioni e riquadri */ --colore-fondo-scuro: #2b2522; /* barra del menu e piè di pagina scuro */ /* Testo sopra il fondo scuro */ --colore-testo-scuro: #e9e4de; /* --- Barra del menu ----------------------------------------------- Il menu e' su fondo chiaro, con la voce corrente sottolineata in rosso. E' l'impostazione piu' attuale, e lascia al rosso del marchio il ruolo di unico accento. PER TORNARE ALLA BARRA SCURA del sito precedente basta cambiare questi quattro valori: --nav-fondo: #2b2522; --nav-testo: #cfc8c2; --nav-testo-attivo: #ffffff; --nav-sotto-fondo: #2b2522; ------------------------------------------------------------------ */ --nav-fondo: #ffffff; --nav-testo: #4a423e; --nav-testo-attivo: var(--colore-marchio); --nav-sotto-fondo: #ffffff; /* Linee e bordi */ --colore-linea: #ded8d0; --colore-linea-tenue: #ece7e0; /* Anello di messa a fuoco: il contorno che appare quando si naviga con il tasto TAB. Deve essere ben visibile e diverso dal rosso del marchio, altrimenti non si distingue dallo stato "mouse sopra". */ --colore-focus: #0b57d0; --colore-focus-scuro: #ffffff; /* versione per fondi scuri */ /* ------------------------------------------------------------------ 2. CARATTERI ------------------------------------------------------------------ Si usano solo caratteri gia' presenti nei computer e nei telefoni: nessun file da scaricare, nessuna dipendenza da servizi esterni. ------------------------------------------------------------------ */ /* Due caratteri, due mestieri diversi. --font-titoli i titoli: un graziato, piu' adatto al tono artigianale del laboratorio --font-testo tutto il resto: paragrafi, elenchi, menu, etichette, schede tecniche, pie' di pagina Nessuno dei due va scaricato da internet: sono caratteri gia' presenti nei computer e nei telefoni. Il browser usa il primo della lista che trova installato, gli altri sono riserve. Il sito non dipende da Google Fonts ne' da altri servizi esterni, e non fa attendere nessuno. Se un giorno volessi un carattere particolare, va messo in una cartella del sito e dichiarato con una regola @font-face: non va collegato a un servizio esterno. */ --font-titoli: "Iowan Old Style", Charter, "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; --font-testo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; /* ------------------------------------------------------------------ 3. SCALA DEL TESTO ------------------------------------------------------------------ Scala modulare con rapporto 1,2 (terza minore) a partire dai 17px del testo corrente. 1rem = 16px, quindi 17px = 1.0625rem. 17 e non 16: il pubblico del sito comprende musicisti e collezionisti non giovanissimi, e un punto in piu' sul testo corrente costa nulla e si sente. Le misure sono in rem cosi' il testo si adatta se l'utente ingrandisce i caratteri dal browser (requisito di accessibilita': il sito deve reggere lo zoom al 200%). I titoli usano clamp(minimo, valore-fluido, massimo): crescono in modo continuo con la larghezza dello schermo, senza salti. ------------------------------------------------------------------ */ --testo-xs: 0.75rem; /* 12px - note legali, didascalie minime */ --testo-sm: 0.875rem; /* 14px - menu, didascalie, piè di pagina */ --testo-base: 1.0625rem; /* 17px - testo corrente (mai piu' piccolo) */ --testo-md: 1.25rem; /* 20px - titoli di scheda, h4 */ --testo-lg: 1.5rem; /* 24px - prezzi */ --testo-xl: 1.8125rem; /* 29px */ /* Titoli fluidi */ --titolo-1: clamp(1.875rem, 1.15rem + 3.1vw, 3.5rem); /* 30 -> 56px */ --titolo-2: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); /* 24 -> 36px */ --titolo-3: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);/* 18 -> 21px */ /* Interlinea */ --interlinea-stretta: 1.2; /* titoli grandi */ --interlinea-media: 1.35; /* titoli piccoli, menu */ --interlinea-larga: 1.65; /* testo corrente: la piu' leggibile */ /* Spaziatura fra lettere (solo per testo tutto maiuscolo, che altrimenti risulta compresso e faticoso da leggere) */ --spaziatura-maiuscolo: 0.06em; /* ------------------------------------------------------------------ 4. SPAZIATURE ------------------------------------------------------------------ Scala unica basata su 4px. Usare SEMPRE uno di questi valori invece di numeri sparsi: e' cio' che tiene il sito visivamente coerente. ------------------------------------------------------------------ */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.5rem; /* 24px */ --sp-6: 2rem; /* 32px */ --sp-7: 3rem; /* 48px */ --sp-8: 4rem; /* 64px */ --sp-9: 6rem; /* 96px */ /* Spazio verticale fra due blocchi di contenuto (paragrafi, gallerie, sezioni). Cresce sugli schermi grandi. */ --ritmo: clamp(var(--sp-5), 3vw, var(--sp-7)); /* Spazio fra una sezione e l'altra */ --ritmo-sezione: clamp(var(--sp-7), 6vw, var(--sp-9)); /* ------------------------------------------------------------------ 5. LARGHEZZE E MARGINI DI PAGINA ------------------------------------------------------------------ */ /* Larghezza massima del contenuto (il vecchio sito era fisso a 900px) */ --larghezza-pagina: 72rem; /* 1152px */ /* Larghezza massima dei blocchi di solo testo: circa 70 caratteri per riga, la misura piu' comoda da leggere. Oltre, l'occhio fatica a ritrovare l'inizio della riga successiva. */ --larghezza-testo: 38rem; /* 608px, circa 68 caratteri per riga con il testo a 17px: la misura piu' comoda da leggere. Oltre gli 80 caratteri l'occhio fatica a ritrovare l'inizio della riga successiva. */ /* Margine laterale: non scende mai sotto 16px sui telefoni */ --margine-laterale: clamp(1rem, 4vw, 2.5rem); /* ------------------------------------------------------------------ 6. BORDI, OMBRE, ANIMAZIONI ------------------------------------------------------------------ */ --raggio-sm: 3px; --raggio: 6px; --raggio-lg: 10px; --raggio-tondo: 999px; /* Il vecchio sito usava un'ombra dura "3px 3px 1px #999". Qui e' sostituita da ombre morbide e stratificate, piu' discrete. */ --ombra-sm: 0 1px 2px rgba(38, 33, 30, 0.08), 0 1px 3px rgba(38, 33, 30, 0.06); --ombra: 0 2px 4px rgba(38, 33, 30, 0.08), 0 4px 12px rgba(38, 33, 30, 0.08); --ombra-lg: 0 4px 8px rgba(38, 33, 30, 0.10), 0 12px 32px rgba(38, 33, 30, 0.14); /* Durata delle transizioni. Vengono azzerate automaticamente per chi ha attivato "riduci animazioni" nelle impostazioni del sistema. */ --transizione: 160ms ease; /* Spessore di TUTTE le righe rosse del sito: la sottolineatura dei titoli di sezione, il divisore fra un blocco e l'altro, la riga sopra il titolo delle schede, quella accanto alla descrizione degli strumenti, il bordo superiore del piè di pagina, il segno sotto la voce di menu corrente. Cambiandolo qui cambiano tutte insieme e restano coerenti fra loro. */ --regola: 2px; /* Dimensione delle icone (social, telefono, lente) */ --icona: 1.15em; --icona-lg: 1.4rem; /* La lente che compare sopra le foto ingrandibili. E' un disegno SVG scritto qui dentro invece che in un file a parte: nessuna immagine da caricare e nessun file da non perdere. Per cambiarne il colore si sostituisce stroke='white'. */ --lente: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.7' cy='10.7' r='6.2'/%3E%3Cpath d='M15.3 15.3 20.6 20.6'/%3E%3Cpath d='M10.7 8.2v5M8.2 10.7h5'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- Il sito e' pensato per sfondo chiaro. Questa riga impedisce ai browser di applicare un tema scuro automatico stravolgendo i colori. -------------------------------------------------------------------------- */ :root { color-scheme: light; }