Upload style1.css

style1.css

@@ -0,0 +1,322 @@
+/* ============================================
+   GLOBAL BASE STYLES
+   ============================================ */
+body, 
+html,
+.gradio-container, 
+.contain {
+    margin: 0;
+    padding: 0;
+    position: relative;
+    background-size: cover;
+    background-attachment: fixed;
+    min-height: 100vh;
+    overflow-x: hidden;
+}
+
+body  {
+    /* background: 
+        radial-gradient(circle at 20% 15%, rgba(59, 130, 246, 0.12), transparent 40%),
+        radial-gradient(circle at 80% 25%, rgba(23, 194, 106, 0.794), transparent 45%),
+        radial-gradient(circle at 50% 70%, rgba(16, 185, 129, 0.08), transparent 50%),
+        radial-gradient(circle at 10% 85%, rgba(236, 72, 153, 0.08), transparent 45%),
+        linear-gradient(135deg, #0a0e27 0%, #1a1f3a 25%, #0f1629 50%, #189f18 75%, #0d1425 100%) !important;
+    background-size: cover;
+    background-attachment: fixed; */
+}
+
+/* ============================================
+   TECH GRID PATTERN
+   ============================================ */
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: 
+        linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
+    background-size: 60px 60px;
+    pointer-events: none;
+    z-index: 0;
+    background: 
+        radial-gradient(circle at 20% 15%, rgba(59, 130, 246, 0.12), transparent 40%),
+        radial-gradient(circle at 80% 25%, rgba(139, 92, 246, 0.1), transparent 45%),
+        radial-gradient(circle at 50% 70%, rgba(16, 185, 129, 0.08), transparent 50%),
+        radial-gradient(circle at 10% 85%, rgba(236, 72, 153, 0.08), transparent 45%),
+        linear-gradient(135deg, #0a0e27 0%, #1a1f3a 25%, #0f1629 50%, #1e2139 75%, #0d1425 100%) !important;
+    /* animation: gridScroll 30s linear infinite; */
+}
+
+/* Hexagon pattern overlay */
+body::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: 
+        repeating-linear-gradient(45deg, transparent, transparent 25px, rgba(174, 246, 59, 0.015) 35px, rgba(93, 205, 18, 0.015) 70px),
+        repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(139, 92, 246, 0.015) 35px, rgba(139, 92, 246, 0.015) 70px);
+    pointer-events: none;
+    z-index: 0;
+    opacity: 0.6;
+}
+
+/* ============================================
+   FLOATING GLOWING ORBS
+   ============================================ */
+.contain::before {
+    content: '';
+    position: fixed;
+    top: 10%;
+    right: 15%;
+    width: 600px;
+    height: 600px;
+    background: radial-gradient(circle, rgba(59, 130, 246, 0.15), transparent 70%);
+    border-radius: 50%;
+    filter: blur(80px);
+    /* animation: floatOrb1 25s ease-in-out infinite; */
+    pointer-events: none;
+    z-index: 0;
+}
+
+.contain::after {
+    content: '';
+    position: fixed;
+    bottom: 15%;
+    left: 10%;
+    width: 500px;
+    height: 500px;
+    background: radial-gradient(circle, rgba(139, 92, 246, 0.12), transparent 70%);
+    border-radius: 50%;
+    filter: blur(70px);
+    /* animation: floatOrb2 30s ease-in-out infinite; */
+    pointer-events: none;
+    z-index: 0;
+}
+
+/* ============================================
+   GRADIO CONTAINER IMPROVEMENTS
+   ============================================ */
+.gradio-container {
+    max-width: 1400px !important;
+    margin: 0 auto !important;
+    padding: 20px 40px !important;
+    position: relative;
+    z-index: 1;
+}
+
+/* Ensure all content is above background effects */
+.gradio-container > * {
+    position: relative;
+    z-index: 1;
+}
+
+/* ============================================
+   IMPROVED ROW & COLUMN SPACING
+   ============================================ */
+.gradio-container .row {
+    gap: 24px !important;
+    margin-bottom: 30px !important;
+}
+
+.gradio-container .column {
+    padding: 0 12px !important;
+}
+
+/* ============================================
+   CARD STYLING ENHANCEMENTS
+   ============================================ */
+.gradio-container div[style*="background:white"] {
+    border-radius: 20px !important;
+    transition: all 0.3s ease !important;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
+.gradio-container div[style*="background:white"]:hover {
+    transform: translateY(-8px) !important;
+    box-shadow: 0px 20px 40px rgba(0,0,0,0.15) !important;
+}
+
+/* ============================================
+   TEXT STYLING
+   ============================================ */
+h1, h2, h3, h4, h5, h6 {
+    letter-spacing: 0.5px;
+    line-height: 1.3;
+}
+
+ul {
+    margin-left: 80px;
+}
+
+ul, li {
+    color: white;
+    line-height: 1.8;
+}
+
+
+
+p {
+    line-height: 1.7;
+}
+
+/* ============================================
+   BUTTON IMPROVEMENTS
+   ============================================ */
+a[style*="Launch Agent"],
+button {
+    box-shadow: 0 4px 12px rgba(32, 76, 108, 0.3) !important;
+    transition: all 0.3s ease !important;
+    font-weight: 600 !important;
+}
+
+a[style*="Launch Agent"]:hover {
+    box-shadow: 0 8px 20px rgba(32, 76, 108, 0.5) !important;
+}
+
+/* ============================================
+   SYSTEM STATUS BOX REFINEMENT
+   ============================================ */
+div[style*="margin-top: 50px"] {
+    backdrop-filter: blur(12px) !important;
+    border: 1px solid rgba(255, 255, 255, 0.15) !important;
+}
+
+/* ============================================
+   "HOW IT WORKS" SECTION ALIGNMENT
+   ============================================ */
+.gradio-container div[style*="margin-left: 130px"] {
+    margin-left: 0px !important;
+    padding: 30px 40px !important;
+    background: rgba(255, 255, 255, 0.03) !important;
+    border-radius: 16px !important;
+    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+    backdrop-filter: blur(8px) !important;
+    transition: all 0.3s ease !important;
+}
+
+.gradio-container div[style*="margin-left: 130px"]:hover {
+    background: rgba(255, 255, 255, 0.05) !important;
+    border-color: rgba(59, 130, 246, 0.3) !important;
+    transform: translateY(-4px);
+}
+
+.gradio-container div[style*="margin-left: 130px"] h3 {
+    color: #ffffff !important;
+    font-size: 1.4em !important;
+    margin-bottom: 16px !important;
+    font-weight: 700 !important;
+    background: linear-gradient(to right, #3B82F6, #8B5CF6);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.gradio-container div[style*="margin-left: 130px"] ul {
+    margin: 0 !important;
+    padding-left: 24px !important;
+}
+
+.gradio-container div[style*="margin-left: 130px"] li {
+    margin: 10px 0 !important;
+    color: rgba(255, 255, 255, 0.85) !important;
+    font-size: 0.95em !important;
+}
+
+/* ============================================
+   HEADER SECTION REFINEMENT
+   ============================================ */
+div[style*="border-bottom-left-radius:40px"] {
+    margin-bottom: 40px !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
+/* ============================================
+   RESPONSIVE IMPROVEMENTS
+   ============================================ */
+@media (max-width: 1200px) {
+    .gradio-container {
+        max-width: 95% !important;
+        padding: 20px !important;
+    }
+}
+
+@media (max-width: 768px) {
+    .gradio-container div[style*="margin-left: 130px"] {
+        padding: 20px !important;
+    }
+    
+    div[style*="flex:1; display:flex"] {
+        flex-direction: column !important;
+    }
+}
+
+@keyframes gridScroll {
+    0% {
+        transform: translate(0, 0);
+    }
+    100% {
+        transform: translate(60px, 60px);
+    }
+}
+
+@keyframes floatOrb1 {
+    0%, 100% {
+        transform: translate(0, 0) scale(1);
+        opacity: 0.4;
+    }
+    33% {
+        transform: translate(-50px, 40px) scale(1.15);
+        opacity: 0.6;
+    }
+    66% {
+        transform: translate(30px, -30px) scale(0.9);
+        opacity: 0.5;
+    }
+}
+
+@keyframes floatOrb2 {
+    0%, 100% {
+        transform: translate(0, 0) scale(1);
+        opacity: 0.35;
+    }
+    33% {
+        transform: translate(40px, -50px) scale(0.85);
+        opacity: 0.5;
+    }
+    66% {
+        transform: translate(-35px, 35px) scale(1.1);
+        opacity: 0.45;
+    }
+}
+
+/* ============================================
+   SMOOTH SCROLLING
+   ============================================ */
+html {
+    scroll-behavior: smooth;
+}
+
+/* ============================================
+   ACCESSIBILITY & POLISH
+   ============================================ */
+* {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+::selection {
+    background: rgba(59, 130, 246, 0.3);
+    color: white;
+}
+
+/* Force page header title to stay on one line */
+h1 {
+    white-space: nowrap !important;
+    width: auto !important;
+}