/** * Token del design system Soluzione Tende. * * Un solo posto dove vivono colori, caratteri, spaziature e raggi. Ogni altro * foglio di stile usa queste variabili e mai valori letterali: cambiare la * palette deve costare una riga, non una ricerca in tutto il progetto. */ :root { /* --- il rame del marchio ------------------------------------------- `--st-copper` e' il rame **dichiarato nella tavola 1** del documento di marca: `#B45A17`. Fino a ora il sito usava `#AE4C0B`, misurato sui file del logo: vicino, ma non lo stesso, e fra una misura dedotta da un'immagine e un valore scritto nella specifica vince la specifica. Le altre tinte esistono perche' un solo rame non basta. In particolare `--st-copper-text`: il rame della tavola, su fondo avorio, arriva a 4,34:1 — sotto la soglia di 4,5 richiesta per il testo normale. Come *superficie* va benissimo (il bianco sopra di lui e' 4,76:1, e i pulsanti della tavola sono esattamente cosi'); come *inchiostro piccolo* no. Sono lo stesso marchio adattato al fondo, non due colori diversi. Le genera e le verifica `tools/brand_palette.py`. */ --st-copper: #B65532; /* la terracotta del marchio: 4,84:1 col bianco sopra */ --st-copper-text: #B45431; /* solo testo piccolo su chiaro: 4,50:1 su avorio */ --st-copper-dark: #9E4A2B; /* stato premuto */ --st-copper-light: #CA623D; /* solo su fondi scuri: 4,52:1 sull'inchiostro */ --st-copper-soft: #F9F1EE; /* sfondi appena accennati */ --st-copper-rgb: 182, 85, 50; /* trasparenze: rgba(var(--st-copper-rgb), .14) */ /* --- neutri --------------------------------------------------------- */ --st-charcoal: #22272C; --st-charcoal-rgb: 34, 39, 44; /* per i veli semitrasparenti */ --st-sand: #E7E2DA; --st-ivory: #F7F4EF; --st-white: #FFFFFF; --st-text: #15181B; /* l'inchiostro del marchio */ --st-muted: #7B766D; /* 4,51:1 su bianco */ --st-border: #DED8D0; /* linee di separazione, decorative */ --st-border-soft: #E9E5DF; /* il filo della tavola 2: si intuisce, non si vede */ --st-border-strong: #9D8B73; /* bordo dei campi: dice dove si scrive */ --st-success: #477255; --st-error: #A53A32; /* --- superfici della tavola 2 --------------------------------------- Campionate sul render e riportate alla scala della tavola 1: il PDF scurisce e desatura le tinte chiare (l'avorio dichiarato `#F7F4EF` si legge `#F2EFEC`), quindi si e' partiti dai valori scritti e non dai pixel. Sono cinque gradazioni molto vicine fra loro: e' cosi' che la tavola separa le fasce senza usare un solo bordo marcato. */ --st-surface-topbar: #F7F4EF; /* avorio pieno: la fascia piu' alta */ --st-surface-panel: #F7F4F0; /* pannello dei prodotti */ --st-surface-promo: #F1E8DF; /* le due schede promozionali, piu' calde */ --st-surface-quote: #FCFAF8; /* le testimonianze */ --st-surface-band: #FAF8F5; /* striscia newsletter */ --st-surface-footer: #FBF9F6; /* footer: chiaro, mai antracite */ /* --- caratteri ---------------------------------------------------- */ --st-font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --st-font-heading: "Montserrat", "Poppins", Georgia, serif; /* Il carattere dei titoli della tavola 2. H1 e titoli di sezione della home sono in un **serif**, non in Montserrat: e' la scelta che da' alla pagina il suo tono editoriale, e sostituirlo con un sans a peso alto cambia il carattere della home piu' di qualunque colore. Il serif dei titoli e' quello che coincide con la tavola: rapporto larghezza/altezza-maiuscola 11,10 contro 10,87 misurato, con lo stesso contrasto e le stesse grazie sottili. Le altre candidate stanno fra 11,5 e 11,8, EB Garamond a 9,9. Sottoinsieme latino, un solo file variabile, 38 KB. */ --st-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; /* --- scala tipografica ----------------------------------------------- LA TAVOLA E' DISEGNATA PICCOLA, IL SITO NON DEVE ESSERLO Riportando la tavola 2 alla sua vista da 1920 px, i corpi che ne escono sono 11 px per la navigazione, 10 per i titoli della trust strip, 9,5 per la microcopy e 21 per i titoli di sezione. Sono le misure di un mockup, dove il testo e' un segnaposto grigio che riempie una forma: a schermo diventano un sito che si guarda ma non si legge, e la prima cosa che si nota e' che tutto e' minuscolo. Qui si tiene **la struttura** della tavola — sette schede su una riga, la fascia 51/24,5/24,5, la trust strip a filo dell'hero, le proporzioni fra i blocchi — e si porta la **scala** a valori reali. La pagina cresce da 1340 a circa 1800 px: e' il prezzo di un testo che si legge, ed e' il prezzo giusto. La scala e' un quinta maggiore addolcita (1,25 in alto, 1,15 in basso), cosi' ogni gradino si distingue dal successivo senza salti. */ --st-fs-hero: clamp(2.6rem, 4.4vw, 4rem); /* 42 → 64 */ --st-fs-h1: clamp(2.5rem, 3.85vw, 3.6rem); /* 40 → 58 — vedi global.css */ --st-fs-h2: clamp(1.9rem, 2.65vw, 2.35rem); /* 30 → 38 */ --st-fs-h3: clamp(1.45rem, 1.8vw, 1.7rem); /* 23 → 27 */ --st-fs-lead: 1.125rem; /* 18 — sottotitoli e testi introduttivi */ --st-fs-body: 1rem; /* 16 */ --st-fs-ui: .9375rem; /* 15 — navigazione, link di elenco, pulsanti */ --st-fs-small: .875rem; /* 14 — etichette, meta, nomi di scheda */ --st-fs-micro: .8125rem; /* 13 — topbar, note; sotto non si scende */ /* --- spazi -------------------------------------------------------- */ --st-space-1: 4px; --st-space-2: 8px; --st-space-3: 16px; --st-space-4: 24px; --st-space-5: 40px; --st-space-6: 64px; --st-space-7: 96px; /* --- la scala della specifica --------------------------------------- Sei valori, e nient'altro: ogni distanza dei mockup cade su uno di questi. Convivono con i sette qui sopra invece di sostituirli perche' quelli reggono le pagine gia' costruite, e cambiarli tutti insieme significherebbe rifare in un colpo solo cio' che va rifatto una pagina per volta. I fogli nuovi usano questi. */ --st-xs: 6px; /* icona ↔ testo, pallini colore fra loro */ --st-s: 10px; /* campi di una stessa riga, opzioni di una griglia */ --st-m: 16px; /* schede di una riga, imbottitura di schede piccole */ --st-l: 22px; /* colonne principali, imbottitura di schede grandi */ --st-xl: 32px; /* blocchi dentro una pagina */ --st-xxl:48px; /* sezioni della pagina */ /* --- il pulsante ------------------------------------------------------- TRE SISTEMI DICEVANO TRE COSE DIVERSE `.st-btn` (92 usi), `.st-button` (10) e `.c-btn` (8) definivano ognuno la propria geometria: 48 px alto e minuscolo i primi due, 46 px e maiuscolo il terzo. Sullo stesso percorso — catalogo, scheda, configuratore — il pulsante principale cambiava tre volte forma. Non si sceglie per gusto: due sistemi su tre gia' concordavano, e sono quelli che coprono centodue usi su centodieci. La geometria che vince e' la loro, e il terzo converge — cioe' otto pulsanti si allineano al resto del sito invece che il resto del sito a otto pulsanti. Da qui in avanti nessuna delle tre classi porta piu' numeri propri: li leggono da queste righe, e non possono tornare a divergere. Il maiuscolo di `.c-btn` non si perde per svista: e' una scelta di disegno che vale la pena riprendere quando la home verra' rifatta e si potra' guardarla a schermo. Oggi, senza poterla vedere, la coerenza vale piu' del carattere. */ --st-btn-h: 48px; --st-btn-pad-y: 13px; --st-btn-pad-x: 30px; --st-btn-bordo: 1.5px; /* I pulsanti sono pastiglie. E' il segno piu' economico che un'interfaccia ha per sembrare alla mano invece che amministrativa, e non costa niente a nessuno: la stessa area premibile, la stessa etichetta. */ --st-btn-radius: var(--st-r-pieno, 999px); /* Il corpo dei pulsanti ha un nome suo perche' e' una decisione a se': se un giorno i pulsanti devono parlare piu' forte, si cambia qui e non in quaranta regole. Il **valore** pero' viene dalla scala — .95rem erano 15,2 px, due decimi sotto il gradino, cioe' esattamente il tipo di scarto che non si vede e che sporca tutto. */ --st-btn-size: var(--st-fs-ui); --st-btn-peso: 600; --st-btn-gap: var(--st-space-2); /* GLI ANGOLI SI SONO APERTI Dieci pixel su una scheda larga trecento sono un angolo smussato: si vede che qualcuno ha tolto lo spigolo, non che la forma e' morbida. La differenza fra un sito che sembra un gestionale e uno che sembra un negozio dove si entra volentieri sta quasi tutta qui e nelle ombre. I campi restano piu' stretti dei contenitori: un campo troppo tondo smette di sembrare un posto dove si scrive. */ --st-radius: 20px; --st-radius-sm: 12px; --st-radius-lg: 28px; /* Ombre larghe e basse, non strette e scure: una scheda deve sembrare appoggiata sulla carta, non ritagliata e incollata sopra. */ --st-shadow-sm: 0 4px 16px -6px rgba(21, 24, 27, .10); --st-shadow: 0 22px 48px -22px rgba(21, 24, 27, .26); /* La larghezza massima del contenuto. La tavola 2 tiene il contenuto al 61,2% della sua vista da 1920, cioe' 1176 px. E' la proporzione giusta per quel disegno, ma con i corpi riportati a valori reali diventa stretta: sette schede categoria in 1176 px danno etichette da 159 px, dove un nome vero come «Tende a Rullo Filtranti» va a capo comunque. 1280 e' il compromesso: a 1920 occupa il 67% — vicino al 61% del disegno — e a 1440 lascia 80 px per lato, che e' il minimo perche' il contenuto non sembri incollato ai bordi. A 1320 ne restavano 60 e a schermo si vedeva. Le schede categoria vengono 171 px, la fascia commerciale resta 51/24,5/24,5. Le righe di testo non seguono: hanno un `max-width` in `ch` dove serve, perche' una riga larga 1280 px non si legge. */ /* I MOCKUP TENGONO IL CONTENUTO A 1336 PX Misurato sulle nove tavole: le colonne stanno su 1336 con margini di una cinquantina di pixel per lato. A 1280 la pagina lasciava due bande vuote ai bordi, e nel configuratore la colonna dell'anteprima — quella che mostra la tenda — finiva a 350 px, la piu' stretta delle tre. */ --st-container: 1336px; /* Il margine laterale del contenitore, in un posto solo. `.st-container` lo calcolava con `--st-space-4` (24 px per lato) e il contenitore dell'area cliente con `--st-gutter` (52 px): a 1200 px di finestra la stessa colonna misurava 1152 px in vetrina e 1096 nell'area cliente. Cinquantasei pixel di differenza fra due pagine dello stesso sito, senza motivo — e nessuno dei due valori era «quello giusto»: erano due file scritti in momenti diversi. Vince la misura della vetrina, che copre tutte le pagine tranne tre. */ --st-container-margine: var(--st-space-4); /* La colonna del riepilogo: la stessa nel carrello e alla cassa. Erano 340 px di la' e 420 di qua, con 36 px di distacco contro 40 — passando dal carrello alla cassa il riquadro dei totali cambiava larghezza e si spostava, e la pagina sembrava ridisegnarsi. */ --st-col-riepilogo: 420px; --st-gutter: 52px; --st-transition: .18s ease; /* --- i punti di rottura ------------------------------------------------ NON SONO TOKEN, E NON POSSONO ESSERLO `@media` non legge le variabili CSS: e' una limitazione del linguaggio, non una dimenticanza. Scrivere `@media (max-width: var(--x))` non funziona in nessun browser. Restano quindi numeri scritti a mano, ed e' per questo che servono **pochi** e dichiarati. Oggi i fogli ne contengono trentadue distinti, ventiquattro dei quali fuori da qualunque scala: nove valori diversi fra 700 e 782 px per dire la stessa cosa. La scala canonica e' questa: 620 telefono -> tablet stretto 900 tablet -> tablet largo 1080 tablet largo -> laptop 1140 laptop -> desktop 1400 desktop -> desktop largo Le coppie `n` / `n+1` sono ammesse: servono a far combaciare un `max-width` con il `min-width` che gli succede. Chi scrive CSS nuovo usa questi. Chi vuole sapere quanto ci si e' allontanati chiede a `wp fymera-st verifica-stile --solo=soglie`, che e' cio' che rende questa scala una regola invece di un auspicio. I trentadue valori esistenti **non sono stati normalizzati**: spostare una soglia cambia dove un layout si rompe, e questo va guardato a schermo. E' un lavoro della fase visiva, non di questa. */ /* --- misure dei componenti ------------------------------------------ Stanno qui e non nei singoli fogli perche' si tengono l'un l'altra: l'altezza dell'header decide `scroll-padding-top`, quella della topbar decide dove comincia l'hero, e la trust strip deve stare dentro l'hero con il suo respiro. Cambiarne una a mano, altrove, le disallinea. */ --st-topbar-h: 42px; --st-header-h: 76px; --st-catrow-h: 52px; /* la riga delle categorie, sotto i comandi */ --st-hero-h: 340px; --st-trust-h: 74px; /* --- la tavolozza dei mockup ------------------------------------------ Campionata sulle nove tavole. Non sostituisce quella di marca qui sopra: le affianca. Dove le due si sovrappongono i valori sono vicinissimi — il rame di marca e' `#B45A17`, quello campionato `#A8501B` — e vince quello di marca per le superfici, mentre per il testo si continua a usare la variante piu' scura, che e' l'unica a passare il contrasto. La regola che conta non e' quale rame: e' **quanto**. Nei mockup il rame sta su pulsanti, pastiglie, un pallino, una sottolineatura di due pixel, un bordo, un'icona, un testo di collegamento. Mai su un'area grande. */ --st-p-rame: var(--st-copper); /* superfici e pulsanti */ --st-p-rame-testo: var(--st-copper-text); /* testo e icone su chiaro */ --st-p-rame-scuro: var(--st-copper-dark); /* passaggio del mouse */ --st-p-rame-tenue: #F9F1EE; /* voce attiva, opzione scelta */ --st-p-inchiostro: #15181B; /* titoli, valori, testo forte — dal marchio */ --st-p-grigio: #6F6A64; /* descrizioni, etichette */ /* Il grigio della terza voce e' stato **scurito**. `#9A948C`, campionato dai mockup, sta a 3.00:1 su bianco e 2.85:1 sul crema: sotto soglia in entrambi i casi. La regola che avevo scritto — «si puo' usare sopra i 16 px» — era sbagliata due volte: l'esenzione per il testo grande comincia a 24 px, non a 16. `#726C64` fa 5.17:1 su bianco e 4.81:1 sul crema, e resta abbastanza chiaro da essere ancora la voce piu' tenue della gerarchia. */ --st-p-debole: #726C64; /* note, unita', conteggi, segnaposto */ /* Il valore originale sopravvive per cio' che **non e' testo**: bordi dei pallini colore, glifi separatori, icone spente. Li' il contrasto di testo non si applica, e il chiaro serve. */ --st-p-decor: #9A948C; --st-p-riga: #EAE4DC; /* ogni bordo e separatore */ --st-p-riga-chiara: #F2EDE6; /* separatori dentro le schede */ --st-p-crema: #FAF6F1; /* fasce, riquadri informativi */ --st-p-sabbia: #F4F0EB; /* fondo delle immagini di opzione */ --st-p-scuro: #22272C; /* pastiglie «in evidenza» */ /* Stati: fondo tenue, testo saturo. Solo per le pastiglie d'ordine. */ --st-st-ok-bg: #EAF3EC; --st-st-ok-fg: #2F6B4F; --st-st-corso-bg: #FBF0E3; --st-st-corso-fg: #9A6018; --st-st-attesa-bg: #EAF0F6; --st-st-attesa-fg: #2F5680; --st-st-neutro-bg: #F1EFEC; --st-st-neutro-fg: #6F6A64; /* --- forme dei mockup ------------------------------------------------- Il bordo definisce la scheda, non l'ombra. L'unica ombra vera e' quella delle lastre che galleggiano sopra una fotografia. */ --st-r-scheda: 20px; --st-r-grande: 28px; --st-r-campo: 12px; --st-r-pieno: 999px; --st-ombra-scheda: 0 4px 16px -8px rgba(21, 24, 27, .12); --st-ombra-lastra: 0 24px 50px -24px rgba(21, 24, 27, .30); } /* ==================================================================== * LA TAVOLOZZA DEL TEMA BASE PARLA LA NOSTRA LINGUA * * Il tema sotto ha la sua tavolozza di serie, ed e' blu: * * --theme-palette-color-1 #2872fa collegamenti, accenti * --theme-palette-color-2 #1559ed stato attivo * --theme-palette-color-3 #3A4F66 testo * --theme-link-initial-color #2872fa * --theme-form-field-border-focus-color #2872fa * * Finora il marchio esisteva **solo dove avevamo scritto CSS**. Ovunque non * fossimo passati — la paginazione del catalogo, l'ordinamento, il conteggio * dei risultati, il contorno dei campi quando si scrive — usciva il blu. Il * numero della pagina corrente era `#1559ed` pieno, in mezzo a una pagina di * rame e crema. * * Non e' un difetto che si chiude a colpi di regole nuove: ogni componente del * tema che non abbiamo ancora incontrato lo riporterebbe. Si cambia la * sorgente. Da qui in avanti cio' che non abbiamo vestito eredita comunque i * nostri colori, ed e' il contrario di prima. * * Le corrispondenze rispettano il **ruolo** di ogni voce, non il suo aspetto: * la 1 e' l'accento, la 2 lo stato piu' carico, la 3 il testo, la 4 i titoli, * dalla 5 in giu' le superfici dal bordo al bianco. Sostituire il blu con il * rame nella casella giusta fa funzionare anche i componenti che non abbiamo * mai visto. * * NON si tocca il colore dei campioni di tessuto: «Blu» e «Verde» sono colori * di prodotto, dati veri del catalogo, e devono restare blu e verdi anche in * una pagina di rame. * ==================================================================== */ :root, html { /* l'accento: collegamenti, stati attivi, evidenze */ --theme-palette-color-1: #B45A17; /* rame */ --theme-palette-color-2: #944A13; /* rame premuto */ /* il testo: inchiostro caldo, non ardesia fredda */ --theme-palette-color-3: #2F3236; --theme-palette-color-4: #23201D; /* le superfici, dal filo di separazione al bianco */ --theme-palette-color-5: #DED8D0; --theme-palette-color-6: #F7F4EF; --theme-palette-color-7: #FAF6F1; --theme-palette-color-8: #FFFFFF; --theme-text-color: #2F3236; --theme-headings-color: #23201D; --theme-link-initial-color: #AE4C0B; /* rame da testo: 4,99:1 su avorio */ --theme-link-hover-color: #944A13; /* * I campi: il contorno a riposo si intuisce, quello sotto il cursore dice * dove si sta scrivendo. Il focus era blu — su un modulo di pagamento in * mezzo a una pagina calda era la cosa piu' evidente della schermata, e * indicava un'informazione che non era la piu' importante. */ --theme-form-field-border-initial-color: #DED8D0; --theme-form-field-border-focus-color: #B45A17; --theme-form-selection-field-initial-color: #DED8D0; --theme-form-selection-field-active-color: #B45A17; --theme-button-background-initial-color: #B45A17; --theme-button-background-hover-color: #944A13; --theme-button-text-initial-color: #FFFFFF; --theme-button-text-hover-color: #FFFFFF; } /* ==================================================================== * IL TEMA BASE USA I NOSTRI CARATTERI * * Stessa storia della tavolozza, un piano piu' sotto. Il tema di serie ha la * sua famiglia — la pila di sistema — e la usa per tutto cio' che non abbiamo * vestito noi. Sulle pagine costruite da noi non si vede; su un modulo di * WooCommerce che non abbiamo ancora incontrato, o su un blocco aggiunto * domani dal pannello, esce il carattere di sistema in mezzo a una pagina di * Poppins e Cormorant Garamond. * * Cambiare la sorgente invece di rincorrere i componenti: da qui in avanti * cio' che non e' vestito eredita comunque la nostra voce. * ==================================================================== */ :root, html { --theme-font-family: var(--st-font-body); --theme-headings-font-family: var(--st-font-display); --theme-button-font-family: var(--st-font-body); --theme-form-font-family: var(--st-font-body); }