* {
box-sizing: border-box;
}
html,
body {
margin:0;
width:100%;
height:100%;
overflow:hidden;
font-family:
Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
color:white;
}
/* =====================
UNIVERSO
===================== */
body {
background:
radial-gradient(
circle at 50% 45%,
rgba(40,130,255,.25),
transparent 35%
),
radial-gradient(
circle at 30% 20%,
rgba(90,70,255,.18),
transparent 30%
),
radial-gradient(
circle at 80% 80%,
rgba(0,190,255,.12),
transparent 35%
),
#020511;
}
/* contenitore */
#universe {
position:absolute;
width:100%;
height:100%;
overflow:hidden;
}
/* =====================
NEBULOSA CENTRALE
===================== */
#nebula {
position:absolute;
left:50%;
top:50%;
width:900px;
height:900px;
transform:
translate(-50%,-50%);
background:
radial-gradient(
circle,
rgba(50,180,255,.35),
rgba(80,80,255,.15)
35%,
transparent 70%
);
filter:blur(70px);
animation:
nebulaPulse 18s infinite alternate;
}
@keyframes nebulaPulse {
from {
transform:
translate(-50%,-50%)
scale(1);
opacity:.7;
}
to {
transform:
translate(-50%,-50%)
scale(1.25);
opacity:1;
}
}
/* =====================
STELLE LONTANE
===================== */
#stars-layer::before {
content:"";
position:absolute;
inset:0;
background-image:
radial-gradient(
white 1px,
transparent 1px
);
background-size:
120px 120px;
opacity:.25;
}
/* =====================
CORE GALAXY
===================== */
#core {
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:min(75vw,850px);
height:min(75vw,850px);
border-radius:50%;
z-index:20;
background:
radial-gradient(
circle,
rgba(80,180,255,.08),
rgba(20,50,120,.05) 40%,
transparent 70%
);
overflow:hidden;
display:none;
}
/* luce interna */
.core-glow {
position:absolute;
inset:0;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(255,255,255,.95),
rgba(80,200,255,.45) 15%,
rgba(50,100,255,.25) 40%,
transparent 70%
);
filter:blur(25px);
animation:corePulse 8s infinite alternate;
}
.asset-star .glow {
opacity: 0.35;
transition: opacity 0.4s ease, transform 0.4s ease;
}
.asset-star.selected .glow {
opacity: 0.75;
transform: scale(1.3);
}
@keyframes corePulse {
from {
transform:scale(.95);
opacity:.75;
}
to {
transform:scale(1.08);
opacity:1;
}
}
/* anello della galassia */
.galaxy-ring {
position:absolute;
inset:0;
border-radius:50%;
border:
1px solid rgba(100,200,255,.35);
box-shadow:
0 0 80px rgba(70,170,255,.5),
inset 0 0 80px rgba(70,170,255,.25);
}
/* contenuto centrale */
.core-content {
position:relative;
text-align:center;
}
.core-label {
font-size:13px;
letter-spacing:4px;
opacity:.65;
}
#total-value {
font-size:38px;
font-weight:800;
margin:15px 0;
}
#universe-stats {
font-size:14px;
opacity:.7;
}
/* =====================
HERO
===================== */
#hero {
position:absolute;
top:32px;
width:100%;
text-align:center;
z-index:10;
opacity: 0.75;
}
#hero h1 {
font-size:
clamp(15px,1.8vw,20px);
line-height:.95;
letter-spacing:-0.5px;
margin:0;
font-weight: 500;
}
#hero span {
background:
linear-gradient(
90deg,
#55d8ff,
#8b7cff
);
-webkit-background-clip:text;
color:transparent;
}
#hero p {
font-size:11px;
color:#6b7a99;
margin: 3px 0 0;
}
/* =====================
BRAND
===================== */
#brand {
position:absolute;
top:35px;
left:45px;
font-size:32px;
font-weight:800;
z-index:20;
}
#brand .accent {
color:#55d8ff;
}
/* =====================
ASSET PANEL
===================== */
#asset-panel {
position:absolute;
right:40px;
top:50%;
transform:
translateY(-50%);
width:320px;
padding:25px;
background:
rgba(255,255,255,.08);
border:
1px solid rgba(255,255,255,.15);
border-radius:25px;
backdrop-filter:
blur(20px);
z-index:30;
}
.star {
position:absolute;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
color:white;
cursor:pointer;
transition:.3s;
transform-origin:center;
}
.star:hover {
transform:scale(1.3);
}
.hidden {
display:none;
}
#asset-symbol {
font-size:45px;
}
.line {
height:1px;
background:
rgba(255,255,255,.2);
margin:20px 0;
}
.info div {
display:flex;
justify-content:space-between;
margin:12px 0;
}
.info span {
color:#9fb2d4;
}
.magnitude {
margin-top:25px;
}
.bar {
height:8px;
background:#ffffff20;
border-radius:20px;
overflow:hidden;
}
#magnitude-fill {
height:100%;
width:70%;
background:
linear-gradient(
90deg,
#55d8ff,
#9b7cff
);
}
/* =====================
LOADING
===================== */
#loading {
position:absolute;
inset:0;
background:#020511;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
font-size:22px;
z-index:100;
}
@media (max-width: 700px){
#asset-panel {
position: fixed;
right: 0;
left: 0;
top: auto;
bottom: 0;
width: 100%;
max-width: none;
transform: translateY(100%);
transition: transform 0.35s ease;
max-height: 45vh;
overflow-y: auto;
border-radius: 20px 20px 0 0;
padding-bottom: env(safe-area-inset-bottom, 20px);
z-index: 40;
}
#asset-panel.open {
transform: translateY(0);
}
/* maniglia visiva in cima al foglio */
#asset-panel::before {
content: "";
display: block;
width: 40px;
height: 4px;
border-radius: 2px;
background: rgba(255,255,255,.3);
margin: 4px auto 14px;
}
}
#loading-status {
margin-top:15px;
color:#55d8ff;
font-size:15px;
}
.wallet-star .glow {
transition: opacity 0.4s ease, transform 0.4s ease;
}
.wallet-star.selected .glow {
opacity: 0.75;
transform: scale(1.3);
}
.coin-star {
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
.wallet-star.expanded .coin-star {
opacity: 1;
pointer-events: auto;
}
#portfolio-icon {
font-size: 45px;
text-align: center;
}
#panel-empty h2 {
text-align: center;
}
.universe-boundary {
animation: universePulse 10s ease-in-out infinite;
}
@keyframes universePulse {
0%, 100% { opacity: 0.2; }
50% { opacity: 0.35; }
}
/* =====================
BRAND — TOGGLE LOGO
===================== */
#brand {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
padding: 8px 16px 8px 8px;
border-radius: 999px;
border: 1px solid rgba(0, 212, 255, 0.25);
background: rgba(255,255,255,.04);
transition: border-color 0.2s ease, background 0.2s ease;
}
#brand:hover {
border-color: rgba(0, 212, 255, 0.5);
background: rgba(255,255,255,.07);
}
#brand-logo {
width: 60px;
height: 60px;
object-fit: contain;
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
}
/* =====================
ASSET PANEL — TOGGLE (desktop)
Su mobile il comportamento "chiuso di default" esiste già
via la media query più sotto (transform: translateY(100%)).
Qui lo estendiamo anche al desktop, riusando la stessa classe .open.
===================== */
#asset-panel {
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
#asset-panel.open {
opacity: 1;
pointer-events: auto;
}
/* =====================
NUOVI STATI PANNELLO
(login, onboarding) — colori brand Coinatlas
===================== */
:root {
--ca-blue: #5b7cff;
--ca-cyan: #00d4ff;
--ca-purple: #a855f7;
--ca-gold: #ffc857;
}
.eyebrow {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ca-cyan);
margin: 0 0 8px;
font-weight: 600;
}
#panel-login h2,
#panel-onboarding h2 {
font-weight: 700;
font-size: 22px;
margin: 0 0 8px;
background: linear-gradient(90deg, var(--ca-blue), var(--ca-cyan));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.panel-sub {
font-size: 13px;
color: #9fb2d4;
margin: 0 0 20px;
line-height: 1.5;
}
.field {
margin-bottom: 12px;
}
.field label {
display: block;
font-size: 11px;
color: #9fb2d4;
margin-bottom: 6px;
}
.field input,
.field select {
width: 100%;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.15);
background: rgba(255,255,255,.05);
color: white;
font-size: 13px;
font-family: inherit;
}
.field input:focus,
.field select:focus {
outline: none;
border-color: var(--ca-blue);
}
.btn-primary {
width: 100%;
padding: 11px;
border-radius: 10px;
border: none;
background: linear-gradient(90deg, var(--ca-blue), var(--ca-cyan));
color: #050816;
font-weight: 600;
font-size: 13px;
cursor: pointer;
margin-top: 4px;
}
.switch-line {
text-align: center;
font-size: 12px;
color: #9fb2d4;
margin-top: 16px;
}
.switch-line a {
color: var(--ca-cyan);
text-decoration: none;
cursor: pointer;
}
.error-msg {
color: #ff6b6b;
font-size: 12px;
margin: -4px 0 10px;
}
#empty-orb {
width: 80px;
height: 80px;
border-radius: 50%;
margin: 10px auto 22px;
background: radial-gradient(circle at 40% 35%, #2a2a3d, #0a0a14 70%);
border: 1px solid rgba(255,255,255,.12);
}
.add-wallet-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 20px;
padding: 10px 12px;
border-radius: 10px;
border: 1px dashed rgba(168, 85, 247, 0.4);
color: var(--ca-purple);
font-size: 12px;
cursor: pointer;
text-align: center;
justify-content: center;
}
.signout-link {
display: block;
text-align: center;
margin-top: 16px;
font-size: 11px;
color: #9fb2d4;
cursor: pointer;
}
/* =====================
UNIVERSO VUOTO — frase + CTA
===================== */
#empty-universe-cta {
position: absolute;
left: 50%;
top: 62%;
transform: translate(-50%, 0);
z-index: 15;
text-align: center;
width: 90%;
max-width: 420px;
}
#empty-universe-tagline {
font-size: 15px;
color: #b7c8e8;
font-style: italic;
margin: 0 0 18px;
}
#empty-universe-add-btn {
padding: 12px 26px;
border-radius: 12px;
border: none;
background: linear-gradient(90deg, var(--ca-blue), var(--ca-cyan));
color: #050816;
font-weight: 600;
font-size: 14px;
cursor: pointer;
box-shadow: 0 0 30px rgba(0, 212, 255, 0.25);
}
#portfolio-total {
color: var(--ca-gold) !important;
}