/* ============================================================ VIRTUALANDX — refined futuristic system Two palettes live here. Dark is the default and is unchanged; light is a full override applied via , which /theme.js stamps on before first paint. Every rule below reads tokens only — no literal colours outside these two blocks, or the light theme would leak dark patches. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); :root, [data-theme="dark"] { --bg: #0a0714; --bg-2: #120b1f; --panel: rgba(28, 18, 44, 0.72); --panel-2: rgba(21, 13, 34, 0.92); --line: rgba(180, 140, 230, 0.14); --line-2: rgba(180, 140, 230, 0.08); --accent: #a06bff; /* vivid violet */ --accent-2: #e04fd1; /* orchid magenta */ --accent-3: #f0a35e; /* amber for warnings */ --danger: #ff6b6b; --ok: #37d6a0; --text: #ede7f7; --muted: #9184ad; --muted-2: #6a5c83; --glow: 0 0 0 1px rgba(160,107,255,.25), 0 8px 30px rgba(160,107,255,.12); --f-head: 'Space Grotesk', sans-serif; --f-body: 'Inter', sans-serif; --f-mono: 'JetBrains Mono', monospace; /* surfaces that used to be hard-coded */ --on-accent: #0f0620; /* text on a filled accent button */ --accent-soft: rgba(160,107,255,.10); --input-bg: rgba(0,0,0,.30); --hover-bg: rgba(255,255,255,.03); --hover-bg-2: rgba(255,255,255,.05); --sunken: rgba(0,0,0,.25); --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 24px 60px rgba(0,0,0,.5); --scrollbar: rgba(180,140,230,.22); --overlay-bg: rgba(6,3,12,.66); --map-bg: #100a1e; --land-fill: #2a1f3d; --foot-fade: rgba(10,7,20,.85); --qr-bg: #fff; --glow-1: rgba(224,79,209,.10); --glow-2: rgba(160,107,255,.10); --intro-veil: rgba(18,11,31,.2); --available: rgba(237,231,247,.35); color-scheme: dark; } [data-theme="light"] { --bg: #f4eefb; --bg-2: #ece2f7; --panel: rgba(255, 255, 255, 0.82); --panel-2: rgba(255, 255, 255, 0.95); --line: rgba(80, 40, 110, 0.14); --line-2: rgba(80, 40, 110, 0.07); --accent: #7c3aed; /* violet, darkened for contrast on white */ --accent-2: #b0189e; --accent-3: #b56a15; --danger: #cf3f3f; --ok: #0f9268; --text: #200e33; --muted: #62537d; --muted-2: #8577a4; --glow: 0 0 0 1px rgba(124,58,237,.28), 0 8px 24px rgba(124,58,237,.14); --on-accent: #ffffff; --accent-soft: rgba(124,58,237,.10); --input-bg: rgba(255,255,255,.9); --hover-bg: rgba(32,14,51,.04); --hover-bg-2: rgba(32,14,51,.07); --sunken: rgba(32,14,51,.05); --shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 44px rgba(80,40,110,.13); --scrollbar: rgba(80,40,110,.22); --overlay-bg: rgba(238,228,247,.72); --map-bg: #e5daf1; --land-fill: #d8c5ec; --foot-fade: rgba(244,238,251,.9); --qr-bg: #fff; --glow-1: rgba(176,24,158,.10); --glow-2: rgba(124,58,237,.10); --intro-veil: rgba(255,255,255,.25); --available: rgba(32,14,51,.28); color-scheme: light; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--f-body); color: var(--text); background: radial-gradient(1100px 600px at 78% -12%, var(--glow-1), transparent 60%), radial-gradient(900px 520px at 8% 108%, var(--glow-2), transparent 55%), var(--bg); -webkit-font-smoothing: antialiased; letter-spacing: .1px; transition: background-color .25s ease, color .25s ease; } /* subtle static grid — quiet, not animated/gamey */ .grid-bg::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 50% 40%, black 40%, transparent 85%); pointer-events: none; z-index: 0; } a { color: var(--accent); text-decoration: none; } h1, h2, h3 { font-family: var(--f-head); font-weight: 600; } /* wordmark */ .brand { font-family: var(--f-head); font-weight: 700; letter-spacing: .5px; display: inline-flex; align-items: center; gap: 2px; } .brand .a { color: var(--text); } .brand .b { color: var(--accent); } .brand .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); margin-left: 6px; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(18px) saturate(120%); box-shadow: var(--shadow); } .eyebrow { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted-2); } .label { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); margin: 16px 0 7px; } input, select { width: 100%; padding: 12px 14px; background: var(--input-bg); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-family: var(--f-body); font-size: 14.5px; outline: none; transition: border-color .16s, box-shadow .16s; } input::placeholder { color: var(--muted-2); } input:focus, select:focus { border-color: var(--accent); box-shadow: var(--glow); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--hover-bg); color: var(--text); font-family: var(--f-head); font-weight: 600; letter-spacing: .3px; font-size: 13.5px; cursor: pointer; transition: transform .12s, box-shadow .16s, border-color .16s, background .16s; } .btn:hover { border-color: var(--accent); box-shadow: var(--glow); transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; } .btn.primary { border-color: transparent; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #000)); color: var(--on-accent); } .btn.primary:hover { box-shadow: 0 8px 26px var(--accent-soft); } .btn.indigo { border-color: transparent; background: linear-gradient(180deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 78%, #000)); color: #fff; } .btn.ghost { background: transparent; color: var(--muted); } .btn.ghost:hover { color: var(--text); } .btn.danger { border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); } .btn.sm { padding: 7px 12px; font-size: 12px; border-radius: 8px; } /* theme switch — same control on the map, the login card and the admin deck */ .theme-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--sunken); cursor: pointer; color: var(--muted); transition: border-color .16s, color .16s; } .theme-toggle:hover { border-color: var(--accent); color: var(--text); } .theme-toggle svg { width: 15px; height: 15px; display: block; } .theme-toggle .on { color: var(--accent); } .theme-toggle[data-wide] { padding: 7px 12px; width: 100%; justify-content: space-between; font-family: var(--f-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; } .msg { font-family: var(--f-mono); font-size: 12.5px; margin-top: 12px; min-height: 16px; color: var(--muted); } .msg.err { color: var(--danger); } .msg.ok { color: var(--ok); } .chip { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .6px; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); } .chip.accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .chip.indigo { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 35%, transparent); } .chip.warn { color: var(--accent-3); border-color: color-mix(in srgb, var(--accent-3) 35%, transparent); } .chip.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); } .chip.bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); } .mono { font-family: var(--f-mono); } /* app footer */ .site-foot { font-family: var(--f-mono); font-size: 11px; letter-spacing: .4px; color: var(--muted-2); } .site-foot b { color: var(--muted); font-weight: 500; } .site-foot .sep { opacity: .4; margin: 0 8px; } /* full site footer — brand blurb + link columns, shared across every page */ .site-footer { border-top: 1px solid var(--line); padding: 56px 20px 26px; position: relative; z-index: 1; } .sf-grid { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; } .sf-brand p { color: var(--muted); font-size: 13px; line-height: 1.7; max-width: 320px; margin: 14px 0 0; } .sf-col { display: flex; flex-direction: column; gap: 10px; } .sf-h { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted-2); margin-bottom: 4px; } .sf-col a { color: var(--muted); font-size: 13.5px; } .sf-col a:hover { color: var(--text); } .sf-bottom { max-width: 1080px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid var(--line-2); } @media (max-width: 700px) { .sf-grid { grid-template-columns: 1fr 1fr; } .sf-brand { grid-column: 1 / -1; } } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; } /* modal */ .overlay { position: fixed; inset: 0; z-index: 2000; display: none; background: var(--overlay-bg); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 20px; } .overlay.show { display: flex; } .modal { width: min(460px, 94vw); padding: 26px; position: relative; } .modal .x { position: absolute; top: 14px; right: 16px; color: var(--muted); cursor: pointer; font-size: 20px; } /* ============================================================ Top navigation — shared by the map HUD and the content pages ============================================================ */ .nav { display: flex; align-items: center; gap: 2px; } .nav a { font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); padding: 7px 10px; border-radius: 8px; white-space: nowrap; transition: color .15s, background .15s; } .nav a:hover { color: var(--text); background: var(--hover-bg); } .nav a.on { color: var(--accent); background: var(--accent-soft); } /* ============================================================ Live tape — recent claims and resales ============================================================ */ .ticker { display: flex; align-items: center; gap: 12px; overflow: hidden; padding: 7px 6px 7px 14px; } .ticker .tag { flex: none; display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); } .ticker .tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: cv-pulse 1.7s infinite; } @keyframes cv-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .2 } } .ticker .tape { flex: 1; overflow: hidden; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 34px), transparent); } .ticker .row { display: inline-flex; align-items: center; white-space: nowrap; animation: cv-marquee linear infinite; } .ticker:hover .row, .ticker .row.hold { animation-play-state: paused; } @keyframes cv-marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } } .tx { display: inline-flex; align-items: center; gap: 7px; padding: 0 16px; font-family: var(--f-mono); font-size: 12px; color: var(--muted); cursor: default; } .tx .fl { font-size: 14.5px; line-height: 1; } .tx b { color: var(--text); font-weight: 500; } .tx .side { text-transform: uppercase; font-size: 10px; letter-spacing: 1.2px; } .tx .side.buy { color: var(--ok); } .tx .side.sell { color: var(--accent-3); } .tx .amt { color: var(--accent); } .tx .up { color: var(--ok); } .tx .sep { opacity: .3; } .tx.live b::after { content: 'LIVE'; margin-left: 7px; font-size: 8.5px; letter-spacing: 1.4px; color: var(--accent); } /* ============================================================ Content pages (about, how it works, earnings) ============================================================ */ .topbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; } .topbar .spacer { flex: 1; } .doc { max-width: 940px; margin: 0 auto; padding: 34px 20px 70px; position: relative; z-index: 1; } .doc .hero { padding: 34px 30px; margin-bottom: 22px; } .doc h1 { font-size: 38px; line-height: 1.1; margin: 12px 0 14px; letter-spacing: -.5px; } .doc h2 { font-size: 22px; margin: 34px 0 12px; } .doc h3 { font-size: 15px; margin: 20px 0 6px; } .doc p { color: var(--muted); line-height: 1.72; font-size: 15px; margin: 0 0 14px; } .doc .lead { font-size: 17px; color: var(--text); line-height: 1.65; } .doc section.panel { padding: 26px 30px; margin-bottom: 18px; } .doc ul { color: var(--muted); line-height: 1.75; padding-left: 20px; margin: 0 0 14px; } .doc li b, .doc p b { color: var(--text); font-weight: 600; } .doc .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; } .doc .kpi { padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--sunken); } .doc .kpi b { display: block; font-family: var(--f-mono); font-size: 26px; color: var(--accent); letter-spacing: -.5px; } .doc .kpi span { font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted-2); } .doc .step { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-2); } .doc .step:last-child { border-bottom: 0; } .doc .step .n { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-family: var(--f-mono); font-size: 13px; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .doc .step p { margin: 4px 0 0; font-size: 14px; } .doc table { width: 100%; border-collapse: collapse; font-size: 14px; } .doc table th { text-align: left; font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted-2); padding: 8px 10px; border-bottom: 1px solid var(--line); } .doc table td { padding: 10px; border-bottom: 1px solid var(--line-2); color: var(--muted); } .doc table td b { color: var(--text); font-weight: 500; } .doc .foot-note { text-align: center; margin-top: 30px; } @media (max-width: 700px) { .doc h1 { font-size: 28px; } .doc .hero, .doc section.panel { padding: 20px 18px; } .topbar .nav { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* tape as a full-width bar under a content page's topbar */ .ticker.bar { border-bottom: 1px solid var(--line); background: var(--panel-2); position: relative; z-index: 55; } /* Flags: fall back to whatever colour-emoji font the platform has. */ .fl, .flag { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; } /* ============================================================ Left rail — the signed-in navigation ============================================================ One component for every page: the map (where it overlays the left edge and the map is pushed clear of it) and the account views (where it is the page's own left column). Below 1000px it becomes a drawer behind a hamburger, because the map needs every pixel of a phone. ============================================================ */ :root { --rail: 238px; } .rail { position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail); z-index: 900; display: flex; flex-direction: column; gap: 2px; padding: 14px 12px 10px; background: var(--panel); border-right: 1px solid var(--line); backdrop-filter: blur(14px); overflow-y: auto; overscroll-behavior: contain; } .rail .rl-brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 12px; font-family: var(--f-head); font-weight: 700; font-size: 18px; letter-spacing: .3px; color: var(--text); text-decoration: none; } .rail .rl-brand .a { color: var(--text); } .rail .rl-brand .b { color: var(--accent); } .rail .rl-who { display: flex; align-items: center; gap: 9px; margin: 0 2px 12px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--sunken); } .rail .rl-who .av { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-family: var(--f-mono); font-size: 12px; font-weight: 700; } .rail .rl-who .nm { min-width: 0; line-height: 1.2; } .rail .rl-who .nm b { display: block; font-size: 13px; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail .rl-who .nm span { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted-2); } .rail .rl-grp { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted-2); padding: 14px 10px 6px; } .rail a.rl { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 13.5px; line-height: 1; border: 1px solid transparent; transition: background .14s ease, color .14s ease; } .rail a.rl svg { width: 16px; height: 16px; flex: none; opacity: .8; } .rail a.rl:hover { background: var(--hover-bg); color: var(--text); } .rail a.rl.on { background: var(--accent-soft); color: var(--text); border-color: var(--line); } .rail a.rl.on svg { opacity: 1; color: var(--accent); } .rail a.rl .rl-b { margin-left: auto; font-family: var(--f-mono); font-size: 10px; padding: 2px 7px; border-radius: 999px; background: var(--sunken); border: 1px solid var(--line); color: var(--muted); } .rail a.rl .rl-b.hot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .rail .rl-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line-2); } .rail .rl-foot .btn { flex: 1 1 auto; justify-content: center; } /* Hamburger — only ever visible once the rail has collapsed into a drawer. */ .rail-toggle { position: fixed; top: 14px; left: 14px; z-index: 950; display: none; } .rail-scrim { position: fixed; inset: 0; z-index: 890; background: var(--overlay-bg); opacity: 0; pointer-events: none; transition: opacity .2s ease; } @media (max-width: 1000px) { :root { --rail: 0px; } .rail { width: 262px; transform: translateX(-100%); transition: transform .24s ease; } body.rail-open .rail { transform: none; box-shadow: var(--shadow); } body.rail-open .rail-scrim { opacity: 1; pointer-events: auto; } .rail-toggle { display: inline-flex; } /* Once the drawer is open it covers its own button — and the wordmark underneath it. The scrim, a link or Escape all close it. */ body.rail-open .rail-toggle { display: none; } } /* ---- the account shell ---- */ .acct { min-height: 100vh; padding: 26px 30px 60px; } .acct .head { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; } .acct .head h1 { font-family: var(--f-head); font-size: 26px; margin: 4px 0 0; letter-spacing: -.4px; } .acct .head .spacer { flex: 1; } .acct section.panel { padding: 22px 24px; margin-bottom: 18px; } .acct h2 { font-family: var(--f-head); font-size: 16px; margin: 0 0 14px; letter-spacing: -.2px; } .acct .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .acct .kpi { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--sunken); } .acct .kpi b { display: block; font-family: var(--f-mono); font-size: 23px; color: var(--accent); letter-spacing: -.5px; } .acct .kpi span { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted-2); } .acct .kpi.plain b { color: var(--text); } .acct table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .acct table th { text-align: left; padding: 8px 10px; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted-2); border-bottom: 1px solid var(--line); font-weight: 500; white-space: nowrap; } .acct table td { padding: 11px 10px; border-bottom: 1px solid var(--line-2); color: var(--muted); vertical-align: middle; } .acct table td b { color: var(--text); font-weight: 500; } .acct table tr[data-click] { cursor: pointer; } .acct table tr[data-click]:hover td { background: var(--hover-bg); } .acct .num { font-family: var(--f-mono); text-align: right; white-space: nowrap; } .acct .in { color: var(--ok); } .acct .out { color: var(--text); } .acct .empty { padding: 26px 8px; text-align: center; color: var(--muted-2); font-size: 13.5px; } .acct .tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; } .acct .tabs .btn.sm { font-size: 12px; } .acct .scroll { overflow-x: auto; } @media (max-width: 640px) { .acct { padding: 74px 14px 50px; } .acct section.panel { padding: 18px 15px; } } /* With the rail on screen the page sits beside it, and the topbar drops the duplicate links — the rail is the navigation, the topbar is just a header. Padding rather than a margin, so a centred .doc stays centred in what is left. The map page is unaffected: everything on it is absolutely positioned against the viewport and carries its own offset. */ body.railed { padding-left: var(--rail); } body.railed .topbar .nav { display: none; } @media (max-width: 1000px) { body.railed .topbar { padding-left: 56px; } }