File size: 3,279 Bytes
e38d2c0 d21d16c e38d2c0 9dc9b9a e79b700 e38d2c0 d21d16c e38d2c0 9dc9b9a b4ad384 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | @import "tailwindcss";
:root {
--bg-deep: #03060d;
--bg-mid: #080f18;
--panel: #0e1826;
--panel-border: rgba(148, 180, 214, 0.14);
--foreground: #e9eef5;
--muted: #8fa3bd;
--accent-teal: #2dd4bf;
--accent-blue: #3b82f6;
--accent-glow: rgba(45, 130, 200, 0.35);
--gold: #f0b429;
--gold-bright: #ffd873;
--topnav-h: 48px;
}
@theme inline {
--color-background: var(--bg-deep);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
body {
color: var(--foreground);
background:
radial-gradient(ellipse 90% 60% at 50% 100%, rgba(45, 212, 191, 0.11), transparent 60%),
radial-gradient(ellipse 70% 50% at 80% 0%, rgba(59, 130, 246, 0.14), transparent 55%),
linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-mid) 55%, var(--bg-deep) 100%);
background-attachment: fixed;
min-height: 100dvh;
}
.glass-panel {
background: color-mix(in srgb, var(--panel) 88%, transparent);
border: 1px solid var(--panel-border);
backdrop-filter: blur(14px);
}
.glass-pill {
background: color-mix(in srgb, var(--panel) 92%, transparent);
border: 1px solid var(--panel-border);
backdrop-filter: blur(14px);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}
.accent-send {
background: radial-gradient(circle at 30% 30%, #5eb8ff, var(--accent-blue));
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 18px rgba(59, 130, 246, 0.55);
}
.text-gradient {
background: linear-gradient(90deg, #ffffff 0%, #cdeaff 45%, var(--accent-teal) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
::selection {
background: var(--accent-blue);
color: white;
}
/* scrollbars for panels */
* {
scrollbar-width: thin;
scrollbar-color: var(--panel-border) transparent;
}
/* Node landing: scale/fade in, then a small gold sunburst flash to mark arrival */
@keyframes node-land {
0% { opacity: 0; transform: scale(0.82); }
55% { opacity: 1; transform: scale(1.04); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes node-sunburst {
0% { box-shadow: 0 0 0 0 rgba(240, 180, 41, 0); }
35% { box-shadow: 0 0 22px 6px rgba(240, 180, 41, 0.55), 0 0 0 1px rgba(240, 180, 41, 0.4); }
100% { box-shadow: 0 0 0 0 rgba(240, 180, 41, 0); }
}
.node-landing {
animation: node-land 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.1) both,
node-sunburst 0.9s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
.node-landing { animation: none; }
}
.deep-dive-btn {
background: linear-gradient(135deg, var(--gold-bright), var(--gold));
color: #241a03;
font-weight: 700;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 2px 10px rgba(240, 180, 41, 0.45);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.deep-dive-btn:hover {
transform: translateY(-1px);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 4px 16px rgba(240, 180, 41, 0.65);
}
/* Grouped-by-layer reflow: a slow, deliberate glide into clusters rather
than the burst-in landing animation used on initial load / layout switch. */
.grouping-transition .react-flow__node {
transition: transform 0.95s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
.grouping-transition .react-flow__node { transition: none; }
}
|