@charset "UTF-8"; /* ============================================================ Momo — Signal Desk Design Tokens Source: Signal Desk UI.pdf · v1 · 2026-06-15 Loads after main.css and overrides its CSS custom properties. Light theme is the default per Signal Desk spec. Dark theme activates via data-theme="dark" on . ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Sora:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"); /* ── Light theme (default) ─────────────────────────────────── */ :root { /* Signal Desk canonical tokens */ --sd-bg: #FAFAFA; --sd-panel: #FFFFFF; --sd-ink: #0A0E1A; --sd-ink-dim: #5C6573; --sd-ink-faint: #9CA3AF; --sd-em: #0046FF; --sd-em-deep: #0039CC; --sd-em-bright: #2F6BFF; --sd-sky: #0284C7; --sd-up: #16A34A; --sd-down: #DC2626; --sd-amber: #D97706; --sd-line: rgba(10, 14, 26, 0.06); --sd-radius: 18px; /* Functional aliases — remap old tokens to SD light values */ --bg: var(--sd-bg); --panel: #FFFFFF; --panel-2: #F8FAFB; --panel-3: #F1F5F9; --fg: var(--sd-ink); --fg-dim: #000000; --fg-mute: #000000; --fg-faint: rgba(10, 14, 26, 0.28); --hairline: rgba(10, 14, 26, 0.06); --hairline-strong: rgba(10, 14, 26, 0.16); --grid-line: rgba(0, 70, 255, 0.05); --shadow-pop: 0 18px 48px rgba(10, 14, 26, 0.12); --up: var(--sd-up); --down: var(--sd-down); --blue: var(--sd-em); --cyan: var(--sd-em-bright); --gold: #E9B84A; --solar: #FFD875; --silver: var(--sd-ink); --void: #0A0E1A; --qr-bg: #FFFFFF; --btn-text-on-blue: #FFFFFF; /* Geometry — card radius updated to SD spec */ --r-sm: 4px; --r-md: 8px; --r-lg: var(--sd-radius); /* Typography — Geist/Inter body, Sora brand display */ --font-sans: "Geist", "Inter", system-ui, sans-serif; --font-display: "Aptos Display", "Aptos", "Sora", "Inter", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; } /* ── Light theme (explicit) ─────────────────────────────────── */ /* Matches when data-theme="light" is set — higher specificity than :root, so these values beat main.css's [data-theme="light"] block. */ :root[data-theme=light] { /* Signal Desk canonical tokens */ --sd-bg: #FAFAFA; --sd-panel: #FFFFFF; --sd-ink: #0A0E1A; --sd-ink-dim: #5C6573; --sd-ink-faint: #9CA3AF; --sd-em: #0046FF; --sd-em-deep: #0039CC; --sd-em-bright: #2F6BFF; --sd-sky: #0284C7; --sd-up: #16A34A; --sd-down: #DC2626; --sd-amber: #D97706; --sd-line: rgba(10, 14, 26, 0.06); --sd-radius: 18px; /* Functional aliases */ --bg: #FAFAFA; --panel: #FFFFFF; --panel-2: #F8FAFB; --panel-3: #F1F5F9; --fg: #0A0E1A; --fg-dim: #000000; --fg-mute: #000000; --fg-faint: rgba(10, 14, 26, 0.28); --hairline: rgba(10, 14, 26, 0.06); --hairline-strong: rgba(10, 14, 26, 0.16); --grid-line: rgba(0, 70, 255, 0.05); --shadow-pop: 0 18px 48px rgba(10, 14, 26, 0.12); --up: #16A34A; --down: #DC2626; --blue: #0046FF; --cyan: #2F6BFF; --gold: #E9B84A; --solar: #FFD875; --silver: #0A0E1A; --void: #0A0E1A; --qr-bg: #FFFFFF; --btn-text-on-blue: #FFFFFF; /* Geometry & typography */ --r-sm: 4px; --r-md: 8px; --r-lg: 18px; --font-sans: "Geist", "Inter", system-ui, sans-serif; --font-display: "Aptos Display", "Aptos", "Sora", "Inter", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; } /* Light theme — component polish (SD accent replaces old #1EA1FF blue) */ :root[data-theme=light] .panel, :root[data-theme=light] .kpi-strip { box-shadow: 0 1px 2px rgba(10, 14, 26, 0.04), 0 1px 0 rgba(10, 14, 26, 0.02); } :root[data-theme=light] .wallet, :root[data-theme=light] .pledge { background: #FFFFFF; border-color: rgba(10, 14, 26, 0.1); box-shadow: 0 1px 2px rgba(10, 14, 26, 0.05); } :root[data-theme=light] .wallet-name .icon, :root[data-theme=light] .pledge-letter { background: rgba(0, 70, 255, 0.08); } :root[data-theme=light] .pledge-c { background: radial-gradient(300px 160px at 100% 0%, rgba(233, 184, 74, 0.2), transparent 70%), #FFFFFF; border-color: rgba(233, 184, 74, 0.5); } :root[data-theme=light] .btn-accent { background: rgba(0, 70, 255, 0.08); border-color: rgba(0, 70, 255, 0.35); color: #0039CC; } :root[data-theme=light] .btn-accent:hover { background: var(--blue); color: var(--btn-text-on-blue); border-color: var(--blue); } :root[data-theme=light] .btn-ghost { border-color: rgba(10, 14, 26, 0.18); } :root[data-theme=light] .seat-bar { background: #F1F5F9; } :root[data-theme=light] .topbar-nav a.active { background: #F1F5F9; } :root[data-theme=light] .tbl tbody tr:hover td { background: rgba(0, 70, 255, 0.04); } :root[data-theme=light] .wallet-row-icon { background: rgba(0, 70, 255, 0.07); } :root[data-theme=light] .wallet-row { box-shadow: 0 1px 2px rgba(10, 14, 26, 0.05); } /* ── Dark theme override ────────────────────────────────────── */ :root[data-theme=dark] { /* Signal Desk dark tokens */ --sd-bg: #070B14; --sd-panel: #0E1525; --sd-ink: #F1F5F9; --sd-em: #A3FF33; --sd-up: #7FE8B0; --sd-down: #E87A6A; --sd-amber: #F5B847; /* Functional aliases → dark */ --bg: #070B14; --panel: #0E1525; --panel-2: #111827; --panel-3: #161B27; --fg: #F1F5F9; --fg-dim: #FFFFFF; --fg-mute: #FFFFFF; --fg-faint: rgba(241, 245, 249, 0.20); --hairline: rgba(241, 245, 249, 0.07); --hairline-strong: rgba(241, 245, 249, 0.15); --grid-line: rgba(163, 255, 51, 0.04); --shadow-pop: 0 18px 48px rgba(0, 0, 0, 0.55); --up: #7FE8B0; --down: #E87A6A; --blue: #A3FF33; --cyan: #64D9FF; --gold: #E9B84A; --solar: #FFD875; --silver: #F1F5F9; --void: #070B14; --qr-bg: #DDE3F0; --btn-text-on-blue: #05070B; } .kpi-cell::before, .wallet::before, .pledge::before, .wallet-row::before, .history-kpis .cell::before { animation: none !important; } .rewards-limit-strip { display: flex; align-items: center; gap: 20px; padding: 14px 20px; flex-wrap: nowrap; position: relative; } .rewards-limit-strip .rl-info { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .rewards-limit-strip .rl-info .rl-icon-wrap { width: 30px; height: 30px; border-radius: 8px; background: rgba(0, 70, 255, 0.12); display: flex; align-items: center; justify-content: center; color: var(--blue); flex-shrink: 0; } .rewards-limit-strip .rl-info .rl-key { font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 3px; } .rewards-limit-strip .rl-info .rl-val { font-size: 15px; font-weight: 700; color: var(--fg); letter-spacing: -0.01em; } .rewards-limit-strip .rl-info .rl-val .ccy { font-size: 10px; font-weight: 500; color: var(--fg-mute); margin-left: 2px; text-transform: lowercase; } .rewards-limit-strip .rl-stat { flex-shrink: 0; } .rewards-limit-strip .rl-stat .rl-stat-key { font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 3px; } .rewards-limit-strip .rl-stat .rl-stat-val { font-size: 13px; font-weight: 600; color: var(--fg); } .rewards-limit-strip .rl-stat .rl-stat-val .ccy { font-size: 10px; font-weight: 500; color: var(--fg-mute); margin-left: 2px; text-transform: lowercase; } .rewards-limit-strip .rl-bar-group { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; } .rewards-limit-strip .rl-progress-wrap { flex: 1; min-width: 0; } .rewards-limit-strip .rl-progress-wrap .rl-track { height: 5px; background: var(--panel-3); border-radius: 99px; overflow: hidden; border: 1px solid var(--hairline); } .rewards-limit-strip .rl-progress-wrap .rl-track .rl-fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); border-radius: 99px; } .rewards-limit-strip .rl-progress-wrap .rl-caption { font-size: 10px; color: var(--fg-mute); margin-top: 5px; } .rewards-limit-strip .rl-pct { font-size: 16px; font-weight: 700; color: var(--blue); flex-shrink: 0; letter-spacing: -0.01em; } @media (max-width: 840px) { .rewards-limit-strip { flex-wrap: wrap; gap: 12px 20px; } .rewards-limit-strip .rl-info { flex: 1 1 auto; } .rewards-limit-strip .rl-stat { flex: 0 0 auto; } .rewards-limit-strip .rl-bar-group { flex: 1 1 100%; order: 4; margin: 5px 0 0; border-top: 1px solid rgba(204, 204, 204, 0.3019607843); padding: 13px 0 0; } } @media (max-width: 560px) { .rewards-limit-strip { gap: 10px 16px; padding: 12px 14px; } .rewards-limit-strip .rl-info { flex: 1 1 100%; margin-bottom: 2px; } .rewards-limit-strip .rl-stat { flex: 1 1 calc(50% - 8px); } .rewards-limit-strip .rl-bar-group { flex: 1 1 100%; } } :root[data-theme=light] .rewards-limit-strip .rl-icon-wrap { background: rgba(0, 70, 255, 0.08); color: #0046FF; } :root[data-theme=light] .rewards-limit-strip .rl-fill { background: linear-gradient(90deg, #0046FF, #2F6BFF); } :root[data-theme=light] .rewards-limit-strip .rl-pct { color: #0046FF; } :root[data-theme=light] .rewards-limit-strip .rl-track { background: #F1F5F9; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { background-color: transparent !important; -webkit-background-clip: text !important; -webkit-text-fill-color: #fff !important; transition: background-color 5000s ease-in-out 0s; color: #fff !important; } .wallets-grid .wallet, .wallet { animation: none !important; -webkit-animation: none !important; } /* ── Mobile drawer overrides ─────────────────────────────────── */ .mobile-drawer { display: none; flex-direction: column; overflow: hidden; } .mobile-drawer.open { display: flex; } .mobile-drawer .drawer-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .mobile-drawer .drawer-nav-wrap { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 12px; } .mobile-drawer .drawer-nav-wrap::-webkit-scrollbar { width: 4px; } .mobile-drawer .drawer-nav-wrap::-webkit-scrollbar-track { background: transparent; } .mobile-drawer .drawer-nav-wrap::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; } /* ── Dual-logo topbar group ───────────────────────────────────── */ .logo-group { display: inline-flex; align-items: center; gap: 10px; } .logo { display: inline-flex; align-items: center; gap: 10px; background: none; border: none; padding: 6px 14px 6px 10px; text-decoration: none; letter-spacing: 0; white-space: nowrap; flex-shrink: 0; } .logo-img { width: 166px; height: auto; object-fit: contain; flex-shrink: 0; } .logo-label { display: flex; flex-direction: column; line-height: 1.15; } .logo-label .logo-name { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--fg); letter-spacing: 0.06em; } .logo-label .logo-sub { font-family: var(--font-sans); font-weight: 400; font-size: 10px; color: var(--fg-mute); letter-spacing: 0.18em; } .logo.logo-icon-only { padding: 0; gap: 0; background: none; border: none; } /* 1200px — start shrinking */ @media (max-width: 1200px) { .logo-group { gap: 6px; } .logo { padding: 4px 8px 4px 6px; gap: 6px; } .logo-label .logo-name { font-size: 11px; } .logo-label .logo-sub { font-size: 9px; letter-spacing: 0.12em; } } /* 961–1200px — nav is visible but space is tight; compact everything to keep right-side items on screen */ @media (min-width: 961px) and (max-width: 1200px) { .logo-img { height: 38px; width: auto; } .logo-group { gap: 4px; } .topbar { padding: 0 12px; gap: 4px; } .topbar-nav a, .topbar-nav button { padding: 6px 9px; font-size: 12px; } .topbar .user-chip .meta { display: none; } .topbar .user-chip { padding: 4px; } .market-pill { padding: 5px 9px; gap: 10px; font-size: 12px; } } /* 1050px — hide TERMINAL sub-text */ @media (max-width: 1050px) { .logo { padding: 4px 8px 4px 6px; gap: 5px; } .logo-label .logo-name { font-size: 10px; letter-spacing: 0.04em; } .logo-label .logo-sub { display: none; } } /* 960px — collapse nav to hamburger, restore logo text since nav space is freed */ @media (max-width: 960px) { .topbar-nav { display: none !important; } .mobile-toggle { display: inline-flex !important; } .logo-group { gap: 6px; } .logo { padding: 4px 10px 4px 7px; gap: 6px; } .logo-label { display: flex; } .logo-label .logo-name { font-size: 11px; } .logo-label .logo-sub { display: none; } } /* 840px — already handled by main.css; keep logo sizing consistent */ @media (max-width: 840px) { .logo-group { gap: 5px; } .logo { padding: 4px 10px 4px 7px; gap: 6px; border-radius: 7px; } .logo-label { display: flex; } .logo-label .logo-name { font-size: 11px; } .logo-label .logo-sub { display: none; } } /* 575px — shrink logos */ @media (max-width: 575px) { .logo-img { width: 166px; } .topbar { gap: 3px; } .icon-btn { padding: 5px; min-width: 32px; min-height: 32px; } .topbar .user-chip { padding: 3px; } } /* 560px */ @media (max-width: 560px) { .logo-group { gap: 4px; } .logo { padding: 4px 7px 4px 5px; gap: 5px; border-radius: 6px; } .logo-label .logo-name { font-size: 10px; } } /* 400px */ @media (max-width: 400px) { .logo { padding: 3px 6px; gap: 4px; } .logo-label .logo-name { font-size: 9px; } } /*# sourceMappingURL=ann.css.map */