/* ========================================================================== v4 — "CINEMA" ========================================================================== COS'E'. Un livello di REGIA sopra v2/v3. Non ridisegna le schermate — quelle funzionano — ma cambia il modo in cui sono illuminate. Il sito, prima di questo foglio, era corretto e piatto: superfici grigie su fondo nero, bordi a un pixel, nessuna profondita'. Legge bene, ma non dice niente su chi l'ha fatto. Un launchpad che tiene i soldi della gente deve sembrare costato qualcosa. LE QUATTRO LEVE, in ordine di quanto si vedono: 1. LUCE. Un fondo che non e' piu' una tinta ma uno spazio: alone caldo in alto (la sorgente), vignetta che chiude in basso, grana di pellicola sopra tutto. La grana e' la cosa che, da sola, toglie il "fatto col CSS" da un'interfaccia scura. 2. MATERIA. Ogni pannello prende un bordo a GRADIENTE — chiaro dove la luce lo colpisce, spento sotto — piu' un filo interno di luce e un'ombra vera. E' quello che fa leggere una card come un oggetto appoggiato invece che come un rettangolo dipinto. 3. FUOCO. Il puntatore porta con se' un alone: la superficie sotto il mouse si accende nel colore della chain. Costa due variabili aggiornate da v4.js dentro un rAF, e nient'altro. 4. TEMPO. Niente compare di colpo: le sezioni salgono di 14px quando entrano nello schermo, le cifre contano, i bottoni hanno un riflesso che passa. Una sola curva, una sola durata di base. COSA NON FA, di proposito: - non tocca le misure. Nessun padding, nessuna colonna, nessun font-size dei dati cambia: le schermate dense restano dense. Aggiunge ombre, gradienti, transizioni — proprieta' che non spostano niente. - non colora i dati. Verde = compra, rosso = vendi, accento = chain: valgono le regole di v2 e non le tocco. - non usa !important se non dove v3 spegne esplicitamente qualcosa che qui deve tornare (sono cinque righe, tutte marcate). ORDINE: va caricato PER ULTIMO. A parita' di specificita' vince l'ordine di cascata, ed e' cosi' che questo foglio riaccende cio' che v3 aveva spento sulla home senza dover salire di specificita' ovunque. ========================================================================== */ /* ========================================================================== 1. TOKEN ========================================================================== Tutto quello che segue legge da qui. --green-rgb e' l'accento della chain attiva ed e' gia' definito da index.html: v4 non ridichiara nessun colore di marca, si limita a comporne le sfumature. ========================================================================== */ :root{ --v4-ease:cubic-bezier(.22,1,.36,1); --v4-ease-soft:cubic-bezier(.16,1,.3,1); --v4-t:.42s; /* durata di base: tutto il resto e' una frazione o un multiplo */ --v4-t-fast:.22s; /* Bordi. Il "hi" e' il lato illuminato, il "lo" quello in ombra: sono i due estremi del gradiente che disegna il contorno dei pannelli. */ --v4-edge-hi:rgba(255,255,255,.14); --v4-edge-lo:rgba(255,255,255,.035); --v4-edge-accent:rgba(var(--green-rgb),.38); /* Vetro. Due fermate in piu' rispetto a --v2-glass: la seconda tiene il mezzotono, senza la superficie sbiadisce subito sotto il bordo. */ --v4-glass:linear-gradient(176deg, rgba(255,255,255,.062) 0%, rgba(255,255,255,.022) 18%, rgba(255,255,255,.008) 46%, rgba(255,255,255,0) 100%); --v4-glass-soft:linear-gradient(176deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.012) 24%, rgba(255,255,255,0) 100%); /* Ombre. Tre livelli, la terza ha la caduta lunga che serve a far galleggiare i pannelli grandi. */ --v4-lift-1:0 1px 2px rgba(0,0,0,.5), 0 6px 16px -10px rgba(0,0,0,.8); --v4-lift-2:0 2px 6px rgba(0,0,0,.45), 0 18px 40px -22px rgba(0,0,0,.9); --v4-lift-3:0 4px 12px rgba(0,0,0,.5), 0 40px 80px -34px rgba(0,0,0,1); --v4-inner:inset 0 1px 0 rgba(255,255,255,.075); --v4-glow-sm:0 0 0 1px rgba(var(--green-rgb),.14), 0 8px 26px -12px rgba(var(--green-rgb),.5); --v4-glow-md:0 10px 40px -14px rgba(var(--green-rgb),.62); --v4-r-xl:20px; --v4-r-lg:16px; --v4-r-md:12px; --v4-r-sm:9px; /* Posizione del puntatore dentro l'elemento illuminato. v4.js le riscrive; il ripiego mette l'alone al centro, cosi' senza JS non si vede niente di sbagliato — si vede solo meno. */ --v4-mx:50%; --v4-my:0%; } /* ========================================================================== 2. LO SPAZIO ========================================================================== Tre strati fissi dietro tutto, in quest'ordine dal fondo: a. l'alone della sorgente in alto + la vignetta in basso (body::before) b. la grana (.v4-grain) c. il contenuto Nessuno dei tre intercetta il puntatore e nessuno anima proprieta' che costringano a ridisegnare: la grana e' una texture statica, l'alone e' un gradiente fermo. ========================================================================== */ /* v2 usa gia' body::before per la griglia e body::after per la vignetta. Qui NON li tocco: aggiungo uno strato mio, in un elemento vero creato da v4.js, cosi' i due sistemi non si contendono lo stesso pseudo-elemento. */ .v4-stage{ position:fixed;inset:0;z-index:0;pointer-events:none; contain:strict; } .v4-stage::before{ /* LA SORGENTE. Un'ellisse larga in alto, nel colore della chain, con una seconda fermata quasi neutra: senza quella il colore resta appiccicato al bordo superiore invece di diffondersi. Le alfe sono scese di circa il quaranta per cento. Sommate all'aurora di v2 e al campo stellato facevano un fondo che si guardava da solo: passando dall'ingresso all'applicazione sembrava di cambiare sito, perche' li' il fondo e' quasi fermo e qui era acceso. Ora la sorgente si vede ancora, ma sta dietro il contenuto invece che accanto. */ content:"";position:absolute;inset:0; background: radial-gradient(120% 62% at 50% -12%, rgba(var(--green-rgb),.085) 0%, rgba(var(--green-rgb),.032) 26%, rgba(255,255,255,.012) 46%, transparent 72%), radial-gradient(90% 50% at 8% 4%, rgba(255,255,255,.02), transparent 60%); } .v4-stage::after{ /* LA CHIUSURA. Scurisce i bordi e soprattutto il fondo pagina: e' quello che impedisce alla lista di token di "finire nel nulla" quando scorre. */ content:"";position:absolute;inset:0; background: radial-gradient(140% 100% at 50% 100%, rgba(0,0,0,.62) 0%, transparent 55%), radial-gradient(100% 100% at 50% 50%, transparent 42%, rgba(0,0,0,.45) 100%); } /* LA GRANA. E' l'ingrediente che si nota di meno e cambia di piu'. Senza, un fondo scuro con gradienti mostra le bande di quantizzazione a 8 bit — quelle fasce concentriche visibili negli aloni — e l'occhio le legge come "immagine compressa". Un rumore all'1.8% le rompe. E' una SVG in data URI: nessuna richiesta di rete, nessun canvas, nessun frame ridisegnato. La dimensione fissa in px (non in %) evita che il pattern si stiri su schermi larghi diventando visibile. */ .v4-grain{ position:fixed;inset:0;z-index:0;pointer-events:none; opacity:.045;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); background-size:160px 160px; contain:strict; } /* L'AURORA DI v2, RIPORTATA AL PESO DELL'INGRESSO. Sono due cerchi da 58 e 66vmax — piu' larghi dello schermo — uno nel colore della rete in alto a sinistra e uno freddo in basso a destra, che derivano lentamente. A .34 erano la cosa piu' luminosa della pagina dopo i bottoni: il fondo aveva un colore proprio e i pannelli ci galleggiavano sopra invece di appoggiarci. La landing usa aloni fermi al 16 e all'11 per cento e si legge molto piu' calma; qui si scende alla stessa fascia. Non spariscono: senza, il fondo diventa nero piatto e i pannelli, che sono quasi neri anche loro, perdono il bordo. */ :root{--v2-field-op:.13;} :root[data-chain="bsc"]{--v2-field-op:.09;} :root[data-chain="solana"]{--v2-field-op:.085;} /* Sotto il marchio discarica il campo ambientale e' uguale su ogni rete: le due righe sopra restano per il brand classico ma non devono affiorare quando la pelle e' quella della discarica. */ :root[data-brand="trash"]{--v2-field-op:.24;} /* IL CAMPO STELLATO. A .85 i punti si contavano, e su una lista di token si leggevano come sporco sopra il contenuto. E' texture, non decorazione: deve dare profondita' al nero senza che si noti da cosa. */ #starfield-bg{z-index:0;opacity:.4;} /* Sopra gli strati di regia deve stare TUTTO il resto: l'applicazione non dichiara uno z-index sul proprio contenitore e senza questo la grana ci finirebbe sopra. */ /* NIENTE z-index SU .app, ed e' importante. .app e' gia' position:relative (index.html) senza z-index: posizionato ma NON un contesto di impilamento. Cosi' il cassetto mobile (.sidebar, z-index 60, dentro .app) puo' salire sopra il velo #mBackdrop (z-index 50, fuori da .app). Il primo v4 gli dava z-index:2 per stare sopra la grana: ha chiuso il cassetto dentro un contesto e il velo lo copriva. Gli strati di regia stanno a 0 e vengono PRIMA nel DOM: e' l'ordine a tenerli sotto, come gia' per aurora e reticolo di v2. */ .app{position:relative;} /* ========================================================================== 3. TIPOGRAFIA ========================================================================== Non cambio famiglie ne' corpo dei dati. Cambio la GERARCHIA: i titoli diventano piu' stretti e piu' grandi, le microetichette piu' larghe e piu' spente. E' il contrasto fra questi due estremi che si legge come "curato". ========================================================================== */ h1,h2,h3,.section-title{ letter-spacing:-.03em; text-wrap:balance; } h1{letter-spacing:-.042em;} /* Il titolo dell'hero prende una rampa di bianco: pieno in alto, appena velato in basso. E' un dettaglio da due righe che fa sembrare il testo illuminato da sopra invece che stampato. */ .pitch h1, .hero h1{ background:linear-gradient(180deg,#fff 4%,rgba(255,255,255,.78) 92%); -webkit-background-clip:text;background-clip:text; color:transparent; /* Il ritaglio sul testo taglia le code di g/y/p quando line-height e' sotto 1: si restituisce lo spazio e lo si riassorbe col margine, come gia' fatto sulla landing. */ padding-bottom:.12em;margin-bottom:-.1em; } /* La parte accentata del titolo resta accentata: e' identita' di chain e non deve essere mangiata dalla rampa qui sopra. */ .hero h1 .accent{ -webkit-text-fill-color:var(--green); background:none;color:var(--green); } /* MICROETICHETTE. Ovunque compaia un'etichetta in maiuscoletto sopra un numero, deve essere piccola, spaziata e spenta: il numero e' il protagonista, l'etichetta e' la didascalia. */ .ms-item dt,.stat-label,.tk-stat-label,.pf-stat-k,.tr-lbl, .tok-head,.section-head .head-k,.feat-k,.docs-tab{ letter-spacing:.14em; } /* NUMERI. Cifre a larghezza fissa ovunque un valore possa cambiare: senza, la riga "balla" ad ogni aggiornamento live. v2 lo fa gia' in alcuni punti, qui vale per tutti. */ .mono,.ms-item dd,.stat-value,.tr-num,.pf-stat-v,.feat-nums b,.tk2-v, .proof b,.v4-num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"zero" 1; } /* ========================================================================== 4. MATERIA — le superfici ========================================================================== IL BORDO A GRADIENTE, spiegato una volta sola perche' ricorre ovunque. Un `border:1px solid` ha un colore solo: illumina il pannello in modo uniforme e lo appiattisce. Serve invece un contorno piu' chiaro in alto e spento in basso — cioe' un GRADIENTE dentro un bordo, che il CSS non permette direttamente. La tecnica: un ::before assoluto che copre il pannello, riempito col gradiente, ritagliato a ciambella da due maschere sovrapposte in `xor` (una piena, una rientrata di 1px con padding-box). Resta solo il contorno. Costa un pseudo-elemento e nessun ridisegno. Perche' non `border-image`: border-image non segue border-radius sui bordi arrotondati compositi e su Safari lascia gli angoli tagliati. */ .hero,.card,.tok-panel,.chart-card,.pf-panel,.modal,.dex-embed-card, .pf-summary-card,.tm-col,.docs-sec,.feature-card,.how-step,.pf-stat, .saved-card,.pf-stock-card,.token-card,.market-bar,.trend-card,.stock-hero{ position:relative; isolation:isolate; } .hero::after,.card::after,.tok-panel::after,.chart-card::after, .pf-panel::after,.modal::after,.dex-embed-card::after,.pf-summary-card::after, .tm-col::after,.docs-sec::after,.feature-card::after, .pf-stat::after,.saved-card::after,.token-card::after,.market-bar::after{ content:"";position:absolute;inset:0;border-radius:inherit; padding:1px; background:linear-gradient(160deg, var(--v4-edge-hi) 0%, var(--v4-edge-lo) 38%, rgba(255,255,255,.02) 62%, var(--v4-edge-hi) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; pointer-events:none;z-index:1; opacity:.9; transition:opacity var(--v4-t) var(--v4-ease); } /* .how-step E' L'ECCEZIONE, e va spiegata perche' l'ho gia' sbagliata una volta. Il suo ::after e' la FRECCIA che collega un passo al successivo, messa da v2 a right:-14px, cioe' fuori dal riquadro. Includendolo nel gruppo qui sopra, `position:absolute;inset:0` gli riscriveva la posizione e la freccia finiva incollata al bordo SINISTRO della card, dentro il testo. Qui il bordo passa quindi sul ::before — che v2 dichiara gia' come sovrapposizione vuota a inset:0, quindi non tolgo niente a nessuno. */ .how-step::before{ padding:1px;overflow:visible; background:linear-gradient(160deg, var(--v4-edge-hi) 0%,var(--v4-edge-lo) 38%, rgba(255,255,255,.02) 62%,var(--v4-edge-hi) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; transition:opacity var(--v4-t) var(--v4-ease); } /* Il corpo del pannello: vetro + rilievo + filo di luce interno. */ .card,.pf-panel,.feature-card,.how-step,.pf-stat,.pf-summary-card, .pf-stock-card,.saved-card,.tm-col,.docs-sec,.dex-embed-card{ background-image:var(--v4-glass); box-shadow:var(--v4-inner),var(--v4-lift-1); border-radius:var(--v4-r-lg); transition:box-shadow var(--v4-t) var(--v4-ease), transform var(--v4-t) var(--v4-ease), border-color var(--v4-t) var(--v4-ease); } .tok-panel,.chart-card{ box-shadow:var(--v4-inner),var(--v4-lift-2); border-radius:var(--v4-r-xl); } .hero,.modal{ box-shadow:var(--v4-inner),var(--v4-lift-3); border-radius:var(--v4-r-xl); } /* IL FUOCO. L'alone che segue il puntatore. Sta su un ::before (l'::after e' gia' il bordo) sotto al contenuto, e vive solo mentre il mouse e' dentro: opacity 0 -> 1 in transizione, cosi' entrare e uscire non e' uno scatto. Il gradiente e' ancorato a --v4-mx/my, che v4.js aggiorna solo per l'elemento sotto il puntatore. */ .card,.tok-panel,.chart-card,.pf-panel,.feature-card,.how-step,.pf-stat, .docs-sec,.tm-col,.pf-summary-card,.saved-card{ --v4-spot:0; } .card::before,.tok-panel::before,.chart-card::before,.pf-panel::before, .feature-card::before,.pf-stat::before,.docs-sec::before,.tm-col::before, .pf-summary-card::before,.saved-card::before{ content:"";position:absolute;inset:0;border-radius:inherit; background:radial-gradient(420px circle at var(--v4-mx) var(--v4-my), rgba(var(--green-rgb),.1) 0%, rgba(var(--green-rgb),.035) 32%, transparent 68%); opacity:var(--v4-spot); transition:opacity .5s var(--v4-ease); /* z-index:-1 e NON 0. Il primo tentativo metteva l'alone a 0 e spingeva i figli diretti a `position:relative;z-index:2` per tenerli sopra. Ha rotto ogni figlio GIA' in posizione assoluta — le icone in alto a destra delle schede del profilo sono tornate in flusso e sono finite addosso alle etichette. Con -1 non serve toccare i figli: dentro un contesto di impilamento (--isolation:isolate qui sopra) uno strato negativo si dipinge SOPRA lo sfondo del pannello e SOTTO il contenuto, che e' esattamente l'ordine voluto. */ pointer-events:none;z-index:-1; } /* Sollevamento al passaggio. Due pixel, non di piu': su una lista densa un movimento maggiore fa "saltare" le righe vicine. */ .feature-card:hover,.how-step:hover,.pf-stat:hover,.saved-card:hover, .pf-stock-card:hover,.docs-sec:hover{ transform:translateY(-2px); box-shadow:var(--v4-inner),var(--v4-lift-2); } .feature-card:hover::after,.pf-stat:hover::after, .card:hover::after,.tok-panel:hover::after{opacity:1;} /* ========================================================================== 5. LA BARRA IN ALTO ========================================================================== Da "riga con un bordo sotto" a barra sospesa: il vetro si fa piu' denso quando la pagina scorre (classe messa da v4.js), e sotto compare una linea che si accende al centro nel colore della chain. E' l'unico elemento sempre visibile: e' li' che si giudica se un sito e' curato. ========================================================================== */ .topbar{ position:sticky;top:0;z-index:60; background:linear-gradient(180deg, rgba(var(--v4-bar-rgb,6,9,13),.72), rgba(var(--v4-bar-rgb,6,9,13),.42)); border-bottom:1px solid transparent; backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); transition:background var(--v4-t) var(--v4-ease), box-shadow var(--v4-t) var(--v4-ease); } :root[data-chain="arc"]{--v4-bar-rgb:6,10,22;} :root[data-chain="bsc"]{--v4-bar-rgb:7,7,6;} :root[data-chain="hyperevm"]{--v4-bar-rgb:5,13,11;} :root[data-chain="solana"]{--v4-bar-rgb:7,6,12;} /* La discarica non tinge la barra di rete in rete: stessa lamiera per tutte. */ :root[data-brand="trash"]{--v4-bar-rgb:28,29,20;} /* La linea sotto la barra: spenta ai lati, accesa al centro. Un bordo pieno taglia la pagina in due; questa la sottolinea. */ .topbar::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg, transparent 0%, var(--v4-edge-lo) 12%, rgba(var(--green-rgb),.42) 50%, var(--v4-edge-lo) 88%, transparent 100%); opacity:.75;pointer-events:none; } .topbar.v4-scrolled{ background:linear-gradient(180deg, rgba(var(--v4-bar-rgb,6,9,13),.94), rgba(var(--v4-bar-rgb,6,9,13),.82)); box-shadow:0 1px 0 rgba(255,255,255,.04),0 18px 40px -28px rgba(0,0,0,1); } /* I link: la sottolineatura cresce dal centro invece di comparire. */ .topnav-link{ position:relative; transition:color var(--v4-t-fast) var(--v4-ease); } .topnav-link::after{ content:"";position:absolute;left:50%;right:50%;bottom:2px;height:2px; border-radius:2px; background:linear-gradient(90deg,transparent,var(--green),transparent); transition:left var(--v4-t) var(--v4-ease),right var(--v4-t) var(--v4-ease), opacity var(--v4-t) var(--v4-ease); opacity:0; } .topnav-link:hover::after{left:24%;right:24%;opacity:.7;} .topnav-link.active::after{left:16%;right:16%;opacity:1;} .topnav-link.active{color:var(--text);} /* Il marchio: il logo prende un alone tenue nel colore della chain, cosi' l'angolo in alto a sinistra non e' un buco scuro. */ .topbar .brand-top .hero-logo{ filter:drop-shadow(0 0 12px rgba(var(--green-rgb),.45)); transition:filter var(--v4-t) var(--v4-ease),transform var(--v4-t) var(--v4-ease); } .topbar .brand-top:hover .hero-logo{ filter:drop-shadow(0 0 18px rgba(var(--green-rgb),.7)); transform:rotate(-8deg) scale(1.06); } .topbar .brand-top .brand-name{letter-spacing:-.028em;} /* La ricerca: da campo a "comando". Si allarga quando prende il fuoco. */ .search input{ border-radius:999px; background:rgba(255,255,255,.04); border:1px solid var(--v4-edge-lo); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); transition:border-color var(--v4-t) var(--v4-ease), background var(--v4-t) var(--v4-ease), box-shadow var(--v4-t) var(--v4-ease); } .search input:focus{ border-color:rgba(var(--green-rgb),.5); background:rgba(255,255,255,.07); box-shadow:0 0 0 4px rgba(var(--green-rgb),.1), inset 0 1px 0 rgba(255,255,255,.06), 0 8px 26px -14px rgba(var(--green-rgb),.7); } /* ========================================================================== 6. I BOTTONI ========================================================================== Il bottone pieno prende tre cose che prima non aveva: una rampa a tre fermate (non due: la terza tiene il colore vivo al centro invece di spegnerlo), un alone che cresce al passaggio, e un RIFLESSO che attraversa la superficie. Il riflesso e' un gradiente obliquo che scorre in 0.7s: e' la firma piu' riconoscibile di una UI costosa, e costa una traslazione. ========================================================================== */ .btn-launch,.btn-enter,.pf-btn-primary,.btn-launch-top:not(.ghost),.side-cta:not(.stock){ position:relative;overflow:hidden; /* LA CODA DEL GRADIENTE NON PUO' SCENDERE SOTTO LA LEGGIBILITA'. Un valore fisso qui sotto due problemi in uno: sul nero il testo scuro del bottone (--on-green) scendeva sotto il 4,5:1 che serve al testo piccolo, e su ogni rete che non fosse Robinhood la coda del bottone restava verde invece di seguire l'accento di quella rete (o del marchio attivo). color-mix scurisce var(--green) stesso: la coda resta leggibile e cambia rete per rete, marchio per marchio, invece di essere un colore fisso. */ background:linear-gradient(168deg, var(--green-hi) 0%, var(--green) 52%, color-mix(in srgb, var(--green) 88%, #000) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.18), 0 2px 8px -2px rgba(var(--green-rgb),.4), 0 12px 30px -14px rgba(var(--green-rgb),.75); transition:transform var(--v4-t-fast) var(--v4-ease), box-shadow var(--v4-t) var(--v4-ease), filter var(--v4-t-fast) var(--v4-ease); } .btn-launch::after,.btn-enter::after,.pf-btn-primary::after, .btn-launch-top:not(.ghost)::after,.side-cta:not(.stock)::after{ content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%; background:linear-gradient(100deg, transparent 0%,rgba(255,255,255,.42) 50%,transparent 100%); transform:skewX(-18deg); pointer-events:none; transition:left .7s var(--v4-ease); } .btn-launch:hover::after,.btn-enter:hover::after,.pf-btn-primary:hover::after, .btn-launch-top:not(.ghost):hover::after,.side-cta:not(.stock):hover::after{left:130%;} .btn-launch:hover:not(:disabled),.btn-enter:hover:not(:disabled), .pf-btn-primary:hover,.btn-launch-top:not(.ghost):hover,.side-cta:not(.stock):hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px -2px rgba(var(--green-rgb),.5), 0 20px 44px -14px rgba(var(--green-rgb),.9); } .btn-launch:active:not(:disabled),.btn-enter:active:not(:disabled), .btn-launch-top:not(.ghost):active{transform:translateY(0) scale(.985);} /* I DUE BOTTONI IN FONDO AL CASSETTO: uno pieno, uno no. Erano entrambi gialli, uno sopra l'altro: due azioni con lo stesso peso sono nessuna azione. "Launch your token" e' quella principale del sito e resta piena (e' gia' nel gruppo dei pieni qui sopra); lo stock token diventa il secondario — contorno nel colore della chain, fondo trasparente — cosi' si legge come variante e non come doppione. Specificita' .sidebar .side-cta (0,3,0) e non !important: batte sia la regola di index.html sia quella di v3, che sono a (0,2,0). */ .sidebar .side-cta:not(.stock){border-radius:var(--v4-r-md);color:var(--on-green);border-color:transparent;} .sidebar .side-cta.stock{ border-radius:var(--v4-r-md); background:rgba(var(--green-rgb),.06); background-image:none; color:var(--chain-accent,var(--green)); border:1px solid var(--chain-accent-line,rgba(var(--green-rgb),.4)); box-shadow:none; transition:background var(--v4-t) var(--v4-ease),border-color var(--v4-t) var(--v4-ease), transform var(--v4-t-fast) var(--v4-ease); } .sidebar .side-cta.stock::after{display:none;} .sidebar .side-cta.stock:hover{ background:rgba(var(--green-rgb),.12); border-color:var(--chain-accent,var(--green)); transform:translateY(-1px); box-shadow:0 8px 22px -14px rgba(var(--green-rgb),.9); } /* Compra e vendi: stessa fisica, colore invariato (verde e rosso, su ogni chain — e' semantica, non identita'). */ .btn-buy,.btn-sell{ position:relative;overflow:hidden; transition:transform var(--v4-t-fast) var(--v4-ease), box-shadow var(--v4-t) var(--v4-ease),background var(--v4-t-fast) var(--v4-ease); } .btn-buy{box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 2px 8px -2px rgba(var(--buy-rgb),.4),0 12px 30px -14px rgba(var(--buy-rgb),.7);} .btn-sell{box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 8px -2px rgba(var(--sell-rgb),.4),0 12px 30px -14px rgba(var(--sell-rgb),.7);} .btn-buy:hover:not(:disabled){box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 20px 44px -14px rgba(var(--buy-rgb),.9);} .btn-sell:hover:not(:disabled){box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 20px 44px -14px rgba(var(--sell-rgb),.9);} /* I secondari: contorno che si accende, fondo che si schiarisce appena. */ .btn-secondary,.qa-btn,.pf-btn,.upload-btn,.page-btn,.page-num, .btn-launch-top.ghost{ border-radius:999px; border:1px solid var(--v4-edge-lo); background-image:var(--v4-glass-soft); transition:border-color var(--v4-t) var(--v4-ease), background var(--v4-t) var(--v4-ease), transform var(--v4-t-fast) var(--v4-ease), box-shadow var(--v4-t) var(--v4-ease); } .btn-secondary:hover:not(:disabled),.qa-btn:hover,.pf-btn:hover, .upload-btn:hover,.btn-launch-top.ghost:hover{ border-color:rgba(var(--green-rgb),.45); transform:translateY(-1px); box-shadow:0 8px 24px -14px rgba(var(--green-rgb),.8); } /* Il bottone del wallet in alto a destra: e' l'invito principale della barra, quindi e' l'unico elemento chiaro su fondo scuro. */ .btn-connect{ border-radius:999px; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 2px 6px rgba(0,0,0,.4), 0 10px 26px -14px rgba(255,255,255,.45); transition:transform var(--v4-t-fast) var(--v4-ease), box-shadow var(--v4-t) var(--v4-ease); } .btn-connect:hover{ transform:translateY(-1.5px); box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 16px 34px -16px rgba(255,255,255,.55); } /* ========================================================================== 7. I CAMPI ========================================================================== Un campo scuro dentro un pannello scuro non si vede: qui e' INCASSATO — ombra interna in alto, filo di luce in basso — cosi' si legge come un buco nella superficie invece che come un altro rettangolo. ========================================================================== */ .field input:not([type=range]),.field textarea,.field select, .buy-input-row input,.tm-filters input,.ref-code-row input{ border-radius:var(--v4-r-md); border:1px solid var(--v4-edge-lo); background:rgba(0,0,0,.28); box-shadow:inset 0 2px 6px rgba(0,0,0,.4),inset 0 -1px 0 rgba(255,255,255,.05); transition:border-color var(--v4-t) var(--v4-ease), box-shadow var(--v4-t) var(--v4-ease), background var(--v4-t) var(--v4-ease); } .field input:not([type=range]):focus,.field textarea:focus, .buy-input-row input:focus,.tm-filters input:focus{ border-color:rgba(var(--green-rgb),.55); background:rgba(0,0,0,.18); box-shadow:0 0 0 4px rgba(var(--green-rgb),.11), inset 0 2px 6px rgba(0,0,0,.3), 0 10px 30px -18px rgba(var(--green-rgb),.9); outline:none; } /* ========================================================================== 8. PILLOLE, SCHEDE, BADGE ========================================================================== Tutte le liste di scelte del sito (filtri della home, schede dei docs, schede del profilo, timeframe del grafico) sono la stessa cosa: una fila di pillole con una attiva. Qui prendono lo stesso trattamento, cosi' il sito smette di avere quattro dialetti per lo stesso comando. ========================================================================== */ .feed-tab,.docs-tab,.pf-tab,.chart-tf,.trade-tab,.mode,.chain-pill{ border-radius:999px; transition:background var(--v4-t) var(--v4-ease), color var(--v4-t-fast) var(--v4-ease), border-color var(--v4-t) var(--v4-ease), box-shadow var(--v4-t) var(--v4-ease), transform var(--v4-t-fast) var(--v4-ease); } .feed-tab:hover,.docs-tab:hover,.pf-tab:hover,.chart-tf:hover,.tk2-tab:hover{ transform:translateY(-1px); } /* .tk2-tab e' fuori da questo elenco di proposito. E' una scheda con la sottolineatura, non una pillola: l'anello dorato le disegnava intorno un ovale alto quanto tutta la barra, e la barra ha overflow-x:auto, che taglia anche in verticale. Risultato, un anello tagliato sopra e sotto — che e' esattamente cio' che si vedeva. */ .feed-tab.active,.docs-tab.active,.pf-tab.active,.chart-tf.active, .trade-tab.active{ box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.4), 0 6px 20px -12px rgba(var(--green-rgb),.9); } /* Il pallino "vivo". Prima era un cerchio pieno che pulsava; ora ha un'ONDA che si espande e svanisce — la stessa cosa che fa un segnale radar, e si legge come "in tempo reale" senza bisogno della parola. */ .pulse,.feed-pulse,.tk2-dot{ position:relative; box-shadow:0 0 10px rgba(var(--green-rgb),.9); } .pulse::after,.feed-pulse::after{ content:"";position:absolute;inset:0;border-radius:inherit; background:inherit; animation:v4Ping 2.4s var(--v4-ease) infinite; pointer-events:none; } @keyframes v4Ping{ 0%{transform:scale(1);opacity:.55;} 70%,100%{transform:scale(3.4);opacity:0;} } /* ========================================================================== 9. LISTE E RIGHE ========================================================================== La lista dei token e' il cuore del sito: e' li' che uno passa il tempo. Ogni riga prende (a) un fondo che si accende da sinistra al passaggio, (b) una barra verticale d'accento sul bordo sinistro che cresce, (c) una transizione sola. Nessuna riga si muove: su una tabella, un translate al passaggio e' fastidioso perche' fa perdere la riga che si stava leggendo. ========================================================================== */ #view-home .tok-row,.tr-row,.tok-row{ position:relative; transition:background var(--v4-t) var(--v4-ease); } #view-home .tok-row::before,#view-stocks .tok-row::before,.tr-row::before{ content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px; border-radius:0 2px 2px 0; background:linear-gradient(180deg,transparent,var(--green),transparent); transform:scaleY(0);transform-origin:center; transition:transform var(--v4-t) var(--v4-ease); pointer-events:none; } #view-home .tok-row:hover::before,#view-stocks .tok-row:hover::before,.tr-row:hover::before{transform:scaleY(1);} #view-home .tok-row:hover,#view-stocks .tok-row:hover,.tr-row:hover{ background:linear-gradient(90deg, rgba(var(--green-rgb),.055) 0%, rgba(255,255,255,.022) 30%, transparent 92%); } /* L'immagine del token: bordo sottile e ombra, cosi' i loghi quadrati non sembrano incollati sul fondo. */ .tr-img,.tk2-ib,.token-img{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 4px 12px -6px rgba(0,0,0,.9); transition:transform var(--v4-t) var(--v4-ease),box-shadow var(--v4-t) var(--v4-ease); } .tok-row:hover .tr-img,.tr-row:hover .tr-img{ transform:scale(1.06); box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.35), 0 6px 18px -6px rgba(var(--green-rgb),.6); } /* L'intestazione delle colonne: si stacca dalla lista e resta ferma mentre la lista scorre sotto. */ .tok-head{ position:sticky;top:0;z-index:3; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } /* ========================================================================== 10. LE BARRE DI AVANZAMENTO ========================================================================== Dicono quanto manca alla migrazione: e' il numero piu' guardato del sito, e finora era una barretta piatta. Ora e' una rampa nel colore della chain con un alone e una luce che la percorre — l'unica animazione continua che mi concedo nelle liste, perche' significa "sta succedendo adesso". ========================================================================== */ .tr-bar,.token-progress,.feat-bar{ overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.55); } #view-home .tr-bar-fill,.tr-bar-fill,.token-progress-fill,.feat-bar > i{ position:relative; background:linear-gradient(90deg, rgba(var(--green-rgb),.55) 0%, var(--green) 62%, var(--green-hi) 100%); box-shadow:0 0 12px -2px rgba(var(--green-rgb),.75); transition:width .8s var(--v4-ease); } /* LA LUCE CHE PERCORRE LA BARRA STA SU UNA BARRA SOLA. Il primo tentativo la metteva su tutte, comprese le dodici righe della lista: partendo tutte insieme diventava un'onda che attraversa la tabella ogni 2.8 secondi, cioe' esattamente il tipo di movimento che rende faticoso leggere una colonna di numeri. Resta dove significa qualcosa: il token in evidenza e la pagina di un token, dove la barra e' UNA e sta dicendo "questo sta succedendo adesso". */ #view-home .feature .feat-bar > i::after, #view-token .token-progress-fill::after, #view-stock .token-progress-fill::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg, transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%); transform:translateX(-100%); animation:v4Sweep 2.8s var(--v4-ease-soft) infinite; } @keyframes v4Sweep{ 0%{transform:translateX(-100%);} 60%,100%{transform:translateX(220%);} } /* ========================================================================== 11. LE CIFRE DELLA PIATTAFORMA ========================================================================== La striscia dei quattro numeri sulla home era un rettangolo diviso in quattro. Ora ogni cella e' un blocco a se': l'icona vive in un quadrato con l'alone della chain, il numero e' grande e con una rampa, e la cella sotto il mouse si accende. NOTA sulle regole con !important: v3.css spegne esplicitamente ombre e gradienti su .market-bar (righe 427-437). Qui li riaccendo, e siccome quelle regole hanno la stessa specificita' ma vengono da un file caricato prima, basterebbe l'ordine — tranne dove v3 usa `background-image:none` sullo stesso selettore identico. Sono le uniche cinque, tutte qui. ========================================================================== */ #view-home .market-bar{ background-color:var(--panel); background-image:var(--v4-glass) !important; border:1px solid transparent; border-radius:var(--v4-r-xl); box-shadow:var(--v4-inner),var(--v4-lift-2) !important; overflow:hidden; } #view-home .ms-item{ position:relative; transition:background var(--v4-t) var(--v4-ease); } #view-home .ms-item:hover{ background:radial-gradient(120% 140% at 50% 0%, rgba(var(--green-rgb),.09),transparent 70%) !important; } #view-home .ms-item + .ms-item{ /* La linea di separazione sfuma alle estremita': un filo pieno da bordo a bordo taglia la striscia in scomparti. */ border-left:0; } #view-home .ms-item + .ms-item::before{ content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px; background:linear-gradient(180deg,transparent,var(--v4-edge-hi) 30%, var(--v4-edge-hi) 70%,transparent); } #view-home .ms-item dt svg{ background:linear-gradient(160deg, rgba(var(--green-rgb),.24),rgba(var(--green-rgb),.08)) !important; box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.24), 0 6px 16px -10px rgba(var(--green-rgb),.9); transition:transform var(--v4-t) var(--v4-ease),box-shadow var(--v4-t) var(--v4-ease); } #view-home .ms-item:hover dt svg{ transform:translateY(-1px) scale(1.06); box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.4), 0 10px 24px -10px rgba(var(--green-rgb),1); } #view-home .ms-item dd{ letter-spacing:-.035em; background:linear-gradient(180deg,#fff 10%,rgba(255,255,255,.7) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } /* Il rimborso resta l'unica cifra accentata: e' la promessa del prodotto. */ #view-home .ms-item:last-child dd{ background:linear-gradient(180deg,var(--green-hi),var(--green)); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 18px rgba(var(--green-rgb),.35)); } /* ========================================================================== 12. IL TOKEN IN EVIDENZA ========================================================================== E' il pannello che vende: primo schermo, a destra del titolo. Prende l'unica cornice accentata della pagina. ========================================================================== */ #view-home .feature{ border-radius:var(--v4-r-xl); box-shadow:var(--v4-inner),var(--v4-lift-2); overflow:hidden; } #view-home .feature::after{ background:linear-gradient(160deg, rgba(var(--green-rgb),.4) 0%, var(--v4-edge-lo) 42%, rgba(var(--green-rgb),.16) 100%); } #view-home .feat-main{position:relative;} #view-home .feat-main::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(90% 120% at 12% 0%, rgba(var(--green-rgb),.1),transparent 62%); } #view-home .feat-name{letter-spacing:-.035em;} /* ========================================================================== 13. MODALI ========================================================================== Il fondo si sfoca: e' quello che fa sembrare la finestra "sopra" invece che "dentro" la pagina. Ed entra scalando da 0.97, non da 0.8: una finestra che rimbalza sembra un giocattolo. ========================================================================== */ .modal-backdrop{ backdrop-filter:blur(10px) saturate(.9); -webkit-backdrop-filter:blur(10px) saturate(.9); background:radial-gradient(120% 100% at 50% 0%, rgba(var(--green-rgb),.07),transparent 55%),rgba(2,4,7,.72); } .modal{ animation:v4Modal .5s var(--v4-ease) both; } @keyframes v4Modal{ from{opacity:0;transform:translateY(14px) scale(.972);} to{opacity:1;transform:none;} } .modal h2{letter-spacing:-.03em;} .modal .accept-row{ border-radius:var(--v4-r-md); transition:border-color var(--v4-t) var(--v4-ease),background var(--v4-t) var(--v4-ease); } /* ========================================================================== 14. IL PIEDE ========================================================================== Chiude la pagina invece di finirla: una linea che si accende al centro, come sotto la barra in alto. Le due si rispondono. ========================================================================== */ .site-foot,.site-footer{ position:relative; border-top:0; } .site-foot::before,.site-footer::before{ content:"";position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,var(--v4-edge-hi) 22%, rgba(var(--green-rgb),.32) 50%,var(--v4-edge-hi) 78%,transparent); } .site-foot a,.site-footer a{ transition:color var(--v4-t-fast) var(--v4-ease),transform var(--v4-t-fast) var(--v4-ease); } .site-foot a:hover,.site-footer a:hover{color:var(--green);} /* ========================================================================== 15. IL TEMPO — comparse ========================================================================== Ogni blocco entra una volta sola, quando lo si raggiunge. La classe .v4-in la mette v4.js con un IntersectionObserver; senza JS gli elementi restano visibili (lo stato di partenza e' applicato dal JS stesso, non dal CSS: e' la sola regola che garantisce che una pagina senza script resti leggibile). ========================================================================== */ .v4-rise{ opacity:0;transform:translateY(16px); transition:opacity .7s var(--v4-ease),transform .7s var(--v4-ease); transition-delay:var(--v4-d,0ms); will-change:opacity,transform; } .v4-rise.v4-in{opacity:1;transform:none;} /* La comparsa della schermata quando si cambia rotta. Corta: una transizione di pagina lunga si trasforma in attesa. */ #view-home,#view-token,#view-create,#view-profile,#view-docs, #view-terminal,#view-stocks,#view-stock,#view-watchlist,#view-chat, #view-create-stock{ animation:v4View .5s var(--v4-ease) both; } @keyframes v4View{ from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:none;} } /* ========================================================================== 16. DETTAGLI DI SISTEMA ========================================================================== */ ::selection{background:rgba(var(--green-rgb),.32);color:#fff;} /* Barra di scorrimento: sottile, senza frecce, con il pollice che si accende al passaggio. Su una pagina scura una scrollbar di sistema chiara e' la cosa che rompe l'illusione piu' in fretta. */ *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;} ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:99px; border:3px solid transparent; background-clip:content-box; } ::-webkit-scrollbar-thumb:hover{ background:rgba(var(--green-rgb),.45); background-clip:content-box; } /* Il fuoco da tastiera deve essere VISIBILE e uguale ovunque: e' l'unico modo in cui il sito e' usabile senza mouse. :focus-visible e non :focus, o l'anello comparirebbe anche al click del mouse. */ a:focus-visible,button:focus-visible,input:focus-visible, textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{ outline:2px solid rgba(var(--green-rgb),.75); outline-offset:2px; border-radius:var(--v4-r-sm); } /* ========================================================================== 17. SCHERMI STRETTI ========================================================================== Su telefono si spengono le cose che costano e non si vedono: il fuoco che segue il puntatore (non c'e' un puntatore), la grana (su un pannello piccolo e' rumore e basta), le ombre lunghe. ========================================================================== */ @media (max-width:760px){ .v4-grain{opacity:.03;} .card::before,.tok-panel::before,.chart-card::before,.pf-panel::before, .feature-card::before,.pf-stat::before,.docs-sec::before,.tm-col::before{display:none;} :root{ --v4-lift-2:0 2px 6px rgba(0,0,0,.45),0 12px 24px -18px rgba(0,0,0,.9); --v4-lift-3:0 4px 10px rgba(0,0,0,.5),0 20px 40px -24px rgba(0,0,0,1); } } /* ========================================================================== 18. LE SINGOLE SCHERMATE ========================================================================== Fin qui il foglio ha lavorato sul linguaggio comune. Qui ci sono le poche cose che valgono per una schermata sola e che, senza, restavano indietro rispetto al resto. ========================================================================== */ /* ---- 18.1 LANCIA UN TOKEN ---- Il titolo era della stessa taglia di un'intestazione di sezione, in cima a una pagina che chiede di compilare undici campi: chi arriva qui ha appena deciso di fare la cosa piu' importante del sito e la pagina non lo festeggiava affatto. */ #view-create > .wrap > h1, #view-create-stock > .wrap > h1{ /* La taglia e' in sezione 22, con quella della home e della landing: erano tre scale diverse per tre titoli dello stesso sito. */ margin-top:6px; background:linear-gradient(180deg,#fff 8%,rgba(255,255,255,.74) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; padding-bottom:.08em;margin-bottom:-.04em; } #view-create > .wrap > .sub, #view-create-stock > .wrap > .sub{ font-size:15px;max-width:62ch;line-height:1.65;margin-top:12px; } /* Il titoletto di ogni scheda del modulo: prima era testo grigio in maiuscoletto e si confondeva con le etichette dei campi. Ora ha un trattino nel colore della rete che lo precede — costa una riga e separa i due livelli senza aggiungere una linea. */ #view-create .card > h3, #view-create-stock .card > h3{ display:flex;align-items:center;gap:10px; } #view-create .card > h3::before, #view-create-stock .card > h3::before{ content:"";width:16px;height:2px;border-radius:2px;flex-shrink:0; background:linear-gradient(90deg,var(--green),transparent); } /* L'anteprima segue chi scorre: e' il senso di un'anteprima, e prima usciva dallo schermo al secondo campo. */ @media (min-width:1080px){ #view-create .create-side, #view-create-stock .create-side{position:sticky;top:88px;align-self:start;} } /* Il riquadro del logo: da quadrato grigio a bersaglio. Tratteggio che si accende, e l'invito a caricare che diventa il colore della rete. */ .img-preview{ border-radius:var(--v4-r-lg); border:1.5px dashed var(--v4-edge-hi); background-image:var(--v4-glass-soft); transition:border-color var(--v4-t) var(--v4-ease), box-shadow var(--v4-t) var(--v4-ease),transform var(--v4-t) var(--v4-ease); } .img-preview:hover{ border-color:rgba(var(--green-rgb),.6); transform:translateY(-2px); box-shadow:0 12px 30px -16px rgba(var(--green-rgb),.9); } /* ---- 18.1b LE SCHEDE DEI TOKEN ---- ========================================================================== E' la schermata dove si passa il tempo, ed era la piu' anonima: dodici righe grigie con un logo da 36px, tre numeri della stessa taglia e una barretta piatta. Tutto leggibile, niente gerarchia — l'occhio non sapeva dove posarsi per primo, quindi le leggeva tutte, quindi non ne leggeva nessuna. La riga resta una RIGA: la griglia a card fa sembrare ogni token un post, e dodici riquadri uguali non si confrontano perche' i numeri stanno in punti diversi di ognuno. Quello che cambia e' il peso relativo: - il logo cresce e prende un anello, cosi' e' un oggetto e non una macchia. E' anche l'unica immagine della riga: se non tira l'occhio lui, non lo tira niente. - il NOME sale di corpo e di peso; simbolo ed eta' scendono nel monospaziato spento. Erano quasi uguali, e il nome e' l'unica cosa che uno cerca davvero. - il MARKET CAP e' il numero grande. E' quello su cui si ordina la lista nove volte su dieci, ed era della stessa taglia del volume. - la barra diventa un termometro leggibile con la percentuale accanto, e si accende quando manca poco: sopra il 90% e' arancio, a 100 e' pieno. Prima un token al 12% e uno al 96% avevano la stessa barra grigia con un pezzetto colorato di lunghezza diversa, e la differenza — che e' la cosa piu' importante della lista — si leggeva solo dal numero. - al passaggio del mouse l'indirizzo del contratto lascia il posto a "Trade", perche' e' quello che il click fa. Il contratto resta copiabile: torna appena il mouse esce. ========================================================================== */ #view-home .tok-row,#view-stocks .tok-row,#view-watchlist .tok-row{ padding-block:15px; } /* Il logo: 44px, angoli piu' morbidi, anello sottile e ombra propria. */ #view-home .tr-img,#view-stocks .tr-img,#view-watchlist .tr-img{ width:44px;height:44px;border-radius:13px;font-size:15px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 6px 16px -8px rgba(0,0,0,1); } /* Nome e sottotitolo: due pesi diversi, non due grigi diversi. */ #view-home .tr-n1,#view-stocks .tr-n1,#view-watchlist .tr-n1{ font-size:15px;font-weight:600;letter-spacing:-.022em; display:flex;align-items:center;gap:7px;flex-wrap:wrap; } #view-home .tr-n2,#view-stocks .tr-n2,#view-watchlist .tr-n2{ font-family:var(--font-mono);font-size:11px;letter-spacing:.05em; color:var(--text-mute);margin-top:4px; } /* LE ETICHETTE, RIPORTATE A DUE COLORI. Prima erano cinque tinte diverse nella stessa riga — verde, oro, viola, blu, arancio — e una lista lunga diventava un arcobaleno in cui nessuna delle cinque significava piu' niente: quando tutto e' evidenziato, non lo e' nulla. E' esattamente cio' che fa sembrare un prodotto messo insieme a pezzi invece che disegnato. Ora il colore lo prendono solo le due etichette che cambiano una decisione: la taglia della modalita' protetta di prima e "Graduated" (non piu': ora e' mercato aperto). Tutto il resto — modalita' delle fee, tipo di prodotto — descrive com'e' fatto il token, non cosa rischi, e resta in grigio: si legge se la si cerca, non urla se non la si cerca. */ .tok-tag{ font-size:10px;font-weight:600;letter-spacing:.04em; padding:3px 8px;border-radius:99px;line-height:1.5; color:var(--text-dim); background:rgba(255,255,255,.045); border:1px solid var(--v4-edge-lo); } /* Ridichiarate una per una: in v2.css queste hanno gia' una classe di tipo (.tok-tag.stock e compagnia), quindi pesano piu' della regola generica qui sopra e la vincerebbero comunque. Stesso grigio, esplicito. */ .tok-tag.stock,.tok-tag.classic,.tok-tag.burn,.tok-tag.lp{ color:var(--text-dim); background:rgba(255,255,255,.045); border:1px solid var(--v4-edge-lo); } .tok-tag.protected{ color:#4ade80;background:rgba(74,222,128,.09);border-color:rgba(74,222,128,.24); } .tok-tag.grad{ color:var(--green);background:rgba(var(--green-rgb),.1); border-color:rgba(var(--green-rgb),.28); } /* Il market cap comanda, il volume lo accompagna. */ #view-home .tr-num[data-col="mcap"],#view-stocks .tr-num:first-of-type{ font-size:15.5px;font-weight:600;letter-spacing:-.03em;color:var(--text); } #view-home .tr-num[data-col="vol"]{ font-size:12.5px;color:var(--text-dim); } /* La sparkline aveva 96px e ci stava dentro una linea che non diceva niente. Piu' spazio e piu' altezza: o e' leggibile o e' decorazione. */ #view-home .tr-spark{height:30px;opacity:.9;transition:opacity var(--v4-t) var(--v4-ease);} #view-home .tok-row:hover .tr-spark{opacity:1;} /* IL TERMOMETRO. La barra sale a 6px e prende una scala di colore: verde-accento fino al 70%, ambra oltre il 90, pieno acceso a 100. La percentuale accanto passa al monospaziato a larghezza fissa, o le cifre ballano da riga a riga. */ #view-home .tr-prog,#view-stocks .tr-prog{display:flex;align-items:center;gap:10px;} #view-home .tr-bar,#view-stocks .tr-bar{ flex:1;height:6px;border-radius:99px; background:rgba(255,255,255,.06); box-shadow:inset 0 1px 2px rgba(0,0,0,.6); } #view-home .tr-pct,#view-stocks .tr-pct{ font-family:var(--font-mono);font-size:11.5px;font-variant-numeric:tabular-nums; color:var(--text-dim);min-width:44px;text-align:right;flex-shrink:0; } /* Vicino al traguardo. La soglia e' scritta nel markup? No: la larghezza della barra e' l'unica cosa che il CSS vede, e da una larghezza non si ricava una condizione. Quindi il segnale sta sul colore del riempimento, che app.js gia' imposta in percentuale — qui aggiungo solo l'alone piu' forte man mano che la barra si riempie, che e' l'effetto voluto: piu' e' lunga, piu' brilla. */ #view-home .tr-bar-fill,#view-stocks .tr-bar-fill{ box-shadow:0 0 10px -1px rgba(var(--green-rgb),.8), inset 0 1px 0 rgba(255,255,255,.25); } /* IL CONTRATTO CHE DIVENTA "TRADE". Il click sulla riga porta al token: la colonna a destra deve dirlo. Resta l'indirizzo, che serve a chi vuole copiarlo, e scompare solo mentre il mouse e' sulla riga. Le due etichette sono impilate nello stesso spazio, quindi niente si sposta quando si scambiano. */ #view-home .tr-ca,#view-stocks .tr-ca{position:relative;} #view-home .tr-ca .token-ca-v,#view-stocks .tr-ca .token-ca-v{ transition:opacity var(--v4-t) var(--v4-ease); } #view-home .tr-ca::after,#view-stocks .tr-ca::after{ content:"Trade \2192"; position:absolute;inset:0; display:flex;align-items:center;justify-content:flex-end; font-family:var(--font-body);font-size:12.5px;font-weight:600; letter-spacing:-.01em;color:var(--green); opacity:0;transform:translateX(-4px); transition:opacity var(--v4-t) var(--v4-ease),transform var(--v4-t) var(--v4-ease); pointer-events:none; } #view-home .tok-row:hover .tr-ca .token-ca-v,#view-stocks .tok-row:hover .tr-ca .token-ca-v{opacity:0;} #view-home .tok-row:hover .tr-ca::after,#view-stocks .tok-row:hover .tr-ca::after{opacity:1;transform:none;} /* Mentre si punta l'indirizzo per copiarlo, l'indirizzo torna: altrimenti si clicca su "Trade" credendo di copiare. */ #view-home .tr-ca:hover .token-ca-v,#view-stocks .tr-ca:hover .token-ca-v{opacity:1 !important;} #view-home .tr-ca:hover::after,#view-stocks .tr-ca:hover::after{opacity:0 !important;} /* L'intestazione delle colonne, allineata al nuovo peso della riga. */ #view-home .tok-head,#view-stocks .tok-head{ padding-block:13px; background:linear-gradient(180deg,var(--panel-2) 70%,transparent); } /* Su schermo stretto la griglia a sei colonne diventa una scheda impilata: li' le etichette per riga tornano, perche' non c'e' piu' una testata di colonna a cui riferirsi. */ @media (max-width:900px){ #view-home .tr-n1,#view-stocks .tr-n1,#view-watchlist .tr-n1{font-size:15.5px;} #view-home .tr-num[data-col="mcap"],#view-stocks .tr-num:first-of-type{font-size:16px;} #view-home .tr-ca::after,#view-stocks .tr-ca::after{display:none;} } /* ---- 18.1c IL SELETTORE DI RETE ---- ========================================================================== E' l'unico punto del prodotto in cui si passa da una rete all'altra, ed era un elenco di cinque righe di testo con un puntino davanti. Ora ogni voce porta il proprio logo, il gas con cui si paga e il DEX su cui migra: le tre cose che distinguono una rete dall'altra, e le stesse che la landing mostra sulle carte — cosi' chi arriva dalla landing ritrova la stessa scheda. Il colore di ogni riga e' quello della SUA rete (--i-rgb, messa da chains.js), non dell'attiva: in un menu le voci devono distinguersi fra loro, o tornano a essere cinque righe grigie. ========================================================================== */ .chain-menu{ border-radius:var(--v4-r-lg); padding:6px;min-width:246px; background-image:var(--v4-glass); box-shadow:var(--v4-inner),var(--v4-lift-3); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); } .chain-item{ display:flex;align-items:center;gap:11px; width:100%;padding:9px 11px;border-radius:var(--v4-r-md); position:relative; transition:background var(--v4-t) var(--v4-ease); } .chain-item-logo{ width:22px;height:22px;flex-shrink:0; filter:drop-shadow(0 0 10px rgba(var(--i-rgb,255,255,255),.5)); } .chain-item-txt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;flex:1;} .chain-item-label{font-size:13.5px;font-weight:550;letter-spacing:-.015em;} .chain-item-sub{ font-family:var(--font-mono);font-size:9.5px;letter-spacing:.07em; text-transform:uppercase;color:var(--text-mute); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%; } .chain-item:hover{background:rgba(var(--i-rgb,255,255,255),.09);} .chain-item.active{ background:rgba(var(--i-rgb,255,255,255),.12); box-shadow:inset 0 0 0 1px rgba(var(--i-rgb,255,255,255),.28); } /* Il pallino passa a destra e diventa lo stato "sei qui": a sinistra duplicava il logo, che il colore della rete lo porta gia'. */ .chain-item .chain-dot{ width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-left:auto; opacity:0;transition:opacity var(--v4-t) var(--v4-ease); } .chain-item.active .chain-dot{ opacity:1;box-shadow:0 0 10px rgba(var(--i-rgb,255,255,255),.9); } .chain-soon{ margin-left:auto;flex-shrink:0; font-size:8.5px;letter-spacing:.14em;text-transform:uppercase; padding:3px 7px;border-radius:99px;border:1px solid currentColor; opacity:.75; } /* Il bottone che apre il menu: il logo della rete attiva accanto al nome. */ .chain-trigger{ border-radius:999px; border-color:var(--v4-edge-lo); background-image:var(--v4-glass-soft); transition:border-color var(--v4-t) var(--v4-ease), box-shadow var(--v4-t) var(--v4-ease), transform var(--v4-t-fast) var(--v4-ease); } .chain-trigger:hover{ border-color:rgba(var(--green-rgb),.45); transform:translateY(-1px); box-shadow:0 8px 22px -14px rgba(var(--green-rgb),1); } /* ---- 18.1d I TITOLI DI SEZIONE E IL RITMO DELLE SCHERMATE ---- ========================================================================== Ogni schermata dell'applicazione apre con un titolo da 15px preceduto da una barretta colorata. A quella taglia un titolo non e' un titolo: e' un'etichetta, e infatti "Chat", "Watchlist" e "How it works" si leggevano come voci di menu finite in mezzo alla pagina. Qui salgono a una misura da titolo e la barretta diventa un filo che si spegne — la stessa figura della linea sotto la barra in alto e sopra il piede, cosi' le tre ricorrono e la pagina ha una punteggiatura sola. Nessuna misura di layout cambia: solo corpo, peso e crenatura. ========================================================================== */ .section-title{ font-size:21px;font-weight:640;letter-spacing:-.032em; } #view-home .section-title{font-size:21px;} .section-head{ gap:12px;margin-block:34px 16px; align-items:center; } /* LA BARRETTA D'ACCENTO STA SU .section-title::before, NON SU .section-head. Ci ho messo la regola sbagliata al primo tentativo: .section-head::before in v3 e' tutt'altro — il filo orizzontale che fa da bordo superiore al pannello della lista — e con un width:3px !important glielo avevo accorciato a una scheggia. Qui si tocca solo il trattino verticale davanti al titolo, che e' l'elemento che intendevo: diventa un filo che si spegne verso il basso invece di un rettangolo pieno, e cresce con il titolo che ora e' piu' alto. */ .section-title::before{ width:3px;height:22px;border-radius:3px; background:linear-gradient(180deg,var(--green),rgba(var(--green-rgb),.15)); box-shadow:0 0 14px rgba(var(--green-rgb),.6); } /* IL BLOCCO "COSA SI PUO' LANCIARE". Chiuso era una riga di testo grigio con una freccia in fondo, appoggiata su una linea: non sembrava un comando, sembrava un residuo. Ora e' una superficie con un bordo, e la freccia sta in un tondo — cioe' ha l'aspetto di una cosa che si apre. */ #view-home .modes{ border-radius:var(--v4-r-lg); border:1px solid transparent; background-image:var(--v4-glass-soft); box-shadow:var(--v4-inner),var(--v4-lift-1); margin-block:4px 16px; transition:box-shadow var(--v4-t) var(--v4-ease); } #view-home .modes:hover{box-shadow:var(--v4-inner),var(--v4-lift-2);} #view-home .modes summary{ padding:15px 18px;font-size:13.5px;font-weight:550;color:var(--text-dim); } #view-home .modes summary:hover{color:var(--text);} #view-home .modes summary i{ width:26px;height:26px;border-radius:50%; border:1px solid var(--v4-edge-lo); transform:none; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.04); transition:transform .4s var(--v4-ease),border-color .4s var(--v4-ease), background .4s var(--v4-ease); } /* La freccia dentro il tondo: due lati di un quadrato ruotato, come prima, ma disegnati da un ::before cosi' il tondo puo' restare fermo mentre la punta gira. */ #view-home .modes summary i::before{ content:"";width:7px;height:7px;margin-top:-3px; border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor; transform:rotate(45deg); transition:transform .4s var(--v4-ease); } #view-home .modes summary:hover i{ border-color:rgba(var(--green-rgb),.5); background:rgba(var(--green-rgb),.08); } #view-home .modes[open] summary i::before{transform:rotate(-135deg);margin-top:3px;} #view-home .modes[open]{ border-color:transparent; background-image:var(--v4-glass); box-shadow:var(--v4-inner),var(--v4-lift-2); } #view-home .mode{ border-radius:var(--v4-r-md); background-image:var(--v4-glass-soft); box-shadow:inset 0 0 0 1px var(--v4-edge-lo); transition:transform var(--v4-t) var(--v4-ease),box-shadow var(--v4-t) var(--v4-ease); } #view-home .mode:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.3), 0 10px 26px -16px rgba(var(--green-rgb),.9); } /* GLI STATI VUOTI, con qualcosa da guardare. "Nothing starred yet" in grigio al centro di un riquadro alto 130px si legge come un errore di caricamento. Il tratteggio dice "qui ci va qualcosa e non c'e' ancora", che e' la verita', e costa una riga. */ .empty-state,.pf-empty,#view-watchlist .empty-state{ border:1px dashed var(--v4-edge-lo); border-radius:var(--v4-r-lg); padding-block:52px; font-size:13.5px; } /* LA COLONNA DI SINISTRA DELL'HERO. Il titolo e il paragrafo occupano 250px in una colonna alta 420: sotto restava un buco. Le tre garanzie lo riempiono con l'unica cosa che manca davvero li' — il motivo per cui fidarsi — e sono le stesse tre della landing, quindi chi arriva da li' le ritrova. Il markup non c'e': queste regole servono a .pitch-facts, che aggiungo in index.html. Restano inerti se quel blocco non esiste. */ #view-home .pitch{display:flex;flex-direction:column;} #view-home .pitch-facts{ margin-top:auto;padding-top:24px; display:flex;flex-direction:column;gap:1px; } #view-home .pf-line{ display:flex;align-items:flex-start;gap:12px; padding:13px 0;border-top:1px solid var(--v4-edge-lo); } #view-home .pf-line:last-child{border-bottom:1px solid var(--v4-edge-lo);} #view-home .pf-line svg{ width:15px;height:15px;flex-shrink:0;margin-top:2px;color:var(--green); } #view-home .pf-line b{font-size:13.5px;font-weight:600;letter-spacing:-.018em;color:var(--text);} #view-home .pf-line span{ display:block;margin-top:3px;font-size:12.5px;line-height:1.55;color:var(--text-dim); } @media (max-width:1080px){ /* Il markup di .pitch-facts e' stato tolto da index.html: la regola resta solo perche' l'hero delle chain non ancora attive lo ricostruirebbe, e in quel caso deve restare invisibile come qui. */ #view-home .pitch-facts{display:none;} /* sotto, la lista arriva subito */ } /* ---- 18.1e IL CASSETTO SU TELEFONO ---- E' la navigazione intera del sito su schermo stretto, ed era un pannello opaco color fondo con sette voci grigie. Vetro sfocato sopra la pagina, voci piu' alte (sono bersagli per il dito, 34px erano pochi), il logo di ogni rete al posto del pallino, e i due bottoni in fondo con i ruoli giusti. La transizione passa dalla curva lineare di 200ms alla curva del resto del sito: un cassetto che scatta sembra un menu di sistema. */ @media (max-width:900px){ .sidebar{ width:292px; background:linear-gradient(180deg, rgba(var(--v4-bar-rgb,6,9,13),.92),rgba(var(--v4-bar-rgb,6,9,13),.86)); backdrop-filter:blur(22px) saturate(1.3); -webkit-backdrop-filter:blur(22px) saturate(1.3); border-right:1px solid var(--v4-edge-lo); /* L'ombra del cassetto: niente finche' e' chiuso. Il cassetto chiuso non e' nascosto, e' TRADOTTO: sta a sinistra del bordo dello schermo (da -292 a 0). L'ombra, pero', e' spostata di 30px a DESTRA con 80 di sfocatura, quindi rientrava in pagina e dipingeva una fascia nera lungo tutto il margine sinistro, sempre, anche a menu chiuso. Sul tema scuro si notava poco; sul chiaro era una striscia grigia (misurata: 128,127,124 su un fondo da 244) che sembrava un difetto di resa. Ora c'e' solo quando il cassetto e' aperto, che e' l'unico momento in cui un'ombra ha qualcosa da separare. E la transizione la accompagna, cosi' non compare di scatto. */ box-shadow:30px 0 80px -30px rgba(0,0,0,0); transition:transform .5s var(--v4-ease), box-shadow .5s var(--v4-ease); padding-inline:14px; } .sidebar.open{box-shadow:30px 0 80px -30px rgba(0,0,0,1);} .sidebar .side-label{padding-top:20px;letter-spacing:.16em;} .sidebar .side-link{ padding:12px 12px;border-radius:var(--v4-r-md);font-size:15px;gap:12px; transition:background var(--v4-t) var(--v4-ease),color var(--v4-t-fast) var(--v4-ease); } .sidebar .side-link svg{width:18px;height:18px;} .sidebar .side-link.active{ background:rgba(var(--green-rgb),.1); box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.24); } .sidebar .side-link.active::before{display:none;} .backdrop{ background:rgba(2,4,7,.55); backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); transition:opacity .5s var(--v4-ease); } .m-menu-btn,.m-search-btn,.theme-btn{ border-radius:999px; border-color:var(--v4-edge-lo); background-image:var(--v4-glass-soft); } } /* Il logo della rete nel cassetto e nella colonna laterale, al posto del pallino: e' messo da chains.js (initSidebarChains). */ .side-chain-logo{ width:20px;height:20px;flex-shrink:0; filter:drop-shadow(0 0 8px var(--chain-accent-soft,transparent)); } .side-chain .side-chain-dot{display:none;} /* ---- 18.2 PROFILO ---- Lo striscione era un rettangolo con un gradiente e nient'altro: la prima cosa che si vede della propria pagina, ed era la meno curata del sito. Qui prende tre strati — la luce della rete in alto a sinistra, un reticolo finissimo che sfuma verso destra, e una linea accesa in basso su cui l'avatar si appoggia. */ .pf-banner{ height:132px;border-radius:var(--v4-r-xl); background: radial-gradient(90% 200% at 4% 0%, rgba(var(--green-rgb),.3), transparent 58%), radial-gradient(70% 160% at 96% 10%, rgba(var(--green-rgb),.1), transparent 60%), linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 70%), var(--panel-2); box-shadow:var(--v4-inner),var(--v4-lift-2); overflow:hidden; } .pf-banner::before{ content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/28px 28px, linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/28px 28px; -webkit-mask-image:linear-gradient(100deg,#000,transparent 62%); mask-image:linear-gradient(100deg,#000,transparent 62%); } .pf-banner::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg,rgba(var(--green-rgb),.7),transparent 62%); opacity:1; } .pf-avatar{ border-radius:var(--v4-r-lg); box-shadow:0 0 0 3px var(--bg), inset 0 1px 0 rgba(255,255,255,.18), 0 14px 34px -12px rgba(0,0,0,1), 0 0 34px -12px rgba(var(--green-rgb),.7); transition:transform var(--v4-t) var(--v4-ease),box-shadow var(--v4-t) var(--v4-ease); } .pf-avatar:hover{transform:translateY(-2px) scale(1.02);} .pf-name{letter-spacing:-.035em;} /* ---- 18.3 DOCS ---- Due problemi, uno di forma e uno di sostanza. FORMA: la pagina era una colonna sola con sette schede in cima e, sotto, un riquadro alto trecento pixel in mezzo a mille di vuoto. Su uno schermo da desktop sembrava una pagina non finita di caricare. Sopra i 1040px diventa quindi una documentazione vera: indice a sinistra, fisso mentre si legge, e testo a destra. Nessuna riga di markup cambia — .docs-wrap diventa una griglia e i tre pezzi che gia' contiene vengono collocati. I pannelli nascosti sono display:none e quindi escono dal flusso della griglia: quello visibile finisce sempre nella stessa cella. SOSTANZA: e' una pagina di sola lettura, quindi conta solo quanto e' facile leggerla. Misura di riga piu' corta, interlinea piu' alta, e le frasi marcate che smettono di essere grassetto e diventano evidenziate nel colore della rete. */ @media (min-width:1040px){ #view-docs .docs-wrap{ display:grid; /* La cornice e' quella di tutte le altre pagine (sezione 29), ma la colonna del testo si ferma a 760: sopra i settanta caratteri per riga l'occhio perde il capo della riga successiva, e questa e' una pagina che si legge dall'inizio alla fine. Il blocco si ancora a sinistra, quindi l'indice parte dove parte il titolo di ogni altra schermata. */ /* Era 216px + 760px fissi, ancorati a sinistra: su uno schermo da 1440 restavano 290px di pagina vuota alla destra del riquadro, e il blocco sembrava caduto in un angolo. La MISURA DI LETTURA pero' va difesa: e' il motivo per cui c'era il 760. Le due cose non sono in conflitto, perche' sono due cose diverse. La SUPERFICIE (il riquadro, il suo fondo, il suo bordo) puo' arrivare fino in fondo; il TESTO dentro resta a 72 caratteri per riga, come dice la regola piu' sotto. E' esattamente come e' fatta ogni documentazione tecnica che si legge volentieri. */ grid-template-columns:216px minmax(0,1fr); justify-content:start; column-gap:48px; align-items:start; max-width:1360px; } #view-docs .docs-head{grid-column:1/-1;margin-bottom:30px;} #view-docs .docs-toc{ grid-column:1;grid-row:2; position:sticky;top:88px; display:flex;flex-direction:column;align-items:stretch;gap:2px; padding-right:16px; border-right:1px solid var(--v4-edge-lo); } #view-docs .docs-tab{ text-align:left;border-radius:var(--v4-r-sm); padding:9px 12px;letter-spacing:0; border:0;background:none; position:relative; } #view-docs .docs-tab::before{ content:"";position:absolute;left:0;top:20%;bottom:20%;width:2px; border-radius:0 2px 2px 0;background:var(--green); transform:scaleY(0);transform-origin:center; transition:transform var(--v4-t) var(--v4-ease); } #view-docs .docs-tab.active::before{transform:scaleY(1);} #view-docs .docs-tab.active{background:rgba(var(--green-rgb),.08);box-shadow:none;} #view-docs .docs-tab:hover{transform:none;background:rgba(255,255,255,.045);} #view-docs .docs-panel{grid-column:2;grid-row:2;} #view-docs .docs-foot{grid-column:2;margin-top:36px;} } #view-docs .docs-panel p,#view-docs .docs-sec p{ line-height:1.75;max-width:72ch;font-size:14.5px; } #view-docs .docs-panel strong,#view-docs .docs-sec strong{ color:var(--text); box-shadow:inset 0 -.36em 0 rgba(var(--green-rgb),.22); } #view-docs .docs-sec,#view-docs .docs-panel{padding-block:26px;} #view-docs .docs-sec h2,#view-docs .docs-sec h3,#view-docs .docs-panel h3{ letter-spacing:-.03em; } #view-docs > .wrap > h1{ font-size:clamp(30px,3.6vw,44px);letter-spacing:-.04em; background:linear-gradient(180deg,#fff 8%,rgba(255,255,255,.74) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; padding-bottom:.08em;margin-bottom:-.04em; } /* ---- 18.4 TERMINAL ---- Le tre colonne sono gia' la schermata piu' riuscita del sito. Qui prendono solo la testata appiccicata in cima — scorrendo una colonna lunga si perdeva di vista quale delle tre si stava leggendo. */ #view-terminal .tm-col-head{ position:sticky;top:0;z-index:4; background:linear-gradient(180deg,var(--panel) 72%,transparent); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } /* ---- 18.5 GLI STATI VUOTI ---- Una lista vuota diceva una riga di testo grigio in mezzo al niente. Non posso cambiare le parole da qui, ma posso far sembrare quel vuoto una scelta invece di un caricamento andato male. */ .empty-state,.pf-empty{ border-radius:var(--v4-r-lg); background: radial-gradient(70% 100% at 50% 0%, rgba(var(--green-rgb),.05), transparent 70%); } /* ---- 18.6 LA PAGINA DI UN TOKEN ---- ========================================================================== E' la schermata dove si spendono i soldi, ed era la piu' timida del sito. Tre cose non funzionavano, e sono tre problemi di GERARCHIA, non di stile: 1. LA TESTATA non diceva di che token si trattava. Logo da 56px, nome da 20px e prezzo da 23px stavano tutti sulla stessa riga con lo stesso peso, e il prezzo — il numero per cui uno apre la pagina — finiva schiacciato a destra sotto una didascalia da 10px. 2. LA FASCIA DEI NUMERI erano sei riquadri da 60px di altezza su due righe: metà della prima schermata spesa per sei valori che stanno in una riga. 3. LA CARD DENTRO LA CARD. Il grafico e' una .chart-card dentro una .tk2-card: due bordi e due fondi concentrici a 14px di distanza, che e' il difetto piu' visibile della pagina appena si sa riconoscerlo. ========================================================================== */ /* --- 1. la testata --- */ #view-token .tk2-head,#view-stock .tk2-head{ padding:24px 26px; border-radius:var(--v4-r-xl); background: radial-gradient(80% 160% at 0% 0%, rgba(var(--green-rgb),.13), transparent 58%), linear-gradient(180deg,var(--panel),var(--bg-1)); box-shadow:var(--v4-inner),var(--v4-lift-2); align-items:flex-start; } #view-token .tk2-img,#view-stock .tk2-img{ width:72px;height:72px;border-radius:20px;font-size:26px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 28px -10px rgba(0,0,0,1), 0 0 34px -14px rgba(var(--green-rgb),.8); } #view-token .tk2-name,#view-stock .tk2-name{ font-size:clamp(24px,2.6vw,34px);font-weight:650;letter-spacing:-.038em; line-height:1.1; } #view-token .tk2-sym,#view-stock .tk2-sym{ font-family:var(--font-mono);font-size:12px;letter-spacing:.06em; padding:4px 9px;border-radius:8px; background:rgba(var(--green-rgb),.1); border-color:rgba(var(--green-rgb),.26); color:var(--green); } #view-token .tk2-meta,#view-stock .tk2-meta{margin-top:9px;font-size:12px;} /* Il prezzo e' il motivo per cui si apre la pagina: prende la taglia che merita, e l'etichetta gli va SOPRA in maiuscoletto invece che sotto in grigio — cosi' il numero e' l'ultima cosa che si legge e quella che resta. */ #view-token .tk2-px,#view-stock .tk2-px{display:flex;flex-direction:column-reverse;align-items:flex-end;gap:7px;} #view-token .tk2-px-v,#view-stock .tk2-px-v{ font-size:clamp(26px,2.8vw,36px);letter-spacing:-.04em;line-height:1; background:linear-gradient(180deg,#fff 12%,rgba(255,255,255,.72) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } #view-token .tk2-px-l,#view-stock .tk2-px-l{ margin:0;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--text-mute); } #view-token .tk2-ib,#view-stock .tk2-ib{ width:40px;height:40px;border-radius:13px; border-color:var(--v4-edge-lo);background-image:var(--v4-glass-soft); transition:transform var(--v4-t-fast) var(--v4-ease), border-color var(--v4-t) var(--v4-ease), box-shadow var(--v4-t) var(--v4-ease); } #view-token .tk2-ib:hover,#view-stock .tk2-ib:hover{ transform:translateY(-2px); border-color:rgba(var(--green-rgb),.5); box-shadow:0 8px 22px -12px rgba(var(--green-rgb),1); } /* --- 2. la fascia dei numeri --- Sei celle in UNA riga sopra i 1080px: e' una fascia di strumenti, non una griglia di riquadri. I separatori sfumano alle estremita', come sulla home: un filo pieno da bordo a bordo taglia la fascia in scomparti. */ #view-token .tk2-kpi,#view-stock .tk2-kpi{ border-radius:var(--v4-r-lg); background-image:var(--v4-glass-soft); box-shadow:var(--v4-inner),var(--v4-lift-1); } @media (min-width:1080px){ #view-token .tk2-kpi,#view-stock .tk2-kpi{grid-template-columns:repeat(6,minmax(0,1fr));} #view-token .tk2-kpi>div:nth-child(n+4),#view-stock .tk2-kpi>div:nth-child(n+4){border-top:0;} #view-token .tk2-kpi>div:nth-child(3n),#view-stock .tk2-kpi>div:nth-child(3n){border-right:0;} } #view-token .tk2-kpi>div,#view-stock .tk2-kpi>div{ position:relative;padding:15px 18px;border-right:0;border-top:0; transition:background var(--v4-t) var(--v4-ease); } #view-token .tk2-kpi>div:hover,#view-stock .tk2-kpi>div:hover{ background:radial-gradient(130% 150% at 50% 0%,rgba(var(--green-rgb),.08),transparent 72%); } #view-token .tk2-kpi>div + div::before,#view-stock .tk2-kpi>div + div::before{ content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px; background:linear-gradient(180deg,transparent,var(--v4-edge-hi) 30%, var(--v4-edge-hi) 70%,transparent); } #view-token .tk2-k,#view-stock .tk2-k{letter-spacing:.15em;font-size:9px;} #view-token .tk2-v,#view-stock .tk2-v{font-size:18px;letter-spacing:-.03em;margin-top:6px;} /* --- 3. via la card dentro la card --- Il grafico e le altre schede vivono gia' dentro .tk2-card: qui perdono il proprio bordo, il proprio fondo e la propria ombra, e restano solo il contenuto. Nessun elemento si sposta — spariscono un bordo e un padding. */ #view-token .tk2-pane > .card, #view-token .tk2-pane > .chart-card, #view-stock .tk2-pane > .card,#view-stock .tk2-pane > .chart-card{ background:none;background-image:none; border:0;box-shadow:none;border-radius:0; padding-inline:18px; } #view-token .tk2-pane > .card::after,#view-stock .tk2-pane > .card::after,#view-stock .tk2-pane > .chart-card::after,#view-stock .tk2-pane > .chart-card::before, #view-token .tk2-pane > .chart-card::after, #view-token .tk2-pane > .card::before, #view-token .tk2-pane > .chart-card::before{display:none;} /* --- la barra verso la migrazione --- E' la barra piu' importante del prodotto: dice quanto manca alla fine del rimborso. Sale a 8px, prende l'alone della rete e la luce che la percorre (qui si', perche' e' UNA e sta dicendo "sta succedendo adesso"). */ #view-token .tk2-bond,#view-stock .tk2-bond{padding:14px 18px;} #view-token .tk2-bond-bar,#view-stock .tk2-bond-bar{ height:8px;border-radius:99px; background:rgba(255,255,255,.06); box-shadow:inset 0 1px 3px rgba(0,0,0,.6); } #view-token .tk2-bond-bar > span,#view-stock .tk2-bond-bar > span{ position:relative;overflow:hidden; background:linear-gradient(90deg, rgba(var(--green-rgb),.5) 0%,var(--green) 60%,var(--green-hi) 100%); box-shadow:0 0 14px -2px rgba(var(--green-rgb),.9); } #view-token .tk2-bond-bar > span::after,#view-stock .tk2-bond-bar > span::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.42) 50%,transparent); transform:translateX(-100%); animation:v4Sweep 2.8s var(--v4-ease-soft) infinite; } #view-token .tk2-bond-t b,#view-stock .tk2-bond-t b{font-size:15px;letter-spacing:-.02em;} /* --- il pannello di acquisto --- Deve essere l'oggetto piu' presente dello schermo, non uno dei riquadri. Su schermo alto resta appiccicato mentre il grafico scorre: e' l'unica cosa della pagina che si usa, e scorrere per ritrovarla e' assurdo. */ #view-token .tk2-side > .card:first-child, #view-token .trade-card,#view-token .buy-card,#view-stock .trade-card{ box-shadow:var(--v4-inner),var(--v4-lift-3); } @media (min-width:1080px) and (min-height:820px){ #view-token .tk2-side,#view-stock .tk2-side{position:sticky;top:82px;} } #view-token .trade-tab-row,#view-stock .trade-tab-row{ border-radius:99px;padding:4px; background:rgba(0,0,0,.28); box-shadow:inset 0 1px 3px rgba(0,0,0,.5); } #view-token .trade-tab,#view-stock .trade-tab{border-radius:99px;font-weight:600;} #view-token .trade-tab.active{ box-shadow:inset 0 0 0 1px rgba(var(--buy-rgb),.4), 0 6px 18px -10px rgba(var(--buy-rgb),.9); } #view-token .tk2-sym,#view-token .tk-name,#view-stock .tk-name{letter-spacing:-.035em;} /* ========================================================================== 19. L'INGRESSO ========================================================================== E' il pezzo che mancava, e spiega perche' l'applicazione "sembrava uguale". v2.js aveva una sequenza d'ingresso vera: hero in tre tempi, curva che si disegna, numeri che contano. Puntava a .hero, .hero-curve e .hero-copy, e v3 ha rifatto la home senza quegli elementi. Da allora l'app non ha nessun ingresso: si accende e basta, tutto insieme, allo stesso istante. La luce e i materiali di v4 non potevano bastare, perche' si vedono solo quando uno li cerca; l'ingresso lo vede chiunque, perche' e' la prima cosa che succede. COME FUNZIONA. v4.js mette `v4-intro` su quando l'app e' pronta a entrare (dopo il benvenuto se c'e', altrimenti subito). Le regole qui sotto valgono SOLO con quella classe, con un ritardo scalato per ogni pezzo: la barra scende, il titolo sale riga per riga da sotto una maschera, il pannello in evidenza scivola da destra e si mette a fuoco, i numeri contano (v4.js), le righe della lista entrano in cascata. Un secondo e mezzo in tutto, una volta per caricamento, mai al cambio di rotta. SENZA JS non succede niente: lo stato nascosto esiste solo sotto html.v4-intro, quindi una pagina senza script e' semplicemente ferma. ========================================================================== */ /* PERCHE' E' STATO RIFATTO. C'erano quindici elementi con quindici ritardi diversi, distribuiti su 1,1 secondi: la barra, poi la prima riga del titolo, poi la seconda, poi il paragrafo, poi le tre garanzie una alla volta, poi il pannello che arrivava da destra sfocato, poi la fascia dei numeri, poi i quattro numeri uno per uno, poi le modalita', poi la lista, poi le righe della lista in sedici passi. Ogni singolo pezzo era curato; messi insieme davano l'impressione che la pagina si stesse ancora caricando, o che si fosse rotta a meta'. Un ingresso si nota quando e' UNO: quindici ingressi sono quindici attese. Restano due movimenti. La prima schermata (titolo e pannello) sale insieme come un blocco solo; quello che sta sotto la piega la segue subito dopo, sempre tutto insieme. Mezzo secondo in tutto invece di uno e mezzo, e niente sfocature: era la sfocatura a far sembrare il pannello un'immagine che non aveva finito di scaricarsi. */ html.v4-intro .topbar{ animation:v4TopIn .5s var(--v4-ease) backwards; } @keyframes v4TopIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}} /* PRIMO MOVIMENTO: la prima schermata, in un pezzo solo. Il titolo NON si anima riga per riga. Una maschera per riga e' bella su una copertina, dove non c'e' altro; qui c'era anche un pannello che entrava da un'altra direzione nello stesso istante, e due movimenti contrari sulla stessa schermata si leggono come un errore. */ html.v4-intro #view-home .pitch, html.v4-intro #view-home .feature{ animation:v4Up .55s var(--v4-ease) .06s backwards; } @keyframes v4Up{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}} /* SECONDO MOVIMENTO: tutto il resto, insieme, appena dopo. */ html.v4-intro #view-home .market-bar, html.v4-intro #view-home .trust, html.v4-intro #view-home .modes, html.v4-intro #view-home .tok-panel{ animation:v4Up .55s var(--v4-ease) .2s backwards; } /* ========================================================================== 20. IL FONDO DELL'HERO: NIENTE ========================================================================== Qui c'erano due effetti, e sono stati tolti tutti e due. LA CURVA. Un SVG largo quanto la colonna, dietro il titolo, con l'area sfumata sotto e un punto luminoso che la percorreva ogni sette secondi. Il problema non era l'esecuzione, era il soggetto: una curva ascendente su fondo scuro e' lo sfondo di ogni progetto del settore, e a forza di stare ovunque ha smesso di significare qualcosa. Non diceva "questo prodotto e' una curva di bonding", diceva "sito di criptovalute", che e' esattamente l'impressione da cui un launchpad serio deve stare lontano. In piu' passava DIETRO il paragrafo: una riga di testo attraversata da un tratto luminoso si legge peggio e sembra un errore di montaggio. LA LUCE CHE PASSA. Una banda chiara che attraversava l'hero in diagonale ogni nove secondi. Stessa storia: e' l'effetto "shimmer" dei modelli comprati, e su una schermata che mostra prezzi veri un luccichio periodico non aggiunge fiducia, la toglie. Il fondo dell'hero adesso e' il fondo della pagina. A portare la schermata restano la frase, i numeri e il token in evidenza, che sono cose vere. Una curva il sito ce l'ha gia', ed e' quella del grafico accanto, con i suoi dati sotto e la sua scala. ========================================================================== */ #view-home .pitch{position:relative;isolation:isolate;} #view-home .split{position:relative;} /* L'INSEGNA DELLE RETI NON ANCORA ATTIVE. Con la scheda del token nascosta, v3 porta la griglia a una colonna e ferma la colonna del titolo a 62 caratteri: su uno schermo da 1440 restavano settecento pixel vuoti a destra, e Arc e Solana sembravano una pagina diversa dalle altre tre. Ora nella cella libera va il riquadro che descrive la rete, e la geometria torna quella di tutte: due colonne, testo a sinistra, stato a destra. Stessa specificita' della regola di v3 (id + classe + :has con due classi), e questo foglio viene dopo: vince senza !important. */ #view-home .split:has(> .chain-notice:not(.hidden)){ grid-template-columns:1fr 1.15fr; } #view-home .split > .chain-notice:not(.hidden){ grid-column:2;grid-row:1;align-self:start;margin:0; } #view-home .split:has(> .chain-notice:not(.hidden)) .pitch{ max-width:none;padding:4px; } /* Il titolo torna alla scala delle reti attive: accanto ha di nuovo un contrappeso, quindi non ha piu' bisogno di crescere per riempire. */ #view-home .split:has(> .chain-notice:not(.hidden)) .pitch h1{ font-size:clamp(27px,2.75vw,40px); } @media (max-width:1080px){ /* A colonna unica il riquadro torna in cima, dove stava: e' la prima cosa da sapere prima di leggere qualunque altra. */ #view-home .split > .chain-notice:not(.hidden){order:0;margin-bottom:14px;} } /* ========================================================================== 21. INCLINAZIONE ========================================================================== Il pannello in evidenza e le carte grandi si inclinano di pochi gradi verso il puntatore (v4.js scrive --v4-rx/--v4-ry). E' il gesto delle carte-prodotto di Apple: la superficie risponde alla mano. Quattro gradi e non di piu', perche' oltre i bordi del testo si distorcono. ========================================================================== */ .v4-tilt{ transform:perspective(1100px) rotateX(var(--v4-rx,0deg)) rotateY(var(--v4-ry,0deg)) translateZ(0); transition:transform .6s var(--v4-ease); transform-style:preserve-3d; } .v4-tilt.v4-tilting{transition:transform .12s ease-out;} /* ========================================================================== 22. IL BENVENUTO ========================================================================== La prima cosa che un nuovo utente vede e' il modale dei termini. Era una finestra grigia con quattro paragrafi e una casella: l'inizio piu' triste possibile per un prodotto che vuole sembrare costato qualcosa. Il markup non cambia (e' legale, e app.js ne legge gli id). Cambia tutto il resto: il logo della rete grande e in luce, il titolo da titolo, i quattro paragrafi come quattro righe con una tacca colorata, la casella che si accende, il bottone pieno con il riflesso. Dietro, l'aurora della rete che si muove: e' l'unica cosa sullo schermo, quindi puo' permettersi di essere piu' forte che altrove. ========================================================================== */ #termsModal{ background: radial-gradient(70% 60% at 20% 10%, rgba(var(--green-rgb),.22), transparent 60%), radial-gradient(60% 55% at 85% 90%, rgba(var(--v2-field-2,20,110,170),.18), transparent 60%), rgba(2,4,7,.86); backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); } #termsModal::before{ content:"";position:absolute;inset:-20%;pointer-events:none; background:radial-gradient(40% 40% at 50% 50%, rgba(var(--green-rgb),.16), transparent 70%); animation:v4Aurora 14s ease-in-out infinite alternate; } @keyframes v4Aurora{from{transform:translate3d(-8%,-6%,0) scale(1);}to{transform:translate3d(8%,6%,0) scale(1.15);}} #termsModal .modal{ max-width:560px;padding:44px 44px 38px; border-radius:28px; text-align:left; animation:v4Welcome .9s var(--v4-ease) .1s both; } @keyframes v4Welcome{from{opacity:0;transform:translateY(22px) scale(.97);}to{opacity:1;transform:none;}} /* Il logo: un ::before con l'immagine della rete attiva. Le cinque classi data-chain sotto scelgono il file, cosi' il benvenuto ha il marchio giusto su ogni rete senza toccare il markup. */ #termsModal .modal::before{ content:"";display:block;width:64px;height:64px;margin:0 0 22px; background:url("logo.png") center/contain no-repeat; filter:drop-shadow(0 0 22px rgba(var(--green-rgb),.75)); animation:v4LogoIn 1.2s var(--v4-ease) .2s both; } :root[data-chain="arc"] #termsModal .modal::before{background-image:url("logo-arc.png");} :root[data-chain="bsc"] #termsModal .modal::before{background-image:url("logo-bsc.png");} :root[data-chain="hyperevm"] #termsModal .modal::before{background-image:url("logo-hyper.png");} :root[data-chain="solana"] #termsModal .modal::before{background-image:url("logo-solana.png");} @keyframes v4LogoIn{from{opacity:0;transform:scale(.6) rotate(-30deg);}to{opacity:1;transform:none;}} #termsModal h2{ font-size:clamp(26px,3vw,34px);font-weight:650;letter-spacing:-.04em;line-height:1.08; margin-bottom:10px; } #termsModal .modal-sub{ font-size:10px;letter-spacing:.2em;color:var(--green);margin-bottom:26px; } /* `.terms-body > p` e non piu' `.modal > p`: i paragrafi sono stati chiusi dentro il blocco che scorre (vedi la sezione 51 in fondo), quindi non sono piu' figli diretti del riquadro e questi quattro selettori avrebbero smesso di applicarsi in silenzio — via i pallini, via le righe di separazione, via il grassetto chiaro. */ #termsModal .terms-body > p{ position:relative;padding:12px 0 12px 22px;margin:0; font-size:13.5px;line-height:1.6;color:var(--text-dim); border-top:1px solid var(--v4-edge-lo); } #termsModal .terms-body > p:last-of-type{border-bottom:1px solid var(--v4-edge-lo);} #termsModal .terms-body > p::before{ content:"";position:absolute;left:0;top:18px;width:8px;height:8px;border-radius:50%; background:var(--green);box-shadow:0 0 12px rgba(var(--green-rgb),.9); } #termsModal .terms-body > p strong{color:var(--text);} #termsModal .accept-row{ margin-top:24px;padding:14px 16px;border-radius:var(--v4-r-md); background:rgba(255,255,255,.03); border:1px solid var(--v4-edge-lo); transition:border-color var(--v4-t) var(--v4-ease),background var(--v4-t) var(--v4-ease); } #termsModal .accept-row:has(input:checked){ border-color:rgba(var(--green-rgb),.5); background:rgba(var(--green-rgb),.07); } #termsModal .btn-enter{ margin-top:16px;width:100%;padding:16px; border-radius:999px;font-size:15px; } #termsModal .btn-enter:disabled{opacity:.45;} /* ========================================================================== 23. LA HOME, CON UN RITMO ========================================================================== Tutti i blocchi della home avevano lo stesso peso: stessa larghezza, stesso fondo, stesso raggio, stessa distanza. Un elenco di pannelli, non una pagina. Qui si decide cosa domina in ogni schermata: - il titolo su DUE righe, non tre ("Change / your mind." orfano); - le cifre piu' grandi, perche' sono la prova; - una riga di fiducia subito sotto le cifre, dove uno se la chiede; - i titoli di sezione con una riga sotto, e piu' aria sopra. ========================================================================== */ /* 60px erano tarati su un titolo di due parole per riga. La frase ora e' una sola e deve stare in due righe dentro una colonna larga meta' schermo: a 44 ci sta, a 60 andava a quattro righe e spingeva giu' tutto il resto. La taglia vera e' piu' sotto, nella sezione 22: qui restano solo le regole di impaginazione delle due righe. */ #view-home .pitch h1{letter-spacing:-.035em;line-height:1.1;} #view-home .pitch h1 > span, #view-home .pitch h1 > em{display:block;font-style:normal;} #view-home .pitch h1 > br{display:none;} /* con span ed em a blocco, il br e' una riga vuota */ #view-home .ms-item dd{font-size:30px;} @media (max-width:760px){#view-home .ms-item dd{font-size:19px;letter-spacing:-.04em;}} /* La riga della fiducia. Quattro voci con un segno di spunta nel colore della rete, in una riga sola, senza riquadro: e' una didascalia delle cifre, non un altro pannello. Sotto i 900px va su due colonne. */ #view-home .trust{ list-style:none;margin:0 0 18px;padding:14px 22px; display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 24px; border-radius:var(--v4-r-lg); background:linear-gradient(90deg,rgba(var(--green-rgb),.05),transparent 60%); box-shadow:inset 0 0 0 1px var(--v4-edge-lo); } #view-home .trust li{ display:flex;align-items:center;gap:0; font-size:12.5px;font-weight:500;letter-spacing:-.01em;color:var(--text-dim); min-width:0;line-height:1.35; } #view-home .trust li svg{ width:18px;height:18px;padding:3.5px;border-radius:50%;flex-shrink:0;margin-right:10px; color:var(--green); background:rgba(var(--green-rgb),.12); box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.3); } #view-home .trust .dexn{color:var(--text);font-weight:600;margin-left:.32em;} @media (max-width:900px){ #view-home .trust{grid-template-columns:1fr 1fr;padding:14px 16px;} } @media (max-width:520px){#view-home .trust{grid-template-columns:1fr;}} /* I titoli di sezione, con la riga sotto e l'aria sopra. Il margine di .how e' inline nel markup (32px): l'unico !important di questa sezione. */ #view-home .how{margin-top:40px !important;} #view-home .why{margin-top:36px;} #view-home .how .section-head,#view-home .why .section-head{ background:none;border:0;box-shadow:none;border-radius:0; padding:0;margin:0 0 6px;overflow:visible; } #view-home .how .section-head::before,#view-home .why .section-head::before{display:none;} #view-home .how .section-title,#view-home .why .section-title{font-size:26px;} #view-home .section-lede{ margin:0 0 24px 15px;font-size:14.5px;line-height:1.6;color:var(--text-dim); max-width:60ch; } #view-home .why .section-lede{margin-bottom:18px;} /* ========================================================================== 24. L'INCHIOSTRO SOTTO LE SCHEDE ========================================================================== Le file di schede (filtri della home, schede del token, del profilo) cambiavano lo sfondo della voce attiva: la voce nuova si accende, la vecchia si spegne, e fra le due non succede niente. Ora un'unica pillola SCIVOLA dalla vecchia alla nuova (v4.js la posiziona). E' il controllo segmentato di iOS, ed e' il dettaglio che piu' di ogni altro fa sembrare un'interfaccia "nativa" invece che "web". La pillola sta SOTTO la voce (z-index 0, voci a 1) cosi' il testo resta leggibile e il fondo della voce attiva, che gia' c'e', si somma. ========================================================================== */ .feed-tabs,.tk2-tabs,.pf-tabs{position:relative;} .feed-tabs > *,.tk2-tabs > *,.pf-tabs > *{position:relative;z-index:1;} .v4-ink{ position:absolute;left:0;top:0;height:0;width:0;z-index:0 !important; border-radius:999px;pointer-events:none; background:rgba(var(--green-rgb),.13); /* Solo il contorno INTERNO. La seconda ombra era un alone da 22px che usciva sotto la pillola e sfumava sul fondo: il colore andava fuori dal bordo, ed e' proprio la cosa che questa pillola non deve fare, perche' scorre da una voce all'altra e si porta la macchia dietro. */ box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.35); opacity:0; transition:transform .45s var(--v4-ease),width .45s var(--v4-ease), height .45s var(--v4-ease),opacity .3s var(--v4-ease); } .v4-ink.on{opacity:1;} /* Quando l'inchiostro c'e', la voce attiva non ha piu' bisogno del proprio fondo: si sommerebbero due pillole. Resta il colore del testo. #view-home DAVANTI, e non e' pedanteria: il fondo della voce attiva e' dichiarato in v3 come "#view-home .feed-tab.active", e un id batte qualunque numero di classi a prescindere dall'ordine dei file. Il risultato era esattamente la somma che questa regola serve a impedire: il rettangolo della voce a raggio 10px acceso al 14%, e sopra la pillola a raggio 999px accesa al 13% col suo filo di contorno. Due bordi con curve diverse a un pixel di distanza, che a schermo non si leggono come due bordi ma come un bordo sbavato: e' l'alone che si vedeva intorno a "Trending". */ #view-home .feed-tabs.v4-inked .feed-tab.active, #view-home .pf-tabs.v4-inked .pf-tab.active, .feed-tabs.v4-inked .feed-tab.active,.pf-tabs.v4-inked .pf-tab.active, .tk2-tabs.v4-inked .tk2-tab.active{ background:transparent;box-shadow:none;border-color:transparent; } /* Sulle schede del token l'inchiostro e' una sottolineatura, non una pillola. bottom:0 e non -1: la barra ha overflow-x:auto, quindi quel pixel fuori veniva tagliato e la sottolineatura si vedeva alta uno invece che due. La riga sotto la voce attiva la disegna gia' l'inchiostro: il bordo di v2 sparisce, o si vedono due righe dello stesso colore a un pixel di distanza. */ .tk2-tabs .v4-ink{ border-radius:2px 2px 0 0;height:2px !important;top:auto;bottom:0; /* Stessa ragione: la sottolineatura e' spessa due pixel, l'alone da 12px ne accendeva dodici e sbavava sopra il testo delle schede. */ background:var(--green);box-shadow:none; } .tk2-tabs.v4-inked .tk2-tab.active{border-bottom-color:transparent;} /* ========================================================================== 25. LE COSE CHE ARRIVANO ========================================================================== Una riga nuova nella lista o un nuovo scambio nell'attivita' live si accende per un secondo e mezzo: e' l'unico modo in cui uno si accorge che la pagina si e' aggiornata senza fissarla. Un lampo nel colore della rete che sfuma, e nient'altro si muove. ========================================================================== */ .v4-new{animation:v4Flash 1.6s var(--v4-ease) both;} @keyframes v4Flash{ 0%{background-color:rgba(var(--green-rgb),.16);box-shadow:inset 3px 0 0 var(--green);} 100%{background-color:transparent;box-shadow:inset 3px 0 0 transparent;} } /* Gli scheletri di caricamento scintillano invece di stare fermi in grigio: "fermo" si legge come "rotto", "scintilla" come "sta arrivando". */ .skel-line{ background:linear-gradient(90deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.13) 50%,rgba(255,255,255,.05) 100%) !important; background-size:220% 100% !important; animation:v4Shimmer 1.5s ease-in-out infinite; border-radius:6px; } @keyframes v4Shimmer{from{background-position:120% 0;}to{background-position:-120% 0;}} /* Il cambio di rete non e' piu' uno scatto: il fondo e la barra passano al colore nuovo in un secondo, come sulla landing. */ html,body{transition:background-color .9s var(--v4-ease);} /* ========================================================================== 26. L'ATTIVITA' DAL VIVO ========================================================================== La colonna accanto al token in evidenza: gli scambi che arrivano adesso. Era il 40% del riquadro con dentro "No trades yet." in grigio, e quando gli scambi c'erano erano sei righe da 11px. Ora la colonna e' piu' stretta (250px), ogni scambio e' una riga con l'avatar del token, il verso in una pastiglia verde o rossa e l'importo in monospaziato; e il vuoto e' un'attesa disegnata, non una frase. ========================================================================== */ #view-home .feature{grid-template-columns:1fr 250px;} @media (max-width:1080px){#view-home .feature{grid-template-columns:1fr;}} /* La pillola sopra il titolo. Stessa forma e stesso pallino della landing: e' il primo elemento che si vede entrando, e ritrovarlo identico e' meta' del lavoro di far sembrare i due un posto solo. */ #view-home .pitch-kick{ align-self:flex-start; display:inline-flex;align-items:center;gap:8px; padding:6px 13px 6px 10px;margin-bottom:16px;border-radius:999px; border:1px solid rgba(var(--green-rgb),.26); background:rgba(var(--green-rgb),.07); font-size:10px;font-weight:600;letter-spacing:.17em;text-transform:uppercase; color:var(--green); } #view-home .pitch-kick::before{ content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0; background:var(--green);box-shadow:0 0 10px rgba(var(--green-rgb),.9); } /* L'onda che si espande: la stessa del pallino "vivo" altrove nel sito. Le coordinate ricalcano quelle del pallino qui sopra — 10px di padding a sinistra, centrato in verticale — perche' un pseudo-elemento assoluto non sa dove sia il fratello che deve seguire. */ #view-home .pitch-kick::after{ content:"";position:absolute;left:10px;top:calc(50% - 3px); width:6px;height:6px;border-radius:50%; background:var(--green);opacity:0; animation:v4KickPing 2.6s var(--v4-ease) infinite; pointer-events:none; } @keyframes v4KickPing{ 0%{transform:scale(1);opacity:.55;} 70%,100%{transform:scale(3.4);opacity:0;} } @media (prefers-reduced-motion:reduce){#view-home .pitch-kick::after{animation:none;}} #view-home .feat-side{padding:16px 16px 10px;} /* L'ALTEZZA DELL'INSEGNA NON LA DECIDE PIU' L'ATTIVITA' DAL VIVO. Il pannello e' una griglia di due celle e la riga e' alta quanto la piu' alta delle due. A destra c'e' un elenco che arriva dalla chain: su una rete con sei scambi recenti diventava piu' alto della scheda del token a sinistra, e allora il pannello cresceva, la colonna del titolo — che ha sempre le stesse due frasi — restava centrata in mezzo a un vuoto, e la scheda del token si ritrovava mezzo pannello vuoto sotto. Il risultato era che la stessa schermata aveva un aspetto diverso su ogni rete: su HyperEVM, con tre scambi, era giusta; su Robinhood, con sei, era sbilanciata. Non era una scelta di disegno, era il numero di righe che arrivava dal server. Con flex-basis:0 l'elenco non porta piu' la propria altezza al calcolo: l'insegna e' alta quanto la scheda del token, sempre, su tutte le reti, e le righe che non ci stanno restano sotto, raggiungibili scorrendo. QUATTRO RIGHE, E LE ALTRE SI RAGGIUNGONO SCORRENDO. Prima le righe in eccesso venivano tagliate: si vedeva mezza riga sfumata e quello che c'era sotto non si poteva raggiungere. Ora l'elenco scorre — dodici scambi dentro l'altezza di quattro — e il pannello resta della stessa taglia su qualunque rete, con qualunque quantita' di scambi. */ /* Le quattro righe valgono OVUNQUE, non solo sul monitor grande. La regola stava tutta dentro @media (min-width:1081px) perche' nasceva per pareggiare le due colonne del pannello, e sotto quella soglia le colonne diventano una sola. Ma il problema che risolve non e' l'equilibrio fra colonne: e' un elenco che arriva dalla chain e cresce a piacere. Su telefono infatti si allungava per dodici righe, cioe' due schermate e mezza di scambi prima ancora di aver visto il resto della home. Fuori dalla griglia non c'e' un fratello da pareggiare, quindi l'altezza si dichiara: 196px sono esattamente quattro righe da 49. */ #view-home .feat-side > #trendingRow{ overflow-y:auto;overscroll-behavior:contain; /* La barra e' sottile e nel colore del bordo: deve dire che si puo' scorrere senza diventare un elemento grafico. */ scrollbar-width:thin;scrollbar-color:var(--v4-edge-hi) transparent; } /* La sfumatura in fondo dice "c'e' dell'altro sotto", quindi va messa solo quando c'e' davvero dell'altro sotto: con quattro scambi o meno l'elenco finisce dove si vede, e una sfumatura li' sbiadirebbe l'ultima riga per annunciare il nulla. La quinta riga e' la condizione esatta. */ #view-home .feat-side > #trendingRow:has(.ev:nth-child(5)){ -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%); mask-image:linear-gradient(180deg,#000 88%,transparent 100%); } @media (max-width:1080px){ #view-home .feat-side > #trendingRow{max-height:196px;} } @media (min-width:1081px){ #view-home .feature{align-items:stretch;min-height:232px;} #view-home .feat-side{display:flex;flex-direction:column;min-height:0;} #view-home .feat-side > .k{flex:none;} #view-home .feat-side > #trendingRow{flex:1 1 0;min-height:0;} } #view-home .feat-side .k{letter-spacing:.16em;margin-bottom:6px;} /* 12px e non 10: quattro righe riempiono esattamente l'altezza visibile dell'elenco, quindi non se ne vede mezza tagliata sotto, e ogni riga ha il bersaglio piu' comodo da toccare. */ #view-home .ev{ padding:12px 4px;gap:10px;border-radius:var(--v4-r-sm); transition:background var(--v4-t) var(--v4-ease),transform var(--v4-t) var(--v4-ease); } #view-home .ev:hover{background:rgba(255,255,255,.04);transform:translateX(2px);} #view-home .ev-av{ width:28px;height:28px;border-radius:9px;font-size:11px;font-weight:600; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 4px 10px -6px rgba(0,0,0,1); } #view-home .ev-b{ font-size:8.5px;letter-spacing:.1em;padding:3px 7px;border-radius:99px; border:1px solid transparent; } #view-home .ev-b.buy{color:#4ade80;background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.28);} #view-home .ev-b.sell{color:#ff6b78;background:rgba(255,79,98,.1);border-color:rgba(255,79,98,.28);} #view-home .ev-b.new{color:var(--green);background:rgba(var(--green-rgb),.12);border-color:rgba(var(--green-rgb),.3);} #view-home .ev-n{font-size:12.5px;font-weight:600;letter-spacing:-.01em;} #view-home .ev-v{font-size:11.5px;color:var(--text);font-variant-numeric:tabular-nums;} /* Il vuoto: un anello che respira e due righe. "No trades yet." lo scrive app.js; la seconda riga e la figura le mette il CSS. */ #view-home #trendingRow .hl-empty{ display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:34px 8px 30px !important; font-size:13px;color:var(--text-dim);min-height:220px; } #view-home #trendingRow .hl-empty::before{ content:"";width:38px;height:38px;border-radius:50%;margin-bottom:16px; border:1.5px solid rgba(var(--green-rgb),.5); box-shadow:0 0 0 6px rgba(var(--green-rgb),.06),0 0 24px -6px rgba(var(--green-rgb),.8); background:radial-gradient(circle,rgba(var(--green-rgb),.35) 0%,transparent 60%); animation:v4Breathe 2.8s ease-in-out infinite; } @keyframes v4Breathe{ 0%,100%{box-shadow:0 0 0 6px rgba(var(--green-rgb),.06),0 0 24px -6px rgba(var(--green-rgb),.8);transform:scale(1);} 50%{box-shadow:0 0 0 12px rgba(var(--green-rgb),.03),0 0 34px -4px rgba(var(--green-rgb),1);transform:scale(1.06);} } #view-home #trendingRow .hl-empty::after{ content:"Trades on this chain show up here the moment they land."; display:block;margin-top:6px;font-size:11.5px;line-height:1.5;color:var(--text-mute); max-width:20ch; } /* ========================================================================== 27. LA CHAT ========================================================================== Era una card con una lista di righe bordate e una casella di testo: leggibile e anonima. Ora ogni messaggio e' una riga con un avatar, il mittente in monospaziato accentato, l'ora a destra e il testo sotto; i propri messaggi hanno una barra nel colore della rete; il team porta la pastiglia "dev"; la casella sta appoggiata in fondo su vetro e il bottone e' pieno. Il markup non cambia: app.js lo genera. ========================================================================== */ #view-chat .section-title{font-size:26px;} #view-chat .list-note{font-size:14.5px;color:var(--text-dim);margin:0 0 20px 15px;max-width:60ch;} #view-chat .gc-card{padding:0;overflow:hidden;border-radius:var(--v4-r-xl);} #view-chat .gc-list{ max-height:min(62vh,640px);overflow-y:auto;padding:8px 0; overscroll-behavior:contain; } #view-chat .cm-row,#view-chat .gc-row{ display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:13px; padding:13px 20px;border:0;border-radius:0;background:none; border-bottom:1px solid var(--v4-edge-lo); transition:background var(--v4-t) var(--v4-ease); } #view-chat .cm-row:last-child,#view-chat .gc-row:last-child{border-bottom:0;} #view-chat .cm-row:hover,#view-chat .gc-row:hover{background:rgba(255,255,255,.025);} /* L'avatar: un tondo con la prima lettera sarebbe la cosa giusta, ma il markup non porta un'iniziale leggibile (e' un indirizzo). Un tondo con il gradiente della rete, piu' pieno per il team, distingue abbastanza. */ #view-chat .cm-row::before,#view-chat .gc-row::before{ content:"";grid-row:1 / span 2;width:36px;height:36px;border-radius:12px; background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.04)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); } #view-chat .cm-row:has(.cm-badge)::before,#view-chat .gc-row.is-admin::before{ background:linear-gradient(150deg,rgba(var(--green-rgb),.55),rgba(var(--green-rgb),.15)); box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.4),0 0 18px -6px rgba(var(--green-rgb),.9); } #view-chat .cm-row.is-me,#view-chat .gc-row.is-me{ background:linear-gradient(90deg,rgba(var(--green-rgb),.07),transparent 50%); box-shadow:inset 3px 0 0 var(--green); } #view-chat .cm-head,#view-chat .gc-head{margin-bottom:4px;gap:8px;} #view-chat .cm-who,#view-chat .gc-who{font-size:12px;letter-spacing:.02em;color:var(--text);font-weight:500;} #view-chat .cm-who:hover,#view-chat .gc-who:hover{color:var(--green);} #view-chat .cm-badge,#view-chat .gc-badge{ padding:2px 7px;border-radius:99px;font-size:8.5px;letter-spacing:.12em; color:var(--green);background:rgba(var(--green-rgb),.12); box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.3); } #view-chat .cm-time,#view-chat .gc-time{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;margin-left:auto;} #view-chat .gc-tools{display:flex;gap:4px;} #view-chat .gc-t{border-radius:8px;} #view-chat .cm-body,#view-chat .gc-body{font-size:14px;line-height:1.55;} #view-chat .cm-empty{ margin:14px 16px;padding:44px 16px;border-radius:var(--v4-r-lg); border:1px dashed var(--v4-edge-lo);font-size:13.5px; } /* La casella: appoggiata in fondo, su vetro, sempre visibile mentre la lista scorre sopra. */ #view-chat .cm-box{ margin:0;padding:14px 16px 6px;gap:10px; background:linear-gradient(180deg,transparent,rgba(var(--v4-bar-rgb,6,9,13),.7) 30%); border-top:1px solid var(--v4-edge-lo); } #view-chat .cm-box textarea{ border-radius:var(--v4-r-md);padding:12px 14px;font-size:14px; background:rgba(0,0,0,.28);border:1px solid var(--v4-edge-lo); box-shadow:inset 0 2px 6px rgba(0,0,0,.4); transition:border-color var(--v4-t) var(--v4-ease),box-shadow var(--v4-t) var(--v4-ease); } #view-chat .cm-box textarea:focus{ border-color:rgba(var(--green-rgb),.55); box-shadow:0 0 0 4px rgba(var(--green-rgb),.1),inset 0 2px 6px rgba(0,0,0,.3); } #view-chat #gcSend{ padding:12px 20px;border-radius:999px;font-weight:600; color:var(--on-green);border:0; background:linear-gradient(168deg,var(--green-hi),var(--green) 55%,var(--green-dim)); box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 10px 26px -12px rgba(var(--green-rgb),.9); } #view-chat #gcSend:hover{transform:translateY(-1px);filter:brightness(1.05);} #view-chat .cm-hint{padding:0 16px 14px;margin:0;font-size:11.5px;} #view-chat .gc-pin{ border-radius:var(--v4-r-lg);padding:14px 18px;margin-bottom:14px; background:linear-gradient(90deg,rgba(var(--green-rgb),.1),transparent 60%); box-shadow:inset 3px 0 0 var(--green),inset 0 0 0 1px var(--v4-edge-lo); } /* ========================================================================== 28. UNA VOCE SOLA PER I TITOLI ========================================================================== Il titolo della home, quello della landing e quello degli stock token avevano tre trattamenti diversi: bianco, gradiente oro su meta' frase, gradiente oro su meta' frase con un'altra angolazione. Tre modi di scrivere la stessa cosa nello stesso sito sono la ragione per cui, scorrendo, sembra che ogni pagina venga da un progetto diverso. Da qui in poi i titoli sono monocromatici ovunque. Il colore della rete non sparisce: sta nei bottoni, nelle pillole, nelle barre di avanzamento, nei numeri che contano e nella curva — dove indica qualcosa, invece di decorare una frase. */ /* L'ECCEZIONE, UNA SOLA E RICONOSCIBILE. La seconda riga dell'insegna — "Change your mind." nella home, la stessa sulla landing — corre dal bianco all'accento della rete. E' l'unico testo del sito che prende colore, e cambia quando si cambia catena: e' li' che si vede, senza doverlo scrivere, che il prodotto e' lo stesso su cinque catene. Tutti gli altri titoli restano monocromatici, quindi questa resta un'eccezione e non un terzo trattamento tipografico. Il ritaglio sul testo taglia le code di g/y/p quando l'interlinea sta sotto 1: lo spazio si restituisce col padding e si riassorbe col margine. */ #view-home .pitch h1 > em{ background:linear-gradient(96deg,#ffffff 0%,var(--green) 78%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; padding-bottom:.14em;margin-bottom:-.14em; } /* Solana ha due colori, non uno: la sfumatura li attraversa entrambi. */ :root[data-chain="solana"] #view-home .pitch h1 > em{ background:linear-gradient(96deg,#ffffff 0%,var(--green) 52%,var(--green-hi) 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 lascerebbe la frase INVISIBILE invece che sfumata: si torna al colore pieno, nessun effetto ma si legge. */ @supports not ((-webkit-background-clip:text) or (background-clip:text)){ #view-home .pitch h1 > em{ background:none;-webkit-text-fill-color:var(--green);color:var(--green); } } .mb-grad{ background:none; -webkit-background-clip:border-box;background-clip:border-box; -webkit-text-fill-color:currentColor; color:inherit; /* Il ritaglio sul testo non c'e' piu': lo spazio per la coda della "g" era compensato da un margine negativo, e senza ritaglio quei due valori sfalsavano la riga. */ display:inline;padding-bottom:0;margin-bottom:0; } /* Il titolo degli stock token adesso e' una frase intera e non due parole: piu' respiro fra le righe, e un corpo che non lo fa diventare un cartello. */ .mb-title{font-size:clamp(21px,2.6vw,32px);line-height:1.12;} /* ========================================================================== 29. UNA MISURA SOLA PER TUTTE LE PAGINE ========================================================================== E' il motivo piu' grosso per cui, passando da una schermata all'altra, il sito sembrava un insieme di pezzi presi da progetti diversi. Nove pagine avevano OTTO larghezze: home, chat 1360 terminal 1600 stocks 1440 profilo, token 1240 create 1080 docs 1060 watchlist 640 Tutte centrate, quindi il bordo sinistro del contenuto saltava da 0 a 40 a 100 a 180 a 400 pixel a ogni click del menu: il titolo si spostava, la prima colonna si spostava, e il cervello lo legge come "un'altra pagina di un altro sito" anche quando i colori sono identici. Ora la cornice e' una sola, e le colonne interne conservano la misura che serve a loro: un modulo non diventa largo 1360 solo perche' la pagina lo e', e un testo da leggere resta sotto i settanta caratteri per riga. Cambia il contenuto, non il punto da cui parte. ========================================================================== */ @media (min-width:1001px){ .wrap, #view-create .wrap, #view-create-stock .wrap, #view-stocks .wrap, .tm-wrap, #view-profile .page, .token-container{ max-width:1360px; margin-left:auto;margin-right:auto; } /* Il modulo di creazione resta largo quanto deve: un campo di testo da 900 pixel non e' piu' facile da compilare, e' solo piu' largo. La colonna dell'anteprima resta una scheda. Il blocco si ancora a sinistra, cosi' il titolo sopra e la prima colonna sotto partono dallo stesso punto di ogni altra pagina. */ .create-grid{ grid-template-columns:minmax(0,660px) minmax(0,390px); justify-content:start; } } /* ========================================================================== 30. IL CASSETTO SU TELEFONI CORTI ========================================================================== .sidebar e' un flex in colonna. Su un telefono alto (844, 896, 932) il contenuto ci sta e va tutto bene. Su un 667, un 640 o un 568 il contenuto misura 834px e non ci sta: flex allora RESTRINGE gli elementi, perche' un figlio di flex ha flex-shrink:1 se nessuno dice il contrario. Il bottone di lancio passava da 46px a 30, cioe' schiacciato a due terzi, con il testo che toccava i bordi. E' il "mezzo tagliato" che si vedeva. Due righe lo risolvono: nessun figlio del cassetto si restringe, e i due bottoni hanno un'altezza minima da dito (44px, il minimo di Apple). Il cassetto scorre gia' (overflow-y:auto), quindi su schermi corti si arriva in fondo scorrendo, con i bottoni interi invece che compressi. ========================================================================== */ .sidebar > *{flex-shrink:0;} /* Stessa altezza per tutti e due: 46 il pieno e 48 il contornato facevano sembrare il primo compresso accanto al secondo, che e' l'altra meta' del "mezzo tagliato". 46px superano il minimo di 44 e i due bottoni finiscono identici. */ .sidebar .side-cta{ /* Altezza fissa e non minima: con box-sizing:border-box il bordo del secondo bottone rientra nei 46, mentre con min-height il piu' alto dei due restava 48 e la differenza si vedeva. Il testo lo centra il flex, quindi il padding verticale non serve piu'. */ height:46px;padding-top:0;padding-bottom:0; display:flex;align-items:center;justify-content:center; } /* SU TELEFONI CORTI I BOTTONI SALGONO SOPRA LE ALTRE RETI. Il contenuto del cassetto misura 850px. Su un 667, un 640 o un 568 i due bottoni finiscono sotto il bordo dello schermo: si aprono le voci di menu e l'azione principale non si vede, va cercata scorrendo. Spostati sopra "Other chains" stanno a circa 500px dall'alto, cioe' dentro lo schermo di qualunque telefono; l'elenco delle altre reti e il piede scorrono sotto, ed e' li' che uno si aspetta di dover scorrere. Si fa con l'ordine del flex, senza toccare il documento: l'ordine di lettura per chi usa la tastiera o uno screen reader resta quello del markup. */ @media (max-width:900px) and (max-height:760px){ .sidebar .side-cta{order:1;} .sidebar .side-label-chains, .sidebar #sidebarChains{order:2;} .sidebar .side-foot{order:3;} /* Un filo d'aria sopra i bottoni, che ora seguono l'ultima voce di menu. */ .sidebar .side-cta:first-of-type{margin-top:14px;} } /* ========================================================================== 31. IL TASTO DELLA RICERCA ========================================================================== Il segno "/" in fondo al campo. Non e' decorazione: e' l'unico modo in cui qualcuno scopre che la scorciatoia esiste. Sparisce appena il campo viene usato, e su telefono non compare affatto perche' non c'e' una tastiera fisica a cui riferirsi (lo decide v4.js). */ .search{position:relative;} .v4-kbd{ position:absolute;right:10px;top:50%;transform:translateY(-50%); min-width:19px;height:19px;padding:0 5px; display:flex;align-items:center;justify-content:center; font-family:var(--font-mono);font-size:11px;line-height:1; color:var(--text-mute); border-radius:5px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px var(--v4-edge-lo),0 1px 0 var(--v4-edge-lo); pointer-events:none; } /* Il campo lascia spazio al tasto, o il testo digitato ci finisce sotto. */ .search input{padding-right:34px;} /* ========================================================================== 32. INDIRIZZO CHE NON E' UN LAUNCHPAD ========================================================================== Una schermata sola, centrata, con il minimo che serve: cos'e' successo, l'indirizzo per riconoscerlo, e due strade. Non e' una pagina d'errore da nascondere: chi ci arriva ha cliccato un link vecchio o incollato un indirizzo, e la cosa piu' utile e' dirgli dove guardare. */ #view-token .tk-missing{ display:flex;flex-direction:column; min-height:min(62vh,520px); } .tkm-card{ margin:auto;max-width:520px;text-align:center; padding:34px 30px 30px;border-radius:var(--v4-r-lg); background:linear-gradient(176deg,rgba(255,255,255,.045),rgba(255,255,255,.01) 46%,transparent); box-shadow:inset 0 1px 0 var(--v4-edge-hi),0 2px 8px rgba(0,0,0,.45), 0 30px 70px -44px rgba(0,0,0,1); } .tkm-icon{ width:52px;height:52px;margin:0 auto 18px;border-radius:16px; display:flex;align-items:center;justify-content:center; color:var(--text-mute); background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--v4-edge-lo); } .tkm-icon svg{width:24px;height:24px;} .tkm-card h1{font-size:22px;font-weight:600;letter-spacing:-.03em;margin:0;} .tkm-card p{ margin-top:11px;font-size:14px;line-height:1.62;color:var(--text-dim); } .tkm-card code{ font-family:var(--font-mono);font-size:12.5px;color:var(--text); padding:2px 7px;border-radius:6px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px var(--v4-edge-lo); white-space:nowrap; } .tkm-acts{ margin-top:22px;display:flex;gap:12px;flex-wrap:wrap; align-items:center;justify-content:center; } .tkm-alt{ font-size:13.5px;color:var(--text-dim);text-decoration:none; padding:10px 4px; border-bottom:1px solid var(--v4-edge-lo); transition:color var(--v4-t-fast) var(--v4-ease),border-color var(--v4-t-fast) var(--v4-ease); } .tkm-alt:hover{color:var(--green);border-bottom-color:rgba(var(--green-rgb),.5);} /* La reputazione del creatore, accanto al suo indirizzo. Un dato, non un giudizio: stessa taglia e stesso peso del resto della riga di contorno. Solo quando le uscite sono molte e gli arrivi zero prende un tono, e resta comunque una tinta e non un allarme. */ .tk2-devrep{ display:inline-flex;align-items:center; margin-left:8px;padding:2px 7px;border-radius:6px; font-family:var(--font-mono);font-size:10.5px;letter-spacing:.02em; color:var(--text-mute); background:rgba(255,255,255,.045); box-shadow:inset 0 0 0 1px var(--v4-edge-lo); cursor:help; } .tk2-devrep:empty{display:none;} .tk2-devrep.is-serial{ color:#fbbf24;background:rgba(251,191,36,.08); box-shadow:inset 0 0 0 1px rgba(251,191,36,.26); } /* ========================================================================== 33. LA CONCENTRAZIONE DEGLI HOLDER ========================================================================== Una riga sola sopra l'elenco. Il colore e' l'unica cosa che cambia fra i tre gradi, e cambia poco: e' un'informazione, non un allarme. Rosso pieno su una distribuzione concentrata direbbe "truffa", che non e' quello che il numero dice — dice solo che poche mani bastano a muovere il prezzo. */ .hl-conc{ display:flex;align-items:center;gap:12px; margin:0 0 12px;padding:11px 14px; border-radius:var(--v4-r-md); background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px var(--v4-edge-lo); } .hl-conc-v{ font-family:var(--font-mono);font-size:19px;font-weight:600; letter-spacing:-.03em;line-height:1;flex-shrink:0; } .hl-conc-t{font-size:12.5px;color:var(--text-dim);line-height:1.35;} .hl-conc-t i{ display:block;font-style:normal;font-size:11px;color:var(--text-mute); margin-top:2px; } .hl-conc-bassa .hl-conc-v{color:#4ade80;} .hl-conc-media .hl-conc-v{color:var(--text);} .hl-conc-alta .hl-conc-v{color:#fbbf24;} .hl-conc-alta{box-shadow:inset 0 0 0 1px rgba(251,191,36,.26);background:rgba(251,191,36,.05);} /* Chi ha chiesto meno movimento riceve meno movimento: restano i colori e i materiali, spariscono le animazioni continue e le comparse. */ @media (prefers-reduced-motion:reduce){ .v4-rise{opacity:1 !important;transform:none !important;} #view-home .feature .feat-bar > i::after, #view-token .token-progress-fill::after, #view-stock .token-progress-fill::after, .pulse::after,.feed-pulse::after{animation:none;} .btn-launch::after,.btn-enter::after,.pf-btn-primary::after, .btn-launch-top::after,.side-cta::after{display:none;} #view-home,#view-token,#view-create,#view-profile,#view-docs, #view-terminal,#view-stocks,#view-stock,#view-watchlist,#view-chat, #view-create-stock,.modal{animation:none;} } /* ========================================================================== INGRESSI DI LANCIO SU UNA CHAIN NON ANCORA ATTIVA -------------------------------------------------------------------------- Li marca initLaunchGates() in chains.js. Il bottone resta al suo posto, perche' e' anche una promessa, ma smette di sembrare premibile: perde il pieno d'accento, prende il contorno di un elemento inattivo e porta l'etichetta "soon" a destra, la stessa che il selettore di rete usa gia' per Arc e Solana. Cosi' la parola "soon" significa la stessa cosa in tutti i punti del sito. ========================================================================== */ .is-soon-gate{ background:transparent !important; background-image:none !important; color:var(--text-mute) !important; border:1px dashed var(--border-2) !important; box-shadow:none !important; cursor:default !important; /* filter e transform restano fermi: un bottone spento che si illumina al passaggio rimanderebbe esattamente il messaggio che stiamo togliendo. */ filter:none !important; transform:none !important; /* NIENTE display QUI. C'era `display:inline-flex !important`, e con una specificita' di 0-1-0 piu' !important vinceva sulla media query che su telefono nasconde .btn-launch-top: su Solana a 393px il bottone tornava nella testata largo 146px, spingeva il selettore di rete a "Sola..." e buttava "Login" fuori dallo schermo. Verificato: su BNB alla stessa larghezza quel bottone e' display:none, su Solana era display:flex. Questa regola dice come si VEDE un ingresso non ancora attivo, non SE si vede: quello lo decidono le media query, ed e' la terza volta che me lo riscrivo. Le proprieta' di allineamento restano perche' sono inerti su un elemento che non e' flex, e i due che lo sono (.head-cta, .btn-launch-top) le usano gia'. */ align-items:center;justify-content:center; } .is-soon-gate:hover,.is-soon-gate:active{ filter:none !important;transform:none !important; background:transparent !important; } .is-soon-gate::after{display:none !important;} /* La larghezza si', il display no: nel cassetto il bottone occupa la riga intera come quello delle chain attive. */ .side-cta.is-soon-gate,.head-cta.is-soon-gate{width:100%;} /* margin invece di gap sul contenitore: cosi' l'etichetta sta alla giusta distanza sia dentro un bottone flex sia dentro uno a blocco, senza che il contenitore debba dichiarare un display che non gli spetta. */ .soon-gate-tag{ margin-left:9px;vertical-align:middle; font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600; line-height:1;padding:3px 6px;border-radius:6px; color:var(--chain-accent,var(--green)); border:1px solid color-mix(in srgb, var(--chain-accent,var(--green)) 34%, transparent); background:color-mix(in srgb, var(--chain-accent,var(--green)) 10%, transparent); flex-shrink:0; } /* Il pannello che spiega perche', quando si tocca un ingresso spento. Un lampo solo: se pulsasse a ripetizione diventerebbe un allarme, e non e' un errore, e' una data che non e' ancora arrivata. */ @keyframes soonPulsa{ 0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--chain-accent,var(--green)) 45%, transparent);} 100%{box-shadow:0 0 0 14px transparent;} } .chain-notice.pulsa{animation:soonPulsa 1.1s ease-out 1;} /* ========================================================================== 22. UNA SOLA VOCE FRA L'INGRESSO E L'APPLICAZIONE -------------------------------------------------------------------------- Misurato prima di scrivere questa sezione, a 1440px: landing h1 68px peso 640 spaziatura -2.584px fondo rgb(3,4,10) home app h1 39,6px peso 600 spaziatura -1.386px fondo rgb(3,3,2) crea h1 44px peso 600 spaziatura -1.76px Tre titoli, tre scale, tre pesi. Nessuno dei tre e' sbagliato da solo; messi in fila raccontano tre prodotti. Peggio: sotto i 1080px la colonna del titolo in home passa da 603px a TUTTA la larghezza (980px a 1024) e il titolo, invece di crescere, SCENDE a 27px. Un titolo da 27px steso su 980px e' la cosa che fa sembrare una pagina un modello non finito. Qui il peso e la spaziatura diventano uno solo, quello della landing, e la taglia resta l'unica cosa che cambia — perche' quella si', deve cambiare: un'insegna sopra una tabella di token non e' un manifesto. ========================================================================== */ /* Il peso e la spaziatura della landing, su ogni titolo di prima riga dell'applicazione. 640 non e' un capriccio: e' il valore a cui il grassetto di sistema smette di sembrare un grassetto e comincia a sembrare una scelta. Dove il font non e' variabile il browser lo arrotonda a 600 o 700, esattamente come fa gia' sulla landing: le due superfici restano pari. */ #view-home .pitch h1, #view-create > .wrap > h1, #view-create-stock > .wrap > h1{ font-weight:640; letter-spacing:-.038em; line-height:1.03; /* Righe bilanciate come sulla landing: senza, l'ultima riga resta con una parola sola e il titolo sembra spezzato invece che impaginato. Dove non e' supportato si torna all'a capo normale. */ text-wrap:balance; } /* --- LA HOME, A DUE COLONNE (sopra i 1080px) --- La colonna misura 482px a 1100 e 603px a 1600. La frase piu' lunga e' "Launch a token on a curve": 25 caratteri, che a questa spaziatura occupano circa 0,46em l'uno. 48px x 25 x 0,46 = 552px, dentro i 595 disponibili al massimo della scala. La pendenza e' calcolata sui due estremi, non a occhio: 40px a 1100, 48px a 1600. */ #view-home .pitch h1{ /* Era clamp(34px, 22.4px+1.6vw, 48px), cioe' 45,4px a 1440, e su tre righe faceva 229px di solo titolo. Su una LANDING quella taglia e' giusta: la pagina non ha altro da fare. Qui sopra c'e' una tabella di token, e un titolo che si prende un quarto della prima schermata sposta il prodotto sotto la piega. 36px restano una frase che si legge da lontano e stanno in due righe: meta' dell'altezza, stessa voce. */ font-size:clamp(29px, 15px + 1.45vw, 40px); } /* --- LA HOME, A UNA COLONNA (sotto i 1080px) --- Qui il titolo ha tutta la larghezza e puo' finalmente prenderne: e' la stessa curva della landing, 5.1vw, con un tetto piu' basso perche' sotto c'e' una lista di token e non un manifesto. A 1024 fa 52px su 980 di colonna, a 900 ne fa 46, a 412 tocca il minimo della landing. max-width in caratteri e non in pixel: e' la misura che tiene una riga leggibile a qualunque taglia. */ @media (max-width:1080px){ #view-home .pitch h1{ font-size:clamp(31px,5.1vw,52px); max-width:21ch; } } /* Sotto i 380px la prima riga andrebbe a capo su tre righe: 2px di meno la riportano a due, che e' come e' scritta. */ @media (max-width:379px){ #view-home .pitch h1{font-size:29px;} } /* --- LE PAGINE DI CREAZIONE --- Stessa scala della home a due colonne: sono due prime righe dello stesso sito e non c'e' motivo che una sia piu' piccola dell'altra. Il tetto sale da 44 a 48. */ #view-create > .wrap > h1, #view-create-stock > .wrap > h1{ font-size:clamp(32px, 22.4px + 1.6vw, 48px); } /* ========================================================================== 23. LA SCALA DEI TITOLI -------------------------------------------------------------------------- Misurato a 1440px, prima di questa sezione, il titolo di ogni schermata: home / crea / crea azionario 45,4px peso 640 documentazione 28px peso 600 chat 26px peso 640 terminale / watchlist 21px peso 600 profilo 18px peso 600 Sei taglie e due pesi per la stessa cosa: la prima riga di una pagina. Non e' una gerarchia, e' deriva — ognuna di quelle regole e' stata scritta in un momento diverso guardando solo la propria schermata. L'effetto, passando da una all'altra, e' che il sito sembra assemblato da persone che non si parlano. Restano TRE gradini, e sono tre ruoli diversi, non tre capricci: insegna home, crea, crea azionario la frase che vende il prodotto pagina terminale, watchlist, doc, il nome di una schermata di lavoro chat identita' profilo il nome di chi sta guardando Peso e spaziatura sono uno solo su tutti e tre, ed e' quello della landing: 640 e -.035em. E' la parte che si nota davvero passando da una pagina all'altra — la taglia cambia con il ruolo, la VOCE no. ========================================================================== */ /* --- il gradino "pagina" --- */ #view-terminal .tm-h, #view-watchlist .tm-h, #view-docs .docs-head h2, #view-chat .section-title{ font-size:clamp(26px, 17px + 1.05vw, 34px); font-weight:640; letter-spacing:-.035em; line-height:1.08; /* La stessa rampa di bianco dei titoli della landing e della home: dove c'e' un titolo, la luce viene da sopra. */ background:linear-gradient(180deg,#fff 6%,rgba(255,255,255,.76) 100%); -webkit-background-clip:text;background-clip:text; color:transparent; padding-bottom:.1em;margin-bottom:-.08em; } /* --- il gradino "identita'" --- Niente rampa qui: questo testo diventa l'indirizzo del wallet quando ci si collega, ed e' cliccabile per copiarlo. Un titolo che si puo' premere deve restare di un colore solo, o non sembra piu' un bottone. */ .pf-name{ font-size:clamp(22px, 16px + .62vw, 28px); font-weight:640; letter-spacing:-.035em; line-height:1.1; } /* Il sottotitolo del terminale e della watchlist stava a filo del titolo, che ora e' dieci punti piu' grande: senza questo respiro le due righe si toccano. */ #view-terminal .tm-top .tm-sub, #view-watchlist .tm-top .tm-sub{margin-top:8px;} /* ========================================================================== 24. TRE COSE VISTE GUARDANDO LE PAGINE UNA A UNA ========================================================================== */ /* --- 24.1 LA RIGA LEGALE DELLA DOCUMENTAZIONE --- Era centrata dentro la colonna del testo, che sopra i 1040px e' larga 760 su una pagina larga 1360: il risultato e' una riga centrata su NIENTE, a un terzo dello schermo. Allineata a sinistra torna in colonna con il testo che chiude, che e' l'unica cosa a cui appartiene. */ @media (min-width:1040px){ #view-docs .docs-foot{text-align:left;} } /* --- 24.2 IL BOTTONE DI LANCIO NEL CASSETTO MOBILE --- Misurato su iPhone SE e Galaxy S: 263x39. E' l'azione principale del sito dentro il menu del telefono, e stava sotto i 44pt che Apple indica come minimo per un bersaglio da toccare col pollice (Material dice 48dp). Non e' pignoleria: 39px con il pollice in movimento si mancano. Solo padding e corpo del testo: la regola sta dentro la media query del cassetto, e non tocca display, che e' il modo in cui mi sono gia' rimangiato due media query per sbaglio. */ @media (max-width:900px){ .sidebar .side-cta, .sidebar .btn-launch{ padding:15px 12px; font-size:14px; line-height:1.15; } } /* --- 24.3 IL FONDO DELLE ETICHETTE MINUSCOLE --- 8,5px e 9,5px sono le taglie a cui una maiuscoletto smette di essere letta e comincia a essere indovinata. Sono dentro il selettore delle reti, cioe' il controllo che dice su quale catena stai per spendere dei soldi: e' il posto peggiore del sito dove strizzare gli occhi. */ .chain-item-sub{font-size:10.5px;letter-spacing:.06em;} .chain-soon{font-size:9.5px;letter-spacing:.12em;padding:3px 8px;} #view-home .ev-b{font-size:9.5px;letter-spacing:.08em;} /* --- 24.4 LO STATO VUOTO DEL PROFILO --- Il riquadro tratteggiato della sezione 18.5 resta, ma dentro ha qualcosa da fare invece di una riga di testo grigio. Le tre parti stanno in colonna e centrate, con il bottone a chiudere: e' la forma di uno stato vuoto che propone un'azione, ed e' la stessa che usa la landing quando una rete non ha ancora token. */ .pf-empty-cta{ display:flex;flex-direction:column;align-items:center;text-align:center; gap:0;padding:44px 24px 40px; } .pf-empty-glifo{ width:52px;height:52px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:var(--green); background:radial-gradient(circle at 50% 30%, rgba(var(--green-rgb),.18), rgba(var(--green-rgb),.05) 70%); box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.24); } .pf-empty-glifo svg{width:23px;height:23px;} .pf-empty-t{ margin-top:18px;font-size:17px;font-weight:640;letter-spacing:-.025em;color:var(--text); } .pf-empty-p{ margin-top:8px;max-width:46ch; font-size:13.5px;line-height:1.6;color:var(--text-dim); } .pf-empty-btn{ margin-top:22px; min-height:44px;padding:0 26px;border:0;border-radius:999px; font-size:14px;font-weight:600;letter-spacing:-.01em;cursor:pointer; color:var(--on-green); background:var(--chain-grad-btn,var(--green)); box-shadow:0 14px 30px -16px rgba(var(--green-rgb),.9), inset 0 1px 0 rgba(255,255,255,.26); transition:transform var(--v4-t-fast) var(--v4-ease), box-shadow var(--v4-t) var(--v4-ease); } .pf-empty-btn:hover{ transform:translateY(-1px); box-shadow:0 18px 36px -16px rgba(var(--green-rgb),1), inset 0 1px 0 rgba(255,255,255,.3); } .pf-empty-btn:active{transform:translateY(0);} @media (prefers-reduced-motion:reduce){ .pf-empty-btn:hover{transform:none;} } /* --- 24.5 LA MISURA DI LETTURA DELLA DOCUMENTAZIONE --- Il riquadro ora e' largo quanto la pagina, quindi la misura va difesa su OGNI blocco di testo e non solo sui paragrafi: senza, gli elenchi e le note si stendono su 1096px e la riga successiva non si trova piu'. */ #view-docs .docs-panel li, #view-docs .docs-sec li, #view-docs .docs-note, #view-docs .docs-panel h3, #view-docs .docs-sec h3{max-width:72ch;} /* ========================================================================== 25. L'HERO PIU' BASSO -------------------------------------------------------------------------- Misurato a 1440x900, prima: la prima riga di token cominciava a 1001px. Su uno schermo da portatile vuol dire che di un launchpad non si vede un solo token senza scorrere. La colpa non era di un elemento, era della somma: sette fasce orizzontali una sotto l'altra prima del primo dato. 81 la testata 627 l'hero (testo 482 | scheda in evidenza 482, piu' i totali 125) 46 la riga delle garanzie 58 la fisarmonica "what you can launch here" 137 le pillole delle reti piu' quelle dei filtri 44 l'intestazione della tabella Sotto, ogni pezzo perde altezza senza perdere niente di cio' che dice. UNA COSA SPARISCE DEL TUTTO: le tre garanzie nella colonna di sinistra. Non per far posto, ma perche' erano un DOPPIONE. Dicevano "il creatore non puo' prosciugarlo / il rimborso e' esatto / nessuno puo' spegnerlo" in 238 pixel, e centoventi pixel piu' sotto la riga delle garanzie diceva "rimborso e' una funzione pubblica del contratto / LP bruciata / nessuna chiave di amministrazione / contratti verificati" in 46. Le stesse cose, due volte, in due stili diversi: e' esattamente il difetto che fa sembrare una pagina montata con pezzi presi altrove. Resta la versione corta, che e' anche la piu' concreta, e sta accanto ai numeri invece che accanto al titolo. ========================================================================== */ #view-home .pitch-facts{display:none;} /* La colonna del testo non deve piu' allungarsi per pareggiare la scheda accanto: erano le garanzie a farlo, con margin-top:auto. */ #view-home .pitch{justify-content:flex-start;padding-block:2px 0;} #view-home .pitch > p{margin-top:16px;max-width:54ch;} /* Il testo si allinea al CENTRO della scheda accanto, non al suo bordo alto. Senza le tre garanzie la colonna e' alta 180px contro i 340 della scheda: ancorata in alto lasciava 160px di vuoto sotto, che si leggono come un pezzo che non e' arrivato. Centrata, lo spazio si divide sopra e sotto e la riga torna a essere una composizione: due elementi di peso diverso su un asse comune, che e' come si impagina una prima schermata. */ @media (min-width:1081px){ #view-home .split > .pitch{align-self:center;} } /* --- LA SCHEDA IN EVIDENZA --- 480px per un token. Ogni misura qui sotto e' la stessa informazione con meno aria intorno: il nome resta il nome, il grafico resta un grafico, le tre cifre restano tre cifre. Quello che se ne va e' lo spazio fra loro, che era tarato su una scheda che doveva reggere una colonna intera. */ #view-home .feat-main{padding:13px 18px;} /* 9px li avevo tolti per guadagnare quattro pixel di scheda, ma e' maiuscoletto spaziato: sotto i 9,5 si indovina invece di leggerlo, ed e' l'etichetta che dice PERCHE' quel token sta li'. I quattro pixel li da' il padding. */ #view-home .feat-k{padding:4px 10px;font-size:9.5px;} #view-home .feat-id{margin-top:8px;gap:11px;} #view-home .feat-av{width:38px;height:38px;font-size:15px;border-radius:11px;} #view-home .feat-name{font-size:23px;letter-spacing:-.03em;} #view-home .feat-sub{margin-top:7px;} #view-home .feat-nums{margin-top:9px;gap:28px;} #view-home .feat-nums b{font-size:19px;} /* Il grafico da 104px era la meta' della scheda, poi 58. Ora 34. E' la sola misura che si poteva ancora togliere senza perdere un'informazione: la curva qui dice se il token sale o scende, e per dirlo bastano trentaquattro pixel. Sotto ci sono la barra e la percentuale alla migrazione, che e' il dato vero della scheda. Serviva per portare il pannello all'altezza di quattro righe di attivita': 312px erano un blocco che si prendeva mezza prima schermata. */ #view-home .feat-chart{height:22px;margin-top:8px;} /* La curva del token in evidenza e' contesto, non un segnale operativo: il dato che conta in quel pannello e' la percentuale alla migrazione, scritta una riga sotto. A piena saturazione il rosso era la cosa piu' accesa della prima schermata — su una pagina verde o oro attirava l'occhio piu' del nome del token. Il verso resta leggibile, sale o scende, a meta' intensita'. */ #view-home .feat-chart .spark-line{stroke-width:1.5;opacity:.72;} #view-home .feat-chart .spark-area{opacity:.45;} #view-home .feat-bar{margin-top:10px;height:5px;} #view-home .feat-note{margin-top:6px;} /* --- I TOTALI --- Quattro numeri in una fascia da 125px. La cifra scende da 30 a 24: e' ancora il testo piu' grande della fascia, che e' tutto cio' che deve essere. */ #view-home .ms-item{padding:13px 20px;} #view-home .ms-item dd{font-size:24px;} @media (max-width:760px){#view-home .ms-item dd{font-size:18px;}} #view-home .ms-item dt{gap:8px;} /* --- I TOTALI E LE GARANZIE SONO UN PANNELLO SOLO --- Erano due riquadri con due bordi separati da 16px di vuoto, e dicevano una cosa sola: "ecco i numeri, ed ecco perche' ci si puo' credere". Uniti, la riga delle garanzie diventa il piede della fascia dei totali invece di una sesta fascia. Un bordo invece di due, e sedici pixel in meno. */ #view-home .market-bar{ border-bottom-left-radius:0;border-bottom-right-radius:0; border-bottom:0; } /* Il margine inferiore della griglia dell'hero era 16px e teneva separate le due fasce: qui e' esattamente cio' che non vogliamo piu'. */ #view-home .split{margin-bottom:0;} #view-home .trust{ margin-top:0; /* Il raggio in basso combacia con quello in alto della fascia dei totali (20px, non 16): erano due riquadri diversi e si vedeva anche da qui. */ border-radius:0 0 20px 20px; border-top:1px solid var(--v4-edge-lo); background:linear-gradient(90deg,rgba(var(--green-rgb),.04),transparent 60%); box-shadow:inset -1px -1px 0 0 var(--v4-edge-lo), inset 1px 0 0 0 var(--v4-edge-lo); } /* --- L'ATTIVITA' DAL VIVO: I NOMI NON DEVONO TRONCARE --- Misurato: la riga e' larga 217px e i quattro pezzi ne chiedevano 28 + 42 + 40 + 69. Al NOME toccavano 40px, cioe' la fetta piu' piccola della riga, e "SOLAPE" diventava "SOLA...", "PEPER" diventava "PEP...". Un elenco di scambi in cui i simboli sono tagliati non dice piu' quale token si sta muovendo, che e' l'unica cosa per cui esiste. L'avatar e l'etichetta cedono qualche pixel, e il nome prende quello che avanza invece di una larghezza fissa. */ #view-home .ev{gap:8px;} #view-home .ev-av{width:24px;height:24px;font-size:10px;} #view-home .ev-b{padding:3px 6px;letter-spacing:.06em;} /* La cifra porta il simbolo della rete, e il simbolo cambia lunghezza: con "HYPE" la riga arrivava a 217px esatti su 217 disponibili e il nome cedeva i suoi ultimi quattro pixel ("PEPER" -> "PEPE..."). Mezzo punto di corpo e due pixel di spazio in meno danno dieci pixel di margine: bastano anche per un simbolo da cinque lettere. */ #view-home .ev-v{font-size:11px;} #view-home .ev-n{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #view-home .ev-v{flex-shrink:0;margin-left:0;} /* --- LA BARRA DEI FILTRI, PIU' BASSA --- 137px per due file di pillole. La fila delle reti porta ancora il suo margin-top da 18px, che aveva senso quando stava da sola nella pagina e ora si somma al padding della barra che la contiene: e' un margine che spinge verso il basso l'unica cosa per cui si apre un launchpad. */ #view-home .section-head .chain-row{margin-top:0;} #view-home .section-head{padding-top:10px;} /* --- LA RIGA DELLE GARANZIE: IL TESTO DEVE ANDARE A CAPO COME TESTO --- Ogni voce era `display:flex`, e in un contenitore flex OGNI figlio diventa un elemento a se': lo attorno al nome del DEX smetteva di essere una parola dentro una frase e diventava una colonna. A 1180px, dove le quattro voci si stringono, "LP burned on PancakeSwap, forever" si spezzava in tre pezzi allineati come una tabella, con la virgola orfana su una riga sua. Con display:block il testo torna a essere testo: va a capo dove serve, lo span resta dentro la frase, e l'icona si allinea alla prima riga con vertical-align invece che al centro di un blocco di due righe (che e' anche il posto giusto: un segno di spunta guarda l'inizio della frase). */ #view-home .trust li{display:block;} #view-home .trust li svg{ display:inline-block;vertical-align:-4px;margin-right:9px; } /* --- L'ACCENTO USATO COME TESTO --- --accent-txt lo calcola applyChainTheme() in chains.js: e' l'accento della rete schiarito quel tanto che basta a reggere 4,6:1 sul pannello scuro. Su BNB, HyperEVM, Robinhood e Arc non cambia niente, perche' passano gia'; su Solana il viola #9945ff (4,13:1) diventa #a55bff (4,92:1). L'elenco e' esplicito e non un `color:var(--green) -> var(--accent-txt)` a tappeto: `--green` e' anche il PIENO dei bottoni e il colore di cifre grandi, dove la soglia e' 3:1 e schiarire toglierebbe forza all'accento. Qui ci sono solo i punti in cui l'accento e' testo PICCOLO, che sono quelli che la misura ha segnalato. Se se ne aggiunge uno, va aggiunto qui. */ #view-home .tagline, #view-home .chain-preview .cp-soon, #view-home .chain-preview .cp-foot a, #view-home .feat-k, #view-home .ev-b.new, #view-home .feed-tab.active, .feed-tab.active, .chain-notice a, .side-label .soon, .soon-gate-tag{ color:var(--accent-txt, var(--green)); } /* --- I BOTTONI PRIMARI DISATTIVATI --- Erano il gradiente pieno dell'accento a opacity:.4. Due problemi in uno. Il primo e' che si legge male: sul modulo di creazione, "Connect wallet to create" e' testo scuro su oro al 40% sopra il nero, e la misura dice 1,1:1. Il secondo e' peggio: un bottone sbiadito ma ancora ORO non dice "non si puo' ancora premere", dice "questo bottone e' rotto". La forma giusta il sito ce l'ha gia' in due punti: .btn-enter:disabled (superficie piatta, testo spento) e .is-soon-gate (contorno, nessun pieno). Qui si allineano a quella, cosi' "non premibile" ha UN aspetto solo in tutto il prodotto invece di tre. */ .btn-launch:disabled, .btn-secondary:disabled, .btn-claim:disabled, .pf-btn-primary:disabled, .btn-main:disabled{ opacity:1; background:var(--panel-2) !important; background-image:none !important; color:var(--text-mute) !important; -webkit-text-fill-color:var(--text-mute); box-shadow:inset 0 0 0 1px var(--border-2) !important; text-shadow:none; cursor:default; } .btn-launch:disabled::after, .btn-secondary:disabled::after, .btn-claim:disabled::after, .pf-btn-primary:disabled::after{content:none;} /* ========================================================================== 34. AVVISI: IL MESSAGGIO A SCHERMO, LA SOGLIA, IL PANNELLO ========================================================================== Il sito non aveva un posto dove dire una cosa breve. Ogni notizia finiva o in una riga di log dentro una scheda — che vede solo chi sta guardando quella scheda — o da nessuna parte. Questi riquadri stanno in basso a destra, sopra tutto, si chiudono da soli e portano dove la notizia e' successa. */ .av-pila{ position:fixed;right:16px;bottom:16px;z-index:9000; display:flex;flex-direction:column;gap:8px;align-items:flex-end; pointer-events:none; } .av-msg{ pointer-events:auto;position:relative; display:block;width:min(320px,calc(100vw - 32px)); padding:12px 34px 12px 14px;border-radius:var(--v4-r-md,14px); background:var(--panel);border:1px solid var(--border-2); box-shadow:0 18px 40px -18px rgba(0,0,0,.85),0 0 0 1px rgba(var(--green-rgb),.14); text-decoration:none;color:var(--text); animation:avEntra .28s var(--v4-ease,cubic-bezier(.2,.7,.3,1)) both; } a.av-msg{cursor:pointer;} a.av-msg:hover{border-color:rgba(var(--green-rgb),.4);} .av-msg b{display:block;font-size:13.5px;font-weight:650;letter-spacing:-.01em;margin-bottom:2px;} .av-msg span{display:block;font-size:12.5px;line-height:1.45;color:var(--text-dim);} .av-msg .av-x{ position:absolute;top:8px;right:9px;width:20px;height:20px; display:flex;align-items:center;justify-content:center; font-style:normal;font-size:15px;line-height:1;color:var(--text-mute); border-radius:6px;cursor:pointer; } .av-msg .av-x:hover{background:var(--panel-2);color:var(--text);} .av-msg.via{animation:avEsce .24s var(--v4-ease,ease) both;} @keyframes avEntra{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:none;}} @keyframes avEsce{to{opacity:0;transform:translateY(6px) scale(.98);}} @media (prefers-reduced-motion:reduce){ .av-msg,.av-msg.via{animation:none;} } /* Su telefono la colonna e' una sola: il riquadro prende la larghezza e sta sopra la barra di sistema, non sotto il pollice. */ @media (max-width:560px){ .av-pila{left:12px;right:12px;bottom:12px;align-items:stretch;} .av-msg{width:auto;} } /* La soglia, accanto alla stella. Un si lascia stringere sotto la sua stessa larghezza minima, e la percentuale — l'unica parte che conta — finisce tagliata dalla freccia. Qui si rifiuta di restringersi. */ flex:0 0 auto;min-width:140px; } .tk2-alert:hover{border-color:var(--border-3,var(--border-2));color:var(--text);} .tk2-alert:focus-visible{outline:2px solid rgba(var(--green-rgb),.5);outline-offset:2px;} /* Con un avviso attivo il controllo smette di essere un menu qualunque e diventa uno stato acceso: si deve vedere da lontano che il token sta guardando per te. La classe e non [value]: scegliendo un'opzione cambia la PROPRIETA' value del nativo. Chiuso stava bene (la freccia e i colori sono nostri da sempre), ma APERTO su telefono usciva la lista del sistema operativo: un rettangolo bianco con il carattere di sistema in mezzo a una pagina scura di dati. E' l'unico momento in cui il sito smette di essere il sito. Il normale invece di un controllo morto — vedi .sel2-native piu' sotto. Su schermo largo il pannello si apre sotto il bottone. Su telefono sale dal basso a tutta larghezza, nello stesso verso del menu: quando l'unica mano che tocca lo schermo arriva da sotto, tutto quello che si apre deve venire da li'. ========================================================================== */ .sel2{display:inline-flex;position:relative;flex:0 0 auto;} /* Il vero conserva le classi che aveva nel markup, e una di quelle - `.tk2-alert` - dichiara `min-width:140px` apposta, per non farsi stringere dentro la riga flex quando e' lui a vedersi. Su un campo largo 1px la larghezza minima vince sulla larghezza: il select restava largo 140px, in posizione assoluta, e sporgeva di 28px dal bottone da 112px che gli sta davanti. Non si vedeva (opacity 0, clip-path, pointer-events none) ma c'era, e un controllo da 140px fuori dalla propria scatola vicino al bordo destro diventa un traboccamento vero il giorno che la riga si sposta. Misurato sulla pagina token a 390px: scatola 112px, contenuto 140px. */ min-width:0;max-width:1px; opacity:0;pointer-events:none; margin:0;padding:0;border:0; clip-path:inset(50%); } /* Il bottone eredita l'aspetto che aveva il select chiuso: stessa altezza, stesso raggio, stessi colori, stessa larghezza minima (dentro una riga flex si lasciava stringere e la percentuale — l'unica parte che conta — finiva tagliata). */ .sel2-btn{ display:inline-flex;align-items:center;gap:8px; height:32px;padding:0 10px;border-radius:9px; background:var(--panel-2);border:1px solid var(--border-2);color:var(--text-dim); font-family:inherit;font-size:12px;font-weight:500;letter-spacing:-.01em; cursor:pointer; min-width:140px; transition:border-color var(--v4-t,.18s) var(--v4-ease,ease), color var(--v4-t,.18s) var(--v4-ease,ease), background var(--v4-t,.18s) var(--v4-ease,ease); } .sel2-val{flex:1 1 auto;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* La freccia: due lati di un quadrato ruotati, non un carattere. Un glifo cambia forma da un sistema all'altro. */ .sel2-arw{ width:6px;height:6px;flex-shrink:0; border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform var(--v4-t,.18s) var(--v4-ease,ease); } .sel2.is-open .sel2-arw{transform:translateY(1px) rotate(-135deg);} .sel2-btn:hover{border-color:var(--border-3,var(--border-2));color:var(--text);} .sel2-btn:focus-visible{outline:2px solid rgba(var(--green-rgb),.5);outline-offset:2px;} /* Con un avviso attivo il controllo smette di essere un menu qualunque e diventa uno stato acceso: si deve vedere da lontano che il token sta guardando per te. */ .sel2.is-on .sel2-btn{color:var(--green);border-color:rgba(var(--green-rgb),.34);} /* IL PANNELLO. position:fixed e collocato dal JavaScript: dentro il contenitore basterebbe un antenato con overflow nascosto — e questo controllo sta in una riga di comandi dentro una scheda — per tagliarlo a meta'. */ .sel2-pan{ position:fixed;z-index:120; padding:5px; background:var(--pane-bg, var(--panel)); border:1px solid var(--pane-line, var(--border-2)); border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,.3), 0 22px 48px -20px rgba(0,0,0,.85); max-height:min(60vh, 420px);overflow-y:auto; } .sel2-tit{ padding:8px 10px 6px; font-size:10px;letter-spacing:.11em;text-transform:uppercase; color:var(--text-mute);font-weight:600; } .sel2-op{ display:flex;align-items:center; min-height:34px;padding:7px 10px; border-radius:8px; font-size:13px;color:var(--text-dim); cursor:pointer; transition:background var(--v4-t-fast,.12s) var(--v4-ease,ease), color var(--v4-t-fast,.12s) var(--v4-ease,ease); } .sel2-op:hover{background:var(--pane-bg-2, var(--panel-2));color:var(--text);} .sel2-op:focus-visible{outline:2px solid rgba(var(--green-rgb),.5);outline-offset:-2px;} /* La scelta corrente si riconosce dal segno di spunta, non solo dal colore: un verde su un grigio e' una differenza che qualcuno non vede. */ .sel2-op.is-sel{color:var(--text);background:rgba(var(--green-rgb),.1);} .sel2-op.is-sel::after{ content:"";margin-left:auto; width:5px;height:9px;flex-shrink:0; border-right:2px solid var(--green);border-bottom:2px solid var(--green); transform:rotate(45deg) translate(-1px,-1px); } .sel2-velo{position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.5);} @media (max-width:900px){ /* Foglio dal basso, a tutta larghezza, come il menu. Ancorato dal CSS e non dal JavaScript: con la barra del browser che si ritrae mentre si scorre, una posizione calcolata una volta finirebbe fuori posto. */ .sel2-pan{ left:0 !important;right:0;top:auto !important;bottom:0; width:auto !important; padding:8px 12px calc(14px + env(safe-area-inset-bottom,0px)); border-radius:18px 18px 0 0; border-left:0;border-right:0;border-bottom:0; max-height:70vh; } /* Una presa in cima, come su ogni foglio che sale dal basso: dice che si tira giu' per chiuderlo, prima ancora di provarci. */ .sel2-pan::before{ content:"";display:block; width:34px;height:4px;margin:2px auto 8px; border-radius:2px;background:var(--pane-line, var(--border-2)); } .sel2-tit{padding:2px 4px 8px;font-size:11px;} /* Bersagli da dito, come tutto il resto su telefono. */ .sel2-op{min-height:48px;font-size:15px;padding:10px 12px;border-radius:10px;} /* 112 e non 126: nella testata del token il bottone sta su una riga insieme al prezzo e agli altri due comandi, e quattordici pixel erano la differenza fra stare su quella riga e mandarli a capo tutti. La voce piu' lunga ("Alert at 100%") ci sta comunque per intero — verificato, non stimato: se non ci stesse si vedrebbero i puntini, e i puntini in mezzo a una percentuale sono proprio il pezzo che conta. */ .sel2-btn{min-width:112px;font-size:11.5px;padding:0 9px;} } /* ========================================================================== 75. LA TESTATA DEL TOKEN SU TELEFONO -------------------------------------------------------------------------- Su schermo largo e' una riga sola: logo, nome, prezzo, comandi. Su telefono diventava una pila di quattro fasce, ognuna larga quanto tutto il pannello e ognuna con dentro una cosa sola — misurata, 335 pixel di testata prima di arrivare a un numero. Non e' che stesse stretta: e' che ogni pezzo si prendeva una riga intera senza averne bisogno, e da fuori sembrava che i pezzi non avessero niente a che fare l'uno con l'altro. Tre cose, tutte con lo stesso movente — rimettere insieme quello che va letto insieme: 1. IL LOGO E IL NOME sulla stessa riga. Il logo da solo su una riga e' un quadrato di settantadue pixel che non dice niente finche' non leggi la riga dopo. Accanto al nome e' quello che e' sempre stato: la faccia di quel token. 2. IL PREZZO ERA ALLINEATO A DESTRA mentre tutto il resto stava a sinistra. Su schermo largo e' giusto (chiude la riga dall'altro capo); su telefono il blocco e' largo quanto il pannello, quindi il numero finiva da solo contro il bordo destro con mezzo pannello di vuoto davanti, e non sembrava piu' appartenere alla scheda. Va a sinistra come tutto il resto, e divide la riga con i comandi. 3. I PUNTINI DI SEPARAZIONE non restano appesi. Nella riga sotto il nome "di chi e'", "che curva ha" e "l'explorer" sono separati da un punto medio; quando la riga va a capo — e va a capo appena il creatore ha una pastiglia di reputazione accanto all'indirizzo, cioe' quasi sempre — il punto restava l'ultima cosa della riga, a separare una cosa dal nulla. Su telefono spariscono e separa lo spazio: i tre gruppi sono gia' diversi a vedersi (un indirizzo sottolineato, una pastiglia colorata, un link), e uno spazio non puo' restare appeso. ========================================================================== */ @media (max-width:640px){ #view-token .tk2-head, #view-stock .tk2-head{ padding:16px; gap:13px 12px; align-items:flex-start; } /* Il logo si stringe: settantadue pixel erano la misura di quando stava su una riga sua. Accanto al nome ne bastano cinquantasei. */ #view-token .tk2-img, #view-stock .tk2-img{ order:1; width:56px;height:56px;border-radius:16px;font-size:21px; flex-shrink:0; } /* La base e' "tutta la riga meno il logo": basta a tenere il nome ACCANTO al logo (perche' non e' 100%, che lo mandava a capo da solo) e basta a riempire quella riga, cosi' prezzo e comandi sono costretti ad andare sotto. Con una base a zero ci stavano tutti e quattro su una riga sola e il nome si schiacciava a sessantadue pixel: peggio del difetto di partenza. */ #view-token .tk2-id, #view-stock .tk2-id{ order:2; flex:1 1 calc(100% - 68px);min-width:0; } #view-token .tk2-name, #view-stock .tk2-name{font-size:22px;} #view-token .tk2-meta, #view-stock .tk2-meta{ margin-top:7px; flex-wrap:wrap; column-gap:11px;row-gap:5px; } #view-token .tk2-meta .tk2-dot, #view-stock .tk2-meta .tk2-dot{display:none;} /* Prezzo e comandi dividono la riga sotto. Se non ci stanno, i comandi vanno a capo per conto loro: meglio una riga in piu' che un prezzo schiacciato, perche' il prezzo e' il motivo per cui si apre la pagina. */ #view-token .tk2-px, #view-stock .tk2-px{ order:3; flex:0 1 auto; align-items:flex-start; text-align:left; gap:5px; } #view-token .tk2-px-v, #view-stock .tk2-px-v{font-size:25px;} /* I comandi partono da sinistra come tutto il resto. Spinti a destra da un margine automatico stavano sotto il prezzo ma dall'altro capo del pannello, e la testata si leggeva a zigzag: nome a sinistra, prezzo a sinistra, comandi a destra. Su una colonna di righe larghe uguale c'e' un solo bordo da cui partire. */ #view-token .tk2-btns, #view-stock .tk2-btns{ order:4; margin-left:0;margin-right:auto; flex-shrink:0; } } /* ========================================================================== 76. LA SCHERMATA DI CREAZIONE E' CENTRATA -------------------------------------------------------------------------- Questa corregge una conseguenza della sezione 29, dove ho dato a tutto il sito una cornice sola da 1360 perche' il bordo sinistro del contenuto non saltasse da una pagina all'altra. Per il modulo di creazione avevo tenuto le colonne alla loro misura (660 per il modulo, 390 per l'anteprima) e le avevo ancorate a sinistra, cosi' il titolo partiva dallo stesso punto di ogni altra pagina. Il conto pero' non torna: 660 piu' 28 di distacco piu' 390 fanno 1078, e la cornice ne dava 1360. Restavano DUECENTOTRENTA pixel di niente lungo tutto il bordo destro, e da fuori la pagina non sembra ancorata a sinistra: sembra storta. Le altre due strade le ho provate e scartate. - Mandare l'anteprima al bordo destro riempie la cornice ma sposta il vuoto in mezzo: duecentocinquantotto pixel fra il modulo e la sua anteprima, che e' proprio la coppia che va guardata insieme mentre si compila. - Far crescere il modulo fino a riempire porta i campi a ottocentonovanta pixel. Un campo di testo largo cosi' non e' piu' facile da compilare, e' solo piu' largo, e il riquadro dell'immagine di copertina resta della sua misura lasciando comunque un buco dentro la scheda. Quindi la cornice si stringe alla misura del contenuto e si centra. Il bordo sinistro qui non coincide piu' con quello delle altre pagine, ed e' un prezzo che questa pagina puo' pagare e le altre no: in una lista si passa da una schermata all'altra e il salto si nota, mentre qui si entra apposta per fare una cosa sola e ci si resta finche' non e' finita. Un modulo centrato e' anche il posto in cui uno se lo aspetta. ========================================================================== */ @media (min-width:1001px){ /* 1130 = 660 + 28 + 390 di contenuto piu' i 26 per lato che .wrap ha su ogni pagina. Le colonne restano quelle: e' la cornice ad adattarsi a loro, non il contrario. (Misurato: con 1124 il modulo si fermava a 654, sei pixel sotto la sua misura, perche' avevo contato 20 di respiro invece di 26.) */ #view-create .wrap, #view-create-stock .wrap{max-width:1130px;} } /* ========================================================================== 77. "NON BASTANO I FONDI" DETTO IN MODO LEGGIBILE -------------------------------------------------------------------------- Era un paragrafo rosso con dentro sei numeri da diciotto decimali, e siccome ogni tentativo ne accodava un altro, dopo due prove erano due muri identici uno sopra l'altro. Un errore ha un lavoro solo: dire cosa manca e quanto. Diciotto decimali non aiutano nessuno a capire se gli mancano due dollari o duecento. Un riquadro con le voci incolonnate, i numeri accorciati, il controvalore in dollari accanto e in fondo la riga che serve davvero: quanto aggiungere. Il rosso resta sul bordo e sul titolo, non su tutto il testo: un muro rosso si legge come "e' successo un disastro", mentre qui e' solo un conto che non torna. ========================================================================== */ .nofunds{ margin-top:12px;padding:14px 16px; border:1px solid rgba(var(--sell-rgb,244,63,94),.34); border-radius:var(--v4-r-md,14px); background:rgba(var(--sell-rgb,244,63,94),.06); color:var(--text-dim); font-size:13px;line-height:1.5; } .nf-t{ font-size:14px;font-weight:650;letter-spacing:-.01em; color:var(--sell,#f43f5e); margin-bottom:10px; } .nf-r{ display:flex;align-items:baseline;justify-content:space-between;gap:14px; padding:3px 0; } .nf-k{color:var(--text-mute);flex:0 1 auto;} /* I numeri incolonnati a destra e in monospaziato: e' l'unico modo in cui due importi uno sotto l'altro si confrontano a colpo d'occhio. */ .nf-v{ font-family:var(--font-mono);color:var(--text); text-align:right;white-space:nowrap;flex:0 0 auto; } .nf-v i{font-style:normal;color:var(--text-mute);margin-left:8px;} .nf-n{ color:var(--text-mute);font-size:11.5px;line-height:1.45; padding:1px 0 4px; } .nf-sep{height:1px;background:var(--pane-inner,var(--border));margin:9px 0;} .nf-do{color:var(--text);padding-top:2px;} .nf-do b{font-family:var(--font-mono);font-weight:650;} /* La spiegazione della differenza fra quello che devi AVERE e quello che SPENDI: e' la parte che toglie il sospetto di essere derubati, ma e' anche la piu' lunga, quindi sta sotto e pesa meno di tutto il resto. */ .nf-w{ margin-top:9px;padding-top:9px; border-top:1px solid var(--pane-inner,var(--border)); color:var(--text-mute);font-size:11.5px;line-height:1.5; } @media (max-width:560px){ /* Su telefono chiave e valore non ci stanno affiancati senza che i numeri vadano a capo in mezzo. Uno sotto l'altro, il numero resta intero. */ .nf-r{flex-direction:column;gap:1px;padding:5px 0;} .nf-v{text-align:left;} } /* ========================================================================== 78. LA TESTATA DEL TOKEN SU TELEFONO, LEGGIBILE -------------------------------------------------------------------------- Misurata sui dati veri di un token (nome lungo, simbolo, verificato, Auto-burn, la taglia della modalita', creatore con la sua reputazione): DIECI righe visive in 272 pixel, con le pastiglie sparse su cinque di quelle. Non e' che ci fossero troppe informazioni: erano nell'ordine sbagliato, ognuna su una riga sua, e nessuna raggruppata con quella che dice la stessa cosa. Ora sono due gruppi e una riga di note: COS'E' il nome su una riga sua, e sotto tutti i distintivi insieme — simbolo, verificato, Auto-burn, taglia della modalita'; QUANTO il prezzo; DA DOVE chi l'ha fatto, il suo curriculum, l'explorer: piccoli e spenti, perche' si leggono dopo aver deciso che il token interessa. Il badge della curva e' stato spostato nel markup, non con un ordine CSS: stava fra le note di provenienza e dice cos'e' il token, quindi va con gli altri distintivi anche su schermo largo. ========================================================================== */ @media (max-width:640px){ /* IL NOME SU UNA RIGA SUA. Con i distintivi accanto, un nome un po' lungo li mandava a capo uno per volta: prima "Auto-burn" da solo, poi il verificato mezzo sfalsato. Occupando tutta la riga, il nome non spinge piu' niente e i distintivi restano insieme. */ #view-token .tk2-name-row, #view-stock .tk2-name-row{gap:7px;row-gap:8px;} /* Il nome divide la riga con il simbolo, non se la prende tutta: sono l'identita' del token e si leggono insieme. Cede lui se serve spazio, perche' del nome bastano le prime lettere per riconoscerlo mentre un ticker tagliato non identifica piu' niente. */ #view-token .tk2-name, #view-stock .tk2-name{ flex:1 1 auto;min-width:0; /* Un nome molto lungo si accorcia invece di occupare tre righe: il simbolo qui sotto lo identifica comunque. */ white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* IL SIMBOLO NON E' UN DISTINTIVO. Era una pastiglia verde piena grande quanto il nome, e in mezzo agli altri faceva tre pastiglie in fila che competevano fra loro. E' un identificatore: monospaziato, spento, senza riempimento, come un ticker. */ #view-token .tk2-sym, #view-stock .tk2-sym{ background:none;border:0;padding:0; color:var(--text-mute); font-size:12.5px;letter-spacing:.02em; max-width:52%; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* LE NOTE DI PROVENIENZA pesano meno di tutto il resto: si leggono dopo. */ #view-token .tk2-meta, #view-stock .tk2-meta{font-size:11.5px;} /* Il curriculum del creatore era una pastiglia larga quanto tutta la riga, che mandava a capo l'explorer da solo. Senza riempimento sta accanto all'indirizzo, ed e' li' che va letto. */ #view-token .tk2-devrep, #view-stock .tk2-devrep{ background:none;border:0;padding:0 0 0 7px; color:var(--text-mute); } } /* I distintivi su una riga sola. Misurati: la riga e' larga 278 e loro chiedevano 280, due pixel, e la taglia andava a capo da sola, che e' proprio il difetto che questa sezione doveva togliere. Un filo piu' piccoli e ci stanno tutti, con margine anche per un simbolo lungo come quello che ha fatto saltare fuori il problema (dieci lettere invece delle tre o quattro di un ticker normale). */ @media (max-width:640px){ #view-token .tk2-name-row .tok-tag, #view-token .tk2-name-row .tk2-curve-badge, #view-stock .tk2-name-row .tok-tag, #view-stock .tk2-name-row .tk2-curve-badge{ font-size:10px;padding:3px 7px;letter-spacing:.04em; } #view-token .tk2-sym, #view-stock .tk2-sym{max-width:105px;} } /* Il ritorno a capo fra identita' e distintivi: esiste solo su telefono, e su schermo largo la riga resta una sola come e' sempre stata. */ .nr-acapo{display:none;} @media (max-width:640px){ .nr-acapo{display:block;flex:0 0 100%;height:0;margin:0;} } /* ========================================================================== 79. LA STELLA DELLA WATCHLIST DICE DI ESSERE ACCESA -------------------------------------------------------------------------- Il bottone metteva il token nella watchlist e non cambiava di una virgola: nessuna etichetta (il codice cercava uno che nel markup non c'e') e nessuna regola per lo stato premuto. Funzionava e sembrava rotto, che dal punto di vista di chi lo preme e' la stessa cosa di non funzionare. Ora il carattere passa da vuota a piena — in app.js, perche' e' contenuto — e qui si accende il colore. Due segnali e non uno solo: una stella piena e una vuota si distinguono anche senza vedere il colore. ========================================================================== */ .tk2-ib[aria-pressed="true"]{ color:var(--amber, var(--green)); border-color:rgba(var(--amber-rgb, var(--green-rgb)),.4); background:rgba(var(--amber-rgb, var(--green-rgb)),.1); } .tk2-ib[aria-pressed="true"]:hover{ border-color:rgba(var(--amber-rgb, var(--green-rgb)),.6); } /* L'indirizzo del contratto nella testata: un bottone che non sembra un bottone, perche' sta in una riga di note e non deve competere con niente. Si accende al passaggio, come gli altri collegamenti di quella riga. */ .tk2-ca{ display:inline-flex;align-items:center;gap:5px; padding:0;border:0;background:none; font-family:var(--font-mono);font-size:inherit; color:var(--text-mute);cursor:pointer; border-bottom:1px dotted var(--border-2); transition:color var(--v4-t-fast,.12s) var(--v4-ease,ease); } .tk2-ca svg{width:12px;height:12px;flex-shrink:0;opacity:.75;} /* "CA:" — due lettere che dicono di che indirizzo si tratta. Non in corsivo (il tag serve solo a non aggiungere una classe in piu' al markup) e piu' smorto del valore, perche' e' l'etichetta e non il dato. */ .tk2-ca-k{font-style:normal;opacity:.7;letter-spacing:.04em;margin-right:1px;} /* ============================================================================ 80. L'INDIRIZZO E L'EXPLORER, SOTTO LA RIGA DELLA MIGRAZIONE ============================================================================ Le due cose che si cercano appena si apre un token che non si conosce. Una riga sola, a tutta larghezza: l'indirizzo INTERO da una parte — non accorciato, perche' qui c'e' posto e prima di incollare un contratto lo si guarda tutto — e il link all'explorer dall'altra. SENZA RIQUADRO. La prima versione aveva bordo, sfondo e imbottitura: il riquadro pesava piu' del contenuto e sembrava un bottone nero da premere, quando invece qui c'e' solo del testo da leggere e copiare. E NON VA A CAPO: andando a capo l'explorer finiva su una riga sua e il riquadro diventava un rettangolo alto e mezzo vuoto. L'indirizzo si accorcia con i puntini, che e' l'unica cosa che deve cedere. Il rientro orizzontale e' quello della barra di avanzamento qui sopra (.tk2-bond ha padding 14px 18px): senza, il contratto partiva diciotto pixel piu' a sinistra di tutto il resto e sembrava incollato al bordo. */ .tk2-quick{ display:flex;align-items:center;gap:12px;flex-wrap:nowrap; margin:-6px 0 12px;padding:0 18px; font-family:var(--font-mono);font-size:12px; } .tk2-quick-ca{ display:inline-flex;align-items:center;gap:6px;min-width:0; padding:0;border:0;background:none;cursor:pointer; font-family:inherit;font-size:inherit;color:var(--text-dim); transition:color var(--v4-t-fast,.12s) var(--v4-ease,ease); } .tk2-quick-ca:hover{color:var(--text);} /* L'indirizzo cede spazio prima di tutto il resto: su schermo stretto si accorcia con i puntini invece di spingere fuori il link all'explorer. */ #tkQuickCaVal{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;} .tk2-quick-ca svg{width:13px;height:13px;flex-shrink:0;opacity:.7;} .tk2-quick-ex{ display:inline-flex;align-items:center;gap:5px;margin-left:auto;flex-shrink:0; color:var(--text-mute);text-decoration:none; transition:color var(--v4-t-fast,.12s) var(--v4-ease,ease); } .tk2-quick-ex:hover{color:var(--text);} .tk2-quick-ex svg{width:12px;height:12px;opacity:.8;} @media (max-width:640px){ /* Bersagli da dito, e l'indirizzo intero non ci sta: si accorcia da solo con i puntini, ma quello che si COPIA resta intero (sta in data-copy). */ .tk2-quick{font-size:11.5px;gap:10px;} .tk2-quick-ca,.tk2-quick-ex{min-height:30px;} } .tk2-ca:hover{color:var(--text-dim);} .tk2-ca:focus-visible{outline:2px solid rgba(var(--green-rgb),.5);outline-offset:2px;} @media (max-width:640px){ /* Da bersaglio per un dito, come tutto il resto su telefono: cresce l'area che accetta il tocco, non il testo. */ .tk2-ca{min-height:34px;} } /* ============================================================================ 81. API E INDIRIZZI, DENTRO I DOCS ============================================================================ Roba da leggere e da copiare, non da ammirare: monospazio, righe fitte, e una sola colonna che cede spazio quando lo schermo si stringe (la descrizione). Il metodo e il percorso non si accorciano mai, perche' sono le due cose che si copiano. */ .api-try{ display:flex;align-items:center;gap:8px; margin-top:12px;padding:10px 12px; border:1px solid var(--border);border-radius:8px; background:var(--bg-1); font-family:var(--font-mono);font-size:12.5px; overflow-x:auto; } #apiTryUrl{white-space:nowrap;color:var(--text-dim);} .api-copy{ margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center; padding:4px;border:0;background:none;cursor:pointer;color:var(--text-mute); transition:color var(--v4-t-fast,.12s) var(--v4-ease,ease); } .api-copy:hover{color:var(--text);} .api-copy svg{width:14px;height:14px;} .api-table{display:flex;flex-direction:column;margin-top:6px;} .api-row{ display:grid;grid-template-columns:auto minmax(0,1fr); gap:2px 10px;align-items:baseline; padding:10px 0;border-top:1px solid var(--hairline); } .api-row:first-child{border-top:0;} /* Il metodo: una pastiglia stretta, verde per la lettura e ambra per i flussi, perche' un EventSource non si apre come una GET e la differenza va vista prima di leggere la riga. */ .api-m{ grid-row:1;grid-column:1;align-self:center; min-width:36px;text-align:center; padding:2px 6px;border-radius:4px; background:rgba(var(--green-rgb),.12);color:var(--green); font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em; } .api-m.sse{background:rgba(255,176,32,.13);color:#ffb020;} .api-p{ grid-row:1;grid-column:2; font-family:var(--font-mono);font-size:12.5px;color:var(--text); word-break:break-all; } .api-d{grid-row:2;grid-column:2;font-size:12.5px;color:var(--text-mute);line-height:1.5;} .api-chains{display:flex;flex-direction:column;gap:14px;margin-top:8px;} .api-chain{ padding:12px 14px;border:1px solid var(--border);border-radius:10px; background:var(--bg-1); } .api-ch{ display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--hairline); } .api-ch b{font-size:13.5px;} .api-cm{font-family:var(--font-mono);font-size:11px;color:var(--text-mute);} .api-a{ display:grid;grid-template-columns:120px minmax(0,1fr); gap:4px 12px;align-items:baseline;padding:3px 0; } .api-ak{font-size:12px;color:var(--text-mute);} .api-av{ font-family:var(--font-mono);font-size:12px;color:var(--text-dim); word-break:break-all;cursor:pointer; } .api-av:hover{color:var(--text);} .api-av a{color:inherit;text-decoration:none;} .api-av a:hover{text-decoration:underline;} .api-soon{font-size:12px;color:var(--text-mute);font-style:italic;} @media (max-width:640px){ /* L'etichetta sopra il valore: a 120px fissi su un telefono l'indirizzo restava in una colonna larga due caratteri. */ .api-a{grid-template-columns:1fr;gap:1px;} .api-ak{font-size:11px;} .api-row{grid-template-columns:1fr;} .api-m{grid-row:1;grid-column:1;justify-self:start;margin-bottom:4px;} .api-p{grid-row:2;grid-column:1;} .api-d{grid-row:3;grid-column:1;} } /* ============ 82. I TOKEN ELENCATI, NON LANCIATI QUI ============ Un token nato su un'altra piattaforma e soltanto mostrato da noi. Non ha percorso la nostra bonding curve, quindi la barra di avanzamento, la riga "migrated" e il banner del bond non sono numeri mancanti: sono numeri che per questo token non esistono. Lasciarli a zero direbbe una cosa falsa, e cioe' un token fermo allo 0% di una curva che non ha mai iniziato. Si nascondono da CSS e non da JS di proposito: gli elementi sono sparsi in quattro punti del markup, e spegnerli uno per uno in JavaScript vuol dire dimenticarne uno alla prossima modifica. */ body.token-elencato .tk2-bond, body.token-elencato .progress-track, body.token-elencato #bondedStatus, body.token-elencato #bondedBanner, body.token-elencato #kpiRaised, body.token-elencato #tkByLine, body.token-elencato #creatorCard{ display:none !important; } /* Il distintivo che dice da dove viene. Neutro di proposito: non e' un premio ne' un avviso, e' una provenienza. */ .tk2-badge-est{ display:inline-flex;align-items:center;gap:5px; padding:2px 8px;border-radius:999px; font-size:11.5px;font-weight:600;letter-spacing:.01em; color:var(--text-dim); background:var(--panel-2); border:1px solid var(--border-2); text-decoration:none; } a.tk2-badge-est:hover{color:var(--text);border-color:var(--border);} /* Senza pool non c'e' niente contro cui scambiare: il pannello resta a schermo, cosi' si capisce che il posto per comprare c'e' ed e' solo in attesa, ma i comandi non si toccano. */ body.token-non-scambiabile .qa-btn[data-pct], body.token-non-scambiabile #tradeAmount, body.token-non-scambiabile .trade-tab-row{ opacity:.45;pointer-events:none; }