/* ============================================================ MONARCH HOARD — TOKENS Il vocabolario visivo di tutto il progetto. ------------------------------------------------------------ DOVE VA: static/css/tokens.css (sostituisce il file attuale) COME SI CARICA: è il PRIMO foglio di stile di ogni pagina, prima di components.css, site.css e style.css. Se lo metti dopo, non ha effetto. ------------------------------------------------------------ FASE I1 — UNA SOLA PALETTA Prima c'erano due mondi: il sito BLU e l'app VIOLA. Da adesso il colore è UNO SOLO: il blu del sito. Le due classi restano (theme-site e theme-app) e continuano a funzionare esattamente come prima, quindi NON va toccato nessun template. Semplicemente, adesso contengono gli stessi valori. ------------------------------------------------------------ NOVITÀ DELLA FASE I2 — I "GEMELLI RGB" Un colore scritto come #2e7dff va benissimo finché lo usi pieno. Ma nel CSS dell'app i colori sono quasi sempre TRASPARENTI: bordi al 22%, bagliori al 6%, sfondi al 72%. Per scrivere una trasparenza serve la forma "46, 125, 255", non "#2e7dff": è il motivo per cui esisteva già --accent-rgb. In I2 servono le stesse trasparenze anche per gli altri colori (fondali, testi, oro, rosso, verde), quindi ognuno ha adesso il suo gemello --*-rgb. Non è una seconda paletta da tenere allineata a mano: sono gli STESSI identici colori, scritti nell'altra forma. Se un giorno cambi #2e7dff, cambia anche 46, 125, 255 subito sotto. COME SI USANO border: 1px solid rgba(var(--accent-rgb), 0.22); background: rgba(var(--bg-soft-rgb), 0.72); ------------------------------------------------------------ ⚠️ QUESTO FILE DA SOLO NON BASTA style.css (il foglio dell'app) va bonificato sezione per sezione: se ne occupa tools/fase_i2_colori.py, che sostituisce i colori scritti a mano con questi token. ============================================================ */ /* ============================================================ 1. QUELLO CHE NON CAMBIA MAI Forme, caratteri e misure sono identici ovunque: è proprio questo che fa sembrare sito e app la stessa cosa. ============================================================ */ :root { /* --- Caratteri --- */ --font-title: "Orbitron", "Segoe UI", sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "Consolas", "Menlo", monospace; /* --- Angoli arrotondati --- */ --radius: 14px; /* riquadri grandi: pannelli, modale */ --radius-sm: 8px; /* bottoni, campi di testo */ --radius-pill: 999px; /* badge e chip: completamente tondi */ /* --- Larghezza massima del contenuto --- */ --maxw: 1160px; /* --- Velocità delle animazioni --- */ --transition: .22s ease; --transition-slow: .45s ease; /* --- Colori di servizio: significano la stessa cosa ovunque --- */ --gold: #ffd166; /* gradazione, evidenza */ --danger: #ff4d6d; /* eliminazione, errore, venduto */ --success: #4dff9b; /* conferma, disponibile */ /* Gemelli RGB dei tre colori qui sopra. Servono per bordi e bagliori trasparenti, es. rgba(var(--gold-rgb), 0.45) */ --gold-rgb: 255, 209, 102; --danger-rgb: 255, 77, 109; --success-rgb: 77, 255, 155; /* --- Altezze dei comandi --- 48px è la misura comoda da toccare col dito sul telefono: vale sia per i bottoni del sito sia per quelli dell'app. --- */ --h-control: 48px; --h-control-sm: 40px; } /* ============================================================ 2. LA PALETTA — BLU ------------------------------------------------------------ Un blocco solo, applicato a entrambi i temi. Se un giorno vuoi ridifferenziare i due mondi, stacca body.theme-app da questo elenco e dagli valori suoi: tutto il resto del progetto si adegua da solo, perché legge solo questi nomi e mai i colori veri. ⚠️ OGNI COLORE HA IL SUO GEMELLO RGB SUBITO SOTTO. Se ne cambi uno, cambia anche l'altro: sono lo stesso colore scritto in due modi. ============================================================ */ body.theme-site, body.theme-app { /* --- Fondali --- */ --bg: #050a16; --bg-rgb: 5, 10, 22; --bg-soft: #0a1220; --bg-soft-rgb: 10, 18, 34; --bg-elevated: #0f1b2e; --bg-elevated-rgb: 15, 27, 46; --panel: rgba(10, 18, 34, 0.92); --panel-strong: rgba(16, 26, 46, 0.95); /* --- Colore principale --- */ --accent: #2e7dff; --accent-rgb: 46, 125, 255; --accent-soft: #7fb4ff; --accent-soft-rgb: 127, 180, 255; --accent-deep: #1846a8; --accent-deep-rgb: 24, 70, 168; /* --- Testo --- */ --text: #dbe7ff; --text-rgb: 219, 231, 255; --text-muted: #8fa3c4; --text-muted-rgb: 143, 163, 196; --text-dim: #6c7d9c; --text-dim-rgb: 108, 125, 156; /* --- Bordi --- */ --border: rgba(var(--accent-rgb), 0.20); --border-strong: rgba(var(--accent-rgb), 0.45); /* --- Ombre e bagliore --- */ --shadow: 0 18px 45px rgba(0, 0, 0, 0.45); --glow: 0 0 18px rgba(var(--accent-rgb), 0.28); } /* ============================================================ 3. PONTE VERSO I VECCHI NOMI ------------------------------------------------------------ Il CSS dell'app usa ancora --bg-color, --accent-color, --text-color, --panel-bg, --danger-red. Qui li facciamo puntare ai nomi nuovi. Risultato: le sezioni di style.css non ancora bonificate continuano a funzionare esattamente come prima, ma il colore vero arriva ormai da qui. ⚠️ Questo blocco è TEMPORANEO: sparirà a fine Fase I2, quando style.css userà direttamente i nomi nuovi. ============================================================ */ body.theme-site, body.theme-app { --bg-color: var(--bg); --panel-bg: var(--panel); --panel-bg-strong: var(--panel-strong); --accent-color: var(--accent); --text-color: var(--text); --danger-red: var(--danger); } /* ============================================================ 4. RETE DI SICUREZZA ------------------------------------------------------------ Se una pagina si dimenticasse la classe sul , senza queste righe resterebbe senza colori: testo nero su fondo bianco. Adesso che il colore è uno solo, il ripiego è semplicemente lo stesso. ============================================================ */ body:not(.theme-site):not(.theme-app) { --bg: #050a16; --bg-rgb: 5, 10, 22; --bg-soft: #0a1220; --bg-soft-rgb: 10, 18, 34; --bg-elevated: #0f1b2e; --bg-elevated-rgb: 15, 27, 46; --panel: rgba(10, 18, 34, 0.92); --panel-strong: rgba(16, 26, 46, 0.95); --accent: #2e7dff; --accent-rgb: 46, 125, 255; --accent-soft: #7fb4ff; --accent-soft-rgb: 127, 180, 255; --accent-deep: #1846a8; --accent-deep-rgb: 24, 70, 168; --text: #dbe7ff; --text-rgb: 219, 231, 255; --text-muted: #8fa3c4; --text-muted-rgb: 143, 163, 196; --text-dim: #6c7d9c; --text-dim-rgb: 108, 125, 156; --border: rgba(var(--accent-rgb), 0.20); --border-strong: rgba(var(--accent-rgb), 0.45); --shadow: 0 18px 45px rgba(0, 0, 0, 0.45); --glow: 0 0 18px rgba(var(--accent-rgb), 0.28); --bg-color: var(--bg); --panel-bg: var(--panel); --panel-bg-strong: var(--panel-strong); --accent-color: var(--accent); --text-color: var(--text); --danger-red: var(--danger); }