Spaces:
Runtime error
Runtime error
| /* ============================================================================ | |
| * ramco-chat — Wispr Flow-inspired design system | |
| * - Cream canvas, warm-ink body type, lilac action | |
| * - Instrument Serif for display, Inter for body, JetBrains Mono for trace | |
| * - Generous whitespace, soft pill controls, deliberate hierarchy | |
| * ========================================================================== */ | |
| :root { | |
| /* Canvas + ink */ | |
| --bg-cream: #F7F4E9; | |
| --bg-cream-deep: #EFEBDC; | |
| --bg-card: #FFFEF8; | |
| --bg-card-alt: #F2EEDD; | |
| --ink: #1A1A1A; | |
| --ink-soft: #4A4744; | |
| --ink-mute: #8C8780; | |
| --ink-faint: #B8B2A6; | |
| --hairline: #E6E0CC; | |
| --hairline-strong: #D6CFB8; | |
| /* Action palette */ | |
| --lilac: #DCC8F2; | |
| --lilac-deep: #C8AFE8; | |
| --lilac-faint: #F1E8FB; | |
| --lilac-ink: #4A2B7A; | |
| /* Signal colours */ | |
| --ok: #6F9968; | |
| --ok-soft: #E4EFD9; | |
| --warn: #C28A3B; | |
| --warn-soft: #F7E9CE; | |
| --err: #B5573E; | |
| --err-soft: #F3D9CE; | |
| --info: #5A7BA0; | |
| --info-soft: #DBE7F4; | |
| /* Type scale */ | |
| --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif; | |
| --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; | |
| --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; | |
| --radius-sm: 8px; | |
| --radius-md: 14px; | |
| --radius-lg: 22px; | |
| --radius-pill: 999px; | |
| --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04), 0 1px 3px rgba(26, 26, 26, 0.06); | |
| --shadow-md: 0 4px 14px rgba(26, 26, 26, 0.06), 0 1px 3px rgba(26, 26, 26, 0.04); | |
| --shadow-lg: 0 12px 32px rgba(26, 26, 26, 0.08); | |
| --col-trace-w: clamp(320px, 32vw, 440px); | |
| } | |
| * { box-sizing: border-box; } | |
| html, body, #root { height: 100%; } | |
| body { | |
| margin: 0; | |
| font-family: var(--font-body); | |
| font-size: 15px; | |
| line-height: 1.5; | |
| color: var(--ink); | |
| background: var(--bg-cream); | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| text-rendering: optimizeLegibility; | |
| } | |
| button { | |
| font-family: inherit; | |
| font-size: inherit; | |
| color: inherit; | |
| cursor: pointer; | |
| background: transparent; | |
| border: 0; | |
| } | |
| input, textarea, select { | |
| font-family: inherit; | |
| font-size: inherit; | |
| color: inherit; | |
| } | |
| ::selection { background: var(--lilac); color: var(--ink); } | |
| .serif { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; } | |
| .mono { font-family: var(--font-mono); font-size: 12.5px; } | |
| .muted { color: var(--ink-mute); } | |
| .faint { color: var(--ink-faint); } | |
| /* ---------- layout shell ---------- */ | |
| .app { | |
| height: 100vh; | |
| display: grid; | |
| grid-template-rows: auto 1fr; | |
| background: var(--bg-cream); | |
| } | |
| .app__body { | |
| display: grid; | |
| grid-template-columns: var(--col-trace-w) 1fr; | |
| min-height: 0; | |
| gap: 0; | |
| } | |
| .app__body--single { | |
| display: block; | |
| overflow-y: auto; | |
| } | |
| @media (max-width: 900px) { | |
| .app__body { grid-template-columns: 1fr; } | |
| .observability { display: none; } | |
| } | |
| /* ---------- header ---------- */ | |
| .header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 18px 28px 14px; | |
| border-bottom: 1px solid var(--hairline); | |
| } | |
| .header__brand { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 10px; | |
| } | |
| .header__logo { | |
| font-family: var(--font-display); | |
| font-size: 26px; | |
| letter-spacing: -0.02em; | |
| color: var(--ink); | |
| } | |
| .header__tag { | |
| font-size: 13px; | |
| color: var(--ink-mute); | |
| letter-spacing: 0.02em; | |
| } | |
| .header__right { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .header__nav { | |
| display: flex; | |
| margin-left: 18px; | |
| gap: 4px; | |
| align-items: center; | |
| } | |
| .header__nav-link { | |
| font-size: 13px; | |
| padding: 6px 12px; | |
| border-radius: var(--radius-pill); | |
| color: var(--ink-mute); | |
| background: transparent; | |
| border: 0; | |
| cursor: pointer; | |
| transition: all 120ms ease; | |
| } | |
| .header__nav-link:hover { | |
| background: var(--bg-card); | |
| color: var(--ink); | |
| } | |
| .header__nav-link--active { | |
| background: var(--lilac); | |
| color: var(--ink); | |
| font-weight: 500; | |
| } | |
| .header__nav-link--active:hover { | |
| background: var(--lilac); | |
| } | |
| .pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 16px; | |
| border-radius: var(--radius-pill); | |
| font-size: 13.5px; | |
| font-weight: 500; | |
| background: var(--bg-card); | |
| border: 1px solid var(--hairline); | |
| color: var(--ink); | |
| transition: background 120ms ease, transform 120ms ease, border-color 120ms ease; | |
| } | |
| .pill:hover { background: var(--bg-card-alt); } | |
| .pill:active { transform: translateY(1px); } | |
| .pill--primary { | |
| background: var(--lilac); | |
| border-color: var(--lilac-deep); | |
| color: var(--ink); | |
| } | |
| .pill--primary:hover { background: var(--lilac-deep); } | |
| .pill--ghost { | |
| background: transparent; | |
| border-color: transparent; | |
| color: var(--ink-mute); | |
| } | |
| .pill--ghost:hover { color: var(--ink); background: var(--bg-card); } | |
| .dot { | |
| width: 8px; height: 8px; border-radius: 50%; | |
| background: var(--ink-faint); | |
| display: inline-block; | |
| } | |
| .dot--ok { background: var(--ok); } | |
| .dot--warn { background: var(--warn); } | |
| .dot--err { background: var(--err); } | |
| /* ---------- observability (left) ---------- */ | |
| .observability { | |
| padding: 22px 22px 22px 28px; | |
| border-right: 1px solid var(--hairline); | |
| background: var(--bg-cream); | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 18px; | |
| min-width: 0; | |
| } | |
| .obs-section { display: flex; flex-direction: column; gap: 10px; } | |
| .obs-section__title { | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.14em; | |
| color: var(--ink-mute); | |
| font-weight: 600; | |
| } | |
| .obs-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--hairline); | |
| border-radius: var(--radius-md); | |
| padding: 14px 16px; | |
| } | |
| .obs-card__row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: baseline; | |
| gap: 10px; | |
| font-size: 13.5px; | |
| } | |
| .obs-card__row + .obs-card__row { margin-top: 6px; } | |
| .obs-journey { | |
| font-family: var(--font-display); | |
| font-size: 21px; | |
| line-height: 1.15; | |
| letter-spacing: -0.01em; | |
| } | |
| .obs-journey--empty { color: var(--ink-faint); font-style: italic; } | |
| .obs-status-line { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 13px; | |
| color: var(--ink-soft); | |
| } | |
| /* Big visible status badge: "Ready to create" / "Next: …" / "Blocked" */ | |
| .obs-status-badge { | |
| border-radius: var(--radius-md); | |
| padding: 12px 14px; | |
| border: 1px solid var(--hairline); | |
| background: var(--bg-card); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .obs-status-badge__title { | |
| font-family: var(--font-display); | |
| font-size: 19px; | |
| line-height: 1.15; | |
| letter-spacing: -0.005em; | |
| color: var(--ink); | |
| } | |
| .obs-status-badge__detail { | |
| font-size: 12.5px; | |
| color: var(--ink-soft); | |
| } | |
| .obs-status-badge__variant-locked { | |
| font-size: 11px; | |
| color: var(--ink-mute); | |
| font-family: var(--font-mono); | |
| letter-spacing: 0.04em; | |
| margin-top: 4px; | |
| } | |
| .obs-status-badge--ok { | |
| background: var(--ok-soft); | |
| border-color: var(--ok); | |
| } | |
| .obs-status-badge--ok .obs-status-badge__title { color: var(--ok); font-weight: 500; } | |
| .obs-status-badge--warn { | |
| background: var(--warn-soft); | |
| border-color: var(--warn); | |
| } | |
| .obs-status-badge--warn .obs-status-badge__title { color: var(--warn); } | |
| .obs-status-badge--err { | |
| background: var(--err-soft); | |
| border-color: var(--err); | |
| } | |
| .obs-status-badge--err .obs-status-badge__title { color: var(--err); } | |
| .obs-status-badge--neutral { | |
| background: var(--bg-card-alt); | |
| } | |
| .slot-row { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| gap: 8px; | |
| align-items: baseline; | |
| padding: 7px 0; | |
| border-bottom: 1px dashed var(--hairline); | |
| font-size: 13.5px; | |
| } | |
| .slot-row:last-child { border-bottom: 0; } | |
| .slot-row__key { | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| color: var(--ink-soft); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .slot-row__val { | |
| font-weight: 500; | |
| text-align: right; | |
| word-break: break-word; | |
| } | |
| .slot-empty { | |
| font-size: 13px; | |
| color: var(--ink-faint); | |
| font-style: italic; | |
| } | |
| /* trace stream */ | |
| .trace-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| max-height: 100%; | |
| } | |
| .trace-event { | |
| background: var(--bg-card); | |
| border: 1px solid var(--hairline); | |
| border-left: 3px solid var(--ink-faint); | |
| border-radius: 10px; | |
| padding: 9px 12px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .trace-event--turn { background: var(--bg-card-alt); border-left-color: var(--lilac-deep); } | |
| .trace-event--warn { border-left-color: var(--warn); background: var(--warn-soft); } | |
| .trace-event--err { border-left-color: var(--err); background: var(--err-soft); } | |
| .trace-event--phase { border-left-color: var(--info); } | |
| .trace-event--route { border-left-color: var(--lilac-deep); } | |
| .trace-event--reply { border-left-color: var(--ok); } | |
| .trace-event--resolve { border-left-color: #B69958; } | |
| .trace-event__head { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 11.5px; | |
| color: var(--ink-mute); | |
| } | |
| .trace-event__kind { | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| letter-spacing: 0.04em; | |
| color: var(--ink-soft); | |
| } | |
| .trace-event__turn { | |
| font-family: var(--font-mono); | |
| font-size: 10.5px; | |
| color: var(--ink-faint); | |
| } | |
| .trace-event__summary { | |
| font-size: 13px; | |
| color: var(--ink); | |
| line-height: 1.35; | |
| } | |
| /* ---------- chat (right) ---------- */ | |
| .chat { | |
| display: grid; | |
| grid-template-rows: auto 1fr auto; | |
| min-height: 0; | |
| position: relative; | |
| } | |
| .chat__scenarios { | |
| padding: 16px 28px 8px; | |
| display: flex; | |
| gap: 8px; | |
| overflow-x: auto; | |
| border-bottom: 1px dashed var(--hairline); | |
| } | |
| .chat__scenarios::-webkit-scrollbar { height: 6px; } | |
| .chat__scenarios::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 3px; } | |
| .scenario-chip { | |
| flex-shrink: 0; | |
| padding: 7px 14px; | |
| border-radius: var(--radius-pill); | |
| background: var(--bg-card); | |
| border: 1px solid var(--hairline); | |
| font-size: 12.5px; | |
| color: var(--ink-soft); | |
| transition: all 120ms ease; | |
| white-space: nowrap; | |
| } | |
| .scenario-chip:hover { | |
| background: var(--lilac-faint); | |
| border-color: var(--lilac-deep); | |
| color: var(--ink); | |
| } | |
| .scenario-chip__label { | |
| font-weight: 500; | |
| } | |
| .chat__thread { | |
| padding: 28px 28px 14px; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .chat__intro { | |
| margin: auto; | |
| text-align: center; | |
| max-width: 520px; | |
| padding: 40px 20px; | |
| } | |
| .chat__intro h1 { | |
| font-family: var(--font-display); | |
| font-size: 44px; | |
| line-height: 1.05; | |
| letter-spacing: -0.02em; | |
| margin: 0 0 16px; | |
| font-weight: 400; | |
| } | |
| .chat__intro h1 em { | |
| font-style: italic; | |
| color: var(--ink-mute); | |
| } | |
| .chat__intro p { | |
| color: var(--ink-soft); | |
| font-size: 15px; | |
| margin: 0 0 24px; | |
| } | |
| .bubble-row { | |
| display: flex; | |
| gap: 12px; | |
| align-items: flex-start; | |
| } | |
| .bubble-row--user { justify-content: flex-end; } | |
| .bubble { | |
| max-width: 78%; | |
| padding: 12px 16px; | |
| border-radius: 18px; | |
| font-size: 15px; | |
| line-height: 1.55; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .bubble--user { | |
| background: var(--ink); | |
| color: var(--bg-cream); | |
| border-bottom-right-radius: 4px; | |
| } | |
| .bubble--assistant { | |
| background: var(--bg-card); | |
| border: 1px solid var(--hairline); | |
| color: var(--ink); | |
| border-bottom-left-radius: 4px; | |
| } | |
| .bubble--system { | |
| background: var(--warn-soft); | |
| border: 1px solid var(--warn); | |
| color: var(--ink); | |
| font-style: italic; | |
| font-size: 13.5px; | |
| } | |
| .bubble-meta { | |
| font-size: 11px; | |
| color: var(--ink-faint); | |
| margin-top: 4px; | |
| font-family: var(--font-mono); | |
| } | |
| /* inline smart control after the latest assistant bubble */ | |
| .smart-control { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| margin: 4px 0 8px; | |
| padding-left: 0; | |
| } | |
| .smart-label { | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.12em; | |
| color: var(--ink-mute); | |
| font-weight: 600; | |
| } | |
| .option-grid { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .option-chip { | |
| padding: 8px 14px; | |
| border-radius: var(--radius-pill); | |
| background: var(--bg-card); | |
| border: 1px solid var(--hairline); | |
| font-size: 13.5px; | |
| color: var(--ink); | |
| transition: all 120ms ease; | |
| font-weight: 500; | |
| } | |
| .option-chip:hover { | |
| background: var(--lilac); | |
| border-color: var(--lilac-deep); | |
| } | |
| .option-chip:active { transform: translateY(1px); } | |
| .option-chip--journey { | |
| padding: 12px 18px; | |
| font-size: 14px; | |
| border-radius: var(--radius-md); | |
| text-align: left; | |
| background: var(--bg-card); | |
| border: 1px solid var(--hairline); | |
| flex-direction: column; | |
| align-items: flex-start; | |
| display: inline-flex; | |
| gap: 4px; | |
| } | |
| .option-chip--journey:hover { | |
| background: var(--lilac-faint); | |
| border-color: var(--lilac-deep); | |
| } | |
| .option-chip--journey small { | |
| font-size: 11.5px; | |
| color: var(--ink-mute); | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| } | |
| /* ---------- multi-slot form ---------- */ | |
| .msf { | |
| background: var(--bg-card); | |
| border: 1px solid var(--hairline); | |
| border-radius: var(--radius-lg); | |
| padding: 18px 20px; | |
| margin: 8px 0 12px; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .msf__title { | |
| font-family: var(--font-display); | |
| font-size: 22px; | |
| letter-spacing: -0.01em; | |
| color: var(--ink); | |
| margin-bottom: 4px; | |
| } | |
| .msf__hint { | |
| font-size: 12.5px; | |
| color: var(--ink-mute); | |
| margin-bottom: 16px; | |
| line-height: 1.5; | |
| } | |
| .msf__grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 12px 18px; | |
| } | |
| @media (max-width: 700px) { | |
| .msf__grid { grid-template-columns: 1fr; } | |
| } | |
| .msf__field { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| min-width: 0; | |
| } | |
| .msf__label { | |
| font-size: 11.5px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| color: var(--ink-mute); | |
| font-weight: 600; | |
| } | |
| .msf__input { | |
| font-family: var(--font-body); | |
| font-size: 14px; | |
| color: var(--ink); | |
| padding: 10px 12px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--hairline); | |
| background: var(--bg-cream); | |
| outline: none; | |
| transition: border-color 120ms ease, box-shadow 120ms ease; | |
| min-width: 0; | |
| } | |
| .msf__input:hover { border-color: var(--hairline-strong); } | |
| .msf__input:focus { | |
| border-color: var(--lilac-deep); | |
| box-shadow: 0 0 0 3px var(--lilac-faint); | |
| } | |
| .msf__input--select { | |
| appearance: none; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234A4744' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 12px center; | |
| background-size: 10px 7px; | |
| padding-right: 32px; | |
| cursor: pointer; | |
| } | |
| .msf__actions { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-top: 18px; | |
| padding-top: 14px; | |
| border-top: 1px dashed var(--hairline); | |
| } | |
| .msf__counter { | |
| font-size: 12px; | |
| color: var(--ink-mute); | |
| } | |
| .msf__submit { | |
| padding: 10px 22px; | |
| border-radius: var(--radius-pill); | |
| background: var(--lilac); | |
| border: 1px solid var(--lilac-deep); | |
| color: var(--ink); | |
| font-weight: 600; | |
| font-size: 14px; | |
| transition: background 120ms ease, transform 120ms ease; | |
| } | |
| .msf__submit:hover:not(:disabled) { | |
| background: var(--lilac-deep); | |
| } | |
| .msf__submit:active:not(:disabled) { | |
| transform: translateY(1px); | |
| } | |
| .msf__submit:disabled { | |
| background: var(--bg-card-alt); | |
| border-color: var(--hairline); | |
| color: var(--ink-faint); | |
| cursor: not-allowed; | |
| } | |
| .termination-card { | |
| background: var(--ok-soft); | |
| border: 1px solid var(--ok); | |
| border-radius: var(--radius-md); | |
| padding: 18px 20px; | |
| margin: 10px 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .termination-card__title { | |
| font-family: var(--font-display); | |
| font-size: 22px; | |
| letter-spacing: -0.01em; | |
| color: var(--ink); | |
| } | |
| .termination-card__sub { color: var(--ink-soft); font-size: 14px; } | |
| /* ---------- composer ---------- */ | |
| .composer { | |
| padding: 14px 28px 22px; | |
| border-top: 1px solid var(--hairline); | |
| background: var(--bg-cream); | |
| } | |
| .composer__box { | |
| display: flex; | |
| align-items: flex-end; | |
| gap: 10px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--hairline); | |
| border-radius: var(--radius-lg); | |
| padding: 10px 12px 10px 18px; | |
| box-shadow: var(--shadow-sm); | |
| transition: border-color 140ms ease, box-shadow 140ms ease; | |
| } | |
| .composer__box:focus-within { | |
| border-color: var(--lilac-deep); | |
| box-shadow: 0 0 0 4px var(--lilac-faint), var(--shadow-sm); | |
| } | |
| .composer__input { | |
| flex: 1; | |
| resize: none; | |
| border: 0; | |
| outline: 0; | |
| background: transparent; | |
| font-size: 15px; | |
| line-height: 1.5; | |
| max-height: 200px; | |
| padding: 6px 0; | |
| color: var(--ink); | |
| } | |
| .composer__input::placeholder { color: var(--ink-faint); } | |
| .composer__send { | |
| height: 36px; | |
| min-width: 36px; | |
| padding: 0 12px; | |
| border-radius: var(--radius-pill); | |
| background: var(--lilac); | |
| border: 1px solid var(--lilac-deep); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 13.5px; | |
| font-weight: 600; | |
| color: var(--ink); | |
| transition: all 120ms ease; | |
| } | |
| .composer__send:hover { background: var(--lilac-deep); } | |
| .composer__send:disabled { | |
| background: var(--bg-card-alt); | |
| border-color: var(--hairline); | |
| color: var(--ink-faint); | |
| cursor: not-allowed; | |
| } | |
| .composer__hint { | |
| margin: 8px 6px 0; | |
| font-size: 11.5px; | |
| color: var(--ink-faint); | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| /* ---------- modal/drawer ---------- */ | |
| .modal-backdrop { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(26, 26, 26, 0.18); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 50; | |
| padding: 24px; | |
| } | |
| .modal { | |
| width: min(640px, 100%); | |
| background: var(--bg-card); | |
| border: 1px solid var(--hairline); | |
| border-radius: var(--radius-lg); | |
| max-height: 84vh; | |
| display: flex; | |
| flex-direction: column; | |
| box-shadow: var(--shadow-lg); | |
| overflow: hidden; | |
| } | |
| .modal__head { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 18px 22px; | |
| border-bottom: 1px solid var(--hairline); | |
| } | |
| .modal__title { | |
| font-family: var(--font-display); | |
| font-size: 24px; | |
| letter-spacing: -0.01em; | |
| } | |
| .modal__body { | |
| padding: 14px 22px 22px; | |
| overflow-y: auto; | |
| } | |
| .scenario-card { | |
| display: block; | |
| width: 100%; | |
| text-align: left; | |
| padding: 14px 16px; | |
| border-radius: var(--radius-md); | |
| background: var(--bg-cream); | |
| border: 1px solid var(--hairline); | |
| margin-bottom: 10px; | |
| transition: all 130ms ease; | |
| } | |
| .scenario-card:hover { | |
| background: var(--lilac-faint); | |
| border-color: var(--lilac-deep); | |
| transform: translateY(-1px); | |
| } | |
| .scenario-card__title { | |
| font-weight: 600; | |
| font-size: 14.5px; | |
| margin-bottom: 4px; | |
| } | |
| .scenario-card__desc { | |
| color: var(--ink-mute); | |
| font-size: 13px; | |
| margin-bottom: 8px; | |
| } | |
| .scenario-card__prompt { | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| color: var(--ink-soft); | |
| background: var(--bg-cream-deep); | |
| padding: 8px 10px; | |
| border-radius: 8px; | |
| } | |
| .scenario-card__followups { | |
| margin-top: 10px; | |
| padding-top: 10px; | |
| border-top: 1px dashed var(--hairline); | |
| } | |
| .scenario-card__followups-label { | |
| font-size: 10.5px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.14em; | |
| color: var(--ink-mute); | |
| font-weight: 600; | |
| margin-bottom: 6px; | |
| } | |
| .scenario-card__followups ol { | |
| margin: 0; | |
| padding-left: 22px; | |
| font-family: var(--font-mono); | |
| font-size: 11.5px; | |
| color: var(--ink-soft); | |
| line-height: 1.55; | |
| } | |
| .scenario-card__followups li { | |
| margin-bottom: 2px; | |
| } | |
| /* connection chip */ | |
| .conn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 12px; | |
| color: var(--ink-mute); | |
| } | |
| /* scrollbar */ | |
| .observability::-webkit-scrollbar, | |
| .chat__thread::-webkit-scrollbar, | |
| .modal__body::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .observability::-webkit-scrollbar-thumb, | |
| .chat__thread::-webkit-scrollbar-thumb, | |
| .modal__body::-webkit-scrollbar-thumb { | |
| background: var(--hairline-strong); | |
| border-radius: 4px; | |
| } | |
| /* small spinner */ | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| .spinner { | |
| width: 14px; | |
| height: 14px; | |
| border-radius: 50%; | |
| border: 2px solid var(--lilac-faint); | |
| border-top-color: var(--lilac-deep); | |
| animation: spin 0.7s linear infinite; | |
| display: inline-block; | |
| } | |
| /* ---------- /comparison page ---------- */ | |
| .cmp { | |
| max-width: 900px; | |
| margin: 0 auto; | |
| padding: 48px 32px 96px; | |
| color: var(--ink); | |
| } | |
| .cmp__hero h1 { | |
| font-family: var(--font-display); | |
| font-size: 52px; | |
| letter-spacing: -0.02em; | |
| line-height: 1.05; | |
| margin: 0 0 18px; | |
| font-weight: 400; | |
| } | |
| .cmp__lede { | |
| font-size: 17px; | |
| line-height: 1.55; | |
| color: var(--ink-soft); | |
| margin: 0 0 12px; | |
| } | |
| .cmp__lede-meta { | |
| font-size: 13.5px; | |
| color: var(--ink-mute); | |
| border-left: 2px solid var(--hairline-strong); | |
| padding-left: 14px; | |
| margin: 18px 0 0; | |
| line-height: 1.55; | |
| } | |
| .cmp__section { | |
| margin-top: 56px; | |
| } | |
| .cmp__section h2 { | |
| font-family: var(--font-display); | |
| font-size: 30px; | |
| letter-spacing: -0.01em; | |
| margin: 0 0 14px; | |
| font-weight: 400; | |
| } | |
| .cmp__section h3 { | |
| font-family: var(--font-display); | |
| font-size: 21px; | |
| letter-spacing: -0.005em; | |
| margin: 30px 0 10px; | |
| font-weight: 400; | |
| color: var(--ink); | |
| } | |
| .cmp__section p { | |
| font-size: 15.5px; | |
| line-height: 1.6; | |
| color: var(--ink-soft); | |
| margin: 0 0 14px; | |
| } | |
| .cmp__section code { | |
| font-family: var(--font-mono); | |
| font-size: 12.5px; | |
| background: var(--bg-card-alt); | |
| padding: 1px 6px; | |
| border-radius: 4px; | |
| color: var(--ink-soft); | |
| } | |
| .cmp__list { | |
| margin: 14px 0; | |
| padding-left: 22px; | |
| font-size: 15.5px; | |
| line-height: 1.65; | |
| color: var(--ink-soft); | |
| } | |
| .cmp__list li { margin-bottom: 6px; } | |
| .cmp__list strong { color: var(--ink); } | |
| .cmp__list--big li { margin-bottom: 16px; } | |
| .cmp__cards { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| margin-top: 18px; | |
| } | |
| .cmp__card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--hairline); | |
| border-radius: var(--radius-md); | |
| padding: 18px 22px; | |
| border-left: 4px solid var(--hairline-strong); | |
| } | |
| .cmp__card--ours { | |
| border-left-color: var(--lilac-deep); | |
| background: var(--lilac-faint); | |
| } | |
| .cmp__card-name { | |
| font-family: var(--font-display); | |
| font-size: 22px; | |
| letter-spacing: -0.005em; | |
| margin-bottom: 6px; | |
| } | |
| .cmp__card-summary { | |
| font-size: 14.5px; | |
| color: var(--ink-soft); | |
| line-height: 1.55; | |
| } | |
| .cmp__table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 14px; | |
| margin: 14px 0 8px; | |
| } | |
| .cmp__table th, .cmp__table td { | |
| text-align: left; | |
| padding: 10px 14px; | |
| border-bottom: 1px solid var(--hairline); | |
| vertical-align: top; | |
| } | |
| .cmp__table th { | |
| font-size: 11.5px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| color: var(--ink-mute); | |
| font-weight: 600; | |
| border-bottom: 2px solid var(--hairline-strong); | |
| } | |
| .cmp__table tr:hover td { background: var(--bg-card); } | |
| .cmp__bad { color: var(--err); font-weight: 500; } | |
| .cmp__warn { color: var(--warn); font-weight: 500; } | |
| .cmp__good { color: var(--ok); font-weight: 500; } | |
| .cmp__table--scores th { text-align: center; } | |
| .cmp__table--scores td { text-align: center; } | |
| .cmp__table--scores td:first-child { text-align: left; font-weight: 500; } | |
| .cmp__score { | |
| font-family: var(--font-display); | |
| font-size: 24px; | |
| letter-spacing: -0.01em; | |
| } | |
| .cmp__score--best { color: var(--ok); } | |
| .cmp__score--high { color: #4a7a40; } | |
| .cmp__score--mid { color: var(--warn); } | |
| .cmp__score--low { color: var(--err); } | |
| .cmp__answer { | |
| font-size: 20px; | |
| font-family: var(--font-display); | |
| color: var(--ink); | |
| margin: 12px 0 18px; | |
| } | |
| .cmp__intel { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| margin-top: 18px; | |
| } | |
| .cmp__intel-row { | |
| background: var(--bg-card); | |
| border: 1px solid var(--hairline); | |
| border-radius: var(--radius-md); | |
| padding: 18px 22px; | |
| border-left: 4px solid var(--hairline-strong); | |
| } | |
| .cmp__intel-row--low { border-left-color: var(--err); } | |
| .cmp__intel-row--medium { border-left-color: var(--warn); } | |
| .cmp__intel-row--high-narrow { border-left-color: var(--info); } | |
| .cmp__intel-row--high { | |
| border-left-color: var(--lilac-deep); | |
| background: var(--lilac-faint); | |
| } | |
| .cmp__intel-name { | |
| font-family: var(--font-display); | |
| font-size: 22px; | |
| letter-spacing: -0.005em; | |
| display: inline-block; | |
| margin-right: 12px; | |
| } | |
| .cmp__intel-tag { | |
| display: inline-block; | |
| font-size: 11.5px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| color: var(--ink-mute); | |
| font-weight: 600; | |
| vertical-align: middle; | |
| } | |
| .cmp__intel-body { | |
| font-size: 14.5px; | |
| line-height: 1.6; | |
| color: var(--ink-soft); | |
| margin-top: 8px; | |
| } | |
| .cmp__intel-row--low .cmp__intel-tag { color: var(--err); } | |
| .cmp__intel-row--medium .cmp__intel-tag { color: var(--warn); } | |
| .cmp__intel-row--high-narrow .cmp__intel-tag { color: var(--info); } | |
| .cmp__intel-row--high .cmp__intel-tag { color: var(--lilac-ink); } | |
| .cmp__opinion { | |
| background: var(--bg-card); | |
| border: 1px solid var(--hairline); | |
| border-radius: var(--radius-lg); | |
| padding: 28px 32px; | |
| } | |
| .cmp__opinion h2 { margin-bottom: 8px; } | |
| /* --- v2 four-section layout ---------------------------------------------- */ | |
| .cmp__lede strong { color: var(--ink); } | |
| .cmp__figure { | |
| margin: 22px 0; | |
| padding: 14px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--hairline); | |
| border-radius: var(--radius-md); | |
| } | |
| .cmp__figure img { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| border-radius: var(--radius-sm); | |
| background: var(--bg-cream); | |
| } | |
| .cmp__figure-caption { | |
| margin-top: 10px; | |
| font-size: 12.5px; | |
| color: var(--ink-mute); | |
| text-align: center; | |
| font-style: italic; | |
| } | |
| .cmp__table--data td:first-child, | |
| .cmp__table--slots td:first-child, | |
| .cmp__table--apis td:first-child { | |
| width: auto; | |
| } | |
| .cmp__table--data td, | |
| .cmp__table--data th { font-size: 13.5px; padding: 8px 12px; } | |
| .cmp__yes { color: var(--ok); font-weight: 500; } | |
| .cmp__no { color: var(--ink-faint); } | |
| .cmp__takeaway { | |
| margin-top: 20px; | |
| padding: 14px 18px; | |
| background: var(--bg-card-alt); | |
| border-left: 3px solid var(--lilac-deep); | |
| border-radius: 0 var(--radius-sm) var(--radius-sm) 0; | |
| font-size: 14.5px; | |
| line-height: 1.6; | |
| color: var(--ink-soft); | |
| } | |
| .cmp__takeaway strong { color: var(--ink); } | |
| .cmp__conclusions { | |
| background: var(--lilac-faint); | |
| border: 1px solid var(--lilac-deep); | |
| border-radius: var(--radius-lg); | |
| padding: 32px 36px; | |
| margin-top: 56px; | |
| } | |
| .cmp__conclusions h2 { | |
| font-size: 32px; | |
| margin-bottom: 24px; | |
| } | |
| .cmp__decision { | |
| display: flex; | |
| gap: 18px; | |
| margin-bottom: 24px; | |
| } | |
| .cmp__decision:last-child { margin-bottom: 0; } | |
| .cmp__decision-num { | |
| flex-shrink: 0; | |
| width: 38px; | |
| height: 38px; | |
| border-radius: 50%; | |
| background: var(--lilac); | |
| border: 1px solid var(--lilac-deep); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-family: var(--font-display); | |
| font-size: 20px; | |
| color: var(--lilac-ink); | |
| } | |
| .cmp__decision-body { flex: 1; min-width: 0; } | |
| .cmp__decision-body h3 { | |
| font-family: var(--font-display); | |
| font-size: 21px; | |
| margin: 4px 0 8px; | |
| letter-spacing: -0.01em; | |
| font-weight: 400; | |
| } | |
| .cmp__decision-body p { | |
| font-size: 14.5px; | |
| line-height: 1.6; | |
| margin: 0 0 10px; | |
| } | |
| .cmp__decision-body ul { | |
| margin: 8px 0 0; | |
| padding-left: 20px; | |
| font-size: 14px; | |
| line-height: 1.55; | |
| color: var(--ink-soft); | |
| } | |
| .cmp__decision-body ul li { margin-bottom: 8px; } | |
| .cmp__decision-body strong { color: var(--ink); } | |
| .cmp__footer { | |
| border-top: 1px solid var(--hairline); | |
| margin-top: 56px; | |
| padding-top: 28px; | |
| } | |
| .cmp__footer h2 { | |
| font-size: 22px; | |
| color: var(--ink-mute); | |
| } | |
| .cmp__toc { | |
| margin: 18px 0 0; | |
| padding-left: 22px; | |
| font-size: 15px; | |
| line-height: 1.7; | |
| color: var(--ink-soft); | |
| } | |
| .cmp__toc li { margin-bottom: 4px; } | |
| .cmp__table--simple td, | |
| .cmp__table--simple th { | |
| font-size: 14px; | |
| padding: 10px 14px; | |
| vertical-align: top; | |
| } | |
| .cmp__table--simple td:first-child { | |
| white-space: nowrap; | |
| width: 110px; | |
| } | |
| .cmp__summary { | |
| background: var(--lilac-faint); | |
| border: 1px solid var(--lilac-deep); | |
| border-radius: var(--radius-lg); | |
| padding: 28px 32px; | |
| margin-top: 56px; | |
| } | |
| .cmp__summary h2 { | |
| font-size: 26px; | |
| margin-bottom: 14px; | |
| } | |
| .cmp__summary p { | |
| font-size: 15.5px; | |
| line-height: 1.65; | |
| margin: 0; | |
| } | |
| .cmp__summary strong { color: var(--ink); } | |