/* MemoSoon — il foglio di stile, tutto qui dentro.
*
* Nessuna richiesta verso l'esterno: nessun CDN, nessuno strumento di analisi.
* Questo file è tutto quello che serve a disegnare il sito, ed è una promessa
* scritta su /privacy («non c'è nessuno strumento di analisi di terzi su
* queste pagine») che un @import o un verso un altro dominio
* romperebbe in silenzio -- e la romperebbe funzionando, che è il modo in cui
* non ce ne accorgeremmo. Dal 2026-08-23 nemmeno i caratteri sono un file:
* l'applicazione usa la pila di sistema, la stessa della landing.
*
* Servito da /static/memosoon.css con una stringa di versione nell'URL (vedi
* `base.html`): il file può essere messo in cache per sempre perché il suo
* nome cambia quando cambia il contenuto.
*/
/* ==========================================================================
1. Token
--------------------------------------------------------------------------
La rampa grezza è dichiarata una volta sola. Il tema scuro NON è una
seconda tavolozza da tenere allineata a mano: è lo stesso elenco di nomi
con altri nove valori, e ogni token semantico più sotto deriva da questi.
Aggiungere un colore vuol dire aggiungerlo in due punti qui e in nessun
altro posto del foglio.
========================================================================== */
/* ---- NON PIÙ RICHIAMATI, DAL 2026-08-23 ---------------------------------
* Questi quattro `@font-face` non sono più usati da nessuna regola: `--font` e
* `--mono` qui sotto dichiarano la pila di sistema, che è quella della
* landing, e nessuna famiglia si chiama più «Plex» in questo foglio.
*
* Restano qui, e i quattro file restano in /static/font, di proposito: sono
* 80 KB e sono il ritorno indietro. Si tolgono -- blocchi e file insieme --
* quando il nuovo aspetto sarà stato visto in produzione, non prima. Togliere
* gli asset e la via di ritorno nello stesso commit è il modo in cui una
* modifica cosmetica diventa un disservizio.
*
* L'argomento originale del `font-display: swap` -- «su una pagina che si apre
* davanti a un gate, aspettare un carattere per poter leggere un orario è il
* baratto sbagliato» -- non è caduto: è stato vinto alla radice. Con la pila di
* sistema non c'è nessun file da aspettare, quindi non c'è nemmeno lo scambio
* di carattere che `swap` produceva al primo caricamento.
*
* Licenza SIL OFL, il testo sta in /static/font/LICENSE.txt: finché i file
* sono serviti, la licenza va servita con loro. */
@font-face {
font-family: "Plex Sans"; font-style: normal; font-weight: 400;
font-display: swap; src: url("/static/font/plex-sans-400.woff2") format("woff2");
}
@font-face {
font-family: "Plex Sans"; font-style: normal; font-weight: 600;
font-display: swap; src: url("/static/font/plex-sans-600.woff2") format("woff2");
}
@font-face {
font-family: "Plex Mono"; font-style: normal; font-weight: 400;
font-display: swap; src: url("/static/font/plex-mono-400.woff2") format("woff2");
}
@font-face {
font-family: "Plex Mono"; font-style: normal; font-weight: 600;
font-display: swap; src: url("/static/font/plex-mono-600.woff2") format("woff2");
}
:root {
/* `light` e non `light dark`: il sito è chiaro per tutti, anche a chi ha il
* sistema in scuro. Questa riga non è decorativa -- è ciò che dice al
* browser di disegnare CHIARI anche i controlli che non stiliamo noi
* (barre di scorrimento, menù a tendina, campi di data). Lasciandola
* `light dark` con la palette scura spenta si otterrebbe il caso peggiore:
* pagina chiara e widget di sistema scuri. */
color-scheme: light;
/* Dal 2026-08-23 la tavolozza è quella della landing di memosoon.com (vedi
* `sito/public/index.html`): applicazione e pagina di presentazione erano
* due prodotti diversi a guardarli, e adesso non lo sono più. Dove c'è
* scritto un nome fra parentesi, il valore è preso di peso da lì; dove non
* c'è, è derivato -- e la ragione della derivazione sta accanto.
*
* Ogni rapporto di contrasto scritto qui sotto è CALCOLATO con la formula
* WCAG 2.x (luminanza relativa sRGB), non stimato a occhio. Se un valore
* cambia, si rimisura prima di scriverlo. */
--bg: #F6F7FB; /* --nebbia */
--surface: #FFFFFF; /* --bianco */
--surface-2: #EEF2FC; /* --blu-soft */
--ink: #101426; /* --testo 16,30:1 sul fondo più scuro dei tre */
--ink-2: #5B6178; /* --testo-2 5,47:1 su `surface-2`, il peggiore */
/* Il terzo livello di grigio non esiste nella landing, che di grigi ne ha
* due: qui serve, perché un'applicazione ha etichette, unità di misura e
* date che non sono testo secondario ma didascalia. È `--testo-2`
* schiarito ESATTAMENTE fino al punto in cui regge ancora AA, e non oltre:
* 4,69:1 su `surface-2`, 4,91:1 sullo sfondo, 5,26:1 sul bianco.
*
* Il vincolo che lo lega è il più scuro dei fondi su cui capita, cioè
* `surface-2`. Era `#5F6B75` nella tavolozza verde acqua, e prima ancora
* `#7B8791` a 3,23:1 -- sotto la soglia AA di 4,5:1 per il testo normale.
* È il colore delle date dei viaggi e delle etichette del menu, cioè il
* dato che si scorre di più. Misurato, non stimato: se un giorno si
* schiarisce di nuovo, si rimisuri prima. */
--ink-3: #666B83;
--line: #E4E7F0; /* --bordo */
/* Il bordo di un campo di modulo, e SOLO quello. `--line` è a 1,24:1 sul
* bianco: per un filetto fra due schede va benissimo -- è decorazione, la
* scheda si riconosce dal contenuto -- ma il perimetro di un è la
* sola cosa che dice dove si scrive, e WCAG 1.4.11 gli chiede 3:1. Questo
* ne fa 3,25:1. La landing ha lo stesso difetto (`--bordo` a 1,5px sui suoi
* campi) e non lo correggo lì: quel file non è oggetto di questa modifica. */
--line-forte: #878EA8;
--accent: #152B63; /* --blu 12,03:1 sul fondo più scuro dei tre */
--accent-2: #0E1D45; /* --blu-2 il passaggio del mouse SCENDE, come
* `.reg:hover` sulla landing: un blu così scuro
* schiarito diventa slavato, non acceso. */
--accent-ink: #FFFFFF; /* 13,48:1 sull'accento */
/* Un gradino sotto `--blu-soft`, e non `--blu-soft` stesso, per una ragione
* meccanica: `surface-2` VALE già `--blu-soft`, e il riempimento al
* passaggio del mouse di un allegato va da `surface-2` a qui. Se fossero lo
* stesso valore, il passaggio del mouse non si vedrebbe -- e sarebbe un
* difetto che nessuno nota, perché una cosa che non cambia non si nota.
* Quanto scuro può andare lo decide il testo che ci sta sopra: `--ink-2` ci
* sta a 4,72:1, ed è il pavimento. */
--accent-soft: #D9E2F8;
/* Il corallo della landing. Fa due mestieri, tutti e due misurati:
*
* 1. la scadenza -- l'unico avviso di questo prodotto che ne ha una, cioè
* il check-in che si è aperto. Era `--ambra` (`#E8B84B`) e la ragione
* per cui esisteva un secondo accento resta identica: mescolarlo
* all'accento principale vorrebbe dire non poterlo distinguere. Il
* corallo la soddisfa MEGLIO dell'ambra, perché è lontano dal blu in
* tinta e in valore invece che solo in tinta -- e perché il filetto da
* 3px e il pallino da 9px arrivano a 3,10:1 sul bianco, dove l'ambra
* stava a 1,84:1, cioè era un segnale che bisognava già sapere che
* c'era. Per questo l'accento principale NON è corallo pur essendolo il
* bottone della landing: se il corallo fosse il bottone di tutti i
* giorni, questo avviso tornerebbe invisibile.
*
* 2. l'anello di messa a fuoco DENTRO i pannelli scuri, dove l'accento è
* il colore del pannello stesso. Vedi `--fuoco`.
*
* Attenzione, ed è il motivo per cui non è l'anello di fuoco dappertutto:
* sul bianco fa 3,10:1 e passa, ma sullo sfondo di pagina (2,89:1) e su
* `surface-2` (2,76:1) NON arriva a 3:1. Sulla landing regge perché lì il
* corpo pagina è bianco puro; qui no. */
--corallo: #FF5A3C;
/* ---- Il tabellone -----------------------------------------------------
* Il pannello scuro su cui sta ciò che deve ancora succedere. È l'unico
* posto del sito dove il fondo è scuro, ed è deliberato: l'audacia si spende
* in un punto solo, e questo è il punto che si guarda in piedi.
*
* Nella nuova tavolozza è la stessa cosa che sulla landing è `.banda`: la
* fascia blu piena, con il testo in bianco e l'attenuato in `#B8C2DE`.
* Quella prende `--blu`; qui prende `--blu-2`, un gradino sotto, per due
* ragioni. La prima è che `--blu` VALE l'accento: se il pannello fosse
* dello stesso colore dei bottoni, l'audacia non sarebbe più spesa in un
* punto solo, sarebbe l'accento ingrandito. La seconda è che questo
* pannello porta il testo più piccolo di tutto il prodotto -- mono da 13px
* spaziato, e il mese da 10px -- letto camminando: i tre punti di contrasto
* in più che il blu profondo regala si sentono lì.
*
* Non è un tema scuro in miniatura: sono quattro colori scelti per stare su
* `--tabellone`, e non vanno usati altrove. Misurati contro quel fondo --
* 16,40:1 il testo, 9,22:1 quello attenuato, 8,31:1 il verde di segnale.
* E misurati anche contro il fondo che la riga assume sotto il dito o sotto
* la messa a fuoco (il 10% di bianco sopra il pannello, cioè `#263458`),
* perché è lì che il contrasto è al minimo: 12,25:1 / 6,89:1 / 6,21:1.
* Tutti e tre sopra AA anche in corpo piccolo, in tutti e due gli stati. */
--tabellone: #0E1D45; /* --blu-2 */
--tabellone-ink: #FFFFFF; /* --bianco, come `.banda h2` sulla landing */
--tabellone-dim: #B8C2DE; /* preso da `.banda .sotto` */
/* Il verde della landing schiarito quanto basta a stare sul blu: stessa
* tinta (157°), sola luminosità diversa. `--verde` così com'è farebbe
* 3,89:1 sul pannello, sotto la soglia per il testo di una pastiglia. */
--segnale: #4FCE9C;
/* Lo stato delle cose, e qui la landing aiuta solo a metà.
*
* Il rosso: `--corallo` non può farlo -- il testo bianco sopra ci sta a
* 3,10:1 e il pallino delle notifiche è testo bianco da 11px. Resta il
* rosso che c'era, che regge 6,51:1 sul bianco in tutte e due le direzioni;
* il suo fondo tenue passa invece a `--corallo-soft`, che è il solo rosa
* pallido che questo marchio possiede (5,75:1 con il rosso sopra).
*
* Il verde: la landing lo scrive già due volte -- `--verde` per i pieni e i
* segni di spunta, `#0A6B4A` per il TESTO su `--verde-soft` in `.esito`.
* Quel lavoro era già stato fatto lì, e qui si eredita: 5,89:1.
*
* L'ambra dell'attesa: la landing non ha un equivalente, quindi resta
* quella. Non stona -- l'oro delle lancette nel marchio è ambra -- e nessun
* colore della landing può fare «in attesa» senza rubare il posto a
* qualcos'altro. 5,38:1 sul suo fondo. */
--danger: #B3271E;
--danger-soft: #FFEDE9; /* --corallo-soft */
--warn: #8A5A00;
--warn-soft: #FDF3E0;
--ok: #0A6B4A; /* il verde scuro di `.esito` sulla landing */
--ok-soft: #E6F7F0; /* --verde-soft */
/* L'anello di messa a fuoco, che è un token e non un colore scritto in
* fondo al foglio perché ne servono DUE valori e il secondo si dichiara
* sui pannelli scuri (vedi la sezione 7).
*
* Sulle superfici chiare è l'accento: 12,03:1 nel caso peggiore. Il corallo
* della landing, che lì è l'anello di fuoco di tutto, qui non può esserlo
* dappertutto -- sul fondo di pagina fa 2,89:1, sotto il 3:1 che WCAG 1.4.11
* chiede a un indicatore di messa a fuoco. Sulla landing passa per un pelo
* (3,10:1) solo perché il suo corpo pagina è bianco puro. */
--fuoco: var(--accent);
/* Spaziatura: multipli di 4. Nessun valore fuori scala, da nessuna parte. */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
--s6: 24px; --s8: 32px; --s12: 48px;
/* Tipografia. Le due pile sono quelle della landing, carattere per
* carattere: è la metà dell'impressione di «stesso prodotto», e non costa
* nessuna richiesta di rete. I quattro `@font-face` qui sopra non sono più
* richiamati da niente. */
--font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
--mono: ui-monospace, Menlo, Consolas, monospace;
--t-cap: 0.8125rem; /* 13px — didascalie e note legali, mai un dato */
--t-sm: 0.9375rem; /* 15px — il pavimento di ogni dato secondario */
--t-md: 1rem; /* 16px — testo, campi, bottoni */
--t-lg: 1.125rem; /* 18px — titolo di una scheda */
--t-xl: 1.375rem; /* 22px —
di pagina */
--t-code: 1.75rem; /* 28px — il codice di prenotazione */
/* Qui c'era scritto «6px e non 10: un documento di viaggio non ha gli
* angoli di una scheda di un pannello di impostazioni», e quel ragionamento
* viene deliberatamente ribaltato. La landing è fatta di angoli morbidi --
* 24px le schede, 34px le fasce, 99px i bottoni -- ed è, dopo il colore, il
* suo segnale di forma più riconoscibile: lasciare i 6px voleva dire fare
* metà del lavoro.
*
* Non 24px però: le schede della landing sono tre per pagina, quelle di un
* viaggio sono quattordici in colonna, e a quella densità un raggio da
* vetrina mangia il contenuto. 14 e 10 stanno dentro l'intervallo che la
* landing dichiara da sé (`--r:16px; --r-s:10px`), letti alla densità di
* un'applicazione. Il costo lo pago e lo scrivo: una prenotazione somiglia
* un po' meno a un documento e un po' di più a una scheda. */
--radius: 14px;
--radius-sm: 10px;
--tap: 44px; /* il bersaglio minimo, non un suggerimento */
/* Le ombre della landing, prese di peso e spese con il contagocce. Là ce
* n'è una su ogni scheda; qui la scheda è un elemento di elenco che si
* ripete quattordici volte, e quattordici aloni da 42px di sfocatura sono
* rumore, non profondità. Vanno perciò solo dove l'elemento è UNO per
* pagina: il pannello scuro, il bottone principale, la barra del menu. */
--ombra: 0 2px 6px rgba(16, 20, 38, 0.05),
0 20px 42px -26px rgba(16, 20, 38, 0.30);
--ombra-blu: 0 8px 18px -10px rgba(21, 43, 99, 0.85);
}
/* La palette scura, CONSERVATA E SPENTA.
*
* Era un `@media (prefers-color-scheme: dark)`, cioè si accendeva da sola a
* chi aveva il sistema in scuro. Dal 2026-08-16 il sito è chiaro per tutti
* (vedi `color-scheme: light` qui sopra) e questi valori restano solo per non
* doverli ritrovare se un giorno si rifà il tema scuro.
*
* Nessuno scrive `data-tema` da nessuna parte: non c'è codice, cookie o
* impostazione che possa produrre questo attributo, quindi questo blocco non
* si applica mai. Ne segue l'unica cosa importante da sapere prima di
* fidarsene: **questi valori non sono più verificati da nessuna pagina**. Un
* token chiaro cambiato qui sopra non ha nessun obbligo di essere cambiato
* anche qui sotto, e nessun test se ne accorgerà. Chi riaccende il tema scuro
* deve riguardarli tutti, non presumere che siano rimasti allineati.
*
* Il 2026-08-23, con il passaggio alla tavolozza della landing, questi valori
* sono stati RI-DERIVATI e non lasciati com'erano. Non per farli tornare
* utili -- il blocco resta irraggiungibile -- ma perché un blocco spento che
* conserva una tavolozza verde acqua dentro un prodotto diventato blu non è
* un ripiego, è una trappola: chi lo riaccendesse otterrebbe un secondo
* prodotto invece del primo al buio. I rapporti sono calcolati come tutti
* gli altri (17,12:1 il testo sul fondo, 7,81:1 il secondario sulla
* superficie, 6,64:1 la didascalia, 7,28:1 l'accento), ma NESSUNA PAGINA LI
* RENDE, quindi nessuno li ha mai visti addosso a un contenuto vero: sono
* numeri corretti, non prove. Chi riaccende il tema scuro riguardi tutto. */
:root[data-tema="scuro"] {
--bg: #080C1A;
--surface: #141A2E;
--surface-2: #0E1426;
--ink: #EEF0F8;
--ink-2: #A8AEC2;
--ink-3: #9AA0B6;
--line: #262D45;
--line-forte: #767C94;
/* Sul fondo scuro l'accento sale invece di scendere, e il passaggio del
* mouse con lui: un blu profondo sul nero non si vede. */
--accent: #8FA7E8;
--accent-2: #A8BCF0;
--accent-ink: #0A1026;
--accent-soft: #1A2547;
--corallo: #FF7A61;
/* Sul fondo scuro il tabellone si stacca alzandosi, non abbassandosi. */
--tabellone: #1A2547;
--tabellone-ink: #FFFFFF;
--tabellone-dim: #B8C2DE;
--segnale: #4FCE9C;
--danger: #FF9483;
--danger-soft: #2E1512;
--warn: #E8B84B;
--warn-soft: #2C2415;
--ok: #4FCE9C;
--ok-soft: #10261D;
--fuoco: var(--accent);
}
/* ==========================================================================
2. Base
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font);
font-size: var(--t-md);
line-height: 1.55;
}
/* I controlli di modulo non ereditano il carattere da soli: senza questa
* riga ogni del sito rende a ~13.3px, e Safari su iOS ingrandisce la
* pagina al primo tocco su un campo. Su un'applicazione che si apre al gate
* con una mano sola è il difetto più riproducibile che ci fosse. */
input, button, select, textarea { font: inherit; color: inherit; }
img, svg { max-width: 100%; height: auto; }
/* I titoli come li scrive la landing: nero 800, crenatura stretta, e blu. Il
* blu sui titoli è la cosa che si vede per prima aprendo le due pagine una
* accanto all'altra, ed è gratis -- 12,03:1 sul fondo più scuro dei tre.
*
* La landing sta a `line-height:1.08`, che va bene per un titolo da 4rem su
* una riga sola; qui il titolo più grande è 22px e va a capo, e a 1,08 le
* discendenti della prima riga toccherebbero le maiuscole della seconda.
*
* `color` su un selettore di elemento vuol dire che ogni titolo dentro un
* pannello scuro deve dichiarare `color: inherit`, o diventa blu su blu.
* Sono due: `.tabellone__testa h2` e `.testata-tab h1`, e li dichiarano tutti
* e due. Chi aggiunge un terzo pannello scuro se ne ricordi. */
h1, h2, h3 {
line-height: 1.2; margin: 0;
font-weight: 800; letter-spacing: -0.025em;
color: var(--accent);
}
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }
p { margin: 0; }
a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }
/* Mai rimosso e mai sostituito da niente di più discreto: è l'unico modo in
* cui chi naviga da tastiera sa dove si trova.
*
* Il colore arriva da `--fuoco`, che vale l'accento sulle superfici chiare e
* viene ridichiarato dentro i pannelli scuri -- dove l'accento È il colore
* del pannello, e un anello blu su un fondo blu è un anello che non c'è.
* Nella vecchia tavolozza questo difetto c'era e non era stato misurato:
* l'accento verde acqua sul tabellone quasi nero faceva 2,38:1. */
:focus-visible {
outline: 2px solid var(--fuoco);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
::selection { background: var(--accent-soft); color: var(--ink); }
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; border: 0;
}
.salta {
position: absolute; left: var(--s2); top: -100px;
z-index: 10; padding: var(--s3) var(--s4);
background: var(--surface); color: var(--ink);
border: 1px solid var(--line); border-radius: var(--radius);
text-decoration: none; font-weight: 600;
}
.salta:focus { top: var(--s2); }
/* ==========================================================================
3. Impalcatura
========================================================================== */
.guscio {
max-width: 34rem;
margin-inline: auto;
/* In fondo, lo spazio della barra di navigazione fissa piu' quello della
* barra gestuale: senza, l'ultima riga di ogni pagina resta sotto il menu. */
padding: 0 var(--s4)
calc(var(--s12) + 64px + env(safe-area-inset-bottom, 0));
}
.guscio--largo { max-width: 38rem; }
@media (min-width: 600px) {
.guscio { padding-inline: var(--s6); }
}
main { display: block; }
/* Distanza fra i blocchi di una pagina. Una classe sola invece di margini
* sparsi: il ritmo verticale non deve dipendere da quale elemento capita
* accanto a quale. */
.pila { display: flex; flex-direction: column; gap: var(--s3); }
.pila--fitta{ gap: var(--s2); }
.pila--larga{ gap: var(--s4); }
.sezione { margin-top: var(--s8); }
.sezione__testa { margin-bottom: var(--s3); }
.sezione__testa p { color: var(--ink-2); font-size: var(--t-sm); margin-top: var(--s1); }
.divisorio {
border: 0; border-top: 1px solid var(--line);
margin: var(--s12) 0 0;
}
/* ==========================================================================
4. Navigazione
========================================================================== */
/* La navigazione, dove arriva il pollice. Prima era `sticky` in cima, cioe' --
* su un telefono da sei pollici -- nel punto piu' lontano dalla mano di chi
* apre questa applicazione in piedi davanti a un gate.
*
* `env(safe-area-inset-bottom)` non e' un dettaglio: senza, su un telefono
* senza tasto fisico l'ultima riga di etichette finisce sotto la barra
* gestuale, dove si vede a meta' e si tocca per sbaglio. */
.fondo {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 5;
display: grid; grid-template-columns: repeat(4, 1fr);
background: var(--surface);
border-top: 1px solid var(--line);
/* La stessa ombra che la landing mette sotto la sua testata appiccicata in
* cima, girata dall'altra parte: questa barra è appiccicata in fondo. Serve
* a staccarla dal contenuto che le scorre sotto, che con il solo filetto da
* 1px su fondo chiaro si vedeva appena. */
box-shadow: 0 -6px 20px -14px rgba(16, 20, 38, 0.4);
padding-bottom: env(safe-area-inset-bottom, 0);
}
.fondo a {
display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 3px;
/* 56 e non 44. Il minimo è il minimo, e questa è la barra che si tocca
* camminando, con il telefono in una mano sola: qui i dodici pixel in più
* costano niente e si sentono. */
min-height: 56px; padding: var(--s2) var(--s1);
color: var(--ink-3);
font-size: var(--t-cap); font-weight: 600; text-align: center;
text-decoration: none;
}
.fondo a[aria-current="page"] { color: var(--accent); }
.fondo .icona { width: 22px; height: 22px; }
/* Il numeretto sopra l'icona, come su un telefono. Ancorato all'icona e non
* alla voce di menu, così resta attaccato al disegno anche se l'etichetta
* sotto cambia lunghezza. */
.fondo__icona { position: relative; display: inline-flex; }
.pallino {
position: absolute; top: -5px; left: 11px;
min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 999px;
/* Il bordo del colore dello sfondo stacca il pallino dall'icona sotto:
* senza, il rosso e il tratto dell'icona si toccano e il numero diventa
* illeggibile proprio quando è piccolo. */
border: 2px solid var(--surface);
background: var(--danger); color: #FFFFFF;
font-size: 11px; font-weight: 700; line-height: 14px;
font-variant-numeric: tabular-nums;
text-align: center; letter-spacing: 0;
}
/* Le icone ereditano colore e dimensione dal testo accanto a cui stanno, come
* farebbe un carattere: `1.15em` e non un valore fisso, cosi' dove il testo e'
* piccolo l'icona lo e' senza bisogno di una classe per ogni posto. */
.icona {
width: 1.15em; height: 1.15em;
vertical-align: -0.15em; flex: 0 0 auto;
}
/* Il filtro per persona, in cima ai viaggi. Una tendina e non piu' una fila
* di pillole: la fila cresceva con la famiglia e finiva per scorrere in
* orizzontale, mentre questa occupa una riga sola qualunque sia il numero di
* persone -- ed e' lo stesso spazio verticale che il menu in fondo protegge.
*
* `` nativo: nessun JavaScript, si apre da tastiera, e le voci
* dentro restano link. */
.filtro { margin-top: var(--s4); position: relative; }
.filtro__scelto {
display: inline-flex; align-items: center; gap: var(--s2);
min-height: var(--tap); padding: 0 var(--s3) 0 var(--s3);
border: 1px solid var(--line-forte); border-radius: var(--radius);
background: var(--surface); color: var(--ink);
font-size: var(--t-sm); font-weight: 650;
cursor: pointer; list-style: none; user-select: none;
}
/* Il triangolino di serie, tolto: ce n'e' gia' uno disegnato, e due frecce
* sullo stesso bottone si leggono come due comandi. */
.filtro__scelto::-webkit-details-marker { display: none; }
.filtro__scelto::marker { content: ""; }
.filtro__scelto:hover { background: var(--surface-2); }
.filtro__scelto:focus-visible {
outline: 2px solid var(--fuoco); outline-offset: 2px;
}
.filtro__et { color: var(--ink-3); font-weight: 400; }
.filtro__nome { white-space: nowrap; }
.filtro__freccia {
width: 16px; height: 16px; flex: 0 0 16px;
fill: none; stroke: var(--ink-3); stroke-width: 2.4;
stroke-linecap: round; stroke-linejoin: round;
transition: transform 140ms ease-out;
}
.filtro[open] .filtro__freccia { transform: rotate(180deg); }
/* Il menu. In flusso e non sovrapposto: su un telefono un pannello che copre
* il primo viaggio nasconde proprio la cosa che si sta filtrando. */
.filtro__menu {
display: flex; flex-direction: column;
margin-top: var(--s2);
border: 1px solid var(--line); border-radius: var(--radius);
background: var(--surface); overflow: hidden;
max-width: 22rem;
}
.filtro__voce {
display: flex; align-items: center; gap: var(--s2);
min-height: var(--tap); padding: 0 var(--s3);
color: var(--ink-2); text-decoration: none;
font-size: var(--t-sm); font-weight: 600;
border-bottom: 1px solid var(--line);
}
.filtro__voce:last-child { border-bottom: 0; }
.filtro__voce:hover { background: var(--surface-2); color: var(--ink); }
.filtro__voce[aria-current] { background: var(--accent-soft); color: var(--accent); }
/* Il disco con l'iniziale. Un elenco di soli nomi si legge parola per parola;
* con un disco si riconosce a colpo d'occhio.
*
* Un colore solo per tutti e non uno per persona: i nomi arrivano da chi
* concede visibilita', quindi l'elenco cambia nel tempo, e una tavolozza per
* indice darebbe alla stessa persona un colore diverso il giorno in cui
* qualcuno entra o esce. Un colore che si sposta e' peggio di nessun colore. */
.filtro__iniziale {
flex: 0 0 auto;
width: 26px; height: 26px; border-radius: 50%;
display: inline-grid; place-items: center;
background: var(--accent); color: var(--accent-ink);
font-size: var(--t-cap); font-weight: 800; line-height: 1;
}
/* Il nome scritto come lo scrive il marchio della landing: nero 800, crenatura
* stretta, blu. È l'unico posto dell'applicazione in cui il nome compare come
* marchio e non come parola, ed è la prima cosa che vede chi arriva da un link
* di sola lettura senza sapere dove sta arrivando. */
.marchio__interno {
max-width: 34rem; margin-inline: auto;
padding: var(--s3) var(--s4);
font-weight: 800; font-size: var(--t-lg);
letter-spacing: -0.035em; color: var(--accent);
}
/* ==========================================================================
5. Schede
========================================================================== */
.scheda {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s4);
}
.scheda--piatta { background: var(--surface-2); border-color: transparent; }
.scheda--quieta { background: transparent; }
/* Una prenotazione oltre le venti comprese nell'anno gratuito: resta in
* elenco con tipo, data e destinazione, e i dettagli non ci sono più.
*
* NIENTE ROSSO E NIENTE BARRATO. Non c'è niente di rotto e non c'è niente di
* scaduto: c'è qualcosa da aprire, e il rosso -- che su questo foglio vuol
* dire `--danger`, cioè la cancellazione dell'account -- direbbe alla persona
* che ha sbagliato lei. Il fondo scende di un gradino sul `surface-2` che le
* schede piatte usano già, il perimetro sparisce e resta il filetto a
* sinistra, un tono più deciso di quello delle altre: si distingue scorrendo,
* senza gridare.
*
* Misurato su questo fondo, e sono i valori del resto del foglio perché i
* colori sono gli stessi: 16,30:1 il titolo (`--ink`), 5,47:1 la data in
* colonna (`--ink-2`), 4,69:1 la parola del tipo (`--ink-3`). Il filetto,
* `--ink-3` anche lui, fa 4,91:1 contro lo sfondo della pagina e 4,69:1
* contro il fondo della scheda: sopra il 3:1 che WCAG 1.4.11 chiede a un
* elemento di interfaccia in tutti e due i versi -- e comunque non è lui a
* portare l'informazione, che è scritta a parole nel distintivo. */
.scheda--chiusa {
background: var(--surface-2);
border-color: transparent;
border-left-color: var(--ink-3);
}
/* La prenotazione che deve ancora succedere, dentro la pagina di un viaggio.
* Il bordo pieno e non un riempimento: a metà di una lista di quattordici
* schede serve trovarla con la coda dell'occhio, non farsi accecare. */
.scheda--prossima { border-color: var(--accent); border-left-color: var(--accent); }
.scheda__coda {
margin-top: var(--s3); padding-top: var(--s3);
border-top: 1px solid var(--line);
}
/* La scheda di una prenotazione: una colonna per l'ora, una per il resto.
*
* L'ora stava dentro il corpo, in caratteri da 34px, una per scheda. Su un
* viaggio da quattordici prenotazioni erano quattordici numeri grandi ognuno
* a un'ascissa diversa, perché ciascuno cominciava dopo un occhiello di
* lunghezza diversa: grandi e non confrontabili. In colonna sono più piccoli
* e si leggono TUTTI INSIEME, che è la domanda vera di una pagina così --
* non «che ora è questo volo» ma «com'è fatta la giornata».
*
* Il filetto a sinistra resta decorazione: il tipo è sempre scritto a parole
* nell'occhiello, quindi chi non distingue i colori non perde niente. */
.scheda--tipo {
display: flex; gap: var(--s3);
border-left: 3px solid var(--line);
}
/* Largo quanto `00:00` in monospazio a questo corpo, più aria. Fisso e non
* `auto`: se si stringesse sul contenuto, una scheda senza ora (un soggiorno)
* spingerebbe il proprio corpo a sinistra e romperebbe la colonna. */
.scheda__rail { flex: 0 0 3.5rem; min-width: 0; }
.scheda__corpo { flex: 1 1 auto; min-width: 0; }
a.blocco {
display: block; color: inherit; text-decoration: none;
border-radius: var(--radius);
}
a.blocco:hover .scheda { border-color: var(--ink-3); }
a.blocco:active { transform: translateY(1px); }
.scheda__occhiello {
display: flex; align-items: center; gap: var(--s2);
font-family: var(--mono);
font-size: var(--t-sm); font-weight: 600;
color: var(--ink-3);
text-transform: uppercase; letter-spacing: 0.04em;
margin-bottom: var(--s2);
}
.scheda__occhiello .crescita { margin-left: auto; text-transform: none; letter-spacing: 0; }
/* Il titolo di una prenotazione, e accanto il distintivo «Da rivedere» quando
* c'è: sta qui e non in un occhiello sopra perché dice che QUESTA
* prenotazione va guardata, e va letto insieme al suo nome. */
.scheda__titolo {
display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap;
font-size: var(--t-lg); font-weight: 700;
}
/* Il fatto: l'ora di una partenza, in cima alla colonna sinistra. È la ragione
* per cui si è aperta la pagina, e adesso è anche confrontabile con quella
* della scheda sopra e di quella sotto. */
.fatto {
font-family: var(--mono);
font-size: 1.3125rem; font-weight: 700; line-height: 1.1;
font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
/* Sotto l'ora, l'icona e il tipo a parole: è l'etichetta della colonna, e ha
* preso il posto dell'occhiello che stava sopra il titolo -- che diceva le
* stesse due cose a quattro centimetri di distanza.
*
* A capo e non in fila con l'icona: «traghetto» e «ristorante» non stanno
* accanto a un disegno dentro 3,5rem, e una colonna in cui una parola su sei
* va a capo da sola è una colonna che salta. */
.fatto__tipo {
display: block; margin-top: var(--s1);
font-family: var(--mono); font-size: var(--t-cap); font-weight: 600;
color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em;
line-height: 1.3;
}
.fatto__tipo .icona { display: block; margin-bottom: 2px; color: var(--ink-2); }
/* Le date di un soggiorno, nel corpo. Non è più `.fatto` -- l'ora grande
* adesso sta in colonna -- ma un dato di prima riga come la tratta di un volo,
* che è il posto che gli spetta: un albergo si legge in giorni. */
.fatto--date {
margin-top: var(--s1);
font-family: var(--mono); font-size: var(--t-md); font-weight: 600;
color: var(--ink);
}
/* Un soggiorno non ha un'ora vera: quella che il modello ricava da un
* «check-in dalle 15:00» è un orario di comodo, e messo in colonna accanto
* agli orari veri dei voli si leggerebbe come uno di loro. Nella colonna ci va
* il giorno, e le date per esteso restano nel corpo. */
/* E una prenotazione chiusa dal tetto un'ora non ce l'ha più: nella colonna,
* al posto suo, il giorno. Stessa forma del soggiorno qui sopra per una
* ragione diversa, e la stessa regola perché la colonna deve restare una
* colonna -- due corpi diversi alla stessa ascissa si leggono come due
* elenchi. 5,47:1 su `surface-2`, che è il fondo di una scheda chiusa. */
.fatto--soggiorno,
.fatto--chiusa {
font-size: var(--t-lg); font-weight: 600; letter-spacing: 0;
color: var(--ink-2);
}
.tratta { font-size: var(--t-md); color: var(--ink); margin-top: var(--s1); }
.tratta .freccia { color: var(--ink-3); padding: 0 var(--s1); }
.dettaglio { font-size: var(--t-sm); color: var(--ink-2); }
.dettaglio--tenue { color: var(--ink-3); }
/* Le note del modello: testo di terzi, quindi mai a piena voce. */
.nota-modello {
font-size: var(--t-sm); color: var(--ink-2);
padding-left: var(--s3); border-left: 2px solid var(--line);
}
/* Gli allegati di una prenotazione: il biglietto in PDF, la carta d'imbarco.
* Una riga da 44px e non un link in mezzo al testo, perché la si apre in piedi
* al gate. Il nome può essere lungo e finisce con i puntini invece di mandare
* a capo la riga; il tipo e la misura stanno a destra e servono a decidere se
* scaricarlo adesso o dopo. */
a.allegato {
display: flex; align-items: center; gap: var(--s2);
min-height: var(--tap);
padding: var(--s2) var(--s3);
background: var(--surface-2);
border-radius: var(--radius-sm);
color: var(--ink); text-decoration: none;
font-size: var(--t-sm);
}
a.allegato:hover { background: var(--accent-soft); }
a.allegato:active { transform: translateY(1px); }
.allegato__icona { flex: 0 0 auto; }
.allegato__nome {
min-width: 0; flex: 1 1 auto;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-weight: 600;
}
/* `--ink-2` e non `--ink-3`, ed è una misura e non un gusto: al passaggio del
* mouse questa riga si riempie di `--accent-soft`, e lì `--ink-3` cade a
* 4,05:1 -- sotto AA. `--ink-2` ci sta a 4,72:1. Un colore che passa a riposo
* e fallisce sotto il dito è un colore che fallisce. */
.allegato__dati { flex: 0 0 auto; color: var(--ink-2); font-size: var(--t-cap); }
/* ==========================================================================
6. Il codice di prenotazione
--------------------------------------------------------------------------
`user-select: all` è la funzione, non un vezzo: al gate si tiene premuto
una volta sola e si prende tutto il PNR invece di tre caratteri su sei.
========================================================================== */
/* Il PNR e il bottone Copia su una riga sola, dentro una cornice tratteggiata:
* è la parte della scheda che si stacca e si porta al banco, e il tratteggio
* lo dice senza scriverlo. Il riquadro esiste anche per una ragione pratica --
* il codice era un rettangolo grigio in mezzo al testo, e adesso è un oggetto
* con dei bordi, che è quello che si cerca con l'occhio scorrendo la pagina. */
.codice-blocco {
display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
margin-top: var(--s3);
padding: var(--s2) var(--s3);
background: var(--surface-2); border-radius: var(--radius-sm);
border: 1px dashed var(--line);
}
.codice-etichetta {
flex: 0 0 auto;
font-family: var(--mono);
font-size: var(--t-cap); color: var(--ink-3);
text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.codice {
font-family: var(--mono); font-size: var(--t-code);
font-weight: 700; letter-spacing: 0.08em; line-height: 1.15;
font-variant-numeric: tabular-nums;
user-select: all; -webkit-user-select: all;
}
/* Il bottone «Copia», che esiste solo se lo script è partito (vedi
* `base.html`). Accanto al codice e non sotto: sono la stessa cosa, e il
* codice è già alto abbastanza da lasciargli il posto sulla stessa riga. */
.copia {
min-height: var(--tap); margin-left: auto; padding: 0 var(--s4);
border: 1px solid var(--line); border-radius: 999px;
background: var(--surface); color: var(--accent);
font-size: var(--t-sm); font-weight: 600;
cursor: pointer; vertical-align: bottom;
}
.copia:hover { background: var(--surface-2); }
.copia:active { transform: translateY(1px); }
.copia--fatto { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
.copia--no { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
/* Il codice diventa toccabile insieme al bottone: è il bersaglio grande, ed è
* quello su cui la mano va davvero. Il puntatore lo dice solo quando lo script
* ha attaccato l'ascoltatore, cioè solo quando toccarlo fa qualcosa. */
.codice[data-codice] { cursor: pointer; }
/* Il check-in, attaccato al codice che serve per farlo. Una riga da 44px e non
* un link in mezzo al testo: la si tocca in piedi, la sera prima, con una mano
* sola. Sta dentro `codice-blocco` e non in fondo alla scheda perché codice e
* check-in sono la stessa operazione in due pezzi. */
a.checkin {
/* Riga propria dentro il blocco tratteggiato: il codice e il bottone Copia
* stanno sulla prima, il bottone sotto e largo quanto la cornice. */
flex: 1 0 100%;
display: flex; align-items: center; justify-content: center; gap: var(--s2);
min-height: var(--tap); margin-top: var(--s2);
padding: var(--s2) var(--s4);
background: var(--accent); border-radius: 999px;
color: var(--accent-ink); font-size: var(--t-md); font-weight: 600;
text-decoration: none;
}
/* Pieno e non tenue. Era un rettangolo grigio chiaro con dentro del testo
* verde, cioè aveva l'aria di un'etichetta: è invece l'unica azione della
* pagina -- la sola cosa che porta fuori da qui e fa fare qualcosa -- e su una
* scheda un'azione sola si scrive come un bottone. Sta comunque DENTRO il
* blocco del codice, perché il check-in si fa con il PNR in mano. */
a.checkin:hover { background: var(--accent-2); }
a.checkin:active { transform: translateY(1px); }
/* ==========================================================================
7. Il tabellone
--------------------------------------------------------------------------
Quello che deve ancora succedere sta su un pannello scuro, come il tabellone
davanti a cui si è. È l'unica superficie scura del sito e l'unico punto in
cui questa interfaccia alza la voce.
Perché un pannello e non l'ennesimo elenco chiaro: questa applicazione si
apre in piedi, con una mano, dentro un aeroporto -- lo dice la ragione per
cui il menu sta in fondo e non in cima -- e in quella situazione la domanda
è una sola, «dove vado e quanto manca». Il pannello la separa da tutto il
resto senza doverla scrivere più grande di quanto sia.
**Non è il riquadro della prossima partenza che è stato tolto il 2026-08-05.**
Quello era una scheda in cima che ripeteva la riga dell'elenco due
centimetri sotto, e il doppione si vedeva più della comodità. Qui non c'è
niente da ripetere: il tabellone È l'elenco dei viaggi in programma, non un
sommario messo sopra di esso. Se un giorno tornasse anche un riquadro
sopra il tabellone, tornerebbe il difetto di allora.
Sulla home non compaiono orari né codici, ed è una regola che un test
difende (`test_the_home_is_two_lists_and_nothing_else`): il tabellone dice
dove e quanto manca, l'ora e il PNR stanno nella pagina del viaggio.
========================================================================== */
/* `--fuoco` ridichiarato qui e su `.testata-tab`: dentro il pannello l'accento
* è il colore del fondo, e l'anello di messa a fuoco sparirebbe. Il corallo ci
* sta a 5,30:1, e a 3,95:1 anche sul fondo che la riga assume quando è messa a
* fuoco -- sopra il 3:1 che WCAG 1.4.11 chiede a un indicatore. È l'unico
* corallo che compare qui dentro, quindi non si confonde con niente. */
.tabellone {
background: var(--tabellone);
color: var(--tabellone-ink);
--fuoco: var(--corallo);
border-radius: var(--radius);
box-shadow: var(--ombra);
padding: var(--s3) var(--s1) var(--s2);
margin-top: var(--s4);
}
.tabellone__testa {
display: flex; align-items: baseline;
padding: 0 var(--s3) var(--s3);
font-family: var(--mono);
font-size: var(--t-cap); font-weight: 600;
color: var(--tabellone-dim);
text-transform: uppercase; letter-spacing: 0.14em;
}
/* Il titolo della sezione è un `h2` vero -- la home è fatta di due elenchi e
* questa è l'intestazione del primo, e chi naviga con la voce la usa per
* saltarci dentro -- ma qui dentro veste l'occhiello del pannello invece del
* corpo che `h2` ha su tutte le altre pagine. */
.tabellone__testa h2 {
font-size: inherit; font-weight: inherit; letter-spacing: inherit;
line-height: inherit; color: inherit;
}
.tabellone__conto {
margin-left: auto; font-weight: 400; letter-spacing: 0.06em;
font-variant-numeric: tabular-nums;
}
/* La riga del tabellone. Alta 60px e non 44: qui il minimo non basta, perché
* è il bersaglio che si prende camminando. */
a.riga-tab {
display: flex; align-items: center; gap: var(--s3);
min-height: 60px; padding: var(--s2) var(--s3);
border-radius: var(--radius-sm);
color: inherit; text-decoration: none;
transition: background-color 120ms ease-out;
}
/* Il riempimento e non il solo cambio di colore del nome: il bersaglio è alto
* un centimetro e mezzo, e far reagire tre millimetri di testo dice a chi
* guarda che il resto non è cliccabile. Vale identico per `:focus-visible`,
* cioè per chi arriva da tastiera. */
a.riga-tab:hover,
a.riga-tab:focus-visible { background: rgba(255, 255, 255, 0.10); }
a.riga-tab:active { transform: translateY(1px); }
/* Il filo fra una riga e l'altra. Non era mai esistito: le righe si
* distinguevano solo per l'altezza, e su un fondo scuro quattro voci di
* seguito si impastano in un blocco unico.
*
* Su un pseudo-elemento e non come `border-top` della riga, per due ragioni:
* il bordo entrerebbe dentro il riempimento arrotondato che compare al
* passaggio del dito, e si vedrebbe una linea tagliare l'evidenziazione; e
* rientrando dai lati il filo si legge come una riga di tabella invece che
* come il bordo di una scatola. */
a.riga-tab { position: relative; }
a.riga-tab + a.riga-tab::before {
content: ""; position: absolute; top: 0;
left: var(--s3); right: var(--s3);
border-top: 2px solid rgba(255, 255, 255, 0.20);
}
.riga-tab__quando {
flex: 0 0 2.75rem;
display: flex; flex-direction: column; align-items: center;
font-family: var(--mono); line-height: 1;
}
.riga-tab__giorno {
font-size: 1.375rem; font-weight: 600;
font-variant-numeric: tabular-nums;
}
.riga-tab__mese {
margin-top: 3px;
font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em;
color: var(--tabellone-dim); text-transform: uppercase;
}
.riga-tab__dove { flex: 1 1 auto; min-width: 0; }
/* Maiuscoletto spaziato, come su un tabellone vero. La spaziatura non è un
* vezzo tipografico: le lettere staccate si distinguono a distanza e con la
* pagina che si muove, che è la condizione in cui questa riga viene letta. */
.riga-tab__citta {
display: block;
font-size: 1.1875rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.055em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.riga-tab__sotto {
display: flex; align-items: center; gap: var(--s1);
margin-top: 2px;
font-size: var(--t-cap); color: var(--tabellone-dim);
}
/* Quanto manca, in una pastiglia. Il tempo è scritto a parole dentro, mai
* affidato al solo colore: chi non distingue il verde legge «fra 25 g»
* esattamente come chiunque altro. */
.stato {
flex: 0 0 auto;
font-family: var(--mono);
font-size: var(--t-cap); font-weight: 600; letter-spacing: 0.04em;
padding: var(--s1) var(--s2);
border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px;
color: var(--tabellone-dim); white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.stato--vicino { color: var(--segnale); border-color: rgba(79, 206, 156, 0.45); }
/* Il tabellone quando non c'è niente sopra cui puntarlo: si vede che esiste e
* dice cosa manca, invece di sparire e lasciare la pagina che comincia da
* «Archivio». */
.tabellone--vuoto {
padding: var(--s6) var(--s4);
text-align: center;
color: var(--tabellone-dim);
font-size: var(--t-sm);
}
/* ==========================================================================
7b. La testata di un viaggio
--------------------------------------------------------------------------
Lo stesso pannello, in cima alla pagina di un viaggio: chi ci arriva dal
tabellone ritrova la superficie da cui ha toccato, e la pagina si presenta
come la continuazione di quella riga invece che come un documento nuovo.
========================================================================== */
.testata-tab {
background: var(--tabellone);
color: var(--tabellone-ink);
--fuoco: var(--corallo);
border-radius: var(--radius);
box-shadow: var(--ombra);
padding: var(--s4);
margin-top: var(--s4);
}
/* `color: inherit` non è pignoleria: dal 2026-08-23 `h1` porta `--accent`
* addosso, e `--accent` è quasi il colore di questo pannello. Senza questa
* riga il nome del viaggio diventa blu su blu, cioè sparisce.
* Il maiuscoletto spaziato resta e per lo stesso motivo di prima -- è la
* scrittura che quel nome aveva sul tabellone da cui si è arrivati -- quindi
* anche `letter-spacing` va ridichiarato contro il -0,025em dei titoli. */
.testata-tab h1 {
color: inherit;
font-size: 1.75rem; font-weight: 600; line-height: 1.1;
text-transform: uppercase; letter-spacing: 0.03em;
}
.testata-tab__quando {
margin-top: var(--s2);
font-family: var(--mono); font-size: var(--t-cap);
color: var(--tabellone-dim); letter-spacing: 0.03em;
}
.testata-tab__fila {
display: flex; align-items: center; gap: var(--s3);
margin-top: var(--s3); padding-top: var(--s3);
border-top: 1px solid rgba(255, 255, 255, 0.16);
font-size: var(--t-sm); color: var(--tabellone-dim);
}
.testata-tab__fila .chi {
margin-left: auto; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ==========================================================================
7c. L'avviso del check-in
--------------------------------------------------------------------------
L'unico avviso di questo prodotto che ha una scadenza, e per questo l'unico
che ha un colore suo. Sta sotto il tabellone e non dentro: il tabellone dice
dove si va, questo dice una cosa da fare adesso.
Dal 2026-08-23 quel colore è il corallo della landing e non più l'ambra. La
regola che lo giustifica non cambia -- un secondo accento esiste solo
perché questo è l'unico avviso con una scadenza -- ma il corallo la serve
meglio: il filetto e il pallino passano da 1,84:1 a 3,10:1 sul bianco,
cioè da «bisogna sapere che c'è» a «si vede». Vedi `--corallo`.
E soprattutto: NON è una scelta, è un allineamento. La landing mostra già
questo avviso, nel suo finto schermo, e lo dipinge di corallo -- è la
`.chip` sotto «Cagliari → Linate» in `sito/public/index.html`. Il colore di
questo avviso era già stato deciso lì; qui si smette di contraddirlo.
Con una differenza deliberata: la landing scrive «Check-in aperto» in
bianco DENTRO il corallo, che fa 3,10:1 -- sotto AA per un testo da 11px.
Qui il corallo fa il filetto e il pallino, e la frase resta in `--ink`.
Stesso segnale, e leggibile.
ATTENZIONE, e vale più di tutto il resto scritto qui sopra: al 2026-08-23
NESSUN TEMPLATE RENDE QUESTA RIGA. `grep -r checkin-aperto src/` trova solo
questo foglio. L'avviso del check-in oggi esiste come MAIL e basta (vedi
`mail.py`, l'oggetto «check-in aperto»); la riga sulla home è promessa
dalla landing e non ancora costruita. Queste regole quindi non sono
verificate da nessuna pagina: quando la riga arriverà, si riguardino
addosso al contenuto vero invece di fidarsi dei numeri qui sopra.
========================================================================== */
a.checkin-aperto {
display: flex; align-items: center; gap: var(--s3);
min-height: var(--tap); margin-top: var(--s3);
padding: var(--s3) var(--s4);
background: var(--surface);
border: 1px solid var(--line); border-left: 3px solid var(--corallo);
border-radius: var(--radius);
color: inherit; text-decoration: none;
font-size: var(--t-sm);
}
a.checkin-aperto:hover { background: var(--surface-2); }
a.checkin-aperto:active { transform: translateY(1px); }
.checkin-aperto__p {
flex: 0 0 auto; width: 9px; height: 9px; border-radius: 999px;
background: var(--corallo);
}
.checkin-aperto b { font-weight: 700; }
.checkin-aperto .freccia { margin-left: auto; color: var(--ink-3); }
/* --- i viaggi, tutti della stessa forma -----------------------------------
* Una riga per viaggio, dal piu' vicino al piu' lontano. La gerarchia della
* pagina la fa il riquadro della prossima partenza, che e' l'unica cosa che
* deve essere grande: una seconda scheda grande subito sotto diceva lo stesso
* nome due volte, perche' la prossima prenotazione sta per definizione nel
* viaggio che comincia prima.
* `viaggio__fila` resta: la usa la testata della pagina di un viaggio. */
.viaggio__fila {
display: flex; align-items: center; gap: var(--s3);
margin-top: var(--s3); padding-top: var(--s3);
border-top: 1px solid var(--line);
font-size: var(--t-sm); color: var(--ink-2);
}
.tipi { display: flex; gap: var(--s2); flex: 0 0 auto; }
.viaggio__fila .chi {
margin-left: auto; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* La riga dell'archivio. Dal 2026-08-17 serve solo lì: i viaggi in programma
* stanno sul tabellone, e questa è la loro forma quieta una volta passati. */
a.riga-viaggio {
display: flex; align-items: center; gap: var(--s3);
min-height: var(--tap);
/* Imbottitura orizzontale e margine negativo uguale: la riga resta allineata
* al resto della pagina, ma il riempimento del passaggio del mouse arriva
* fino al bordo invece di fermarsi al testo. */
padding: var(--s2); margin-inline: calc(var(--s2) * -1);
border-radius: var(--radius-sm);
border-bottom: 1px solid var(--line);
color: inherit; text-decoration: none;
transition: background-color 120ms ease-out;
}
a.riga-viaggio:last-child { border-bottom: 0; }
/* Tutta la riga e non il solo nome: il bersaglio è alto 44px, e far reagire
* una riga di testo dice a chi guarda che il resto non è cliccabile. Vale
* identico per chi arriva da tastiera. */
a.riga-viaggio:hover,
a.riga-viaggio:focus-visible { background: var(--surface-2); }
a.riga-viaggio:hover .riga-viaggio__nome { color: var(--accent); }
a.riga-viaggio:active { transform: translateY(1px); }
.riga-viaggio__data {
flex: 0 0 3.25rem; font-family: var(--mono);
font-size: var(--t-cap); font-weight: 700; color: var(--ink-3);
text-transform: uppercase; letter-spacing: 0.04em;
/* «3 nov» e «10 set» si incolonnano invece di ballare. */
font-variant-numeric: tabular-nums;
}
.riga-viaggio__mezzo { flex: 1 1 auto; min-width: 0; }
.riga-viaggio__nome {
display: block; font-size: var(--t-md); font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* L'anno nell'archivio, con il suo totale: non quali viaggi -- quelli erano
* già tutti lì -- ma quanto avete viaggiato. */
.anno {
display: flex; align-items: baseline; gap: var(--s3);
font-family: var(--mono);
margin-top: var(--s6); padding-bottom: var(--s2);
border-bottom: 1px solid var(--line);
font-size: var(--t-sm); font-weight: 700; color: var(--ink-2);
letter-spacing: 0.04em;
}
.anno:first-of-type { margin-top: var(--s3); }
.anno__totale { margin-left: auto; font-weight: 600; color: var(--ink-3); }
/* Il conteggio dell'anno gratuito, in cima alla home: «14 di 20».
*
* Una riga sola e in corpo minore, sopra ogni altra cosa. Sta lì perché si
* vede sempre e non solo quando il limite è vicino -- una misura che compare
* quando è troppo tardi non fa decidere niente -- e sta in corpo minore per
* la stessa ragione: la pagina esiste per dire dove si va, non per contare.
*
* Il numero in monospazio e a cifre tabulari: cambia una volta a settimana e
* non deve ballare da 9 a 10. 17,06:1 il numero (`--ink` sullo sfondo di
* pagina), 4,91:1 l'etichetta accanto (`--ink-3`), sopra il 4,5:1 che serve
* al testo normale -- ed è testo normale davvero, non un'etichetta
* decorativa: dice di che cosa è il conto. */
.tetto {
display: flex; align-items: baseline; gap: var(--s2);
margin-top: var(--s4);
font-size: var(--t-sm);
}
.tetto__conto {
font-family: var(--mono); font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.tetto__et { color: var(--ink-3); }
/* ==========================================================================
8. Righe di avviso e distintivi
========================================================================== */
.avviso {
display: flex; gap: var(--s3); align-items: flex-start;
padding: var(--s3) var(--s4);
border-radius: var(--radius);
border-left: 3px solid var(--line);
background: var(--surface-2);
font-size: var(--t-md);
}
.avviso__icona { flex: 0 0 auto; line-height: 1.5; }
.avviso__testo { min-width: 0; }
.avviso__testo .rimedio {
display: block; margin-top: var(--s1);
font-size: var(--t-sm); color: var(--ink-2);
}
.avviso--info { border-left-color: var(--accent); background: var(--accent-soft); }
.avviso--attesa { border-left-color: var(--warn); background: var(--warn-soft); }
.avviso--errore { border-left-color: var(--danger); background: var(--danger-soft); }
.avviso--fatto { border-left-color: var(--ok); background: var(--ok-soft); }
/* Le righe di notifica della home: un bersaglio da 44px, non un link in un
* paragrafo. */
a.avviso { text-decoration: none; color: var(--ink); min-height: var(--tap); align-items: center; }
a.avviso:hover { border-left-width: 6px; }
a.avviso .conteggio { font-weight: 700; }
/* Stessa ragione della riga qui sopra: `.avviso--info` ha `--accent-soft`
* come fondo, e su quel fondo `--ink-3` non arriva a 4,5:1. */
a.avviso .freccia { margin-left: auto; color: var(--ink-2); }
.distintivo {
display: inline-flex; align-items: center; gap: var(--s1);
padding: 2px var(--s2);
border-radius: 999px;
font-size: var(--t-cap); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.04em;
white-space: nowrap;
}
.distintivo--attiva { background: var(--ok-soft); color: var(--ok); }
.distintivo--attesa { background: var(--warn-soft); color: var(--warn); }
.distintivo--spenta { background: var(--surface-2); color: var(--ink-3); }
.distintivo--corso { background: var(--accent-soft); color: var(--accent); }
.distintivo--dubbia { background: var(--warn-soft); color: var(--warn); }
/* «Chiusa»: l'accento, cioè il colore di ciò che è normale qui dentro, e non
* il rosso di `--danger` né l'ambra dell'attesa. Una prenotazione oltre il
* tetto non è un guasto e non è una scadenza: è la parte del prodotto che non
* è compresa, e il distintivo deve leggersi come un invito. 10,39:1. */
.distintivo--chiusa { background: var(--accent-soft); color: var(--accent); }
/* ==========================================================================
9. Bottoni
--------------------------------------------------------------------------
Tre livelli e non di più: uno principale per schermata, il resto secondario,
e il rosso riservato a ciò che distrugge. Ogni livello ha tutti i suoi
stati, compreso quello di messa a fuoco.
========================================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--s2);
min-height: var(--tap); padding: var(--s3) var(--s6);
/* Tondo pieno, come OGNI bottone della landing (`.btn`, `.reg`,
* `.piano .azione`). È il suo secondo segnale di forma dopo il colore, e a
* 44px di altezza la pastiglia costa solo un po' di imbottitura in più ai
* lati perché il testo non tocchi la curva. */
border-radius: 999px; border: 1px solid var(--line);
background: var(--surface); color: var(--ink);
font-size: var(--t-md); font-weight: 600; text-align: center;
text-decoration: none; cursor: pointer;
transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
/* L'alone blu sotto il bottone principale è quello di `.reg` sulla landing.
* Il passaggio del mouse SCENDE a `--accent-2` invece di schiarire: un
* `brightness(1.08)` su un blu così profondo lo sbiadisce, e la landing fa
* l'opposto (`.reg:hover{background:var(--blu-2)}`). */
.btn--primario {
background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
box-shadow: var(--ombra-blu);
}
.btn--primario:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn--pericolo { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn--pericolo:hover { background: var(--danger-soft); }
.btn--pieno { width: 100%; }
.btn--piccolo { min-height: var(--tap); padding: var(--s2) var(--s4); font-size: var(--t-sm); }
.btn-fila { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
/* ==========================================================================
10. Moduli
========================================================================== */
.campo { display: flex; flex-direction: column; gap: var(--s2); }
.campo > label { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.campo input[type="email"],
.campo input[type="text"] {
width: 100%;
min-height: var(--tap);
padding: var(--s3);
background: var(--surface);
/* `--line-forte` e non `--line`: il perimetro di un campo è la sola cosa
* che dice dove si scrive, e WCAG 1.4.11 gli chiede 3:1 contro quello che
* ha intorno. `--line` ne fa 1,24 -- va bene per un filetto fra due
* schede, non per questo. Vedi il token. */
border: 1px solid var(--line-forte); border-radius: var(--radius);
font-size: var(--t-md);
}
.campo input::placeholder { color: var(--ink-3); }
.campo input:focus-visible { border-color: var(--accent); }
.aiuto { font-size: var(--t-sm); color: var(--ink-2); }
.aiuto--fine { font-size: var(--t-cap); color: var(--ink-3); }
/* ==========================================================================
11. La zona pericolosa
--------------------------------------------------------------------------
Separata da tutto il resto e riconoscibile prima di essere letta: qui
dentro non si annulla niente.
========================================================================== */
.pericolo {
margin-top: var(--s12);
border: 1px solid var(--danger);
border-left-width: 3px;
border-radius: var(--radius);
background: var(--surface);
padding: var(--s4);
}
.pericolo h2 { color: var(--danger); }
/* ==========================================================================
12. Il link di sola lettura
========================================================================== */
.segreto {
width: 100%; min-height: var(--tap);
padding: var(--s3);
background: var(--surface-2);
border: 1px solid var(--line); border-radius: var(--radius);
font-family: var(--mono); font-size: var(--t-sm);
user-select: all; -webkit-user-select: all;
}
.link-attivo {
display: flex; flex-wrap: wrap; gap: var(--s3);
align-items: center; justify-content: space-between;
padding: var(--s3) 0;
border-top: 1px solid var(--line);
}
.link-attivo:first-of-type { border-top: 0; }
/* ==========================================================================
13. Giorni, elenchi, stato vuoto
========================================================================== */
/* L'intestazione di giornata, nell'idioma del tabellone: mono, spaziata, con
* un filetto che corre fino al bordo. Il filetto non è decorazione -- separa
* due giornate su una pagina che è una colonna sola di schede, dove senza di
* lui il salto di giorno è affidato a due parole in grigio. */
.giorno {
/* `top: 0` e non 44px: sopra non c'e' piu' nessuna barra sotto cui stare. */
position: sticky; top: 0; z-index: 2;
display: flex; align-items: center; gap: var(--s3);
font-family: var(--mono);
margin: var(--s6) 0 var(--s3);
padding: var(--s2) 0;
background: var(--bg);
font-size: var(--t-cap); font-weight: 700;
color: var(--ink-2);
text-transform: uppercase; letter-spacing: 0.12em;
}
.giorno::after {
content: ""; flex: 1 1 auto; height: 1px; background: var(--line);
}
.giorno:first-of-type { margin-top: var(--s4); }
.elenco { list-style: none; margin: 0; padding: 0; }
.riga {
display: flex; align-items: center; gap: var(--s3);
min-height: var(--tap); padding: var(--s2) 0;
border-bottom: 1px solid var(--line);
font-size: var(--t-md);
}
.riga:last-child { border-bottom: 0; }
.riga .crescita { margin-left: auto; }
.vuoto { text-align: left; }
.vuoto h2 { margin-bottom: var(--s2); }
/* I passi del primo avvio. Un numero e una riga: niente disegni, niente
* immagini da scaricare. */
.passi { list-style: none; margin: 0; padding: 0; counter-reset: passo; }
.passi li {
counter-increment: passo;
display: flex; gap: var(--s3); align-items: flex-start;
padding: var(--s2) 0;
font-size: var(--t-sm); color: var(--ink-2);
}
.passi li::before {
content: counter(passo);
flex: 0 0 auto;
width: 22px; height: 22px; margin-top: 1px;
display: grid; place-items: center;
border-radius: 999px;
background: var(--surface-2); color: var(--ink);
font-size: var(--t-cap); font-weight: 700;
}
/* L'indirizzo a cui si inoltra: sulla pagina di chi non ha ancora niente è
* l'oggetto principale, non una nota. */
.indirizzo-inoltro {
display: block; width: 100%;
margin: var(--s3) 0;
padding: var(--s3);
/* Mono blu su fondo azzurro chiaro: è come la landing scrive
* `memo@memosoon.com` nel suo occhiello (`.lede code`), ed è la stessa
* stringa. Chi arriva qui dopo aver letto quella pagina ritrova l'oggetto
* con l'aspetto con cui gli era stato promesso. 12,03:1. */
background: var(--surface-2); border-radius: var(--radius-sm);
font-family: var(--mono); font-size: var(--t-lg); font-weight: 700;
text-align: center; color: var(--accent); text-decoration: none;
user-select: all; -webkit-user-select: all;
}
/* ==========================================================================
14. Testo lungo (l'informativa)
========================================================================== */
.prosa { font-size: var(--t-md); line-height: 1.65; }
.prosa h2 { margin-top: var(--s8); margin-bottom: var(--s3); }
.prosa h2:first-of-type { margin-top: var(--s6); }
.prosa p { margin-bottom: var(--s4); color: var(--ink-2); }
.prosa p strong { color: var(--ink); }
.prosa li { margin-bottom: var(--s2); color: var(--ink-2); }
.indice { list-style: none; margin: var(--s4) 0 0; padding: 0; }
.indice li { border-top: 1px solid var(--line); }
.indice a {
display: flex; align-items: center;
min-height: var(--tap);
font-size: var(--t-sm); font-weight: 600; text-decoration: none;
}
/* ==========================================================================
15. Piè di pagina
========================================================================== */
footer.piede {
max-width: 34rem;
margin: var(--s12) auto calc(64px + env(safe-area-inset-bottom, 0));
padding: var(--s4) var(--s4) var(--s8);
border-top: 1px solid var(--line);
font-size: var(--t-cap); color: var(--ink-3);
}
.piede__fila { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }
.piede form { margin: 0; }
.piede button {
min-height: var(--tap);
padding: 0; border: 0; background: none;
color: var(--ink-3); font-size: var(--t-cap); font-weight: 600;
text-decoration: underline; cursor: pointer;
}
.piede button:hover { color: var(--ink); }
/* ==========================================================================
16. Movimento
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
a.blocco:active, a.allegato:active, a.checkin:active,
a.checkin-aperto:active, a.riga-viaggio:active, a.riga-tab:active,
.btn:active, .copia:active { transform: none; }
}
/* ==========================================================================
Il marchio
--------------------------------------------------------------------------
Le due «o» di Soon sono due quadranti: il primo segna le 10:10, aperto, il
secondo le 11:55, quasi chiuso. Letti da sinistra a destra sono lo stesso
orologio poco dopo, cioe' «Soon» disegnata invece che scritta. Stesso segno
di memosoon.com, cosi' chi passa dalla landing all'area non attraversa due
marchi.
Sotto i 20px i quadranti diventano due macchie e la parola si legge peggio
che senza: da li' in giu' si spengono e tornano le lettere. La regola sta
qui e non nelle pagine, cosi' non e' una decisione da riprendere ogni volta.
========================================================================== */
.ms {
display: inline-flex; align-items: baseline;
font-weight: 800; letter-spacing: -0.035em; line-height: 1;
color: var(--accent); white-space: nowrap;
}
.ms__so { color: var(--corallo); display: inline-flex; align-items: baseline; }
.ms__oro {
display: inline-block; width: 0.66em; height: 0.66em;
transform: translateY(0.02em); margin: 0 0.015em;
}
.ms__oro circle { fill: none; stroke: currentColor; stroke-width: 2.9; }
.ms__oro path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
@media (max-width: 359px) { .ms__oro { display: none; } }
/* La barra del marchio a pagina aperta. Non `position: sticky`: costa 44px una
* volta in cima e li restituisce appena si scorre. */
.cappello {
display: flex; align-items: center;
min-height: 44px; padding: 0 var(--s4);
background: var(--surface); border-bottom: 1px solid var(--line);
}
.cappello .ms { font-size: 1.25rem; }
.marchio__interno .ms { font-size: 1.5rem; }