/* ============================================================================ CosmoGenesis — Deviant wallet design system (v0.1) The project's own named visual language, extracted faithfully from Knowledgebase/08_historical_drafts/deviant_website.html and extended with the verification-state semantics the wallet needs (spec §7, wiki/wallet-ui-design.md). Consume from any shell (web / Capacitor / Electron). Import once at the root: import './design/cosmo-genesis.css'; Pair with the starfield generator in design/starfield.ts. Fonts (load in ): Fraunces (opsz 9..144, wght 300..600) + JetBrains Mono (wght 400,500) https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap ============================================================================ */ :root { /* ---- The sky (backgrounds & surfaces) ------------------------------- */ --sky-deep: #02040a; /* app background, deepest */ --sky-mid: #060912; /* raised surfaces / cards */ --sky-rim: #0c1220; /* card edges / elevated panels */ --sky-cove: #070d1a; /* gradient accent (bottom-left) */ /* Semantic surface aliases (use these in components) */ --bg: var(--sky-deep); --surface-1: var(--sky-mid); --surface-2: var(--sky-rim); --border: rgba(255, 255, 255, 0.06); --border-strong: rgba(255, 255, 255, 0.12); /* ---- Starfield ------------------------------------------------------ */ --star-faint: rgba(255, 255, 255, 0.22); --star-mid: rgba(255, 255, 255, 0.38); --star-bright: rgba(255, 255, 255, 0.58); /* ---- Ink (text) ----------------------------------------------------- */ --ink-soft: #b8c2d4; --ink: #d6dde9; --ink-bright: #f1f4fa; --muted: #6a7488; /* ---- Acid (the signature accent) ------------------------------------ */ --acid: #d6ff3d; /* CTAs, Orbital/ASM, DEA-Verified */ --acid-glow: rgba(214, 255, 61, 0.55); --acid-halo: rgba(214, 255, 61, 0.22); --acid-dim: rgba(214, 255, 61, 0.08); /* ---- Automated risk scale (traffic-light; spec §7 D-1/D-2 → tier) ----- */ /* The wallet classifies every asset automatically; the user never sets it. Green = canonical/standard (safe) · orange = risky · red = high risk (e.g. issuer free-minted to self and sells it as a "backed" currency — the T-001 fake-backing pattern; D-2 catches the missing backing). */ --risk-safe: var(--acid); /* canonical contract (D-1) + fully backed (D-2) */ --risk-safe-glow: var(--acid-glow); --risk-warn: #ff9f1c; /* risky: non-standard / uncertain backing */ --risk-high: #ff4d4d; /* high risk: fake-backed / underbacked (T-001) */ --risk-neutral: var(--muted); /* informational (e.g. Tier B from a known source) */ --rust-deep: #6b2a1c; /* original website token, retained */ /* legacy aliases (pre-reframe names) — kept until docs migrate fully */ --state-verified: var(--risk-safe); --state-verified-glow: var(--risk-safe-glow); --state-unverified: var(--risk-warn); --state-warning: var(--risk-high); --state-neutral: var(--risk-neutral); /* ---- Typography ----------------------------------------------------- */ --font-display: 'Fraunces', Georgia, serif; /* headings, balances, display */ --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* RULE: all numeric/technical data — sats, BCH, PNV, addresses, token IDs, the D-4 raw-BCH co-display, labels — render in --font-mono. */ /* ---- Motion --------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ---- Base ------------------------------------------------------------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--sky-deep); color: var(--ink); font-family: var(--font-display); font-weight: 400; font-feature-settings: "ss01", "ss02"; font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; overflow-x: hidden; } /* The sky — layered radial gradients, fixed so it doesn't scroll with content */ body { background: var(--sky-deep); /* deep base stays constant — only the aurora drifts */ position: relative; } /* Slowly-rotating sky: aurora + vignette sweep through a full 360° (~200s), so different areas darken and brighten over time. Oversized so corners never show; sits behind the starfield (z-index 0) and content (z-index 1). */ body::before { content: ""; position: fixed; top: 50%; left: 50%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 26% 22% at 62% 40%, rgba(127,140,255,.11) 0%, transparent 55%), /* violet */ radial-gradient(ellipse 24% 20% at 40% 60%, rgba(10,193,142,.09) 0%, transparent 55%), /* teal */ radial-gradient(ellipse 20% 18% at 52% 50%, rgba(214,255,61,.05) 0%, transparent 50%), /* acid */ radial-gradient(ellipse 22% 18% at 60% 57%, rgba(120,90,200,.07) 0%, transparent 52%), /* indigo */ radial-gradient(ellipse 30% 26% at 47% 42%, var(--sky-rim) 0%, transparent 55%), radial-gradient(ellipse 26% 22% at 60% 60%, var(--sky-mid) 0%, transparent 50%), radial-gradient(ellipse 28% 24% at 40% 58%, var(--sky-cove) 0%, transparent 52%); animation: sky-rotate 200s linear infinite; } @keyframes sky-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } } /* Monospace utility for all data/numeric content */ .mono, .data, .amount, .address, .token-id { font-family: var(--font-mono); font-feature-settings: "tnum"; /* tabular figures so columns align */ } /* ---- Starfield: "film tape" — stars stream left → right ------------------ * Each star travels horizontally across the screen at a steady pace, slightly * arcing as if moving along a very large circle whose centre sits far below * the viewport. With many stars at varied vertical positions and durations, * the population never visibly repeats — there is no recognisable "loop". * * design/starfield.ts assigns each star CSS variables: * --y — vertical position within the viewport (top offset) * --tape-duration — how long it takes to cross the screen (longer = farther/slower) * --tape-delay — negative offset so the field is fully populated on first paint * --tape-rise — small vertical lift at the arc's midpoint (parallax depth) * --star-opacity — per-star brightness */ .stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; transition: translate 0.25s ease-out; will-change: translate; } .star { position: absolute; top: var(--y, 50%); left: 0; background: #fff; border-radius: 50%; box-shadow: 0 0 3px rgba(255, 255, 255, 0.55); opacity: var(--star-opacity, 0.7); animation: tape var(--tape-duration, 120s) linear infinite; animation-delay: var(--tape-delay, 0s); will-change: transform; } @keyframes tape { /* Start just off the left edge, gently arc up at midstream, exit off the right. The vertical lift (--tape-rise) varies per star, so each one rides a different "altitude" on a huge invisible circle and the population never lines up. */ 0% { transform: translate(-4vw, 0); } 50% { transform: translate(50vw, calc(var(--tape-rise, 0px) * -1)); } 100% { transform: translate(104vw, 0); } } @media (prefers-reduced-motion: reduce) { .star { animation: none; transform: translate(50vw, 0); opacity: 0.4; } } /* App content sits above the starfield */ .app, .container { position: relative; z-index: 1; } /* ---- Glow utilities (the CosmoGenesis signature) ---------------------- */ /* Acid luminescence on text (the "deviation" glow) */ .glow-text { color: var(--acid); text-shadow: 0 0 4px var(--acid-glow), 0 0 14px var(--acid-halo), 0 0 32px var(--acid-dim); } /* Acid luminescence on a box/element (e.g. primary button, active nav) */ .glow-box { box-shadow: 0 0 6px var(--acid-glow), 0 0 14px var(--acid-halo); } /* Glowing accent bar on the left edge (callouts, the active item, emphasis) */ .accent-bar { position: relative; padding-left: 24px; } .accent-bar::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--acid); box-shadow: 0 0 6px var(--acid-glow), 0 0 14px var(--acid-halo); } /* The wordmark's glowing acid dot (Deviant•) — reusable as a "live" indicator */ .acid-dot::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 7px; vertical-align: middle; transform: translateY(-2px); background: var(--acid); border-radius: 50%; box-shadow: 0 0 6px var(--acid-glow), 0 0 14px var(--acid-halo); } /* ---- Primary action ---------------------------------------------------- */ .btn-primary { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky-deep); background: var(--acid); border: 0; border-radius: 10px; padding: 14px 20px; cursor: pointer; box-shadow: 0 0 16px var(--acid-halo); transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 24px var(--acid-glow); } /* ---- Mono labels (nav, chips, section labels) ------------------------- */ .label-mono { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } /* ---- Accessibility ---------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .star { animation: none; opacity: 0.4; } .btn-primary { transition: none; } }