/* ══════════════════════════════════════════════════════════════════════════════ LA LINGUA VISIVA DI SINERGIASCUOLA. Prima di scrivere questo file ho contato cosa usava davvero il progetto: 287 colori diversi (39 verdi, 155 blu/grigi, 32 ciani, 23 rossi) 24 raggi di curvatura 42 dimensioni del testo 5 dichiarazioni di carattere (una era Segoe UI, fuori posto) Nessuno di questi numeri e' un errore, preso da solo. Insieme sono il motivo per cui il prodotto sembra ASSEMBLATO invece che DISEGNATO: ogni pezzo e' fatto bene, ma nessuno parla la lingua degli altri. Quattro verdi quasi uguali non li nota nessuno singolarmente; tutti insieme dicono "qui non c'era una regola". ── LA DECISIONE CHE CONTA ──────────────────────────────────────────────────── Il colore piu' usato era un VERDE (#34d399, 335 volte), ma il pulsante principale era BLU e l'accento della sfera AZZURRO. Cioe': tre identita' in contemporanea. E c'era un danno peggiore dell'estetica: il verde era sprecato. Serviva insieme come IDENTITA' (pulsanti, bordi, icone) e come SIGNIFICATO ("tutto a posto"). Ma un colore che sta ovunque non significa piu' niente: il giorno che una classe e' coperta, quel verde non lo vedi — e' gia' dappertutto. Quindi: - AZZURRO = SinergiaScuola. E' il colore della sfera, l'unica cosa che nessun concorrente ha. Marchio, azioni, accenti. - VERDE = "e' coperto, puoi stare tranquillo". Raro. E quindi pesante. - GIALLO = "sto aspettando una risposta" (e finche' aspetti, la classe e' scoperta). - ROSSO = "scoperto" / errore. Il colore smette di decorare e ricomincia a INFORMARE: un dirigente che apre la pagina e vede giallo sa che c'e' qualcosa in sospeso prima ancora di leggere una parola. ══════════════════════════════════════════════════════════════════════════════ */ :root { /* ── IDENTITA' ───────────────────────────────────────────────────────────── */ --ss-brand: #38bdf8; /* l'azzurro della sfera: e' SinergiaScuola */ --ss-brand-chiaro: #7dd3fc; /* testo e icone su fondo scuro */ --ss-brand-scuro: #0284c7; /* hover, pressioni */ --ss-brand-forte: #1d4ed8; /* azione principale (il pulsante che si preme davvero) */ /* ── SIGNIFICATO (uno solo per stato: se sono quattro, non significano piu' niente) ── */ --ss-ok: #34d399; /* coperto, confermato, tutto a posto */ --ss-attesa: #fbbf24; /* in attesa di risposta -> la classe e' ANCORA scoperta */ --ss-rischio: #f97316; /* rifiutato, riassegnato */ --ss-grave: #f87171; /* scoperto, errore */ --ss-ai: #a78bfa; /* l'assistente parla */ /* Le stesse tinte, trasparenti: per fondi e bordi. Cosi' non nascono #34d39922 a caso. */ --ss-ok-velo: rgba(52,211,153,.12); --ss-ok-bordo: rgba(52,211,153,.35); --ss-attesa-velo: rgba(251,191,36,.12); --ss-attesa-bordo: rgba(251,191,36,.35); --ss-grave-velo: rgba(248,113,113,.12); --ss-grave-bordo: rgba(248,113,113,.35); --ss-brand-velo: rgba(56,189,248,.12); --ss-brand-bordo: rgba(56,189,248,.35); /* ── NEUTRI: una scala sola, cinque gradini. Prima erano 155 fra blu e grigi. ── */ --ss-n1: #f8fafc; /* testo su fondo scuro, quasi bianco */ --ss-n2: #e2e8f0; /* testo normale */ --ss-n3: #94a3b8; /* testo secondario */ --ss-n4: #64748b; /* testo tenue, didascalie */ --ss-n5: #334155; /* bordi su fondo chiaro */ /* ── FONDO: il blu notte del prodotto ─────────────────────────────────────── */ --ss-fondo: #070d1c; --ss-fondo-2: #0d1a3a; --ss-superficie: rgba(255,255,255,.035); /* le "card" */ --ss-bordo: rgba(255,255,255,.10); /* ── FORMA: tre raggi, non ventiquattro ───────────────────────────────────── */ --ss-r-s: 8px; /* pulsanti, campi, badge */ --ss-r-m: 12px; /* riquadri, card */ --ss-r-l: 20px; /* pannelli grandi, finestre */ --ss-r-pieno: 999px; /* ── TESTO: sette misure, non quarantadue ─────────────────────────────────── */ --ss-t-xs: 11px; /* etichette, didascalie */ --ss-t-s: 12px; /* testo di servizio */ --ss-t-m: 13px; /* testo corrente dell'applicazione */ --ss-t-l: 15px; /* testo importante */ --ss-t-xl: 17px; /* titoli di riquadro */ --ss-t-2xl:22px; /* titoli di sezione */ --ss-t-3xl:30px; /* numeri grandi, quelli che si guardano da lontano */ /* ── RITMO: multipli di 4. Lo spazio irregolare e' la cosa che si nota di piu' senza saper dire perche'. ─────────────────────────────────────────────── */ --ss-sp-1: 4px; --ss-sp-2: 8px; --ss-sp-3: 12px; --ss-sp-4: 16px; --ss-sp-5: 24px; --ss-sp-6: 32px; /* ── PROFONDITA': due ombre, sempre le stesse ─────────────────────────────── */ --ss-ombra: 0 2px 8px rgba(0,0,0,.25); --ss-ombra-alta: 0 12px 32px rgba(0,0,0,.45); /* ── UN SOLO CARATTERE ────────────────────────────────────────────────────── */ --ss-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ss-mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; } /* Il carattere: una volta sola, per tutti. C'era una pagina rimasta a Segoe UI, e si vedeva (le lettere avevano un'altra larghezza, e le tabelle non si allineavano con le altre). */ body { font-family: var(--ss-font); } /* ── IL LOGO: UNA MISURA SOLA, DEFINITA QUI ────────────────────────────────── Era scritta a mano dentro OGNI pagina: 48px nell'admin, 46 nella vista docente, 36 nel login. Nessuna regola, solo numeri copiati e poi divergenti — e infatti si vedeva: ingrandito il logo nell'admin, quello del docente e' rimasto indietro (l'ha notato l'utente, non io). Un valore ripetuto in cinque file non e' un valore: sono cinque valori che per caso coincidono, finche' qualcuno ne cambia uno. Adesso e' UNO, e vale per tutte le pagine. */ .app-header .logo-img, .app-header .logo-wrap img, header.app-header img[src*="logo"] { height: 56px; /* il massimo dentro una barra da 72px, con 8px di respiro */ width: auto; border-radius: 11px; display: block; } @media (max-width: 760px) { .app-header .logo-img, .app-header .logo-wrap img, header.app-header img[src*="logo"] { height: 38px; border-radius: 9px; } } /* ── IL NOME SCRITTO: "SinergiaScuola" ─────────────────────────────────────── Stava solo in admin.css, quindi la vista docente — che quel file non lo carica — NON AVEVA IL MARCHIO: mostrava il nome della scuola e basta. Ora la regola e' qui, in un file che caricano tutte le pagine, e il marchio e' lo stesso ovunque. L'accento sta su "Scuola", non su "Sinergia": e' la parola che dice a chi serve. */ .hd-brand { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -.5px; white-space: nowrap; line-height: 1; } .hd-brand-accent { background: linear-gradient(135deg, #7dd3fc, #818cf8 55%, #ec4899); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } @media (max-width: 760px) { .hd-brand { font-size: 16px; } } /* ── FOCUS VISIBILE ────────────────────────────────────────────────────────── Chi naviga con la tastiera (per scelta o perche' non puo' usare il mouse) deve SEMPRE sapere dove si trova. Molti browser tolgono il contorno di default appena si tocca l'outline via CSS: qui lo rimettiamo, col colore del marchio, ovunque. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--ss-brand); outline-offset: 2px; border-radius: var(--ss-r-s); } /* ── RIDUCI ANIMAZIONI ─────────────────────────────────────────────────────── Impostazione di sistema, non un capriccio: c'e' chi ha vertigini, chi ha epilessia fotosensibile, chi vuole solo salvare la batteria. Rispettarla e' gratis. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }