/* ═══════════════════════════════════════════════════════════════════
WORKOUTS v2 — design system "Il muro del box" · BASE
Nero polveroso (texture magnesite del sito) · Anton display · Inter
Vibe: scoreboard da gara. Un solo accento: viola Iris #8E70D4.
─────────────────────────────────────────────────────────────────────
Quattro file dal 2026-09-11 (piano A7, 13.1), caricati in quest'ordine:
base.css (questo) → codifiche.css → atleta.css (base_public.html)
oppure coach.css (base_admin.html).
Qui sta tutto ciò che vale per ENTRAMBE le viste: font, token (anche
--rail-off e --dim), reset, layout e testata (anche sul telefono),
tipografia, bottoni, badge, card, form, flash, toast, tabelle, modale
note, sheet (guscio), utility, mobile generico, avatar, colore track,
il kit v2 della sheet di registrazione (chip, seg, celle, flabel,
hintline, log-tag: lo usano anche il form coach e la scheda utente),
coach notes, i commenti e la loro sheet, la tendina @, l'interruttore
.pf-sw, conferma, pagina di errore.
Una sezione nuova va nel file della sua area, in fondo. ⚠️ A parità di
specificità vince l'ultima regola caricata: una regola di base che deve
battere una di area si scrive più specifica, non si sposta (le tre
compensazioni «13.1» in codifiche.css sono nate così). Dentro ogni file
le sezioni stanno nell'ordine che avevano nel file unico (git:
static/css/workouts.css fino al 2026-09-10); lo split è verificato con
scripts/vetrina/css_diff.py (stili calcolati prima/dopo: zero
differenze).
═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
WORKOUTS v2 — design system "Il muro del box"
Nero polveroso (texture magnesite del sito) · Anton display · Inter
Vibe: scoreboard da gara. Un solo accento: viola Iris #8E70D4.
═══════════════════════════════════════════════════════════════════ */
/* ── Font self-hosted ─────────────────────────────────────────────── */
@font-face {
font-family: 'Anton';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/anton-latin.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-var-latin.woff2') format('woff2');
}
/* ── Token ────────────────────────────────────────────────────────── */
:root {
color-scheme: dark;
/* colori — nero con una punta di viola, allineati ai riferimenti grafici
del kit v2 (fondo #0D0C11, superfici #17161C).
I due livelli di superficie restano: --surface-2 tiene lo stesso passo
di prima (+8 su ogni canale) per non appiattire card e piani rialzati. */
--ink: #0D0C11;
--surface: #17161C;
--surface-2: #1F1E24;
/* allineati ai riferimenti grafici (2026-08-14): il filetto era scivolato
al 9% contro il 7%, il testo a #f5f4f7 e il grigio attenuato a #9c99a6.
Valgono i riferimenti: #8C8798 sta a 5.17:1 sulla card e 5.60:1 sulla
pagina, sopra la soglia AA di 4.5 per il testo piccolo. */
--line: rgba(255,255,255,.07);
--text: #F2F0F5;
--muted: #8C8798;
--purple: #8E70D4;
/* il viola in canali, per le trasparenze: rgba(var(--accent-rgb), .14).
La faccia DaVinci lo ridefinisce (static/css/tema-dvp.css) e con lui
cambiano tutte le tinte che ne derivano (2026-09-23). */
--accent-rgb: 142, 112, 212;
--purple-hi: #A886CD;
--purple-dim: rgba(var(--accent-rgb), .14);
--purple-line:rgba(var(--accent-rgb), .4);
/* ui-kit card WOD (2026-08-10): tinte del brand a bassa opacità per gli
sfondi bottone (MAI hex fisso: la trasparenza li tiene coerenti su
superfici diverse) + versioni schiarite del viola per testo/icone */
--brand-light: #BBA9E5; /* testo/icone sui bottoni primari */
--brand-mid: #9B85DD; /* sottotitolo tipo "EVERY 1:40 X 5" */
--body-text: #CFCCD6; /* corpo descrizione card */
--btn-tint: rgba(var(--accent-rgb), .15);
--btn-tint-hover: rgba(var(--accent-rgb), .22);
--btn-tint-active: rgba(var(--accent-rgb), .28);
--btn-sec-bg: rgba(255,255,255,.06);
--btn-sec-bg-hover: rgba(255,255,255,.10);
--btn-sec-fg: #C9C6D1;
/* SELEZIONE (2026-08-14, decisione di Roberta) — un controllo selezionato è
viola al 22%, il suo hover al 28%. Prima il valore girava in tre
intensità diverse (20% chip classifica, 22% barre segmentate, 28% hover):
il 20% su fondo scuro si confondeva col grigio dell'hover, che è proprio
l'errore che le specifiche mettono in guardia dal fare.
⚠️ NON riusare --btn-tint-*: quelli sono lo sfondo di un'AZIONE, questi lo
stato di un INTERRUTTORE. Stessi numeri oggi, ma cambiano per motivi
diversi. */
--sel-tint: rgba(var(--accent-rgb), .22);
--sel-tint-hover: rgba(var(--accent-rgb), .28);
--sel-fg: #D6C9F2;
/* versione desaturata per le superfici piene e grandi (bottone primario,
giorno attivo): il viola pieno a tutta larghezza pesava troppo */
--purple-mute: #7B6CA4;
--purple-mute-hi: #8B7BB6;
/* ⭐ Le TINTE DELL'ACCENTO che erano scritte a mano nei fogli (2026-09-23,
le due facce): valori identici a prima, ma ora la faccia DaVinci le
ridefinisce in un punto (static/css/tema-dvp.css). Un viola nuovo si
scrive come token, mai come esadecimale in una regola. */
--accent-testo: #D6C9F2; /* testo chiaro su una tinta (io in classifica, hover) */
--accent-testo-hi: #E4DBF7;
--accent-etichetta: #A996DE; /* etichette e numeri nell'accento */
--accent-vivo: #A97FF5; /* il timer negli ultimi secondi */
--accent-lampo: #262233; /* il lampo del timer */
--accent-inchiostro: #1B1030; /* testo SOPRA l'accento pieno */
--brand-light-rgb: 187, 169, 229; /* --brand-light in canali */
--sheet-cta-bg: #1B1826;
--sheet-cta-bg-hover: #221E31;
/* i GRIGI con la punta di viola, per luminosità (il numero è la L di
HSL): erano un centinaio di esadecimali sparsi, stessi valori */
--grigio-93: #EDEBF2;
--grigio-91: #E8E6ED;
--grigio-80: #C9C6D1;
--grigio-66: #A5A0AE;
--grigio-62: #9C97A6;
--grigio-51: #7E7989;
--grigio-44: #6E6979;
--grigio-35: #57535F;
--grigio-22: #3A3742;
/* le tinte delle sezioni (For Time a sezioni, codifiche.css .sez--*):
la prima è --brand-light, poi a scendere */
--tinta-sez-b: #A98FE0;
--tinta-sez-c: #9C8BC7;
--tinta-sez-d: #9A94A6;
--ok: #4ade80; --ok-dim: rgba(74,222,128,.14); --ok-line: rgba(74,222,128,.35);
--warn: #fbbf24; --warn-dim: rgba(251,191,36,.14); --warn-line: rgba(251,191,36,.35);
--err: #fc6868; --err-dim: rgba(252,104,104,.14); --err-line: rgba(252,104,104,.35);
/* spacing — base 4 */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
--s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
/* type */
--font: 'Inter', system-ui, sans-serif;
--font-display: 'Anton', 'Arial Black', sans-serif;
--fs-xs: 12px; --fs-sm: 13.5px; --fs-base: 15px; --fs-lg: 17px; --fs-xl: 20px;
--fs-input: 16px; /* i controlli restano a 16px: niente zoom iOS */
/* due gradini SOTTO --fs-xs, aggiunti alla scala il 2026-08-14. Non sono
un'eccezione: le specifiche li prescrivono per occhielli ed etichette
(10px) e per sottotitoli e righe meta (11px), ed erano le due misure più
scritte a mano di tutto il file (26 e 18 occorrenze). Restano FUORI dalla
media query mobile: sono già i più piccoli, rimpicciolirli li renderebbe
illeggibili. */
--fs-eyebrow: 10px;
--fs-meta: 11px;
/* etichetta delle sezioni coach notes: fuori scala di proposito (è un
occhiello) e FUORI dalla media query, non deve rimpicciolire */
--cn-head-fs: 10px;
--display-sm: 24px;
--display-lg: clamp(26px, 4.5vw, 36px);
--display-hero: clamp(34px, 7vw, 56px);
/* geometria — --r-lg è il raggio delle bottom sheet (20px nei riferimenti
del kit v2): un gradino nuovo della scala, non un numero sparso */
--r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;
/* BOTTONI (2026-08-14, decisione di Roberta) — il raggio segue la
dimensione, due gradini soli. Prima lo stesso bottone d'azione esisteva
in cinque forme (11px card WOD, 12px massimali, 13px riepilogo score,
14px sheet e dock, 999px profilo/auth/coach/admin): non si incontravano
mai tranne che nel profilo, ed è lì che si vedeva.
La pastiglia NON sparisce dal file: resta su chip, filtri e badge, dove
la forma tonda distingue un interruttore da un'azione. */
--r-btn: 12px; /* bottone in linea, piccolo */
--r-btn-lg: var(--r-md); /* bottone grande a tutta larghezza */
--speed: .15s ease;
--tap: 44px;
/* ── Il segno del FUOCO (2026-08-27, scelto con Roberta) ───────────
Il filo cade SUL bordo del comando (offset negativo), non fuori:
staccato si vedevano due righe — il bordo del campo e l'anello
intorno — e lei l'ha bocciato tre volte prima di arrivarci.
Si cambia QUI per tutta l'app. */
--fuoco-w: 1.5px;
--fuoco-c: var(--purple);
/* altezza della bottom nav, safe-area ESCLUSA. Era scritta a mano come
72px in quattro punti (padding del main, toast, dock della classifica):
tre cose che devono muoversi insieme alla nav e che potevano divergere
in silenzio. La nav non ha un'altezza propria — la fa il contenuto —
quindi questo resta il numero di riferimento di chi le sta attorno. */
--nav-h: 72px;
}
/* mobile: scala tipografica più compatta — sullo schermo stretto il testo
a 15px "spingeva" e si leggeva peggio. --fs-input NON si tocca (sotto i
16px iOS zooma il campo al focus). */
@media (max-width: 480px) {
:root {
--fs-xs: 11.5px; --fs-sm: 12.5px; --fs-base: 14px;
--fs-lg: 16px; --fs-xl: 18px;
--display-sm: 22px;
}
}
/* ── Reset + base ─────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* gutter stabile: le pagine corte (senza scrollbar) non spostano più
il contenuto centrato rispetto a quelle lunghe */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
/* ⚠️ Safari spegne il doppio tocco solo se lo dice l'elemento che HAI
TOCCATO: metterlo sulla radice o sul body non basta, il tocco cade su
un titolo o su un div qualsiasi e lo zoom parte lo stesso. Serve
davvero su tutti (segnalato da Roberta il 2026-08-20, due tentativi
più leggeri non erano bastati).
`manipulation` = niente doppio tocco, ma le due dita restano LIBERE:
chi ci vede poco deve poter ingrandire, e se la pagina finisce zoomata
è l'unico modo per uscirne. Il doppio tocco vero lo spegne no-zoom.js,
perché su Safari il CSS da solo non bastava. */
* { touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
/* senza, lo stagger delle card resterebbe a opacity 0 per il delay */
animation-delay: 0s !important;
}
/* gli pseudo-elementi delle View Transitions NON sono coperti dal
selettore * del documento: si azzerano a parte */
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation: none !important; }
}
/* ── View Transitions cross-document (Chrome 126+ / Safari 18.2+) ──
Progressive: dove non supportate si naviga senza animazione (Firefox).
Default = fade + risalita leggera; con la direzione marcata dal JS
(toast.js, Navigation API) avanti scivola da destra, indietro da
sinistra, come un'app nativa. Topbar e bottom nav hanno uno snapshot
proprio: restano ferme mentre il contenuto transisce. */
@view-transition { navigation: auto; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes vt-in-fwd { from { opacity: 0; transform: translateX(28px); } }
@keyframes vt-in-back { from { opacity: 0; transform: translateX(-28px); } }
::view-transition-old(root) { animation: vt-out .18s ease both; }
::view-transition-new(root) { animation: vt-in .22s ease both; }
html:active-view-transition-type(fwd) ::view-transition-new(root) {
animation-name: vt-in-fwd;
}
html:active-view-transition-type(back) ::view-transition-new(root) {
animation-name: vt-in-back;
}
.topbar { view-transition-name: topbar; }
.bottom-nav { view-transition-name: bottomnav; }
body {
font-family: var(--font);
font-size: var(--fs-base);
color: var(--text);
background: var(--ink);
min-height: 100dvh;
display: flex;
flex-direction: column;
line-height: 1.6;
/* ⭐ 2026-08-27: `clip`, non `hidden` — è la cura della bottom nav che
«balla» su iPhone (segnalata da Bernardo, misurata con /debug/barra:
380 frame su 2073 con la barra fuori posto, senza alcuno zoom).
`overflow-x: hidden` NON è combinabile con `overflow-y: visible`, e
il browser forza l'altro asse ad `auto`: il body diventa così un
CONTENITORE DI SCROLL, e su WebKit un fixed dentro un body-scroller
viene ricomposto in ritardo — durante lo scroll scorre via col
documento e torna a posto quando ci si ferma. `clip` è l'unico
valore che convive con `visible`: taglia l'overflow orizzontale
come prima, ma non crea nessuno scroller (verificato: overflow-y
calcolato passa da `auto` a `visible`). La riga `hidden` resta
sopra come ripiego per i browser senza clip (Safari < 16). */
overflow-x: hidden;
overflow-x: clip;
/* `contain` e non `none` (2026-08-22, chiesto da Roberta: «o che
rimbalza di più»): none spegne del tutto il rimbalzo elastico e
l'arrivo in fondo è secco. `contain` tiene quello che serviva — la
scorsa non passa a quello che c'è sotto, niente ricarica tirando giù
dall'alto — e restituisce il rimbalzo. */
overscroll-behavior-y: contain;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
}
/* niente texture: i riferimenti del design system posano le card su
--ink pieno. La polvere di magnesite (static/img/dust.jpg) sgranava
troppo sulle schermate dell'app e resta solo sul sito. */
body > * { position: relative; z-index: 1; }
a { color: var(--purple-hi); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--purple); color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
outline: var(--fuoco-w) solid var(--fuoco-c);
outline-offset: calc(-1 * var(--fuoco-w));
}
/* ⚠️ un link DENTRO UN TESTO non ha un riquadro su cui appoggiare il
filo: il suo segno è la sottolineatura, che è il modo naturale del
testo e non disegna scatole intorno alle parole. Solo dentro i
paragrafi: i link travestiti da bottone (.btn, .tl-btn…) stanno
altrove e tengono il filo. */
:is(p, li, .hint, .rich-text, figcaption) a:focus-visible {
outline: none;
text-decoration: underline;
text-underline-offset: 3px;
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.icon {
width: 20px; height: 20px;
flex: 0 0 auto;
vertical-align: -4px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.icon--sm { width: 16px; height: 16px; vertical-align: -3px; }
/* icone PIENE del ui-kit (nav + card WOD): riempimento, niente contorno */
.icon--fill { fill: currentColor; stroke: none; }
/* ── Layout ───────────────────────────────────────────────────────── */
main { flex: 1; padding: var(--s4) 0 var(--s6); }
.container {
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 0 var(--s4);
}
/* Coach e admin lavorano su tabelle larghe (utenti, griglia settimana):
1240px costringeva /admin/utenti a scorrere di lato. */
body.admin .container { max-width: 1600px; }
/* ⛔ non esiste più la variante "narrow" per le pagine di scrittura
(2026-08-18, deciso da Francesco: «tutte larghe come le più larghe» —
le finestre coach che cambiavano larghezza fra una pagina e l'altra
stonavano più di un form largo). Il block body_class in base_admin
resta come hook. */
/* topbar */
header.topbar {
/* ⚠️ fondo OPACO e niente backdrop-filter (2026-08-21): terza volta
dopo bottom nav e testata della home. Su iPhone WebKit ricompone in
ritardo un layer appiccicato col blur, e mentre si scorre in fretta
TUTTI i livelli fissi della pagina restano indietro — compresa la
barra in basso, che è quella che si vede «staccarsi». rgba(10,10,11)
era anche il vecchio nero caldo, non --ink. */
background: var(--ink);
min-height: 60px;
display: flex;
align-items: center;
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid var(--line);
}
header.topbar > .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
min-width: 0;
}
.brand { display: flex; align-items: center; min-width: 0; }
.brand img { height: 27px; width: auto; display: block; }
/* ⭐ 2026-08-27 (Roberta): non piu la scritta viola nel carattere del
logo dopo un filo grigio. Ora e una barretta viola di 3 punti con
accanto la parola in maiuscolo: la STESSA barra che sta a sinistra
delle targhette della settimana, quindi la testata parla la lingua
della griglia e non aggiunge una forma nuova.
⚠️ Provate anche la pastiglia piena (come il badge COACH dei commenti)
e quella vuota: la piena pesava quanto una voce di menu, la vuota su
fondo nero spariva a schermo piccolo. */
.brand-app {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
color: var(--body-text);
margin-left: var(--s2);
padding-left: var(--s2);
border-left: 3px solid var(--purple);
white-space: nowrap;
}
.topbar-nav {
display: flex;
gap: var(--s1);
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
.topbar-nav a, .topbar-nav .nav-btn {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 40px;
padding: 0 var(--s3);
border-radius: var(--r-pill);
border: none;
background: none;
font-family: var(--font);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--muted);
cursor: pointer;
transition: color var(--speed), background-color var(--speed);
}
.topbar-nav a:hover, .topbar-nav .nav-btn:hover {
color: var(--text);
background: var(--surface-2);
text-decoration: none;
}
.topbar-nav a.active { color: var(--purple-hi); }
.nav-form { display: inline-flex; }
/* bottom nav (atleti, mobile) */
.bottom-nav {
display: none;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 100;
/* ⚠️ fondo OPACO e niente backdrop-filter (2026-08-17). Prima era
rgba(10,10,11,.92) + blur(14px): su iPhone la nav "svolazzava" durante
lo scroll con inerzia, lasciando vedere il contenuto scorrere sotto —
un layer fixed con backdrop-filter WebKit lo ricompone in ritardo, e
l'8% di trasparenza mostrava comunque la pagina attraverso la barra.
Il colore è anche l'allineamento ai token: rgba(10,10,11) era il
vecchio «nero caldo», non l'attuale --ink. */
background: var(--ink);
/* ⛔ NIENTE `transform: translateZ(0)` (2026-08-22). C'era dal 17 agosto
come «rimedio standard ai fixed che ballano su iOS», e faceva il danno
che doveva curare: dava alla barra uno strato grafico tutto suo, e il
telefono si ritrovava a ridisegnare a ogni fotogramma la fascia di
contenuto che ci passa sotto. Scorrendo veloce fino in fondo erano le
ULTIME CARD a tremare — non la testata, non la barra.
Provato in A/B sull'iPhone di Roberta, stesso gesto: con lo strato
trema, senza è calma. Se qualcuno lo rimette, il tremolio torna. */
border-top: 1px solid var(--line);
/* ⚠️ Questa imbottitura CAMBIA da sola mentre si scorre, e non è un
difetto: su iPhone con la barra degli indirizzi in basso, quando
Safari la ritira nella pastiglia il telefono dichiara «gli ultimi
34px ora sono coperti» e la zona sicura si apre. Senza, le icone
finirebbero sotto la pastiglia. Quello che si poteva togliere è lo
SCATTO: ora la crescita scivola insieme all'animazione di Safari
(2026-08-21, barra «che si alza» segnalata da due telefoni). */
padding-bottom: env(safe-area-inset-bottom);
transition: padding-bottom .18s ease;
}
/* paraurti (2026-08-18): in Safari con la barra indirizzi in basso il
viewport di layout e quello visibile si disallineano mentre la barra
si espande/ritira, e sotto la nav si apriva un "buco" col contenuto
che scorreva dentro. La fascia estende il fondo della nav oltre il
bordo: nel buco si vede lei, non la pagina. */
.bottom-nav::after {
content: '';
position: absolute;
top: 100%;
left: 0; right: 0;
height: 120px;
background: var(--ink);
}
.bottom-nav-inner {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
.bottom-nav a {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 10px 0 8px;
min-height: var(--tap);
font-size: var(--fs-meta);
font-weight: 600;
color: var(--muted);
transition: color var(--speed);
}
.bottom-nav a:hover { text-decoration: none; }
.bottom-nav a.active { color: var(--purple-hi); }
.bottom-nav a:active { color: var(--text); }
.bottom-nav .icon { width: 22px; height: 22px; }
.footer-pub {
text-align: center;
padding: var(--s5) var(--s4);
color: var(--muted);
font-size: var(--fs-xs);
border-top: 1px solid var(--line);
}
/* ── Tipografia ───────────────────────────────────────────────────── */
h1.display, h2.display {
font-family: var(--font-display);
font-weight: 400;
text-transform: uppercase;
font-size: var(--display-lg);
line-height: 1.04;
text-wrap: balance;
margin: 0 0 var(--s4);
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--s2);
font-size: var(--fs-xs);
font-weight: 600;
text-transform: uppercase;
color: var(--purple-hi);
}
.muted { color: var(--muted); }
small, .small { font-size: var(--fs-sm); color: var(--muted); }
.empty {
color: var(--muted);
text-align: center;
padding: var(--s5) 0;
}
.empty .icon { width: 28px; height: 28px; opacity: .6; margin-bottom: var(--s2); }
/* PR, categoria senza niente: una riga spenta e basta. Stesso grigio dei
giorni futuri, e 36px di stacco dai filtri perché non sembri appesa
alla fila di chip (misura scelta da Roberta il 2026-08-20). */
.pr-vuoto {
margin: 0;
padding: 36px 0 8px;
text-align: center;
font-size: 13px;
color: var(--dim);
}
/* ⛔ `.empty--hero`, il watermark col graffito, è STATO TOLTO il
2026-09-04 (Roberta): lo stato vuoto dell'app è uno solo, il riquadro
tratteggiato `.tl-empty` (icona, titolo, riga sotto). Il graffito, oltre
a parlare un'altra lingua, arrivava sempre tagliato — alto 111 punti
dentro un'imbottitura da 110. Se ricompare da qualche parte, è una
ricaduta: la regola sta in docs/design-system.md. */
/* flow di testo nei contesti prose */
.prose p, .prose ul, .prose ol { margin-bottom: var(--s3); }
.prose :last-child { margin-bottom: 0; }
.prose li { margin-bottom: var(--s1); margin-left: var(--s5); }
/* rich-text dei coach (output Quill sanitizzato) */
/* le descrizioni importate da BTWB usano : senza questo, su mobile
la riga non manda a capo e viene tagliata a destra */
.rich-text { overflow-wrap: anywhere; }
.rich-text { font-size: var(--fs-base); line-height: 1.6; }
.rich-text p { margin-bottom: var(--s3); }
.rich-text h2, .rich-text h3 {
margin: var(--s4) 0 var(--s2);
line-height: 1.25;
}
.rich-text h2 { font-size: var(--fs-xl); }
.rich-text h3 { font-size: var(--fs-lg); color: var(--purple-hi); }
.rich-text ul, .rich-text ol { margin: 0 0 var(--s3) var(--s5); }
.rich-text li { margin-bottom: var(--s1); }
.rich-text a { text-decoration: underline; }
/* formato "riga grigia" dell'editor (rest / note): stesso stile della
riga di recupero generata sotto lo schema SxR (.tl-card-sub) */
.rich-text p.ql-rest-on {
color: var(--muted);
font-size: var(--fs-sm);
margin-bottom: var(--s1);
}
.rich-text :last-child { margin-bottom: 0; }
.user-text { overflow-wrap: anywhere; }
.pre-line { white-space: pre-line; }
/* ── Bottoni ──────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s2);
min-height: var(--tap);
padding: 0 var(--s5);
/* squadrati come tutto il resto: la pastiglia tonda era rimasta solo qui */
border-radius: var(--r-btn-lg);
font-family: var(--font);
font-size: var(--fs-sm);
font-weight: 600;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: background-color var(--speed), border-color var(--speed),
color var(--speed), transform var(--speed);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
/* ⚠️ LA STESSA LINGUA DELL'ATLETA (2026-08-24, scelta di Roberta fra due
proposte). L'azione che conclude non è più viola PIENO con testo
bianco: è la velatura viola col filo, cioè il «Salva risultato» che
l'atleta ha nella sheet (.sheet-cta). Le altre sono neutre, e il
pericolo lo dice il cestino, non il rosso — come per gli avvisi, dove
il tipo lo dice l'icona. Il rosso resta al passaggio del mouse, quando
stai per premere davvero. */
.btn-primary {
background: var(--btn-tint);
color: var(--brand-light);
box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45);
}
.btn-primary:hover { background: var(--btn-tint-hover); color: var(--sel-fg); }
.btn-ghost {
background: rgba(255, 255, 255, .06);
border-color: transparent;
color: var(--grigio-66);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .11); color: var(--text); }
.btn-danger { background: rgba(255, 255, 255, .06); border-color: transparent; color: var(--grigio-66); }
.btn-danger:hover { background: var(--err-dim); color: var(--err); }
.btn--sm { min-height: 36px; padding: 0 var(--s4); font-size: var(--fs-sm); border-radius: var(--r-btn); }
.btn--block { width: 100%; }
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--tap);
height: var(--tap);
flex: 0 0 auto;
/* quadrato stondato su una velatura, non più pastiglia col filo: è lo
stile della chiusura nei riferimenti del kit v2 (.x/.close, velatura
rgba(255,255,255,.06), niente bordo), portato su TUTTI i bottoni
icona. Il filo resta trasparente così l'hover non sposta il layout. */
border-radius: var(--r-md);
background: rgba(255, 255, 255, .06);
border: 1px solid transparent;
color: var(--grigio-66);
cursor: pointer;
transition: color var(--speed), border-color var(--speed), background-color var(--speed);
}
/* il grigio chiaro è l'hover, come sui chip: qui si schiarisce la velatura
invece di accendere un filo viola, che su un quadrato stondato leggeva
come «selezionato» */
.btn-icon:hover { color: var(--text); background: rgba(255, 255, 255, .11); text-decoration: none; }
.btn-icon:active { transform: scale(.94); }
.btn-icon--danger:hover { color: var(--err); border-color: var(--err-line); background: var(--err-dim); }
/* disabilitato = segnaposto che tiene la colonna allineata (l'occhio
dell'impersonazione sulle righe admin). Niente pointer-events: none,
sennò sparirebbe anche il title che spiega il perché. */
.btn-icon:disabled { opacity: .35; cursor: not-allowed; }
.btn-icon:disabled:hover { color: var(--grigio-66); background: rgba(255, 255, 255, .06); }
.btn-icon:disabled:active { transform: none; }
/* 36px come li vuole Roberta (il riferimento dice 30, troppo piccolo per
un dito). L'area toccabile resta 44px — il bersaglio che il repo si è
dato, --tap — allargata oltre il bordo visibile: si vede piccolo, si
prende lo stesso. */
.btn-icon--sm { position: relative; border-radius: var(--r-btn); }
.btn-icon--sm::after {
content: '';
position: absolute;
inset: calc((36px - var(--tap)) / 2);
}
/* ⚠️ Nelle sheet l'area estesa a destra veniva TAGLIATA: la X sta sul
bordo destro del corpo, che scorre (overflow) e quindi ritaglia tutto
quello che sporge fuori — restavano 44px su tre lati e 36 sul quarto.
È lo stesso difetto annotato sulla PR #5, mai chiuso.
Qui l'area si allarga solo verso l'INTERNO: 36 + 8 a sinistra = 44 di
bersaglio, e a destra non sporge niente da tagliare. Non si perde
nulla: a destra della X c'è il bordo dello schermo, nessuno ci tocca. */
.score-sheet-head .btn-icon--sm::after,
.note-dialog-head .btn-icon--sm::after {
inset: calc((36px - var(--tap)) / 2) 0 calc((36px - var(--tap)) / 2)
calc(36px - var(--tap));
}
.actions {
display: flex;
gap: var(--s2);
flex-wrap: wrap;
align-items: center;
}
/* ── Badge ────────────────────────────────────────────────────────── */
.badge {
display: inline-block;
max-width: 100%;
/* line-height = altezza: il testo uppercase resta centrato nel box
(+1px sopra per la centratura ottica, niente discendenti) */
padding: 1px 10px 0;
line-height: 21px;
border-radius: var(--r-sm);
font-size: var(--fs-meta);
font-weight: 700;
text-transform: uppercase;
background: var(--purple-dim);
color: var(--purple-hi);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
a.badge { transition: background-color var(--speed), color var(--speed); }
a.badge:hover { text-decoration: none; background: rgba(var(--accent-rgb), .26); }
/* 2026-08-27 (Roberta): il viola pieno era l'unico colore acceso della
pagina e strillava. Lo stesso viola opaco delle chip selezionate. */
.badge--active { background: var(--sel-tint); color: var(--sel-fg); }
/* ...tranne su ADMIN, che deve staccarsi dal COACH: sono pochi e il
pieno qui è un accento, non un colore di fondo (2026-08-27).
Il pieno è quello desaturato che usiamo già per le superfici piene
(bottone primario, giorno attivo): il viola acceso qui strillava. */
.badge--admin { background: var(--purple-mute); color: #fff; }
.badge--ok { background: var(--ok-dim); color: var(--ok); }
.badge--warn { background: var(--warn-dim); color: var(--warn); }
.badge--dim { background: var(--surface-2); color: var(--muted); }
.badge-row {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
min-width: 0;
}
/* ── Card ─────────────────────────────────────────────────────────── */
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: var(--s4) var(--s4);
margin-bottom: var(--s3);
}
.card > h2.section-title:first-child { margin-top: 0; }
h2.section-title {
font-size: var(--fs-xs);
font-weight: 600;
text-transform: uppercase;
color: var(--purple-hi);
margin: var(--s5) 0 var(--s2);
}
/* sezioni raggiungibili da un'ancora (#coach/#video/#score dalla card):
la topbar sticky è 60px, il titolo non ci deve finire sotto */
.anchor { scroll-margin-top: 76px; }
.page-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--s3);
margin-bottom: var(--s4);
}
.page-header h1.display { margin-bottom: 0; }
/* ── Form ─────────────────────────────────────────────────────────── */
input:where([type="text"],[type="password"],[type="email"],[type="url"],
[type="number"],[type="date"],[type="time"],[type="search"],[type="tel"]),
select, textarea {
width: 100%;
min-height: var(--tap);
padding: 10px var(--s4);
font-family: var(--font);
font-size: var(--fs-input); /* 16px: niente zoom iOS */
background-color: var(--surface-2);
color: var(--text);
border: 1px solid var(--line);
border-radius: var(--r-sm);
outline: none;
transition: border-color var(--speed), background-color var(--speed);
}
textarea { min-height: 88px; line-height: 1.5; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--purple); }
::placeholder { color: var(--muted); opacity: .7; }
select {
appearance: none;
-webkit-appearance: none;
padding-right: 40px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
cursor: pointer;
/* un'opzione più lunga della colonna si clippa sul bordo vivo
(«Codificata — Rounds F»): con l'ellissi almeno si vede che continua */
text-overflow: ellipsis;
}
option { background: var(--surface-2); color: var(--text); }
/* Safari su iPhone non fa restringere input[type=date] sotto la larghezza
che si sceglie da sé: width 100% viene ignorato, il campo esce dal foglio
e si porta dietro in orizzontale tutta la schermata (visto sul modulo del
massimale). Spegnendo l'aspetto nativo il campo rispetta la larghezza, e
toccandolo si apre lo stesso il selettore a rotella. */
input[type="date"] {
appearance: none;
-webkit-appearance: none;
max-width: 100%;
text-align: left;
padding-right: 42px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 13px center;
}
/* Il pulsantino del calendario è un pezzo di Chrome che su iPhone non
esiste: per questo lì l'icona spariva. Adesso il calendario lo
disegniamo noi qui sopra, uguale su tutti, e quello di Chrome resta al
suo posto ma invisibile, così sul Mac si continua ad aprire il
selettore toccando l'icona. */
/* Su iPhone il valore della data sta dentro un suo pseudo-elemento, e
il text-align del campo non lo tocca: senza questa riga la data resta
centrata anche se il campo dice sinistra. */
input[type="date"]::-webkit-date-and-time-value {
text-align: left;
}
input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
width: 24px;
height: 24px;
margin: 0;
cursor: pointer;
}
::-webkit-calendar-picker-indicator {
filter: invert(.75);
cursor: pointer;
}
input[type="search"]::-webkit-search-cancel-button { filter: invert(.6); }
input[type="checkbox"], input[type="radio"] {
accent-color: var(--purple);
width: 18px; height: 18px;
}
.field { margin-bottom: var(--s4); }
.field > label {
display: block;
font-size: var(--fs-xs);
font-weight: 600;
text-transform: uppercase;
color: var(--muted);
margin-bottom: var(--s2);
}
.field .hint { margin-top: var(--s1); font-size: var(--fs-xs); color: var(--muted); }
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: var(--s3);
align-items: start;
}
.checkbox-field {
display: flex;
align-items: center;
gap: var(--s2);
min-height: var(--tap);
font-size: var(--fs-sm);
cursor: pointer;
}
.checkbox-field input { width: 18px; flex: 0 0 auto; }
.checkbox-inline { display: inline-flex; margin-right: var(--s3); min-height: 32px; }
.form-actions { margin-top: var(--s5); display: flex; gap: var(--s2); flex-wrap: wrap; }
.search-input { max-width: 380px; }
/* ── Flash ────────────────────────────────────────────────────────── */
.flash {
padding: var(--s3) var(--s4);
border-radius: var(--r-sm);
border: 1px solid;
margin-bottom: var(--s3);
font-size: var(--fs-sm);
}
/* ⚠️ Come i toast: niente verde né rosso. Restano su fondo scuro, e solo
errori e avvertimenti portano il filo lilla. Questi si vedono ancora
inline sulle pagine di accesso, dove il messaggio deve stare sopra ai
campi e non può scappare in fondo allo schermo. */
.flash { background: var(--surface-2); border-color: var(--line); color: var(--text); }
.flash-error, .flash-warning { border-color: rgba(var(--brand-light-rgb), .55); }
/* ── Impersonazione: banner admin «stai navigando come X» ──────────────
Primo elemento del body in entrambe le base. NON sticky di proposito:
la home a timeline ha già la sua testata sticky a top:0 (e nasconde la
topbar), le due si sovrapporrebbero. Si esce anche col logout. */
/* 2026-08-28 (Roberta): via il giallo. Non è un avviso, è uno STATO
dell'app — stai guardando come un altro — e il giallo da noi vuol dire
«c'è una cosa da sapere» sulle pastiglie. Fondo neutro, il nome in
grassetto, e «Esci» tenuto a destra sulla stessa riga: da 109 punti di
altezza a 61, e la frase sta lo stesso su due righe. */
.vis-bar {
display: flex;
align-items: flex-start;
gap: var(--s3);
flex-wrap: nowrap;
padding: var(--s2) var(--s4);
background: var(--surface-2);
border-bottom: 1px solid var(--line);
color: var(--body-text);
font-size: var(--fs-sm);
}
/* ⚠️ la frase si prende quello che avanza e il bottone non si stringe:
senza, «Esci» andava a capo sotto la frase */
.vis-bar > form, .vis-bar > .btn { flex: none; }
/* ⚠️ 2026-08-28: era un inline-flex, quindi l'icona, «Stai impersonando»,
il nome e il resto della frase diventavano quattro BLOCCHI affiancati,
ognuno che andava a capo per conto suo: sul telefono la frase si
spezzava in colonne. È una frase: deve scorrere come tale, con
l'icona dentro il testo. */
.vis-bar-txt { display: block; flex: 1; min-width: 0; }
.vis-bar-txt b { color: var(--text); font-weight: 700; }
.vis-bar-txt .icon { vertical-align: -3px; margin-right: var(--s2); color: var(--muted); }
.vis-bar .btn { color: var(--btn-sec-fg); }
/* ── Toast snackbar (mobile): i flash ri-emessi da toast.js sopra la
bottom nav; su desktop la region serve solo ai toast generati da JS ── */
#toast-region {
position: fixed;
left: var(--s4);
right: var(--s4);
bottom: calc(var(--s4) + env(safe-area-inset-bottom));
z-index: 110; /* sopra la bottom nav (100) */
display: flex;
flex-direction: column;
gap: var(--s2);
pointer-events: none;
}
/* ⚠️ con una sheet aperta toast.js sposta la region DENTRO il