bloby-bot 0.37.1 → 0.39.1

package/workspace/client/src/styles/globals.css

@@ -3,7 +3,7 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
-  --font-sans: system-ui, -apple-system, sans-serif;
+  --font-sans: 'Inter', 'Inter Display', system-ui, -apple-system, sans-serif;
   --color-background: #0A0A0A;
   --color-foreground: #f5f5f5;
   --color-card: #2a2a2a;
@@ -44,16 +44,76 @@ html {
   -ms-touch-action: manipulation;
 }
 
+html {
+  background-color: #000;
+}
+
 body {
-  background-color: var(--color-background);
-  background-image: radial-gradient(circle, #1f1f1f 1.2px, transparent 1.2px);
-  background-size: 20px 20px;
+  background-color: transparent;
+  isolation: isolate;
   color: var(--color-foreground);
+  font-family: 'Inter', 'Inter Display', system-ui, -apple-system, sans-serif;
+  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overscroll-behavior: none;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  letter-spacing: -0.02em;
+}
+
+/* ── Glass utilities ── */
+.glass-card {
+  position: relative;
+  background: rgba(20, 20, 25, 0.35);
+  backdrop-filter: blur(24px) saturate(140%);
+  -webkit-backdrop-filter: blur(24px) saturate(140%);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 28px;
+  box-shadow:
+    0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
+    0 20px 60px -20px rgba(0, 0, 0, 0.45);
+}
+.glass-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 35%, transparent 100%);
+  mask: linear-gradient(180deg, #000, transparent 60%);
+  -webkit-mask: linear-gradient(180deg, #000, transparent 60%);
+}
+
+.glass-card-md {
+  border-radius: 20px;
+}
+
+.glass-pill {
+  position: relative;
+  background: rgba(20, 20, 25, 0.35);
+  backdrop-filter: blur(24px) saturate(140%);
+  -webkit-backdrop-filter: blur(24px) saturate(140%);
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  box-shadow:
+    0 1px 0 0 rgba(255, 255, 255, 0.08) inset,
+    0 10px 40px -15px rgba(0, 0, 0, 0.4);
+}
+.glass-pill::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 35%, transparent 100%);
+}
+
+.glass-inner-active {
+  background: rgba(255, 255, 255, 0.14);
+  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12) inset;
+}
+
 ::selection {
   background-color: rgba(175, 39, 227, 0.25);
 }
@@ -117,3 +177,28 @@ body {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
+
+/* ── Workspace Lock animations ── */
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
+  20%, 40%, 60%, 80% { transform: translateX(4px); }
+}
+
+.animate-shake {
+  animation: shake 0.45s cubic-bezier(.36,.07,.19,.97);
+}
+
+@keyframes scale-in-dot {
+  from { transform: scale(0); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+.animate-scale-in {
+  animation: scale-in-dot 0.15s ease-out forwards;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}