nitrostack 1.0.55 → 1.0.57

package/src/studio/app/globals.css

@@ -4,56 +4,107 @@
 
 @layer base {
   :root {
-    /* Professional Light Theme */
-    --background: 249 250 251;
-    --foreground: 17 24 39;
-    --card: 255 255 255;
-    --card-foreground: 17 24 39;
-    --popover: 255 255 255;
-    --popover-foreground: 17 24 39;
-    --primary: 212 175 55; /* Gold #D4AF37 */
-    --primary-foreground: 17 24 39;
-    --secondary: 243 244 246;
-    --secondary-foreground: 17 24 39;
-    --muted: 243 244 246;
-    --muted-foreground: 107 114 128;
-    --accent: 212 175 55;
-    --accent-foreground: 17 24 39;
-    --destructive: 239 68 68;
-    --destructive-foreground: 255 255 255;
-    --border: 229 231 235;
-    --input: 229 231 235;
-    --ring: 212 175 55;
+    /* Nitrocloud Light Theme - Following Branding Guidelines */
+    --background: 0 0% 100%;
+    /* #FFFFFF */
+    --foreground: 222.2 84% 4.9%;
+    /* #020617 - Near black */
+    --card: 0 0% 100%;
+    /* #FFFFFF */
+    --card-foreground: 222.2 84% 4.9%;
+    /* #020617 */
+    --popover: 0 0% 100%;
+    /* #FFFFFF */
+    --popover-foreground: 222.2 84% 4.9%;
+    /* #020617 */
+    --primary: 217 91% 60%;
+    /* #3B9FFF - Nitrocloud Blue */
+    --primary-foreground: 210 40% 98%;
+    /* #F8FAFC */
+    --secondary: 210 40% 96.1%;
+    /* #F1F5F9 */
+    --secondary-foreground: 222.2 84% 4.9%;
+    /* #020617 */
+    --muted: 210 40% 96.1%;
+    /* #F1F5F9 */
+    --muted-foreground: 215.4 16.3% 46.9%;
+    /* #64748B */
+    --accent: 217 91% 60%;
+    /* #3B9FFF - Nitrocloud Blue */
+    --accent-foreground: 222.2 84% 4.9%;
+    /* #020617 */
+    --destructive: 0 84.2% 60.2%;
+    /* #EF4444 */
+    --destructive-foreground: 0 0% 100%;
+    /* #FFFFFF */
+    --border: 214.3 31.8% 91.4%;
+    /* #E2E8F0 */
+    --input: 214.3 31.8% 91.4%;
+    /* #E2E8F0 */
+    --ring: 217 91% 60%;
+    /* #3B9FFF - Nitrocloud Blue */
     --radius: 0.75rem;
-    --success: 34 197 94;
-    --warning: 251 191 36;
-    --info: 59 130 246;
+    /* 12px - Global default */
+    --success: 142.1 76.2% 36.3%;
+    /* #22C55E */
+    --warning: 38 92% 50%;
+    /* #F59E0B */
+    --info: 217 91% 60%;
+    /* #3B9FFF */
+
+    /* Nitrocloud Gradient */
+    --nitrocloud-gradient-start: 217 91% 60%;
+    /* Blue */
+    --nitrocloud-gradient-end: 221 83% 53%;
+    /* Deep Blue-Purple */
   }
 
   .dark {
-    /* Professional Dark Theme */
-    --background: 9 9 11;
-    --foreground: 250 250 250;
-    --card: 24 24 27;
-    --card-foreground: 250 250 250;
-    --popover: 24 24 27;
-    --popover-foreground: 250 250 250;
-    --primary: 212 175 55; /* Gold #D4AF37 */
-    --primary-foreground: 9 9 11;
-    --secondary: 39 39 42;
-    --secondary-foreground: 250 250 250;
-    --muted: 39 39 42;
-    --muted-foreground: 161 161 170;
-    --accent: 212 175 55;
-    --accent-foreground: 9 9 11;
-    --destructive: 239 68 68;
-    --destructive-foreground: 255 255 255;
-    --border: 39 39 42;
-    --input: 39 39 42;
-    --ring: 212 175 55;
-    --success: 34 197 94;
-    --warning: 251 191 36;
-    --info: 59 130 246;
+    /* Nitrocloud Dark Theme - Following Branding Guidelines */
+    --background: 222.2 84% 4.9%;
+    /* #020617 - Deep dark blue */
+    --foreground: 210 40% 98%;
+    /* #F8FAFC */
+    --card: 217.2 32.6% 17.5%;
+    /* #1E293B */
+    --card-foreground: 210 40% 98%;
+    /* #F8FAFC */
+    --popover: 217.2 32.6% 17.5%;
+    /* #1E293B */
+    --popover-foreground: 210 40% 98%;
+    /* #F8FAFC */
+    --primary: 217 91% 60%;
+    /* #3B9FFF - Brighter in dark */
+    --primary-foreground: 222.2 47.4% 11.2%;
+    /* #0F172A */
+    --secondary: 217.2 32.6% 17.5%;
+    /* #1E293B */
+    --secondary-foreground: 210 40% 98%;
+    /* #F8FAFC */
+    --muted: 217.2 32.6% 17.5%;
+    /* #1E293B */
+    --muted-foreground: 215 20.2% 65.1%;
+    /* #94A3B8 */
+    --accent: 217 91% 60%;
+    /* #3B9FFF */
+    --accent-foreground: 210 40% 98%;
+    /* #F8FAFC */
+    --destructive: 0 62.8% 30.6%;
+    /* #991B1B */
+    --destructive-foreground: 210 40% 98%;
+    /* #F8FAFC */
+    --border: 217.2 32.6% 17.5%;
+    /* #1E293B */
+    --input: 217.2 32.6% 17.5%;
+    /* #1E293B */
+    --ring: 217 91% 60%;
+    /* #3B9FFF */
+    --success: 142.1 70.6% 45.3%;
+    /* #10B981 */
+    --warning: 38 92% 50%;
+    /* #F59E0B */
+    --info: 217 91% 60%;
+    /* #3B9FFF */
   }
 
   * {
@@ -68,11 +119,18 @@
     -moz-osx-font-smoothing: grayscale;
   }
 
-  code, pre, .font-mono {
+  code,
+  pre,
+  .font-mono {
     font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
   }
 
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     @apply font-semibold tracking-tight;
   }
 
@@ -273,12 +331,10 @@
   }
 
   .shimmer {
-    background: linear-gradient(
-      90deg,
-      hsl(var(--muted)) 0%,
-      hsl(var(--muted) / 0.5) 50%,
-      hsl(var(--muted)) 100%
-    );
+    background: linear-gradient(90deg,
+        hsl(var(--muted)) 0%,
+        hsl(var(--muted) / 0.5) 50%,
+        hsl(var(--muted)) 100%);
     background-size: 200% 100%;
     animation: shimmer 1.5s ease-in-out infinite;
   }
