/* ══════════════════════════════════════════════════════════════ Keln — orbit pipeline styling. Link in dashboard.html , after constellation-hero.css: ══ NEW IN THIS REVISION (Phase 2) ══════════════════════════ Five feature families added, all opt-in via KelnOrbit opts: · FAUX-3D PARALLAX — depth cueing via per-ring haze + pointer-driven drift; the sky stays pinned. · VALUE-BAND GRIDLINES — faint dashed radial rings at the radii corresponding to cumulative deal values. · GRAVITY WELLS — accretion ring on the well body, bezier pull lines to influenced neighbours. · ULTRAFINE ZOOM/PAN — pointer-anchored wheel zoom, Space+drag pan. Below 0.7x zoom the orbit reads as a minimap; at >=2x ring labels tighten and body values render inline. · TIME SCRUBBER — a thin 90-day timeline at the bottom of the host; scrub backward to replay orbit state. · BULK SCULPTING — Shift+drag lasso, Shift+click pick, synced pulse ring across selected bodies, 1–6 jump-to-stage. ══ INVARIANTS ═══════════════════════════════════════════════ · Existing classes untouched: .orbit-wrap, .orbit-body, .orbit-core, .orbit-glow, .orbit-tip, .orbit-views, .orbit-legend, .orbit-detail, .orbit-ringlabel, .orbit-search, .week-strip, .reward-tabs. Dashboard.html keeps working unchanged. · Fonts: only var(--font) and var(--mono). No hardcoded 'JetBrains Mono'. · Reduce-motion: parallax haze is disabled (drawn by JS, so the CSS only has to honour the state). ══════════════════════════════════════════════════════════════ */ /* ── Shell ─────────────────────────────────────────────────── */ .orbit-wrap { position: relative; border-radius: 18px; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #0c1220 0%, #070b12 55%, #04060a 100%); border: 1px solid var(--border); margin: 0 0 var(--s-7); } .orbit--dragging { cursor: grabbing } .orbit--dragging .orbit-body { cursor: grabbing !important } .orbit--panning { cursor: move } /* ── Bodies ────────────────────────────────────────────────── */ .orbit-body { outline: none; transition: none } .orbit-body .orbit-core { transition: r .18s ease, fill .25s ease } .orbit-body .orbit-glow { transition: r .18s ease, fill .25s ease } .orbit-body .orbit-rim { transition: opacity .25s ease } .orbit-body:hover .orbit-core, .orbit-body:focus-visible .orbit-core { r: 13 } .orbit-body:focus-visible .orbit-glow { stroke: var(--accent2); stroke-width: 2; fill: rgba(34, 211, 166, .25); } /* Overdue follow-up pulses. This is the only thing on the whole screen that pulses, so it reads as urgent rather than as noise. */ @keyframes orbitDue { 0%, 100% { opacity: .30 } 50% { opacity: .85 } } .orbit-body--due .orbit-glow { animation: orbitDue 1.9s ease-in-out infinite } /* ── Phase 2: rim light ─────────────────────────────────────── A faint ellipse under the core reads as the body catching light from the sun on the side facing it. Depth without perspective distortion. */ .orbit-rim { opacity: 0; transition: opacity .3s ease } .orbit-body:hover .orbit-rim, .orbit-body:focus-visible .orbit-rim { opacity: .5 } /* ── Phase 2: gravity wells ─────────────────────────────────── */ @keyframes orbitWell { 0%, 100% { transform: scale(1); opacity: .55 } 50% { transform: scale(1.12); opacity: .9 } } .orbit-wellring { animation: orbitWell 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; } .orbit-welllink { stroke: rgba(255,209,102,.18); stroke-width: 0.6; stroke-dasharray: 1 3; pointer-events: none; } .orbit-body--well .orbit-core { filter: drop-shadow(0 0 12px rgba(255,209,102,.55)); } /* ── Phase 2: bulk sculpting ────────────────────────────────── */ @keyframes orbitBulk { 0%, 100% { transform: scale(1); opacity: .55 } 50% { transform: scale(1.08); opacity: .95 } } .orbit-bulkring { animation: orbitBulk 1.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; } .orbit-body--bulk .orbit-core { stroke: rgba(34,211,166,.7); stroke-width: 1.4; } .orbit-lasso { position: absolute; z-index: 25; border: 1px dashed rgba(34,211,166,.6); background: rgba(34,211,166,.06); pointer-events: none; border-radius: var(--r-xs); } /* ── Phase 2: value-band gridlines ──────────────────────────── */ .orbit-band { pointer-events: none; } .orbit-band-legend__inner { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) var(--s-5); background: rgba(6,10,16,.55); border: 1px solid var(--border); border-radius: var(--r-sm); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .orbit-band-legend__row { display: flex; align-items: center; gap: var(--s-3); font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .08em; color: var(--dim); text-transform: uppercase; } .orbit-band-legend__row i { width: 10px; height: 1px; background: rgba(255,255,255,.2); display: inline-block; } /* ── Phase 2: time scrubber ─────────────────────────────────── */ .orbit-scrub { position: absolute; left: 24px; right: 24px; bottom: 12px; z-index: 20; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-6); padding: var(--s-4) var(--s-6); background: rgba(6,10,16,.6); border: 1px solid var(--border); border-radius: 10px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .orbit-scrub__track { position: relative; height: 18px; cursor: pointer; touch-action: none; } .orbit-scrub__fill { position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, rgba(91,140,255,.15), rgba(34,211,166,.35)); border-radius: 1px; } .orbit-scrub__handle { position: absolute; top: 50%; left: 100%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 14px rgba(34,211,166,.6); cursor: grab; transition: box-shadow .2s ease; } .orbit-scrub__handle:active { cursor: grabbing; } .orbit-scrub__handle:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; } .orbit-scrub__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } /* ── Tooltip ───────────────────────────────────────────────── */ .orbit-tip { position: absolute; z-index: 30; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; width: 190px; padding: var(--s-5) var(--s-6); border-radius: 11px; background: rgba(6, 10, 18, .96); border: 1px solid rgba(255, 255, 255, .13); backdrop-filter: blur(10px); box-shadow: 0 14px 44px rgba(0, 0, 0, .65); } .orbit-tip.show { opacity: 1; transform: translateY(0) } .ot-name { font-size: var(--t-base); font-weight: 700; color: var(--ink); line-height: 1.25 } .ot-co { font-size: 11.5px; color: var(--muted); margin-top: 1px } .ot-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-top: 7px; font-family: var(--mono); font-size: var(--t-xs); } .ot-row b { color: var(--accent2) } .ot-fu { font-size: var(--t-xs); color: var(--dim); margin-top: 5px } .ot-fu.due { color: var(--warn) } .ot-hint { font-size: 9.5px; color: #3d4557; margin-top: var(--s-4); padding-top: 7px; border-top: 1px solid rgba(255,255,255,.07); letter-spacing: .3px; } /* ── View toggle ───────────────────────────────────────────── */ .orbit-views { display: inline-flex; gap: var(--s-1); padding: 3px; border-radius: 999px; background: rgba(6, 10, 16, .6); border: 1px solid var(--border); } .orbit-view { padding: 5px 13px; border-radius: 999px; border: none; background: transparent; color: var(--dim); font-family: var(--font); font-size: var(--t-sm); font-weight: 600; cursor: pointer; transition: background .18s, color .18s; } .orbit-view:hover { color: var(--ink) } .orbit-view[aria-pressed="true"] { background: rgba(34, 211, 166, .13); color: var(--accent2); } .orbit-view:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px } /* ── Legend ────────────────────────────────────────────────── */ .orbit-legend { display: flex; flex-wrap: wrap; gap: var(--s-6); padding: var(--s-5) var(--s-2) 0; font-size: var(--t-xs); color: var(--dim); } .orbit-legend span { display: inline-flex; align-items: center; gap: 5px } .orbit-legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } /* ── Detail popover ────────────────────────────────────────── */ .orbit-detail { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; background: rgba(3, 5, 10, .72); backdrop-filter: blur(4px); padding: var(--s-9); } .orbit-detail.show { display: grid } .od-card { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--border-hi); border-radius: 18px; padding: var(--s-10); backdrop-filter: blur(16px); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); } .od-name { font-size: 20px; font-weight: 800; letter-spacing: -.3px; margin-bottom: var(--s-1) } .od-co { font-size: 13.5px; color: var(--muted); margin-bottom: var(--s-8) } .od-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); margin-bottom: var(--s-8); } .od-f label { display: block; font-size: var(--t-xs); color: var(--dim); letter-spacing: .5px; margin-bottom: 5px; } .od-f select, .od-f input { width: 100%; background: rgba(6, 10, 16, .6); border: 1px solid var(--border); color: var(--ink); border-radius: 9px; padding: 9px 11px; font-size: 13.5px; font-family: var(--font); } .od-f select:focus, .od-f input:focus { outline: none; border-color: var(--border-hi) } .od-actions { display: flex; gap: var(--s-4); margin-top: var(--s-2) } .od-actions button { flex: 1 } @media (max-width: 560px) { .od-grid { grid-template-columns: 1fr } } @media (prefers-reduced-motion: reduce) { .orbit-body--due .orbit-glow { animation: none; opacity: .7 } .orbit-tip, .orbit-body .orbit-core, .orbit-body .orbit-glow { transition: none } .orbit-wellring, .orbit-bulkring { animation: none } .orbit-rim { transition: none } } /* ══ Restructured section helpers ═══════════════════════════ */ .week-strip { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: var(--s-7) 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); margin-bottom: var(--s-7); } .ws-item { display: flex; flex-direction: column; gap: var(--s-1) } .ws-v { font-family: var(--mono); font-size: var(--t-2xl); font-weight: 800; color: var(--ink) } .ws-l { font-size: var(--t-2xs); letter-spacing: 1.3px; color: var(--dim) } .ws-sep { width: 1px; align-self: stretch; background: var(--border) } .ws-goal { flex: 1; min-width: 160px } .ws-bar { height: 4px; background: rgba(255,255,255,.06); border-radius: 99px; overflow: hidden; margin-top: var(--s-3) } .ws-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .5s cubic-bezier(.2,.7,.2,1); } .reward-tabs { display: flex; gap: var(--s-3); margin-bottom: var(--s-7) } .reward-tab { padding: 7px 15px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-family: var(--font); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .18s; } .reward-tab[aria-pressed="true"] { background: rgba(34,211,166,.12); color: var(--accent2); border-color: var(--border-hi); } .reward-tab:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px } .reward-pane[hidden] { display: none } /* ── v2: dimmed bodies (filter / stage focus) ──────────────── */ .orbit-body--dim { opacity: .16; pointer-events: none } .orbit-body { transition: opacity .25s ease } /* ── v2: clickable ring labels ─────────────────────────────── */ .orbit-ringlabel rect { transition: fill .18s, stroke .18s } .orbit-ringlabel:hover rect { fill: rgba(255,255,255,.09) } .orbit-ringlabel:focus-visible rect { stroke: var(--accent2); stroke-width: 1.5; } /* ── v2: search field above the orbit ──────────────────────── */ .orbit-search { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); } .orbit-search input { flex: 1; min-width: 0; background: rgba(6,10,16,.6); border: 1px solid var(--border); color: var(--ink); border-radius: 10px; padding: 9px 13px; font-size: 13.5px; font-family: var(--font); } .orbit-search input:focus { outline: none; border-color: var(--border-hi) } .orbit-search input::placeholder { color: var(--dim) }