| @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;700;800&display=swap"); |
|
|
| :root { |
| --bg-0: #07080f; |
| --bg-1: #0c111b; |
| --bg-2: #111827; |
| --accent: #00d9ff; |
| --accent-2: #14e8c2; |
| --text: #e5f7ff; |
| --muted: #8aa4b8; |
| --border: rgba(255, 255, 255, 0.08); |
| --border-accent: rgba(0, 217, 255, 0.18); |
| } |
|
|
| |
| .gradio-container { |
| color: var(--text); |
| background: |
| radial-gradient(ellipse at 10% 15%, rgba(0, 217, 255, 0.1) 0%, transparent 28%), |
| radial-gradient(ellipse at 90% 5%, rgba(110, 79, 255, 0.12) 0%, transparent 22%), |
| radial-gradient(ellipse at 50% 100%, rgba(20, 232, 194, 0.06) 0%, transparent 30%), |
| linear-gradient(180deg, var(--bg-0), var(--bg-1) 50%, var(--bg-0)); |
| font-family: "Space Grotesk", "Inter", system-ui, sans-serif; |
| min-height: 100vh; |
| overflow-x: hidden; |
| } |
|
|
| .gradio-container .main { |
| width: 100%; |
| max-width: 1300px; |
| margin: 0 auto; |
| padding: 0; |
| } |
|
|
| .gradio-container .contain { gap: 0; } |
|
|
| footer { display: none !important; } |
|
|
| |
| .nx-root { |
| display: grid; |
| gap: 1rem; |
| padding: 1.2rem 1.4rem 1.4rem; |
| min-height: 100vh; |
| grid-template-rows: auto 1fr auto; |
| } |
|
|
| |
| .nx-header { |
| display: flex; |
| align-items: end; |
| justify-content: space-between; |
| gap: 1.5rem; |
| padding-bottom: 0.85rem; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .nx-header-left { |
| display: grid; |
| gap: 0.2rem; |
| align-content: start; |
| } |
|
|
| .nx-eyebrow { |
| color: var(--accent); |
| text-transform: uppercase; |
| letter-spacing: 0.24em; |
| font-size: 0.68rem; |
| font-weight: 700; |
| } |
|
|
| .nx-wordmark { |
| margin: 0; |
| font-size: clamp(2.8rem, 6vw, 5.6rem); |
| line-height: 0.88; |
| letter-spacing: -0.07em; |
| background: linear-gradient(135deg, #e5f7ff 0%, #8fefff 50%, #14e8c2 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| .nx-tagline { |
| margin: 0; |
| color: var(--muted); |
| font-size: 0.9rem; |
| letter-spacing: 0.02em; |
| } |
|
|
| .nx-header-links { |
| display: flex; |
| gap: 0.6rem; |
| align-items: center; |
| flex-shrink: 0; |
| } |
|
|
| .nx-nav-link { |
| padding: 0.42rem 0.88rem; |
| border-radius: 999px; |
| border: 1px solid var(--border-accent); |
| background: rgba(0, 217, 255, 0.06); |
| color: #8fefff; |
| text-decoration: none; |
| font-size: 0.75rem; |
| font-weight: 700; |
| letter-spacing: 0.1em; |
| text-transform: uppercase; |
| transition: background 140ms ease, border-color 140ms ease, transform 140ms ease; |
| } |
|
|
| .nx-nav-link:hover, |
| .nx-nav-link:focus-visible { |
| background: rgba(0, 217, 255, 0.12); |
| border-color: rgba(0, 217, 255, 0.32); |
| transform: translateY(-1px); |
| } |
|
|
| |
| .nx-surface-grid { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| gap: 0.85rem; |
| align-items: stretch; |
| } |
|
|
| .nx-surface-card { |
| --card-accent: #00d9ff; |
| display: grid; |
| grid-template-rows: auto auto 1fr auto; |
| gap: 0.55rem; |
| padding: 1.1rem 1.15rem 1rem; |
| border-radius: 22px; |
| border: 1px solid var(--border); |
| background: |
| linear-gradient(180deg, rgba(12, 17, 27, 0.97), rgba(12, 17, 27, 0.88)), |
| radial-gradient(circle at 90% 0%, rgba(var(--card-accent), 0.06), transparent 55%); |
| color: inherit; |
| text-decoration: none; |
| box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28); |
| outline: none; |
| position: relative; |
| overflow: hidden; |
| transition: |
| transform 160ms ease, |
| border-color 160ms ease, |
| box-shadow 160ms ease; |
| } |
|
|
| .nx-surface-card::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 3px; |
| background: linear-gradient(90deg, var(--card-accent), transparent); |
| opacity: 0.7; |
| transition: opacity 160ms ease; |
| } |
|
|
| .nx-surface-card:hover, |
| .nx-surface-card:focus-visible { |
| transform: translateY(-4px); |
| border-color: var(--border-accent); |
| box-shadow: 0 26px 60px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(0, 217, 255, 0.06) inset; |
| } |
|
|
| .nx-surface-card:hover::before, |
| .nx-surface-card:focus-visible::before { |
| opacity: 1; |
| } |
|
|
| .nx-surface-top { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| } |
|
|
| .nx-surface-role { |
| color: var(--card-accent); |
| text-transform: uppercase; |
| letter-spacing: 0.2em; |
| font-size: 0.65rem; |
| font-weight: 700; |
| } |
|
|
| .nx-surface-dot { |
| width: 7px; |
| height: 7px; |
| border-radius: 50%; |
| background: var(--card-accent); |
| box-shadow: 0 0 8px var(--card-accent); |
| animation: pulse-dot 2.4s ease infinite; |
| } |
|
|
| @keyframes pulse-dot { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.38; } |
| } |
|
|
| .nx-surface-name { |
| margin: 0; |
| font-size: clamp(1.15rem, 2vw, 1.55rem); |
| line-height: 1.1; |
| letter-spacing: -0.04em; |
| color: #f0faff; |
| } |
|
|
| .nx-surface-desc { |
| margin: 0; |
| color: #b7c9d9; |
| font-size: 0.88rem; |
| line-height: 1.55; |
| } |
|
|
| .nx-surface-cta { |
| display: inline-block; |
| padding: 0.38rem 0.82rem; |
| border-radius: 999px; |
| border: 1px solid var(--border-accent); |
| background: rgba(0, 217, 255, 0.05); |
| color: #8fefff; |
| font-size: 0.72rem; |
| font-weight: 700; |
| letter-spacing: 0.1em; |
| text-transform: uppercase; |
| justify-self: start; |
| transition: background 140ms ease; |
| } |
|
|
| .nx-surface-card:hover .nx-surface-cta { |
| background: rgba(0, 217, 255, 0.1); |
| } |
|
|
| |
| .nx-membrane-footer { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 1.5rem; |
| padding-top: 0.75rem; |
| border-top: 1px solid var(--border); |
| } |
|
|
| .nx-guarantee-list { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.5rem 1.2rem; |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| .nx-guarantee-list li { |
| color: var(--muted); |
| font-size: 0.76rem; |
| letter-spacing: 0.02em; |
| position: relative; |
| padding-left: 0.85rem; |
| } |
|
|
| .nx-guarantee-list li::before { |
| content: ""; |
| position: absolute; |
| left: 0; |
| top: 0.55em; |
| width: 5px; |
| height: 5px; |
| border-radius: 50%; |
| background: var(--accent); |
| opacity: 0.6; |
| } |
|
|
| .nx-render-stamp { |
| flex-shrink: 0; |
| color: var(--muted); |
| font-size: 0.73rem; |
| font-family: "IBM Plex Mono", monospace; |
| letter-spacing: 0.04em; |
| } |
|
|
| |
| @media (max-width: 1024px) { |
| .nx-surface-grid { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
| } |
|
|
| @media (max-width: 640px) { |
| .nx-root { padding: 0.85rem; } |
| .nx-header { flex-direction: column; align-items: start; } |
| .nx-surface-grid { grid-template-columns: 1fr; } |
| .nx-wordmark { font-size: 3rem; } |
| .nx-membrane-footer { flex-direction: column; align-items: start; } |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| *, *::before, *::after { |
| animation-duration: 0.01ms !important; |
| transition-duration: 0.01ms !important; |
| } |
| } |
|
|
