/* ========================================================================== v3 — LA HOME, RIFATTA ========================================================================== COS'E' E COSA NON E'. Non e' un livello sopra v2. Il primo tentativo di v3 fallì proprio per questo: le regole si sommavano a quelle di v2 e le due si annullavano a vicenda, quindi non cambiava niente e non si capiva perche'. Qui il rapporto e' diverso: dentro #view-home comanda QUESTO file, e le regole di v2 che riguardano la home vengono spente in fondo. Fuori dalla home v2 resta intatto, quindi le altre schermate non si toccano. Il piano e' rifare una schermata per volta con questo criterio. Quando sono tutte passate, v2.css si cancella. IL LINGUAGGIO, ripreso dalla landing: - font di sistema, lo stesso della landing - una sola superficie, piu' CHIARA del fondo e con bordo netto: e' cio' che fa leggere una card come un oggetto invece che come testo sul nero - il colore della chain su DUE cose: bottone principale e cifra dei rimborsi. Quando brilla tutto, non risalta niente - una sola curva di movimento - misure multiple di 4 ========================================================================== */ /* I TOKEN STANNO SU :root, NON SU #view-home. Erano dichiarati sul contenitore della home, quindi esistevano solo li' dentro: qualunque regola scritta per il resto del sito che provasse a usare var(--v3-panel) riceveva una variabile non definita e cadeva sul valore di ripiego. E' il motivo per cui il linguaggio della home non si e' mai potuto estendere altrove senza copiare i colori a mano. Su :root valgono ovunque; #view-home continua a leggerli per ereditarieta', quindi la home non cambia di una virgola. */ :root{ --v3-panel:#131518; --v3-panel-2:#191c20; --v3-line:#23272c; --v3-txt:#eef1f4; --v3-dim:#98a1ab; /* 3,50:1 su --v3-panel-2. Ci vivono i nomi estesi dei token nel terminale e i sottotitoli delle colonne: schiarito fino a 4,6, stessa tinta. */ --v3-mute:#7e868f; --v3-up:#3ecf8e; --v3-down:#ef4a5c; --v3-ease:cubic-bezier(.16,1,.3,1); --v3-mono:ui-monospace,"SF Mono",Menlo,monospace; } #view-home{ color:var(--v3-txt); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif; letter-spacing:0; line-height:1.5; } /* ---- 1. LE DUE COLONNE ---- A sinistra cosa fa il prodotto, a destra cosa sta succedendo adesso. Da solo, il token in evidenza dice il secondo ma non il primo. */ #view-home .split{ display:grid;grid-template-columns:1fr 1.15fr;gap:20px; align-items:stretch;margin-bottom:16px; } #view-home .pitch{display:flex;flex-direction:column;justify-content:center;padding:4px;} #view-home .pitch h1{ font-size:clamp(30px,3.9vw,46px);font-weight:600; letter-spacing:-.042em;line-height:1.05;color:var(--v3-txt);margin:0; } #view-home .pitch p{font-size:14.5px;color:var(--v3-dim);margin-top:16px;max-width:46ch;line-height:1.6;} #view-home .pitch-acts{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap;} #view-home .btn-pitch{ display:inline-flex;align-items:center;padding:11px 18px;border-radius:10px; font-size:14px;font-weight:600;text-decoration:none;cursor:pointer; border:1px solid var(--v3-line);background:var(--v3-panel);color:var(--v3-txt); transition:background .3s var(--v3-ease),filter .3s var(--v3-ease); } #view-home .btn-pitch:hover{background:var(--v3-panel-2);} /* L'unico bottone pieno della vista: quello nella barra in alto e' la stessa azione, e due inviti diversi allo stesso gesto si annullano. */ #view-home .btn-pitch.primary{ background:var(--green);color:var(--on-green);border-color:var(--green); } #view-home .btn-pitch.primary:hover{filter:brightness(1.07);} /* ---- 2. IL TOKEN IN EVIDENZA ---- */ /* La forma della griglia sta qui; superficie, bordo e raggio sono definiti una volta sola in 7c, per non avere due regole che si contendono lo stesso elemento. */ #view-home .feature{display:grid;grid-template-columns:1fr 290px;margin:0;} #view-home .feature.hidden{display:none;} #view-home .feat-main{ display:block;padding:18px 20px;text-decoration:none;color:inherit; /* L'unico fondo tinto della vista: e' cio' che vogliamo far guardare. */ background:radial-gradient(120% 150% at 0% 0%,rgba(var(--green-rgb),.08),transparent 56%); } #view-home .feat-k{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--green);font-weight:600;} #view-home .feat-id{display:flex;align-items:center;gap:13px;margin-top:14px;} #view-home .feat-av{ width:42px;height:42px;border-radius:50%;flex-shrink:0; background:var(--v3-panel-2) center/cover; display:flex;align-items:center;justify-content:center; font-size:16px;font-weight:600;color:var(--v3-txt); } #view-home .feat-name{font-weight:600;line-height:1.1;} /* dimensione in 7c */ #view-home .feat-sub{font-family:var(--v3-mono);font-size:11px;color:var(--v3-mute);margin-top:11px;} #view-home .feat-nums{display:flex;gap:28px;margin-top:15px;} #view-home .feat-nums b{ display:block;font-family:var(--v3-mono);font-size:18px;font-weight:600; letter-spacing:-.03em;color:var(--v3-txt); } #view-home .feat-nums span{ display:block;font-size:8.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--v3-mute);margin-top:5px; } /* Sotto i sei punti app.js nasconde il grafico: con quattro scambi la curva e' una zeta spezzata che sembra un errore di disegno, non un andamento. */ #view-home .feat-chart{position:relative;height:104px;margin-top:16px;} #view-home .feat-chart.poco,#view-home .feat-chart:empty{display:none;} #view-home .feat-chart svg{position:absolute;inset:0;width:100%;height:100%;} #view-home .feat-bar{height:4px;border-radius:999px;background:rgba(255,255,255,.07);margin-top:16px;overflow:hidden;} #view-home .feat-bar i{display:block;height:100%;background:var(--green);border-radius:999px;transition:width .8s var(--v3-ease);} #view-home .feat-note{font-family:var(--v3-mono);font-size:10.5px;color:var(--v3-mute);margin-top:9px;} /* L'attivita' dal vivo: si vede che qualcuno sta comprando ADESSO, e nessun numero fermo puo' comunicarlo. */ #view-home .feat-side{border-left:1px solid var(--v3-line);padding:16px 14px;min-width:0;} #view-home .feat-side .k{ display:flex;align-items:center;gap:7px; font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--v3-mute); } #view-home .feed-pulse{ width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0; animation:v3pulse 2.2s ease-in-out infinite; } @keyframes v3pulse{0%,100%{opacity:1}50%{opacity:.25}} #view-home .ev{ display:flex;align-items:center;gap:9px;padding:9px 0; border-bottom:1px solid rgba(255,255,255,.045);text-decoration:none;color:inherit; } #view-home .ev:last-child{border-bottom:0;} #view-home .ev-av{ width:22px;height:22px;border-radius:6px;flex-shrink:0; background:var(--v3-panel-2) center/cover; display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600; } #view-home .ev-b{font-family:var(--v3-mono);font-size:8px;font-weight:600;letter-spacing:.06em;padding:2px 5px;border-radius:6px;flex-shrink:0;} #view-home .ev-b.buy{color:var(--v3-up);background:rgba(62,207,142,.13);} #view-home .ev-b.sell{color:var(--v3-down);background:rgba(239,74,92,.13);} #view-home .ev-b.new{color:var(--green);background:rgba(var(--green-rgb),.13);} #view-home .ev-n{font-size:11.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #view-home .ev-v{margin-left:auto;font-family:var(--v3-mono);font-size:10.5px;color:var(--v3-dim);flex-shrink:0;} /* ---- 3. LE CIFRE ---- */ #view-home .market-bar{ background:var(--v3-panel);border:1px solid var(--v3-line); border-radius:14px;padding:0;margin:0 0 14px;text-align:left; box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none; } #view-home .market-bar::before{display:none;} #view-home .mb-top{display:none;} #view-home .market-stats{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); margin:0;padding:0;border:0;max-width:none;background:transparent; } #view-home .ms-item{display:flex;flex-direction:column;padding:15px 18px;text-align:left;border:0;} #view-home .ms-item + .ms-item{border-left:1px solid var(--v3-line);} #view-home .ms-item dt{ order:1;display:flex;align-items:center;gap:9px;margin:0; font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--v3-mute); } /* L'icona dentro un quadrato con la tinta della chain: grigia accanto a un'etichetta grigia sparirebbe. */ #view-home .ms-item dt svg{ width:24px;height:24px;padding:5.5px;border-radius:7px;box-sizing:border-box; background:rgba(var(--green-rgb),.12);color:var(--green);opacity:1;flex-shrink:0; } #view-home .ms-item dd{ order:2;margin:10px 0 0;font-family:var(--v3-mono);font-size:21px; font-weight:600;letter-spacing:-.035em;color:var(--v3-txt);font-variant-numeric:tabular-nums; } /* L'unico numero colorato: e' cio' che distingue la piattaforma. */ #view-home .ms-item.accent dd{color:var(--green);} /* ---- 4. I MECCANISMI ---- Chiusa non ha contenuto, quindi non deve pesare come un contenitore. */ #view-home .modes{background:transparent;border:0;border-bottom:1px solid var(--v3-line);border-radius:0;margin:0 0 4px;} #view-home .modes summary{list-style:none;cursor:pointer;display:flex;align-items:center;padding:12px 2px;font-size:12.5px;color:var(--v3-dim);} #view-home .modes summary::-webkit-details-marker{display:none;} #view-home .modes summary:hover{color:var(--v3-txt);} #view-home .modes summary i{ margin-left:auto;width:8px;height:8px; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(45deg);transition:transform .35s var(--v3-ease); } #view-home .modes[open]{background:var(--v3-panel);border:1px solid var(--v3-line);border-radius:12px;margin-bottom:14px;} #view-home .modes[open] summary{padding:13px 16px;} #view-home .modes[open] summary i{transform:rotate(-135deg);} /* Tre per tre, esatte. Con auto-fit le nove voci si disponevano secondo lo spazio disponibile e l'ultima riga restava spaiata, con una o due voci larghe il doppio delle altre. Nove elementi hanno una griglia naturale e conviene imporla. */ #view-home .modes-body{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;padding:4px 16px 16px; } @media (max-width:900px){ #view-home .modes-body{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:560px){ #view-home .modes-body{grid-template-columns:1fr;} } #view-home .mode{padding:12px 14px;border-radius:10px;background:var(--v3-panel-2);} #view-home .tagline{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--green);} #view-home .mode p{font-size:12.5px;color:var(--v3-dim);margin-top:7px;line-height:1.55;} /* ---- 5. FILTRI E LISTA ---- */ #view-home .section-head{display:flex;align-items:center;gap:10px;margin:18px 0 0;} #view-home .section-title{font-size:15px;font-weight:600;letter-spacing:-.02em;} #view-home .feed-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:14px 0 12px;} #view-home .feed-tab{ padding:7px 13px;border-radius:10px;font-size:12.5px;color:var(--v3-dim); background:transparent;border:0;cursor:pointer;font-family:inherit; transition:background .3s var(--v3-ease),color .3s var(--v3-ease); } #view-home .feed-tab:hover{background:rgba(255,255,255,.05);color:var(--v3-txt);} #view-home .feed-tab.active{background:rgba(var(--green-rgb),.14);color:var(--green);} #view-home .tok-panel{border:1px solid var(--v3-line);border-radius:14px;overflow:hidden;background:var(--v3-panel);} #view-home .tok-head{ display:grid;grid-template-columns:minmax(0,2.2fr) 124px 124px 96px 172px 132px; gap:12px;align-items:center;padding:11px 14px; /* A 12px con .09em di spaziatura "MARKET CAP" e "TO BOND" non entravano nella loro colonna e sconfinavano in quella accanto. */ font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--v3-mute); background:var(--v3-panel-2);border-bottom:1px solid var(--v3-line); } #view-home .tok-head > *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #view-home .token-grid{display:flex;flex-direction:column;} /* Griglia e comportamento qui; superficie e bordi in 7d. */ #view-home .tok-row{ display:grid;grid-template-columns:minmax(0,2.2fr) 124px 124px 96px 172px 132px; gap:12px;align-items:center;min-height:0;cursor:pointer; transition:background .3s var(--v3-ease);transform:none; } #view-home .tr-img{ width:36px;height:36px;border-radius:10px;flex-shrink:0; background:var(--v3-panel-2) center/cover; display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;box-shadow:none; } #view-home .tr-num{text-align:right;font-family:var(--v3-mono);font-size:13px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;} #view-home .tr-lbl{display:none;} /* l'etichetta sta in cima alla colonna, non in ogni riga */ #view-home .tr-bar{height:4px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;} #view-home .tr-bar-fill{height:100%;background:var(--green);border-radius:999px;box-shadow:none;} #view-home .empty-state{padding:44px 16px;text-align:center;color:var(--v3-mute);font-size:13px;} /* ---- 6. MOBILE ---- Cinque colonne su 350px darebbero celle da 40px. */ @media (max-width:1080px){ #view-home .split{grid-template-columns:1fr;gap:14px;} #view-home .pitch{padding:0;} #view-home .pitch h1{font-size:clamp(26px,6.4vw,34px);} #view-home .pitch p{font-size:13.5px;max-width:none;} #view-home .feature{grid-template-columns:1fr;} #view-home .feat-side{border-left:0;border-top:1px solid var(--v3-line);} } @media (max-width:860px){ #view-home .market-stats{grid-template-columns:repeat(2,minmax(0,1fr));} #view-home .ms-item:nth-child(3){border-left:0;} #view-home .ms-item:nth-child(n+3){border-top:1px solid var(--v3-line);} #view-home .tok-head{display:none;} #view-home .tok-row{grid-template-columns:1fr auto;gap:6px 12px;padding:12px 14px;} /* Sotto i 900px la riga e' una scheda a due colonne: la curva prende la larghezza intera e sale subito sotto il nome, dove ha piu' spazio di quanto ne avesse in colonna. Gli ordini valgono qui perche' e' qui che la griglia cambia forma. */ /* 30px e non 44: a piena larghezza la curva e' gia' quattro volte piu' lunga che in colonna, e alzarla la faceva diventare l'elemento piu' grande della scheda, sopra al nome del token. */ #view-home .tr-spark{grid-column:1 / -1;order:2;height:30px;margin:0 0 2px;opacity:1;} #view-home .tr-id{order:1;} #view-home .tr-num[data-col="mcap"]{order:3;} #view-home .tr-num[data-col="vol"]{order:4;} #view-home .tr-prog{order:5;} #view-home .tr-ca{order:6;} #view-home .tr-num{text-align:right;font-size:12.5px;} /* Con l'intestazione nascosta le etichette tornano DENTRO la riga: senza, resterebbero quattro numeri di cui non si sa il significato. */ #view-home .tr-lbl{display:block;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--v3-mute);margin-bottom:2px;} #view-home .feat-nums{gap:20px;} #view-home .feat-name{font-size:22px;} } @media (prefers-reduced-motion:reduce){ #view-home *{animation:none!important;transition-duration:.001ms!important;} } /* ========================================================================== 7. SCALA, MOVIMENTO, MATERIALE -------------------------------------------------------------------------- Questa sezione era cresciuta per accumulo: otto ridefinizioni dello stesso selettore, con le ultime che spegnevano le prime. Riscritta consolidata, una regola per elemento — altrimenti fra due giorni nessuno capisce piu' quale valore vince. IL CRITERIO: superfici PIATTE e bordi NETTI. Le sfumature promettono profondita' ma la danno solo se sono coerenti fra loro; qui ognuna andava per conto suo e si notavano come effetto invece di sparire come materiale. ========================================================================== */ /* ---- 7a. IL TITOLO ---- Colore pieno, niente gradiente sul testo: sbiadiva verso destra e "mind." arrivava piu' spento di "Change", che sembra un difetto di resa piu' che una scelta. */ #view-home .pitch h1{ font-size:clamp(36px,5.2vw,68px); letter-spacing:-.048em; line-height:1.02; /* L'ANIMAZIONE E' STATA TOLTA DA QUI. Era una messa a fuoco: da blur(12px) a nitido in 1,1s. Presa da sola era la cosa piu' bella della pagina; il problema e' che v4 ne aveva aggiunta un'altra sullo stesso titolo, con tempi diversi, e le due si sommavano. Il titolo partiva sfocato, si fermava a meta', ripartiva: da fermi non si legge come un ingresso, si legge come una pagina che non ha finito di caricare. L'ingresso ora e' uno solo e sta in v4.css, sezione 19. */ } #view-home .pitch p{font-size:15px;margin-top:18px;} #view-home .btn-pitch{padding:13px 22px;font-size:14.5px;border-radius:11px;} /* La messa a fuoco: e' il gesto piu' riconoscibilmente cinematografico che esista e costa due proprieta'. Tutti animano posizione e opacita', quasi nessuno il fuoco — ed e' il fuoco che il cervello associa a una camera. */ @keyframes v3fuoco{ from{opacity:0;filter:blur(12px);transform:translateY(10px);} to{opacity:1;filter:blur(0);transform:none;} } @keyframes v3sale{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}} /* ---- 7b. L'ENTRATA: TOLTA, ERA LA SECONDA ---- Qui c'erano sei animazioni sfalsate (paragrafo a 140ms, pannello a 180, fascia dei numeri a 300, schede a 380, lista a 440) e giravano a OGNI caricamento, senza condizioni. v4 ne ha poi aggiunte altre, sugli stessi elementi, con altri tempi: due coreografie indipendenti sovrapposte, e nessuna delle due sapeva dell'altra. Il risultato non era "un ingresso ricco", era un blocco che compariva a meta', si fermava e ripartiva — cioe' l'aspetto esatto di una pagina rotta. Ne resta una sola, in v4.css sezione 19: due movimenti, mezzo secondo. */ /* ---- 7c. IL TOKEN IN EVIDENZA ---- Deve comandare la pagina: se pesa quanto la lista sotto non e' in evidenza, e' solo il primo della fila. Superficie piatta, bordo unico. */ #view-home .feature{ background:var(--v3-panel); border:1px solid var(--v3-line); border-radius:18px; box-shadow:none; overflow:hidden; } #view-home .feat-main{padding:26px 28px;background:transparent;} #view-home .feat-k{ display:inline-flex;align-items:center;gap:7px; padding:5px 11px;border-radius:999px; background:rgba(var(--green-rgb),.11); border:1px solid rgba(var(--green-rgb),.26); } /* Il pallino pulsante: dice che il dato e' vivo, non una didascalia. */ #view-home .feat-k::before{ content:"";width:5px;height:5px;border-radius:50%; background:var(--green);animation:v3pulse 2.2s ease-in-out infinite; } #view-home .feat-av{ width:56px;height:56px;font-size:21px; box-shadow:0 0 0 1px rgba(255,255,255,.07); } #view-home .feat-name{ font-size:32px;letter-spacing:-.032em;color:var(--v3-txt);background:none; } #view-home .feat-nums{gap:36px;margin-top:20px;} #view-home .feat-nums b{font-size:22px;} #view-home .feat-bar{height:6px;} #view-home .feat-bar i{background:var(--green);box-shadow:none;} #view-home .feat-side{ background:transparent; border-left:1px solid var(--v3-line); } /* ---- 7d. LA LISTA: UNA TABELLA, NON CARD DENTRO UNA CARD ---- Il pannello aveva un bordo e ogni riga ne aveva un altro: due cornici annidate che agli angoli non combaciano mai. Un contenitore solo, righe separate da una linea. */ #view-home .tok-panel{ background:var(--v3-panel); border:1px solid var(--v3-line); border-radius:14px;overflow:hidden;box-shadow:none; } #view-home .tok-row{ padding:18px;background:transparent; border:0;border-bottom:1px solid var(--v3-line);border-radius:0; box-shadow:none;margin:0; } #view-home .tok-row:last-child{border-bottom:0;} #view-home .tok-row:hover{background:var(--v3-panel-2);} #view-home .tr-img{ width:46px;height:46px;border-radius:12px;font-size:16px; box-shadow:0 0 0 1px rgba(255,255,255,.06); transition:transform .4s var(--v3-ease); } #view-home .tok-row:hover .tr-img{transform:scale(1.04);} #view-home .tr-title,#view-home .tr-name > div:first-child{ font-size:15.5px;font-weight:600;letter-spacing:-.012em; } #view-home .tr-num{font-size:14px;} /* La barra a 4px su fondo scuro spariva, ed e' il dato che dice quanto manca alla migrazione: il motivo per comprare adesso invece che dopo. */ #view-home .tr-bar{height:6px;background:rgba(255,255,255,.09);} #view-home .tr-bar-fill{background:var(--green);box-shadow:none;} /* ---- 7e. LE CIFRE ---- */ /* Piatte davvero: la striscia ereditava ancora un gradiente e un alone dalle regole dell'intestazione, che nel frattempo non e' piu' un'intestazione ma una riga di dati. */ #view-home .market-bar{ background:var(--v3-panel); background-image:none; box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none; } #view-home .market-bar::before, #view-home .market-bar::after{display:none;} #view-home .market-stats, #view-home .ms-item{background:transparent;background-image:none;box-shadow:none;} #view-home .ms-item{padding:20px 22px;} #view-home .ms-item dd{font-size:26px;} #view-home .ms-item dt svg{width:28px;height:28px;padding:6.5px;border-radius:10px;} #view-home .modes[open]{background:var(--v3-panel);box-shadow:none;} /* ---- 7f. IL FONDO ---- Pulito. Le masse di luce colorate facevano da alone dietro le card e ne sporcavano i bordi: la profondita' la da' gia' l'orizzonte animato di starfield.js, che e' un segno solo e coerente. Qui resta una vignettatura in basso, che chiude la pagina senza colorarla. body::before e NON body::after: quest'ultimo in v2.css porta la grana su tutta l'applicazione, e sovrascriverlo la cancellerebbe ovunque. */ /* La vignettatura sta SOTTO il canvas, non sopra. Entrambi avevano z-index 0, ma body::before viene dipinto dopo e copriva l'orizzonte animato: da qui "lo sfondo e' ancora uguale". Ora sta a -1, e il canvas torna l'elemento piu' visibile del fondo. */ /* La vignettatura la disegna ora il canvas, insieme alle particelle: averla anche qui significava scurire due volte gli stessi bordi. */ body::before{display:none;} /* Il fondo era #020304, cioe' nero pieno: su un nero cosi' assoluto una particella al 10% di opacita' non ha su cosa staccarsi, e la scena resta invisibile qualunque cosa si disegni. Un grigio molto scuro da' alle particelle un fondo su cui esistere, e a occhio nudo resta nero. */ html,body{background:#0a0c0f;} #starfield-bg{z-index:0;} /* .app SENZA z-index. Gliel'avevo messo a 2 per tenerlo sopra il campo di particelle, ma cosi' .app diventa un contesto di sovrapposizione: da quel momento il z-index 60 della sidebar vale solo DENTRO .app, mentre lo sfondo scuro del menu — che nel markup sta fuori — resta sopra a tutto. Da qui il menu che si apriva coperto da un alone nero. Basta position:relative: il canvas e' in position:fixed con z-index 0, e qualunque elemento posizionato senza z-index gli sta comunque sopra. */ .app{position:relative;} @media (max-width:1080px){ #view-home .feature{border-radius:16px;} #view-home .feat-main{padding:20px;} #view-home .feat-name{font-size:25px;} #view-home .feat-av{width:48px;height:48px;font-size:18px;} #view-home .feat-side{border-left:0;border-top:1px solid var(--v3-line);} #view-home .tok-row{padding:14px;} #view-home .tr-img{width:40px;height:40px;} #view-home .ms-item{padding:15px 16px;} #view-home .ms-item dd{font-size:21px;} } @media (prefers-reduced-motion:reduce){ #view-home .pitch h1,#view-home .pitch p,#view-home .pitch-acts, #view-home .feature,#view-home .market-bar, #view-home .feed-tabs,#view-home .tok-panel{animation:none;} } /* ========================================================================== 8. LE SEZIONI IN FONDO E IL PIEDE -------------------------------------------------------------------------- Erano rimaste indietro: "How it works" e le tre card sotto avevano ancora il trattamento della versione precedente, con sfumature e raggi diversi da tutto il resto. Su una pagina in cui ogni superficie e' piatta e con lo stesso bordo, si notavano come pezzi di un altro sito. ========================================================================== */ #view-home .how{margin-top:36px !important;} #view-home .section-title{font-size:16px;font-weight:600;letter-spacing:-.022em;} #view-home .how-grid{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px; } #view-home .how-step, #view-home .feature-card{ background:var(--v3-panel); border:1px solid var(--v3-line); border-radius:14px; padding:20px; box-shadow:none; background-image:none; } #view-home .how-step h4, #view-home .feature-card h4{ font-size:14.5px;font-weight:600;letter-spacing:-.014em; color:var(--v3-txt);margin-top:12px; } #view-home .how-step p, #view-home .feature-card p{ font-size:12.5px;color:var(--v3-dim);line-height:1.6;margin-top:7px; } /* Il numero del passo: un cerchio pieno accanto a un titolo e' l'unico segno che dice "questa e' una sequenza" senza scriverlo. */ #view-home .step-num{ width:26px;height:26px;border-radius:10px; display:flex;align-items:center;justify-content:center; font-family:var(--v3-mono);font-size:12px;font-weight:600; background:rgba(var(--green-rgb),.12);color:var(--green); border:1px solid rgba(var(--green-rgb),.24); } #view-home .feature-row{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px; } #view-home .feature-ico{ width:34px;height:34px;border-radius:10px; display:flex;align-items:center;justify-content:center; background:rgba(var(--green-rgb),.10);color:var(--green); border:1px solid rgba(var(--green-rgb),.20); } #view-home .feature-ico svg{width:17px;height:17px;} /* Il piede: una linea e tre voci, senza riquadro. Un contenitore con bordo in fondo alla pagina compete con le card sopra, e li' non c'e' niente da contenere. */ /* Il piede sta FUORI da .page, quindi non ereditava il max-width centrato che ho dato al contenuto: restava incollato a sinistra mentre tutto il resto era al centro. La stessa larghezza e lo stesso centraggio, applicati qui. */ .site-footer{ background:transparent !important; border:0 !important;border-top:1px solid var(--hairline) !important; border-radius:0 !important;box-shadow:none !important; max-width:1360px; margin:32px auto 0 !important; padding:22px 20px !important; } @media (max-width:1000px){ /* Sotto i 1000px il contenuto non e' piu' centrato in un contenitore stretto, quindi al piede basta lo stesso respiro laterale delle pagine. */ .site-footer{margin:24px 0 0 !important;padding:20px 14px !important;} } @media (max-width:900px){ #view-home .how-grid, #view-home .feature-row{grid-template-columns:1fr;} #view-home .how-step, #view-home .feature-card{padding:16px;} } /* ========================================================================== 9. IL MENU SU MOBILE -------------------------------------------------------------------------- Non si leggeva per un motivo preciso: il cassetto usa --bg-1, che sul tema BNB vale #080807, cioe' quasi lo stesso colore del fondo dietro. Aperto, sembrava che il testo galleggiasse sulla pagina invece di stare su un pannello, e le voci si confondevano con il contenuto sotto. ========================================================================== */ @media (max-width:1000px){ .sidebar{ /* Pannello nettamente piu' chiaro del fondo, con un bordo visibile: e' cio' che lo fa leggere come un cassetto sopra la pagina. */ /* BUG FIX — in tema CHIARO il marchio "Archimemes" spariva. Questi tre colori erano scritti a mano (#15181c, #2a3038) invece che a variabile, e con !important: il cassetto restava NERO anche sul tema chiaro. Le voci del menu si salvavano perche' avevano anche loro un colore fisso, chiaro. Il marchio no: .logo non dichiara color, quindi eredita --text, che sul chiaro vale quasi nero. Nero su nero. Contrasto misurato: 1.02 — invisibile, non "poco leggibile". E' lo stesso difetto del gradiente bianco su bianco e dei loghi light identici ai dark: un colore fissato dove serviva una variabile. --v3-panel e --v3-line ora esistono anche sul chiaro (sezione 9e), quindi il cassetto segue il tema da solo. */ background:var(--v3-panel) !important; backdrop-filter:none !important;-webkit-backdrop-filter:none !important; border-right:1px solid var(--v3-line) !important; /* Il cassetto scorre per conto suo se le voci superano lo schermo, e overscroll-behavior impedisce che arrivato in fondo il gesto passi alla pagina sotto: e' l'altra meta' del "si muove lo sfondo". */ overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; /* Sul chiaro un'ombra al 90% di nero diventa una macchia grigia: il cassetto e' bianco su fondo bianco, gli basta molto meno. */ box-shadow:24px 0 60px -20px rgba(0,0,0,.45); width:284px;max-width:86vw; } /* Lo sfondo dietro va scurito davvero, o il contenuto continua a competere con il menu per l'attenzione. */ /* Solo colore, niente sfocatura: sfocare l'intera pagina dietro il cassetto e' l'operazione piu' costosa che un telefono possa fare mentre qualcosa scorre, e a schermo il guadagno e' nullo con uno sfondo gia' al 78%. */ /* z-index espliciti su ENTRAMBI: il cassetto sopra, lo sfondo sotto. Erano 50 e 60 dichiarati altrove, e bastava un contesto di sovrapposizione creato da un antenato per invertirli. Ripeterli qui costa due righe e rende il difetto irripetibile. */ .backdrop{background:rgba(0,0,0,.82) !important;z-index:50 !important;} .sidebar{z-index:60 !important;} /* Il marchio: colore ESPLICITO invece che ereditato. Era l'unica voce del cassetto senza, ed e' esattamente per questo che era l'unica a sparire. */ .sidebar .logo{color:var(--v3-txt);} .sidebar .logo small{color:var(--green);} .sidebar .side-link{ padding:11px 12px;font-size:14px;border-radius:10px; color:var(--v3-dim); } .sidebar .side-link.active{ background:rgba(var(--green-rgb),.14); color:var(--v3-txt); } .sidebar .side-label{ font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--v3-mute);padding:16px 12px 8px; } /* Le reti: il pallino del colore e il nome leggibile. Erano allo stesso grigio delle etichette e non si distinguevano dai titoletti di sezione. */ .sidebar .side-chain, .sidebar .chain-opt{font-size:13.5px;color:var(--v3-dim);padding:10px 12px;} .sidebar .side-foot{ border-top:1px solid var(--v3-line);margin-top:14px;padding-top:14px; font-size:11px;color:var(--v3-mute); } /* Il bottone di lancio in fondo al cassetto: e' l'azione principale e deve restare l'elemento piu' luminoso anche qui. */ .sidebar .side-cta,.sidebar .btn-launch{ background:var(--chain-grad-btn,var(--green));color:var(--on-green); border:0;border-radius:11px;padding:12px;font-weight:600; } } /* ========================================================================== 10. L'ORDINE DELLE CIFRE -------------------------------------------------------------------------- Su DESKTOP la striscia sta sotto entrambe le colonne, a tutta larghezza: e' una riga di totali e chiude il blocco superiore. Su MOBILE sale subito dopo i bottoni, PRIMA del token in evidenza. Il motivo: impilando le colonne, la card del token e' alta e spinge i totali sotto la piega, dove nessuno li vede. Sono la prima prova che la piattaforma esiste e ha dei numeri, quindi devono arrivare subito. order funziona perche' .split e' una griglia: si riordina la resa senza toccare il markup, che resta uno solo per entrambi i casi. ========================================================================== */ #view-home .split{grid-template-columns:1fr 1.15fr;} #view-home .split > .pitch {grid-column:1;grid-row:1;} #view-home .split > .feature {grid-column:2;grid-row:1;} /* La striscia occupa entrambe le colonne sulla riga successiva. */ /* margin a zero: dentro la griglia lo spazio lo da' gia' il gap, e il margine di 14px definito piu' sopra si sommava lasciando un vuoto doppio. */ #view-home .split > .market-bar {grid-column:1 / -1;grid-row:2;margin:0;} @media (max-width:1080px){ #view-home .split{display:flex;flex-direction:column;} #view-home .split > .pitch {order:1;} #view-home .split > .market-bar {order:2;margin:0;} /* subito sotto i bottoni */ #view-home .split > .feature {order:3;} } /* ========================================================================== 11. LA FILA DELLE CHAIN -------------------------------------------------------------------------- Il selettore in alto a destra c'e' ancora, ma da solo presuppone che chi arriva sappia gia' di doverlo cercare. Qui le reti si vedono senza cercarle, ed e' anche il modo piu' diretto per dire che la piattaforma e' multichain senza scriverlo da nessuna parte. ========================================================================== */ #view-home .chain-row{ display:flex;gap:6px;flex-wrap:wrap;align-items:center; margin:18px 0 0; } #view-home .chain-pill{ display:inline-flex;align-items:center;gap:8px; padding:8px 13px;border-radius:999px;cursor:pointer; font-family:inherit;font-size:13px;color:var(--v3-dim); background:var(--v3-panel);border:1px solid var(--v3-line); transition:background .3s var(--v3-ease),border-color .3s var(--v3-ease),color .3s var(--v3-ease); } #view-home .chain-pill:hover{background:var(--v3-panel-2);color:var(--v3-txt);} /* Il pallino porta il colore della rete: e' l'unico modo per riconoscerle a colpo d'occhio senza leggere, e rende visibile che sono cose diverse. */ #view-home .chain-pill i{ width:8px;height:8px;border-radius:50%;background:var(--c);flex-shrink:0; } #view-home .chain-pill.active{ color:var(--v3-txt); border-color:color-mix(in srgb, var(--c) 45%, transparent); background:color-mix(in srgb, var(--c) 10%, var(--v3-panel)); } @supports not (background:color-mix(in srgb,#000 50%,transparent)){ #view-home .chain-pill.active{border-color:var(--c);} } #view-home .chain-pill.active i{box-shadow:0 0 9px var(--c);} /* (Il conteggio dei token e' stato tolto: quattro chiamate per mostrare numeri che su reti appena avviate sono bassi, e un numero basso accanto al nome scoraggia invece di invitare.) */ @media (max-width:600px){ #view-home .chain-row{ /* Su schermo stretto quattro pillole vanno a capo e mangiano due righe: meglio farle scorrere, come i filtri di qualunque applicazione mobile. */ flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; margin-left:-14px;margin-right:-14px;padding:0 14px; } #view-home .chain-row::-webkit-scrollbar{display:none;} #view-home .chain-pill{flex-shrink:0;} } /* Il suggerimento nello stato vuoto: su una rete senza token, "lancia il primo" e' l'unica proposta e non tutti vogliono lanciare. Indicare dove invece c'e' qualcosa evita la conclusione che la piattaforma sia deserta. */ #view-home .empty-alt{margin-top:14px;font-size:13px;color:var(--v3-mute);} #view-home .empty-alt-go{ display:inline-flex;align-items:center;gap:7px; margin-left:6px;padding:6px 12px;border-radius:999px;cursor:pointer; font-family:inherit;font-size:13px;color:var(--v3-txt); background:var(--v3-panel-2);border:1px solid var(--v3-line); transition:border-color .3s var(--v3-ease); } #view-home .empty-alt-go:hover{border-color:var(--v3-line-2);} #view-home .empty-alt-go i{width:8px;height:8px;border-radius:50%;flex-shrink:0;} #view-home .empty-alt-go b{font-family:var(--v3-mono);font-size:11px;color:var(--v3-mute);} /* ========================================================================== 12. TEMA CHIARO -------------------------------------------------------------------------- Il tema chiaro non funzionava sulla home per un motivo semplice: i colori di v3 erano valori FISSI scritti a mano (#131518, #23272c...), non variabili che il tema puo' cambiare. Premendo l'interruttore il resto dell'app schiariva e la home restava scura. Non e' lo scuro invertito. Su fondo chiaro i bordi bianchi al 7% spariscono e servono grigi veri; le superfici sono bianche pure e la separazione la fanno i bordi, non le ombre, che su chiaro sporcano. ========================================================================== */ :root[data-theme="light"] #view-home{ --v3-panel:#ffffff; --v3-panel-2:#f2f4f7; --v3-line:#e2e6ea; --v3-line-2:#cfd5db; --v3-txt:#12151a; --v3-dim:#4e565f; --v3-mute:#686f78; --v3-up:#0f8c58; --v3-down:#cf2437; } /* Il fondo della pagina e delle barre di avanzamento: su chiaro un rgba(255,255,255,.07) e' invisibile, serve un grigio. */ :root[data-theme="light"] #view-home .tr-bar, :root[data-theme="light"] #view-home .feat-bar{background:#e6eaee;} :root[data-theme="light"] #view-home .feed-tab:hover, :root[data-theme="light"] #view-home .chain-pill:hover{background:#eef1f4;} :root[data-theme="light"] #view-home .tr-img, :root[data-theme="light"] #view-home .feat-av, :root[data-theme="light"] #view-home .ev-av{box-shadow:0 0 0 1px #e2e6ea;} /* L'accento della chain non ha contrasto per il testo piccolo su bianco: il titolo e le etichette restano scuri, il colore resta sui riempimenti. */ /* "Change your mind." e' un colorato con --green, cioe' l'accento della chain. Su fondo chiaro il contrasto misurato e' 1.68:1 su BSC (oro) e HyperEVM (acquamarina) — sotto il minimo leggibile di 4.5:1, e la frase spariva letteralmente nel bianco. Robinhood, Arc e Solana stavano fra 3.0 e 4.2: leggibili ma deboli. Qui l'accento viene scurito SOLO in light mode e SOLO per questo titolo, cosi' resta il colore della chain ma diventa leggibile. Il dark non e' toccato: li' l'accento su nero ha contrasto abbondante. */ /* --green-ink: la versione LEGGIBILE dell'accento su fondo chiaro, una per chain. I valori non sono a occhio: sono ricavati abbassando la luminosita' a parita' di tinta finche' il contrasto su #f6f7f9 non supera 4.6:1 (il minimo WCAG per il testo e' 4.5:1). Cosi' "Change your mind." resta del colore della sua chain, ma si legge. robinhood #00a34f -> #0a7f43 (4.74) arc #3d7dff -> #1152d4 (6.16) bsc #f0b90b -> #896b0b (4.70) era 1.68: invisibile hyperevm #4fd6bd -> #1d7c6a (4.73) era 1.68: invisibile solana #9945ff -> #6911d4 (7.44) */ :root[data-theme="light"][data-chain="robinhood"] #view-home{--green-ink:#0a7f43;} :root[data-theme="light"][data-chain="arc"] #view-home{--green-ink:#1152d4;} :root[data-theme="light"][data-chain="bsc"] #view-home{--green-ink:#896b0b;} :root[data-theme="light"][data-chain="hyperevm"] #view-home{--green-ink:#1d7c6a;} :root[data-theme="light"][data-chain="solana"] #view-home{--green-ink:#6911d4;} /* BUG FIX — in tema chiaro "Change your mind." era illeggibile all'inizio. La regola qui sotto impostava `color`, ma la regola base (sezione 7a) dipinge l' con un gradiente ritagliato sul testo: background:linear-gradient(90deg,#ffffff 0%,var(--green) 78%); -webkit-text-fill-color:transparent; e -webkit-text-fill-color VINCE SEMPRE su color, in ogni browser che lo supporta — cioe' tutti quelli basati su WebKit e Blink. Quindi `color` non aveva alcun effetto: il testo restava riempito dal gradiente, che parte dal BIANCO PURO. Su fondo scuro e' l'effetto voluto; su #f6f7f9 la prima meta' della frase — tutta la parola "Change" e oltre — era bianco su bianco. Contrasto misurato all'estremita' sinistra: 1.05:1. Non "debole": assente. Non basta cambiare il colore: va spento il riempimento. Qui il gradiente viene rifatto per il chiaro con la stessa IDEA (la frase corre da un estremo neutro all'accento della chain) ma partendo dall'inchiostro invece che dal bianco, cosi' l'effetto resta identico e leggibile da capo a fondo. --green-ink e' gia' calibrato sopra 4.6:1 per ogni chain, e il punto di partenza --text e' piu' scuro ancora: il tratto peggiore della frase e' quindi quello finale, che il contrasto lo rispetta gia'. */ :root[data-theme="light"] #view-home .ev{border-bottom-color:#eef1f4;} :root[data-theme="light"] html, :root[data-theme="light"] body{background:#f6f7f9;} /* Il campo di particelle e' pensato per il nero: su fondo chiaro diventa sporcizia. Si spegne, e la pagina resta pulita. */ :root[data-theme="light"] #starfield-bg{display:none;} :root[data-theme="light"] body::before{display:none;} /* ========================================================================== 9. IL LINGUAGGIO v3 APPLICATO A TUTTO IL SITO ========================================================================== IL PROBLEMA. La sezione 7 rifaceva le superfici SOLO dentro #view-home. Fuori dalla home comandava ancora v2.css, che costruisce ogni card in modo opposto: `background-image:var(--v2-glass)` (una velatura bianca verticale), `box-shadow:var(--v2-elev-1/2/3)` (filo interno chiaro + ombra portata) e, sulle righe della lista, `backdrop-filter:blur(10px)` con sollevamento e alone colorato al passaggio del mouse. Il risultato e' che la stessa applicazione parlava due lingue: la home piatta e squadrata, e token / profilo / docs / terminale / stocks lucidi e sollevati. Non era una differenza di dettaglio — cambiavano superficie, bordo, raggio, ombra e reazione al puntatore, cioe' tutto quello che fa riconoscere un oggetto come "lo stesso oggetto". IL CRITERIO, ripreso pari pari dalla sezione 7: - una sola superficie, piatta, piu' chiara del fondo: --v3-panel - un bordo netto e opaco, non un filo di luce: --v3-line - nessuna ombra, nessuna velatura, nessuna sfocatura - le liste sono UNA tabella: un contenitore, righe separate da una linea, non card dentro card - il colore della chain resta, ma solo su accenti e barre PERCHE' QUI E NON RISCRIVENDO v2.css. v3.css e' caricato dopo v2.css, quindi a parita' di specificita' vince. Riscrivere le regole in v2 avrebbe voluto dire toccare centinaia di righe sparse in 42 sezioni con il rischio di rompere schermate che oggi funzionano; qui l'intervento e' isolato, si legge tutto insieme e si annulla cancellando questo blocco. NOTA SULLE VARIABILI. --v3-panel e' un grigio NEUTRO, non tinto dalla chain. E' cosi' che la home e' sempre stata, ed e' quello che rende le superfici uguali su tutte le reti. L'identita' della chain resta dove pesa davvero: accento, barre di avanzamento, badge, bottoni. ========================================================================== */ /* ---- 9a. LE SUPERFICI ---- L'elenco e' quello delle due regole di v2.css (sezione 5) che assegnano vetro e ombra, cosi' non ne resta fuori nessuna. #view-home e' escluso: li' comanda gia' la sezione 7 e non serve una seconda regola che si contenda gli stessi elementi. */ .card,.pf-panel,.pf-summary-card,.pf-stock-card,.saved-card, .feature-card,.how-step,.pf-stat,.tm-col,.docs-sec,.dex-embed-card, .chart-card,.token-card,.trend-card,.tk-stat,.stock-hero,.gc-card, .tok-panel{ background-color:var(--v3-panel); /* Spegne var(--v2-glass): e' una background-IMAGE, quindi non basta riscrivere background-color — resterebbe sopra. */ background-image:none; border:1px solid var(--v3-line); box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none; } /* 14px per i contenitori, 12px per i riquadri piu' piccoli che ci stanno dentro. Sono le stesse due misure della sezione 7, e .feature-card / .how-step stanno nel gruppo da 14 perche' e' il raggio che gia' hanno nella home: la sezione Stocks usa le stesse card e a 12px si sarebbe vista la differenza passando da una pagina all'altra. */ .card,.pf-panel,.pf-summary-card,.tm-col,.docs-sec,.dex-embed-card, .chart-card,.tok-panel,.stock-hero,.feature-card,.how-step{border-radius:14px;} .pf-stat,.saved-card,.pf-stock-card,.token-card,.trend-card,.tk-stat{border-radius:12px;} /* La finestra modale tiene la sua ombra: e' l'unico elemento che galleggia DAVVERO sopra il resto, e senza stacco sembrerebbe incollata alla pagina. Superficie e bordo pero' si allineano a tutti gli altri. */ .modal{ background-color:var(--v3-panel);background-image:none; border:1px solid var(--v3-line);border-radius:14px; } /* ---- 9b. LE TABELLE ---- Il caso peggiore: .tok-row fuori dalla home e' una "riga in vetro" (v2.css sezione 3 della coda) con fondo sfocato, angoli arrotondati, ombra interna e translateY(-2px) al passaggio. Dentro un contenitore che ha gia' il suo bordo, sono due cornici annidate che agli angoli non combaciano mai — la ragione per cui la sezione 7d le aveva gia' appiattite nella home. Qui la stessa correzione vale per la sezione Stocks, che usa le identiche classi e non era coperta da nessuna delle due. */ .tok-panel{overflow:hidden;} .tok-head{ background:var(--v3-panel-2); border-bottom:1px solid var(--v3-line); color:var(--v3-mute); font-size:9px;letter-spacing:.11em;text-transform:uppercase; } .tok-row{ padding:18px; background:transparent;background-image:none; backdrop-filter:none;-webkit-backdrop-filter:none; border:0;border-bottom:1px solid var(--v3-line); border-radius:0;box-shadow:none;margin:0; transform:none; transition:background .3s var(--v3-ease); } .tok-row:last-child{border-bottom:0;} /* Un cambio di fondo e basta. Il sollevamento piu' l'alone colorato erano tre segnali per dire una cosa sola, e su una lista lunga il contenuto ballava sotto il puntatore. */ .tok-row:hover{ background:var(--v3-panel-2); transform:none; border-color:var(--v3-line); box-shadow:none; } /* La barra d'accento che entrava da sinistra: nella home non c'e', e con l'evidenziazione del fondo diventa un secondo segnale ridondante. */ .tok-row::before{display:none;} .tr-img{ border-radius:12px; box-shadow:0 0 0 1px rgba(255,255,255,.06); transition:transform .4s var(--v3-ease); } .tok-row:hover .tr-img{transform:scale(1.04);box-shadow:0 0 0 1px rgba(255,255,255,.06);} .tr-bar{height:6px;background:rgba(255,255,255,.09);border-radius:999px;overflow:hidden;} .tr-bar-fill{background:var(--green);box-shadow:none;border-radius:999px;} /* Le altre liste: scambi e holder nella pagina token, righe del terminale. Stesso schema — un contenitore, righe divise da una linea, evidenziazione sul fondo. */ .trades-list,.holders-list,.tm-list{border-radius:12px;} .trades-list,.holders-list{border:1px solid var(--v3-line);overflow:hidden;} .tr-row,.hl-row,.tm-row{ border-bottom:1px solid var(--v3-line); transition:background .3s var(--v3-ease); } .tr-row:last-child,.hl-row:last-child,.tm-row:last-child{border-bottom:0;} .tr-row:hover,.hl-row:hover,.tm-row:hover{background:var(--v3-panel-2);} .trades-head{border-bottom:1px solid var(--v3-line);color:var(--v3-mute);} .tm-col-head,.tm-filters{border-bottom:1px solid var(--v3-line);} .tm-filters{background:var(--v3-panel-2);} /* ---- 9c. LA STRISCIA DEI NUMERI ---- .market-bar e' usata anche dalla sezione Stocks, dove restava la versione con il gradiente e la sfocatura dell'epoca in cui era l'intestazione della pagina. Nella home la 7e l'ha gia' appiattita: qui si allinea l'altra. */ .market-bar{ background:var(--v3-panel);background-image:none; border:1px solid var(--v3-line);border-radius:14px; box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none; } .market-bar::before,.market-bar::after{display:none;} .market-stats{border-top:1px solid var(--v3-line);} /* ---- 9d. LE SCHEDE DEL FEED ---- Fuori dalla home la scheda attiva si accendeva con un fondo tinto piu' un ::after luminoso sotto; nella home e' solo un fondo tinto. */ .feed-tab{ border-radius:10px;background:transparent;border:0; color:var(--v3-dim); transition:background .3s var(--v3-ease),color .3s var(--v3-ease); } .feed-tab:hover{background:rgba(255,255,255,.05);color:var(--v3-txt);} .feed-tab.active{background:rgba(var(--green-rgb),.14);color:var(--green);} .feed-tab.active::after{display:none;} /* ---- 9e. IL TEMA CHIARO ---- I valori qui sopra sono grigi scuri: sul chiaro vanno ribaltati, o l'intera applicazione resta nera mentre la home e' bianca. I valori sono COPIATI da :root[data-theme="light"] #view-home (sezione 8), cifra per cifra, e non ricalcolati a occhio: se differissero anche di un punto, home e resto del sito tornerebbero a essere due grigi diversi — che e' esattamente il difetto che questa sezione elimina. La regola della home resta dov'e' e continua a vincere per specificita': la home non cambia, il resto del sito la raggiunge. */ :root[data-theme="light"]{ --v3-panel:#ffffff; --v3-panel-2:#f2f4f7; --v3-line:#e2e6ea; --v3-line-2:#cfd5db; --v3-txt:#12151a; --v3-dim:#4e565f; --v3-mute:#686f78; --v3-up:#0f8c58; --v3-down:#cf2437; } /* Sul chiaro il filo bianco attorno alle immagini e i fondi bianchi al 9% sono invisibili: diventano linee d'inchiostro tenui. Stessi valori della sezione 8, per la stessa ragione di sopra. */ :root[data-theme="light"] .tr-img, :root[data-theme="light"] .tok-row:hover .tr-img{box-shadow:0 0 0 1px #e2e6ea;} :root[data-theme="light"] .tr-bar{background:#e6eaee;} :root[data-theme="light"] .feed-tab:hover{background:#eef1f4;} /* ========================================================================== 10. IL GRADIENTE DI BRAND DELLA CHAIN ========================================================================== --chain-grad vale var(--green) su tutte le chain (quindi: tinta unita, come prima) e il gradiente viola->verde del logo su Solana. Le regole qui sotto non nominano mai una chain: leggono la variabile e basta. DOVE SI USA E DOVE NO. Un gradiente ha bisogno di spazio per esistere: su un puntino da 6px i due estremi cadono a tre pixel di distanza e si vede una tinta piatta sporca, non una sfumatura. Quindi il gradiente va sui riempimenti larghi — bottoni d'azione e barre di avanzamento — e NON su pallini di stato, bordi, testo piccolo, badge o ::selection, che restano sul viola pieno. PERCHE' L'INCHIOSTRO SCURO E NON IL BIANCO. Ho misurato il contrasto lungo tutta la sfumatura, campionando ogni 2%. Con --on-green (#180a2b, l'attuale inchiostro scuro di Solana) il minimo e' 4.16 e il massimo 12.57: leggibile da un capo all'altro. Con testo BIANCO il minimo sarebbe 1.50 — sull'estremo verde #14F195 la scritta sparirebbe. Per questo le regole qui sotto tengono color:var(--on-green) e non lo toccano. ========================================================================== */ /* ---- 10a. I BOTTONI D'AZIONE ---- Solo i pieni. La variante .ghost e' trasparente con bordo, li' il gradiente non avrebbe superficie su cui vedersi. */ /* I BOTTONI SU GRADIENTE. Nel giro precedente li avevo riportati a tinta unita perche' la rampa viola->blu->verde su 70px diventava una macchia. Il problema pero' non era il gradiente in se': era la FERMATA INTERMEDIA che avevo scelto (#498af5, un blu poco saturo). Su una barra lunga si legge come passaggio, su un bottone stretto occupa meta' della superficie e la spegne. --chain-grad-btn e' la stessa rampa senza fermata intermedia e con un'inclinazione piu' decisa: i due colori del marchio restano entrambi vividi perche' nessuno dei due cede spazio a un terzo, e il punto di passaggio e' spinto oltre il bordo destro cosi' sul bottone se ne vede la parte piu' satura invece del centro. Il testo resta --on-green (inchiostro scuro): misurato lungo tutta la rampa, il contrasto minimo e' 4.16 e il massimo 12.57. Col bianco il minimo sarebbe 1.50 e sul verde la scritta sparirebbe. */ /* L'ELENCO COMPLETO. Nel giro precedente ne avevo presi quattro a memoria e ne mancavano altrettanti. Questa volta l'ho ricavato interrogando i fogli: sono TUTTE le regole che riempiono con var(--green) e scrivono sopra con var(--on-green) — cioe' la firma esatta di "bottone pieno d'accento". Restano fuori di proposito ::selection (la scelta del testo non e' un bottone e un gradiente la renderebbe illeggibile a chunk) e .gc-badge, che e' un'etichetta alta 16px. */ .side-cta:not(.ghost), .btn-launch-top:not(.ghost), .btn-launch, .hero-cta:not(.ghost), .btn-enter, .pf-btn-primary, .head-cta:not(.ghost), .how-step .step-num, .v2-cta:not(.ghost){ background:var(--chain-grad-btn,var(--green)); color:var(--on-green); border-color:transparent; } /* Le barre restano su --chain-grad, la rampa LUNGA a tre fermate: una barra attraversa la card e ha lo spazio per mostrare anche il passaggio centrale, che sul bottone invece lo spegneva. Sono due rampe diverse per due usi diversi, non una svista. */ .token-progress-fill,.progress-fill,.tk-stat-subbar-fill{ background:var(--chain-grad); } /* filter:brightness scurisce l'intera sfumatura mantenendo il rapporto fra i due estremi, quindi funziona sul gradiente come funzionava sulla tinta piatta. Un background diverso al passaggio l'avrebbe invece fatta sparire. */ .side-cta:not(.ghost):hover, .btn-launch-top:not(.ghost):hover{filter:brightness(1.07);} /* ---- 10b. LE BARRE DI AVANZAMENTO ---- Il posto dove il gradiente rende meglio: la barra cresce da sinistra, quindi la sfumatura si scopre man mano che il token si avvicina al bond. Le versioni con #view-home davanti servono perche' li' comanda la sezione 7, che ha specificita' piu' alta: senza, dentro la home resterebbero piatte. */ .tr-bar-fill,.feat-bar i,.tk2-subbar-fill, #view-home .tr-bar-fill,#view-home .feat-bar i{ background:var(--chain-grad); box-shadow:none; } /* ---- 10c. IL TITOLO DELLA HOME, SOLO SU SCURO ---- Su fondo scuro la frase puo' correre bianco -> viola -> verde e resta leggibile ovunque (l'estremo verde da' 13.4 contro il fondo). Sul CHIARO no, e non e' una preferenza: #14F195 su #f6f7f9 misura 1.39, cioe' verde chiarissimo su bianco. Sarebbe lo stesso identico difetto che la sezione 8 ha appena corretto, con un colore diverso. Percio' la regola e' esclusa dal tema chiaro con :not(), e li' resta la sfumatura inchiostro -> --green-ink gia' verificata sopra 4.6:1. */ /* ---- 10d. IL GRADIENTE SUL TEMA CHIARO ---- --chain-grad era definito una volta sola, quindi sul chiaro usava i colori pieni del brand. Sui bottoni regge (minimo 4.16 contro l'inchiostro scuro), ma sulle BARRE no: #14F195 contro il fondo chiaro misura 1.39, cioe' la barra sarebbe sparita proprio dove e' piu' piena — l'estremo destro e' il punto che dice "il token sta per fare bond". Stessi due estremi scuriti usati per logo-solana-light.png, cosi' marchio e barre parlano lo stesso linguaggio. */ :root[data-theme="light"][data-chain="solana"]{ --chain-grad:linear-gradient(96deg,#7b2ff5 0%,#2f6fd6 50%,#0b9c63 100%); } /* ---- 10e. L'INTESTAZIONE ---- Il marchio-immagine e' un PNG e si aggiorna da solo con i file nuovi. La SCRITTA no: .logo small e .topbar .brand-top span usano color:var(--green), tinta piatta. Qui prendono la sfumatura. Solo su Solana e solo su tema scuro, per la stessa ragione della 10c: sul chiaro l'estremo verde non si legge. Sul chiaro resta il viola pieno, che e' gia' calibrato. */ :root:not([data-theme="light"])[data-chain="solana"] .logo small, :root:not([data-theme="light"])[data-chain="solana"] .topbar .brand-top .brand-name > span{ background:linear-gradient(96deg,#9945ff 0%,#14f195 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } /* Se il ritaglio sul testo non e' supportato il riempimento trasparente renderebbe ".fun" INVISIBILE invece che piatto: qui torna il colore pieno. */ @supports not ((-webkit-background-clip:text) or (background-clip:text)){ :root[data-chain="solana"] .logo small, :root[data-chain="solana"] .topbar .brand-top .brand-name > span{ background:none;-webkit-text-fill-color:var(--green);color:var(--green); } } /* ========================================================================== 11. COERENZA DEL TEMA CHIARO ========================================================================== 11a. L'ACCENTO ERA SCURITO A META'. v2.css sposta --green su un valore piu' scuro per ogni chain sul tema chiaro (l'oro BNB puro su bianco da' 1.74, sparisce). Ma sposta SOLO --green. Tutte le sue derivate — --green-rgb, --green-bg, --green-border, --green-hi, --green-dim — restano ai valori tarati sul NERO. Il risultato: ovunque il CSS scriva rgba(var(--green-rgb),...) — aloni, fondi tenui, bordi delle schede attive, barre — sul chiaro compare l'accento della versione SCURA, accanto a un testo che usa quello chiaro. Due accenti diversi nella stessa schermata, ed e' il motivo per cui il tema chiaro non "torna". Su HyperEVM lo scarto e' massimo: #4fd6bd contro #0d947c sono due colori diversi, non due sfumature. Qui ogni chain riallinea le derivate al proprio accento chiaro. */ :root[data-theme="light"]{ --green-rgb:10,154,82; --green-bg:rgba(10,154,82,.10); --green-border:rgba(10,154,82,.30); } :root[data-theme="light"][data-chain="arc"]{ --green-rgb:43,95,217; --green-bg:rgba(43,95,217,.10); --green-border:rgba(43,95,217,.30); } :root[data-theme="light"][data-chain="bsc"]{ --green-rgb:201,148,0; --green-bg:rgba(201,148,0,.12); --green-border:rgba(201,148,0,.32); } :root[data-theme="light"][data-chain="hyperevm"]{ --green-rgb:13,148,124; --green-bg:rgba(13,148,124,.10); --green-border:rgba(13,148,124,.30); } :root[data-theme="light"][data-chain="solana"]{ --green-rgb:123,47,245; --green-bg:rgba(123,47,245,.09); --green-border:rgba(123,47,245,.28); } /* 11b. IL BANNER DELLE CHAIN NON ANCORA ATTIVE. Con --green-bg al 10% di viola era l'unica superficie tinta in una pagina fatta di bianchi: attirava l'occhio piu' del titolo, pur dicendo una cosa che si legge una volta sola. Resta riconoscibile come avviso — il bordo sinistro tiene il colore della chain — ma smette di gridare. */ :root[data-theme="light"] .chain-notice{ background:var(--v3-panel); border:1px solid var(--v3-line); border-left:3px solid var(--green); } /* 11c. IL MARCHIO IN BARRA ERA TUTTO COLORATO. `.topbar .brand-top span` colpiva DUE elementi, non uno: il markup e' Archimemes.fun, quindi il selettore prendeva anche il contenitore e tingeva d'accento l'intera scritta. Doveva colorare solo ".fun". Si vede nella schermata: "Archimemes.fun" e' tutto viola, mentre nella colonna laterale — dove il selettore e' .logo small, che e' preciso — solo ".fun" lo e'. Due marchi diversi nella stessa pagina. `> span` scende di un livello solo e riporta il nome al colore del testo. */ .topbar .brand-top .brand-name{color:var(--text);} .topbar .brand-top .brand-name > span{color:var(--green);} /* ---- 11d. "CHANGE YOUR MIND." SUL CHIARO, CON I COLORI DELLA CHAIN ---- Sul chiaro la frase usava inchiostro -> --green-ink: leggibile, ma su Solana restava un viola piatto e del gradiente del marchio non si vedeva niente. Nella schermata e' esattamente cosi': "Change" nero, "your mind." viola, nessuna traccia del verde. Il verde del brand non si puo' usare (1.39 su fondo chiaro, gia' misurato), ma la sua versione scurita si': #0B9C63, lo stesso estremo del logo chiaro. Cosi' la frase corre inchiostro -> viola -> verde come sul tema scuro, restando leggibile in ogni punto. Le altre chain non sono toccate. */ /* ---- 11e. LA SCALA TIPOGRAFICA, UGUALE OVUNQUE ---- #view-home dichiarava font-family e line-height solo per se': fuori dalla home il testo restava sulla scala di v2. Ora che le superfici combaciano, quello che si nota passando da home a token non e' piu' la card — e' il testo. Qui la stessa scala vale per tutte le viste. Nessun font nuovo: e' lo stesso stack di sistema che la home usa gia'. */ #view-token,#view-stock,#view-create,#view-create-stock, #view-profile,#view-docs,#view-terminal,#view-watchlist, #view-chat,#view-stocks{ line-height:1.5; letter-spacing:0; } /* I numeri restano in monospazio: in una tabella di prezzi le cifre devono incolonnarsi, ed e' la stessa scelta della home (--v3-mono). */ .tr-num,.tk-stat b,.pf-stat b,.lb-val,.hp-item dd{font-variant-numeric:tabular-nums;} /* ---- 11f. IL FUOCO DA TASTIERA ---- Mancava del tutto una regola :focus-visible: chi naviga con il TAB non vedeva dove si trovava, se non per il contorno di sistema, che su fondo scuro e' quasi invisibile. Due righe, e la pagina diventa percorribile senza mouse. :focus-visible e non :focus, cosi' l'anello NON compare al click del mouse — che e' il motivo per cui di solito questi contorni vengono tolti. */ a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--green); outline-offset:2px; border-radius:6px; } /* ---- 11g. IL PESO DEL TESTO SUL TEMA CHIARO ---- Le dimensioni sono IDENTICHE nei due temi: ho passato in rassegna tutte le regole scoperte da :root[data-theme="light"] e non ne esiste una sola che tocchi font-size, font-family, font-weight, font-stretch, zoom o scale(). L'unica che compare riguarda il gradiente del titolo della home. Quello che cambia e' come il testo viene DISEGNATO. Su Windows — -webkit-font-smoothing non ha alcun effetto, e' una proprieta' solo macOS — il subpixel di ClearType ingrossa il testo scuro su fondo chiaro molto piu' di quanto ingrossi quello chiaro su fondo scuro. A cio' si somma l'irradiazione, che va nella stessa direzione. Il risultato: stesse dimensioni, resa piu' pesante. Aver alleggerito l'inchiostro (--text) non bastava, perche' agiva sul colore e non sul tratto. Qui si toglie mezzo passo di peso ai titoli, che sono il punto dove lo scarto si nota di piu' perche' il tratto e' gia' spesso. Solo i titoli: il testo corrente a 400 non ha margine sotto senza diventare smilzo. */ :root[data-theme="light"] h1, :root[data-theme="light"] h2, :root[data-theme="light"] h3, :root[data-theme="light"] .section-title, :root[data-theme="light"] .tr-title, :root[data-theme="light"] .brand-name, :root[data-theme="light"] .logo{font-weight:600;} :root[data-theme="light"] #view-home .pitch h1{font-weight:650;} /* ---- 12. LA RAMPA DEI BOTTONI, E LO SFONDO ---- 12a. Due fermate invece di tre, e il verde spinto al 115%: sul bottone si vede la meta' piu' satura della rampa, non il centro dove le due tinte si annullano. Le altre chain non la definiscono e restano a tinta unita. */ :root[data-chain="solana"]{ --chain-grad-btn:linear-gradient(104deg,#9945ff 0%,#14f195 115%); } /* Sul chiaro gli stessi due estremi scuriti gia' usati per il logo chiaro: il verde pieno su una superficie chiara sparisce (1.39 misurato), e un bottone che si dissolve a destra e' peggio di un bottone piatto. */ /* SUL CHIARO CAMBIA ANCHE IL COLORE DEL TESTO, e serve spiegare perche'. Con l'inchiostro scuro (--on-green #180a2b) la rampa chiara scendeva a 3.03 di contrasto: sotto la soglia 4.5 del testo normale, e un bottone e' testo normale. Il collo di bottiglia NON e' il verde finale ma il PUNTO MEDIO della rampa, dove viola e verde si incontrano su una tonalita' intermedia. Tanto e' vero che scurire il verde peggiorava le cose invece di aggiustarle: #0a8a58 dava 2.88, #08774c 2.66 — perche' avvicinava il centro all'inchiostro. La soluzione e' invertire: sul chiaro entrambi gli estremi sono gia' scuri, quindi il testo va in BIANCO. Con il verde a #0a8a58 il minimo lungo tutta la rampa diventa 4.95 e il massimo 6.52 — a norma da un capo all'altro. E' anche il motivo per cui --on-green non poteva restare uno solo: lo sfondo cambia luminosita' fra i due temi, il testo deve seguirlo. */ :root[data-theme="light"][data-chain="solana"]{ --chain-grad-btn:linear-gradient(104deg,#7b2ff5 0%,#0a8a58 115%); --on-green:#ffffff; } /* 12b. LO SFONDO. Il fondo pagina era una tinta unita (--v2-bg-deep) con sopra il campo ambientale, che su Solana leggeva come un viola uniforme. Qui prende una sfumatura vera: due aloni molto larghi e molto tenui, viola in alto a sinistra e verde in basso a destra, sopra il nero di base. Le percentuali sono basse di proposito (6% e 5%): a valori piu' alti il fondo compete con le card, che sono appena piu' chiare di lui, e la gerarchia si perde. L'effetto si deve notare solo se lo cerchi. */ :root[data-chain="solana"] body{ background: radial-gradient(120% 80% at 12% 0%, rgba(153,69,255,.16) 0%, transparent 58%), radial-gradient(110% 75% at 92% 100%, rgba(20,241,149,.10) 0%, transparent 60%), var(--v2-bg-deep); background-attachment:fixed; } :root[data-theme="light"][data-chain="solana"] body{ background: radial-gradient(120% 80% at 12% 0%, rgba(123,47,245,.09) 0%, transparent 58%), radial-gradient(110% 75% at 92% 100%, rgba(11,156,99,.07) 0%, transparent 60%), var(--bg); background-attachment:fixed; } /* ---- 12c. LE BARRE SUL CHIARO ---- --chain-grad chiaro terminava su #0b9c63, coerente col logo. Ora che i bottoni finiscono su #0a8a58 le due rampe divergerebbero: una barra e un bottone affiancati mostrerebbero due verdi diversi. Qui si allineano. Sulle barre il testo non ci va sopra, quindi l'unico vincolo e' distinguersi dal binario: #0a8a58 su fondo chiaro da' 4.09, piu' che sufficiente. */ :root[data-theme="light"][data-chain="solana"]{ --chain-grad:linear-gradient(96deg,#7b2ff5 0%,#2f6fd6 50%,#0a8a58 100%); } /* ========================================================================== 13. IL PANNELLO DELLE CHAIN NON ANCORA ATTIVE -------------------------------------------------------------------------- Prima era una riga di testo in un rettangolo tinto: diceva "questa rete non e' live" e nient'altro, sopra una pagina fatta di riquadri vuoti. L'effetto era che la chain sembrasse rotta invece che in arrivo — e su Solana, dove il resto della palette e' curato, la differenza si notava di piu'. Ora e' un pannello che mostra quello che dice: il traguardo della curva, lo standard dei token, dove finisce la liquidita', quanto costa lanciare. I valori arrivano da chains.js, quindi descrivono da soli qualsiasi chain si aggiunga. Il colore lo porta la CHAIN, non la palette attiva: --chain-rule e' accentGradient dove esiste (Solana: viola -> blu -> verde), altrimenti l'accento pieno (Arc: blu). Le variabili le imposta initChainNotice, quindi qui dentro non c'e' un solo colore di marca scritto a mano. ========================================================================== */ #view-home .chain-notice.chain-preview{ position:relative; margin:0 0 20px; padding:18px 20px 16px; border-radius:12px; background: linear-gradient(180deg, var(--chain-accent-soft, rgba(255,255,255,.05)) 0%, transparent 42%), var(--v3-panel); border:1px solid var(--v3-line); color:var(--v3-dim); font-size:13px; line-height:1.55; overflow:hidden; } /* Il filo in cima porta il gradiente del brand. E' l'unico punto in cui il colore e' pieno: sul resto del pannello resterebbe addosso al testo. */ #view-home .chain-notice.chain-preview::before{ content:""; position:absolute;inset:0 0 auto 0;height:2px; background:var(--chain-rule, currentColor); } /* ---- intestazione ---- */ #view-home .chain-preview .cp-head{ display:flex;align-items:center;gap:9px; margin-bottom:10px; } #view-home .chain-preview .cp-dot{ width:6px;height:6px;border-radius:50%; background:var(--chain-accent, var(--v3-dim)); /* L'alone e' quello che lo fa leggere come "acceso" invece che come un punto elenco. Resta piccolo: a raggio maggiore diventa una macchia. */ box-shadow:0 0 0 3px var(--chain-accent-soft, transparent); flex-shrink:0; } #view-home .chain-preview .cp-chain{ font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase; color:var(--v3-txt); } #view-home .chain-preview .cp-soon{ font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--chain-accent, var(--v3-dim)); border:1px solid var(--chain-accent-line, var(--v3-line)); border-radius:3px;padding:2px 6px;line-height:1; } #view-home .chain-preview .cp-lede{ margin:0 0 15px; max-width:66ch; /* oltre, l'occhio perde la riga successiva */ color:var(--v3-dim); } /* ---- i quattro numeri ---- auto-fit invece di quattro colonne fisse: a 4 stanno in riga, sotto i ~640px diventano due per riga e poi una, senza un media query per ogni soglia. */ #view-home .chain-preview .cp-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:1px; margin:0; background:var(--v3-line); /* fa da griglia: le celle coprono, il fondo resta */ border:1px solid var(--v3-line); border-radius:10px; overflow:hidden; } #view-home .chain-preview .cp-fact{ background:var(--v3-panel); padding:11px 13px 12px; min-width:0; } #view-home .chain-preview .cp-fact dt{ font-size:10.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase; color:var(--v3-mute); margin:0 0 5px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } #view-home .chain-preview .cp-fact dd{ margin:0; font-family:var(--v3-mono); font-size:14px;font-weight:600; color:var(--v3-txt); /* I valori possono essere lunghi ("Token-2022", "0.0005 USDC"): meglio che vadano a capo che sparire sotto il bordo. */ overflow-wrap:anywhere; } /* ---- riga finale: "sei pronto?" ---- */ #view-home .chain-preview .cp-foot{ margin-top:13px; font-size:12.5px; color:var(--v3-mute); /* Non flex: il testo qui dentro e' una frase, e in un contenitore flex ogni frammento diventa un elemento della riga — il gap finiva anche prima del punto finale ("faucet ."), e a schermo stretto la frase si spezzava in due blocchi invece di andare a capo come testo. */ display:block; padding-left:19px; position:relative; } #view-home .chain-preview .cp-foot.hidden{display:none;} #view-home .chain-preview .cp-foot .cp-check{ position:absolute;left:0;top:0; font-family:var(--v3-mono); color:var(--v3-mute); /* Il segno resta appeso al margine: se la frase va a capo, le righe successive si allineano al testo e non sotto il simbolo. */ } /* Wallet gia' installato: la riga passa dal grigio al verde di conferma. E' --v3-up e non l'accento della chain, perche' qui il significato e' "fatto", non "questa rete". */ #view-home .chain-preview .cp-foot.ready, #view-home .chain-preview .cp-foot.ready .cp-check{color:var(--v3-up);} #view-home .chain-preview .cp-foot a{ color:var(--chain-accent, var(--v3-txt)); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; text-decoration-color:var(--chain-accent-line, currentColor); } #view-home .chain-preview .cp-foot a:hover{text-decoration-color:currentColor;} /* Sul chiaro il fondo del pannello e' gia' bianco come le card: senza un bordo un po' piu' marcato il blocco si scioglie nella pagina. */ :root[data-theme="light"] #view-home .chain-notice.chain-preview{ border-color:var(--v3-line-2, var(--v3-line)); box-shadow:0 1px 2px rgba(16,24,40,.04); } /* Schermi stretti: il pannello e' informativo, non deve occupare mezza schermata prima della lista dei token. */ @media (max-width:560px){ #view-home .chain-notice.chain-preview{padding:15px 15px 13px;} /* Le etichette delle quattro celle stavano a 10,5px: sotto il pavimento che questa passata ha fissato per il testo in mano (14e). */ #view-home .chain-preview .cp-fact dt{font-size:11px;letter-spacing:.05em;} #view-home .chain-preview .cp-lede{margin-bottom:12px;} #view-home .chain-preview .cp-fact{padding:9px 11px 10px;} #view-home .chain-preview .cp-fact dd{font-size:13px;} } /* ---- 13b. L'EMPTY STATE DELLE CHAIN NON ATTIVE ---- "No tokens launched yet. Be the first" invitava a premere un bottone disattivato. Due righe: cosa manca, e dove sono invece i token. */ #view-home .empty-preview{ display:flex;flex-direction:column;align-items:center;gap:6px; text-align:center; } #view-home .empty-preview .ep-title{ color:var(--v3-txt);font-weight:600;font-size:14px; } #view-home .empty-preview .ep-sub{ color:var(--v3-mute);font-size:12.5px;line-height:1.55;max-width:44ch; } /* Sul chiaro l'accento pieno della chain e' troppo tenue per del testo: il viola Solana #9945FF su bianco misura ~4.0, sotto la soglia 4.5. --green porta gia' la versione scurita per ogni chain (su Solana #7B2FF5), quindi il colore resta quello del marchio ma si legge. Serve !important perche' --chain-accent lo imposta initChainNotice come stile inline sull'elemento. */ :root[data-theme="light"] #view-home .chain-preview .cp-foot a, :root[data-theme="light"] #view-home .chain-preview .cp-soon{ color:var(--green) !important; } :root[data-theme="light"] #view-home .chain-preview .cp-soon{ border-color:color-mix(in srgb, var(--green) 34%, transparent); } /* ========================================================================== 14. RIFINITURA v3 — I CONTROLLI, IL TOCCO, LA SCALA -------------------------------------------------------------------------- Questa sezione non aggiunge componenti: mette in riga quelli che ci sono gia'. Tutto qui dentro nasce da misure prese sulla pagina renderizzata (Chromium, cinque profili fra iPhone, Android, iPad e desktop), non da un'impressione. Cosa e' venuto fuori: - la barra in alto conteneva CINQUE altezze diverse (30, 31, 32, 33, 36px) e due famiglie di raggio (9px e 999px) nella stessa riga di 40px; - 48 campi di input avevano font-size sotto i 16px, e su iOS quella e' la soglia sotto la quale Safari INGRANDISCE la pagina al tocco e non la rimpicciolisce piu'; - i bersagli tattili scendevano a 30x30px, contro i 44pt che chiede Apple e i 48dp di Material; - alcune etichette stavano a 9,5px, leggibili su un monitor e non in mano; - undici valori di border-radius convivevano nella stessa schermata. Nessuna di queste cose e' un errore singolo: sono il residuo di componenti decisi uno alla volta. Messe insieme sono la differenza fra un sito che sembra montato e uno che sembra progettato. ========================================================================== */ :root{ /* Una sola altezza per i controlli in barra. 36px su puntatore fine e' il valore che regge il testo a 13px con respiro sopra e sotto; su touch sale a 44 (vedi 14d). */ --ctl-h:36px; /* La scala dei raggi, quattro gradini e la pillola. I valori vicini che c'erano (4/6, 8/9/10, 12/14, 99/999) non si distinguono a occhio: tenerne due per gradino significa solo che nessuno li ha decisi insieme. */ --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-pill:999px; /* Il pieno d'accento e il suo inchiostro. Passano da qui perche' su una chain il contrasto giusto non e' quello di un'altra: vedi sotto. */ --fill-accent:var(--green); --on-fill-accent:var(--on-green); } /* SOLANA, TEMA SCURO — l'unica eccezione, e ha un numero dietro. L'inchiostro scuro (--on-green #180A2B) sul viola #9945FF misura 4.12 di contrasto. La soglia per un testo di 13px in grassetto e' 4.5: "grassetto" diventa testo grande solo da 18.66px in su, quindi 13px bold sta nella categoria normale e 4.12 non basta. Il bianco sullo stesso viola misura 4.54. Sulle altre chain l'inchiostro scuro sta gia' fra 5.2 e 6.5, quindi non si tocca. */ :root:not([data-theme="light"])[data-chain="solana"]{ --on-fill-accent:#ffffff; } /* ---- 14a. LA BARRA IN ALTO, UNA RIGA SOLA ---- Prima: il campo di ricerca e il selettore di chain erano pillole, "Launch" e "Stock" rettangoli a 9px, il bottone del tema un quadrato a 9px, e le altezze andavano da 30 a 36. In una riga alta 46px si vede: sembra che ognuno sia stato aggiunto in un momento diverso, perche' e' andata cosi'. Una famiglia sola. La pillola e non il rettangolo perche' e' la forma che gia' avevano i due elementi piu' importanti della riga — il campo di ricerca e il bottone di accesso — e cambiarli avrebbe voluto dire rifare anche il menu a tendina che si aggancia sotto. */ .topbar .btn-launch-top, .topbar .btn-connect, .topbar .chain-trigger, .topbar .theme-btn, .topbar .m-menu-btn, .topbar .m-search-btn, .topbar .search input, .topbar .search{ border-radius:var(--r-pill); min-height:var(--ctl-h); } .topbar .btn-launch-top, .topbar .btn-connect, .topbar .chain-trigger{ height:var(--ctl-h); padding-top:0;padding-bottom:0; /* NIENTE `display` qui. Metterlo e' costato una regressione vera: `.btn-launch-top` e' nascosto sotto i 760px da `@media(max-width:760px){.btn-launch-top{display:none}}` in v2.css, che pesa 0-1-0. Questa regola pesa 0-2-0 e sta in un foglio caricato dopo, quindi un `display:inline-flex` qui RIACCENDEVA i due bottoni sul telefono: la barra andava in overflow e il bottone di accesso finiva tagliato fuori dallo schermo. Le tre classi sono gia' flex nelle loro regole di base, quindi bastano allineamento e dimensioni. */ align-items:center;justify-content:center; /* flex-shrink:0 — CORREGGE UN DIFETTO CHE ERA GIA' LI'. La barra e' un flex row e il selettore di chain era l'unico elemento senza freno: su 360px di larghezza assorbiva da solo tutta la compressione e scendeva a 18px, cioe' pallino e freccia senza il nome della rete. Con l'altezza dei controlli portata a 44px per il tocco (14d) la riga si allarga di qualche pixel e il difetto sarebbe diventato la regola. L'elemento elastico della barra deve essere il campo di ricerca, che ha senso restringere; il nome della chain no: e' l'informazione che dice su quale rete stai guardando dei prezzi. */ flex-shrink:0; } .topbar .chain-trigger{min-width:96px;} @media (max-width:420px){ .topbar .chain-trigger{min-width:84px;} } .topbar .btn-launch-top{padding-left:16px;padding-right:16px;} /* I bottoni-icona: quadrati esatti, quindi la pillola li rende cerchi. Vale anche per i due che compaiono SOLO su telefono — il menu a panino e la lente — che restavano quadrati arrotondati accanto a un cerchio e a due pillole. Tre forme diverse in cinque elementi affiancati: e' il genere di dettaglio che non si sa spiegare guardandolo, ma che si sente. */ .topbar .theme-btn, .topbar .m-menu-btn, .topbar .m-search-btn{ width:var(--ctl-h);height:var(--ctl-h); border-radius:var(--r-pill); /* Ancora NIENTE `display`, per lo stesso motivo di sopra e con una prova in piu': il menu a panino e la lente esistono SOLO su telefono (`display:none` di base, riacceso in una media query). Un `display:inline-flex` qui li faceva comparire anche su desktop, dove non hanno senso e dove il pannello laterale e' gia' aperto — si vedevano due cerchi in piu' nella barra. E' lo stesso errore fatto due volte: mettere una proprieta' di layout in una regola che serviva solo a dare una forma. */ align-items:center;justify-content:center; flex-shrink:0; } /* Le voci di navigazione restano rettangoli arrotondati: non sono bottoni, e una fila di pillole accanto ai bottoni veri toglierebbe gerarchia proprio a quelli. Si allinea solo l'altezza. */ .topbar .topnav-link{min-height:30px;display:inline-flex;align-items:center;border-radius:var(--r-sm);} /* ---- 14b. IL PIENO D'ACCENTO, NON LA RAMPA, SUI CONTROLLI PICCOLI ---- E' il difetto da cui e' partita questa sessione: "nel bottone solana i margini sono colorati strani". Non era un margine. --chain-grad-btn e' una rampa da #9945FF a #14F195, e fra quei due colori l'interpolazione in sRGB passa per un azzurro-ciano slavato che non appartiene al marchio. Su una barra di avanzamento larga 400px il passaggio si legge come passaggio; su un bottone di 80x31px il centro slavato occupa meta' della superficie e i due estremi restano ai bordi — da cui l'impressione di "bordi di due colori diversi". Il testo, per giunta, ha il contrasto peggiore proprio sul centro. Qui i controlli piccoli passano al pieno d'accento con una sfumatura VERTICALE dello stesso colore: da --chain-accent-hi (l'accento mescolato al 18% di bianco, gia' calcolato da chains.js) al pieno. Non attraversa nessuna tinta, quindi non puo' inventare colori; da' solo il rilievo che una tinta piatta non ha. La rampa del marchio resta dov'e' nata e dove funziona: barre di avanzamento, titolo della home, e i bottoni a tutta larghezza — che sono larghi abbastanza da mostrarla per intero (vedi 14b-bis). */ /* IL BORDO COLORATO ALL'INCONTRARIO — questo era il difetto vero. Non era la rampa: era un anello di 1px del colore OPPOSTO tutt'attorno al bottone. Verde sul bordo sinistro (dove il riempimento e' viola) e magenta sul destro (dove il riempimento e' verde). Su desktop e' una linea sottile che si nota appena; su un telefono a 3x sono tre pixel fisici di colore acceso lungo tutto il perimetro, ed e' esattamente cio' che si vedeva. Il meccanismo, misurato sui valori calcolati: background-clip: border-box -> la sfumatura viene DIPINTA anche sotto il bordo background-origin: padding-box -> ma il suo sistema di coordinate e' il padding box, cioe' 1px piu' stretto per lato border: 1px solid transparent -> quel bordo esiste ed e' trasparente La sfumatura finisce quindi 1px prima del bordo su ogni lato, e li' il browser la RIPETE (background-repeat vale `repeat` di default): il lato sinistro mostra la fine della rampa, il destro l'inizio. Il bordo trasparente arriva da `border-color:transparent` in questa stessa regola, che serviva a togliere il contorno del bottone pieno: da sola era corretta, ma insieme alle altre due proprieta' ha prodotto l'anello. Due righe lo chiudono: la sfumatura si ancora allo stesso box su cui viene dipinta, e non si ripete comunque. */ .topbar .btn-launch-top:not(.ghost), .btn-launch, .side-cta:not(.ghost), .hero-cta:not(.ghost), .head-cta:not(.ghost), .btn-enter, .page-btn, .pf-btn-primary, .v2-cta:not(.ghost), .how-step .step-num{ background-origin:border-box; background-repeat:no-repeat; } /* La rampa del marchio resta quella di prima, su tutti i bottoni pieni. Nel giro precedente l'avevo sostituita con una sfumatura verticale a tinta unica per via del centro slavato: era la diagnosi sbagliata, il centro non era il problema. Tolto l'anello, la rampa e' quella che era e va bene. Cambia una cosa sola, e ha un numero dietro: su Solana in tema scuro il testo passa al bianco. L'inchiostro scuro sul viola dell'estremo sinistro misura 4.12 di contrasto, sotto la soglia 4.5 per un 13px in grassetto ("grassetto" conta come testo grande solo da 18.66px). Il bianco sullo stesso viola misura 4.54. Sulle altre chain l'inchiostro scuro sta gia' fra 5.2 e 6.5 e non si tocca. */ .topbar .btn-launch-top:not(.ghost), .btn-launch, .side-cta:not(.ghost), .hero-cta:not(.ghost), .head-cta:not(.ghost), .btn-enter{ background-image:var(--chain-grad-btn,none); background-color:var(--green); color:var(--on-fill-accent); } /* Il bottone di pagina e quello primario di profilo restano a tinta piena: sono piccoli e stanno in mezzo ad altri controlli neutri, dove una rampa diventa rumore invece che accento. */ .page-btn,.pf-btn-primary{ background:var(--fill-accent); color:var(--on-fill-accent); border-color:transparent; } /* Lo stato premuto. Su touch non esiste :hover, quindi senza :active un bottone non da' NESSUN riscontro al dito: si tocca e per 300ms non succede niente visibile, che e' la sensazione di "non ha funzionato". */ .topbar .btn-launch-top:active, .topbar .btn-connect:active, .topbar .chain-trigger:active, .btn-launch:active,.side-cta:active,.hero-cta:active, .chain-pill:active,.page-btn:active,.page-num:active{ transform:translateY(1px); filter:brightness(.94); } /* ---- 14c. iOS: UN CAMPO SOTTO I 16px INGRANDISCE LA PAGINA ---- Safari su iPhone ingrandisce la pagina quando si tocca un input con font-size inferiore a 16px, e NON la rimpicciolisce quando si esce: resta zoomata finche' l'utente non pizzica per tornare indietro. Misurati 48 campi sotto soglia, fra cui tutti quelli del modulo di lancio (nome, simbolo, descrizione, link) e il campo dell'importo di acquisto — cioe' esattamente i due punti in cui si sta compilando qualcosa e uno zoom improvviso fa perdere il filo. 16px va messo sul CAMPO, non sulla pagina: e' il valore che Safari legge. Il segnaposto puo' restare piu' piccolo, cosi' il modulo non cambia proporzioni. */ @media (max-width:900px){ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea{ font-size:16px; } /* Il testo del segnaposto puo' stare sotto: non e' su di lui che Safari decide lo zoom. Tenerlo a 15px evita che i campi stretti (importo, simbolo) vadano a capo. */ input::placeholder,textarea::placeholder{font-size:15px;} } /* ---- 14d. QUANTO DEVE ESSERE GRANDE UNA COSA DA TOCCARE ---- Apple chiede 44x44pt, Material 48x48dp. Misurati: il selettore di chain e il bottone di accesso a 30px di altezza, i numeri di pagina 30x30, "Prev" e "Next" a 30. Sotto i 36px l'errore di bersaglio con il pollice diventa misurabile, e nella paginazione i bersagli sono anche affiancati, che e' il caso peggiore. (hover:none) and (pointer:coarse) isola i dispositivi a dito: un desktop con schermo touch ha comunque un mouse e non deve ingrassare i controlli. */ @media (hover:none) and (pointer:coarse){ :root{ --ctl-h:44px; } .btn-connect,.chain-trigger,.btn-launch-top,.theme-btn, .chain-pill,.page-btn,.page-num,.qa-btn,.sort-chip,.mode-btn, .topnav-link,.side-link,.chain-item{ min-height:44px; } .page-num{min-width:44px;} /* Il bottone del tema resta quadrato quanto l'altezza, ma sotto i 420px la riga in alto non ha 44px da regalare: li' scende a 40, che resta sopra la soglia di errore misurabile e lascia intero il nome della chain. */ .theme-btn{min-width:44px;} @media (max-width:420px){ .theme-btn{width:40px;min-width:40px;} } /* Nella paginazione i bersagli sono uno accanto all'altro: senza spazio in mezzo, 44px ciascuno non bastano comunque. */ .pager,.pagination{gap:8px;} /* Le voci di menu e le righe di lista: l'altezza la fa il padding, non una min-height, o il testo resta incollato in alto. */ .chain-item,.side-link{padding-top:12px;padding-bottom:12px;} /* Privacy e Terms in fondo al cassetto misuravano 54x13. Sono link legali, quindi non serve un bersaglio da 44px pieno — ma 13px di altezza toccabile e due link affiancati sono comunque un rischio di tocco sbagliato su una pagina che si apre in una scheda nuova. Il padding li porta a 36 senza spostare il testo. */ .side-foot a{padding:12px 5px;} } /* ---- 14e. IL TESTO PIU' PICCOLO CHE HA SENSO IN MANO ---- Le micro-etichette stavano a 9,5px. Su un monitor a 60cm si leggono; su un telefono tenuto in mano no, e sono proprio quelle che dicono cosa stai guardando ("Closest to migration", "Live activity", i titoletti della colonna laterale). 11px con la spaziatura gia' presente resta discreto e diventa leggibile. */ @media (max-width:560px){ /* I selettori portano il contenitore davanti perche' le regole originali sono `.sidebar .side-label` e `#view-home .feat-k`: senza, questa perde per specificita' e non cambia niente — verificato misurando la pagina, non a occhio. */ .sidebar .side-label, #view-home .feat-k, #view-home .k, .side-label,.feat-k,.k,.gc-badge,.tk-k,.stat-k{ font-size:11px; /* Con la maiuscoletta e la spaziatura larga, 11px occupa piu' spazio di 9,5: si stringe la spaziatura invece di far andare a capo. */ letter-spacing:.06em; } #view-home .feat-note,.feat-note{font-size:11.5px;} /* Il nome della chain nella colonna laterale stava a 10px. */ .side-chain-label,.sidebar .side-chain{font-size:12px;} } /* ---- 14f. I DOPPIONI NELLA SCALA DEI RAGGI ---- Undici valori misurati nella stessa schermata. Alcuni sono scelte vere e vanno tenute — un raggio piu' piccolo DENTRO uno piu' grande e' come si annidano due superfici, quindi 6 dentro 10 e 12 dentro 14 sono corretti — altri erano lo stesso gradino scritto due volte: 99px e 999px disegnano la stessa forma su qualunque cosa piu' bassa di 198px: era la pillola, scritta in due modi; 8px e 9px contro 10px: un pixel e mezzo di differenza, che nessuno vede e che nessuno aveva deciso. Questi tre sono stati normalizzati ALLA FONTE (index.html, v2.css, v3.css), non con regole di rimonta qui: una sovrascrittura per componente sarebbe cresciuta a ogni componente nuovo, e il valore sbagliato sarebbe rimasto nel file dove qualcuno lo copia. Restano cosi' cinque gradini — 6 / 10 / 14 / 18 / pillola — che sono le variabili dichiarate in cima a questa sezione. Le due regole qui sotto coprono i pochi elementi il cui raggio arriva da una classe di utilita' e non da una dichiarazione propria. */ .chain-soon,.badge,.tag,.pill-xs{border-radius:var(--r-xs);} .chain-pill,.chain-menu .chain-item{border-radius:var(--r-pill);} /* ---- 14g. IL TESTO MINUSCOLO CHE RESTAVA ---- Dopo il giro di 14e restavano le micro-etichette a 8-10px: il badge BUY/SELL dell'attivita' dal vivo, le didascalie delle colonne, "price / token". Su desktop sono un dettaglio tipografico; su un telefono sono testo che si guarda e non si legge. Il pavimento e' 10px per i badge (sono in maiuscolo e in monospaziato, quindi reggono) e 11px per tutto il resto. */ @media (max-width:560px){ /* Il selettore ricalca quello originale, id compreso. Non e' pedanteria: `#view-home .ev-b` pesa 1-1-0, e una regola scritta come `.ev-b` o `body .ev-b` perde comunque, per quanto stia piu' in basso nel foglio. E' il tipo di correzione che sembra fatta e non lo e' finche' non la si misura sulla pagina renderizzata. */ #view-home .ev-b,#view-home .tr-lbl,.ev-b,.tr-lbl{font-size:10px;} /* Le didascalie sotto i numeri della card in evidenza stavano a 8,5px: sono quelle che dicono se il numero accanto e' un market cap o un volume, cioe' l'unica cosa che rende leggibile la card. */ #view-home .feat-nums span{font-size:10px;} #view-home .feat-side .k,#view-home .k,body .k, body .tk2-k,body .tk-k,body .stat-k, body .gc-pin-t,body .tk2-px-l,body .tk-px-l, body .tk2-act-d,body .side-chain-label, /* L'importo nella colonna dell'attivita' dal vivo e' un VALORE, non un'etichetta: sta con i numeri, non con i badge. */ #view-home .ev-v,.ev-v, .opt-tag,.chain-item-label, /* Il nome corto della chain nella barra e il badge del pannello di anteprima: gli ultimi due sotto soglia, misurati sulla home di Solana. */ .chain-trigger-short, /* "Network: " in fondo al cassetto laterale: e' l'unica riga che dice su quale rete si sta, quando il menu e' aperto. Il selettore ricalca l'originale (`.side-foot [data-chain-name]`), perche' `.side-foot span` pesa meno e perdeva. */ .side-foot [data-chain-name], #view-home .chain-preview .cp-soon{font-size:11px;} } /* ---- 14h. IL RIEMPIMENTO AUTOMATICO ---- Chrome dipinge gli input compilati in automatico con un giallo-azzurro suo (#E8F0FE), e lo fa con uno sfondo che NON si sovrascrive con background: e' un pseudo-livello del browser. Su un'interfaccia scura il risultato e' una casella chiara in mezzo a un modulo nero — si vede sul modulo di accesso con nome utente e password, che e' la prima cosa che un utente registrato incontra. L'unico modo di batterlo e' un'ombra interna abbastanza grande da coprire l'area, con un ritardo di transizione lunghissimo che impedisce al colore originale di riaffiorare. E' un trucco noto, ma e' l'unico che funziona. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill{ -webkit-text-fill-color:var(--text); -webkit-box-shadow:0 0 0 1000px var(--panel-2) inset; box-shadow:0 0 0 1000px var(--panel-2) inset; caret-color:var(--text); transition:background-color 100000s ease-in-out 0s; } /* ---- 14i. L'EROE A META' SULLE CHAIN NON ANCORA ATTIVE ---- .split e' una griglia di due colonne: a sinistra il testo che dice cosa fa il prodotto, a destra la card del token piu' vicino al traguardo. Su una chain non live quella card e' `display:none` — giustamente, non c'e' nessun token — ma la GRIGLIA continua a riservarle la colonna. Misurato su /sol/ a 1440px: il testo occupa 603px di una riga larga 1316, e i 700px a destra restano vuoti. Non e' uno spazio di respiro, e' un buco: la prima schermata della chain sembra una pagina caricata a meta'. Con una colonna sola il blocco torna deliberato. Il testo non si allarga fino al bordo — una riga da 1300px non si legge, si scansiona — ma resta su una misura da lettura e prende piu' respiro sopra e sotto, come farebbe l'apertura di una pagina di presentazione. :has() e' supportato da Safari 15.4, Chrome 105 e Firefox 121. Dove manca, la regola viene ignorata e resta il comportamento di oggi: nessuna rottura, solo il buco che c'era gia'. */ #view-home .split:has(> .feature.hidden){ grid-template-columns:1fr; /* margin-bottom a zero come nel caso con la scheda: la fascia dei totali e quella delle garanzie sono un pannello solo (v4.css sezione 25) e qui i 22px li separavano di nuovo. */ margin-bottom:0; } #view-home .split:has(> .feature.hidden) .pitch{ max-width:62ch; padding:26px 4px 22px; } #view-home .split:has(> .feature.hidden) .pitch h1{ /* Senza la card accanto a fare da contrappeso il titolo puo' crescere un poco, ma non tornare a 54px: a quella taglia la frase andava a QUATTRO righe dentro una colonna da 62 caratteri e si prendeva 250px di prima schermata da sola. Resta appena sopra la scala della home con la scheda, che e' quello che "un poco piu' grande" vuol dire. */ font-size:clamp(30px,16px + 1.3vw,42px); } @media (max-width:900px){ /* Su telefono la griglia e' gia' a una colonna: qui serve solo evitare che il titolo diventi sproporzionato rispetto al pannello di anteprima che ha sopra. */ #view-home .split:has(> .feature.hidden) .pitch{padding:14px 2px 10px;} #view-home .split:has(> .feature.hidden) .pitch h1{font-size:clamp(29px,6.8vw,38px);} } /* ---- 14j. IL TRAGUARDO DI BOND QUANDO NON SI SCEGLIE ---- Su Solana il traguardo e' cablato nel programma (69 SOL) e uguale per tutti i token: chains.js lo dichiara con min === max. Il cursore pero' restava nel modulo, trascinabile e senza effetto, sopra una scala che prometteva una scelta ("graduates sooner" / "deeper pool") che non esiste. Il cursore sparisce e resta il numero, che diventa l'elemento della card. La riga sotto smette di essere una scala e diventa una didascalia. */ .card.bond-fixed .bond-row{gap:0;} .card.bond-fixed #bondTarget{display:none;} .card.bond-fixed .bond-out{ font-size:30px;font-weight:600;line-height:1; color:var(--green); font-family:var(--font-mono); } /* L'unita' accanto al numero: senza, "69" da solo non dice 69 di cosa. */ .card.bond-fixed .bond-out::after{ content:" " attr(data-unit); font-size:15px;font-weight:500;color:var(--text-dim); letter-spacing:.02em; } .card.bond-fixed .bond-scale{ display:flex;justify-content:space-between;gap:12px; margin-top:10px;padding-top:10px; border-top:1px solid var(--border); font-size:12px;color:var(--text-mute); } @media (max-width:560px){ .card.bond-fixed .bond-scale{flex-direction:column;gap:4px;} .card.bond-fixed .bond-out{font-size:26px;} } /* ========================================================================== 15. LA COLONNA CHE MANCAVA NELLA LISTA -------------------------------------------------------------------------- Il server calcola una sparkline per ogni token (/api/tokens/sparklines), app.js la scarica in sparklinesCache, e renderSparklineSvg() disegna la curva completa di area e colore su/giu'. Tutto questo esisteva, era testato dal lato server, e non finiva da nessuna parte: la riga della lista non aveva un elemento in cui metterlo, e loadSparklines() cercava nodi con id="spark-..." che nessuno creava. Codice morto lungo tutta la catena. E' anche la ragione per cui la lista sembrava un elenco e non un mercato: quattro numeri e una barra di avanzamento dicono lo stato, ma non dicono COSA STA FACENDO il prezzo. La curva lo dice in un colpo d'occhio, ed e' la differenza fra una tabella e un terminale. ========================================================================== */ .tr-spark{ height:34px;min-width:0; display:flex;align-items:center; /* La curva non e' un dato da leggere, e' un dato da guardare: leggermente attenuata, torna piena quando il puntatore e' sulla riga. */ opacity:.82; transition:opacity .18s var(--v3-ease); } .tok-row:hover .tr-spark{opacity:1;} .tr-spark .spark-svg{width:100%;height:100%;} /* Il caso "nessun dato": una linea piatta, non un vuoto. Un vuoto sembra un errore di caricamento, una linea piatta dice "non si e' mosso". */ .spark-flat line{stroke:var(--v3-line);stroke-width:1.4;vector-effect:non-scaling-stroke;} /* Sotto i 900px l'intestazione sparisce e la riga diventa una scheda a due colonne (vedi la media query in index.html): li' la curva prende tutta la larghezza sotto il nome, dove ha piu' spazio di quanto ne avesse in colonna. E' l'unico punto della riga dove un elemento grafico guadagna a essere piu' grande invece che piu' piccolo. */ @media (max-width:900px){ .tr-spark{ grid-column:1 / -1; height:30px; order:2; /* subito dopo il nome, prima dei numeri */ margin:2px 0 4px; opacity:1; } .tr-id{order:1;} .tr-num[data-col="mcap"]{order:3;} .tr-num[data-col="vol"]{order:4;} .tr-prog{order:5;} .tr-ca{order:6;} } /* Schermi molto stretti: la curva resta, ma piu' bassa. E' informazione, non decorazione, quindi non si toglie. */ @media (max-width:400px){ .tr-spark{height:26px;} } /* ========================================================================== 16. ELEVAZIONE -------------------------------------------------------------------------- Misurato: OGNI superficie della home ha box-shadow:none. Card in evidenza, pannello della lista, passi del "come funziona", riquadri delle statistiche, tutti disegnati con un solo bordo da 1px su un fondo appena piu' chiaro. E' il motivo per cui la pagina legge piatta anche quando il contenuto e' ricco: senza una differenza di piano, dodici rettangoli affiancati hanno tutti lo stesso peso, e l'occhio non sa da dove cominciare. Qui si introducono tre piani, non di piu'. Tre bastano a dire "questo sta sopra quello" e restano leggibili; a cinque nessuno distingue piu' il terzo dal quarto e servono solo a far sembrare la pagina sporca. piano 0 le righe di una lista, gli elementi in linea. Nessuna ombra: una riga non e' un oggetto sollevato, e' contenuto. piano 1 i pannelli. Ombra larga e tenue, piu' un filo di luce sul bordo superiore: e' quello che fa leggere la superficie come una lastra invece che come un rettangolo disegnato. piano 2 la card in evidenza. Stessa forma del piano 1 ma piu' profonda, cosi' domina la prima schermata senza bisogno di essere piu' grande o piu' colorata. Le ombre sul SCURO non sono nere: su un fondo gia' quasi nero un'ombra nera non si vede. Sono nere ma molto larghe e molto diluite, e il lavoro vero lo fa il filo di luce in cima, che e' cio' che l'occhio legge come spessore. Sul chiaro si inverte: l'ombra si vede e il filo di luce no. ========================================================================== */ :root{ /* Il filo di luce sul bordo superiore. Su una superficie scura vale piu' dell'ombra: e' il bordo di una lastra colpita dalla luce dall'alto. */ --lift-edge:inset 0 1px 0 rgba(255,255,255,.055); --lift-1:0 1px 2px rgba(0,0,0,.28), 0 8px 24px -12px rgba(0,0,0,.55); --lift-2:0 2px 4px rgba(0,0,0,.32), 0 18px 48px -20px rgba(0,0,0,.7); } :root[data-theme="light"]{ /* Sul chiaro il filo di luce non ha nulla da riflettere e sparisce; l'ombra invece diventa l'unico segnale, quindi si vede davvero. Resta fredda (16,24,40) e non nera: un grigio neutro su un bianco leggermente caldo legge come sporco. */ --lift-edge:inset 0 1px 0 rgba(255,255,255,.9); --lift-1:0 1px 2px rgba(16,24,40,.05), 0 8px 20px -10px rgba(16,24,40,.14); --lift-2:0 2px 6px rgba(16,24,40,.07), 0 20px 44px -18px rgba(16,24,40,.2); } /* ---- piano 1: i pannelli ---- */ #view-home .tok-panel, #view-home .how .how-step, #view-home .feature-row > *, .tok-panel,.pf-card,.tk2-card,.card, .trades-list,.holders-list{ box-shadow:var(--lift-edge), var(--lift-1); } /* ---- piano 2: la card in evidenza ---- */ #view-home .feature{ box-shadow:var(--lift-edge), var(--lift-2); } /* ---- piano 0: cio' che NON va sollevato ---- Le righe di una lista vivono DENTRO un pannello gia' sollevato: darne una propria le staccherebbe dal contenitore e la lista tornerebbe a essere una pila di schede, che e' l'opposto di quello che deve sembrare. */ #view-home .tok-row,#view-home .tr-row,#view-home .hl-row, .tok-row,.tr-row,.hl-row,.tm-row{box-shadow:none;} /* ---- 16b. IL PASSAGGIO DEL PUNTATORE SU CIO' CHE SI PUO' APRIRE ---- Una card che si puo' cliccare deve rispondere; una che si legge e basta no. Distinguerle e' meta' del lavoro: quando tutto reagisce, nessun movimento significa piu' niente. Il sollevamento e' di UN pixel. A due si vede il salto, a tre sembra che la pagina traballi; a uno si sente e non si nota, che e' quello che serve. */ #view-home .tok-panel,#view-home .feature{ transition:box-shadow .28s var(--v3-ease), transform .28s var(--v3-ease); } #view-home .feature:hover{ box-shadow:var(--lift-edge), var(--lift-2), 0 0 0 1px color-mix(in srgb, var(--green) 22%, transparent); } /* I passi del "come funziona" non si aprono: restano fermi. */ #view-home .how .how-step{transition:none;} /* ---- 16c. IL FILO D'ACCENTO IN CIMA AL PANNELLO PRINCIPALE ---- Un accenno del colore della chain sul bordo superiore della lista: e' il dettaglio che lega il pannello piu' importante della pagina alla rete su cui si sta, senza colorare nessuna superficie. Sfuma ai lati, quindi non diventa una riga piena che competerebbe con l'intestazione delle colonne. */ #view-home .tok-panel{position:relative;} #view-home .tok-panel::before{ content:""; position:absolute;inset:0 0 auto 0;height:1px; background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--green) 55%, transparent) 22%, color-mix(in srgb, var(--green) 55%, transparent) 78%, transparent 100%); pointer-events:none; z-index:1; } /* ========================================================================== 17. IL FONDO DELLA PAGINA -------------------------------------------------------------------------- Solana aveva gia' due aloni molto larghi e molto tenui sul fondo (sezione 12b): viola in alto a sinistra, verde in basso a destra, sopra il nero di base. Le altre chain no: fondo a tinta unica, e la differenza si vede passando dall'una all'altra, perche' una pagina piatta dietro delle lastre sollevate le fa sembrare incollate su un cartone. Qui l'effetto diventa di tutte, ricavato da --chain-accent invece che scritto a mano per rete: BNB prende un oro appena percettibile, HyperEVM un'acquamarina, Robinhood un verde, Arc un blu. Nessun colore nuovo entra nel foglio. Le percentuali sono basse di proposito. A valori piu' alti il fondo compete con le card, che sono appena piu' chiare di lui, e la gerarchia che la sezione 16 ha appena costruito si perde. L'effetto si deve notare solo se lo cerchi: e' quello che distingue una superficie da uno sfondo. Solana tiene la sua regola, che ha DUE colori del marchio e non uno, e sta piu' avanti nel foglio: quella vince e resta. ========================================================================== */ :root body{ background: radial-gradient(120% 78% at 10% 0%, color-mix(in srgb, var(--chain-accent, transparent) 9%, transparent) 0%, transparent 56%), radial-gradient(110% 72% at 92% 100%, color-mix(in srgb, var(--chain-accent, transparent) 6%, transparent) 0%, transparent 58%), var(--v2-bg-deep, var(--bg)); background-attachment:fixed; } :root[data-theme="light"] body{ /* Sul chiaro lo stesso alone a piena forza diventa una macchia colorata su bianco. Serve un terzo dell'intensita', e il fondo di base e' --bg e non --v2-bg-deep, che e' un valore pensato per lo scuro. */ background: radial-gradient(120% 78% at 10% 0%, color-mix(in srgb, var(--chain-accent, transparent) 5%, transparent) 0%, transparent 56%), radial-gradient(110% 72% at 92% 100%, color-mix(in srgb, var(--chain-accent, transparent) 4%, transparent) 0%, transparent 58%), var(--bg); background-attachment:fixed; } /* Su telefono background-attachment:fixed costa un repaint a ogni scorrimento e su iOS e' anche fonte di sfarfallii noti. L'alone resta, ancorato alla pagina invece che alla finestra: la differenza non si vede, il costo si'. */ @media (max-width:900px){ :root body,:root[data-theme="light"] body{background-attachment:scroll;} } /* ---- 17b. I TRE NUMERI DELLA CARD IN EVIDENZA ---- Sono in fila con 36px di distanza fissa. A larghezza piena entrano; fra i ~1100 e i ~1300px la colonna della card si stringe e il valore piu' lungo ("30.186 HYPE", "168.88 BNB") va a capo fra la cifra e il simbolo. Quando uno dei tre si sdoppia, la sua etichetta scende di una riga e le tre didascalie non sono piu' allineate: la card sembra sfasata proprio nella fascia di larghezze di un portatile. Due correzioni, nessuna delle quali rimpicciolisce il numero a larghezza piena: la distanza diventa elastica e scende fino a 18px prima di sacrificare qualcosa, e il valore non va mai a capo. Sotto una certa larghezza e' la MISURA a cedere, non la riga, cosi' le etichette restano allineate e la card resta leggibile. */ #view-home .feat-nums{ gap:clamp(18px,2.4vw,36px); align-items:flex-start; } #view-home .feat-nums > div{min-width:0;} #view-home .feat-nums b{ white-space:nowrap; font-size:clamp(17px,1.55vw,22px); display:block; } /* ========================================================================== 18. LA BARRA DEI CONTROLLI SOPRA LA LISTA -------------------------------------------------------------------------- Misurato a 1440x900: fra la striscia dei totali e la prima riga di dati ci sono 226px di soli comandi, su tre bande separate che galleggiano sul fondo pagina. Le reti, i filtri e la fisarmonica delle spiegazioni sono tre cose utili, ma messe cosi' occupano un quarto della prima schermata e nessuna delle tre sembra appartenere alla lista che comanda. Non si toglie niente: si uniscono. Le reti e i filtri diventano UNA superficie, con un filo di separazione fra i due gruppi, agganciata in cima al pannello dei token. Da tre rettangoli sciolti a un oggetto solo con la sua testata, che e' come si presenta la barra strumenti di un terminale. Sono anche una sessantina di pixel guadagnati, ma il punto non e' lo spazio: e' che adesso si capisce che quei comandi filtrano QUELLA lista. ========================================================================== */ #view-home .section-head{ background:var(--v3-panel); border:1px solid var(--v3-line); border-bottom:0; border-radius:var(--r-md) var(--r-md) 0 0; box-shadow:var(--lift-edge), var(--lift-1); padding:12px 14px 0; margin-bottom:0; position:relative; overflow:hidden; } /* Il filo d'accento passa dal pannello alla barra: ora e' lei il bordo superiore dell'oggetto, e lasciarlo dov'era lo avrebbe disegnato in mezzo. */ #view-home .tok-panel::before{content:none;} #view-home .section-head::before{ content:""; position:absolute;inset:0 0 auto 0;height:1px; background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--green) 55%, transparent) 22%, color-mix(in srgb, var(--green) 55%, transparent) 78%, transparent 100%); pointer-events:none; } /* Una riga sottile fra le reti e i filtri: sono due gruppi diversi e senza separazione si leggono come una sola fila lunga di pillole. */ #view-home .section-head .feed-tabs{ border-top:1px solid var(--v3-line); margin-top:11px; padding:8px 0 9px; } #view-home .section-head .chain-row{padding-bottom:1px;} /* Il pannello perde il bordo e gli angoli in alto: e' lo stesso oggetto. */ #view-home .tok-panel{ border-top-left-radius:0; border-top-right-radius:0; border-top:0; margin-top:0; /* L'ombra ora la porta la barra, che sta sopra: ripeterla qui disegnerebbe una riga scura a meta' dell'oggetto. */ box-shadow:var(--lift-1); } /* Su telefono le due file scorrono in orizzontale invece di andare a capo su tre righe: una fila di filtri che si impila e' alta quanto due schede di token, e nessuno la legge tutta. */ @media (max-width:760px){ #view-home .section-head{padding:10px 12px 0;border-radius:var(--r-sm) var(--r-sm) 0 0;} #view-home .section-head .chain-row, #view-home .section-head .feed-tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; } #view-home .section-head .chain-row::-webkit-scrollbar, #view-home .section-head .feed-tabs::-webkit-scrollbar{display:none;} #view-home .section-head .chain-row > *, #view-home .section-head .feed-tabs > *{flex:0 0 auto;} } /* ---- 18b. LA TESTATA DELLE COLONNE, UNA SOLA VOCE ---- Misurate le sei celle: tre erano etichette (9px, JetBrains Mono, tracking +0.99, grigio 105,114,125) e tre erano VALORI (14px, ui-monospace, tracking -0.28, bianco 247,247,246). Nella stessa riga. Il motivo e' che "Market cap", "Volume" e "Contract" portano la classe .tr-num per allinearsi a destra come i numeri sotto, e .tr-num porta con se' anche corpo, colore e famiglia dei numeri. Cosi' tre intestazioni si presentano come dati e tre come etichette, e la riga non ha piu' una voce sola. E' il genere di incoerenza che non si sa nominare guardandola ma che fa sembrare la tabella montata a pezzi. L'allineamento a destra resta, perche' serve; tutto il resto torna a essere quello delle etichette. 10,5px e non 9: a nove, in maiuscoletto e con il tracking largo, la riga si legge solo se ci si avvicina. */ #view-home .tok-head > *, .tok-head > *{ font-size:10.5px; font-family:var(--v3-mono); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--v3-mute); } #view-home .tok-head .tr-num, .tok-head .tr-num{text-align:right;} /* ---- 18c. L'ALTEZZA DELLA BARRA ---- 149px per due file di pillole sono troppi: la barra deve introdurre la lista, non competerci. Si stringe la spaziatura interna, non i bersagli, che restano quelli di prima (su touch la sezione 14d li tiene a 44px). */ #view-home .section-head{padding:9px 14px 0;} #view-home .section-head .chain-row{gap:7px;} #view-home .section-head .feed-tabs{margin-top:8px;padding:7px 0 8px;} #view-home .section-head .chain-pill{padding-top:6px;padding-bottom:6px;} /* ---- 18d. "TREND" AL CENTRO DELLA SUA COLONNA ---- Misurate le distanze fra le sei etichette: Volume finisce a 12px da Trend a ogni larghezza, perche' Volume e' allineata a destra nella sua colonna e Trend a sinistra nella successiva, con 12px di gap in mezzo. A quella distanza si leggono come una voce sola, "VOLUME TREND". A destra tornerebbe addosso a "To bond". Al centro no: la curva riempie tutta la cella, quindi centrare e' anche la scelta onesta, e restano una cinquantina di pixel per lato. */ #view-home .tok-head > *:nth-child(4), .tok-head > *:nth-child(4){text-align:center;}