/**
* MINOMO 2027 — Design Foundation
* app.minomo.io · consumer + porte merchant/organizzatore
*
* SOSTITUISCE minomo-2026.css. Non affiancarlo: il conto della disomogeneità
* di agosto era «7 larghezze, 10 barre, 3 set di token» — un quarto set lo
* peggiorerebbe. Quando questo file è cablato, minomo-2026.css si cancella.
*
* Direzione: «Dark Minimal + Bright Brand Character» (brief 25/08/2026).
* Il logo e MINO portano il colore. L'interfaccia porta ordine.
*
* Convenzioni semantiche — NON scambiarle:
* --orange = scoperta, consumer, CTA principali, Sorprendimi
* --aqua = merchant e organizzatore, azioni operative
* --deep = sistema, badge neutri, superfici funzionali
* --ok/--err = SOLO riempimenti, mai colore di testo (vedi nota contrasti)
* --ok-text/--err-text = gli unici ammessi su TESTO
*
* 🔑 DUE ACCENTI, E BASTA. Ratificato da Vito il 25/08/2026.
* L'arancio e' del consumer, l'acqua e' del merchant. Non ce n'e' un terzo, e
* non se ne aggiunge uno.
*
* 🔎 E la prova che la decisione regge non e' teorica, e' un conteggio.
* I 60 usi di --blue sono stati giudicati uno per uno, col contesto sotto gli
* occhi: 36 erano AZIONI (link, focus, chip selezionati, bottoni di conferma)
* e sono andati su --orange; 15 erano etichette o icone decorative e sono
* andati sul neutro; 4 chiedevano una FORMA e non un colore.
* Su acqua: ZERO. Nemmeno uno di sessanta stava su una superficie merchant.
* Quel blu non e' mai stato un accento con un significato, era il colore di
* chi non sapeva quale usare. Ed e' la ragione migliore per non aggiungerne
* un terzo: finirebbe nello stesso posto.
*
* Conseguenza, ed e' la ragione per cui migrando si trovano rimappature che
* sembrano strane: il 2026 aveva un --blue usato 77 volte, quasi tutto su
* superfici consumer, per dire «evento», «link», «informazione». Nel 2027
* quel ruolo NON ha un colore: L'INFORMATIVO CONSUMER E' NEUTRO.
* · i 77 usi sono andati sulla gerarchia del testo e delle superfici
* (--t1/--t2/--t3, --surf, --bd), non su un accento;
* · dove l'informativo era in realta' un'AZIONE (un link su cui si tocca,
* un CTA) e' andato su --orange: non e' informazione, e' invito;
* · dove il neutro toglieva significato, la differenza si fa con la FORMA
* e non col colore: peso del testo, un punto, un'icona, una superficie
* sollevata.
* ⛔ Mai --aqua su una superficie consumer, nemmeno quando sta bene: e' il
* colore che dice «qui sei dal lato merchant».
* Il motivo: con tre accenti la distinzione consumer/merchant si perde in un
* trimestre, e con lei si perde l'unica cosa che quei due colori dicevano.
*
* Author: redesign 2026-08-25
*/
/* ============================================================
1 · TIPOGRAFIA — una sola famiglia in tutta l'esperienza
============================================================
Figtree (Google Fonts, SIL OFL, variabile ~28 KB).
Scelta dopo confronto con Avenir Next (Monotype, assente su Android:
la vedrebbe una minoranza degli utenti) e Hanken Grotesk.
Il brief §4 vieta famiglie diverse per sezioni diverse: la gerarchia
nasce da dimensione, peso, spacing e contrasto, non da un secondo font.
✏️ CORRETTO il 25/08/2026. Questo blocco diceva di caricare Figtree da
fonts.googleapis.com. E' sbagliato, e il repo aveva gia' deciso il contrario:
assets/fonts/fonts.css si apre con «GDPR: no Google Fonts CDN, no IP leak to
Google» e ospita in proprio tutte le famiglie. Un a Google riaprirebbe
quella decisione, aggiungerebbe una terza parte e romperebbe l'offline della PWA.
Un commento dentro un CSS non ratifica una policy: questo file e' la fonte dei
TOKEN, non delle policy.
Figtree e' quindi ospitata in proprio, come le altre cinque famiglie:
Variabile 400..700, due sottoinsiemi (latin, latin-ext), font-display: swap.
Copertura rumena verificata in un browser vero e non dedotta dal nome del
subset: Ș ș Ț ț (U+0218-021B) ci sono, e sono virgola sottoscritta VERA, non
cediglia riciclata. E' la differenza fra scrivere Brasov e scriverlo giusto.
============================================================ */
:root{
--font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
/* Scala tipografica (brief §3) */
--fs-h1: 30px; --lh-h1: 1.12; --ls-h1: -0.021em;
--fs-h2: 24px; --lh-h2: 1.18; --ls-h2: -0.018em;
--fs-card: 18px; --lh-card: 1.28; --ls-card: -0.012em;
--fs-body: 15px; --lh-body: 1.50; --ls-body: -0.002em;
--fs-body-lg: 16px; --lh-body-lg: 1.55;
--fs-sec: 13px; --lh-sec: 1.45;
--fs-btn: 15px;
--fs-label: 11px; --lh-label: 1.35;
/* Pesi */
--w-reg:400; --w-med:500; --w-semi:600; --w-bold:700;
/* 🔑 Tracking del MAIUSCOLO — richiesta di Vito, 25/08.
Convenzione tipografica vorrebbe 0.12–0.2em sul maiuscolo; a schermo,
su etichette brevi e ripetute («PERCHÉ TE LO PROPONGO»), quel valore
legge come uno specimen di catalogo e sfilaccia la riga.
Portato a 0.045em: percepibilmente più compatto, ancora leggibile a 11px.
NON scendere sotto 0.02em: sotto quella soglia il maiuscolo a 11px
inizia a impastarsi, soprattutto con i diacritici rumeni (Ș Ț Ă Â Î). */
--ls-upper: 0.045em;
--ls-upper-tight: 0.03em; /* solo per etichette ≥13px */
}
.t-h1{font:var(--w-bold) var(--fs-h1)/var(--lh-h1) var(--font);letter-spacing:var(--ls-h1)}
.t-h2{font:var(--w-bold) var(--fs-h2)/var(--lh-h2) var(--font);letter-spacing:var(--ls-h2)}
.t-card{font:var(--w-semi) var(--fs-card)/var(--lh-card) var(--font);letter-spacing:var(--ls-card)}
.t-body{font:var(--w-reg) var(--fs-body)/var(--lh-body) var(--font);letter-spacing:var(--ls-body)}
.t-sec{font:var(--w-med) var(--fs-sec)/var(--lh-sec) var(--font)}
.t-btn{font:var(--w-semi) var(--fs-btn)/1 var(--font)}
.t-label{
font:var(--w-semi) var(--fs-label)/var(--lh-label) var(--font);
text-transform:uppercase;
letter-spacing:var(--ls-upper);
color:var(--t3);
}
/* Cifre allineate ovunque compaiano distanze, orari, posti, conteggi */
.t-num{font-variant-numeric:tabular-nums;letter-spacing:0.005em}
/* ============================================================
2 · COLORE
============================================================ */
:root{
/* Fondo — mai nero assoluto */
--bg: #0F141A;
--bg-alt: #101722; /* variante più blu, brief §5 */
--surf: #18212B;
--surf-2: #1E2935;
--surf-warm: #241C16; /* la superficie calda della famiglia card */
--bd: rgba(255,255,255,0.06);
--bd-active: rgba(255,255,255,0.12);
/* Inchiostro — mai bianco puro */
--t1: #F5F7FA;
--t2: #B8C2CC;
--t3: #7E8A97;
--t4: #5E6872;
/* Brand — scoperta, consumer, Sorprendimi */
--orange: #F26A2E;
--orange-tint: rgba(242,106,46,0.13);
--orange-bd: rgba(242,106,46,0.45);
/* 🔑 Le due gradazioni d'arancione, autorizzate dal CTO il 25/08/2026.
Non sono un capriccio: 58 riferimenti in 8 file costruiscono gerarchie
su DUE arancioni, e collassarli su uno solo le appiattisce.
Ritarati sul nuovo --orange #F26A2E, non copiati dal 2026. */
--orange-soft: #F58B57; /* il gradino piu' chiaro: stati, bordi, secondari */
--orange-hot: #FF6A21; /* il gradino piu' acceso: urgenza, notifiche */
--orange-glow: rgba(242,106,46,0.30);
/* Merchant e organizzatore — richiama l'azzurro del logo e di MINO */
--aqua: #67D6FF;
--aqua-soft: #8AE4FF;
--aqua-tint: rgba(103,214,255,0.12);
/* ✏️ Nel 2026 si chiamava --blue-glow. Rinominato dal CTO il 25/08: il blu
del 2027 e' l'acqua ed e' dei merchant, e un token che si chiama ancora
"blue" e' un invito a usarlo dove non va. */
--aqua-glow: rgba(103,214,255,0.30);
/* Superficie sollevata, fra --bg e --surf. Su un fondo che non e' nero
serve piu' di prima, non meno: sul nero puro non c'era margine sotto. */
--bg-elev: #131A22;
/* Il gradiente del logo. Il file lo nominava nelle regole non negoziabili
(«resta RARO») senza definirlo da nessuna parte, e otto riferimenti
puntavano a un token inesistente. Difetto chiuso il 25/08. */
--logo-grad: linear-gradient(135deg, #00DCFF 0%, #2470FF 28%, #9B3CFF 58%, var(--orange) 85%, #FFD243 100%);
/* Sistema */
--deep: #244C5A;
--ok: #39705A;
--err: #B94A48;
/* 🔑 Testo sopra i riempimenti forti.
Bianco su --orange fa 3.05:1 → NON passa AA. Scuro fa 6.06:1.
Stessa regola su --aqua (11.13:1 con testo scuro). */
--on-orange: #0F141A;
--on-aqua: #0F141A;
--on-ok: #F5F7FA; /* 5.38:1 */
--on-err: #F5F7FA; /* 4.73:1 */
/* 🔑 --ok e --err come COLORE DI TESTO sono illeggibili (2.82:1 e 3.20:1).
Ma otto punti del codice li usavano gia' cosi': mina.css, account-hub.css,
events.css, notifications.css, onboarding.css. Non erano una scelta di
stile, erano otto difetti di accessibilita' in attesa di un nome.
Questi due sono la versione LEGGIBILE, e sono gli unici ammessi su testo.
Autorizzati dal CTO il 25/08/2026. Misurati su --surf #18212B. */
--ok-text: #6FD3A8; /* 8.95:1 su --surf, 10.18:1 su --bg */
--err-text: #FF8A85; /* 7.14:1 su --surf, 8.13:1 su --bg */
}
/* ⚠️ NOTA CONTRASTI — verificata con calcolo WCAG il 25/08, su --surf:
--t1 15.15:1 ✓ --t2 9.00:1 ✓ --t3 4.62:1 ✓ --t4 2.86:1 (solo disabled)
--orange 5.33:1 ✓ --aqua 9.79:1 ✓
--deep 1.75:1 ✗ --ok 2.82:1 ✗ --err 3.20:1 ✗
→ --deep, --ok e --err sono RIEMPIMENTI, non colori di testo.
Come testo sono illeggibili. Usare --on-ok / --on-err sopra di essi. */
/* ============================================================
3 · ATMOSPHERE — comportamento invariato (istruzione di Vito)
============================================================
L'alone cambia col momento della giornata: NON si tocca la logica,
la resta pilota atmosphere.js come oggi.
Gli alpha sono però ritarati: erano calibrati sul NERO ASSOLUTO, e su
#0F141A lo stesso valore rende un alone più debole (il fondo più chiaro
riduce il delta percepito).
✏️ CORRETTO il 25/08/2026, e la correzione vale piu' dei numeri.
Questo blocco diceva «era .18 su #000». E' una misura presa dal posto
sbagliato: .18 e' cio' che dichiarava minomo-2026.css, ma NON e' cio' che
arrivava a schermo. atmosphere.js scriveva --atmosphere come stile inline
su , con 0.33 fisso per tutte e tre le fasi, e uno stile inline batte
qualunque :root. Per mesi il CSS ha dichiarato un valore che nessuno vedeva.
Adesso il verso e' invertito, ed e' la ragione per cui questi token esistono:
atmosphere.js NON porta piu' numeri propri, LEGGE questi tre token dal CSS
e scrive inline il valore letto. Qui e' l'unico posto al mondo dove quel
valore e' scritto. Se cambi un alpha qui, cambia a schermo; se lo cambi
altrove, non esiste nessun altrove.
⚠️ Quindi --atmosphere-dawn / -day / -evening NON sono decorativi e non si
cancellano: sono il contratto fra questo file e atmosphere.js.
============================================================ */
:root{
--atmosphere: rgba(155, 60,255,0.22); /* sera — era .18 su #000 */
--atmosphere-dawn: rgba(255,140, 60,0.24); /* mattino — era .20 */
--atmosphere-day: rgba( 36,112,255,0.13); /* pomeriggio — era .10 */
--atmosphere-evening: rgba(155, 60,255,0.22);
}
.atmosphere{position:relative;isolation:isolate}
.atmosphere::before{
content:'';position:absolute;top:0;left:0;right:0;height:60%;
background:radial-gradient(ellipse 70% 100% at 50% 0%, var(--atmosphere) 0%, transparent 70%);
pointer-events:none;z-index:0;
}
.atmosphere > *{position:relative;z-index:1}
/* ============================================================
4 · FORMA — raggi e spaziatura (brief §22, §23)
============================================================ */
:root{
--r-card:16px; --r-btn:14px; --r-pill:999px; --r-input:14px;
/* --sp-5 aggiunto il 25/08: la scala saltava il 20 e 12 punti del codice lo
usavano. Una scala che salta un gradino non e' una scala. */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
--tap:44px; /* minimo assoluto, vincolo Apple */
--col:480px; --sheet:680px; --bp-wide:900px;
--ease:cubic-bezier(0.16,1,0.3,1);
--ease-out:cubic-bezier(0.22,1,0.36,1); /* la seconda curva: 84 usi, quasi tutti in mina.css */
/* 🔑 OMBRE, e la misura conta piu' dei numeri.
Nel 2026 il fondo era #000000, e un'ombra nera su nero non esiste: quei
valori si vedevano SOLO dove una carta stava sopra una superficie piu'
chiara, e sul fondo pagina non rendevano niente. Su #0F141A l'ombra
inizia a leggersi ovunque, quindi non e' un ritocco: e' la prima volta
che questi due token fanno davvero qualcosa.
Tarati su --bg #0F141A e su --surf #18212B, non sul nero.
Il brief vieta le ombre FORTI, non le ombre: sfocatura corta, alpha alta,
nessuna distanza teatrale. */
--shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 6px 18px rgba(0,0,0,0.55);
--shadow-elev: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 44px rgba(0,0,0,0.62);
}
.m-col {width:min(100%, var(--col)); margin-inline:auto}
.m-sheet{width:min(100%, var(--sheet)); margin-inline:auto}
/* ============================================================
5 · PRIMITIVE
============================================================ */
.card{
background:var(--surf);border:1px solid var(--bd);border-radius:var(--r-card);
padding:var(--sp-4);
/* ombre leggere: il brief vieta ombre forti */
box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}
.card-2{background:var(--surf-2)}
.card:focus-within{border-color:var(--bd-active)}
.btn{
font:var(--w-semi) var(--fs-btn)/1 var(--font);
min-height:var(--tap);padding:0 var(--sp-4);
border-radius:var(--r-btn);border:1px solid transparent;
display:inline-flex;align-items:center;justify-content:center;
cursor:pointer;transition:filter .18s var(--ease);
}
.btn-primary {background:var(--orange);color:var(--on-orange)}
.btn-merchant {background:var(--aqua); color:var(--on-aqua)}
.btn-secondary{background:transparent;border-color:var(--bd-active);color:var(--t1)}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
.badge{
font:var(--w-semi) var(--fs-label)/1 var(--font);
text-transform:uppercase;letter-spacing:var(--ls-upper);
padding:6px 10px;border-radius:var(--r-pill);
background:var(--deep);color:var(--t1);
}
.badge-aqua{background:var(--aqua-tint);color:var(--aqua)}
.badge-orange{background:var(--orange-tint);color:var(--orange)}
.icon-box{
width:var(--tap);height:var(--tap);border-radius:13px;flex:none;
display:grid;place-items:center;background:var(--surf-2);
}
/* ============================================================
6 · NAVIGAZIONE (brief §21) — una sola tonalità attiva per schermata
============================================================ */
.nav{background:var(--bg);border-top:1px solid var(--bd)}
.nav-item{color:var(--t3);min-height:var(--tap)}
.nav-item[aria-current]{color:var(--orange)} /* consumer */
.nav--merchant .nav-item[aria-current]{color:var(--aqua)} /* merchant e organizzatore */
/* ============================================================
7 · REGOLE NON NEGOZIABILI
============================================================
· Se tutto è arancione, niente è importante: --orange su una cosa sola
per schermata (la CTA principale o il Sorprendimi, mai entrambi).
· Il gradient orange→magenta→blu resta RARO: Sorprendimi e momenti
speciali legati a MINO. Non è un colore di superficie.
· Mai bianco puro (#FFF) come colore di testo: usare --t1.
· Mai nero assoluto come fondo: usare --bg.
· Nessun testo tutto maiuscolo oltre le etichette brevi (.t-label).
· Tap target ≥ var(--tap). Le icone decorative dentro un bersaglio
più grande possono essere più piccole; i bersagli no.
============================================================ */
/* 🔴 NON `animation: none`. LO STATO FINALE DEVE RESTARE.
Il 26/08 questa riga ha fatto sparire la schermata di accesso a chiunque
abbia «riduci animazioni» attivo nel sistema, e Vito ce l'ha.
Il meccanismo: `.auth-step` parte a `opacity: 0` e arriva a 1 **tramite
l'animazione**. Con `animation: none` l'animazione non parte e l'opacita'
resta zero per sempre: l'elemento c'e', e' attivo, occupa lo spazio, e non
si vede. Un blocco vuoto alto uno schermo, senza un errore.
Il foglio del 2026 usava la forma giusta e io l'ho sostituita con questa
nel rimappare i token: e' una regressione mia, non un difetto ereditato.
🔑 La regola: `animation-duration: 0.01ms` **esegue** l'animazione e la fa
atterrare sul suo stato finale, istantaneamente. `animation: none` la
cancella, e con lei tutto cio' che l'animazione doveva rendere visibile.
Chi chiede meno movimento chiede di non essere disturbato, non di non
vedere. */
@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;
}
}
/* ============================================================
8 · LE PRIMITIVE PORTATE DAL 2026
============================================================
Aggiunte il 25/08/2026, corsia B, con GO del CTO.
Non sono primitive nuove: sono quelle che le 17 pagine gia' vestite dal
2026 consumano oggi e che questo file, nella prima stesura, non aveva.
Senza di loro «cancellare minomo-2026.css» non spegne uno stile: ne spegne
1410, e la testata dell'app sparisce da tutte e diciassette.
Che cosa cambia rispetto al 2026, e non e' una svista:
· niente JetBrains Mono. Il brief impone una famiglia sola, quindi eyebrow
e pill passano a Figtree, e le cifre incolonnate usano .t-num.
· il maiuscolo scende da 0.22em / 0.16em a --ls-upper (0.045em), che e' la
richiesta esplicita di Vito del 25/08.
· spariscono i bianchi puri (#fff) sopra i riempimenti forti: sopra
l'arancione si usa --on-orange, perche' bianco su --orange fa 3.05:1 e
non passa AA, mentre lo scuro fa 6.06:1.
============================================================ */
/* ---- 8.1 · Testata (#mHeader, il markup lo genera header.js) ---------------
I nomi delle classi NON sono negoziabili: li scrive header.js in
template(), e cambiarli qui senza cambiarli la' stacca la testata. */
#mHeader{position:relative;z-index:5}
.mh-row{
display:flex;align-items:center;gap:10px;
/* Rispetta notch e Dynamic Island quando gira come PWA in status bar
translucida. Su Android e sui device senza notch env() torna 0. */
padding:calc(10px + env(safe-area-inset-top, 0px)) 20px 6px;
}
.mh-logo{width:36px;height:36px;display:block;flex-shrink:0}
.mh-logo img{
width:100%;height:100%;border-radius:10px;display:block;object-fit:cover;
box-shadow:0 2px 8px rgba(0,0,0,0.5);
}
.mh-city{
display:flex;align-items:center;gap:6px;
padding:8px 14px;
background:var(--surf-2);border:1px solid var(--bd);
border-radius:var(--r-pill);
font:var(--w-semi) var(--fs-sec)/1 var(--font);
letter-spacing:-0.01em;color:var(--t1);
cursor:pointer;
}
/* ⏳ Nel 2026 questa icona era var(--blue). Il 2027 non ha un accento
informativo consumer: l'unico blu e' --aqua, riservato a merchant e
organizzatore. Provvisoriamente --t2, in attesa della decisione sul token
--info (vedi docs/dna-2027/B-rimappatura-token.md §4.1, e la voce in
TODO.md). Non e' la resa definitiva. */
.mh-city svg{width:12px;height:12px;stroke:var(--t2)}
.mh-action,
.mh-bell{
width:40px;height:40px;border-radius:50%;
background:var(--surf-2);border:1px solid var(--bd);
display:grid;place-items:center;position:relative;
text-decoration:none;flex-shrink:0;cursor:pointer;padding:0;
font-family:inherit;color:var(--t2);
transition:transform 200ms var(--ease);
}
.mh-action:active,
.mh-bell:active{transform:scale(0.94)}
/* Spinge il gruppo azione+campanella al bordo destro */
.mh-add{margin-left:auto}
.mh-action svg{width:20px;height:20px;stroke:var(--t2);fill:none}
.mh-add{
background:var(--orange);border:none;
box-shadow:0 6px 18px rgba(242,106,46,0.40), inset 0 1px 0 rgba(255,255,255,0.18);
}
.mh-add svg{stroke:var(--on-orange);stroke-width:2.4;stroke-linecap:round}
.mh-bell svg{width:18px;height:18px;stroke:var(--t2);fill:none}
.mh-bell-dot{
position:absolute;top:1px;right:1px;
min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;
background:var(--orange);color:var(--on-orange);
border-radius:9px;border:2px solid var(--surf-2);
font:var(--w-bold) 10px/12px var(--font);
font-variant-numeric:tabular-nums;
text-align:center;
}
/* Nessun conteggio, nessun bollino. Il JS toglie anche .mh-hidden: questa e'
la seconda cintura, non un doppione inutile. */
.mh-bell-dot:empty{display:none}
.mh-hidden{display:none !important}
/* ---- 8.2 · Eyebrow, l'intestazione di sezione editoriale ------------------ */
.eyebrow{
font:var(--w-med) var(--fs-sec)/var(--lh-sec) var(--font);
text-transform:uppercase;
letter-spacing:var(--ls-upper-tight);
color:var(--t2);
display:flex;align-items:center;gap:var(--sp-3);
padding:0 var(--sp-6);
margin-top:var(--sp-8);margin-bottom:var(--sp-3);
}
/* 🔴 NON CANCELLARE, e non e' difensivismo: e' un difetto gia' costato.
`[hidden]` e' una regola dello USER AGENT (display:none) e QUALUNQUE
display d'autore la scavalca, e qui sopra .eyebrow dichiara display:flex.
Risultato: un'intestazione marcata hidden nell'HTML si vede lo stesso.
Il 24/08/2026 «AGENDA TA» compariva in home con l'intestazione e ZERO
righe sotto, cioe' esattamente lo stato vuoto che il paletto P6 vieta.
Il JS era corretto: non chiamava mai show().
E' la terza volta che questa classe di difetto morde qui dentro (prima
.h-city-chip, poi .mh-city), e in giro ci sono nove toppe locali scritte
da chi si era bruciato. Questa vive nella PRIMITIVA: copre tutte le zone
che usano .eyebrow, comprese quelle che verranno.
⏳ Il rimedio definitivo sarebbe [hidden]{display:none !important} globale.
Non sta qui perche' .ml-progress[hidden] usa visibility:hidden APPOSTA per
tenere lo spazio, e un display:none globale la farebbe collassare. Va fatto
guardando quel caso, non di sfuggita dentro un'altra correzione. */
.eyebrow[hidden]{display:none}
.eyebrow .eyebrow-line{flex:1;height:1px;background:var(--bd-active)}
/* ⏳ Anche questo era var(--blue): stessa attesa della pastiglia citta'. */
.eyebrow .eyebrow-more{color:var(--t1);font-weight:var(--w-semi);cursor:pointer;text-decoration:none}
/* ---- 8.3 · Pill, l'etichetta dentro le carte ------------------------------
Diversa da .badge: la pill sta DENTRO una carta e marca il tipo di
contenuto; il badge sta accanto a un titolo e marca uno stato. */
.pill{
display:inline-flex;align-items:center;gap:6px;
font:var(--w-semi) var(--fs-label)/1 var(--font);
text-transform:uppercase;letter-spacing:var(--ls-upper);
padding:5px 9px;border-radius:var(--r-pill);
}
.pill-time,
.pill-offer,
.pill-loyalty{color:var(--orange);background:var(--orange-tint)}
.pill-news{color:var(--t3);background:rgba(255,255,255,0.06)}
/* Merchant e organizzatore: la stessa pill in acqua, per le superfici B2B. */
.pill-merchant{color:var(--aqua);background:var(--aqua-tint)}
/* ---- 8.4 · Carte, le varianti che il 2026 aveva --------------------------- */
.card-atmospheric{position:relative;overflow:hidden}
.card-atmospheric::before{
content:'';position:absolute;top:-20px;right:-20px;
width:140px;height:140px;
background:radial-gradient(circle, var(--atmosphere) 0%, transparent 60%);
pointer-events:none;
}
.card-atmospheric > *{position:relative;z-index:1}
/* Portate il 25/08 insieme ai token d'ombra e alla superficie calda: prima
sarebbero state mezze primitive. */
.card{box-shadow:var(--shadow-card)}
.card-elevated{box-shadow:var(--shadow-elev);border-radius:20px}
.card-warm{background:linear-gradient(135deg, var(--surf-2) 0%, var(--surf-warm) 100%)}
/* ---- 8.5 · Filetti e area sicura ----------------------------------------- */
.hairline{border-top:1px solid var(--bd)}
.hairline-strong{border-top:1px solid var(--bd-active)}
/* Indicatore home di iOS. Su Android env() torna 0 e non fa danno. */
.safe-bottom{padding-bottom:env(safe-area-inset-bottom, 0px)}
.safe-top{padding-top:env(safe-area-inset-top, 0px)}
/* ---- 8.6 · Campo di input ------------------------------------------------
Il 2027 dichiarava --r-input e non lo usava da nessuna parte. Serve alla
ricerca citta' di S1, alla ricerca scheda di S8a e ai cinque campi di S8d,
oltre che al restyling di account.html. */
.input{
width:100%;min-height:var(--tap);
padding:0 var(--sp-4);
background:var(--surf-2);
border:1px solid var(--bd);border-radius:var(--r-input);
font:var(--w-reg) var(--fs-body-lg)/var(--lh-body-lg) var(--font);
color:var(--t1);
/* 16px pieni: sotto questa soglia iOS zooma la pagina al focus, e da li'
l'utente non torna indietro da solo. */
}
.input::placeholder{color:var(--t3)}
.input:focus{outline:none;border-color:var(--bd-active)}
.input:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
.input[aria-invalid="true"]{border-color:var(--err)}
.input-label{
display:block;margin-bottom:var(--sp-2);
font:var(--w-semi) var(--fs-label)/var(--lh-label) var(--font);
text-transform:uppercase;letter-spacing:var(--ls-upper);color:var(--t3);
}
.input-help{
display:block;margin-top:var(--sp-2);
font:var(--w-reg) var(--fs-sec)/var(--lh-sec) var(--font);color:var(--t3);
}
.input-help[data-tone="err"]{color:var(--err-text)}
.input-help[data-tone="ok"]{color:var(--ok-text)}
/* ---- 8.7 · Foglio e velo -------------------------------------------------
.m-sheet da solo era una larghezza, non un foglio: mancavano il velo e la
risalita. */
.scrim{
position:fixed;inset:0;z-index:40;
background:rgba(6,10,14,0.72);
opacity:0;pointer-events:none;
transition:opacity .22s var(--ease);
}
.scrim[data-open]{opacity:1;pointer-events:auto}
.sheet{
position:fixed;left:0;right:0;bottom:0;z-index:41;
width:min(100%, var(--sheet));margin-inline:auto;
background:var(--surf);
border-top:1px solid var(--bd-active);
border-radius:var(--r-card) var(--r-card) 0 0;
padding:var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
transform:translateY(100%);
transition:transform .28s var(--ease);
}
.sheet[data-open]{transform:translateY(0)}
.sheet-grip{
width:36px;height:4px;border-radius:var(--r-pill);
background:var(--bd-active);margin:0 auto var(--sp-3);
}
/* ---- 8.8 · Animazioni d'ingresso e caricamento --------------------------- */
@keyframes m-rise{
from{opacity:0;transform:translateY(24px)}
to {opacity:1;transform:translateY(0)}
}
@keyframes m-rise-bar{
from{opacity:0;transform:translateY(20px)}
to {opacity:1;transform:translateY(0)}
}
@keyframes m-shimmer{
0% {background-position:-200% 0}
100%{background-position: 200% 0}
}
.rise-1{animation:m-rise 800ms var(--ease) 80ms both}
.rise-2{animation:m-rise 800ms var(--ease) 240ms both}
.rise-3{animation:m-rise 800ms var(--ease) 440ms both}
.rise-4{animation:m-rise 800ms var(--ease) 640ms both}
.rise-5{animation:m-rise 1000ms var(--ease) 840ms both}
.rise-6{animation:m-rise 1000ms var(--ease) 1040ms both}
.rise-7{animation:m-rise-bar 900ms var(--ease) 1240ms both}
.skeleton{
background:linear-gradient(90deg, var(--surf) 25%, var(--surf-2) 50%, var(--surf) 75%);
background-size:200% 100%;
animation:m-shimmer 1.4s ease-in-out infinite;
border-radius:12px;
}
/* ---- 8.9 · Fondo di pagina ----------------------------------------------- */
/* Il 2026 lo faceva con body.minomo-2026, che era anche il selettore di
scoping di 342 regole in 20 file. Qui e' una classe sola con un compito
solo: vestire il fondo. Lo scoping non torna. */
/* 🔑 `body.` non e' decorativo, e me l'ha detto il browser e non il sorgente.
Finche' il 2026 convive, la sua regola e' `body.minomo-2026`, cioe'
specificita' (0,1,1). Una `.minomo-2027` da sola vale (0,1,0) e PERDE:
il fondo cambiava ma il testo restava #F5F5F7 e il font restava Manrope,
in silenzio e senza che niente sembrasse rotto.
Con `body.` le due regole pesano uguale, e vince quella che arriva dopo,
cioe' questa: le pagine caricano il 2027 sotto il 2026 apposta.
Quando il 2026 sara' cancellato questa riga restera' corretta lo stesso. */
body.minomo-2027{
/* 🔑 IL CIELO DI MINOMO STA QUI, E SOLO QUI.
Richiesta di Vito il 25/08: «i background atmosphere li gradirei ovunque,
cosi' evitiamo di avere background diversi». Contando, il problema era
peggiore di come si vedeva: non erano dieci pagine senza alone, erano
SETTE PAGINE CON SETTE ALONI, ognuno scritto a mano nel suo CSS di pagina
e nemmeno uguali fra loro (feed.css usava 46vh dove le altre usavano 60vh).
Aggiungerne dieci avrebbe fatto diciassette verita' su com'e' fatto il
cielo. Quindi le sette sono state tolte e questa e' l'unica rimasta.
🔴 E' un background-image, NON uno pseudo-elemento, ed e' deliberato.
Su explore.html la mappa Leaflet occupa tutta la pagina, e un velo
sovrapposto avrebbe un contesto di impilamento e potrebbe intercettare i
tocchi: un difetto che si scopre solo provando a trascinare la mappa, e
che nessun guardiano vede. Un background non impila e non intercetta
niente: e' a prova di Leaflet per costruzione, non per attenzione.
Il colore lo porta --atmosphere, che atmosphere.js aggiorna col momento
della giornata leggendolo dai tre token di fase. Qui c'e' la FORMA, li'
il colore: due cose diverse, un posto ciascuna.
Se una pagina non lo regge (i due casi da guardare per primi sono
explore.html e m.html, per via delle immagini a tutta larghezza), si
spegne con .senza-atmosphere qui sotto. L'eccezione e' prevista: non e'
una dimenticanza, e NON si torna a scrivere gradienti nei CSS di pagina. */
background:
radial-gradient(ellipse 80% 60vh at 50% 0%,
var(--atmosphere) 0%,
transparent 70%),
var(--bg);
min-height:100vh;
min-height:100dvh;
color:var(--t1);
font-family:var(--font);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
/* L'uscita prevista, per le pagine che il cielo non lo reggono. */
body.minomo-2027.senza-atmosphere{background:var(--bg)}
body.minomo-2027 a,
body.minomo-2027 button,
body.minomo-2027 [role="button"]{-webkit-tap-highlight-color:transparent}