Spaces:
Sleeping
Sleeping
| /* Design tokens taken from elevenlabs.io: eggshell page background rather than | |
| pure white, warm neutral surfaces and borders, near-black ink with a cool | |
| cast, Inter for text and Geist Mono for figures, generous corner radii. */ | |
| :root { | |
| --ink: #090f15; | |
| --ink-70: rgba(9, 15, 21, 0.7); | |
| --ink-50: rgba(9, 15, 21, 0.5); | |
| --ink-35: rgba(9, 15, 21, 0.35); | |
| --page: #fdfcfc; | |
| --surface: #f5f3f1; | |
| --surface-raised: #ffffff; | |
| --border: #ebe8e4; | |
| --border-strong: #d7d2cc; | |
| --positive: #1a7f52; | |
| --warning: #fbbe45; | |
| --negative: #fa675b; | |
| --r-sm: 8px; | |
| --r-md: 12px; | |
| --r-lg: 20px; | |
| --r-xl: 24px; | |
| --r-pill: 9999px; | |
| --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body, | |
| #root { | |
| height: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| background: var(--page); | |
| color: var(--ink); | |
| font-family: var(--sans); | |
| font-size: 15px; | |
| line-height: 1.55; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| button, | |
| input { | |
| font: inherit; | |
| color: inherit; | |
| } | |
| .mono { | |
| font-family: var(--mono); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| /* ---------- layout ---------- */ | |
| .shell { | |
| max-width: 1080px; | |
| margin: 0 auto; | |
| padding: 40px 24px 96px; | |
| } | |
| .masthead { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 24px; | |
| flex-wrap: wrap; | |
| margin-bottom: 28px; | |
| } | |
| .masthead h1 { | |
| margin: 0 0 6px; | |
| font-size: 26px; | |
| font-weight: 600; | |
| letter-spacing: -0.02em; | |
| } | |
| .masthead p { | |
| margin: 0; | |
| max-width: 56ch; | |
| color: var(--ink-70); | |
| font-size: 14px; | |
| } | |
| .badges { | |
| display: flex; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| } | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 5px 11px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--r-pill); | |
| background: var(--surface-raised); | |
| font-size: 12px; | |
| color: var(--ink-70); | |
| white-space: nowrap; | |
| } | |
| .badge b { | |
| color: var(--ink); | |
| font-weight: 600; | |
| } | |
| .dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--positive); | |
| } | |
| .dot.bad { | |
| background: var(--negative); | |
| } | |
| /* ---------- tabs ---------- */ | |
| .tabs { | |
| display: inline-flex; | |
| gap: 4px; | |
| padding: 4px; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--r-pill); | |
| margin-bottom: 28px; | |
| } | |
| .tab { | |
| border: 0; | |
| background: transparent; | |
| padding: 7px 16px; | |
| border-radius: var(--r-pill); | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--ink-50); | |
| cursor: pointer; | |
| transition: background 120ms ease, color 120ms ease; | |
| } | |
| .tab:hover { | |
| color: var(--ink); | |
| } | |
| .tab[aria-selected="true"] { | |
| background: var(--ink); | |
| color: #fff; | |
| } | |
| /* ---------- cards ---------- */ | |
| .card { | |
| background: var(--surface-raised); | |
| border: 1px solid var(--border); | |
| border-radius: var(--r-xl); | |
| padding: 22px; | |
| margin-bottom: 18px; | |
| } | |
| .card > h2 { | |
| margin: 0 0 4px; | |
| font-size: 15px; | |
| font-weight: 600; | |
| letter-spacing: -0.01em; | |
| } | |
| .card > .sub { | |
| margin: 0 0 18px; | |
| color: var(--ink-50); | |
| font-size: 13px; | |
| max-width: 68ch; | |
| } | |
| /* ---------- search ---------- */ | |
| .searchbar { | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| } | |
| .searchbar input { | |
| flex: 1; | |
| min-width: 0; | |
| padding: 13px 17px; | |
| background: var(--page); | |
| border: 1px solid var(--border-strong); | |
| border-radius: var(--r-pill); | |
| outline: none; | |
| transition: border-color 120ms ease, box-shadow 120ms ease; | |
| } | |
| .searchbar input::placeholder { | |
| color: var(--ink-35); | |
| } | |
| .searchbar input:focus { | |
| border-color: var(--ink); | |
| box-shadow: 0 0 0 3px rgba(9, 15, 21, 0.07); | |
| } | |
| .btn { | |
| padding: 13px 22px; | |
| background: var(--ink); | |
| color: #fff; | |
| border: 1px solid var(--ink); | |
| border-radius: var(--r-pill); | |
| font-weight: 500; | |
| cursor: pointer; | |
| white-space: nowrap; | |
| transition: opacity 120ms ease; | |
| } | |
| .btn:hover:not(:disabled) { | |
| opacity: 0.86; | |
| } | |
| .btn:disabled { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| } | |
| .chips { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 7px; | |
| margin-top: 14px; | |
| } | |
| .chip { | |
| padding: 6px 13px; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--r-pill); | |
| font-size: 13px; | |
| color: var(--ink-70); | |
| cursor: pointer; | |
| transition: border-color 120ms ease, color 120ms ease; | |
| } | |
| .chip:hover { | |
| border-color: var(--border-strong); | |
| color: var(--ink); | |
| } | |
| /* ---------- results ---------- */ | |
| .results { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| margin-top: 20px; | |
| } | |
| .voice { | |
| display: grid; | |
| grid-template-columns: 28px 1fr auto; | |
| gap: 14px; | |
| align-items: center; | |
| padding: 14px 16px; | |
| background: var(--surface-raised); | |
| border: 1px solid var(--border); | |
| border-radius: var(--r-lg); | |
| transition: border-color 120ms ease; | |
| } | |
| .voice:hover { | |
| border-color: var(--border-strong); | |
| } | |
| .voice .rank { | |
| color: var(--ink-35); | |
| font-size: 12px; | |
| text-align: right; | |
| } | |
| .voice .name { | |
| font-weight: 500; | |
| letter-spacing: -0.01em; | |
| } | |
| .voice .attrs { | |
| display: flex; | |
| gap: 6px; | |
| flex-wrap: wrap; | |
| margin-top: 5px; | |
| } | |
| .attr { | |
| padding: 2px 8px; | |
| background: var(--surface); | |
| border-radius: var(--r-pill); | |
| font-size: 11px; | |
| color: var(--ink-70); | |
| } | |
| .voice .right { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| } | |
| .scorewrap { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-end; | |
| gap: 5px; | |
| min-width: 84px; | |
| } | |
| .score { | |
| font-size: 13px; | |
| font-weight: 600; | |
| } | |
| .meter { | |
| width: 84px; | |
| height: 3px; | |
| background: var(--border); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| } | |
| .meter > span { | |
| display: block; | |
| height: 100%; | |
| background: var(--ink); | |
| } | |
| audio { | |
| height: 34px; | |
| width: 190px; | |
| } | |
| .linkish { | |
| border: 0; | |
| background: none; | |
| padding: 0; | |
| color: var(--ink-50); | |
| font-size: 12px; | |
| cursor: pointer; | |
| text-decoration: underline; | |
| text-underline-offset: 2px; | |
| } | |
| .linkish:hover { | |
| color: var(--ink); | |
| } | |
| /* ---------- tables ---------- */ | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 13px; | |
| } | |
| th { | |
| text-align: left; | |
| font-weight: 500; | |
| color: var(--ink-50); | |
| padding: 0 12px 9px 0; | |
| border-bottom: 1px solid var(--border); | |
| white-space: nowrap; | |
| } | |
| td { | |
| padding: 11px 12px 11px 0; | |
| border-bottom: 1px solid var(--border); | |
| vertical-align: middle; | |
| } | |
| tr:last-child td { | |
| border-bottom: 0; | |
| } | |
| .num { | |
| font-family: var(--mono); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .lift { | |
| font-family: var(--mono); | |
| font-weight: 500; | |
| } | |
| .lift.up { | |
| color: var(--positive); | |
| } | |
| .lift.down { | |
| color: var(--negative); | |
| } | |
| .tablewrap { | |
| overflow-x: auto; | |
| } | |
| /* ---------- scatter ---------- */ | |
| .scatter { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| background: var(--page); | |
| border: 1px solid var(--border); | |
| border-radius: var(--r-lg); | |
| } | |
| .legend { | |
| display: flex; | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| margin-top: 14px; | |
| font-size: 13px; | |
| color: var(--ink-70); | |
| } | |
| .legend span { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| } | |
| .swatch { | |
| width: 9px; | |
| height: 9px; | |
| border-radius: 50%; | |
| } | |
| .note { | |
| color: var(--ink-50); | |
| font-size: 13px; | |
| margin: 14px 0 0; | |
| max-width: 72ch; | |
| } | |
| .error { | |
| color: var(--negative); | |
| font-size: 13px; | |
| margin-top: 14px; | |
| } | |
| .empty { | |
| color: var(--ink-35); | |
| font-size: 13px; | |
| padding: 28px 0; | |
| text-align: center; | |
| } | |
| @media (max-width: 720px) { | |
| .voice { | |
| grid-template-columns: 24px 1fr; | |
| } | |
| .voice .right { | |
| grid-column: 1 / -1; | |
| justify-content: space-between; | |
| } | |
| audio { | |
| width: 100%; | |
| } | |
| } | |
| /* ---------- filters ---------- */ | |
| .filters { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| align-items: center; | |
| margin-top: 14px; | |
| } | |
| .select { | |
| appearance: none; | |
| padding: 7px 30px 7px 13px; | |
| background: var(--surface-raised); | |
| border: 1px solid var(--border); | |
| border-radius: var(--r-pill); | |
| font-size: 13px; | |
| color: var(--ink-70); | |
| cursor: pointer; | |
| transition: border-color 120ms ease, color 120ms ease; | |
| /* chevron drawn inline so the control needs no icon asset */ | |
| background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23090f15' stroke-opacity='.45' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 12px center; | |
| } | |
| .select:hover { | |
| border-color: var(--border-strong); | |
| color: var(--ink); | |
| } | |
| .select:focus { | |
| outline: none; | |
| border-color: var(--ink); | |
| } | |
| /* an applied filter reads as a solid token, matching the active tab */ | |
| .select.on { | |
| background-color: var(--ink); | |
| border-color: var(--ink); | |
| color: #fff; | |
| background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-opacity='.8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); | |
| } | |
| .note strong { | |
| color: var(--ink); | |
| font-weight: 600; | |
| } | |
| /* gradient chip for the heat legend: same ramp the scatter uses */ | |
| .ramp { | |
| width: 44px; | |
| height: 9px; | |
| border-radius: var(--r-pill); | |
| background: linear-gradient(90deg, #ebe8e4, #090f15); | |
| border: 1px solid var(--border); | |
| } | |