/* ── IL CARATTERE: INTER, ospitato da noi ─────────────────────────────────── Licenza SIL Open Font (OFL 1.1): si puo' usare, incorporare e ridistribuire, anche insieme a software venduto. La licenza viaggia col font, in /stile/font/LICENZA-Inter-OFL.txt — come LICENSE.md di TastyIgniter, non e' una formalita'. ⚠️ Ospitato SULLA NOSTRA VPS, non preso da Google. Stessa regola di tutto il resto: se la pagina si apre, funziona. Un carattere che arriva da fuori e' una cosa in piu' che puo' non rispondere il sabato sera. Solo il sottoinsieme LATINO: 47 KB invece dei 344 del font intero. Copre tutto l'italiano, accenti compresi. Il latin-ext (83 KB) si scarica solo se in pagina compare un carattere che lo richiede — su un menu' non capita. font-display: swap -> il testo si vede SUBITO col carattere di sistema e poi passa a Inter. Non si aspetta mai un font per leggere un menu'. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; /* un file solo, tutti i pesi */ font-display: swap; src: url("/stile/font/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/stile/font/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ═══════════════════════════════════════════════════════════════════════════ SILENSUN — un solo sistema di stile per tutte le schermate. Prima c'erano quattro fondi scuri diversi fra le mie pagine, piu' il pannello gestore chiaro: sembravano cinque prodotti di cinque persone diverse. COME FUNZIONA Un tema solo, due vestiti: chiaro e scuro. Segue l'impostazione del telefono o del computer — chiaro di giorno, scuro la sera — e si puo' forzare a mano con data-tema="chiaro" o "scuro" sull'elemento . PERCHE' COSI' e non un colore fisso: la stessa pagina la guarda il cameriere in una sala buia e il gestore alle tre del pomeriggio davanti alla vetrina. Un fondo nero in pieno sole non si legge; un fondo bianco in sala la sera acceca. Seguire il dispositivo e' la cosa che non da' fastidio a nessuno. I CONTRASTI SONO MISURATI, non scelti a occhio: ogni coppia testo/fondo sta sopra 4.5:1 (la soglia WCAG AA). Verificato con uno script, non a sentimento. ═══════════════════════════════════════════════════════════════════════════ */ /* ── CHIARO (di partenza) ───────────────────────────────────────────────── */ :root { --fondo: #f6f6f8; /* la pagina */ --carta: #ffffff; /* le schede sopra */ --carta-2: #eeeef1; /* zone piu' basse: intestazioni, piedi */ --bordo: #e0e0e5; --bordo-forte: #c7c7cf; --testo: #1c1c1e; /* 15.8:1 sul fondo */ --testo-2: #5c5c66; /* 6.4:1 — per le cose secondarie, non per l'importante */ --testo-3: #86868f; /* 3.5:1 — SOLO per testo grande o decorazioni */ --oro: #8f681f; /* l'accento, versione leggibile come TESTO su chiaro. MISURATO: 5.04:1 sul bianco, 4.67:1 sul fondo. Il primo tentativo (#b07d14) era 3.63:1 — sotto AA. Non si sceglie un colore a occhio: si conta. */ --oro-pieno: #d9a441; /* per i riempimenti, con testo scuro sopra */ --su-oro: #2b1f06; /* il testo che va sopra --oro-pieno */ --verde: #17795a; --verde-tenue: #e6f4ee; --rosso: #b3261e; --rosso-tenue: #fbeae9; --ambra: #8a5f0a; --ambra-tenue: #fdf3e0; --ombra: 0 1px 2px #0000000d, 0 4px 12px #00000010; --ombra-alta: 0 8px 28px #00000022; } /* ── SCURO: segue il dispositivo ────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-tema="chiaro"]) { --fondo: #15171c; --carta: #1e2027; --carta-2: #262932; --bordo: #30343e; --bordo-forte: #454a57; --testo: #f1f2f5; /* 14.9:1 */ --testo-2: #a3a8b4; /* 6.9:1 */ --testo-3: #7c828f; /* 4.1:1 — solo testo grande */ --oro: #e0ad4f; /* 8.1:1 sul fondo scuro */ --oro-pieno: #d9a441; --su-oro: #241a05; --verde: #4cc08c; --verde-tenue: #16291f; --rosso: #ff6b5c; --rosso-tenue: #2b1815; --ambra: #e0ad4f; --ambra-tenue: #2b2211; --ombra: 0 1px 2px #00000040, 0 4px 14px #00000055; --ombra-alta: 0 10px 34px #00000077; } } /* ── SCURO forzato a mano ───────────────────────────────────────────────── */ :root[data-tema="scuro"] { --fondo:#15171c; --carta:#1e2027; --carta-2:#262932; --bordo:#30343e; --bordo-forte:#454a57; --testo:#f1f2f5; --testo-2:#a3a8b4; --testo-3:#7c828f; --oro:#e0ad4f; --oro-pieno:#d9a441; --su-oro:#241a05; --verde:#4cc08c; --verde-tenue:#16291f; --rosso:#ff6b5c; --rosso-tenue:#2b1815; --ambra:#e0ad4f; --ambra-tenue:#2b2211; --ombra:0 1px 2px #00000040, 0 4px 14px #00000055; --ombra-alta:0 10px 34px #00000077; } /* ── COLORI DA RIEMPIMENTO ────────────────────────────────────────────────── Sono DIVERSI da quelli usati come testo, e non cambiano fra chiaro e scuro. Motivo misurato: in tema scuro il rosso "da testo" (#ff6b5c) col testo bianco sopra faceva 2.8:1 — molto sotto la soglia. Un tasto grande e coloratissimo che non si legge e' peggio di un tasto grigio. Qui il riempimento resta scuro in entrambi i temi e il testo sopra e' sempre quello leggibile: rosso 5.44:1, verde 5.36:1, oro 7.17:1. Tutti sopra AA. */ :root { --rosso-pieno: #c0392b; --su-rosso: #ffffff; --verde-pieno: #17795a; --su-verde: #ffffff; --ambra-pieno: #d9a441; --su-ambra: #2b1f06; } /* ── LA PIANTINA DELLA SALA ───────────────────────────────────────────────── I tavoli si riempiono di un colore tenue e il testo sopra resta quello normale della pagina. Prima il piano era verde SCURO fisso con sopra un bianco fisso: in tema chiaro il sottotitolo "2-4 posti" (che usa il grigio del tema) finiva su un fondo verde scuro ed era illeggibile. Cosi' invece piano e testo cambiano insieme, e i due restano sempre in accordo qualunque sia il tema. */ :root { --tavolo-libero: #e6f4ee; /* verde tenue */ --tavolo-occupato: #fbeae9; /* rosso tenue */ --tavolo-neutro: #eeeef1; } @media (prefers-color-scheme: dark) { :root:not([data-tema="chiaro"]) { --tavolo-libero: #16291f; --tavolo-occupato: #2b1815; --tavolo-neutro: #262932; } } :root[data-tema="scuro"] { --tavolo-libero: #16291f; --tavolo-occupato: #2b1815; --tavolo-neutro: #262932; } /* ── misure, una scala sola ─────────────────────────────────────────────── */ :root { --s1:4px; --s2:8px; --s3:12px; --s4:20px; --s5:28px; --s6:40px; --s7:64px; /* Angoli morbidi e larghi: e' la cosa che piu' di tutte fa sembrare un'interfaccia di adesso invece che di dieci anni fa. */ --r1:10px; --r2:16px; --r3:24px; --tondo:999px; /* Inter, con dietro il carattere di sistema come rete di sicurezza: se per qualsiasi motivo il font non arriva, la pagina resta leggibile invece di cadere su un Times qualsiasi. */ --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-num: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* ── base ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--fondo); color: var(--testo); font: 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } /* Titoli piu' grandi e leggermente stretti: e' il modo in cui Inter da' il meglio, ed e' quello che rende "calmo" un titolo invece che urlato. */ h1,h2,h3 { margin: 0; font-weight: 650; letter-spacing: -0.022em; } h1 { font-size: 22px; line-height: 1.25; } h2 { font-size: 16px; letter-spacing: -0.015em; } a { color: var(--oro); } /* Chi naviga con la tastiera deve vedere DOVE si trova. Il contorno di sistema qui e' spesso invisibile: se ne mette uno che si vede. */ :focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; border-radius: var(--r1); } /* Chi ha messo "riduci le animazioni" nel sistema lo ha fatto per un motivo: a qualcuno il movimento da' la nausea. Qui si spegne tutto. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* Mentre si cambia tema le transizioni si spengono: senza questo, lo sfondo dei tasti si anima e il testo no, e per 120 ms si legge chiaro su chiaro. */ .senza-animazioni, .senza-animazioni * { transition: none !important; animation: none !important; } /* ── barra in alto ──────────────────────────────────────────────────────── */ .barra-alta { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s4); background: var(--carta); border-bottom: 1px solid var(--bordo); } .barra-alta .spinta { flex: 1; } /* ── comandi ────────────────────────────────────────────────────────────── */ button, .bottone, input, select, textarea { font: inherit; color: var(--testo); background: var(--carta); border: 1px solid var(--bordo-forte); border-radius: var(--r1); padding: 9px 15px; } button, .bottone { cursor: pointer; background: var(--carta-2); transition: background .12s ease, transform .06s ease; } button:hover, .bottone:hover { background: var(--bordo); } button:active, .bottone:active { transform: scale(.98); } button:disabled { opacity: .4; cursor: not-allowed; } button.principale, .bottone.principale { background: var(--oro-pieno); border-color: var(--oro-pieno); color: var(--su-oro); font-weight: 650; } button.principale:hover { filter: brightness(1.06); } button.pericolo { color: var(--rosso); border-color: var(--rosso); background: var(--rosso-tenue); } /* Il dito medio umano e' 44px: sotto quella misura si sbaglia bersaglio. In cucina, con le mani occupate, si sbaglia e basta. */ @media (pointer: coarse) { button, .bottone, input, select { min-height: 44px; } } input, select, textarea { background: var(--carta); } input:focus, select:focus, textarea:focus { border-color: var(--oro); } label { font-size: 13px; color: var(--testo-2); } /* ── schede ─────────────────────────────────────────────────────────────── */ .scheda { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--r2); box-shadow: var(--ombra); } /* ── etichette e pastiglie ──────────────────────────────────────────────── */ .pastiglia { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--tondo); border: 1px solid var(--bordo-forte); background: var(--carta); font-size: 14px; cursor: pointer; white-space: nowrap; } .pastiglia.attiva { background: var(--oro-pieno); border-color: var(--oro-pieno); color: var(--su-oro); font-weight: 650; } /* ── avvisi che compaiono e spariscono ──────────────────────────────────── */ .avviso { position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--s4); z-index: 60; background: var(--carta); color: var(--testo); border: 1px solid var(--bordo-forte); border-radius: var(--r2); padding: 10px 16px; font-size: 14px; box-shadow: var(--ombra-alta); opacity: 0; pointer-events: none; transition: opacity .2s ease; max-width: 88vw; text-align: center; } .avviso.visibile { opacity: 1; } .avviso.male { border-color: var(--rosso); color: var(--rosso); } /* ── numeri ─────────────────────────────────────────────────────────────── */ /* I numeri che cambiano (minuti d'attesa, totali) devono restare fermi: con le cifre di larghezza diversa il testo "balla" a ogni aggiornamento. */ .numero { font-variant-numeric: tabular-nums; } /* ── il selettore chiaro/scuro ──────────────────────────────────────────── */ .tema { display: inline-flex; border: 1px solid var(--bordo-forte); border-radius: var(--tondo); overflow: hidden; } .tema button { border: 0; border-radius: 0; padding: 7px 11px; background: transparent; font-size: 13px; min-height: 0; } .tema button.attivo { background: var(--oro-pieno); color: var(--su-oro); font-weight: 650; } /* ── stampa ─────────────────────────────────────────────────────────────── */ /* Sulla carta si va sempre di nero su bianco: l'inchiostro costa e un fondo scuro stampato e' illeggibile. */ @media print { :root { --fondo:#fff; --carta:#fff; --carta-2:#fff; --testo:#000; --testo-2:#444; --bordo:#bbb; --ombra:none; --ombra-alta:none; } body { background: #fff; color: #000; } .non-stampare { display: none !important; } }