/* ============================================================ FLOW — styles.css Theme is driven by [data-chain] on . Each chain sets a handful of CSS variables; everything else reads from them, so the whole site re-skins from a single attribute flip. ============================================================ */ :root { --bg: #07080a; --bg-soft: #0e1013; --panel: rgba(255,255,255,.03); --panel-2: rgba(255,255,255,.05); --border: rgba(255,255,255,.08); --text: #f4f6f5; --muted: #9aa3a0; --radius: 18px; --maxw: 1120px; /* overridden per chain — Robinhood Chain lime/chartreuse (yellow-green) */ --accent: #aee619; --accent-2: #e9ff6b; --accent-ink:#17210a; --glow: 0 0 60px rgba(174,230,25,.35); } /* ---- CHAIN THEMES ---- */ html[data-chain="robinhood"] { --accent:#aee619; --accent-2:#e9ff6b; --accent-ink:#17210a; --bg:#080b04; --bg-soft:#0d1208; --glow:0 0 70px rgba(174,230,25,.42); } html[data-chain="base"] { --accent:#2f6bff; --accent-2:#6fa0ff; --accent-ink:#02081e; --bg:#05070f; --bg-soft:#0a0f1c; --glow:0 0 70px rgba(47,107,255,.42); } html[data-chain="bsc"] { --accent:#f3ba2f; --accent-2:#ffd766; --accent-ink:#1c1503; --bg:#0a0803; --bg-soft:#12100a; --glow:0 0 70px rgba(243,186,47,.38); } html[data-chain="cronos"] { --accent:#17b8ff; --accent-2:#7fe4ff; --accent-ink:#021521; --bg:#020810; --bg-soft:#06111e; --glow:0 0 70px rgba(23,184,255,.42); } html[data-chain="ink"] { --accent:#8b6dff; --accent-2:#c6b6ff; --accent-ink:#0d0524; --bg:#07050f; --bg-soft:#0d0a1a; --glow:0 0 70px rgba(139,109,255,.44); } /* ---- BASE ---- */ * { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; } body { font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text); line-height:1.55; overflow-x:hidden; -webkit-font-smoothing:antialiased; transition:background .6s ease; } h1,h2,h3 { line-height:1.08; letter-spacing:-.02em; font-weight:800; } a { color:inherit; text-decoration:none; } em { font-style:normal; color:var(--accent-2); } b { color:#fff; font-weight:700; } .muted { color:var(--muted); font-weight:400; } .v2-tag { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-2); background:var(--panel-2); border:1px solid var(--border); border-radius:20px; padding:1px 8px; margin-left:6px; vertical-align:middle; white-space:nowrap; } /* ---- AMBIENT BG ---- */ .bg-orb { position:fixed; border-radius:50%; filter:blur(90px); opacity:.5; z-index:0; pointer-events:none; background:radial-gradient(circle,var(--accent),transparent 70%); transition:background .6s ease; } .orb-1 { width:520px; height:520px; top:-160px; right:-120px; } .orb-2 { width:460px; height:460px; bottom:10%; left:-160px; opacity:.35; } .bg-grid { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.4; background-image: linear-gradient(var(--border) 1px,transparent 1px), linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 70%); } /* ---- NAV ---- */ .nav { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:24px; max-width:var(--maxw); margin:0 auto; padding:16px 24px; backdrop-filter:blur(14px); } .nav::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(var(--bg),transparent); mask-image:linear-gradient(#000,#000 60%,transparent); } .brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; } .brand-mark { display:inline-block; width:32px; height:32px; flex:none; background:url('brand-mark.png') center/contain no-repeat; color:transparent; font-size:0; line-height:0; /* hide the "≈" fallback glyph */ } .brand-name { letter-spacing:.04em; } .nav-links { display:flex; gap:26px; margin-left:12px; font-size:14.5px; color:var(--muted); } .nav-links a:hover { color:#fff; } .nav-accent { color:var(--accent) !important; font-weight:600; } .nav-accent:hover { filter:brightness(1.2); } .nav-right { display:flex; align-items:center; gap:14px; margin-left:auto; } /* ---- CHAIN SWITCHER ---- */ .chain-switch { position:relative; } .chain-current { display:flex; align-items:center; gap:9px; cursor:pointer; background:var(--panel-2); border:1px solid var(--border); color:var(--text); padding:9px 13px; border-radius:12px; font-size:14px; font-weight:600; transition:border-color .2s, background .2s; } .chain-current:hover { border-color:var(--accent); } .single-chain .chain-current { cursor:default; } .single-chain .chain-current:hover { border-color:var(--border); } .chain-dot { width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); } .caret { color:var(--muted); font-size:11px; } .chain-menu { position:absolute; right:0; top:calc(100% + 8px); width:230px; list-style:none; background:var(--bg-soft); border:1px solid var(--border); border-radius:14px; padding:6px; opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .18s, transform .18s; box-shadow:0 24px 60px rgba(0,0,0,.55); z-index:60; } .chain-switch.open .chain-menu { opacity:1; transform:translateY(0); pointer-events:auto; } .chain-menu li { display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:10px; font-size:14px; cursor:pointer; transition:background .15s; } .chain-menu li:hover { background:var(--panel-2); } .chain-menu li em { margin-left:auto; font-size:11px; color:var(--muted); font-weight:600; border:1px solid var(--border); padding:2px 7px; border-radius:20px; } .d { width:10px; height:10px; border-radius:50%; } .d-robinhood { background:#aee619; box-shadow:0 0 8px #aee619; } .d-base { background:#2f6bff; box-shadow:0 0 8px #2f6bff; } .d-bsc { background:#f3ba2f; box-shadow:0 0 8px #f3ba2f; } .d-cronos { background:#17b8ff; box-shadow:0 0 8px #17b8ff; } .d-ink { background:#8b6dff; box-shadow:0 0 8px #8b6dff; } /* ---- BUTTONS ---- */ .btn { display:inline-flex; align-items:center; gap:8px; font-weight:650; font-size:15px; padding:13px 22px; border-radius:13px; cursor:pointer; transition:transform .15s, box-shadow .2s, background .2s; border:1px solid transparent; white-space:nowrap; } .btn:hover { transform:translateY(-2px); } .btn-solid { background:var(--accent); color:var(--accent-ink); box-shadow:var(--glow); } .btn-solid:hover { box-shadow:0 0 90px var(--accent); } .btn-ghost { background:transparent; border-color:var(--border); color:var(--text); } .btn-ghost:hover { border-color:var(--accent); } .nav-cta { padding:9px 16px; font-size:14px; } /* mobile hamburger (hidden on desktop; shown ≤900px, injected by app.js) */ .nav-burger { display:none; flex-direction:column; justify-content:center; gap:5px; width:42px; height:38px; padding:0 9px; flex:none; cursor:pointer; background:var(--panel-2); border:1px solid var(--border); border-radius:10px; } .nav-burger span { display:block; height:2px; width:100%; background:var(--text); border-radius:2px; transition:transform .22s, opacity .18s; } .nav.open .nav-burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .nav.open .nav-burger span:nth-child(2) { opacity:0; } .nav.open .nav-burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } /* ---- HERO ---- */ .hero { position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:70px 24px 90px; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; } .pill { display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--accent-2); background:var(--panel); border:1px solid var(--border); padding:7px 14px; border-radius:30px; margin-bottom:22px; } .pulse { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 var(--accent); animation:pulse 2s infinite; } @keyframes pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent); } 70% { box-shadow:0 0 0 12px transparent; } 100% { box-shadow:0 0 0 0 transparent; } } .hero h1 { font-size:clamp(40px,6vw,68px); } .grad { background:linear-gradient(120deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } .lede { color:var(--muted); font-size:18px; margin:22px 0 30px; max-width:520px; } .hero-actions { display:flex; gap:14px; flex-wrap:wrap; } .hero-actions.center { justify-content:center; } .hero-stats { display:flex; gap:34px; margin-top:42px; } .hero-stats b { display:block; font-size:26px; color:var(--accent); } .hero-stats span { font-size:13px; color:var(--muted); } /* ---- HERO BASKET VISUAL ---- */ .hero-visual { position:relative; display:grid; place-items:center; min-height:360px; } .basket { position:relative; width:260px; height:300px; } .basket-glow { position:absolute; inset:-30px; background:radial-gradient(circle,var(--accent),transparent 65%); opacity:.35; filter:blur(30px); animation:breathe 4s ease-in-out infinite; } @keyframes breathe { 50% { opacity:.6; transform:scale(1.05); } } .basket-shell { position:absolute; inset:0; border:1.5px solid var(--border); border-radius:26px; background:linear-gradient(180deg,var(--panel-2),var(--panel)); backdrop-filter:blur(6px); display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:26px; text-align:center; overflow:hidden; } .basket-name { font-size:12px; letter-spacing:.18em; color:var(--muted); } .basket-amount { font-size:44px; font-weight:800; color:var(--accent); margin:6px 0; display:inline-block; } .basket.filled .basket-amount { animation: basketBump .5s ease; } @keyframes basketBump { 0%{ transform:scale(1); } 30%{ transform:scale(1.05); color:var(--accent-2); } 100%{ transform:scale(1); } } .basket-sub { font-size:13px; color:var(--muted); } .basket-liquid { position:absolute; left:0; right:0; bottom:0; height:55%; background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 22%,transparent),color-mix(in srgb,var(--accent) 8%,transparent)); border-top:2px solid color-mix(in srgb,var(--accent) 60%,transparent); animation:fill 6s ease-in-out infinite alternate; } @keyframes fill { from { height:30%; } to { height:62%; } } .coin { position:absolute; color:var(--accent); font-weight:900; font-size:20px; opacity:.6; animation:bob 3s ease-in-out infinite; } .c1 { left:26%; bottom:20%; } .c2 { left:54%; bottom:32%; animation-delay:.6s; } .c3 { left:40%; bottom:12%; animation-delay:1.2s; } @keyframes bob { 50% { transform:translateY(-10px); } } .drip { position:absolute; font-size:13px; font-weight:700; color:var(--accent-ink); background:var(--accent); padding:5px 11px; border-radius:20px; box-shadow:var(--glow); animation:floaty 4s ease-in-out infinite; } .d1 { top:8%; left:2%; } .d2 { top:26%; right:0; animation-delay:1s; } .d3 { bottom:10%; left:0; background:var(--panel-2); color:var(--accent-2); border:1px solid var(--border); box-shadow:none; animation-delay:2s; } @keyframes floaty { 50% { transform:translateY(-12px); } } /* ---- SECTIONS ---- */ .section { position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:80px 24px; } .section-head { text-align:center; max-width:640px; margin:0 auto 52px; } .eyebrow { font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:700; } .section-head h2 { font-size:clamp(30px,4.5vw,46px); margin:12px 0 14px; } .section-head p { color:var(--muted); font-size:17px; } /* ---- FLOW CARDS ---- */ .flow-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:28px; transition:transform .2s, border-color .2s, background .2s; } .card:hover { transform:translateY(-4px); border-color:var(--accent); background:var(--panel-2); } .card-icon { font-size:30px; margin-bottom:14px; } .card h3 { font-size:19px; margin-bottom:10px; } .card p { color:var(--muted); font-size:15px; } /* ---- SPLIT ---- */ .split-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; } .split-panel { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:30px; } .split-panel h3 { font-size:20px; margin-bottom:8px; } .hl { color:var(--accent); } .split-note { color:var(--muted); font-size:14.5px; margin-bottom:22px; } .bar { display:flex; height:52px; border-radius:12px; overflow:hidden; border:1px solid var(--border); } .seg { width:var(--w); display:grid; place-items:center; font-size:13px; font-weight:700; color:var(--accent-ink); transition:width .8s ease; } .seg span { padding:0 6px; } .seg-a { background:var(--accent); } .seg-b { background:color-mix(in srgb,var(--accent) 45%,#000); color:#fff; } .seg-p { background:color-mix(in srgb,var(--accent-2) 50%,#000); color:#fff; } .seg-c { background:var(--accent); } .seg-d { background:var(--accent-2); } .legend { list-style:none; margin-top:18px; display:grid; gap:8px; font-size:14px; color:var(--muted); } .legend i { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:9px; vertical-align:middle; } .k-b { background:color-mix(in srgb,var(--accent) 45%,#000); } .k-p { background:color-mix(in srgb,var(--accent-2) 50%,#000); } .k-c { background:var(--accent); } .k-d { background:var(--accent-2); } /* ---- CHAIN GRID ---- */ .chain-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; } .chain-card { text-align:left; cursor:pointer; color:var(--text); background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; gap:8px; transition:transform .2s, border-color .2s; } .chain-card:hover { transform:translateY(-4px); border-color:var(--accent); } .cc-dot { width:14px; height:14px; border-radius:50%; } .cc-name { font-size:18px; font-weight:700; } .cc-tag { align-self:flex-start; font-size:11px; font-weight:700; color:var(--muted); border:1px solid var(--border); padding:2px 9px; border-radius:20px; } .cc-tag.live { color:var(--accent-ink); background:var(--accent); border-color:transparent; } .cc-desc { font-size:14px; color:var(--muted); } .cc-token { margin-top:6px; padding-top:12px; border-top:1px solid var(--border); font-size:12.5px; color:var(--muted); letter-spacing:.02em; } .cc-token b { color:var(--accent); } /* ---- TIMELINE ---- */ .timeline { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .tl-item { position:relative; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:24px; } .tl-item::before { content:""; position:absolute; top:0; left:24px; width:34px; height:3px; background:var(--accent); border-radius:3px; box-shadow:var(--glow); } .tl-phase { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:700; } .tl-item h3 { font-size:18px; margin:10px 0 8px; } .tl-item p { font-size:14px; color:var(--muted); } /* ---- CTA BAND ---- */ .cta-band { text-align:center; } .cta-band h2 { font-size:clamp(30px,5vw,50px); } .cta-band p { color:var(--muted); font-size:18px; margin:14px 0 26px; } /* launchpad "for creators" band — a bordered panel with a soft lime glow */ .launch-band { text-align:center; } .launch-band .lb-panel { position:relative; overflow:hidden; max-width:800px; margin:0 auto; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:44px 34px; } .launch-band .lb-panel::before { content:""; position:absolute; left:50%; top:-40%; width:120%; height:120%; transform:translateX(-50%); pointer-events:none; background:radial-gradient(circle at 50% 0%, color-mix(in srgb,var(--accent) 14%, transparent), transparent 55%); } .launch-band .eyebrow, .launch-band h2, .launch-band p, .launch-band .hero-actions { position:relative; } .launch-band h2 { font-size:clamp(26px,4vw,42px); margin:12px 0 14px; } .launch-band p { color:var(--muted); max-width:620px; margin:0 auto 20px; font-size:16.5px; } .launch-band .lb-fee { position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px; margin:0 auto 24px; } .launch-band .lb-fee span { background:var(--panel-2); border:1px solid var(--border); border-radius:20px; padding:7px 14px; font-size:13px; color:var(--muted); } .launch-band .lb-fee b { color:var(--accent); font-weight:800; } @media (max-width:600px){ .launch-band .lb-panel { padding:32px 20px; } } .contract { margin-top:26px; font-size:14px; } .contract code { background:var(--panel-2); border:1px solid var(--border); padding:6px 12px; border-radius:8px; color:var(--accent-2); } /* ---- FAQ ---- */ .faq { max-width:760px; margin:0 auto; display:grid; gap:12px; } .faq details { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:4px 20px; } .faq summary { cursor:pointer; padding:16px 0; font-weight:650; font-size:16px; list-style:none; display:flex; justify-content:space-between; } .faq summary::after { content:"+"; color:var(--accent); font-size:22px; line-height:1; } .faq details[open] summary::after { content:"–"; } .faq details p { color:var(--muted); padding:0 0 18px; font-size:15px; } /* ---- FOOTER ---- */ .footer { position:relative; z-index:1; max-width:var(--maxw); margin:40px auto 0; padding:40px 24px 60px; border-top:1px solid var(--border); text-align:center; } .foot-brand { display:flex; align-items:center; justify-content:center; gap:9px; font-weight:800; font-size:18px; margin-bottom:14px; } .disclaimer { color:var(--muted); font-size:13px; max-width:620px; margin:0 auto 18px; } .foot-links { display:flex; gap:22px; justify-content:center; font-size:14px; color:var(--muted); } .foot-links a:hover { color:var(--accent); } /* ---- RESPONSIVE ---- */ @media (max-width:1050px) { .chain-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:900px) { .nav { gap:12px; } .nav-burger { display:inline-flex; } .chain-switch { display:none; } /* single chain — declutter on mobile */ .nav-links { position:absolute; top:100%; left:0; right:0; margin:0; z-index:55; flex-direction:column; gap:0; padding:4px 18px 10px; background:var(--bg-soft); border-bottom:1px solid var(--border); box-shadow:0 24px 50px rgba(0,0,0,.5); max-height:0; overflow:hidden; opacity:0; pointer-events:none; transition:max-height .28s ease, opacity .2s, padding .2s; } .nav.open .nav-links { max-height:75vh; opacity:1; pointer-events:auto; } .nav-links a { padding:14px 4px; font-size:16px; border-bottom:1px solid var(--border); } .nav-links a:last-child { border-bottom:none; } .hero { grid-template-columns:1fr; } .hero-visual { order:-1; min-height:280px; } .flow-cards, .split-grid, .timeline { grid-template-columns:1fr; } .hero-stats { gap:22px; } } @media (max-width:560px) { .chain-grid { grid-template-columns:1fr; } } @media (max-width:520px) { .nav-cta { padding:8px 12px; font-size:13px; } .hero-stats { flex-wrap:wrap; } } /* ---- MOBILE: tighter spacing + right-sized type (less scrolling) ---- */ @media (max-width:600px) { .nav { padding:12px 16px; } .hero { padding:26px 16px 38px; gap:6px; } .hero-visual { display:none; } /* decorative; drop it to get to content faster */ .hero h1 { font-size:clamp(30px,8.5vw,42px); } .section { padding:42px 16px; } .section-head { margin-bottom:28px; } .section-head h2, .cta-band h2 { font-size:clamp(25px,7vw,34px); } .section-head p, .dash-sub, .pf-hero p { font-size:15.5px; } .footer { padding:30px 16px 42px; margin-top:20px; } .dash-hero { margin-bottom:28px; } .dash-hero h1 { font-size:clamp(27px,7.5vw,40px); } .dash-section { margin-bottom:30px; } .flywheel { padding:22px 16px 44px; } .curve-main { padding:12px 16px 44px; } .pf-wrap, .tp-wrap { padding:16px 16px 46px; } .launch-wrap { padding:8px 16px 44px; } .pf-hero h1, .curve-hero h1 { font-size:clamp(26px,7vw,36px); } .lp-hero h1 { font-size:clamp(28px,8vw,40px); } .pf-total .big { font-size:clamp(38px,12vw,54px); } } /* ============================================================ DASHBOARD ============================================================ */ .dash { position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:20px 24px 40px; } .demo-banner { display:flex; gap:8px; align-items:center; justify-content:center; font-size:13.5px; color:var(--muted); text-align:center; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:11px 16px; margin:8px 0 34px; } .demo-banner b { color:var(--accent); } .dash-hero { text-align:center; margin-bottom:56px; } .dash-hero h1 { font-size:clamp(34px,5vw,52px); } .dash-sub { color:var(--muted); font-size:17px; max-width:560px; margin:14px auto 30px; } .dash-sub b { color:var(--accent); } /* lookup */ .lookup { display:flex; gap:10px; align-items:center; max-width:720px; margin:0 auto; background:var(--panel-2); border:1px solid var(--border); border-radius:16px; padding:10px; flex-wrap:wrap; } .lookup:focus-within { border-color:var(--accent); } .lookup-icon { padding-left:8px; font-size:16px; opacity:.7; } .lookup input { flex:1; min-width:200px; background:transparent; border:none; outline:none; color:var(--text); font-size:15px; font-family:ui-monospace,'SF Mono',Menlo,monospace; } .lookup input::placeholder { color:var(--muted); opacity:.5; } .lookup-hint { color:var(--muted); font-size:13px; margin-top:12px; } .lookup-hint.warn { color:#ff8b6b; } /* basket result */ .basket-result { max-width:720px; margin:26px auto 0; text-align:left; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:24px; animation:rise .4s ease; } @keyframes rise { from { opacity:0; transform:translateY(12px); } } .br-top { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; } .br-id { display:flex; align-items:center; gap:14px; } .br-avatar { width:44px; height:44px; border-radius:12px; box-shadow:var(--glow); } .br-addr { font-family:ui-monospace,Menlo,monospace; font-size:16px; font-weight:600; } .br-badges { display:flex; gap:8px; align-items:center; margin-top:5px; flex-wrap:wrap; } .br-status { font-size:12.5px; font-weight:700; display:inline-block; padding:2px 10px; border-radius:20px; } .st-hold { color:var(--accent-ink); background:var(--accent); } .st-claim { color:var(--muted); border:1px solid var(--border); } .st-exit { color:#ff8b6b; border:1px solid rgba(255,139,107,.35); } .br-tier { font-size:12.5px; font-weight:700; padding:2px 10px; border-radius:20px; border:1px solid var(--border); background:var(--panel-2); } .br-value { text-align:right; } .br-value-num { font-size:38px; font-weight:800; color:var(--accent); } .br-value-tok { font-size:16px; color:var(--muted); margin-left:6px; } .br-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:24px 0 18px; border-top:1px solid var(--border); padding-top:20px; } .brg-k { display:block; font-size:12.5px; color:var(--muted); margin-bottom:5px; } .brg-v { display:block; font-size:17px; font-weight:700; } .br-note { font-size:14px; color:var(--muted); background:var(--panel-2); border-radius:10px; padding:12px 14px; } /* dash sections */ .dash-section { margin-bottom:52px; } .ds-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:6px; } .ds-head h2 { font-size:24px; } .ds-chain { font-size:14px; color:var(--muted); } .ds-chain b { color:var(--accent); } /* stat tiles */ .stat-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .tile { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:22px; } .tile-k { font-size:13px; color:var(--muted); } .tile-v { display:block; font-size:30px; font-weight:800; margin:10px 0 6px; } .tile-v.accent { color:var(--accent); } .tile-s { font-size:12.5px; color:var(--muted); } /* capital flow */ .flow-panel { display:grid; grid-template-columns:280px 1fr; gap:34px; align-items:center; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:30px; } .donut-wrap { position:relative; width:220px; height:220px; margin:0 auto; } .donut { width:100%; height:100%; border-radius:50%; box-shadow:var(--glow); transition:background .4s ease; } .donut::after { content:""; position:absolute; inset:26px; border-radius:50%; background:var(--bg-soft); } .donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; } .donut-total { font-size:30px; font-weight:800; color:var(--accent); } .donut-lab { font-size:12px; color:var(--muted); max-width:120px; } .flow-legend { display:grid; gap:14px; } .fl-row { display:flex; align-items:center; gap:14px; } .fl-key { width:14px; height:14px; border-radius:4px; flex:none; } .k-proj { background:color-mix(in srgb,var(--accent) 45%,#000); } .k-plat { background:color-mix(in srgb,var(--accent-2) 50%,#000); } .k-lp { background:var(--accent); } .k-hold { background:var(--accent-2); } .k-tax { background:var(--border); } .fl-meta { flex:1; } .fl-meta b { display:block; font-size:15px; } .fl-meta span { font-size:12.5px; color:var(--muted); } .fl-num { font-size:16px; font-weight:700; white-space:nowrap; } .fl-extra { border-top:1px dashed var(--border); padding-top:14px; margin-top:2px; } /* leaderboard */ .lb-note { color:var(--muted); font-size:13.5px; margin:-8px 0 16px; } .lb-rank { color:var(--muted); font-weight:700; width:36px; } .tier-badge { font-size:12.5px; font-weight:700; white-space:nowrap; } /* activity table */ .table-wrap { overflow-x:auto; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); } .activity { width:100%; border-collapse:collapse; min-width:560px; } .activity th, .activity td { padding:15px 18px; text-align:left; font-size:14px; } .activity thead th { color:var(--muted); font-weight:600; font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; border-bottom:1px solid var(--border); } .activity tbody tr { border-bottom:1px solid var(--border); } .activity tbody tr:last-child { border-bottom:none; } .activity tbody tr:hover { background:var(--panel-2); } .activity code { font-family:ui-monospace,Menlo,monospace; color:var(--accent-2); } .ta-r { text-align:right !important; } .badge { font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; } .badge-claim { color:var(--muted); border:1px solid var(--border); } .badge-exit { color:var(--accent-ink); background:var(--accent-2); } @media (max-width:900px) { .br-grid { grid-template-columns:repeat(2,1fr); } .stat-tiles { grid-template-columns:repeat(2,1fr); } .flow-panel { grid-template-columns:1fr; } .hide-sm { display:none; } } @media (max-width:520px) { .stat-tiles { grid-template-columns:1fr; } .lookup input { min-width:100%; } } /* ============================================================ CURVE TRADING PAGE ============================================================ */ .curve-main { position:relative; z-index:1; max-width:860px; margin:0 auto; padding:20px 24px 60px; } .curve-status { font-size:13.5px; text-align:center; color:var(--muted); background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:10px 16px; margin:8px 0 30px; } .curve-status.ok { color:var(--accent-2); border-color:color-mix(in srgb,var(--accent) 40%,var(--border)); } .curve-status.warn { color:#ffcf6b; } .curve-status.err { color:#ff8b6b; border-color:rgba(255,139,107,.35); } .curve-hero { text-align:center; margin-bottom:34px; } .curve-hero h1 { font-size:clamp(30px,5vw,46px); } .curve-lede { color:var(--muted); font-size:16px; max-width:600px; margin:14px auto 0; } .curve-progress { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px; margin-bottom:22px; } .cp-head { display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--muted); margin-bottom:12px; } .grad-badge { color:var(--accent-ink); background:var(--accent); font-weight:700; font-size:12.5px; padding:3px 11px; border-radius:20px; } .cp-bar { height:12px; background:var(--panel-2); border:1px solid var(--border); border-radius:20px; overflow:hidden; } .cp-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:var(--glow); transition:width .6s ease; } .cp-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px; } .cp-stats b { display:block; font-size:20px; } .cp-stats span { font-size:12.5px; color:var(--muted); } .trade-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:22px; } .trade-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:24px; } .trade-card h3 { font-size:18px; margin-bottom:16px; } .trade-field span { display:block; font-size:12.5px; color:var(--muted); margin-bottom:7px; } .tf-input { display:flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:12px 14px; } .tf-input:focus-within { border-color:var(--accent); } .tf-input input { flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--text); font-size:20px; font-weight:600; } .tf-unit { font-size:14px; font-weight:700; color:var(--muted); } .sell-bal { font-size:12.5px; color:var(--muted); margin-bottom:10px; } .sell-bal b { color:var(--text); } .sell-bal:has(#buyMax) { display:flex; align-items:center; gap:6px; } /* only the buy-card balance line */ #buyMax { margin-left:auto; background:var(--panel-2); border:1px solid var(--border); color:var(--muted); border-radius:7px; padding:3px 11px; font-size:11.5px; cursor:pointer; transition:border-color .15s, color .15s; } #buyMax:hover { border-color:var(--accent); color:var(--text); } .pct-row { display:flex; gap:8px; margin-bottom:14px; } .pct-row .pct { flex:1; background:var(--panel-2); border:1px solid var(--border); color:var(--muted); border-radius:9px; padding:7px 0; font-size:13px; font-weight:600; cursor:pointer; transition:border-color .15s, color .15s; } .pct-row .pct:hover { border-color:var(--accent); color:var(--text); } .trade-quote { font-size:14px; color:var(--muted); margin:14px 0 16px; } .trade-quote b { color:var(--text); font-size:16px; } .trade-btn { width:100%; justify-content:center; } .trade-warn { font-size:12px; color:var(--muted); margin-top:12px; } .curve-position { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .pos-tile { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:20px; } .pos-k { display:block; font-size:12.5px; color:var(--muted); margin-bottom:7px; } .pos-v { display:block; font-size:20px; font-weight:800; } .pos-v.accent { color:var(--accent); } .pos-v.mono { font-family:ui-monospace,Menlo,monospace; font-size:15px; } @media (max-width:640px) { .trade-grid, .cp-stats, .curve-position { grid-template-columns:1fr; } } /* ══════════════════════════════ LAUNCHPAD ══════════════════════════════ */ /* lift all launchpad content above the fixed bg-grid/bg-orb (z-index:0), like every other page */ .lp-hero, .lp-stats, .lp-wrap, .launch-wrap { position:relative; z-index:1; } .lp-hero { text-align:center; max-width:760px; margin:26px auto 8px; padding:24px 24px 0; } .lp-hero h1 { font-size:clamp(34px,5.5vw,60px); line-height:1.05; } .lp-hero .lede { color:var(--muted); font-size:18px; margin:16px auto 22px; max-width:600px; } .lp-hero-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } .lp-stats { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; max-width:var(--maxw); margin:22px auto 6px; padding:0 24px; } .lp-stat { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:14px 22px; min-width:150px; text-align:center; } .lp-stat b { display:block; font-size:24px; color:var(--accent); font-variant-numeric:tabular-nums; } .lp-stat span { font-size:12.5px; color:var(--muted); } .lp-wrap { max-width:var(--maxw); margin:0 auto; padding:24px 24px 60px; } .lp-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:22px; } .lp-filters { display:flex; gap:8px; flex-wrap:wrap; } .lp-filters button { font:inherit; font-size:13.5px; color:var(--muted); background:var(--panel); border:1px solid var(--border); border-radius:20px; padding:7px 15px; cursor:pointer; transition:.15s; } .lp-filters button:hover { color:var(--text); } .lp-filters button.on { color:var(--accent-ink); background:var(--accent); border-color:transparent; font-weight:700; } .lp-search { flex:1; min-width:180px; max-width:280px; } .lp-search input { width:100%; font:inherit; font-size:14px; color:var(--text); background:var(--panel-2); border:1px solid var(--border); border-radius:20px; padding:8px 16px; } .lp-search input::placeholder { color:var(--muted); } .coin-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px; } .lpc { position:relative; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .18s, border-color .18s, box-shadow .18s; } .lpc::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .2s; background:radial-gradient(120% 80% at 50% 0%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 60%); } .lpc:hover { transform:translateY(-4px); border-color:var(--accent); box-shadow:0 12px 40px rgba(0,0,0,.35); } .lpc:hover::before { opacity:1; } .lpc.hot { border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); box-shadow:var(--glow); } .lpc.hot::before { opacity:.6; } .lpc.grad { border-color:color-mix(in srgb,var(--accent-2) 45%,var(--border)); } .lpc.grad::before { background:radial-gradient(120% 80% at 50% 0%, color-mix(in srgb,var(--accent-2) 14%,transparent), transparent 60%); opacity:.7; } .lpc-main { display:block; padding:18px; text-decoration:none; color:var(--text); position:relative; } .lpc-baskets { display:block; text-align:center; padding:10px; font-size:13px; font-weight:600; color:var(--muted); border-top:1px solid var(--border); text-decoration:none; transition:color .15s, background .15s; position:relative; } .lpc-baskets:hover { color:var(--accent); background:var(--panel-2); } .coin-top { display:flex; align-items:center; gap:12px; margin-bottom:14px; } .coin-av { width:48px; height:48px; flex:none; display:grid; place-items:center; font-size:24px; border-radius:14px; background:var(--panel-2); border:1px solid var(--border); box-shadow:0 4px 14px rgba(0,0,0,.18); } .coin-id { display:flex; flex-direction:column; min-width:0; } .coin-id b { font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .coin-id span { font-size:12.5px; color:var(--muted); } .coin-tax { margin-left:auto; flex:none; font-size:11.5px; font-weight:700; color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); border-radius:20px; padding:4px 10px; } .coin-feat { margin-left:auto; flex:none; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent); border-radius:20px; padding:4px 9px; } .coin-track { height:9px; background:var(--panel-2); border:1px solid var(--border); border-radius:20px; overflow:hidden; } .coin-fill { height:100%; width:var(--p,0%); background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:var(--glow); border-radius:20px; transition:width .6s ease; } .coin-sub { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--muted); margin:9px 0 13px; font-variant-numeric:tabular-nums; } .coin-sub b { color:var(--text); font-weight:700; } .coin-pct { font-weight:800; color:var(--accent); font-size:13px; } .coin-grad-row { display:flex; align-items:center; gap:8px; margin:4px 0 12px; font-size:13px; color:var(--accent-2); font-weight:700; } .coin-spark { flex:1; height:26px; border-radius:8px; background: linear-gradient(90deg, color-mix(in srgb,var(--accent) 22%,transparent), color-mix(in srgb,var(--accent-2) 22%,transparent)); } .coin-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted); border-top:1px solid var(--border); padding-top:12px; } .coin-vibe { font-weight:600; color:var(--muted); white-space:nowrap; } /* the launchpad's whole point: every trade here feeds FLOW baskets — make it the hero stat */ .coin-flow { color:var(--accent-2); font-weight:600; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; background:color-mix(in srgb,var(--accent-2) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent-2) 28%,var(--border)); border-radius:20px; padding:4px 10px; } .coin-flow b { color:var(--accent-2); font-weight:800; } .coin-age { font-variant-numeric:tabular-nums; } .lp-empty { text-align:center; color:var(--muted); padding:50px 20px; } /* create / launch form */ .launch-wrap { max-width:620px; margin:0 auto; padding:8px 24px 60px; } .lf-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:26px; } .lf-row { margin-bottom:20px; } .lf-row label { display:block; font-size:13px; font-weight:600; margin-bottom:7px; } .lf-row label .hint { color:var(--muted); font-weight:400; } .lf-row input[type=text], .lf-row textarea { width:100%; font:inherit; font-size:16px; color:var(--text); background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:12px 14px; } .lf-row textarea { resize:vertical; min-height:52px; line-height:1.45; } .lf-row input[type=text]:focus, .lf-row textarea:focus { outline:none; border-color:var(--accent); } .lf-emoji-row { display:flex; gap:8px; flex-wrap:wrap; } .lf-emoji-row button { font-size:20px; width:44px; height:44px; border-radius:12px; cursor:pointer; background:var(--panel-2); border:1px solid var(--border); transition:.15s; } .lf-emoji-row button.on { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); } .lf-slider { display:flex; align-items:center; gap:14px; } .lf-slider input[type=range] { flex:1; accent-color:var(--accent); height:6px; } .lf-tax-val { font-size:28px; font-weight:800; color:var(--accent); min-width:74px; text-align:right; font-variant-numeric:tabular-nums; } .lf-preview { background:var(--panel-2); border:1px solid var(--border); border-radius:14px; padding:16px 18px; margin:6px 0 20px; font-size:14px; color:var(--muted); } .lf-preview .split { display:flex; height:34px; border-radius:9px; overflow:hidden; border:1px solid var(--border); margin:12px 0 10px; } .lf-preview .split i { display:grid; place-items:center; font-size:11.5px; font-weight:700; color:var(--accent-ink); font-style:normal; } .lf-preview .s-own { background:var(--accent-2); } .lf-preview .s-flow { background:color-mix(in srgb,var(--accent) 45%,#000); color:#fff; min-width:44px; } .lf-preview b { color:var(--text); } /* creator earnings calculator (launch form + homepage band) */ .lf-calc .calc-body, .earn-calc { background:var(--panel-2); border:1px solid var(--border); border-radius:14px; padding:16px 18px; display:grid; gap:14px; } .earn-calc.lb-calc { max-width:460px; margin:4px auto 20px; text-align:left; } .calc-h { font-size:13.5px; font-weight:700; color:var(--text); } .calc-h span { display:block; font-weight:400; font-size:12px; color:var(--muted); margin-top:2px; } .calc-input { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; font-size:13px; color:var(--muted); } .calc-input input[type=range] { width:100%; accent-color:var(--accent); } .calc-input b { color:var(--text); font-size:14px; min-width:56px; text-align:right; font-variant-numeric:tabular-nums; } .calc-churn { display:flex; align-items:center; gap:12px; font-size:13px; color:var(--muted); } .calc-churn-opts { display:flex; gap:6px; } .calc-churn-opts button { background:var(--panel); border:1px solid var(--border); color:var(--muted); border-radius:8px; padding:6px 13px; font-size:12.5px; cursor:pointer; transition:.15s; } .calc-churn-opts button.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700; } .calc-out { display:flex; gap:28px; align-items:baseline; border-top:1px solid var(--border); padding-top:14px; } .calc-out div { display:flex; flex-direction:column; gap:2px; } .calc-out b { font-size:27px; font-weight:800; color:var(--accent); line-height:1.05; font-variant-numeric:tabular-nums; } .calc-out span { font-size:12px; color:var(--muted); } .calc-note { font-size:12px; color:var(--muted); margin:0; } /* holder earnings calculator (trade page) */ .holder-calc { margin:18px 0; } .holder-calc .hc-mode { justify-content:space-between; } .earn-calc .calc-input input[type=text] { width:100%; background:var(--panel); border:1px solid var(--border); border-radius:9px; padding:9px 12px; color:var(--text); font-size:15px; font-variant-numeric:tabular-nums; } .earn-calc .calc-input input[type=text]:focus { outline:none; border-color:var(--accent); } .hc-mcap { font-size:12.5px; color:var(--muted); margin:-6px 0 0; } .hc-mcap b { color:var(--text); font-variant-numeric:tabular-nums; } /* FLOW flywheel simulator (home page) */ .flywheel-band .section-head { margin-bottom:22px; } .fw-sim { max-width:520px; margin:0 auto; text-align:left; } .fw-sim .calc-churn, .fw-sim .fw-stake { justify-content:space-between; flex-wrap:wrap; gap:10px; } .fw-eco { border-top:1px solid var(--border); padding-top:14px; font-size:13.5px; color:var(--muted); } .fw-eco b { color:var(--text); font-variant-numeric:tabular-nums; } .fw-eco span { display:block; margin-top:3px; font-size:12px; } .fw-out { border-top:0; padding-top:2px; } .fw-hint { font-size:12px; color:var(--muted); margin:-8px 0 0; } .fw-hint b { color:var(--text); font-variant-numeric:tabular-nums; } /* small info tooltip (ⓘ) — works on hover (desktop) and tap/focus (mobile) */ .info { position:relative; margin-left:4px; color:var(--muted); font-style:normal; font-size:12.5px; cursor:help; } .info:hover, .info:focus { color:var(--accent); outline:none; } .info::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%); width:250px; max-width:72vw; background:var(--bg-soft); color:var(--text); border:1px solid var(--border); border-radius:11px; padding:11px 13px; font-size:12px; font-weight:400; line-height:1.5; text-align:left; box-shadow:0 10px 30px rgba(0,0,0,.6); opacity:0; visibility:hidden; transition:opacity .15s; z-index:30; pointer-events:none; } .info::before { content:''; position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%) rotate(45deg); width:10px; height:10px; background:var(--bg-soft); border-right:1px solid var(--border); border-bottom:1px solid var(--border); opacity:0; visibility:hidden; transition:opacity .15s; z-index:31; } .info:hover::after, .info:focus::after, .info:hover::before, .info:focus::before { opacity:1; visibility:visible; } .lf-guard { background:color-mix(in srgb,var(--accent) 10%,var(--panel-2)); border:1px solid color-mix(in srgb,var(--accent) 40%,var(--border)); border-radius:14px; padding:14px 16px 12px; margin:0 0 18px; } .lf-guard-h { display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; color:var(--text); margin-bottom:8px; } .lf-guard-h span { font-size:16px; } .lf-guard ul { list-style:none; display:grid; gap:8px; font-size:13px; color:var(--muted); line-height:1.5; } .lf-guard li { padding-left:20px; position:relative; } .lf-guard li::before { content:"→"; position:absolute; left:2px; color:var(--accent); font-weight:800; } .lf-facts { list-style:none; display:grid; gap:8px; margin:2px 0 22px; font-size:13.5px; color:var(--muted); } .lf-facts li { padding-left:24px; position:relative; } .lf-facts li::before { content:"✓"; position:absolute; left:2px; color:var(--accent); font-weight:800; } .lf-note { font-size:12.5px; color:var(--muted); text-align:center; margin-top:14px; } .lf-status { font-size:13.5px; border-radius:10px; padding:10px 14px; margin-top:14px; display:none; } .lf-status.show { display:block; } .lf-status.ok { color:var(--accent-2); background:color-mix(in srgb,var(--accent) 10%,transparent); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); } .lf-status.warn { color:#ffcf8b; background:rgba(255,160,60,.08); border:1px solid rgba(255,160,60,.3); } .lf-status.err { color:#ff8b6b; background:rgba(255,80,60,.08); border:1px solid rgba(255,80,60,.3); } @media (max-width:640px) { .coin-grid { grid-template-columns:1fr; } } /* ══════════════════════ THE FLOW FLYWHEEL (animated flow diagram) ══════════════════════ */ .flywheel { position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:40px 24px 90px; } .fw-stage { position:relative; max-width:900px; margin:0 auto; } .fw-svg { width:100%; height:auto; display:block; overflow:visible; } /* connector lines: a steady faint rail + a flowing dashed overlay */ .fw-rail { fill:none; stroke:var(--border); stroke-width:2; } .fw-flow { fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:7 12; opacity:.85; animation:fwDash 1.1s linear infinite; } .fw-flow.out { stroke:var(--accent-2); animation-direction:reverse; } @keyframes fwDash { to { stroke-dashoffset:-19; } } /* travelling particles */ .fw-dot { fill:var(--accent-2); filter:drop-shadow(0 0 5px var(--accent)); } /* nodes */ .fw-node rect, .fw-node circle { transition:.2s; } .fw-src rect { fill:var(--panel); stroke:var(--border); stroke-width:1.5; } .fw-lab { fill:var(--text); font-size:14px; font-weight:600; } .fw-lab.sm { fill:var(--muted); font-size:11.5px; font-weight:500; } .fw-pct { fill:var(--accent); font-size:15px; font-weight:800; } /* central basket */ .fw-core-glow { fill:var(--accent); opacity:.18; animation:fwPulse 3s ease-in-out infinite; } @keyframes fwPulse { 0%,100%{ opacity:.12; } 50%{ opacity:.28; } } .fw-core { fill:var(--bg-soft); stroke:var(--accent); stroke-width:2.5; } .fw-core-emoji { font-size:38px; } .fw-core-t { fill:var(--text); font-size:14px; font-weight:800; letter-spacing:.04em; } .fw-core-s { fill:var(--accent-2); font-size:12px; font-weight:600; } .fw-out rect { fill:var(--panel); stroke:color-mix(in srgb,var(--accent-2) 45%,var(--border)); stroke-width:1.5; } .fw-caption { text-align:center; color:var(--muted); font-size:15px; max-width:560px; margin:26px auto 0; } .fw-caption b { color:var(--text); } @media (max-width:600px){ .fw-lab{ font-size:12px; } .fw-lab.sm{ font-size:10px; } .fw-core-emoji{ font-size:30px; } } /* ── coin image upload + avatars (replaces emoji) ── */ .lf-upload { display:flex; align-items:center; gap:16px; } .lf-drop { width:88px; height:88px; flex:none; border-radius:16px; border:1.5px dashed var(--border); background:var(--panel-2); display:grid; place-items:center; cursor:pointer; overflow:hidden; transition:border-color .18s, background .18s; position:relative; } .lf-drop:hover, .lf-drop.drag { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--panel-2)); } .lf-drop img { width:100%; height:100%; object-fit:cover; } .lf-drop .ph { font-size:24px; color:var(--muted); } .lf-drop-t { font-size:13px; color:var(--muted); } .lf-drop-t b { color:var(--text); display:block; font-size:13.5px; margin-bottom:2px; } .lf-drop-t .err { color:#ff8b6b; } /* card avatars: image or monogram (never emoji) */ .coin-av { overflow:hidden; } .coin-av img { width:100%; height:100%; object-fit:cover; border-radius:12px; } .av-mono { background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent-2) 70%,#000)); color:var(--accent-ink); font-weight:800; font-size:18px; letter-spacing:-.02em; } /* ── flywheel: the 3-way choice as outflow ── */ .fw-flow.hold { stroke:var(--accent); } .fw-flow.redeem { stroke:var(--accent-2); } .fw-flow.sell { stroke:#ff9d6b; opacity:.85; } .fw-dot.redeem { fill:var(--accent-2); } .fw-dot.sell { fill:#ff9d6b; filter:drop-shadow(0 0 5px #ff9d6b); } .fw-choice rect { fill:var(--panel); stroke-width:1.5; } .fw-choice.hold rect { stroke:color-mix(in srgb,var(--accent) 55%,var(--border)); } .fw-choice.redeem rect { stroke:color-mix(in srgb,var(--accent-2) 55%,var(--border)); } .fw-choice.sell rect { stroke:color-mix(in srgb,#ff9d6b 55%,var(--border)); } .fw-ct { font-size:15px; font-weight:800; letter-spacing:.04em; } .fw-ct.hold { fill:var(--accent); } .fw-ct.redeem { fill:var(--accent-2); } .fw-ct.sell { fill:#ff9d6b; } .fw-core-mark { fill:var(--accent); font-weight:900; } /* ── "your choice" cards ── */ .choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:var(--maxw); margin:30px auto 0; } .choice { background:var(--panel); border:1px solid var(--border); border-top:3px solid var(--accent); border-radius:var(--radius); padding:22px 22px 20px; } .choice.redeem { border-top-color:var(--accent-2); } .choice.sell { border-top-color:#ff9d6b; } .choice h3 { font-size:19px; display:flex; align-items:baseline; gap:10px; } .choice h3 .k { font-size:12px; font-weight:700; color:var(--muted); } .choice p { color:var(--muted); font-size:15px; margin:11px 0 15px; } .choice p b { color:var(--text); } .choice .fx { display:inline-block; font-size:12.5px; font-weight:700; border-radius:20px; padding:5px 12px; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); } .choice.redeem .fx { color:var(--accent-2); background:color-mix(in srgb,var(--accent-2) 12%,transparent); border-color:color-mix(in srgb,var(--accent-2) 30%,var(--border)); } .choice.sell .fx { color:#ff9d6b; background:rgba(255,157,107,.1); border-color:rgba(255,157,107,.35); } @media (max-width:760px){ .choice-grid { grid-template-columns:1fr; } } /* ── claim / redeem panel (curve page) ── */ .curve-redeem { position:relative; z-index:1; max-width:860px; margin:16px auto 0; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; } .cr-top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; } .cr-top b { font-size:16px; } .cr-top .muted { font-size:12.5px; } .cr-row { display:flex; gap:10px; flex-wrap:wrap; } .cr-row input { flex:1; min-width:160px; font:inherit; font-size:16px; color:var(--text); background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:12px 14px; } .cr-row input:focus { outline:none; border-color:var(--accent); } /* price chart + trades feed (trade page) */ .tk-chart { background:var(--panel-2); border:1px solid var(--border); border-radius:16px; padding:16px 18px; margin:0 0 18px; } .tc-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; } .tc-price-wrap { display:flex; align-items:baseline; gap:8px; } .tc-price { font-size:22px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; } .tc-unit { font-size:12px; color:var(--muted); } .tc-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .tc-tf, .tc-toggle { display:flex; gap:3px; } .tc-tf button, .tc-toggle button { background:var(--panel); border:1px solid var(--border); color:var(--muted); border-radius:7px; padding:4px 10px; font-size:12px; cursor:pointer; transition:.15s; } .tc-tf button.on, .tc-toggle button.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700; } .tc-plot { position:relative; width:100%; height:240px; } .tc-svg { display:block; width:100%; height:240px; } .tc-svg .tcg { stroke:var(--border); stroke-width:1; } .tc-svg .tcl { fill:var(--muted); font-size:10px; font-family:inherit; } .tc-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; font-size:12.5px; color:var(--muted); padding:0 16px; } .tk-trades { background:var(--panel-2); border:1px solid var(--border); border-radius:16px; padding:14px 16px; margin:0 0 18px; } .tt-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; } .tt-head b { font-size:14px; } .tt-head .muted { font-size:12px; } .tt-list { display:flex; flex-direction:column; max-height:280px; overflow-y:auto; } .tt-empty { font-size:12.5px; color:var(--muted); padding:10px 2px; } .tt-row { display:grid; grid-template-columns:auto auto auto minmax(0,1fr) auto auto; align-items:center; gap:9px; padding:7px 2px; border-bottom:1px solid var(--border); font-size:12.5px; font-variant-numeric:tabular-nums; } .tt-row:last-child { border-bottom:0; } .tt-side { font-weight:700; font-size:12px; padding:2px 8px; border-radius:6px; } .tt-row.buy .tt-side { color:#26a69a; background:color-mix(in srgb,#26a69a 15%,transparent); } .tt-row.sell .tt-side { color:#ef5350; background:color-mix(in srgb,#ef5350 15%,transparent); } .tt-eth { color:var(--text); font-weight:600; } .tt-tok { color:var(--muted); } .tt-w { color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; text-decoration:none; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } a.tt-w:hover { color:var(--accent); } .tt-me { color:var(--accent); font-weight:800; font-family:inherit; letter-spacing:.02em; } .tt-row.mine { background:color-mix(in srgb,var(--accent) 9%,transparent); border-radius:7px; box-shadow:inset 2px 0 0 var(--accent); } .tt-age { color:var(--muted); font-size:12px; min-width:30px; text-align:right; } .tt-tx { color:var(--muted); text-decoration:none; padding:0 2px; } .tt-tx:hover { color:var(--accent); } @media (max-width:520px) { .tt-tok { display:none; } .tt-row { grid-template-columns:auto auto minmax(0,1fr) auto auto; } } .cr-warn { font-size:12.5px; line-height:1.5; color:var(--text); margin-top:12px; padding:10px 12px; background:color-mix(in srgb, #ff8b6b 9%, var(--panel-2)); border:1px solid color-mix(in srgb, #ff8b6b 32%, var(--border)); border-radius:11px; } .cr-warn b { color:var(--text); } .cr-note { font-size:12.5px; color:var(--muted); margin-top:10px; } .cr-note.ok { color:var(--accent-2); } .cr-note.err { color:#ff8b6b; } @media (max-width:600px){ .cr-row .btn, .cr-row .pct { flex:1; } } .lp-demo-note { font-size:13px; color:var(--muted); background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:10px 14px; margin-bottom:16px; } .lp-demo-note b { color:var(--accent-2); } .lp-demo-note.lp-live { color:var(--accent-2); border-color:color-mix(in srgb,var(--accent) 35%,var(--border)); } .lp-demo-note.lp-error { color:#ff9d6b; border-color:rgba(255,157,107,.4); } .lp-demo-note code { font-family:ui-monospace,Menlo,monospace; font-size:12px; background:var(--panel-2); padding:1px 6px; border-radius:6px; } /* ══════════════════════════════ PORTFOLIO ══════════════════════════════ */ .pf-wrap { position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:26px 24px 70px; } .pf-hero { text-align:center; max-width:720px; margin:20px auto 6px; } .pf-hero .eyebrow { display:block; margin-bottom:10px; } .pf-hero h1 { font-size:clamp(30px,5vw,52px); } .pf-hero p { color:var(--muted); font-size:17px; margin:14px auto 0; max-width:520px; } /* address bar */ .pf-addr { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; max-width:640px; margin:24px auto 0; } .pf-addr input { flex:1; min-width:220px; font:inherit; font-size:15px; color:var(--text); background:var(--panel-2); border:1px solid var(--border); border-radius:13px; padding:13px 16px; } .pf-addr input:focus { outline:none; border-color:var(--accent); } /* the big total */ .pf-total { position:relative; max-width:560px; margin:34px auto 0; text-align:center; background:radial-gradient(120% 140% at 50% 0%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 70%); border:1px solid var(--border); border-radius:24px; padding:34px 24px; overflow:hidden; } .pf-total::before { content:""; position:absolute; inset:-40% 30% auto 30%; height:200px; border-radius:50%; background:radial-gradient(circle,var(--accent),transparent 70%); opacity:.18; filter:blur(50px); animation:fwPulse 4s ease-in-out infinite; } .pf-total .lbl { position:relative; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .pf-total .big { position:relative; font-size:clamp(44px,9vw,76px); font-weight:800; line-height:1.05; letter-spacing:-.03em; background:linear-gradient(120deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums; margin:6px 0 4px; } .pf-total .big .u { font-size:.42em; -webkit-text-fill-color:var(--muted); color:var(--muted); font-weight:700; margin-left:8px; letter-spacing:0; } .pf-chips { position:relative; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px; } .pf-chip { font-size:13px; color:var(--muted); background:var(--panel); border:1px solid var(--border); border-radius:20px; padding:6px 14px; } .pf-chip b { color:var(--text); } /* positions */ .pf-sec-head { display:flex; align-items:baseline; justify-content:space-between; max-width:var(--maxw); margin:40px auto 16px; } .pf-sec-head h2 { font-size:22px; } .pf-sec-head span { font-size:13px; color:var(--muted); } .pf-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; } .pf-pos { display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .18s, border-color .18s, box-shadow .18s; } .pf-pos:hover { transform:translateY(-4px); border-color:var(--accent); box-shadow:0 14px 44px rgba(0,0,0,.4); } .pf-pos-top { display:flex; align-items:center; gap:12px; padding:18px 18px 0; } .pf-pos-id { min-width:0; } .pf-pos-id b { display:block; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pf-pos-id span { font-size:12.5px; color:var(--muted); } .pf-pos-badge { margin-left:auto; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:20px; } .pf-pos-badge.live { color:var(--accent-ink); background:var(--accent-2); } .pf-pos-badge.curve { color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); } .pf-basket { margin:16px 18px 4px; padding:14px 16px; border-radius:14px; background:var(--panel-2); border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border)); } .pf-basket .k { font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .pf-basket .v { font-size:26px; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1.15; } .pf-basket .v small { font-size:14px; color:var(--muted); font-weight:600; margin-left:5px; } .pf-pos-meta { display:flex; justify-content:space-between; padding:10px 18px 0; font-size:13px; color:var(--muted); } .pf-pos-meta b { color:var(--text); font-weight:600; } .pf-pos-actions { display:flex; gap:8px; padding:16px 18px 18px; margin-top:auto; } .pf-pos-actions a { flex:1; text-align:center; font-size:14px; font-weight:650; padding:11px; border-radius:11px; text-decoration:none; transition:.15s; } .pf-act-trade { color:var(--text); background:var(--panel-2); border:1px solid var(--border); } .pf-act-trade:hover { border-color:var(--accent); } .pf-act-claim { color:var(--accent-ink); background:var(--accent); box-shadow:var(--glow); } .pf-act-claim:hover { filter:brightness(1.05); } .pf-empty, .pf-loading { text-align:center; color:var(--muted); padding:60px 20px; font-size:16px; } .pf-empty .btn { margin-top:18px; } .pf-skel { height:190px; border-radius:var(--radius); background:linear-gradient(100deg,var(--panel) 30%,var(--panel-2) 50%,var(--panel) 70%); background-size:200% 100%; animation:pfShimmer 1.3s linear infinite; border:1px solid var(--border); } @keyframes pfShimmer { to { background-position:-200% 0; } } /* portfolio total: USD + holdings/baskets breakdown */ .pf-usd-big { position:relative; font-size:18px; font-weight:700; color:var(--muted); margin-top:2px; } .pf-break { position:relative; display:flex; gap:10px; justify-content:center; align-items:center; margin-top:12px; font-size:13.5px; color:var(--muted); } .pf-break b { color:var(--text); font-weight:700; } .pf-break-sep { opacity:.5; } .pf-est-note { position:relative; font-size:12px; color:var(--muted); margin-top:14px; opacity:.85; } /* holdings card: amount + value + PnL */ .pf-holding { padding:16px 18px 4px; } .pf-amt { font-size:22px; font-weight:800; letter-spacing:-.01em; } .pf-amt span { font-size:14px; color:var(--muted); font-weight:700; margin-left:3px; } .pf-val { font-size:15px; margin-top:4px; } .pf-val b { font-weight:700; } .pf-usd { color:var(--muted); margin-left:6px; font-size:13.5px; } .pf-muted { color:var(--muted); } .pf-pnl { display:inline-block; margin-top:8px; font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums; } .pf-pnl.up { color:var(--accent-2); } .pf-pnl.down { color:#ff8b6b; } .pf-pnl.none { color:var(--muted); font-weight:600; } .pf-basket-row { display:flex; align-items:center; justify-content:space-between; margin:14px 18px 0; padding:12px 15px; border-radius:12px; background:color-mix(in srgb,var(--accent) 9%,var(--panel-2)); border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border)); font-size:13.5px; } .pf-basket-row span { color:var(--muted); } .pf-basket-row b { color:var(--accent); font-weight:800; font-variant-numeric:tabular-nums; } /* baskets page — overview mode */ .ov-section { position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:10px 24px 40px; } .ov-section .pf-grid { margin-top:26px; } .dash-back { display:block; max-width:var(--maxw); margin:2px auto 0; padding:0 4px; color:var(--muted); text-decoration:none; font-size:14px; font-weight:600; transition:color .15s; } .dash-back:hover { color:var(--accent); } .ov-card { text-decoration:none; } .ov-open { padding:12px 18px 18px; margin-top:auto; color:var(--accent); font-weight:700; font-size:14px; } .ov-card:hover .ov-open { text-decoration:underline; } @media (max-width:600px){ .pf-grid { grid-template-columns:1fr; } } /* ══════════════════ TRADE PAGE — warmer, investor-friendly ══════════════════ */ .tk-head { display:flex; align-items:center; gap:16px; max-width:860px; margin:6px auto 0; padding:22px 22px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); } .tk-av { width:56px; height:56px; flex:none; display:grid; place-items:center; border-radius:15px; font-size:22px; background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent-2) 70%,#000)); color:var(--accent-ink); font-weight:800; overflow:hidden; } .tk-av img { width:100%; height:100%; object-fit:cover; } .tk-id { min-width:0; flex:1; } .tk-id h1 { font-size:26px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .tk-id h1 .grad { font-size:inherit; } .tk-tax { font-size:12px; font-weight:700; color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); border-radius:20px; padding:3px 11px; letter-spacing:0; } .tk-tag { color:var(--muted); font-size:14.5px; margin-top:4px; } .tk-status { flex:none; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; border-radius:20px; padding:6px 12px; align-self:flex-start; } .tk-status.curve { color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); } .tk-status.live { color:var(--accent-ink); background:var(--accent-2); } .tk-progress { max-width:860px; margin:14px auto 0; padding:20px 22px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); } .tkp-top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; font-size:14.5px; color:var(--muted); } .tkp-top b { color:var(--text); font-weight:700; } .tkp-pct { font-size:22px; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; } .tk-progress .cp-bar { height:14px; } .tkp-note { font-size:13.5px; color:var(--muted); margin-top:12px; } .tkp-note b { color:var(--text); } .tkp-note #gradBadge { color:var(--accent-2); font-weight:700; } .tk-basket { display:grid; grid-template-columns:1.3fr 1fr; gap:16px; max-width:860px; margin:16px auto 0; } .tkb-main { position:relative; overflow:hidden; padding:22px 24px; border-radius:var(--radius); background:radial-gradient(120% 130% at 0% 0%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 65%); border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border)); } .tkb-k { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; gap:8px; } /* live "earning" pulse next to the basket label */ .tkb-live { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; letter-spacing:.06em; color:var(--accent-2); background:color-mix(in srgb,var(--accent-2) 14%,transparent); border-radius:20px; padding:2px 8px; } .tkb-live i { width:6px; height:6px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 0 0 var(--accent-2); animation:tkbPulse 1.8s ease-out infinite; } @keyframes tkbPulse { 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--accent-2) 70%,transparent); } 70%{ box-shadow:0 0 0 7px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } } /* the "+X ETH" that floats up whenever your basket ticks up */ .tkb-v { position:relative; } .tkb-flash { position:absolute; left:0; top:-6px; font-size:14px; font-weight:800; color:var(--accent-2); opacity:0; pointer-events:none; } .tkb-flash.show { animation:tkbFloat 1.6s ease-out; } @keyframes tkbFloat { 0%{ opacity:0; transform:translateY(6px); } 15%{ opacity:1; } 100%{ opacity:0; transform:translateY(-22px); } } .tkb-v { display:block; font-size:40px; font-weight:800; line-height:1.1; color:var(--accent); font-variant-numeric:tabular-nums; margin:2px 0; } .tkb-v b { font-weight:800; } .tkb-v .u { font-size:.45em; color:var(--muted); font-weight:700; margin-left:6px; } .tkb-session { display:inline-block; font-size:14px; font-weight:800; color:var(--accent-2); margin:2px 0 4px; font-variant-numeric:tabular-nums; } .tkb-sub { font-size:13px; color:var(--muted); } .tkb-side { display:flex; flex-direction:column; justify-content:center; gap:14px; padding:18px 20px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); } .tkb-side > div { display:flex; flex-direction:column; } .tkb-side span { font-size:12px; color:var(--muted); } .tkb-side b { font-size:17px; font-variant-numeric:tabular-nums; } .tkb-side .mono { font-family:ui-monospace,Menlo,monospace; font-size:14px; } .tk-details { max-width:860px; margin:16px auto 0; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; } .tk-details summary { cursor:pointer; padding:16px 20px; font-size:14.5px; font-weight:600; color:var(--muted); list-style:none; display:flex; align-items:center; gap:8px; } .tk-details summary::-webkit-details-marker { display:none; } .tk-details summary::before { content:"▸"; color:var(--accent); transition:transform .2s; } .tk-details[open] summary::before { transform:rotate(90deg); } .tk-details summary:hover { color:var(--text); } .tk-details .tkd-body { padding:0 20px 20px; } .tkd-body .curve-lede-note { font-size:13.5px; color:var(--muted); margin-bottom:14px; } @media (max-width:640px){ .tk-basket { grid-template-columns:1fr; } .tk-head { align-items:flex-start; gap:11px; padding:16px; } .tk-av { width:44px; height:44px; font-size:17px; border-radius:12px; } .tk-id h1 { font-size:20px; gap:7px; } .tk-tag { font-size:13px; margin-top:3px; } .tk-status { font-size:9.5px; padding:5px 9px; letter-spacing:.04em; } } /* ══════════════════════ TRANSPARENCY PAGE ══════════════════════ */ .tp-wrap { position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:26px 24px 70px; } .tp-total { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:24px 0 8px; } .tp-stat { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; display:flex; flex-direction:column; min-height:104px; } .tp-stat .lbl { display:flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); } .tp-stat .val { margin-top:auto; display:flex; align-items:baseline; gap:6px; } .tp-stat b { font-size:30px; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1.05; } .tp-stat .u { font-size:13px; color:var(--muted); font-weight:700; } .tp-contracts { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px; } .tp-contract { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:13px 16px; transition:border-color .15s; } .tp-contract:hover { border-color:color-mix(in srgb,var(--accent) 40%,var(--border)); } .tpc-id { min-width:0; } .tpc-id b { display:block; font-size:14px; } .tpc-id span, .tpc-id code, .tpc-id a { font-family:ui-monospace,Menlo,monospace; font-size:12.5px; color:var(--muted); } .tpc-id a { color:var(--accent-2); text-decoration:none; } .tpc-id a:hover { text-decoration:underline; } .tpc-copy { background:var(--panel-2); border:1px solid var(--border); color:var(--muted); border-radius:9px; width:34px; height:34px; cursor:pointer; flex:none; font-size:14px; transition:.15s; } .tpc-copy:hover { border-color:var(--accent); color:var(--accent); } .tp-table td { vertical-align:middle; } .tp-table td b { font-weight:700; } .tp-table a { color:var(--accent-2); text-decoration:none; font-family:ui-monospace,Menlo,monospace; font-size:12.5px; } .tp-pct { color:var(--accent-2); font-weight:800; font-size:12px; margin-left:4px; } .tp-basket { color:var(--accent); font-weight:800; font-variant-numeric:tabular-nums; } @media (max-width:900px){ .tp-total { grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .tp-total { grid-template-columns:1fr; } } /* ── per-token live stats strip (trade page) ── */ .tk-stats { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; } .tk-stat { flex:1; min-width:120px; background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:10px 14px; display:flex; flex-direction:column; gap:2px; } .tk-stat .tks-k { font-size:12px; color:var(--muted); } .tk-stat b { font-size:18px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; } .tk-stat .tks-pct { font-size:12px; color:var(--accent); font-weight:700; } .tk-stat .tks-u { font-size:11px; color:var(--muted); } /* ── social icon links (trade-page header + launchpad cards) ── */ .tk-socials, .lpc-socials { display:flex; flex-wrap:wrap; gap:8px; } .tk-socials { margin-top:10px; } /* contract-address chip + copy (trade page) */ .tk-ca { display:inline-flex; align-items:center; gap:7px; margin-top:9px; font-size:12px; flex-wrap:wrap; } .tk-ca-k { font-size:10px; font-weight:700; letter-spacing:.1em; color:var(--muted); background:var(--panel-2); border:1px solid var(--border); border-radius:6px; padding:2px 6px; } .tk-ca code { font-family:ui-monospace,Menlo,monospace; color:var(--muted); } .tk-ca-copy, .tk-ca-x { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:7px; border:1px solid var(--border); background:var(--panel-2); color:var(--muted); cursor:pointer; font-size:12px; text-decoration:none; transition:border-color .15s, color .15s; } .tk-ca-copy:hover, .tk-ca-x:hover { border-color:var(--accent); color:var(--accent); } /* buyback & burn card (trade page) */ .tk-buyback { position:relative; z-index:1; max-width:860px; margin:14px auto 0; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px 20px; } .tk-buyback .bb-info { display:flex; flex-direction:column; gap:3px; } .tk-buyback .bb-info b { font-size:15px; } .tk-buyback .bb-info .muted { font-size:13px; max-width:540px; } .tk-buyback #bbQueue { color:var(--accent); font-weight:800; } .tk-buyback .btn { flex:none; } .lpc-socials { margin:0 16px 12px; } .soc { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--panel-2); border:1px solid var(--border); font-size:14px; line-height:1; text-decoration:none; transition:transform .12s ease, border-color .12s ease, background .12s ease; } .soc:hover { transform:translateY(-2px); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,var(--panel-2)); } /* ── launch form: socials inputs ── */ .lf-socials { display:grid; gap:8px; } .lf-soc { display:flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:0 6px 0 12px; } .lf-soc > span { font-size:15px; width:20px; text-align:center; flex:none; } .lf-soc input { flex:1; background:none; border:none; padding:11px 6px; color:var(--text); font-size:14px; outline:none; } /* The hidden attribute must always win over component display rules (else hidden=true is ignored). */ [hidden] { display: none !important; } /* ── owner-only tools (remove caps / renounce) ── */ .owner-tools { display:flex; flex-direction:column; gap:10px; margin:0 0 18px; padding:14px 16px; border:1px solid var(--border); border-radius:14px; background:var(--panel-2); } .owner-tools .ot-label { font-weight:700; font-size:13px; color:var(--accent); } .owner-tools .ot-actions { display:flex; flex-direction:column; gap:12px; } .owner-tools .ot-action { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .owner-tools .ot-btn { flex:none; } .owner-tools .ot-btn:disabled { cursor:default; } .owner-tools .ot-btn.ot-done { color:var(--accent); border-color:var(--accent); background:transparent; opacity:.9; } .owner-tools .ot-note { font-size:12px; color:var(--text); opacity:.65; max-width:520px; } /* ─────────────────────── Community · Shill & earn ─────────────────────── */ .tk-community { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:20px 20px 22px; margin-top:22px; } .cm-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; } .cm-head > b { font-size:16px; } .cm-connect { font-size:13px; white-space:nowrap; } .cm-campaign { background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:14px; } .cm-camp-title { font-weight:700; font-size:15px; margin-bottom:4px; } .cm-camp-rules { color:var(--muted); font-size:13.5px; white-space:pre-wrap; } .cm-camp-pot { margin-top:8px; display:inline-block; font-size:12.5px; font-weight:700; color:var(--accent-ink); background:var(--accent); padding:3px 10px; border-radius:999px; } .cm-paid-banner { text-align:center; font-size:13.5px; font-weight:600; color:var(--accent-2); background:var(--panel-2); border:1px dashed var(--border); border-radius:10px; padding:9px; margin-bottom:14px; } .cm-submit { display:grid; grid-template-columns:1fr 200px auto; gap:8px; margin-bottom:16px; } .cm-submit input { background:var(--panel-2); border:1px solid var(--border); border-radius:10px; color:var(--text); padding:11px 13px; font-size:14px; font-family:inherit; } .cm-submit input:focus { outline:none; border-color:var(--accent); } @media (max-width:640px){ .cm-submit { grid-template-columns:1fr; } } .cm-cols { display:grid; grid-template-columns:1fr 260px; gap:18px; } @media (max-width:760px){ .cm-cols { grid-template-columns:1fr; } } .cm-sub-head { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; } .cm-empty { color:var(--muted); font-size:13.5px; padding:14px 0; } .cm-sub { display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--border); } .cm-sub.cm-paid { opacity:.95; } .cm-sub.cm-rej { opacity:.5; } .cm-vote { display:flex; flex-direction:column; align-items:center; gap:1px; min-width:42px; background:var(--panel-2); border:1px solid var(--border); border-radius:10px; color:var(--muted); font-size:12px; padding:6px 0; cursor:pointer; transition:.15s; } .cm-vote:hover { border-color:var(--accent); color:var(--text); } .cm-vote.voted { border-color:var(--accent); color:var(--accent); background:rgba(174,230,25,.08); } .cm-vote span { font-size:13px; font-weight:700; } .cm-sub-main { flex:1; min-width:0; } .cm-sub-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .cm-plat { font-size:12px; color:var(--muted); font-weight:600; } .cm-link { font-size:13.5px; color:var(--accent-2); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; } .cm-link:hover { text-decoration:underline; } .cm-note { font-size:13.5px; margin-top:4px; word-break:break-word; } .cm-by { font-size:11.5px; color:var(--muted); margin-top:4px; } .cm-badge { font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; white-space:nowrap; } .cm-badge a { color:inherit; } .cm-b-pend { color:var(--muted); background:var(--panel-2); border:1px solid var(--border); } .cm-b-appr { color:var(--accent-ink); background:var(--accent-2); } .cm-b-paid { color:#062; background:#8ef0b0; } .cm-b-rej { color:#a33; background:rgba(200,60,60,.15); } .cm-mod { display:flex; flex-direction:column; gap:6px; } .cm-mod-btn { font-size:12px; padding:6px 10px; border-radius:8px; border:1px solid var(--border); background:var(--panel-2); color:var(--text); cursor:pointer; white-space:nowrap; } .cm-mod-btn:hover { border-color:var(--accent); } .cm-mod-pay { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700; } .cm-mod-rej:hover { border-color:#c44; } .cm-lb-row { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--border); font-size:13px; } .cm-lb-rank { color:var(--muted); font-weight:700; min-width:28px; } .cm-lb-addr { flex:1; } .cm-lb-amt { color:var(--accent-2); font-weight:700; } .cm-owner { margin-top:20px; border-top:1px solid var(--border); padding-top:16px; } .cm-owner-head { font-size:13px; font-weight:700; margin-bottom:12px; } .cm-owner-grid { display:grid; grid-template-columns:1fr 240px; gap:18px; } @media (max-width:760px){ .cm-owner-grid { grid-template-columns:1fr; } } .cm-owner-camp label { display:block; font-size:12px; color:var(--muted); margin-bottom:10px; } .cm-owner-camp input, .cm-owner-camp textarea { display:block; width:100%; margin-top:5px; background:var(--panel-2); border:1px solid var(--border); border-radius:9px; color:var(--text); padding:9px 11px; font-size:13.5px; font-family:inherit; } .cm-owner-camp textarea { min-height:64px; resize:vertical; } .cm-owner-treasury { background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:14px; } .cm-tre-label { font-size:12px; color:var(--muted); } .cm-tre-amt { font-size:22px; font-weight:800; margin:2px 0 12px; } .cm-tre-note { font-size:11.5px; line-height:1.5; margin-top:10px; } .cm-toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:var(--bg-soft); border:1px solid var(--accent); color:var(--text); padding:12px 18px; border-radius:12px; font-size:14px; box-shadow:var(--glow); opacity:0; pointer-events:none; transition:.25s; z-index:200; max-width:90vw; } .cm-toast.show { opacity:1; transform:translateX(-50%) translateY(0); } /* owner-only legend explaining the moderation buttons */ .cm-mod-legend { display:flex; flex-direction:column; gap:5px; background:var(--panel-2); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:10px; padding:11px 13px; margin-bottom:14px; font-size:12.5px; line-height:1.45; color:var(--muted); } .cm-mod-legend .cm-leg-title { font-weight:700; color:var(--text); margin-bottom:2px; } .cm-mod-legend b { color:var(--text); font-weight:700; } .cm-mod-legend i { font-style:italic; } /* inline pay-amount field on each submission (owner view) */ .cm-pay-row { display:flex; align-items:center; gap:5px; } .cm-pay-amt { width:76px; background:var(--panel-2); border:1px solid var(--border); border-radius:8px; color:var(--text); padding:6px 8px; font-size:12.5px; font-family:inherit; text-align:right; } .cm-pay-amt:focus { outline:none; border-color:var(--accent); } .cm-pay-unit { font-size:11.5px; color:var(--muted); } .cm-field-hint { display:block; font-size:11px; color:var(--muted); margin-top:3px; font-weight:400; line-height:1.4; }