@@ -287,6 +343,7 @@
     0% {
       background-position: -200% 0;
     }
+
     100% {
       background-position: 200% 0;
     }
@@ -299,6 +356,7 @@
     opacity: 0;
     transform: translateY(8px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -310,6 +368,7 @@
     transform: translateX(-16px);
     opacity: 0;
   }
+
   to {
     transform: translateX(0);
     opacity: 1;
@@ -321,6 +380,7 @@
     opacity: 0;
     transform: scale(0.95);
   }
+
   to {
     opacity: 1;
     transform: scale(1);
@@ -339,15 +399,31 @@
   animation: scaleIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* Gold Accent Effects */
-.gold-glow {
-  box-shadow: 0 0 24px rgba(212, 175, 55, 0.15),
-              0 0 12px rgba(212, 175, 55, 0.1);
+/* Nitrocloud Brand Gradient */
+.nitrocloud-gradient {
+  background: linear-gradient(135deg,
+      hsl(var(--nitrocloud-gradient-start)),
+      hsl(var(--nitrocloud-gradient-end)));
 }
 
-.dark .gold-glow {
-  box-shadow: 0 0 32px rgba(212, 175, 55, 0.25),
-              0 0 16px rgba(212, 175, 55, 0.15);
+.nitrocloud-text-gradient {
+  background: linear-gradient(135deg,
+      hsl(var(--nitrocloud-gradient-start)),
+      hsl(var(--nitrocloud-gradient-end)));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Nitrocloud Blue Glow Effects */
+.nitrocloud-glow {
+  box-shadow: 0 0 24px rgba(59, 159, 255, 0.15),
+    0 0 12px rgba(59, 159, 255, 0.1);
+}
+
+.dark .nitrocloud-glow {
+  box-shadow: 0 0 32px rgba(59, 159, 255, 0.25),
+    0 0 16px rgba(59, 159, 255, 0.15);
 }
 
 /* Glassmorphism Effect */
@@ -364,13 +440,13 @@
 /* Professional Hover Effects */
 .hover-lift {
   transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .hover-lift:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.12),
-              0 8px 16px -4px rgba(0, 0, 0, 0.08);
+    0 8px 16px -4px rgba(0, 0, 0, 0.08);
 }
 
 /* Focus Visible Styles */
@@ -407,4 +483,4 @@
 
 .empty-state-description {
   @apply text-sm text-muted-foreground max-w-md;
-}
+}