Webapp stylings (#1916)

frontend/apps/artcraft-webapp/src/styles.css

@@ -5,36 +5,37 @@
 @layer base {
   :root {
     /* Sidebar tokens (consumed by tailwind colors in tailwind.config.js).
-       Stored as raw hex so we can reference them via theme() if needed. */
-    --sidebar-bg: #1a1a1a;
+       Brutalist system: near-black surfaces, white/15 hairlines, white
+       accent for selection/focus. */
+    --sidebar-bg: #1e1f22;
     --sidebar-fg: rgba(255, 255, 255, 0.72);
-    --sidebar-border: rgba(64, 64, 64, 0.5);
-    --sidebar-accent: rgba(255, 255, 255, 0.06);
+    --sidebar-border: rgba(255, 255, 255, 0.15);
+    --sidebar-accent: rgba(255, 255, 255, 0.08);
     --sidebar-accent-fg: #ffffff;
-    --sidebar-ring: rgba(45, 129, 255, 0.4);
+    --sidebar-ring: rgba(255, 255, 255, 0.4);
 
     /* shadcn design tokens consumed by @storyteller/ui-video-editor.
        Dark-theme palette (the editor only runs in dark mode today).
        --primary matches the webapp's brand blue (#2d81ff). */
-    --background: 0 0% 9%;
+    --background: 240 5% 8%;
     --foreground: 0 0% 98%;
-    --card: 0 0% 12%;
+    --card: 240 11% 7%;
     --card-foreground: 0 0% 98%;
-    --popover: 0 0% 12%;
+    --popover: 240 4% 5%;
     --popover-foreground: 0 0% 98%;
     --primary: 216 100% 59%;
     --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 24%;
+    --secondary: 240 4% 9%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 18%;
+    --muted: 240 4% 9%;
     --muted-foreground: 0 0% 64%;
-    --accent: 0 0% 16%;
+    --accent: 240 4% 9%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 70% 50%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 18%;
-    --input: 0 0% 18%;
-    --ring: 217 91% 60%;
+    --border: 0 0% 100% / 0.15;
+    --input: 0 0% 100% / 0.15;
+    --ring: 0 0% 100% / 0.6;
 
     /* ── Motion tokens ──────────────────────────────────────────────────
        Shared easing curves + durations so motion across the app feels like
@@ -71,9 +72,25 @@
   }
 }
 
+/* Subtle 3px corners on interactive controls. The brutalist system keeps
+   large surfaces (panels, modals, tables), passive labels, and media tiles
+   square; anything pressable gets a soft corner for affordance. Explicit
+   rounding elsewhere uses the same rounded-[3px] value. Tailwind radius
+   utilities (rounded-full, rounded-none) still win — the utilities layer
+   is emitted after base. */
+@layer base {
+  button,
+  select,
+  textarea,
+  input:not([type="radio"]):not([type="range"]),
+  [role="button"] {
+    border-radius: 3px;
+  }
+}
+
 * {
   scrollbar-width: thin;
-  scrollbar-color: #363636 #171717;
+  scrollbar-color: #2c2c2f #0b0b0c;
 }
 
 *::-webkit-scrollbar {
@@ -81,13 +98,12 @@
 }
 
 *::-webkit-scrollbar-track {
-  background: #171717;
+  background: #0b0b0c;
 }
 
 *::-webkit-scrollbar-thumb {
-  background-color: #363636;
-  border-radius: 4px;
-  border: 2px solid #171717;
+  background-color: #2c2c2f;
+  border: 2px solid #0b0b0c;
 }
 
 .scrollbar-hidden {
@@ -100,6 +116,9 @@
 }
 
 @layer base {
+  /* Display face: Archivo — an industrial grotesque that matches the
+     hard-edged HUD system better than Bricolage's editorial quirk.
+     Weights still come from per-usage utilities. */
   h1,
   h2,
   h3,
@@ -107,7 +126,7 @@
   h5,
   h6 {
     font-family:
-      "Outfit",
+      "Archivo",
       system-ui,
       -apple-system,
       BlinkMacSystemFont,
@@ -116,12 +135,19 @@
       "Helvetica Neue",
       Arial,
       sans-serif;
-    letter-spacing: -0.02em;
+    letter-spacing: -0.03em;
+  }
+
+  /* Only display-scale headings run expanded on the wdth axis; compact
+     headings (card titles, section labels) stay at normal width so they
+     don't truncate in tight layouts. */
+  h1,
+  h2 {
+    font-stretch: 118%;
   }
 
   body {
     font-family:
-      "Source Sans 3",
       system-ui,
       -apple-system,
       BlinkMacSystemFont,
@@ -131,11 +157,21 @@
       Arial,
       sans-serif;
     color: #ffffff;
-    background-color: #121212;
+    background-color: #0b0b0c;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
+  /* Mono HUD micro-label, matching the marketing site's .hud-label. */
+  .hud-label {
+    font-family:
+      "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 0.6875rem;
+    font-weight: 500;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+  }
+
   .font-serif-italic {
     font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
     font-style: italic;
@@ -144,6 +180,15 @@
   }
 }
 
+/* Display utility carries the ax-display reference treatment (Archivo at
+   weight 620, 118% width), matching the marketing site. Plain (unlayered)
+   rule so it wins over font-weight utilities like font-semibold, which are
+   emitted at the top of the file. */
+.font-display {
+  font-stretch: 118%;
+  font-weight: 620;
+}
+
 /* Shared component utilities (matching desktop app theme) */
 .bg-ui-badge {
   background-color: rgba(0, 0, 0, 0.4);
@@ -153,16 +198,11 @@
   filter: invert(1);
 }
 
-/* Gradient panel surface used by pagescene + lib components. */
+/* Panel surface used by pagescene + lib components. Brutalist system:
+   flat near-black, no gradient (class name kept for lib compatibility). */
 .bg-ui-panel-gradient {
-  background:
-    radial-gradient(
-      60.68% 60.68% at 50% 0%,
-      rgba(255, 255, 255, 0.08) 0%,
-      rgba(0, 0, 0, 0) 70%
-    ),
-    #1f1f1f;
-  background-color: #1f1f1f;
+  background: #101014;
+  background-color: #101014;
 }
 
 .prevent-select {
@@ -233,19 +273,18 @@
   }
 }
 
+/* Brutalist system: former "glass" surfaces are now flat near-black panels
+   with white/15 hairline borders (class names kept for lib compatibility). */
 @layer components {
   .glass {
-    @apply relative border border-white/10 shadow-lg backdrop-blur-3xl transition-colors duration-300;
-    @apply bg-[#303032]/90 !important;
+    @apply relative border border-white/15 transition-colors duration-300 rounded-[3px] backdrop-blur-sm;
+    @apply bg-[#1E1F22]/95 !important;
   }
 }
 
 .liquid-glass {
-  background: #232323c0;
-  border: 1px solid #ffffff14;
-  backdrop-filter: blur(18px) saturate(180%);
-  -webkit-backdrop-filter: blur(12px) saturate(180%);
-  box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.6);
+  background: rgba(11, 11, 12, 0.92);
+  border: 1px solid rgba(255, 255, 255, 0.15);
 }
 
 /* Minimal thin scrollbar for prompt textareas */
@@ -264,7 +303,6 @@
 
 .promptbox-scrollbar::-webkit-scrollbar-thumb {
   background-color: rgba(255, 255, 255, 0.2);
-  border-radius: 9999px;
 }
 
 .promptbox-scrollbar::-webkit-scrollbar-thumb:hover {
@@ -412,56 +450,6 @@
   @apply bg-center;
 }
 
-@property --angle {
-  syntax: "<angle>";
-  inherits: false;
-  initial-value: 0deg;
-}
-
-@keyframes rotate {
-  0% {
-    --angle: 0deg;
-  }
-
-  100% {
-    --angle: 360deg;
-  }
-}
-
-.glow-border-animated {
-  position: relative;
-  overflow: hidden;
-}
-
-.glow-border-animated::before {
-  content: "";
-  position: absolute;
-  inset: -3px;
-  background: conic-gradient(
-    from var(--angle),
-    transparent 0%,
-    transparent 80%,
-    rgba(147, 197, 253, 0.4) 85%,
-    rgba(191, 219, 254, 0.9) 90%,
-    rgba(255, 255, 255, 1) 92.5%,
-    rgba(191, 219, 254, 0.9) 95%,
-    rgba(147, 197, 253, 0.4) 100%,
-    transparent 100%
-  );
-  border-radius: inherit;
-  animation: rotate 2.2s linear infinite;
-  z-index: -1;
-}
-
-.glow-border-animated::after {
-  content: "";
-  position: absolute;
-  inset: 2px;
-  background: inherit;
-  border-radius: inherit;
-  z-index: -1;
-}
-
 /* Mobile bottom-sheet (SettingsDrawer). The shadcn Sheet relies on the
    tailwindcss-animate plugin, which isn't enabled here, so we drive the
    slide ourselves off Radix's data-state. Defining a closed-state animation