Deploy Nexusmon Community Space

custom.css

@@ -1,96 +1,184 @@
-@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Outfit:wght@400;600;800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Outfit:wght@400;500;600;700;800&display=swap");
 
 :root {
   --nx-bg-0: #07080f;
-  --nx-bg-1: #0d101c;
-  --nx-line: rgba(120, 200, 255, 0.22);
-  --nx-glow: rgba(56, 189, 248, 0.45);
-  --nx-text: #e8f4ff;
+  --nx-bg-1: #0b1020;
+  --nx-bg-2: #111827;
+  --nx-line: rgba(120, 200, 255, 0.18);
+  --nx-line-strong: rgba(120, 200, 255, 0.28);
+  --nx-glow-cyan: rgba(0, 174, 242, 0.24);
+  --nx-glow-amber: rgba(255, 178, 0, 0.16);
+  --nx-text: #ecf7ff;
   --nx-muted: #8ba4c7;
-  --nx-accent: #38bdf8;
-  --nx-warn: #fbbf24;
+  --nx-accent: #00aef2;
+  --nx-accent-2: #ffb200;
 }
 
 .gradio-container {
-  max-width: min(1280px, 96vw) !important;
+  max-width: min(1240px, 96vw) !important;
   margin: 0 auto !important;
   font-family: "Outfit", system-ui, sans-serif !important;
-  background: radial-gradient(1200px 600px at 10% -10%, rgba(56, 189, 248, 0.12), transparent),
-    radial-gradient(900px 500px at 100% 0%, rgba(99, 102, 241, 0.14), transparent),
-    linear-gradient(180deg, var(--nx-bg-0), var(--nx-bg-1)) !important;
+  background:
+    radial-gradient(900px 600px at 10% -10%, rgba(0, 174, 242, 0.16), transparent 60%),
+    radial-gradient(900px 500px at 90% 0%, rgba(255, 178, 0, 0.12), transparent 55%),
+    radial-gradient(1200px 700px at 50% 115%, rgba(35, 198, 255, 0.08), transparent 60%),
+    linear-gradient(180deg, var(--nx-bg-0), var(--nx-bg-1) 44%, var(--nx-bg-2)) !important;
+  color: var(--nx-text) !important;
 }
 
 footer {
   display: none !important;
 }
 
+.gradio-container::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
+  background-size: 54px 54px;
+  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 80%);
+  opacity: 0.45;
+}
+
 .nx-hero {
   position: relative;
-  padding: 1.75rem 1.5rem 1.25rem;
-  border: 1px solid var(--nx-line);
-  border-radius: 14px;
-  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(30, 27, 75, 0.35));
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 20px 80px -30px var(--nx-glow);
   overflow: hidden;
