/* ============================================================================ Sistema di design — rotolitermici.it Ogni colore, misura e carattere del sito nasce da questo file. Nessun valore letterale altrove: se serve un colore nuovo, si aggiunge qui. ========================================================================= */ :root { /* ── Colore: il nucleo ───────────────────────────────────────────────── Il blu e' il brand e non si tocca. In un settore fatto di fisco, omologazioni e conformita' e' il colore dell'affidabilita'. */ --rt-ink: #0B1220; /* testo e titoli */ --rt-ink-2: #3A4760; /* testo secondario */ --rt-ink-3: #6B7A94; /* didascalie, unita' di misura */ --rt-blu: #1A5BFF; /* azione, prezzo, link */ --rt-blu-scuro: #0A3FC4; /* hover e stati premuti */ --rt-blu-tenue: #E8EFFF; /* fondi evidenziati */ --rt-blu-chiaro: #7FB0FF; /* il filo luminoso della barra fissa */ /* Il fondo NON e' bianco, e il bianco e' riservato alle card. E' la differenza piu' grossa fra una pagina che sembra un tema gratuito e una che sembra fatta: senza stacco fra fondo e card, nessuna ombra e nessun raggio riescono a dare profondita'. */ --rt-fondo: #F2F4F7; /* fondo pagina */ --rt-superficie: #FFFFFF; /* card: bianco pieno, solo qui */ --rt-superficie-2: #E9EDF3; /* blocchi secondari dentro le card */ --rt-linea: #E2E7F0; /* filetti, non bordi di card */ /* IL FONDO DELLA HERO E' UN FONDALE DA STUDIO, RIFATTO IN CSS. Giuseppe ha mandato la fotografia del fondale che vuole (2000x1333, 18 KB). Invece di servire quel file l'ho MISURATO e ricostruito con i gradienti: zero byte, zero richieste, e nessuna sfocatura quando la card si allarga oltre la misura della foto. Il centro e i raggi non sono scelti a occhio: una ricerca su 46.000 combinazioni ha trovato quella che rende il colore funzione della sola distanza (centro 88%/63%, raggi 110%/103%), e le fermate sono le medie misurate per fascia di distanza. I tre strati sopra la radiale correggono quello che una sola ellisse non spiega: il bordo destro che cala piu' in fretta, l'angolo in basso a sinistra piu' chiaro e la fascia di luce al centro-destra. Confronto pixel per pixel con la fotografia: errore medio 4,1 livelli su 255, cioe' l'1,6%. Se si tocca un numero, si rimisura: node tools/banco/z-conf2.js */ --rt-fondo-studio: radial-gradient(55% 45% at 2% 100%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(42% 60% at 72% 40%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(to right, rgba(150, 165, 180, 0) 74%, rgba(150, 165, 180, 0.16) 100%), radial-gradient(110% 103% at 88% 63%, #E4E7EC 2.5%, #E7EAEE 12.5%, #F7F7F8 27.5%, #F5F5F7 37.5%, #F1F2F4 52.5%, #E5E8ED 62.5%, #D9DDE5 72.5%, #C4CCD7 87.5%, #BAC3CE 97.5%); /* ── Colore: gli accenti di segmento ─────────────────────────────────── Compaiono in tre punti soltanto: header di categoria, icona, bordo attivo. MAI sui bottoni: i bottoni restano blu ovunque, sempre, cosi' il cliente impara in un secondo dove si clicca. */ --rt-seg-cassa: #1A5BFF; --rt-seg-pos: #00C28C; --rt-seg-bilance: #FF9F0A; --rt-seg-etichette: #7C5CFF; --rt-seg-scommesse: #0FB5C9; --rt-seg-eliminacode:#6E7BA0; --rt-seg-carta: #5C8D80; /* carta e risme: salvia, richiama FSC */ /* ── Colore: i fondi delle card bento ────────────────────────────────── Non sono colori nuovi: sono composizioni degli accenti gia' definiti sopra, piu' due estremi che servono solo a dare un verso alla luce. Stanno qui e non nel foglio della scheda perche' un gradiente scritto a mano in due file diversi e' un gradiente che prima o poi diverge. Il centro luminoso e' sempre fuori dalla card, in alto: e' la stessa direzione della luce delle ombre, e due luci che vengono da due parti diverse si notano anche senza saper dire perche'. */ /* Il piano di colore su cui stava il prodotto nella scheda. Tolto da li' — l'immagine va senza fondo — ma tenuto qui perche' il gradiente piace e serve altrove: basta applicarlo. */ --rt-grad-palco: linear-gradient(168deg, #EAF0FF 0%, #F4F7FF 42%, #EAFBF4 100%); /* La fascia di servizio in cima. Tre tinte del sistema diluite fino a restare quasi bianche: da' alla pagina un bordo superiore colorato senza diventare una barra che grida, e si legge con l'inchiostro normale invece che con il bianco. */ --rt-grad-servizio: linear-gradient(100deg, #E9F0FF 0%, #E8F6F1 48%, #EFECFF 100%); /* L'aurora: il gradiente della fascia di chiusura. Piaceva, e un gradiente che piace si usa piu' di una volta — e' cosi' che un sito sembra disegnato da una persona sola invece che da cinque. */ --rt-grad-aurora: linear-gradient(118deg, #BFE3FF 0%, #CFF3E6 44%, #E4DEFF 100%); --rt-grad-notte: radial-gradient(115% 130% at 10% -10%, #223257 0%, #12203A 42%, #0B1220 100%); --rt-grad-verde: radial-gradient(115% 135% at 88% -12%, #27EFB2 0%, #00C28C 46%, #00795A 100%); --rt-grad-blu: radial-gradient(115% 135% at 12% -12%, #6A9BFF 0%, #1A5BFF 46%, #0836A8 100%); --rt-grad-viola: radial-gradient(115% 135% at 88% -12%, #B49EFF 0%, #7C5CFF 48%, #4A2CC4 100%); --rt-grad-sabbia: radial-gradient(115% 135% at 12% -12%, #FFFFFF 0%, #F0F3F8 52%, #DDE4EF 100%); /* ── Colore: il calore ───────────────────────────────────────────────── La seconda voce del sistema, e l'unica che significa qualcosa. Il blu dice affidabilita'; il calore dice CHE COSA FACCIAMO. Una testina termica scalda la carta e la carta annerisce: non c'e' inchiostro, c'e' una riga rovente che passa. Questa rampa e' quella riga. Regola d'uso, e vale per sempre: il calore non e' un colore decorativo. Compare SOLO dove qualcosa sta per cambiare stato — il bottone che si preme, la misura che si sceglie, il testo che si stampa. Un accento caldo sparso a caso e' un accento in piu'; un accento caldo che vuol dire "sta succedendo" e' un marchio. */ --rt-calore: #FF6A1A; /* la brace: il cuore della testina */ --rt-calore-vivo: #FFB020; /* il bordo d'attacco, piu' giallo */ --rt-calore-brace: #D92D04; /* la coda che si spegne */ /* La testina che passa. L'ordine dei colori non e' estetico, e' fisico: la riga si muove verso destra, quindi davanti va il filamento incandescente e DIETRO resta la bruciatura. Invertirli, o metterli simmetrici, fa una luce che scivola; cosi' fa una cosa che passa e lascia un segno. Stretta: una banda larga mezzo bottone e' un faro, non una testina. */ --rt-grad-testina: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--rt-ink) 40%, transparent) 41%, /* la bruciatura, dietro */ color-mix(in srgb, var(--rt-calore-brace) 85%, transparent) 46%, var(--rt-calore) 49%, var(--rt-calore-vivo) 51.5%, /* il filamento */ color-mix(in srgb, var(--rt-calore-vivo) 30%, transparent) 55%, transparent 62%); /* ── Colore: semantica ─────────────────────────────────────────────────*/ --rt-ok: #16A34A; --rt-attenzione: #D97706; --rt-errore: #DC2626; --rt-risparmio: #16A34A; /* I fondi tenui degli stati. Servono alle pastiglie "disponibile" e "in arrivo": un colore pieno al 100% su una pastiglia alta 22px grida, e una pastiglia che grida fa sembrare la disponibilita' una promozione invece che un dato. */ --rt-ok-tenue: #E6F6EC; --rt-attenzione-tenue: #FDF1E0; /* ── Il pulsante d'acquisto ──────────────────────────────────────── Scritto qui e non nel foglio della scheda perche' lo usano in tre: la colonna d'acquisto, la barra fissa e il carrello a scomparsa. Tre gradienti scritti a mano in tre file sono tre gradienti che prima o poi divergono. */ --rt-grad-cta: linear-gradient(135deg, #3B78FF 0%, #1A5BFF 48%, #0A3FC4 100%); --rt-grad-cta-su: linear-gradient(135deg, #1A5BFF 0%, #0A3FC4 52%, #072D8E 100%); --rt-ombra-cta: 0 10px 24px -6px rgba(26, 91, 255, 0.46), 0 2px 6px rgba(11, 18, 32, 0.10); --rt-ombra-cta-su: 0 16px 36px -8px rgba(26, 91, 255, 0.58), 0 3px 8px rgba(11, 18, 32, 0.12); /* Il velo che spegne la pagina sotto il carrello a scomparsa. */ --rt-velo: rgba(11, 18, 32, 0.46); /* ── Tipografia ──────────────────────────────────────────────────────── Manrope: piu' stretta di Figtree e con i terminali tagliati netti. Ai corpi grandi da' un'aria da documentazione tecnica invece che da applicazione, che su un catalogo di misure e' quello che serve, e a 13px sulle specifiche resta leggibile — che e' la parte difficile. DM Mono per i dati: una carta definita dalle sue misure merita il carattere della documentazione tecnica accanto a quello del brand. Pesi bassi per scelta: la gerarchia si fa con scala e spazio. Il primo fallback e' il font di sistema Apple: sui dispositivi Apple, nell'istante prima che Manrope sia scaricato, la pagina e' gia' giusta. */ --rt-font: "Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; /* I dati sono lo stesso carattere, non un secondo carattere. Era DM Mono, e accanto a Manrope non diceva "dato tecnico": diceva due caratteri che non si parlano. Quello che serve a una colonna di prezzi non e' il monospaziato, sono le cifre tabulari — tutte della stessa larghezza, cosi' i numeri si incolonnano — e un peso diverso per staccarli dal testo intorno. Manrope ha tutti e due. */ --rt-font-dati: var(--rt-font); --rt-peso-normale: 400; --rt-peso-medio: 500; --rt-peso-forte: 600; /* massimo per i titoli */ --rt-peso-titolo: 700; /* solo H1 */ --rt-t-xxs: 0.75rem; /* 12px — dentro le card, dove il dato e' breve */ --rt-t-xs: 0.8125rem; /* 13px — didascalie */ /* IL CORPO DELLE CARD IN GRIGLIA, fra xs e sm. Una card non e' un testo da leggere: e' un dato da riconoscere. A 15px il nome su due righe pesava quanto il prezzo, e in una griglia a due colonne da 171 pixel il riquadro diventava tutto testo. */ --rt-t-card: 0.875rem; /* 14px */ --rt-t-sm: 0.9375rem; /* 15px — testo minore */ --rt-t-base: 1.0625rem; /* 17px — corpo */ --rt-t-lg: 1.25rem; /* 20px */ --rt-t-xl: 1.5rem; /* 24px */ --rt-t-2xl: 2rem; /* 32px */ --rt-t-3xl: 2.75rem; /* 44px */ --rt-t-4xl: 3.75rem; /* 60px */ --rt-t-5xl: 4.75rem; /* 76px — i titoli di sezione dei riferimenti */ /* ── La misura del TESTO DI LETTURA ─────────────────────────────────── Un token suo, e non --rt-t-base usato direttamente, perche' il corpo di un paragrafo e la misura di un bottone o di un prezzo non sono la stessa cosa anche quando hanno gli stessi pixel: si rimpiccioliscono in momenti diversi. Prima ogni blocco sceglieva per conto suo e sulla stessa pagina convivevano tre misure di testo normale — 17px, 15px e 20px — senza che nessuna differenza volesse dire qualcosa. Adesso e' una sola, e la gerarchia la fanno il peso e il colore. Sul telefono scende a 15px: in una colonna da 390 una riga da 17 ne tiene una quarantina di caratteri, e il testo diventa una colonna di monconi. */ --rt-t-testo: var(--rt-t-base); --rt-tracking-titolo: -0.028em; --rt-tracking-testa: -0.018em; --rt-tracking-label: 0.11em; --rt-interlinea-stretta: 1.08; --rt-interlinea: 1.55; /* ── Spazio: griglia da 4px ────────────────────────────────────────────*/ --rt-s1: 0.25rem; --rt-s2: 0.5rem; --rt-s3: 0.75rem; --rt-s4: 1rem; --rt-s5: 1.25rem; --rt-s6: 1.5rem; --rt-s8: 2rem; --rt-s10: 2.5rem; --rt-s12: 3rem; --rt-s16: 4rem; --rt-s20: 5rem; --rt-s24: 6rem; /* ── Raggi: generosi e coerenti ──────────────────────────────────────── Un solo raggio sbagliato rompe l'impressione di cura. */ --rt-r-sm: 12px; /* input, chip */ --rt-r-md: 16px; /* componenti piccoli */ --rt-r-lg: 20px; /* card interne */ --rt-r-xl: 28px; /* card principali: il raggio dei riferimenti */ --rt-r-2xl: 36px; /* blocchi a tutta larghezza */ --rt-r-pill: 999px; /* ── Ombre: quasi nessuna ────────────────────────────────────────────── Il premium moderno separa con il fondo e con i bordi sottili. */ /* Due ombre sovrapposte: una stretta che stacca il bordo, una larga e bassa che da' il peso. Una sola ombra o e' invisibile o e' finta. */ --rt-ombra-1: 0 1px 2px rgba(11, 18, 32, 0.05); --rt-ombra-2: 0 1px 2px rgba(11, 18, 32, 0.04), 0 12px 32px -12px rgba(11, 18, 32, 0.12); --rt-ombra-3: 0 2px 4px rgba(11, 18, 32, 0.05), 0 24px 56px -20px rgba(11, 18, 32, 0.20); /* L'oggetto che fluttua sopra il colore: ombra lunga e morbida, come negli scatti di prodotto dei riferimenti. */ --rt-ombra-oggetto: 0 32px 64px -24px rgba(11, 18, 32, 0.34); /* ── Misure ────────────────────────────────────────────────────────────*/ /* L'altezza della testata appiccicata in cima. Serve a chi si fissa scorrendo — la colonna delle recensioni, il lato della descrizione — per fermarsi sotto e non dietro. Scritta e non misurata in JavaScript perche' un valore che cambia a ogni ridisegno fa sobbalzare tutto quello che ci si appoggia. */ /* Solo la parte che resta ferma: barra principale piu' la riga della navigazione. Misurata nel banco, non stimata: 151px. La fascia di servizio scorre via con la pagina e non conta. */ --rt-altezza-header: 152px; /* UNA SOLA LARGHEZZA PER TUTTO IL SITO. Per un periodo erano due: il corpo a 1600 e la testata a 1860, "perche' la barra di comando appartiene alla finestra e il testo alla colonna". Sulla carta si regge; sullo schermo no — il marchio cadeva 130 pixel piu' a sinistra del titolo della pagina, e su ogni schermo sopra i 1860 si vedeva che erano due griglie diverse. Due allineamenti vicini ma diversi si leggono come un errore, non come una scelta. Adesso testata, hero e sezioni stanno sulla stessa verticale. E QUELLA VERTICALE STA A 1600, non a 1860. Milleottocentosessanta e' una misura che non ha nessun altro: su un monitor largo la riga di testo diventava lunghissima e le quattro card arrivavano a 440px l'una, piu' larghe della fotografia che ci sta dentro (800x800). 1600 e' la larghezza su cui e' disegnata meta' del web, la riga di lettura torna di una lunghezza umana, e le card restano sotto la risoluzione della loro sorgente. SE QUESTO NUMERO CAMBIA, cambia anche in due posti che non sono fogli di stile: rt_sizes_card() in inc/utilita.php, che dichiara al browser quanto sara' larga la fotografia di una card, e il commento che la spiega. Un "sizes" calcolato su un contenitore che non esiste piu' e' esattamente l'errore che sgrana le immagini. */ --rt-larghezza: 1600px; --rt-larghezza-testata: 1600px; /* Il carrello a scomparsa. Qui dentro si decide un ordine: un pannello stretto fa sembrare poco anche quello che c'e', e le righe con nome, contatore e prezzo stavano strette. Su schermi piccoli resta a tutta larghezza, che il min() nel foglio garantisce. */ --rt-cassetto: 42rem; --rt-larghezza-testo: 68ch; --rt-gutter: 1.25rem; /* ── Movimento ─────────────────────────────────────────────────────────*/ --rt-transizione: 160ms cubic-bezier(0.25, 0.1, 0.25, 1); } @media (max-width: 760px) { :root { --rt-t-testo: var(--rt-t-sm); } } @media (prefers-reduced-motion: reduce) { :root { --rt-transizione: 0ms; } }