/* Gestionale Adozioni — foglio di stile unico, nessun passaggio di build. L'aspetto nasce dal marchio dell'associazione: il blu del mappamondo per le intestazioni, il grano delle spighe per gli accenti, e una carta appena calda al posto del grigio da pannello di controllo. I titoli sono in grazie, il resto in caratteri di sistema: si legge come un foglio di segreteria, non come un cruscotto. */ :root{ --inchiostro:#1d2b36; --testo:#3e4b57; --tenue:#6e7b87; --fondo:#f5f2ec; --carta:#fff; --carta-2:#f2efe8; --filo:#e2ded4; --filo-forte:#c5bfb2; --verde:#2c6a52; --verde-chiaro:#e4efea; --ambra:#94600f; --ambra-chiaro:#f9edd8; --rosso:#a33227; --rosso-chiaro:#f9e7e3; --blu:#1a6392; --blu-chiaro:#e6eef5; /* Il marchio: blu profondo della barra e oro delle spighe. */ --marino:#123f5a; --marino-2:#0d3247; --grano:#c99a3f; --grano-chiaro:#f6ecd8; --ombra:0 1px 2px rgba(29,43,54,.06), 0 1px 8px rgba(29,43,54,.04); --ombra-alta:0 2px 4px rgba(29,43,54,.08), 0 8px 24px rgba(29,43,54,.07); --raggio:5px; --grazie:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif; } *{box-sizing:border-box} body{ margin:0;background:var(--fondo);color:var(--inchiostro); font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; } a{color:var(--blu)} /* Dove sei, quando ti muovi con la tastiera. C'era solo sulle voci del menu e sui campi: bottoni, collegamenti dentro le tabelle, riquadri delle cifre e paginazione si affidavano al contorno del navigatore, che sul bottone blu scuro non si vede. In segreteria si lavora a colpi di tabulazione, e perdere il segno vuol dire ricominciare a cercarlo con gli occhi. :where() tiene la regola debole, così le eccezioni scritte dopo continuano a vincere. */ :where(a,button,summary,[tabindex]):focus-visible{ outline:2px solid var(--blu);outline-offset:2px;border-radius:3px} /* Sul blu della barra il blu non si vedrebbe. */ .barra :focus-visible{outline-color:#fff} h1{font-family:var(--grazie);font-size:25px;font-weight:600;margin:0 0 4px;letter-spacing:-.005em} h2{font-size:16px;margin:0 0 12px} .num{font-variant-numeric:tabular-nums} /* icone Un disegno solo, ripetuto con : il segno segue il colore del testo e cresce col carattere, cosi' dentro un bottone o in mezzo a una frase sta sempre alla misura giusta. */ .ico{width:1.08em;height:1.08em;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.16em} .ico-g{width:1.5em;height:1.5em} /* barra */ /* La barra sta su due fasce: l'identita' sopra, la navigazione sotto. Con dieci voci la riga unica non ci stava — servivano circa 1450px in un contenitore da 1200 — e nome utente ed "esci" finivano a capo da soli. */ .barra{background:var(--marino);color:#d7e3ec; background-image:linear-gradient(180deg,#154866,var(--marino-2)); border-bottom:2px solid var(--grano)} .barra-in{max-width:1240px;margin:0 auto;padding:0 20px} .barra-alta{display:flex;align-items:center;gap:16px;min-height:56px;flex-wrap:wrap} .marchio{display:flex;align-items:center;gap:10px;font-family:var(--grazie);font-weight:600; color:#fff;text-decoration:none;font-size:17px;letter-spacing:-.005em;margin-right:auto} /* Il marchio e' su fondo scuro: il tondo bianco gli fa da carta sotto. */ .marchio img{width:32px;height:32px;object-fit:contain;background:#fff;border-radius:50%; padding:2px;box-shadow:0 0 0 1px rgba(255,255,255,.25)} /* Lo stato del lavoro, accanto al nome: piccolo e in oro, perché deve essere leggibile ma non gridare. */ .marchio .stato{font-family:system-ui,sans-serif;font-size:10.5px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;color:var(--grano); border:1px solid rgba(201,154,63,.55);border-radius:3px;padding:1px 5px;margin-left:2px} /* Undici voci col loro segno stanno su una riga sola solo se l'aria intorno e' poca: il segno ha preso lo spazio che prima era del margine. */ .barra nav .voci{display:flex;gap:0;flex-wrap:wrap} .barra nav a{display:inline-flex;align-items:center;gap:5px;color:#adc0cf;text-decoration:none; padding:8px 9px 9px;font-size:13.5px;white-space:nowrap;border-bottom:3px solid transparent} .barra nav a .ico{width:1em;height:1em} /* Al computer il cassetto non esiste: l'interruttore non si vede e le voci stanno sempre in vista. */ .interruttore-menu,.apri-menu{display:none} .barra nav a .ico{opacity:.75} .barra nav a:hover{background:rgba(255,255,255,.07);color:#fff} .barra nav a:hover .ico{opacity:1} .barra nav a[aria-current]{color:#fff;font-weight:500;border-bottom-color:var(--grano)} .barra nav a[aria-current] .ico{opacity:1;color:var(--grano)} .barra nav a:focus-visible{outline:2px solid #fff;outline-offset:-2px} .chi{display:flex;align-items:center;gap:12px;font-size:13px;color:#8fa3b3} .chi b{color:#dbe4eb;font-weight:500} /* Il nome porta alla propria scheda. Non si veste da collegamento — sulla barra scura il colore dei link sembrava un errore di stile — ma senza niente non si capiva che si potesse premere: la chiave davanti fa quel mestiere, come l'icona di «esci» qui accanto. */ .chi a{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none} .chi a .ico{color:#8fa3b3;opacity:.9} .chi a:hover b,.chi a:focus-visible b{text-decoration:underline} .chi a:hover{color:#dbe4eb} .chi a:hover .ico{color:#dbe4eb;opacity:1} /* Sotto i 600px il ruolo si toglie: il nome basta a sapere chi e' dentro. */ @media(max-width:600px){.chi .ruolo{display:none}.marchio{font-size:15px}.marchio img{width:26px;height:26px}} .esci{display:inline-flex;align-items:center;gap:5px;background:none;border:0;color:#8fa3b3; cursor:pointer;font:inherit;padding:0} .esci:hover{color:#fff} .foglio{max-width:1240px;margin:0 auto;padding:26px 20px 64px} .testata{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px} .testata p{margin:0;color:var(--tenue);font-size:14px} /* riquadri */ .riquadro{background:var(--carta);border:1px solid var(--filo);border-radius:var(--raggio);box-shadow:var(--ombra)} .riquadro>h2{display:flex;align-items:center;gap:8px;padding:11px 16px;margin:0; border-bottom:1px solid var(--filo);font-family:var(--grazie);font-size:16px;font-weight:600; color:var(--inchiostro);letter-spacing:0;text-transform:none} .riquadro>h2 .ico{color:var(--grano);stroke-width:1.6} .riquadro>.dentro{padding:16px} .griglia{display:grid;gap:16px} .due{grid-template-columns:2fr 1fr} .tre{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} @media(max-width:900px){.due{grid-template-columns:1fr}} /* dati in evidenza */ /* I fili fra una cifra e l'altra sono contorni delle celle, non il fondo che traspare dalle fessure: sul telefono le cifre vanno a capo e l'ultima riga resta spaiata: col fondo grigio quel posto vuoto sembrava un riquadro rotto. */ .cifre{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--carta); border:1px solid var(--filo);border-radius:var(--raggio);overflow:hidden;margin-bottom:16px;box-shadow:var(--ombra)} .cifra{background:var(--carta);padding:14px 16px;position:relative;outline:1px solid var(--filo)} .cifra .v{font-size:25px;font-weight:600;letter-spacing:-.02em;display:block;line-height:1.2} .cifra .e{font-size:12.5px;color:var(--tenue);display:block;margin-top:1px} .cifra .d{font-size:12px;margin-top:3px;display:block} /* Il segno sta nell'angolo, sbiadito: dice di che parla il riquadro senza rubare l'occhio alla cifra, che e' quello che si viene a leggere. */ .cifra>.ico{position:absolute;top:13px;right:14px;width:22px;height:22px;color:var(--filo-forte);stroke-width:1.5} a.cifra{text-decoration:none;color:inherit;transition:background .12s} a.cifra:hover{background:var(--grano-chiaro)} a.cifra:hover>.ico{color:var(--grano)} a.cifra:focus-visible{outline:2px solid var(--blu);outline-offset:-2px} a.cifra[aria-current]{box-shadow:inset 0 -3px 0 var(--grano)} .su{color:var(--verde)} .giu{color:var(--rosso)} /* tabelle */ /* .scorri fa scorrere di lato le tabelle larghe. Ma un contenitore che scorre in orizzontale scorre anche in verticale, e dentro uno di questi l'intestazione appiccicata non si appiccica: il riferimento diventa il contenitore, che in altezza non si muove mai — misurato, non supposto. Da 900px in su nessuna delle tabelle straborda (l'ho verificato su prima nota, piano dei conti, sostenitori e sostegni: si stringono tutte fino a 967px in un contenitore da 967), quindi li' lo scorrimento non serve e si toglie di mezzo. Sotto, dove serve davvero, l'intestazione rinuncia a restare ferma: e' il verso giusto del compromesso, perche' gli elenchi lunghi si leggono al computer. */ .scorri{overflow-x:auto} @media(min-width:901px){.scorri{overflow:visible}} /* Sul telefono le colonne di contorno si tolgono di mezzo. Otto colonne su uno schermo da 360 pixel si leggono scorrendo di lato, cioè non si leggono: si perde la riga a metà strada. Le colonne marcate «secondaria» sono quelle che servono al computer e non al telefono — un recapito, una data di registrazione, un conteggio — e lì spariscono, lasciando le tre o quattro che dicono di chi si sta parlando. Restano in pagina per chi stampa. */ @media(max-width:700px){ .secondaria{display:none} } /* Trenta righe piu' sotto non si sa piu' quale colonna si sta leggendo. */ thead th{position:sticky;top:0;z-index:2} /* Il filo sotto l'intestazione va disegnato dentro la cella: con border-collapse il bordo appartiene alla tabella e resta indietro mentre l'intestazione sale. */ thead th{border-bottom:0;box-shadow:inset 0 -1px 0 var(--filo-forte)} table{border-collapse:collapse;width:100%;font-size:14px} thead th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--tenue); font-weight:600;padding:9px 14px;border-bottom:1px solid var(--filo-forte);background:var(--carta-2);white-space:nowrap} td{padding:9px 14px;border-bottom:1px solid var(--filo);vertical-align:top} tbody tr:last-child td{border-bottom:0} /* Una riga sì e una no, appena appena: su otto colonne l'occhio torna indietro di una riga senza accorgersene, e il filo sottile da solo non basta a tenerlo in carreggiata. Il passaggio del mouse resta più forte, perché dice un'altra cosa. */ tbody tr:nth-child(even){background:#fbfaf7} tbody tr:hover{background:var(--carta-2)} td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} td.compatto{white-space:nowrap} /* Quando non c'e' niente da mostrare: il segno dice che la pagina funziona, e che il vuoto e' proprio la risposta. */ .vuoto{padding:30px 16px;text-align:center;color:var(--tenue)} .vuoto .ico{display:block;margin:0 auto 8px;width:28px;height:28px;color:var(--filo-forte);stroke-width:1.4} /* etichette */ .et{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase; padding:2px 7px;border-radius:9px;white-space:nowrap} .et-verde{background:var(--verde-chiaro);color:var(--verde)} .et-grigio{background:var(--carta-2);color:var(--tenue)} .et-ambra{background:var(--ambra-chiaro);color:var(--ambra)} .et-blu{background:var(--blu-chiaro);color:var(--blu)} .et-rosso{background:var(--rosso-chiaro);color:var(--rosso)} /* «codice» vuol dire: questo si copia a mano com'e' scritto. Il text-transform serve perche' basta metterlo dentro un
, che e' maiuscolo perche' e' un'etichetta di campo, e il letterale cambia forma: i segnaposto delle lettere si leggevano {{BENEFATTORE}} e vanno scritti {{benefattore}}. */ .codice{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12.5px; background:var(--carta-2);padding:1px 5px;border-radius:3px; text-transform:none;letter-spacing:normal} /* moduli */ .cerca{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px} /* Tutto quello in cui si scrive, non tre tipi su otto. L'elenco per nome lasciava fuori le date, i numeri e le aree di testo, e quelli uscivano vestiti dal navigatore: nella maschera dei versamenti data e importo erano due scatoline basse e squadrate in mezzo a campi fatti bene. */ /* L'elenco dei tipi sta dentro :where() cosi' non pesa: la regola vale quanto «input» e basta, e quella del campo sbagliato — qui sotto — la batte senza bisogno di !important. */ input:where(:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=button]):not([type=submit])), select,textarea{ font:inherit;padding:7px 10px;border:1px solid var(--filo-forte);border-radius:var(--raggio); background:var(--carta);color:var(--inchiostro);min-width:0} textarea{resize:vertical;line-height:1.5;width:100%} input:focus,select:focus,textarea:focus{outline:2px solid var(--blu);outline-offset:-1px;border-color:var(--blu)} input[type=text].largo{flex:1;min-width:240px} /* Spunte e pallini seguono il colore di casa invece del blu di sistema. */ input[type=checkbox],input[type=radio]{accent-color:var(--marino)} /* Un campo con la sua etichetta sopra. Queste tre righe stavano copiate in otto maschere, con il margine ballerino fra i 14 e i 16 pixel. */ .campo{margin-bottom:14px} .campo label{display:block;font-size:13px;font-weight:500;margin-bottom:4px} .campo input:not([type=checkbox]):not([type=radio]),.campo select,.campo textarea{width:100%} /* Il bottone ha un filo piu' scuro sotto: si vede che e' una cosa da premere. */ .bottone{display:inline-flex;align-items:center;gap:7px;font:inherit;font-weight:500;padding:7px 15px; border:1px solid var(--marino);border-bottom-color:var(--marino-2);background:var(--marino);color:#fff; border-radius:var(--raggio);cursor:pointer;text-decoration:none;box-shadow:0 1px 0 rgba(29,43,54,.08)} .bottone:hover{background:#17506f;border-color:#17506f} .bottone .ico{opacity:.85} .bottone.chiaro{background:var(--carta);color:var(--testo);border-color:var(--filo-forte);border-bottom-color:var(--filo-forte)} .bottone.chiaro:hover{background:var(--carta-2)} .bottone.chiaro .ico{color:var(--tenue);opacity:1} /* Una spunta con la sua etichetta accanto. Era riscritta identica in sei viste: sta qui una volta sola. */ .scelta{display:flex;align-items:center;gap:7px;font-size:14px} .scelta input{width:auto;flex:none} /* Un bottone che sembra un collegamento: azioni dentro una tabella. */ .collegamento{background:none;border:0;padding:0;font:inherit;font-size:13px; color:var(--blu);text-decoration:underline;cursor:pointer} /* Un campo compilato male si segna da se'. Prima c'era solo la riga rossa sotto: in una scheda da venti campi si torna su dopo il salvataggio, si vede del rosso da qualche parte e bisogna cercare con gli occhi quale casella lo riguardi. aria-invalid lo dice anche a chi legge con la sintesi vocale. */ [aria-invalid]{border-color:var(--rosso);background:var(--rosso-chiaro)} [aria-invalid]:focus{outline-color:var(--rosso);border-color:var(--rosso)} .errore{color:var(--rosso);font-size:13.5px;margin-top:5px} /* Gli avvisi portano il segno a sinistra e una banda del loro colore: si capisce se e' una conferma o un guaio prima ancora di leggere. */ .avviso{padding:11px 15px 11px 14px;border-radius:var(--raggio);border-left:3px solid currentColor; margin-bottom:16px;font-size:14px} /* Il segno galleggia a sinistra invece di essere una casella accanto: dentro l'avviso ci sono e , e con un contenitore flessibile ognuno sarebbe finito in una colonna sua invece di stare nella frase. */ .avviso>.ico{float:left;width:1.15em;height:1.15em;margin:.18em 9px 0 0} .avviso-ok{background:var(--verde-chiaro);color:var(--verde)} .avviso-attenzione{background:var(--ambra-chiaro);color:var(--ambra)} .avviso-errore{background:var(--rosso-chiaro);color:var(--rosso)} /* riquadri da scegliere: le pagine di secondo livello (amministrazione, contabilita') sono elenchi di porte, e ogni porta ha il suo segno. Le regole stavano copiate uguali dentro due viste. */ .scelta-grande{display:flex;flex-direction:column;gap:4px;padding:16px 18px; text-decoration:none;color:var(--inchiostro);transition:background .12s,border-color .12s} .scelta-grande:hover{background:var(--carta-2);border-color:var(--filo-forte)} .scelta-grande>.ico{width:25px;height:25px;color:var(--grano);stroke-width:1.5;margin-bottom:6px} .scelta-grande strong{font-size:15px;font-family:var(--grazie);font-weight:600} .cifra-piccola{font-size:12.5px;color:var(--verde);font-weight:500;margin-top:6px} /* scheda */ .dati{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 24px} .dato dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--tenue);margin-bottom:1px} .dato dd{margin:0;font-size:14.5px} .dato dd.assente{color:var(--filo-forte)} /* barre dell'andamento */ .mesi{display:flex;align-items:flex-end;gap:5px;height:92px;padding-top:6px} .mese{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%} .mese i{display:block;width:100%;background:linear-gradient(180deg,#2f88bd,#1a6392); border-radius:2px 2px 0 0;min-height:2px} .mese span{font-size:10.5px;color:var(--tenue)} /* La cifra del mese più alto, scritta sopra la sua barra: dà la scala a tutte le altre senza bisogno di un asse. */ .mese .cima{font-size:11px;font-weight:600;color:var(--tenue);white-space:nowrap; font-variant-numeric:tabular-nums} /* paginazione */ .pagine{margin-top:14px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap; font-size:13.5px;color:var(--tenue)} .pagine nav{display:flex;gap:3px;flex-wrap:wrap} /* Il riquadrino tocca ai numeri di pagina, che stanno dentro