Spaces:
Sleeping
Sleeping
| :root { | |
| --bg: #ece7dc; | |
| --panel: #f7f3eb; | |
| --card: #ffffff; | |
| --ink: #131312; | |
| --ink-soft: #5b574f; | |
| --ink-mute: #8c8779; | |
| --line: #e3ddd0; | |
| --line-strong: #d1cabb; | |
| --accent: #131312; | |
| --accent-ink: #f7f3eb; | |
| --highlight: #1d1d1b; | |
| --shadow: 0 1px 0 rgba(19, 19, 18, 0.04), 0 8px 24px -16px rgba(19, 19, 18, 0.18); | |
| --radius-lg: 18px; | |
| --radius-md: 12px; | |
| --radius-sm: 8px; | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| background: var(--bg); | |
| color: var(--ink); | |
| font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| font-size: 14px; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| } | |
| .app { | |
| display: grid; | |
| grid-template-columns: 240px 1fr; | |
| min-height: 100vh; | |
| padding: 16px; | |
| gap: 16px; | |
| } | |
| /* sidebar */ | |
| .sidebar { | |
| background: var(--panel); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-lg); | |
| padding: 22px 18px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 28px; | |
| box-shadow: var(--shadow); | |
| position: sticky; | |
| top: 16px; | |
| align-self: start; | |
| height: calc(100vh - 32px); | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-weight: 600; | |
| } | |
| .brand-mark { | |
| font-size: 22px; | |
| line-height: 1; | |
| } | |
| .brand-name { | |
| font-family: "Instrument Serif", serif; | |
| font-size: 22px; | |
| letter-spacing: 0.2px; | |
| } | |
| .nav { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| flex: 1; | |
| } | |
| .nav-section { | |
| text-transform: uppercase; | |
| font-size: 10px; | |
| letter-spacing: 0.12em; | |
| color: var(--ink-mute); | |
| margin: 4px 8px 8px; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 8px 10px; | |
| border-radius: var(--radius-sm); | |
| color: var(--ink-soft); | |
| text-decoration: none; | |
| font-weight: 500; | |
| } | |
| .nav-item.active { | |
| background: #fff; | |
| color: var(--ink); | |
| box-shadow: 0 0 0 1px var(--line); | |
| } | |
| .nav-item .dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--ink-mute); | |
| } | |
| .nav-item.active .dot { background: var(--ink); } | |
| .sidebar-footer { | |
| border-top: 1px solid var(--line); | |
| padding-top: 16px; | |
| } | |
| .me { display: flex; align-items: center; gap: 10px; } | |
| .me-avatar { | |
| width: 32px; height: 32px; border-radius: 50%; | |
| background: var(--ink); | |
| color: var(--accent-ink); | |
| display: grid; place-items: center; | |
| font-weight: 600; | |
| } | |
| .me-meta { line-height: 1.15; } | |
| .me-name { font-weight: 600; } | |
| .me-role { font-size: 12px; color: var(--ink-mute); } | |
| /* main */ | |
| .main { | |
| background: var(--panel); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-lg); | |
| padding: 22px 24px 28px; | |
| box-shadow: var(--shadow); | |
| min-width: 0; | |
| } | |
| .top { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| padding-bottom: 18px; | |
| border-bottom: 1px solid var(--line); | |
| margin-bottom: 18px; | |
| } | |
| .search { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| background: #fff; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| padding: 6px 6px 6px 18px; | |
| box-shadow: var(--shadow); | |
| } | |
| .search:focus-within { border-color: var(--line-strong); } | |
| .search-icon { | |
| font-size: 18px; | |
| color: var(--ink-mute); | |
| } | |
| .search input { | |
| flex: 1; | |
| border: 0; | |
| outline: 0; | |
| background: transparent; | |
| font: inherit; | |
| color: var(--ink); | |
| padding: 8px 6px; | |
| } | |
| .search input::placeholder { color: var(--ink-mute); } | |
| .btn-primary { | |
| background: var(--accent); | |
| color: var(--accent-ink); | |
| border: 0; | |
| border-radius: 999px; | |
| padding: 9px 18px; | |
| font-weight: 600; | |
| font: inherit; | |
| cursor: pointer; | |
| transition: transform 0.08s ease; | |
| } | |
| .btn-primary:hover { transform: translateY(-1px); } | |
| .btn-primary:active { transform: translateY(0); } | |
| .filters { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| flex-wrap: wrap; | |
| } | |
| .filters-label { | |
| text-transform: uppercase; | |
| font-size: 10px; | |
| letter-spacing: 0.14em; | |
| color: var(--ink-mute); | |
| } | |
| .pills { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| } | |
| .pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 6px 12px; | |
| border-radius: 999px; | |
| background: #fff; | |
| border: 1px solid var(--line); | |
| color: var(--ink-soft); | |
| font-size: 12px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .pill .pill-dot { | |
| width: 6px; height: 6px; border-radius: 50%; | |
| background: var(--ink-mute); | |
| } | |
| .pill.on { | |
| background: var(--ink); | |
| color: var(--accent-ink); | |
| border-color: var(--ink); | |
| } | |
| .pill.on .pill-dot { background: var(--accent-ink); } | |
| .pill.group { | |
| border-style: dashed; | |
| } | |
| /* status row */ | |
| .status { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 12px; | |
| margin-bottom: 18px; | |
| } | |
| .status-card { | |
| background: #fff; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-md); | |
| padding: 14px 16px; | |
| box-shadow: var(--shadow); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| min-height: 84px; | |
| justify-content: center; | |
| } | |
| .status-num { | |
| font-family: "Instrument Serif", serif; | |
| font-size: 28px; | |
| line-height: 1; | |
| } | |
| .status-label { | |
| font-size: 12px; | |
| color: var(--ink-mute); | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| } | |
| .status-card-hint .status-hint { | |
| font-size: 12px; | |
| color: var(--ink-soft); | |
| line-height: 1.4; | |
| } | |
| /* board */ | |
| .board { | |
| display: grid; | |
| grid-auto-flow: column; | |
| grid-auto-columns: minmax(260px, 1fr); | |
| gap: 14px; | |
| overflow-x: auto; | |
| padding-bottom: 8px; | |
| } | |
| .column { | |
| background: transparent; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| min-width: 0; | |
| } | |
| .column-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 4px 6px 8px; | |
| } | |
| .column-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-weight: 600; | |
| font-size: 14px; | |
| } | |
| .column-count { | |
| font-size: 11px; | |
| color: var(--ink-mute); | |
| background: #fff; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| padding: 2px 8px; | |
| } | |
| .column-icon { | |
| width: 6px; height: 6px; border-radius: 50%; | |
| background: var(--ink); | |
| } | |
| .card { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-md); | |
| padding: 12px 14px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| box-shadow: var(--shadow); | |
| transition: transform 0.08s ease, border-color 0.12s ease; | |
| cursor: default; | |
| animation: cardIn 280ms cubic-bezier(0.2, 0.7, 0.2, 1) both; | |
| animation-delay: var(--stagger, 0ms); | |
| } | |
| @keyframes cardIn { | |
| from { opacity: 0; transform: translateY(8px) scale(0.985); } | |
| to { opacity: 1; transform: translateY(0) scale(1); } | |
| } | |
| .card:hover { | |
| transform: translateY(-1px); | |
| border-color: var(--line-strong); | |
| } | |
| .card.dark { | |
| background: var(--highlight); | |
| color: var(--accent-ink); | |
| border-color: var(--highlight); | |
| } | |
| .card.dark .card-meta, | |
| .card.dark .card-name { | |
| color: var(--accent-ink); | |
| } | |
| .card.dark .card-sub { | |
| color: rgba(247, 243, 235, 0.65); | |
| } | |
| .card.dark .chip { | |
| background: rgba(247, 243, 235, 0.12); | |
| color: var(--accent-ink); | |
| border-color: rgba(247, 243, 235, 0.18); | |
| } | |
| .card-name { | |
| font-weight: 600; | |
| font-size: 13.5px; | |
| word-break: break-word; | |
| } | |
| .card-sub { | |
| font-size: 11.5px; | |
| color: var(--ink-mute); | |
| word-break: break-all; | |
| } | |
| .excerpt { | |
| position: relative; | |
| margin: 0; | |
| padding: 12px 10px; | |
| background: var(--panel); | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| font-family: ui-monospace, "SF Mono", Menlo, monospace; | |
| font-size: 11.5px; | |
| line-height: 1.45; | |
| color: var(--ink-soft); | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| max-height: 14.5em; | |
| overflow: hidden; | |
| /* Fade top/bottom of the content via alpha masking. Unlike an overlay, | |
| this never paints over the yellow highlight — it just makes the edges | |
| transparent so any color underneath fades smoothly into the card. */ | |
| --excerpt-fade: linear-gradient( | |
| to bottom, | |
| transparent 0, | |
| black 2em, | |
| black calc(100% - 2em), | |
| transparent 100% | |
| ); | |
| mask-image: var(--excerpt-fade); | |
| -webkit-mask-image: var(--excerpt-fade); | |
| } | |
| .excerpt .match { | |
| background: #fff19a; | |
| color: #4a3a00; | |
| padding: 1px 2px; | |
| border-radius: 2px; | |
| box-decoration-break: clone; | |
| -webkit-box-decoration-break: clone; | |
| } | |
| .card.dark .excerpt { | |
| background: rgba(247, 243, 235, 0.06); | |
| border-color: rgba(247, 243, 235, 0.12); | |
| color: var(--accent-ink); | |
| } | |
| .card.dark .excerpt .match { | |
| background: #f5d96a; | |
| color: #2a2200; | |
| } | |
| .card-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 11px; | |
| color: var(--ink-soft); | |
| } | |
| .chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 2px 8px; | |
| border-radius: 999px; | |
| background: var(--panel); | |
| border: 1px solid var(--line); | |
| font-size: 11px; | |
| color: var(--ink-soft); | |
| } | |
| .score { | |
| font-family: "Instrument Serif", serif; | |
| font-size: 16px; | |
| line-height: 1; | |
| } | |
| .thumb { | |
| width: 100%; | |
| background: var(--bg); | |
| border-radius: var(--radius-sm); | |
| overflow: hidden; | |
| display: grid; | |
| place-items: center; | |
| } | |
| .thumb img, | |
| .thumb video { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| display: block; | |
| opacity: 0; | |
| transition: opacity 220ms ease; | |
| } | |
| .thumb img.loaded, | |
| .thumb video.loaded { | |
| opacity: 1; | |
| } | |
| .empty { | |
| padding: 18px; | |
| border: 1px dashed var(--line-strong); | |
| border-radius: var(--radius-md); | |
| font-size: 12px; | |
| color: var(--ink-mute); | |
| text-align: center; | |
| background: rgba(255, 255, 255, 0.4); | |
| } | |
| .loading { | |
| display: inline-block; | |
| width: 10px; height: 10px; | |
| border: 2px solid var(--line-strong); | |
| border-top-color: var(--ink); | |
| border-radius: 50%; | |
| animation: spin 0.6s linear infinite; | |
| vertical-align: middle; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| @media (max-width: 900px) { | |
| .app { grid-template-columns: 1fr; } | |
| .sidebar { position: static; height: auto; } | |
| .status { grid-template-columns: repeat(2, minmax(0, 1fr)); } | |
| } | |
| /* View Transitions: smooth cross-fade when the board swaps between | |
| queries / loading / results. Falls back silently in browsers that | |
| don't support the API. */ | |
| ::view-transition-old(root), | |
| ::view-transition-new(root) { | |
| animation-duration: 260ms; | |
| animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .card { animation: none; } | |
| .thumb img, .thumb video { transition: none; opacity: 1; } | |
| ::view-transition-old(root), | |
| ::view-transition-new(root) { animation-duration: 0ms; } | |
| } | |