Spaces:
Running
Running
| /* ArXivSignals look — same technical-editorial palette/typography as | |
| arxivsignals.io (IBM Plex Sans/Mono, ink+panel surfaces, chartreuse accent; | |
| cream+blue in light mode). Dark is the default, matching the portal. */ | |
| :root { | |
| --ink: #0b0f14; | |
| --panel: #111821; | |
| --panel-2: #0f151d; | |
| --panel-3: #17212c; | |
| --line: rgba(224, 234, 246, 0.10); | |
| --line-strong: rgba(224, 234, 246, 0.20); | |
| --text: #ecf3fb; | |
| --text-2: #c6d2e0; | |
| --muted: #9aa9ba; | |
| --faint: #667589; | |
| --accent: #d7ff4f; | |
| --blue: #69a7ff; | |
| --teal: #45d8a6; | |
| --amber: #f0b84d; | |
| --red: #ff8a80; | |
| --shadow: rgba(0, 0, 0, 0.24); | |
| --radius: 8px; | |
| color-scheme: dark; | |
| } | |
| :root[data-theme="light"] { | |
| --ink: #f6f2ea; | |
| --panel: #fffdf8; | |
| --panel-2: #f1ece2; | |
| --panel-3: #e9e2d5; | |
| --line: rgba(33, 31, 28, 0.12); | |
| --line-strong: rgba(33, 31, 28, 0.24); | |
| --text: #1c1d1f; | |
| --text-2: #3c3a36; | |
| --muted: #625d53; | |
| --faint: #8d8374; | |
| --accent: #1f6fe0; | |
| --blue: #1f6fe0; | |
| --teal: #087f5b; | |
| --amber: #a16400; | |
| --red: #c0392b; | |
| --shadow: rgba(56, 47, 34, 0.10); | |
| color-scheme: light; | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { overflow-x: hidden; } | |
| body { | |
| margin: 0; | |
| background: radial-gradient(circle at top left, color-mix(in srgb, var(--blue) 12%, transparent), transparent 32rem), var(--ink); | |
| color: var(--text); | |
| font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| font-size: 15px; | |
| line-height: 1.5; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| text-rendering: optimizeLegibility; | |
| } | |
| a { color: inherit; text-decoration: none; } | |
| button, input, select, textarea { font: inherit; } | |
| h1, h2, h3 { font-weight: 650; letter-spacing: 0; } | |
| .mono { | |
| font-family: "IBM Plex Mono", ui-monospace, monospace; | |
| } | |
| /* ── Shell ─────────────────────────────────────────────────────────────── */ | |
| main, .topbar-inner { | |
| width: min(100% - 48px, 2100px); | |
| margin: 0 auto; | |
| } | |
| main { padding: 0 0 72px; } | |
| /* ── Topbar (portal wordmark + link home to arxivsignals.io) ───────────── */ | |
| .topbar { | |
| border-bottom: 1px solid var(--line); | |
| margin-bottom: 14px; | |
| } | |
| .topbar-inner { | |
| display: flex; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 10px 18px; | |
| padding: 12px 0; | |
| } | |
| .brand-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| transition: opacity 0.12s; | |
| } | |
| .brand-link:hover { opacity: 0.85; } | |
| .brand-icon { | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 7px; | |
| display: block; | |
| } | |
| .brand { | |
| margin: 0; | |
| font-size: 1.45rem; | |
| line-height: 1.04; | |
| letter-spacing: -0.012em; | |
| font-weight: 700; | |
| white-space: nowrap; | |
| } | |
| .brand span { color: var(--accent); } | |
| .eyebrow { | |
| margin: 0; | |
| font-family: "IBM Plex Mono", ui-monospace, monospace; | |
| font-size: 11px; | |
| letter-spacing: 0.16em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| border-left: 1px solid var(--line-strong); | |
| padding-left: 14px; | |
| white-space: nowrap; | |
| } | |
| .date-block { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 10px; | |
| font-family: "IBM Plex Mono", ui-monospace, monospace; | |
| } | |
| .date-label { | |
| font-size: 13px; | |
| font-weight: 600; | |
| letter-spacing: 0.04em; | |
| color: var(--text); | |
| } | |
| .date-count { | |
| font-size: 11px; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| color: var(--faint); | |
| } | |
| .topbar-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-left: auto; | |
| flex-wrap: wrap; | |
| } | |
| /* Search — panel field like the portal's search bar */ | |
| .search-wrapper { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .search { | |
| width: min(340px, 60vw); | |
| background: var(--panel); | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius); | |
| color: var(--text); | |
| padding: 7px 34px 7px 12px; | |
| font-size: 0.9rem; | |
| outline: none; | |
| transition: border-color 0.12s; | |
| } | |
| .search::placeholder { color: var(--faint); } | |
| .search:focus { border-color: var(--accent); } | |
| .reload-btn { | |
| position: absolute; | |
| right: 4px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 26px; | |
| height: 26px; | |
| border: none; | |
| border-radius: 6px; | |
| background: transparent; | |
| color: var(--faint); | |
| cursor: pointer; | |
| } | |
| .reload-btn:hover { color: var(--accent); background: var(--panel-3); } | |
| .reload-btn .icon { width: 14px; height: 14px; } | |
| /* Mono pill buttons (theme toggle / export) — portal .a-btn */ | |
| .icon-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| cursor: pointer; | |
| border-radius: 999px; | |
| padding: 6px 12px; | |
| font-family: "IBM Plex Mono", ui-monospace, monospace; | |
| font-size: 11px; | |
| font-weight: 500; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| background: var(--panel); | |
| border: 1px solid var(--line-strong); | |
| color: var(--text-2); | |
| transition: border-color 0.12s, color 0.12s; | |
| } | |
| .icon-pill:hover { border-color: var(--accent); color: var(--text); } | |
| .icon-pill .icon { width: 13px; height: 13px; } | |
| /* theme button: show moon in light mode, sun in dark mode */ | |
| .theme-btn .icon-sun { display: none; } | |
| .theme-btn .icon-moon { display: block; } | |
| :root[data-theme="dark"] .theme-btn .icon-sun, | |
| .theme-btn.dark .icon-sun { display: block; } | |
| :root[data-theme="dark"] .theme-btn .icon-moon, | |
| .theme-btn.dark .icon-moon { display: none; } | |
| /* ── Status line ───────────────────────────────────────────────────────── */ | |
| .status { | |
| display: none; | |
| margin: 0 0 12px; | |
| padding: 7px 12px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| background: var(--panel); | |
| color: var(--muted); | |
| font-family: "IBM Plex Mono", ui-monospace, monospace; | |
| font-size: 11.5px; | |
| letter-spacing: 0.04em; | |
| } | |
| .status.success { border-color: color-mix(in srgb, var(--teal) 40%, transparent); color: var(--teal); } | |
| .status.warning { border-color: color-mix(in srgb, var(--amber) 40%, transparent); color: var(--amber); } | |
| .status.error { border-color: color-mix(in srgb, var(--red) 40%, transparent); color: var(--red); } | |
| /* ── Toolbar (filters) ─────────────────────────────────────────────────── */ | |
| .toolbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: flex-end; | |
| gap: 8px; | |
| margin-bottom: 14px; | |
| position: relative; | |
| } | |
| .toolbar .spacer { flex: 1; } | |
| .tag-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| cursor: pointer; | |
| border-radius: 999px; | |
| padding: 7px 14px; | |
| font-family: "IBM Plex Mono", ui-monospace, monospace; | |
| font-size: 12px; | |
| font-weight: 500; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| background: var(--panel); | |
| border: 1px solid var(--line-strong); | |
| color: var(--text-2); | |
| transition: border-color 0.12s, color 0.12s, background 0.12s; | |
| } | |
| .tag-btn:hover { border-color: var(--accent); color: var(--text); } | |
| .tag-btn.active { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| color: var(--ink); | |
| font-weight: 600; | |
| } | |
| /* Filter panels */ | |
| .tag-panel { | |
| position: absolute; | |
| top: calc(100% + 8px); | |
| right: 0; | |
| z-index: 50; | |
| width: min(520px, 92vw); | |
| background: var(--panel); | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius); | |
| box-shadow: 0 18px 44px var(--shadow); | |
| padding: 14px; | |
| } | |
| .tag-panel.hidden { display: none; } | |
| .panel-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 10px; | |
| margin-bottom: 10px; | |
| } | |
| .panel-header strong { | |
| font-family: "IBM Plex Mono", ui-monospace, monospace; | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.14em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| } | |
| .panel-header .header-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .tag-search { | |
| background: var(--panel-2); | |
| border: 1px solid var(--line); | |
| border-radius: 6px; | |
| color: var(--text); | |
| padding: 5px 10px; | |
| font-size: 0.85rem; | |
| outline: none; | |
| width: 180px; | |
| } | |
| .tag-search:focus { border-color: var(--accent); } | |
| .icon-btn { | |
| border: 1px solid var(--line); | |
| background: transparent; | |
| color: var(--faint); | |
| border-radius: 6px; | |
| width: 26px; | |
| height: 26px; | |
| cursor: pointer; | |
| line-height: 1; | |
| } | |
| .icon-btn:hover { color: var(--text); border-color: var(--line-strong); } | |
| .tag-list { | |
| max-height: 300px; | |
| overflow: auto; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); | |
| gap: 2px 12px; | |
| margin-bottom: 12px; | |
| } | |
| .tag-item { min-width: 0; } | |
| .tag-checkbox { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 4px 6px; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-size: 0.85rem; | |
| color: var(--text-2); | |
| } | |
| .tag-checkbox:hover { background: var(--panel-3); } | |
| .tag-checkbox input { accent-color: var(--accent); } | |
| .tag-name { | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .tag-count { | |
| margin-left: auto; | |
| font-family: "IBM Plex Mono", ui-monospace, monospace; | |
| font-size: 10.5px; | |
| color: var(--faint); | |
| } | |
| .panel-actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 8px; | |
| } | |
| .panel-actions button { | |
| cursor: pointer; | |
| border-radius: 999px; | |
| padding: 6px 14px; | |
| font-family: "IBM Plex Mono", ui-monospace, monospace; | |
| font-size: 11px; | |
| font-weight: 500; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| background: var(--accent); | |
| border: 1px solid var(--accent); | |
| color: var(--ink); | |
| } | |
| .panel-actions button.secondary { | |
| background: var(--panel); | |
| border-color: var(--line-strong); | |
| color: var(--text-2); | |
| } | |
| .panel-actions button.secondary:hover { border-color: var(--accent); color: var(--text); } | |
| /* ── Cards grid (portal preview-card compact) ──────────────────────────── */ | |
| .cards { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); | |
| gap: 14px; | |
| align-items: stretch; | |
| } | |
| @media (max-width: 640px) { .cards { grid-template-columns: 1fr; } } | |
| .card { | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| min-height: 100%; | |
| background: color-mix(in srgb, var(--panel) 96%, transparent); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| box-shadow: 0 10px 28px var(--shadow); | |
| transition: border-color 0.14s ease, transform 0.14s ease; | |
| } | |
| .card:hover { | |
| border-color: var(--line-strong); | |
| transform: translateY(-2px); | |
| } | |
| /* Thumbnail — tall 3/4 first-page crop, like Explore's compact cards */ | |
| .thumb-wrapper { | |
| position: relative; | |
| aspect-ratio: 3 / 4; | |
| overflow: hidden; | |
| background: #f7f7f5; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .thumb { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| object-position: top center; | |
| display: block; | |
| cursor: pointer; | |
| } | |
| /* "AI summary" chip overlaid on the thumb, like the portal — a LINK to the | |
| paper's summary page on arxivsignals.io */ | |
| .summary-chip { | |
| position: absolute; | |
| top: 8px; | |
| left: 8px; | |
| font-family: "IBM Plex Mono", ui-monospace, monospace; | |
| font-size: 9.5px; | |
| font-weight: 600; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| background: color-mix(in srgb, var(--ink) 82%, transparent); | |
| border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); | |
| border-radius: 999px; | |
| padding: 3px 8px; | |
| cursor: pointer; | |
| transition: background 0.12s, color 0.12s, border-color 0.12s; | |
| } | |
| .summary-chip:hover { | |
| background: var(--accent); | |
| color: var(--ink); | |
| border-color: var(--accent); | |
| } | |
| :root[data-theme="light"] .summary-chip { | |
| color: var(--accent); | |
| background: color-mix(in srgb, var(--panel) 88%, transparent); | |
| } | |
| /* Copy actions on thumb hover */ | |
| .card-actions { | |
| position: absolute; | |
| top: 8px; | |
| right: 8px; | |
| display: flex; | |
| gap: 4px; | |
| opacity: 0; | |
| transition: opacity 0.15s; | |
| } | |
| .thumb-wrapper:hover .card-actions { opacity: 1; } | |
| .action-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 26px; | |
| height: 26px; | |
| border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); | |
| border-radius: 6px; | |
| background: color-mix(in srgb, var(--ink) 82%, transparent); | |
| color: var(--text-2); | |
| cursor: pointer; | |
| transition: color 0.12s, border-color 0.12s; | |
| } | |
| .action-btn:hover { color: var(--accent); border-color: var(--accent); } | |
| .action-btn.success { color: var(--teal); border-color: var(--teal); } | |
| .action-btn svg { width: 13px; height: 13px; } | |
| /* Card body */ | |
| .body { | |
| display: flex; | |
| flex-direction: column; | |
| flex: 1; | |
| min-width: 0; | |
| padding: 11px 12px 12px; | |
| } | |
| /* Meta header row: mono arXiv id + contribution + signal */ | |
| .metadata { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-family: "IBM Plex Mono", ui-monospace, monospace; | |
| order: -1; | |
| margin-bottom: 6px; | |
| } | |
| .paper-id { | |
| font-size: 10.5px; | |
| color: var(--faint); | |
| letter-spacing: 0.04em; | |
| } | |
| .metadata .spacer { flex: 1; } | |
| .contrib-pill { | |
| font-size: 9.5px; | |
| font-weight: 500; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| border: 1px solid var(--line-strong); | |
| color: var(--text-2); | |
| border-radius: 999px; | |
| padding: 2px 7px; | |
| white-space: nowrap; | |
| } | |
| .signal-badge { | |
| font-size: 9.5px; | |
| font-weight: 600; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| color: var(--ink); | |
| background: var(--accent); | |
| border: 1px solid var(--accent); | |
| border-radius: 999px; | |
| padding: 2px 7px; | |
| white-space: nowrap; | |
| } | |
| .title { | |
| margin: 0; | |
| font-size: 0.92rem; | |
| line-height: 1.3; | |
| font-weight: 600; | |
| color: var(--text); | |
| transition: color 0.12s; | |
| } | |
| .card .body > a:hover .title { color: var(--accent); } | |
| .authors { | |
| margin-top: 4px; | |
| color: var(--faint); | |
| font-size: 0.76rem; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .summary { | |
| margin: 7px 0 0; | |
| font-size: 0.8rem; | |
| line-height: 1.55; | |
| } | |
| .summary.one-liner { color: var(--text); } | |
| .summary.snippet { | |
| color: var(--muted); | |
| display: -webkit-box; | |
| -webkit-line-clamp: 3; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| /* Tag chips — calm tinted chips with hairline borders (portal mini-tag) */ | |
| .tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 5px; | |
| margin-top: 9px; | |
| } | |
| .tag, .category { | |
| font-size: 10.5px; | |
| line-height: 1; | |
| padding: 4px 8px; | |
| border-radius: 999px; | |
| background: color-mix(in srgb, var(--text) 6%, transparent); | |
| border: 1px solid var(--line); | |
| color: var(--text-2); | |
| white-space: nowrap; | |
| } | |
| .category { | |
| font-family: "IBM Plex Mono", ui-monospace, monospace; | |
| font-size: 9.5px; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| color: var(--blue); | |
| border-color: color-mix(in srgb, var(--blue) 35%, transparent); | |
| background: color-mix(in srgb, var(--blue) 9%, transparent); | |
| } | |
| /* Footer — mono microlinks, like the portal card footer */ | |
| .card-footer { | |
| margin-top: auto; | |
| padding-top: 10px; | |
| display: flex; | |
| gap: 12px; | |
| font-family: "IBM Plex Mono", ui-monospace, monospace; | |
| font-size: 10px; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .card-footer a { | |
| color: var(--faint); | |
| transition: color 0.12s; | |
| } | |
| .card-footer a:hover { color: var(--accent); } | |
| .card-footer a.signals-link { color: var(--accent); } | |
| .card-footer a.signals-link:hover { color: var(--text); } | |
| .no-results { | |
| grid-column: 1 / -1; | |
| text-align: center; | |
| padding: 60px 0; | |
| color: var(--faint); | |
| font-family: "IBM Plex Mono", ui-monospace, monospace; | |
| font-size: 12px; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| /* ── Pagination ────────────────────────────────────────────────────────── */ | |
| .pagination { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 14px; | |
| margin-top: 26px; | |
| } | |
| .pagination button { | |
| cursor: pointer; | |
| border-radius: 999px; | |
| padding: 7px 16px; | |
| font-family: "IBM Plex Mono", ui-monospace, monospace; | |
| font-size: 11px; | |
| font-weight: 500; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| background: var(--panel); | |
| border: 1px solid var(--line-strong); | |
| color: var(--text-2); | |
| transition: border-color 0.12s, color 0.12s; | |
| } | |
| .pagination button:hover:not(:disabled) { border-color: var(--accent); color: var(--text); } | |
| .pagination button:disabled { opacity: 0.35; cursor: default; } | |
| .pagination .muted { | |
| font-family: "IBM Plex Mono", ui-monospace, monospace; | |
| font-size: 11px; | |
| letter-spacing: 0.06em; | |
| color: var(--faint); | |
| } | |
| /* ── Small screens ─────────────────────────────────────────────────────── */ | |
| @media (max-width: 760px) { | |
| .topbar-inner { gap: 8px 12px; } | |
| .eyebrow { display: none; } | |
| .search { width: min(240px, 56vw); } | |
| .date-block { order: 3; } | |
| } | |