/** * SPID.js — Sovereign Passport · Vine Engine * public/css/orbital.css * * The orbital dashboard — the visual heart of SPID.js. * * Structure: * .orbital-stage → the full dashboard container * .orbital-center → the phoenix + vault core * .orbital-ring-N → concentric SVG rings * .orbital-node → clickable module nodes on ring-2 * .orbital-label → node labels * * States: * .vine-active → on when vine is configured * .vault-locked → on when vault is locked * .node-active → on .orbital-node when selected * .node-alert → on .orbital-node when needs attention * * All colors reference tokens.css variables. * No hardcoded values. */ /* ── DASHBOARD STAGE ──────────────────────────────────────────── */ #orbital-stage { position: relative; width: var(--dashboard-size); height: var(--dashboard-size); margin: 0 auto; flex-shrink: 0; } /* ── SVG RINGS ────────────────────────────────────────────────── */ .orbital-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } /* Ring circles */ .ring { fill: none; stroke-width: 1; opacity: var(--vine-ring-opacity); transition: opacity var(--duration-slow) var(--ease); } .ring-1 { stroke: var(--gold); stroke-width: 1.5; opacity: 0.3; animation: ringPulse var(--duration-pulse) ease-in-out infinite; } .ring-2 { stroke: var(--gold-dim); stroke-dasharray: 4 8; } .ring-3 { stroke: var(--green-soft); stroke-dasharray: 2 12; } .ring-4 { stroke: var(--ink-faint); stroke-dasharray: 1 16; } @keyframes ringPulse { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.05); } } /* ── ROTATING RING ────────────────────────────────────────────── */ .ring-rotate { transform-origin: center; transform-box: fill-box; } .ring-rotate-slow { animation: rotateSlow 60s linear infinite; } .ring-rotate-fast { animation: rotateFast 30s linear infinite reverse; } @keyframes rotateSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rotateFast { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ── GOLDEN PATHS ─────────────────────────────────────────────── */ /* * Lines connecting the phoenix to orbital nodes. * Animate as data flows when vine is active. */ .orbital-path { stroke: var(--gold-dim); stroke-width: 0.5; fill: none; opacity: var(--vine-opacity); transition: opacity var(--duration-slow) var(--ease); } .orbital-path-particle { fill: var(--gold); opacity: 0; } .orbital-path-particle { animation: travelPath 4s ease-in-out infinite; } @keyframes travelPath { 0% { opacity: 0; offset-distance: 0%; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; offset-distance: 100%; } } /* ── PHOENIX CENTER ───────────────────────────────────────────── */ .orbital-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--phoenix-size); height: var(--phoenix-size); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; z-index: 10; } /* Outer glow */ .orbital-center::before { content: ''; position: absolute; inset: -20px; border-radius: 50%; background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%); opacity: var(--vine-glow-opacity); transition: opacity var(--duration-slow) var(--ease); animation: centerGlow var(--duration-pulse) ease-in-out infinite; } @keyframes centerGlow { 0%, 100% { transform: scale(1); opacity: var(--vine-glow-opacity); } 50% { transform: scale(1.1); opacity: calc(var(--vine-glow-opacity) * 1.5); } } /* Phoenix SVG wrapper */ .phoenix-wrap { width: 80px; height: 80px; opacity: var(--vine-opacity); transition: opacity var(--duration-slow) var(--ease); filter: drop-shadow(0 0 12px var(--gold-dim)); } html.vine-active .phoenix-wrap { filter: drop-shadow(0 0 20px var(--gold)); animation: phoenixFloat 6s ease-in-out infinite; } @keyframes phoenixFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.02); } } /* First run state — locked icon glows as attractor */ .phoenix-locked { font-size: 36px; opacity: 0.9; filter: drop-shadow(0 0 12px var(--gold)); animation: phoenixFloat 6s ease-in-out infinite; } html.vine-active .phoenix-locked { display: none; } html:not(.vine-active) .phoenix-wrap { display: none; } /* Center label */ .orbital-center-label { font-family: var(--font-label); font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-top: var(--space-2); opacity: var(--vine-opacity); text-align: center; transition: opacity var(--duration-slow); } .orbital-center-setup { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--ink-dim); text-align: center; max-width: 100px; line-height: 1.3; } html.vine-active .orbital-center-setup { display: none; } /* ── ORBITAL NODES ────────────────────────────────────────────── */ /* * Each node sits on the ring-2 orbit. * Position is set via CSS custom properties --node-x and --node-y * calculated by dashboard.js based on the node's angle. */ .orbital-node { position: absolute; width: var(--node-size); height: var(--node-size); top: calc(50% + var(--node-y) - var(--node-size) / 2); left: calc(50% + var(--node-x) - var(--node-size) / 2); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; z-index: 20; transition: transform var(--duration-base) var(--ease); opacity: var(--vine-opacity); transition: opacity var(--duration-slow) var(--ease), transform var(--duration-base) var(--ease); } .orbital-node:hover { transform: scale(1.15); } /* Node circle background */ .node-circle { width: var(--node-size); height: var(--node-size); border-radius: 50%; background: var(--bg-card); border: 1px solid var(--ink-faint); display: flex; align-items: center; justify-content: center; font-size: 20px; transition: all var(--duration-base) var(--ease); position: relative; } .orbital-node:hover .node-circle, .orbital-node.active .node-circle { border-color: var(--gold-dim); background: var(--bg-elevated); box-shadow: 0 0 20px var(--gold-faint); } .orbital-node.active .node-circle { border-color: var(--gold); box-shadow: 0 0 24px var(--gold-glow); } /* Alert indicator */ .node-alert-dot { position: absolute; top: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--red-status); border: 2px solid var(--bg); display: none; } .orbital-node.node-alert .node-alert-dot { display: block; animation: alertPulse 1.5s ease-in-out infinite; } @keyframes alertPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } } /* Node count badge */ .node-count { position: absolute; bottom: -2px; right: -2px; min-width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--gold); color: var(--bg); font-size: 8px; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 1px solid var(--bg); display: none; } .orbital-node.has-count .node-count { display: flex; } /* Node label below circle */ .node-label { position: absolute; top: calc(100% + 6px); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; text-align: center; transition: color var(--duration-base); pointer-events: none; } .orbital-node:hover .node-label, .orbital-node.active .node-label { color: var(--gold); } /* ── STATUS RING SEGMENTS ─────────────────────────────────────── */ /* * The outer ring shows live status as colored arc segments. * Each segment corresponds to a data flow or sync event. */ .status-ring-segment { fill: none; stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity var(--duration-slow); } html.vine-active .status-ring-segment { opacity: 0.6; animation: segmentFade 4s ease-in-out infinite; } .segment-green { stroke: var(--green-status); } .segment-gold { stroke: var(--gold); } .segment-blue { stroke: var(--blue-status); } @keyframes segmentFade { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; } } /* ── FIRST RUN OVERLAY ────────────────────────────────────────── */ .first-run-overlay { position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; } html.vine-active .first-run-overlay { display: none; } .first-run-cta { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--ink-dim); margin-bottom: var(--space-3); } .first-run-price { font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); opacity: 0.7; } /* ── MINI DASHBOARD (sidebar footer) ─────────────────────────── */ /* * A tiny version of the orbital shown at the bottom of the sidebar. * Just the phoenix with a pulse ring — shows vault status at a glance. */ .mini-orbital { margin-top: auto; padding: var(--space-5); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); border-top: var(--border-faint); } .mini-phoenix { width: 32px; height: 32px; position: relative; } .mini-phoenix::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--gold-dim); opacity: var(--vine-glow-opacity); animation: miniPulse 3s ease-in-out infinite; } @keyframes miniPulse { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.2); opacity: 0.7; } } .mini-vine-name { font-size: var(--text-xs); color: var(--ink-dim); letter-spacing: 0.1em; text-align: center; } /* ── ORB ALERT GLOW STATES ────────────────────────────────────── */ /* * Ambient orb color signals vine health at a glance. * Gold = resting / nominal (default, no class needed) * Amber = attention needed (vault locked, offline, quorum missing) * Red = action required (pending approvals, admin alert) * Green = celebratory flash (transient 8s, then removed) */ html.vine-amber .orbital-center::before { background: radial-gradient(circle, rgba(201, 140, 40, 0.40) 0%, transparent 70%); } html.vine-red .orbital-center::before { background: radial-gradient(circle, rgba(200, 60, 60, 0.45) 0%, transparent 70%); animation: centerGlowRed var(--duration-base) ease-in-out infinite; } @keyframes centerGlowRed { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.15); opacity: 1; } } html.vine-green .orbital-center::before { background: radial-gradient(circle, rgba(60, 180, 100, 0.45) 0%, transparent 70%); } /* ── RESPONSIVE ───────────────────────────────────────────────── */ @media (max-width: 900px) { :root { --dashboard-size: 360px; --ring-2-r: 90px; --ring-3-r: 130px; --node-size: 44px; --phoenix-size: 80px; } } @media (max-width: 480px) { :root { --dashboard-size: 300px; --ring-2-r: 75px; --ring-3-r: 110px; --node-size: 40px; --phoenix-size: 70px; } }