/* ========================================================================= Z TOKEN — LIGHT THEME LAYER + THEME TOGGLE Loaded LAST. Base files stay untouched, so the DARK default is unchanged. Activated by . Palette: faint-lavender premium fintech (not a stark-white invert). All light values are AA-checked against the lightest surface (--bg-0 #f4f2fb). ========================================================================= */ /* ---------------- light tokens ---------------- */ :root[data-theme="light"] { --bg-0: #f4f2fb; --bg-1: #ece9f7; --bg-2: #e4dff4; --panel: rgba(255, 255, 255, 0.82); --panel-2: rgba(248, 246, 253, 0.92); /* brand hues deepened where they double as TEXT so they clear AA on light */ --purple: #6d28d9; --violet: #6d28d9; --lav: #6d28d9; --lav-2: #4c1d95; --magenta: #c21fa6; --text: #1b1233; --text-dim: #4a3d6e; --text-faint: #6b5f92; --line: rgba(109, 40, 217, 0.20); --glow: rgba(124, 58, 237, 0.28); --ok: #15803d; --warn: #b45309; --err: #be123c; } /* ========================================================================= SURFACES — every card is .glass / .glass-bright, so these two flip them all ========================================================================= */ :root[data-theme="light"] .glass { background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(249, 247, 254, 0.86)) padding-box, linear-gradient(160deg, rgba(124, 58, 237, 0.55), rgba(168, 120, 255, 0.35) 40%, rgba(109, 40, 217, 0.30) 65%, rgba(190, 150, 255, 0.55)) border-box; box-shadow: 0 1px 2px rgba(76, 29, 149, 0.06), 0 12px 30px rgba(76, 29, 149, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); } :root[data-theme="light"] .glass-bright { background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(245, 241, 253, 0.92)) padding-box, linear-gradient(160deg, #b98bff, #7c3aed 48%, #6d28d9 72%, #c9a7ff) border-box; box-shadow: 0 2px 6px rgba(76, 29, 149, 0.08), 0 18px 40px rgba(76, 29, 149, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95); } :root[data-theme="light"] .card-3d:hover { box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.18), 0 22px 46px rgba(76, 29, 149, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9); } :root[data-theme="light"] .sweep::after { background: linear-gradient(105deg, transparent 42%, rgba(124, 58, 237, 0.10) 50%, transparent 58%); } /* ========================================================================= METALLIC / CHROME TEXT — white→silver gradients vanish on light, give them a deep-violet gradient and drop the black shadow ========================================================================= */ :root[data-theme="light"] .chrome-txt { background: linear-gradient(180deg, #6d28d9 0%, #8b5cf6 40%, #4c1d95 58%, #7c3aed 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 1px rgba(124, 58, 237, 0.22)); } :root[data-theme="light"] .purple-txt { background: linear-gradient(180deg, #7c3aed 0%, #6d28d9 45%, #4c1d95 70%, #8b5cf6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 1px rgba(124, 58, 237, 0.18)); } :root[data-theme="light"] .nav-logo b, :root[data-theme="light"] .tok-block .t, :root[data-theme="light"] .dist-total .t, :root[data-theme="light"] .dist-row .pct, :root[data-theme="light"] table.zt .num, :root[data-theme="light"] .marquee-track span { background: linear-gradient(180deg, #6d28d9, #4c1d95 70%, #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; } :root[data-theme="light"] .pkg-card .val { background: linear-gradient(180deg, #4c1d95, #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 1px rgba(124, 58, 237, 0.18)); } :root[data-theme="light"] .boost-pct { filter: drop-shadow(0 2px 0 rgba(200, 170, 255, 0.7)) drop-shadow(0 0 18px rgba(124, 58, 237, 0.25)); } /* ========================================================================= HARDCODED LIGHT TEXT → dark on light ========================================================================= */ :root[data-theme="light"] .kv .v, :root[data-theme="light"] .addr-pill, :root[data-theme="light"] .dest-card .n, :root[data-theme="light"] .eco-node .nm, :root[data-theme="light"] .step-card .t, :root[data-theme="light"] .pkg-card .roi, :root[data-theme="light"] .boost-name, :root[data-theme="light"] .mkt-pair-t b, :root[data-theme="light"] .mkt-chip .mv, :root[data-theme="light"] .mkt-price-lg, :root[data-theme="light"] .mkt-price, :root[data-theme="light"] .dist-row .lbl, :root[data-theme="light"] .mv-main .statement, :root[data-theme="light"] table.zt .lv { color: var(--text); } :root[data-theme="light"] .about-card, :root[data-theme="light"] .zclub-cta-line, :root[data-theme="light"] .ready-item p, :root[data-theme="light"] .legacy-item p, :root[data-theme="light"] .pillar p, :root[data-theme="light"] .tl-card p, :root[data-theme="light"] .dist-note, :root[data-theme="light"] .boost-rule, :root[data-theme="light"] table.zt .plain { color: var(--text-dim); } /* soften the purple text-shadow on the hero subheading */ :root[data-theme="light"] .hero-sub { text-shadow: none; } :root[data-theme="light"] .mkt-price-lg, :root[data-theme="light"] .mkt-price { text-shadow: 0 0 18px rgba(124, 58, 237, 0.18); } /* ========================================================================= NAV ========================================================================= */ :root[data-theme="light"] .nav.scrolled { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(14px); border-bottom-color: rgba(109, 40, 217, 0.16); box-shadow: 0 8px 30px rgba(76, 29, 149, 0.10); } :root[data-theme="light"] .nav-links a:hover { color: #4c1d95; background: rgba(124, 58, 237, 0.10); } :root[data-theme="light"] .nav-links a.active { color: #4c1d95; background: rgba(124, 58, 237, 0.14); box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.28); } :root[data-theme="light"] .nav-burger { background: rgba(124, 58, 237, 0.06); border-color: rgba(109, 40, 217, 0.25); } :root[data-theme="light"] .nav-burger span { background: #5b21b6; } /* ========================================================================= BUTTONS / CHIPS / BADGES (btn-primary stays purple — dark text works on light) ========================================================================= */ :root[data-theme="light"] .btn-ghost { color: #5b21b6; background: rgba(124, 58, 237, 0.06); border-color: rgba(109, 40, 217, 0.30); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); } :root[data-theme="light"] .btn-ghost:hover { color: #4c1d95; border-color: rgba(109, 40, 217, 0.55); box-shadow: 0 0 16px rgba(124, 58, 237, 0.2); background: rgba(124, 58, 237, 0.10); } :root[data-theme="light"] .chip { color: #4c1d95; background: rgba(124, 58, 237, 0.08); border-color: rgba(109, 40, 217, 0.22); } :root[data-theme="light"] .badge { color: var(--text-faint); background: rgba(124, 58, 237, 0.08); border-color: rgba(109, 40, 217, 0.22); } :root[data-theme="light"] .badge.is-live { color: #15803d; border-color: rgba(21, 128, 61, 0.4); } :root[data-theme="light"] .pkg-card .plate { color: #4c1d95; background: rgba(124, 58, 237, 0.09); border-color: rgba(109, 40, 217, 0.30); } :root[data-theme="light"] .cfg-note { background: rgba(251, 191, 36, 0.14); border-color: rgba(180, 83, 9, 0.35); color: #92400e; } :root[data-theme="light"] .addr-pill { background: rgba(124, 58, 237, 0.07); border-color: rgba(109, 40, 217, 0.25); } :root[data-theme="light"] .bar-track { background: #e7e0f7; border-color: rgba(109, 40, 217, 0.30); box-shadow: inset 0 1px 3px rgba(76, 29, 149, 0.12); } /* ========================================================================= HERO — lighten the veil so the dark photo becomes a pale lavender wash, keep the image + coin + particles ========================================================================= */ :root[data-theme="light"] .hero-veil { background: radial-gradient(95% 65% at 50% 26%, rgba(255, 255, 255, 0.55), rgba(244, 242, 251, 0.75) 68%), linear-gradient(180deg, rgba(244, 242, 251, 0.72) 0%, rgba(244, 242, 251, 0.50) 26%, rgba(236, 233, 247, 0.72) 66%, var(--bg-0) 100%); } :root[data-theme="light"] .hero-badge { background: rgba(255, 255, 255, 0.72); border-color: rgba(109, 40, 217, 0.25); color: #4c1d95; box-shadow: 0 2px 10px rgba(76, 29, 149, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7); } /* ========================================================================= SECTION ARTWORK — dark photos become a faint ghost, overlay flips light ========================================================================= */ :root[data-theme="light"] .sec-art img { opacity: 0.12; } :root[data-theme="light"] .sec-art::after { background: linear-gradient(180deg, var(--bg-0) 0%, rgba(244, 242, 251, 0.60) 22%, rgba(236, 233, 247, 0.66) 70%, var(--bg-0) 100%); } /* ========================================================================= ICON CIRCLES — dark radial pucks → light lavender fill, deep-violet glyph ========================================================================= */ :root[data-theme="light"] .tok-ic, :root[data-theme="light"] .ready-item .ic, :root[data-theme="light"] .mini-chip .ic, :root[data-theme="light"] .dist-row .ic, :root[data-theme="light"] .eco-node .zi, :root[data-theme="light"] .boost-ic { background: radial-gradient(circle at 32% 28%, #f1e9ff, #dcc9ff 72%); border-color: rgba(124, 58, 237, 0.4); color: #5b21b6; } /* ========================================================================= TABLES (thead purple gradient + step-card/tl-badge purple pucks stay) ========================================================================= */ :root[data-theme="light"] table.zt tbody td { border-bottom-color: rgba(109, 40, 217, 0.12); } :root[data-theme="light"] table.zt tbody tr:nth-child(even) { background: rgba(124, 58, 237, 0.05); } :root[data-theme="light"] table.zt tbody tr:hover { background: rgba(124, 58, 237, 0.10); } :root[data-theme="light"] table.zt tr.grp-brk td { border-top-color: rgba(109, 40, 217, 0.3); } /* ========================================================================= "HOT" DESTINATION CARD — keep it a vibrant dark accent (guard vs glass-bright) ========================================================================= */ :root[data-theme="light"] .dest-card.hot { background: linear-gradient(160deg, rgba(80, 24, 150, 0.95), rgba(52, 14, 110, 0.97)) padding-box, linear-gradient(160deg, #ffe3ff, #ff5ffb 40%, #8b3dff) border-box; } :root[data-theme="light"] .dest-card.hot .n { color: #fff; } :root[data-theme="light"] .dest-card.hot .s { color: #f4c9f2; } /* ========================================================================= MARQUEE ========================================================================= */ :root[data-theme="light"] .marquee { background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(237, 233, 248, 0.85), rgba(255, 255, 255, 0.9)); border-top-color: rgba(109, 40, 217, 0.18); border-bottom-color: rgba(109, 40, 217, 0.18); box-shadow: 0 0 30px rgba(124, 58, 237, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.7); } :root[data-theme="light"] .marquee-track i { -webkit-text-fill-color: #c21fa6; color: #c21fa6; } /* ========================================================================= MARKET DELTAS ========================================================================= */ :root[data-theme="light"] .delta.up { color: #15803d; } :root[data-theme="light"] .delta.down { color: #be123c; } /* ========================================================================= MOBILE MENU (fullscreen 821–1024) + BOTTOM SHEET (≤820) + BOTTOM NAV ========================================================================= */ :root[data-theme="light"] .mobile-menu { background: radial-gradient(120% 80% at 50% 0%, rgba(236, 233, 247, 0.98), rgba(244, 242, 251, 0.99)); backdrop-filter: blur(18px); } :root[data-theme="light"] .mobile-menu a { color: #4c1d95; } :root[data-theme="light"] .mobile-menu a:hover { color: #2e1065; } :root[data-theme="light"] .menu-close { background: rgba(124, 58, 237, 0.08); border-color: rgba(109, 40, 217, 0.25); color: #5b21b6; } :root[data-theme="light"] .bottom-nav { background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(246, 243, 253, 0.98)) padding-box, linear-gradient(160deg, rgba(124, 58, 237, 0.5), rgba(168, 120, 255, 0.4) 35%, rgba(109, 40, 217, 0.3) 65%, rgba(190, 150, 255, 0.5)) border-box; box-shadow: 0 -4px 22px rgba(76, 29, 149, 0.12), 0 0 18px rgba(124, 58, 237, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8); } :root[data-theme="light"] .bn-item.active, :root[data-theme="light"] .bn-item:active { color: #4c1d95; } :root[data-theme="light"] .bn-item.active svg { color: #5b21b6; } @media (max-width: 820px) { :root[data-theme="light"] .mobile-menu { background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(245, 241, 253, 0.99)) padding-box, linear-gradient(160deg, rgba(124, 58, 237, 0.5), rgba(168, 120, 255, 0.4) 35%, rgba(109, 40, 217, 0.3) 65%, rgba(190, 150, 255, 0.5)) border-box; box-shadow: 0 -8px 40px rgba(76, 29, 149, 0.18), 0 0 26px rgba(124, 58, 237, 0.15); } :root[data-theme="light"] .mobile-menu a { background: rgba(124, 58, 237, 0.07); border-color: rgba(109, 40, 217, 0.18); } :root[data-theme="light"] .mobile-menu a:active { background: rgba(124, 58, 237, 0.16); } :root[data-theme="light"] body.menu-open::before { background: rgba(20, 10, 50, 0.35); } :root[data-theme="light"] .bn-item.active { background: rgba(124, 58, 237, 0.10); box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.22); } } :root[data-theme="light"] .nwm-dot { border-color: #ece9f7; background: #b7abd4; } /* ========================================================================= TOAST + FOOTER ========================================================================= */ :root[data-theme="light"] .toast { background: rgba(255, 255, 255, 0.96); border-color: rgba(109, 40, 217, 0.25); box-shadow: 0 12px 34px rgba(76, 29, 149, 0.18), 0 0 20px rgba(124, 58, 237, 0.12); color: var(--text); } :root[data-theme="light"] footer { background: rgba(248, 246, 253, 0.9); border-top-color: rgba(109, 40, 217, 0.16); } :root[data-theme="light"] .foot-base { border-top-color: rgba(109, 40, 217, 0.12); } /* ========================================================================= AMBIENT — hide the dark nightclub photo, soften the aurora & coins ========================================================================= */ :root[data-theme="light"] .aurora { opacity: 0.6; } :root[data-theme="light"] .aurora i:nth-child(1) { background: radial-gradient(circle, rgba(124, 58, 237, 0.10) 0%, rgba(124, 58, 237, 0) 62%); } :root[data-theme="light"] .aurora i:nth-child(2) { background: radial-gradient(circle, rgba(194, 31, 166, 0.06) 0%, rgba(194, 31, 166, 0) 60%); } :root[data-theme="light"] .aurora i:nth-child(3) { background: radial-gradient(circle, rgba(109, 40, 217, 0.09) 0%, rgba(109, 40, 217, 0) 62%); } :root[data-theme="light"] .bgm-club { display: none; } :root[data-theme="light"] .bg-motion .bgm-coin { opacity: 0.10; filter: drop-shadow(0 0 10px rgba(124, 58, 237, 0.22)); } /* ========================================================================= THEME TOGGLE (styling for BOTH themes lives here) dark → Sun (click to go light) · light → Moon (click to go dark) ========================================================================= */ .theme-toggle { position: relative; flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; color: var(--lav-2); background: rgba(30, 10, 62, 0.5); border: 1.5px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; } .theme-toggle:hover { border-color: rgba(200, 140, 255, 0.6); box-shadow: 0 0 16px rgba(150, 70, 255, 0.3); color: #fff; transform: translateY(-1px); } .theme-toggle:active { transform: translateY(0) scale(0.96); } .theme-toggle:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; } .theme-toggle svg { position: absolute; width: 20px; height: 20px; } .theme-toggle .ic { transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); } .theme-toggle .ic-sun { opacity: 1; transform: rotate(0deg) scale(1); } .theme-toggle .ic-moon { opacity: 0; transform: rotate(-90deg) scale(0.55); } :root[data-theme="light"] .theme-toggle .ic-sun { opacity: 0; transform: rotate(90deg) scale(0.55); } :root[data-theme="light"] .theme-toggle .ic-moon { opacity: 1; transform: rotate(0deg) scale(1); } :root[data-theme="light"] .theme-toggle { color: #5b21b6; background: rgba(255, 255, 255, 0.72); border-color: rgba(109, 40, 217, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(76, 29, 149, 0.08); } :root[data-theme="light"] .theme-toggle:hover { color: #4c1d95; border-color: rgba(109, 40, 217, 0.5); box-shadow: 0 0 14px rgba(124, 58, 237, 0.2); } :root[data-theme="light"] .theme-toggle:focus-visible { outline-color: #6d28d9; } @media (prefers-reduced-motion: reduce) { .theme-toggle, .theme-toggle .ic { transition: none; } } /* ========================================================================= SCOPED CROSS-FADE while the theme flips (JS adds data-theme-anim ~300ms; never added under reduced-motion) ========================================================================= */ :root[data-theme-anim] * { transition-property: background-color, color, border-color, box-shadow, fill, transform, opacity !important; transition-duration: 0.28s !important; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important; }