refactor(frontend): retire legacy CSS and isolate visual artwork

2026-10-07 10:06:11 -03:00
parent f3bae8ae0c
commit 65eaf36278
16 changed files with 1376 additions and 5334 deletions
@@ -0,0 +1,128 @@
+/* Minimal element defaults and page background. Preflight is intentionally not enabled. */
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
+  font-family: var(--font-sans);
+  color: var(--text);
+  min-height: 100vh;
+  min-height: 100svh;
+  min-height: 100dvh;
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  position: relative;
+  background:
+    radial-gradient(1200px 800px at 15% -10%, rgba(139, 92, 246, 0.3) 0%, transparent 60%),
+    radial-gradient(900px 700px at 110% 10%, rgba(236, 72, 153, 0.22) 0%, transparent 55%),
+    radial-gradient(1000px 800px at 50% 120%, rgba(34, 211, 238, 0.22) 0%, transparent 60%),
+    radial-gradient(ellipse at 50% 50%, #0e1019 0%, var(--bg) 65%);
+  background-attachment: fixed;
+}
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background-image:
+    radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
+    radial-gradient(rgba(139, 92, 246, 0.035) 1px, transparent 1px);
+  background-size:
+    42px 42px,
+    42px 42px;
+  background-position:
+    0 0,
+    21px 21px;
+  mix-blend-mode: screen;
+  opacity: 0.55;
+  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
+}
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(600px 600px at 20% 80%, rgba(139, 92, 246, 0.1), transparent 70%),
+    radial-gradient(500px 500px at 80% 20%, rgba(34, 211, 238, 0.08), transparent 70%);
+  animation: auroraShift 22s ease-in-out infinite alternate;
+}
+
+button {
+  font-family: inherit;
+}
+
+a {
+  color: var(--text);
+  text-decoration: none;
+  border-bottom: 1px solid var(--border-strong);
+}
+a:hover {
+  border-bottom-color: var(--text);
+}
+html[data-theme="white"] body {
+  background: var(--bg);
+  color: var(--text);
+  background-image: none;
+}
+html[data-theme="white"] body::before,
+html[data-theme="white"] body::after {
+  display: none;
+  background-image: none;
+  animation: none;
+}
+#root {
+  display: contents;
+}
+@keyframes auroraShift {
+  0% {
+    transform: translate3d(0, 0, 0) scale(1);
+    opacity: 0.9;
+  }
+  50% {
+    transform: translate3d(3%, -2%, 0) scale(1.08);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(-2%, 2%, 0) scale(1.02);
+    opacity: 0.85;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --audio-level: 0 !important;
+    --ai-audio-level: 0 !important;
+    --bar0: 0 !important;
+    --bar1: 0 !important;
+    --bar2: 0 !important;
+    --bar3: 0 !important;
+    --bar4: 0 !important;
+  }
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition: none !important;
+    scroll-behavior: auto !important;
+  }
+  .circle.state-ai-speaking .bar,
+  .circle.state-user-speaking .bar {
+    transform: none !important;
+  }
+}