Spaces:
Sleeping
Sleeping
| /* ========================================================== | |
| ML Model Hub — Warm Terminal Light / Aged Paper Theme | |
| ========================================================== */ | |
| @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Lora:ital,wght@0,400;0,600;1,400&display=swap'); | |
| :root { | |
| /* palette — warm paper whites, ink darks, one deep green */ | |
| --bg-primary: #f5f0e8; /* aged paper */ | |
| --bg-secondary: #ede8de; /* slightly darker parchment */ | |
| --bg-card: #faf7f2; /* near white with warmth */ | |
| --bg-input: #f0ebe0; /* input field, warm */ | |
| --border: #d4cab8; /* warm beige border */ | |
| --border-bright: #b8a e96; /* slightly darker */ | |
| --text-main: #3a3228; /* warm dark brown — not pure black */ | |
| --text-dim: #8a7d6a; /* mid warm brown */ | |
| --text-bright: #1e1812; /* near-black ink */ | |
| --accent: #3a7a3a; /* deep forest phosphor green */ | |
| --accent-dim: #6aaa6a; /* lighter green for borders */ | |
| --accent-light: rgba(58,122,58,.1); /* tint for backgrounds */ | |
| --amber: #9a6820; /* warm amber for labels */ | |
| --danger: #9a3a20; | |
| /* type */ | |
| --ff-body: 'Lora', Georgia, serif; | |
| --ff-mono: 'IBM Plex Mono', 'Courier New', monospace; | |
| /* misc */ | |
| --radius: 6px; | |
| --radius-lg: 10px; | |
| --nav-h: 58px; | |
| --max-w: 1120px; | |
| --transition: .18s ease; | |
| } | |
| /* ---- reset ---- */ | |
| *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; } | |
| html { scroll-behavior:smooth; } | |
| /* very faint paper grain — purely decorative */ | |
| body::before { | |
| content:''; | |
| position:fixed; inset:0; z-index:9999; pointer-events:none; | |
| opacity:.025; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E"); | |
| background-size: 200px 200px; | |
| } | |
| body { | |
| font-family: var(--ff-body); | |
| background: var(--bg-primary); | |
| color: var(--text-main); | |
| line-height: 1.65; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| a { color: var(--accent); text-decoration: none; } | |
| a:hover { text-decoration: underline; color: var(--text-bright); } | |
| /* ============ NAVBAR ============ */ | |
| .navbar { | |
| position: sticky; top:0; z-index:100; | |
| height: var(--nav-h); | |
| background: var(--bg-primary); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .nav-inner { | |
| max-width: var(--max-w); margin: 0 auto; | |
| height: 100%; padding: 0 24px; | |
| display: flex; align-items: center; justify-content: space-between; | |
| } | |
| .nav-logo { | |
| display: flex; align-items: center; gap: 10px; | |
| font-family: var(--ff-mono); | |
| font-weight: 600; font-size: 1rem; | |
| color: var(--text-bright); | |
| letter-spacing: .02em; | |
| } | |
| .nav-logo:hover { text-decoration: none; color: var(--accent); } | |
| .logo-icon { | |
| width: 32px; height: 32px; display: grid; place-items: center; | |
| background: transparent; | |
| border: 1px solid var(--accent); | |
| border-radius: 4px; | |
| color: var(--accent); | |
| font-family: var(--ff-mono); | |
| font-size: .85rem; font-weight: 600; | |
| } | |
| .nav-links { list-style: none; display: flex; gap: 2px; } | |
| .nav-links a { | |
| display: flex; align-items: center; gap: 6px; | |
| padding: 7px 14px; border-radius: var(--radius); | |
| font-family: var(--ff-mono); | |
| font-size: .8rem; font-weight: 400; | |
| color: var(--text-dim); | |
| border: 1px solid transparent; | |
| transition: var(--transition); | |
| } | |
| .nav-links a:hover { | |
| color: var(--text-main); | |
| background: var(--bg-secondary); | |
| border-color: var(--border); | |
| text-decoration: none; | |
| } | |
| .nav-links a.active { | |
| color: var(--accent); | |
| background: var(--accent-light); | |
| border-color: var(--accent-dim); | |
| } | |
| /* hamburger */ | |
| .hamburger { | |
| display: none; background: none; border: none; cursor: pointer; | |
| flex-direction: column; gap: 5px; padding: 6px; | |
| } | |
| .hamburger span { | |
| width: 22px; height: 1px; background: var(--text-main); | |
| border-radius: 0; transition: var(--transition); | |
| } | |
| @media(max-width:700px){ | |
| .hamburger { display: flex; } | |
| .nav-links { | |
| display: none; flex-direction: column; gap: 0; | |
| position: absolute; top: var(--nav-h); left: 0; right: 0; | |
| background: var(--bg-primary); | |
| border-bottom: 1px solid var(--border); | |
| padding: 12px 0; | |
| } | |
| .nav-links.open { display: flex; } | |
| .nav-links a { padding: 12px 24px; border-radius: 0; border-color: transparent; } | |
| } | |
| /* ============ HERO ============ */ | |
| .hero { | |
| text-align: center; padding: 64px 24px 32px; | |
| } | |
| .hero h1 { | |
| font-family: var(--ff-mono); | |
| font-size: clamp(1.7rem, 4.5vw, 2.8rem); | |
| font-weight: 500; | |
| color: var(--text-bright); | |
| line-height: 1.2; | |
| letter-spacing: -.01em; | |
| } | |
| .gradient-text { | |
| color: var(--accent); | |
| background: none; | |
| -webkit-background-clip: unset; | |
| -webkit-text-fill-color: var(--accent); | |
| } | |
| .hero-subtitle { | |
| margin-top: 14px; | |
| font-family: var(--ff-mono); | |
| font-size: .88rem; font-weight: 300; font-style: italic; | |
| color: var(--text-dim); | |
| max-width: 520px; margin-inline: auto; | |
| } | |
| .hero-subtitle::after { | |
| content: '█'; | |
| color: var(--accent); | |
| animation: blink 1.1s step-end infinite; | |
| margin-left: 4px; font-style: normal; | |
| } | |
| @keyframes blink { 50% { opacity: 0; } } | |
| /* ============ CHAT SECTION ============ */ | |
| .chat-section { | |
| padding: 0 24px 48px; | |
| display: flex; justify-content: center; | |
| } | |
| .chat-container { | |
| width: 100%; max-width: 780px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| display: flex; flex-direction: column; | |
| box-shadow: 0 2px 12px rgba(0,0,0,.06); | |
| } | |
| /* controls */ | |
| .controls-row { | |
| display: flex; gap: 16px; padding: 18px 20px 10px; | |
| flex-wrap: wrap; | |
| background: var(--bg-secondary); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .control-group { flex: 1; min-width: 180px; } | |
| .control-group label { | |
| display: block; | |
| font-family: var(--ff-mono); | |
| font-size: .72rem; font-weight: 500; | |
| color: var(--amber); | |
| margin-bottom: 5px; | |
| letter-spacing: .06em; text-transform: uppercase; | |
| } | |
| .control-group label i { margin-right: 4px; opacity: .7; } | |
| .control-group select { | |
| width: 100%; padding: 8px 12px; | |
| font-size: .85rem; font-family: var(--ff-mono); | |
| background: var(--bg-card); | |
| color: var(--text-main); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| appearance: auto; cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .control-group select:focus { | |
| outline: none; | |
| border-color: var(--accent-dim); | |
| } | |
| /* model description */ | |
| .model-desc { | |
| margin: 0 20px 12px; padding: 8px 14px; | |
| background: var(--accent-light); | |
| border-left: 2px solid var(--accent-dim); | |
| border-radius: 0 var(--radius) var(--radius) 0; | |
| font-size: .8rem; color: var(--text-dim); | |
| font-family: var(--ff-mono); | |
| transition: var(--transition); | |
| } | |
| .model-desc::before { content: '// '; color: var(--accent-dim); } | |
| /* chat log */ | |
| .chat-log { | |
| flex: 1; min-height: 340px; max-height: 480px; | |
| overflow-y: auto; padding: 20px; | |
| display: flex; flex-direction: column; gap: 14px; | |
| background: var(--bg-primary); | |
| } | |
| .chat-log::-webkit-scrollbar { width: 4px; } | |
| .chat-log::-webkit-scrollbar-track { background: transparent; } | |
| .chat-log::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } | |
| .msg { display: flex; gap: 10px; animation: fadeUp .25s ease; } | |
| .msg.user { flex-direction: row-reverse; } | |
| .msg-avatar { | |
| width: 32px; height: 32px; border-radius: 3px; | |
| display: grid; place-items: center; flex-shrink: 0; | |
| font-size: .75rem; font-family: var(--ff-mono); font-weight: 600; | |
| } | |
| .msg.bot .msg-avatar { | |
| background: var(--accent-light); | |
| border: 1px solid var(--accent-dim); | |
| color: var(--accent); | |
| } | |
| .msg.user .msg-avatar { | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border); | |
| color: var(--text-dim); | |
| } | |
| .msg-bubble { | |
| max-width: 75%; padding: 10px 15px; | |
| border-radius: var(--radius); | |
| font-size: .88rem; line-height: 1.6; | |
| white-space: normal; word-break: break-word; | |
| font-family: var(--ff-mono); | |
| } | |
| .msg.bot .msg-bubble { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-left: 2px solid var(--accent-dim); | |
| color: var(--text-main); | |
| } | |
| .msg.user .msg-bubble { | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border); | |
| color: var(--text-bright); | |
| } | |
| /* input bar */ | |
| .chat-input-bar { | |
| display: flex; align-items: flex-end; gap: 10px; | |
| padding: 14px 20px; | |
| border-top: 1px solid var(--border); | |
| background: var(--bg-card); | |
| } | |
| .chat-input-bar textarea { | |
| flex: 1; resize: none; overflow: hidden; | |
| padding: 9px 13px; | |
| font-size: .88rem; font-family: var(--ff-mono); | |
| color: var(--text-bright); | |
| background: var(--bg-input); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| line-height: 1.5; transition: var(--transition); | |
| } | |
| .chat-input-bar textarea::placeholder { color: var(--text-dim); } | |
| .chat-input-bar textarea:focus { | |
| outline: none; | |
| border-color: var(--accent-dim); | |
| background: var(--bg-card); | |
| } | |
| .chat-input-bar button { | |
| width: 40px; height: 40px; | |
| border: 1px solid var(--accent-dim); | |
| border-radius: var(--radius); | |
| background: transparent; | |
| color: var(--accent); | |
| font-size: .95rem; cursor: pointer; | |
| display: grid; place-items: center; | |
| transition: var(--transition); | |
| } | |
| .chat-input-bar button:hover { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| color: #fff; | |
| } | |
| .chat-input-bar button:disabled { | |
| opacity: .3; cursor: not-allowed; background: transparent; | |
| } | |
| /* ============ MODEL CARDS ============ */ | |
| .models-overview { | |
| padding: 24px 24px 64px; | |
| max-width: var(--max-w); margin: 0 auto; | |
| } | |
| .models-overview h2 { | |
| font-family: var(--ff-mono); | |
| font-size: 1.1rem; font-weight: 500; | |
| color: var(--text-dim); | |
| margin-bottom: 28px; text-align: center; | |
| letter-spacing: .04em; text-transform: uppercase; | |
| } | |
| .models-overview h2::before { content: '── '; color: var(--border); } | |
| .models-overview h2::after { content: ' ──'; color: var(--border); } | |
| .model-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); | |
| gap: 14px; | |
| } | |
| .model-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 22px; | |
| transition: var(--transition); | |
| cursor: pointer; | |
| position: relative; | |
| box-shadow: 0 1px 4px rgba(0,0,0,.04); | |
| } | |
| .model-card::before { | |
| content: ''; | |
| position: absolute; top: -1px; left: -1px; | |
| width: 16px; height: 16px; | |
| border-top: 2px solid var(--accent-dim); | |
| border-left: 2px solid var(--accent-dim); | |
| border-radius: var(--radius) 0 0 0; | |
| opacity: 0; transition: var(--transition); | |
| } | |
| .model-card:hover { | |
| border-color: var(--accent-dim); | |
| background: var(--bg-card); | |
| box-shadow: 0 4px 16px rgba(0,0,0,.08); | |
| transform: translateY(-2px); | |
| } | |
| .model-card:hover::before { opacity: 1; } | |
| .card-icon { | |
| width: 40px; height: 40px; border-radius: var(--radius); | |
| display: grid; place-items: center; | |
| background: var(--accent-light); | |
| border: 1px solid var(--accent-dim); | |
| color: var(--accent); | |
| font-size: 1rem; margin-bottom: 14px; | |
| } | |
| .model-card h3 { | |
| font-family: var(--ff-mono); | |
| font-size: .9rem; font-weight: 600; | |
| color: var(--text-bright); margin-bottom: 6px; | |
| } | |
| .model-card p { | |
| font-size: .84rem; color: var(--text-dim); | |
| line-height: 1.6; margin-bottom: 14px; font-style: italic; | |
| } | |
| .card-badge { | |
| display: inline-block; padding: 2px 9px; | |
| font-size: .7rem; font-family: var(--ff-mono); | |
| background: var(--accent-light); | |
| border: 1px solid var(--accent-dim); | |
| border-radius: 2px; color: var(--accent); | |
| letter-spacing: .04em; | |
| white-space: normal; /* allow wrapping */ | |
| word-break: break-word; /* break long tokens */ | |
| } | |
| /* ============ TASK PAGES ============ */ | |
| .task-page { | |
| max-width: 820px; margin: 0 auto; padding: 48px 24px 72px; | |
| } | |
| .task-header { | |
| text-align: center; margin-bottom: 44px; | |
| border-bottom: 1px solid var(--border); padding-bottom: 32px; | |
| } | |
| .task-number { | |
| font-family: var(--ff-mono); | |
| font-size: 3.5rem; font-weight: 300; | |
| color: var(--accent); opacity: .25; | |
| line-height: 1; | |
| } | |
| .task-header h1 { | |
| font-family: var(--ff-body); | |
| font-size: 1.9rem; font-weight: 600; | |
| color: var(--text-bright); margin-top: 4px; font-style: italic; | |
| } | |
| .task-subtitle { | |
| font-family: var(--ff-mono); | |
| color: var(--text-dim); font-size: .82rem; margin-top: 10px; | |
| } | |
| .task-body { display: flex; flex-direction: column; gap: 18px; } | |
| .task-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 24px; | |
| box-shadow: 0 1px 4px rgba(0,0,0,.04); | |
| } | |
| .task-card h2 { | |
| font-family: var(--ff-mono); | |
| font-size: .82rem; font-weight: 500; | |
| color: var(--amber); | |
| margin-bottom: 12px; | |
| letter-spacing: .05em; text-transform: uppercase; | |
| } | |
| .task-card h2::before { content: '> '; color: var(--text-dim); } | |
| .task-card h2 i { margin-right: 5px; } | |
| .task-card p, .task-card li { | |
| font-size: .9rem; color: var(--text-main); line-height: 1.75; | |
| } | |
| .task-card code { | |
| font-family: var(--ff-mono); | |
| font-size: .82rem; | |
| color: var(--accent); | |
| background: var(--accent-light); | |
| border: 1px solid var(--accent-dim); | |
| border-radius: 3px; | |
| padding: 1px 5px; | |
| } | |
| .task-card ol { | |
| padding-left: 20px; display: flex; flex-direction: column; gap: 8px; | |
| } | |
| .task-list { | |
| padding-left: 20px; | |
| margin-top: 12px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .task-figures { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 18px; | |
| margin-top: 12px; | |
| } | |
| .task-figures figure { margin: 0; } | |
| .task-figures img { | |
| width: 100%; | |
| height: auto; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| display: block; | |
| background: var(--bg-card); | |
| } | |
| .task-figures figcaption { | |
| font-family: var(--ff-mono); | |
| font-size: .75rem; | |
| color: var(--text-dim); | |
| margin-top: 6px; | |
| } | |
| .figures-subhead { | |
| font-family: var(--ff-mono); | |
| font-size: .82rem; | |
| color: var(--text-bright); | |
| margin-top: 18px; | |
| margin-bottom: 4px; | |
| letter-spacing: .03em; | |
| } | |
| .figures-subhead:first-of-type { margin-top: 4px; } | |
| .models-overview-note { | |
| font-family: var(--ff-mono); | |
| font-size: .82rem; | |
| color: var(--text-dim); | |
| margin-bottom: 18px; | |
| } | |
| .task1-page { | |
| max-width: 980px; | |
| } | |
| .task1-chat-section { | |
| padding: 0; | |
| } | |
| .task1-chat-section .chat-container { | |
| max-width: 100%; | |
| } | |
| .msg.bot[data-family="classical"] .msg-bubble { | |
| border-left-color: var(--amber); | |
| } | |
| .msg.bot[data-family="ptlm"] .msg-bubble { | |
| border-left-color: var(--accent); | |
| } | |
| .msg.bot[data-family="classical"] .msg-avatar { | |
| color: var(--amber); | |
| border-color: rgba(154,104,32,.45); | |
| background: rgba(154,104,32,.08); | |
| } | |
| .msg.bot[data-family="ptlm"] .msg-avatar { | |
| color: var(--accent); | |
| } | |
| .model-badge { | |
| margin-bottom: 2px; | |
| font-family: var(--ff-mono); | |
| font-size: .6rem; | |
| color: var(--text-dim); | |
| letter-spacing: .03em; | |
| text-transform: uppercase; | |
| } | |
| .model-badge span { | |
| display: inline-block; | |
| margin-left: 4px; | |
| padding: 0 4px; | |
| border: 1px solid var(--border); | |
| border-radius: 3px; | |
| color: var(--amber); | |
| } | |
| .result-block .rs { | |
| display: inline-block; | |
| margin-left: 10px; | |
| } | |
| .eval-grid > div { | |
| grid-column: 1 / -1; | |
| } | |
| .eval-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 18px; | |
| } | |
| .eval-grid h3 { | |
| font-family: var(--ff-mono); | |
| font-size: .85rem; | |
| color: var(--text-bright); | |
| margin-bottom: 10px; | |
| } | |
| .eval-table-wrap { | |
| overflow-x: auto; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| background: var(--bg-card); | |
| } | |
| .eval-table { | |
| width: 100%; | |
| min-width: 560px; | |
| border-collapse: collapse; | |
| font-family: var(--ff-mono); | |
| font-size: .75rem; | |
| } | |
| .eval-table th, | |
| .eval-table td { | |
| padding: 9px 10px; | |
| text-align: left; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .eval-table th { | |
| color: var(--amber); | |
| background: var(--bg-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: .05em; | |
| font-weight: 500; | |
| } | |
| .eval-table tbody tr:last-child td { | |
| border-bottom: 0; | |
| } | |
| .eval-table td { | |
| color: var(--text-main); | |
| } | |
| .cross-variety-table .std { | |
| color: var(--text-dim); | |
| font-size: .68rem; | |
| margin-left: 2px; | |
| } | |
| .cross-variety-table tr.diagonal td { | |
| background: var(--accent-light); | |
| } | |
| .cross-variety-table tr.mixed td { | |
| border-top: 1px dashed var(--accent-dim); | |
| font-style: italic; | |
| } | |
| .eval-table tr.best-row td { | |
| background: rgba(154, 104, 32, .14); | |
| color: var(--text-bright); | |
| font-weight: 600; | |
| } | |
| .eval-table tr.best-row td .fa-trophy { | |
| color: var(--amber); | |
| margin-left: 6px; | |
| font-size: .72rem; | |
| } | |
| .cross-variety-table tr.best-row.diagonal td { | |
| background: rgba(154, 104, 32, .18); | |
| } | |
| .prompt-examples { display: flex; flex-wrap: wrap; gap: 8px; } | |
| .prompt-chip { | |
| padding: 6px 12px; | |
| background: var(--bg-input); | |
| border: 1px solid var(--border); | |
| border-radius: 3px; | |
| font-size: .78rem; color: var(--text-dim); | |
| font-family: var(--ff-mono); | |
| transition: var(--transition); | |
| } | |
| .prompt-chip:hover { border-color: var(--accent-dim); color: var(--accent); } | |
| /* ============ FOOTER ============ */ | |
| .site-footer { | |
| margin-top: auto; text-align: center; | |
| padding: 22px 24px; | |
| font-family: var(--ff-mono); | |
| font-size: .73rem; color: var(--text-dim); | |
| border-top: 1px solid var(--border); | |
| letter-spacing: .03em; | |
| } | |
| .site-footer::before { content: '// '; } | |
| /* ============ RESULT CHIPS ============ */ | |
| .result-block { font-family: var(--ff-mono); font-size: .72rem; } | |
| .result-block .rl { color: var(--accent); } | |
| .result-block .rv { color: var(--text-bright); } | |
| .result-block .rs { color: var(--amber); } | |
| /* ============ LOADING DOTS ============ */ | |
| .loading-dots span { | |
| display: inline-block; width: 6px; height: 6px; | |
| margin: 0 2px; border-radius: 0; | |
| background: var(--accent); | |
| animation: bounce .7s infinite alternate; | |
| } | |
| .loading-dots span:nth-child(2) { animation-delay: .18s; } | |
| .loading-dots span:nth-child(3) { animation-delay: .36s; } | |
| @keyframes bounce { to { opacity: .2; transform: translateY(-5px); } } | |
| /* ============ ANIMATIONS ============ */ | |
| @keyframes fadeUp { | |
| from { opacity: 0; transform: translateY(8px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* ============ RESPONSIVE ============ */ | |
| @media(max-width:700px){ | |
| .hero { padding-top: 40px; } | |
| .chat-log { min-height: 260px; max-height: 360px; } | |
| .msg-bubble { max-width: 90%; } | |
| .eval-grid { grid-template-columns: 1fr; } | |
| } | |