Spaces:
Running on Zero
Running on Zero
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); | |
| :root { | |
| --rln-bg: #F2F3EF; | |
| --rln-ink: #15181A; | |
| --rln-ink-soft: #4A5056; | |
| --rln-accent: #9A6B12; | |
| --rln-accent-soft: #F0E6CC; | |
| --rln-pass: #2E6E49; | |
| --rln-pass-bg: #E3EFE7; | |
| --rln-fail: #9B3A2C; | |
| --rln-fail-bg: #F5E6E2; | |
| --rln-line: rgba(21, 24, 26, 0.14); | |
| --rln-card-bg: #FFFFFF; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --rln-bg: #15171A; | |
| --rln-ink: #E9EAE6; | |
| --rln-ink-soft: #A8ADB2; | |
| --rln-accent: #D4A62A; | |
| --rln-accent-soft: #332A12; | |
| --rln-pass: #6FC797; | |
| --rln-pass-bg: #1B2B21; | |
| --rln-fail: #E08A79; | |
| --rln-fail-bg: #2E1D19; | |
| --rln-line: rgba(233, 234, 230, 0.16); | |
| --rln-card-bg: #1C1F23; | |
| } | |
| } | |
| body, .gradio-container { | |
| background: var(--rln-bg) ; | |
| color: var(--rln-ink) ; | |
| font-family: 'Space Grotesk', system-ui, sans-serif ; | |
| } | |
| /* Headline -- the one place type carries personality. No italic/bold single-word accenting. */ | |
| .gradio-container h1 { | |
| font-family: 'Space Grotesk', system-ui, sans-serif ; | |
| font-weight: 700 ; | |
| letter-spacing: -0.01em; | |
| color: var(--rln-ink) ; | |
| border-bottom: 3px solid var(--rln-accent); | |
| padding-bottom: 0.4em; | |
| margin-bottom: 0.6em ; | |
| max-width: 70ch; | |
| } | |
| .gradio-container h2, .gradio-container h3 { | |
| font-family: 'Space Grotesk', system-ui, sans-serif ; | |
| font-weight: 500 ; | |
| color: var(--rln-ink) ; | |
| } | |
| .gradio-container p, .gradio-container li { | |
| max-width: 78ch; | |
| color: var(--rln-ink) ; | |
| line-height: 1.55; | |
| } | |
| .gradio-container em { color: var(--rln-ink-soft); } | |
| /* Verdicts are the actual data of this page -- rendered as compact monospace badges, | |
| not plain colored text, since that's what they functionally are: a pass/fail stamp. */ | |
| .verdict-pass, .verdict-fail { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.85em; | |
| font-weight: 600; | |
| padding: 2px 8px; | |
| border-radius: 3px; | |
| white-space: nowrap; | |
| display: inline-block; | |
| } | |
| .verdict-pass { color: var(--rln-pass); background: var(--rln-pass-bg); } | |
| .verdict-fail { color: var(--rln-fail); background: var(--rln-fail-bg); } | |
| /* Example cards: a left accent flag, not a uniform rounded-corner-plus-shadow SaaS card. | |
| Flat, paper-like -- no drop shadow. */ | |
| .example-card { | |
| background: var(--rln-card-bg); | |
| border: 1px solid var(--rln-line); | |
| border-left: 4px solid var(--rln-accent); | |
| border-radius: 2px; | |
| padding: 14px 18px; | |
| margin-bottom: 14px; | |
| } | |
| .example-card p strong { font-family: 'Space Grotesk', sans-serif; font-weight: 500; } | |
| .example-card table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-top: 10px; | |
| font-size: 0.95em; | |
| } | |
| .example-card th, .example-card td { | |
| border: 1px solid var(--rln-line); | |
| padding: 9px 11px; | |
| text-align: left; | |
| vertical-align: top; | |
| } | |
| .example-card th { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.8em; | |
| font-weight: 600; | |
| color: var(--rln-ink-soft); | |
| background: transparent; | |
| border-bottom: 2px solid var(--rln-line); | |
| } | |
| .example-card td:first-child { font-weight: 600; white-space: nowrap; } | |
| /* Scorecard tables (plain markdown "|" tables, not the HTML ones above) get the same | |
| monospace-header, hairline-rule treatment for consistency. */ | |
| .gradio-container table:not(.example-card table) th { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.8em; | |
| color: var(--rln-ink-soft); | |
| border-bottom: 2px solid var(--rln-line) ; | |
| } | |
| .gradio-container table:not(.example-card table) td, | |
| .gradio-container table:not(.example-card table) th { | |
| border-color: var(--rln-line) ; | |
| } | |
| /* Stage note: a margin-note callout, accent rule on the left, not a flat grey box. */ | |
| .stage-note { | |
| background: var(--rln-accent-soft); | |
| border-left: 3px solid var(--rln-accent); | |
| border-radius: 2px; | |
| padding: 12px 16px; | |
| margin-top: 10px; | |
| color: var(--rln-ink) ; | |
| font-size: 0.95em; | |
| } | |
| /* Tab navigation: a baseline rule turns loose text into a cohesive strip; generous padding | |
| and a soft accent-tinted hover/selected state give it real button affordance, reusing the | |
| same --rln-accent-soft token as the stage-note callout so "active/highlighted" reads as | |
| one consistent idea across the page. */ | |
| .tab-nav { | |
| border-bottom: 1px solid var(--rln-line) ; | |
| gap: 2px; | |
| } | |
| .tab-nav button { | |
| font-family: 'Space Grotesk', sans-serif ; | |
| font-size: 0.93em; | |
| color: var(--rln-ink-soft) ; | |
| padding: 10px 16px ; | |
| border-radius: 4px 4px 0 0; | |
| border-bottom: 3px solid transparent ; | |
| background: transparent; | |
| cursor: pointer; | |
| transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; | |
| } | |
| /* Shared hover and keyboard focus-visible affordance */ | |
| .tab-nav button:hover, | |
| .tab-nav button:focus-visible { | |
| color: var(--rln-ink) ; | |
| background: var(--rln-accent-soft) ; | |
| outline: none; /* replaced by custom token styling for a cohesive look */ | |
| } | |
| /* Active / Selected tab state */ | |
| .tab-nav button.selected { | |
| color: var(--rln-ink) ; | |
| font-weight: 500 ; | |
| background: var(--rln-accent-soft) ; | |
| border-bottom-color: var(--rln-accent) ; | |
| } |