Spaces:
Runtime error
Runtime error
| @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap'); | |
| :root { | |
| --bg: #f6f1eb; | |
| --bg-ink: #141210; | |
| --muted: #3d3832; /* Darkened: original #5a534a was too light */ | |
| --accent: #cb5a2d; | |
| --accent-light: #e8d0c3; | |
| --line: #ddd3c9; | |
| --card: #fffaf4; | |
| --shadow: 0 4px 20px rgba(20, 18, 16, 0.08); | |
| --header-bg: #fdfdfd; | |
| } | |
| body { | |
| margin: 0; | |
| font-family: "Lato", sans-serif; | |
| color: var(--bg-ink); | |
| background: radial-gradient(circle at top left, #fdeee0 0%, var(--bg) 50%, #f3efe8 100%); | |
| min-height: 100vh; | |
| } | |
| .page { max-width: 1280px; margin: 0 auto; padding: 0 24px 60px; } | |
| /* ===== Paper Header ===== */ | |
| .paper-header { | |
| padding: 48px 0 24px; | |
| text-align: center; | |
| } | |
| /* RUC Logo */ | |
| .institution-logo { | |
| margin-bottom: 20px; | |
| } | |
| .ruc-logo { | |
| height: 64px; | |
| width: auto; | |
| opacity: 0.9; | |
| } | |
| .paper-title { | |
| font-family: "Lato", sans-serif; | |
| font-size: 2.2rem; | |
| font-weight: 700; | |
| line-height: 1.35; | |
| color: var(--bg-ink); | |
| margin: 0 auto 16px; | |
| max-width: 900px; | |
| } | |
| .paper-authors { | |
| font-size: 0.95rem; | |
| color: var(--muted); | |
| line-height: 1.7; | |
| margin: 0 auto 6px; | |
| max-width: 860px; | |
| } | |
| .paper-authors sup { font-size: 0.7em; color: var(--accent); margin-right: 1px; } | |
| .paper-affiliations { | |
| font-size: 0.88rem; | |
| color: #666; /* Darkened: original #888 was too light */ | |
| margin: 0 auto 20px; | |
| } | |
| .paper-affiliations sup { font-size: 0.7em; color: var(--accent); } | |
| .affil-sep { margin: 0 8px; } | |
| .paper-links { | |
| display: flex; | |
| gap: 12px; | |
| justify-content: center; | |
| } | |
| .badge-link { | |
| text-decoration: none; color: var(--bg-ink); font-weight: bold; | |
| padding: 8px 18px; border: 1px solid var(--line); border-radius: 20px; | |
| background: white; transition: all 0.2s; display: flex; align-items: center; gap: 8px; | |
| font-size: 0.9rem; | |
| } | |
| .badge-link:hover { border-color: var(--accent); color: var(--accent); } | |
| /* ===== Leaderboard Hero ===== */ | |
| .leaderboard-hero { | |
| text-align: center; | |
| padding: 10px 0 30px; | |
| } | |
| .hero-divider { | |
| width: 60px; | |
| height: 3px; | |
| background: var(--line); | |
| margin: 0 auto 28px; | |
| border-radius: 2px; | |
| } | |
| .leaderboard-title { | |
| font-family: "Lato", sans-serif; | |
| font-size: 2.1rem; | |
| font-weight: 700; | |
| color: var(--bg-ink); | |
| margin: 0 0 8px; | |
| } | |
| .leaderboard-title i { color: var(--accent); margin-right: 6px; } | |
| .leaderboard-subtitle { | |
| font-size: 1.1rem; | |
| color: var(--muted); | |
| margin: 0 0 24px; | |
| } | |
| /* Stat Bar */ | |
| .stat-bar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 24px; | |
| background: white; | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| padding: 16px 40px; | |
| width: fit-content; | |
| margin: 0 auto; | |
| box-shadow: var(--shadow); | |
| } | |
| .stat-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 2px; | |
| } | |
| .stat-num { | |
| font-family: "Lato", sans-serif; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--accent); | |
| } | |
| .stat-label { | |
| font-size: 0.78rem; | |
| color: var(--muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .stat-divider { | |
| width: 1px; | |
| height: 32px; | |
| background: var(--line); | |
| } | |
| /* ===== Info Section ===== */ | |
| .info-section { margin-bottom: 36px; } | |
| .info-grid { | |
| display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; | |
| } | |
| @media (max-width: 800px) { | |
| .info-grid { grid-template-columns: 1fr; } | |
| } | |
| .info-card { | |
| background: white; padding: 24px; border-radius: 12px; | |
| border: 1px solid var(--line); box-shadow: var(--shadow); | |
| } | |
| .info-card h3 { | |
| margin: 0 0 12px; color: var(--accent); | |
| display: flex; align-items: center; gap: 10px; | |
| font-size: 1.2rem; | |
| } | |
| .info-card p { | |
| font-size: 1.00rem; | |
| line-height: 1.65; | |
| color: var(--bg-ink); /* Changed to black, no longer using gray */ | |
| margin: 0 0 10px; | |
| } | |
| .info-card p:last-child { margin-bottom: 0; } | |
| .info-card code { | |
| background: #f4f0ec; padding: 2px 6px; border-radius: 4px; font-size: 0.85em; | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); | |
| } | |
| .info-list { | |
| list-style: none; padding: 0; margin: 8px 0 12px; | |
| } | |
| .info-list li { | |
| font-size: 0.93rem; | |
| line-height: 1.6; | |
| color: var(--bg-ink); /* Changed to black */ | |
| padding: 5px 0 5px 16px; | |
| position: relative; | |
| } | |
| .info-list li::before { | |
| content: ""; | |
| position: absolute; | |
| left: 0; top: 13px; | |
| width: 6px; height: 6px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| } | |
| .info-list.compact li { padding: 3px 0 3px 16px; } | |
| .info-list.compact li::before { top: 11px; } | |
| /* ===== Main Navigation (Tabs) ===== */ | |
| .main-nav { | |
| display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; | |
| background: rgba(255,255,255,0.6); padding: 10px; border-radius: 50px; | |
| width: fit-content; margin-left: auto; margin-right: auto; | |
| border: 1px solid var(--line); | |
| } | |
| .nav-btn { | |
| border: none; background: transparent; padding: 10px 24px; | |
| border-radius: 30px; font-size: 1rem; font-weight: bold; color: var(--muted); | |
| cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 8px; | |
| font-family: "Lato", sans-serif; | |
| } | |
| .nav-btn.active { background: var(--accent); color: white; box-shadow: 0 2px 10px rgba(203, 90, 45, 0.3); } | |
| .nav-btn:hover:not(.active) { background: var(--accent-light); color: var(--accent); } | |
| /* ===== Sub Tabs ===== */ | |
| .sub-tabs-container { display: flex; justify-content: flex-start; gap: 20px; margin-bottom: 20px; border-bottom: 2px solid var(--line); padding-bottom: 10px; } | |
| .sub-tab-btn { | |
| background: none; border: none; font-size: 1.1rem; font-weight: bold; | |
| color: var(--muted); cursor: pointer; padding: 5px 10px; | |
| border-bottom: 3px solid transparent; transition: all 0.2s; | |
| font-family: "Lato", sans-serif; | |
| } | |
| .sub-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } | |
| /* ===== Filters Toolbar ===== */ | |
| .filters-toolbar { | |
| display: flex; gap: 20px; margin-bottom: 20px; background: white; | |
| padding: 15px; border-radius: 10px; border: 1px solid var(--line); align-items: center; flex-wrap: wrap; | |
| } | |
| .filter-group { display: flex; align-items: center; gap: 10px; } | |
| .filter-group label { font-weight: bold; font-size: 0.9rem; color: var(--muted); } | |
| .filter-group input, .filter-group select { | |
| padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; outline: none; font-family: "Lato", sans-serif; | |
| } | |
| /* ===== Tables ===== */ | |
| .table-container { overflow-x: auto; background: white; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow); } | |
| table { width: 100%; border-collapse: collapse; min-width: 1000px; } | |
| th, td { | |
| padding: 12px; | |
| text-align: center; | |
| border-bottom: 1px solid #f0f0f0; | |
| font-size: 0.95rem; | |
| white-space: nowrap; | |
| } | |
| th { | |
| background: var(--header-bg); padding: 15px 12px; | |
| border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; | |
| cursor: pointer; user-select: none; | |
| } | |
| th.align-left { text-align: left; } | |
| /* Highlight table header for current sort column */ | |
| th.sortable.active-sort { | |
| background: #fff5eb; | |
| color: var(--accent); | |
| font-weight: 700; | |
| } | |
| tr:last-child td { border-bottom: none; } | |
| tr:hover td { background: #fafafa; } | |
| .rank-col { font-weight: bold; font-size: 1.1rem; width: 60px; } | |
| .method-col { | |
| text-align: left; | |
| min-width: 220px; | |
| max-width: 350px; | |
| white-space: normal; | |
| } | |
| .method-name { font-weight: 700; color: var(--bg-ink); text-decoration: none; font-size: 1rem; line-height: 1.4; display: block; } | |
| .org-name { font-size: 0.8rem; color: #666; margin-top: 4px; } | |
| .track-tag { font-size: 0.75rem; padding: 3px 8px; border-radius: 4px; font-weight: bold; text-transform: uppercase; } | |
| .track-tag.Standard { background: #e3f2fd; color: #1565c0; } | |
| .track-tag.Open { background: #fce4ec; color: #c2185b; } | |
| /* ---- Score columns: default all black ---- */ | |
| td.score-cell { | |
| font-weight: 600; | |
| color: var(--bg-ink); | |
| font-size: 0.95rem; | |
| } | |
| /* Highlight score in current sort column as orange */ | |
| td.score-cell.active-col { | |
| font-weight: 700; | |
| color: var(--accent); | |
| background: #fff8f5; | |
| font-size: 1.05rem; | |
| } | |
| /* ===== Submit Section ===== */ | |
| .submit-container { display: flex; justify-content: center; } | |
| .submit-card { | |
| background: white; width: 100%; max-width: 700px; padding: 32px; | |
| border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow); | |
| } | |
| .submit-card h2 { | |
| margin-top: 0; | |
| display: flex; align-items: center; gap: 10px; | |
| } | |
| .submit-card h2 i { color: var(--accent); } | |
| .submit-card h4 { margin: 20px 0 10px; color: var(--bg-ink); } | |
| /* Submit Flow Diagram */ | |
| .submit-flow { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| margin: 24px 0; | |
| padding: 20px; | |
| background: #faf8f5; | |
| border-radius: 12px; | |
| border: 1px solid var(--line); | |
| } | |
| .flow-step { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| flex: 1; | |
| } | |
| .flow-icon { | |
| width: 44px; height: 44px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| color: white; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 1.1rem; | |
| flex-shrink: 0; | |
| } | |
| .flow-text { | |
| font-size: 0.85rem; | |
| line-height: 1.4; | |
| color: var(--bg-ink); | |
| } | |
| .flow-text strong { display: block; font-size: 0.9rem; } | |
| .flow-arrow { | |
| color: var(--line); | |
| font-size: 1.2rem; | |
| flex-shrink: 0; | |
| } | |
| .field-desc p { | |
| font-size: 0.9rem; color: var(--bg-ink); margin: 6px 0; line-height: 1.5; | |
| } | |
| .field-desc code { | |
| background: #f4f0ec; padding: 2px 6px; border-radius: 4px; font-size: 0.85em; | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); | |
| } | |
| .code-block { | |
| background: #faf8f5; padding: 16px; border-radius: 8px; | |
| font-size: 0.85rem; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #333; | |
| border: 1px solid #e8e2da; | |
| white-space: pre; | |
| line-height: 1.55; | |
| } | |
| .upload-form { margin-top: 16px; } | |
| .upload-form input[type="file"] { | |
| width: 100%; padding: 10px; border: 2px dashed var(--line); border-radius: 8px; | |
| background: #faf8f5; cursor: pointer; font-family: "Lato", sans-serif; | |
| box-sizing: border-box; | |
| } | |
| .btn.primary { | |
| background: var(--accent); color: white; border: none; padding: 12px 24px; | |
| border-radius: 8px; font-weight: bold; cursor: pointer; width: 100%; margin-top: 16px; | |
| transition: background 0.2s; | |
| font-family: "Lato", sans-serif; font-size: 1rem; | |
| display: flex; align-items: center; justify-content: center; gap: 8px; | |
| } | |
| .btn.primary:hover { background: #b14a1f; } | |
| .btn.primary:disabled { background: #ccc; cursor: not-allowed; } | |
| /* Submit Result Messages */ | |
| #submit-result { | |
| margin-top: 20px; | |
| padding: 16px; | |
| border-radius: 8px; | |
| font-size: 0.93rem; | |
| line-height: 1.6; | |
| } | |
| #submit-result.success { | |
| background: #e8f5e9; | |
| border: 1px solid #a5d6a7; | |
| color: #2e7d32; | |
| } | |
| #submit-result.error { | |
| background: #fce4ec; | |
| border: 1px solid #ef9a9a; | |
| color: #c62828; | |
| } | |
| #submit-result a { | |
| color: var(--accent); | |
| font-weight: bold; | |
| } | |
| /* ===== Citation ===== */ | |
| .citation-section { | |
| margin-top: 48px; | |
| text-align: center; | |
| } | |
| .citation-section h3 { | |
| color: var(--muted); | |
| font-size: 1rem; | |
| margin-bottom: 12px; | |
| display: flex; align-items: center; justify-content: center; gap: 8px; | |
| } | |
| .citation-section h3 i { color: var(--accent); } | |
| .citation-block { | |
| text-align: left; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| font-size: 0.82rem; | |
| } | |
| /* ===== Footer ===== */ | |
| .footer { text-align: center; padding: 40px; color: var(--muted); font-size: 0.9rem; } | |
| /* ===== Responsive ===== */ | |
| @media (max-width: 640px) { | |
| .paper-title { font-size: 1.4rem; } | |
| .leaderboard-title { font-size: 1.8rem; } | |
| .stat-bar { flex-wrap: wrap; padding: 16px 20px; gap: 16px; } | |
| .stat-divider { display: none; } | |
| .paper-authors { font-size: 0.85rem; } | |
| .paper-links { flex-wrap: wrap; } | |
| .submit-flow { flex-direction: column; gap: 16px; } | |
| .flow-arrow { transform: rotate(90deg); } | |
| .ruc-logo { height: 48px; } | |
| } |