| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
|
|
| body, |
| html { |
| position: relative; |
| min-height: 100vh; |
| } |
|
|
| body { |
| |
| |
| |
| |
| |
| |
| |
| |
| } |
|
|
| |
| |
| |
| body { |
| position: relative; |
| 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; |
| z-index: 1; |
| transform: unset !important; |
| 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; |
| |
| } |
|
|
| gradio-app { |
| background-color: transparent !important; |
| } |
|
|
| |
| body::after { |
| content: ''; |
| position: absolute; |
| z-index: -1; |
| 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; |
| opacity: 0.6; |
| } |
|
|
| .header { |
| padding: 40px 30px; |
| background: |
| radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.25), transparent 55%), |
| radial-gradient(circle at 85% 20%, rgba(45, 135, 255, 0.22), transparent 70%), |
| linear-gradient(135deg, #0e1a2b, #0f1032, #03011a); |
| color: white; |
| border-bottom-left-radius: 40px; |
| border-bottom-right-radius: 40px; |
| box-shadow: 0 50px 90px -20px rgba(0, 0, 0, 0.6); |
|
|
| display: flex; |
| align-items: center; |
| width: 100%; |
| } |
|
|
| .header-logo { |
| flex: unset; |
| display: flex; |
| justify-content: flex-start; |
| width: 100px; |
| } |
|
|
| .header h1 { |
| margin: 0; |
| flex: 1; |
| text-align: center; |
| font-size: 2.5em; |
| font-weight: 800; |
| letter-spacing: 1px; |
| background: linear-gradient(to right, #fff 20%, #dce4ff 40%, #cedcff 60%); |
| -webkit-background-clip: text; |
| color: transparent; |
| } |
|
|
| |
| |
| |
| .contain { |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .contain::before { |
| content: ''; |
| position: absolute; |
| 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); |
| pointer-events: none; |
| z-index: -1; |
| } |
|
|
| .contain::after { |
| content: ''; |
| position: absolute; |
| 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); |
| pointer-events: none; |
| z-index: -1; |
| } |
| .iframe-container{ |
| padding-bottom: 20px; |
| } |
| .results-heading.block{ |
| padding-top: 20px; |
| } |
| .results-heading h2, .route-heading h3{ |
| color: #fff; |
| } |
| .query-container{ |
| padding: 40px 0; |
| } |
| .query-container>.styler { |
| flex-direction: row; |
| gap: 30px; |
| } |
|
|
| .query-container, |
| .query-container .styler, |
| .how-to-container, |
| .how-to-container .styler, |
| .query-form, |
| .examples-block { |
| background: transparent; |
| } |
| .query-container .query-form .primary, |
| .query-container .query-form .secondary{ |
| width: 50%; |
| height: 45px; |
| border-radius: 10px; |
| border: 1px solid #204c6c; |
| color: #204c6c; |
| } |
| .query-container .query-form .primary,.query-container .query-form .secondary:hover{ |
| color: #fff; |
| background-color: #204c6c; |
| } |
| .query-container .query-form .stretch{ |
| gap: 20px; |
| } |
| .query-container .query-form .primary:hover{ |
| opacity: 0.8; |
| } |
| .query-container .query-form, .query-container .examples-block { |
| width: 50%; |
| background-color: #fff; |
| padding: 20px; |
| border-radius: 20px; |
| } |
| .query-container .query-form h3, .query-container .examples-block h3{ |
| background-color: #fff; |
| font-size: 20px; |
| padding-bottom: 10px; |
| } |
| .how-to-container ul{ |
| margin: 0px; |
| flex-wrap: wrap; |
| display: flex; |
| gap: 20px; |
| } |
| .how-to-container h3{ |
| font-size: 20px; |
| padding-bottom: 10px; |
| color: #fff; |
| } |
| .query-container .query-form .styler{ |
| height: 100%; |
| justify-content: space-between; |
|
|
| } |
| .query-container .query-form textarea{ |
| border: 1px solid rgb(199 199 199); |
| padding: 10px; |
| margin-bottom: 20px; |
| } |
| .query-container .examples-block .gallery{ |
| padding: 0px 10px; |
| } |
| .query-container .examples-block .gallery-item{ |
| border: 1px solid rgb(199 199 199); |
| box-shadow: unset; |
| padding: 10px; |
| border-radius: 10px; |
| } |
| .query-container .examples-block .gallery-item .gallery{ |
| padding: 0; |
| } |
| |
| |
| |
| .gradio-container { |
| max-width: 1400px !important; |
| margin: 0 auto !important; |
| padding: 0 !important; |
| position: relative; |
| z-index: 1; |
| } |
|
|
| |
| .gradio-container>* { |
| position: relative; |
| z-index: 1; |
| } |
|
|
| |
| |
| |
| .gradio-container .row { |
| gap: 24px !important; |
| margin-bottom: 30px !important; |
| } |
|
|
| .gradio-container .column { |
| padding: 0 12px !important; |
| } |
|
|
| |
| |
| |
| .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; |
| } |
|
|
| |
| |
| |
| 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; |
| } |
|
|
| |
| |
| |
| 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; |
| } |
|
|
| |
| |
| |
| div[style*="margin-top: 50px"] { |
| backdrop-filter: blur(12px) !important; |
| border: 1px solid rgba(255, 255, 255, 0.15) !important; |
| } |
|
|
| |
| |
| |
| .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; |
| } |
|
|
| |
| |
| |
| div[style*="border-bottom-left-radius:40px"] { |
| margin-bottom: 40px !important; |
| border: 1px solid rgba(255, 255, 255, 0.1) !important; |
| } |
|
|
| |
| |
| |
| @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; |
| } |
| } |
|
|
| |
| |
| |
| html { |
| scroll-behavior: smooth; |
| } |
|
|
| |
| |
| |
| * { |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
|
|
|
|
| |
| |
| |
| .loading-spinner { |
| display: inline-block; |
| width: 50px; |
| height: 50px; |
| border: 5px solid rgba(255, 255, 255, 0.3); |
| border-top-color: #78C841; |
| border-radius: 50%; |
| animation: spin 1s linear infinite; |
| } |
|
|
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
|
|
| |
| |
|
|
|
|
| ::selection { |
| background: rgba(59, 130, 246, 0.3); |
| color: white; |
| } |
