/* ===================================================================== Archivio firmware — foglio di stile unico. Nessuna risorsa esterna: niente CDN, niente font remoti. I caratteri sono quelli di sistema, che su ogni piattaforma sono già i migliori disponibili e non costano una richiesta di rete. Palette "caffè": crema, espresso, accento rame. ===================================================================== */ :root { --crema: #faf6f0; --crema-2: #f2e9dd; --espresso: #2e1f17; --espresso-2:#4a3428; --rame: #b06a3b; --rame-2: #8d5029; --testo: #2e1f17; --testo-2: #7a6656; --bordo: #e3d6c6; --sfondo: #faf6f0; --pannello: #ffffff; --ok: #2f7a4d; --avviso: #a8761b; --errore: #a33a2a; --raggio: 10px; --ombra: 0 1px 2px rgba(46,31,23,.06), 0 8px 24px rgba(46,31,23,.05); } /* Tema scuro: si attiva da solo con le preferenze di sistema, e si può forzare con data-tema sul (l'interruttore nel menu). */ @media (prefers-color-scheme: dark) { :root:not([data-tema="chiaro"]) { --crema: #1b1512; --crema-2: #251d18; --testo: #ede4da; --testo-2: #b3a294; --bordo: #3a2d25; --sfondo: #16110e; --pannello: #211a16; --rame: #d98a53; --rame-2: #e9a674; } } :root[data-tema="scuro"] { --crema: #1b1512; --crema-2: #251d18; --testo: #ede4da; --testo-2: #b3a294; --bordo: #3a2d25; --sfondo: #16110e; --pannello: #211a16; --rame: #d98a53; --rame-2: #e9a674; } * { box-sizing: border-box; } body { margin: 0; background: var(--sfondo); color: var(--testo); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; } .contenitore { max-width: 1100px; margin: 0 auto; padding: 0 20px; } /* --- barra in alto --------------------------------------------------- */ .barra { position: sticky; top: 0; z-index: 50; background: var(--pannello); border-bottom: 1px solid var(--bordo); box-shadow: 0 1px 3px rgba(46,31,23,.04); } .barra-interna { max-width: 1100px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 18px; } .marchio { display: flex; align-items: center; gap: 10px; color: var(--rame); text-decoration: none; font-weight: 700; white-space: nowrap; } .marchio svg { width: 30px; height: 30px; flex: 0 0 auto; } .marchio span { color: var(--testo); font-size: .98rem; letter-spacing: -.01em; } .voci { display: flex; gap: 4px; align-items: center; margin-left: auto; flex-wrap: wrap; } .voci a { color: var(--testo-2); text-decoration: none; font-size: .92rem; padding: 7px 11px; border-radius: 7px; white-space: nowrap; } .voci a:hover { background: var(--crema-2); color: var(--testo); } .voci a.attiva { color: var(--rame); background: var(--crema-2); font-weight: 600; } .utente { display: flex; align-items: center; gap: 8px; padding-left: 12px; margin-left: 4px; border-left: 1px solid var(--bordo); font-size: .86rem; color: var(--testo-2); white-space: nowrap; } .ruolo { background: var(--crema-2); color: var(--rame-2); padding: 2px 8px; border-radius: 999px; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } /* Hamburger: nessun JavaScript, è una checkbox nascosta. Funziona anche se lo script non parte, che è il motivo per cui è fatto così. */ .hamburger { display: none; } .hamburger-etichetta { display: none; margin-left: auto; cursor: pointer; padding: 8px 10px; border: 1px solid var(--bordo); border-radius: 7px; color: var(--testo); } @media (max-width: 860px) { .hamburger-etichetta { display: block; } .voci { display: none; width: 100%; margin: 0; padding-top: 10px; flex-direction: column; align-items: stretch; } .hamburger:checked ~ .voci { display: flex; } .voci a, .utente { padding: 10px 12px; } .utente { border-left: 0; border-top: 1px solid var(--bordo); margin-left: 0; padding-left: 12px; } .barra-interna { flex-wrap: wrap; } } /* --- contenuto ------------------------------------------------------- */ main { padding: 30px 0 60px; } h1 { font-size: 1.7rem; margin: 0 0 6px; letter-spacing: -.02em; } h2 { font-size: 1.2rem; margin: 30px 0 12px; } .sottotitolo { color: var(--testo-2); margin: 0 0 24px; } .pannello { background: var(--pannello); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 20px; box-shadow: var(--ombra); margin-bottom: 18px; } .griglia { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .btn { display: inline-flex; align-items: center; gap: 8px; background: var(--rame); color: #fff; border: 0; padding: 11px 20px; border-radius: 8px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; } .btn:hover { background: var(--rame-2); } .btn.secondario { background: transparent; color: var(--rame); border: 1px solid var(--bordo); } .btn.secondario:hover { background: var(--crema-2); } .muto { color: var(--testo-2); font-size: .9rem; } .vuoto { text-align: center; padding: 50px 20px; color: var(--testo-2); border: 1px dashed var(--bordo); border-radius: var(--raggio); } /* --- hero della pagina pubblica -------------------------------------- */ .hero { text-align: center; padding: 60px 20px 40px; } .hero .logo-grande { width: 84px; height: 84px; color: var(--rame); } .hero h1 { font-size: 2.3rem; margin: 18px 0 10px; } .hero p { color: var(--testo-2); max-width: 580px; margin: 0 auto 28px; font-size: 1.05rem; } .scheda { background: var(--pannello); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 22px; text-align: left; } .scheda .emoji { font-size: 1.7rem; } .scheda h3 { margin: 10px 0 6px; font-size: 1.04rem; } .scheda p { margin: 0; color: var(--testo-2); font-size: .93rem; } /* --- piè di pagina --------------------------------------------------- */ footer { border-top: 1px solid var(--bordo); background: var(--crema-2); padding: 26px 0; font-size: .85rem; color: var(--testo-2); } footer a { color: var(--rame); } footer .righe { display: grid; gap: 6px 26px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } footer strong { color: var(--testo); }