Spaces:
Sleeping
Sleeping
| :root { | |
| --bg: #0d1117; | |
| --panel: #161b22; | |
| --panel-2: #1c2230; | |
| --border: #2a3140; | |
| --text: #e6edf3; | |
| --muted: #9aa7b4; | |
| --accent: #5b9dff; | |
| --accent-2: #7c5cff; | |
| --green: #3fb950; | |
| --radius: 12px; | |
| } | |
| * { box-sizing: border-box; } | |
| body { | |
| margin: 0; | |
| background: radial-gradient(1200px 600px at 50% -10%, #182233 0%, var(--bg) 60%); | |
| color: var(--text); | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .app { | |
| max-width: 860px; | |
| margin: 0 auto; | |
| padding: 48px 20px 80px; | |
| /* Sticky footer: fill at least the viewport so .foot can sit at the bottom. */ | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* Hero */ | |
| .hero { text-align: center; margin-bottom: 28px; } | |
| .hero h1 { | |
| font-size: 34px; | |
| margin: 0 0 6px; | |
| letter-spacing: -0.5px; | |
| } | |
| .logo { | |
| background: linear-gradient(135deg, var(--accent), var(--accent-2)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .subtitle { color: var(--muted); margin: 0; font-size: 15px; } | |
| .stats { color: var(--accent); } | |
| /* Search bar */ | |
| .searchbar { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 18px; | |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); | |
| } | |
| .input-row { display: flex; gap: 10px; } | |
| .input-row input { | |
| flex: 1; | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| padding: 14px 16px; | |
| color: var(--text); | |
| font-size: 16px; | |
| outline: none; | |
| transition: border-color 0.15s; | |
| } | |
| .input-row input:focus { border-color: var(--accent); } | |
| .input-row button { | |
| background: linear-gradient(135deg, var(--accent), var(--accent-2)); | |
| color: #fff; | |
| border: 0; | |
| border-radius: 10px; | |
| padding: 0 22px; | |
| font-size: 15px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: transform 0.05s, opacity 0.15s; | |
| } | |
| .input-row button:hover { opacity: 0.92; } | |
| .input-row button:active { transform: translateY(1px); } | |
| .input-row button:disabled { opacity: 0.6; cursor: default; } | |
| /* Example chips */ | |
| .examples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } | |
| .chip { | |
| background: var(--panel-2); | |
| border: 1px solid var(--border); | |
| color: var(--muted); | |
| border-radius: 999px; | |
| padding: 6px 12px; | |
| font-size: 13px; | |
| cursor: pointer; | |
| transition: color 0.15s, border-color 0.15s; | |
| } | |
| .chip:hover { color: var(--text); border-color: var(--accent); } | |
| /* Controls */ | |
| .controls { | |
| display: flex; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| gap: 14px; | |
| margin-top: 16px; | |
| padding-top: 16px; | |
| border-top: 1px solid var(--border); | |
| } | |
| .methods { display: flex; flex-wrap: wrap; gap: 6px; } | |
| .method { | |
| background: var(--panel-2); | |
| border: 1px solid var(--border); | |
| color: var(--muted); | |
| border-radius: 8px; | |
| padding: 7px 12px; | |
| font-size: 13px; | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| } | |
| .method:hover:not(:disabled) { color: var(--text); } | |
| .method.active { | |
| background: rgba(91, 157, 255, 0.16); | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| } | |
| .method:disabled { opacity: 0.4; cursor: not-allowed; } | |
| .filters { display: flex; gap: 14px; } | |
| .filters label { | |
| display: flex; | |
| flex-direction: column; | |
| font-size: 11px; | |
| color: var(--muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| gap: 4px; | |
| } | |
| .filters select { | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| color: var(--text); | |
| border-radius: 8px; | |
| padding: 6px 8px; | |
| font-size: 14px; | |
| } | |
| /* Error */ | |
| .error { | |
| margin-top: 18px; | |
| background: rgba(248, 81, 73, 0.12); | |
| border: 1px solid rgba(248, 81, 73, 0.4); | |
| color: #ff8b82; | |
| padding: 12px 16px; | |
| border-radius: 10px; | |
| } | |
| /* Results */ | |
| .results { margin-top: 26px; } | |
| .results-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| color: var(--muted); | |
| font-size: 14px; | |
| margin-bottom: 12px; | |
| } | |
| .timing { | |
| font-variant-numeric: tabular-nums; | |
| background: var(--panel-2); | |
| border: 1px solid var(--border); | |
| padding: 4px 10px; | |
| border-radius: 999px; | |
| font-size: 12px; | |
| } | |
| .expansion { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 6px; | |
| margin-bottom: 16px; | |
| } | |
| .exp-label { color: var(--muted); font-size: 13px; } | |
| .exp-term { | |
| background: rgba(124, 92, 255, 0.16); | |
| border: 1px solid rgba(124, 92, 255, 0.4); | |
| color: #c4b5ff; | |
| border-radius: 999px; | |
| padding: 3px 10px; | |
| font-size: 12px; | |
| } | |
| .empty { color: var(--muted); padding: 24px; text-align: center; } | |
| .cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } | |
| .card { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 16px 18px; | |
| transition: border-color 0.15s, transform 0.05s; | |
| } | |
| .card:hover { border-color: var(--accent); } | |
| .card-head { display: flex; gap: 10px; align-items: baseline; } | |
| .rank { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; min-width: 28px; } | |
| .headline { | |
| color: var(--text); | |
| font-size: 16px; | |
| font-weight: 600; | |
| text-decoration: none; | |
| line-height: 1.35; | |
| } | |
| .headline:hover { color: var(--accent); text-decoration: underline; } | |
| .desc { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 8px 0 10px 38px; } | |
| .card-foot { | |
| display: flex; | |
| gap: 14px; | |
| align-items: center; | |
| margin-left: 38px; | |
| font-size: 12px; | |
| } | |
| .cat { | |
| background: rgba(63, 185, 80, 0.14); | |
| color: var(--green); | |
| border-radius: 6px; | |
| padding: 2px 8px; | |
| font-weight: 600; | |
| letter-spacing: 0.3px; | |
| } | |
| .date { color: var(--muted); } | |
| .score { color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; } | |
| /* Relevance feedback */ | |
| .fb-hint { | |
| margin: 12px 0 0; | |
| font-size: 13px; | |
| color: var(--muted); | |
| } | |
| .feedback-bar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| margin: 4px 0 16px; | |
| padding: 10px 14px; | |
| background: var(--panel-2); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| font-size: 13px; | |
| color: var(--muted); | |
| } | |
| .feedback-bar button { | |
| padding: 7px 14px; | |
| border: 0; | |
| border-radius: 8px; | |
| background: var(--accent); | |
| color: #fff; | |
| font-weight: 600; | |
| cursor: pointer; | |
| } | |
| .feedback-bar button:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .relevant-check { | |
| width: 16px; | |
| height: 16px; | |
| margin-right: 4px; | |
| accent-color: var(--accent); | |
| cursor: pointer; | |
| } | |
| .card.marked { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 1px var(--accent) inset; | |
| } | |
| .foot { | |
| /* Push to the bottom of the page; keeps spacing from content when the page | |
| is long, but pins to the viewport bottom when content is short. */ | |
| margin-top: auto; | |
| padding-top: 48px; | |
| text-align: center; | |
| color: var(--muted); | |
| font-size: 12px; | |
| } | |
| /* ---- Mobile ---- */ | |
| @media (max-width: 640px) { | |
| .app { padding: 28px 16px 56px; } | |
| .hero { margin-bottom: 22px; } | |
| .hero h1 { font-size: 27px; } | |
| .subtitle { font-size: 14px; } | |
| .searchbar { padding: 14px; } | |
| /* stack methods over the filters, and let filters fill the width */ | |
| .controls { flex-direction: column; } | |
| .filters { width: 100%; } | |
| .filters label { flex: 1; } | |
| .filters select { width: 100%; } | |
| /* wrap instead of overflowing on narrow screens */ | |
| .results-meta { flex-wrap: wrap; gap: 6px; } | |
| .card-foot { flex-wrap: wrap; gap: 8px 12px; } | |
| .desc, .card-foot { margin-left: 0; } | |
| .feedback-bar { flex-wrap: wrap; } | |
| } | |
| @media (max-width: 380px) { | |
| .hero h1 { font-size: 24px; } | |
| /* stack the search input and button so both are full-width, thumb-friendly */ | |
| .input-row { flex-direction: column; } | |
| .input-row button { padding: 12px; } | |
| .method { padding: 6px 10px; font-size: 12px; } | |
| } | |