/* core/static/core/css/design-tokens.css */ /* ============================================= SATISWORK DESIGN TOKENS — Single Source of Truth All colors, fonts, spacing, and component tokens ============================================= */ /* ======== FONTS — Self-hosted from core/static/core/fonts/ ======== */ /* Mona Sans Expanded — ExtraLight */ @font-face { font-family: 'Mona Sans Expanded'; src: url('../fonts/MonaSans_Expanded-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-stretch: expanded; font-display: swap; } @font-face { font-family: 'Mona Sans Expanded'; src: url('../fonts/MonaSans_Expanded-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-stretch: expanded; font-display: swap; } /* Mona Sans Expanded — Light */ @font-face { font-family: 'Mona Sans Expanded'; src: url('../fonts/MonaSans_Expanded-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-stretch: expanded; font-display: swap; } /* Mona Sans Expanded — Regular */ @font-face { font-family: 'Mona Sans Expanded'; src: url('../fonts/MonaSans_Expanded-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-stretch: expanded; font-display: swap; } @font-face { font-family: 'Mona Sans Expanded'; src: url('../fonts/MonaSans_Expanded-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-stretch: expanded; font-display: swap; } /* Mona Sans Expanded — Medium */ @font-face { font-family: 'Mona Sans Expanded'; src: url('../fonts/MonaSans_Expanded-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-stretch: expanded; font-display: swap; } @font-face { font-family: 'Mona Sans Expanded'; src: url('../fonts/MonaSans_Expanded-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-stretch: expanded; font-display: swap; } /* Mona Sans Expanded — SemiBold */ @font-face { font-family: 'Mona Sans Expanded'; src: url('../fonts/MonaSans_Expanded-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-stretch: expanded; font-display: swap; } @font-face { font-family: 'Mona Sans Expanded'; src: url('../fonts/MonaSans_Expanded-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-stretch: expanded; font-display: swap; } /* Mona Sans Expanded — Bold */ @font-face { font-family: 'Mona Sans Expanded'; src: url('../fonts/MonaSans_Expanded-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-stretch: expanded; font-display: swap; } @font-face { font-family: 'Mona Sans Expanded'; src: url('../fonts/MonaSans_Expanded-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-stretch: expanded; font-display: swap; } /* Mona Sans Expanded — ExtraBold */ @font-face { font-family: 'Mona Sans Expanded'; src: url('../fonts/MonaSans_Expanded-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-stretch: expanded; font-display: swap; } @font-face { font-family: 'Mona Sans Expanded'; src: url('../fonts/MonaSans_Expanded-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-stretch: expanded; font-display: swap; } /* Mona Sans Expanded — Black */ @font-face { font-family: 'Mona Sans Expanded'; src: url('../fonts/MonaSans_Expanded-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-stretch: expanded; font-display: swap; } @font-face { font-family: 'Mona Sans Expanded'; src: url('../fonts/MonaSans_Expanded-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-stretch: expanded; font-display: swap; } /* Hubot Sans — variable font, self-hosted */ @font-face { font-family: 'Hubot Sans'; src: url('../fonts/HubotSans.ttf') format('truetype'); font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; } :root { /* ============================================ BRAND PALETTE ============================================ */ --sw-pink: #F72585; --sw-pink-300: #ff8fc4; /* il capo chiaro della scala: il punto di luce delle sfere */ --sw-pink-700: #a30f55; /* il capo scuro: il fondo delle sfere */ --sw-pink-dark: #d41a74; --sw-pink-deeper: #b8005f; --sw-pink-light: rgba(247, 37, 133, 0.12); --sw-pink-xlight: rgba(247, 37, 133, 0.06); --sw-navy: #001233; --sw-navy-mid: #0a1f45; --sw-navy-light: #1a3060; --sw-navy-xlight: #2a4080; --sw-teal: #64DFDF; --sw-teal-dark: #3cb8b8; --sw-teal-deeper: #1a9090; --sw-teal-light: rgba(100, 223, 223, 0.15); --sw-teal-xlight: rgba(100, 223, 223, 0.08); --sw-teal-border: rgba(100, 223, 223, 0.35); /* ============================================ SEMANTIC / STATUS COLORS ============================================ */ --sw-success: #10b981; --sw-success-bg: rgba(16, 185, 129, 0.1); --sw-warning: #f59e0b; --sw-warning-bg: rgba(245, 158, 11, 0.1); --sw-danger: #ef4444; --sw-danger-bg: rgba(239, 68, 68, 0.1); /* ⚠️ FASE 1 — era #3b82f6: un QUARTO blu, estraneo al marchio, che si aggiungeva a navy, ciano e al blu dei link. La nota informativa parla la lingua del prodotto: il ciano scuro, che è già di casa. */ --sw-info: #3cb8b8; --sw-info-bg: rgba(60, 184, 184, 0.1); /* 22/09/2026 — I TONI DA SCRITTA dei tre stati. I colori qui sopra sono nati per i BORDI e per i fondi: come TESTO su bianco non arrivano ad AA (#ef4444 misura 3,7:1, #10b981 appena 2,5:1) e un messaggio d'errore che non si legge e' peggio di nessun messaggio. Questi tre sono gli stessi colori, portati al punto in cui passano AA restando riconoscibili. Si usano per le parole; per i bordi e i fondi restano quelli sopra. */ --sw-danger-testo: #b3261e; /* 6,0:1 sul bianco */ --sw-success-testo: #0a6b55; /* 6,1:1 */ --sw-warning-testo: #8a4b06; /* 6,6:1 */ /* ============================================ SURFACE / BACKGROUND COLORS ============================================ */ --sw-bg: #f5f7fa; --sw-card: #ffffff; /* ⚠️ FASE 1 — bordi e fondi presi dal canone collaudato, non inventati. Erano #e8ecf2 e #e5e9f0: due grigi pieni, in mezzo ai 17 modi diversi di scrivere «il grigio chiarissimo» che il censimento ha trovato. Un bordo scritto in trasparenza funziona su qualunque fondo, un grigio pieno no. */ --sw-card-border: rgba(0, 18, 51, .08); --sw-card-hover: #f8fafc; --sw-divider: rgba(0, 18, 51, .16); /* il bordo quando ci passi sopra */ --sw-bg-alt: #f5f6fa; /* campi, righe selezionabili */ /* I nomi che dicono il MESTIERE invece del posto. Sono alias: il vocabolario nuovo si può usare subito, e niente di quello che c'è si rompe. È il modo in cui si sposta un cavo senza staccare la corrente. */ --sw-surface: var(--sw-card); --sw-surface-sunken: var(--sw-bg-alt); --sw-surface-hover: var(--sw-card-hover); --sw-border: var(--sw-card-border); --sw-border-strong: var(--sw-divider); /* 01/10/2026 — IL VETRO della pagina di presentazione v3: la ricetta di app-skin.css (bianco .86-.9, sfocatura 20-24 px, bordo bianco) con un nome solo. */ --sw-vetro-fondo: rgba(255, 255, 255, .88); --sw-vetro-fondo-leggero: rgba(255, 255, 255, .70); --sw-vetro-bordo: rgba(255, 255, 255, .78); --sw-vetro-sfocatura: blur(22px) saturate(1.4); --sw-vetro-ombra: 0 14px 40px -16px rgba(0, 18, 51, .18); /* 01/10/2026 (lotto 2, la pelle unica) — il FILO blu notte al 12 % che disegna il vetro chiaro delle cose che si toccano, e il grigio del testo che regge 4,5:1 anche sul vetro e sul velo colorato (#6b7591 arriva a 4,6:1 solo sul bianco pieno). */ --sw-vetro-filo: rgba(0, 18, 51, .12); --sw-vetro-testo-tenue: color-mix(in srgb, var(--sw-text-secondary) 70%, var(--sw-navy)); /* ============================================ TEXT COLORS ⚠️ 10/08/2026 — FASE 1: i token si allineano alla REALTÀ. Erano #0d1117 e #4b5563: due colori che il prodotto non usava. Contati nel repo: #0d1117 in 4 punti, #4b5563 in 29 — mentre il blu vero di Satiswork (#001233) sta in 791 punti su 96 file, e il grigio del canone (#6b7591) in 102. Finché il sistema dichiarava colori che nessuno usava, «usare il token» voleva dire «cambiare colore»: ed è il motivo per cui in due anni non l'ha fatto nessuno. ============================================ */ --sw-text-primary: #001233; /* = --sw-navy: un solo blu in tutto il prodotto */ --sw-text-secondary: #6b7591; /* 5.2:1 sul bianco — si legge */ --sw-text-muted: #9ca3af; --sw-text-white: #ffffff; --sw-text-white-70: rgba(255, 255, 255, 0.70); --sw-text-white-50: rgba(255, 255, 255, 0.50); /* ============================================ SIDEBAR TOKENS ============================================ */ --sw-sidebar-bg: var(--sw-navy); --sw-sidebar-width: 240px; --sw-sidebar-text: rgba(255, 255, 255, 0.85); --sw-sidebar-border: rgba(255, 255, 255, 0.08); --sw-sidebar-scrollbar: rgba(100, 223, 223, 0.2); /* Nav item states */ --sw-nav-active-bg: rgba(255, 255, 255, 0.96); --sw-nav-active-text: var(--sw-pink); --sw-nav-hover-bg: rgba(255, 255, 255, 0.07); --sw-nav-border-color: var(--sw-teal-border); --sw-nav-item-radius: var(--sw-radius-full); /* CTA buttons in sidebar */ --sw-cta-bg: var(--sw-pink); --sw-cta-bg-hover: var(--sw-pink-dark); --sw-cta-text: #ffffff; /* Highlighted nav (e.g. Statistiche) */ --sw-nav-highlight-bg: var(--sw-pink); --sw-nav-highlight-text: #ffffff; /* ============================================ TYPOGRAPHY ============================================ */ /* Font families */ --sw-font-display: 'Mona Sans Expanded', sans-serif; --sw-font-body: 'Hubot Sans', sans-serif; --font-sans: var(--sw-font-body); /* alias for legacy CSS (apple-form, etc.) */ /* Font sizes (rem scale) ⚠️ FASE 1 — la scala non si rifà, si fa usare: era già buona, ma il 95,4% del CSS non ci passava. Il 2xs sale da 10.4 a 11px per assorbire l'11.5px scritto a mano 82 volte; xs e sm assorbono il 12.5px (75 usi) e il 13.5px (59). Erano passi da mezzo pixel: non una scala, gente che aggiusta a occhio. */ --sw-text-2xs: 0.6875rem; /* 11px */ --sw-text-xs: 0.75rem; /* 12px */ --sw-text-sm: 0.875rem; /* 14px */ --sw-text-base: 1rem; /* 16px */ --sw-text-lg: 1.125rem; /* 18px */ --sw-text-xl: 1.25rem; /* 20px */ --sw-text-2xl: 1.5rem; /* 24px */ --sw-text-3xl: 1.875rem; /* 30px */ --sw-text-4xl: 2.25rem; /* 36px */ --sw-text-5xl: 3rem; /* 48px */ /* Font weights */ --sw-fw-regular: 400; --sw-fw-medium: 500; --sw-fw-semibold: 600; --sw-fw-bold: 700; --sw-fw-extrabold: 800; --sw-fw-black: 900; /* Line heights */ --sw-leading-tight: 1.25; --sw-leading-snug: 1.375; --sw-leading-normal: 1.5; --sw-leading-relaxed: 1.625; /* Letter spacing */ --sw-tracking-tight: -0.025em; --sw-tracking-normal: 0em; --sw-tracking-wide: 0.025em; --sw-tracking-wider: 0.05em; --sw-tracking-widest: 0.1em; /* Font stretch for expanded variants */ --sw-stretch-condensed: 75%; --sw-stretch-normal: 100%; --sw-stretch-expanded: 125%; /* ============================================ SPACING SCALE ============================================ */ --sw-sp-0: 0px; --sw-sp-1: 4px; --sw-sp-2: 8px; --sw-sp-3: 12px; --sw-sp-4: 16px; --sw-sp-5: 20px; --sw-sp-6: 24px; --sw-sp-7: 28px; --sw-sp-8: 32px; --sw-sp-9: 36px; --sw-sp-10: 40px; --sw-sp-12: 48px; --sw-sp-14: 56px; --sw-sp-16: 64px; /* ============================================ BORDER RADIUS ============================================ */ /* ⚠️ FASE 1 — quattro raggi per quattro mestieri. Il censimento ne ha trovati 109 distinti, con sedici gradini consecutivi da 2 a 28px. `md` sale da 12 a 14px: è il valore del canone, cioè quello che si vede oggi a schermo nelle pagine collaudate. */ --sw-radius-sm: 8px; /* tag ed etichette dentro una riga */ --sw-radius-md: 14px; /* bottoni, campi, righe cliccabili */ --sw-radius-xl: 20px; /* card, tendine, modali */ --sw-radius-full: 9999px; /* SOLO cerchi veri: sfere, avatar, pillole */ /* fuori dall'uso standard di prodotto: restano per landing e casi rari */ --sw-radius-xs: 4px; --sw-radius-lg: 16px; --sw-radius-2xl: 28px; --sw-radius-3xl: 36px; /* ============================================ SHADOWS ============================================ */ /* ⚠️ FASE 1 — tre ombre per tre stati, più quella del marchio. Il censimento ne ha trovate 315 distinte su 641 usi: quasi ogni ombra del prodotto è scritta una volta sola. I sei livelli generici qui sotto non li usava nessuno fuori da questo file; questi tre sono quelli del canone, cioè quelli che si vedono. Un'ombra dice a che ALTEZZA sta una cosa: ferma, sotto il puntatore, aperta. Tre altezze bastano. */ --sw-shadow-riposo: 0 2px 10px -4px rgba(0, 18, 51, .10); --sw-shadow-sopra: 0 6px 20px -8px rgba(0, 18, 51, .20); --sw-shadow-elevata: 0 10px 30px -12px rgba(0, 18, 51, .24); /* SOLO il bottone primario e la sfera rosa: se la mettiamo ovunque, smette di dire «questa è l'azione della pagina». */ --sw-shadow-marchio: 0 8px 18px -6px rgba(247, 37, 133, .55); /* i vecchi nomi restano vivi e puntano ai nuovi: nessun filo staccato */ --sw-shadow-sm: var(--sw-shadow-riposo); --sw-shadow-md: var(--sw-shadow-sopra); --sw-shadow-lg: var(--sw-shadow-elevata); --sw-shadow-pink: var(--sw-shadow-marchio); /* Inner shadows */ --sw-inset-sm: inset 0 1px 3px rgba(0, 0, 0, 0.08); --sw-inset-md: inset 0 2px 6px rgba(0, 0, 0, 0.12); /* ============================================ TRANSITIONS / EASING ============================================ */ /* ⚠️ FASE 1 — tre durate e tre curve, separate. Prima durata e curva erano impastate in un token solo, e infatti nessuno li usava: chi voleva 220ms con la curva del rimbalzo doveva riscriversi tutto a mano. Separate si combinano. */ --sw-dur-fast: 150ms; /* un colore che cambia, un tocco */ --sw-dur-base: 220ms; /* si apre, si chiude, si solleva */ --sw-dur-slow: 320ms; /* un contenuto che scende, un cambio di pagina */ --sw-ease-standard: cubic-bezier(.4, 0, .2, 1); /* si muove dritto */ --sw-ease-decisa: cubic-bezier(.34, 1.56, .64, 1); /* il rimbalzino: sfere, spunte */ /* non è nuova: è la curva che il canone ha già scritto a mano per le tendine che scendono. Qui prende un nome, invece di essere ricopiata. */ --sw-ease-morbida: cubic-bezier(.22, .9, .3, 1); /* i vecchi nomi restano vivi */ --sw-ease-fast: var(--sw-dur-fast) var(--sw-ease-standard); --sw-ease-base: 200ms ease; --sw-ease-bounce: 400ms var(--sw-ease-decisa); /* ============================================ Z-INDEX SCALE ============================================ */ --sw-z-below: -1; --sw-z-base: 0; --sw-z-raised: 10; --sw-z-dropdown: 100; --sw-z-sticky: 200; --sw-z-sidebar: 1000; --sw-z-overlay: 1040; --sw-z-modal: 1050; --sw-z-toast: 1080; --sw-z-tooltip: 1090; /* ============================================ LAYOUT ============================================ */ --sw-content-max: 1400px; /* 23/09/2026 — il tetto delle GRIGLIE, diverso da quello dei CONTENUTI qui sopra. Un testo, un modulo, una scheda oltre i 1400 px diventano righe troppo lunghe da leggere: quel tetto resta. Una griglia di giorni e ore invece guadagna da ogni pixel: sul 27" di Fabio (2560 px) l'agenda ne usava 1180, il 54 % dello schermo restava vuoto, ogni colonna-giorno era 151 px e i nomi dei pazienti andavano a capo una lettera per riga. 1920 è la variante B scelta da Emiliano il 23/09: la griglia si ferma lì. Il numero sta SOLO qui: chi lo usa passa da var(--sw-grid-max), e il muro `test_agenda_larga_sul_monitor` lo pretende. Oggi lo usa l'agenda (calendario_glass.html), e solo dal 1440 in su. Dal 23/09, secondo giro, anche il tabellone dell'agenda di studio (agenda_studio.html), con la stessa forma. Emiliano: «anche l'agenda studio (tipo centro newton) deve avere gli stessi standard». Il suo riepilogo collaboratori NO: è una tabella a riga e resta a 1400, per scelta di Emiliano (agenda_studio_riepilogo.html dice perché). */ --sw-grid-max: 1920px; --sw-content-pad: var(--sw-sp-6); /* Dashboard widget corner radius */ --sw-widget-radius: var(--sw-radius-xl); /* ============================================ COMPONENT TOKENS — BUTTONS ============================================ */ --sw-btn-height-sm: 32px; --sw-btn-height-md: 40px; --sw-btn-height-lg: 48px; --sw-btn-padding-x: var(--sw-sp-5); /* ⚠️ FASE 1 — il bottone NON è una pillola. Qui diceva 9999px, `satiswork-glass.css` lo sovrascriveva a 12px, e il canone — cioè quello che si vede davvero — usa 14px. Vince quello che si vede. Motivo concreto: le etichette vere sono frasi corte ma reali («segna come pagata»), e una pillola si stira male con testo di lunghezza variabile. Il tondo pieno resta a badge, pillole di stato e sfere: forme davvero circolari. */ --sw-btn-radius: var(--sw-radius-md); --sw-btn-font: var(--sw-font-body); --sw-btn-fw: var(--sw-fw-semibold); --sw-btn-fs: var(--sw-text-sm); /* ============================================ COMPONENT TOKENS — CARDS ============================================ */ --sw-card-radius: var(--sw-radius-xl); --sw-card-shadow: var(--sw-shadow-sm); --sw-card-pad: var(--sw-sp-6); --sw-card-gap: var(--sw-sp-4); /* ============================================ COMPONENT TOKENS — FORMS ============================================ */ --sw-input-height: 44px; --sw-input-radius: var(--sw-radius-md); --sw-input-border: var(--sw-card-border); --sw-input-focus: var(--sw-pink); --sw-input-bg: var(--sw-card); --sw-input-font: var(--sw-font-body); /* ============================================ DASHBOARD SPECIFIC ============================================ */ --sw-sticky-bg: #f9e876; --sw-sticky-shadow: 4px 4px 16px rgba(0, 0, 0, 0.12); --sw-sticky-lines: rgba(0, 0, 0, 0.08); --sw-cal-today-bg: var(--sw-navy); --sw-cal-today-text: var(--sw-text-white); --sw-cal-event-bg: var(--sw-pink-light); --sw-cal-event-dot: var(--sw-pink); /* ============================================ AGENDA — UN COLORE PER PRESTAZIONE (20/09/2026, Fabio) «tutte le voci rosa non si riesce a capire se un paziente è una prima visita per esempio, o una seduta di controllo» Otto tinte, e non è un numero tirato a caso: oltre l'otto due colori vicini non si distinguono più e la legenda diventa un rebus. Quale prestazione prende quale slot lo decide `core/services/colori_prestazioni.py` — sempre lo stesso, perché nasce dal NOME della prestazione. Qui ci sono solo i colori. ⚠️ REGOLA DEI DALTONICI, ed è il motivo per cui questi valori sono quelli e non altri: le otto tinte hanno LUMINOSITÀ CRESCENTE, non solo tinte diverse. Messe in scala di grigi restano otto grigi in fila (da #0c0c0c a #484848) invece di otto macchie uguali. Ogni tinta tiene inoltre almeno 3:1 di contrasto sul bianco, così la barretta laterale si vede anche da sola. Il muro che lo verifica, valore per valore, è `core/tests/test_agenda_pittura.py`: se qualcuno ritocca un colore «perché è più bello» e rompe la scala, il test glielo dice. Il colore non porta MAI l'informazione da solo: sulla card c'è scritto il nome della prestazione, e in fondo all'agenda c'è la legenda. ============================================ */ --sw-pr-0: #6b7591; /* nessuna prestazione / promemoria — il grigio del testo */ --sw-pr-1: #53218b; /* viola L* 26 */ --sw-pr-2: #0b4a82; /* blu L* 31 */ --sw-pr-3: #a51b36; /* cremisi L* 36 */ --sw-pr-4: #0c6d66; /* verde-blu L* 41 */ --sw-pr-5: #b35016; /* arancio L* 46 */ --sw-pr-6: #218c2f; /* verde L* 51 */ --sw-pr-7: #d34fc2; /* magenta L* 55 */ --sw-pr-8: #b88a0a; /* oro L* 60 */ /* ============================================ AGENDA — UN COLORE PER I BLOCCHI (22/09/2026, Fabio) «Colori diversi anche ai blocchi. Specifico sul blocco il motivo e averli colorati diversamente aiuta.» TAVOLOZZA CHIUSA, NON COLORE LIBERO (decisione di Emiliano, 22/09). Un selettore libero litiga con i due sistemi di colore che l'agenda ha gia' addosso — le PRESTAZIONI (--sw-pr-*) e gli STATI delle sedute — e in due settimane la griglia diventa illeggibile. Qui i colori sono cinque, scelti una volta, uguali per tutti gli studi. PERCHE' PROPRIO QUESTI CINQUE · Luminosita' crescente, L* 30 · 38 · 46 · 54 · 61: in scala di grigi restano cinque grigi in fila, non cinque macchie uguali. E' la stessa regola dei daltonici della tavolozza delle prestazioni, e il muro la misura valore per valore (core/tests/test_blocchi_colori.py). · Ognuno tiene almeno 3:1 di contrasto sul bianco: la barretta laterale di 4 px si vede anche da sola, su schermo piccolo e da lontano. · Sono piu' SPENTI delle prestazioni di proposito. Un blocco e' uno sfondo, non una card che gareggia: deve dire «qui non si riceve» senza urlare piu' forte delle sedute che ci stanno sopra. ⚠️ IL COLORE NON PORTA MAI L'INFORMAZIONE DA SOLO. Sul blocco resta scritto il motivo («Ferie», «Altro · scuola dei bambini») e il TRATTEGGIO del bordo non si tocca mai: e' lui a dire «blocco» e non «seduta», anche a chi il colore non lo vede. Il muro lo verifica. --sw-blk-0 e' il grigio di sempre: un blocco senza colore scelto resta esattamente com'era prima del 22/09 (il campo nasce vuoto, e vuoto vuol dire «come adesso»). I nomi — prugna, petrolio, mattone, salvia, ocra — sono gli stessi che l'utente legge nel modulo: un nome solo, dal database allo schermo. ============================================ */ --sw-blk-0: #8d97ad; /* ardesia — «come adesso» L* 62 */ --sw-blk-prugna: #742c59; /* prugna L* 30 */ --sw-blk-petrolio: #2a606f; /* petrolio L* 38 */ --sw-blk-mattone: #ab5341; /* mattone L* 46 */ --sw-blk-salvia: #528e66; /* salvia L* 54 */ --sw-blk-ocra: #b08f43; /* ocra L* 61 */ /* ============================================ AGENDA — LE ORE IN CUI NON SI RICEVE (20/09/2026, Fabio) «Se io chiudo un giorno lo vedo in alto ma negli slot non cambia visivamente nulla, e secondo me rende di più a vederlo diverso anche sotto.» Vale per il giorno chiuso, per le ore fuori orario e per le pause: la fascia deve SEMBRARE chiusa. Sfondo più spento + righine diagonali — due segnali, non uno: chi non distingue i colori vede comunque il tratteggio, e su una stampa in bianco e nero resta. ============================================ */ --sw-agenda-chiuso-fondo: rgba(0, 18, 51, 0.045); --sw-agenda-chiuso-riga: rgba(0, 18, 51, 0.07); --sw-agenda-chiuso-testo: var(--sw-text-muted); --sw-agenda-chiuso-tratto: repeating-linear-gradient( 135deg, transparent 0 6px, var(--sw-agenda-chiuso-riga) 6px 7px); /* ============================================ LO SPESSORE DELL'ORA IN AGENDA (12/10/2026, Fabio, punto 9) ============================================ Il 07/10 sul telefono l'ora è passata a 88px (mezz'ora 44, un quarto d'ora 22, ancora leggibile) con 4px di stacco fra due sedute attaccate: a mezz'ore si vedeva tutto appiccicato. Fabio chiede lo stesso sul PC, e da oggi lo spessore è UNO per tutti gli schermi. Il numero sta SOLO qui: la griglia (calendario_glass.html) lo legge da questi due token, e il pixel per minuto resta uno solo (--sc-rowh). */ --sw-agenda-ora: 88px; --sw-agenda-aria: 4px; /* ============================================ L'EFFETTO SFERA — i pezzi, prima delle classi Le classi `.sw-sfera*` qui sotto montano questi pezzi, ed e' quello che usa il markup. I pezzi stanno pero' anche qui come token, perche' una regola che NON puo' indossare la classe — un elemento disegnato dalla JS di un'altra pagina, come il giorno di oggi nel calendarietto — deve poter prendere il fondo e l'ombra da un posto solo invece di ricopiare il gradiente. Ricopiarlo e' esattamente il modo in cui nascono i dialetti. ============================================ */ --sw-sfera-fondo: radial-gradient(circle at 32% 26%, #4a6485 0%, #123 46%, #000a18 100%); --sw-sfera-fondo-pink: radial-gradient(circle at 32% 26%, var(--sw-pink-300) 0%, var(--sw-pink) 48%, var(--sw-pink-700) 100%); --sw-sfera-fondo-teal: radial-gradient(circle at 32% 26%, #7ee8f2 0%, #0ea5b7 48%, #056b78 100%); /* 22/09/2026 — LA SFERA CHIARA: una spunta SPENTA. Viveva solo dentro il canone delle Impostazioni (`.ih-shell .sw-pallina`), quindi fuori di li' chi voleva una spunta tonda doveva ricopiare il gradiente — che e' esattamente il modo in cui nascono i dialetti. Stessi valori, un posto solo. La usa la spunta «Avvisa il paziente» del foglietto del giorno. */ --sw-sfera-fondo-chiara: radial-gradient(circle at 32% 26%, #ffffff 0%, #e7eaf2 55%, #cdd3e0 100%); --sw-sfera-ombra-chiara: 0 3px 8px -3px rgba(0, 18, 51, .28), inset 0 -2px 4px rgba(0, 0, 0, .10), inset 0 2px 3px rgba(255, 255, 255, .85); /* il riflesso e' una GOCCIA, non un cerchio: e' quello che la fa sfera */ --sw-sfera-riflesso: linear-gradient(to bottom, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); --sw-sfera-ombra: 0 8px 16px -6px rgba(0, 18, 51, .55), inset 0 -4px 8px rgba(0, 0, 0, .32), inset 0 2px 5px rgba(255, 255, 255, .30); --sw-sfera-ombra-pink: 0 8px 18px -6px rgba(247, 37, 133, .55), inset 0 -4px 8px rgba(120, 0, 55, .34), inset 0 2px 5px rgba(255, 255, 255, .42); --sw-sfera-ombra-teal: 0 8px 18px -6px rgba(14, 165, 183, .55), inset 0 -4px 8px rgba(0, 60, 68, .34), inset 0 2px 5px rgba(255, 255, 255, .42); /* la sfera PICCOLA (~22px: il giorno di oggi nel calendarietto). Stessa luce e stesso fondo, ombra in scala — quella grande su un pallino cosi' diventa una macchia sotto il numero, e si vede. */ --sw-sfera-ombra-pink-mini: 0 4px 10px -3px rgba(247, 37, 133, .55), inset 0 -2px 4px rgba(120, 0, 55, .30), inset 0 1px 3px rgba(255, 255, 255, .45); } /* ═══════════════════════════════════════════════════════════════════════════ IL TITOLO DELLE METE DELLA BARRA — 20/08/2026 (collaudo Laura, punto 9) Sei pagine nella barra in basso, e il titolo era scritto sei volte in sei dialetti: 20px in quattro salse (con e senza !important), 18px in una, e il guscio Impostazioni a 29px rosa. «Hanno titoli di dimensioni diverse e grafiche diverse» — Laura. La testata di una meta della barra e' UNA: questa. (Le pagine INTERNE delle Impostazioni tengono la loro .ih-title: quelle non si aprono dalla barra.) ============================================ */ .sw-mob-h1 { margin: 0; font-size: var(--sw-text-xl); font-weight: var(--sw-fw-bold); color: var(--sw-text-primary); letter-spacing: -0.01em; } .sw-mob-h1 small { display: block; font-size: var(--sw-text-xs); font-weight: var(--sw-fw-regular); color: var(--sw-text-secondary); margin-top: 2px; } /* ═══════════════════════════════════════════════════════════════════════════ L'EFFETTO SFERA — 10/08/2026 «visto che mi piacciono un sacco, ogni e dico ogni cerchio pulsante o bottone deve avere lo stesso effetto che hanno le sfere, diamo un po' di effetti belli ovunque tu ritieni che sia giusto averli» — Emiliano Nasce nel guscio delle Impostazioni e per due giorni e' vissuto dentro un solo template: tutte le altre pagine avevano dischi piatti col numero dentro. Qui e' una classe che qualunque cosa tonda puo' indossare — senza ricopiare venti righe di gradiente, che e' il modo in cui nascono i dialetti. Volume vero: nessuna immagine, nessuna libreria. La luce sta in alto a sinistra (32% 26%), l'ombra e' portata sotto, e il riflesso e' una GOCCIA, non un cerchio uniforme — e' quello che la fa sembrare una sfera invece di un bollino colorato. ============================================ */ .sw-sfera { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--sw-radius-full); color: var(--sw-text-white); background: var(--sw-sfera-fondo); box-shadow: var(--sw-sfera-ombra); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: transform 220ms var(--sw-ease-decisa), box-shadow 220ms; } .sw-sfera::after { content: ''; position: absolute; top: 10%; left: 20%; width: 38%; height: 25%; border-radius: 50%; background: var(--sw-sfera-riflesso); pointer-events: none; } .sw-sfera-pink { background: var(--sw-sfera-fondo-pink); box-shadow: var(--sw-sfera-ombra-pink); } .sw-sfera-teal { background: var(--sw-sfera-fondo-teal); box-shadow: var(--sw-sfera-ombra-teal); } /* una sfera dentro un bottone o un link si solleva insieme a lui */ a:hover > .sw-sfera, button:hover > .sw-sfera, .sw-sfera-viva:hover { transform: translateY(-2px) scale(1.06); } .sw-sfera-viva:active { transform: scale(.94); } @media (prefers-reduced-motion: reduce) { .sw-sfera { transition: none; } } /* ═══════════════════════════════════════════════════════════════════════════ COME SI APRONO LE COSE — 10/08/2026 «dobbiamo ancora aggiustare l'apertura dei modali e far sì che siano morbidi e non "smaaaam"» — Emiliano Lo «smaaaam» ha una causa precisa. Nel prodotto ci sono 81 animazioni diverse, e le aperture usano quasi tutte `ease` o `ease-out` con durate sparse (0.18s, 0.2s, 0.3s, 0.4s). `ease-out` parte a tutta velocità e si ferma di colpo: e' proprio quello il rumore che si sente con gli occhi. Una cosa che entra bene fa il contrario: parte decisa e RALLENTA verso la fine, come un cassetto ben fatto che non sbatte. E' la curva `morbida`, che arriva dal canone delle Impostazioni — dove le tendine si aprono cosi' e nessuno si e' mai lamentato. Tre ricette, da mettere sulla cosa che appare: .sw-entra un pannello, un menu, una scheda che compare .sw-entra-dal-basso un foglio che sale dal fondo (tipico sul telefono) .sw-entra-fondale il velo scuro dietro un modale ⚠️ Il fondale entra in DISSOLVENZA e basta: se scivola pure lui, sembra che la pagina si stia smontando. ═══════════════════════════════════════════════════════════════════════════ */ @keyframes sw-entra { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes sw-entra-dal-basso { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes sw-appari { from { opacity: 0; } to { opacity: 1; } } /* il foglio che sale dal fondo dello schermo: parte da FUORI, non da vicino */ @keyframes sw-foglio-sale { from { transform: translateY(100%); } to { transform: translateY(0); } } .sw-entra { animation: sw-entra var(--sw-dur-slow) var(--sw-ease-morbida) both; } .sw-entra-dal-basso { animation: sw-entra-dal-basso var(--sw-dur-slow) var(--sw-ease-morbida) both; } .sw-entra-fondale { animation: sw-appari var(--sw-dur-base) var(--sw-ease-standard) both; } .sw-foglio-sale { animation: sw-foglio-sale var(--sw-dur-slow) var(--sw-ease-morbida) both; } /* ============================================ BASE TYPOGRAPHY APPLICATION ============================================ */ html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--sw-font-body); font-size: var(--sw-text-base); line-height: var(--sw-leading-normal); color: var(--sw-text-primary); } h1, h2, h3, h4, h5, h6 { font-family: var(--sw-font-display); font-weight: var(--sw-fw-bold); line-height: var(--sw-leading-tight); color: var(--sw-text-primary); font-stretch: var(--sw-stretch-expanded); margin: 0 0 var(--sw-sp-3) 0; } /* Display headings use Mona Sans Expanded at wider stretch */ .display-heading { font-family: var(--sw-font-display); font-stretch: 125%; font-weight: var(--sw-fw-extrabold); letter-spacing: var(--sw-tracking-tight); } /* Body text uses Hubot Sans */ p, span, label, input, select, textarea, button, a { font-family: var(--sw-font-body); } /* ============================================ FOCUS VISIBLE (ACCESSIBILITY) ============================================ */ :focus-visible { outline: 2px solid var(--sw-pink); outline-offset: 2px; border-radius: var(--sw-radius-xs); } /* ============================================ SELECTION COLOR ============================================ */ ::selection { background: var(--sw-pink-light); color: var(--sw-pink-dark); } /* ═══════════════════════════════════════════════════════════════════════════ CHI HA CHIESTO MENO MOVIMENTO NON LO SUBISCE Una regola sola, qui, invece che ripetuta pagina per pagina — dove verrebbe dimenticata esattamente nella pagina che ne ha più bisogno. Non azzera tutto: le durate scendono a un'inezia, così le cose restano coerenti (un pannello si apre lo stesso, semplicemente non fa la strada). ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { :root { --sw-dur-fast: 1ms; --sw-dur-base: 1ms; --sw-dur-slow: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }