Spaces:
Sleeping
Sleeping
| """ | |
| Custom CSS injected into the Gradio Blocks app to match the SERAPH | |
| design system (dark glass UI, monospace sequence nodes, etc.). | |
| """ | |
| CUSTOM_CSS = """ | |
| @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap'); | |
| :root { | |
| --bg-base: #060608; | |
| --bg-surface: rgba(255, 255, 255, 0.025); | |
| --bg-surface-hover: rgba(255, 255, 255, 0.05); | |
| --bg-glass: rgba(10, 10, 14, 0.78); | |
| --border-subtle: rgba(255, 255, 255, 0.08); | |
| --border-accent: rgba(255, 255, 255, 0.22); | |
| --text-main: #f5f5f7; | |
| --text-muted: #8e8e93; | |
| --text-dim: #55555a; | |
| --accent-glow: rgba(255, 255, 255, 0.15); | |
| --success-green: #10b981; | |
| --color-h: #fb7185; | |
| --bg-h: rgba(251, 113, 133, 0.15); | |
| --color-e: #38bdf8; | |
| --bg-e: rgba(56, 189, 248, 0.15); | |
| --color-c: #94a3b8; | |
| --bg-c: rgba(148, 163, 184, 0.15); | |
| --font-heading: 'Space Grotesk', -apple-system, sans-serif; | |
| --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif; | |
| --font-mono: 'JetBrains Mono', ui-monospace, monospace; | |
| } | |
| body, .gradio-container { | |
| background-color: var(--bg-base) !important; | |
| color: var(--text-main) !important; | |
| font-family: var(--font-body) !important; | |
| max-width: 900px !important; | |
| margin: 0 auto !important; | |
| padding: 20px !important; | |
| } | |
| /* Headers */ | |
| .hero-title { | |
| font-family: var(--font-heading); | |
| font-size: 2.2rem; | |
| font-weight: 700; | |
| letter-spacing: -0.03em; | |
| background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin-bottom: 8px; | |
| text-align: center; | |
| } | |
| .hero-subtitle { | |
| color: var(--text-muted); | |
| text-align: center; | |
| font-size: 0.95rem; | |
| margin-bottom: 28px; | |
| } | |
| /* Back-to-portfolio button */ | |
| .back-to-portfolio { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-family: var(--font-mono); | |
| font-size: 0.78rem; | |
| font-weight: 500; | |
| color: var(--text-muted) !important; | |
| text-decoration: none !important; | |
| background: rgba(255, 255, 255, 0.04); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 99px; | |
| padding: 6px 14px; | |
| transition: all 0.2s ease; | |
| } | |
| .back-to-portfolio:hover { | |
| color: var(--text-main) !important; | |
| border-color: var(--border-accent); | |
| background: rgba(255, 255, 255, 0.08); | |
| } | |
| /* Custom Gradio Textbox & Dropdown Overrides */ | |
| .gradio-container textarea, .gradio-container input, .gradio-container select { | |
| background: rgba(255, 255, 255, 0.03) !important; | |
| border: 1px solid var(--border-subtle) !important; | |
| border-radius: 12px !important; | |
| color: var(--text-main) !important; | |
| font-family: var(--font-mono) !important; | |
| } | |
| .gradio-container textarea:focus, .gradio-container input:focus { | |
| border-color: var(--border-accent) !important; | |
| box-shadow: 0 0 12px var(--accent-glow) !important; | |
| } | |
| /* Action Buttons */ | |
| .btn-magnetic { | |
| background: #ffffff !important; | |
| color: #000000 !important; | |
| border-radius: 99px !important; | |
| font-weight: 600 !important; | |
| font-size: 0.9rem !important; | |
| border: none !important; | |
| padding: 12px 28px !important; | |
| cursor: pointer !important; | |
| transition: all 0.25s ease !important; | |
| } | |
| .btn-magnetic:hover { | |
| box-shadow: 0 0 24px var(--accent-glow) !important; | |
| transform: translateY(-1px); | |
| } | |
| /* Sequence Node Visualizer Grid */ | |
| .sequence-board { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 20px; | |
| padding: 24px; | |
| } | |
| .sequence-grid { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| justify-content: center; | |
| } | |
| .seq-node { | |
| background: rgba(255, 255, 255, 0.02); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 10px; | |
| width: 38px; | |
| height: 58px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 6px 0; | |
| user-select: none; | |
| } | |
| .seq-aa { | |
| font-family: var(--font-heading); | |
| font-weight: 600; | |
| font-size: 1rem; | |
| color: var(--text-main); | |
| } | |
| .seq-state { | |
| font-family: var(--font-mono); | |
| font-size: 0.68rem; | |
| font-weight: 600; | |
| width: 22px; | |
| height: 22px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 6px; | |
| } | |
| .seq-node[data-state="C"] .seq-state { background: var(--bg-c); color: var(--color-c); } | |
| .seq-node[data-state="H"] .seq-state { background: var(--bg-h); color: var(--color-h); } | |
| .seq-node[data-state="E"] .seq-state { background: var(--bg-e); color: var(--color-e); } | |
| /* Board Legend */ | |
| .board-legend { | |
| display: flex; | |
| gap: 16px; | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| } | |
| .legend-item { display: flex; align-items: center; gap: 6px; } | |
| .legend-dot { width: 8px; height: 8px; border-radius: 50%; } | |
| .legend-dot.c { background: var(--color-c); } | |
| .legend-dot.h { background: var(--color-h); } | |
| .legend-dot.e { background: var(--color-e); } | |
| /* Metrics & Alignment Cards */ | |
| .metrics-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 16px; | |
| margin-bottom: 20px; | |
| } | |
| .metric-card { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 16px; | |
| padding: 20px; | |
| text-align: center; | |
| } | |
| .metric-card.winner { | |
| border-color: var(--border-accent); | |
| background: radial-gradient(circle at 50% -20%, rgba(255,255,255,0.06) 0%, var(--bg-surface) 70%); | |
| } | |
| .metric-value { | |
| font-family: var(--font-heading); | |
| font-size: 2.4rem; | |
| font-weight: 700; | |
| line-height: 1; | |
| margin-bottom: 6px; | |
| background: linear-gradient(180deg, #ffffff 0%, #a1a1aa 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .metric-label { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| } | |
| .alignment-card { | |
| background: rgba(10, 10, 14, 0.6); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 16px; | |
| padding: 20px; | |
| overflow-x: auto; | |
| } | |
| .align-row { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 8px; | |
| font-family: var(--font-mono); | |
| } | |
| .row-label { | |
| width: 120px; | |
| flex-shrink: 0; | |
| font-size: 0.78rem; | |
| color: var(--text-muted); | |
| } | |
| .row-seq { | |
| font-size: 0.92rem; | |
| letter-spacing: 3px; | |
| color: var(--text-main); | |
| white-space: nowrap; | |
| } | |
| .row-seq .match { color: var(--success-green); } | |
| .row-seq .miss { color: #ef4444; } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| """ | |