/* ========================================================================== LA LINGUA DI HAVENLY: i colori, il carattere, le misure. Una fonte sola per il programma (app/frontend, un modulo come gli altri) e per la vetrina havenly.cloud (sites/havenly: costruisci.py ne fa una copia accanto alla pagina). Cambiato qui, cambiano tutti e due. Il carattere si carica da se' (caratteri.css nel programma, font/ nella vetrina): qui solo il suo nome. 14 ottobre 2026 (operaie C ed E, con la coordinatrice): Pietro vuole la cura di selftrained.com ma una tavolozza nostra e piu' fine, senza il loro arancio. SCELTA (la coordinatrice, 14 ottobre sera): «notte-calda», il blu notte di Havenly con la luce rosa delle Dolomiti al tramonto (l'Enrosadira, schiarita dal designer perche' non si confonda col rosso della Chat). E' quella di base, senza attributo. Le altre restano qui come prove (`data-tavolozza` = notte, bosco, sole, riviera). DAL 19 OTTOBRE QUESTO FOGLIO VALE PER LA VETRINA: il programma prende i colori, il carattere e i raggi dalla direzione A (base.css, che viene dopo, con gli stessi selettori e anche `[data-tavolozza]`: il programma e' A qualunque tavolozza). Qui restano comuni gli spazi, la pillola, il movimento e i ruoli scritti sotto. I RUOLI, uguali in ogni tavolozza: --carta, --carta-chiara, --carta-2 il fondo, le carte, campi e righe --inchiostro, -2, -3 il testo; il -3 sta sopra 4,5:1 sulla carta --linea, --linea-chiara i fili (al posto delle ombre) --fascia, --su-fascia, --su-fascia-2 il colore pieno: colonna o barra --tasto, --su-tasto il tasto principale (sul chiaro e' la fascia) --luce, --su-luce, --luce-testo, --luce-velo l'accento nostro, poco: il marchio, i contatori, la notte di oggi. Sopra la luce si scrive in inchiostro; come scritta sulla carta si usa --luce-testo --venduta le notti vendute del campo delle notti --agente, --su-agente, --agente-velo, --agente-testo quello che ha fatto l'agente (risposte, «ha capito», le prenotazioni scritte da sole): lo stesso colore deciso ovunque, cosi' si impara LE SUPERFICI SI SEPARANO A COLPO D'OCCHIO (Pietro, 14 ottobre: «troppo bianco su bianco, rende piu' lento vedere le cose»). La L di oklch, misurata (notte): il fondo --carta 0,923, --carta-2 0,950, le carte --carta-chiara 0,994: fra fondo e carta un gradino di 0,072 (prima 0,027, quasi invisibile). I fili all'inchiostro al 14% e al 9%. Il grigio dei dettagli (--inchiostro-3) sta sopra 4,8:1 anche sul fondo piu' scuro, in ogni tavolozza. ========================================================================== */ :root, :root[data-tavolozza="notte-calda"], :root[data-tavolozza="notte"] { --carta: #e9e5dc; --carta-chiara: #fffdf9; --carta-2: #f2eee6; --inchiostro: #161b26; --inchiostro-2: #3b4150; --inchiostro-3: #585d6a; --linea: rgba(22, 27, 38, .14); --linea-chiara: rgba(22, 27, 38, .09); --fascia: #16254f; --su-fascia: #f6f4ee; --su-fascia-2: rgba(246, 244, 238, .72); --tasto: #16254f; --su-tasto: #f6f4ee; /* la luce rosa: l'inchiostro sopra 8,6:1, sulla fascia 7,4:1; come scritta sul fondo 5,4:1 */ --luce: #f4a38f; --su-luce: #161b26; --luce-testo: #9c3d2e; --luce-velo: #fde6df; --venduta: #16254f; } /* la prova «notte» dell'ottone */ :root[data-tavolozza="notte"] { --luce: #b0893f; --luce-testo: #7d5f22; --luce-velo: #f1e7d0; } :root[data-tavolozza="bosco"] { --carta: #e6e3d9; --carta-chiara: #fdfcf8; --carta-2: #efede5; --inchiostro: #17201b; --inchiostro-2: #3a443e; --inchiostro-3: #555f58; --linea: rgba(23, 32, 27, .14); --linea-chiara: rgba(23, 32, 27, .09); --fascia: #1f3a2e; --su-fascia: #f3f1ea; --su-fascia-2: rgba(243, 241, 234, .72); --tasto: #1f3a2e; --su-tasto: #f3f1ea; --luce: #e2c56f; --su-luce: #17201b; --luce-testo: #7a6420; --luce-velo: #f5ecd0; --venduta: #1f3a2e; } :root[data-tavolozza="sole"] { --carta: #e9e5da; --carta-chiara: #fefcf8; --carta-2: #f2efe7; --inchiostro: #1b1d22; --inchiostro-2: #3d4047; --inchiostro-3: #5b5e66; --linea: rgba(27, 29, 34, .14); --linea-chiara: rgba(27, 29, 34, .09); --fascia: #1b1d22; --su-fascia: #f5f2ea; --su-fascia-2: rgba(245, 242, 234, .72); --tasto: #1b1d22; --su-tasto: #f5f2ea; --luce: #f0c24b; --su-luce: #1b1d22; --luce-testo: #7c5e0e; --luce-velo: #fbefcb; --venduta: #1b1d22; } :root[data-tavolozza="riviera"] { --carta: #e7dece; --carta-chiara: #fdf9f2; --carta-2: #f1eadf; --inchiostro: #1a2a2f; --inchiostro-2: #3c4b50; --inchiostro-3: #526166; --linea: rgba(26, 42, 47, .14); --linea-chiara: rgba(26, 42, 47, .09); --fascia: #23505f; --su-fascia: #f2ebde; --su-fascia-2: rgba(242, 235, 222, .74); --tasto: #23505f; --su-tasto: #f2ebde; --luce: #9fdccb; --su-luce: #1a2a2f; --luce-testo: #2f6f62; --luce-velo: #ddf2ec; --venduta: #23505f; } /* LO SCURO (vale dove non ha `data-solo-chiaro`: la vetrina e' disegnata solo chiara e se lo mette; il programma segue il sistema): la carta scende quasi al nero col tono della tavolozza; la fascia resta la sua; il tasto diventa chiaro (il colore pieno della fascia sul nero non si vede); le notti vendute si schiariscono un poco, se no sparirebbero nel fondo. */ @media (prefers-color-scheme: dark) { :root:not([data-solo-chiaro]), :root:not([data-solo-chiaro])[data-tavolozza="notte-calda"], :root:not([data-solo-chiaro])[data-tavolozza="notte"] { --carta: #0b0f17; --carta-chiara: #171d2a; --carta-2: #202838; --inchiostro: #eef0f4; --inchiostro-2: #c3c8d2; --inchiostro-3: #8f96a4; --linea: rgba(238, 240, 244, .11); --linea-chiara: rgba(238, 240, 244, .07); --fascia: #16254f; --su-fascia: #eef0f4; --su-fascia-2: rgba(238, 240, 244, .72); --tasto: #eef0f4; --su-tasto: #0e121a; --luce: #f4a38f; --su-luce: #161b26; --luce-testo: #f6b3a2; --luce-velo: #3a2420; --venduta: #3a5191; } :root:not([data-solo-chiaro])[data-tavolozza="notte"] { --luce: #d4ad5f; --luce-testo: #dcb96e; --luce-velo: #2a2416; } :root:not([data-solo-chiaro])[data-tavolozza="bosco"] { --carta: #0c110e; --carta-chiara: #18211c; --carta-2: #222c26; --inchiostro: #eef1ec; --inchiostro-2: #c6ccc5; --inchiostro-3: #939d95; --linea: rgba(238, 241, 236, .11); --linea-chiara: rgba(238, 241, 236, .07); --fascia: #1f3a2e; --su-fascia: #eef1ec; --su-fascia-2: rgba(238, 241, 236, .72); --tasto: #eef1ec; --su-tasto: #0f1411; --luce: #e2c56f; --su-luce: #17201b; --luce-testo: #e6cd80; --luce-velo: #2a2615; --venduta: #3d6b55; } :root:not([data-solo-chiaro])[data-tavolozza="sole"] { --carta: #0d0e10; --carta-chiara: #1a1b1f; --carta-2: #24262b; --inchiostro: #f2f1ec; --inchiostro-2: #cacac6; --inchiostro-3: #98999d; --linea: rgba(242, 241, 236, .11); --linea-chiara: rgba(242, 241, 236, .07); --fascia: #0b0c0e; --su-fascia: #f2f1ec; --su-fascia-2: rgba(242, 241, 236, .72); --tasto: #f2f1ec; --su-tasto: #111214; --luce: #f0c24b; --su-luce: #1b1d22; --luce-testo: #f2cc66; --luce-velo: #2c2513; --venduta: #5a5d66; } :root:not([data-solo-chiaro])[data-tavolozza="riviera"] { --carta: #0b1214; --carta-chiara: #172328; --carta-2: #213036; --inchiostro: #ecf1f1; --inchiostro-2: #c3cdcf; --inchiostro-3: #8fa0a3; --linea: rgba(236, 241, 241, .11); --linea-chiara: rgba(236, 241, 241, .07); --fascia: #1b4250; --su-fascia: #ecf1f1; --su-fascia-2: rgba(236, 241, 241, .72); --tasto: #ecf1f1; --su-tasto: #0e1517; --luce: #9fdccb; --su-luce: #1a2a2f; --luce-testo: #a9e2d2; --luce-velo: #15302a; --venduta: #2f6a7d; } } /* L'AGENTE: un viola deciso, uguale in ogni tavolozza (il segno pieno sul bordo, l'icona e l'etichetta; il velo tenue ma che si vede sotto). Bianco sopra 7,7:1; la scritta sul velo 7,4:1. */ :root { --agente: #5b34c4; --su-agente: #ffffff; --agente-velo: #ebe4fb; --agente-testo: #4f2bb0; } @media (prefers-color-scheme: dark) { :root:not([data-solo-chiaro]) { --agente: #a78bfa; --su-agente: #160f2b; --agente-velo: #241d3a; --agente-testo: #c4b5fd; } } /* IL CARATTERE, LE MISURE, IL MOVIMENTO (uguali in ogni tavolozza) */ :root { --carattere: "DM Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif; --carattere-numeri: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --peso-testo: 400; --peso-nome: 500; --peso-numero: 600; --tr-titolo: -.035em; --tr-grande: -.025em; --tr-testo: -.006em; --raggio-pic: 6px; --raggio-min: 8px; --raggio: 14px; --pillola: 999px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; /* una curva sola; si chiude piu' in fretta di come si apre (come selftrained) */ --curva: cubic-bezier(.16, 1, .3, 1); --apre: .2s; --chiude: .14s; }