+  padding: 2rem 1.8rem 1.5rem;
+  border: 1px solid var(--nx-line);
+  border-radius: 24px;
+  background:
+    linear-gradient(135deg, rgba(10, 15, 28, 0.92), rgba(16, 24, 39, 0.82)),
+    radial-gradient(120% 140% at 0% 0%, rgba(0, 174, 242, 0.14), transparent 52%),
+    radial-gradient(90% 120% at 100% 0%, rgba(255, 178, 0, 0.1), transparent 45%);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.4),
+    0 26px 90px -28px rgba(0, 0, 0, 0.72),
+    0 0 36px rgba(0, 174, 242, 0.12);
 }
 
 .nx-hero::before {
   content: "";
   position: absolute;
-  inset: 0;
-  background: repeating-linear-gradient(
-    90deg,
-    transparent,
-    transparent 48px,
-    rgba(56, 189, 248, 0.03) 48px,
-    rgba(56, 189, 248, 0.03) 49px
-  );
+  inset: -1px;
+  background:
+    linear-gradient(110deg, transparent 0 40%, rgba(255, 255, 255, 0.05) 50%, transparent 60%),
+    repeating-linear-gradient(90deg, transparent, transparent 52px, rgba(0, 174, 242, 0.03) 52px, rgba(0, 174, 242, 0.03) 53px);
+  opacity: 0.65;
+  pointer-events: none;
+}
+
+.nx-hero::after {
+  content: "";
+  position: absolute;
+  inset: auto -12% -40% auto;
+  width: 260px;
+  height: 260px;
+  background: radial-gradient(circle, rgba(255, 178, 0, 0.14) 0%, rgba(255, 178, 0, 0) 68%);
   pointer-events: none;
 }
 
 .nx-title {
+  position: relative;
+  z-index: 1;
   font-family: "Outfit", sans-serif;
   font-weight: 800;
-  font-size: clamp(1.85rem, 4vw, 2.75rem);
-  letter-spacing: -0.03em;
+  font-size: clamp(2rem, 5vw, 3.35rem);
+  letter-spacing: -0.04em;
+  line-height: 0.95;
   color: var(--nx-text);
-  margin: 0 0 0.35rem;
-  text-shadow: 0 0 40px rgba(56, 189, 248, 0.25);
+  margin: 0 0 0.5rem;
+  text-wrap: balance;
+  text-shadow: 0 0 34px rgba(0, 174, 242, 0.18);
 }
 
 .nx-sub {
-  color: var(--nx-muted);
-  font-size: 1.05rem;
-  max-width: 52ch;
-  line-height: 1.5;
+  position: relative;
+  z-index: 1;
+  color: rgba(235, 247, 255, 0.78);
+  font-size: 1.02rem;
+  max-width: 54ch;
+  line-height: 1.55;
   margin: 0;
 }
 
 .nx-badge-row {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-top: 1rem;
+  gap: 0.55rem;
+  margin-top: 1.05rem;
 }
 
 .nx-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
   font-family: "IBM Plex Mono", monospace;
   font-size: 0.72rem;
   text-transform: uppercase;
   letter-spacing: 0.12em;
-  padding: 0.35rem 0.65rem;
-  border-radius: 6px;
-  border: 1px solid var(--nx-line);
-  color: var(--nx-accent);
-  background: rgba(56, 189, 248, 0.06);
+  padding: 0.42rem 0.7rem;
+  border-radius: 999px;
+  border: 1px solid var(--nx-line-strong);
+  color: #9fe7ff;
+  background: linear-gradient(180deg, rgba(0, 174, 242, 0.1), rgba(0, 174, 242, 0.05));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
 
 .nx-card {
+  position: relative;
   border: 1px solid var(--nx-line) !important;
-  border-radius: 12px !important;
-  background: rgba(15, 23, 42, 0.55) !important;
+  border-radius: 22px !important;
+  background:
+    linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(12, 17, 29, 0.9)) !important;
+  box-shadow:
+    0 18px 50px -30px rgba(0, 0, 0, 0.65),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  overflow: hidden;
+}
+
+.nx-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 20% 0%, rgba(0, 174, 242, 0.1), transparent 28%),
+    radial-gradient(circle at 100% 0%, rgba(255, 178, 0, 0.06), transparent 20%);
+  pointer-events: none;
+}
+
+.nx-card .gradio-markdown,
+.nx-card .prose,
+.nx-card p,
+.nx-card li {
+  color: rgba(236, 247, 255, 0.88);
 }
 
-.nx-mono {
+.nx-card h3,
+.nx-card h4 {
+  color: var(--nx-text);
+  letter-spacing: -0.02em;
+}
+
+.nx-card code,
+.nx-mono,
+pre {
   font-family: "IBM Plex Mono", monospace !important;
 }
+
+.nx-card a {
+  color: #9fe7ff;
+  text-decoration: none;
+}
+
+.nx-card a:hover {
+  text-decoration: underline;
+}
+
+.gradio-container .wrap {
+  max-width: 1240px !important;
+}